/* ==========================================================================
   MITGLIED WERDEN — /mitglied-werden
   ==========================================================================

   ── DIE EINE IDEE ────────────────────────────────────────────────────────
   Der Vertrag entsteht, während man ihn ausfüllt — und am Ende liegt er da.

   ── DAS MERKBILD ─────────────────────────────────────────────────────────
   Ein Blatt Papier, das mitschreibt. Rechts neben dem Formular liegt ein
   weißes Blatt in Vertragsproportion auf Mint, scharfkantig, mit einem
   Haarlinienkopf und leeren Zeilen. Mit jeder Eingabe füllt sich eine Zeile.
   Im letzten Schritt ist dasselbe Blatt über die ganze Breite aufgeklappt und
   IST der Vertrag. Kleine Karte und großes Dokument sind ein Objekt in zwei
   Größen — das ist das Scharnier zwischen den beiden Seitenhälften.

   ── GRUNDSTIMMUNG ────────────────────────────────────────────────────────
   Hell und weit im Ausfüllweg, weil man dort lesen muss. Zwei dunkle Anker:
   das Wege-Band unter der Bühne und das Abschlussplakat. Das Blatt ist die
   einzige weiße Fläche auf Mint — dadurch LIEGT es auf etwas.

   ── SKALENSPRUNG ─────────────────────────────────────────────────────────
   Die Schrittzahl als Konturziffer, clamp(84px … 168px), unmittelbar neben
   14-px-Feldbeschriftungen. Verhältnis über 1:10. Die Mitte gibt es nicht.

   ── DER VERZICHT ─────────────────────────────────────────────────────────
   Kein einziges Foto im Ausfüllweg, und keine Karte mit Rahmen um Inhalt.
   Getrennt wird über Haarlinien, Flächenwechsel und Luft. Das ist inhaltlich
   begründet: Wer Geburtsdatum, IBAN und Unterschrift gibt, soll nicht
   unterhalten werden.

   ── DAS ECHO ─────────────────────────────────────────────────────────────
   Die Konturschrift der Bühne kehrt genau einmal wieder: als Vertragsnummer
   auf dem Abschlussplakat. Einmal ist ein Echo.

   ── DAS STILLE DETAIL ────────────────────────────────────────────────────
   Am linken Blattrand läuft senkrecht das Aktenzeichen — die ersten acht
   Zeichen des Fassungs-Fingerabdrucks in Mikroschrift. Keine Animation, eine
   Sorgfalt.

   ── BEWEGUNG ─────────────────────────────────────────────────────────────
   Drei Bewegungen, alle an eine Eingabe oder eine Schwelle gebunden:
   Schrittwechsel (Konturziffer fährt hinter eine Kante), Blattzeile füllt
   sich (nur Farbe), Fristenachse zeichnet sich einmal. Kein Parallax, keine
   Scroll-Choreografie, keine hochzählenden Zahlen.

   Klassen strikt mw-*: seite.css belegt generische Namen (.cta, .lead, .hero).
   Knöpfe kommen aus seite.css (.btn/.btn-gruen/.btn-outline) — `.pille` gibt
   es nur im Backend, das war in der ersten Fassung dieser Seite der Fehler.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   01 · DIE DREI WEGE — dunkles Band, randlos
   Das erste, was nach der Bühne kommt: eine Fläche, kein weißer Absatz.
   ══════════════════════════════════════════════════════════════════════════ */
.mw-wege {
  background: var(--pine);
  color: #fff;
  /* Randlos von sich aus: die Sektion ist ein direktes Kind von `.fluss`, und
     `.fluss` setzt keinen Seitenrand. Negative Ränder hätten sie aus dem
     Fenster geschoben — das war der Fehler der ersten Fassung.

     Oben mehr als unten: Wenn das Band beim Rollen an der Kopfzeile ankommt,
     hängt das Wappen 130 px in die Fläche hinein — mit dem gleichmäßigen
     Abstand von 96 px saßen Ziffer und Überschrift direkt dahinter. */
  padding: clamp(104px, 9vw, 140px) var(--inset) clamp(44px, 6vw, 84px);
}
.mw-wege-kopf {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 4vw, 54px); align-items: start;
  padding-bottom: 34px; border-bottom: 1px solid var(--hairline-dunkel, rgba(255,255,255,.16));
}
/* Die Skalenspitze des Bandes: eine Ziffer, sonst nichts. */
.mw-wege-zahl {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(72px, 11vw, 150px); line-height: .8; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 2px var(--lime);
  margin: 0; user-select: none;
}
.mw-wege-kopf h2 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -.03em; line-height: 1.05;
  margin: 0 0 12px; color: #fff; text-wrap: balance;
}
.mw-dauer {
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--lime); margin: 0;
}
/* Drei Spalten mit Haarlinien dazwischen — keine Karten. */
.mw-wege-liste {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.mw-wege-liste li {
  padding: 30px clamp(18px, 2.4vw, 34px) 4px 0;
  border-right: 1px solid var(--hairline-dunkel, rgba(255,255,255,.16));
}
.mw-wege-liste li:last-child { border-right: 0; padding-right: 0; }
.mw-wege-liste h3 {
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--lime);
  margin: 0 0 10px;
}
.mw-wege-liste p {
  margin: 0; font-size: 16px; font-weight: 300; line-height: 1.6;
  color: rgba(255,255,255,.86); max-width: 34ch;
}
.mw-wege-link { margin-top: 14px !important; }
.mw-wege-link a {
  font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 2px;
  transition: border-color var(--t-schnell) ease-out;
}
.mw-wege-link a:hover { border-bottom-color: var(--lime); }
@media (max-width: 760px) {
  .mw-wege-kopf { grid-template-columns: 1fr; gap: 10px; }
  .mw-wege-liste li { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); padding: 24px 0; }
  .mw-wege-liste li:last-child { border-bottom: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   02 · DIE STRECKE — asymmetrisch: Formular links, das Blatt rechts
   ══════════════════════════════════════════════════════════════════════════ */
/* Der Seitenrand kommt bei den Bestandsseiten aus `.kapitel`; eigene
   Sektionen müssen ihn selbst setzen, sonst klebt der Inhalt am Fensterrand. */
/* Oben knapp: Direkt über der Strecke liegt das dunkle Band, und zwischen
   Bandkante und Schiene stand vorher ein Streifen von über 200 px Weiß aus
   zwei addierten Innenabständen. */
.mw-strecke { padding: clamp(28px, 3vw, 48px) var(--inset) clamp(60px, 8vw, 110px); }

/* ── ARBEITSMODUS ────────────────────────────────────────────────────────────
   Sobald man an Bühne und Wege-Band vorbei ist, setzt mitglied.js diese Klasse
   auf den `body` — und nimmt sie beim Zurückrollen wieder weg. Sie färbt die
   Kopfzeile, mehr nicht: Über dem Bild steht sie auf dunklem Grund, in der
   Strecke auf Weiß, und eine weiße Fläche ohne Halt wäre kein Rahmen. Die
   Marke trägt ihn.

   Was hier bis zum 06.09.2026 zusätzlich stand — ein padding-top von 150/196 px
   an `.mw-strecke` —, war der Ausgleich dafür, dass die Einleitung ganz aus dem
   Fluss genommen wurde. Sie bleibt jetzt stehen (Begründung in mitglied.js), und
   ein Abstand, der beim Farbwechsel ein- und ausspringt, wäre ein Layoutsprung
   mitten im Scrollen. */

.mw-arbeit .header {
  --nav: #fff;
  background: var(--tanne); color: #fff;
  border-bottom-color: rgba(255, 255, 255, .16);
  /* Der Weichzeichner hinter einer deckenden Fläche kostet nur Rechenzeit. */
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* Der Schriftzug trägt in seite.css eigene Farben (`--tinte` und `--gruen`) —
   `color: inherit` am Kopf reicht deshalb nicht, beide waren auf Tanne fast
   unlesbar. */
.mw-arbeit .logo .z1 { color: #fff; }
.mw-arbeit .logo .z2 { color: var(--lime); }
.mw-arbeit .hauptnav > ul > li > a:hover,
.mw-arbeit .hauptnav > ul > li:focus-within > a { color: var(--lime); }
.mw-arbeit .hauptnav > ul > li > a::after { background: var(--lime); }
/* `!important` steht schon in seite.css an `.nav-mitglied` — hier muss es
   deshalb ebenfalls stehen, sonst bleibt der Punkt auf Grün-in-Grün. */
.mw-arbeit .nav-mitglied { color: var(--lime) !important; }
/* Der grüne Knopf verschwände auf grünem Grund — er wird zum hellen Knopf. Beim
   Umriss-Knopf ist es die FLÄCHE, die weg muss: `.btn-outline` hat in seite.css
   `background: #fff`, und auf weißem Grund war weiße Schrift unsichtbar. */
.mw-arbeit .header .btn-gruen { background: var(--lime); color: var(--tanne); border-color: var(--lime); }
.mw-arbeit .header .btn-gruen:hover { background: #fff; color: var(--tanne); }
.mw-arbeit .header .btn-outline {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5);
}
.mw-arbeit .header .btn-outline:hover { background: rgba(255, 255, 255, .14); color: #fff; }
/* Die Untermenüs sind weiße Karten — auf grünem Kopf bleiben sie das, sonst
   müsste ich die ganze Navigation zweifarbig pflegen. */
.mw-arbeit .hauptnav .sub { --nav: var(--tinte); color: var(--tinte); }
.mw-arbeit .hauptnav .sub a { color: var(--tinte); }
/* Webcam, Startzeiten, Aktuelles: drei Angebote, woanders hinzugehen — genau
   das, was in einem Vertragsformular nichts zu suchen hat. Über der Bühne waren
   sie sinnvoll, über dem Formular sind sie eine Ablenkung. */
.mw-arbeit .schnell { display: none; }

/* Sieben von zwölf Spalten für das Formular, der Rest für das Blatt.
   Asymmetrie ist der Normalfall — zentriert wird nur, was Plakat ist. */
.mw-spalten { display: grid; gap: clamp(30px, 4vw, 64px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1080px) {
  .mw-spalten { grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr); align-items: start; }
}

/* --- Die Fortschrittsschiene: Haarlinie mit Ziffern, kein Kasten --------- */
/* Die Schiene ist das Sprungziel beim Schrittwechsel. Ohne diesen Abstand
   landet sie exakt unter der klebenden Kopfzeile und ist verdeckt — man wechselt
   den Schritt und sieht nicht, wo man ist. */
/* Die Schiene ist das Sprungziel beim Schrittwechsel und muss unter dem Wappen
   frei liegen. Gemessen, nicht geschätzt — und das Maß ist unangenehm groß:
   Die Kopfzeile ist 76 px hoch, das Wappen hängt darüber hinaus, und beim
   Scrollen WÄCHST es (`.header.kompakt .logo .wappen { height: 134px }`).
   Unterkante des Wappens: 176 px ab 1000 px Fensterbreite, 130 px darunter.
   Mit 150 px lag die Schiene bei jedem Vor und Zurück hinter dem Logo. */
.mw-schiene { margin: 0 0 clamp(34px, 5vw, 58px); scroll-margin-top: 150px; }
@media (min-width: 901px) { .mw-schiene { scroll-margin-top: 196px; } }
.mw-schiene ol {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  /* `start` statt der Voreinstellung `stretch`: Sonst wird jedes Feld so hoch
     wie das höchste — und wenn eines aus irgendeinem Grund groß wird, zieht es
     die ganze Zeile mit. Ein Fortschrittsband darf nie wachsen. */
  align-items: start;
  border-top: 1px solid var(--hairline);
}
.mw-schiene li {
  flex: 1 1 120px; min-width: 116px; padding: 12px 14px 0 0;
  border-top: 2px solid transparent; margin-top: -1px;
  transition: border-color var(--t-schnell) ease-out;
}
.mw-schiene a {
  display: flex; align-items: baseline; gap: 9px; text-decoration: none;
  color: var(--muted); transition: color var(--t-schnell) ease-out;
}
.mw-schiene .nr {
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; font-variant-numeric: tabular-nums;
}
.mw-schiene .was {
  font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.mw-schiene a:hover { color: var(--tinte); }
/* Der letzte Punkt ist die Vertragsansicht — kein Link, kein Ziel. */
.mw-schiene li[data-mw-doku] > span { display: flex; align-items: baseline; gap: 9px; color: var(--muted); }
/* `mw-getan`, nicht `mw-fertig`: `.mw-fertig` ist weiter unten (Zeile ~625) die
   dunkle Abschlussseite — tannengrün, `min-height: 72svh`, `display: flex`.
   Beide Namen im selben Stylesheet hieß: jeder erledigte Punkt der Schiene wurde
   zur Abschlussseite, 804 px hoch und tannengrün gefüllt. Genau der „dunkle
   Klotz" vom 17.08.2026. Er erschien erst nach dem ersten „Weiter", weil vorher
   kein Punkt erledigt ist — deshalb war er in allen Messungen von Schritt 01
   unsichtbar. Zustandsklassen dieser Seite gehören unter `mw-schiene`-Namen. */
.mw-schiene li.mw-getan { border-top-color: var(--gruen); }
.mw-schiene li.mw-getan a { color: var(--gruen); }
.mw-schiene li.mw-jetzt { border-top-color: var(--tanne); }
.mw-schiene li.mw-jetzt a { color: var(--tanne); }
/* Ränder reagieren immer in derselben Richtung: von links auflaufend. */
.mw-schiene a:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; }

/* --- Ein Schritt -------------------------------------------------------- */
/* Der Schritt ist selbst ein Raster: links die Konturziffer als durchlaufende
   Marginalie, rechts alles andere. Ohne dieses Raster läuft der Hilfetext
   unter die Ziffer statt an der Überschrift zu hängen — genau das war der
   Fehler der ersten Fassung. */
/* EIN Maß für die Marginalienspalte, an zwei Rastern benutzt (`.mw-schritt` und
   `.mw-legende`) — und die Konturziffer hängt daran.

   Vorher standen Spaltenbreite (9vw, max 140px) und Ziffergröße (11vw, max
   168px) unabhängig voneinander im Stylesheet. Bei 1440 px waren das 130 px
   Spalte gegen rund 170 px Ziffer, und `overflow: hidden` (das die
   Einfahrbewegung braucht) schnitt die zweite Ziffer ab. Nur eines von beiden
   zu ändern hätte den Fehler bei der nächsten Fensterbreite wiederholt.

   Die Ziffergröße ist deshalb 8.4vw zu 10vw Spalte — dasselbe Verhältnis in
   jeder Breite. Zwei Ziffern der Space Grotesk Bold sind bei -.07em Laufweite
   rund 1,05 × der Schriftgröße breit, also etwa 88 % der Spalte. Nachgemessen
   bei 390, 700, 1024, 1440 und 1920 px.

   `overflow-x: visible` wäre keine Lösung: Steht eine Achse auf `hidden`, gilt
   `visible` auf der anderen als `auto` — daraus würde ein Rollbereich. */
.mw-body { --mw-marginalie: clamp(84px, 10vw, 160px); --mw-spalte-luft: clamp(16px, 2.2vw, 34px); }

/* Die durchlaufene Einleitung — Bühne und Wege-Band. `display: none` und nicht
   `height: 0`: Die Bühne ist `position: sticky` und trüge sonst weiter
   Klebeverhalten und Bildlast mit sich herum. Gesetzt wird die Klasse von
   mitglied.js, sobald die Einleitung einmal vollständig vorbei ist (Begründung
   dort). Ohne Javascript passiert nichts. */
/* .mw-buehne-vorbei entfallen 06.09.2026 — siehe mitglied.js, Abschnitt 0. */

.mw-schritt {
  border: 0; margin: 0 0 clamp(44px, 6vw, 78px); padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) {
  .mw-schritt {
    grid-template-columns: var(--mw-marginalie) minmax(0, 1fr);
    column-gap: var(--mw-spalte-luft);
  }
  /* Die Überschrift trägt ihr eigenes Raster und spannt über beide Spalten;
     alles andere sitzt in der zweiten Spalte, also unter der Überschrift. */
  .mw-schritt > .mw-legende { grid-column: 1 / -1; }
  .mw-schritt > :not(.mw-legende) { grid-column: 2; }
}
/* Verstecken über eine EIGENE Klasse, nicht über das `hidden`-Attribut allein.
   Grund: `.mw-schritt` setzt `display: grid`, und eine Klassenregel schlägt die
   Browser-Regel `[hidden] { display: none }`. Das ging bisher über die höhere
   Spezifität von `.mw-js .mw-schritt[hidden]` — aber wer sich beim Verstecken
   eines Formularschritts auf Spezifitätsarithmetik verlässt, hat schon
   verloren. `!important` ist hier die richtige Antwort: Ein versteckter
   Schritt darf unter keinen Umständen sichtbar sein. Das Attribut `hidden`
   bleibt zusätzlich gesetzt — für Vorlesegeräte. */
.mw-schritt.mw-aus { display: none !important; }

/* Die Skalenspitze: Konturziffer neben dem Titel, mit optischem
   Randausgleich nach links. */
.mw-legende {
  display: grid; grid-template-columns: var(--mw-marginalie) minmax(0, 1fr);
  column-gap: var(--mw-spalte-luft); align-items: start;
  padding: 0; margin: 0 0 22px; width: 100%; font-weight: 400;
}
@media (max-width: 699px) {
  .mw-legende { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; }
}
.mw-legnr {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(68px, 8.4vw, 132px); line-height: .74; letter-spacing: -.07em;
  color: transparent; -webkit-text-stroke: 2px var(--linie-karte, #d7e0d9);
  margin-left: clamp(-14px, -1vw, -4px);   /* optischer Randausgleich */
  user-select: none; display: block;
  /* `overflow:hidden` braucht die Einfahrbewegung (die Ziffer kommt hinter der
     Kante hervor). Bei line-height .74 ist die Zeilenbox aber niedriger als
     die Ziffer — ohne Polsterung schnitte die Kante ihr die Unterlängen ab.
     Dieselbe Falle wie beim Hero in seite.css. */
  overflow: hidden; padding-bottom: .1em; padding-top: .16em; margin-top: -.16em;
}
/* Der Schrittwechsel ist die eine Bewegung im Formular: die Ziffer fährt
   hinter der Oberkante hervor. Sie zeigt Fortschritt, sie schmückt nicht. */
.mw-legnr > span { display: block; animation: mwZiffer .3s var(--ease) both; }
@keyframes mwZiffer { from { transform: translateY(22%); opacity: 0 } to { transform: none; opacity: 1 } }

.mw-legtitel {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(21px, 2.5vw, 33px); letter-spacing: -.03em; line-height: 1.04;
  color: var(--tinte); margin: clamp(6px, 1vw, 16px) 0 0; text-wrap: balance;
}
.mw-hilfe {
  color: var(--sekundaer); font-size: 16px; font-weight: 300; line-height: 1.62;
  margin: 0 0 26px; max-width: 66ch; text-wrap: pretty;
}
.mw-untertitel {
  font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gruen);
  margin: clamp(30px, 4vw, 46px) 0 14px;
  padding-top: 12px; border-top: 1px solid var(--hairline);
}

/* --- Eine Person, eine Karte ------------------------------------------------
   Wer wird Mitglied, wer ist die zweite Person, wer sind die
   Erziehungsberechtigten: Bei drei Personengruppen mit je acht Feldern reicht
   eine Überschrift auf einer Haarlinie nicht — man sieht nicht, wo eine Gruppe
   endet („was gehört wohin und wozu", Andreas). Jede Gruppe steht deshalb in
   einem eigenen Rahmen, wie in der Vorlage. */
.mw-person {
  border: 1px solid var(--linie-karte, #e4e9e3); border-radius: 14px;
  padding: clamp(18px, 2.2vw, 26px);
  margin: 0 0 clamp(18px, 2.4vw, 28px);
}
/* In der Karte trägt die Überschrift keine Linie mehr — der Rahmen ist die
   Abgrenzung, eine zweite wäre eine Doppelung. */
.mw-person > .mw-untertitel {
  margin: 0 0 16px; padding-top: 0; border-top: 0;
  font-size: 13px; letter-spacing: .08em; color: var(--tinte);
}
/* Eine ZWEITE Überschrift in derselben Karte — bei den Erziehungsberechtigten
   folgt auf die Adressfelder das Sorgerecht. Sie ist keine neue Gruppe, sondern
   ein zweiter Abschnitt derselben, und braucht deshalb wieder Luft und die
   Haarlinie: Ohne sie klebte „Sorgerecht" an der Unterkante des Telefonfelds. */
.mw-person > .mw-gitter + .mw-untertitel {
  margin-top: clamp(24px, 3vw, 34px);
  padding-top: 14px; border-top: 1px solid var(--hairline);
}
/* Die Ziffer der Gruppe ist grün — dasselbe Mittel wie bei den Schritten, nur
   eine Größe kleiner. Als eigenes Element und nicht über `::first-letter`: Das
   hätte bei „Erziehungsberechtigte" das E grün gefärbt und wie ein Tippfehler
   ausgesehen. */
.mw-pnr { color: var(--gruen); }

/* --- Felder: gerahmte Kästen ------------------------------------------------
   Umgestellt am 17.08.2026 („totales chaos was gehört wohin und wozu", Andreas).
   Vorher waren die Felder nackte Unterstriche in einem Raster: Bei acht Feldern
   nebeneinander sah man Linien und Hinweistexte, aber nicht, wo ein Feld anfängt
   und aufhört. Ein Kasten sagt das ohne ein Wort.

   Maßstab ist die Vorlage `gerhelm-2026/nutzungsberechtigungsvertrag.html`:
   1 px Rahmen, 2 px Unterkante, 9 px Radius, 12/14 px Innenabstand. Die
   Unterkante ist dicker als der Rahmen — dadurch behält das Feld die Richtung
   des alten Unterstrichs, ohne seine Unschärfe. */
.mw-gitter { display: grid; gap: 18px clamp(20px, 2.2vw, 28px); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.mw-feld { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.mw-feld-breit { grid-column: 1 / -1; }
.mw-feld > label {
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--nav, #3c473f);
}
.mw-stern { color: var(--gruen); -webkit-text-stroke: 0; }
.mw-feld input, .mw-feld select, .mw-feld textarea {
  font-family: 'Hanken Grotesk', sans-serif; font-size: 16px; font-weight: 400;
  color: var(--tinte); background: #fff;
  border: 1px solid var(--linie-karte, #e4e9e3);
  border-bottom: 2px solid var(--hairline);
  padding: 12px 14px; border-radius: 9px; width: 100%;
  transition: border-color var(--t-schnell) ease-out, box-shadow var(--t-schnell) ease-out;
}
.mw-feld select { cursor: pointer; }
.mw-feld textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.mw-feld input:hover, .mw-feld select:hover, .mw-feld textarea:hover { border-bottom-color: var(--gruen); }
.mw-feld input:focus, .mw-feld select:focus, .mw-feld textarea:focus {
  outline: none; border-bottom-color: var(--gruen);
  box-shadow: 0 0 0 3px rgba(154, 215, 94, .35);
}
.mw-feld input:focus-visible, .mw-feld select:focus-visible, .mw-feld textarea:focus-visible {
  outline: 2px solid var(--gruen); outline-offset: 2px;
}
/* Ein Feld, das sich ERGIBT (das Kreditinstitut zur IBAN): kein weißer Kasten,
   der zum Tippen einlädt, sondern eine ruhige Fläche. */
.mw-feld input[readonly] {
  background: var(--mint); border-color: transparent;
  border-bottom-color: var(--linie-karte, #e4e9e3); color: var(--sekundaer);
}
.mw-feld input[readonly]:hover { border-bottom-color: var(--linie-karte, #e4e9e3); }
.mw-hinweis { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ── Eine Auswahl aus wenigen Möglichkeiten ──────────────────────────────────
   Dieselbe Sprache wie die Tarifkarten in Schritt 01: weiße Fläche auf
   Haarlinien, und es reagiert die linke KANTE, nicht die Fläche. Eine
   Ausklappliste wäre hier falsch — sie verbirgt drei Möglichkeiten, von denen
   eine Pflicht ist, und sieht in jedem Browser anders aus. */
.mw-wahl { border: 0; padding: 0; margin: clamp(24px, 3vw, 36px) 0 0; }
.mw-wahl > legend {
  font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  padding: 0; margin-bottom: 4px;
}
.mw-wahl-hilfe {
  font-size: 14px; font-weight: 300; line-height: 1.55; color: var(--sekundaer);
  margin: 0 0 12px; max-width: 62ch;
}
/* Karten mit SICHTBAREM Radioknopf, abgesetzt, mit Radius — Maßstab ist die
   Vorlage `gerhelm-2026/nutzungsberechtigungsvertrag.html`.

   Vorher waren es randlose Kästen in einem Haarlinienraster, in denen der
   Radioknopf versteckt war und nur eine grüne Kante den Zustand zeigte
   („die kästen sehen einfach scheisse aus", Andreas, 17.08.2026). Der Fehler war
   nicht die Farbe, sondern die fehlende Bedienlogik: Eine Auswahl muss aussehen
   wie eine Auswahl. Der Knopf ist jetzt da, wo ihn jeder erwartet. */
.mw-wahl-karten {
  /* 175 px, damit die DREI Möglichkeiten in einer Personenkarte in EINE Zeile
     passen (dort sind rund 570 px frei: 3 × 175 + 2 × 10 Abstand). Mit 210 px
     rutschte die dritte allein in eine zweite Zeile. */
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
}
.mw-wahl-karte {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer; background: #fff;
  border: 1px solid var(--linie-karte, #e4e9e3); border-radius: 14px; padding: 14px 16px;
  transition: border-color var(--t-schnell) ease-out, background-color var(--t-schnell) ease-out;
}
.mw-wahl-karte input {
  margin-top: 3px; width: 17px; height: 17px; flex: none; cursor: pointer;
  accent-color: var(--gruen);
}
.mw-wahl-karte:hover { background: var(--mint); }
/* `:has()` ist hier nur Schmuck: Der Zustand steht schon im Radioknopf selbst.
   Ein Browser ohne `:has()` zeigt die Auswahl also trotzdem an — anders als in
   der ersten Fassung, wo die Kante die einzige Anzeige war. */
.mw-wahl-karte:has(input:checked) {
  border-color: var(--gruen); background: var(--mint);
  box-shadow: inset 0 0 0 1px var(--gruen);
}
.mw-wahl-kern { display: block; }
.mw-wahl-titel {
  display: block; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; color: var(--tinte); margin-bottom: 4px;
}
.mw-wahl-dazu { display: block; font-size: 13.5px; font-weight: 300; line-height: 1.45; color: var(--sekundaer); }
.mw-wahl.mw-feld-fehler .mw-wahl-karte { border-color: var(--fehler, #c0392b); }
.mw-wahl .mw-fehler { display: block; margin-top: 8px; }
/* Ein Satz, der eine Bedingung nennt, nicht erklärt. Er steht auf einer Kante
   und trägt die Schrift der Marke — Skalensprung nach unten, damit er als
   Feststellung liest und nicht als Fließtext mitgelesen wird. */
.mw-pflichtsatz {
  font-family: 'Space Grotesk', sans-serif; font-size: 13.5px; font-weight: 600;
  line-height: 1.55; color: var(--tanne); margin: 0 0 clamp(22px, 3vw, 32px);
  padding-left: 16px; border-left: 2px solid var(--gruen); max-width: 56ch;
}
.mw-fehler {
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .02em; color: var(--live);
}
.mw-feld-fehler input, .mw-feld-fehler select { border-bottom-color: var(--live); border-bottom-width: 2px; }
.mw-feld-fehler textarea { border-color: var(--live); }
.mw-pflichthinweis { font-size: 13px; color: var(--muted); margin: 18px 0 0; }

/* Der Honigtopf muss für Menschen unsichtbar und für Roboter erreichbar sein —
   display:none macht ihn auch für den Roboter erkennbar. */
.mw-topf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Ankreuzfelder ----------------------------------------------------- */
.mw-haken { margin: 0 0 18px; }
.mw-haken label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; cursor: pointer; }
.mw-haken input {
  margin-top: 4px; width: 18px; height: 18px; accent-color: var(--gruen);
  border-radius: 0; cursor: pointer;
}
.mw-haken span { font-size: 15.5px; font-weight: 300; line-height: 1.6; color: var(--sekundaer); max-width: 68ch; }
.mw-haken strong { font-weight: 600; color: var(--tinte); }
.mw-haken input:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; }
/* Die Beanstandung gehört unter den TEXT, nicht unter das Kästchen. Sie ist ein
   Geschwister des `label` und begann deshalb am linken Rand des Absatzes — im
   Bild sah das aus wie ein Umbruchfehler. 32 px = Kästchen (18) + Spalte (14),
   dieselben Werte wie im Raster darüber. */
.mw-haken .mw-fehler { display: block; margin-top: 6px; padding-left: 32px; }

/* --- Der Umschalter der Zahlweise über den Karten ----------------------
   Dieselbe gleitende Pille wie in der Beitragstafel auf /konditionen, hier mit
   eigenen Namen: Diese Seite lädt konditionen.css nicht, und generische Namen
   sind auf dieser Website schon belegt (mitglied.css, Kopfkommentar).
   Ohne Javascript ist die Leiste sinnlos — sie bedient nur die Anzeige — und
   deshalb ausgeblendet; das Auswahlfeld in Schritt 03 bleibt die Wahrheit. */
.mw-zahlleiste { display: none; }

/* Genau umgekehrt: Was die Leiste ersetzt, ist mit Skript nicht zu sehen. Die
   Zahlweise wird EINMAL gewählt — oben, wo auch der Betrag dazu steht. Das Feld
   in Schritt 03 bleibt aber im Formular: Es sendet, das Skript schreibt hinein.
   Nur wer kein Skript hat, sieht (und braucht) es. */
.mw-js .mw-nur-ohne-js { display: none; }

/* Und das Raster hält seine Spalte. `auto-fit` klappt leere Spuren zusammen —
   in Schritt 03 blieb dadurch ein einziges Auswahlfeld für ein Datum übrig, so
   breit wie ein ganzer Absatz. `auto-fill` lässt die zweite Spur stehen; auf
   dem Handy passt ohnehin nur eine, dann ist es wieder die volle Breite. */
.mw-js .mw-gitter:has(> .mw-nur-ohne-js) {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.mw-js .mw-zahlleiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin: 0 0 18px;
}
.mw-zahlleiste-titel {
  font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.mw-pillen {
  position: relative; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px;
  border: 1px solid var(--hairline); border-radius: 999px;
}
/* Bewegt und dehnt sich ausschließlich per transform — `width` zu animieren
   erzwänge bei jedem Bild ein Layout. Grundbreite 100 px, Rest über scaleX. */
.mw-pille-glas {
  position: absolute; left: 0; top: 0; width: 100px; background: var(--tanne);
  border-radius: 999px; opacity: 0; transform-origin: left top; pointer-events: none;
  transition: transform .15s ease, opacity .12s ease;
}
.mw-pillen label {
  position: relative; z-index: 1; cursor: pointer; padding: 8px 15px; border-radius: 999px;
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--sekundaer);
  transition: color .12s ease;
}
.mw-pillen input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mw-pillen input:checked + span { color: #fff; }
.mw-pillen label:has(input:focus-visible) { outline: 2px solid var(--gruen); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .mw-pille-glas { transition: none; }
}
@media (max-width: 520px) {
  .mw-pillen label { padding: 8px 12px; font-size: 10.5px; letter-spacing: .08em; }
}
/* Am Handy passen vier Zahlweisen nicht in eine Zeile. Bisher brachen sie
   um — und die Kapsel, die sie umschließt, ist auf `border-radius:999px`
   gebaut: Um zwei Zeilen gelegt wird daraus keine Pille mehr, sondern eine
   verbogene Blase mit einem einzelnen Wort in der zweiten Reihe.
   Also gar nicht erst umbrechen lassen: ein 2 × 2-Raster aus Pillen, die
   jede für sich rund sind. Die Kapsel entfällt damit, und mit ihr das
   gleitende Glas — gewählt ist, was gefüllt ist. Waagrecht scrollen wäre
   die andere Möglichkeit gewesen; die Seite tut das nirgends. */
@media (max-width: 560px) {
  .mw-zahlleiste { display: block; }
  .mw-zahlleiste-titel { display: block; margin-bottom: 10px; }
  /* width:100%, weil die Leiste darüber ein Flex-Container ist und das
     Raster sonst nur so breit wird wie sein Inhalt (gemessen: 238 von
     390 px) — die Hälfte der Fläche läge daneben brach. */
  .mw-pillen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%;
    padding: 0; border: 0; border-radius: 0; }
  .mw-pille-glas { display: none; }
  .mw-pillen label { padding: 13px 8px; text-align: center; font-size: 10.5px;
    letter-spacing: .06em; border: 1px solid var(--hairline); }
  .mw-pillen label:has(input:checked) { background: var(--tanne); border-color: var(--tanne); }
  .mw-pillen input:checked + span { color: #fff; }
}

/* --- Tarifwahl: scharfkantig, Preis in Space Grotesk ------------------- */
/* Die Haarlinien sitzen an den Karten, NICHT als Hintergrund des Rasters:
   Bei dreizehn Tarifen in zwei Spalten bleibt eine Zelle leer, und die hätte
   als grauer Block dagestanden. So endet das Raster einfach dort, wo die
   letzte Karte endet. */
.mw-tarife { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
             border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.mw-tarif {
  position: relative; display: block; cursor: pointer; background: #fff;
  border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.mw-tarif input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mw-tarif-kern {
  display: block; padding: 18px 20px 20px;
  border-left: 3px solid transparent;   /* der Rand reagiert, nicht die Fläche */
  transition: border-color var(--t-schnell) ease-out, background-color var(--t-schnell) ease-out;
}
.mw-tarif:hover .mw-tarif-kern { border-left-color: var(--linie-karte, #d7e0d9); background: #fcfefc; }
.mw-tarif input:checked + .mw-tarif-kern { border-left-color: var(--gruen); background: var(--mint); }
.mw-tarif input:focus-visible + .mw-tarif-kern { outline: 2px solid var(--gruen); outline-offset: -2px; }
.mw-tarif-kern b {
  display: block; font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: -.01em; color: var(--tinte);
}
.mw-tarif-preis {
  display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 27px; letter-spacing: -.03em; color: var(--tanne);
  font-variant-numeric: tabular-nums; margin: 6px 0 8px;
}
.mw-tarif-preis small { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* Die Ersparnis der Jahreszahlung. Leer heißt weg: Bei jährlicher Ansicht steht
   dort ein kurzer Vermerk, bei „auf Anfrage" nichts — und eine leere Zeile darf
   keine Lücke in die Karte reißen. */
.mw-tarif-spar:empty { display: none; }
.mw-tarif-spar {
  display: block; margin-top: 6px;
  font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gruen);
}
.mw-sparhinweis:empty { display: none; }
.mw-tarif-recht, .mw-tarif-nachweis {
  display: block; font-size: 13.5px; font-weight: 300; line-height: 1.5; color: var(--sekundaer);
}
.mw-tarif-nachweis { margin-top: 6px; color: var(--muted); font-size: 12.5px; }
/* Hover zeigt Information, nicht Farbe: der Nachweis-Hinweis erscheint erst
   beim Zeigen oder wenn der Tarif gewählt ist. */
.mw-tarif-nachweis { max-height: 0; overflow: hidden; opacity: 0; transition: max-height var(--t-mittel) var(--ease), opacity var(--t-schnell) ease-out; }
.mw-tarif:hover .mw-tarif-nachweis,
.mw-tarif:focus-within .mw-tarif-nachweis,
.mw-tarif input:checked + .mw-tarif-kern .mw-tarif-nachweis { max-height: 5em; opacity: 1; margin-top: 6px; }
.mw-weg { margin-top: 22px; font-size: 14.5px; }
.mw-weg a { color: var(--gruen); border-bottom: 1px solid transparent; transition: border-color var(--t-schnell) ease-out; }
.mw-weg a:hover { border-bottom-color: var(--gruen); }

.mw-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
/* Bei `.btn` reicht das Attribut `hidden` NICHT: `.btn { display: inline-flex }`
   aus seite.css ist eine Klassenregel und schlägt die Browservoreinstellung
   `[hidden] { display: none }`. Folge ohne diese Zeile: „Weiter" bleibt im
   letzten Schritt stehen, klickt sich und tut nichts — „danach geht es nicht
   weiter". Dieselbe Falle wie bei den Schritten, dort behoben mit `.mw-aus`. */
.mw-knoepfe .btn[hidden] { display: none !important; }
.mw-btn-leise { border-color: var(--linie-karte, #d7e0d9); color: var(--sekundaer); }
.mw-btn-leise:hover { background: var(--mint); border-color: var(--gruen); color: var(--tanne); }

/* ══════════════════════════════════════════════════════════════════════════
   DAS BLATT — das Merkbild. Rechts als Karte, später über die ganze Breite.
   ══════════════════════════════════════════════════════════════════════════ */
.mw-blatt {
  position: relative; background: #fff;
  /* Scharfkantig und mit Papierschatten — es LIEGT auf der Fläche. */
  border-radius: 0;
  box-shadow: 0 1px 0 var(--hairline), 0 18px 40px -28px rgba(11,65,43,.35);
  padding: 26px 26px 22px 40px;
}
/* Die Mint-Fläche hinter dem Blatt: nur so weit, dass Papier sichtbar liegt. */
.mw-blatt-flaeche { background: var(--mint); padding: clamp(18px, 2vw, 30px); }
@media (min-width: 1080px) { .mw-blatt-flaeche { position: sticky; top: 92px; } }

/* Das stille Detail: das Aktenzeichen läuft senkrecht am Blattrand. */
.mw-blatt-akte {
  position: absolute; left: 14px; top: 26px; bottom: 22px; width: 12px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: 'Space Grotesk', sans-serif; font-size: 8.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; user-select: none;
}
.mw-blatt-kopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--tanne);
}
.mw-blatt-kopf b {
  font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tanne);
}
.mw-blatt-kopf span {
  font-family: 'Space Grotesk', sans-serif; font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
/* Die Zeilen des Blatts: leer wirken sie als Linien, gefüllt tragen sie Text. */
.mw-blatt dl { margin: 0; }
.mw-blatt-zeile {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 10px; align-items: baseline;
  padding: 11px 0 9px; border-bottom: 1px solid var(--hairline);
}
.mw-blatt-zeile dt {
  font-family: 'Space Grotesk', sans-serif; font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0;
}
.mw-blatt-zeile dd {
  margin: 0; text-align: right; font-family: 'Space Grotesk', sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--tinte);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-schnell) ease-out;
}
/* Noch nicht ausgefüllt: die Zeile ist eine Linie, kein Platzhaltertext. */
.mw-blatt-zeile.mw-leer dd { color: var(--linie-karte, #d7e0d9); font-weight: 400; }
.mw-blatt-summe { border-bottom: 0; padding-top: 14px; }
.mw-blatt-summe dt { color: var(--tanne); }
.mw-blatt-summe dd { font-size: 24px; color: var(--tanne); letter-spacing: -.03em; }
.mw-blatt-fuss {
  font-size: 12.5px; font-weight: 300; line-height: 1.5; color: var(--muted);
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--hairline);
}
.mw-blatt-fuss:empty { display: none; }

/* Am Handy liegt das Blatt nicht daneben, sondern klebt als schmale Leiste
   unten — dort ist es im Blick, ohne den Platz zu nehmen, den Felder brauchen.
   Unter 560 px ist der Effekt ersetzt, nicht geschrumpft. */
@media (max-width: 1079px) {
  .mw-blatt-flaeche {
    position: sticky; bottom: 0; z-index: 30; padding: 0;
    margin: 0 calc(-1 * var(--inset));
  }
  .mw-blatt {
    padding: 10px var(--inset) 12px; box-shadow: 0 -10px 24px -18px rgba(11,65,43,.4);
    border-top: 2px solid var(--tanne);
  }
  .mw-blatt-akte, .mw-blatt-kopf, .mw-blatt-fuss { display: none; }
  .mw-blatt dl { display: flex; gap: 0 20px; justify-content: space-between; }
  .mw-blatt-zeile { border: 0; padding: 0; grid-template-columns: 1fr; gap: 1px; }
  .mw-blatt-zeile dd { text-align: left; font-size: 13.5px; }
  .mw-blatt-zeile dt { font-size: 8.5px; }
  .mw-blatt-summe dd { font-size: 16px; }
}

/* --- Sammelmeldung ----------------------------------------------------- */
.mw-sammelfehler {
  border-left: 3px solid var(--live); padding: 16px 0 16px 20px; margin: 0 0 34px;
}
.mw-sammelfehler b {
  display: block; margin-bottom: 8px; font-family: 'Space Grotesk', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--live);
}
.mw-sammelfehler ul { margin: 0; padding-left: 18px; font-size: 15px; font-weight: 300; }
.mw-sammelfehler a { color: var(--sekundaer); border-bottom: 1px solid var(--hairline); }
.mw-sammelfehler a:hover { color: var(--tinte); border-bottom-color: var(--tinte); }
.mw-ohnejs {
  border-left: 3px solid var(--gruen); background: var(--mint);
  padding: 16px 20px; margin: 0 0 30px; font-size: 15.5px; font-weight: 300; line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════════
   03 · DIE RUHE — ein Bildband über die ganze Breite, ein Satz darin
   Die Pause vor dem Dokument. Ohne Pause keine Betonung.
   ══════════════════════════════════════════════════════════════════════════ */
.mw-ruhe {
  /* Direktes Kind von <main>, also von sich aus randlos. */
  position: relative; margin: 0 0 clamp(40px, 6vw, 80px);
  min-height: 34svh; display: grid; align-items: end;
  background: var(--pine); overflow: hidden;
}
.mw-ruhe img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%;
}
.mw-ruhe::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,48,31,.86) 0%, rgba(7,48,31,.35) 55%, rgba(7,48,31,.12) 100%);
}
.mw-ruhe p {
  position: relative; z-index: 1; margin: 0; padding: clamp(28px, 5vw, 60px) var(--inset);
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(20px, 3.2vw, 40px); letter-spacing: -.035em; line-height: 1.06;
  color: #fff; max-width: 26ch; text-wrap: balance;
}

/* ══════════════════════════════════════════════════════════════════════════
   04 · DAS DOKUMENT — dasselbe Blatt, aufgeklappt
   ══════════════════════════════════════════════════════════════════════════ */
.mw-dok { padding: clamp(30px, 5vw, 60px) var(--inset) clamp(60px, 8vw, 110px); }
.mw-dok-zurueck { margin-bottom: 26px; }
.mw-dok-zurueck a {
  font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gruen);
  display: inline-flex; gap: 8px; align-items: center;
}
.mw-dok-zurueck a:hover { color: var(--tanne); }

.mw-dok-kopf { max-width: 30ch; margin-bottom: clamp(26px, 4vw, 44px); }
.mw-dok-kicker {
  font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gruen); margin: 0 0 10px;
}
.mw-dok-kopf h1 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(30px, 5.2vw, 62px); letter-spacing: -.05em; line-height: .92;
  color: var(--tinte); margin: 0 0 14px; text-wrap: balance;
}
.mw-dok-lead { font-size: 17px; font-weight: 300; line-height: 1.55; color: var(--sekundaer); margin: 0; max-width: 46ch; }

/* Das aufgeklappte Blatt: Mint-Fläche, Papier darauf, wieder das Aktenzeichen. */
.mw-dok-blatt {
  background: var(--mint); padding: clamp(14px, 2.4vw, 34px);
  margin: 0 calc(-1 * var(--inset)) clamp(34px, 5vw, 60px);
  padding-left: var(--inset); padding-right: var(--inset);
}
.mw-dok-papier {
  position: relative; background: #fff; max-width: 82ch; margin: 0 auto;
  padding: clamp(26px, 4vw, 56px) clamp(22px, 4vw, 62px) clamp(30px, 4vw, 56px) clamp(38px, 5vw, 78px);
  box-shadow: 0 1px 0 var(--hairline), 0 26px 60px -40px rgba(11,65,43,.4);
}
.mw-dok-papier .mw-blatt-akte { left: clamp(16px, 2vw, 30px); top: clamp(26px, 4vw, 56px); bottom: clamp(30px, 4vw, 56px); }

.mw-eck { width: 100%; border-collapse: collapse; margin: 0 0 clamp(24px, 3vw, 38px); }
.mw-eck th, .mw-eck td {
  text-align: left; vertical-align: top; padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.mw-eck th {
  width: 42%; font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.mw-eck td { font-size: 15.5px; font-variant-numeric: tabular-nums; color: var(--tinte); }
/* Hover zeigt Information: die Zeile hebt ihre Beschriftung mit hervor. */
.mw-eck tbody tr:hover th { color: var(--gruen); }
.mw-eck tbody tr:hover td { color: var(--tanne); }

/* --- Die Fristenachse: das Datenbild der Seite -------------------------
   Zwei Balken, zwei Marken an verschiedenen Stellen. Das macht in einem Blick
   sichtbar, was drei Sätze erklären müssten. Ganz ohne SVG — eine viewBox
   skaliert auch Schrift und Strichbreite mit, und HTML-Marken darüber saßen
   dann woanders als die Linien. Prozent stimmen immer.
   Gezeichnet wird einmal beim Aufbau, 700 ms. */
.mw-achse { margin: 0 0 clamp(28px, 4vw, 46px); }
.mw-achse-titel {
  font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gruen); margin: 0 0 18px;
}
.mw-achse-spuren { display: grid; gap: 16px; }
.mw-spur { position: relative; height: 3px; background: var(--hairline); }
.mw-spur-fuellung {
  position: absolute; inset: 0 auto 0 0; background: var(--tanne);
  transform-origin: left center; animation: mwSpur .7s var(--ease) .15s both;
}
.mw-spur-verein .mw-spur-fuellung { background: var(--gruen); }
@keyframes mwSpur { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.mw-spur-marke {
  position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%;
  background: var(--tanne); transform: translate(-50%, -50%);
  animation: mwMarke .25s var(--ease) .8s both;
}
.mw-spur-verein .mw-spur-marke { background: var(--gruen); }
@keyframes mwMarke { from { opacity: 0; transform: translate(-50%, -50%) scale(.5) } to { opacity: 1 } }
.mw-achse-start {
  margin: 10px 0 0;
  font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.mw-achse-legende {
  display: grid; gap: 12px 30px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--hairline);
}
.mw-achse-legende dt {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.mw-achse-legende dd {
  margin: 5px 0 0 21px; font-family: 'Space Grotesk', sans-serif; font-size: 17px;
  font-weight: 700; letter-spacing: -.02em; color: var(--tinte); font-variant-numeric: tabular-nums;
}
.mw-punkt { width: 11px; height: 11px; border-radius: 50%; background: var(--tanne); flex: 0 0 auto; }
.mw-punkt-verein { background: var(--gruen); }
.mw-achse-text { font-size: 14px; font-weight: 300; line-height: 1.55; color: var(--sekundaer); margin: 16px 0 0; max-width: 62ch; }

.mw-dok-merken {
  border-left: 3px solid var(--tanne); background: var(--mint);
  padding: 18px 22px; margin: 0 0 clamp(28px, 4vw, 44px);
  font-size: 15.5px; font-weight: 300; line-height: 1.62;
}
.mw-dok-merken b { font-weight: 600; color: var(--tanne); }

/* Der Vertrag in Lesegröße — er soll gelesen werden, nicht überflogen. */
.mw-vertrag { font-size: 16px; font-weight: 300; line-height: 1.72; color: var(--text); }
.mw-vertrag h2 {
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tanne);
  margin: clamp(26px, 3vw, 38px) 0 10px; padding-top: 12px; border-top: 1px solid var(--hairline);
}
.mw-vertrag p { margin: 0 0 14px; max-width: 68ch; text-wrap: pretty; }
.mw-praeambel { color: var(--sekundaer); }

.mw-angaben { display: grid; grid-template-columns: minmax(150px, 26%) 1fr; gap: 12px 24px; margin: 0 0 clamp(24px, 3vw, 36px); }
.mw-angaben dt {
  font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.mw-angaben dd { margin: 0; font-size: 15.5px; font-weight: 300; line-height: 1.6; color: var(--tinte); }
@media (max-width: 620px) {
  .mw-angaben { grid-template-columns: 1fr; gap: 3px 0; }
  .mw-angaben dd { margin-bottom: 14px; }
}

.mw-fassung {
  font-size: 12.5px; font-weight: 300; line-height: 1.6; color: var(--muted);
  margin: 0; padding-top: 16px; border-top: 1px solid var(--hairline);
}
.mw-fassung code { font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; word-break: break-all; }

/* --- Unterschrift: Teil des Blatts, nicht ein Kasten daneben ----------- */
/* ── Die Pflichttafel vor dem Abschluss ──────────────────────────────────────
   § 312j Abs. 2 BGB verlangt die wesentlichen Angaben „hervorgehoben" und
   unmittelbar vor der Bestellung. Hervorgehoben heißt hier: dunkle Fläche,
   nicht nur eine weitere Haarlinie — sie muss sich von den fünf Seiten Vertrag
   darüber unterscheiden, sonst ist sie optisch dasselbe wie alles andere.
   Sie steht direkt über den Knöpfen und darf von ihnen nicht getrennt werden. */
.mw-pflichttafel {
  background: var(--tanne); color: #fff; padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 30px);
  margin: clamp(26px, 3.5vw, 40px) 0 22px;
}
.mw-pflichttafel-titel {
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--lime);
  margin: 0 0 16px;
}
.mw-pflichttafel dl { display: grid; gap: 0; margin: 0; }
.mw-pflichttafel dl > div {
  display: grid; grid-template-columns: minmax(120px, 22%) minmax(0, 1fr); gap: 8px 24px;
  padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .16);
}
.mw-pflichttafel dl > div:first-child { border-top: 0; padding-top: 0; }
.mw-pflichttafel dt {
  font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .62);
  padding-top: 3px;
}
.mw-pflichttafel dd { margin: 0; font-size: 15.5px; font-weight: 300; line-height: 1.55; }
.mw-pflichttafel dd b { font-weight: 600; }
@media (max-width: 620px) {
  .mw-pflichttafel dl > div { grid-template-columns: 1fr; gap: 2px; }
}

.mw-unterschrift { margin-top: clamp(30px, 4vw, 50px); }
.mw-pad { margin: 18px 0 22px; }
.mw-pad canvas {
  width: 100%; max-width: 620px; height: 150px; display: block;
  border: 0; border-bottom: 2px solid var(--tanne); background: #fff;
  touch-action: none; cursor: crosshair;
}
.mw-pad-fuss {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  max-width: 620px; margin-top: 10px;
}
.mw-pad-fuss span {
  font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

.mw-gesperrt { border-top: 2px solid var(--tanne); padding: clamp(24px, 3vw, 34px) 0 0; margin: clamp(26px, 4vw, 40px) 0 0; }
.mw-gesperrt h2 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(20px, 2.6vw, 30px); letter-spacing: -.03em; color: var(--tinte); margin: 0 0 14px;
}
.mw-gesperrt p { font-size: 16px; font-weight: 300; line-height: 1.62; color: var(--sekundaer); margin: 0 0 16px; max-width: 66ch; }
.mw-gesperrt-wege { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   07 · DER ABSCHLUSS — typografisches Plakat, dunkel, mit dem Echo
   Der letzte Bildschirm ist so gestaltet wie der erste.
   ══════════════════════════════════════════════════════════════════════════ */
.mw-fertig {
  background: var(--tanne); color: #fff;
  padding: clamp(60px, 10vw, 140px) var(--inset) clamp(50px, 8vw, 110px);
  min-height: 72svh; display: flex; flex-direction: column; justify-content: center;
}
.mw-fertig .mw-dok-kicker { color: var(--lime); }
/* Das ECHO: die Konturschrift der Bühne, genau einmal wieder — als Nummer. */
.mw-fertig-nummer {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(38px, 8vw, 116px); line-height: .86; letter-spacing: -.055em;
  color: transparent; -webkit-text-stroke: 2px var(--lime);
  margin: 0 0 clamp(18px, 3vw, 34px); font-variant-numeric: tabular-nums;
}
.mw-fertig h1 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(28px, 4.4vw, 56px); letter-spacing: -.045em; line-height: .96;
  color: #fff; margin: 0 0 20px; max-width: 24ch; text-wrap: balance;
}
.mw-fertig-text { font-size: 18px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,.86); margin: 0 0 clamp(28px, 4vw, 44px); max-width: 52ch; }
.mw-fertig .mw-angaben { max-width: 620px; }
.mw-fertig .mw-angaben dt { color: rgba(255,255,255,.55); }
.mw-fertig .mw-angaben dd { color: #fff; }
.mw-fertig-pdf { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 0 0 30px; }
.mw-fertig-pdf span { font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255,255,255,.72); max-width: 42ch; }
/* Der Vorbehalt auf der Abschlussseite: heller Kasten auf der dunklen Fläche,
   damit er nicht als Fußnote gelesen wird. Er sagt, dass etwas fehlt. */
.mw-fertig-wartet {
  font-size: 16px; line-height: 1.55; color: #fff; max-width: 56ch;
  margin: 0 0 clamp(26px, 4vw, 40px); padding: 16px 20px;
  border-left: 3px solid var(--lime); background: rgba(255, 255, 255, .08);
}
.mw-fertig-fuss { font-size: 14px; color: rgba(255,255,255,.6); margin: 0 0 26px; }
.mw-fertig-fuss a { color: var(--lime); }
.mw-fertig .btn-outline { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.mw-fertig .btn-outline:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ── Die Unterlagen zur Einwilligung ─────────────────────────────────────
   Vier Zeilen auf Haarlinien. Der Titel ist die Handlung (Link) oder eine
   Feststellung (kein Link) — der Unterschied ist an der Unterstreichung zu
   sehen und wird nicht mit Farbe behauptet. */
.mw-unterlagen { list-style: none; margin: 0 0 clamp(30px, 4vw, 44px); padding: 0; max-width: 62ch; }
.mw-unterlagen li {
  display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--hairline);
}
.mw-unterlagen a, .mw-unterlagen-titel {
  font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700;
  letter-spacing: .01em; color: var(--tanne);
}
.mw-unterlagen a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mw-unterlagen a:hover { color: var(--gruen); }
.mw-unterlagen span + span, .mw-unterlagen a + span {
  font-size: 14.5px; font-weight: 300; line-height: 1.55; color: var(--sekundaer);
}
/* Was fehlt, wird nicht versteckt — es steht da und sagt, wie man es bekommt. */
.mw-unterlagen-fehlt .mw-unterlagen-titel { color: var(--muted); }

/* ══════════════════════════════════════════════════════════════════════════
   NACHWEISE — zwei Wege, ein Fach
   Links der Schreibtisch, rechts das Handy. Die Trennung ist eine Haarlinie,
   kein Kasten: Es sind zwei Wege zur selben Sache, nicht zwei Angebote.
   ══════════════════════════════════════════════════════════════════════════ */
/* Das Fach steht in einem eigenen Rahmen wie die Personenkarten — es gehört zur
   Platzerlaubnis darüber und ist keine weitere Feldergruppe. */
.mw-nachweis {
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  border: 1px solid var(--linie-karte, #e4e9e3); border-radius: 14px;
  padding: clamp(18px, 2.2vw, 26px); background: #fff;
}
.mw-nachweis > .mw-untertitel {
  margin: 0 0 8px; padding-top: 0; border-top: 0;
  font-size: 13px; letter-spacing: .08em; color: var(--tinte);
}
.mw-nachweis > .mw-hilfe { margin-bottom: 20px; }
/* MIT Javascript ist das Fach zu, bis „Ich lade den Nachweis hoch" gewählt ist.
   Die Regel hängt an `.mw-js` (setzt das Skript selbst): Ohne Skript kann
   niemand etwas aufklappen, und ein unerreichbarer Upload wäre schlimmer als
   ein unnötig sichtbarer. */
.mw-js .mw-nachweis { display: none; }
.mw-js .mw-nachweis.mw-nachweis-an { display: block; }
.mw-nachweis-wege {
  display: grid; gap: clamp(24px, 3vw, 40px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) {
  .mw-nachweis-wege { grid-template-columns: minmax(0, 1fr) 210px; align-items: start; }
  /* Die Haarlinie steht links am Handy-Weg und trennt die beiden Wege. */
  .mw-nachweis-handy { border-left: 1px solid var(--hairline); padding-left: clamp(24px, 3vw, 38px); }
}
/* Das Dateifeld ist unsichtbar, aber vorhanden: Der Knopf ist sein `label`.
   NICHT `display:none` — dann wäre es für die Tastatur unerreichbar und die
   Beschriftung führte ins Nichts. */
.mw-nachweis-feld {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mw-nachweis-knopf { cursor: pointer; }
.mw-nachweis-feld:focus-visible + .mw-nachweis-knopf,
.mw-nachweis-knopf:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; }
.mw-nachweis-meldung {
  font-family: 'Space Grotesk', sans-serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; color: var(--gruen); margin: 10px 0 0; min-height: 1.4em;
}
.mw-nachweis-meldung.mw-nachweis-schlecht { color: var(--warn, #A4442E); }
.mw-nachweis-liste { list-style: none; margin: 12px 0 0; padding: 0; }
.mw-nachweis-liste li {
  display: flex; gap: 12px; align-items: center; font-size: 15px;
  color: var(--sekundaer); padding: 10px 0; border-top: 1px solid var(--hairline);
}
/* Der Daumennagel: quadratisch, beschnitten, mit Radius wie die Karten. Klein
   genug, dass drei Nachweise nicht die Seite füllen, groß genug, um zu erkennen,
   ob das richtige Blatt erwischt wurde. */
.mw-nachweis-schau {
  flex: none; width: 46px; height: 46px; border-radius: 8px; overflow: hidden;
  background: var(--mint); display: flex; align-items: center; justify-content: center;
}
.mw-nachweis-schau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mw-nachweis-schau-leer {
  font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; color: var(--gruen);
}
.mw-nachweis-was { flex: 1; }
.mw-nachweis-nr {
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; color: var(--gruen); font-variant-numeric: tabular-nums;
}
.mw-nachweis-kicker {
  font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 12px;
}
/* Der QR-Code ist ein Werkzeug, kein Bild — er steht schlicht und in der Größe,
   in der eine Handykamera ihn ohne Zielen findet (rund 40 mm auf dem Schirm). */
.mw-nachweis-qr { width: 150px; margin: 0 0 12px; }
.mw-nachweis-qr svg { width: 100%; height: auto; display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   NACHWEIS AM HANDY (/nachweis.php)
   Ein Daumen, ein Knopf. Alles andere ist kleiner als der Knopf.
   ══════════════════════════════════════════════════════════════════════════ */
/* Oben mindestens 86 px: Das Wappen im Kopf hängt bis 130 px in die Seite
   hinein — mit weniger lief der Kicker hinter das Logo. Der Wert ist gemessen,
   nicht geschätzt (IMG.wappen, unterste Kante 130 px, gilt in jeder Breite). */
/* `margin-inline: auto` seit 22.08.2026: Die schmale Spalte war für das Handy
   gebaut (Nachweis-Upload aus dem QR-Code) und klebte auf großen Bildschirmen
   am linken Rand. Seit die Mailbestätigung dieselbe Spalte benutzt, wird sie
   auch am Rechner geöffnet — Links aus Mails werden nun einmal überall
   angeklickt. Am Handy ändert sich nichts: Dort ist die Spalte breiter als der
   Platz, und die automatischen Ränder sind null. */
.nw { padding: clamp(86px, 8vw, 110px) var(--inset) clamp(50px, 8vw, 90px); max-width: 46ch;
      margin-inline: auto; }
.nw-kicker {
  font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gruen); margin: 0 0 14px;
}
.nw h1 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; line-height: .98;
  font-size: clamp(38px, 11vw, 62px); letter-spacing: -.02em; color: var(--tanne);
  margin: 0 0 18px; text-wrap: balance;
}
.nw-lead { font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--sekundaer); margin: 0 0 26px; }
.nw-lead-gut { color: var(--tanne); font-weight: 400; }
.nw-fehler {
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700;
  color: var(--warn, #A4442E); padding-left: 14px; border-left: 2px solid currentColor;
  margin: 0 0 22px;
}
.nw-liste { list-style: none; margin: 0 0 26px; padding: 0; }
.nw-liste li {
  display: flex; gap: 12px; align-items: baseline; padding: 12px 0;
  border-top: 1px solid var(--hairline); font-size: 16px; color: var(--sekundaer);
}
.nw-nr {
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; color: var(--gruen); font-variant-numeric: tabular-nums;
}
.nw-was { flex: 1; color: var(--tinte); }
.nw-gr { font-size: 13px; color: var(--muted); }
/* Der Knopf ist die ganze Fläche — am Handy zählt der Daumen, nicht die Feinheit. */
.nw-knopf {
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  background: var(--tanne); color: #fff; border-radius: 2px;
  padding: 26px 24px; margin: 0 0 14px;
  font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 700;
  line-height: 1.25; text-align: left;
}
.nw-knopf:active { background: var(--gruen); }
.nw-knopf-zeichen { font-size: 30px; font-weight: 400; line-height: 1; }
.nw-datei {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nw-datei:focus-visible + .nw-knopf { outline: 3px solid var(--gruen); outline-offset: 3px; }
/* Bei `.btn` reicht `hidden` nicht — `.btn { display: inline-flex }` schlägt die
   Browservoreinstellung. Dieselbe Falle wie bei den Schritt-Knöpfen. */
.nw-senden[hidden] { display: none !important; }
.nw-klein { font-size: 13px; color: var(--muted); margin: 0; }
.nw-fuss {
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
  margin: clamp(32px, 6vw, 52px) 0 0; padding-top: 16px; border-top: 1px solid var(--hairline);
}
.nw-wege { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 0; }
/* Die Beanstandung auf der Seite der zweiten Person steht über dem Dokument und
   braucht deshalb denselben Seitenrand wie das Dokument selbst. */
.mw-zweit-fehler { margin: clamp(96px, 9vw, 130px) var(--inset) 0; }

/* ══════════════════════════════════════════════════════════════════════════
   ECHTHEIT PRÜFEN (/vertrag-pruefen.php)
   Ein Bildschirm, eine Aussage. Das Siegel ist die Skalenspitze.
   ══════════════════════════════════════════════════════════════════════════ */
.mw-pruef {
  /* 86 px als Untergrenze — dasselbe gemessene Maß wie bei `.nw`: Das Wappen
     hängt bis 130 px herab, mit 56 px lag der Kicker darunter. */
  padding: clamp(86px, 9vw, 130px) var(--inset) clamp(60px, 8vw, 110px);
  max-width: 68ch; min-height: 66svh;
}
.mw-pruef-kicker {
  font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gruen); margin: 0 0 18px;
}
.mw-pruef-siegel {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(74px, 12vw, 150px); line-height: .8; margin: 0 0 10px;
  color: transparent; -webkit-text-stroke: 3px var(--gruen);
}
.mw-pruef-geaendert .mw-pruef-siegel, .mw-pruef-fehlt .mw-pruef-siegel { -webkit-text-stroke-color: var(--live); }
.mw-pruef-ungueltig .mw-pruef-siegel { -webkit-text-stroke-color: var(--linie-karte, #d7e0d9); }
.mw-pruef h1 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 4.4vw, 52px); letter-spacing: -.045em; line-height: .96;
  color: var(--tinte); margin: 0 0 16px; text-wrap: balance;
}
.mw-pruef-lead { font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--sekundaer); margin: 0 0 34px; }
.mw-pruef-form { max-width: 420px; display: grid; gap: 20px; }
.mw-pruef-fuss { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--muted); margin: 20px 0 30px; }
.mw-pruef-fuss code { font-family: 'Space Grotesk', sans-serif; font-size: 12.5px; }
.mw-sha { font-family: 'Space Grotesk', sans-serif; font-size: 12px; word-break: break-all; }
.mw-pruef-wege { display: flex; gap: 12px; flex-wrap: wrap; }

/* Nur für Vorlesegeräte. Steht in dieser Datei, weil `seite.css` die Klasse
   nicht führt — bisher hatte sie nur startzeiten.css, und deshalb stand die
   Tabellenbeschriftung auf dieser Seite sichtbar da. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Die Ruhe bekommt eine Höhenobergrenze: `34svh` bezieht sich auf das Fenster,
   und in einem hohen Fenster (Ganzseiten-Screenshot, Tablet im Hochformat)
   wuchs das Band auf über 1.000 px. Dieselbe Lehre wie bei der Dämmerung auf
   /oeffnungszeiten. */
.mw-ruhe { min-height: clamp(230px, 34svh, 430px); }

/* ══════════════════════════════════════════════════════════════════════════
   DRUCK — wer den Papierweg nimmt, druckt hier
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   AM HANDY IST DIE STRECKE EINE STRECKE
   Gemessen bei 390 × 660 (27.08.2026): Schritt 01 war 2.533 px hoch — 3,8
   Bildschirme allein für die Tarifwahl —, Schritt 02 rund 2.100 px, und ganz
   unten lagen ZWEI klebende Leisten übereinander (die Antragszeile mit 64 px
   und die Schnellleiste der Website mit 55 px). Die Fortschrittsschiene
   brach über drei Zeilen um und lag zur Hälfte hinter dem Wappen; in der
   Antragszeile lief der Betrag rechts aus dem Bild („1.050,0…").
   Die Eingabefelder selbst sind in Ordnung (48–50 px hoch, 16 px Schrift —
   nachgemessen, kein iOS-Zoom); sie werden hier nicht angefasst.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* ── Der Fortschritt ist ein Balken, kein Inhaltsverzeichnis ──
     Sechs Punkte mit Ziffer und Wort brauchen drei Zeilen und sagen doch
     nichts, was nicht zwei Zentimeter darunter groß dasteht: Die Überschrift
     des offenen Schritts trägt Nummer UND Titel. Also sechs Striche — getan,
     hier, kommt noch. Der Text bleibt im Markup für Vorlesegeräte stehen. */
  .mw-schiene { margin-bottom: clamp(24px, 5vw, 40px); }
  .mw-schiene ol { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; border-top: 0; }
  .mw-schiene li { flex: none; min-width: 0; margin: 0; padding: 0;
    border-top: 4px solid var(--linie-karte, #e4e9e3); border-radius: 3px; }
  .mw-schiene li .nr, .mw-schiene li .was {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .mw-schiene li a, .mw-schiene li > span { display: block; height: 14px; }
  .mw-schiene li.mw-getan { border-top-color: var(--gruen); }
  .mw-schiene li.mw-jetzt { border-top-color: var(--tanne); }

  /* ── Die Tarifwahl passt auf einen Bildschirm ──
     Acht Karten mit Preis, Spielrecht, Ersparnis und Nachweiszeile ergaben
     3,8 Bildschirme, bevor man das erste Mal etwas wählen konnte. Zu sehen
     ist jetzt Name und Preis; alles Weitere steht in der Karte, die man
     gewählt hat — dort, wo es die Entscheidung bestätigt statt sie zu
     erschweren. */
  .mw-tarif-recht, .mw-tarif-nachweis, .mw-tarif-spar { display: none; }
  .mw-tarif:has(input:checked) .mw-tarif-recht,
  .mw-tarif:has(input:checked) .mw-tarif-nachweis,
  .mw-tarif:has(input:checked) .mw-tarif-spar { display: block; }
  .mw-tarif-kern { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline; gap: 4px 14px; }
  .mw-tarif-kern > b { min-width: 0; }
  .mw-tarif-preis { text-align: right; white-space: nowrap; }
  .mw-tarif-recht, .mw-tarif-nachweis, .mw-tarif-spar { grid-column: 1 / -1; }

  /* ── Unten klebt EINE Leiste, nicht zwei ──
     Die Schnellleiste (Webcam · Startzeiten · Aktuelles) ist ein Angebot zum
     Weggehen — mitten im Antrag ist sie das Letzte, was gebraucht wird, und
     sie nahm der Antragszeile 55 px weg. In der Strecke tritt sie ab; über
     das Menü bleibt alles erreichbar. Damit entfällt auch das Polster, das
     `seite.css` dem Body für sie gibt. */
  .mw-body .schnell { display: none; }
  .mw-body { padding-bottom: 0; }

  /* Die Antragszeile trägt, was man beim Ausfüllen wissen will: welcher
     Tarif und wie viel. Beginn und Zahlweise stehen im Formular selbst —
     vierspaltig auf 390 px lief der Betrag rechts aus dem Bild. */
  .mw-blatt-zeile[data-mw-zeile="beginn"],
  .mw-blatt-zeile[data-mw-zeile="zahlweise"] { display: none; }
  .mw-blatt dl { gap: 0 16px; align-items: baseline; }
  .mw-blatt-zeile[data-mw-zeile="tarif"] { min-width: 0; }
  .mw-blatt-zeile[data-mw-zeile="tarif"] dd {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mw-blatt-zeile.mw-blatt-summe { flex: none; text-align: right; }
  .mw-blatt-zeile.mw-blatt-summe dd { text-align: right; white-space: nowrap; }

  /* ── Die Bühne macht dem Formular Platz ──
     Seit die Seitenbühnen am Handy das Fenster füllen (seite.css), stand vor
     dem Antrag ein bildschirmhohes Bild. Auf einer Formularstrecke will man
     das Formular sehen: hier bleibt die Bühne bei einem Drittel. */
  .mw-body .hero { min-height: min(38svh, 300px); }
}

@media print {
  .kopf, .fuss, footer, .mw-dok-zurueck, .mw-gesperrt-wege, .mw-knoepfe,
  .mw-schiene, .mw-blatt-flaeche, .mw-topf, .mw-ruhe, .mw-wege { display: none !important; }
  .mw-dok, .mw-dok-blatt { padding: 0; margin: 0; background: none; }
  .mw-dok-papier { box-shadow: none; padding: 0; max-width: none; }
  .mw-vertrag { font-size: 10.5pt; line-height: 1.5; }
  .mw-vertrag h2 { font-size: 11pt; margin: 14pt 0 4pt; page-break-after: avoid; border-top: 0; }
  .mw-dok-merken, .mw-gesperrt { border: 1px solid #000; background: none; }
  .mw-pad canvas { border-bottom: 1px solid #000; }
  .mw-blatt-akte { display: none; }
  a[href]::after { content: ''; }
}

/* ══════════════════════════════════════════════════════════════════════════
   WENIGER BEWEGUNG — die Seite verliert nichts außer Zeit
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .mw-legnr > span { animation: none; }
  .mw-spur-fuellung, .mw-spur-marke { animation: none; transform: none; }
  .mw-spur-marke { transform: translate(-50%, -50%); }
  .mw-tarif-nachweis { transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DIE BESTÄTIGUNG DER E-MAIL-ADRESSE (Double-Opt-in)
   ══════════════════════════════════════════════════════════════════════════
   Derselbe Kasten wie das Nachweis-Fach: umrandet, weiß, mit Abstand nach oben.
   Er ist kein Feld unter Feldern, sondern ein eigener Vorgang — und er hält
   den ganzen Abschluss auf, wenn er nicht erledigt ist. Das darf man sehen. */
.mw-doi {
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  border: 1px solid var(--linie-karte, #e4e9e3); border-radius: 14px;
  padding: clamp(18px, 2.2vw, 26px); background: #fff;
}
.mw-doi > .mw-untertitel {
  margin: 0 0 8px; padding-top: 0; border-top: 0;
  font-size: 13px; letter-spacing: .08em; color: var(--tinte);
}
.mw-doi > .mw-hilfe { margin-bottom: 18px; }

/* Feld und Knopf nebeneinander — der Knopf sitzt auf der Grundlinie des
   Feldes, nicht darunter: Beides gehört zu einer Handlung. */
.mw-doi-zeile {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: clamp(12px, 1.6vw, 20px);
}
.mw-doi-zeile .mw-feld { flex: 0 1 220px; }
/* Sechs Zeichen, weit auseinander: Ein Code wird abgeschrieben und
   gegengelesen, nicht überflogen. */
.mw-feld-code input {
  font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  letter-spacing: .34em; text-transform: uppercase; font-size: 1.15rem;
}
.mw-doi-meldung {
  margin: 14px 0 0; font-size: .95rem; color: var(--tinte-leise, #5d6a63);
  min-height: 1.4em;
}
.mw-doi-gut {
  margin: 0; font-weight: 600; color: var(--gruen);
  display: flex; align-items: baseline; gap: 8px;
}
.mw-doi-gut::before { content: '✓'; font-size: 1.1em; }
/* Ist die Adresse bestätigt, tritt der Kasten zurück — er hat seine Arbeit
   getan und soll den Blick nicht mehr halten. */
.mw-doi[data-mw-doi-ok="1"] { border-color: var(--gruen); }

/* Das Band über der Abschlussseite im Probelauf. Es ist nicht redigierbar und
   nicht wegzuklicken: An dieser Stelle steht sonst „Willkommen in Gerhelm" über
   einem Vorgang, der keiner ist. Warnfarbe wäre falsch — es ist kein Fehler,
   sondern ein Zustand; die Kante links genügt. */
.mw-probeband {
  border-left: 4px solid var(--gruen); background: var(--mint);
  padding: 16px 18px; border-radius: 0 8px 8px 0; margin: 0 0 26px;
  font-size: 16px; line-height: 1.6; color: var(--tinte); max-width: 70ch;
}
.mw-probeband b { display: block; margin-bottom: 4px; }

/* ═══ DIE KINDER (Familienstrecke, 30.08.2026) ══════════════════════════════
   Eine Zeile je Kind, mit der Ziffer am linken Rand — dasselbe Mittel wie die
   Nummer der Person, nur kleiner. Die Zeilen liegen in der Personenkarte, ohne
   eigene Rahmen: Vier Kästen in einem Kasten wären ein Formular im Formular. */
.mw-kindzeile {
  display: grid; grid-template-columns: auto 1fr; gap: 0 14px;
  align-items: start;
  padding-top: 14px;
}
.mw-kindzeile + .mw-kindzeile { border-top: 1px solid var(--hairline); }
.mw-kindnr {
  font-family: var(--schrift-titel, inherit);
  font-size: 13px; color: var(--gruen); padding-top: 26px;
}
/* Am Handy nimmt die Ziffer keine eigene Spalte — dort ist die Breite für die
   Felder da. Sie steht dann über der Zeile. */
@media (max-width: 560px) {
  .mw-kindzeile { grid-template-columns: 1fr; gap: 4px; }
  .mw-kindnr { padding-top: 0; }
}
/* Drei Felder, eine Zeile — Vorname, Name, Geburtstag. Das allgemeine Raster
   (`auto-fit, minmax(210px, 1fr)`) legt das Datumsfeld sonst in eine zweite
   Reihe: Ein Datumsfeld ist breiter als seine Beschriftung, und damit passen
   nur zwei Spalten. Bei einem Kind je Zeile ist die Reihenfolge aber die
   Information — sie darf nicht umbrechen, solange Platz ist. */
@media (min-width: 640px) {
  .mw-kindzeile > .mw-gitter { grid-template-columns: 1fr 1fr 190px; }
}
.mw-kinder-mehr { margin: 16px 0 0; }
.mw-kinder-mehr button[disabled] { opacity: .45; cursor: default; }
/* Was die Kinder kosten — eine Auskunft, keine Beanstandung: dieselbe Farbe
   wie die Hilfetexte, nur mit Luft darüber. */
.mw-kinder-preis:not(:empty) {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline);
  color: var(--tinte);
}

/* Die Verträge eines Familienvorgangs auf der Abschlussseite — eine Liste,
   keine Tabelle: Es sind zwei bis vier Zeilen, und jede trägt eine Nummer,
   die man abschreiben können muss. */
.mw-fertig-vorgang { margin: clamp(28px, 4vw, 44px) auto 0; max-width: 62ch; text-align: left; }
.mw-vorgangsliste { list-style: none; margin: 0 0 12px; padding: 0; }
.mw-vorgangsliste li {
  padding: 10px 0; border-top: 1px solid var(--hairline);
}

/* ═══ § 357 Abs. 8 — das ausdrückliche Verlangen ════════════════════════════
   Der Haken erscheint, sobald ein Vertragsbeginn in den nächsten vierzehn
   Tagen gewählt ist (mitglied.js). OHNE Javascript kann ihn niemand
   einblenden — dort steht er deshalb immer, und der Server verlangt ihn
   ohnehin nur, wenn die Frist es hergibt. Ohne diese Regel wäre er ohne
   Skript unerreichbar und der Abschluss eine Sackgasse. */
html:not(.mw-js) [data-mw-nur="leistungsbeginn"][hidden] { display: block; }
.mw-leistungsbeginn { margin-top: clamp(14px, 2vw, 20px); }