/* Schriften. Selbst ausgeliefert, kein Aufruf bei Google, keine Übermittlung
   der Besucher-IP. Die Dateien entstehen beim Ausliefern, siehe tools/schriften.sh.
   Outfit und Figtree, SIL Open Font License 1.1, Lizenztexte unter /assets/fonts/. */
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/outfit-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/outfit-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;
  src:url("/assets/fonts/figtree-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;
  src:url("/assets/fonts/figtree-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --grund:#F4F5F8;
  --weiss:#FFFFFF;
  --sanft:#EDEFF4;
  --linie:#E2E5EC;
  --ink:#101A2E;
  --ink2:#4A5468;
  --ink3:#78819A;
  --gelb:#FCCD3E;
  --gelb-hell:#FFF3C9;
  --gelb-tief:#8A6A00;
  --gruen:#0B6E4F;
  --gruen-hell:#E3F2EB;
  --rot:#C3341C;
  --rot-hell:#FBE7E2;
  --blau-hell:#E9EEF9;
  --disp:"Outfit","Helvetica Neue",Arial,sans-serif;
  --ui:"Figtree",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --breit:1200px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--grund);color:var(--ink);font-family:var(--ui);
 font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
img{max-width:100%}
a{color:inherit}

.h{max-width:var(--breit);margin-inline:auto;padding-inline:20px}
section{padding-block:clamp(48px,7vw,96px)}

h1,h2,h3{font-family:var(--disp);margin:0;letter-spacing:-.03em;text-wrap:balance}
h1{font-size:clamp(38px,6.2vw,72px);font-weight:800;line-height:1.02}
h2{font-size:clamp(28px,4.4vw,52px);font-weight:800;line-height:1.06}
h3{font-size:clamp(19px,2.2vw,23px);font-weight:700;line-height:1.2;letter-spacing:-.022em}
p{margin:0}

/* Gelbe Auszeichnung hinter Wörtern — unsere Antwort auf die zweifarbige
   Schlagzeile. Gelber Text auf Hell fiele durch die Kontrastprüfung, die wir
   selbst verkaufen; ein gelber Balken hinter dunklem Text besteht sie. */
.mark{position:relative;white-space:nowrap;z-index:0;
 background-image:linear-gradient(var(--gelb),var(--gelb));background-repeat:no-repeat;
 background-size:100% .33em;background-position:0 84%;padding:0 .07em;
 -webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:.05em}
@media(max-width:760px){.mark{white-space:normal}}

.knopf{display:inline-flex;align-items:center;gap:10px;font-family:var(--ui);
 font-weight:600;font-size:16px;padding:15px 28px;border-radius:999px;
 text-decoration:none;cursor:pointer;border:2px solid transparent;
 transition:transform .16s ease,background .16s ease,box-shadow .16s ease}
.knopf svg{width:17px;height:17px;flex:none}
.knopf.voll{background:var(--gelb);color:var(--ink);box-shadow:0 6px 20px -8px rgba(255,206,31,.9)}
.knopf.voll:hover{transform:translateY(-2px);background:#FFD844}
.knopf.dunkel{background:var(--ink);color:var(--weiss)}
.knopf.dunkel:hover{transform:translateY(-2px);background:#1B2740}
.knopf.rand{background:transparent;color:var(--ink);border-color:var(--ink)}
.knopf.rand:hover{background:var(--ink);color:var(--weiss)}
.knopf.hell{background:var(--weiss);color:var(--ink)}
.knopf.hell:hover{transform:translateY(-2px)}
.knopf.breit{width:100%;justify-content:center}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:50;background:rgba(244,245,248,.88);
 backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.kopf .h{display:flex;align-items:center;justify-content:space-between;gap:20px;
 padding-block:14px;flex-wrap:wrap}
/* Wort-Bild-Marke. Die Buchstaben liegen als Pfade in der Datei, damit die
   Marke überall identisch aussieht, auch ohne geladene Schrift. */
.marke{display:inline-flex;align-items:center;text-decoration:none;flex:none}
/* Höhe so gewählt, dass der Claim in der Marke lesbar bleibt: er nimmt
   rund ein Fünftel der Markenhöhe ein. */
.marke img{display:block;height:54px;width:auto;max-width:100%}
.fussgitter .marke img{height:58px}
@media(max-width:900px){.marke img{height:48px}}
@media(max-width:520px){.marke img{height:42px}}
.nav{display:flex;align-items:center;gap:26px;flex-wrap:wrap;font-weight:500;font-size:15.5px}
.nav a{text-decoration:none;color:var(--ink2)}
.nav a:hover{color:var(--ink)}
.kopf .knopf{padding:11px 22px;font-size:15px}

/* ---------- Held ---------- */
.held{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
 gap:clamp(30px,5vw,64px);align-items:center}
.held .lead{margin-top:24px;font-size:clamp(17px,1.9vw,20px);color:var(--ink2);max-width:48ch}
.haken{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.haken li{display:flex;gap:13px;align-items:flex-start;font-size:16px;color:var(--ink2);
 max-width:52ch}
.haken .i{width:24px;height:24px;border-radius:50%;background:var(--gruen-hell);
 display:grid;place-items:center;flex:none;margin-top:2px}
.haken .i svg{width:13px;height:13px;color:var(--gruen)}
.haken b{color:var(--ink);font-weight:700}
.heldknoepfe{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;align-items:center}
.klein{font-size:14px;color:var(--ink3)}

/* Prüfkarte im Held */
.pruefkarte{background:var(--weiss);border-radius:26px;padding:clamp(22px,3vw,32px);
 box-shadow:0 30px 70px -40px rgba(16,26,46,.45);border:1px solid var(--linie)}
.pk-kopf{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.pk-kopf .punkt{width:8px;height:8px;border-radius:50%;background:var(--gruen);
 display:inline-block;margin-right:8px;vertical-align:middle}
.pk-kopf > span{font-size:13px;font-weight:600;color:var(--gruen);background:var(--gruen-hell);
 padding:7px 14px;border-radius:999px;display:inline-flex;align-items:center}
.pruefkarte h2{font-size:clamp(21px,2.4vw,26px);margin-bottom:8px}
.pruefkarte .sub{font-size:15px;color:var(--ink2);margin-bottom:20px}
.eingabe{display:flex;gap:10px;flex-wrap:wrap}
.eingabe input{flex:1 1 200px;min-width:0;font-family:var(--ui);font-size:16px;
 padding:15px 18px;border:2px solid var(--linie);border-radius:999px;background:var(--grund);
 color:var(--ink)}
.eingabe input::placeholder{color:var(--ink3)}
.eingabe input:focus{border-color:var(--ink);background:var(--weiss)}
.pk-fuss{margin-top:16px;font-size:13.5px;color:var(--ink3);display:flex;gap:8px;
 align-items:flex-start}
.pk-fuss svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--gruen)}
.zaehler{margin-top:22px;padding-top:20px;border-top:1px solid var(--linie);
 display:flex;gap:28px;flex-wrap:wrap}
.zaehler div span{display:block;font-family:var(--disp);font-weight:800;font-size:26px;
 letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.zaehler div small{font-size:13px;color:var(--ink3)}

/* ---------- Zwei Wege ---------- */
.zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:22px}
.weg{background:var(--sanft);border-radius:24px;padding:clamp(26px,3.4vw,38px);
 display:flex;flex-direction:column;gap:14px}
.weg .augen{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
 color:var(--gelb-tief)}
.weg.b .augen{color:var(--gruen)}
.weg p{color:var(--ink2);font-size:16px}
.weg .knopf{margin-top:auto}

/* ---------- Dunkles Band ---------- */
.band{background:var(--ink);color:var(--weiss)}
.band h2{color:var(--weiss);text-align:center;max-width:22ch;margin-inline:auto}
.band .unter{text-align:center;color:rgba(255,255,255,.72);margin-top:14px;
 max-width:60ch;margin-inline:auto}
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
 gap:28px;margin-top:52px}
.zahl{text-align:center}
.zahl b{display:block;font-family:var(--disp);font-weight:800;
 font-size:clamp(34px,4.4vw,50px);line-height:1;letter-spacing:-.04em;
 font-variant-numeric:tabular-nums;color:var(--gelb)}
.zahl p{margin-top:12px;color:rgba(255,255,255,.72);font-size:15px}

/* ---------- Prüfpunkte mit Rundgang ---------- */
.mitte{text-align:center;max-width:64ch;margin-inline:auto}
.mitte p{margin-top:16px;color:var(--ink2);font-size:17.5px}
.dreispalt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);
 gap:clamp(24px,3vw,44px);margin-top:56px;align-items:center}
.merkmal{display:flex;gap:14px;align-items:flex-start;margin-bottom:30px}
.merkmal:last-child{margin-bottom:0}
.merkmal .tile{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none}
.merkmal .tile svg{width:20px;height:20px}
.merkmal h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:5px}
.merkmal p{font-size:14.5px;color:var(--ink2)}
.t1{background:var(--blau-hell);color:#2A4A8A}
.t2{background:var(--gruen-hell);color:var(--gruen)}
.t3{background:var(--gelb-hell);color:var(--gelb-tief)}
.t4{background:var(--rot-hell);color:var(--rot)}

.buehne{background:var(--weiss);border:1px solid var(--linie);border-radius:22px;
 overflow:hidden;box-shadow:0 30px 70px -45px rgba(16,26,46,.5)}
.leiste{display:flex;align-items:center;gap:10px;padding:13px 16px;
 border-bottom:1px solid var(--linie);background:var(--sanft)}
.leiste .pkt{display:flex;gap:6px}
.leiste .pkt i{width:9px;height:9px;border-radius:50%;background:#CDD3DF}
.leiste .adr{flex:1;font-size:12px;color:var(--ink3);background:var(--weiss);
 border:1px solid var(--linie);border-radius:8px;padding:6px 11px;white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis}
.leiste button{font-size:12px;font-weight:600;padding:7px 13px;border-radius:999px;
 border:1px solid var(--linie);background:var(--weiss);color:var(--ink2);cursor:pointer}
.leiste button:hover{border-color:var(--ink);color:var(--ink)}
.flaeche{position:relative;padding:22px;display:flex;flex-direction:column;gap:15px}
.zeile{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.el{font-size:14px;border-radius:11px;border:1px solid var(--linie);background:var(--grund);
 padding:11px 15px;color:var(--ink3)}
.el.kopf{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--ink);
 border:none;background:none;padding:0;letter-spacing:-.02em}
.el.feld{flex:1 1 150px;min-width:120px}
.el.bild{width:62px;height:44px;padding:0;background:
 repeating-linear-gradient(45deg,#DDE1E9 0 6px,transparent 6px 12px)}
.el.kaufen{background:var(--ink);color:var(--weiss);border-color:var(--ink);font-weight:600}
.ring{position:absolute;pointer-events:none;border:3px solid var(--gelb);border-radius:10px;
 box-shadow:0 0 0 4px rgba(255,206,31,.35);opacity:0;
 transition:all .42s cubic-bezier(.34,1.2,.44,1)}
.ansage{border-top:1px solid var(--linie);background:var(--sanft);padding:15px 18px;
 display:flex;align-items:center;gap:12px;min-height:64px}
.ansage .l{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
 color:var(--ink3);flex:none}
.ansage .t{font-size:15px;line-height:1.35}
.ansage .t b{background:var(--gelb);padding:1px 5px;border-radius:4px}

/* ---------- Drei Schritte ---------- */
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
 gap:26px;margin-top:56px}
.schritt{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.schritt .rahmen{width:100%;aspect-ratio:1.5;border-radius:22px;background:var(--weiss);
 border:1px solid var(--linie);display:grid;place-items:center;margin-bottom:6px}
.schritt .rahmen svg{width:64px;height:64px;color:var(--ink)}
.schritt .nr{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
 background:var(--ink);color:var(--weiss);padding:7px 16px;border-radius:999px}
.schritt p{color:var(--ink2);font-size:15.5px;max-width:38ch}

/* ---------- Der Unterschied ---------- */
.gegen{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
 gap:22px;margin-top:48px}
.karte{border-radius:24px;padding:clamp(26px,3.2vw,36px);display:flex;flex-direction:column;
 gap:15px;background:var(--weiss);border:1px solid var(--linie)}
.karte.gut{background:var(--ink);color:var(--weiss);border-color:var(--ink)}
.karte .wer{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
 color:var(--ink3)}
.karte.gut .wer{color:var(--gelb)}
.karte.gut h3{color:var(--weiss)}
.karte p{font-size:15.5px;color:var(--ink2)}
.karte.gut p{color:rgba(255,255,255,.78)}
.urteil{margin-top:auto;padding-top:16px;border-top:1px solid var(--linie);
 font-size:14px;font-weight:600}
.karte.gut .urteil{border-color:rgba(255,255,255,.16);color:var(--gelb)}
.karte:not(.gut) .urteil{color:var(--rot)}

/* ---------- Preise ---------- */
.preise{background:var(--gelb-hell)}
.tarife{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
 gap:22px;margin-top:52px;align-items:center}
.tarif{background:var(--weiss);border-radius:24px;padding:clamp(26px,3vw,34px);
 display:flex;flex-direction:column;gap:16px;border:1px solid var(--linie)}
.tarif.hoch{background:var(--ink);color:var(--weiss);border-color:var(--ink);
 padding-block:clamp(34px,4vw,46px);box-shadow:0 30px 70px -40px rgba(16,26,46,.6)}
.tarif .oben{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tarif .name{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.09em;
 text-transform:uppercase}
.beliebt{font-size:12px;font-weight:700;background:var(--gelb);color:var(--ink);
 padding:6px 13px;border-radius:999px;white-space:nowrap}
.betrag{font-family:var(--disp);font-weight:800;font-size:clamp(38px,4.6vw,54px);
 line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
 display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.betrag small{font-family:var(--ui);font-size:16px;font-weight:500;letter-spacing:0;
 color:var(--ink2)}
.tarif.hoch .betrag small{color:rgba(255,255,255,.72)}
.jahr{font-size:14px;color:var(--ink3)}
.tarif.hoch .jahr{color:rgba(255,255,255,.6)}
.tarif > p{font-size:15px;color:var(--ink2)}
.tarif.hoch > p{color:rgba(255,255,255,.78)}
.liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;
 font-size:14.5px}
.liste li{display:flex;gap:11px;align-items:flex-start;color:var(--ink2)}
.tarif.hoch .liste li{color:rgba(255,255,255,.85)}
.liste svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--gruen)}
.tarif.hoch .liste svg{color:var(--gelb)}
.preishinweis{text-align:center;margin-top:30px;font-size:14.5px;color:var(--ink2)}

/* ---------- Fragen ---------- */
.fragen{max-width:820px;margin:48px auto 0}
.frage{border-bottom:1px solid var(--linie)}
.frage summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
 font-family:var(--disp);font-weight:700;font-size:clamp(17px,2vw,20px);letter-spacing:-.02em}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"";position:absolute;right:10px;top:50%;width:12px;height:12px;
 margin-top:-8px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);
 transform:rotate(45deg);transition:transform .2s}
.frage[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.frage p{padding:0 0 24px;color:var(--ink2);font-size:16px;max-width:70ch}

/* ---------- Abschluss ---------- */
.schluss{background:var(--ink);color:var(--weiss);border-radius:32px;
 padding:clamp(34px,5vw,68px);text-align:center;display:flex;flex-direction:column;
 align-items:center;gap:20px}
.schluss h2{color:var(--weiss);max-width:20ch}
.schluss p{color:rgba(255,255,255,.75);max-width:56ch}

/* ---------- Fuß ---------- */
.fuss{border-top:1px solid var(--linie);padding-block:44px;font-size:14.5px;color:var(--ink2)}
.fussgitter{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.fussgitter h3{font-family:var(--disp);font-size:14px;font-weight:700;margin:0 0 14px;
 letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.fussgitter ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fussgitter a{text-decoration:none;color:var(--ink2)}
.fussgitter a:hover{color:var(--ink)}
/* § 356a Absatz 1 Satz 3 BGB verlangt, dass die Widerrufsfunktion während der
   Widerrufsfrist ständig verfügbar, HERVORGEHOBEN platziert und leicht
   zugänglich ist. Ein weiterer grauer Fußlink unter zehn anderen wäre das
   nicht. Deshalb steht der Zugang abgesetzt und mit Rahmen da. */
.widerrufsknopf{display:inline-block;margin-top:18px;padding:9px 15px;
  border:1.5px solid var(--ink);border-radius:999px;font-size:13.5px;font-weight:600;
  color:var(--ink) !important;background:var(--weiss)}
.widerrufsknopf:hover{background:var(--ink);color:var(--weiss) !important}
.widerrufsknopf:focus-visible{outline:3px solid var(--gelb);outline-offset:3px}
.fusszeile{margin-top:40px;padding-top:24px;border-top:1px solid var(--linie);
 font-size:13.5px;color:var(--ink3);line-height:1.8}


/* ---------- Befund der Schnellprüfung ---------- */
.ergebnis[hidden]{display:none}
.ergebnis{margin-top:clamp(34px,4vw,56px);background:var(--weiss);border:1px solid var(--linie);
 border-radius:26px;padding:clamp(24px,3.4vw,40px);box-shadow:0 30px 70px -50px rgba(16,26,46,.4)}
.erg-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
 flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid var(--linie)}
.erg-kopf .adr{font-size:13px;color:var(--ink3);word-break:break-all;margin-top:6px}
.erg-note{font-size:15px;color:var(--ink2);max-width:52ch;margin-top:10px}
.ampel{display:flex;align-items:center;gap:16px;flex:none}
.ampel .n{font-family:var(--disp);font-weight:800;font-size:clamp(40px,5vw,58px);line-height:1;
 letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ampel .n small{font-family:var(--ui);font-size:17px;font-weight:500;color:var(--ink3);
 letter-spacing:0}
.ampel .von{font-size:13px;color:var(--ink3);max-width:14ch;line-height:1.35}
.gut{color:var(--gruen)}.mittel{color:var(--gelb-tief)}.schlecht{color:var(--rot)}

.befunde{display:flex;flex-direction:column;margin-top:8px}
.bf{display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px 16px;
 padding-block:22px;border-bottom:1px solid var(--linie)}
.bf:last-child{border-bottom:none}
.bf .zeichen{grid-row:1 / span 3;width:30px;height:30px;border-radius:10px;display:grid;
 place-items:center;margin-top:1px}
.bf .zeichen svg{width:16px;height:16px}
.bf .zeichen.y{background:var(--gruen-hell);color:var(--gruen)}
.bf .zeichen.p{background:var(--gelb-hell);color:var(--gelb-tief)}
.bf .zeichen.n{background:var(--rot-hell);color:var(--rot)}
.bf .zeichen.u{background:var(--sanft);color:var(--ink3)}
.bf .zeichen.na{background:var(--sanft);color:var(--ink3)}
.bf .zeichen.laeuft{background:var(--blau-hell);color:#2A4A8A}
.bf .lage.laeuft{color:#2A4A8A}
.bf h4{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.02em;margin:0}
.bf .lage{font-size:13.5px;font-weight:600;margin-top:2px}
.bf .lage.y{color:var(--gruen)}.bf .lage.p{color:var(--gelb-tief)}
.bf .lage.n{color:var(--rot)}.bf .lage.u,.bf .lage.na{color:var(--ink3)}
.bf ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.bf li{font-size:14px;color:var(--ink2);padding-left:16px;position:relative;line-height:1.45}
.bf li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1.5px;
 background:var(--ink3);border-radius:2px}
.bf li b{color:var(--ink);font-weight:600}
.bf .hinw{margin-top:10px;font-size:13.5px;color:var(--ink3);max-width:70ch}
.erg-fuss{margin-top:26px;padding-top:24px;border-top:1px solid var(--linie);
 display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.erg-fuss p{font-size:14.5px;color:var(--ink2);max-width:46ch}
.laed{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink2)}
.spinner{width:20px;height:20px;border:2.5px solid var(--linie);border-top-color:var(--ink);
 border-radius:50%;animation:dreh .8s linear infinite;flex:none}
@keyframes dreh{to{transform:rotate(360deg)}}
.fehlbox{background:var(--rot-hell);color:var(--rot);border-radius:14px;padding:16px 20px;
 font-size:15px;font-weight:500}

@media (max-width:980px){
  .held{grid-template-columns:1fr}
  .dreispalt{grid-template-columns:1fr}
  .dreispalt .buehne{order:-1}
  .fussgitter{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .nav{display:none}
  .fussgitter{grid-template-columns:1fr}
  .zaehler{gap:20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;
 scroll-behavior:auto!important}}

/* ---------- Vorprüfung: vier Fragen ---------- */
.vorpruef{background:var(--weiss);border-radius:26px;padding:clamp(24px,3.4vw,40px);
  box-shadow:0 24px 60px -34px rgba(16,26,46,.34);max-width:760px;margin:34px auto 0}
.takt{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.takt i{width:26px;height:6px;border-radius:3px;background:var(--linie);flex:1 1 auto;
  transition:background .2s}
.takt i.an{background:var(--gelb)}
.takt i.fertig{background:var(--ink)}
.vfrage h3{font-size:clamp(19px,2.2vw,24px);line-height:1.25;letter-spacing:-.02em}
.vfrage .warum{margin-top:12px;font-size:15.5px;color:var(--ink2)}
.vfrage .quelle{margin-top:12px;font-size:13.5px;color:var(--ink3)}
.antworten{display:flex;gap:11px;flex-wrap:wrap;margin-top:24px}
.antworten button{font-family:var(--ui);font-size:15.5px;font-weight:600;cursor:pointer;
  padding:13px 26px;border-radius:999px;border:1.5px solid var(--linie);background:var(--weiss);
  color:var(--ink);transition:transform .15s,border-color .15s,background .15s}
.antworten button:hover{transform:translateY(-2px);border-color:var(--ink)}
.antworten button.ja{border-color:var(--ink);background:var(--ink);color:var(--weiss)}
.zurueck{background:none;border:0;padding:6px 0;margin-top:20px;cursor:pointer;
  font-family:var(--ui);font-size:14.5px;color:var(--ink3);text-decoration:underline}
.zurueck:hover{color:var(--ink)}
.entscheid .kopfzeile{display:flex;align-items:flex-start;gap:16px}
.entscheid .siegel{width:52px;height:52px;border-radius:16px;flex:none;display:grid;place-items:center}
.entscheid .siegel svg{width:26px;height:26px}
.entscheid.ja .siegel{background:var(--rot-hell);color:var(--rot)}
.entscheid.nein .siegel{background:var(--gruen-hell);color:var(--gruen)}
.entscheid.teils .siegel{background:var(--gelb-hell);color:var(--gelb-tief)}
.entscheid h3{font-size:clamp(21px,2.5vw,27px);letter-spacing:-.025em}
.entscheid .satz{margin-top:12px;font-size:16.5px;color:var(--ink2)}
.entscheid .gruende{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:12px}
.entscheid .gruende li{display:flex;gap:11px;font-size:15.5px;color:var(--ink2);align-items:flex-start}
.entscheid .gruende li b{color:var(--ink)}
.entscheid .gruende .pkt{width:7px;height:7px;border-radius:50%;background:var(--ink3);flex:none;margin-top:8px}
.unsicher{margin-top:24px;background:var(--gelb-hell);border-radius:16px;padding:18px 20px;
  font-size:14.5px;color:var(--gelb-tief);line-height:1.6}
.unsicher b{display:block;margin-bottom:5px;color:#6B5200}
.urteilknoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;align-items:center}

/* ---------- Selbstbewertung ---------- */
.angaben{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;
  margin-top:26px}
.feld{display:block}
.feld span{display:block;font-size:13px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:7px}
.feld input{width:100%;font-family:var(--ui);font-size:15.5px;padding:12px 15px;
  border-radius:12px;border:1.5px solid var(--linie);background:var(--sanft);color:var(--ink)}
.feld input:focus{border-color:var(--ink);background:var(--weiss)}
.pruefliste{margin-top:14px;display:flex;flex-direction:column}
.pf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start;
  padding:24px 0;border-bottom:1px solid var(--linie)}
.pf:last-child{border-bottom:0}
.pf h4{font-size:17px;letter-spacing:-.01em}
.pf .nr{font-family:var(--disp);font-weight:800;color:var(--ink3);font-size:14px;
  margin-right:9px}
.pf p{margin-top:8px;font-size:15px;color:var(--ink2)}
.pf .wie{margin-top:10px;font-size:14px;color:var(--ink3);background:var(--sanft);
  border-radius:12px;padding:11px 14px}
.wahl{display:flex;gap:7px;flex-wrap:wrap}
.wahl button{font-family:var(--ui);font-size:14px;font-weight:600;cursor:pointer;
  padding:9px 15px;border-radius:999px;border:1.5px solid var(--linie);background:var(--weiss);
  color:var(--ink2);white-space:nowrap;transition:all .15s}
.wahl button:hover{border-color:var(--ink3)}
.wahl button[aria-pressed=true].y{background:var(--gruen-hell);border-color:var(--gruen);color:var(--gruen)}
.wahl button[aria-pressed=true].p{background:var(--gelb-hell);border-color:#D9A400;color:var(--gelb-tief)}
.wahl button[aria-pressed=true].n{background:var(--rot-hell);border-color:var(--rot);color:var(--rot)}
.wahl button[aria-pressed=true].na{background:var(--blau-hell);border-color:#5B78B8;color:#2A4A8A}
.stand{position:sticky;bottom:0;z-index:20;background:var(--weiss);border-radius:20px;
  box-shadow:0 -10px 40px -22px rgba(16,26,46,.5);padding:18px 22px;margin-top:26px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border:1px solid var(--linie)}
.stand .z{display:flex;align-items:baseline;gap:9px}
.stand .z b{font-family:var(--disp);font-weight:800;font-size:30px;letter-spacing:-.03em}
.stand .z small{color:var(--ink3);font-size:13.5px}
.stand .txt{font-size:14.5px;color:var(--ink2);flex:1 1 240px;min-width:0}
.doks{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;margin-top:34px}
.dok{background:var(--weiss);border-radius:22px;padding:clamp(22px,2.8vw,30px);
  border:1px solid var(--linie);display:flex;flex-direction:column}
.dok .augen{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink3);display:block;margin-bottom:9px}
.dok h3{font-size:19px;letter-spacing:-.015em}
.dok .zweck{margin-top:9px;font-size:14.5px;color:var(--ink2)}
.dok pre{margin-top:18px;background:var(--sanft);border-radius:14px;padding:16px;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:12.5px;
  line-height:1.65;color:var(--ink2);max-height:280px;overflow:auto;white-space:pre-wrap;
  word-break:break-word}
.dok .knoepfe{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.dok .knoepfe .knopf{padding:11px 20px;font-size:14.5px}
.sperre{margin-top:18px;background:var(--rot-hell);border-radius:14px;padding:18px 20px;
  color:#8E2513;font-size:14.5px;line-height:1.6}
.sperre b{display:block;font-size:16px;margin-bottom:6px;color:var(--rot)}
.frei{margin-top:18px;background:var(--gruen-hell);border-radius:14px;padding:18px 20px;
  color:#0A5940;font-size:14.5px;line-height:1.6}
.frei b{display:block;font-size:16px;margin-bottom:6px;color:var(--gruen)}
@media(max-width:640px){
  .pf{grid-template-columns:1fr}
  .stand{position:static}
}

/* ---------- Nachweis-Karte ---------- */
.dok.gluecklich{border-color:var(--gruen);box-shadow:0 20px 50px -32px rgba(11,110,79,.6)}
.siegelvorschau{margin-top:20px;border-radius:16px;padding:22px;display:flex;align-items:center;
  gap:18px;border:1.5px dashed var(--linie)}
.siegelvorschau.gut{background:var(--gruen-hell);border-color:var(--gruen)}
.siegelvorschau.offen{background:var(--sanft)}
.siegelvorschau .wert{font-family:var(--disp);font-weight:800;font-size:38px;letter-spacing:-.04em;
  line-height:1;flex:none}
.siegelvorschau.gut .wert{color:var(--gruen)}
.siegelvorschau.offen .wert{color:var(--ink3)}
.siegelvorschau .wert small{font-size:15px;font-weight:700}
.siegelvorschau .unterschrift{font-size:14px;color:var(--ink2);line-height:1.45}
.siegelvorschau.gut .unterschrift{color:#0A5940}
.dok .knoepfe .klein{font-size:13px;color:var(--ink3)}
.mitnehmen{margin-top:20px;padding-top:20px;border-top:1px solid var(--linie);display:flex;
  gap:18px;flex-wrap:wrap;align-items:flex-end}
.mitnehmen .knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.mitnehmen .knopf{padding:12px 20px;font-size:14.5px}

/* ---------- Erkennungszeichen der geprüften Seite ---------- */
.adr .favi{width:18px;height:18px;border-radius:4px;vertical-align:-3px;margin-right:8px;
  object-fit:contain;background:var(--weiss)}

/* ---------- Was konkret zu tun ist ---------- */
.tun{margin-top:16px;background:var(--sanft);border-radius:16px;padding:20px 22px;
  border:1px solid var(--linie)}
.tunkopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:14px}
.tunkopf .augen{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gruen);background:var(--gruen-hell);padding:4px 9px;border-radius:6px}
.tunkopf b{font-size:16px;letter-spacing:-.01em}
.tunkopf .tunmeta{font-size:13px;color:var(--ink3);width:100%}
.tun ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.tun ol li{font-size:14.5px;color:var(--ink2);line-height:1.6;padding-left:3px}
.tun pre{margin-top:15px;background:var(--ink);color:#D8DEEA;border-radius:12px;padding:15px 17px;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:12.5px;
  line-height:1.7;overflow-x:auto;white-space:pre}
.tun .probe{margin-top:14px;font-size:14px;color:var(--ink2)}
.tun .probe b{color:var(--ink)}
.tun.zu{filter:blur(4.5px);user-select:none;pointer-events:none;opacity:.72;
  max-height:210px;overflow:hidden;position:relative}
.schloss{display:flex;gap:11px;align-items:flex-start;margin-top:-26px;position:relative;z-index:2;
  background:var(--weiss);border:1px solid var(--linie);border-radius:14px;padding:14px 17px;
  box-shadow:0 12px 30px -18px rgba(16,26,46,.5)}
.schloss svg{width:19px;height:19px;flex:none;color:var(--ink3);margin-top:1px}
.schloss span{font-size:14px;color:var(--ink2);line-height:1.5}

/* ---------- Bezahlschranke ---------- */
.schranke{margin-top:30px;background:var(--ink);color:var(--weiss);border-radius:24px;
  padding:clamp(26px,3.4vw,38px);display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(240px,.9fr);gap:clamp(24px,3vw,44px);align-items:center}
.sch-links .augen{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gelb);display:block;margin-bottom:10px}
.schranke h3{color:var(--weiss);font-size:clamp(21px,2.6vw,28px);letter-spacing:-.025em}
.schranke p{margin-top:13px;color:rgba(255,255,255,.74);font-size:15.5px;line-height:1.65}
.sch-liste{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.sch-liste li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:rgba(255,255,255,.9)}
.sch-liste svg{width:15px;height:15px;flex:none;margin-top:4px;color:var(--gelb)}
.sch-rechts{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:18px;padding:26px 24px;text-align:center}
.sch-rechts .preis{display:block;font-family:var(--disp);font-weight:800;font-size:40px;
  letter-spacing:-.04em;color:var(--weiss)}
.sch-rechts .preisklein{display:block;font-size:13px;color:rgba(255,255,255,.62);margin-top:5px}
.sch-rechts .knopf{margin-top:20px}
.sch-note{font-size:13px;color:rgba(255,255,255,.58);margin-top:14px}
.sch-note a{color:rgba(255,255,255,.86);text-decoration:underline;text-underline-offset:2px}
.sch-note a:hover{color:var(--gelb)}
/* § 312j Absatz 2 BGB: Merkmale und Gesamtpreis unmittelbar über dem Knopf.
   Deshalb steht dieser Absatz hier und nicht in der linken Spalte. */
.sch-vertrag{font-size:13px;line-height:1.55;color:rgba(255,255,255,.72);
  margin:18px 0 0;text-align:left;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
/* Die Erklärung nach § 356 Absatz 6 BGB. Kein vorbelegter Haken, keine
   versteckte Beschriftung: sie ist Teil der Bestellung, nicht Kleingedrucktes. */
.sch-haken{display:flex;gap:11px;align-items:flex-start;text-align:left;
  font-size:13px;line-height:1.55;color:rgba(255,255,255,.86);margin-top:16px;cursor:pointer}
.sch-haken input{flex:none;width:19px;height:19px;margin:1px 0 0;accent-color:var(--gelb);cursor:pointer}
.sch-haken input:focus-visible{outline:3px solid var(--gelb);outline-offset:3px}
#hakenfehlt{color:var(--gelb)}
@media(max-width:820px){ .schranke{grid-template-columns:1fr} }
.tun ol li::before{display:none}
.tun ol li{padding-left:3px;position:static}
/* Platzhalterbalken hinter der Bezahlschranke */
.tun .bal{display:block;background:linear-gradient(90deg,#C9CFDC,#DDE2EB);border-radius:6px;
  height:13px;margin-top:12px}
.tun .bal.b1{height:16px;width:210px;margin-top:0}
.tun .bal.b2{width:100%}
.tun .bal.b3{width:74%}
.tun .bal.kasten{height:74px;margin-top:16px;background:#2A3550;border-radius:12px}
.tun.zu{filter:blur(4px);user-select:none;pointer-events:none;opacity:.75;
  max-height:200px;overflow:hidden}
/* Gitterzellen dürfen schrumpfen, sonst schieben Codeblöcke die Seite auf */
.bf{min-width:0}
.bf > div{min-width:0}
.tun{min-width:0;max-width:100%}
.tun pre,.dok pre{max-width:100%}
/* Quelltextschnipsel im Befund dürfen umbrechen, sonst schieben sie die Seite auf */
.bf li,.bf li b,.adr,.erg-kopf .adr{overflow-wrap:anywhere;word-break:break-word}

/* ---------- Gesperrter Block als Knopf ---------- */
.tunsperre{display:block;width:100%;margin-top:16px;padding:0;border:0;background:none;
  cursor:pointer;text-align:left;font:inherit;color:inherit;position:relative}
.tunsperre .tun{display:block;margin-top:0}
.tunsperre .tunkopf{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.tunsperre .schloss{display:flex;gap:11px;align-items:center;margin-top:-30px;position:relative;z-index:2;
  background:var(--weiss);border:1.5px solid var(--linie);border-radius:14px;padding:15px 18px;
  box-shadow:0 14px 34px -18px rgba(16,26,46,.55);transition:border-color .15s,transform .15s,box-shadow .15s}
.tunsperre:hover .schloss{border-color:var(--ink);transform:translateY(-2px);
  box-shadow:0 18px 40px -18px rgba(16,26,46,.62)}
.tunsperre:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:18px}
.tunsperre .schlosstext{flex:1 1 auto;font-size:14.5px;color:var(--ink);font-weight:600;line-height:1.4}
.tunsperre .schlosspreis{flex:none;font-family:var(--disp);font-weight:800;font-size:16px;
  background:var(--gelb);color:var(--ink);padding:7px 14px;border-radius:999px}
.tunsperre:hover .schlosspreis{background:#FFD844}
.freibox{background:var(--gruen-hell);border-radius:16px;padding:20px 22px;color:#0A5940;
  font-size:15px;line-height:1.6}
.freibox b{display:block;font-size:17px;margin-bottom:6px;color:var(--gruen)}
.testhinweis{margin-top:14px;background:var(--gelb-hell);border-radius:12px;padding:12px 16px;
  font-size:13.5px;color:var(--gelb-tief);line-height:1.5}

/* ---------- Abholbereich nach der Freischaltung ---------- */
.abhol{margin-top:28px;background:var(--gruen-hell);border:1.5px solid var(--gruen);border-radius:22px;
  padding:clamp(24px,3vw,32px);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(250px,.85fr);
  gap:clamp(22px,3vw,38px);align-items:center}
.abhol .augen{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gruen);display:block;margin-bottom:9px}
.abhol h3{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;color:#0A3F2E}
.abhol p{margin-top:12px;font-size:15.5px;line-height:1.65;color:#14503C}
.abhol-knoepfe{display:flex;flex-direction:column;gap:10px}
.abhol-knoepfe .knopf{justify-content:center;padding:14px 20px;font-size:15px}
.abhol-knoepfe .knopf svg{width:18px;height:18px}
.abhol-knoepfe .knopf.rand{border-color:rgba(11,110,79,.35);color:#0A5940;background:rgba(255,255,255,.6)}
.abhol-knoepfe .knopf.rand:hover{background:var(--gruen);color:var(--weiss);border-color:var(--gruen)}
@media(max-width:820px){ .abhol{grid-template-columns:1fr} }

/* ----------------------------- Abo-Bestellung -----------------------------
   Der Bestellbereich steht unter der Preistafel und wird erst sichtbar, wenn
   ein Tarif gewählt wurde. Grund: § 312j Absatz 2 BGB verlangt Merkmale und
   Gesamtpreis unmittelbar über dem Knopf — und „unmittelbar" heißt für den
   gewählten Tarif, nicht für alle drei gleichzeitig. */
.abobox{max-width:680px;margin:34px auto 0;background:var(--ink);color:var(--weiss);
  border-radius:20px;padding:30px 30px 26px}
.abobox h3{font-family:var(--disp);font-size:23px;font-weight:800;letter-spacing:-.02em;
  margin:0 0 14px;color:var(--weiss)}
.abomerkmale{font-size:14px;line-height:1.6;color:rgba(255,255,255,.82);margin:0;
  padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.16)}
.abobox .sch-haken{margin-top:18px}
.abobox .knopf{margin-top:20px}
.abobox .sch-note a{color:rgba(255,255,255,.86);text-decoration:underline;text-underline-offset:2px}
.abobox .sch-note a:hover{color:var(--gelb)}

/* ---------- Das Tor vor den Dokumenten ---------- */
/* Die Karte hebt sich bewusst ab: sie ist kein Dokument, sondern die
   Bedingung dafuer. Wer das verwischt, taeuscht. */
.dok.tor{border:2px solid var(--ink);background:var(--weiss)}
.dok.tor .augen{color:var(--ink)}
.torfelder{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:15px;
  margin-top:22px}
.dok.tor .sch-haken{color:var(--ink2);font-size:14px;line-height:1.6;align-items:flex-start}
.dok.tor .sch-haken input{accent-color:var(--ink)}
.dok.tor .sch-note{color:var(--ink3);font-size:13px;line-height:1.65;margin-top:14px}
.dok.tor .sch-note a{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}
.dok.tor .sch-note a:hover{color:var(--ink)}
.dok.tor .sch-note[hidden]{display:none}
#tFehler{color:var(--rot);font-weight:600}

/* Ein Anriss, kein Ausschnitt: der Text laeuft nach unten aus, statt
   abgeschnitten dazustehen. Kein Weichzeichner, denn was hier steht, ist
   echt und darf gelesen werden. */
.dok pre.angerissen{max-height:none;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 58%,transparent 100%)}