/* DokuFetch-Website - Stylesheet (DF-181: ein Stylesheet, ?v=<filemtime>; Theme-Token aus themes/<theme>/theme.css, das
   inline mit kritisch.css ausgeliefert wird). Gestaltung nach den ChatGPT-Designvorgaben v8 (02_DESIGN_SYSTEM): weisse
   Abschnitte, hellblau hinterlegte Bereiche, Karten mit Radius 18, Nummernkarten, Verlaufsknoepfe, dunkler Fuss.
   Barrierefreiheit (DF-182 ff.): Fokusring 3px, Zielgroesse >= 44px, Formularschrift 16px, Kontrast >= 4,5:1,
   reduzierte Bewegung, erzwungene Farben, kein waagerechtes Scrollen ab 320px. Keine Inline-Stile (CSP). */

/* ------------------------------------------------------------------ Abschnitte und Raster */
.abschnitt{padding:72px 0}
.abschnitt-eng{padding:32px 0}
.abschnitt-hell{background:var(--nebel)}
.abschnitt+.abschnitt-hell,.abschnitt-hell+.abschnitt{border-top:0}
.abschnitt-kopf{display:grid;gap:16px;margin-bottom:36px}
.abschnitt-text{color:var(--grau);font-size:1.08rem;max-width:610px}
.raster{display:grid;gap:20px;grid-template-columns:1fr}
.raster>*{min-width:0}
.verwandtes h2,.abschnitt>.wrap>h2,.abschnitt>.wrap.schmal>h2{margin-bottom:24px}

/* ------------------------------------------------------------------ Karten, Kacheln, Symbole */
.karte{position:relative;background:#fff;border:1px solid var(--linie);border-radius:var(--r-m);box-shadow:var(--schatten-s);padding:26px}
.karte h3{margin-bottom:8px}
.karte p{color:var(--grau)}
.karte p+p{margin-top:8px}
.karte-titel{font-size:1.15rem;margin-bottom:10px}
.karte-nummer,.karte-symbol{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--primaer-hell),#e7fffb);color:var(--signal-dunkel);font-weight:900;font-size:1.15rem;margin-bottom:18px}
.symbol{width:24px;height:24px}
.karte-link{display:inline-block;margin-top:16px;font-weight:750;text-decoration:none}
.karte-link::after{content:" →"}
.karte-link:hover{text-decoration:underline}
.kachel{display:flex;flex-direction:column}
.kachel-link{color:var(--text);text-decoration:none}
.kachel-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.kachel:hover{border-color:#b9cbe4;box-shadow:var(--schatten-m)}
.kachel:focus-within{outline:3px solid var(--signal);outline-offset:2px}
.kachel-link:focus-visible{outline:none}
.artikel-bild{margin:-26px -26px 18px;border-radius:var(--r-m) var(--r-m) 0 0;overflow:hidden}
.artikel-bild img{width:100%}
.artikel-datum{margin:-2px 0 8px;color:var(--grau)}
.klein{font-size:.9rem}

/* ------------------------------------------------------------------ Schritte, Wege, Listen */
.schritte{list-style:none;padding:0;display:grid;gap:16px;counter-reset:schritt}
.schritte>li{counter-increment:schritt;position:relative;padding:22px 22px 22px 76px;background:#fff;border:1px solid var(--linie);border-radius:var(--r-m)}
.schritte>li::before{content:counter(schritt);position:absolute;left:22px;top:20px;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--primaer-hell);color:var(--signal-dunkel);font-weight:900}
.schritte>li p{color:var(--grau);margin-top:4px}
.schritte-klein{gap:10px}
.schritte-klein>li{padding:14px 14px 14px 60px;border-radius:12px}
.schritte-klein>li::before{left:14px;top:13px;width:32px;height:32px;border-radius:10px}
.schritte-klein h3{font-size:1rem}
.wege .weg{display:flex;flex-direction:column}
.weg .knopf-gruppe{margin-top:auto;padding-top:20px}
.weg-hervor{border:2px solid var(--primaer);box-shadow:var(--schatten-m)}
.weg-marke{display:inline-block;align-self:flex-start;margin-bottom:12px;padding:4px 10px;border-radius:999px;background:var(--primaer-hell);color:var(--signal-dunkel);font-size:.8rem;font-weight:750}
.haken-liste{list-style:none;padding:0;display:grid;gap:10px;margin-top:18px}
.haken-liste li{position:relative;padding-left:34px}
.haken-liste li::before{content:"✓";position:absolute;left:0;top:1px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--gruen-hell);color:var(--gruen);font-weight:900;font-size:.8rem}
.verweis-liste{list-style:none;padding:0;display:grid;gap:8px}
.verweis-liste a{font-weight:650}
.begriff-liste{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.begriff-liste a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;background:var(--primaer-hell);text-decoration:none;font-weight:650}

/* ------------------------------------------------------------------ Geteilt / Beispielprozess / Bilder */
.geteilt{display:grid;gap:32px;align-items:center}
.geteilt>*{min-width:0}
.baustein-checkliste .geteilt>div:first-child h2{margin-bottom:14px}
.prozess{background:linear-gradient(135deg,#f2f8ff,#f8fffe);border-radius:var(--r-l);padding:32px}
.prozess h3{margin-bottom:16px}
.prozess-liste{list-style:none;padding:0;display:grid;gap:12px;counter-reset:p}
.prozess-liste li{counter-increment:p;background:#fff;border:1px solid var(--linie);border-radius:12px;padding:13px 16px;text-align:center;font-size:.95rem}
.prozess-liste li::before{content:counter(p) " · ";font-weight:700}
.bildrahmen{border:1px solid var(--linie);border-radius:20px;padding:10px;background:#fff;box-shadow:var(--schatten-m);overflow:hidden}
.bildrahmen img{border-radius:12px;width:100%}
.bildrahmen figcaption{font-size:.9rem;color:var(--grau);padding:10px 4px 2px}
.held-bild{margin-top:-28px;position:relative}
.zweitbild{margin-top:24px;margin-bottom:24px;max-width:880px}

/* ------------------------------------------------------------------ Redaktionstext */
.text-inhalt{font-size:1.05rem;line-height:1.7;color:#2b3a57}
.text-inhalt>*+*{margin-top:1em}
.text-inhalt h2{margin-top:1.8em;color:var(--text);scroll-margin-top:96px}
.text-inhalt h3{margin-top:1.4em;color:var(--text)}
.text-inhalt ul,.text-inhalt ol{padding-left:1.4em}
.text-inhalt li+li{margin-top:.35em}
.text-inhalt table{width:100%;border-collapse:collapse;font-size:.95rem}
.text-inhalt th,.text-inhalt td{border:1px solid var(--linie);padding:10px 12px;text-align:left;vertical-align:top;overflow-wrap:break-word}
.text-inhalt th{background:var(--nebel)}
.text-inhalt dt{font-weight:750;margin-top:1em}
.text-inhalt dd{margin:4px 0 0}
.text-inhalt blockquote{border-left:4px solid var(--primaer);margin:1.2em 0;padding:4px 0 4px 18px;color:var(--grau)}
.kurzantwort{scroll-margin-top:96px}

/* ------------------------------------------------------------------ Text mit Seitenspalte */
.text-raster{display:grid;gap:40px}
.text-raster>*{min-width:0}
.text-hauptspalte>*+*{margin-top:32px}
.seitenspalte{display:grid;gap:20px;align-content:start}
.seitenspalte .knopf{width:100%;margin-top:14px}
.inhaltsverzeichnis{background:var(--nebel);border:1px solid var(--linie);border-radius:var(--r-m);padding:20px 24px}
.iv-titel{font-weight:800;margin-bottom:8px}
.inhaltsverzeichnis ol{padding-left:1.3em;display:grid;gap:4px}
.inhaltsverzeichnis a{display:inline-block;padding:6px 0}

/* ------------------------------------------------------------------ CTA-Band */
.cta-band{display:grid;gap:20px;align-items:center;background:var(--held-verlauf);color:#fff;border-radius:var(--r-l);padding:40px}
.cta-band p{color:#dbe8fa;margin-top:10px}
.cta-band .knopf-gruppe{margin-top:0}
.cta-band .knopf-hell{border-color:#fff}
.knopf-hinweis{font-size:.9rem;color:#b8cbe6;margin-top:10px}
.baustein-cta.abschnitt-hell{background:#fff}

/* ------------------------------------------------------------------ Tabellen, Faktenblock, Quelle */
.tabelle-rahmen{border:1px solid var(--linie);border-radius:var(--r-m);background:#fff}
.tabelle-rahmen thead tr:first-child>:first-child{border-top-left-radius:calc(var(--r-m) - 1px)}
.tabelle-rahmen thead tr:first-child>:last-child{border-top-right-radius:calc(var(--r-m) - 1px)}
.daten-tabelle,.fakten-tabelle{width:100%;border-collapse:collapse;font-size:.97rem}
.daten-tabelle th,.daten-tabelle td,.fakten-tabelle th,.fakten-tabelle td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--linie);overflow-wrap:break-word}
.daten-tabelle thead th{background:var(--nebel);font-size:.85rem;color:var(--grau);white-space:nowrap}
.daten-tabelle tbody tr:last-child>*,.fakten-tabelle tbody tr:last-child>*{border-bottom:0}
.fakten-tabelle th{width:38%;color:var(--grau);font-weight:650}
.faktenblock{background:#fff;border:1px solid var(--linie);border-radius:var(--r-m);box-shadow:var(--schatten-s);padding:26px}
.faktenblock h2{font-size:1.35rem;margin-bottom:16px}
.faktenblock .tabelle-rahmen{border-radius:12px}
.faktenblock-fuss{margin-top:14px;font-size:.9rem}
.quelle-kopieren{margin-top:18px}
.quelle-kopieren label{display:block;font-weight:700;font-size:.9rem;margin-bottom:6px}
.quelle-zeile{display:flex;flex-wrap:wrap;gap:10px}
.quelle-zeile input{flex:1 1 260px;min-width:0;min-height:44px;font:inherit;font-size:16px;padding:8px 12px;border:1px solid #7d8ca6;border-radius:var(--r-s);background:var(--nebel);color:var(--text)}
.status-meldung{min-height:1.4em;font-size:.9rem;color:var(--gruen);margin-top:6px}

/* ------------------------------------------------------------------ Hinweise */
.hinweis-kasten{background:var(--primaer-hell);border-left:4px solid var(--primaer);border-radius:12px;padding:16px 20px;color:var(--text)}
.hinweis-warnung{background:#fff5df;border-left-color:#de8e13;color:#5c3b00}
.hinweis-leiste{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;padding:16px 0;margin:0;color:var(--grau);font-size:.92rem}
.hinweis-leiste li::before{content:"✓ ";color:var(--gruen);font-weight:900}
.rechtshinweis p{font-size:.95rem}

/* ------------------------------------------------------------------ Preise */
.preis-karten{align-items:stretch}
.preis-karte{display:flex;flex-direction:column}
.preis-empfohlen{border:2px solid var(--primaer);box-shadow:var(--schatten-m)}
.preis-marke{align-self:flex-start;margin-bottom:10px;padding:4px 10px;border-radius:999px;background:var(--verlauf-knopf);color:#fff!important;font-size:.78rem;font-weight:750}
.preis{margin:6px 0 4px;color:var(--text)!important}
.preis-zahl{font-size:2rem;font-weight:850;letter-spacing:-.02em}
.preis-einheit{color:var(--grau);font-size:.95rem}
.preis-ziel{font-size:.92rem}
.preis-zelle{white-space:nowrap;font-weight:700}
.preis-zelle .preis-zahl{font-size:1rem}
.preis-fuss{margin-top:16px;color:var(--grau)}

/* ------------------------------------------------------------------ FAQ */
.faq-block h2{margin-bottom:18px}
.faq-eintrag{border:1px solid var(--linie);border-radius:14px;background:#fff}
.faq-eintrag+.faq-eintrag{margin-top:10px}
.faq-h{font-size:1.02rem;margin:0}
.faq-frage{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;min-height:56px;padding:14px 20px;background:none;border:0;font:inherit;font-weight:750;color:var(--text);text-align:left;cursor:pointer;border-radius:14px}
.faq-frage::after{content:"+";font-size:1.4rem;line-height:1;color:var(--signal-dunkel);flex:0 0 auto}
.faq-frage[aria-expanded="true"]::after{content:"–"}
.faq-antwort{padding:0 20px 18px;color:#2b3a57}
html.ohne-js .faq-antwort[hidden]{display:block}
html.ohne-js .faq-frage::after{content:none}

/* ------------------------------------------------------------------ Autor, Quellen, Glossar */
.autorbox{display:flex;gap:14px;align-items:center;padding:14px 18px;border:1px solid var(--linie);border-radius:14px;background:var(--nebel);font-size:.95rem}
.autorbox img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.quellen h2,.glossar-verweise h2{font-size:1.3rem;margin-bottom:12px}
.buchstaben ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 28px}
.buchstaben a{display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:10px;border:1px solid var(--linie);text-decoration:none;font-weight:750}
.glossar-gruppe{margin-top:28px}
.glossar-gruppe h2{font-size:1.6rem;border-bottom:2px solid var(--linie);padding-bottom:6px;scroll-margin-top:96px}
.glossar dt{font-weight:800;font-size:1.08rem;margin-top:20px;scroll-margin-top:96px}
.glossar dt:target{background:var(--primaer-hell);border-radius:6px}
.glossar dd{margin:6px 0 0;color:#2b3a57}

/* ------------------------------------------------------------------ Changelog, Sicherheit, Presse, Team */
.changelog{list-style:none;padding:0;margin-top:24px;display:grid;gap:22px}
.changelog-eintrag{border-left:3px solid var(--primaer);padding:4px 0 4px 22px;scroll-margin-top:96px}
.changelog-kopf{color:var(--grau);font-size:.92rem;margin-bottom:4px}
.changelog-eintrag h2{font-size:1.3rem;margin-bottom:6px}
.changelog-eintrag ul{margin-top:8px;padding-left:1.2em}
.sicherheit-kapitel{scroll-margin-top:96px}
.sicherheit-kapitel h2{margin-bottom:14px}
.aenderungen-liste{padding-left:1.2em;display:grid;gap:8px}
.presse-liste{list-style:none;padding:0;display:grid;gap:18px}
.presse-liste time{color:var(--grau);font-size:.92rem;margin-right:6px}
.person-karte img{border-radius:50%;width:96px;height:96px;object-fit:cover;margin-bottom:14px}
.person-rolle{font-weight:650}
.person-foto{border-radius:var(--r-l);width:240px;height:240px;object-fit:cover;box-shadow:var(--schatten-l);margin-left:auto}
.person-zitat{border-left:4px solid var(--primaer);padding:6px 0 6px 20px;margin:0 0 28px;font-size:1.15rem;color:var(--grau)}
.person-kontakt{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.person-kontakt a:not(.knopf){display:inline-flex;align-items:center;min-height:44px}
.abschnitt .wrap.schmal>h2+.haken-liste{margin-top:12px}
.abschnitt .wrap.schmal>*+h2{margin-top:32px}

/* ------------------------------------------------------------------ Rechner */
.rechner-raster{display:grid;gap:24px;align-items:start}
.rechner-raster>*{min-width:0}
.ergebnis h2{font-size:1.35rem;margin-bottom:14px}
.ergebnis .fakten-tabelle{margin-bottom:14px}
.ergebnis-leer{background:var(--nebel);box-shadow:none;color:var(--grau)}
.rechner-ergebnis:focus{outline:none}

/* ------------------------------------------------------------------ Formulare */
.formular-raster-seite{display:grid;gap:32px;align-items:start}
.formular-raster-seite>*{min-width:0}
.formular{background:#fff;border:1px solid var(--linie);border-radius:var(--r-m);box-shadow:var(--schatten-s);padding:28px}
.formular-raster{display:grid;gap:18px 20px;margin:18px 0 22px}
.feld{display:grid;gap:6px;margin:0;padding:0;border:0;min-width:0}
.feld label,.feld legend{font-weight:700;font-size:.95rem}
.feld legend{padding:0;margin-bottom:6px}
.feld input[type=text],.feld input[type=email],.feld input[type=tel],.feld select,.feld textarea{width:100%;min-height:48px;font:inherit;font-size:16px;padding:10px 14px;border:1px solid #7d8ca6;border-radius:var(--r-s);background:#fff;color:var(--text)}
.feld textarea{min-height:130px;resize:vertical}
.feld input::placeholder,.feld textarea::placeholder{color:var(--grau)}
.feld-hilfe{font-size:.88rem;color:var(--grau)}
.feld-fehler{font-size:.9rem;color:var(--rot);font-weight:650}
.feld-fehler::before{content:"! ";font-weight:900}
.feld-mit-fehler input,.feld-mit-fehler select,.feld-mit-fehler textarea{border-color:var(--rot);border-width:2px}
.feld-wert{background:var(--nebel);border-radius:var(--r-s);padding:12px 14px;overflow-wrap:anywhere}
.auswahl-liste{display:grid;gap:8px}
.auswahl{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:10px 12px;border:1px solid var(--linie);border-radius:var(--r-s);font-weight:500;cursor:pointer}
.auswahl input{width:20px;height:20px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--primaer)}
.auswahl:has(input:checked){border-color:var(--primaer);background:var(--primaer-hell)}
.feld-einwilligung{margin-bottom:20px}
.feld-einwilligung .auswahl{border:0;padding:0;font-size:.95rem}
.pflicht{color:var(--rot);font-weight:800}
.formular-pflichthinweis{color:var(--grau)}
.formular-meldung{border:2px solid var(--rot);background:var(--rot-hell);border-radius:12px;padding:16px 20px;margin-bottom:18px}
.formular-meldung ul{margin-top:8px;padding-left:1.2em}
.formular-meldung a{color:var(--rot);font-weight:650}
.formular .knopf-gross{width:100%;min-height:54px;font-size:1.05rem}
.formular .knopf-gross+.klein{margin-top:12px;color:var(--grau);text-align:center}
.honigtopf{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.formular-spalte{min-width:0}

/* ------------------------------------------------------------------ Danke */
.danke h1{margin-bottom:6px}
.danke .kurzantwort{font-size:1.12rem;color:var(--grau);margin-top:12px}
.danke-vorgang{margin:24px 0}
.danke-vorgang p+p{margin-top:8px}
.vorgangsnummer{font-size:1.25rem;letter-spacing:.04em;color:var(--text)}
.danke h2{margin:32px 0 14px}
.danke>.wrap>p{margin-top:20px}

/* ------------------------------------------------------------------ Mobilmenue */
.mobilmenue-liste{list-style:none;padding:0;display:grid}
.mobilmenue-liste a{display:flex;align-items:center;min-height:52px;color:#fff;text-decoration:none;font-weight:700;font-size:1.08rem;border-bottom:1px solid rgba(255,255,255,.1)}
.mobilmenue-liste a[aria-current]{color:#9ac3ff}
.mobilmenue-aktionen{display:grid;gap:12px;margin-top:20px}
.mobilmenue-aktionen .tel-link{color:var(--primaer-dunkel)}
.mobilmenue-zu{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;color:#b8cbe6}
/* 1.5.2: Erreichbarkeit, Telefon und Rueckruf im Mobilmenue (das Band ist auf dem Handy ausgeblendet) */
.mobilmenue-kontakt{display:grid;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);color:#b8cbe6;font-size:.92rem}
.mobilmenue-kontakt .knopf{width:100%}
.mobilmenue-kontakt .tel-link{color:var(--primaer-dunkel)}
.mobilmenue-kontakt .tel-vor{font-weight:550}
/* offenes Mobilmenue: die Aktionsleiste unten tritt zurueck, sonst verdeckt sie das Menueende */
body:has(.kopf.offen) .leiste,body:has(.mobilmenue:target) .leiste{display:none}
.mobilmenue-rueckruf{display:inline-flex;align-items:center;justify-content:center;min-height:44px;color:#fff;font-weight:650}

/* ------------------------------------------------------------------ Fuss und mobile Aktionsleiste */
.fuss{background:var(--fuss);color:#c8d6eb;padding:56px 0 0;margin-top:0;font-size:.95rem}
.fuss a{color:#fff;text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss-raster{display:grid;gap:32px}
.fuss-satz{margin-top:14px;max-width:340px}
.fuss-anschrift{margin-top:14px;font-style:normal}
.fuss-kontakt{display:grid;gap:4px;margin-top:14px}
.fuss-kontakt a{display:inline-flex;align-items:center;min-height:44px}
.fuss-zeiten{color:#9fb4d4;font-size:.9rem}
.fuss-titel{color:#fff;font-weight:800;margin-bottom:10px}
.fuss-gruppe ul{list-style:none;padding:0;display:grid}
.fuss-gruppe a{display:inline-flex;align-items:center;min-height:40px}
.fuss-unten{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding:22px 32px 28px;display:grid;gap:10px;font-size:.88rem}
.fuss-steuer{color:#9fb4d4}
.fuss-zeile{display:flex;flex-wrap:wrap;gap:8px 22px;color:#9fb4d4}
.fuss-zeile a{color:#c8d6eb;min-height:44px;display:inline-flex;align-items:center}
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--tief);border-top:1px solid rgba(255,255,255,.16);box-shadow:0 -8px 24px rgba(4,27,66,.25);transition:transform .2s ease,visibility .2s}
.leiste-knopf{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:10px;color:#fff;background:#0d2a5a;text-decoration:none;font-weight:750;font-size:.92rem;line-height:1.2;border:1px solid rgba(255,255,255,.3);text-align:center;padding:0 6px;overflow-wrap:anywhere}
.leiste-haupt{background:var(--verlauf-knopf);border-color:transparent}
body.hat-leiste{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
/* 1.4.1: Solange Knoepfe im Seitenkopf sichtbar sind, tritt die Leiste zurueck (seite.js, Abschnitt 9) - keine Ueberdeckung */
body.leiste-weg .leiste{transform:translateY(110%);visibility:hidden}
.leiste.leiste-start{transition:none}

/* ------------------------------------------------------------------ Einwilligung (nur falls ein Banner noetig ist) */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;max-width:720px;margin:0 auto;max-height:calc(100vh - 32px);overflow:auto;background:#fff;border:1px solid var(--linie);border-radius:var(--r-m);box-shadow:var(--schatten-l);padding:24px}
.consent-seite{position:static;max-height:none;box-shadow:var(--schatten-s);margin:0 0 24px}
.consent h2{font-size:1.3rem;margin-bottom:10px}
.consent-details{margin:14px 0}
.consent-details summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.consent-gruppe{border-top:1px solid var(--linie);padding:14px 0}
.consent-zeile{display:flex;gap:12px;align-items:flex-start}
.consent-zeile input{width:20px;height:20px;margin-top:3px;flex:0 0 auto;accent-color:var(--primaer)}
.consent-zeile .klein{display:block;color:var(--grau)}
.consent-gruppe .tabelle-rahmen{margin-top:10px}
.consent-knoepfe{display:grid;gap:10px}
.consent-knoepfe .knopf{width:100%}
body.hat-leiste .consent{bottom:80px}

/* ------------------------------------------------------------------ Seitenuebersicht, Bausteine eingebettet */
.seitenindex h2{font-size:1.2rem;margin-bottom:10px}
.seitenindex section{min-width:0}
.baustein-eingebettet h2{font-size:1.45rem}
.baustein-eingebettet .abschnitt-kopf{margin-bottom:18px}

/* ------------------------------------------------------------------ Breakpoints */
@media (min-width:40rem){
.raster-2,.raster-3,.raster-4,.raster-5{grid-template-columns:repeat(2,minmax(0,1fr))}
.formular-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
.feld-breit{grid-column:1/-1}
.consent-knoepfe{grid-template-columns:repeat(3,1fr)}
.fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
.fuss-marke{grid-column:1/-1}
}
@media (min-width:62rem){
.abschnitt{padding:84px 0}
.abschnitt-kopf{grid-template-columns:1fr 1fr;align-items:end;gap:40px}
.raster-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.raster-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.raster-5{grid-template-columns:repeat(3,minmax(0,1fr))}
.geteilt{grid-template-columns:1fr 1fr;gap:48px}
.text-raster{grid-template-columns:minmax(0,1fr) 320px;gap:56px}
.text-raster-kurz,.text-raster-recht{grid-template-columns:minmax(0,1fr)}
.text-raster-recht{max-width:880px}
.text-raster-kurz .seitenspalte{grid-template-columns:repeat(2,minmax(0,1fr))}
.seitenspalte{position:sticky;top:24px}
.text-raster-kurz .seitenspalte{position:static}
.cta-band{grid-template-columns:1.4fr 1fr;padding:48px 56px}
.cta-band .knopf-gruppe{justify-content:flex-end}
.formular-raster-seite{grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr)}
.rechner-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fuss-raster{grid-template-columns:1.4fr repeat(4,minmax(0,1fr))}
.fuss-marke{grid-column:auto}
.held-bild{margin-top:-40px}
}
@media (min-width:80rem){
.raster-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.preis-karten.raster-5 .karte{padding:22px}
}
@media (min-width:72rem){
.leiste{display:none}
body.hat-leiste{padding-bottom:0}
body.hat-leiste .consent{bottom:16px}
}
@media (max-width:40rem){
.abschnitt{padding:52px 0}
.karte,.faktenblock,.formular{padding:20px}
.artikel-bild{margin:-20px -20px 16px}
.cta-band{padding:28px 22px}
.cta-band .knopf{width:100%}
.prozess{padding:22px}
.fakten-tabelle th,.fakten-tabelle td{display:block;width:100%;padding:10px 14px}
.fakten-tabelle th{padding-bottom:0;border-bottom:0}
.person-foto{width:160px;height:160px;margin:0}
.fuss-unten{padding:20px 16px 24px}
.held-bild{margin-top:0}
}

/* ------------------------------------------------------------------ Bewegung, erzwungene Farben, Druck */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media (forced-colors:active){
.knopf,.karte,.faq-eintrag,.formular,.leiste-knopf,.auswahl{border:1px solid CanvasText}
.knopf-primaer,.leiste-haupt,.preis-marke{forced-color-adjust:none;background:Highlight;color:HighlightText}
.haken-liste li::before,.karte-nummer,.karte-symbol,.schritte>li::before{forced-color-adjust:auto;border:1px solid CanvasText}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid Highlight}
.logo{forced-color-adjust:none;background:#041b42;border-radius:8px;padding:2px 8px}   /* Negativlogo bleibt lesbar (helle Kontrastthemen) */
}
@media print{
.kopf-band,.kopf,.leiste,.consent,.seitenspalte,.fuss-gruppe,.knopf-gruppe,.quelle-kopieren button,.burger{display:none!important}
.held,.seitenkopf-dunkel,.cta-band{background:none!important;color:#000!important}
body{font-size:11pt}
a{color:#000}
}
/* Preiskarten-Zeilen (Aktion nur auf /preise, Wert der enthaltenen Module) */
.preis-aktion{margin-top:6px;padding:6px 10px;border-radius:8px;background:#eaf2ff;color:#08285e;font-size:.88rem;font-weight:650}
.preis-wert{margin-top:6px;color:var(--grau);font-size:.86rem}
/* 1.3.0 Aktion auf /preise: ruhige Karte bei den Paketen (kein Band, kein Countdown) */
.aktion-preise{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start;margin-top:28px;padding:28px;border:1px solid var(--linie);border-left:5px solid var(--primaer);border-radius:var(--r-m);background:linear-gradient(135deg,#fff,var(--nebel));box-shadow:var(--schatten-s)}
.aktion-preise h3{margin:4px 0 8px;font-size:1.35rem;color:var(--primaer-dunkel)}
.aktion-preise-marke{display:inline-block;margin:0;padding:3px 12px;border-radius:999px;background:var(--primaer-hell);color:var(--signal-dunkel);font-size:.8rem;font-weight:750}
.aktion-preise-satz{margin:0;color:var(--text)}
.aktion-preise-zwischen{margin:18px 0 0;font-size:1rem;color:var(--primaer-dunkel)}
.aktion-preise-bedingungen{margin-top:10px;font-size:.95rem}
.aktion-tabelle{width:100%;background:#fff}
.aktion-tabelle strong{color:var(--primaer-dunkel)}
.aktion-preise-fuss{margin-top:10px;color:var(--grau)}
@media (max-width:60rem){.aktion-preise{grid-template-columns:1fr;padding:22px}}
@media (forced-colors:active){.aktion-preise{border:2px solid CanvasText}.aktion-preise-marke{forced-color-adjust:none;background:Highlight;color:HighlightText}}
/* 1.3.0 Verwandte Inhalte als Verweiskarten (vorher ohne Seitenrand) */
.verwandtes .verweis-liste{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.verwandtes .verweis-liste a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:14px 18px;border:1px solid var(--linie);border-radius:14px;background:#fff;text-decoration:none;color:var(--primaer-dunkel);box-shadow:var(--schatten-s)}
.verwandtes .verweis-liste a::after{content:"→";color:var(--signal-dunkel)}
.verwandtes .verweis-liste a:hover{border-color:var(--primaer)}
/* 1.3.0 Bildunterschrift unter Produktbildern */
.bild-gross figcaption,.bildrahmen figcaption{margin-top:10px;color:var(--grau);font-size:.92rem;text-align:center}
/* 1.3.1: Aktionspreis oben in der Preiskarte, hervorgehoben; regulaerer Preis gestrichen daneben */
.karte .preis-aktion-marke{display:inline-block;align-self:flex-start;margin:6px 0 2px;padding:4px 11px;border-radius:999px;background:linear-gradient(90deg,#c2410c,#b91c1c);color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.02em}
.preis-mit-aktion{margin-top:4px}
.preis-mit-aktion .preis-zahl{color:#c2410c}
.preis-regulaer{margin-left:8px;color:var(--grau);font-size:1.05rem;font-weight:650;text-decoration-thickness:2px;white-space:nowrap}
.preis-regulaer .versteckt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.preis-danach{margin:0 0 8px;color:var(--grau);font-size:.86rem;font-weight:600}
.preis-empfohlen .preis-aktion-marke{box-shadow:0 4px 14px rgba(185,28,28,.25)}

/* ======================================================================================================================
   1.4.0 Aussehen und Bedienung: Funktions-Schaufenster, Vorher/Nachher, Ablauf mit Bildern, Vertrauensband,
   Verzeichnis, Zahlungsarten, Aktionskopf, Steckbrief (Faktenblock eingeklappt am Seitenende), Schritte als Raster.
   ====================================================================================================================== */
.abschnitt-dunkel{background:radial-gradient(800px 420px at 85% 0%,rgba(35,127,255,.28),transparent 60%),linear-gradient(160deg,#041632,#08285e);color:#fff}
.abschnitt-dunkel h2,.abschnitt-dunkel h3{color:#fff}
.abschnitt-dunkel .dachzeile{color:#7fe3e4}
.abschnitt-dunkel .abschnitt-text{color:#c9d8ee}
.abschnitt-kopf h2{max-width:20ch}

/* Karten: ruhiger, mit leichtem Anheben */
.karte{transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.baustein-karten .karte:hover,.kachel:hover{transform:translateY(-2px);box-shadow:var(--schatten-m)}
.karte-symbol{background:linear-gradient(135deg,#e3eeff,#dff8f7);color:var(--signal-dunkel)}

/* Schritte als Raster (Nummer oben), mit Bild als Zeitleiste */
.schritte>li{padding:66px 22px 22px;box-shadow:var(--schatten-s)}
.schritte>li::before{top:20px;background:var(--verlauf-knopf);color:#fff}
.schritte-mit-bild{display:grid;gap:32px;align-items:start}
.schritte-mit-bild>*{min-width:0}
.schritte-zeitleiste{gap:0}
.schritte-zeitleiste>li{padding:4px 0 26px 64px;background:none;border:0;box-shadow:none;border-radius:0}
.schritte-zeitleiste>li::before{left:0;top:0}
.schritte-zeitleiste>li::after{content:"";position:absolute;left:18px;top:44px;bottom:4px;width:2px;background:linear-gradient(var(--linie),transparent)}
.schritte-zeitleiste>li:last-child::after{content:none}
.schritte-bild{margin:0}
.schritte-klein>li{padding:14px 14px 14px 60px}
.schritte-klein>li::before{top:13px}

/* Vorher / Nachher */
.vn-kopf{display:none}
.vn-liste{list-style:none;padding:0;display:grid;gap:12px}
.vn-zeile{display:grid;gap:8px;align-items:stretch}
.vn-zeile p{margin:0;padding:16px 18px;border-radius:14px;font-size:1rem}
.vn-vorher{background:#f3f5f9;color:#4b5a76;border:1px dashed #c7d1e1}
.vn-nachher{position:relative;background:#fff;border:1px solid #bfe6d6;box-shadow:var(--schatten-s);color:var(--text);font-weight:600;padding-left:50px!important}
.vn-nachher::before{content:"✓";position:absolute;left:16px;top:16px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--gruen-hell);color:var(--gruen);font-weight:900;font-size:.8rem}
.vn-label{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;margin-bottom:2px;color:var(--grau)}
.vn-pfeil{display:none}

/* Ablauf in Schritten mit Bild */
.ablauf{list-style:none;padding:0;display:grid;gap:20px;counter-reset:ablauf}
.ablauf-schritt{counter-increment:ablauf;position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--linie);border-radius:var(--r-m);box-shadow:var(--schatten-s);overflow:hidden}
.ablauf-bild{margin:0;background:var(--nebel2);border-bottom:1px solid var(--linie)}
.ablauf-bild img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top left}
.ablauf-text{padding:20px 22px 24px}
.ablauf-text h3{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ablauf-text h3::before{content:counter(ablauf);display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--verlauf-knopf);color:#fff;font-size:.95rem}
.ablauf-text p{color:var(--grau);font-size:.97rem}

/* Funktions-Schaufenster */
.sf{display:grid;gap:22px}
.sf>*{min-width:0}
.sf-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.sf-tab{flex:0 0 auto;scroll-snap-align:start;display:flex;align-items:center;gap:10px;min-height:44px;padding:7px 14px 7px 8px;border-radius:12px;border:1px solid var(--linie);background:#fff;color:var(--text);font:inherit;font-size:.9rem;font-weight:650;line-height:1.2;text-align:left;cursor:pointer;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}
.sf-tab:hover{border-color:#b9cbe4;background:#f8fbff}
.sf-tab[aria-selected="true"]{border-color:var(--primaer);background:#fff;color:var(--primaer-dunkel);box-shadow:0 8px 22px rgba(14,108,255,.16)}
.sf-tab-symbol{display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--primaer-hell);color:var(--signal-dunkel)}
.sf-tab-symbol .symbol{width:18px;height:18px}
.sf-tab[aria-selected="true"] .sf-tab-symbol{background:var(--verlauf-knopf);color:#fff}
.sf-alle{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-weight:750;text-decoration:none;white-space:nowrap}
.sf-alle::after{content:" →"}
.sf-panel{display:grid;gap:18px;align-content:start}
.sf-panel[hidden]{display:none}
.sf-panel:focus-visible{outline:3px solid var(--signal);outline-offset:4px;border-radius:18px}
.sf-bild{margin:0}
.sf-bild img{object-fit:cover;object-position:top left}
.sf-text{display:grid;gap:10px 28px}
.sf-text>*{min-width:0}
.sf-titel{display:flex;align-items:center;gap:10px;font-size:1.2rem}
.sf-titel-symbol{display:none}
.sf-nutzen{color:#2b3a57}
.sf-ablauf-titel{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--signal-dunkel);margin-bottom:6px}
.sf-schritte{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;counter-reset:sf}
.sf-schritte li{counter-increment:sf;display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;background:var(--nebel);border:1px solid var(--linie);font-size:.86rem;font-weight:600;color:var(--primaer-dunkel)}
.sf-schritte li::before{content:counter(sf);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--linie);font-size:.75rem;font-weight:800;color:var(--signal-dunkel)}
.sf-link{justify-self:start;font-weight:700;text-decoration:none;font-size:.95rem}
.sf-link::after{content:" →"}
.sf-link:hover{text-decoration:underline}
html.ohne-js .sf-tabs{display:none}
html.ohne-js .sf-panel[hidden]{display:grid}
html.ohne-js .sf-panels{display:grid;gap:40px}
html.ohne-js .sf-titel-symbol{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--primaer-hell);color:var(--signal-dunkel)}

/* Vertrauensband */
.vertrauen-liste{list-style:none;padding:0;display:grid;gap:18px}
.vertrauen-liste li{padding:24px;border-radius:var(--r-m);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.vertrauen-liste p{color:#c9d8ee;margin-top:6px;font-size:.97rem}
.vertrauen-symbol{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;margin-bottom:16px;background:linear-gradient(135deg,rgba(26,115,232,.55),rgba(18,200,202,.45));color:#fff;box-shadow:0 0 0 6px rgba(18,200,202,.08)}
.vertrauen-link{margin-top:24px}
.vertrauen-link a{color:#fff;font-weight:700;text-underline-offset:3px}
.vertrauen-link a::after{content:" →"}

/* Verzeichnis nach Bereichen */
.verzeichnis{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.verzeichnis-gruppe{background:#fff;border:1px solid var(--linie);border-radius:var(--r-m);padding:20px 18px}
.verzeichnis-gruppe h3{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal-dunkel);margin-bottom:8px}
.verzeichnis-gruppe ul{list-style:none;padding:0;display:grid}
.verzeichnis-gruppe a{display:flex;align-items:center;gap:10px;min-height:42px;color:var(--text);text-decoration:none;font-weight:650;border-radius:8px}
.verzeichnis-gruppe a:hover{color:var(--signal-dunkel);text-decoration:underline}
.verzeichnis-symbol{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:var(--primaer-hell);color:var(--signal-dunkel)}
.verzeichnis-symbol .symbol{width:16px;height:16px}

/* Zahlungsarten (/preise) */
.zahlungsarten{list-style:none;padding:0;display:grid;gap:18px}
.zahlungsart{position:relative;background:#fff;border:1px solid var(--linie);border-radius:var(--r-m);box-shadow:var(--schatten-s);padding:24px}
.zahlungsart h3{margin-bottom:6px}
.zahlungsart p{color:var(--grau)}
.zahlungsart-symbol{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;margin-bottom:16px;background:var(--primaer-hell);color:var(--signal-dunkel)}
.zahlungsart-vorteil{border:2px solid #2aa877;box-shadow:0 14px 34px rgba(10,118,80,.14)}
.zahlungsart-vorteil .zahlungsart-symbol{background:var(--gruen-hell);color:var(--gruen)}
p.zahlungsart-marke{display:inline-block;margin:2px 0 10px;padding:4px 12px;border-radius:999px;background:linear-gradient(90deg,#08613f,#0a7650);color:#fff;font-size:.85rem;font-weight:800}
.zahlungsarten-fuss{margin-top:14px;color:var(--grau)}

/* Aktionskopf ueber den Paketkarten - einzige Knappheitsangabe ist die echte Restzahl der Anwendung */
.aktion-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:22px;padding:14px 18px;border-radius:16px;border:1px solid #f3c9b0;border-left:5px solid #c2410c;background:linear-gradient(90deg,#fff4ec,#fff)}
.aktion-kopf p{margin:0}
.aktion-kopf-marke{display:inline-block;padding:4px 11px;border-radius:999px;background:linear-gradient(90deg,#c2410c,#b91c1c);color:#fff;font-size:.78rem;font-weight:800}
.aktion-kopf-satz{font-weight:750;color:#7c2d12}
.aktion-kopf-plaetze{font-weight:750;color:#7c2d12;padding:3px 10px;border-radius:999px;background:#fff;border:1px solid #f3c9b0}
.aktion-kopf-link{margin-left:auto;font-weight:700;color:#9a3412}
.preis-karte .preis-zahl{letter-spacing:-.03em}
.preis-empfohlen{position:relative}

/* Steckbrief: Faktenblock "Auf einen Blick" eingeklappt am Seitenende (DF-167) */
.steckbrief-bereich{padding:8px 0 56px}
.faktenblock.steckbrief{background:none;border:0;box-shadow:none;padding:0}
.steckbrief-details{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.steckbrief-kopf{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 4px;cursor:pointer;list-style:none;color:var(--grau)}
.steckbrief-kopf::-webkit-details-marker{display:none}
.steckbrief-kopf::marker{content:""}
.steckbrief-symbol{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--nebel);color:var(--grau);flex:0 0 auto}
.steckbrief-symbol .symbol{width:16px;height:16px}
.steckbrief-titelzeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;min-width:0}
.faktenblock.steckbrief h2{font-size:.95rem;letter-spacing:0;margin:0;color:var(--text);font-weight:700}
.steckbrief-hinweis{font-size:.85rem;color:var(--grau)}
.steckbrief-oeffnen{margin-left:auto;font-size:.85rem;font-weight:700;color:var(--signal-dunkel);white-space:nowrap}
.steckbrief-oeffnen::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s ease}
.steckbrief-details[open] .steckbrief-oeffnen::after{transform:translateY(1px) rotate(-135deg)}
.steckbrief-kopf:hover h2{text-decoration:underline}
.steckbrief-inhalt{padding:4px 0 22px;max-width:900px}
.steckbrief .fakten-tabelle{font-size:.92rem}
.steckbrief .fakten-tabelle th,.steckbrief .fakten-tabelle td{padding:9px 14px}
.steckbrief-fuss{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 24px;margin-top:14px}
.steckbrief-fuss .quelle-kopieren{margin-top:0;flex:1 1 420px}
.steckbrief-fuss .faktenblock-fuss{margin:0 0 12px}
.text-hauptspalte>.steckbrief{margin-top:40px}

/* Funktionsseiten: Buehne */
.mit-buehne .seitenkopf-text{max-width:860px}
.baustein-karten .raster{gap:16px}

@media (min-width:40rem){
.vertrauen-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
.zahlungsarten{grid-template-columns:repeat(2,minmax(0,1fr))}
.ablauf{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:62rem){
.vn-kopf{display:grid;grid-template-columns:1fr 48px 1.15fr;margin-bottom:10px;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800}
.vn-kopf-vorher{color:var(--grau);grid-column:1}
.vn-kopf-nachher{color:var(--gruen);grid-column:3}
.vn-zeile{grid-template-columns:1fr 48px 1.15fr;align-items:center}
.vn-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vn-pfeil{display:grid;place-items:center;justify-self:center;width:34px;height:34px;border-radius:50%;background:var(--primaer-hell);color:var(--signal-dunkel)}
.vn-pfeil .symbol{width:18px;height:18px}
.vn-zeile p{height:100%;display:flex;align-items:center}
.vn-nachher::before{top:50%;transform:translateY(-50%)}
.ablauf{grid-template-columns:repeat(4,minmax(0,1fr))}
.ablauf-schritt:not(:last-child)::after{content:"";position:absolute;right:-17px;top:calc(37.5% - 7px);z-index:2;width:14px;height:14px;border-top:3px solid var(--primaer);border-right:3px solid var(--primaer);transform:rotate(45deg)}
.ablauf-schritt{overflow:visible}
.ablauf-bild{border-radius:var(--r-m) var(--r-m) 0 0;overflow:hidden}
.vertrauen-liste{grid-template-columns:repeat(4,minmax(0,1fr))}
.zahlungsarten{grid-template-columns:repeat(4,minmax(0,1fr))}
.schritte:not(.schritte-zeitleiste):not(.schritte-klein){grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.schritte-mit-bild{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px}
.schritte-bild{position:sticky;top:24px}
/* Schaufenster: links die Wahl, rechts Bild + Text - passt auf 1366x768 ohne Scrollen */
.sf{grid-template-columns:300px minmax(0,1fr);gap:32px;align-items:start}
.sf-viele{grid-template-columns:376px minmax(0,1fr)}
.sf-tabs{flex-direction:column;overflow:visible;padding:0;gap:6px}
.sf-viele .sf-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}
.sf-tab{flex:0 0 auto;width:100%;font-size:.88rem;padding:6px 10px 6px 6px;border-color:transparent;background:transparent}
.sf-tab:hover{background:#fff;border-color:var(--linie)}
.sf-alle{margin-top:6px;padding-left:12px}
.sf-bild img{max-height:min(490px,calc(100vh - 300px))}
.sf-kompakt .sf-bild img{max-height:min(470px,calc(100vh - 290px))}
.sf-text{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}
.sf-titel,.sf-nutzen{grid-column:1}
.sf-ablauf{grid-column:2;grid-row:1/span 3}
.sf-link{grid-column:1}
.sf-schritte{flex-direction:column;align-items:flex-start}
.sf-viele .sf-tab-name{white-space:normal}
html.ohne-js .sf{grid-template-columns:1fr}
}
@media (max-width:61.99rem){
/* 1.4.1: Funktionswahl am Handy/Tablet als umbrechendes Raster statt wischbarer Leiste (kein waagrechtes Scrollen) */
.sf-tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;overflow:visible;padding:0;scroll-snap-type:none}
.sf-tab{min-width:0;padding:6px 10px 6px 6px;font-size:.86rem;gap:8px}
.sf-tab-name{white-space:normal;overflow-wrap:anywhere}
.sf-tab-symbol{width:26px;height:26px;border-radius:8px}
.sf-tab-symbol .symbol{width:16px;height:16px}
.sf-tabs .sf-alle{order:99;grid-column:1/-1;justify-content:center;white-space:normal}
}
@media (max-width:40rem){
.seitenkopf.mit-buehne{padding-bottom:110px}
.buehne{margin-top:-86px}
.fenster{padding:24px 5px 5px;border-radius:14px}
.fenster::before{top:8px;left:12px;width:8px;height:8px;box-shadow:12px 0 0 #ffc24b,24px 0 0 #2bd47d}
.held-wege{padding:14px}
.aktion-kopf-link{margin-left:0}
.steckbrief-oeffnen{display:none}
.schritte>li{padding:62px 18px 18px}
}
@media (prefers-reduced-motion:reduce){.karte:hover{transform:none}}
@media (forced-colors:active){
.sf-tab[aria-selected="true"]{border:2px solid Highlight}
.zahlungsart,.ablauf-schritt,.vn-zeile p,.verzeichnis-gruppe,.vertrauen-liste li{border:1px solid CanvasText}
.aktion-kopf-marke,p.zahlungsart-marke{forced-color-adjust:none;background:Highlight;color:HighlightText}
}
@media print{.sf-tabs{display:none}.sf-panel[hidden]{display:grid!important}.steckbrief-details>*{display:block}}
/* 1.4.0 Feinschliff */
.held-wege-gruppe{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.verzeichnis-gruppe a{hyphens:auto;overflow-wrap:anywhere;line-height:1.3;padding:4px 0}
.seitenkopf-kompakt+.baustein-schaufenster,.seitenkopf-kompakt+.wrap+.baustein-preise{padding-top:44px}
.geteilt-bild{margin:0}
@media (min-width:62rem){
.seitenkopf-kompakt .seitenkopf-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:start}
.seitenkopf-kompakt .seitenkopf-text>*{grid-column:1}
.seitenkopf-kompakt .seitenkopf-text>.kurzantwort{grid-column:2;grid-row:1/span 4;align-self:center;margin-top:0;font-size:1rem}
.seitenkopf-kompakt .knopf-gruppe{margin-top:20px}
}
.preis-empfohlen .preis-marke{position:absolute;top:-13px;left:24px;margin:0;box-shadow:0 6px 16px rgba(14,108,255,.25)}
.preis-karte .preis-regulaer{display:block;margin:2px 0 0;font-size:.95rem}
.preis-karte h3{font-size:1.2rem}
@media (max-width:61.99rem){
.vn-liste{gap:10px}
.vn-zeile{gap:0;background:#fff;border:1px solid #bfe6d6;border-radius:14px;box-shadow:var(--schatten-s);overflow:hidden}
.vn-zeile p.vn-vorher{background:#f6f8fb;border:0;border-bottom:1px dashed #d3dbe8;border-radius:0;padding:10px 16px;font-size:.9rem;color:#4b5a76}
.vn-zeile p.vn-nachher{border:0;box-shadow:none;border-radius:0;padding:12px 16px 14px 50px}
.vn-nachher::before{top:auto;margin-top:18px}
.vn-nachher .vn-label{color:var(--gruen)}
}

/* ===================================================================================================================
   1.4.1 Bildvergroesserung (Lightbox): Bildlink mit Lupe, nativer <dialog> ueber die ganze Flaeche, eingepasst oder in
   voller Aufloesung mit Scrollen. Keine Inline-Stile (CSP) - die Breite der Vollansicht setzt seite.js per CSSOM.
   =================================================================================================================== */
.lb-link{display:block;position:relative;color:inherit;cursor:zoom-in;border-radius:10px}
.lb-link:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.lb-lupe{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(4,27,66,.82);color:#fff;box-shadow:0 6px 18px rgba(4,27,66,.3);opacity:.85;transition:opacity .15s,transform .15s;pointer-events:none}
.lb-lupe .symbol{width:20px;height:20px}
.lb-link:hover .lb-lupe,.lb-link:focus-visible .lb-lupe{opacity:1;transform:scale(1.08)}
html.lb-offen{overflow:hidden}
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(3,14,34,.985);color:#fff;overflow:hidden}
.lb:not([open]){display:none}
.lb[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.lb::backdrop{background:rgba(3,14,34,.7)}
.lb [hidden]{display:none!important}
.lb-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px}
.lb-zaehler{margin:0;font-size:.92rem;color:#c9d7ee;font-variant-numeric:tabular-nums}
.lb-aktionen{display:flex;gap:8px;margin-left:auto}
.lb-knopf{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--r-s);border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:.95rem;font-weight:650;cursor:pointer}
.lb-knopf:hover{background:rgba(255,255,255,.14)}
.lb-knopf .symbol{width:20px;height:20px}
.lb button:focus-visible{outline:3px solid #8fc0ff;outline-offset:2px}
.lb-buehne{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;padding:4px 16px;overflow:hidden;touch-action:pan-x pan-y pinch-zoom}
.lb-bild{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:8px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.45);cursor:zoom-in}
.lb-gezoomt .lb-buehne{display:block;overflow:auto;padding:0;-webkit-overflow-scrolling:touch}
.lb-gezoomt .lb-bild{max-width:none;max-height:none;height:auto;margin:0 auto;border-radius:0;cursor:zoom-out}
.lb-fuss{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 16px 14px}
.lb-unterschrift{grid-column:2;margin:0 auto;max-width:880px;text-align:center;font-size:.95rem;line-height:1.5;color:#d6e2f5}
.lb-nav{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.32);background:rgba(4,27,66,.75);color:#fff;cursor:pointer}
.lb-nav:hover{background:rgba(14,108,255,.55)}
.lb-zurueck{grid-column:1}
.lb-weiter{grid-column:3}
@media (min-width:62rem){
  .lb-buehne{padding:4px 84px}
  .lb-nav{position:absolute;top:50%;margin-top:-24px;width:52px;height:52px;z-index:2}
  .lb-zurueck{left:18px}
  .lb-weiter{right:18px}
  .lb-gezoomt .lb-nav{display:none}
}
@media (max-width:40rem){
  .lb-kopf{padding:8px 10px}
  .lb-knopf{padding:0 12px;font-size:.9rem}
  .lb-buehne{padding:0 6px}
  .lb-fuss{padding:8px 10px 12px;gap:8px}
  .lb-unterschrift{font-size:.88rem}
  .lb-lupe{width:34px;height:34px;right:8px;bottom:8px}
}
@media (hover:none){.lb-lupe{opacity:1}}
@media (prefers-reduced-motion:no-preference){.lb[open]{animation:lb-ein .16s ease-out}}
@keyframes lb-ein{from{opacity:0}to{opacity:1}}
@media print{.lb,.lb-lupe{display:none!important}}
/* 1.4.1: Hinweis unter der Tabelle "Einrichtung" (auch ohne Tarif buchbar) */
.preis-ohne-tarif{margin:14px 0 0;padding:12px 16px;border-left:4px solid var(--primaer);background:var(--primaer-hell);border-radius:0 var(--r-s) var(--r-s) 0;color:var(--text);font-weight:600}

/* ===================================================================================================================
   1.4.1 Tabellen ohne waagrechtes Scrollen: unter 48rem wird jede Zeile zur Karte - erste Zelle als Ueberschrift, die
   anderen Zellen mit ihrer Spaltenbeschriftung (data-label, serverseitig gesetzt). Kopfzeile nur fuer Screenreader.
   Gilt fuer Preistabellen, Aktion, Baustein "tabelle", Einwilligung, Methodik und Tabellen im Redaktionstext.
   =================================================================================================================== */
pre{white-space:pre-wrap;overflow-wrap:anywhere}
.text-inhalt,.karte,.faq-antwort,.kurzantwort{overflow-wrap:break-word}
.text-inhalt a{overflow-wrap:anywhere}
@media (max-width:47.99rem){
.daten-tabelle,.text-inhalt table.inhalt-tabelle{display:block;width:100%;border:0;font-size:.97rem}
.daten-tabelle thead,.text-inhalt table.inhalt-tabelle thead,.text-inhalt table.inhalt-tabelle tr.kopfzeile{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.daten-tabelle tbody,.text-inhalt table.inhalt-tabelle tbody{display:grid;gap:10px}
.daten-tabelle tr,.text-inhalt table.inhalt-tabelle tr{display:block;background:#fff;border:1px solid var(--linie);border-radius:var(--r-s);padding:12px 14px;box-shadow:var(--schatten-s)}
.daten-tabelle th,.daten-tabelle td,.text-inhalt table.inhalt-tabelle th,.text-inhalt table.inhalt-tabelle td{display:block;width:auto;padding:3px 0;border:0;background:none;white-space:normal;overflow-wrap:anywhere}
.daten-tabelle tr>:first-child,.text-inhalt table.inhalt-tabelle tr>:first-child{font-size:1.02rem;font-weight:800;color:var(--text);padding-bottom:6px}
.daten-tabelle td[data-label]::before,.text-inhalt table.inhalt-tabelle td[data-label]::before{content:attr(data-label) ": ";font-weight:700;color:var(--grau)}
.daten-tabelle tbody tr:last-child>*{border-bottom:0}
.tabelle-rahmen:has(.daten-tabelle){border:0;background:transparent;border-radius:0}
.preis-zelle{white-space:normal}
.preis-tabelle .preis-zelle{margin-top:4px;font-size:1.05rem}
.fakten-tabelle th,.fakten-tabelle td{overflow-wrap:anywhere}
}
/* 1.4.1: Tabellen mit vielen Spalten (Tarifvergleich) schon bis Tablet-Breite als Karten */
@media (min-width:48rem) and (max-width:63.99rem){
.daten-tabelle.tabelle-breit,.text-inhalt table.inhalt-tabelle.tabelle-breit{display:block;width:100%;border:0;font-size:.97rem}
.daten-tabelle.tabelle-breit thead,.text-inhalt table.inhalt-tabelle.tabelle-breit thead,.text-inhalt table.inhalt-tabelle.tabelle-breit tr.kopfzeile{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.daten-tabelle.tabelle-breit tbody,.text-inhalt table.inhalt-tabelle.tabelle-breit tbody{display:grid;gap:10px}
.daten-tabelle.tabelle-breit tr,.text-inhalt table.inhalt-tabelle.tabelle-breit tr{display:block;background:#fff;border:1px solid var(--linie);border-radius:var(--r-s);padding:12px 14px;box-shadow:var(--schatten-s)}
.daten-tabelle.tabelle-breit th,.daten-tabelle.tabelle-breit td,.text-inhalt table.inhalt-tabelle.tabelle-breit th,.text-inhalt table.inhalt-tabelle.tabelle-breit td{display:block;width:auto;padding:3px 0;border:0;background:none;white-space:normal;overflow-wrap:anywhere}
.daten-tabelle.tabelle-breit tr>:first-child,.text-inhalt table.inhalt-tabelle.tabelle-breit tr>:first-child{font-size:1.02rem;font-weight:800;color:var(--text);padding-bottom:6px}
.daten-tabelle.tabelle-breit td[data-label]::before,.text-inhalt table.inhalt-tabelle.tabelle-breit td[data-label]::before{content:attr(data-label) ": ";font-weight:700;color:var(--grau)}
.daten-tabelle.tabelle-breit tbody tr:last-child>*{border-bottom:0}
.tabelle-rahmen:has(.tabelle-breit){border:0;background:transparent;border-radius:0}
}

/* ===================================================================================================================
   1.5.0 Feinschliff: Schrift Inter/Inter Display (selbst gehostet), ruhigere Beschriftungen (Satzschreibung statt
   gesperrter Versalien), Karten mit klarer Hierarchie (nur Hauptkarten mit Schatten), Abschnittsrhythmus, Formulare
   mit Fokusrand, Terminwahl (feste 30-Minuten-Slots), Kennzahlen des Zeitersparnisrechners, Fuss. Keine Inline-Stile.
   =================================================================================================================== */
/* Abschnittsrhythmus und Lesebreite */
.abschnitt{padding:clamp(56px,5vw + 24px,96px) 0}
.abschnitt-eng{padding:32px 0}
.abschnitt-kopf{margin-bottom:clamp(28px,3vw,44px)}
.abschnitt-text{font-size:1.08rem;line-height:1.65;max-width:58ch;text-wrap:pretty}
.text-inhalt{max-width:72ch}
.text-inhalt p,.text-inhalt li{text-wrap:pretty}
.kurzantwort{text-wrap:pretty}

/* Beschriftungen: Satzschreibung, kein Sperren - die Dachzeile traegt einen kurzen Farbbalken (kritisch.css) */
.vn-kopf,.vn-label,.sf-ablauf-titel,.verzeichnis-gruppe h3,.daten-tabelle thead th{letter-spacing:0;text-transform:none}
.vn-kopf{font-size:.9rem;font-weight:650}
.vn-label{font-size:.8rem;font-weight:650}
.sf-ablauf-titel{font-size:.9rem;font-weight:650}
.verzeichnis-gruppe h3{font-size:.95rem;font-weight:650;color:var(--primaer-dunkel);padding-bottom:8px;border-bottom:1px solid var(--linie)}
.daten-tabelle thead th{font-size:.88rem;font-weight:650}

/* Karten: Hierarchie statt Einheitsschatten - Hauptkarten (Preise, Formular, Ergebnis) tragen Schatten, Listen-Karten nur Rand */
.karte{box-shadow:none;border-color:#d9e3f1}
.baustein-karten .karte:hover{transform:none;box-shadow:none;border-color:#b9cbe4}
.preis-karte,.formular,.ergebnis,.kachel:hover,.preis-empfohlen,.weg-hervor{box-shadow:var(--schatten-s)}
.preis-empfohlen,.weg-hervor,.kachel:hover{box-shadow:var(--schatten-m)}
.karte h3{color:var(--tinte)}
.karte-symbol{border-radius:12px}
.karte-link,.sf-link,.vertrauen-link a{font-weight:650}
.schritte>li{box-shadow:none}
.zahlungsart,.ablauf-schritt,.verzeichnis-gruppe{box-shadow:none}
.zahlungsart-vorteil{box-shadow:0 14px 34px rgba(10,118,80,.12)}

/* Vorher / Nachher: die rechte Spalte ist die Aussage - links nur gedaempft */
.vn-vorher{background:#f6f8fb;border:1px solid #e3e9f2;color:#5a6a87}
.vn-nachher{font-weight:600;border-color:#cfe9dd}

/* Preise: Zahl in Display-Schrift, Einheit leise */
.preis-zahl{font-family:var(--schrift-display);font-weight:700;letter-spacing:-.03em;font-size:2.2rem;color:var(--tinte)}
.preis-karte h3{font-size:1.15rem}
.preis-marke{font-weight:650}

/* Formulare: Fokusrand, ruhige Raender, Auswahlkacheln */
.feld input[type=text],.feld input[type=email],.feld input[type=tel],.feld select,.feld textarea,.quelle-zeile input{border-color:#8795ad;border-radius:10px;transition:border-color .15s ease,box-shadow .15s ease}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{outline:none;border-color:var(--primaer);box-shadow:0 0 0 3px rgba(14,108,255,.22)}
.feld label,.feld legend{color:var(--tinte)}
.auswahl{border-radius:10px;transition:border-color .15s ease,background-color .15s ease}
.auswahl:hover{border-color:#b9cbe4}
.formular{border-radius:20px}
.formular-raster{margin:22px 0 24px}
.feld-optional{font-weight:500;color:var(--grau)}

/* Terminwahl Demo (feste 30-Minuten-Slots): Tagesleiste als Tabs (nur mit JS), darunter die Slots als Kacheln */
.termine{gap:10px}
.termine-tage{display:none;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
html.js .termine-tage{display:flex}
.termine-tag{min-height:44px;padding:6px 12px;border-radius:10px;border:1px solid var(--linie);background:#fff;color:var(--text);font:inherit;font-size:.9rem;font-weight:600;line-height:1.2;cursor:pointer;white-space:nowrap;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.termine-tag:hover{border-color:#b9cbe4;background:var(--nebel)}
.termine-tag[aria-selected="true"]{background:var(--primaer-dunkel);border-color:var(--primaer-dunkel);color:#fff}
.termine-tag-gruppe{display:block}
html.js .termine-tag-gruppe:not(.aktiv){display:none}
.termine-datum{font-size:1rem;font-weight:650;margin:8px 0 10px;color:var(--tinte)}
html.js .termine-datum{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.termine-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.termine-slot{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 8px;border:1px solid var(--linie);border-radius:10px;background:#fff;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,color .15s ease,box-shadow .15s ease}
.termine-slot input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.termine-slot:hover{border-color:var(--primaer);background:var(--primaer-hell)}
.termine-slot:has(input:checked){border-color:var(--primaer);background:var(--primaer);color:#fff;box-shadow:0 6px 16px rgba(14,108,255,.25)}
.termine-slot:has(input:focus-visible){outline:3px solid var(--signal);outline-offset:2px}
.termine-wahl{min-height:1.5em;font-weight:650;color:var(--primaer-dunkel)}
.termine-wahl:empty{display:none}
.termine-loeschen{justify-self:start}
.termine-loeschen[hidden]{display:none}
html.ohne-js .termine-tag-gruppe+.termine-tag-gruppe{margin-top:8px;padding-top:12px;border-top:1px solid var(--linie)}
.danke-termin{font-weight:650;color:var(--primaer-dunkel)}

/* Zeitersparnisrechner: Annahmen (nur Anzeige) und drei Kennzahlen ueber der Tabelle */
.rechner-annahmen{padding:16px 18px;border-radius:12px;background:var(--nebel);border:1px solid var(--linie)}
.rechner-annahmen-titel{font-weight:650;color:var(--tinte);margin-bottom:8px}
.rechner-annahmen-liste{display:grid;gap:6px;margin:0 0 10px}
.rechner-annahmen-liste>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px}
.rechner-annahmen-liste dt{color:var(--grau)}
.rechner-annahmen-liste dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums}
.rechner-kennzahlen{display:grid;gap:12px;margin-bottom:18px}
.rechner-kennzahl{display:grid;gap:2px;padding:16px 18px;border-radius:14px;background:var(--nebel);border:1px solid var(--linie)}
.rechner-kennzahl-wert{font-family:var(--schrift-display);font-weight:700;font-size:1.7rem;letter-spacing:-.03em;color:var(--tinte);font-variant-numeric:tabular-nums}
.rechner-kennzahl-text{font-size:.88rem;color:var(--grau)}
.rechner-kennzahl-plus{background:var(--gruen-hell);border-color:#bfe6d6}
.rechner-kennzahl-plus .rechner-kennzahl-wert{color:var(--gruen)}
.rechner-kennzahl-minus{background:var(--rot-hell);border-color:#f3c3c8}
.rechner-kennzahl-minus .rechner-kennzahl-wert{color:var(--rot)}
.ergebnis .fakten-tabelle td{font-variant-numeric:tabular-nums}

/* Knopfgruppe mit Hinweissatz (Unterschied Testen / Demo) */
.knopf-hinweis{max-width:58ch;line-height:1.5}
.seitenkopf:not(.seitenkopf-dunkel) .knopf-hinweis{color:var(--grau)}
.held .knopf-hinweis,.seitenkopf-dunkel .knopf-hinweis{color:#c9d8ee}

/* Fuss: klarere Spalten */
.fuss-titel{font-size:.95rem;letter-spacing:0}
.fuss-gruppe a{font-weight:500}
.fuss-satz{color:#9fb4d4;line-height:1.55}

@media (min-width:40rem){
.rechner-kennzahlen{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:40rem){
.termine-slots{grid-template-columns:repeat(4,minmax(0,1fr))}
.termine-tag{padding:6px 10px;font-size:.86rem}
}
@media (forced-colors:active){
.termine-slot,.termine-tag,.rechner-kennzahl{border:1px solid CanvasText}
.termine-slot:has(input:checked),.termine-tag[aria-selected="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText}
}
@media (prefers-reduced-motion:reduce){.knopf-primaer:hover{transform:none}}
.formular.rechner>*+*{margin-top:16px}
.formular.rechner>.knopf{margin-top:22px}
@media (max-width:40rem){
.held .kurzantwort{font-size:1.05rem;margin-top:18px}
.held-wege-mitte::before,.held-wege-mitte::after{content:none}
}
/* 1.5.5 Rueckruf-Zeitfenster: je Tag eine Zeile, kurze Uhrzeiten als Auswahlfelder (gleiche Sprache wie die Demo-Slots).
   Zustand ueber input + .zeit-chip-feld (ohne :has), Haken als zweites Merkmal neben der Farbe (WCAG 1.4.1). */
.zeiten{display:grid;gap:14px;margin-top:6px}
.zeiten-tag{display:grid;gap:8px}
.zeiten-tag+.zeiten-tag{padding-top:14px;border-top:1px solid var(--linie)}
.zeiten-tag-name{margin:0;font-size:.95rem;font-weight:700;color:var(--tinte);font-variant-numeric:tabular-nums}
.zeiten-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.zeit-chip{position:relative;display:block;cursor:pointer}
.zeit-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.zeit-chip-feld{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:6px 8px;border:1px solid var(--linie);border-radius:10px;background:#fff;color:var(--text);font-size:.92rem;font-weight:600;line-height:1.2;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap;transition:border-color .15s ease,background-color .15s ease,color .15s ease,box-shadow .15s ease}
.zeit-chip:hover .zeit-chip-feld{border-color:var(--primaer);background:var(--primaer-hell)}
.zeit-chip input:checked+.zeit-chip-feld{border-color:var(--primaer);background:var(--primaer);color:#fff;box-shadow:0 6px 16px rgba(14,108,255,.25)}
.zeit-chip input:checked+.zeit-chip-feld::before{content:"✓";position:absolute;top:-7px;right:-7px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fff;color:var(--primaer);border:1px solid var(--primaer);font-size:.72rem;font-weight:800;line-height:1}
.zeit-chip input:focus-visible+.zeit-chip-feld{outline:3px solid var(--signal);outline-offset:2px}
.zeit-chip input:disabled{cursor:not-allowed}
.zeit-chip input:disabled+.zeit-chip-feld{opacity:.45;background:var(--nebel)}
.zeit-chip:hover input:disabled+.zeit-chip-feld{border-color:var(--linie);background:var(--nebel)}
@media (min-width:40rem){
.zeiten-tag{grid-template-columns:5.5rem minmax(0,1fr);align-items:start;column-gap:14px}
.zeiten-tag-name{padding-top:12px}
.zeiten-chips{grid-template-columns:repeat(auto-fill,minmax(5.6rem,1fr))}
}
@media (forced-colors:active){.zeit-chip input:checked+.zeit-chip-feld{forced-color-adjust:none;background:Highlight;color:HighlightText}}
/* 1.5.3 Rechtstexte: ruhige Lesetypografie, Inhaltsverzeichnis als Seitenleiste (breit) bzw. zugeklappt (Handy) */
.abschnitt-recht{padding-top:48px}
.recht-raster{display:grid;gap:24px}
.recht-raster>*{min-width:0}
.recht-text{max-width:46rem;font-size:1rem;line-height:1.72;color:var(--text)}
.recht-text>*+*{margin-top:.9em}
.recht-text h2{font-family:var(--schrift);font-size:1.3rem;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--tinte);margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--linie);scroll-margin-top:calc(var(--kopf-hoehe) + 20px);text-wrap:pretty}
.recht-text h2.recht-teil{margin-top:3rem;padding:14px 18px;border:1px solid var(--linie);border-left:4px solid var(--primaer);border-radius:var(--r-s);background:var(--nebel);font-size:1.05rem;color:var(--primaer-dunkel)}
.recht-text h2.recht-teil+*{margin-top:1.1rem}
.recht-text h2.recht-teil+h2{border-top:0;padding-top:0;margin-top:2rem}
.recht-text h3{font-family:var(--schrift);font-size:1.06rem;font-weight:700;line-height:1.4;color:var(--tinte);margin-top:1.8rem;scroll-margin-top:calc(var(--kopf-hoehe) + 20px)}
.recht-text h4{font-family:var(--schrift);font-size:1rem;font-weight:650;line-height:1.45;color:var(--primaer-dunkel);margin-top:1.4rem}
.recht-text h2+*,.recht-text h3+*,.recht-text h4+*{margin-top:.6rem}
.recht-text h2+h3{margin-top:1.1rem}
.recht-text ul,.recht-text ol{padding-left:1.25em}
.recht-text li+li{margin-top:.5em}
.recht-text li::marker{color:var(--primaer)}
.recht-text strong{font-weight:650;color:var(--tinte)}
.recht-text a{overflow-wrap:anywhere}
.recht-text .recht-stand{margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid var(--linie);color:var(--grau);font-size:.92rem}
.recht-iv{border:1px solid var(--linie);border-radius:var(--r-m);background:var(--nebel)}
.recht-iv summary{display:flex;align-items:center;gap:10px;padding:14px 18px;cursor:pointer;font-weight:700;color:var(--tinte);list-style:none}
.recht-iv summary::-webkit-details-marker{display:none}
.recht-iv summary::after{content:"";width:9px;height:9px;margin-left:auto;border-right:2px solid var(--grau);border-bottom:2px solid var(--grau);transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.recht-iv[open] summary::after{transform:rotate(225deg) translate(-2px,-1px)}
.recht-iv-zahl{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 7px;border-radius:999px;background:#fff;border:1px solid var(--linie);color:var(--grau);font-size:.78rem;font-weight:650}
.recht-iv nav{padding:0 10px 14px}
.recht-iv ul{list-style:none;margin:0;padding:0;font-size:.9rem;line-height:1.35}
.recht-iv li+li{margin-top:1px}
.recht-iv a{display:block;padding:6px 10px;border-left:2px solid var(--linie);color:var(--grau);text-decoration:none;border-radius:0 6px 6px 0}
.recht-iv a:hover{color:var(--signal-dunkel);background:#fff}
.recht-iv a[aria-current="true"]{color:var(--tinte);font-weight:650;border-left-color:var(--primaer);background:#fff}
.recht-iv .recht-iv-teil{margin-top:12px}
.recht-iv .recht-iv-teil:first-child{margin-top:0}
.recht-iv .recht-iv-teil a{border-left-color:transparent;color:var(--primaer-dunkel);font-size:.74rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;padding-left:10px}
@media (min-width:62rem){
.abschnitt-recht{padding-top:64px}
.recht-raster{grid-template-columns:17.5rem minmax(0,46rem);gap:64px;justify-content:start;align-items:start}
.recht-raster-ohne-iv{grid-template-columns:minmax(0,46rem)}
.recht-navi{position:sticky;top:calc(var(--kopf-hoehe) + 20px);max-height:calc(100vh - var(--kopf-hoehe) - 40px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.recht-iv{background:none;border:0}
.recht-iv summary{padding:0 0 10px 12px;cursor:default;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grau)}
.recht-iv summary::after{display:none}
.recht-iv nav{padding:0}
.recht-text h2{font-size:1.38rem}
}
@media print{
.recht-navi{display:none!important}
.recht-raster{display:block}
.recht-text{max-width:none;font-size:10.5pt;line-height:1.5}
.recht-text h2{break-after:avoid;border-top:0;padding-top:0;margin-top:1.4em}
.recht-text h3,.recht-text h4{break-after:avoid}
}

/* ===================================================================================================================
   1.5.5 Ausrichtung am Seitenraster: kein schmaler, mittig gesetzter Block mehr. .wrap.schmal ist so breit wie das Raster
   (gleiche linke Kante wie Kopf, Startbereich und Karten); der Inhalt behaelt die Lesebreite und steht links.
   Haeufige Fragen in voller Breite: Ueberschrift und Kontakt-Hinweis links, Fragen rechts (ab 62rem).
   Sicherheit & Datenschutz: Inhaltsverzeichnis als Seitenleiste wie bei den Rechtstexten.
   =================================================================================================================== */
.wrap.schmal,.wrap.schmal.text-inhalt,.wrap.text-raster-recht{max-width:calc(var(--breite) + 64px)}
:where(.wrap.schmal)>*{max-width:51rem}
:where(.wrap.schmal.text-inhalt)>*{max-width:72ch}
.wrap.schmal>.faq-block{max-width:none}
.text-raster-recht>.text-hauptspalte{max-width:51rem}
.faq-mehr{margin:18px 0 0;color:var(--grau);line-height:1.55}
.faq-mehr a{display:inline-block;margin-top:2px;font-weight:650}
@media (min-width:62rem){
.wrap.schmal>.faq-block{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:64px;align-items:start}
.wrap.schmal>.faq-block>h2{grid-column:1;grid-row:1;margin:0;text-wrap:balance}
.wrap.schmal>.faq-block>.faq-liste{grid-column:2;grid-row:1/3}
.wrap.schmal>.faq-block>.faq-mehr{grid-column:1;grid-row:2;margin-top:16px;max-width:17rem}
.wrap.schmal>.faq-block.faq-ohne-titel>.faq-liste{grid-column:1/-1}
.text-raster-recht>.text-hauptspalte{max-width:none;display:grid;grid-template-columns:17.5rem minmax(0,46rem);column-gap:64px;align-items:start}
.text-raster-recht>.text-hauptspalte>.inhaltsverzeichnis{grid-column:1;grid-row:1/span 40;position:sticky;top:calc(var(--kopf-hoehe) + 20px);max-height:calc(100vh - var(--kopf-hoehe) - 40px);overflow:auto}
.text-raster-recht>.text-hauptspalte>:not(.inhaltsverzeichnis){grid-column:2}
.text-raster-recht>.text-hauptspalte>.inhaltsverzeichnis+*{margin-top:0}
.wrap.glossar-raster{display:grid;grid-template-columns:17.5rem minmax(0,51rem);column-gap:64px;align-items:start}
.glossar-raster>*{grid-column:2}
.glossar-raster>.buchstaben{grid-column:1;grid-row:1/span 60;position:sticky;top:calc(var(--kopf-hoehe) + 20px)}
.glossar-raster>.buchstaben ul{margin:0}
.glossar-raster>.buchstaben+.glossar-gruppe{margin-top:0}
}
/* Inhaltsverzeichnis: lange Eintraege umbrechen sauber neben der Nummer (vorher inline-block: Nummer an der letzten Zeile) */
.inhaltsverzeichnis a{display:inline;padding:0}
.inhaltsverzeichnis li{padding:5px 0;line-height:1.45}

/* ===================================================================================================================
   1.6.0 Mega-Menue (Kopf, alle Seiten): Tafel unter dem Kopf ueber die volle Breite, Gruppen mit Symbol, Name und Kurztext,
   optional ein Hinweis (dunkle Karte) und Verweise unten. Der Rest der Seite wird abgedunkelt (Schatten nur unterhalb des
   Kopfs). Ohne JavaScript oeffnet die Tafel beim Ueberfahren bzw. per Tastatur (:focus-within). Auf dem Handy: <details>.
   =================================================================================================================== */
@media (min-width:72rem){
.mm{position:absolute;left:0;right:0;top:100%;z-index:30;background:#fff;color:var(--text);border-top:1px solid var(--linie);box-shadow:0 34px 70px rgba(4,27,66,.22),0 0 0 100vmax rgba(4,27,66,.32);clip-path:inset(0 -100vmax -100vmax -100vmax)}
html.ohne-js .mit-mm:hover>.mm,html.ohne-js .mit-mm:focus-within>.mm,.mit-mm.offen>.mm{display:block;animation:mmEin .18s ease-out}
.mit-mm.offen>.mm-auf{background:rgba(255,255,255,.08)}
}
@keyframes mmEin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mm-innen{display:grid;gap:4px 24px;padding-top:24px;padding-bottom:24px}
.mm-spalten-1{grid-template-columns:minmax(0,380px)}
.mm-spalten-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mm-spalten-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mm-spalten-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mm-mit-hinweis.mm-spalten-1{grid-template-columns:minmax(0,380px) minmax(0,420px)}
.mm-mit-hinweis.mm-spalten-2{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.1fr)}
.mm-mit-hinweis.mm-spalten-3{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.1fr)}
.mm-mit-hinweis.mm-spalten-4 .mm-hinweis{grid-column:1/-1;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:24px}
.mm-mit-hinweis.mm-spalten-4 .mm-hinweis-dach{grid-row:1/3}
.mm-mit-hinweis.mm-spalten-4 .mm-hinweis-mehr{grid-column:3;grid-row:1/3;margin:0}
.mm-gruppe{min-width:0}
.mm-gruppe-titel{margin:0 0 8px 12px;font-size:.76rem;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--grau)}
.mm-gruppe ul,.mo-links{list-style:none;margin:0;padding:0}
.mm-link{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;padding:8px 12px;border-radius:12px;color:var(--text);text-decoration:none;transition:background-color .15s ease}
.mm-link:hover{background:var(--nebel)}
.mm-link:focus-visible{background:var(--nebel);outline:3px solid var(--signal);outline-offset:-3px}
.mm-symbol{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-s);background:var(--primaer-hell);color:var(--primaer);transition:background-color .15s ease,color .15s ease}
.mm-symbol .symbol{width:19px;height:19px}
.mm-link:hover .mm-symbol{background:var(--primaer);color:#fff}
.mm-text{min-width:0}
.mm-name{display:block;font-size:.94rem;font-weight:650;line-height:1.3;color:var(--tinte);overflow-wrap:break-word;hyphens:auto}
.mm-kurz{display:block;font-size:.83rem;line-height:1.4;color:var(--grau)}
.mm-neu{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--gruen-hell);color:var(--gruen);font-size:.72rem;font-weight:700;vertical-align:1px}
.mm-hinweis{display:grid;gap:6px;align-content:start;margin-top:4px;padding:24px;border-radius:var(--r-m);background:var(--held-verlauf);color:#fff;text-decoration:none}
.mm-hinweis-dach{justify-self:start;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.12);color:#9ac3ff;font-size:.78rem;font-weight:650}
.mm-hinweis-titel{font-size:1.08rem;font-weight:700;line-height:1.3}
.mm-hinweis-text{font-size:.9rem;line-height:1.5;color:#c9d8ee}
.mm-hinweis-mehr{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:.92rem;font-weight:650}
.mm-hinweis-mehr .symbol{width:16px;height:16px}
.mm-hinweis:hover .mm-hinweis-mehr{text-decoration:underline}
.mm-hinweis:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.mm-fuss{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0 24px;list-style:none;margin:16px 0 0;padding:8px 12px 0;border-top:1px solid var(--linie);font-size:.9rem}
.mm-fuss a{display:inline-flex;align-items:center;min-height:44px;font-weight:650;text-decoration:none}
.mm-fuss a:hover{text-decoration:underline}
/* Handy/Tablet: Gruppen im Mobilmenue als Aufklapper (dunkler Grund) */
.mobilmenue-liste .mo-teil{border-bottom:1px solid rgba(255,255,255,.1)}
.mo-teil>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;color:#fff;font-weight:700;font-size:1.08rem;cursor:pointer;list-style:none}
.mo-teil>summary::-webkit-details-marker{display:none}
.mo-teil>summary:focus-visible{outline:3px solid #9ac3ff;outline-offset:2px}
.mo-innen{padding:0 0 12px}
.mobilmenue-liste .mo-uebersicht{min-height:44px;font-size:1rem;font-weight:650;color:#9ac3ff;border-bottom:0}
.mo-gruppe{margin:12px 0 4px;font-size:.74rem;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:#b8cbe6}
.mobilmenue-liste .mm-link{display:grid;min-height:52px;padding:6px 8px;border-bottom:0;font-size:1rem;font-weight:400;color:#fff}
.mobilmenue-liste .mo-uebersicht{display:flex}
.mobilmenue-liste .mm-link:hover{background:rgba(255,255,255,.06)}
.mobilmenue-liste .mm-link:focus-visible{background:rgba(255,255,255,.06);outline-color:#9ac3ff}
.mobilmenue .mm-symbol{background:rgba(255,255,255,.08);color:#9ac3ff}
.mobilmenue .mm-link:hover .mm-symbol{background:rgba(255,255,255,.14);color:#fff}
.mobilmenue .mm-name{color:#fff}
.mobilmenue .mm-kurz{color:#b8cbe6}
@media (prefers-reduced-motion:reduce){.mit-mm.offen>.mm{animation:none}}
@media print{.mm,.mobilmenue{display:none!important}}

/* ===== 1.6.0 Startseite (Beginn) ===== */
:root{--amber:#8a5200;--amber-hell:#fff3dc;--ease:cubic-bezier(.65,.05,.25,1)}

/* Held mit Vorfuehrung */
.held.held-mit-vorfuehrung{padding:72px 0 0}
.held-kopf h1{max-width:none}
.held-hervor{color:#9ac3ff}
.held-unter{display:grid;gap:24px 64px;align-items:center;margin-top:32px}
.held-unter .kurzantwort{margin-top:0;color:#c9d8ee;font-size:clamp(1.06rem,.95rem + .4vw,1.2rem);line-height:1.6}
.held-unter .kurzantwort strong{color:#fff;font-weight:600}
.held-aktion{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.held-aktion .knopf-gruppe{margin:0;padding:0;justify-content:flex-start}
.held-mit-vorfuehrung .held-merkmale{margin:0;gap:6px 20px;font-size:.92rem;color:#c9d8ee}
.held-mit-vorfuehrung .held-merkmale li::before{content:"✓\00a0";color:#4fe3a0;font-weight:700}
.held-aktion .knopf .symbol{width:18px;height:18px}
@media (min-width:62rem){.held-unter{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}

/* Vorfuehrung: Umschalter, Zaehler, Buehne */
.vo{margin-top:56px}
.vo-steuer{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-bottom:16px}
.vo-umschalter{display:inline-flex;padding:4px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.vo-seg{min-height:44px;padding:0 18px;border:0;border-radius:10px;background:transparent;color:#c9d8ee;font:650 .97rem/1 var(--schrift);cursor:pointer;transition:background-color .3s,color .3s,box-shadow .3s}
.vo-seg:hover{color:#fff}
.vo-seg:focus-visible{outline:3px solid #9ac3ff;outline-offset:2px}
.vo-seg-an{background:var(--verlauf-knopf);color:#fff;box-shadow:0 8px 20px rgba(14,108,255,.3)}
.vo-hinweis{margin:0;font-size:.9rem;color:#b8c7e0}
.vo-zaehler{display:flex;align-items:center;gap:12px;margin:0 0 0 auto}
.vo-zahl,.vo-ztext{display:grid}
.vo-zahl>span,.vo-ztext>span{grid-area:1/1}
.vo-zahl{min-width:1.2em;font:700 2.7rem/1 var(--schrift-display);letter-spacing:-.04em;text-align:right;color:#4fe3a0;transition:color .4s}
.vo-ztext{max-width:13em;font-size:.95rem;line-height:1.3;font-weight:600;color:#c9d8ee}
.vo-nur-ohne{visibility:hidden}
html.ohne-js .vo-umschalter,html.ohne-js .vo-hinweis{display:none}
.vo-buehne{position:relative;container-type:inline-size;width:100%;aspect-ratio:1160/640;border-radius:var(--r-l);background-color:rgba(255,255,255,.06);background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px);background-size:22px 22px;border:1px solid rgba(255,255,255,.12);overflow:hidden;transition:background-color 1s ease}
.vo-flaeche{position:absolute;inset:0;font-size:1cqw;line-height:1.35;color:var(--text)}
.vo-buehne,.vo-protokoll{content-visibility:auto}
.vo-titel{position:absolute;left:2.5%;top:71%;width:17%;z-index:6;font-size:1.35em;line-height:1.3;font-weight:650;color:#9fb3d4;opacity:0;transition:opacity .4s}
.vo-k{position:absolute;z-index:2;overflow:hidden;border-radius:.7em;box-shadow:0 .5em 1.4em rgba(0,0,0,.42);opacity:0;pointer-events:none;
  transform:translate(calc(var(--dx,0) * 1cqw),calc(var(--dy,0) * 1cqw)) rotate(0deg) scale(.55);transition:transform .95s var(--ease),opacity .55s ease;transition-delay:calc(var(--n) * 30ms)}
.vo-k>.vo-p{position:absolute;inset:0}
.vo-k5{border-radius:1.2em 1.2em 1.2em .3em}
.vo-k3{box-shadow:none;filter:drop-shadow(0 .5em .9em rgba(0,0,0,.42))}
.vo-k8,.vo-k9{border-radius:.2em}
.vo-z{position:absolute;z-index:3;background:#fff;border:1px solid #e3eaf5;border-radius:.9em;display:grid;grid-template-columns:2.4em minmax(0,1fr) auto;align-items:center;gap:0 .8em;padding:0 1.2em 0 .8em;
  transform:translate(0,0) scale(1);transition:transform .95s var(--ease),opacity .45s ease;transition-delay:calc(.5s + var(--n) * 40ms)}
.vo-eingang{position:absolute;left:50%;top:5%;width:47%;height:90%;z-index:1;background:#fff;border-radius:1.5em;box-shadow:var(--schatten-l);transition:opacity .6s ease,transform .9s var(--ease);transition-delay:.2s}
.vo-e-kopf{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:1.5em 1.6em 0}
.vo-e-kopf b{font-size:1.6em;font-weight:700;letter-spacing:-.02em;color:var(--tinte)}
.vo-chips{display:flex;gap:.4em}
.vo-chips span{padding:.35em .75em;border-radius:999px;font-size:.9em;font-weight:650;background:var(--gruen-hell);color:var(--gruen);white-space:nowrap}
.vo-chips .vo-w{background:var(--amber-hell);color:var(--amber)}
.vo-uebersicht{position:absolute;left:4%;top:10%;width:42%;z-index:4;color:#fff;transition:opacity .6s ease,transform .9s var(--ease);transition-delay:.7s}
.vo-u-klein{display:flex;align-items:center;gap:.8em;margin:0;font-size:1.15em;font-weight:650;color:#9ac3ff}
.vo-u-klein::before{content:"";width:1.9em;height:.26em;border-radius:.2em;background:linear-gradient(90deg,var(--primaer),var(--cyan))}
.vo-u-gross{margin:.5em 0 0;font:700 3.7em/1.02 var(--schrift-display);letter-spacing:-.04em;color:#fff}
.vo-u-text{margin:.8em 0 0;font-size:1.4em;line-height:1.5;color:#c9d8ee;max-width:28em}
.vo-u-karte{margin-top:1.3em;display:grid;gap:.2em;max-width:30em;padding:1.1em 1.3em;border-radius:1.2em;background:#fff;color:var(--text);box-shadow:var(--schatten-l)}
.vo-uk-a{justify-self:start;padding:.25em .7em;border-radius:999px;background:var(--amber-hell);color:var(--amber);font-size:.95em;font-weight:650}
.vo-u-karte b{margin-top:.3em;font-size:1.35em;color:var(--tinte)}
.vo-uk-b{font-size:1.1em;color:var(--grau)}
.vo-u-knoepfe{display:flex;gap:.6em;margin-top:.7em}
.vo-u-ok{background:var(--verlauf-knopf);color:#fff;border-radius:.8em;padding:.65em 1.3em;font-weight:650;font-size:1.1em}
.vo-u-frage{border:1px solid #b9cbe4;border-radius:.8em;padding:.6em 1.2em;font-weight:650;font-size:1.1em;color:var(--primaer-dunkel)}
/* Belege */
.vo-p-mail{background:#fff;display:flex;flex-direction:column}
.vo-fenster{display:flex;align-items:center;gap:.4em;padding:.7em .9em;background:#eef2f8;border-bottom:1px solid #dde4ee;font-size:.95em;color:#4a5670}
.vo-fenster i{width:.7em;height:.7em;border-radius:50%;background:#cdd6e3}
.vo-fenster span{margin-left:.5em;font-weight:600}
.vo-mz{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 .6em;padding:.6em .9em .6em 1.7em;border-bottom:1px solid #eef2f8}
.vo-mz b{font-weight:650;color:var(--tinte)}
.vo-mz span{grid-column:1;color:#5b6680;font-size:.92em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vo-mz em{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-size:.75em;font-weight:700;color:var(--rot);border:1px solid #f0c4c8;border-radius:.3em;padding:.1em .35em}
.vo-mz-neu::before{content:"";position:absolute;left:.75em;top:1.05em;width:.5em;height:.5em;border-radius:50%;background:var(--primaer)}
.vo-p-rechnung{background:#fff;padding:1.3em 1.2em;display:flex;flex-direction:column;gap:.55em}
.vo-r-logo{font-size:.82em;line-height:1.1;font-weight:800;letter-spacing:.06em;color:#1c4f8f}
.vo-r-adr{font-size:.7em;color:#6b7489}
.vo-r-titel{margin-top:.5em;font:750 1.7em/1 var(--schrift-display);letter-spacing:-.02em;color:var(--tinte)}
.vo-r-klein{font-size:1.25em}
.vo-r-nr{font-size:.75em;color:#5b6680}
.vo-linie{height:.45em;border-radius:.2em;background:#e6ebf2;flex:none}
.vo-linie-kurz{width:55%}
.vo-linie-mittel{width:75%}
.vo-r-summe{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--tinte);padding-top:.5em;font-size:.85em}
.vo-r-summe b{font-size:1.35em;font-weight:750;font-variant-numeric:tabular-nums}
.vo-r-kopie{position:absolute;right:.9em;top:3.6em;font-size:.78em;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--rot);border:2px solid var(--rot);border-radius:.3em;padding:.25em .45em;transform:rotate(9deg)}
.vo-r-frage,.vo-ko-notiz{align-self:flex-start;padding:.25em .6em;border-radius:.4em;background:var(--rot-hell);color:var(--rot);font-size:.85em;font-weight:700}
.vo-p-bon{background:#fffdf8;padding:1.1em .8em 2em;display:flex;flex-direction:column;gap:.4em;font:500 .8em/1.35 "Courier New",ui-monospace,monospace;color:#3b3b3b;text-align:center;
  clip-path:polygon(0 0,100% 0,100% calc(100% - .9em),92% 100%,84% calc(100% - .9em),76% 100%,68% calc(100% - .9em),60% 100%,52% calc(100% - .9em),44% 100%,36% calc(100% - .9em),28% 100%,20% calc(100% - .9em),12% 100%,4% calc(100% - .9em),0 100%)}
.vo-p-bon b{font-weight:700;font-size:1.05em;margin-bottom:.4em}
.vo-bz{display:flex;justify-content:space-between;gap:.4em;text-align:left}
.vo-b-summe{display:flex;justify-content:space-between;border-top:1px dashed #999;border-bottom:1px dashed #999;padding:.35em 0;font-weight:700}
.vo-b-dank{margin-top:auto;font-size:.9em;color:#6a6a6a}
.vo-p-portal{background:#fff;display:flex;flex-direction:column;gap:.6em;padding:0 1.2em 1.2em}
.vo-pt-kopf{margin:0 -1.2em;padding:.65em 1.2em;background:#1d6b4f;color:#fff;font-weight:700;font-size:.9em}
.vo-pt-titel{margin-top:.3em;font-size:1.3em;line-height:1.15;font-weight:750;color:var(--tinte)}
.vo-pt-feld{border:1px solid #cdd6e3;border-radius:.4em;padding:.5em .7em;font-size:.85em;color:#6b7489}
.vo-pt-knopf{align-self:flex-start;background:#1d6b4f;color:#fff;border-radius:.4em;padding:.5em 1.1em;font-weight:700;font-size:.85em}
.vo-pt-link{font-size:.8em;color:#1d6b4f;text-decoration:underline}
.vo-p-chat{background:#dcf3d4;padding:.9em 1.1em;display:flex;flex-direction:column;gap:.25em}
.vo-c-wer{font-size:.8em;font-weight:700;color:#2e6b3a}
.vo-c-text{font-size:1.15em;line-height:1.3;color:#17301c}
.vo-c-zeit{align-self:flex-end;font-size:.72em;color:#4f6f55}
.vo-p-konto{background:#fff;padding:.9em 1.1em;display:flex;flex-direction:column;gap:.35em;font-size:.9em}
.vo-ko-kopf{display:flex;justify-content:space-between;gap:1em;font-weight:700;color:var(--tinte);border-bottom:1px solid #e3e8ef;padding-bottom:.35em}
.vo-ko-z{display:grid;grid-template-columns:3.4em minmax(0,1fr) auto;gap:.6em;font-variant-numeric:tabular-nums;font-size:.92em;color:#3a4660}
.vo-ko-z span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vo-ko-z i{font-style:normal;color:#6b7489}
.vo-ko-z b{font-weight:650}
.vo-ko-markiert{background:#fff4c2;margin:0 -.4em;padding:0 .4em}
.vo-ko-notiz{position:absolute;right:.8em;bottom:.7em}
.vo-p-zettel{background:#fff1a6;padding:.9em;display:flex;align-items:center;justify-content:center;text-align:center}
.vo-p-zettel.vo-rosa{background:#ffdbe4}
.vo-p-zettel span{font-size:1.3em;line-height:1.2;font-weight:650;color:#3a3000}
.vo-p-mahnung{background:#fff;padding:1.2em;display:flex;flex-direction:column;gap:.5em}
.vo-m-stempel{position:absolute;right:.9em;top:1.1em;font-size:1.1em;line-height:1;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--rot);border:3px solid var(--rot);border-radius:.3em;padding:.3em .55em;transform:rotate(-11deg);opacity:.92}
.vo-m-text{font-size:.82em;color:#4a5670}
/* Zeilen im Eingang */
.vo-zi{width:2.3em;height:2.3em;border-radius:50%;display:grid;place-items:center;background:var(--gruen-hell);color:var(--gruen)}
.vo-zi .symbol{width:1.25em;height:1.25em}
.vo-zt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.vo-zt b{font-weight:650;font-size:1.1em;color:var(--tinte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vo-zt span{font-size:.92em;color:var(--gruen);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vo-zb{font-size:1.12em;line-height:1;font-weight:650;font-variant-numeric:tabular-nums;color:var(--tinte)}
.vo-z-warten{background:var(--amber-hell);border-color:#f1d49b}
.vo-z-warten .vo-zi{background:#fff;color:var(--amber)}
.vo-z-warten .vo-zt span{color:var(--amber)}
.vo-z-dublette .vo-zi{background:#eef1f6;color:#5f6b82}
.vo-z-dublette .vo-zt span{color:var(--grau)}
.vo-z-dublette .vo-zb{text-decoration:line-through;color:#5f6a80}
.vo-k1{left:3%;top:7%;width:31%;height:34%;--r:-3deg;--dx:55;--dy:-0.44}
.vo-k2{left:31%;top:4%;width:19%;height:54%;--r:4deg;--dx:33;--dy:1.6}
.vo-k3{left:51.5%;top:9%;width:11%;height:62%;--r:-6deg;--dx:16.5;--dy:2.54}
.vo-k4{left:63%;top:5%;width:25%;height:38%;--r:3deg;--dx:-2;--dy:17.27}
.vo-k5{left:5%;top:47%;width:25%;height:18%;--r:2deg;--dx:56;--dy:5.52}
.vo-k6{left:21%;top:68%;width:36%;height:25%;--r:-2deg;--dx:34.5;--dy:-2.1}
.vo-k7{left:40%;top:30%;width:18%;height:52%;--r:-10deg;--dx:24.5;--dy:17.32}
.vo-k8{left:73%;top:47%;width:15%;height:28%;--r:6deg}
.vo-k9{left:88%;top:22%;width:10.5%;height:22%;--r:-8deg}
.vo-k10{left:60%;top:55%;width:23%;height:40%;--r:-4deg}
.vo-z1{left:51.5%;top:18.5%;width:44%;height:9.4%}
.vo-z2{left:51.5%;top:29.2%;width:44%;height:9.4%}
.vo-z3{left:51.5%;top:39.9%;width:44%;height:9.4%}
.vo-z4{left:51.5%;top:50.6%;width:44%;height:9.4%}
.vo-z5{left:51.5%;top:61.3%;width:44%;height:9.4%}
.vo-z6{left:51.5%;top:72%;width:44%;height:9.4%}
.vo-z7{left:51.5%;top:82.7%;width:44%;height:9.4%}
.vo-k1,.vo-z1{--n:0}.vo-k2,.vo-z2{--n:1}.vo-k3,.vo-z3{--n:2}.vo-k4,.vo-z4{--n:3}.vo-k5,.vo-z5{--n:4}.vo-k6,.vo-z6{--n:5}.vo-k7,.vo-z7{--n:6}.vo-k8{--n:7}.vo-k9{--n:8}.vo-k10{--n:9}
.vo-k-weg{--dx:0;--dy:0}
.vo.vo-ohne .vo-k{opacity:1;transform:translate(0,0) rotate(var(--r)) scale(1);transition-delay:calc(var(--n) * 45ms)}
.vo.vo-ohne .vo-z{opacity:0;transform:translate(calc(var(--dx) * -1cqw),calc(var(--dy) * -1cqw)) scale(.9);transition-delay:0s}
.vo.vo-ohne .vo-eingang{opacity:0;transform:translateY(1.5em) scale(.98);transition-delay:0s}
.vo.vo-ohne .vo-uebersicht{opacity:0;transform:translateX(-1.5em);transition-delay:0s}
.vo.vo-ohne .vo-titel{opacity:1}
.vo.vo-ohne .vo-buehne{background-color:rgba(255,255,255,.035)}
.vo.vo-ohne .vo-nur-mit{visibility:hidden}
.vo.vo-ohne .vo-nur-ohne{visibility:visible}
.vo.vo-ohne .vo-zahl{color:#ff9aa4}
.vo.vo-ohne .vo-seg-aus{background:#fff;color:var(--tinte)}
.vo.vo-ohne .vo-seg-an{background:transparent;color:#c9d8ee;box-shadow:none}
@media (prefers-reduced-motion:no-preference){
html.js .vo:not(.vo-mit) .vo-k{opacity:1;transform:translate(0,0) rotate(var(--r)) scale(1);transition-delay:calc(var(--n) * 45ms)}
html.js .vo:not(.vo-mit) .vo-z{opacity:0;transform:translate(calc(var(--dx) * -1cqw),calc(var(--dy) * -1cqw)) scale(.9);transition-delay:0s}
html.js .vo:not(.vo-mit) .vo-eingang{opacity:0;transform:translateY(1.5em) scale(.98);transition-delay:0s}
html.js .vo:not(.vo-mit) .vo-uebersicht{opacity:0;transform:translateX(-1.5em);transition-delay:0s}
html.js .vo:not(.vo-mit) .vo-titel{opacity:1}
html.js .vo:not(.vo-mit) .vo-buehne{background-color:rgba(255,255,255,.035)}
html.js .vo:not(.vo-mit) .vo-nur-mit{visibility:hidden}
html.js .vo:not(.vo-mit) .vo-nur-ohne{visibility:visible}
html.js .vo:not(.vo-mit) .vo-zahl{color:#ff9aa4}
html.js .vo:not(.vo-mit) .vo-seg-aus{background:#fff;color:var(--tinte)}
html.js .vo:not(.vo-mit) .vo-seg-an{background:transparent;color:#c9d8ee;box-shadow:none}
}
/* Laufband (Beispiel-Protokoll) */
.vo-protokoll{position:relative;display:flex;align-items:stretch;margin-top:64px;background:rgba(2,15,41,.55);border-top:1px solid rgba(255,255,255,.08);color:#dbe5f5;overflow:hidden}
.vo-p-label{flex:none;display:flex;align-items:center;gap:10px;margin:0;padding:0 16px 0 max(32px,calc((100vw - var(--breite)) / 2));background:#031431;font-size:.86rem;font-weight:650;color:#9ac3ff;position:relative;z-index:1}
.vo-p-label::before{content:"";width:8px;height:8px;border-radius:50%;background:#3ddc97;box-shadow:0 0 0 4px rgba(61,220,151,.2)}
.vo-halt{flex:none;position:relative;z-index:1;display:grid;place-items:center;width:44px;min-height:44px;margin:0;padding:0;border:0;background:#031431;color:#9ac3ff;cursor:pointer;box-shadow:18px 0 24px #031431}
.vo-halt:hover{color:#fff}
.vo-halt:focus-visible{outline:3px solid #9ac3ff;outline-offset:-5px}
.vo-halt-symbol{width:12px;height:14px;border-left:4px solid currentColor;border-right:4px solid currentColor}
.vo-halt[aria-pressed="true"] .vo-halt-symbol{width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor}
html.ohne-js .vo-halt{display:none}
html.ohne-js .vo-p-label{box-shadow:18px 0 24px #031431}
.vo-p-fenster{overflow:hidden;flex:1}
.vo-spur{display:flex;width:max-content;animation:vo-laufen 70s linear infinite}
.vo-spur-teil{display:flex;gap:48px;margin:0;padding:17px 48px 17px 0;list-style:none}
.vo-spur li{display:inline-flex;align-items:center;gap:10px;font-size:.92rem;white-space:nowrap;color:#c9d8ee}
.vo-spur time{font-variant-numeric:tabular-nums;color:#9ac3ff;font-weight:600}
.vo-spur b{color:#fff;font-weight:600}
.vo-ok{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--gruen)}
.vo-ok::after{content:"";width:4px;height:8px;margin-top:-2px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.vo-protokoll:hover .vo-spur,.vo-protokoll:focus-within .vo-spur,.vo-angehalten .vo-spur,html.js .vo-protokoll:not(.vo-sichtbar) .vo-spur{animation-play-state:paused}
@keyframes vo-laufen{to{transform:translateX(-50%)}}

/* Vertrauensleiste */
.vleiste{background:#fff;border-bottom:1px solid var(--linie)}
.vleiste-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px 32px;list-style:none;margin:0;padding:24px 0}
.vleiste-liste li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center}
.vleiste-symbol{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-s);background:var(--primaer-hell);color:var(--primaer)}
.vleiste-symbol .symbol{width:20px;height:20px}
.vleiste-liste b{display:block;font-size:.95rem;font-weight:650;line-height:1.3;color:var(--tinte)}
.vleiste-liste small{display:block;font-size:.85rem;line-height:1.4;color:var(--grau)}

.abschnitt-hell+.abschnitt-hell{box-shadow:inset 0 1px 0 var(--linie)}
/* Abschnitte unterhalb des ersten Bildschirms erst beim Herankommen rendern (weniger Arbeit beim Laden, Groesse gemerkt) */
.vorlage-start main>.abschnitt{content-visibility:auto;contain-intrinsic-size:auto 1100px}

/* Drei Schritte */
.ds{list-style:none;margin:0;padding:0;display:grid}
.ds-schritt{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:40px 96px;align-items:center;padding:56px 0;border-top:1px solid var(--linie)}
.ds-schritt:first-child{border-top:0;padding-top:8px}
.ds-schritt:last-child{padding-bottom:0}
.ds-marke{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:.92rem;font-weight:650;color:var(--grau)}
.ds-marke b{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--primaer-hell);color:var(--primaer-dunkel);font-size:1.05rem;font-weight:750}
.ds-text h3{font:700 clamp(1.6rem,1.1rem + 1.4vw,2.2rem)/1.12 var(--schrift-display);letter-spacing:-.026em}
.ds-text p{margin:16px 0 0;font-size:1.08rem;line-height:1.65;color:var(--grau);max-width:520px}
.ds-weiter{display:inline-flex;align-items:center;gap:8px;margin-top:16px;min-height:44px;font-weight:650;text-decoration:none}
.ds-weiter:hover{text-decoration:underline}
.ds-weiter .symbol{width:16px;height:16px}
@media (min-width:62rem){.ds-gedreht .ds-bild{order:-1}}
.ds-karte{width:100%;max-width:540px;margin:0 auto;box-shadow:var(--schatten-m)}
.ds-karte .ds-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 10px;font-size:1.05rem;font-weight:700;color:var(--tinte)}
.ds-quellen,.ds-checks{list-style:none;margin:0;padding:0}
.ds-quellen li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid #edf2f9}
.ds-qi{width:44px;height:44px;border-radius:var(--r-s);display:grid;place-items:center;background:var(--primaer-hell);color:var(--primaer)}
.ds-qi .symbol{width:21px;height:21px}
.ds-quellen b{display:block;font-size:.98rem;font-weight:650;color:var(--tinte)}
.ds-quellen small{display:block;font-size:.85rem;color:var(--grau)}
.ds-an,.ds-live{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--gruen-hell);color:var(--gruen);font-size:.8rem;font-weight:650;white-space:nowrap}
.ds-an::before,.ds-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gruen)}
.ds-live::before{background:#2fbf7a;animation:ds-blinken 1.6s infinite}
@keyframes ds-blinken{50%{opacity:.25}}
.ds-checks li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;align-items:center;padding:11px 0;border-top:1px solid #edf2f9;font-size:.98rem}
.ds-c{position:relative;width:26px;height:26px;border-radius:50%;border:2px solid #cbd7ea;background:#fff;color:#fff;display:grid;place-items:center}
.ds-c::before{content:"";position:absolute;inset:-2px;border-radius:50%;background:var(--gruen);opacity:0}
.ds-warte .ds-c::before{background:var(--amber)}
.ds-c .symbol{position:relative;width:14px;height:14px;stroke-width:3}
.ds-checks .ds-c::before{animation-play-state:paused}
.ds-laeuft .ds-c::before,html.ohne-js .ds-checks .ds-c::before{animation-play-state:running}
.ds-warte{color:var(--amber)}
@keyframes ds-h0{0%,5%{opacity:0}6%,94%{opacity:1}100%{opacity:0}}
.ds-checks li:nth-child(1) .ds-c::before{animation:ds-h0 9s infinite}
@keyframes ds-h1{0%,15%{opacity:0}16%,94%{opacity:1}100%{opacity:0}}
.ds-checks li:nth-child(2) .ds-c::before{animation:ds-h1 9s infinite}
@keyframes ds-h2{0%,25%{opacity:0}26%,94%{opacity:1}100%{opacity:0}}
.ds-checks li:nth-child(3) .ds-c::before{animation:ds-h2 9s infinite}
@keyframes ds-h3{0%,35%{opacity:0}36%,94%{opacity:1}100%{opacity:0}}
.ds-checks li:nth-child(4) .ds-c::before{animation:ds-h3 9s infinite}
@keyframes ds-h4{0%,45%{opacity:0}46%,94%{opacity:1}100%{opacity:0}}
.ds-checks li:nth-child(5) .ds-c::before{animation:ds-h4 9s infinite}
@keyframes ds-h5{0%,55%{opacity:0}56%,94%{opacity:1}100%{opacity:0}}
.ds-checks li:nth-child(6) .ds-c::before{animation:ds-h5 9s infinite}
@keyframes ds-h6{0%,65%{opacity:0}66%,94%{opacity:1}100%{opacity:0}}
.ds-checks li:nth-child(7) .ds-c::before{animation:ds-h6 9s infinite}
.ds-freigabe{width:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.ds-f-mail{align-self:flex-start;display:flex;align-items:center;gap:12px;margin:0;padding:12px 16px;border-radius:14px;background:#fff;border:1px solid var(--linie);font-size:.92rem;box-shadow:var(--schatten-s)}
.ds-f-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--amber-hell);color:var(--amber);flex:none}
.ds-f-ic .symbol{width:17px;height:17px}
.ds-f-karte{display:flex;flex-direction:column;align-items:flex-start;box-shadow:var(--schatten-m)}
.ds-f-marke{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--amber-hell);color:var(--amber);font-size:.82rem;font-weight:650}
.ds-f-name{display:block;margin-top:12px;font-size:1.15rem;color:var(--tinte)}
.ds-f-angabe{font-size:.92rem;color:var(--grau)}
.ds-f-betrag{display:block;margin:12px 0 2px;font:700 2.4rem/1 var(--schrift-display);letter-spacing:-.03em;color:var(--tinte)}
.ds-f-knoepfe{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;margin-top:18px;width:100%}
.ds-f-ok,.ds-f-nein{display:grid;place-items:center;min-height:48px;border-radius:12px;font-weight:650;font-size:.98rem}
.ds-f-ok{background:var(--verlauf-knopf);color:#fff}
.ds-f-nein{border:1px solid #b9cbe4;color:var(--primaer-dunkel)}
.ds-f-toast{align-self:flex-end;display:flex;align-items:center;gap:10px;margin:0;padding:12px 16px;border-radius:14px;background:var(--tinte);color:#fff;font-size:.92rem;box-shadow:var(--schatten-m)}
.ds-f-toast i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--gruen)}
.ds-f-toast .symbol{width:13px;height:13px;stroke-width:3}

/* Echte Ansicht mit Marken */
.mon{position:relative;margin:0}
.mon-rahmen{border-radius:var(--r-m);overflow:hidden;background:#fff;box-shadow:0 0 0 8px rgba(255,255,255,.06),var(--schatten-l)}
.mon-leiste{display:flex;align-items:center;gap:8px;padding:11px 16px;background:#e9eef6}
.mon-leiste i{width:11px;height:11px;border-radius:50%;background:#c7cfdc}
.mon-leiste span{margin-left:12px;padding:4px 14px;border-radius:999px;background:#fff;font-size:.78rem;color:#4a5670}
.mon-bild{position:relative}
.mon-bild img{display:block;width:100%;height:auto}
.mon-marken{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.mon-hof{fill:rgba(61,141,255,.35)}
.mon-punkt{fill:#fff}
.mon-zahl{fill:var(--primaer-dunkel);font:750 25px var(--schrift)}
.mon-marke{transform:scale(1)}
.mon figcaption{margin:0}
.mon-legende{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px 40px}
.mon-legende li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:start;font-size:1rem;color:#c9d8ee}
.mon-legende b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--primaer-dunkel);font-size:.92rem;font-weight:750}
.mon-legende strong{display:block;color:#fff;font-size:1.05rem;font-weight:650}
.mon-bilder{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:24px}
.mon-bilder figure{margin:0}
.mon-klein{position:relative;border-radius:var(--r-m);overflow:hidden;background:#fff;box-shadow:var(--schatten-l)}
.mon-klein img{display:block;width:100%;height:auto}
.mon-bilder figcaption{margin-top:12px;font-size:.95rem;color:#c9d8ee}
.mon-bilder figcaption b{color:#fff;font-weight:650}
.mon-hinweis{margin:36px 0 0;font-size:.88rem;color:#b8c7e0}

/* Lupe: Beispielrechnung */
.lu{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(480px,100%),1fr));gap:56px 96px;align-items:center}
.lu-beleg{position:relative;padding:44px 40px 40px 64px;background:#fff;border-radius:var(--r-s);border:1px solid var(--linie);font-size:14px;line-height:1.45;color:#2a3550;box-shadow:var(--schatten-m)}
.lu-pz{position:relative;margin:0 -12px;padding:8px 12px;border-radius:8px;background:rgba(14,108,255,.05);outline:1.5px dashed rgba(14,108,255,.45);outline-offset:-1px}
.lu-pz-pos{margin-top:22px}
.lu-pz-summen{margin-top:14px}
.lu-pin{position:absolute;left:-48px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--primaer);color:#fff;font-size:.9rem;font-weight:750;box-shadow:0 0 0 4px rgba(14,108,255,.16)}
.lu-b-kopf{display:flex;align-items:center;gap:14px}
.lu-b-logo{display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:#1c4f8f;color:#fff;font-size:1rem;font-weight:800;flex:none}
.lu-b-kopf b{font-size:1.05rem;color:var(--tinte)}
.lu-b-an{margin:26px 0 22px;font-size:.85rem;color:#4a5670}
.lu-b-titelzeile{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.lu-b-titel{font:750 1.9rem/1 var(--schrift-display);letter-spacing:-.02em;color:var(--tinte)}
.lu-b-meta{display:block;font-size:.85rem;text-align:right}
.lu-b-pos{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 18px;font-size:.85rem;font-variant-numeric:tabular-nums}
.lu-h{font-weight:650;color:#5f6b84;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid #e3e8ef;padding-bottom:4px}
.lu-r{text-align:right}
.lu-b-summen{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 18px;font-variant-numeric:tabular-nums;font-size:.88rem}
.lu-g{font-weight:750;font-size:1.05rem;color:var(--tinte);border-top:2px solid var(--tinte);padding-top:6px}
.lu-b-fuss{margin-top:14px;display:flex;flex-direction:column;gap:10px;font-size:.85rem}
.lu-punkte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px}
.lu-punkte li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px}
.lu-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--primaer);color:#fff;font-size:.95rem;font-weight:750}
.lu-punkte b{display:block;font-size:1.12rem;font-weight:700;color:var(--tinte)}
.lu-punkte span span{display:block;margin-top:4px;font-size:1rem;color:var(--grau)}
.lu-hinweis{margin:32px 0 0;display:flex;gap:16px;align-items:flex-start;padding:16px 24px;border-radius:var(--r-m);background:#fff;border:1px solid var(--linie);font-size:.97rem;color:var(--text)}
.lu-hinweis .symbol{width:22px;height:22px;color:var(--primaer);flex:none;margin-top:2px}

/* Fehlende Rechnungen */
.fe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:24px;align-items:start}
.fe-karte{box-shadow:var(--schatten-m)}
.fe-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 6px}
.fe-kopf b{font-size:1.05rem;color:var(--tinte)}
.fe-kopf span{font-size:.82rem;font-weight:650;padding:4px 10px;border-radius:999px;background:var(--rot-hell);color:var(--rot)}
.fe-kopf .fe-erledigt{background:var(--gruen-hell);color:var(--gruen)}
.fe-liste,.fe-verlauf{list-style:none;margin:0;padding:0}
.fe-liste li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid #edf2f9}
.fe-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-s);background:var(--nebel2);color:var(--primaer-dunkel)}
.fe-ic .symbol{width:19px;height:19px}
.fe-liste b,.fe-verlauf b{display:block;font-size:.98rem;font-weight:650;color:var(--tinte)}
.fe-liste small,.fe-verlauf small{display:block;font-size:.86rem;color:var(--grau)}
.fe-dauer{font-size:.8rem;font-weight:650;padding:4px 9px;border-radius:999px;background:var(--amber-hell);color:var(--amber);white-space:nowrap}
.fe-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.fe-k{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:12px;border:1px solid #b9cbe4;background:#fff;color:var(--primaer-dunkel);font-weight:650;font-size:.92rem}
.fe-k .symbol{width:17px;height:17px}
.fe-k-haupt{border-color:transparent;background:var(--verlauf-knopf);color:#fff}
.fe-verlauf{margin-top:8px}
.fe-verlauf li{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding:0 0 20px}
.fe-verlauf li::after{content:"";position:absolute;left:15px;top:32px;bottom:0;width:2px;background:var(--linie)}
.fe-verlauf li:last-child{padding-bottom:0}
.fe-verlauf li:last-child::after{display:none}
.fe-verlauf .fe-ic{width:32px;height:32px;border-radius:50%;background:var(--primaer-hell);color:var(--primaer);position:relative;z-index:1}
.fe-verlauf .fe-ic .symbol{width:16px;height:16px}
.fe-verlauf .fe-ok .fe-ic{background:var(--gruen-hell);color:var(--gruen)}
.fe-zeit{display:block;font-size:.84rem;color:var(--grau);font-variant-numeric:tabular-nums}
.fe-mehr{margin:24px 0 0}
.fe-mehr a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:650;text-decoration:none}
.fe-mehr a:hover{text-decoration:underline}
.fe-mehr .symbol{width:16px;height:16px}

/* Fragen offen */
.fo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(480px,100%),1fr));gap:0 64px}
.fo-eintrag{padding:24px 0;border-top:1px solid var(--linie)}
.fo-eintrag h3{font-size:1.12rem;line-height:1.35;letter-spacing:-.01em}
.fo-eintrag p{margin:8px 0 0;font-size:1rem;line-height:1.6;color:var(--grau)}
.fo-fuss{margin:32px 0 0;font-size:1rem;color:var(--grau)}
.fo-fuss a{font-weight:650}

/* Funktionskacheln */
.ka{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:16px;list-style:none;margin:0;padding:0}
.ka-link{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;height:100%;padding:24px;border-radius:var(--r-m);background:#fff;border:1px solid var(--linie);color:var(--text);text-decoration:none;transition:box-shadow .2s,border-color .2s,transform .2s}
.ka-link:hover{border-color:#b9cbe4;box-shadow:var(--schatten-m);transform:translateY(-2px)}
.ka-symbol{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-s);background:var(--primaer-hell);color:var(--primaer)}
.ka-symbol .symbol{width:21px;height:21px}
.ka-link b{display:block;font-size:1rem;font-weight:700;color:var(--tinte)}
.ka-text{display:block;margin-top:3px;font-size:.92rem;line-height:1.5;color:var(--grau)}
.ka-neu{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--gruen-hell);color:var(--gruen);font-size:.72rem;font-weight:700;vertical-align:2px}
.ka-alle{margin:32px 0 0}
.ka-alle a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:650;text-decoration:none}
.ka-alle a:hover{text-decoration:underline}
.ka-alle .symbol{width:16px;height:16px}

/* Preise als Stufen */
.treppe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px;align-items:stretch;list-style:none;margin:0;padding:0}
.stufe{display:flex;flex-direction:column;padding:24px;border-radius:var(--r-m);background:#fff;border:1px solid var(--linie);box-shadow:var(--schatten-s);color:var(--text)}
@media (min-width:72rem){.stufe-1{margin-top:96px}.stufe-2{margin-top:64px}.stufe-3{margin-top:32px}}
.stufe-empfohlen{border:2px solid var(--primaer);box-shadow:0 24px 60px rgba(14,108,255,.18)}
.stufe-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:28px;color:var(--primaer)}
.stufe-leute{display:flex}
.stufe-leute .symbol{width:20px;height:20px;stroke-width:2}
.stufe-leute .symbol+.symbol{margin-left:-5px}
.stufe-marke{padding:5px 11px;border-radius:999px;background:var(--verlauf-knopf);color:#fff;font-size:.78rem;font-weight:650}
.stufe h3{margin-top:18px;font:700 1.5rem/1.2 var(--schrift-display);letter-spacing:-.02em}
.stufe-wer{margin:4px 0 0;font-size:.95rem;color:var(--grau)}
.stufe-preis{margin:20px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;color:var(--tinte)}
.stufe-preis b{font:750 3.2rem/1 var(--schrift-display);letter-spacing:-.045em}
.stufe-preis span{font-size:1.25rem;font-weight:700}
.stufe-preis small{flex-basis:100%;margin-top:6px;font-size:.88rem;color:var(--grau)}
.stufe-preis-text{font-size:1rem}
.stufe-liste{list-style:none;margin:24px 0;padding:16px 0 0;border-top:1px solid var(--linie);display:flex;flex-direction:column;gap:8px}
.stufe-liste li{position:relative;padding-left:28px;font-size:.95rem;line-height:1.45}
.stufe-liste li::before{content:"";position:absolute;left:5px;top:.3em;width:5px;height:10px;border:solid var(--gruen);border-width:0 2.4px 2.4px 0;transform:rotate(45deg)}
.stufe-knopf{margin-top:auto;width:100%}
.treppe-fuss{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:12px 48px;margin-top:32px;font-size:.95rem;color:var(--grau)}
.treppe-fuss p{margin:0}
.treppe+.preis-fuss,.treppe-fuss+.preis-fuss{text-align:left}
.hilfe-wege{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px;list-style:none;margin:40px 0 0;padding:0}
.hilfe-wege a{display:flex;flex-direction:column;gap:4px;height:100%;padding:24px;border-radius:var(--r-m);background:#fff;border:1px solid var(--linie);color:var(--text);text-decoration:none;transition:border-color .2s,box-shadow .2s}
.hilfe-wege a:hover{border-color:#b9cbe4;box-shadow:var(--schatten-m)}
.hilfe-wege b{font-size:1.05rem;font-weight:700;color:var(--tinte)}
.hilfe-preis{font-weight:650;color:var(--signal-dunkel);font-size:.95rem}
.hilfe-text{font-size:.93rem;color:var(--grau)}

/* Sicherheit als Karten (hell) */
.vertrauen-karten{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))!important}
.vertrauen-karten li{background:#fff;border:1px solid var(--linie);box-shadow:var(--schatten-s)}
.vertrauen-karten .vertrauen-symbol{width:48px;height:48px;border-radius:var(--r-s);margin-bottom:18px;background:var(--primaer-hell);color:var(--primaer);box-shadow:none}
.vertrauen-karten h3{font-size:1.12rem;color:var(--tinte)}
.vertrauen-karten p{margin:8px 0 0;font-size:.97rem;line-height:1.6;color:var(--grau)}
.vertrauen-zusatz{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:24px;align-items:center;margin-top:16px;padding:24px 32px;border-radius:var(--r-m);background:var(--tief);color:#fff}
.vertrauen-zusatz-symbol{display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:rgba(255,255,255,.1);color:#9ac3ff}
.vertrauen-zusatz h3{font-size:1.1rem;color:#fff}
.vertrauen-zusatz p{margin:4px 0 0;font-size:.97rem;line-height:1.6;color:#c9d8ee}
.vertrauen-zusatz-marke{padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.25);font-size:.82rem;font-weight:650;color:#dce7f8;white-space:nowrap}
.vertrauen-links{display:flex;flex-wrap:wrap;gap:8px 32px;list-style:none;margin:32px 0 0;padding:0;font-size:.95rem}
.vertrauen-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-underline-offset:4px}
.abschnitt-dunkel .vertrauen-links a{color:#fff}

/* Abschlussband in voller Breite */
.abschnitt-schluss{background:var(--held-verlauf);color:#fff;padding:clamp(80px,6vw + 40px,128px) 0}
.schluss{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(480px,100%),1fr));gap:32px 80px;align-items:end}
.schluss .dachzeile{color:#9ac3ff}
.schluss h2{color:#fff;font-size:clamp(2.1rem,1.3rem + 2.4vw,3.3rem);letter-spacing:-.035em;line-height:1.06;max-width:18ch}
.schluss-text{margin:0 0 24px;font-size:1.1rem;line-height:1.6;color:#c9d8ee;max-width:520px}
.schluss .knopf-gruppe{margin:0;padding:0;justify-content:flex-start}
.schluss-beratung{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:24px 0 0;font-size:.95rem;color:#c9d8ee}
.schluss-beratung .tel-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:#fff;font-weight:650}
.schluss-zeit{color:#b8c7e0}
.abschnitt-schluss :where(a,button):focus-visible{outline-color:#9ac3ff}

.mo-links a{font-weight:500}
.mo-links .mm-neu{margin-left:8px}

/* Handy */
@media (max-width:62rem){.vo-hinweis{display:none}.vo-zaehler{margin-left:0}}
@media (max-width:43.75rem){
  .held.held-mit-vorfuehrung{padding-top:44px}
  .held-aktion,.held-aktion .knopf-gruppe{width:100%}
  .held-aktion .knopf-gruppe .knopf{width:100%}
  .vo{margin-top:40px}
  .vo-steuer{gap:14px}
  .vo-umschalter{width:100%}
  .vo-seg{flex:1;padding:0 10px;font-size:.92rem}
  .vo-zahl{font-size:2.2rem}
  .vo-buehne{aspect-ratio:35/62;border-radius:var(--r-m)}
  .vo-flaeche{font-size:3.05cqw}
  .vo-titel,.vo-u-klein,.vo-u-text,.vo-r-adr,.vo-det,.vo-b-dank,.vo-pt-link,.vo-pt-zwei,.vo-ko-drei,.vo-m-text,.vo-c-zeit,.vo-linie-mittel{display:none}
  .vo-mz:nth-of-type(n+4),.vo-mz em,.vo-k7 .vo-r-frage,.vo-ko-notiz{display:none}
  .vo-mz{padding-right:.6em}
  .vo-p-zettel span{font-size:1.15em}
  .vo-eingang{left:2%;top:29%;width:96%;height:69%}
  .vo-e-kopf{padding:.9em 1.1em 0}
  .vo-e-kopf b{font-size:1.35em}
  .vo-chips span:first-child{display:none}
  .vo-uebersicht{left:4%;top:2.5%;width:92%}
  .vo-u-gross{margin:0;font-size:2.3em}
  .vo-u-karte{margin-top:.8em;padding:.7em .9em;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 .8em}
  .vo-uk-a{display:none}
  .vo-u-karte b{margin:0;font-size:1.15em}
  .vo-uk-b{grid-column:1;font-size:1em}
  .vo-u-knoepfe{grid-column:2;grid-row:1/3;margin:0}
  .vo-u-frage{display:none}
  .vo-protokoll{margin-top:48px}
  .vo-p-label{padding-left:16px}
  .ds-schritt{padding:44px 0}
  .lu-beleg{padding:32px 18px 26px 50px}
  .lu-pin{left:-40px;width:26px;height:26px;font-size:.8rem}
  .lu-b-pos{grid-template-columns:minmax(0,1fr) auto}
  .lu-einzel{display:none}
  .mon-marke{transform:scale(2.2)}
  .vertrauen-zusatz{grid-template-columns:1fr;padding:24px}
  .vertrauen-zusatz-marke{justify-self:start}
  .vo-k1{left:3%;top:3%;width:64%;height:17%;--r:-3deg;--dx:15;--dy:51.55}
  .vo-k2{left:55%;top:7%;width:40%;height:27%;--r:5deg;--dx:-25;--dy:50.84}
  .vo-k3{left:6%;top:22%;width:25%;height:34%;--r:-6deg;--dx:31.5;--dy:33.3}
  .vo-k4{left:33%;top:35%;width:62%;height:19%;--r:3deg;--dx:-14;--dy:38.79}
  .vo-k5{left:3%;top:57%;width:60%;height:11%;--r:2deg;--dx:17;--dy:22.14}
  .vo-k6{left:28%;top:70%;width:68%;height:13%;--r:-2deg;--dx:-12;--dy:12.58}
  .vo-k7{left:60%;top:20%;width:34%;height:26%;--r:-9deg;--dx:-27;--dy:104.87}
  .vo-k8{left:66%;top:55%;width:30%;height:13%;--r:6deg}
  .vo-k9{left:4%;top:85%;width:30%;height:11%;--r:-7deg}
  .vo-k10{left:40%;top:84%;width:34%;height:14%;--r:-4deg}
  .vo-z1{left:4.5%;top:37%;width:91%;height:7.2%}
  .vo-z2{left:4.5%;top:45.6%;width:91%;height:7.2%}
  .vo-z3{left:4.5%;top:54.2%;width:91%;height:7.2%}
  .vo-z4{left:4.5%;top:62.8%;width:91%;height:7.2%}
  .vo-z5{left:4.5%;top:71.4%;width:91%;height:7.2%}
  .vo-z6{left:4.5%;top:80%;width:91%;height:7.2%}
  .vo-z7{left:4.5%;top:88.6%;width:91%;height:7.2%}
}

/* Reduzierte Bewegung: kein automatischer Wechsel (seite.js), Haken sofort gesetzt, Laufband steht */
@media (prefers-reduced-motion:reduce){
  .ds-checks .ds-c::before{animation:none!important;opacity:1}
  .vo-spur{animation:none!important}
  .ka-link:hover{transform:none}
}
/* Erzwungene Farben: Flaechen behalten Rahmen */
@media (forced-colors:active){
  .vo-buehne,.vo-k,.vo-z,.vo-eingang,.ds-karte,.ds-c,.lu-beleg,.lu-pin,.lu-n,.fe-karte,.ka-link,.stufe,.hilfe-wege a,.vertrauen-zusatz,.vleiste-symbol,.mon-rahmen{border:1px solid CanvasText}
  .mon-marken{display:none}
}
@media print{
  .vo,.vo-protokoll,.vo-halt{display:none!important}
  .abschnitt-schluss{background:none!important;color:#000!important}
  .schluss h2{color:#000}
}
/* ===== 1.6.0 Startseite (Ende) ===== */