/* ============================================================
   SARTU — der Bedarfsscheck, die transaktionale Seitengattung

   Reihenfolge der Einbindung: tokens.css, anwendung.css,
   sartu.css, diese Datei. **Keine zweite Tokendatei.** Jede
   Farbe, jeder Radius und jeder Abstand kommt aus `tokens.css`;
   eine geschriebene Zahl ausserhalb der vier erlaubten
   Haltepunkte ist ein Abgabefehler.

   ## Warum es diese Datei gibt

   `anwendung.css` ist trotz seines Namens die **gemeinsame
   Grundlage** — Grundschrift, Knopf, Feld, Fokus, Meldung; das
   Website-Layout bindet es ebenso ein. Bis zum 16.08.2026 war es
   fuer den Bedarfsscheck aber auch das **einzige** Bauteil-CSS,
   und damit trug er den Zuschnitt der internen Bildschirme.
   Daraus entstand auf `/briefing/ergebnis`:

   | Was | Gemessen |
   |---|---|
   | Textspalte | 46 rem, mittig, in sehr viel leerer Flaeche |
   | Preisblock | `--lime-soft` ueber die volle Spaltenbreite, rund 180.000 px² |
   | Fakten | drei weisse Rundpillen fuer `1 Seite`, `1 Korrekturrunde`, `Schutz S` |
   | Handlung | ein Knopf plus eine graue Knopfpille daneben |

   Die oeffentliche Obergrenze fuer eine zusammenhaengende
   Lime-Flaeche ist 40.000 px² (`SARTU_ENTSCHEIDUNGEN_OFFEN.md`
   §3, Farbsystem Fassung 3). Der Bildschirm entging der Messung
   nur, weil er ohne Sitzung umleitet.

   ## Die Regel, an der jede Form hier gemessen wird

   Pille = Handlung, Status, Filter, Kategorie.
   Karte  = eigenstaendiges Objekt, Auswahl, echter Vergleich.
   Lime   = Handlung, aktiver Zustand, kleine Markierung.
   Alles andere ist Linie, Abstand und Beschriftung.
   ============================================================ */

/* ---- Rahmen: Kopf, Flaeche, Fuss -------------------------- */

/* Der Fuss sitzt unten, auch wenn der Inhalt kurz ist.
   Gemessen am 16.08.2026 auf `/briefing/danke`: Die Seite traegt nach
   `17_SEITEN_SARTU.md` §2.7 **drei Saetze** — der Fuss stand danach auf halber
   Hoehe, darunter 450 px leere Flaeche. Das liest sich als abgebrochene Seite,
   obwohl sie vollstaendig ist. Der kurze Text ist Vorgabe, die Platzierung war
   es nicht. */
.funnelseite {
  background: var(--cream);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.funnelseite .funnelflaeche { flex: 1 0 auto; }

.funnelseite .kapazitaetsband {
  position: static;
  min-height: 44px;
  flex: 0 0 auto;
}

.funnelseite .kapazitaetsband__inhalt {
  width: min(var(--wrap), calc(100% - (2 * var(--gutter))));
}

/* Der Kopf traegt die Marke und **einen** Weg zurueck. Keine
   Navigation: Wer den Scheck begonnen hat, soll ihn zu Ende
   fuehren koennen, und sieben Punkte daneben sind sieben
   Ausstiege. */
.funnelkopf {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.funnelbrand {
  color: var(--ink);
  text-decoration: none;
}

.funnelkopf .text-link {
  color: var(--ink);
}

.funnelkopf__reihe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
}

.funnelflaeche {
  padding-top: var(--s-4);
  padding-bottom: var(--s-5);
}

/* Der Satzspiegel des Funnels. **Nicht `.schmal`** — das sind
   46 rem und damit die Insel, die den Befund ausgeloest hat.
   Die Bahn traegt `--wrap`; der Inhalt sitzt asymmetrisch
   darin, so wie auf der Startseite. */
.funnelbahn > * { max-width: 68ch; }

.funnelbahn h1 { max-width: 22ch; }

.funnel-start-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  max-width: min(920px, 100%);
  margin: var(--s-4) 0;
}

.funnel-start-images--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: min(720px, 100%);
}

.funnel-start-images figure {
  margin: 0;
}

.funnel-start-images img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 18px 40px rgba(17, 22, 19, .10);
}

/* ---- Fortschritt ----------------------------------------- */

/* Eine Zeile, eine Linie. **Keine fuenf Pillen** — der
   Fortschritt ist eine Angabe und keine Auswahl; runde Marken
   sehen aus wie eine Navigation, die es nicht gibt. */
.funnelschritt {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  max-width: none;
}

.funnelschritt__wort {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--label);
  white-space: nowrap;
}

.funnelschritt__balken {
  position: relative;
  flex: 1;
  height: 2px;
  background: var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
}

/* Der gefuellte Teil. Die Breite kommt als `data-anteil`, nicht
   als `style`: Die eigene CSP fuehrt `style-src 'self'` ohne
   `unsafe-inline`, ein Inline-Attribut waere wirkungslos. */
.funnelschritt__balken::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ink);
}

/* Sieben Schritte seit dem 17.09.2026 (vorher fuenf). Die Stufen stehen
   einzeln da, weil `calc()` den Schrittwert nicht kennt — er kommt als
   Attribut, und ein Inline-`style` waere nach der eigenen CSP wirkungslos. */
.funnelschritt__balken[data-anteil="1"]::before { width: 14.3%; }
.funnelschritt__balken[data-anteil="2"]::before { width: 28.6%; }
.funnelschritt__balken[data-anteil="3"]::before { width: 42.9%; }
.funnelschritt__balken[data-anteil="4"]::before { width: 57.1%; }
.funnelschritt__balken[data-anteil="5"]::before { width: 71.4%; }
.funnelschritt__balken[data-anteil="6"]::before { width: 85.7%; }
.funnelschritt__balken[data-anteil="7"]::before { width: 100%; }

/* ---- Fuss ------------------------------------------------- */

/* Dieselbe Form wie der Fuss der uebrigen Website — angeglichen am 20.09.2026:
   dunkles Band, Haarlinie, Zeile mit Angabe links und Preishinweis rechts.
   Der Inhalt bleibt kurz: Der Bedarfsscheck ist kein Ort, an dem jemand die
   Leistungsuebersicht sucht, und jeder zusaetzliche Verweis fuehrt aus dem
   Ablauf heraus. */
.funnelfuss {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  padding-bottom: var(--s-4);
  color: #98a299;
  background: var(--ink);
  font-size: var(--fs-xs);
}

.funnelfuss__reihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255,255,255,.12);
}

.funnelfuss p { margin: 0; }

.funnelfuss__hinweis { max-width: 62ch; }

.funnelfuss a {
  color: #d8ded8;
  text-decoration-color: rgba(255,255,255,.28);
}

.funnelfuss a:hover,
.funnelfuss a:focus-visible {
  color: var(--lime);
}

/* ============================================================
   Der Ergebnisbildschirm — §9.3
   ============================================================ */

/* Zweispaltig und asymmetrisch: links die Entscheidung, rechts
   das Datenblatt. `minmax(0, …)` und nicht `1.4fr .6fr` — ein
   Rasterelement hat `min-width: auto` und schrumpft sonst nicht
   unter die Mindestbreite seines Inhalts. Derselbe Fehler hatte
   am 13.08.2026 die Bildspalte des Aufmachers um ein Viertel
   verengt. */
.ergebnis {
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  gap: var(--s-5) var(--s-5);
  align-items: start;
}

.ergebnis__entscheidung > * { max-width: 62ch; }

.ergebnis__entscheidung h1 {
  font-size: var(--fs-xl);
  line-height: 1.02;
  letter-spacing: 0;
  font-weight: var(--fw-head);
  margin-top: 0;
}

.ergebnis__grund { margin-bottom: var(--s-1); }

/* Die Begruendung als Aufzaehlung mit Strich, nicht als Chipwand.
   Dieselbe Form wie die Vertrauenszeile der Startseite. */
.ergebnis__gruende {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  display: grid;
  gap: var(--s-1);
}

.ergebnis__gruende li {
  position: relative;
  padding-left: var(--s-3);
}

.ergebnis__gruende li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 10px;
  height: 2px;
  background: var(--ink);
  opacity: .34;
}

/* ---- Das Datenblatt --------------------------------------- */

/* Dunkel, weil es die Entscheidung traegt — nicht, weil eine
   Messzahl eine dunkle Flaeche verlangt. **Kein Lime**: Die
   Empfehlung ist kein Knopf, und die hervorgehobene Stufe der
   oeffentlichen Preistabelle sieht anders aus, weil dort noch
   etwas zu waehlen ist. Hier nicht. */
.datenblatt {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-l);
  padding: var(--s-4);
  box-shadow: var(--shadow-lift);
}

.datenblatt p { margin: 0; }

.datenblatt__marke {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--label-dark);
}

.datenblatt__paket {
  font-size: var(--fs-h2);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  font-weight: var(--fw-head);
  margin-top: var(--s-1) !important;
}

/* Der Preis ist die Zahl, um die es geht — eine Stufe unter der
   Ueberschrift daneben, damit beide zusammen gelesen werden. */
.datenblatt__preis {
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  margin-top: var(--s-3) !important;
}

.datenblatt__jahr {
  font-size: var(--fs-small);
  color: var(--label-dark);
  margin-top: var(--s-1) !important;
}

/* Beschriftung und Wert sind ein Paar, kein Aufzaehlungspunkt —
   deshalb `dl`. Die Linie dazwischen ersetzt die Pille: Sie
   gliedert, ohne einen Behaelter zu bauen. */
.datenblatt__zeilen {
  margin: var(--s-4) 0 0;
  display: grid;
}

.datenblatt__zeilen > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--line-dark);
}

.datenblatt__zeilen dt {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--label-dark);
  white-space: nowrap;
}

.datenblatt__zeilen dd {
  margin: 0;
  font-size: var(--fs-small);
  text-align: right;
}

/* ---- Handlung und Randnotiz ------------------------------- */

/* Die Handlungsgruppe steht **unter der Entscheidung**, nicht
   unter beiden Spalten. `1 / -1` war der erste Bau, und er riss
   bei 1440 px eine leere Flaeche von rund 250 px zwischen den
   Begruendungssatz und den Knopf: Das Datenblatt rechts ist
   hoeher als der Text links, und eine gespannte Zeile wartet auf
   die laengere Spalte.

   In Spalte 1 folgt der Knopf dem Satz, den er beantwortet.

   **Nachgebessert am 16.08.2026, gemessen bei 1440 px:** `grid-column: 1`
   allein reichte nicht. Bei automatischer Platzierung steht das Datenblatt
   in Zeile 1 Spalte 2, und diese Zeile ist so hoch wie ihr hoechstes
   Element — das Datenblatt. Der Knopf in Zeile 2 begann deshalb erst
   unterhalb des Datenblatts: **271 px Leerraum** zwischen dem Satz und der
   Handlung, die er ankuendigt.

   Die Zeilen werden jetzt ausdruecklich vergeben, und das Datenblatt
   spannt ueber beide. Es traegt damit keine Zeilenhoehe mehr bei. */
.ergebnis__entscheidung {
  grid-column: 1;
  grid-row: 1;
}

.ergebnis > .datenblatt {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.ergebnis__handlung {
  grid-column: 1;
  grid-row: 2;
  max-width: 62ch;
}

.ergebnis__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
}

/* Die Randnotiz: abgesetzt durch eine Linie, eine Stufe kleiner.
   §2.3 verlangt, dass sie den Pflichthinweis darueber nicht
   verdraengt. */
.randnotiz {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 62ch;
}

/* ---- Einspaltig ------------------------------------------- */

/* Unter 900 px ist die Reihenfolge die des Lesens: Ergebnis,
   Begruendung, Preis, Datenzeilen, Handlung, Hinweis. Das
   Datenblatt rutscht dabei unter die Begruendung, nicht ueber
   die Ueberschrift. */
@media (max-width: 900px) {
  .ergebnis { grid-template-columns: 1fr; }

  /* Einspaltig entscheidet die Reihenfolge im Markup, nicht das Raster.
     Die ausdrueckliche Platzierung von oben wuerde sie ueberschreiben. */
  .ergebnis__entscheidung,
  .ergebnis > .datenblatt,
  .ergebnis__handlung {
    grid-column: auto;
    grid-row: auto;
  }

  .datenblatt { padding: var(--s-3); }

  .ergebnis__entscheidung h1 { font-size: var(--fs-h1); }
}

@media (max-width: 780px) {
  .funnel-start-images {
    display: none;
  }
}

@media (max-width: 520px) {
  .funnelseite .kapazitaetsband {
    display: none;
  }

  .funnelkopf__reihe {
    padding-top: var(--s-2);
    padding-bottom: var(--s-2);
  }

  .funnelflaeche {
    padding-top: var(--s-3);
    padding-bottom: var(--s-3);
  }

  .funnelbahn h1 {
    font-size: clamp(1.95rem, 10vw, 2.55rem);
    line-height: .95;
  }

  .funnelschritt {
    margin-bottom: var(--s-2);
  }

  .funnelbahn form {
    gap: var(--s-2);
  }

  .funnelbahn .frage legend,
  .funnelbahn .frage > label {
    font-size: 1rem;
    line-height: 1.15;
  }

  .funnelbahn .lead {
    /* Dieselbe Stufe wie der Einstiegsabsatz der uebrigen Seiten (22 px);
       vorher 17 px. — 20.09.2026 */
    font-size: var(--fs-m);
    line-height: 1.38;
  }

  .funnelbahn .punkte {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-1) var(--s-2);
  }

  .funnelbahn .punkte li {
    font-size: var(--fs-small);
    line-height: 1.32;
  }
}

/* ============================================================
   Formularseiten des Schecks
   ============================================================ */

/* Eine Auswahl ist eine Zeile, kein Kaestchen in einer
   Kartenwand. Rahmen und Radius bleiben — sie machen die
   Trefferflaeche sichtbar, und das ist eine Aufgabe. */
.funnelbahn form {
  display: grid;
  gap: var(--s-3);
}

.funnelbahn > form[action="/briefing/start"] > .knopf {
  width: min(100%, 45rem);
  justify-self: start;
  text-align: center;
}

.funnelbahn .frage {
  display: grid;
  gap: var(--s-2);
}

.funnelbahn .frage legend,
.funnelbahn .frage > label {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.2;
}

.funnelbahn .frage__hilfe {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.funnelbahn .wahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--s-2);
}

.funnelbahn .wahl li {
  position: relative;
  display: block;
  min-height: 56px;
  padding: 0;
  border-color: var(--line);
  border-radius: var(--r-m);
  background: var(--paper);
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.funnelbahn .wahl input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.funnelbahn .wahl label {
  display: grid;
  min-height: 56px;
  align-content: center;
  padding: var(--s-2) var(--s-3);
  font-weight: 680;
  line-height: 1.25;
}

.funnelbahn .wahl li:focus-within {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.funnelbahn .wahl li:has(input:checked) {
  border-color: var(--ink);
  background: var(--lime);
}

.funnelbahn .wahl li:hover {
  border-color: rgba(12,16,14,.34);
  transform: translateY(-2px);
}

.wahl__hilfe {
  display: block;
  margin-top: var(--s-1);
  color: var(--muted);
  font-weight: 520;
}

.funnelbahn .wahl li:has(input:checked) .wahl__hilfe {
  color: rgba(12,16,14,.78);
}

.js .funnelbahn form.is-paged {
  min-height: min(560px, calc(100dvh - 260px));
  align-content: start;
}

.js .funnelbahn form.is-paged .frage {
  display: none;
}

.frage-stage {
  display: grid;
  min-height: clamp(190px, 32vh, 330px);
  overflow: hidden;
}

.frage-stage > .frage {
  grid-area: 1 / 1;
  min-width: 0;
}

.js .funnelbahn form.is-paged .frage.is-current,
.js .funnelbahn form.is-paged .frage.is-leaving {
  display: grid;
}

.js .funnelbahn form.is-paged .knopfreihe[hidden] {
  display: none;
}

.frage-pager {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-1);
}

.frage-pager__stand {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--label);
  white-space: nowrap;
}

.frage-pager__track {
  position: relative;
  height: 3px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--line);
}

.frage-pager__track span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: inherit;
  background: var(--ink);
  transform: scaleX(var(--frage-fortschritt, .2));
  transform-origin: left center;
  transition: transform .25s ease;
}

.frage-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}

.frage-nav [hidden] {
  display: none !important;
}

.frage-nav [data-funnel-next] {
  justify-self: end;
}

.frage-nav [data-funnel-prev] {
  justify-self: start;
}

.frage-nav [disabled] {
  opacity: .45;
  pointer-events: none;
}

.js .funnelbahn form.is-paged .frage.is-current--vor {
  animation: frageHereinVonRechts .25s ease both;
}

.js .funnelbahn form.is-paged .frage.is-current--zurueck {
  animation: frageHereinVonLinks .25s ease both;
}

.js .funnelbahn form.is-paged .frage.is-leaving--vor {
  animation: frageHinausNachLinks .25s ease both;
}

.js .funnelbahn form.is-paged .frage.is-leaving--zurueck {
  animation: frageHinausNachRechts .25s ease both;
}

@keyframes frageHereinVonRechts {
  from {
    opacity: 0;
    transform: translateX(16px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes frageHereinVonLinks {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes frageHinausNachLinks {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-16px);
  }
}

@keyframes frageHinausNachRechts {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .funnelbahn .wahl li {
    transition: none;
  }

  .funnelbahn .wahl li:hover {
    transform: none;
  }

  .js .funnelbahn form.is-paged .frage.is-current,
  .js .funnelbahn form.is-paged .frage.is-leaving {
    animation: none;
  }

  .frage-pager__track span {
    transition: none;
  }
}

/* Der Einstieg: die Vertrauenspunkte als Zeilen mit Strich,
   nicht als Pillenreihe. Dieselbe Form wie im Aufmacher der
   Startseite — Wiedererkennung ohne kopierte Dekoration. */
.funnelbahn .punkte {
  display: grid;
  gap: var(--s-1);
}

.funnelbahn .punkte li {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 0 0 var(--s-3);
  font-size: var(--fs-body);
}

.funnelbahn .punkte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 10px;
  height: 2px;
  background: var(--ink);
  opacity: .34;
}

@media (max-width: 520px) {
  .funnelbahn .punkte {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-1) var(--s-2);
  }

  .funnelbahn .punkte li {
    font-size: var(--fs-small);
    line-height: 1.32;
  }

  .js .funnelbahn form.is-paged {
    min-height: 0;
    gap: var(--s-2);
  }

  .funnelbahn .wahl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-1);
  }

  .funnelbahn .wahl label {
    min-height: 56px;
    padding: var(--s-1);
    font-size: 0.9375rem;
    line-height: 1.12;
  }

  .wahl__hilfe {
    display: none;
  }

  .js .funnelbahn form.is-paged textarea {
    min-height: 112px;
  }

  .funnelbahn > .fussnote {
    display: none;
  }

  .funnelbahn .knopfreihe {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2);
  }

  .frage-pager {
    grid-template-columns: 1fr;
  }

  .frage-pager__stand,
  .frage-pager__track {
    grid-column: 1;
  }

  .frage-nav [data-funnel-prev],
  .frage-nav [data-funnel-next] {
    justify-self: stretch;
  }

  .funnelfuss {
    padding-top: var(--s-2);
    padding-bottom: var(--s-2);
    font-size: 0.875rem;
  }

  .funnelfuss__reihe {
    gap: var(--s-1);
  }
}

/* ---- Flache Bildschirme: der Schritt passt ohne Scrollen ----
   Gemessen am 17.09.2026 mit Chromium: Auf dem Handy (390 x 844) passte
   jeder Schritt bereits, am Desktop (1440 x 900) fehlten 38 bis 95 px.
   Schuld war nicht der Inhalt, sondern die Polster: Flaeche 32 + 48 px,
   Fuss 32 + 48 px, Kopf 20 + 20 px — zusammen 200 px auf einem Fenster
   von 900 px. Auf flachen Fenstern werden sie kleiner; auf hohen bleibt
   die Seite luftig wie bisher. Die Schriftgroessen bleiben unangetastet,
   denn der Text soll nicht schrumpfen, nur der Rand. */
@media (min-width: 781px) and (max-height: 1000px) {
  .funnelseite .funnelflaeche {
    padding-top: var(--s-3);
    padding-bottom: var(--s-3);
  }

  .funnelseite .funnelkopf__reihe {
    padding-top: var(--s-2);
    padding-bottom: var(--s-2);
  }

  .funnelseite .funnelfuss {
    padding-top: var(--s-2);
    padding-bottom: var(--s-2);
  }

  .funnelseite .funnelschritt {
    margin-bottom: var(--s-3);
  }

  .funnelseite .knopfreihe {
    margin-top: var(--s-3);
  }

  .funnelseite .funnelbahn form {
    gap: var(--s-2);
  }

  .funnelseite .funnelbahn .frage {
    gap: var(--s-1);
  }
}

/* Schmale und zugleich flache Fenster: dieselbe Rechnung wie oben, nur fuers
   Handy. Gemessen am 17.09.2026 auf 390 x 844 ohne JavaScript liefen Schritt 2
   (acht Antwortkarten) und Schritt 3 (elf) um 77 und 138 px ueber. Die Karten
   gehen deshalb von 56 auf 50 px Mindesthoehe — der Fingerbereich bleibt ueber
   den 44 px, die als Untergrenze gelten. */
@media (max-width: 780px) and (max-height: 900px) {
  .funnelbahn .wahl li,
  .funnelbahn .wahl label {
    min-height: 50px;
  }

  .funnelbahn .wahl {
    gap: var(--s-1);
  }
}

/* ============================================================
   Der Bedarfsscheck folgt der Form der uebrigen Website
   — 20.09.2026, aus der Abnahme

   Gemessen stand hier ein zweites Designsystem: Knoepfe als Pille
   (999 px) gegen 8 px auf 92 anderen Seiten, H1 mit 39 statt 40 px,
   und der auffaelligste Knopf der Seite fuehrte aus der Anfrage
   heraus. Der Ablauf bleibt schlank; nur die Formen stimmen jetzt.
   ============================================================ */

/* Dieselbe Knopfform wie auf der Website: 8 px Kante, 16 px Polster,
   17 px Schrift. `--r-pill` bleibt fuer Kunden- und Adminbereich. */
.funnelseite .knopf {
  border-radius: 8px;
  padding: 16px;
  font-size: 17px;
  font-weight: 650;
}

/* Der Weg zurueck war als Lime-Flaeche gesetzt und damit das lauteste
   Element der Seite — auf einer Anfrageseite fuehrte der staerkste
   Knopf hinaus. Jetzt ein ruhiger Verweis. */
.funnelkopf .text-link {
  padding: 8px 0;
  color: var(--ink);
  background: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.funnelkopf .text-link:hover {
  transform: none;
  color: var(--ink);
}

/* Dieselbe Ueberschriftenstufe wie ueberall (40 px auf dem Handy). */
.funnelbahn h1 {
  font-size: var(--fs-xl);
  line-height: 1.02;
}

/* Zwei Fortschrittsanzeigen uebereinander — „Schritt 1 von 7" mit Balken
   und darunter „Frage 1 von 2" mit einem zweiten Balken — lesen sich wie
   zwei Zaehlungen derselben Sache. Der Schrittbalken bleibt, die Frage
   zaehlt als Text weiter. */
.frage-pager__track {
  display: none;
}

.frage-pager {
  grid-template-columns: auto;
  justify-content: start;
}

/* Beim Wechsel lagen alte und neue Frage 250 ms lang uebereinander in
   derselben Rasterzelle; Zeilen standen sichtbar doppelt. Jetzt geht die
   alte zuerst, die neue kommt danach. */
.js .funnelbahn form.is-paged .frage.is-leaving--vor,
.js .funnelbahn form.is-paged .frage.is-leaving--zurueck {
  animation-duration: .12s;
}

.js .funnelbahn form.is-paged .frage.is-current--vor,
.js .funnelbahn form.is-paged .frage.is-current--zurueck {
  animation-delay: .12s;
  animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
  .js .funnelbahn form.is-paged .frage.is-current--vor,
  .js .funnelbahn form.is-paged .frage.is-current--zurueck,
  .js .funnelbahn form.is-paged .frage.is-leaving--vor,
  .js .funnelbahn form.is-paged .frage.is-leaving--zurueck {
    animation: none;
  }
}

/* Der Startknopf lief bis 45 rem breit. Mit der Polsterung der Website ergab
   das 720 x 61 px Lime am Stueck — eine Flaeche, keine Schaltflaeche. Auf dem
   Handy bleibt er voll breit, darueber so breit wie sein Text plus Polster.
   — 20.09.2026 */
@media (min-width: 701px) {
  .funnelbahn > form[action="/briefing/start"] > .knopf {
    width: auto;
  }
}