/* ======================================================================
 * KV Rechner — Stylesheet
 * ----------------------------------------------------------------------
 * Grundlage ist Entwurf 2 „Versicherungsschein": Tiefgrün, Siegelrot,
 * Gold, Newsreader als Text- und Überschriftenschrift, Public Sans für
 * Formulare, Navigation und Daten. Erweitert um alle Bausteine einer
 * großen Vergleichsseite (Tabellen, Tarifkarten, Rechner, Lead-Popup).
 * ==================================================================== */

:root{
  --text:#1A1A18; --text-2:#4A4F4A; --text-3:#6B726B;
  --bogen:#F1F3F0; --surface:#FFFFFF; --rule:#D8DDD6; --rule-2:#E8ECE6;
  --gruen:#14432F; --gruen-2:#0E3324; --gruen-l:#E7EFE9; --gruen-m:#2E6B4F;
  --siegel:#9C2F2A; --siegel-l:#F6E7E5; --gold:#B08D4F; --gold-l:#F5EEDF;
  --blau:#1F4E79; --blau-l:#E6EEF6;
  --ok:#1E7A4C; --warn:#9A6A12; --warn-l:#FBF3E0;
  --max:1260px; --col:72ch; --radius:3px;
  --shadow:0 22px 50px -26px rgba(20,67,47,.45);
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:Newsreader,Georgia,"Times New Roman",serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --text:#EAEDE8; --text-2:#B8C0B7; --text-3:#8F988F;
    --bogen:#12160F; --surface:#1A1F19; --rule:#2E352C; --rule-2:#252B23;
    --gruen:#7FCBA4; --gruen-2:#9BD9B9; --gruen-l:#13291E; --gruen-m:#6FB892;
    --gold:#D3B47A; --gold-l:#2A2415; --siegel:#E0827C; --siegel-l:#2E1716;
    --blau:#8DB8E0; --blau-l:#15212D; --ok:#7FCBA4; --warn:#E3B868; --warn-l:#2A2314;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --text:#EAEDE8; --text-2:#B8C0B7; --text-3:#8F988F;
  --bogen:#12160F; --surface:#1A1F19; --rule:#2E352C; --rule-2:#252B23;
  --gruen:#7FCBA4; --gruen-2:#9BD9B9; --gruen-l:#13291E; --gruen-m:#6FB892;
  --gold:#D3B47A; --gold-l:#2A2415; --siegel:#E0827C; --siegel-l:#2E1716;
  --blau:#8DB8E0; --blau-l:#15212D; --ok:#7FCBA4; --warn:#E3B868; --warn-l:#2A2314;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:110px; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }
body{margin:0; background:var(--bogen); color:var(--text);
  font-family:var(--serif); font-size:19px; line-height:1.72; -webkit-font-smoothing:antialiased; overflow-x:hidden}
@media (max-width:640px){ body{font-size:18px} }
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.2; margin:0 0 .5em; letter-spacing:-.012em; text-wrap:balance}
h1{font-size:clamp(2.1rem,4.8vw,3.4rem); font-weight:500}
h2{font-size:clamp(1.55rem,3vw,2.2rem); font-weight:500}
h3{font-size:1.28rem}
h4{font-size:1.08rem}
p{margin:0 0 1.05em; max-width:var(--col)}
a{color:var(--gruen); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--siegel)}
img{max-width:100%; height:auto}
strong,b{font-weight:600}
ul,ol{padding-left:1.25em; max-width:var(--col)}
li{margin-bottom:.35em}
:focus-visible{outline:2.5px solid var(--gold); outline-offset:3px}
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px}
@media (max-width:640px){ .wrap{padding:0 16px} }
.sans{font-family:var(--sans)}
.skip{position:absolute; left:-9999px; background:var(--gruen); color:#fff; padding:12px 18px; z-index:999}
.skip:focus{left:12px; top:12px}
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.muted{color:var(--text-3)}
.klein{font-family:var(--sans); font-size:.82rem; color:var(--text-3)}

/* ---------- Knöpfe ---------- */
.btn{font-family:var(--sans); font-weight:700; font-size:1rem; background:var(--siegel); color:#fff; border:0;
  padding:15px 22px; border-radius:var(--radius); cursor:pointer; text-align:center; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; line-height:1.2;
  box-shadow:0 8px 20px -10px rgba(156,47,42,.7); transition:transform .12s ease, background .15s ease}
.btn:hover{background:#86241F; color:#fff; transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-gruen{background:var(--gruen); box-shadow:0 8px 20px -10px rgba(20,67,47,.7)}
.btn-gruen:hover{background:var(--gruen-2)}
.btn-line{background:transparent; border:1.5px solid var(--gruen); color:var(--gruen); box-shadow:none; font-weight:600; padding:11px 18px}
.btn-line:hover{background:var(--gruen-l); color:var(--gruen)}
.btn-block{display:flex; width:100%}
.btn-klein{padding:9px 14px; font-size:.88rem}
.btn .pfeil{font-size:1.1em; line-height:1}
:root[data-theme="dark"] .btn-gruen,:root:not([data-theme="light"]) .btn-gruen{color:#fff}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn-gruen{background:#1F6B49} }

/* ---------- Kopf ---------- */
header.top{background:var(--surface); border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:50}
.top-in{display:flex; align-items:center; gap:22px; height:76px}
.logo{font-family:var(--serif); font-size:1.42rem; font-weight:600; text-decoration:none; letter-spacing:-.02em;
  display:flex; align-items:center; gap:10px; color:var(--text)}
.logo:hover{color:var(--text)}
.logo-mark{width:36px; height:36px; flex:0 0 auto}
.logo i{font-style:normal; color:var(--siegel)}
.logo small{display:block; font-family:var(--sans); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); font-weight:600; margin-top:-2px}
nav.main{margin-left:auto; display:flex; gap:24px; font-family:var(--sans); font-size:.93rem; font-weight:500}
nav.main a{text-decoration:none; color:var(--text-2); padding:4px 0; border-bottom:2px solid transparent}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--gruen); border-bottom-color:var(--gruen)}
.nav-cta{padding:11px 18px; font-size:.92rem}
header.top .nav-cta{flex-shrink:0; min-height:44px; background:#9C2F2A; color:#fff}
header.top .nav-cta:hover{background:#86241F}
@media (max-width:1180px){
  header.top nav.main{display:none}
  header.top .nav-cta{display:inline-flex; margin-left:auto}
}
@media (max-width:640px){
  .top-in{height:64px; gap:10px}
  header.top .logo{font-size:1.12rem; gap:7px; white-space:nowrap}
  header.top .logo-mark{width:28px; height:28px}
  header.top .logo small{display:none}
  header.top .nav-cta{font-size:.78rem; padding:11px 10px; white-space:nowrap}
}
@media print{header.top{position:static}}

/* ---------- Brotkrumen ---------- */
.breadcrumb-bar{background:var(--surface); border-bottom:1px solid var(--rule-2)}
.breadcrumb-nav{font-family:var(--sans); font-size:.8rem; color:var(--text-3); padding:10px 0; display:flex; flex-wrap:wrap; gap:6px}
.breadcrumb-nav a{color:var(--text-2); text-decoration:none}
.breadcrumb-nav a:hover{color:var(--gruen); text-decoration:underline}
.breadcrumb-current{color:var(--text)}

/* ---------- Hero / Versicherungsschein ---------- */
.hero{padding:56px 0 64px; position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; top:-140px; right:-120px; width:520px; height:520px; border-radius:50%;
  background:var(--gruen-l); z-index:0}
.hero-in{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 470px; gap:52px; align-items:start}
@media (max-width:1040px){ .hero-in{grid-template-columns:1fr; gap:36px} }
.eyebrow{font-family:var(--sans); font-size:.8rem; font-weight:700; letter-spacing:.04em; color:var(--siegel); margin:0 0 14px; text-transform:uppercase}
.hero h1{max-width:18ch}
.hero .lead{font-size:1.2rem; color:var(--text-2); max-width:50ch}
.hero-facts{display:flex; gap:30px; flex-wrap:wrap; margin-top:28px; font-family:var(--sans)}
.hero-facts div b{display:block; font-family:var(--serif); font-size:1.85rem; font-weight:600; color:var(--gruen); line-height:1.05}
.hero-facts div span{font-size:.82rem; color:var(--text-3)}
.hero-checks{list-style:none; padding:0; margin:22px 0 0; font-family:var(--sans); font-size:.95rem; color:var(--text-2)}
.hero-checks li{display:flex; gap:10px; margin-bottom:8px}
.hero-checks li::before{content:"✓"; color:var(--gruen); font-weight:800}
.hero-kompakt{padding:40px 0 44px}
.hero-kompakt h1{max-width:24ch}

.schein{background:var(--surface); border:1px solid var(--rule); position:relative; box-shadow:var(--shadow)}
.schein::before{content:""; position:absolute; left:0; right:0; top:-1px; height:7px;
  background:repeating-linear-gradient(90deg,var(--gruen) 0 12px,transparent 12px 20px)}
.schein-head{padding:24px 26px 16px; border-bottom:1px dashed var(--rule); position:relative}
.schein-head h2,.schein-head .h{font-family:var(--serif); font-size:1.32rem; font-weight:600; margin:0; padding-right:78px; line-height:1.25}
.schein-head p{font-family:var(--sans); font-size:.8rem; color:var(--text-3); margin:4px 0 0}
.siegel{position:absolute; top:16px; right:20px; width:68px; height:68px; border:2px solid var(--siegel); border-radius:50%;
  display:grid; place-items:center; text-align:center; font-family:var(--sans); font-size:.54rem; font-weight:800;
  color:var(--siegel); line-height:1.25; transform:rotate(-11deg); letter-spacing:.04em; padding:6px}
.schein-body{padding:20px 26px 24px}
@media (max-width:640px){ .schein-head,.schein-body{padding-left:18px; padding-right:18px} }

/* ---------- Formularfelder ---------- */
.fld{margin-bottom:13px; font-family:var(--sans)}
.fld label,.fld .lbl{display:block; font-size:.76rem; font-weight:700; color:var(--text-2); margin-bottom:5px; letter-spacing:.01em}
.fld input,.fld select{width:100%; padding:12px 13px; border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--bogen); color:var(--text); font-family:var(--sans); font-size:1rem}
.fld input:focus,.fld select:focus{border-color:var(--gruen); outline:none; box-shadow:0 0 0 3px rgba(20,67,47,.13)}
.fld-2{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.fld-3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
@media (max-width:420px){ .fld-3{grid-template-columns:1fr 1fr} }
.segment{display:flex; flex-wrap:wrap; gap:6px}
.segment button{flex:1 1 auto; font-family:var(--sans); font-size:.86rem; font-weight:600; padding:10px 10px; border:1px solid var(--rule);
  background:var(--bogen); color:var(--text-2); border-radius:var(--radius); cursor:pointer; min-width:0}
.segment button[aria-pressed="true"]{background:var(--gruen); border-color:var(--gruen); color:#fff}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .segment button[aria-pressed="true"]{background:#1F6B49; border-color:#1F6B49} }
.mini{font-family:var(--sans); font-size:.75rem; color:var(--text-3); text-align:center; margin:11px 0 0; max-width:none}
.trust{display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; font-family:var(--sans); font-size:.75rem; color:var(--text-3); margin-top:12px}
.trust span::before{content:"✓ "; color:var(--gruen); font-weight:800}

/* ---------- Bausteinzeile (Zielgruppen) ---------- */
.bausteine{background:var(--surface); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.bausteine-in{display:grid; grid-template-columns:repeat(5,1fr)}
@media (max-width:980px){ .bausteine-in{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .bausteine-in{grid-template-columns:1fr} }
.bausteine a{padding:24px 22px; text-decoration:none; border-right:1px solid var(--rule); display:block; color:var(--text)}
.bausteine a:last-child{border-right:0}
@media (max-width:980px){ .bausteine a{border-bottom:1px solid var(--rule)} }
.bausteine a:hover{background:var(--gruen-l); color:var(--text)}
.bausteine h3{font-size:1.1rem; margin-bottom:4px}
.bausteine p{font-family:var(--sans); font-size:.84rem; color:var(--text-3); margin:0 0 8px}
.bausteine b{font-family:var(--sans); font-size:.86rem; color:var(--siegel); font-weight:700}

/* ---------- Editorial-Layout ---------- */
.doc{display:grid; grid-template-columns:200px minmax(0,1fr) 280px; gap:34px; padding-block:56px}
.doc-2{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:44px; padding-block:56px}
@media (max-width:1180px){ .doc{grid-template-columns:minmax(0,1fr) 280px} .doc .toc-wrap{display:none} }
@media (max-width:900px){ .doc,.doc-2{grid-template-columns:minmax(0,1fr); gap:30px; padding-block:36px} .side{position:static!important} }
.toc-wrap{position:sticky; top:92px; align-self:start; max-height:calc(100vh - 110px); overflow:auto}
.toc{font-family:var(--sans); font-size:.86rem; border-left:2px solid var(--rule); padding-left:16px}
.toc p{font-weight:700; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin:0 0 10px}
.toc a{display:block; padding:5px 0; text-decoration:none; color:var(--text-2); line-height:1.35}
.toc a:hover,.toc a.active{color:var(--gruen); font-weight:600}
.toc-mobil{display:none; background:var(--surface); border:1px solid var(--rule); margin:0 0 28px; font-family:var(--sans)}
.toc-mobil summary{padding:14px 18px; font-weight:700; font-size:.92rem}
.toc-mobil ol{margin:0; padding:0 18px 14px 36px; font-size:.9rem}
.toc-mobil a{color:var(--text-2); text-decoration:none}
@media (max-width:1180px){ .toc-mobil{display:block} }
.side{position:sticky; top:92px; align-self:start}
article{min-width:0}
article > section,.abschnitt{margin-bottom:56px; scroll-margin-top:100px}
article h2{border-bottom:1px solid var(--rule); padding-bottom:12px; margin-bottom:22px}
article h3{margin-top:1.6em}
.meta-zeile{font-family:var(--sans); font-size:.8rem; color:var(--text-3); display:flex; flex-wrap:wrap; gap:6px 16px; margin:14px 0 0}
.meta-zeile b{color:var(--text-2); font-weight:600}

/* ---------- Antwortkasten (GEO) ---------- */
.antwort{background:var(--surface); border:1px solid var(--rule); border-top:4px solid var(--gruen); padding:24px 28px; margin:0 0 36px}
.antwort .h,.antwort h2{font-family:var(--serif); border:0; padding:0; font-size:1.3rem; font-weight:600; margin:0 0 10px}
.antwort ul{margin:14px 0 0; padding-left:20px; font-size:.98rem}
.antwort li{margin-bottom:6px}
@media (max-width:640px){ .antwort{padding:20px 18px} }

/* ---------- Randnotiz, Hinweis, Merk ---------- */
.randnotiz{font-family:var(--sans); font-size:.9rem; background:var(--gruen-l); border-left:3px solid var(--gold);
  padding:16px 18px; margin:24px 0; color:var(--text-2); max-width:var(--col)}
.randnotiz b,.randnotiz strong{color:var(--text)}
.randnotiz p{margin:0 0 .5em} .randnotiz p:last-child{margin:0}
.hinweis{font-family:var(--sans); font-size:.9rem; background:var(--warn-l); border-left:3px solid var(--warn); padding:14px 18px; margin:22px 0; color:var(--text-2)}
.hinweis p:last-child{margin:0}
.merk{background:var(--surface); border:1px solid var(--rule); border-left:4px solid var(--siegel); padding:18px 22px; margin:26px 0}
.merk > strong,.merk .h{display:block; font-family:var(--serif); font-size:1.12rem; margin-bottom:6px; color:var(--text)}
.merk p:last-child{margin:0}
.zitat{font-family:var(--serif); font-style:italic; font-size:1.2rem; border-left:3px solid var(--gold); padding:4px 0 4px 20px; margin:26px 0; color:var(--text-2)}

/* ---------- Tabellen ---------- */
.tbl{overflow-x:auto; border:1px solid var(--rule); background:var(--surface); margin:22px 0; -webkit-overflow-scrolling:touch}
.tbl table{border-collapse:collapse; width:100%; min-width:600px; font-family:var(--sans); font-size:.9rem}
.tbl th,.tbl td{padding:12px 15px; text-align:left; border-bottom:1px solid var(--rule-2); vertical-align:top}
.tbl thead th{background:var(--gruen); color:#fff; font-weight:600; font-size:.8rem; letter-spacing:.01em; vertical-align:bottom}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tbl thead th{background:#1C4A36} }
.tbl tbody tr:nth-child(even){background:var(--bogen)}
.tbl tbody tr:hover{background:var(--gruen-l)}
.tbl tbody th{font-weight:600; color:var(--text)}
.tbl td.z,.tbl th.z{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.tbl td.preis{font-family:var(--serif); font-weight:600; font-size:1.02rem; color:var(--gruen); white-space:nowrap; text-align:right}
.tbl caption{caption-side:bottom; text-align:left; padding:10px 15px; font-size:.78rem; color:var(--text-3); background:var(--surface)}
.tbl tr.hl{background:var(--gold-l)!important}
.tbl-schmal table{min-width:0}
/* Desktop: Tabellen umbrechen statt scrollen — die Mindestbreite (auch als
   Inline-Stil einzelner Tabellen) gilt nur auf schmalen Geräten. */
@media (min-width:901px){
  .tbl table{min-width:0!important}
  .tbl th,.tbl td{padding:11px 12px}
  .tbl thead th,.tbl thead th.z{white-space:normal}
}
.ja{color:var(--ok); font-weight:700}
.nein{color:var(--siegel); font-weight:700}
.teil{color:var(--warn); font-weight:700}

/* ---------- Kostenliste ---------- */
.kosten{list-style:none; padding:0; margin:22px 0; font-family:var(--sans); max-width:var(--col)}
.kosten li{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:baseline; padding:12px 0; border-bottom:1px dotted var(--rule); font-size:.95rem; margin:0}
.kosten li span:last-child{font-family:var(--serif); font-weight:600; font-size:1.1rem; color:var(--gruen); white-space:nowrap}

/* ---------- Kennzahl-Kacheln ---------- */
.kacheln{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr)); gap:12px; margin:24px 0}
.kachel{background:var(--surface); border:1px solid var(--rule); padding:16px 18px; font-family:var(--sans)}
.kachel .w{display:block; font-family:var(--serif); font-size:1.7rem; font-weight:600; color:var(--gruen); line-height:1.1}
.kachel .t{display:block; font-size:.78rem; color:var(--text-3); margin-top:4px; line-height:1.4}
.kachel.akzent{border-top:3px solid var(--siegel)}

/* ---------- Karten-Raster ---------- */
.karten{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr)); gap:14px; margin:22px 0}
.karte{background:var(--surface); border:1px solid var(--rule); padding:20px 20px 18px; display:flex; flex-direction:column; text-decoration:none; color:var(--text)}
a.karte:hover{border-color:var(--gruen); color:var(--text); box-shadow:0 12px 26px -20px rgba(20,67,47,.6)}
.karte .kat{font-family:var(--sans); font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--siegel); margin-bottom:6px}
.karte h3{font-size:1.14rem; margin:0 0 6px}
.karte p{font-family:var(--sans); font-size:.87rem; color:var(--text-3); margin:0 0 10px}
.karte .mehr{margin-top:auto; font-family:var(--sans); font-size:.85rem; font-weight:700; color:var(--gruen)}

/* ---------- Anbieterliste ---------- */
.anbieter-liste{display:grid; gap:12px}
.ab{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px; align-items:center;
  background:var(--surface); border:1px solid var(--rule); padding:18px 20px}
@media (max-width:760px){ .ab{grid-template-columns:auto minmax(0,1fr); gap:12px} .ab .ab-cta{grid-column:1/-1} }
.ab-mark{width:54px; height:54px; display:grid; place-items:center; color:#fff; font-family:var(--sans); font-weight:800; font-size:.95rem; letter-spacing:-.03em; border-radius:var(--radius)}
.ab h3{margin:0 0 3px; font-size:1.14rem}
.ab h3 a{color:var(--text); text-decoration:none}
.ab h3 a:hover{color:var(--gruen); text-decoration:underline}
.ab p{font-family:var(--sans); font-size:.86rem; color:var(--text-3); margin:0; max-width:60ch}
.ab-note{font-family:var(--sans); font-size:.76rem; color:var(--gold); font-weight:700; margin-top:5px; display:block}
.ab-cta{display:flex; gap:8px; flex-wrap:wrap}
.abc-nav{display:flex; flex-wrap:wrap; gap:6px; font-family:var(--sans); margin:0 0 20px}
.abc-nav a{padding:6px 11px; border:1px solid var(--rule); background:var(--surface); text-decoration:none; font-size:.85rem; font-weight:600; color:var(--text-2)}
.abc-nav a:hover{border-color:var(--gruen); color:var(--gruen)}

/* ---------- Tarifkarten ---------- */
.tarife{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:16px; margin:24px 0}
.tarif{background:var(--surface); border:1px solid var(--rule); display:flex; flex-direction:column; position:relative}
.tarifheader.top{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold)}
.tarif-kopf{padding:18px 20px 12px; border-bottom:1px dashed var(--rule)}
.tarif-kopf .stufe{font-family:var(--sans); font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--siegel)}
.tarif-kopf h3,.tarif-kopf h4{margin:4px 0 2px; font-size:1.18rem}
.tarif-kopf .kuerzel{font-family:var(--sans); font-size:.8rem; color:var(--text-3)}
.tarif-preis{padding:12px 20px; font-family:var(--sans); font-size:.82rem; color:var(--text-3); background:var(--bogen)}
.tarif-preis b{display:block; font-family:var(--serif); font-size:1.55rem; color:var(--gruen); font-weight:600; line-height:1.15}
.tarif ul{list-style:none; padding:14px 20px; margin:0; font-family:var(--sans); font-size:.86rem; flex:1}
.tarif li{display:grid; grid-template-columns:1fr auto; gap:10px; padding:6px 0; border-bottom:1px solid var(--rule-2); margin:0}
.tarif li:last-child{border-bottom:0}
.tarif li span:first-child{color:var(--text-3)}
.tarif li span:last-child{font-weight:600; text-align:right}
.tarif-fuss{padding:0 20px 18px}
.band{position:absolute; top:-1px; right:16px; background:var(--gold); color:#1A1A18; font-family:var(--sans); font-size:.68rem; font-weight:800; letter-spacing:.05em; padding:5px 9px; text-transform:uppercase}

/* ---------- Stärken / Schwächen ---------- */
.pro-contra{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:22px 0}
@media (max-width:720px){ .pro-contra{grid-template-columns:1fr} }
.pro-contra > div{background:var(--surface); border:1px solid var(--rule); padding:18px 20px}
.pro-contra .h{font-family:var(--sans); font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin:0 0 10px}
.pro-contra .pro .h{color:var(--ok)} .pro-contra .contra .h{color:var(--siegel)}
.pro-contra ul{list-style:none; padding:0; margin:0; font-family:var(--sans); font-size:.9rem}
.pro-contra li{position:relative; padding-left:24px; margin-bottom:8px}
.pro-contra .pro li::before{content:"+"; position:absolute; left:4px; color:var(--ok); font-weight:800}
.pro-contra .contra li::before{content:"–"; position:absolute; left:4px; color:var(--siegel); font-weight:800}

/* ---------- Zielgruppen-Reiter ---------- */
.reiter{margin:26px 0}
.reiter-leiste{display:flex; gap:4px; overflow-x:auto; border-bottom:2px solid var(--rule); font-family:var(--sans); scrollbar-width:thin}
.reiter-leiste button{background:none; border:0; padding:12px 16px; font-family:var(--sans); font-size:.9rem; font-weight:600; color:var(--text-3);
  cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap}
.reiter-leiste button[aria-selected="true"]{color:var(--gruen); border-bottom-color:var(--gruen)}
.reiter-panel{padding-top:20px}
.reiter-panel[hidden]{display:none}

/* ---------- Zeitleiste (Alttarife, Geschichte) ---------- */
.zeitleiste{list-style:none; padding:0 0 0 22px; margin:22px 0; border-left:2px solid var(--rule); max-width:var(--col)}
.zeitleiste li{position:relative; margin-bottom:18px}
.zeitleiste li::before{content:""; position:absolute; left:-29px; top:.45em; width:12px; height:12px; border-radius:50%; background:var(--surface); border:2px solid var(--gold)}
.zeitleiste b{font-family:var(--sans); font-size:.82rem; color:var(--siegel); display:block}

/* ---------- Balken (Vergleichsgrafik) ---------- */
.balken{margin:22px 0; font-family:var(--sans); font-size:.86rem; max-width:var(--col)}
.balken .zeile{display:grid; grid-template-columns:minmax(120px,190px) minmax(0,1fr) auto; gap:12px; align-items:center; padding:5px 0}
.balken .spur{background:var(--rule-2); height:12px; position:relative}
.balken .spur i{position:absolute; left:0; top:0; bottom:0; background:var(--gruen)}
.balken .zeile.hl .spur i{background:var(--siegel)}
.balken .wert{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
@media (max-width:520px){ .balken .zeile{grid-template-columns:1fr auto} .balken .spur{grid-column:1/-1; order:3} }

/* ---------- Belegstatus ---------- */
.beleg{display:inline-block; font-family:var(--sans); font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:2px; vertical-align:middle}
.beleg-primaer{background:var(--gruen-l); color:var(--ok)}
.beleg-bestaetigt{background:var(--blau-l); color:var(--blau)}
.beleg-sekundaer{background:var(--warn-l); color:var(--warn)}
.beleg-richtwert{background:var(--gold-l); color:var(--warn)}

/* ---------- Rechner-Widget (Anbieter / Startseite) ---------- */
.rechner{background:var(--surface); border:1px solid var(--rule); box-shadow:var(--shadow); position:relative; margin:28px 0}
.rechner::before{content:""; position:absolute; left:0; right:0; top:-1px; height:6px; background:repeating-linear-gradient(90deg,var(--gruen) 0 12px,transparent 12px 20px)}
.rechner-kopf{padding:20px 22px 12px; border-bottom:1px dashed var(--rule)}
.rechner-kopf .h{font-family:var(--serif); font-size:1.28rem; font-weight:600; margin:0}
.rechner-kopf p{font-family:var(--sans); font-size:.8rem; color:var(--text-3); margin:3px 0 0}
.rechner-body{padding:18px 22px 22px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px}
@media (max-width:720px){ .rechner-body{grid-template-columns:1fr; padding:16px 16px 20px} }
.rechner-ergebnis{background:var(--bogen); border:1px solid var(--rule-2); padding:18px; font-family:var(--sans); display:flex; flex-direction:column}
.rechner-ergebnis .betrag{font-family:var(--serif); font-size:2.3rem; font-weight:600; color:var(--gruen); line-height:1.05}
.rechner-ergebnis .betrag small{font-family:var(--sans); font-size:.85rem; color:var(--text-3); font-weight:500}
.rechner-ergebnis .tarifname{font-weight:700; font-size:.95rem; margin:2px 0 8px}
.rechner-ergebnis .aufschl{list-style:none; padding:0; margin:10px 0 14px; font-size:.82rem; color:var(--text-2)}
.rechner-ergebnis .aufschl li{display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-bottom:1px dotted var(--rule); margin:0}
.rechner-ergebnis .btn{margin-top:auto}
.rechner-ergebnis .hinweistext{font-size:.74rem; color:var(--text-3); margin:10px 0 0; line-height:1.45}

/* ---------- Vergleichsergebnis (Check24-Stil) ---------- */
.vg{margin:20px 0}
.vg-kopf{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:baseline; font-family:var(--sans); margin-bottom:12px}
.vg-kopf .anzahl{font-weight:700; font-size:1rem}
.vg-kopf select{font-family:var(--sans); font-size:.86rem; padding:8px 10px; border:1px solid var(--rule); background:var(--surface); color:var(--text); border-radius:var(--radius)}
.vg-zeile{display:grid; grid-template-columns:56px minmax(0,1.25fr) minmax(0,1.75fr) 220px; gap:18px; align-items:center;
  background:var(--surface); border:1px solid var(--rule); padding:16px 18px; margin-bottom:10px; font-family:var(--sans); position:relative}
.vg-zeileheader.top{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold)}
.vg-zeile .rang{font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--text-3); text-align:center}
.vg-zeile .name b{display:block; font-size:1rem; color:var(--text)}
.vg-zeile .name a{color:var(--text); text-decoration:none} .vg-zeile .name a:hover{color:var(--gruen); text-decoration:underline}
.vg-zeile .name span{font-size:.8rem; color:var(--text-3)}
.vg-zeile .name .inkl{display:block; font-size:.72rem; color:var(--text-3); margin-top:4px; line-height:1.35; max-width:40ch}
.vg-zeile .merkmale{list-style:none; padding:0; margin:0; font-size:.8rem; color:var(--text-2); display:grid; grid-template-columns:1fr 1fr; gap:3px 12px}
.vg-zeile .merkmale li{margin:0}
.vg-zeile .merkmale li::before{content:"✓ "; color:var(--ok); font-weight:800}
.vg-zeile .merkmale li.x::before{content:"– "; color:var(--text-3)}
.vg-zeile .preis{text-align:right; min-width:0}
.vg-zeile .preis .btn{white-space:normal; max-width:100%; line-height:1.25}
.vg-zeile .preis b{display:block; font-family:var(--serif); font-size:1.6rem; color:var(--gruen); font-weight:600; line-height:1.1}
.vg-zeile .preis small{display:block; font-size:.72rem; color:var(--text-3); margin-bottom:8px}
.vg-zeile .band{right:auto; left:84px}
@media (max-width:860px){
  .vg-zeile{grid-template-columns:44px minmax(0,1fr); gap:10px 12px}
  .vg-zeile .merkmale{grid-column:1/-1; grid-template-columns:1fr}
  .vg-zeile .preis{grid-column:1/-1; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
  .vg-zeile .preis small{margin:0}
  .vg-zeile .band{left:60px}
}
.vg-leer{background:var(--surface); border:1px dashed var(--rule); padding:26px; text-align:center; font-family:var(--sans); color:var(--text-2)}
.vg-ag{margin:0 0 14px; padding:10px 14px; border-left:3px solid var(--gold); background:var(--surface); font-family:var(--sans); font-size:.86rem; line-height:1.5; color:var(--text-2); max-width:none}
.vg-fuss{font-family:var(--sans); font-size:.76rem; color:var(--text-3); margin-top:12px; max-width:none}

/* Vergleichsrechner (Filterleiste) */
.vgr{background:var(--surface); border:1px solid var(--rule); padding:18px 20px; margin:0 0 18px; font-family:var(--sans)}
.vgr-felder{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); gap:12px; align-items:end}
.vgr .fld{margin:0}

/* ---------- FAQ ---------- */
.faq details{background:var(--surface); border:1px solid var(--rule); margin-bottom:10px}
.faq summary{padding:16px 20px; cursor:pointer; font-weight:600; font-size:1.04rem; list-style:none; display:flex; justify-content:space-between; gap:16px; line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"›"; font-size:1.5rem; line-height:1; color:var(--gruen); transform:rotate(90deg); flex:0 0 auto}
.faq details[open] summary::after{transform:rotate(-90deg)}
.faq .a{padding:0 20px 16px; color:var(--text-2); font-size:1rem}
.faq .a p{margin-bottom:.6em}

/* ---------- Seitenspalte ---------- */
.side-card{background:var(--surface); border:1px solid var(--rule); padding:20px; margin-bottom:16px; position:relative}
.side-card.schein-optik::before{content:""; position:absolute; left:0; right:0; top:-1px; height:6px; background:repeating-linear-gradient(90deg,var(--gruen) 0 12px,transparent 12px 20px)}
.side-card .h{font-family:var(--serif); font-size:1.14rem; font-weight:600; margin:0 0 6px; display:block}
.side-card p{font-family:var(--sans); font-size:.85rem; color:var(--text-3)}
.side-list{list-style:none; padding:0; margin:14px 0 0; font-family:var(--sans); font-size:.85rem}
.side-list li{display:flex; gap:9px; padding:7px 0; border-top:1px solid var(--rule-2); color:var(--text-2); margin:0}
.side-list li:first-child{border-top:0}
.hk{color:var(--gruen); font-weight:800}
.side-links{list-style:none; padding:0; margin:8px 0 0; font-family:var(--sans); font-size:.86rem}
.side-links li{margin:0; border-top:1px solid var(--rule-2)}
.side-links a{display:block; padding:8px 0; text-decoration:none; color:var(--text-2)}
.side-links a:hover{color:var(--gruen)}

/* ---------- CTA im Text ---------- */
.cta-inline{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center; background:var(--gruen); color:#fff; padding:22px 24px; margin:34px 0}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .cta-inline{background:#16392A} }
.cta-inline .h{font-family:var(--serif); font-size:1.22rem; font-weight:600; display:block; margin-bottom:3px; color:#fff}
.cta-inline p{font-family:var(--sans); font-size:.88rem; color:rgba(255,255,255,.82); margin:0}
.cta-inline .btn{background:var(--gold); color:#1A1A18; box-shadow:none; white-space:nowrap}
.cta-inline .btn:hover{background:#C9A566; color:#1A1A18}
@media (max-width:640px){ .cta-inline{grid-template-columns:minmax(0,1fr)} .cta-inline .btn{white-space:normal; max-width:100%} }

/* ---------- Ratgeber ---------- */
.weitere{list-style:none; padding:0; margin:22px 0 0; font-family:var(--sans); font-size:.95rem; max-width:none}
.weitere li{border-bottom:1px solid var(--rule); margin:0}
.weitere a{display:flex; justify-content:space-between; gap:20px; padding:13px 0; text-decoration:none; color:var(--text)}
.weitere a:hover{color:var(--gruen)}
.weitere em{font-style:normal; color:var(--text-3); font-size:.8rem; white-space:nowrap}

/* ---------- Quellen, Autor ---------- */
.quellen{font-family:var(--sans); font-size:.82rem; color:var(--text-3); background:var(--surface); border:1px solid var(--rule); padding:18px 22px; margin:34px 0 0}
.quellen .h{font-weight:700; color:var(--text-2); display:block; margin-bottom:8px; font-size:.86rem}
.quellen ol{margin:0; padding-left:1.3em; max-width:none}
.quellen li{margin-bottom:4px; word-break:break-word}
.quellen a{color:var(--text-2)}
.autor{display:flex; gap:18px; background:var(--surface); border:1px solid var(--rule); padding:22px; margin-top:28px}
.autor .av{width:58px; height:58px; border-radius:50%; background:var(--gruen); color:#fff; display:grid; place-items:center; font-family:var(--sans); font-weight:700; flex:0 0 auto}
.autor .h{font-family:var(--serif); font-weight:600; font-size:1.06rem; display:block; margin-bottom:4px}
.autor p{font-family:var(--sans); font-size:.86rem; color:var(--text-3); margin:0}

/* ---------- Abschlussblock ---------- */
.final{background:var(--gruen); color:#fff; padding:58px 0}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .final{background:#10291E} }
.final h2{color:#fff; border:0}
.final p{color:rgba(255,255,255,.84)}
.final-in{display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:48px; align-items:center}
@media (max-width:900px){ .final-in{grid-template-columns:1fr; gap:28px} }
.final .schein{box-shadow:none; color:var(--text)}
.final ul{color:rgba(255,255,255,.88); font-family:var(--sans); font-size:.95rem}

/* ---------- Fuß ---------- */
footer.fuss{background:var(--surface); border-top:1px solid var(--rule); padding:50px 0 26px; font-family:var(--sans); font-size:.88rem}
.f-cols{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:30px}
@media (max-width:980px){ .f-cols{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .f-cols{grid-template-columns:1fr} }
footer.fuss .h{font-family:var(--sans); font-size:.76rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin:0 0 12px; color:var(--text-2); display:block}
footer.fuss ul{list-style:none; padding:0; margin:0}
footer.fuss li{margin-bottom:7px}
footer.fuss a{color:var(--text-2); text-decoration:none}
footer.fuss a:hover{color:var(--gruen); text-decoration:underline}
.f-legal{border-top:1px solid var(--rule); margin-top:30px; padding-top:18px; font-size:.78rem; color:var(--text-3)}
.f-legal p{max-width:none}
.f-domain{font-family:var(--serif); font-size:1.05rem; font-weight:600; color:var(--text)}
.f-anbieter{columns:4 180px; column-gap:24px; list-style:none; padding:0; margin:0}
.f-anbieter li{break-inside:avoid; margin-bottom:6px}
.f-block{border-top:1px solid var(--rule); margin-top:28px; padding-top:22px}

/* ---------- Mobil-CTA ---------- */
.m-cta{position:fixed; left:0; right:0; bottom:0; z-index:55; display:none; gap:12px; align-items:center;
  background:var(--surface); border-top:1px solid var(--rule); padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  font-family:var(--sans); box-shadow:0 -6px 20px rgba(0,0,0,.1); transform:translateY(110%); transition:transform .25s ease}
.m-cta.show{transform:translateY(0)}
.m-cta small{font-size:.76rem; color:var(--text-3); line-height:1.3}
.m-cta small b{display:block; color:var(--text); font-size:.9rem}
.m-cta .btn{margin-left:auto; padding:12px 18px; font-size:.92rem}
@media (max-width:860px){ .m-cta{display:flex} body{padding-bottom:76px} }

/* ======================================================================
 * LEAD-FORMULAR (Popup Desktop, Vollbild Mobil)
 * ==================================================================== */
.lead-overlay{position:fixed; inset:0; z-index:400; display:none; background:rgba(12,24,18,.62);
  overflow-y:auto; -webkit-overflow-scrolling:touch; padding:40px 16px; backdrop-filter:blur(2px)}
.lead-overlay.offen{display:block; animation:lead-ein .18s ease}
@keyframes lead-ein{from{opacity:0}to{opacity:1}}
body.lead-offen{overflow:hidden}
.lead-dialog{max-width:600px; margin:0 auto; background:var(--surface); position:relative; box-shadow:0 30px 80px -30px rgba(0,0,0,.6); color:var(--text)}
.lead-dialog::before{content:""; position:absolute; left:0; right:0; top:0; height:7px; background:repeating-linear-gradient(90deg,var(--gruen) 0 12px,transparent 12px 20px)}
.lead-close{position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%; border:1px solid var(--rule);
  background:var(--surface); color:var(--text); cursor:pointer; display:grid; place-items:center; z-index:2}
.lead-close:hover{background:var(--bogen)}
.lead-kopf{padding:30px 30px 14px; border-bottom:1px dashed var(--rule)}
.lead-kopf .eyebrow{margin:0 0 6px; padding-right:48px}
.lead-kopf .h{font-family:var(--serif); font-size:1.5rem; font-weight:600; line-height:1.2; margin:0; padding-right:44px}
.lead-kopf p{font-family:var(--sans); font-size:.84rem; color:var(--text-3); margin:6px 0 0}
.lead-fortschritt{height:6px; background:var(--rule-2); margin:0}
.lead-fortschritt i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gruen),var(--gruen-m)); transition:width .3s ease}
.lead-body{padding:24px 30px 10px; font-family:var(--sans); min-height:300px}
.lead-body .q{font-family:var(--serif); font-size:1.3rem; font-weight:600; line-height:1.3; margin:0 0 4px}
.lead-body .qs{font-size:.86rem; color:var(--text-3); margin:0 0 16px}
.opts{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.opts.eins{grid-template-columns:1fr}
@media (max-width:480px){ .opts{grid-template-columns:1fr} }
.opt{display:flex; align-items:center; gap:12px; text-align:left; padding:14px 14px; border:1.5px solid var(--rule); background:var(--surface);
  border-radius:var(--radius); cursor:pointer; font-family:var(--sans); font-size:.95rem; font-weight:600; color:var(--text); line-height:1.3; transition:border-color .12s, background .12s}
.opt:hover{border-color:var(--gruen); background:var(--gruen-l)}
.opt.sel,.opt[aria-pressed="true"]{border-color:var(--gruen); background:var(--gruen-l); box-shadow:inset 0 0 0 1px var(--gruen)}
.opt .ic{width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:var(--bogen); color:var(--gruen); font-size:1.05rem}
.opt small{display:block; font-weight:400; font-size:.78rem; color:var(--text-3); margin-top:2px}
.lead-body label.f{display:block; font-size:.78rem; font-weight:700; color:var(--text-2); margin:12px 0 5px}
.lead-body input.f,.lead-body select.f,.lead-body textarea.f{width:100%; padding:12px 13px; border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--bogen); color:var(--text); font-family:var(--sans); font-size:1rem}
.lead-body input.f:focus,.lead-body select.f:focus,.lead-body textarea.f:focus{border-color:var(--gruen); outline:none; box-shadow:0 0 0 3px rgba(20,67,47,.13)}
.lead-body .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.lead-body .row-plz{display:grid; grid-template-columns:1fr 2fr; gap:12px}
@media (max-width:480px){ .lead-body .row{grid-template-columns:1fr; gap:0} }
.lead-body .err{display:none; color:var(--siegel); font-size:.84rem; font-weight:600; margin-top:10px}
.lead-fuss{display:flex; align-items:center; gap:12px; padding:16px 30px 24px; font-family:var(--sans)}
.lead-fuss .zurueck{background:none; border:0; color:var(--text-3); font-family:var(--sans); font-size:.9rem; font-weight:600; cursor:pointer; padding:10px 4px}
.lead-fuss .zurueck:hover{color:var(--text)}
.lead-fuss .btn{margin-left:auto}
.lead-trust{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; padding:12px 30px 20px; border-top:1px solid var(--rule-2); font-family:var(--sans); font-size:.75rem; color:var(--text-3)}
.lead-trust span::before{content:"✓ "; color:var(--gruen); font-weight:800}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:.8rem; color:var(--text-2); margin-top:14px; line-height:1.45}
.consent input{margin-top:3px; width:18px; height:18px; flex:0 0 auto; accent-color:var(--gruen)}
.hp-field{position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; opacity:0!important}
.lead-erg{margin:0}
.lead-erg .zeile{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--rule-2)}
.lead-erg .zeile:last-child{border-bottom:0}
.lead-erg .nr{font-family:var(--serif); font-weight:600; font-size:1.2rem; color:var(--text-3); width:1.4em}
.lead-erg .nm{font-weight:700; line-height:1.3; font-size:.94rem}
.lead-erg .nm small{display:block; font-weight:400; color:var(--text-3); font-size:.78rem}
.lead-erg .pr{font-family:var(--serif); font-weight:600; font-size:1.18rem; color:var(--gruen); white-space:nowrap; text-align:right}
.lead-erg .pr small{display:block; font-family:var(--sans); font-size:.68rem; color:var(--text-3); font-weight:500}
.lead-fazit{background:var(--gruen-l); border-left:3px solid var(--gold); padding:12px 14px; margin:14px 0 0; font-size:.86rem; line-height:1.5; color:var(--text-2)}
.lead-laden{padding:40px 0; text-align:center; color:var(--text-3)}
.lead-done{text-align:center; padding:20px 0 30px}
.lead-done .tick{width:66px; height:66px; border-radius:50%; background:var(--gruen); color:#fff; display:grid; place-items:center; font-size:2rem; margin:0 auto 14px}
.lead-done .h{font-family:var(--serif); font-size:1.5rem; font-weight:600; display:block; margin-bottom:8px}
.lead-vorteile{list-style:none; padding:0; margin:16px 0 0; font-size:.86rem; color:var(--text-2)}
.lead-vorteile li{display:flex; gap:8px; margin-bottom:6px}
.lead-vorteile li::before{content:"✓"; color:var(--gruen); font-weight:800}
@media (max-width:700px){
  .lead-overlay{padding:0; background:var(--surface)}
  .lead-dialog{max-width:none; min-height:100%; box-shadow:none; display:flex; flex-direction:column}
  .lead-kopf{padding:26px 18px 12px}
  .lead-kopf .h{font-size:1.28rem}
  .lead-body{padding:20px 18px 6px; flex:1}
  .lead-fuss{padding:14px 18px 18px; position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--rule-2)}
  .lead-trust{padding:10px 18px calc(16px + env(safe-area-inset-bottom))}
}

/* ---------- 404, Rechtliches ---------- */
.seite-schmal{max-width:820px; margin:0 auto; padding:52px 22px 70px}
.platzhalter{background:var(--warn-l); border:1px dashed var(--warn); padding:14px 18px; font-family:var(--sans); font-size:.9rem}

/* ---------- Druck ---------- */
@media print{
  header.top nav,.sticky-bar,.m-cta,.lead-overlay,.final,.side,.toc-wrap,.burger{display:none!important}
  body{background:#fff; font-size:12pt}
  .doc,.doc-2{grid-template-columns:1fr}
}

/* Tarifvorschau und feldbezogene Formularfehler. */
.lead-body .field-error{color:var(--siegel);font-size:.82rem;font-weight:600;line-height:1.4;margin-top:6px}
.lead-body .field-error[hidden]{display:none}
.lead-body input[aria-invalid="true"]{border:2px solid var(--siegel);background:var(--siegel-l)}
.lead-body input[aria-invalid="true"]:focus{border-color:var(--siegel);box-shadow:0 0 0 3px var(--siegel-l)}
.lead-body .consent.ungueltig{outline:2px solid var(--siegel);outline-offset:4px;border-radius:var(--radius)}
.lead-tarif{padding:16px;border:1px solid var(--rule);background:var(--surface);margin:14px 0;border-radius:var(--radius)}
.lead-tarif h3{font-family:var(--sans);font-size:1rem;line-height:1.4;margin:0 0 4px}
.lead-tarif-anbieter,.lead-tarif-hinweis{font-size:.78rem;line-height:1.5;color:var(--text-2);margin:4px 0}
.lead-tarif-preis{font-family:var(--serif);font-size:1.6rem;line-height:1.3;color:var(--gruen);margin:10px 0 4px}
.lead-tarif-preis small{font-family:var(--sans);font-size:.8rem}
.lead-tarif ul{font-size:.82rem;line-height:1.5;margin:12px 0 0}
.lead-fazit p{margin:0 0 10px}.lead-fazit p:last-child{margin:0}
.lead-fuss .btn{min-width:0;white-space:normal;overflow-wrap:anywhere}
.lead-fuss .zurueck{flex-shrink:0}
.lead-body .opts[aria-invalid="true"]{outline:2px solid var(--siegel);outline-offset:4px}

/* Long insurance terms must fit narrow cards and tariff columns. */
.kachel .t { overflow-wrap:anywhere; hyphens:auto; }
.tarif li > span { min-width:0; overflow-wrap:anywhere; hyphens:auto; }

/* Lange FAQ-Fragen auf schmalen Mobilgeräten innerhalb der Seitenränder halten. */
@media(max-width:640px){.faq summary{display:grid;grid-template-columns:minmax(0,1fr) auto;overflow-wrap:anywhere}}

@media(max-width:640px){.faq .a{overflow-wrap:anywhere;min-width:0}}

/* Geschlossene FAQ-Inhalte dürfen die Dokumentbreite nicht vergrößern. */
.faq details:not([open]){overflow:clip}

@media(max-width:640px){article h2,article h3{overflow-wrap:anywhere;hyphens:auto}}

@media(max-width:640px){.faq summary{display:block;position:relative;padding-right:48px}.faq summary::after{position:absolute;right:20px;top:18px;width:12px;height:24px;text-align:center}}

/* Klarer Verwendungszweck unmittelbar vor den Kontaktfeldern. */
.lead-body .lead-no-advertising{margin:14px 0 16px;padding:14px 16px;background:#edf5ef;border-left:3px solid #174733;color:#173e2e;font-size:.88rem;line-height:1.55}
.lead-no-advertising strong{display:block;font-size:.95rem;margin-bottom:5px}
.lead-body .lead-no-advertising p{margin:0;color:inherit;font-size:inherit;line-height:inherit}

/* Anfrage für eine andere Person: gleiche Kartenoptik, eindeutige Zuordnung. */
.lead-person-options .opt { align-items: flex-start; }
.lead-person-options .ic { display: grid; place-items: center; }
.lead-person-options .opt svg { flex-shrink: 0; }
.lead-person-details { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linie, #d6dfd9); }
.lead-person-summary { padding: 14px 16px; margin: 0 0 18px; background: #edf3ef; border-left: 3px solid #194d38; font: 0.9rem/1.55 var(--sans, sans-serif); }
.lead-body input.f, .lead-body select.f { min-width: 0; max-width: 100%; }
.lead-body select[aria-invalid="true"] { border: 2px solid var(--siegel); background: var(--siegel-l); }