/* Modul „formular“ (module/formular). Nur Tokens (--bm-*, --bb-*); hell auf
   warmem Grund, Farben des Kopfs aus der Ton-Regel (--bb-text, --bb-text-ruhig).
   Übernommen aus dem Bestand seiten/module/d2e.css (Abschnitte 1 und 2:
   Kopf, weiße Formularkarte, Felder). Die Schritt-Teile der Strecke
   (Zähler, Spur, Optionen, Meldungen, Fuß) bleiben in site/funnel/funnel.css,
   das Strecke.tsx selbst lädt. Innere Klassen (bm-formular-*, bm-funnel__*)
   setzt die Strecke; die Regeln dafür sind hier auf .bb-m-formular begrenzt.
   Spezifität wie im Bestand (.bm-neu.bm-neu + Modulklasse), weil basis.css
   Felder mit bis zu (0,4,0) gestaltet. Breakpoints: 640/1024. */
.bb-m-formular {
  --bb-m-formular-box-luecke: clamp(1.5rem, 3vw, 2.5rem);
  --bb-m-formular-karte-innen: clamp(1.5rem, 4vw, 3rem);
  --bb-m-formular-kopf-max: 36rem;
}

/* ── Kopf oben, Formularkarte darunter (hell auf warmem Grund) ────────── */
.bb-m-formular__box {
  display: grid;
  gap: var(--bb-m-formular-box-luecke);
  color: var(--bb-text);
}
.bb-m-formular__kopf { max-width: var(--bb-m-formular-kopf-max); }
.bb-m-formular__titel {
  margin: 0;
  font-family: var(--bm-font-titel);
  font-weight: var(--bm-g-normal);
  font-synthesis: none;
  font-size: var(--bm-t-h2);
  line-height: var(--bm-zh-snug);
  letter-spacing: var(--bm-sp-leicht);
  color: var(--bb-text);
  text-wrap: balance;
}
.bb-m-formular__einleitung {
  margin: 1.25rem 0 0;
  font-size: var(--bm-t-body);
  line-height: var(--bm-zh-text);
  color: var(--bb-text-ruhig);
}

/* ── Weiße Formularkarte (Strecke): Reinweiß, 1 px Linie ──────────────── */
.bm-neu.bm-neu .bb-m-formular .bm-formular-karte {
  background: var(--bm-bg-weiss);
  color: var(--bm-text);
  border: 1px solid var(--bm-linie);
  border-radius: var(--bm-radius-karte);
  box-shadow: none;
  padding: var(--bb-m-formular-karte-innen);
}
.bm-neu.bm-neu .bb-m-formular .bm-formular-karte .bm-formular-kleingedrucktes {
  margin-top: 0; /* Abstand gibt die Lücke der Strecke (funnel.css) */
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-lang);
  color: var(--bm-text-leise);
}

/* ── Kontaktwahl: drei Karten, darunter das gewählte Formular ─────────── */
.bb-m-formular__wahl-rahmen { display: grid; gap: 1.5rem; min-width: 0; }
.bb-m-formular__wahl {
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .bb-m-formular__wahl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
.bm-neu .bb-m-formular .bb-m-formular__wahl-karte {
  display: flex;
  align-items: center;
  min-height: 4.5rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--bm-linie);
  border-radius: var(--bm-radius-karte);
  background: var(--bm-bg-weiss);
  font-family: var(--bm-font-titel);
  font-size: var(--bm-t-kartentitel);
  font-weight: var(--bm-g-titel);
  line-height: var(--bm-zh-titel);
  color: var(--bm-text);
  text-decoration: none;
  transition:
    border-color var(--bm-dauer-kurz) var(--bm-ease-linear),
    box-shadow var(--bm-dauer-kurz) var(--bm-ease-linear);
}
.bm-neu .bb-m-formular .bb-m-formular__wahl-karte:hover { border-color: var(--bm-text); }
.bm-neu .bb-m-formular .bb-m-formular__wahl-karte[aria-current='true'] {
  border-color: var(--bm-signal-kontur);
  box-shadow: inset 0 0 0 1px var(--bm-signal-kontur);
}
.bm-neu .bb-m-formular .bb-m-formular__wahl-karte:focus-visible {
  outline: var(--bm-fokus-breite) solid var(--bm-fokus-auf-hell);
  outline-offset: var(--bm-fokus-versatz, 3px);
}
.bb-m-formular__thema {
  margin: 0;
  font-size: var(--bm-t-body);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text-leise);
}

/* Wunschzeitraum: Tag und Tageszeit nebeneinander */
.bm-neu .bb-m-formular .bm-formular-zeitraum { margin: 0; padding: 0; border: 0; min-width: 0; }
.bm-neu .bb-m-formular .bm-formular-zeitraum > legend { padding: 0; float: left; width: 100%; }
.bm-neu .bb-m-formular .bm-formular-zeitraum__paar {
  clear: both;
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .bm-neu .bb-m-formular .bm-formular-zeitraum__paar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Felder: Beschriftung über gefülltem Feld, Fokus Tinte, Fehler rot ── */
.bm-neu .bb-m-formular .bm-formular-raster {
  display: grid;
  gap: 1.25rem 1rem;
}
@media (min-width: 640px) {
  .bm-neu .bb-m-formular .bm-formular-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-neu .bb-m-formular .bm-formular-raster > .bm-formular-feld--breit { grid-column: 1 / -1; }
}
.bm-neu.bm-neu .bb-m-formular .bm-formular .bm-formular-label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--bm-font);
  font-size: var(--bm-t-klein);
  font-weight: var(--bm-g-normal);
  line-height: var(--bm-zh-kompakt);
  letter-spacing: var(--bm-sp-knopf);
  color: var(--bm-text-leise);
}
.bm-neu .bb-m-formular .bm-formular-pflicht { color: var(--bm-text-leise); }
.bm-neu.bm-neu .bb-m-formular .bm-formular .bm-formular-eingabe {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1.125rem 0.625rem;
  background-color: var(--bm-bg-kuehl);
  border: 1px solid var(--bm-linie-feld);
  border-radius: var(--bm-radius-feld);
  font-family: var(--bm-font);
  font-size: var(--bm-t-body);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text);
  transition:
    border-color var(--bm-dauer-kurz) var(--bm-ease-linear),
    background-color var(--bm-dauer-kurz) var(--bm-ease-linear),
    box-shadow var(--bm-dauer-kurz) var(--bm-ease-linear);
}
.bm-neu.bm-neu .bb-m-formular .bm-formular textarea.bm-formular-eingabe { min-height: 9rem; resize: vertical; }
.bm-neu.bm-neu .bb-m-formular .bm-formular select.bm-formular-eingabe { padding-right: 3rem; }
.bm-neu.bm-neu .bb-m-formular .bm-formular .bm-formular-eingabe:hover { border-color: var(--bm-text-tag); }
.bm-neu.bm-neu .bb-m-formular .bm-formular .bm-formular-eingabe:focus {
  outline: none;
  background-color: var(--bm-bg);
  border-color: var(--bm-text);
  box-shadow: inset 0 0 0 1px var(--bm-text);
}
.bm-neu.bm-neu .bb-m-formular .bm-formular .bm-formular-eingabe:focus-visible {
  outline: var(--bm-fokus-breite) solid var(--bm-fokus);
  outline-offset: var(--bm-fokus-versatz, 2px);
}
.bm-neu.bm-neu .bb-m-formular .bm-formular .bm-formular-eingabe[aria-invalid='true'],
.bm-neu.bm-neu .bb-m-formular .bm-formular .bm-formular-eingabe[aria-invalid='true']:hover {
  background-color: var(--bm-bg);
  border-color: var(--bm-fehler);
  box-shadow: inset 0 0 0 1px var(--bm-fehler);
}
.bm-neu.bm-neu .bb-m-formular .bm-formular .bm-formular-eingabe[aria-invalid='true']:focus-visible { outline-color: var(--bm-fehler); }
.bm-neu .bb-m-formular .bm-formular-fehler {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: var(--bm-t-klein);
  font-weight: var(--bm-g-mittel);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-fehler);
}
.bm-neu .bb-m-formular .bm-formular-fehler::before {
  content: '!';
  content: '!' / '';
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.0625rem;
  border-radius: var(--bm-radius-pille);
  background: var(--bm-fehler);
  color: var(--bm-text-invers);
  font-size: var(--bm-t-mini);
  line-height: 1;
}

/* Einwilligung / Checkbox */
.bm-neu.bm-neu .bb-m-formular .bm-formular .bm-formular-haken {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--bm-t-body);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text);
  cursor: pointer;
}
.bm-neu.bm-neu .bb-m-formular .bm-formular .bm-formular-haken input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1875rem;
  accent-color: var(--bm-flaeche-dunkel);
}
.bm-neu.bm-neu .bb-m-formular .bm-formular .bm-formular-haken input:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz, 3px); }
.bm-neu.bm-neu .bb-m-formular .bm-formular .bm-formular-haken input[aria-invalid='true'] { outline: 2px solid var(--bm-fehler); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .bm-neu.bm-neu .bb-m-formular .bm-formular .bm-formular-eingabe { transition: none; }
}

/* Erstgespräch: Cal.com-Buchung, Wunschtermin als eingeklappter Rückfall */
.bm-neu .bb-m-formular .bb-m-formular__buchung { display: grid; gap: 1.5rem; }
.bm-neu .bb-m-formular .bb-m-formular__buchung-text {
  margin: 0;
  font-size: var(--bm-t-body);
  line-height: var(--bm-zh-text);
  color: var(--bm-text-leise);
}
.bm-neu .bb-m-formular .bb-m-formular__buchung-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.bm-neu .bb-m-formular .bb-m-formular__buchung .bm-funnel__link {
  font-size: var(--bm-t-klein);
  color: var(--bm-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.bb-m-formular__cal { min-height: 40rem; }
.bb-m-formular__rueckfall { display: grid; gap: 1.5rem; }
.bb-m-formular__rueckfall > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--bm-t-body);
  color: var(--bm-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.bb-m-formular__rueckfall[open] > summary { margin-bottom: 1.5rem; }
.bb-m-formular__rueckfall > summary:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus-auf-hell); outline-offset: var(--bm-fokus-versatz, 3px); }

/* ── Strecke (Herkunft site/funnel/funnel.css) ── */
/* Welle CT-1 (27.09.2026): Anfragewege (src/site/funnel/). Nur Tokens --bm-*
   aus src/site/design/tokens.css, nur im Scope .bm-neu. Felder, Karte und
   Fehlertexte kommen aus module/d2e.css (bm-formular-*); hier steht nur,
   was die Schritte zusätzlich brauchen. */

/* Fokusrahmen (P3-A): Der Anfrageweg steht auf der hellen Karte, auch in der
   dunklen Formularbox – der Schalter folgt der Karte, nicht der Box
   (tokens.css »Fokusrahmen je Fläche«). Gilt für Felder, Knöpfe, Links. */
.bm-neu .bm-funnel {
  --bm-fokus: var(--bm-fokus-auf-hell);
  --bm-fokus-gegen: var(--bm-fokus-auf-dunkel);
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}
.bm-neu .bm-funnel > * { min-width: 0; }
/* Fokusziele (Frage, Meldung, Fehlerfeld) landen unter dem klebenden Kopf.
   Spezifität wie navigation/ui/kopf.css (main#inhalt [id]), dort ohne Luft. */
.bm-seite main#inhalt .bm-funnel :is(.bm-funnel__titel, .bm-funnel__meldung, input, select, textarea) {
  scroll-margin-top: calc(var(--bm-kopf-h) + 4rem);
}

/* Formularbox gleich nach dem (flachen) Kopf: halber Sektionsabstand, damit
   das Formular zügig beginnt (Welle P1-H). */
.bm-neu.bm-neu .bm-m-hero + section.section:has(> .wrap > .bm-formular-box) { padding-top: var(--bm-sektion-halb); }

/* Einzeilige Felder (Text, Datum, Auswahl) gleich hoch */
.bm-neu.bm-neu .bm-funnel.bm-formular :is(input, select).bm-formular-eingabe { height: 3rem; }

/* Stand: „Schritt 2 von 4" und Spur */
.bm-neu .bm-funnel__stand { display: grid; gap: 0.625rem; }
.bm-neu.bm-neu .bm-funnel .bm-funnel__zaehler {
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-kompakt);
  color: var(--bm-text-leise);
}
.bm-neu .bm-funnel__spur {
  height: 0.25rem;
  border-radius: var(--bm-radius-pille);
  background: var(--bm-linie-zart);
  overflow: hidden;
}
.bm-neu .bm-funnel__spur > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--bm-signal-verlauf);
  transition: inline-size var(--bm-dauer) var(--bm-ease);
}

.bm-neu.bm-neu .bm-funnel .bm-funnel__titel {
  font-family: var(--bm-font-titel);
  font-size: var(--bm-t-h3);
  font-weight: var(--bm-g-titel);
  line-height: var(--bm-zh-snug);
  letter-spacing: var(--bm-sp-titel);
  color: var(--bm-text);
  text-wrap: balance;
}
.bm-neu .bm-funnel__titel:focus { outline: none; }
.bm-neu .bm-funnel__titel:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz, 4px); }

/* Antworten: eine Zeile je Antwort, ab 640 px zwei Spalten */
.bm-neu .bm-funnel__gruppe {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
@media (min-width: 640px) {
  .bm-neu .bm-funnel__gruppe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-neu .bm-funnel__gruppe > .bm-formular-fehler { grid-column: 1 / -1; }
}
.bm-neu.bm-neu .bm-funnel .bm-funnel__option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.75rem 1.125rem;
  border: 1px solid var(--bm-linie-feld);
  border-radius: var(--bm-radius-feld);
  background: var(--bm-bg);
  font-size: var(--bm-t-body);
  line-height: var(--bm-zh-mittel);
  letter-spacing: 0;
  color: var(--bm-text);
  cursor: pointer;
  transition:
    border-color var(--bm-dauer-kurz) var(--bm-ease-linear),
    background-color var(--bm-dauer-kurz) var(--bm-ease-linear);
}
.bm-neu.bm-neu .bm-funnel .bm-funnel__option input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--bm-zweit);
}
.bm-neu.bm-neu .bm-funnel .bm-funnel__option:hover { border-color: var(--bm-text); }
/* Gewählt: nicht nur Farbe – gefülltes Auswahlzeichen, doppelt starker Rand
   und kräftigere Schrift. */
.bm-neu.bm-neu .bm-funnel .bm-funnel__option:has(input:checked) {
  border-color: var(--bm-zweit);
  background: var(--bm-bg-kuehl);
  box-shadow: inset 0 0 0 1px var(--bm-zweit);
  font-weight: var(--bm-g-mittel);
}
.bm-neu.bm-neu .bm-funnel .bm-funnel__option:has(input:focus-visible) {
  outline: var(--bm-fokus-breite) solid var(--bm-fokus);
  outline-offset: var(--bm-fokus-versatz, 2px);
}
.bm-neu.bm-neu .bm-funnel .bm-funnel__option input:focus-visible { outline: none; }
/* Fehler an der Gruppe: nie nur Farbe (WCAG 1.4.1) – doppelt starker Rand in
   --bm-fehler, dazu Zeichen und Text unter der Gruppe (bm-formular-fehler). */
.bm-neu.bm-neu .bm-funnel .bm-funnel__gruppe[aria-invalid='true'] .bm-funnel__option {
  border-color: var(--bm-fehler);
  box-shadow: inset 0 0 0 1px var(--bm-fehler);
}

/* Felder der Anfragewege: Rand, Fokus und Fehlerzustand stehen einmal in
   module/d2e.css (bm-formular-eingabe). Hier bleibt nur die Abweichung des
   Anfragewegs (Welle P1-H): Hover in --bm-text statt --bm-text-tag. Weil die
   Hover-Regel so stark ist wie die Fehler-Hover-Regel dort, hält die zweite
   Zeile den Fehlerrand beim Überfahren (P3-A, vorher ein doppelter Block). */
.bm-neu.bm-neu .bm-funnel.bm-formular .bm-formular-eingabe:hover { border-color: var(--bm-text); }
.bm-neu.bm-neu .bm-funnel.bm-formular .bm-formular-eingabe[aria-invalid='true']:hover { border-color: var(--bm-fehler); }
/* Fehler am Feld: Zeichen und Text stehen direkt unter dem Feld
   (bm-formular-fehler, Zeichen aus module/d2e.css); hier abgesichert, damit
   beides im Anfrageweg nie entfällt. Farbe --bm-fehler (klares Fehlerrot,
   zur Koralle 2,31:1). */
.bm-neu.bm-neu .bm-funnel .bm-formular-fehler {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--bm-fehler);
  font-weight: var(--bm-g-mittel);
}
.bm-neu.bm-neu .bm-funnel .bm-formular-fehler::before,
.bm-neu.bm-neu .bm-funnel .bm-funnel__meldung--fehler .bm-funnel__meldung-titel::before {
  content: '!';
  content: '!' / '';
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.0625rem;
  border-radius: var(--bm-radius-pille);
  background: var(--bm-fehler);
  color: var(--bm-text-invers);
  font-size: var(--bm-t-mini);
  font-weight: var(--bm-g-mittel);
  line-height: 1;
}

/* Zusammenfassung der Angaben */
.bm-neu .bm-funnel__angaben {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--bm-linie-zart);
}
.bm-neu .bm-funnel__angabe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 1rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--bm-linie-zart);
}
.bm-neu.bm-neu .bm-funnel .bm-funnel__angabe dt {
  grid-column: 1;
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text-leise);
}
.bm-neu.bm-neu .bm-funnel .bm-funnel__angabe dd {
  grid-column: 1;
  margin: 0;
  font-size: var(--bm-t-body);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text);
  overflow-wrap: anywhere;
}
.bm-neu.bm-neu .bm-funnel .bm-funnel__angabe .bm-funnel__aendern {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.bm-neu.bm-neu .bm-funnel .bm-funnel__link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--bm-t-klein);
  color: var(--bm-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.bm-neu.bm-neu .bm-funnel .bm-formular-kleingedrucktes .bm-funnel__link { font-size: inherit; }
.bm-neu.bm-neu .bm-funnel .bm-funnel__link:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz, 3px); }

.bm-neu.bm-neu .bm-funnel .bm-funnel__pflicht {
  margin-bottom: -0.5rem;
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-kompakt);
  color: var(--bm-text-leise);
}
.bm-neu.bm-neu .bm-funnel .bm-formular-kleingedrucktes { margin-top: 0; }

/* Meldungen: Eingang bzw. „nicht gesendet" */
.bm-neu.bm-neu .bm-funnel .bm-funnel__meldung {
  display: grid;
  gap: 0.375rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--bm-linie-feld);
  border-radius: var(--bm-radius-feld);
  background: var(--bm-bg);
  font-size: var(--bm-t-body);
  line-height: var(--bm-zh-mittel);
  color: var(--bm-text);
}
.bm-neu.bm-neu .bm-funnel .bm-funnel__meldung--fehler { border-color: var(--bm-fehler); box-shadow: inset 0 0 0 1px var(--bm-fehler); }
.bm-neu.bm-neu .bm-funnel .bm-funnel__meldung--erfolg { padding: 0; border: 0; }
.bm-neu .bm-funnel__meldung:focus { outline: none; }
.bm-neu .bm-funnel__meldung:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz, 3px); }
.bm-neu.bm-neu .bm-funnel .bm-funnel__meldung-titel { font-weight: var(--bm-g-mittel); }
/* „Nicht gesendet": Zeichen vor dem Titel, nicht nur der rote Rand */
.bm-neu.bm-neu .bm-funnel .bm-funnel__meldung--fehler .bm-funnel__meldung-titel {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.bm-neu.bm-neu .bm-funnel .bm-funnel__meldung--fehler .bm-funnel__meldung-titel::before { margin-top: 0.1875rem; }
.bm-neu.bm-neu .bm-funnel .bm-funnel__meldung--erfolg .bm-funnel__meldung-titel {
  font-family: var(--bm-font-titel);
  font-size: var(--bm-t-h3);
  font-weight: var(--bm-g-titel);
  line-height: var(--bm-zh-snug);
}
.bm-neu .bm-funnel__wege { display: grid; gap: 0.25rem; margin: 0.25rem 0 0; padding: 0; list-style: none; }

/* Fehlerzusammenfassung (Kontaktformulare) und „Weiteren Zeitraum angeben“ */
.bm-neu.bm-neu .bm-funnel .bm-funnel__fehlerliste ul { display: grid; gap: 0.25rem; margin: 0; padding-left: 1.25rem; }
.bm-neu.bm-neu .bm-funnel .bm-funnel__fehlerliste .bm-funnel__link { font-size: inherit; }
.bm-neu.bm-neu .bm-funnel .bm-funnel__mehr { margin: 0; }

/* Fuß: Zurück links, Weiter/Absenden rechts; schmal untereinander */
.bm-neu .bm-funnel__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.bm-neu .bm-funnel__fuss > .bm-funnel__weiter { margin-left: auto; }
.bm-neu.bm-neu .bm-funnel .bm-funnel__zurueck {
  min-height: 44px;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  font-family: var(--bm-font);
  font-size: var(--bm-t-knopf);
  color: var(--bm-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.bm-neu.bm-neu .bm-funnel .bm-funnel__zurueck:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz, 3px); }
/* Knöpfe der Karte: basis.css liest --bm-fokus; der Schalter oben (.bm-funnel)
   hält ihn auf der hellen Karte dunkel – eine eigene Regel ist nicht nötig. */
.bm-neu .bm-funnel__weiter[aria-disabled='true'] { opacity: 0.6; cursor: progress; }
@media (max-width: 479px) {
  .bm-neu .bm-funnel__fuss > .bm-funnel__weiter { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-neu .bm-funnel__spur > span,
  .bm-neu.bm-neu .bm-funnel .bm-funnel__option { transition: none; }
}

/* Fangfeld (Honeypot, Welle A4): für Menschen unsichtbar, nicht per Tab erreichbar. */
.bm-funnel__falle {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  inset-inline-start: -10000px;
}

/* Grav-Umbau: ein Schritt der Strecke steht in einem Wrapper (React hatte ihn nicht); er trägt dieselbe Lücke wie .bm-funnel. */
.bm-neu .bm-funnel__schritt { display: grid; gap: 1.5rem; min-width: 0; }
.bm-neu .bm-funnel__schritt > * { min-width: 0; }
.bm-neu .bm-funnel__schritt[hidden] { display: none; }
.bm-neu .bm-funnel [hidden] { display: none; }