/* ==========================================================================
   Schlüsselheld — blog.css (Ratgeber index)
   Loads after main.css and reuses its tokens. Prefix: khb-
   ========================================================================== */

/* ---------- page shell ---------- */
body.page-blog { background: var(--white); }
.khb-main { display: block; }

/* ---------- inner hero ---------- */
.khb-hero {
    background:
        repeating-linear-gradient(135deg, var(--line-w2) 0 2px, transparent 2px 22px),
        var(--g-left),
        var(--blue);
    padding: 56px 0 60px;
    color: var(--white);
}
.khb-hero__in { min-width: 0; }
.khb-crumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    margin-bottom: 26px;
    font: 500 14px/1.4 var(--f-body); letter-spacing: .06em;
    color: var(--mist);
}
.khb-crumb a { color: var(--mist); }
.khb-crumb a:hover { color: var(--orange); }
.khb-crumb__sep { color: var(--mist); }
.khb-crumb__now { color: var(--white); }
.khb-hero .kh-eyebrow { margin-bottom: 14px; }
.khb-hero__title {
    max-width: 920px;
    font-size: var(--fs-h2); font-weight: 600; line-height: 1.1; letter-spacing: -.01em;
    color: var(--white); overflow-wrap: break-word; hyphens: auto;
}
.khb-hero .kh-bar { margin-top: 24px; }
.khb-hero__lead { margin-top: 22px; max-width: 700px; font-size: 17px; line-height: 1.55; color: var(--white); }

/* ---------- intro ---------- */
.khb-intro { padding: 80px 0 76px; background: var(--white); }
.khb-intro__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
    gap: 80px; align-items: center;
}
.khb-intro__txt { min-width: 0; }
.khb-intro__txt .kh-eyebrow { margin-bottom: 16px; }
.khb-intro__txt > p:not(.kh-eyebrow) { margin-top: 28px; max-width: 600px; font-size: 16px; line-height: 1.75; }

.khb-topics {
    min-width: 0; padding: 8px 34px;
    background: var(--white); border-radius: var(--r); box-shadow: var(--sh-3);
    border-top: 3px solid var(--orange);
}
.khb-topics li { position: relative; padding: 20px 0 20px 64px; min-width: 0; }
.khb-topics li + li { border-top: 1px dashed var(--line); }
.khb-topics li > img { position: absolute; left: 0; top: 50%; width: 44px; height: 44px; transform: translateY(-50%); }
.khb-topics h3 { font-size: 21px; line-height: 1.2; margin-bottom: 5px; color: var(--ink); overflow-wrap: break-word; }
.khb-topics p { font-size: 14px; line-height: 1.55; color: var(--text); }

/* ---------- article list ---------- */
.khb-list { padding: 84px 0 100px; background: var(--g-paper); }
.khb-list__head { margin-bottom: 44px; }
.khb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.khb-card {
    min-width: 0;
    background: var(--white); border-radius: var(--r); box-shadow: var(--sh-1);
    border-bottom: 3px solid var(--blue); overflow: hidden;
    transition: box-shadow var(--t), border-color var(--t);
}
.khb-card:hover { box-shadow: var(--sh-3); border-bottom-color: var(--orange); }
.khb-card__link { display: flex; flex-direction: column; height: 100%; }
.khb-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--line); }
.khb-card__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.khb-card:hover .khb-card__media > img { transform: scale(1.04); }
.khb-card__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: 26px 30px 30px; }
.khb-card__date { font-size: 14px; letter-spacing: .04em; color: var(--orange); margin-bottom: 10px; }
.khb-card__title {
    font-size: 23px; line-height: 1.2; margin-bottom: 14px; color: var(--ink);
    overflow-wrap: break-word; hyphens: auto; transition: color var(--t);
}
.khb-card:hover .khb-card__title { color: var(--orange); }
.khb-card__excerpt { flex: 1 1 auto; margin-bottom: 22px; font-size: 15px; line-height: 1.65; color: var(--text); overflow-wrap: break-word; }
.khb-card__more { align-self: flex-start; font: 700 16px/1 var(--f-body); color: var(--ink); transition: color var(--t); }
.khb-card:hover .khb-card__more { color: var(--blue); }

/* ---------- pagination ---------- */
.khb-pag { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 56px; }
.khb-pag__nums { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.khb-pag__num, .khb-pag__dots {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 46px; height: 46px; padding: 0 10px;
    border-radius: var(--r); font: 600 17px/1 var(--f-head);
}
.khb-pag__num {
    background: var(--white); border: 1px solid var(--line); color: var(--ink);
    transition: border-color var(--t), color var(--t), background-color var(--t);
}
a.khb-pag__num:hover { border-color: var(--blue); color: var(--blue); }
.khb-pag__num--active { background: var(--orange); border-color: var(--orange); color: var(--white); }
.khb-pag__dots { color: var(--muted); }
.khb-pag__btn {
    display: inline-flex; align-items: center; gap: 10px;
    height: 46px; padding: 0 20px;
    border-radius: var(--r); background: var(--blue); color: var(--white);
    font: 500 15px/1 var(--f-body); letter-spacing: .063em;
    transition: background-color var(--t);
}
.khb-pag__btn:hover { background: var(--orange); }
.khb-pag__btn img { width: 16px; height: 16px; flex: 0 0 auto; }
.khb-pag__btn--prev img { transform: rotate(180deg); }

/* ---------- closing CTA band ---------- */
.khb-cta {
    position: relative; overflow: hidden;
    padding: 84px 0;
    background: linear-gradient(110deg, var(--blue) 0%, var(--blue) 42%, var(--ink) 135%);
}
.khb-cta::before {
    content: ""; position: absolute; right: -40px; top: 50%; width: 380px; height: 380px;
    transform: translateY(-50%);
    background: url("/assets/icons/logo.svg") no-repeat center / contain;
    opacity: .08; pointer-events: none;
}
.khb-cta__in {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 60px; align-items: center;
}
.khb-cta__content { min-width: 0; max-width: 700px; }
.khb-cta .kh-eyebrow { margin-bottom: 14px; }
.khb-cta__title { font-size: 40px; line-height: 1.1; color: var(--white); margin-bottom: 20px; }
.khb-cta__text { font-size: 16px; line-height: 1.7; color: var(--white); }
.khb-cta__actions { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.khb-cta__btn { width: 100%; }
.khb-cta__btn img { width: 20px; height: 20px; }
.kh-btn--ghost.khb-cta__btn { color: var(--white); }
.kh-btn--ghost.khb-cta__btn img { width: 16px; height: 16px; }
.kh-btn--ghost.khb-cta__btn:hover { color: var(--orange); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
    .khb-intro__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 56px; }
    .khb-card__body { padding: 24px 24px 26px; }
    .khb-card__title { font-size: 21px; }
    .khb-cta__title { font-size: 36px; }
    .khb-cta__in { gap: 44px; }
}

@media (max-width: 1024px) {
    .khb-hero { padding: 40px 0 46px; }
    .khb-crumb { margin-bottom: 20px; }
    .khb-hero__lead { font-size: 16px; margin-top: 18px; }
    .khb-hero .kh-bar { margin-top: 20px; }

    .khb-intro { padding: 64px 0 60px; }
    .khb-intro__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .khb-intro__txt > p:not(.kh-eyebrow) { max-width: 760px; margin-top: 22px; }
    .khb-topics { max-width: 680px; }

    .khb-list { padding: 64px 0 76px; }
    .khb-list__head { margin-bottom: 36px; }
    .khb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

    .khb-cta { padding: 64px 0; }
    .khb-cta__in { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .khb-cta__actions { flex-direction: row; flex-wrap: wrap; }
    .khb-cta__btn { width: auto; }
    .khb-cta__title { font-size: 34px; }
    .khb-cta::before { width: 300px; height: 300px; right: -70px; }
}

@media (max-width: 768px) {
    .khb-topics { padding: 6px 24px; }
    .khb-topics li { padding: 18px 0 18px 58px; }
    .khb-topics li > img { width: 40px; height: 40px; }
    .khb-topics h3 { font-size: 19px; }

    .khb-list { padding: 56px 0 64px; }
    .khb-card__body { padding: 20px 20px 22px; }
    .khb-card__title { font-size: 19px; margin-bottom: 10px; }
    .khb-card__excerpt { font-size: 14px; margin-bottom: 18px; }
    .khb-card__more { font-size: 15px; }
    .khb-pag { margin-top: 44px; }

    .khb-cta { padding: 56px 0; }
    .khb-cta__title { font-size: 30px; }
    .khb-cta__text { font-size: 15px; }
}

@media (max-width: 600px) {
    .khb-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .khb-card__title { font-size: 21px; }
}

@media (max-width: 480px) {
    .khb-hero { padding: 36px 0 40px; }
    .khb-crumb { font-size: 13px; margin-bottom: 16px; }
    .khb-hero .kh-eyebrow { margin-bottom: 10px; }
    .khb-hero .kh-bar { width: 72px; margin-top: 16px; }
    .khb-hero__lead { font-size: 15px; margin-top: 16px; }

    .khb-intro { padding: 44px 0 44px; }
    .khb-intro__grid { gap: 30px; }
    .khb-intro__txt > p:not(.kh-eyebrow) { font-size: 15px; line-height: 1.7; margin-top: 18px; }
    .khb-topics { padding: 4px 18px; }
    .khb-topics li { padding: 16px 0 16px 50px; }
    .khb-topics li > img { width: 34px; height: 34px; }
    .khb-topics h3 { font-size: 18px; }
    .khb-topics p { font-size: 13px; }

    .khb-list { padding: 44px 0 52px; }
    .khb-list__head { margin-bottom: 26px; }
    .khb-card__title { font-size: 19px; }
    .khb-pag { gap: 10px; margin-top: 36px; }
    .khb-pag__nums { gap: 6px; }
    .khb-pag__num, .khb-pag__dots { min-width: 40px; height: 40px; font-size: 16px; }
    .khb-pag__btn { height: 40px; padding: 0 14px; }
    .khb-pag__btn { position: relative; }
    .khb-pag__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

    .khb-cta { padding: 44px 0; }
    .khb-cta__title { font-size: 26px; margin-bottom: 14px; }
    .khb-cta__text { font-size: 14px; }
    .khb-cta__actions { flex-direction: column; }
    .khb-cta__btn { width: 100%; }
    .khb-cta::before { width: 220px; height: 220px; right: -60px; top: 24px; transform: none; }
}

@media (max-width: 375px) {
    .khb-hero { padding: 32px 0 36px; }
    .khb-crumb { font-size: 12px; letter-spacing: .04em; }
    .khb-topics { padding: 2px 14px; }
    .khb-topics li { padding: 14px 0 14px 44px; }
    .khb-topics li > img { width: 30px; height: 30px; }
    .khb-card__body { padding: 18px 16px 20px; }
    .khb-card__title { font-size: 18px; }
    .khb-pag__num, .khb-pag__dots { min-width: 36px; height: 36px; padding: 0 8px; font-size: 15px; }
    .khb-pag__btn { height: 36px; padding: 0 12px; }
    .khb-cta__title { font-size: 24px; }
    .khb-cta .kh-btn--lg { padding: 14px 18px; }
}