/* Der Stil beider Seiten der Website — Startseite und die Seite nach dem
 * Absenden. Eine Datei und nicht zweimal derselbe Block: doppelt gepflegt
 * läuft er innerhalb einer Woche auseinander.
 *
 * Vom eigenen Server, wie die Schriften. Keine Verbindung zu einem Dritten,
 * kein Cookie — deshalb braucht die Seite kein Einwilligungsbanner.
 */
:root{
  /* Farben aus der App, nicht aus dem Entwurf — damit Seite und Anwendung
     nebeneinander nicht wie zwei Produkte aussehen. Das Rot war in beiden
     ohnehin dasselbe: C8102E, die Farbe des Zeichens 283. */
  --blau:#0B3B72; --blau-tief:#082B54; --blau-hell:#E7ECF6;
  --rot:#C8102E; --gruen:#1E7A4C;
  --papier:#F7F6F3; --beton:#E9E7E2; --weiss:#fff;
  --asphalt:#17181A; --grau:#6B6E73; --linie:#D3D0CA;

  /* Der Maßstab stammt aus dem Entwurf: eine sehr große Überschrift, eine
     sehr große Zahl, sonst wenig Stufen. */
  --text:"Barlow", system-ui, -apple-system, sans-serif;
  --schmal:"Barlow Condensed", "Arial Narrow", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
  --h1:clamp(2.4rem, 8vw, 4.6rem);
  --h2:clamp(1.7rem, 4.4vw, 2.7rem);
  --h3:clamp(1.05rem, 2.4vw, 1.3rem);
  --leib:clamp(1rem, 1.5vw, 1.13rem);
  --klein:.85rem;
  --zahl:clamp(3rem, 10vw, 6.2rem);
  --max:1120px;
  --sektion:clamp(56px, 9vw, 120px);
  --rand:clamp(16px, 4vw, 40px);
  --radius:3px;

  /* Abstände. Diese Stufen wurden an elf Stellen benutzt und waren nie
     definiert — `var(--a4)` ohne Definition und ohne Ersatzwert ist ungültig,
     die Eigenschaft fällt ersatzlos weg. Sichtbar war das unter anderem am
     Aufmacher: `.sofort` sollte `margin-top:var(--a6)` haben, das Formular saß
     also ohne Abstand unter dem Fließtext, genau an der Stelle, auf die es auf
     dieser Seite ankommt.

     Gefunden beim Nachsehen der Anordnung, nicht von einem Test — ein Stil,
     der stillschweigend nichts tut, sieht im Quelltext richtig aus. Der Test
     dazu steht jetzt in tests/test_website.py. */
  --a1:4px; --a2:8px; --a3:14px; --a4:22px; --a5:32px; --a6:44px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--papier); color:var(--asphalt);
  font:var(--leib)/1.55 var(--text); -webkit-font-smoothing:antialiased}
h1,h2,h3,p,dl,dd{margin:0}
h1,h2,h3{font-family:var(--schmal); font-weight:600; letter-spacing:0}
h1{font-size:var(--h1); line-height:1.0; text-transform:uppercase}
h2{font-size:var(--h2); line-height:1.05; text-transform:uppercase}
h3{font-size:var(--h3); line-height:1.2}
a{color:var(--blau); text-underline-offset:2px}
a:hover{color:var(--rot)}
.bahn{max-width:var(--max); margin:0 auto; padding-left:var(--rand); padding-right:var(--rand)}
.marke-text{font-family:var(--mono); font-size:.68rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--grau)}
.augenbraue{font-family:var(--mono); font-size:var(--klein); letter-spacing:.06em;
  color:var(--blau); margin-bottom:18px}

/* --- Kopf --- */
.kopf{display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:var(--max); margin:0 auto; padding:18px var(--rand)}
.wortmarke{display:flex; align-items:center; gap:10px; font-weight:600}
.beta{border:1px solid var(--linie); border-radius:2px; padding:2px 6px}

/* --- Aufmacher --- */
/* Nur oben und unten: `padding` als Kurzform würde den seitlichen Rand von
   `.bahn` mitlöschen, und der Aufmacher klebte am Bildschirmrand. */
.aufmacher{display:grid; gap:clamp(32px,5vw,64px); align-items:center;
  grid-template-columns:1fr;
  padding-top:clamp(16px,4vw,48px); padding-bottom:var(--sektion)}
@media (min-width:860px){ .aufmacher{grid-template-columns:1fr 1fr} }
.vorsatz{font-size:clamp(1.05rem,2vw,1.28rem); color:var(--grau); max-width:36ch;
  margin:20px 0 28px}
.knoepfe{display:flex; flex-wrap:wrap; gap:12px}
.knopf{display:inline-block; padding:15px 26px; background:var(--blau); color:#fff;
  text-decoration:none; border-radius:var(--radius); font-weight:600;
  min-height:50px; font-size:1rem}
.knopf:hover{background:var(--blau-tief); color:#fff}
.knopf.leise{background:none; color:var(--blau); border:1px solid var(--linie)}
.knopf.leise:hover{border-color:var(--blau); background:var(--weiss)}
.hinweisklein{font-size:var(--klein); color:var(--grau); margin-top:14px}

/* Das abstrahierte Straßennetz aus dem Entwurf. */
/* Der blaue Rahmen aus dem Entwurf, darin der echte Bildschirm. Das Bild wird
   unten angeschnitten: Ein Telefon, das aus dem Rahmen läuft, wirkt wie ein
   Ausschnitt aus etwas Größerem — ein vollständig eingepasstes wirkt wie ein
   Prospekt. */
/* Der Aufmacher: das blaue Feld mit dem Telefon, darunter eine Zeile, die
   sagt, was man ansieht. Die Zeile gehört nicht ins Feld — das Telefon ragt
   unten heraus, sie wäre angeschnitten. */
.aufmacher{margin:0}
.aufmacher figcaption{margin-top:var(--a3); text-align:center;
  font-size:var(--klein); color:var(--grau)}

.netz{position:relative; background:var(--blau); border-radius:var(--radius);
  overflow:hidden; display:flex; justify-content:center;
  padding:clamp(20px,4vw,32px) clamp(20px,4vw,32px) 0}
.netz img{width:min(272px,72%); height:auto; display:block;
  border-radius:16px; box-shadow:0 14px 34px rgba(0,0,0,.3);
  margin-bottom:-6%}
/* Eine Fußleiste und keine schwebende Karte: Sonst schaut die
   Navigationsleiste der App darunter hervor, und es sieht aus, als läge etwas
   Falsches übereinander. So endet das Telefon sichtbar dahinter. */
.standkarte{position:absolute; left:0; right:0; bottom:0;
  background:var(--papier); padding:12px clamp(16px,3vw,24px);
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  flex-wrap:wrap}
.standkarte .wert{font-family:var(--mono); font-size:1.05rem; color:var(--blau-tief);
  font-weight:500}
@keyframes zoneAuf{from{opacity:0; transform:scale(.9)} to{opacity:.95; transform:scale(1)}}
@keyframes ringPuls{0%,100%{opacity:.55} 50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}

/* --- Das Problem: der Ablauf, wie er wirklich passiert --- */
ol.ablauf{list-style:none; counter-reset:a; margin:0; padding:0; display:grid;
  gap:clamp(20px,3vw,32px); grid-template-columns:1fr}
@media (min-width:760px){ ol.ablauf{grid-template-columns:repeat(3,1fr)} }
ol.ablauf li{counter-increment:a; position:relative; padding-top:22px;
  border-top:2px solid var(--linie)}
ol.ablauf li::before{content:counter(a); position:absolute; top:-14px; left:0;
  width:26px; height:26px; border-radius:50%; background:var(--beton);
  border:2px solid var(--linie); color:var(--grau);
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  display:flex; align-items:center; justify-content:center}
ol.ablauf li.teuer{border-top-color:var(--rot)}
ol.ablauf li.teuer::before{border-color:var(--rot); color:var(--rot)}
ol.ablauf li.teuer h3{color:var(--rot)}
ol.ablauf p{color:var(--grau); margin-top:8px}
.rettung{margin-top:clamp(32px,5vw,52px); background:var(--weiss);
  border-left:4px solid var(--blau); border-radius:var(--radius);
  padding:clamp(20px,4vw,28px); max-width:62ch}
.rettung p{margin:0}

/* --- Zahlenband --- */
.zahlen{background:var(--blau); color:#fff; padding:var(--sektion) 0}
.zahlen h2{max-width:22ch; margin-bottom:clamp(28px,5vw,52px)}
/* Eine Überschrift mit Unterzeile gibt ihren unteren Abstand ab — sonst
   müsste man ihn mit einem negativen Rand zurückholen, und das rutscht bei
   der nächsten Schriftgröße wieder auseinander. */
.zahlen h2.mit_unterzeile{margin-bottom:var(--a4)}
.zahlen .unterzeile{color:#BFCDE8; max-width:50ch;
  margin:0 0 clamp(28px,5vw,52px)}
.zahlen .gitter{display:grid; gap:clamp(28px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.zahl{font-family:var(--schmal); font-size:var(--zahl); line-height:.92;
  font-weight:700; letter-spacing:-.01em}
.zahlen .kennzahl{border-top:1px solid #3A5C9C; padding-top:20px}
.zahlen .kennzahl.rot{border-top-color:var(--rot)}
.zahlen p.dazu{margin-top:14px; color:#BFCDE8; max-width:28ch}
.zahlen .beleg{display:block; margin-top:10px; font-family:var(--mono);
  font-size:.74rem; color:#AEC2E0}

/* --- Schritte --- */
.schritte{display:grid; gap:clamp(24px,4vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.schritte .nr{font-family:var(--mono); color:var(--rot); font-size:var(--klein);
  margin-bottom:12px}
.schritte p{color:var(--grau); margin-top:8px}

/* --- Die App --- */
.app-teil{background:var(--beton); padding:var(--sektion) 0}
.app-gitter{display:grid; gap:clamp(32px,5vw,64px); align-items:center;
  grid-template-columns:1fr}
@media (min-width:860px){ .app-gitter{grid-template-columns:1fr 1fr} }
.schirmbild{margin:0; text-align:center}
.schirmbild img{width:100%; max-width:280px; height:auto; border-radius:16px;
  box-shadow:0 14px 34px rgba(0,0,0,.16)}
.schirmbild figcaption{margin-top:var(--a4); font-size:var(--klein);
  color:var(--grau); max-width:34ch; margin-left:auto; margin-right:auto}
.merkmale{display:grid; gap:18px; margin-top:var(--a6)}
.merkmal{border-top:1px solid var(--linie); padding-top:16px}
.merkmal b{font-family:var(--schmal); font-size:1.05rem; text-transform:uppercase;
  display:block; margin-bottom:4px}
.merkmal span{color:var(--grau); font-size:.95rem}

/* --- Herkunft --- */
.herkunft{display:grid; gap:clamp(28px,5vw,64px); align-items:start;
  grid-template-columns:1fr}
@media (min-width:800px){ .herkunft{grid-template-columns:1fr 1fr} }
dl.tabelle{border-top:1px solid var(--linie); font-size:var(--klein); margin-top:18px}
dl.tabelle > div{display:flex; justify-content:space-between; gap:16px;
  padding:12px 0; border-bottom:1px solid var(--linie)}
dl.tabelle dt{color:var(--grau)}
dl.tabelle dd{text-align:right; font-family:var(--mono)}

/* --- Stufen --- */
.stufen{display:grid; gap:var(--radius); grid-template-columns:1fr; gap:20px}
@media (min-width:640px){ .stufen{grid-template-columns:1fr 1fr} }
.stufe{background:var(--weiss); border:1px solid var(--linie);
  border-radius:var(--radius); padding:clamp(20px,3vw,28px)}
.stufe.hervor{border:2px solid var(--blau)}
.stufe .preis{font-family:var(--schmal); font-size:2.4rem; font-weight:700;
  color:var(--blau); line-height:1; margin:10px 0 14px}
.stufe .preis small{font-family:var(--text); font-size:.95rem; font-weight:400;
  color:var(--grau)}
.stufe ul{margin:0; padding-left:1.1em; color:var(--grau); font-size:.95rem}
.stufe li{margin-bottom:6px}

/* Nur Eingabefelder. Hieß bis zum 18.08.2026 „feld“ — und weil die
   Zahlenspalten im blauen Band denselben Namen trugen, hat dieser Stil sie
   hell gefärbt und die weißen Zahlen darin unsichtbar gemacht. Ein Name für
   zwei Dinge, dieselbe Falle wie data-abo in der App. */
.eingabe{padding:13px 15px; background:var(--papier); border:1px solid var(--linie);
  border-radius:var(--radius); font:inherit; min-height:48px; min-width:0}
.eingabe:focus{outline:2px solid var(--blau); outline-offset:-1px}
.paar{display:grid; gap:12px; grid-template-columns:1fr}
@media (min-width:480px){ .paar{grid-template-columns:1fr 1fr} }
.wahl{display:flex; align-items:center; gap:8px; border:1px solid var(--linie);
  border-radius:var(--radius); padding:11px 16px; cursor:pointer; min-height:44px}
.wahl:hover{border-color:var(--blau)}
.wahl input{accent-color:var(--blau)}
/* --- Grenzen --- */
.grenzen{background:var(--asphalt); color:var(--papier); padding:var(--sektion) 0}
.grenzen h2{max-width:26ch; margin-bottom:clamp(24px,4vw,44px)}
.grenzen .gitter{display:grid; gap:clamp(22px,4vw,40px); color:#C3C8CF;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grenzen p{border-top:1px solid #454B53; padding-top:18px}
.grenzen strong{color:var(--papier); font-weight:600}

/* --- Fragen --- */
details{border-bottom:1px solid var(--linie); padding:18px 0}
summary{font-weight:600; display:flex; justify-content:space-between; gap:16px;
  cursor:pointer; list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--rot); font-family:var(--mono)}
details[open] summary::after{content:"–"}
details p{color:var(--grau); margin-top:12px; max-width:62ch}

/* --- Fuß --- */
footer{border-top:1px solid var(--linie); padding:36px var(--rand) 48px;
  font-size:var(--klein); color:var(--grau)}
footer .gitter{max-width:var(--max); margin:0 auto; display:grid; gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
footer a{display:block; text-decoration:none; margin-bottom:8px}

/* --------------------------------------------------------------------------
 * Was mit dem Umbau auf Wartelisten-Conversion dazugekommen ist
 * ------------------------------------------------------------------------ */

/* Das Formular im Aufmacher: ein Feld, ein Knopf, nebeneinander sobald Platz
   ist. Darunter die Belegzeile — sie steht bewusst unter dem Knopf und nicht
   darüber, damit zwischen Überschrift und Eingabe nichts steht. */
.sofort{display:grid; gap:12px; margin:var(--a6) 0 0; max-width:30rem}
.sofort .zeile{display:grid; gap:10px; grid-template-columns:1fr}
@media (min-width:420px){ .sofort .zeile{grid-template-columns:1fr auto} }
.sofort .knopf{margin:0; white-space:nowrap}
.sofort .einwilligung{display:flex; gap:10px; align-items:flex-start;
  font-size:.82rem; color:var(--grau); cursor:pointer; line-height:1.45}
.sofort .einwilligung input{margin-top:3px; width:18px; height:18px; flex:none;
  accent-color:var(--blau)}
.beleg_zeile{font-family:var(--mono); font-size:.76rem; color:var(--grau);
  margin:var(--a2) 0 0}
.beleg_zeile b{color:var(--asphalt); font-weight:500}

label{font-size:var(--klein); font-weight:600}
legend{font-size:var(--klein); font-weight:600; padding:0}
.feldhinweis{font-size:.78rem; color:var(--grau); margin:0}

/* Link teilen. */
.teilen{display:grid; gap:10px; grid-template-columns:1fr}
@media (min-width:520px){ .teilen{grid-template-columns:1fr auto} }
.teilen .knopf{margin:0; white-space:nowrap}

/* Vierte Kachel: das Band trägt jetzt vier Spalten. Bei 240px Mindestbreite
   bricht es von selbst auf zwei und dann auf eine um. */
.zahlen .zahl.schmal{font-size:clamp(2.2rem,7vw,4rem)}

/* Der Erfahrungsbericht. Ruhig gesetzt: kein Karussell, keine Sterne, keine
   Anführungszeichen-Grafik — nur Text, Herkunft und unsere Einordnung. */
.bericht{background:var(--weiss); border-left:4px solid var(--blau);
  border-radius:var(--radius); padding:clamp(22px,4vw,34px); max-width:60ch}
.bericht p{margin:0 0 var(--a3)}
.bericht .wer{font-size:var(--klein); color:var(--grau); margin:var(--a4) 0 0}
.bericht .einordnung{margin:var(--a4) 0 0; padding-top:var(--a4);
  border-top:1px solid var(--linie); font-size:var(--klein); color:var(--grau)}
.bericht .einordnung b{color:var(--asphalt); font-weight:600}

/* Die Klebeleiste auf schmalen Schirmen. Sie ist ausgeblendet, bis das Skript
   sie einschaltet — ohne Skript soll kein leerer Balken über der Seite liegen. */
.klebeleiste{position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--weiss); border-top:1px solid var(--linie);
  padding:10px var(--rand) calc(10px + env(safe-area-inset-bottom, 0px));
  display:none; gap:12px; align-items:center;
  box-shadow:0 -6px 20px rgba(0,0,0,.08)}
.klebeleiste.an{display:flex}
.klebeleiste p{margin:0; font-size:.8rem; color:var(--grau); flex:1 1 auto;
  min-width:0}
.klebeleiste .knopf{margin:0; min-height:44px; padding:11px 18px;
  font-size:.95rem; flex:0 0 auto}
@media (min-width:760px){ .klebeleiste, .klebeleiste.an{display:none} }

/* Für Vorleseprogramme sichtbar, für Augen nicht: Über einem Feld mit
   Platzhalter wäre die Beschriftung doppelt, ohne sie wüsste ein
   Screenreader nicht, was gemeint ist. */
.nur_vorlesen{position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}

/* Der beschreibende Untertitel im Kopf. Auf schmalen Schirmen weg — dort
   zählt jeder Millimeter über der Falz. */
.untertitel{display:none}
@media (min-width:720px){ .untertitel{display:inline; border:0; padding:0} }

/* Eine kurze Meldung: bestätigt, abgelehnt, schiefgegangen. Eigene Datei statt
   einer Zeichenkette im Python-Code — dort stand sie mit .format() und
   doppelten geschweiften Klammern für das CSS, und beim Umbau ist sie
   verlorengegangen, ohne dass ein Test es merkte. Die Fehlerpfade sind genau
   die, die niemand ansieht. */
.meldung{max-width:34rem; padding-top:clamp(48px,12vw,120px);
  padding-bottom:var(--sektion)}
.meldung h1{font-size:clamp(1.9rem,6vw,3rem); margin:var(--a4) 0 var(--a3)}
.meldung p{color:var(--grau); margin:0 0 var(--a3)}