/* SüdFin – Krankenkassenvergleich
   Separat nach der bestehenden app.css laden. */

.kkv-page {
    --kkv-navy: var(--color-primary, #0c3148);
    --kkv-blue: var(--color-secondary, #0096c7);
    --kkv-blue-dark: var(--color-secondary, #0096c7);
    --kkv-soft: var(--color-tertiary, #f2f7fa);
    --kkv-text: #405665;
    --kkv-white: var(--color-bg, #fff);
    color: var(--kkv-navy);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    line-height: 1.65;
    overflow: visible !important;
}

.kkv-page *,
.kkv-page *::before,
.kkv-page *::after { box-sizing: border-box; }

.kkv-page h1,
.kkv-page h2,
.kkv-page h3,
.kkv-page p { margin-top: 0; }

.kkv-page h1,
.kkv-page h2,
.kkv-page h3 {
    color: inherit;
    font-weight: 400;
    line-height: 1.18;
}

.kkv-page h1 { margin-bottom: 28px; font-size: clamp(48px, 5vw, 88px); letter-spacing: -.055em; }
.kkv-page h2 { margin-bottom: 20px; font-size: clamp(44px, 4.4vw, 78px); letter-spacing: -.055em; }
.kkv-page h3 { margin-bottom: 12px; font-size: 1.25rem; }
.kkv-page p { color: var(--kkv-text); }

.kkv-container { width: 100%; margin-inline: auto; }
.kkv-container--narrow { max-width: 880px; }

.kkv-section { padding: 110px 5%; background: var(--kkv-white); }
.kkv-section--soft { background: var(--kkv-soft); }
.kkv-section--dark { color: var(--kkv-white); background: var(--kkv-navy); }

.kkv-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 26px;
    padding: 10px 22px;
    border-radius: 999px;
    color: var(--kkv-blue-dark);
    background: var(--kkv-soft);
    font-size: .95rem;
    line-height: 1;
}

.kkv-eyebrow--light { color: var(--kkv-white); background: rgba(255,255,255,.1); }

.kkv-section-heading { width: 100%; max-width: none; margin-bottom: 48px; }
.kkv-section-heading h2 { width: 100%; max-width: none; }
.kkv-section-heading > p { max-width: 720px; margin-bottom: 0; font-size: 1.08rem; }
.kkv-section-heading--light h2,
.kkv-section-heading--light p { color: var(--kkv-white); }
.kkv-section-heading--light p { color: #c9d9e3; }
.kkv-section-heading--center { margin-inline: auto; text-align: center; }

.kkv-link-button { display: inline-flex; align-items: center; min-height: 54px; padding: 0 38px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; color: #fff; text-decoration: none; }
.kkv-link-button:hover { border-color: #fff; color: #fff; }

.kkv-hero { padding: 100px 5% 110px; overflow: visible !important; color: var(--kkv-white); background: var(--kkv-navy); }
.kkv-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr); align-items: start; gap: 70px; overflow: visible !important; }
.kkv-hero__content,
.kkv-calculator { align-self: start; min-width: 0; }

.kkv-hero__content { grid-column: 1; }
.kkv-calculator { grid-column: 2; }

.kkv-hero__content {
    position: relative;
    z-index: 2;
    height: max-content;
    min-height: 0;
}

.kkv-hero__content.is-fixed {
    position: fixed;
    top: 110px;
    left: var(--kkv-sticky-left);
    width: var(--kkv-sticky-width);
}

.kkv-hero__content.is-ended {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: var(--kkv-sticky-width);
}
.kkv-hero h1 { color: var(--kkv-white); }
.kkv-lead { max-width: 670px; margin-bottom: 30px; color: #d4e1e9 !important; font-size: 1.13rem; }

.kkv-checklist { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.kkv-checklist li { position: relative; padding-left: 34px; color: #fff; }
.kkv-checklist li::before {
    position: absolute;
    top: .24em;
    left: 0;
    width: 20px;
    height: 20px;
    border: 1px solid var(--kkv-blue);
    border-radius: 50%;
    color: #74d5f0;
    content: "✓";
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

.kkv-hero__action {
    margin-top: 36px;
}

.kkv-calculator__frame { overflow: hidden; min-height: 800px; border-radius: 22px; background: var(--kkv-white); box-shadow: 0 28px 70px rgba(0,0,0,.25); }
.kkv-calculator__frame iframe { display: block; width: 100%; min-height: 800px; border: 0; }
.kkv-calculator__note { margin: 14px 0 0; color: #a9bfcc !important; font-size: .78rem; text-align: center; }

.kkv-notice { color: var(--kkv-white); background: var(--kkv-blue); }
.kkv-notice { padding-inline: 5%; }
.kkv-notice__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px; padding-block: 18px; text-align: center; }

.kkv-fact-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.kkv-card { padding: 42px 36px; border: 1px solid rgba(12,49,72,.08); border-radius: 20px; background: var(--kkv-white); transition: transform var(--transition-standard, .25s ease), box-shadow var(--transition-standard, .25s ease), border-color var(--transition-standard, .25s ease); }
.kkv-card:hover { transform: translateY(-6px); border-color: rgba(0,150,199,.22); box-shadow: 0 24px 60px rgba(12,49,72,.08); }
.kkv-fact { padding: 32px 28px; background: #f8fbfd; }
.kkv-fact__value { display: block; margin-bottom: 18px; color: var(--kkv-blue); font-size: 2rem; font-weight: 400; line-height: 1; }
.kkv-fact p, .kkv-benefit p { margin-bottom: 0; font-size: .92rem; }
.kkv-fact h3 { font-size: 1.05rem; }
.kkv-highlight { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 30px; padding: 38px 42px; border-radius: 24px; color: var(--kkv-white); background: var(--kkv-navy); }
.kkv-highlight h3 { margin-bottom: 6px; font-size: 1.55rem; }
.kkv-highlight p { max-width: 690px; margin-bottom: 0; color: #c9d9e3; }

.kkv-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.kkv-benefit__icon { display: grid; width: 54px; height: 54px; place-items: center; margin-bottom: 24px; border-radius: 50%; color: var(--kkv-white); background: var(--kkv-blue); font-size: 1.25rem; }
.kkv-benefit small { display: block; margin-top: 18px; color: #6f818d; }

.kkv-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.kkv-steps li { padding-top: 24px; border-top: 1px solid #bad0dc; }
.kkv-steps li > span { display: block; margin-bottom: 28px; color: var(--kkv-blue); font-size: .85rem; letter-spacing: .08em; }
.kkv-steps p { margin-bottom: 0; font-size: .94rem; }

.kkv-protection-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 34px; }
.kkv-protection-grid article { padding: 26px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(255,255,255,.055); }
.kkv-protection-grid p { margin-bottom: 0; color: #c9d9e3; font-size: .9rem; }

.kkv-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.kkv-feature { padding-top: 24px; border-top: 1px solid #bad0dc; }
.kkv-feature > span { display: block; margin-bottom: 24px; color: var(--kkv-blue); font-size: .82rem; letter-spacing: .08em; }
.kkv-feature p { margin-bottom: 0; }

.kkv-final { padding: 110px 5%; color: var(--kkv-white); background: var(--kkv-navy); }
.kkv-final__inner { max-width: 900px; text-align: center; }
.kkv-final h2 { color: var(--kkv-white); }
.kkv-final p { color: #c9d9e3; font-size: 1.1rem; }
.kkv-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

@media (max-width: 1100px) {
    .kkv-hero__grid { grid-template-columns: 1fr; }
    .kkv-hero__content,
    .kkv-calculator { grid-column: 1; }
    .kkv-hero__content,
    .kkv-hero__content.is-fixed,
    .kkv-hero__content.is-ended {
        position: static;
        width: auto;
    }
    .kkv-calculator { max-width: 760px; }
    .kkv-fact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kkv-steps, .kkv-protection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .kkv-section { padding: 80px 5%; }
    .kkv-hero { padding: 72px 5% 80px; }
    .kkv-hero__grid { gap: 50px; }
    .kkv-section-heading { margin-bottom: 34px; }
    .kkv-fact-grid, .kkv-two-column, .kkv-steps, .kkv-protection-grid, .kkv-feature-grid { grid-template-columns: 1fr; }
    .kkv-highlight { align-items: flex-start; flex-direction: column; padding: 30px 26px; }
    .kkv-calculator__frame { min-height: 800px; }
    .kkv-calculator__frame iframe { min-height: 800px; }
    .kkv-card { padding: 26px; }
    .kkv-final { padding: 72px 0; }
    .kkv-actions .btn, .kkv-link-button { width: 100%; justify-content: center; padding-inline: 28px; }
    .kkv-actions { flex-direction: column; }
}