/* ==========================================================
   zahnkosten-rechner.de – Gestaltung "Kostenplan" (2026)
   Leitidee: sauber gesetzter Heil- und Kostenplan. Linien und
   Tabellenzeilen, rechtsbündige Beträge, doppelter Summenstrich,
   Textmarker-Gelb nur hinter der Zahl "Ihr Eigenanteil".
   Schriften: Charis SIL Bold (Überschriften), Fira Sans (Text,
   Tabellen, Ziffern), beide OFL, selbst gehostet (/fonts/LIZENZEN.md).
   ========================================================== */

/* ---------- Schriften ---------- */
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/fira-sans-400-lat.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/fira-sans-400-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/fira-sans-600-lat.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/fira-sans-600-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Charis SIL';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/charis-sil-700-lat.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Charis SIL';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/charis-sil-700-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Metrisch angeglichene Ersatzschriften gegen Layoutsprünge beim Schriftwechsel */
@font-face {
    font-family: 'Fira Sans Ersatz';
    src: local('Arial'), local('Helvetica'), local('Roboto');
    size-adjust: 100.96%;
    ascent-override: 92.61%;
    descent-override: 26.25%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Charis SIL Ersatz';
    font-weight: 700;
    src: local('Georgia Bold'), local('Georgia-Bold'), local('Times New Roman Bold');
    size-adjust: 92.52%;
    ascent-override: 129.30%;
    descent-override: 47.50%;
    line-gap-override: 0%;
}

/* ---------- Gestaltungs-Tokens ---------- */
:root {
    /* Farben */
    --tinte: #1B2230;          /* Text, Linien, Summenstrich */
    --papier: #FCFCFA;         /* Seitengrund */
    --kassenblau: #24507E;     /* Links, Hauptknöpfe */
    --kassenblau-tief: #1A3C60;/* Hover */
    --kassenblau-hell: #E9EEF4;/* Hover-Fläche heller Knöpfe */
    --marker: #FFE76A;         /* nur hinter "Ihr Eigenanteil" */
    --text-2: #4A5361;         /* Nebentext */
    --linie: #C9CDD3;          /* Tabellenzeilen */
    --linie-feld: #6B7380;     /* Feldrahmen, Formulare (≥ 3:1) */
    --flaeche: #F0F1F2;        /* ruhige Fläche, Partner-Kasten */
    --fehler: #9F1D1D;         /* nur Fehlermeldungen in Formularen (7,7:1) */

    /* Schrift */
    --schrift-text: 'Fira Sans', 'Fira Sans Ersatz', Arial, sans-serif;
    --schrift-titel: 'Charis SIL', 'Charis SIL Ersatz', Georgia, serif;
    --fs-klein: 1rem;          /* 16 px: Fußnoten, Tabellenköpfe */
    --fs-text: 1.125rem;       /* 18 px: Fließtext */
    --fs-h3: 1.375rem;         /* 22 px */
    --fs-h2: 1.625rem;         /* 26 px, ab 960 px 32 px */
    --fs-h1: 2rem;             /* 32 px, ab 960 px 44 px */
    --fs-betrag: 1.75rem;      /* große Beträge */
    --zeilenhoehe: 1.6;

    /* Abstände */
    --a1: 0.25rem;
    --a2: 0.5rem;
    --a3: 1rem;
    --a4: 1.5rem;
    --a5: 2rem;
    --a6: 3rem;
    --a7: 4.5rem;

    /* Maße */
    --breite-seite: 72rem;
    --breite-text: 33rem;      /* höchstens 70 Zeichen bei 18 px Fira Sans */
    --breite-spalte: 46rem;    /* Artikel inkl. Tabellen */
    --randspalte: 17.5rem;     /* Überschriften-Spalte der Startseite */
    --radius: 2px;
    --kopf-hoehe: 4rem;

    /* Übergangs-Aliase für Inline-Stile der noch nicht umgestellten Seiten */
    --color-primary: var(--kassenblau);
    --color-primary-dark: var(--kassenblau-tief);
    --color-primary-light: var(--kassenblau-hell);
    --color-text: var(--tinte);
    --color-text-light: var(--text-2);
    --color-text-muted: var(--text-2);
    --color-bg: var(--papier);
    --color-bg-light: var(--flaeche);
    --color-border: var(--linie);
    --color-border-light: var(--linie);
    --color-success: var(--kassenblau);
    --color-danger: var(--tinte);
    --color-warning: var(--tinte);
    --font-size-xs: var(--fs-klein);
    --font-size-sm: var(--fs-klein);
    --font-size-base: var(--fs-text);
    --font-size-lg: 1.25rem;
    --spacing-xs: var(--a1);
    --spacing-sm: var(--a2);
    --spacing-md: var(--a3);
    --spacing-lg: var(--a4);
    --spacing-xl: var(--a5);
    --spacing-2xl: var(--a6);
}
@media (min-width: 960px) {
    :root {
        --fs-h2: 2rem;
        --fs-h1: 2.75rem;
        --fs-betrag: 2.125rem;
        --kopf-hoehe: 4.5rem;
    }
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
body {
    font-family: var(--schrift-text);
    font-size: var(--fs-text);
    line-height: var(--zeilenhoehe);
    color: var(--tinte);
    background: var(--papier);
    font-variant-numeric: lining-nums;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 {
    font-family: var(--schrift-titel);
    font-weight: 700;
    line-height: 1.2;
    color: var(--tinte);
    font-variant-numeric: lining-nums;
}
h1 { font-size: var(--fs-h1); margin-bottom: var(--a3); }
@media (max-width: 639px) {
    h1 { font-size: clamp(1.625rem, 7.6vw, 2rem); }
    h1, h2 { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: break-word; }
}
h2 { font-size: var(--fs-h2); margin: var(--a6) 0 var(--a3); }
h3 { font-size: var(--fs-h3); margin: var(--a5) 0 var(--a2); line-height: 1.3; }
h4 { font-size: 1.25rem; margin: var(--a4) 0 var(--a2); }
p { margin-bottom: var(--a3); max-width: var(--breite-text); }
ul, ol { margin: 0 0 var(--a3) 1.4em; max-width: var(--breite-text); }
li { margin-bottom: var(--a2); padding-left: 0.2em; }
li::marker { color: var(--text-2); }
strong, b { font-weight: 600; }
small { font-size: var(--fs-klein); }
a {
    color: var(--kassenblau);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}
a:hover { color: var(--kassenblau-tief); text-decoration-thickness: 2px; }
:focus-visible {
    outline: 3px solid var(--tinte);
    outline-offset: 2px;
}
mark { background: var(--marker); color: var(--tinte); }
hr { border: 0; border-top: 1px solid var(--linie); margin: var(--a5) 0; }
.klein, .text-klein { font-size: var(--fs-klein); color: var(--text-2); }
.nowrap { white-space: nowrap; }
.nur-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Seitenraster ---------- */
.seite,
.container {
    max-width: var(--breite-seite);
    margin: 0 auto;
    padding: 0 1.125rem;
}
.spalte { max-width: var(--breite-spalte); }
@media (min-width: 640px) {
    .seite,
    .container { padding: 0 var(--a5); }
}

/* Startseite: Abschnitte als "Teile" des Kostenplans, Überschrift in der Randspalte */
.teil {
    border-top: 1px solid var(--tinte);
    padding: var(--a5) 0 var(--a6);
}
.teil-titel,
.teil-titel h2 {
    margin-top: 0;
    font-size: var(--fs-h2);
}
.teil-titel p { color: var(--text-2); margin: 0 0 var(--a3); }
.teil-inhalt > .begriffe:first-child,
.teil-inhalt > .faq-liste:first-child { border-top: 0; }
.teil-inhalt > .begriffe:first-child .begriff:first-child { padding-top: 0; }
.teil-intro { color: var(--tinte); }
.teil--ohne-linie { border-top: 0; padding-top: 0; }
@media (min-width: 960px) {
    .teil { padding: var(--a5) 0 var(--a7); }
    .teil-titel,
    .teil-titel h2 { font-size: 1.75rem; }
    .teil-raster {
        display: grid;
        grid-template-columns: var(--randspalte) minmax(0, 1fr);
        column-gap: var(--a6);
        align-items: start;
    }
    .teil-raster > .teil-titel { grid-column: 1; }
    .teil-raster > .teil-inhalt { grid-column: 2; max-width: var(--breite-spalte); }
}

/* ---------- Kopf ---------- */
.navbar {
    background: var(--papier);
    border-bottom: 1px solid var(--tinte);
}
.navbar .seite {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--a3);
    min-height: var(--kopf-hoehe);
}
.navbar-logo {
    font-family: var(--schrift-titel);
    font-weight: 700;
    font-size: 1.1875rem;
    line-height: 1.1;
    color: var(--tinte);
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    min-height: 48px;
    padding: var(--a2) 0;
    white-space: nowrap;
}
/* Wortzeichen: doppelter Summenstrich unter dem Namen */
.navbar-logo::after {
    content: '';
    display: block;
    height: 6px;
    margin-top: 3px;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}
.navbar-logo:hover { color: var(--tinte); }
@media (max-width: 399px) {
    .navbar-logo { font-size: 1.0625rem; }
}
.nav-links {
    display: none;
    list-style: none;
    margin: 0;
    gap: var(--a1);
    max-width: none;
}
.nav-links li { margin: 0; padding: 0; }
.nav-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--a3);
    color: var(--tinte);
    text-decoration: none;
    font-size: 1.0625rem;
}
.nav-links a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.nav-links a.active,
.nav-links a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 0.35em;
}
.mobile-toggle {
    display: inline-grid;
    grid-template-columns: 20px auto;
    grid-template-rows: 2px 2px 2px;
    row-gap: 5px;
    column-gap: var(--a2);
    align-content: center;
    align-items: center;
    min-height: 48px;
    min-width: 48px;
    padding: 0 var(--a2);
    margin-right: calc(var(--a2) * -1);
    background: none;
    border: 0;
    color: var(--tinte);
    font: 600 1.0625rem/1 var(--schrift-text);
    cursor: pointer;
}
/* drei Striche als Symbol, daneben das Wort */
.mobile-toggle span {
    grid-column: 1;
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
}
.mobile-toggle::after { content: 'Menü'; grid-column: 2; grid-row: 1 / 4; }
.mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-toggle[aria-expanded="true"] span:nth-child(2) { visibility: hidden; }
.mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-overlay {
    display: none;
    position: fixed;
    top: var(--kopf-hoehe);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: var(--papier);
    overflow-y: auto;
    padding: var(--a2) 1.125rem var(--a6);
    border-top: 1px solid var(--tinte);
}
.nav-overlay.is-open { display: block; }
.nav-links-mobile { list-style: none; margin: 0; max-width: none; }
.nav-links-mobile li { margin: 0; padding: 0; }
.nav-links-mobile a {
    display: flex;
    align-items: center;
    min-height: 56px;
    border-bottom: 1px solid var(--linie);
    color: var(--tinte);
    text-decoration: none;
    font-size: 1.25rem;
}
body.nav-open { overflow: hidden; }
@media (min-width: 1024px) {
    .nav-links { display: flex; }
    .mobile-toggle { display: none; }
    .nav-overlay { display: none !important; }
}

/* ---------- Knöpfe ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.625rem 1.25rem;
    border: 2px solid var(--kassenblau);
    border-radius: var(--radius);
    font: 600 var(--fs-text)/1.25 var(--schrift-text);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.btn-primary,
.btn-success {
    background: var(--kassenblau);
    color: #fff;
}
.btn-primary:hover,
.btn-success:hover {
    background: var(--kassenblau-tief);
    border-color: var(--kassenblau-tief);
    color: #fff;
    text-decoration: none;
}
.btn-outline,
.btn-back,
.btn-ghost {
    background: var(--papier);
    color: var(--kassenblau);
}
.btn-outline:hover,
.btn-back:hover,
.btn-ghost:hover {
    background: var(--kassenblau-hell);
    color: var(--kassenblau-tief);
    text-decoration: none;
}
.btn-lg { min-height: 52px; padding: 0.75rem 1.5rem; }
.btn-sm { min-height: 44px; padding: 0.5rem 1rem; font-size: 1.0625rem; }
.knopf-reihe {
    display: flex;
    flex-direction: column;
    gap: var(--a2);
    margin-top: var(--a3);
}
@media (min-width: 640px) {
    .knopf-reihe { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* ---------- Tabellen ---------- */
.table-responsive {
    overflow-x: auto;
    margin: var(--a3) 0 var(--a4);
}
.table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums lining-nums;
    font-size: var(--fs-text);
}
.table caption {
    text-align: left;
    font-weight: 600;
    padding-bottom: var(--a2);
}
.table th,
.table td {
    text-align: left;
    vertical-align: top;
    padding: 0.75rem 1rem 0.75rem 0;
    border-bottom: 1px solid var(--linie);
}
.table th:last-child,
.table td:last-child { padding-right: 0; }
.table thead th {
    font-size: var(--fs-klein);
    font-weight: 600;
    color: var(--text-2);
    border-bottom: 1px solid var(--tinte);
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
}
.table .betrag,
.betrag {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums lining-nums;
}
.table tr.summe th,
.table tr.summe td {
    font-weight: 600;
    border-top: 1px solid var(--tinte);
    border-bottom: 4px double var(--tinte);
}
/* Mehrspaltige Tabellen werden am Handy und auf schmalen Tablets (bis 799 px) zu Blöcken je Zeile; darüber passen auch 5–6 Spalten ohne Querscroll */
@media (max-width: 799px) {
    .table--stapel thead {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);
    }
    .table--stapel,
    .table--stapel tbody,
    .table--stapel tr,
    .table--stapel td { display: block; width: 100%; }
    .table--stapel tr {
        border-top: 1px solid var(--tinte);
        padding: var(--a3) 0 var(--a2);
    }
    .table--stapel tr:last-child { border-bottom: 1px solid var(--tinte); }
    .table--stapel td {
        border: 0;
        padding: 0.125rem 0;
        text-align: left;
        white-space: normal;
    }
    .table--stapel td[data-label]::before {
        content: attr(data-label) ': ';
        color: var(--text-2);
    }
    .table--stapel td:first-child {
        font-weight: 600;
        font-size: 1.1875rem;
        padding-bottom: var(--a1);
    }
    .table--stapel td:first-child::before { content: none; }
    .table--stapel td .btn { width: 100%; margin-top: var(--a2); }
    .table--stapel td.betrag { text-align: left; white-space: normal; }
}

/* ---------- Rechnung (Hero, Rechenbeispiele, Rechner-Ergebnis) ---------- */
.rechnung { margin: var(--a3) 0 var(--a5); max-width: var(--breite-spalte); }
.hero .rechnung { margin: 0; }
.rechnung-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums lining-nums;
}
.rechnung-tabelle caption {
    text-align: left;
    font-family: var(--schrift-titel);
    font-weight: 700;
    font-size: 1.25rem;
    padding-bottom: var(--a2);
    border-bottom: 2px solid var(--tinte);
}
.rechnung-tabelle th,
.rechnung-tabelle td {
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--linie);
    vertical-align: baseline;
    text-align: left;
    font-weight: 400;
}
.rechnung-tabelle th { padding-right: var(--a3); }
.rechnung-tabelle td { text-align: right; white-space: nowrap; }
.rechnung-tabelle .nebenzeile {
    display: block;
    font-size: var(--fs-klein);
    color: var(--text-2);
}
.rechnung-tabelle tr.abschnitt-ende th,
.rechnung-tabelle tr.abschnitt-ende td { border-bottom: 1px solid var(--tinte); }
.rechnung-tabelle tr.summe th,
.rechnung-tabelle tr.summe td {
    font-weight: 600;
    border-top: 1px solid var(--tinte);
    border-bottom: 4px double var(--tinte);
    padding: 0.875rem 0;
}
.rechnung-tabelle tr.summe td { font-size: var(--fs-betrag); line-height: 1.1; }
/* Am Handy: Zeilen als Flex-Zeilen, Summenzeile zweizeilig (Bezeichnung über dem Betrag) */
@media (max-width: 639px) {
    .rechnung-tabelle,
    .rechnung-tabelle tbody,
    .rechnung-tabelle caption { display: block; }
    .rechnung-tabelle tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
        column-gap: var(--a3);
        border-bottom: 1px solid var(--linie);
    }
    .rechnung-tabelle tr th,
    .rechnung-tabelle tr td,
    .rechnung-tabelle tr.summe th,
    .rechnung-tabelle tr.summe td,
    .rechnung-tabelle tr.abschnitt-ende th,
    .rechnung-tabelle tr.abschnitt-ende td { border: 0; }
    .rechnung-tabelle tr.abschnitt-ende { border-bottom-color: var(--tinte); }
    .rechnung-tabelle tr th { flex: 1 1 11rem; }
    .rechnung-tabelle th, .rechnung-tabelle td { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .rechnung-tabelle tr.nebenrechnung th { flex-basis: 100%; }
    .rechnung-tabelle tr td { flex: 0 0 auto; margin-left: auto; }
    .rechnung-tabelle tr.summe {
        flex-wrap: wrap;
        row-gap: 0;
        border-top: 1px solid var(--tinte);
        border-bottom: 4px double var(--tinte);
    }
    .rechnung-tabelle tr.summe th { flex: 1 1 auto; padding-top: 0.625rem; padding-bottom: 0.25rem; }
    .rechnung-tabelle tr.summe td { flex: 0 0 auto; margin-left: auto; padding-top: 0.25rem; padding-bottom: 0.625rem; }
    .kostenbox .rechnung-tabelle tr:last-child { border-bottom: 0; }
}
.eigenanteil {
    background: var(--marker);
    color: var(--tinte);
    padding: 0.05em 0;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.rechnung-fuss {
    font-size: var(--fs-klein);
    color: var(--text-2);
    margin-top: var(--a2);
}

/* ---------- Diagramm: Festzuschuss gegen Eigenanteil ---------- */
.balken { margin: var(--a4) 0; max-width: var(--breite-spalte); }
.balken-track {
    display: flex;
    height: 28px;
    border: 2px solid var(--tinte);
    background: var(--papier);
}
.balken-fill { height: 100%; min-width: 2px; }
.balken-fill.zuschuss { background: var(--kassenblau); }
.balken-fill.eigen { background: var(--papier); }
.balken-legende {
    list-style: none;
    margin: var(--a2) 0 0;
    font-size: var(--fs-klein);
    font-variant-numeric: tabular-nums lining-nums;
    max-width: none;
}
.balken-legende li {
    display: flex;
    justify-content: space-between;
    gap: var(--a3);
    padding: 0.375rem 0;
    margin: 0;
    border-bottom: 1px solid var(--linie);
}
.balken-legende .feld-muster {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: var(--a2);
    vertical-align: -1px;
    border: 2px solid var(--tinte);
}
.balken-legende .feld-muster.zuschuss { background: var(--kassenblau); border-color: var(--kassenblau); }
.balken-svg { width: 100%; height: auto; margin-top: var(--a3); }

/* ---------- Hinweis-Felder (Formularfeld mit Bezeichnung) ---------- */
.hinweis,
.info-box,
.tip-box,
.warning-box,
.aeo-answer {
    border-top: 2px solid var(--tinte);
    border-bottom: 1px solid var(--linie);
    background: transparent;
    padding: var(--a3) 0;
    margin: var(--a4) 0;
    max-width: var(--breite-spalte);
}
.hinweis p,
.info-box p,
.tip-box p,
.warning-box p,
.aeo-answer p { margin-bottom: var(--a2); }
.hinweis p:last-child,
.info-box p:last-child,
.tip-box p:last-child,
.warning-box p:last-child,
.aeo-answer p:last-child { margin-bottom: 0; }
/* Feldbezeichnung oben im Rahmen, wie auf einem Formular */
.aeo-answer > strong:first-child,
.feld-bez {
    display: block;
    font-size: var(--fs-klein);
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: var(--a1);
}
.aeo-answer {
    border: 2px solid var(--tinte);
    border-radius: var(--radius);
    background: var(--papier);
    padding: var(--a3) 1.125rem;
}

/* ---------- Partner-Kasten (Werbelinks mit *) ---------- */
.partner-kasten,
.cta-banner,
.insurance-advisory {
    background: var(--flaeche);
    border-top: 3px solid var(--tinte);
    padding: var(--a4) 1.125rem var(--a4);
    margin: var(--a5) 0;
    max-width: var(--breite-spalte);
}
.partner-kasten h2,
.partner-kasten h3,
.cta-banner h2,
.cta-banner h3,
.insurance-advisory h2 { margin-top: 0; }
.partner-kasten .btn,
.cta-banner .btn { width: 100%; }
@media (min-width: 640px) {
    .partner-kasten,
    .cta-banner,
    .insurance-advisory { padding: var(--a5) var(--a5) var(--a4); }
    .partner-kasten .btn,
    .cta-banner .btn { width: auto; }
}
.partner-kasten .hinweis,
.cta-banner .hinweis,
.insurance-advisory .hinweis { border-top-width: 1px; }
.partner-kasten--intern {
    background: var(--papier);
    border: 1px solid var(--linie-feld);
    border-top: 3px solid var(--tinte);
}
.artikel--breit .table-responsive { max-width: 62rem; }
.tarif-tabelle td:last-child { min-width: 12rem; }
.tarif-tabelle .btn { width: 100%; }
.partner-fuss,
.insurance-note {
    font-size: var(--fs-klein);
    color: var(--text-2);
    margin: var(--a3) 0 0;
}

/* ---------- Listen mit Linien (Ratgeber, Produkte, Tipps, Weiteres) ---------- */
.zeilen-liste {
    list-style: none;
    margin: 0;
    max-width: none;
    border-top: 1px solid var(--tinte);
}
.zeilen-liste > li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--linie);
}
.ratgeber-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--a1);
    padding: var(--a3) 0;
    color: var(--tinte);
    text-decoration: none;
}
.ratgeber-card h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--tinte);
}
.ratgeber-card p { margin: 0; color: var(--tinte); }
.ratgeber-card .notiz {
    display: flex;
    justify-content: space-between;
    gap: var(--a3);
    font-size: var(--fs-klein);
    color: var(--text-2);
}
.ratgeber-card .card-link {
    color: var(--kassenblau);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}
.ratgeber-card:hover { color: var(--tinte); }
.ratgeber-card:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.ratgeber-card:hover .card-link { color: var(--kassenblau-tief); text-decoration-thickness: 2px; }
@media (min-width: 640px) {
    .ratgeber-card {
        grid-template-columns: minmax(0, 1fr) 11rem;
        column-gap: var(--a4);
    }
    .ratgeber-card h3,
    .ratgeber-card p { grid-column: 1; }
    .ratgeber-card .notiz {
        grid-column: 2;
        grid-row: 1 / span 2;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
        gap: var(--a1);
        text-align: right;
        padding-top: 0.2rem;
    }
}

.zeilen-liste > li.produkt-zeile,
.zeilen-liste > li.tipp { padding: var(--a3) 0 var(--a4); }
.produkt-zeile h3 { margin: 0 0 var(--a1); font-size: 1.25rem; }
.produkt-zeile p { margin-bottom: var(--a2); }
.produkte-disclosure { font-size: var(--fs-klein); color: var(--text-2); margin-top: var(--a3); }

.tipp p { margin: 0; }

/* ---------- Begriffe (Kurz erklärt) ---------- */
.begriffe {
    margin: 0;
    max-width: var(--breite-spalte);
    border-top: 1px solid var(--tinte);
}
.begriff {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: var(--a3) 0;
    border-bottom: 1px solid var(--linie);
}
.begriff dt { display: flex; gap: var(--a3); font-weight: 600; }
.begriff .begriff-wert {
    flex: 0 0 6.5rem;
    font-variant-numeric: tabular-nums lining-nums;
}
.begriff dd { margin: var(--a1) 0 0; }
.begriff p { margin: 0; }
@media (min-width: 640px) {
    .begriff dd { padding-left: calc(6.5rem + var(--a3)); }
}

/* ---------- Häufige Fragen ---------- */
.faq-liste { border-top: 1px solid var(--tinte); max-width: var(--breite-spalte); }
.faq-item { border-bottom: 1px solid var(--linie); }
.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--a3);
    min-height: 56px;
    padding: var(--a2) 0;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Plus und Minus als Linien, kein Pfeil */
.faq-item summary::after {
    content: '';
    flex: 0 0 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 7h16v2H0zM7 0h2v16H7z' fill='%231B2230'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.faq-item[open] summary::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 7h16v2H0z' fill='%231B2230'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.faq-item summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.faq-answer { padding: 0 0 var(--a3); }
.faq-answer p:last-child { margin-bottom: 0; }

/* ---------- Städte (Startseite und Artikel) ---------- */
.stadt-behandlung { border-bottom: 1px solid var(--linie); }
.stadt-behandlung:first-of-type { border-top: 1px solid var(--tinte); }
.stadt-behandlung > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 56px;
    font-weight: 600;
    font-size: 1.1875rem;
    cursor: pointer;
    list-style: none;
}
.stadt-behandlung > summary::-webkit-details-marker { display: none; }
.stadt-behandlung > summary::after {
    content: '';
    flex: 0 0 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 7h16v2H0zM7 0h2v16H7z' fill='%231B2230'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.stadt-behandlung[open] > summary::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 7h16v2H0z' fill='%231B2230'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.stadt-behandlung h3 { margin-top: var(--a2); }
.stadt-liste {
    list-style: none;
    margin: var(--a3) 0;
    max-width: none;
    columns: 2;
    column-gap: var(--a4);
}
.stadt-liste li { margin: 0; padding: 0; break-inside: avoid; }
.stadt-liste a {
    display: flex;
    align-items: center;
    min-height: 44px;
    border-bottom: 1px solid var(--linie);
}
@media (min-width: 640px) { .stadt-liste { columns: 3; } }
@media (min-width: 960px) { .stadt-liste { columns: 4; } }
.alle-staedte { margin: var(--a2) 0 var(--a4); }

/* ---------- Brotkrumen, Artikelkopf, Inhaltsverzeichnis ---------- */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: var(--a3) 0 0;
    font-size: var(--fs-klein);
    color: var(--text-2);
    max-width: none;
}
.breadcrumb li { margin: 0; padding: 0; display: flex; align-items: center; }
.breadcrumb li + li::before {
    content: '/';
    margin: 0 0.6em;
    color: var(--text-2);
}
.breadcrumb a {
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.artikel { padding: var(--a4) 0 var(--a6); }
.artikel-kopf { margin-bottom: var(--a4); max-width: var(--breite-spalte); }
.artikel-meta { font-size: var(--fs-klein); color: var(--text-2); margin: 0; }
.artikel section { max-width: var(--breite-spalte); }
.artikel h2 {
    padding-top: var(--a3);
    border-top: 1px solid var(--tinte);
}
.inhaltsverzeichnis {
    border-top: 2px solid var(--tinte);
    border-bottom: 1px solid var(--linie);
    padding: var(--a3) 0 var(--a2);
    margin: var(--a4) 0;
    max-width: var(--breite-spalte);
}
.inhaltsverzeichnis .feld-bez { margin-bottom: var(--a2); }
.inhaltsverzeichnis ol { margin: 0 0 0 1.4em; }
.inhaltsverzeichnis li { margin: 0; }
.inhaltsverzeichnis a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.formel {
    font-family: var(--schrift-titel);
    font-weight: 700;
    font-size: 1.25rem;
    border-top: 1px solid var(--tinte);
    border-bottom: 1px solid var(--tinte);
    padding: var(--a3) 0;
    margin: var(--a4) 0;
    max-width: var(--breite-spalte);
}
.quellen {
    margin-top: var(--a6);
    padding-top: var(--a3);
    border-top: 1px solid var(--tinte);
    max-width: var(--breite-spalte);
}
.quellen p { font-size: var(--fs-klein); color: var(--text-2); }

/* Erklärung der Preisberechnung (aufklappbar) */
.erklaerung {
    border-top: 1px solid var(--tinte);
    border-bottom: 1px solid var(--linie);
    padding: 0;
    margin: var(--a3) 0;
    max-width: var(--breite-spalte);
}
.erklaerung summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--a3);
    min-height: 52px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.erklaerung summary::-webkit-details-marker { display: none; }
.erklaerung summary::after {
    content: '';
    flex: 0 0 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 7h16v2H0zM7 0h2v16H7z' fill='%231B2230'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.erklaerung[open] summary::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 7h16v2H0z' fill='%231B2230'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.erklaerung p { padding-bottom: var(--a3); margin: 0; color: var(--text-2); }

/* ---------- Stadtseiten: Kosten auf einen Blick ---------- */
.kostenbox {
    border: 2px solid var(--tinte);
    margin: var(--a4) 0 var(--a5);
    max-width: var(--breite-spalte);
}
.kostenbox .rechnung-tabelle caption {
    padding: var(--a3) 1.125rem var(--a2);
    border-bottom: 1px solid var(--tinte);
}
.kostenbox .rechnung-tabelle th,
.kostenbox .rechnung-tabelle td,
.kostenbox .rechnung-tabelle tr.summe th,
.kostenbox .rechnung-tabelle tr.summe td { padding-left: 1.125rem; padding-right: 1.125rem; }
.kostenbox .rechnung-tabelle tr:last-child th,
.kostenbox .rechnung-tabelle tr:last-child td { border-bottom: 0; }
.kostenbox .rechnung-tabelle tr.summe td { font-size: var(--fs-text); }
@media (min-width: 640px) {
    .kostenbox .rechnung-tabelle tr.summe td { font-size: 1.375rem; }
}

/* ---------- Teilen ---------- */
.share-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--a2);
    margin: var(--a3) 0 var(--a4);
}
.share-bar-label { font-size: var(--fs-klein); color: var(--text-2); margin-right: var(--a1); }
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--linie-feld);
    border-radius: var(--radius);
    background: var(--papier);
    cursor: pointer;
}
.share-btn svg { width: 18px; height: 18px; fill: var(--tinte); }
.share-btn:hover { border-color: var(--kassenblau); background: var(--kassenblau-hell); }
.share-btn.copied { border-color: var(--kassenblau); background: var(--kassenblau-hell); }

/* ---------- Rechner ---------- */
.rechner-abschnitt .teil-titel p { color: var(--text-2); }
.rechner {
    border: 2px solid var(--tinte);
    background: var(--papier);
    max-width: 52rem;
}
.rechner-header {
    padding: var(--a3) 1.125rem;
    border-bottom: 1px solid var(--tinte);
}
.rechner-header h2 { margin: 0 0 var(--a1); }
.rechner-header p { margin: 0; color: var(--text-2); }
.rechner-body { padding: var(--a3) 0.875rem var(--a4); }
@media (min-width: 640px) {
    .rechner-header { padding: var(--a4) var(--a5); }
    .rechner-body { padding: var(--a4) var(--a5) var(--a5); }
}
.rechner-laden { color: var(--text-2); margin: 0; }
.rechner-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a1) var(--a4);
    list-style: none;
    margin: 0 0 var(--a4);
    padding: 0 0 var(--a2);
    border-bottom: 1px solid var(--linie);
    font-size: var(--fs-klein);
    color: var(--text-2);
    max-width: none;
}
.rechner-steps li { margin: 0; padding: 0.25rem 0; }
.rechner-steps .dot { font-variant-numeric: tabular-nums; }
.rechner-steps .active {
    color: var(--tinte);
    font-weight: 600;
    box-shadow: none;
    border-bottom: 3px solid var(--tinte);
}
.rechner-steps .done { color: var(--tinte); }
.step-title { margin: 0 0 var(--a3); font-size: var(--fs-h3); }
.step-title:focus { outline: none; }
.step-title:focus-visible { outline: 3px solid var(--tinte); outline-offset: 4px; }

/* Schritt 1: Ankreuzzeilen wie auf einem Formular */
.behandlung-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--a2);
}
@media (min-width: 640px) {
    .behandlung-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.behandlung-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 60px;
    width: 100%;
    padding: var(--a2) var(--a3) var(--a2) 3.25rem;
    border: 1px solid var(--linie-feld);
    border-radius: var(--radius);
    background: var(--papier);
    color: var(--tinte);
    font: 600 1.1875rem/1.3 var(--schrift-text);
    text-align: left;
    cursor: pointer;
}
.behandlung-card::before {
    content: '';
    position: absolute;
    left: var(--a3);
    top: 50%;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border: 2px solid var(--tinte);
    border-radius: 50%;
    background: var(--papier);
}
.behandlung-card:hover {
    border-color: var(--kassenblau);
    background: var(--kassenblau-hell);
}
.behandlung-card:hover::before,
.behandlung-card.selected::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%231B2230'/%3E%3C/svg%3E") center / 10px 10px no-repeat, var(--papier);
}

/* Schritt 2: Optionszeilen mit Kreis */
.auswahl-gruppe { border: 0; margin: 0 0 var(--a4); padding: 0; min-width: 0; }
.auswahl-gruppe legend { font-weight: 600; margin-bottom: var(--a2); padding: 0; }
.auswahl,
.form-group label.auswahl {
    position: relative;
    display: flex;
    font-weight: 400;
    align-items: center;
    gap: var(--a3);
    min-height: 56px;
    padding: var(--a2) var(--a3);
    border: 1px solid var(--linie-feld);
    border-radius: var(--radius);
    margin-bottom: var(--a2);
    cursor: pointer;
}
.auswahl input {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--tinte);
}
.auswahl-text { font-weight: 600; line-height: 1.35; }
.auswahl-text .nebenzeile { display: block; font-weight: 400; color: var(--text-2); font-size: var(--fs-klein); font-variant-numeric: tabular-nums lining-nums; }
.auswahl:hover { border-color: var(--kassenblau); background: var(--kassenblau-hell); }
.auswahl:has(input:checked) { border: 2px solid var(--tinte); padding: calc(var(--a2) - 1px) calc(var(--a3) - 1px); }
.auswahl input:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }
.auswahl-info { color: var(--text-2); margin: calc(var(--a2) * -1) 0 var(--a4); }

/* Schritt 2: Formular */
.form-group { margin-bottom: var(--a4); }
.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--a2);
}
.form-select {
    width: 100%;
    min-height: 52px;
    padding: 0.625rem 2.75rem 0.625rem 0.875rem;
    border: 1px solid var(--linie-feld);
    border-radius: var(--radius);
    background-color: var(--papier);
    color: var(--tinte);
    font: 400 var(--fs-text)/1.3 var(--schrift-text);
}
.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231B2230' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    cursor: pointer;
}
.form-select:focus-visible {
    outline: 3px solid var(--tinte);
    outline-offset: 1px;
}
.rechner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a2);
    margin-top: var(--a4);
}
.rechner-actions .btn,
.rechner-actions .btn-back { flex: 1 1 12rem; }
.btn-back {
    min-height: 48px;
    padding: 0.625rem 1.25rem;
    border: 2px solid var(--kassenblau);
    border-radius: var(--radius);
    font: 600 var(--fs-text)/1.25 var(--schrift-text);
    cursor: pointer;
}

/* Schritt 3: Ergebnis */
.ergebnis-auswahl {
    margin: 0 0 var(--a3);
    font-size: var(--fs-klein);
}
.ergebnis-auswahl div { display: flex; flex-wrap: wrap; gap: 0 0.4em; }
.ergebnis-auswahl dt { color: var(--text-2); }
.ergebnis-auswahl dt::after { content: ':'; }
.ergebnis-auswahl dd { margin: 0; font-weight: 600; }
.ergebnis-kosten { margin-bottom: var(--a2); }
.rechner-cta { margin-top: var(--a5); }
.rechner-cta .hinweis { margin-top: 0; }
@media (min-width: 640px) {
    .rechner-cta .knopf-reihe .btn { flex: 1 1 14rem; }
}
.modell { margin-top: var(--a5); padding-top: var(--a3); border-top: 1px solid var(--tinte); }
.modell h3 { margin-top: 0; font-size: 1.1875rem; font-family: var(--schrift-text); font-weight: 600; line-height: 1.4; }
.rechner-fuss { font-size: var(--fs-klein); color: var(--text-2); margin-top: var(--a3); }
.rechner-step.ergebnis-schritt { animation: ergebnis-einblenden 0.25s ease-out; }
@keyframes ergebnis-einblenden {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .rechner-step.ergebnis-schritt { animation: none; }
}

/* Ersparnisrechner: Ergebnis als Rechnungstabelle */
.ersparnis-ergebnis { margin-top: var(--a5); padding-top: var(--a4); border-top: 2px solid var(--tinte); }
.balken-item { margin-bottom: var(--a3); }
.balken-item .balken-label { display: flex; justify-content: space-between; gap: var(--a3); font-size: var(--fs-klein); margin-bottom: var(--a1); font-variant-numeric: tabular-nums lining-nums; }
.balken-fill.kosten { background: var(--tinte); }
.balken-fill.ersparnis { background: var(--kassenblau); }

/* ---------- Startseite: Hero mit Beispielrechnung ---------- */
.hero { padding: var(--a5) 0 var(--a6); }
.hero-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--a5);
}
.hero h1 { margin-bottom: var(--a3); max-width: 15em; }
.hero-subtitle { font-size: 1.1875rem; max-width: 34rem; }
.hero-cta-group { margin-top: var(--a4); }
.hero-cta-group .btn { width: 100%; }
@media (min-width: 640px) {
    .hero-cta-group .btn { width: auto; }
}
@media (min-width: 960px) {
    .hero { padding: var(--a6) 0 var(--a7); }
    .hero-raster {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        column-gap: var(--a7);
        align-items: start;
    }
    .hero .rechnung { padding-top: 0.5rem; }
}

/* Abschnitt "So entstehen unsere Zahlen": Liste mit Strich */
.strich-liste { list-style: none; margin-left: 0; }
.strich-liste li {
    position: relative;
    padding-left: 1.25em;
    margin-bottom: var(--a3);
}
.strich-liste li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.8em;
    width: 0.6em;
    border-top: 2px solid var(--tinte);
}
.verweis-liste { list-style: none; margin: var(--a3) 0 0; }
.verweis-liste li { margin: 0 0 var(--a2); }
.verweis-liste a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.25rem 0; }

/* ---------- Fuß ---------- */
.footer {
    border-top: 3px solid var(--tinte);
    margin-top: var(--a6);
    padding: var(--a5) 0 var(--a6);
    background: var(--papier);
}
.footer h3 {
    font-family: var(--schrift-text);
    font-size: var(--fs-text);
    font-weight: 600;
    margin: 0 0 var(--a2);
}
.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--a4) var(--a5);
    margin-bottom: var(--a5);
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.footer-links { list-style: none; margin: 0; max-width: none; }
.footer-links li { margin: 0; padding: 0; }
.footer-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 1.0625rem;
}
.cross-links {
    border-top: 1px solid var(--linie);
    padding-top: var(--a3);
    margin-bottom: var(--a3);
}
.cross-links__title { font-size: var(--fs-klein); color: var(--text-2); margin-bottom: var(--a1); }
.cross-links__list { display: flex; flex-wrap: wrap; gap: 0 var(--a4); }
.cross-links__list a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-klein); }
.footer-bottom {
    border-top: 1px solid var(--linie);
    padding-top: var(--a3);
    font-size: var(--fs-klein);
    color: var(--text-2);
}
.footer-bottom p { max-width: 48rem; }
.footer-affiliate-note { margin-bottom: 0; }

/* ---------- Bausteine der umgestellten Altseiten ---------- */
.section { padding: var(--a4) 0; }
main > .section:first-child { padding-bottom: 0; }
.section h2 {
    padding-top: var(--a3);
    border-top: 1px solid var(--tinte);
    max-width: var(--breite-spalte);
}
/* Abschnittsabstand ersetzt den H2-Außenabstand, sonst doppelte Lücke */
.section .container > h2:first-child { margin-top: 0; }
/* Städte-Übersicht: fünf Behandlungslinks je Stadt in einer Zeile */
.card-body > h3 + ul {
    list-style: none;
    margin-left: 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--a4);
    max-width: none;
}
.card-body > h3 + ul li { margin: 0; padding: 0; }
.card-body > h3 + ul a { display: inline-flex; align-items: center; min-height: 44px; }
/* Vergleichsrechner-Platzhalter: dekoratives Symbol ausblenden */
[id^="widget-consent-gate"] svg { display: none; }
.section .container > p,
.section article > p { max-width: var(--breite-text); }
.section .container > h2,
.section .container > h3,
.section article h2 { max-width: var(--breite-spalte); }
.section .table-responsive { max-width: var(--breite-spalte); }
.card { margin: var(--a4) 0; max-width: var(--breite-spalte); }
.card-header {
    font-family: var(--schrift-titel);
    font-weight: 700;
    font-size: 1.25rem;
    padding-bottom: var(--a2);
    border-bottom: 2px solid var(--tinte);
}
.badge { font-weight: 600; }
.card-body > h3 + .badge { display: block; font-weight: 400; font-size: var(--fs-klein); color: var(--text-2); margin-bottom: var(--a1); }
.subtitle { color: var(--text-2); }
/* Kacheln mit Link werden zu Zeilen mit Linie */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--tinte); max-width: var(--breite-spalte); }
a.card {
    display: block;
    margin: 0;
    padding: var(--a3) 0;
    border-bottom: 1px solid var(--linie);
    color: var(--tinte);
    text-decoration: none;
}
a.card h3 { margin: 0 0 var(--a1); font-size: 1.25rem; }
a.card p { margin: 0; }
a.card:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.grid > .card:not(a) { margin: 0; padding: var(--a3) 0; border-bottom: 1px solid var(--linie); }
.grid > .card:not(a) h3 { margin-top: 0; }

/* Überschriften und Hinweise in Kästen: keine zweite Linie */
.section .cta-banner h2, .section .cta-banner h3,
.partner-kasten h2, .partner-kasten h3,
.insurance-advisory h2 { border-top: 0; padding-top: 0; }
.partner-kasten .hinweis,
.cta-banner .hinweis,
.insurance-advisory .hinweis { border: 0; padding: 0; margin: var(--a3) 0; }
/* Brotkrumen auf allen Vorlagen gleich hoch unter dem Kopf */
main > .section:first-child { padding-top: 0; }
/* Rechtsseiten mit Inline-Zentrierung (Inhalt gesperrt): links ausrichten */
main [style*="text-align: center"],
main [style*="text-align:center"] { text-align: left !important; }
/* Sprungmarken in Inhaltslisten: ausreichend große Trefferfläche */
main li > a[href^="#"] { display: inline-flex; align-items: center; min-height: 44px; }
/* Tabellen ohne Scroll-Rahmen (z. B. Datenschutz, Inhalt gesperrt) dürfen die Seite nicht verbreitern */
main :not(.table-responsive) > table.table { display: block; overflow-x: auto; max-width: 100%; }
/* Kachel-Links als erkennbare Links */
a.card h3 { color: var(--kassenblau); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
/* Knöpfe in Altseiten mit Abstand zueinander */
.section .btn { margin: 0 var(--a2) var(--a2) 0; }
.section .knopf-reihe .btn { margin: 0; }
/* Städte-Übersicht: eine Zeile je Stadt */
.stadt-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--a4);
    padding: var(--a2) 0;
    border-bottom: 1px solid var(--linie);
}
.stadt-zeile h3 { margin: 0; font-size: 1.1875rem; }
.stadt-zeile h3 a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.stadt-faktor { margin: 0; font-size: var(--fs-klein); color: var(--text-2); font-variant-numeric: tabular-nums; }
.stadt-behandlungen { list-style: none; margin: 0; display: flex; flex-wrap: wrap; column-gap: var(--a3); max-width: none; }
.stadt-behandlungen li { margin: 0; padding: 0; }
.stadt-behandlungen a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 960px) {
    .stadt-zeile { grid-template-columns: 11rem 8rem minmax(0, 1fr); align-items: center; }
}
/* Ersparnisrechner: gleiche Hülle und Auswahlzeilen wie der Kostenrechner */
.rechner-card { border: 2px solid var(--tinte); padding: var(--a3) 0.875rem var(--a4); max-width: 52rem; }
@media (min-width: 640px) { .rechner-card { padding: var(--a4) var(--a5) var(--a5); } }
/* Text nimmt den Platz zwischen Kästchen und Preis, statt in eine eigene Zeile zu rutschen */
.rechner-card .auswahl-text { flex: 1 1 0; min-width: 0; overflow-wrap: break-word; }
/* Sehr schmal: Preis als zweite Zeile unter der Bezeichnung statt Silbentrennung */
@media (max-width: 399px) {
    .rechner-card .auswahl { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--a3); row-gap: 0; }
    .rechner-card .auswahl-preis { grid-column: 2; margin-left: 0; font-weight: 400; }
}
.auswahl-preis { margin-left: auto; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Ersparnisrechner: Überschrift, Zwischensummen, Breite */
.ersparnis-ergebnis h2 { margin-top: 0; padding-top: 0; border-top: 0; font-size: var(--fs-h3); }
.ersparnis-ergebnis .rechnung,
.ersparnis-ergebnis .balken-container { max-width: 36rem; }
.rechnung-tabelle tr.zwischensumme th,
.rechnung-tabelle tr.zwischensumme td { font-weight: 600; border-top: 1px solid var(--tinte); }
@media (max-width: 639px) {
    .rechnung-tabelle tr.zwischensumme { border-top: 1px solid var(--tinte); }
    .rechnung-tabelle tr.zwischensumme th,
    .rechnung-tabelle tr.zwischensumme td { border-top: 0; }
}
.knopf-raster .auswahl { margin-bottom: 0; }
.ersparnis-annahme { max-width: 36rem; margin: calc(var(--a3) * -1) 0 var(--a5); }
/* Ersparnisrechner: Beitragsfeld mit Einheit, Hinweis und Fehlermeldung */
.feld-hinweis { color: var(--text-2); font-size: var(--fs-klein); margin: 0 0 var(--a2); }
.feld-einheit { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; }
.feld-einheit-text { color: var(--text-2); }
.form-input {
    width: 8rem;
    min-height: 52px;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--linie-feld);
    border-radius: var(--radius);
    background: var(--papier);
    color: var(--tinte);
    font: 600 var(--fs-text)/1.3 var(--schrift-text);
    font-variant-numeric: tabular-nums lining-nums;
}
.form-input:focus-visible { outline: 3px solid var(--tinte); outline-offset: 1px; }
.form-input[aria-invalid="true"] { border: 2px solid var(--fehler); }
.feld-fehler { color: var(--fehler); font-weight: 600; font-size: var(--fs-klein); margin: var(--a2) 0 0; }
.feld-fehler:empty { margin: 0; }
.knopf-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a2); }
@media (min-width: 480px) { .knopf-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ersparnis-leer { color: var(--text-2); margin: var(--a4) 0 0; }
.ersparnis-ergebnis .info-box { margin-top: var(--a4); }
/* Tabellen mit mehreren Betragsspalten in der Stapeldarstellung (bis 799 px): Beschriftung oben, Beträge nebeneinander */
@media (max-width: 799px) {
    .table--zahlen tr {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
        column-gap: var(--a3);
    }
    .table--zahlen td:not(.betrag) { grid-column: 1 / -1; }
    .table--zahlen td.betrag { text-align: right; }
    .table--zahlen td.betrag[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-klein); white-space: normal; }
    .table--zahlen td:first-child[data-label]::before { content: none; }
}
/* Ab 800 px: Betragsspalten gleich breit, damit untereinander stehende Tabellen bündig sind */
@media (min-width: 800px) {
    .table--zahlen th.betrag { width: 7.5rem; }
}
/* Spaltenköpfe über Beträgen dürfen umbrechen (sonst Querscroll knapp über dem Stapel-Breakpoint) */
.table--stapel thead th.betrag { white-space: normal; }
/* Textzelle in einer Betragsspalte (z. B. „nach Heil- und Kostenplan“) darf umbrechen */
.table .betrag.umbruch { white-space: normal; }

/* ---------- Fester Knopf am Handy (Startseite) ---------- */
.sticky-cta { display: none; }
@media (max-width: 639px) {
    .sticky-cta.visible {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        background: var(--papier);
        border-top: 1px solid var(--tinte);
        padding: var(--a2) 1.125rem calc(var(--a2) + env(safe-area-inset-bottom, 0px));
    }
    .sticky-cta .btn { width: 100%; }
    body.has-sticky-cta { padding-bottom: 72px; }
}

/* ---------- Cookie-Hinweis (consent.js setzt Inline-Stile) ---------- */
#cookie-banner {
    background: var(--papier) !important;
    color: var(--tinte) !important;
    border-top: 3px solid var(--tinte) !important;
    box-shadow: none !important;
    padding: var(--a3) 1.125rem calc(var(--a3) + env(safe-area-inset-bottom, 0px)) !important;
}
#cookie-banner p { font-size: var(--fs-klein) !important; max-width: none; }
#cookie-banner > div > div { flex-wrap: wrap !important; flex-shrink: 1 !important; }
#cookie-banner a { color: var(--kassenblau) !important; }
#cookie-banner button {
    min-height: 48px !important;
    padding: 0.5rem 1rem !important;
    border: 2px solid var(--kassenblau) !important;
    border-radius: var(--radius) !important;
    background: var(--papier) !important;
    color: var(--kassenblau) !important;
    font: 600 var(--fs-klein)/1.2 var(--schrift-text) !important;
}
#cookie-banner button:hover { background: var(--kassenblau-hell) !important; }

/* ---------- Druck ---------- */
@media print {
    .navbar, .nav-overlay, .sticky-cta, .share-bar, #cookie-banner, .footer { display: none !important; }
    body { background: #fff; }
}