/* zahnplus24.de — Funnel-Strecke „Zahnschutz-Check" (funnel.html)
   Commit: a0758da

   Diese Datei gehört NUR dem Funnel. Die Firmenseite hat seite.css
   (test/firmenseite.test.js hält beide Richtungen fest). Seit dem
   15.09.2026 spricht der Funnel dieselbe Gestaltung wie die Firmenseite –
   Richtung „Porzellan" B2 (Spec docs/superpowers/specs/
   2026-09-15-firmenseite-neu-design.md, Abschnitt „Aussehen"): Mintgrau
   und Petrol, nur Figtree, feste Skala mit sechs Stufen, dieselbe
   Wortmarke, derselbe Fuß, dieselben Knöpfe und Felder. Wer von der
   Startseite kommt, soll keine zweite Website betreten.

   DIE TOKEN SIND GESPIEGELT, NICHT GETEILT: Sie stehen hier mit denselben
   Namen und Werten wie in seite.css. Der Funnel darf seite.css nicht laden
   (Test), und ein gemeinsames drittes Stylesheet hätte beide Seiten bei
   jeder Änderung zugleich getroffen. Wer in seite.css einen Token ändert,
   zieht ihn hier nach.

   Nach jeder Änderung das ?v= von style.css in funnel.html hochzählen.

   Kontraste (WCAG 2.2 AA, gerechnet mit scratchpad-Skript kontrast-ci.py):
   Petrol auf Grund 11,6 : 1, auf Glasur 12,9 : 1 · Sekundärtext 5,7 / 6,4
   · Fehler 6,6 / 7,3 · Knopf Glasur auf Petrol 12,9, gesperrt auf
   Petrol-mittel 6,0 · Feld- und Kartenrand #6E8A85 3,25 gegen Grund,
   3,6 gegen Glasur · Platzhalter 5,0 · Schrittlabel 5,4.

   Schrift: Figtree, variabel, latin, SIL OFL 1.1 (fonts/figtree-OFL.txt).
   Selbst gehostet, kein Abruf bei Dritten. */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/figtree.woff2") format("woff2");
}

:root {
  /* Gespiegelt aus seite.css */
  --grund: #EAF1EE;
  --glasur: #FAFCFB;
  --petrol: #0F3533;
  --petrol-tief: #1D4A46;
  --petrol-mittel: #2E6B64;
  --petrol-hell: #8DB8AF;
  --text: #0F3533;
  --text-2: #4A625F;
  --text-lead: #243F3C;
  --linie: #CFDDD8;
  --rahmen: #6E8A85;
  --fehler: #9B2C2C;
  --auf-petrol: #FAFCFB;
  --auf-petrol-2: #B9CFCA;

  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-h1: clamp(1.875rem, 1.35rem + 2.2vw, 3rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
  --fs-lead: 1.125rem;
  --fs-text: 1rem;
  --fs-klein: .875rem;
  --fs-marke: 1.375rem;
  --fs-plakette: .75rem;

  --rand: clamp(1rem, 4vw, 3rem);
  --breite: 76rem;

  /* Nur Funnel: gewählte Antwortkarte (Petrol darauf 10,8 : 1), OK-Grün
     nach bestätigtem HLR-Befund (5,0 : 1 auf Glasur), Schatten der Karten
     wie .formular/.karte der Firmenseite. */
  --gewaehlt: #DDEAE5;
  --ok: #2E7D32;
  --schatten: 0 2px 4px rgb(15 53 51 / .04), 0 18px 36px -18px rgb(46 107 100 / .28), 0 48px 90px -40px rgb(15 53 51 / .30);
  --uebergang: 160ms cubic-bezier(.2, 0, 0, 1);

  /* Kopf der Strecke: Zeile mit der Wortmarke + Fortschritt (6 px) +
     Luft darunter (12 px). Aus diesen Zahlen rechnen Bühnenhöhe und
     scroll-padding – eine Zahl zu klein, und der Kopf verdeckt Felder
     (WCAG 2.4.11) oder es bleibt dauerhaft Überlauf. */
  --kopf-h: 4rem;
  --balken-h: 6px;
  --balken-luft: 12px;
  --kopf-gesamt: calc(var(--kopf-h) + var(--balken-h) + var(--balken-luft) + 1px);

  color-scheme: light;
}
@media (min-width: 860px) {
  :root { --kopf-h: 4.5rem; }
}
@media (min-width: 1280px) {
  :root { --fs-lead: 1.1875rem; --fs-text: 1.0625rem; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
h1, h2, h3, p { margin: 0; }
button, input, textarea, select { font-family: inherit; }
a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; border-radius: 6px; }

/* Beim Stufenwechsel springt der Blick nach oben, statt weich
   hinterherzugleiten – Gleiten liefe gegen die Eintrittsbewegung.
   Der Kopf klebt oben: Sprungziele und per Tab oder iOS-Pfeil
   angesteuerte Felder landen darunter, nicht dahinter. */
html.strecke-lauf { scroll-behavior: auto; scroll-padding-top: calc(var(--kopf-gesamt) + 1rem); }

/* Genau eine Seitenüberschrift, sichtbar nur für Vorleseprogramme. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.huelle { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }

/* ---------- Wortmarke (wie seite.css) ---------- */

.marke { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; color: var(--petrol); }
.marke-wort { font: 700 var(--fs-marke)/1 var(--sans); letter-spacing: -.03em; }
.marke-zahl {
  font: 700 var(--fs-plakette)/1 var(--sans);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  background: var(--petrol);
  color: var(--auf-petrol);
  padding: .3em .42em .28em;
  border-radius: .4em;
  margin-left: .4rem;
  transform: translateY(-.4em);
}

/* ---------- Kopf der Strecke ----------
   Derselbe helle Kopf wie auf der Firmenseite, aber ohne Navigation und
   ohne „Beratung anfragen": Wer schon in der Strecke ist, braucht keinen
   Ausgang in ein zweites Formular. Undurchsichtig, damit beim Scrollen
   nichts durchscheint. */
.strecke-kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--grund);
  box-shadow: 0 1px 0 var(--linie);
}
.kopf-innen { display: flex; align-items: center; min-height: var(--kopf-h); }

/* Sechs Abschnitte statt eines gleitenden Balkens: die Strecke hat sechs
   Bildschirme, keine Prozente. Petrol = erledigt, halb Petrol = hier
   stehen Sie, Petrol-hell = kommt noch.
   GRUPPIERT 4 + 2, passend zur Zeile über der Frage: „Frage n von 4"
   zählt die ersten vier, „Fast geschafft" und „Letzter Schritt" sind der
   abgesetzte Abschluss. Der Balken ist aria-hidden und nur Ergänzung –
   die Information trägt die Zeile über der Frage. */
.fortschritt {
  display: flex;
  gap: 4px;
  height: var(--balken-h);
  margin-bottom: var(--balken-luft);
}
.fortschritt span {
  flex: 1;
  border-radius: 3px;
  background: var(--petrol-hell);                       /* 1,9 : 1 gegen Grund */
  transition: background-color var(--uebergang);
}
.fortschritt span:nth-child(5) { margin-left: 14px; }
.fortschritt span.erledigt { background: var(--petrol-mittel); }   /* 5,4 : 1 */
.fortschritt span.jetzt { background: linear-gradient(90deg, var(--petrol) 50%, var(--petrol-hell) 50%); }
/* Danke-Bild: funnel.js setzt alle sechs auf erledigt – dann ganz Petrol. */
.strecke-seite:has(#danke:not([hidden])) .fortschritt span { background: var(--petrol); }
/* Privat-Schlussbild: kein Fortschritt, denn es geht nicht weiter. Die
   Höhe bleibt (visibility), damit die Seite nicht springt. */
.strecke-seite:has(#privat-ende:not([hidden])) .fortschritt { visibility: hidden; }

/* ---------- Bühne ---------- */

.strecke-buehne {
  min-height: calc(100vh - var(--kopf-gesamt));
  min-height: calc(100svh - var(--kopf-gesamt));
  padding-block: clamp(1.5rem, 5vh, 4rem) clamp(3rem, 8vh, 6rem);
  /* Die Eintrittsbewegung einer Stufe (translateX 20 px) darf keinen
     waagerechten Scrollbalken aufblitzen lassen. */
  overflow-x: hidden;
  overflow-x: clip;
}
.strecke, .ohne-strecke {
  max-width: calc(44rem + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Der Ausweichabsatz. Sichtbar im Markup, entfernt von funnel.js beim
   Start – so deckt er abgeschaltetes JavaScript UND ein Skript ab, das nie
   ankommt. Er erscheint erst nach 4 s: vorher blitzte er vor dem
   deferred funnel.js auf. Reines CSS, kein Inline-Skript. */
.ohne-strecke { animation: ohne-strecke-zeigen 0s linear 4s both; }
@keyframes ohne-strecke-zeigen { from { visibility: hidden; } to { visibility: visible; } }
.ohne-strecke-titel {
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.ohne-strecke p { color: var(--text-2); margin-bottom: .9rem; }
.ohne-strecke p:has(.taste) { margin-block: 1.5rem; }

/* Ohne JavaScript führt die Strecke nirgendwohin – dann bleibt der
   Ausweichabsatz stehen und die tote Strecke bleibt weg. */
html:not(.js) .strecke { display: none; }

/* ---------- Eine Stufe ---------- */

.stufe[hidden] { display: none; }

/* „Frage 3 von 4 · Behandlung": der Fortschritt mit Kontext, direkt über
   der Frage, wo der Blick ohnehin liegt. Bewusst KEIN Flex mit gap – die
   Leerzeichen stehen im Text, sonst kopiert man „von 4·Behandlung". */
.stufen-schritt {
  margin-bottom: .75rem;
  font-size: var(--fs-klein);
  font-weight: 600;
  line-height: 1.4;
}
.schritt-zahl { color: var(--text-2); }
.schritt-trenner { color: var(--text-2); }
.schritt-label { color: var(--petrol-mittel); }

.frage {
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.025em;
  text-wrap: balance;
  color: var(--petrol);
}
.stufe .frage:focus { outline: none; }
.stufen-unterzeile {
  margin-top: 1rem;
  max-width: 36rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-lead);
}
.stufen-notiz {
  margin-top: 1.25rem;
  padding-left: .9rem;
  border-left: 2px solid var(--linie);
  font-size: var(--fs-klein);
  line-height: 1.5;
  color: var(--text-2);
  max-width: 36rem;
}

/* Fehlermeldungen: dieselbe Form wie .fehler auf der Firmenseite – fett,
   Fehlerrot, mit rundem „!" davor, damit Rot nie nur eine Farbe ist.
   Leer = unsichtbar (die Feldmeldungen füllt funnel.js). */
.stufen-hinweis, .feld-meldung {
  position: relative;
  margin-top: .9rem;
  padding-left: 1.55rem;
  font-size: var(--fs-text);
  font-weight: 600;
  line-height: 1.45;
  color: var(--fehler);
}
/* Absolut statt Flex: .sende-fehler enthält einen Link mitten im Satz,
   und Flex hätte Text und Link in eigene Spalten zerlegt. */
.stufen-hinweis::before, .feld-meldung::before {
  content: "!";
  position: absolute;
  left: 0;
  top: .17rem;
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--fehler);
  color: var(--glasur);
  font-size: var(--fs-klein);
  line-height: 1;
}
.stufen-hinweis[hidden] { display: none; }
.feld-meldung { margin-top: 0; }
.feld-meldung:empty { display: none; }
.sende-fehler a { color: var(--fehler); text-decoration: underline; }

/* ---------- Antwortkarten ----------
   Glasur auf Grund, Rand #6E8A85 (3,25 : 1), Radius wie die Felder der
   Firmenseite eine Stufe größer. Die Eingabe liegt unsichtbar über der
   ganzen Karte: der Daumen trifft immer, die Tastatur bleibt nativ.
   Auswahlring statt Pluszeichen – gewählt gefüllt mit Häkchen.
   Für JEDE Antwort dieselbe Darstellung: nichts daran hängt am Wert
   (Art. 9 – Stufen 2 und 3 verhalten sich für alle Antworten gleich). */
.wahlen { display: grid; gap: .75rem; margin-top: 1.75rem; }
.wahl {
  position: relative;
  display: grid;
  grid-template-columns: 1.625rem 1fr;
  align-items: center;
  gap: .9rem;
  min-height: 4rem;
  padding: .85rem 1.15rem;
  background: var(--glasur);
  border: 1.5px solid var(--rahmen);
  border-radius: 16px;
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.3;
  color: var(--petrol);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--uebergang), border-color var(--uebergang), background-color var(--uebergang), box-shadow var(--uebergang);
}
.wahl input {
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.wahl .wahl-mark {
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: var(--glasur);
  box-shadow: inset 0 0 0 2px var(--rahmen);            /* 3,6 : 1 auf Glasur */
  transition: background-color var(--uebergang), box-shadow var(--uebergang);
}
.wahl .wahl-mark::after {
  content: "";
  width: 11px;
  height: 6px;
  border: solid var(--auf-petrol);
  border-width: 0 0 2.5px 2.5px;
  transform: translateY(-1px) rotate(-45deg);
  opacity: 0;
}
@media (hover: hover) {
  .wahl:hover { border-color: var(--petrol-mittel); }
}
.wahl:has(input:focus-visible) { outline: 3px solid var(--petrol); outline-offset: 3px; }
/* Rücklage ohne :has(): Die Eingabe ist durchsichtig, das globale
   :focus-visible wäre unsichtbar – dann trägt der Ring den Fokus. */
.wahl input:focus-visible ~ .wahl-mark { outline: 3px solid var(--petrol); outline-offset: 2px; }
.wahl:has(input:checked) {
  border-color: var(--petrol);
  box-shadow: inset 0 0 0 1px var(--petrol);
  background: var(--gewaehlt);
}
.wahl input:checked ~ .wahl-mark { background: var(--petrol); box-shadow: none; }
.wahl input:checked ~ .wahl-mark::after { opacity: 1; }
.wahl:active { transform: scale(.985); }

/* ---------- Knöpfe (wie .knopf der Firmenseite) ---------- */

.taste {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3.5rem;
  padding: .7rem 1.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--petrol);
  color: var(--auf-petrol);
  font: 600 var(--fs-text)/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, transform var(--uebergang);
}
@media (hover: hover) {
  .taste:hover { background: var(--petrol-tief); color: var(--auf-petrol); text-decoration: none; }
}
.taste:active { transform: scale(.98); }
/* Gesperrt über aria-disabled statt disabled: behält den Fokus. Glasur auf
   Petrol-mittel hat 6,0 : 1 – der Zustandstext („Code wird gesendet …")
   bleibt lesbar, ohne Deckkraft-Trick. */
.taste[aria-disabled="true"], .taste[disabled] { background: var(--petrol-mittel); cursor: progress; transform: none; }

/* „Zurück" und die Textknöpfe: wie .textlink der Firmenseite – Petrol,
   fett, 44 px hoch. */
.zurueck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .25rem .25rem;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--petrol);
  font: 600 var(--fs-text)/1.2 var(--sans);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.zurueck::before { content: "←"; }
@media (hover: hover) {
  .zurueck:hover { text-decoration: underline; text-underline-offset: .2em; }
}
/* Knöpfe, die keine Zurück-Knöpfe sind, bekommen keinen Pfeil. */
.zurueck.ohne-pfeil::before { content: none; }
.textknopf { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; vertical-align: baseline; min-height: 2.75rem; }

.stufen-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
.stufen-fuss .taste { margin-left: auto; }

/* ---------- Geburtsdatum (Stufe 4) ---------- */

.feldreihe { display: grid; gap: .4rem; margin-top: 1.75rem; max-width: 18rem; }
.feldname { font-weight: 600; }
.feldhinweis { font-size: var(--fs-klein); line-height: 1.5; color: var(--text-2); }
.feldhinweis a { color: var(--petrol); }

/* Felder wie .eingabe der Firmenseite: Glasur, Rand #6E8A85 1,5 px,
   Radius 12, Fokus Petrol mit weichem Ring. 16 px und mehr verhindern das
   Hineinzoomen auf iOS. */
.strecke #geburtsdatum,
.strecke-formular input[type="text"],
.strecke-formular input[type="email"],
.strecke-formular input[type="tel"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 3.25rem;
  padding: calc(.75rem + .5px) calc(1rem + .5px);
  font: 400 max(1rem, var(--fs-text))/1.4 var(--sans);
  color: var(--text);
  background: var(--glasur);
  border: 1.5px solid var(--rahmen);
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.strecke #geburtsdatum { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.strecke input::placeholder { color: #5A726E; opacity: 1; }      /* 5,0 : 1 */
@media (hover: hover) {
  .strecke #geburtsdatum:hover,
  .strecke-formular input[type="text"]:hover,
  .strecke-formular input[type="email"]:hover,
  .strecke-formular input[type="tel"]:hover { border-color: var(--petrol-mittel); }
}
.strecke #geburtsdatum:focus-visible,
.strecke-formular input:focus-visible {
  outline: none;
  border-color: var(--petrol);
  box-shadow: 0 0 0 3px rgb(15 53 51 / .22);
}
/* Fehler am Feld: funnel.js setzt Klasse UND aria-invalid. */
.strecke #geburtsdatum[aria-invalid="true"],
.strecke-formular input.feld-fehler,
.strecke-formular input[aria-invalid="true"] {
  border-color: var(--fehler);
  border-width: 2px;
  padding: .75rem 1rem;
}
.strecke #geburtsdatum[aria-invalid="true"]:focus-visible,
.strecke-formular input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px rgb(155 44 44 / .22); }
/* Grün NUR nach bestätigtem HLR-Befund (funnel.js, wendeBefundAn) – nie
   für bloße Formatgültigkeit, das wäre ein leeres Versprechen. */
.strecke-formular input.feld-ok { border-color: var(--ok); border-width: 2px; padding: .75rem 1rem; }

/* ---------- Formular-Karte (Stufen 5 und 6) ----------
   Dieselbe Glasur-Karte wie das Anfrageformular der Firmenseite. */
.strecke-formular {
  display: grid;
  gap: 1.35rem;
  margin-top: 1.75rem;
  padding: clamp(1.25rem, 4vw, 2.25rem);
  background: var(--glasur);
  border-radius: 28px;
  box-shadow: var(--schatten);
}
.strecke-formular .feldblock { display: grid; gap: .4rem; }
.strecke-formular label:not(.einwilligung) { display: grid; gap: .4rem; font-weight: 600; }
.feldname-zeile { display: block; }

/* Vor- und Nachname nebeneinander; auf ganz schmalen Schirmen untereinander. */
.strecke-formular .feldblock.namen { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.strecke-formular .feldblock.namen .feld,
.strecke-formular .feldblock.plz-ort .feld { display: grid; gap: .4rem; align-content: start; min-width: 0; }

/* PLZ | Ort nebeneinander (PLZ schmal), Ortsauswahl darunter über die
   volle Breite. */
.strecke-formular .feldblock.plz-ort { grid-template-columns: minmax(6rem, 7.5rem) 1fr; gap: 1rem; }
.strecke-formular .feldblock.plz-ort .ort-auswahl { grid-column: 1 / -1; }
@media (max-width: 330px) { .strecke-formular .feldblock.plz-ort { grid-template-columns: 1fr; } }

/* Orts- und Straßenknöpfe: Pillen wie der Umschalter der Firmenseite. */
.ort-auswahl, .strasse-vorschlaege { display: flex; flex-wrap: wrap; gap: .5rem; }
.ort-auswahl[hidden], .strasse-vorschlaege[hidden] { display: none; }
.ort-knopf, .strasse-knopf {
  min-height: 2.75rem;
  padding: .45rem 1rem;
  font: 600 var(--fs-text)/1.25 var(--sans);
  color: var(--petrol);
  text-align: left;
  background: var(--glasur);
  border: 1.5px solid var(--rahmen);
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
@media (hover: hover) {
  .ort-knopf:hover, .strasse-knopf:hover { border-color: var(--petrol-mittel); background: var(--grund); }
}
.ort-knopf[aria-pressed="true"] { background: var(--petrol); border-color: var(--petrol); color: var(--auf-petrol); }

/* Stufe 5: Steht unter der Handynummer eine Fehlermeldung, tritt der
   Hinweis „Unter dieser Nummer ruft Sie Ihr Berater an." zurück – sonst
   stehen zwei Sätze übers Anrufen direkt untereinander. */
#fehler-telefon:not(:empty) + #telefon-hinweis { display: none; }

/* Rufnummern brechen nie mitten in der Nummer um („0171 / 1234567"). */
.strecke .nummer { white-space: nowrap; color: var(--petrol); font-weight: 600; }

/* ---------- Einwilligungen ----------
   Eine Karte wie die Einwilligung der Firmenseite: Grund-Fläche in der
   Glasur-Karte, gewählt mit Petrol-Rand. Das <label> füllt die Karte bis
   auf die Zeile „Mehr anzeigen", das <details> bleibt außerhalb
   des <label> (siehe funnel.html). Seit Fassung 2026-10-01 EIN Kästchen
   für alle drei Erklärungen; der WORTLAUT ist unverändert, die drei Sätze
   stehen als Aufzählung untereinander. Jede sichtbare Gestaltungsänderung
   verlangt einen neuen Lauf von funnel/scripts/fassung-screenshot.mjs.
   Nichts vorbelegt. Schrift seit Fassung 2026-10-02 in der Größe der
   Feldhinweise (--fs-klein, Julian 02.10.2026: „den Text kleiner"): nie
   KLEINER als der kleinste Text der Strecke – die Sätze, denen man
   zustimmen soll, sind kein Kleingedrucktes. */
.einwilligungen { display: grid; gap: .75rem; }
.strecke-formular .einwilligung-block {
  display: grid;
  background: var(--grund);
  border: 2px solid transparent;
  border-radius: 14px;
  transition: border-color var(--uebergang), background-color var(--uebergang);
}
.strecke-formular .einwilligung-block:has(input:checked) { border-color: var(--petrol); background: var(--gewaehlt); }
.strecke-formular .einwilligung-block.fehlt { border-color: var(--fehler); }
.strecke-formular .einwilligung {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
  padding: 1rem 1rem .25rem;
  font-size: var(--fs-klein);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.strecke-formular .einwilligung input {
  width: 1.375rem;
  height: 1.375rem;
  margin: .15rem 0 0;
  accent-color: var(--petrol);
  cursor: pointer;
}
.strecke-formular .einwilligung input:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; }
/* Die drei Sätze als Aufzählung: Jeder beginnt mit „Ich willige …", der
   Punkt davor macht sichtbar, dass es drei Erklärungen sind, nicht ein
   langer Absatz. Spans statt <ul>: im <label> ist nur Fließinhalt erlaubt. */
.einwilligung-saetze { display: grid; gap: .5rem; }
.einwilligung-saetze > span { position: relative; padding-left: 1rem; }
.einwilligung-saetze > span::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--petrol);
  font-weight: 700;
}

/* SEIT FASSUNG 2026-10-02 ANGESCHNITTEN (Julian, 02.10.2026: „so eine Wand
   voll Text"): Solange „Mehr anzeigen" zu ist, zeigt die Karte vier Zeilen
   der drei Sätze und blendet nach unten aus; aufgeklappt fällt die Kappung.
   Drei Bedingungen, ein Test hält sie fest (funnel/test/pruefung.test.js,
   „angeschnittene Saetze"):
   - am [open] des <details>: aufgeklappt ist ALLES zu lesen;
   - in @supports selector(:has(*)): Ohne :has() ließe sich die Kappung nie
     aufheben – dort steht der Text lieber ganz da als nie;
   - an [data-fassung="2026-10-02"]: Die Gestaltung gehört zur Fassung. Der
     Gestaltungsnachweis von 2026-10-01 zeigt die Sätze ganz; Variante B
     (/funnel2, eigene Kennung) nutzt dieselbe Datei und bleibt unberührt.
     Eine neue Fassung ist ohne Eintrag hier NICHT angeschnitten.
   Der volle Text bleibt im Dokument: Screenreader lesen alle drei Sätze. */
@supports selector(:has(*)) {
  [data-fassung="2026-10-02"] .einwilligung-block:not(:has(.einwilligung-mehr[open])) .einwilligung-saetze {
    max-height: 6em; /* vier Zeilen à 1,5 */
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent);
    mask-image: linear-gradient(to bottom, #000 50%, transparent);
  }
}

/* Eingerückt auf die Textspalte (1 rem Karte + 1,5 rem Kästchen + 0,85 rem
   Spalte); 44 px Tippziel mit Luft zum Label, damit ein zitternder Finger
   nicht das Kästchen trifft. */
.einwilligung-mehr { padding: 0 1rem .75rem 3.35rem; font-size: var(--fs-klein); line-height: 1.5; }
.einwilligung-mehr summary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  margin-top: .35rem;
  padding: .25rem 0;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--petrol);
  border-radius: 6px;
}
.einwilligung-mehr summary::-webkit-details-marker { display: none; }
.einwilligung-mehr summary::before { content: "+"; font-weight: 700; width: .75rem; line-height: 1; }
.einwilligung-mehr[open] summary::before { content: "–"; }
.einwilligung-mehr[open] .mehr-zu,
.einwilligung-mehr:not([open]) .mehr-auf { display: none; }
@media (hover: hover) {
  .einwilligung-mehr summary:hover { text-decoration: underline; text-underline-offset: .2em; }
}
.einwilligung-mehr p { color: var(--text-2); padding: .1rem 0 .25rem; }
/* Immer sichtbar, nie im Aufklapptext: dass man zurückkann, gehört vor die
   Entscheidung. */
.einwilligung-widerruf { margin-top: .25rem; font-size: var(--fs-klein); line-height: 1.5; color: var(--text-2); }
.einwilligung-widerruf a { color: var(--petrol); }

.strecke-formular .stufen-fuss { margin-top: .5rem; }
/* Der Sammelhinweis über dem Knopf behält seinen Platz, wenn funnel.js ihn
   wieder verbirgt (visibility statt display). Grund: Jede Feldänderung
   blendet ihn aus (`change` auf der Strecke), und `change` feuert beim
   Verlassen des Feldes – genau beim Antippen des Knopfes. Klappte der
   Hinweis dabei zusammen, rutschte der Knopf zwischen Drücken und
   Loslassen weg (oder die Seite, wenn sie unten anschlug), und der Tipp
   ging verloren. Vor dem ersten Fehler ist der Absatz leer und damit
   0 px hoch. Der Sendefehler ist davon ausgenommen – er trägt schon im
   Markup Text und hätte sonst dauerhaft Platz belegt. */
.strecke-formular > .stufen-hinweis:not(.sende-fehler)[hidden],
.stufe[data-schritt="4"] .stufen-hinweis[hidden] { display: block; visibility: hidden; }
.strecke-formular > .stufen-hinweis[hidden]:empty { display: none; }

/* ---------- Stufe 6: Code ---------- */

.strecke-formular #code-feld {
  max-width: 18rem;
  min-height: 3.75rem;
  font-size: 1.625rem;
  letter-spacing: .3em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.strecke-formular #code-feld::placeholder { font-size: var(--fs-text); letter-spacing: 0; }
/* „Code erneut senden": während der Wartezeit eine lesbare Auskunft
   (Sekundärtext 6,4 : 1 auf Glasur, ohne Deckkraft-Trick), danach ein
   erkennbarer Link. */
.strecke #code-neu { text-decoration: underline; text-underline-offset: .2em; }
.strecke #code-neu[aria-disabled="true"] { color: var(--text-2); font-weight: 400; text-decoration: none; cursor: default; }
.strecke-formular .code-warte { margin: -.85rem 0 0; text-align: center; }
.strecke-formular .code-warte:empty { display: none; }

/* ---------- Schlussbilder ---------- */

.abschluss .stufen-unterzeile { max-width: 40rem; }
/* Danke „So geht es weiter": Glasur-Karte, nummernlose Punkte im Stil der
   Ablauf-Kreise der Firmenseite. Die Sätze in Petrol: das ist die
   Handlungsanweisung („bitte rangehen"), kein Kleingedrucktes. Jeder Satz
   steht in EINEM <span> (funnel.html), sonst würde ein loses <strong> zur
   eigenen Rasterzelle. */
.spiegel {
  display: grid;
  gap: 1.1rem;
  margin: 1.75rem 0 1.5rem;
  padding: clamp(1.25rem, 4vw, 2.25rem);
  background: var(--glasur);
  border-radius: 28px;
  box-shadow: var(--schatten);
}
.spiegel p[hidden] { display: none; }
.spiegel p {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
  color: var(--petrol);
}
.spiegel .wahl-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--petrol);
  background: var(--glasur);
  color: var(--petrol);
  font-weight: 700;
  line-height: 1;
}
.spiegel p > span:not(.wahl-mark) { min-width: 0; padding-top: .2rem; }

/* ---------- Absenderzeile (Stufen 1–4) ----------
   Wer ist das? Der Betreiber aus dem Impressum, schlicht. Nur auf den
   Fragen 1–4 – ab Stufe 5 nennen die Einwilligungen die Firma selbst. */
.strecke-absender {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
  max-width: 36rem;
  font-size: var(--fs-klein);
  line-height: 1.5;
  color: var(--text-2);
}
.strecke-absender a { color: var(--text-2); display: inline-block; padding-block: .75rem; margin-block: -.75rem; }   /* 44 px Tippziel */
.strecke-absender a:hover { color: var(--petrol); }
.strecke:has(> .stufe[data-schritt="5"]:not([hidden])) > .strecke-absender,
.strecke:has(> .stufe[data-schritt="6"]:not([hidden])) > .strecke-absender,
.strecke:has(> .abschluss:not([hidden])) > .strecke-absender { display: none; }

/* ---------- Fuß (wie seite.css) ---------- */

.fuss { background: var(--petrol); color: var(--auf-petrol); padding-block: 3.5rem 2.5rem; }
.fuss a { color: var(--auf-petrol); }
.fuss :focus-visible { outline-color: var(--auf-petrol); }
.fuss-innen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.fuss .marke { color: var(--auf-petrol); }
.fuss .marke-zahl { background: var(--auf-petrol); color: var(--petrol); }
.fuss-links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.fuss-links a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; font-weight: 600; }
.fuss-links a:hover { text-decoration: underline; }
.fuss-ende { margin-top: 2.5rem; font-size: var(--fs-klein); line-height: 1.5; color: var(--auf-petrol-2); }

/* ---------- Übergänge: kurz und richtungsweisend ---------- */

@media (prefers-reduced-motion: no-preference) {
  .strecke[data-richtung="vor"] .stufe.eintritt { animation: stufe-vor 260ms cubic-bezier(.2, 0, 0, 1) both; }
  .strecke[data-richtung="zurueck"] .stufe.eintritt { animation: stufe-zurueck 260ms cubic-bezier(.2, 0, 0, 1) both; }
}
@keyframes stufe-vor { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes stufe-zurueck { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .wahl, .taste, .einwilligung-block, .ort-knopf, .strasse-knopf { transition: none; }
  .wahl:active, .taste:active { transform: none; }
}

/* ---------- Schmale Schirme ---------- */

@media (max-width: 719.98px) {
  /* Der Weiterknopf gehört unter den Daumen, „Zurück" darunter. */
  .stufen-fuss { flex-direction: column-reverse; align-items: stretch; gap: .5rem; }
  .stufen-fuss .taste { margin-left: 0; width: 100%; }
  .feldreihe { max-width: none; }
  .strecke-formular { border-radius: 24px; }
  .spiegel { border-radius: 24px; }
  .strecke-formular #code-feld { max-width: none; }
}

/* Honigtopf auf Stufe 5 (Paket 3): ausserhalb des Bildschirms statt
   display:none – manche Automaten ueberspringen unsichtbare Felder, aber
   nicht verschobene. Dieselbe Regel wie .pflichtfrei in seite.css. */
.pflichtfrei { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }