/* =====================================================================
   Zahn24 — zahnversicherung-24.de
   Basis: Design-Entwurf zahnversicherung.html, erweitert um Artikel-,
   Anbieter- und Übersichtsseiten.
   ===================================================================== */

:root{
  --paper:#FBFAF7; --ink:#13202B; --ink-2:#4A5B68; --line:#DFDCD3;
  --blue:#1B5C86; --blue-dk:#134462; --mint:#1F9E86; --amber:#C8892B; --amber-bg:#FBF2E1;
  --rot:#A63A2E; --rot-bg:#FBEFED;
  --white:#fff;
  --w:1180px;
  /* Höhe der mitlaufenden Kopfzeile. Steht hier, weil zwei Dinge davon
     abhängen: die Position des Formulars und der Abstand, den Sprungziele
     brauchen, damit die Überschrift nicht unter dem Kopf verschwindet. */
  --kopf:71px;
}
*{box-sizing:border-box}

/* Sprungmarken: Der Kopf liegt fest über der Seite und würde das Ziel sonst
   verdecken. Beide Regeln zusammen decken alle Wege ab — scroll-padding-top
   greift am scrollenden Element und wirkt auch dann, wenn der Browser beim
   Laden selbst zu einem Anker springt; scroll-margin-top sitzt am Ziel und
   fängt Fälle ab, in denen ein Element in einem eigenen Scrollbereich liegt.
   Gesetzt für jedes Element mit id, weil Inhaltsverzeichnisse auf
   Überschriften, Abschnitte und Tabellen gleichermaßen verweisen. */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf) + 22px)}
[id]{scroll-margin-top:calc(var(--kopf) + 22px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Newsreader,Georgia,serif;font-weight:500;letter-spacing:-.01em;line-height:1.15;margin:0}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
h3{font-size:1.22rem}
h4{font-family:Inter,sans-serif;font-size:1.02rem;font-weight:700;margin:0}
p{margin:0 0 1rem}
a{color:var(--blue);text-underline-offset:3px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
.narrow{max-width:840px}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2.5px solid var(--mint);outline-offset:3px;border-radius:2px}
img{max-width:100%;height:auto}

/* ---------- Header ---------- */
header{border-bottom:1px solid var(--line);background:rgba(251,250,247,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:50}
.hd{display:flex;align-items:center;gap:32px;height:70px}
.logo{font-family:Newsreader,serif;font-size:1.4rem;display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.logo span{width:26px;height:26px;border-radius:50% 50% 46% 46%;background:var(--blue);display:grid;place-items:center;color:#fff;font-family:Inter,sans-serif;font-size:.7rem;font-weight:700}
nav.mainnav{display:flex;gap:26px;margin-left:auto;font-size:.94rem}
nav.mainnav a{color:var(--ink-2);text-decoration:none}
nav.mainnav a:hover,nav.mainnav a[aria-current="page"]{color:var(--blue)}
nav.mainnav a[aria-current="page"]{font-weight:600}
.hd .btn{padding:10px 18px;font-size:.9rem}
/* Zwischen 900 und 1150 px wird es in der Kopfzeile eng und die Navigation
   bricht in zwei Zeilen um. Statt sie umbrechen zu lassen, rücken die
   Punkte enger zusammen und „Was die Kasse zahlt" tritt zurück — der
   Beitrag bleibt über den Ratgeber erreichbar. */
nav.mainnav{flex-wrap:nowrap;white-space:nowrap}
@media(max-width:1150px){
  .hd{gap:22px}
  nav.mainnav{gap:18px;font-size:.9rem}
  nav.mainnav a[href="/ratgeber/zahnersatz-festzuschuss/"]{display:none}
}
@media(max-width:900px){nav.mainnav{display:none}}

.btn{display:inline-block;background:var(--blue);color:#fff;border:0;border-radius:4px;padding:15px 28px;font:600 1rem Inter,sans-serif;cursor:pointer;text-decoration:none;transition:background .15s}
.btn:hover{background:var(--blue-dk)}
.btn-ghost{background:transparent;color:var(--blue);border:1px solid var(--line)}
.btn-ghost:hover{background:#fff;border-color:var(--blue)}

/* ---------- Breadcrumb ---------- */
.breadcrumb-bar{border-bottom:1px solid var(--line);background:#F7F6F2}
.breadcrumb-nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:11px 0;font-size:.82rem;color:var(--ink-2)}
.breadcrumb-nav a{color:var(--ink-2);text-decoration:none}
.breadcrumb-nav a:hover{color:var(--blue);text-decoration:underline}
.breadcrumb-sep{color:var(--line)}
.breadcrumb-current{color:var(--ink)}

/* ---------- Hero (Startseite) ---------- */
.hero{padding:64px 0 76px;border-bottom:1px solid var(--line);background:
  linear-gradient(var(--paper),var(--paper)) padding-box,
  repeating-linear-gradient(0deg,transparent 0 31px,#EDEAE1 31px 32px)}
.hero-g{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.kicker{font-size:.9rem;color:var(--mint);font-weight:600;margin-bottom:14px}
.lead{font-size:1.12rem;color:var(--ink-2);max-width:56ch;margin-top:18px}
.beleg{margin-top:34px;background:var(--white);border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:0 1px 0 rgba(19,32,43,.04)}
.beleg-h{padding:13px 20px;border-bottom:1px solid var(--line);font-size:.82rem;color:var(--ink-2);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.beleg table{width:100%;border-collapse:collapse;font-size:.95rem}
.beleg td{padding:11px 20px;border-bottom:1px solid #F0EEE7}
.beleg td:last-child{text-align:right;font-weight:600}
.beleg tr:last-child td{border-bottom:0;background:#F7FAF9;font-weight:600;color:var(--blue)}
.beleg .minus{color:var(--mint)}
.beleg .gross{font-size:1.35rem}
.hint{font-size:.83rem;color:var(--ink-2);margin-top:12px}
@media(max-width:920px){.hero-g{grid-template-columns:1fr;gap:40px}}

/* ---------- Formular ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 44px -28px rgba(19,32,43,.4);position:sticky;top:94px}
.fc-head{padding:22px 26px 18px;border-bottom:1px solid var(--line)}
.fc-head h3{font-family:Inter,sans-serif;font-weight:700;font-size:1.08rem}
.fc-head p{font-size:.88rem;color:var(--ink-2);margin:5px 0 0}
.steps{display:flex;gap:5px;padding:16px 26px 0}
.steps i{flex:1;height:4px;border-radius:2px;background:#E7E4DB;transition:background .3s}
.steps i.on{background:var(--mint)}
.fc-body{padding:22px 26px 26px}
.q{font-weight:600;font-size:1.05rem;margin-bottom:4px}
.qs{font-size:.87rem;color:var(--ink-2);margin-bottom:16px}
.opts{display:grid;gap:9px}
.opt{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:5px;padding:13px 15px;cursor:pointer;background:#fff;text-align:left;font:inherit;font-size:.97rem;transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--blue);background:#F8FBFC}
.opt.sel{border-color:var(--blue);background:#F1F7FA;box-shadow:inset 0 0 0 1px var(--blue)}
.opt .ic{width:30px;height:30px;flex:none;border-radius:4px;background:#EFF5F8;display:grid;place-items:center;color:var(--blue);font-size:.95rem}
.opt small{display:block;color:var(--ink-2);font-size:.82rem;font-weight:400}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label.f{display:block;font-size:.86rem;font-weight:500;margin:12px 0 5px;color:var(--ink-2)}
input.f,select.f{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:5px;font:inherit;font-size:.97rem;background:#fff;color:var(--ink)}
input.f:focus,select.f:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(27,92,134,.12)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;color:var(--ink-2);margin-top:16px;line-height:1.5}
.consent input{margin-top:3px;accent-color:var(--blue);width:16px;height:16px;flex:none}
.fc-foot{display:flex;gap:12px;align-items:center;margin-top:20px}
.fc-foot .btn{flex:1}
.back{background:none;border:0;color:var(--ink-2);font:inherit;font-size:.9rem;cursor:pointer;padding:8px}
.back:hover{color:var(--ink)}
.trustline{padding:13px 26px;border-top:1px solid var(--line);font-size:.79rem;color:var(--ink-2);display:flex;gap:16px;flex-wrap:wrap;background:#FCFCFA}
.done{text-align:center;padding:14px 0}
.done .tick{width:52px;height:52px;border-radius:50%;background:#E8F6F2;color:var(--mint);display:grid;place-items:center;margin:0 auto 14px;font-size:1.5rem}
.err{color:#B3261E;font-size:.84rem;margin-top:10px;display:none}

/* ---------- Sektionen ---------- */
section{padding:78px 0}
.sec-line{border-top:1px solid var(--line)}
.sec-head{max-width:62ch;margin-bottom:40px}
.sec-head p{color:var(--ink-2);margin-top:14px}

/* ---------- Kennzahlen ---------- */
.kennzahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.kz{background:#fff;padding:26px 24px}
.kz .kz-wert{font-family:Newsreader,serif;font-size:2rem;line-height:1.05;color:var(--blue);font-variant-numeric:tabular-nums}
.kz .kz-label{font-size:.9rem;color:var(--ink-2);margin-top:9px}
.kz .kz-stand{font-size:.76rem;color:var(--ink-2);margin-top:10px;opacity:.8}
@media(max-width:900px){.kennzahlen{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.kennzahlen{grid-template-columns:1fr}}

/* ---------- Kostentabelle ---------- */
.kosten{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;font-size:.97rem;min-width:680px}
.kosten th{text-align:left;font-size:.8rem;font-weight:600;color:var(--ink-2);padding:14px 18px;border-bottom:1px solid var(--line);background:#F7F6F2}
.kosten td{padding:15px 18px;border-bottom:1px solid #F0EEE7;vertical-align:top}
.kosten tr:last-child td{border-bottom:0}
/* Standard ist linksbündig — die meisten Wertespalten enthalten Fließtext,
   und rechtsbündiger Umbruchtext liest sich schlecht.
   Reine Zahlentabellen bekommen zusätzlich die Klasse "num": Dort werden
   Werte UND Kopfzeile rechtsbündig gesetzt, damit der Spaltenname genau über
   seinen Beträgen steht. Beides muss immer gemeinsam ausgerichtet sein. */
.kosten.num td:not(:first-child),
.kosten.num th:not(:first-child){text-align:right}
.kosten.num td:not(:first-child){font-variant-numeric:tabular-nums}
/* Zweite Zeile im Spaltenkopf (z. B. der Erstattungssatz) — bewusst klein und
   als Block, damit sie die Spalte nicht in die Breite zieht. */
.kosten th .th-sub{display:block;font-weight:400;font-size:.76rem;line-height:1.3;margin-top:3px;color:var(--ink-2)}
.kosten .eig{color:var(--rot);font-weight:600}
.kosten tbody tr:hover{background:#FCFBF8}
.kosten .zeilennotiz{display:block;font-size:.8rem;color:var(--ink-2);font-weight:400;margin-top:4px;text-align:left}
.tbl-scroll{overflow-x:auto}

/* ---------- Festzuschuss-Tabelle ---------- */
.fz-tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;font-size:.95rem;min-width:640px}
.fz-tbl th{text-align:left;font-size:.78rem;font-weight:600;color:var(--ink-2);padding:13px 16px;border-bottom:1px solid var(--line);background:#F7F6F2}
.fz-tbl td{padding:13px 16px;border-bottom:1px solid #F0EEE7}
.fz-tbl tr:last-child td{border-bottom:0}
.fz-tbl td:not(:first-child):not(:nth-child(2)){text-align:right;font-variant-numeric:tabular-nums}
.fz-tbl .bef{font-weight:600;color:var(--blue);white-space:nowrap}
.fz-tbl tbody tr:hover{background:#FCFBF8}

/* ---------- Tipps ---------- */
.tipps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.tipp{background:#fff;padding:28px 26px}
.tipp .n{font-family:Newsreader,serif;font-size:1.6rem;color:var(--mint);line-height:1;margin-bottom:12px}
.tipp h3{font-family:Inter,sans-serif;font-size:1.02rem;font-weight:700;margin-bottom:8px}
.tipp p{font-size:.93rem;color:var(--ink-2);margin:0}
@media(max-width:900px){.tipps{grid-template-columns:1fr}}

/* ---------- Hinweisboxen ---------- */
.merk{background:var(--amber-bg);border-left:3px solid var(--amber);padding:20px 24px;border-radius:0 5px 5px 0;margin:32px 0}
.merk strong{display:block;margin-bottom:4px}
.merk p{margin:0;font-size:.95rem;color:#6B4C15}
.merk p + p{margin-top:.7rem}

.antwort{background:#fff;border:1px solid var(--line);border-left:3px solid var(--mint);border-radius:0 6px 6px 0;padding:22px 26px;margin:28px 0}
.antwort .antwort-label{font-size:.78rem;font-weight:600;color:var(--mint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:9px}
.antwort p{margin:0;font-size:1.02rem}
.antwort p + p{margin-top:.8rem}

.callout{background:#fff;border:1px solid var(--line);border-radius:6px;padding:22px 26px;margin:28px 0}
.callout h4{margin-bottom:8px}
.callout p:last-child{margin-bottom:0}
.callout-fazit{background:#F1F7FA;border-color:#CADDE8}

/* ---------- Inhaltsverzeichnis ---------- */
.toc-box{background:#fff;border:1px solid var(--line);border-radius:6px;padding:26px 28px;margin:8px 0 40px}
.toc-box h2{font-family:Inter,sans-serif;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);margin-bottom:16px}
.toc-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
/* Auf breiten Artikelseiten zweispaltig, damit die volle Rasterbreite genutzt wird */
@media(min-width:900px){.toc-list{grid-template-columns:1fr 1fr;column-gap:48px}}
.toc-list li{display:flex;gap:12px;align-items:baseline;font-size:.96rem}
.toc-num{flex:none;width:22px;font-variant-numeric:tabular-nums;color:var(--mint);font-weight:600;font-size:.85rem}
.toc-list a{text-decoration:none}
.toc-list a:hover{text-decoration:underline}

/* ---------- Artikel ---------- */
.article-hero{padding:52px 0 34px;border-bottom:1px solid var(--line);background:
  linear-gradient(var(--paper),var(--paper)) padding-box,
  repeating-linear-gradient(0deg,transparent 0 31px,#EDEAE1 31px 32px)}
.article-eyebrow{font-size:.85rem;color:var(--mint);font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.article-eyebrow .dot{width:4px;height:4px;border-radius:50%;background:var(--line);display:inline-block}
.badge-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}
.badge-pill{font-size:.8rem;padding:6px 12px;border-radius:3px;background:#E8F6F2;color:#136B5A;font-weight:600}
.badge-pill.gold{background:var(--amber-bg);color:#6B4C15}
.badge-pill.grau{background:#F0EEE7;color:var(--ink-2)}

.artikel h2{margin:48px 0 16px}
.artikel h3{margin:32px 0 10px;font-family:Inter,sans-serif;font-weight:700;font-size:1.08rem}
.artikel ul,.artikel ol{color:var(--ink);padding-left:1.3em;margin:0 0 1rem}
.artikel li{margin-bottom:.5rem}
.artikel li::marker{color:var(--mint)}
/* Tabellen brauchen Luft zum Text davor und danach. */
.artikel .tbl-scroll{margin:22px 0 30px}
.artikel .merk + h2,.artikel .tbl-scroll + h2,.artikel .cta-inline + h2{margin-top:56px}

/* Artikelseiten nutzen dieselbe Rasterbreite wie die Startseite (1180px),
   damit Tabellen und Boxen übersichtlich bleiben. Nur der laufende Fließtext
   wird auf eine lesbare Zeilenlänge begrenzt — Tabellen, Boxen und Raster
   nutzen die volle Breite. */
.artikel > p,
.artikel > ul,
.artikel > ol,
.artikel > .check-list,
.quellen ol{max-width:900px}

/* FAQ bewusst schmaler als der Artikel, damit der Block sich optisch abhebt */
.faq-block{max-width:860px;margin:0 auto}
.faq-block h2{margin-top:48px}

/* ---------- Herkunftsnachweis für Beitragstabellen ----------
   Macht sichtbar, wie belastbar eine Zahl ist. Das ist ein
   Vertrauenssignal, kein Kleingedrucktes — deshalb prominent. */
.beleg-box{border:1px solid var(--line);border-radius:6px;padding:20px 24px;margin:22px 0;background:#fff}
.beleg-kopf{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:600;margin-bottom:10px}
.beleg-punkt{width:9px;height:9px;border-radius:50%;flex:none}
.beleg-box p{font-size:.92rem;color:var(--ink-2);margin:0;max-width:none}
.beleg-box .beleg-fuss{margin-top:10px;padding-top:10px;border-top:1px solid #F0EEE7;font-size:.86rem}
.beleg-veroeffentlicht{border-left:3px solid var(--mint)}
.beleg-veroeffentlicht .beleg-punkt{background:var(--mint)}
.beleg-berechnet{border-left:3px solid var(--blue)}
.beleg-berechnet .beleg-punkt{background:var(--blue)}
.beleg-individuell{border-left:3px solid var(--amber);background:var(--amber-bg)}
.beleg-individuell .beleg-punkt{background:var(--amber)}
.beleg-individuell p{color:#6B4C15}
.beleg-individuell .beleg-fuss{border-top-color:#EBDCBC}

/* ---------- Inline-CTA mitten im Artikel ---------- */
.cta-inline{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
  background:#F1F7FA;border:1px solid #CADDE8;border-radius:6px;padding:24px 28px;margin:32px 0}
.cta-inline strong{display:block;font-size:1.05rem;margin-bottom:6px}
.cta-inline p{margin:0;font-size:.93rem;color:var(--ink-2);max-width:60ch}
.cta-inline .btn{white-space:nowrap}
@media(max-width:760px){.cta-inline{grid-template-columns:1fr}}

.check-list{list-style:none;padding:0;margin:0 0 1rem}
.check-list li{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.check-list li:last-child{border-bottom:0}
.check-list li:before{content:"✓";color:var(--mint);font-weight:700;flex:none}
.check-desc{font-size:.92rem;color:var(--ink-2);margin-top:3px}

/* ---------- Tarifvergleich ---------- */
.tarif-tbl{width:100%;border-collapse:separate;border-spacing:0;background:#fff;font-size:.93rem;min-width:900px;border:1px solid var(--line);border-radius:6px}
/* Kopfzeile bewusst NICHT sticky: Sie überdeckte sonst beim Scrollen die
   jeweils oberste Datenzeile, was wie eine abgeschnittene Tabelle aussieht. */
.tarif-tbl th{background:#F7F6F2;text-align:left;padding:14px 16px;font-size:.79rem;font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--line)}
.tarif-tbl td{padding:16px;border-bottom:1px solid #F0EEE7;vertical-align:middle}
.tarif-tbl tr:last-child td{border-bottom:0}
.tarif-tbl .name{font-weight:600;font-size:1rem}
.tarif-tbl .name a{text-decoration:none}
.tarif-tbl .name a:hover{text-decoration:underline}
.tarif-tbl .name small{display:block;font-weight:400;color:var(--ink-2);font-size:.8rem;margin-top:3px}
.pill{display:inline-block;font-size:.74rem;padding:3px 8px;border-radius:3px;background:#E8F6F2;color:#136B5A;font-weight:600}
.pill.grey{background:#F0EEE7;color:var(--ink-2)}
.pill.rot{background:var(--rot-bg);color:var(--rot)}
.preis{font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums}
.preis small{display:block;font-weight:400;font-size:.76rem;color:var(--ink-2)}
.reihe-top{background:#F8FBFC}
.badge-top{font-size:.7rem;background:var(--blue);color:#fff;padding:2px 7px;border-radius:3px;margin-left:7px;vertical-align:2px;white-space:nowrap}

/* ---------- Karten (Ratgeber-/Anbieter-Übersicht) ---------- */
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.karte{background:#fff;border:1px solid var(--line);border-radius:6px;padding:28px 26px;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.karte:hover{border-color:var(--blue);box-shadow:0 6px 20px -14px rgba(19,32,43,.4)}
.karte .k-kicker{font-size:.78rem;font-weight:600;color:var(--mint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.karte h3,
.karte .k-titel{font-family:Newsreader,serif;font-size:1.24rem;line-height:1.25;margin-bottom:10px}
.karte p{font-size:.94rem;color:var(--ink-2);margin:0}
.karte .k-mehr{margin-top:auto;padding-top:18px;font-size:.9rem;font-weight:600;color:var(--blue)}
/* Harte Vergleichsdaten statt Beschreibungstext — bewusst als Datenliste,
   damit auf den Anbieterseiten kein wiederkehrender Fließtext entsteht. */
.karte .k-daten{list-style:none;margin:0;font-size:.9rem;color:var(--ink-2)}
.karte .k-daten li{padding:5px 0;border-bottom:1px solid #F3F1EA}
.karte .k-daten li:last-child{border-bottom:0}
@media(max-width:900px){.karten{grid-template-columns:1fr}}

/* ---------- Anbieterprofil ---------- */
.profil-kopf{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start}
@media(max-width:900px){.profil-kopf{grid-template-columns:1fr;gap:28px}}
.beitragskarte{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 1px 0 rgba(19,32,43,.04)}
.beitragskarte-h{padding:16px 22px;border-bottom:1px solid var(--line);background:#F7F6F2;font-size:.82rem;font-weight:600;color:var(--ink-2)}
.beitragskarte-h .bk-tarif{display:block;font-weight:400;color:var(--ink);font-size:.9rem;margin-top:3px}
.bk-hinweis{padding:20px 22px}
.bk-hinweis p{font-size:.9rem;color:var(--ink-2);margin:0 0 .8rem;max-width:none}
.bk-hinweis p strong{color:var(--ink)}
.beitragskarte-f{padding:13px 22px;border-top:1px solid var(--line);background:#FCFCFA;font-size:.84rem}
.beitragskarte-f a{text-decoration:none;font-weight:600}
.beitragskarte-f a:hover{text-decoration:underline}
.beitragskarte table{width:100%;border-collapse:collapse;font-size:.94rem}
.beitragskarte td{padding:11px 22px;border-bottom:1px solid #F0EEE7}
.beitragskarte tr:last-child td{border-bottom:0}
.beitragskarte td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}

.leistungs-tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;font-size:.96rem}
.leistungs-tbl th{text-align:left;font-size:.79rem;font-weight:600;color:var(--ink-2);padding:13px 18px;background:#F7F6F2;border-bottom:1px solid var(--line)}
.leistungs-tbl td{padding:14px 18px;border-bottom:1px solid #F0EEE7}
.leistungs-tbl tr:last-child td{border-bottom:0}
.leistungs-tbl td:first-child{font-weight:600;width:38%}

.pro-contra{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:28px 0}
@media(max-width:820px){.pro-contra{grid-template-columns:1fr}}
.pc-box{background:#fff;border:1px solid var(--line);border-radius:6px;padding:24px 26px}
.pc-box h4{margin-bottom:14px;display:flex;align-items:center;gap:9px}
.pc-box ul{list-style:none;margin:0;padding:0}
.pc-box li{font-size:.94rem;color:var(--ink-2);padding:9px 0 9px 22px;position:relative;border-bottom:1px solid #F0EEE7}
.pc-box li:last-child{border-bottom:0}
.pc-pro li:before{content:"+";position:absolute;left:0;color:var(--mint);font-weight:700}
.pc-con li:before{content:"−";position:absolute;left:0;color:var(--rot);font-weight:700}

.staffel-liste{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:22px 0}
.staffel-liste div{background:#fff;padding:18px 20px}
.staffel-liste .st-zeit{font-size:.8rem;color:var(--ink-2);margin-bottom:6px}
.staffel-liste .st-summe{font-family:Newsreader,serif;font-size:1.4rem;color:var(--blue);font-variant-numeric:tabular-nums}
@media(max-width:760px){.staffel-liste{grid-template-columns:1fr 1fr}}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{padding:22px 40px 22px 0;cursor:pointer;font-weight:600;list-style:none;position:relative;font-size:1.05rem}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:6px;top:19px;font-size:1.5rem;color:var(--mint);font-weight:400}
details[open] summary:after{content:"–"}
details p{color:var(--ink-2);padding-right:40px;max-width:70ch}

/* ---------- Quellen ---------- */
.quellen{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.quellen h2{font-family:Inter,sans-serif;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);margin-bottom:14px}
.quellen ol{margin:0;padding-left:1.3em;font-size:.88rem;color:var(--ink-2)}
.quellen li{margin-bottom:7px}
.quellen a{color:var(--ink-2)}
.stand-zeile{font-size:.82rem;color:var(--ink-2);margin-top:16px}

/* ---------- CTA ---------- */
.cta{background:var(--blue-dk);color:#fff;border-radius:8px;padding:56px 48px;display:grid;grid-template-columns:1.3fr auto;gap:36px;align-items:center}
.cta h2{color:#fff}
.cta p{color:#C3D6E2;margin:14px 0 0;max-width:52ch}
.cta .btn{background:#fff;color:var(--blue-dk)}
.cta .btn:hover{background:#E9F1F5}
@media(max-width:820px){.cta{grid-template-columns:1fr;padding:40px 28px}}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:44px 0 60px;font-size:.88rem;color:var(--ink-2);margin-top:20px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer-grid h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin-bottom:12px}
.footer-grid a{display:block;color:var(--ink-2);text-decoration:none;margin-bottom:8px}
.footer-grid a:hover{color:var(--blue)}
.footer-claim{margin-top:14px;max-width:34ch;font-size:.86rem}
.footer-legal{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.82rem}
.footer-legal-links{display:flex;gap:14px;flex-wrap:wrap;margin:0}
.footer-legal p{margin:0;max-width:80ch}
.disclaimer{margin-top:20px;font-size:.78rem;line-height:1.6;max-width:86ch}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}