/* Probesterben -- ein Stylesheet, keine Abhaengigkeiten.
 *
 * Aufbau: erst die Token aus der Design-Uebergabe, dann die Bausteine
 * (Knopf, Feld, Karte, Pille), dann die Seitenbereiche. Die deutschen
 * Klassennamen aus dem Bestand bleiben gueltig -- sie sind ueber die
 * Tokens auf die neue Palette gelegt, damit die Ansichten der Rechenwege
 * nicht angefasst werden mussten.
 *
 * Die Schriften liegen unter /schrift und werden selbst ausgeliefert. Ein
 * Aufruf an fonts.googleapis.com waere ein Aufruf nach draussen und damit
 * eine Spur bei einem Dritten -- genau das, was Invariante 2.3 verhindern
 * soll. Aus demselben Grund gibt es hier kein Bild von fremden Servern und
 * kein Skript ausser dem Notausgang. */

@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/schrift/sans-normal-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,
    U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/schrift/sans-normal-latin-ext.woff2) format("woff2");
  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:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(/schrift/serif-normal-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,
    U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(/schrift/serif-normal-latin-ext.woff2) format("woff2");
  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:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url(/schrift/serif-italic-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,
    U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url(/schrift/serif-italic-latin-ext.woff2) format("woff2");
  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{
  /* Farben aus der Uebergabe. Die deutschen Namen daneben sind Aliasse fuer
     den Bestand, damit beide Schreibweisen dasselbe meinen. */
  --paper:#FBF7F1; --paper-2:#F3EDE3;
  --ink:#16211D;   --ink-soft:#5B6862;
  --line:#E0D7C8;
  --calm:#0F5C4E;  --calm-soft:#E4EFEA; --calm-dark:#0B4A3F;
  --alarm:#C8451F; --alarm-soft:#FBEAE2; --alarm-text:#7A3A22;

  --papier:var(--paper); --tinte:var(--ink); --grau:var(--ink-soft);
  --linie:var(--line); --akzent:var(--calm); --akzent-hell:var(--calm-soft);
  --warnung:var(--alarm);

  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --schatten:0 22px 50px rgba(22,33,29,.08);
  --breite:820px;               /* Lesetexte, nach der Design-Uebergabe */
}
*{box-sizing:border-box}

/* Das hidden-Attribut muss gewinnen. Von sich aus setzt es nur ein
   display:none in der Browservorgabe -- und jede Regel dieses Stylesheets,
   die display setzt, schlaegt das. Genau so liess sich der Cookie-Hinweis
   nicht schliessen: Der Klick setzte hidden, .kekshinweis{display:flex}
   hielt ihn sichtbar. Die Design-Uebergabe hatte davor gewarnt. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans)}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.01em}
a{color:var(--calm)}
a:hover{color:var(--alarm)}
:focus-visible{outline:2px solid var(--calm);outline-offset:2px}
::selection{background:#F6E2B8}
img{max-width:100%;height:auto}

.huelle{max-width:var(--breite);margin:0 auto;padding:0 max(20px,4vw) 72px}
.huelle.weit{--breite:1180px;padding-left:max(24px,6vw);padding-right:max(24px,6vw);padding-bottom:0}
/* Die Breiten der Design-Uebergabe: Inhalt 1180, Kasse 980, Rechner 880,
   Lesetexte 820. Ein Formular mit kurzen Feldern braucht weniger Platz als
   eine Ergebnistabelle und mehr als ein Fliesstext. */
.huelle.rechner{--breite:880px}
.huelle.kasse{--breite:980px}
.num{font-variant-numeric:tabular-nums}

/* Kopfzeile mit Quick Exit. Der Notausgang steht auf jeder Seite -- er ist
   kein Zierrat, sondern der Grund, warum jemand die Seite ueberhaupt
   oeffnet, waehrend ein anderer im Raum ist. */
header{display:flex;align-items:center;gap:20px;padding:18px 0;margin-bottom:28px;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
header.blank{border-bottom:0;margin-bottom:0}
.marke{font-family:var(--display);font-size:22px;letter-spacing:0;text-decoration:none;
  color:var(--ink);margin-right:auto}
.marke .punkt{color:var(--alarm)}
header nav{display:flex;gap:20px;flex-wrap:wrap}
header nav a{font-size:15px;text-decoration:none;color:var(--ink-soft)}
header nav a:hover{color:var(--calm)}
.notaus{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:var(--paper);
  border:0;border-radius:999px;padding:9px 16px;font:500 13.5px var(--sans);cursor:pointer}
.notaus:hover{background:var(--alarm)}

/* Schrift */
h1{font-size:clamp(30px,4vw,46px);line-height:1.08;margin:0 0 14px;text-wrap:balance}
h1.gross{font-size:clamp(40px,6vw,74px);line-height:1.02;color:inherit;font-weight:400;margin:24px 0 20px}
h2{font-size:clamp(26px,3.2vw,40px);line-height:1.12;margin:44px 0 12px;text-wrap:balance}
h3{font-size:22px;line-height:1.25;margin:24px 0 8px}
p{margin:0 0 14px}
.lede,.vorspann{font-size:18px;line-height:1.6;max-width:60ch;color:var(--ink-soft);margin:0 0 22px}
.leise{color:var(--ink-soft);font-size:14px;line-height:1.55}
.klein{font-size:13px;color:var(--ink-soft)}
em.betont{font-style:italic;color:var(--calm)}
.gross{font-family:var(--display);font-size:31px;color:var(--calm);line-height:1.2;
  margin:6px 0 14px;letter-spacing:-.02em;font-weight:400}

/* Pillen */
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  font-size:13px;line-height:1.35}
.pill-calm{background:var(--calm-soft);color:var(--calm)}
.pill-alarm{background:var(--alarm-soft);color:var(--alarm)}
.pill-ruhig{background:var(--paper-2);color:var(--ink)}

/* Knoepfe */
.cta,button.weiter{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;cursor:pointer;font:500 16px var(--sans);padding:14px 26px;border-radius:999px;
  background:var(--calm);color:#FBF7F1;text-decoration:none;
  transition:transform .15s ease,background .15s ease}
.cta:hover,button.weiter:hover{background:var(--calm-dark);transform:translateY(-1px);color:#FBF7F1}
.cta:active,button.weiter:active{transform:translateY(0)}
.cta.voll,button.weiter{width:100%}
.cta.schmal{padding:10px 20px;font-size:15px;width:auto}
.cta-2{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ink);
  cursor:pointer;background:transparent;color:var(--ink);font:400 16px var(--sans);
  padding:13px 24px;border-radius:999px;text-decoration:none}
.cta-2:hover{background:var(--ink);color:var(--paper)}
.cta-2[disabled]{opacity:.35;cursor:not-allowed}
.cta-2[disabled]:hover{background:transparent;color:var(--ink)}
/* Zwei Wege nebeneinander: der bezahlte vorn, der kostenlose daneben.
   Auf dem Telefon untereinander und beide ueber die volle Breite -- ein
   halbbreiter Knopf neben einem anderen wird dort zur Fummelei. */
.cta-paar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:22px}
.cta.gross{font-size:17px;padding:16px 30px}
/* Der zweite Weg tritt zurueck: kein Knopf mehr, sondern ein Textlink neben
   dem Kaufknopf. Zwei Knoepfe nebeneinander stellen zwei gleichwertige
   Angebote dar -- das ist der Kurzcheck hier nicht mehr. Verstecken waere
   trotzdem falsch: Er ist der kostenlose Weg, und wer ihn sucht, findet ihn
   auf Anhieb. */
/* Fragen und Antworten. Aufklappbar ueber <details>, wie die Herkunftshinweise
   im Fragebogen -- kein Javascript, und die Seite bleibt kurz. Die erste
   Frage steht offen: Wer im falschen Land sitzt, soll das nicht erst nach
   einem Klick erfahren. */
/* Cookie-Hinweis. Unten angeheftet, ruhig, ohne Verdunkelung des Inhalts --
   er informiert, er fragt nicht. Der Notausgang oben rechts muss frei
   bleiben, deshalb unten und nicht oben. */
/* Hero-Foto. Die Einfaerbung aus dem Design-Entwurf: entsaettigt, aufgehellt
   und per multiply auf das Papierweiss gelegt, damit das Bild in der Seite
   steht statt auf ihr zu kleben. Die Beispielkarte liegt oben rechts ueber
   der ruhigen Deckenflaeche -- unten saesse sie auf Tasse und Papieren. */
.hero-bild{margin:0;position:relative}
.hero-bild picture{display:block;border-radius:24px;overflow:hidden;background:var(--paper-2)}
.hero-bild img{display:block;width:100%;height:520px;object-fit:cover;object-position:50% 40%;
  filter:saturate(.62) brightness(1.08) contrast(.96);mix-blend-mode:multiply}
.hero-karte{position:absolute;top:-18px;right:-14px;width:216px;padding:16px 18px;
  border-radius:16px;z-index:2}
@media (max-width:860px){
  .hero-bild img{height:360px}
  .hero-karte{right:12px;top:-14px}
}

/* Das Band unter der Ueberschrift. Die weisse Flaeche rechts im Bild laeuft
   in den Papierton aus, statt an einer harten Kante zu enden. */
.band-bild{display:block;margin:32px 0 8px;border-radius:18px;overflow:hidden;
  background:var(--paper-2)}
.band-bild img{display:block;width:100%;height:auto;aspect-ratio:1800/563;object-fit:cover;
  filter:saturate(.7) brightness(1.02);mix-blend-mode:multiply}

.kekshinweis{position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--ink);color:#C6CFCA;
  padding:14px max(20px,4vw);display:flex;flex-wrap:wrap;gap:14px;
  align-items:center;justify-content:center;
  box-shadow:0 -8px 30px rgba(22,33,29,.12)}
.kekshinweis p{margin:0;font-size:14px;line-height:1.5;max-width:76ch}
.kekshinweis a{color:#FBF7F1}
.kekshinweis button{flex:none;border:1px solid #4E8578;background:transparent;color:#FBF7F1;
  font-family:var(--sans);font-size:14px;padding:8px 18px;border-radius:999px;cursor:pointer}
.kekshinweis button:hover{background:#FBF7F1;color:var(--ink)}
@media (max-width:560px){
  .kekshinweis{flex-direction:column;align-items:stretch;text-align:left}
  .kekshinweis button{width:100%}
}

.faq{margin-top:34px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 36px 20px 0;position:relative;
  font-family:var(--display);font-size:21px;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:19px;
  font-size:22px;color:var(--calm);font-family:var(--sans)}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--calm)}
.faq details > p{margin:0 0 16px;max-width:68ch;color:var(--ink-soft)}
.faq details > p:first-of-type{margin-top:-4px}

.nebenweg{font-size:15px;color:var(--ink-soft);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap}
.nebenweg:hover{color:var(--calm)}
.band .nebenweg{color:#C9DED7}
.band .nebenweg:hover{color:#FBF7F1}
@media (max-width:560px){
  .cta-paar{flex-direction:column;align-items:stretch}
  .cta-paar .cta,.cta-paar .cta-2{width:100%}
}

.cta-3{background:none;border:0;cursor:pointer;font:400 14px var(--sans);color:var(--calm);
  padding:6px 2px;text-decoration:none}
.cta-3:hover{color:var(--alarm)}
a.zurueck{display:inline-block;margin-top:16px;color:var(--ink-soft);font-size:14px}

/* Fortschritt */
.fortschritt{height:3px;background:var(--paper-2);border-radius:2px;margin-bottom:26px;overflow:hidden}
.fortschritt i{display:block;height:100%;background:var(--calm);border-radius:2px}
.schrittzahl{display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:14px;color:var(--ink-soft);margin-bottom:12px}
/* Fuss einer Frageseite: Zurueck links, Weiter rechts, Hinweis daneben. */
/* Was zwischen den Haushalten fliesst: eine Zeile je Richtung und Art,
   Betrag rechtsbuendig in Tabellenziffern. */
.fluesse{border-top:1px solid var(--line);margin-top:6px}
.fluss{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:16px 0;border-bottom:1px solid var(--line)}
.fluss-art{font-family:var(--display);font-size:21px;line-height:1.2}
.fluss-betrag{font-family:var(--display);font-size:28px;white-space:nowrap;color:var(--calm)}
.erklaerung{margin-top:14px}
.erklaerung summary{cursor:pointer;color:var(--calm);font-size:15px;padding:6px 0}
.erklaerung p{margin:10px 0 0;max-width:68ch;color:var(--ink-soft)}

.betragsfeld{display:flex;align-items:center;gap:12px;max-width:340px;margin-top:18px}
.betragsfeld .in{font-family:var(--display);font-size:32px;min-height:64px;text-align:right;
  font-variant-numeric:tabular-nums}
.betragsfeld span{font-size:18px;color:var(--ink-soft)}
.schrittfuss{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:28px}
.schrittfuss .cta{margin-left:auto}

/* Formular */
label{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:6px}
label.stark{font-size:15.5px;color:var(--ink);font-weight:500}
input[type=number],input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{
  width:100%;min-height:46px;padding:10px 14px;font:400 16px var(--sans);color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:10px}
input:hover,select:hover,textarea:hover{border-color:var(--ink-soft)}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  border-color:var(--calm);outline:2px solid var(--calm-soft);outline-offset:0}
input[type=range]{width:100%;min-height:0;padding:0;margin:18px 0 6px;accent-color:var(--calm);border:0}
/* Auf dem Telefon ist der Griff des Reglers sonst ein 16-Pixel-Punkt, und
   bei 50-Euro-Schritten auf 330 Pixeln trifft man keinen Betrag. Deshalb ein
   grosser Griff und daneben Minus und Plus fuer die Feinarbeit. */
.regler{display:flex;align-items:center;gap:12px}
.regler input[type=range]{flex:1;margin:0;height:44px}
.stufe{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--calm);font:500 22px/1 var(--sans);cursor:pointer}
.stufe:hover{border-color:var(--calm)}
@media (pointer:coarse){
  input[type=range]::-webkit-slider-thumb{width:30px;height:30px}
  input[type=range]::-moz-range-thumb{width:30px;height:30px}
}
.reglerwert{font-family:var(--display);font-size:34px;color:var(--calm);text-align:center;
  letter-spacing:-.02em;margin-bottom:4px}
/* Felder im Raster, wie in der Design-Uebergabe: auto-fit ab 240px. Ein
   Eingabefeld fuer "Alter des Kindes" ueber die volle Breite sieht aus wie
   ein gedehntes Telefonformular -- die Feldbreite soll etwas ueber die
   erwartete Eingabe sagen.
   Was eine ganze Zeile braucht, sagt es selbst: Auswahlpillen brechen im
   schmalen Kasten unschoen um, Zwischenueberschriften und Fehlerkaesten
   gehoeren ohnehin ueber die volle Breite. */
.felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:22px;align-items:start;margin-bottom:22px}
.felder > .breit{grid-column:1/-1}
.feld{margin-bottom:0}
.felder + .felder{margin-top:0}
@media (max-width:560px){
  .felder{grid-template-columns:1fr;gap:18px}
}
.feld-fehler input,.feld-fehler select{border-color:var(--alarm)}
.fehlertext{color:var(--alarm);font-size:14px;margin:6px 0 0}

/* Auswahl als Pille -- der sichtbare Zustand haengt am versteckten Radio,
   damit die Tastaturbedienung erhalten bleibt. */
.optionen{display:flex;flex-wrap:wrap;gap:10px}
.opt{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line);
  background:#fff;border-radius:999px;font-size:15px;cursor:pointer;color:var(--ink);margin:0}
button.opt{font-family:var(--sans)}
.opt:hover{border-color:var(--calm)}
.opt input{position:absolute;opacity:0;width:0;height:0;min-height:0;padding:0;margin:0}
.opt:has(input:checked){border-color:var(--calm);background:var(--calm-soft);color:var(--calm)}
.opt:has(input:focus-visible){outline:2px solid var(--calm);outline-offset:2px}

/* Auswahl als Zeile, wo die Antworten zu lang fuer eine Pille sind */
.wahl{display:block;width:100%;text-align:left;padding:15px 16px;margin-bottom:9px;
  border:1px solid var(--line);border-radius:11px;background:#fff;font-size:16px;
  cursor:pointer;color:var(--ink)}
button.wahl{font-family:var(--sans)}
.wahl:hover{border-color:var(--calm);background:var(--calm-soft)}
.wahl input{width:auto;min-height:0;margin-right:10px;accent-color:var(--calm)}
.zustimmung{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink);
  border:1px solid var(--line);border-radius:11px;background:#fff;padding:15px 16px;margin-bottom:16px}
.zustimmung input{width:auto;min-height:0;margin-top:4px;accent-color:var(--calm)}

/* Karten und Tabellen */
.box,.karte{background:#fff;border:1px solid var(--line);border-radius:18px}
.karte{padding:22px;margin-bottom:16px}
.karte h3{margin:0 0 8px;font-size:20px}
.box-schatten{box-shadow:var(--schatten)}
/* min(…, 100%): Auf einem 320-Pixel-Telefon ist die Spalte schmaler als
   280 Pixel. Eine feste Mindestbreite schob das Raster dann ueber den Rand,
   und die ganze Seite liess sich seitlich verschieben. */
.raster{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.raster-eng{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
table{width:100%;border-collapse:collapse;margin:8px 0 16px;font-size:15px}
th,td{padding:10px 4px;text-align:right;border-bottom:1px solid var(--line)}
th:first-child,td:first-child{text-align:left}
thead th{font-size:12px;color:var(--ink-soft);font-weight:500;text-transform:uppercase;letter-spacing:.06em}
tr.summe td{font-weight:600;border-bottom:2px solid var(--ink)}
/* Zweispaltige Tabellen mit langem Text (Unterlagen) werden auf dem Telefon
   zu Bloecken: Bezeichnung oben, Erklaerung darunter. Nebeneinander blieben
   fuer die Erklaerung keine 150 Pixel. */
/* Sehr schmale Telefone (320 bis 420 Pixel): Dreispaltige Tabellen mit
   gesperrten Grossbuchstaben im Kopf waren breiter als der Bildschirm. Kopf
   ohne Sperrung, etwas kleinere Ziffern, weniger Innenabstand -- dann passt
   "Ausgleichswert" neben "850,40 mtl.". */
@media (max-width:420px){
  table{font-size:13.5px}
  thead th{letter-spacing:0;font-size:11px;hyphens:auto;-webkit-hyphens:auto}
  th,td{padding:9px 3px}
}
@media (max-width:560px){
  table.stapel,table.stapel tbody,table.stapel tr,table.stapel td{display:block;width:auto!important}
  table.stapel tr{border-bottom:1px solid var(--line);padding:12px 0}
  table.stapel td{border:0;padding:2px 0;text-align:left}
}

ul{margin:0 0 14px;padding-left:20px}
li{margin-bottom:7px}
.hinweis{border-left:3px solid var(--calm);padding:2px 0 2px 14px;margin:16px 0;
  color:var(--ink-soft);font-size:14px}
/* Der Kaufaufruf im Textfluss. Abgesetzt, aber nicht schreiend: Die Flaeche
   ist dieselbe wie bei den Vertrauenshinweisen, die Linie links nimmt die
   Primaerfarbe auf. Kein Rot, kein Rahmen, der nach Werbebanner aussieht. */
.angebot{background:var(--calm-soft);border-left:3px solid var(--calm);
  border-radius:0 16px 16px 0;padding:26px 28px;margin:32px 0 8px}
.angebot h3{margin:0 0 10px;font-size:23px}
.angebot p{margin:0 0 12px}
.angebot p:last-child{margin-bottom:0}
.angebot-zeile{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:20px}
@media (max-width:560px){
  .angebot{padding:22px;border-radius:0 12px 12px 0}
  .angebot-zeile .cta{width:100%}
}

.warnkarte{background:var(--alarm-soft);border:1px solid #F0D3C6;border-radius:18px;
  padding:18px;margin:16px 0;color:var(--alarm-text)}
.warnkarte h3{color:var(--alarm);margin:0 0 6px;font-size:16px}
.warnkarte p{margin:0;font-size:14px;line-height:1.55}

/* Herkunft einer Angabe. Das eingebaute details-Element klappt ohne
   JavaScript auf -- passend zu der Regel, dass es hier keins gibt. */
.quelle{margin:0 0 9px;font-size:14px}
.quelle summary{color:var(--calm);cursor:pointer;list-style:none;display:inline-block;
  border-bottom:1px dotted var(--calm);padding-bottom:1px}
.quelle summary::-webkit-details-marker{display:none}
.quelle summary::before{content:"?";display:inline-block;width:15px;height:15px;line-height:15px;
  text-align:center;border:1px solid var(--calm);border-radius:50%;font-size:11px;margin-right:6px}
.quelle[open] summary{margin-bottom:6px}
.quelle p{color:var(--ink-soft);line-height:1.55;margin:0 0 4px;padding-left:21px}

/* Preis. Eine Zahl, kein Streichpreis: siehe Invariante 2.5. */
.preis{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:8px 0 4px}
.preis .betrag{font-family:var(--display);font-size:52px;line-height:1}
.preiszeile{font-size:15px;color:var(--ink-soft);line-height:1.4}

/* Der Fortsetzungscode wird abgeschrieben oder markiert -- deshalb gross,
   mit festem Zeichenabstand und Platz zwischen den Gruppen. */
.fortsetzungscode{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:20px;letter-spacing:.06em;background:var(--calm-soft);
  /* Nur an den Bindestrichen umbrechen, nicht mitten in einer Gruppe --
     der Code wird abgeschrieben, und eine zerrissene Gruppe ist eine
     Fehlerquelle. */
  overflow-wrap:break-word;word-break:normal;
  border-radius:10px;padding:14px 16px;margin:0 0 12px;user-select:all}

/* Ganzbreite Baender brechen aus der Huelle aus. */
.band{margin:0 calc(50% - 50vw);padding:64px max(24px,6vw);width:100vw}
.band > .inhalt{max-width:1180px;margin:0 auto}
.band-dunkel{background:var(--ink);color:var(--paper)}
.band-dunkel h2{color:var(--paper)}
.band-dunkel .lede{color:#C6CFCA}
.band-dunkel p{color:#AEB8B3}
.band-ruhig{background:var(--calm);color:#F4F8F6}
.band-ruhig h2{color:#F4F8F6}
.band-ruhig p{color:#C9DED7}
.zitat{border-top:2px solid var(--alarm);padding-top:16px}
.zitat .satz{font-family:var(--display);font-size:22px;line-height:1.3;margin-bottom:8px}
/* Die zweispaltigen Raster der Landingpage und der Kasse.
   Sie stehen hier und nicht als style-Attribut in der Ansicht: Gegen ein
   Inline-Raster kommt keine Media Query an, und auf dem Telefon wird aus
   zwei Spalten sonst eine Quetschung. */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;
  align-items:center;padding:40px 0 72px}
.preisraster{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:56px;
  align-items:start;padding:72px 0}
.kassenraster{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,370px);gap:48px;
  align-items:start;margin-top:40px}
@media (max-width:860px){
  .hero,.preisraster,.kassenraster{grid-template-columns:1fr;gap:36px}
  .hero{padding-bottom:48px}
  .preisraster{padding:48px 0}
  /* Auf dem Telefon zuerst der Text, das Bild danach. */
  .hero figure{order:2}
}

/* Ergebnis: Hauptspalte und mitlaufende Angebotsspalte. Unter 900 Pixel
   fallen sie untereinander, das Angebot rutscht dann hinter die Zahlen --
   dort gehoert es auch hin, wenn kein Platz daneben ist. */
.ergebnisraster{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr);
  gap:52px;align-items:start;margin-top:32px}
.ergebnisspalte{position:sticky;top:24px}
@media (max-width:900px){
  /* minmax(0,1fr) statt 1fr: sonst bestimmt die breiteste Tabelle die
     Spaltenbreite, und die ganze Seite laesst sich seitlich schieben. Was
     dann noch zu breit ist, scrollt in seiner Spalte statt die Seite. */
  .ergebnisraster{grid-template-columns:minmax(0,1fr);gap:32px}
  .ergebnisraster > div{min-width:0;overflow-x:auto}
  .ergebnisspalte{position:static}
}
/* Was auf dem Telefon oben stehen muss, weil die Seitenspalte dort erst nach
   zehn Bildschirmhoehen kommt: PDF, Weitermachen-Code, Inhalt. */
/* display nur in der Media Query: Eine spaetere Regel mit display (etwa
   grid fuer die Sprungleiste) haette das display:none sonst ueberschrieben,
   und die Leiste stand auch auf dem Desktop. */
.nur-mobil{display:none}
@media (max-width:900px){
  .nur-mobil{display:block}
  .sprungleiste.nur-mobil{display:grid}
}
.sprungleiste{margin:18px 0 8px;gap:10px}
.sprungleiste .cta-2{width:100%}
.inhaltsliste{border:1px solid var(--line);border-radius:12px;background:#fff;padding:0 16px}
.inhaltsliste summary{cursor:pointer;padding:13px 0;color:var(--calm);font-size:15px}
.inhaltsliste ol{margin:0 0 12px;padding-left:20px}
.inhaltsliste li{margin:0}
.inhaltsliste a{display:block;padding:8px 0;text-decoration:none}
.zahlenband{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:32px;
  padding:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.zahlenband .zahl{font-family:var(--display);font-size:42px;line-height:1}

footer{margin-top:56px;padding:26px max(20px,4vw);border-top:1px solid var(--line);
  color:var(--ink-soft);font-size:13px}
footer .inhalt{max-width:1180px;margin:0 auto}
footer a{color:var(--ink-soft)}
footer nav{display:flex;flex-wrap:wrap;gap:16px;margin:10px 0}

/* Tippflaechen auf dem Telefon: mindestens 44 Pixel hoch, wie Apple und
   Google es empfehlen. Die Ansicht aendert sich kaum -- die Flaeche um den
   Text waechst, nicht der Text. */
@media (pointer:coarse),(max-width:760px){
  .notaus{min-height:44px;padding:10px 18px}
  footer nav{gap:4px 18px}
  footer nav a,footer button{display:inline-block;padding:11px 0}
  .schrittzahl a,.cta-3,a.zurueck{display:inline-block;padding-top:11px;padding-bottom:11px}
  .quelle summary{padding:10px 0 6px}
  .erklaerung summary,.inhaltsliste summary{padding:12px 0}
  .nebenweg{display:inline-block;padding:10px 0}
  .zustimmung input,.wahl input{width:20px;height:20px}
  .kekshinweis button{min-height:44px}
}
@media (max-width:760px){
  .band{padding-top:48px;padding-bottom:48px}
  header nav{display:none}
  h2{margin-top:36px}
}
@media (max-width:560px){
  /* Der Kaufknopf in der Kopfzeile waere hier die dritte Zeile ueber dem
     Hero, der denselben Knopf schon zeigt. Der Notausgang bleibt. */
  header .cta.schmal{display:none}
  .huelle.weit{padding-left:20px;padding-right:20px}
  /* Der Zahlknopf und das Weiter im Fragebogen ueber die volle Breite: mit
     dem Daumen erreichbar, nicht rechts in der Ecke. */
  .kaufknopf{width:100%!important}
  .schrittfuss .cta{flex:1 1 auto}
}

/* ---- Probesterben ----------------------------------------------------
 * Ergaenzungen fuer das Gegenstueck. Die Palette bleibt; es kommen dazu:
 * der Link "Gerade zu viel?", die Krisenzeile, die Ampeln, der Zeitstrahl
 * und die Gegenueberstellung von Regel und Angabe. Keine Bilder von
 * Friedhoefen, Kerzen, Saergen, Krankenhausbetten (Konzept, 10.3) -- die
 * Seite kommt ganz ohne Fotos aus. */

.zuviel{display:inline-flex;align-items:center;border:1px solid var(--line);background:#fff;
  color:var(--ink);border-radius:999px;padding:8px 16px;font-size:14px;text-decoration:none}
.zuviel:hover{border-color:var(--calm);color:var(--calm)}

.krisenzeile{background:var(--calm-soft);color:var(--ink);border-radius:12px;padding:12px 16px;
  margin:0 0 18px;font-size:14.5px;line-height:1.55;max-width:none}
.krisenzeile a{white-space:nowrap}

.ampeln{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));margin:22px 0}
.ampelkarte{border-radius:18px;padding:22px;border:1px solid var(--line);background:#fff}
.ampelkarte h3{margin:6px 0 6px;font-size:21px}
.ampelkarte p{margin:0;color:var(--ink-soft);font-size:15px}
.ampel{display:inline-flex;align-items:center;gap:8px;font-size:13px;padding:5px 12px;border-radius:999px}
.ampel::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.ampel-rot{background:var(--alarm-soft);color:var(--alarm)}
.ampel-gelb{background:#FBF1D9;color:#8A6410}
.ampel-gruen{background:var(--calm-soft);color:var(--calm)}

.gegenueber{display:grid;gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;margin:14px 0}
.gegenueber > div{padding:18px 22px}
.gegenueber > div + div{border-top:1px solid var(--line)}
.gegenueber .etikett{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.gegenueber .angabe{background:var(--paper-2)}
.gegenueber .schritt{color:var(--ink-soft);font-size:15px}

.zeitstrahl{border-left:2px solid var(--line);margin:14px 0 30px 6px;padding-left:22px}
.zeitstrahl .phase{position:relative;margin-bottom:22px}
.zeitstrahl .phase::before{content:"";position:absolute;left:-30px;top:6px;width:14px;height:14px;
  border-radius:50%;background:var(--paper);border:2px solid var(--calm)}
.zeitstrahl .phase h4{font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.05em;
  text-transform:uppercase;margin:0 0 4px;color:var(--calm)}
.zeitstrahl .phase > p{color:var(--ink-soft);font-size:15px;margin:0 0 10px}
.regelkarte{border:1px solid var(--line);border-radius:14px;background:#fff;padding:14px 16px;margin:0 0 10px}
.regelkarte.praxis{border-style:dashed}
.regelkarte .kopf{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;
  color:var(--ink-soft);margin-bottom:6px}
.regelkarte .kopf > span:first-child{flex:1;min-width:0}
/* Das Gewicht macht die Sortierung sichtbar: Wer die Liste von oben liest,
   sieht, warum sie in dieser Reihenfolge steht. */
.gewicht{flex:none;font-size:11.5px;letter-spacing:.03em;padding:2px 9px;border-radius:999px;white-space:nowrap}
.gewicht.g3{background:var(--alarm-soft);color:var(--alarm)}
.gewicht.g2{background:#FBF1D9;color:#8A6410}
.gewicht.g1{background:var(--paper-2);color:var(--ink-soft)}
.gewicht.hinweis-pille{background:var(--calm-soft);color:var(--calm)}

/* Die drei Zahlen ganz oben: wie viele Luecken, wie steht es je Szenario,
   was ist der Nachlass wert. Mehr gehoert nicht in eine Uebersicht. */
.kennzahlen{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  margin:24px 0 8px}
.kennzahl{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;
  display:flex;flex-direction:column;gap:8px}
.kennzahl .wert{font-family:var(--display);font-size:34px;line-height:1;color:var(--calm)}
.kennzahl .was{font-size:13.5px;color:var(--ink-soft);line-height:1.4}
.kennzahl .ampel{align-self:flex-start}

/* Ankerleiste: der Report ist lang, und wer ihn ein zweites Mal oeffnet,
   sucht meist genau einen Teil. */
.ankerleiste{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 26px}
.ankerleiste a{font-size:14px;text-decoration:none;color:var(--ink-soft);background:var(--paper-2);
  border-radius:999px;padding:7px 15px;border:1px solid transparent}
.ankerleiste a:hover{border-color:var(--calm);color:var(--calm)}

section#luecken,section#zeitstrahl,section#nachlass{scroll-margin-top:18px}
section#ordner{scroll-margin-top:18px}
#luecken .regelkarte{margin-bottom:12px}
.regelkarte p{margin:0 0 6px}
.regelkarte .angabe{font-style:italic}
.regelkarte .schritt{color:var(--ink-soft);font-size:14.5px;margin:0}
.ungeprueft{display:inline-block;font-size:12px;color:var(--alarm);border:1px solid #F0D3C6;border-radius:999px;padding:1px 8px;margin-left:6px}

.szenarien{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.szenario{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px}
.szenario h3{margin-top:0}
.szenario .annahme{font-family:var(--display);font-size:24px;line-height:1.25;margin:0 0 12px}
.szenario .wirklich{color:var(--ink-soft)}

/* Die Strecke durch den Fragebogen: welcher Abschnitt, was liegt hinter
   mir, was kommt. Erledigte Abschnitte sind anklickbar, kommende nicht --
   sonst landet man in Fragen, die von noch fehlenden Antworten abhaengen. */
.strecke{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;list-style:none;padding:0}
.strecke .etappe{display:inline-flex;flex:none;align-items:center;gap:7px;padding:6px 13px 6px 7px;border-radius:999px;
  font-size:13.5px;background:var(--paper-2);color:var(--ink-soft);text-decoration:none;
  border:1px solid transparent;white-space:nowrap;line-height:1.2}
.strecke .ziffer{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:#fff;color:var(--ink-soft);font-size:12px;font-variant-numeric:tabular-nums}
.strecke .etappe.aktiv{background:var(--calm);color:#FBF7F1}
.strecke .etappe.aktiv .ziffer{background:rgba(255,255,255,.22);color:#FBF7F1}
.strecke a.etappe.fertig{background:var(--calm-soft);color:var(--calm);border-color:#CFE3DB}
.strecke a.etappe.fertig:hover{border-color:var(--calm)}
.strecke a.etappe.fertig .ziffer{background:#fff;color:var(--calm)}
@media (max-width:640px){
  /* Auf dem Telefon nur Ziffern -- sechs Namen brauchen dort vier Zeilen. */
  .strecke .name{display:none}
  .strecke .etappe{padding:6px}
  .strecke .etappe.aktiv .name{display:inline}
  .strecke .etappe.aktiv{padding-right:13px}
}

/* Eine Frage ist ein Block, keine Zeile. Der Rahmen kommt erst beim
   Daraufzeigen -- ruhig im Normalzustand, greifbar beim Ausfuellen. */
/* Der Innenabstand steht immer, auch ohne Rahmen: Sonst springt der Text
   beim Daraufzeigen um achtzehn Pixel zur Seite. */
.frageblock{border:1px solid transparent;border-bottom-color:var(--line);border-radius:16px;
  padding:20px 18px;margin:0 -18px;scroll-margin-top:16px;
  transition:background .12s ease,border-color .12s ease,box-shadow .12s ease}
.frageblock:first-of-type{border-top-color:var(--line);border-radius:0 0 16px 16px}
.frageblock:hover,.frageblock:focus-within{border-color:var(--line);
  background:#fff;box-shadow:0 2px 12px rgba(22,33,29,.04)}
.frageblock fieldset{border:0;margin:0;padding:0;min-width:0}
.frageblock legend{display:flex;gap:10px;align-items:baseline;font-size:17.5px;font-weight:500;padding:0;
  margin-bottom:10px;line-height:1.35}
.frageblock legend .nr{flex:none;width:24px;height:24px;border-radius:50%;background:var(--paper-2);
  color:var(--ink-soft);font-size:12.5px;font-weight:400;display:inline-flex;align-items:center;
  justify-content:center;font-variant-numeric:tabular-nums;transform:translateY(-1px)}
.frageblock .leise{margin:-4px 0 12px}
.frageblock .klein{margin:8px 0 0}
.frageblock .optionen{gap:9px}
.frageblock .opt{min-height:44px;padding:10px 18px;font-size:15.5px}
.frageblock .opt:has(input:checked){box-shadow:inset 0 0 0 1px var(--calm)}
/* Das Eurofeld: so breit, wie eine Zahl es braucht, und keinen Millimeter
   mehr. Das Waehrungszeichen steht im Feld, die Ziffern stehen rechts --
   wie auf einem Kontoauszug, und untereinander vergleichbar. */
.eurofeld{display:inline-flex;align-items:center;gap:8px;width:auto;max-width:100%;
  border:1px solid var(--line);border-radius:12px;background:#fff;padding:0 14px;height:52px;
  margin:2px 0 0;cursor:text;transition:border-color .12s ease,box-shadow .12s ease}
.eurofeld .zeichen{flex:none;font-size:17px;color:var(--ink-soft)}
.eurofeld input{width:9ch;min-height:0;padding:0;border:0;background:transparent;
  font:400 19px/1 var(--sans);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.eurofeld input::placeholder{color:#C4BCAE}
.eurofeld input:focus{outline:none}
.eurofeld:hover{border-color:var(--ink-soft)}
.eurofeld:focus-within{border-color:var(--calm);box-shadow:0 0 0 3px var(--calm-soft)}
.feld-fehler .eurofeld{border-color:var(--alarm)}
@media (max-width:560px){
  /* Auf dem Telefon die volle Breite: Ein schmales Feld neben viel Weissraum
     trifft der Daumen schlechter als eines, das die Zeile fuellt. */
  .eurofeld{display:flex;width:100%}
  .eurofeld input{width:100%;flex:1}
}
.frageblock.feld-fehler{border-color:var(--alarm);background:var(--alarm-soft)}
.frageblock.feld-fehler legend .nr{background:var(--alarm);color:#fff}
/* Fragen, die erst durch eine Antwort dazugekommen sind. */
.frageblock.dazu{border-color:var(--calm);background:var(--calm-soft)}
.frageblock.dazu legend .nr{background:var(--calm);color:#FBF7F1}

/* Die Fussleiste bleibt unten stehen, auch auf dem Telefon. */
.fussleiste{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  justify-content:space-between;margin-top:26px;padding:14px 0;background:linear-gradient(to bottom,
  rgba(251,247,241,0) 0%,var(--paper) 28%);z-index:5}
.fussleiste .cta{margin-left:auto}
@media (max-width:560px){
  .fussleiste .cta{width:100%;order:-1}
  .fussleiste .cta-2{width:100%}
  /* Ohne negativen Aussenrand: auf dem Telefon ist kein Platz dafuer. */
  .frageblock{margin:0;padding:18px 14px}
}

/* ---- Kasse -------------------------------------------------------------
 * Links der Weg zur Zahlung, rechts, was man dafuer bekommt. Auf dem
 * Telefon wandert die Karte mit dem Preis nach oben: Wer dort scrollt,
 * soll nicht erst zwei Bestaetigungen lesen, um den Preis zu sehen. */
.kassenspalte{display:grid;gap:26px;align-content:start}
.kassenteil h2{font-size:21px;margin:0 0 12px}
.kassenteil .optionen .opt{min-height:46px;padding:11px 20px;font-size:16px}
.kassenteil .klein{margin:12px 0 0}
.kassenfuss{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.kassenkarte{align-self:start;position:sticky;top:20px}
.kassenkarte .preis{margin:0}
.kassenkarte .preis .betrag{font-size:46px}

/* Die Bestaetigungen sind Kaestchen mit Text, kein Kleingedrucktes. Fehlt
   eine, wird genau sie rot -- nicht das ganze Formular. */
.zustimmung{align-items:flex-start;gap:12px;padding:16px 18px;border-radius:14px;line-height:1.5;
  transition:border-color .12s ease,background .12s ease}
.zustimmung:hover{border-color:var(--ink-soft)}
.zustimmung:has(input:checked){border-color:var(--calm);background:var(--calm-soft)}
.zustimmung input{width:20px;height:20px;flex:none}
.zustimmung.fehlt{border-color:var(--alarm);background:var(--alarm-soft)}

/* Leistungen mit Haken statt Aufzaehlungspunkten: Sie sind eine Zusage,
   keine Liste. */
ul.haken{list-style:none;padding:0;margin:0;display:grid;gap:9px}
ul.haken li{position:relative;padding-left:26px;font-size:15px;line-height:1.45}
ul.haken li::before{content:"✓";position:absolute;left:0;top:0;color:var(--calm);font-size:14px}
ol.ablauf{margin:0;padding-left:20px;display:grid;gap:7px;font-size:15px;color:var(--ink-soft)}
ol.ablauf li{margin:0}

@media (max-width:860px){
  .kassenkarte{position:static;order:-1}
  .kassenraster{gap:28px}
}
@media (max-width:560px){
  .kassenfuss .kaufknopf{width:100%}
  .kassenkarte .preis .betrag{font-size:40px}
}

/* ---- Der kostenlose Test ------------------------------------------------
 * Zwoelf Fragen, eine je Bildschirm. Die Punktreihe zeigt, wo man steht --
 * genauer als ein Balken, und ohne Prozentzahl, die niemand braucht. */
.punkte{display:flex;gap:6px;list-style:none;padding:0;margin:0 0 30px}
.punkte li{width:7px;height:7px;border-radius:50%;background:var(--paper-2)}
.punkte li.fertig{background:var(--calm)}
.punkte li.hier{background:var(--calm);box-shadow:0 0 0 3px var(--calm-soft)}

h1.frage{font-size:clamp(26px,3.6vw,38px);max-width:22ch;margin-bottom:10px}

/* Antworten als Zeilen: leichter zu lesen und zu treffen als Pillen, wenn
   die Texte ungleich lang sind. */
.antworten{display:grid;gap:10px;margin-top:6px;max-width:620px}
.antworten .wahl{margin:0;padding:17px 20px;font-size:16.5px;line-height:1.35;border-radius:14px;
  transition:border-color .12s ease,background .12s ease,transform .08s ease}
.antworten .wahl:hover{transform:translateY(-1px)}
.opt.gewaehlt,.wahl.gewaehlt{border-color:var(--calm);background:var(--calm-soft);color:var(--calm)}
.opt.gewaehlt::after,.wahl.gewaehlt::after{content:"✓";margin-left:8px;color:var(--calm)}

/* Ergebnis des Tests: die Ampelkarte traegt die Farbe ihres Zustands als
   schmalen Streifen, damit die beiden Szenarien auf einen Blick
   unterscheidbar sind. */
.ampelkarte{border-left-width:4px;border-left-style:solid;border-left-color:var(--line)}
.ampelkarte.a-rot{border-left-color:var(--alarm)}
.ampelkarte.a-gelb{border-left-color:#D9A62A}
.ampelkarte.a-gruen{border-left-color:var(--calm)}
.ampelkarte .zahl{font-family:var(--display);font-size:26px;color:var(--ink);margin:2px 0 6px}
.weitere{background:var(--paper-2);border-radius:14px;padding:16px 18px;margin:18px 0 0;font-size:15.5px}

/* ---- Wissen ------------------------------------------------------------ */
.artikelliste{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  margin:24px 0}
.artikelkarte{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:22px 24px;text-decoration:none;color:var(--ink);
  transition:border-color .12s ease,transform .1s ease,box-shadow .12s ease}
.artikelkarte:hover{border-color:var(--calm);transform:translateY(-2px);box-shadow:0 6px 20px rgba(22,33,29,.06);color:var(--ink)}
.artikelkarte h2{font-size:21px;margin:0;line-height:1.25}
.artikelkarte p{margin:0;color:var(--ink-soft);font-size:15px;line-height:1.5;flex:1}
.artikelkarte .weiterlesen{color:var(--calm);font-size:14.5px}
.artikelkarte .weiterlesen::after{content:" →"}

.brotkrumen{font-size:14px;margin:0 0 18px}
/* Lesetexte schmaler als der Rest: ueber 70 Zeichen verliert das Auge die
   Zeile. */
.artikel{max-width:68ch}
.artikel h2{font-size:26px;margin:34px 0 10px}
.artikel h3{font-size:19px;margin:24px 0 6px}
.artikel p,.artikel li{font-size:16.5px;line-height:1.65}
.artikel ul{margin-bottom:18px}
.artikel .lede{font-size:18.5px}

/* ---- Hilfe -------------------------------------------------------------
 * Die Nummern sind Knoepfe, keine Fliesstextzahlen: Wer diese Seite
 * oeffnet, soll waehlen koennen, nicht lesen muessen. */
.notruf{background:var(--calm-soft);border-radius:20px;padding:26px 28px;margin:22px 0}
.notruf.dringend{background:var(--alarm-soft)}
.notruf h2{margin:0 0 8px;font-size:24px}
.notruf p{color:var(--ink);margin:0 0 14px}
.nummern{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));margin:16px 0 10px}
.nummer{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid transparent;
  border-radius:14px;padding:14px 18px;text-decoration:none;color:var(--ink)}
.nummer span{font-size:13px;color:var(--ink-soft)}
.nummer strong{font-family:var(--display);font-size:25px;font-weight:400;letter-spacing:.01em;color:var(--ink)}
.nummer:hover{border-color:var(--calm);color:var(--ink)}
.notruf.dringend .nummer:hover{border-color:var(--alarm)}
.notruf .klein{margin:0}

/* ---- Rechtstexte und Abschlussseiten ----------------------------------- */
.artikel.recht h2{font-size:22px;margin:30px 0 8px}
/* Markdown macht aus "##" ein h3: in den Rechtstexten ist das die
   Gliederungsebene, sie braucht Gewicht. */
.artikel.recht h3{font-size:21px;margin:30px 0 8px;color:var(--calm)}
.artikel.recht table{font-size:15px}
.rechtsnavi{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.rechtsnavi a{font-size:14.5px;text-decoration:none;color:var(--ink-soft);background:var(--paper-2);
  border-radius:999px;padding:8px 16px}
.rechtsnavi a:hover{color:var(--calm)}

/* Der Haken nach der Zahlung: gross genug, um ohne Lesen zu wirken. */
.fertigkopf{display:flex;gap:18px;align-items:flex-start;margin-bottom:8px}
.fertigkopf h1{margin:0 0 6px}
.fertigkopf .lede{margin:0}
.fertigkopf .haken{flex:none;width:52px;height:52px;border-radius:50%;background:var(--calm);
  color:#FBF7F1;display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;
  margin-top:4px}
@media (max-width:560px){
  .fertigkopf{gap:14px}
  .fertigkopf .haken{width:42px;height:42px;font-size:21px}
}

/* ---- Fehlerseiten und Loeschen -----------------------------------------
 * Mittig, ruhig, mit Wegen statt einer Sackgasse. Das Zeichen oben ersetzt
 * keine Aussage, es gibt der Seite nur einen Anker fuers Auge. */
.fehlerseite{max-width:640px;margin:26px auto 0;text-align:center}
.fehlerseite h1{font-size:clamp(28px,4vw,40px)}
.fehlerseite .lede{margin-left:auto;margin-right:auto}
.fehlerseite .zeichen{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;
  border-radius:50%;background:var(--paper-2);color:var(--ink-soft);font-size:26px;line-height:1;margin-bottom:18px}
.fehlerseite .zeichen.gut{background:var(--calm);color:#FBF7F1}
.fehlerseite .karte{margin:22px 0}
.fehlerseite .karte h3{margin-top:0}
.fehlerseite ul{margin:0 0 12px;padding-left:20px}
.fehlerseite .cta-paar{margin-top:22px}

/* Die vier Wege auf der 404: keine Linkliste, sondern Ziele mit Beschreibung. */
.wege{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  margin:26px 0 8px;text-align:left}
.weg{display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;text-decoration:none;color:var(--ink)}
.weg strong{font-weight:500}
.weg span{font-size:14px;color:var(--ink-soft)}
.weg:hover{border-color:var(--calm);color:var(--ink)}

/* ---- Vorschau-Anmeldung -------------------------------------------------
 * Schmale, mittige Spalte. Das Auge sitzt im Feld, nicht daneben: Es gehoert
 * zum Passwort und soll nicht wie ein zweites Bedienelement wirken. */
.anmeldung{max-width:420px;margin:40px auto 0}
.anmeldung h1{font-size:clamp(28px,4vw,36px)}
.anmeldung .karte{margin:18px 0;text-align:left}
.anmeldung .karte h3{margin-top:0}
.anmeldeformular{display:grid;gap:18px;margin:26px 0 18px}
.anmeldeformular .feld label{font-size:13.5px;margin-bottom:6px}
.anmeldeformular .cta{width:100%}

.passwortfeld{position:relative;display:flex;align-items:center}
.passwortfeld input{flex:1;padding-right:52px}
.auge{position:absolute;right:6px;width:40px;height:40px;display:flex;align-items:center;
  justify-content:center;border:0;border-radius:10px;background:transparent;color:var(--ink-soft);
  cursor:pointer;padding:0}
.auge:hover{color:var(--calm);background:var(--paper-2)}
.auge:focus-visible{outline:2px solid var(--calm);outline-offset:1px}
.auge[aria-pressed="true"]{color:var(--calm)}