/* Vereins-Copilot — das Designsystem.
 *
 * DIE EINZIGE STELLE MIT GESTALTUNGSWERTEN (ADR Abschnitt 11). Alles hier sind
 * Variablen und ihre Anwendung; im erzeugten HTML steht kein Wert. Wer später
 * gestaltet, tauscht diese Datei — er schreibt keine Seite um.
 *
 * Richtung „Cockpit", gewählt am 2026-08-10 aus drei Entwürfen: kühl und dicht,
 * zweispaltig mit mitlaufender Übersicht, feine Linien, Statuspunkte, feste
 * Kopfleiste. Der Grund für diese Wahl ist die Menge: Ein Ergebnis umfasst 112
 * geprüfte Tatbestände, und nur diese Anordnung hält dabei die Übersicht.
 *
 * ZUSTÄNDE SIND DATEN, NIE FORMATIERUNG. Ergebnisklasse, Handlungsart und
 * Konfidenz stehen als data-Attribut am Element; welche Farbe daraus wird,
 * entscheidet allein diese Datei.
 *
 * Systemschriften, weil eine Webschrift ein Drittinhalt wäre und die strenge
 * Inhaltsregel aus server/schutz.mjs aufweichen würde. Eine mitgelieferte
 * Schrift bliebe möglich, ohne dass sich sonst etwas ändert.
 *
 * Zielpersona: 60-jähriger neuer Vereinsvorstand am Laptop. Ruhig, klar,
 * vertrauenswürdig — nicht verspielt.
 */

:root {
  /* ------------------------------------------------------------- Flächen */
  --grund:   #f5f3ee;
  --karte:   #fffefa;
  --linie:   #dedbd2;
  --linie-2: #ece9e1;

  /* --------------------------------------------------------------- Text */
  --ink:   #20231f;
  --ink-2: #596057;
  --ink-3: #747a72;

  /* ------------------------------------------------------------- Akzente
   * Vier Bedeutungen, vier Farben — und keine fünfte. Jede zusätzliche Farbe
   * kostet Aussagekraft bei allen anderen. */
  --akzent:      #1f644d;   /* Handlung, Fokus, aktive Stelle */
  --akzent-tief: #174c3b;
  --akzent-hell: #e8f1ec;
  --gruen:       #237a57;   /* geht: antragsbereit */
  --gruen-hell:  #e8f3ed;
  --amber:       #9a641d;   /* Vorbehalt, anderer Weg, gesperrte Höhe */
  --amber-hell:  #fbf0dc;
  --schiefer:      #626960; /* neutral: Sachleistung, ausgeschlossen */
  --schiefer-hell: #efeee9;
  --fehler:      #a14034;
  --fehler-hell: #f8eae7;
  --weiss:       #ffffff;
  --bronze:      #b37631;
  --salbei:      #53766a;
  --feld-linie:  #cbc8bf;
  --feld-hover:  #9f9e96;
  --auth:        #204c3d;
  --auth-gold:   #d9c18f;
  /* Die Erklärung beim ersten Einloggen (21.08.2026). ER BRICHT DIE REGEL
   * „vier Bedeutungen, vier Farben" NICHT: Gold trägt im Arbeitsbereich keine
   * Bedeutung, es ist die Farbe des Anmeldebildschirms (--auth-gold direkt
   * darüber). Der Balken wirkt dadurch wie eine Fortsetzung des Anmeldens.
   * Amber war die naheliegende Wahl und die falsche — es heißt überall sonst
   * „Vorbehalt, hier stimmt etwas nicht", und das ist kein Willkommensgruß. */
  --gold-hell:   #fbf4e4;
  --gold-linie:  #c9a55f;
  /* Das Rot der Pfeile auf den Bilder der Erklärungn. ES IST KEINE FÜNFTE
   * BEDEUTUNGSFARBE: Es kommt ausschließlich auf den Screenshots vor und sagt
   * dort „hier hinsehen", nicht „hier ist ein Fehler". --fehler wäre die
   * naheliegende Wahl gewesen und die falsche — ein Verein, der zum ersten Mal
   * hier ist, hielte fünf rote Pfeile für fünf Probleme. Dieses Rot ist
   * kräftiger und wärmer, damit es auf einer Aufnahme trägt. */
  /* DIE AMPEL DER FÖRDERTÖPFE (29.08.2026). Eigene Werte und nicht die Palette
   * der Seite: Ein Signal soll auffallen und sich nicht einfügen. Grün heißt
   * hier „geht", gelb „eine Sache fehlt", rot „passt nicht", grau „wartet" —
   * und anders als auf der Karte zählt die Farbe eine MENGE, sie verspricht
   * nichts. Die Bedeutung trägt der Text daneben; die Farbe beschleunigt nur
   * das Finden. */
  /* HELLGRÜN KAM AM 30.08.2026 DAZU, als der Ergebniskasten des Vorhabens
   * dieselbe Ampel bekam („Verwende auch signalfarben bei vorhaben", „grün,
   * hellgrün, grau, gelb etc."). Der Kasten führt sechs Zeilen, die Ampel hatte
   * vier Farben; die fünfte trägt die Stufe zwischen „geht" und „eine Sache
   * fehlt": Es liegt an EUCH, und danach ist es grün. Gelb heißt im selben
   * Kasten „geht, aber ein anderer stellt den Antrag" — das ist ein anderer
   * Grund zu warten. */
  --ampel-gruen:     #1e8e3e;
  /* DEUTLICH GELBSTICHIG, und das ist gemessen und nicht Geschmack: Der erste
   * Wert (#6fae35) war ein reines Grün und stand direkt unter --ampel-gruen —
   * bei einem Punkt von 8,8 px blieb davon ein Helligkeitsunterschied, den man
   * nur im Vergleich sieht. Ein Signal, das man vergleichen muss, ist keins. */
  --ampel-hellgruen: #7cb342;
  --ampel-gelb:      #e0a400;
  --ampel-rot:       #c5321f;
  --ampel-grau:      #9aa09a;

  --pfeil:       #c8321f;
  --pfeil-hell:  #fbe6e2;
  --sand-linie:  #d8d2c4;
  --sand-hell:   #faf7ef;
  /* Zwei helle Flächen für die Kachel (20.08.2026). Keine neuen Farben: die
   * eine ist --salbei mit viel Weiß darunter, die andere ein Grauton unter
   * --grund, damit die Faktenleiste die Zahlen trägt und nicht selbst
   * auffällt. Sie stehen HIER und nicht bei der Kachel, weil ein Wächter in
   * test/stil-system.test.mjs jede Hex-Farbe außerhalb dieses Blocks als
   * verstreuten Gestaltungswert meldet — zu Recht (ADR Abschnitt 11). */
  --salbei-hell:    #eaf0ee;
  --schiefer-flach: #f4f6f4;

  --schatten:     0 1px 2px rgba(32, 35, 31, .04), 0 10px 30px rgba(32, 35, 31, .035);
  --schatten-hoch: 0 16px 44px rgba(32, 35, 31, .12);

  /* ------------------------------------------------------------- Schrift */
  --disp: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --t-winzig: .72rem;
  --t-klein:  .84rem;
  --t-basis:  .95rem;
  --t-gross:  1.12rem;
  --t-titel:  1.35rem;
  --t-haupt:  1.9rem;

  /* --------------------------------------------------------- Abstände
   * 4er-Skala. Kein Abstand außerhalb dieser Liste. */
  --s1: .25rem;
  --s2: .5rem;
  --s3: .75rem;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.75rem;
  --s7: 2.5rem;
  --s8: 3.5rem;
  --s9: 5rem;

  --r:       18px;
  --r-klein: 11px;
  --r-marke: 999px;

  /* Die kleinste Fläche, die ein Finger sicher trifft. 44 px ist der Wert der
   * WCAG-Erfolgskriterien 2.5.5/2.5.8 und stand bis zum 20.08.2026 nur im
   * Musterblatt — im Produkt lag `.appnav__link` bei 375 px darunter. Jede
   * Klickfläche, die kein Fließtextlink ist, hängt an dieser Variablen. */
  --klickziel: 44px;

  /* Die Schreiblinie auf dem Ausdruck einer Vorlage: FESTE Breite, damit nicht
   * der Hinweistext die Länge bestimmt — sonst stünden auf einem Blatt
   * unterschiedlich lange Striche untereinander, bei „(Name)" ein kurzer, bei
   * „(Anlass oder Zeitraum)" ein doppelt so langer. */
  --linie-schreib:      16rem;
  --linie-schreib-hoch: 1.25rem;

  --spalte:       34rem;   /* rund 68 Zeichen — die lesbare Textbreite */
  /* Formulare dürfen breiter sein als Fließtext.
   *
   * 34rem sind die richtige Breite für einen Absatz und die falsche für ein
   * Formular: Auswahlfelder, Beschriftung und Hilfetext teilen sich dieselbe
   * Spalte, und alles wird schmal und hoch. Bei der Sichtprüfung am 17.08.
   * stand die Prüfkarte als schmale Säule mitten in freier Fläche — der
   * Gründer hat den ungenutzten Rand links und rechts rot markiert.
   *
   * Die HILFETEXTE bleiben bei --spalte (siehe .feld__hilfe): Ein Fließtext
   * über 46rem liest sich schlechter, auch wenn das Feld darunter breiter ist.
   * Breiter machen heißt hier: dem Formular Luft geben, nicht dem Text. */
  --spalte-formular: 46rem;
  --spalte-breit: 72rem;
  --raum-breit:   78rem;
  --seitlich:     18rem;
  --leiste-hoch:  3.4rem;

  /* Die Höhe der Kopfleiste des angemeldeten Bereichs (.appkopf__innen).
   *
   * SIE HAT EINE EIGENE VARIABLE, weil alles, was unter ihr stehenbleiben soll,
   * sie kennen muss: die mitlaufende Übersicht rechts und jedes Sprungziel.
   * Vorher rechneten beide mit `--leiste-hoch` (3,4rem) — dem Maß der ALTEN,
   * schmalen Leiste. Der Kopf misst 4,8rem. Die Differenz von rund 24 Pixeln
   * war genau der Grund, warum die Übersicht beim Scrollen oben hinter dem Kopf
   * verschwand statt daneben stehenzubleiben. */
  --kopf-hoch:    4.8rem;

  /* --------------------------------------------- Kreisdiagramm der Startseite
   *
   * Baustein zu server/kreisdiagramm.mjs; die Regeln stehen weiter unten bei
   * „Was ansteht", also bei den anderen Bausteinen der Startseite.
   *
   * DIE ACHT SEGMENTFARBEN — Gründerentscheid am 21.08.2026: „bunte segmente
   * aus muster." Es sind die Werte aus docs/design-muster/muster-w3.css
   * (Zeile 63 ff.), also genau das, was er gesehen und entschieden hat; eine
   * nachgerechnete Annäherung wäre eine andere Entscheidung gewesen als seine.
   *
   * DREI DAVON SIND KEINE NEUEN FARBEN, sondern der Bestand unter anderem
   * Namen: --kreis-1 ist --akzent, --kreis-4 ist --amber, --kreis-6 ist
   * --salbei. Sie stehen deshalb als Variablenverweis und nicht als Hex-Wert —
   * wer die Hausfarbe ändert, soll den Ring mit ändern.
   *
   * DIE FÜNF ÜBRIGEN SIND EINGETIPPT, und das ist eine bewusste Ausnahme vom
   * Grundsatz „vier Bedeutungen, vier Farben" weiter oben: Diese fünf tragen
   * keine Bedeutung. Farbe unterscheidet im Ring nur noch, sie sagt nichts —
   * die Legende nennt jede Zahl als Text, und die Reihenfolge in Ring und
   * Legende ist dieselbe. Wer keine Farben unterscheidet, verliert nichts.
   *
   * --kreis-8 fällt heraus: Die Gruppe ohne Lebensbereich ist kein Bereich,
   * sie ist der Rest, und trägt deshalb ein warmes Grau. */
  --kreis-groesse: 17rem;
  --kreis-punkt: .9rem;
  --kreis-leer: var(--linie-2);

  --kreis-1: var(--akzent);
  --kreis-2: #3d8a6c;
  --kreis-3: #6fa98e;
  --kreis-4: var(--amber);
  --kreis-5: #c19a5b;
  --kreis-6: var(--salbei);
  --kreis-7: #8a9a86;
  --kreis-8: #b8b3a4;

  /* ── Die Palette der beiden Vorhabenseiten ──────────────────────────────
   *
   * WARUM SIE HIER STEHT UND NICHT DORT: Der Entwurf vom 09.09.2026 brachte
   * einunddreißig Farbwerte mit, alle als Hex mitten im Regelwerk. Das
   * verstößt gegen ADR Abschnitt 11 — ein Gestaltungswert gehört an EINE
   * Stelle — und `test/stil-system.test.mjs` hielt es fest („Farben stehen in
   * Variablen, nicht verstreut im Regelwerk"). Die Werte sind unverändert; nur
   * ihr Wohnort ist jetzt einer.
   *
   * SIE HEISSEN `--vh-*` UND NICHT `--grund`: Die beiden Seiten überschreiben
   * in `body:has(.vorhaben-seite)` die allgemeinen Namen mit diesen Werten.
   * Stünden die Werte direkt unter den allgemeinen Namen, gälten sie für die
   * ganze App — und der Rest des Copiloten sähe von einem Tag auf den anderen
   * anders aus. Die Zwischenschicht ist genau diese Trennung.
   *
   * Die Namen sagen die Rolle, nicht die Farbe: `--vh-kachelfehlt` bleibt
   * richtig, wenn aus dem Grau ein Blau wird. */
  --vh-grund:         #f4f6f5;   /* Seitengrund */
  --vh-ink:           #182f29;   /* Titel und Fließtext */
  --vh-ink-2:         #52645d;   /* Beiwerk, Hilfetexte */
  --vh-ink-3:         #5f6f68;   /* Zahlen, Zählungen */
  --vh-linie:         #dce4df;   /* Kartenrand */
  --vh-linie-2:       #e9eeeb;   /* Trennlinie innerhalb einer Karte */
  --vh-akzent:        #17654c;   /* Grün der Seite */
  --vh-akzent-tief:   #104c39;   /* Grün gedrückt */
  --vh-akzent-hell:   #eaf3ed;   /* Grün als Fläche */
  --vh-dunkel:        #173e32;   /* Der Balken „hier geht es weiter" */
  --vh-zitrone:       #e0edaa;   /* Der Knopf auf dem dunklen Balken */
  --vh-helltext:      #d7e4dc;   /* Text auf dem dunklen Balken */
  --vh-kante-warm:    #a9c4b5;   /* Kartenrand, wenn die Maus darauf steht */
  --vh-symbolrand:    #d8e9df;   /* Rand der Standfläche links */
  --vh-amberrand:     #ecd9b4;   /* Rand der Standfläche: pausiert */
  --vh-grund-ruhend:  #fafbfa;   /* Grund einer abgeschlossenen Karte */
  --vh-punkt-ruhend:  #b3c0b9;   /* Punkt der Gruppe „Abgeschlossen" */
  --vh-anlegenrand:   #c5d9cd;   /* Rand des Anlegekastens */
  --vh-feldrand:      #adc7b8;   /* Rand des großen Textfelds */
  --vh-platzhalter:   #697a71;   /* Beispieltext im leeren Feld */
  --vh-lesengrund:    #f1f6f0;   /* Die mitlesende Spalte daneben */
  --vh-lesenkante:    #d7e4d8;   /* Deren linke Kante */
  --vh-weiterrand:    #507666;   /* Zeichen auf dem dunklen Balken, Rand */
  --vh-weitergrund:   #244b3c;   /* Zeichen auf dem dunklen Balken, Fläche */
  --vh-kachelrand:    #abcab9;   /* Rand einer vorhandenen Bereichskachel */
  --vh-kachelhover:   #edf5ef;   /* Bereichskachel unter der Maus */
  --vh-kachelfehlt:   #b7c6be;   /* Rand der Kachel, die noch nicht dazugehört */
  --vh-kacheloffen:   #cfe4d8;   /* Rand des Zeichens in der fragenden Kachel */
  --vh-eckfeldgrund:  #fcfdfc;   /* Eingabefelder in den Eckdaten */
  --vh-eckfeldrand:   #cbd8d0;   /* Deren Rand */
}

/* ========================================================================
 * Neugestaltung 2026: ruhig, hochwertig und ohne wechselnde Seitenrahmen.
 * Die neuen Komponenten ergänzen das bestehende System, damit auch ältere
 * Teilflächen dieselbe visuelle Sprache erhalten.
 * ====================================================================== */

/*
 * DIE GRUNDGRÖSSE DER GANZEN OBERFLÄCHE — 09.09.2026 von 17 px auf 14 px.
 *
 * 17 px lagen über der Browservorgabe von 16 px, und auf den langen Seiten
 * dieses Werkzeugs summierte sich das: Ein Antragsgespräch trägt zwei Dutzend
 * Fragen samt Hilfetexten, und bei 100 % Zoom stand davon zu wenig auf dem
 * Schirm. 14 sind rund 82 % von 17 — also das, was vorher ein Browserzoom auf
 * 80 % erreichte, nur ohne dass jeder Verein ihn selbst einstellen muss.
 *
 * ALLE ABSTÄNDE HÄNGEN DARAN, weil sie in rem gerechnet sind: Die Seite wird
 * gleichmäßig kompakter statt nur kleiner beschriftet.
 */
html { font-size: 14px; }

/*
 * SANFT SCROLLEN — ABER NICHT BEIM SEITENAUFBAU (Befund vom 17.08. abends).
 *
 * Hier stand `scroll-behavior: smooth` auf `html`, unbedingt. Das traf auch
 * den Fall, für den es nie gedacht war: Nach jeder beantworteten Rückfrage
 * leitet die Route auf `/pruefung/<id>#klaeren` um, und der Browser ANIMIERTE
 * den Sprung zum Anker — bei jeder Antwort einmal die halbe Seite hinunter.
 * Der Gründer dazu: sofort springen statt scrollen, „nur dort, sonst gefällt
 * es ihm".
 *
 * `:focus-within` IST DIE UNTERSCHEIDUNG, und zwar ohne eine Zeile Skript:
 * Beim frischen Seitenaufbau liegt der Fokus nirgends im Dokument, die Regel
 * greift nicht, der Anker wird sofort angesprungen. Klickt jemand danach einen
 * Sprunglink in der Seitenleiste, ist genau dieser Link fokussiert — dann
 * greift sie, und es scrollt sanft wie bisher.
 *
 * `prefers-reduced-motion` gehört dazu: Wer Bewegung abbestellt hat, meint
 * auch diese.
 */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 12% -10%, rgba(225, 182, 111, .12), transparent 28rem),
    var(--grund);
  color: var(--ink);
  line-height: 1.55;

  /* DIE „BLAU HINTERLEGTEN FELDER" AUS 2005.
   *
   * Die achtzehn Ankreuzfelder im Vereinsprofil standen auf `accent-color:
   * auto` und waren damit im Windows-Systemblau — die einzige Farbe der
   * Oberfläche, die niemand ausgesucht hat, und die einzige, die zu keiner der
   * vier Bedeutungen gehört. Genau das war der Anlass für die ganze
   * Neugestaltung. Eine Zeile behebt es für alle Ankreuz- und Auswahlfelder
   * auf einmal, und sie nimmt die Akzentfarbe DIESES Systems. */
  accent-color: var(--akzent);
}

h1 { font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 720; letter-spacing: -.045em; }
h2 { font-weight: 680; }
a { text-underline-offset: .18em; }

.seite,
.raum {
  width: 100%;
  flex: 1;
  padding-top: 3rem;
  padding-bottom: 5rem;
}

.seite--schmal { max-width: 42rem; }

.appkopf {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(222, 219, 210, .9);
  background: rgba(255, 254, 250, .94);
  backdrop-filter: blur(18px);
}

.appkopf__innen {
  max-width: var(--raum-breit);
  min-height: 4.8rem;
  margin: 0 auto;
  padding: .6rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.appmarke {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: .72rem;
  min-width: 14.5rem;
  color: var(--ink);
  text-decoration: none;
}

.appmarke__zeichen,
.seitenfuss__zeichen {
  width: 2.35rem;
  height: 2.35rem;
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: .78rem;
  background: var(--akzent);
  color: var(--weiss);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

/* DAS ZEICHEN IST DAS FAVICON — dieselbe Zeichnung, die im Browser-Tab steht.
 * Bis zum 17.08.2026 standen hier die Buchstaben „VC".
 *
 * Eingesetzt als ALPHA-MASKE, nicht als farbige Bilddatei, und zwar aus einem
 * Grund: Dasselbe Element trägt drei verschiedene Kacheln. Im Kopf und im Fuß
 * ist sie grün (--akzent), auf der Anmeldeseite dagegen durchscheinend weiß auf
 * dunkelgrünem Grund (.auth__intro weiter unten). Ein grünes Bild wäre dort
 * unsichtbar. Als Maske kommt die Fläche aus `background-color: currentColor`,
 * also aus `color` — und damit weiterhin aus dieser Datei, wie es ADR
 * Abschnitt 11 verlangt.
 *
 * Die Datei liegt als web/zeichen.svg und wird von scripts/kopiere-vorlagen.mjs
 * nach dist/ gebracht; ohne diesen Schritt fehlt sie im Abbild. */
.appmarke__zeichen::before,
.seitenfuss__zeichen::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask: url("/zeichen.svg") center / 100% 100% no-repeat;
  mask: url("/zeichen.svg") center / 100% 100% no-repeat;
}

.appmarke__text {
  display: grid;
  font-family: var(--disp);
  font-weight: 720;
  letter-spacing: -.02em;
  line-height: 1.15;
}

/* Der Vereinsname im Seitenkopf, dieselbe Korrektur wie an der Tafel: Auf
 * --ink-3 stand er bei 4,36:1. Es ist der einzige Ort, an dem der Nutzer
 * überhaupt sieht, für welchen Verein er gerade arbeitet — Kleingedrucktes von
 * der Größe, aber nicht von der Bedeutung her. */
.appmarke__text small {
  max-width: 12rem;
  overflow: hidden;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appnav {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: .2rem;
}

/* DIE KLICKFLÄCHE HÄNGT AN --klickziel UND NICHT AM WURZELGRAD (Befund vom
 * 20.08.2026, gemessen bei 375 px). Hier standen 2,65 rem. Bei 17 px
 * Grundschrift sind das 45,05 px und alles ist gut — unter 700 px setzt dieses
 * Blatt die Grundschrift aber auf 16 px, und dieselbe Zeile ergibt 42,4 px.
 * Genau dort, auf dem Telefon, wird mit dem Daumen getroffen. --klickziel steht
 * in px und ist deshalb gegen jede Medienabfrage immun. */
.appnav__link,
.appkonto__profil,
.appkonto__menue > summary {
  min-height: var(--klickziel);
  padding: .65rem .82rem;
  display: inline-flex;
  align-items: center;
  border-radius: .75rem;
  color: var(--ink-2);
  font-size: .87rem;
  font-weight: 620;
  text-decoration: none;
  white-space: nowrap;
}

.appnav__link:hover,
.appkonto__profil:hover,
.appkonto__menue > summary:hover { background: var(--grund); color: var(--ink); }

.appnav__link[aria-current="page"],
.appkonto__profil[aria-current="page"] {
  background: var(--akzent-hell);
  color: var(--akzent-tief);
}

.appkonto {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .15rem;
}

.appkonto__menue { position: relative; }
.appkonto__menue > summary { cursor: pointer; list-style: none; }
.appkonto__menue > summary::-webkit-details-marker { display: none; }
.appkonto__menue > summary::after { content: "⌄"; margin-left: .35rem; color: var(--ink-3); }
.appkonto__menue[open] > summary { background: var(--grund); color: var(--ink); }

/* „Du stehst auf einer Seite aus diesem Menü." — dieselbe Markierung wie
 * aria-current bei den Hauptwegen. Sie ersetzt das automatische Aufklappen,
 * das vorher bei jedem Aufruf einer dieser Seiten ungefragt losging. */
.appkonto__menue > summary[data-aktiv="ja"] {
  background: var(--akzent-hell);
  color: var(--akzent-tief);
}

.appkonto__liste {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  width: 14rem;
  padding: .45rem;
  border: 1px solid var(--linie);
  border-radius: .9rem;
  background: var(--karte);
  box-shadow: var(--schatten-hoch);
}

/* Hier stand 2,6rem, mit der Begründung, 2,5 x 17 px seien anderthalb Pixel zu
 * wenig. Die Rechnung stimmte und die Einheit war trotzdem falsch: Unter 700 px
 * steht die Grundschrift auf 16 px, und 2,6 rem sind dort 41,6 px — dieselbe
 * Falle wie beim Navigationslink darüber, nur eine Ebene tiefer im Menü. */
.appkonto__liste a,
.appkonto__liste button {
  width: 100%;
  min-height: var(--klickziel);
  padding: .55rem .65rem;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: .6rem;
  background: transparent;
  color: var(--ink-2);
  font-size: .85rem;
  text-align: left;
  text-decoration: none;
}

.appkonto__liste a:hover,
.appkonto__liste button:hover { background: var(--grund); color: var(--ink); }

.seitenkopf {
  margin: 0 0 2rem;
  padding: .25rem 0;
}

.seitenkopf h1 { margin-bottom: .5rem; }
.seitenkopf > p:last-child { color: var(--ink-2); font-size: 1.05rem; }

.ueberzeile {
  margin: 0 0 .45rem;
  color: var(--akzent);
  font-size: .73rem;
  font-weight: 760;
  letter-spacing: .095em;
  text-transform: uppercase;
}

.start-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}

/* ============================ Die besten nächsten Schritte (Audit P2-3)
 *
 * Eine Prüfung liefert bis zu 112 Einträge in vier gleich gewichteten
 * Blöcken, von denen nur einer eine Handlung enthält, die heute etwas
 * bringt. Dieser Abschnitt hebt sie heraus — deshalb ist er das einzige
 * Element der Ergebnisseite mit eigener Fläche.
 *
 * Innen stecken `.aktionskarte`n, der Baustein dieser Fassung für „hier ist
 * etwas zu tun". Eine eigene Kartenform wäre eine zweite, die niemand
 * braucht; so sieht der Abschnitt aus wie die Startseite, und wer das eine
 * kennt, erkennt das andere. */
.beste {
  margin-bottom: var(--s7);
  padding: var(--s5);
  background: var(--akzent-hell);
  border: 1px solid var(--linie);
  border-radius: var(--r);
}
.beste__kopf { margin-bottom: var(--s4); }
.beste__kopf h2 { margin: .2rem 0 .35rem; color: var(--akzent-tief); }
.beste__kopf > p:last-child { margin: 0; color: var(--ink-2); font-size: .9rem; }
.beste__mehr { margin: var(--s4) 0 0; font-size: .9rem; }

/* DIE RANGLISTE — drei Empfehlungen untereinander, nicht nebeneinander.
 *
 * GEWÄHLT AM 18.08. aus drei Mustern. Hier standen `.aktionskarte`n, der
 * Baustein der Startseite für ZWEI große Kacheln: Er bringt 20rem Mindesthöhe
 * mit und ließ die erste Karte über zwei Rasterzeilen laufen. Bei drei
 * Einträgen ergab das eine 41rem hohe Karte neben zwei halb so hohen, in denen
 * jeweils zwei Zeilen Text standen.
 *
 * Es sind gereihte Empfehlungen und keine gleichrangigen Kacheln, deshalb
 * 1, 2, 3 untereinander. Keine Mindesthöhe: Die Zeile ist so hoch wie ihr
 * Inhalt. Der Knopf steht in jeder Zeile an derselben Stelle rechts — bei
 * Kacheln wanderte er mit der Textlänge.
 *
 * Der linke Balken ist derselbe Ton wie `.aktionskarte[data-ton="check"]`:
 * Wer die Startseite kennt, erkennt hier dieselbe Bedeutung wieder. */
.schrittliste { display: flex; flex-direction: column; gap: .7rem; }

.schritt {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--salbei);
  border-radius: var(--r-klein);
  background: var(--karte);
  box-shadow: var(--schatten);
}
.schritt > div { min-width: 0; }
.schritt__rang {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--akzent-hell);
  color: var(--akzent-tief);
  font-size: 1.05rem;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}
.schritt__geber {
  margin: 0 0 .1rem;
  color: var(--ink-3);
  font-size: var(--t-winzig);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.schritt__titel {
  margin: 0 0 .3rem;
  font-family: var(--disp);
  font-size: var(--t-gross);
  font-weight: 650;
  line-height: 1.3;
}
/* Die Höhe steht als Satz und nicht mehr als runde Marke. `.kennzahl` ist auf
 * 2,35rem Höhe festgelegt und für Zahlen gebaut — „Höhe steht nicht fest" quoll
 * daraus hervor und legte sich über die Überschrift. */
.schritt__hoehe { margin: 0; font-size: var(--t-klein); font-weight: 700; color: var(--akzent-tief); font-variant-numeric: tabular-nums; }
.schritt__hoehe[data-art="ohne-zahl"] { color: var(--amber); font-weight: 650; }
.schritt__grund { margin: .15rem 0 0; color: var(--ink-2); font-size: var(--t-klein); }
.schritt .knopf, .schritt button, .schritt .textlink { white-space: nowrap; }

/* Unter 640px hat der Knopf rechts keinen Platz mehr; er rückt unter den Text
 * und bleibt an der Rangziffer ausgerichtet. */
@media (max-width: 640px) {
  .schritt { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .schritt > form, .schritt > .knopf, .schritt > .textlink { grid-column: 2; justify-self: start; }
}

.aktionskarte {
  position: relative;
  min-height: 20rem;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--karte);
  box-shadow: var(--schatten);
}

/* AUF DAS STARTRASTER EINGEGRENZT (18.08.). Ohne den Vorfahren galt die Regel
 * für JEDE erste `.aktionskarte` in JEDEM Raster — auf der Ergebnisseite ergab
 * das eine 41rem hohe Karte neben zwei halb so hohen. Eine Regel, die eine
 * bestimmte Anordnung meint, gehört an diese Anordnung gebunden. */
.start-raster .aktionskarte:first-child { grid-row: span 2; min-height: 41.15rem; }
.aktionskarte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--akzent);
}
.aktionskarte[data-ton="vorhaben"]::before { background: var(--bronze); }
.aktionskarte[data-ton="check"]::before { background: var(--salbei); }

.aktionskarte__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.aktionskarte__kopf .ueberzeile { margin: 0; }
.aktionskarte h2 { margin: 1.8rem 0 .65rem; font-size: 1.45rem; }
.aktionskarte p { color: var(--ink-2); }
.aktionskarte__meta { margin: .45rem 0 1.2rem; font-size: .8rem; color: var(--ink-3) !important; }
/* Die Zeitschätzung steht als eigene Marke und nicht als Teil des Satzes —
 * damit niemand sie für eine Zusage hält. */
.dauer {
  display: inline-block;
  margin-left: .35rem;
  padding: .08rem .5rem;
  border-radius: var(--r-marke);
  background: var(--schiefer-hell);
  color: var(--ink-2);
  font-weight: 600;
  white-space: nowrap;
}
.aktionskarte__aktionen { margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: .85rem; }

.kennzahl {
  min-width: 2.35rem;
  height: 2.35rem;
  padding: 0 .6rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--grund);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 760;
}

progress {
  width: 100%;
  height: .62rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--linie-2);
  color: var(--akzent);
}
progress::-webkit-progress-bar { background: var(--linie-2); border-radius: inherit; }
progress::-webkit-progress-value { background: var(--akzent); border-radius: inherit; }
progress::-moz-progress-bar { background: var(--akzent); border-radius: inherit; }

/* 44 px auch hier: `.textlink` steht als zweite Handlung NEBEN einem Knopf
 * („Selbst eintragen" neben „Profil gemeinsam ausfüllen"). Er ist damit ein
 * echtes Ziel und keine Fußnote — mit 24 px war er das kleinste Ziel der
 * Startseite. Das Aussehen bleibt: nur die Trefffläche wächst. */
.textlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--akzent);
  font-size: .88rem;
  font-weight: 680;
}

.karte,
.tafel,
.treffer,
details.zu,
.fragen {
  border-color: var(--linie);
  border-radius: var(--r);
  background: var(--karte);
  box-shadow: var(--schatten);
}

.karte { padding: 1.5rem; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="date"], select, textarea {
  min-height: 3rem;
  padding: .72rem .85rem;
  border: 1px solid var(--feld-linie);
  border-radius: .72rem;
  background: var(--weiss);
  box-shadow: inset 0 1px 1px rgba(32, 35, 31, .025);
}


textarea { min-height: 7rem; }
input:hover, select:hover, textarea:hover { border-color: var(--feld-hover); }
input:focus, select:focus, textarea:focus { border-color: var(--akzent); }

/*
 * ACHTUNG: Es gibt WEITER UNTEN eine zweite Regel für denselben Wähler, und die
 * gewinnt. Der Flexbau (display, align, gap) steht deshalb dort und nicht hier.
 */
button,
.knopf {
  min-height: 2.9rem;
  padding: .65rem 1rem;
  border-radius: .72rem;
  box-shadow: 0 1px 1px rgba(23, 76, 59, .12);
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

button:hover,
.knopf:hover { transform: translateY(-1px); }
button[data-art="leise"],
.knopf[data-art="leise"] { background: var(--weiss); }

.seitenfuss {
  margin-top: auto;
  border-top: 1px solid var(--linie);
  background: rgba(255, 254, 250, .7);
}

.seitenfuss > div {
  max-width: var(--raum-breit);
  min-height: 6.5rem;
  margin: 0 auto;
  padding: 1.4rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Die Links der Fusszeile massen 22 px. Sie sind echte Ziele (Datenschutz,
 * Impressum, Hilfe) und keine Beschriftung -- 44 px gelten auch hier. */
.seitenfuss nav { display: flex; flex-wrap: wrap; gap: var(--s2); }
.seitenfuss nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s2);
}

.seitenfuss p { margin: 0; display: flex; align-items: center; gap: .65rem; color: var(--ink-2); font-size: .8rem; }
.seitenfuss p strong { color: var(--ink); }
.seitenfuss p span:last-child { padding-left: .65rem; border-left: 1px solid var(--linie); }
.seitenfuss p a { color: var(--ink-2); font-weight: 700; letter-spacing: .04em; text-decoration: none; }
.seitenfuss p a:hover { color: var(--akzent); text-decoration: underline; }
.seitenfuss__zeichen { width: 1.9rem; height: 1.9rem; border-radius: .58rem; }
.seitenfuss nav { display: flex; gap: 1.2rem; }
.seitenfuss nav a { color: var(--ink-2); font-size: .8rem; font-weight: 600; text-decoration: none; }
.seitenfuss nav a:hover { color: var(--akzent); text-decoration: underline; }

@media (max-width: 1050px) {
  .appkopf__innen { flex-wrap: wrap; }
  .appmarke { min-width: auto; }
  .appnav { order: 3; width: 100%; overflow-x: auto; }
  .appkonto { margin-left: auto; }
  .start-raster { grid-template-columns: 1fr; }
  .start-raster .aktionskarte:first-child { grid-row: auto; min-height: 22rem; }
}

@media (max-width: 700px) {
  /* HIER BLEIBT ES GRÖSSER ALS AM BREITEN SCHIRM (16 statt 14, 09.09.2026).
   * Die Verkleinerung galt der Textwand auf langen Antragsseiten; auf einem
   * schmalen Fenster ist die Zeile ohnehin kurz, und dort kostet jedes
   * Zehntel Lesbarkeit, ohne Platz zu gewinnen. */
  html { font-size: 16px; }
  .seite, .raum { padding: 2rem 1rem 4rem; }
  .appkopf__innen { padding-inline: .8rem; gap: .55rem; }
  .appmarke__text small { max-width: 9rem; }
  .appkonto__profil { display: none; }
  .appnav__link { padding-inline: .68rem; }
  .seitenfuss > div, .seitenfuss p, .seitenfuss nav { align-items: flex-start; flex-direction: column; }
  .seitenfuss p span:last-child { padding-left: 0; border-left: 0; }
}

@media print {
  .appkopf,
  .seitenfuss { display: none !important; }
  body { display: block; background: var(--weiss); }
}

* { box-sizing: border-box; }

/* Zweite Wurzelregel, weiter unten in derselben Datei — sie gewinnt und muss
 * denselben Wert tragen wie oben, sonst bleibt die Änderung wirkungslos. */
html { font-size: 14px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-basis);
  line-height: 1.6;
}

/* =========================================================== Grundgerüst */

/* Der Rahmen der Formularseiten aus AP4 (Profil, Fälle, Anmeldung). */
.seite {
  max-width: var(--spalte-breit);
  margin: 0 auto;
  padding: var(--s7) var(--s5) var(--s9);
}
/* `--spalte-formular` und nicht `--spalte`: Diese Klasse trägt die
 * Formularseiten (Prüfkarte, Rückfragen, Erstgespräch, Anmeldung), und ein
 * Formular ist kein Fließtext. Die Hilfetexte darin bleiben bei --spalte,
 * die Regel steht bei .feld__hilfe — breiter wird also das Feld, nicht der
 * Satz darüber. */
.seite--schmal { max-width: var(--spalte-formular); }

/* Der Rahmen der Ergebnisseite — breiter, weil zweispaltig. */
.raum {
  max-width: var(--raum-breit);
  margin: 0 auto;
  padding: var(--s7) var(--s5) var(--s9);
}

.spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--seitlich);
  gap: var(--s7);
  align-items: start;
}

h1 {
  font-family: var(--disp);
  font-size: var(--t-haupt);
  font-weight: 650;
  letter-spacing: -.03em;
  line-height: 1.15;
  margin: 0 0 var(--s3);
}
h2 {
  font-family: var(--disp);
  font-size: var(--t-titel);
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.3;
  margin: var(--s7) 0 var(--s3);
}
h2:first-child { margin-top: 0; }
h3 {
  font-family: var(--disp);
  font-size: var(--t-gross);
  font-weight: 650;
  letter-spacing: -.015em;
  margin: 0 0 var(--s2);
}

p { margin: 0 0 var(--s4); max-width: var(--spalte); }
p:last-child { margin-bottom: 0; }

a { color: var(--akzent); }

.leise { color: var(--ink-3); font-size: var(--t-klein); }

/* ============================================================ Kopfleiste */

/* Bleibt beim Scrollen stehen: Bei 112 Treffern ist der Weg zurück nach oben
 * sonst weit, und „Angaben ändern" ist die häufigste zweite Handlung. */
.leiste {
  background: var(--karte);
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: 0;
  z-index: 5;
}
.leiste > div {
  max-width: var(--raum-breit);
  margin: 0 auto;
  padding: var(--s3) var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
}
.marke {
  font-family: var(--disp);
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--akzent);
  text-decoration: none;
}
.leiste__pfad { font-size: var(--t-klein); color: var(--ink-3); }
.leiste__pfad b { color: var(--ink); font-weight: 600; }
.leiste__tat { margin-left: auto; display: flex; gap: var(--s2); flex-wrap: wrap; }

/* Der Seitenkopf der Formularseiten aus AP4. */
.kopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s6);
}
.kopf__name { font-family: var(--disp); font-size: var(--t-gross); font-weight: 650; margin: 0; }
.kopf__verein { color: var(--ink-3); font-size: var(--t-klein); margin: 0; }
/* Die Kontrollzeile unter dem Titel der Ergebnisseite.
 *
 * ALS FLEX-ZEILE UND NICHT ALS SATZ (Sichtprüfung 18.08.). Als Absatz mit
 * Trennpunkten brach der Browser zwischen zwei beliebigen Wörtern — beim
 * Vorhaben „Vereinsheimsanierung" mitten durch „rund | 180.000 €". Eine Zahl,
 * die ihr „rund" verloren hat, liest sich als feste Summe.
 *
 * Jedes Stück ist jetzt ein eigenes Element mit eigenem Umbruchschutz; der
 * Trennpunkt kommt aus dem Rahmen, nicht aus dem Text. Umgebrochen wird nur
 * ZWISCHEN den Stücken, und bei sehr langen Angaben (Gegenstandsnamen gehen
 * bis „Vereinsheim oder Vereinsgebäude") darf ein Stück auch selbst umbrechen —
 * `nowrap` würde es sonst aus dem Bildschirm schieben. */
.kopf__zeile {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .55rem;
  color: var(--ink-2);
}
.kopf__zeile > span { display: inline-block; }
.kopf__zeile > span + span:not(.kopf__zeile-datum)::before {
  content: "·";
  margin-right: .55rem;
  color: var(--ink-3);
}
.kopf__zeile-marke {
  color: var(--ink-3);
  font-size: var(--t-winzig);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.kopf__zeile-datum {
  padding: .1rem .55rem;
  border: 1px solid var(--linie);
  border-radius: var(--r-marke);
  background: var(--karte);
  color: var(--ink-3);
  font-size: var(--t-winzig);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ============================================ Kopfbalken des Vereinsbereichs
 *
 * Vorher: neun gleichwertige Textlinks in 14 px, umbruchfähig, unter einer
 * Haarlinie. Das ist eine Linkliste, keine Navigation — nichts daran sagt,
 * was die Hauptsache ist, und bei schmalem Fenster fiel sie in zwei Zeilen.
 *
 * Jetzt zwei Ränge in EINER Zeile:
 *   Rang 1 (`.balken__weg`)  — die drei Wege, wegen derer jemand herkommt.
 *   Rang 2 (`.balken__neben`) — Verwaltung, kleiner und rechts abgesetzt.
 * Der aktive Weg trägt eine Fläche statt nur einer anderen Farbe: Farbe
 * allein ist für die Zielgruppe (und für Farbfehlsichtige) zu wenig.
 *
 * Zwei Dinge sind bewusst NICHT drin: ein Aufklappmenü (braucht JavaScript,
 * und der Bereich hat keins) und Symbole neben den Wörtern (ein Icon, das
 * niemand deutet, kostet Platz und erklärt nichts).
 */
.balken {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--karte);
  border-bottom: 1px solid var(--linie);
}
.balken > div {
  max-width: var(--raum-breit);
  margin: 0 auto;
  padding: 0 var(--s5);
  display: flex;
  align-items: stretch;
  gap: var(--s5);
  min-height: 4rem;
}
.balken__marke {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--disp);
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--akzent);
  text-decoration: none;
  white-space: nowrap;
}
.balken__marke span {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-winzig);
  letter-spacing: 0;
  color: var(--ink-3);
}
.balken__wege { display: flex; align-items: stretch; gap: var(--s1); }
.balken__weg {
  display: flex;
  align-items: center;
  padding: 0 var(--s3);
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 550;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.balken__weg:hover { color: var(--ink); background: var(--linie-2); }
.balken__weg[aria-current="page"] {
  color: var(--akzent);
  border-bottom-color: var(--akzent);
}
.balken__rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.balken__neben {
  color: var(--ink-3);
  text-decoration: none;
  font-size: var(--t-klein);
  white-space: nowrap;
  padding: var(--s2) 0;
}
.balken__neben:hover { color: var(--ink); }
.balken__neben[aria-current="page"] { color: var(--akzent); font-weight: 650; }
.balken__verein {
  font-size: var(--t-klein);
  color: var(--ink-3);
  border-left: 1px solid var(--linie);
  padding-left: var(--s3);
  white-space: nowrap;
}

/* Unter 900 px reicht die Breite für zwei Ränge nebeneinander nicht mehr.
   Dann bricht der Balken bewusst um, statt die Wege zu quetschen — der
   Laptop ist die Zielplattform, aber ein schmales Fenster darf nicht
   zerfallen. */
@media (max-width: 900px) {
  .balken > div { flex-wrap: wrap; padding-bottom: var(--s2); }
  .balken__rechts { width: 100%; margin-left: 0; border-top: 1px solid var(--linie-2); padding-top: var(--s2); }
  .balken__verein { margin-left: auto; border-left: none; padding-left: 0; }
}

/* ================================================== Rückkanal, unten rechts
 *
 * Er stand bis heute als neunter Link im Menü. Dort war er gleichwertig mit
 * „Fördercheck" — und wer gerade auf einen Fehler stößt, sucht ihn nicht in
 * einer Menüzeile, sondern dort, wo Hilfe erfahrungsgemäß sitzt.
 *
 * Kein `position: fixed` über dem Inhalt ohne Not: Der Knopf sitzt am
 * Viewport-Rand, ist aber klein genug, um nichts zu verdecken, und weicht
 * beim Drucken ganz (siehe @media print am Dateiende).
 */
.melden-knopf {
  position: fixed;
  right: var(--s5);
  bottom: var(--s5);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--s4);
  background: var(--karte);
  color: var(--ink-2);
  border: 1px solid var(--linie);
  border-radius: 999px;
  box-shadow: var(--schatten-hoch);
  text-decoration: none;
  font-size: var(--t-klein);
  font-weight: 550;
}
.melden-knopf:hover { color: var(--akzent); border-color: var(--akzent); }

/* ================================================================ Karten */

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  box-shadow: var(--schatten);
  padding: var(--s5);
  margin-bottom: var(--s4);
}

/* =========================================== Seitliche Ergebnis-Übersicht */

/* Die mitlaufende Übersicht.
 *
 * `max-height` und `overflow-y` gehören zum Kleben dazu: Eine Tafel, die höher
 * ist als der Platz unter dem Kopf, klebt zwar — man kommt aber an ihr unteres
 * Ende nie heran, weil sie mit dem Bildschirm mitwandert. Mit der Begrenzung
 * bekommt sie eine eigene Bildlaufleiste, sobald sie zu lang wird, und bleibt
 * sonst unverändert.
 *
 * `overscroll-behavior` verhindert das Zweite, was dabei stört: Ist man am Ende
 * dieser Leiste angekommen, scrollte sonst die ganze Seite weiter — der Blick
 * springt, obwohl man in der Leiste steht. */
.seitlich {
  position: sticky;
  top: calc(var(--kopf-hoch) + var(--s4));
  max-height: calc(100vh - var(--kopf-hoch) - var(--s6));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tafel {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  box-shadow: var(--schatten);
  overflow: hidden;
}
/* --ink-2 STATT --ink-3 an diesen beiden Zeilen, nachgemessen am 20.08.2026:
 * Das hellste Grau erreicht auf dem Kartengrund 4,36:1 und auf dem
 * Seitengrund 3,97:1, WCAG 1.4.3 verlangt 4,5:1. Beide Zeilen tragen gelesenen
 * Text — das Wort „ÜBERBLICK" und die Datenstandzeile, an der ein Vorstand
 * ablesen soll, wie frisch unsere Angaben sind. --ink-2 kommt auf 6,43:1 und
 * 5,85:1. Die Abstufung gegen den Kastentext machen weiterhin Grad und
 * Laufweite (test/kontrast-und-klickziel.test.mjs rechnet es nach). */
.tafel__kopf {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--linie-2);
  font-size: var(--t-winzig);
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}
.tafel__fuss {
  padding: var(--s3) var(--s4);
  font-size: var(--t-winzig);
  color: var(--ink-2);
  background: var(--grund);
  margin: 0;
}

/* DIE ACHSENZEILE IN DER TAFEL (27.08.2026) — kein Sprungziel, eine
 * Beschriftung. Sie sagt, wozu die Punkte darunter gehören, seit der Radar
 * „Jetzt schon möglich" zweimal führt: einmal je Sorte. Ohne sie stünden
 * dieselben zwei Wörter zweimal untereinander, ohne Unterschied.
 *
 * --ink-2 aus demselben Grund wie bei .tafel__kopf: Es ist gelesener Text auf
 * Kartengrund, und --ink-3 verfehlt dort die 4,5:1 aus WCAG 1.4.3.
 *
 * SIE IST SEIT DEM 30.08.2026 EIN BAND und keine halbfette Zeile mehr.
 *
 * DER BEFUND war: „passen nicht so gut zu dem stil irgendwie sah das vor den
 * überschriften besser aus". Der Grund dafür ist baulich und nicht
 * geschmacklich — die Beschriftung stand in derselben Spalte wie die
 * Sprungzeilen, in derselben Größenordnung, nur ohne Punkt. Sie las sich
 * damit wie ein Eintrag, dem der Statuspunkt fehlt.
 *
 * Der Seitengrund und die zwei Linien machen aus ihr das, was sie ist: ein
 * Abschnittstrenner, dieselbe Rolle, die .tafel__fuss am unteren Ende schon
 * spielt. Gewählt aus drei gebauten Fassungen (docs/design-muster/
 * tafel-muster-2026-08-30.html), Entscheid des Gründers am 30.08. */
.tafel__achse {
  padding: .45rem var(--s4);
  background: var(--grund);
  border-top: 1px solid var(--linie-2);
  border-bottom: 1px solid var(--linie-2);
  font-size: var(--t-winzig);
  font-weight: 650;
  color: var(--ink-2);
  margin: 0;
}
/* Die erste Zeile bekommt keinen Strich — der Kasten hat schon einen unter
 * „ÜBERBLICK". Zwei Linien im Abstand einer Zeilenhöhe wären eine Doppelung. */
.tafel__kopf + .tafel__achse { border-top: none; }

/* DIE ZEILEN IN EINEM KASTEN MIT BÄNDERN (30.08.2026, zweite Runde).
 *
 * ERSTE RUNDE, UND SIE WAR FALSCH: Mit dem Band fielen die Trennlinien ganz
 * weg, und die Zeilen rückten auf .42rem zusammen. Die Überlegung war „neun
 * Linien plus vier Bänder sind mehr Gitter als vorher". Der Befund am selben
 * Abend: „der für die Fördertöpfe stört mich noch etwas" — und beim direkten
 * Vergleich mit dem Vorhaben-Kasten, der seine Linien behalten hatte, war
 * klar, welcher der beiden sich besser liest.
 *
 * ENTSCHIEDEN AUS VIER GEBAUTEN MISCHUNGEN (docs/design-muster/
 * tafel-runde2-2026-08-30.html, Linie ja/nein × eng/locker): Linie UND Luft.
 * Damit ist dieser Kasten bis auf die Bänder baugleich mit dem der
 * Ergebnisseite — gleiche Zeilenhöhe, gleiches Gitter, gleiche Ampel. Zwei
 * Kästen, die dasselbe tun, sollen nicht verschieden dicht sein.
 *
 * DIE LINIE LIEGT ZWISCHEN ZWEI ZEILEN, nicht unter jeder. `.sprung + .sprung`
 * trifft genau den Zwischenraum: Über der ersten Zeile einer Gruppe liegt schon
 * die Unterkante des Bandes, unter der letzten die Oberkante des nächsten. Eine
 * Regel über border-bottom setzte dort eine zweite Linie auf die erste.
 *
 * DAS BAND BLEIBT, WIE ES WAR — Auftrag: „Der Überschriftsblock soll in seiner
 * Höhe unverändert bleiben." Größer geworden ist nur, was zwischen den Bändern
 * liegt.
 *
 * `:has()` STATT EINER KENNUNG AM HTML: Die Regel gilt genau für Tafeln mit
 * Gliederung, und ob eine Tafel gegliedert ist, steht in ihr selbst. Eine
 * zusätzliche Klasse am Kasten wäre eine zweite Wahrheit, die jemand beim
 * nächsten Kasten vergisst. Wo `:has()` fehlt, bleiben die Linien stehen —
 * der Zustand von gestern, nicht ein kaputter.
 *
 * DAS KLICKZIEL: .7rem oben und unten plus 1,55 Zeilenhöhe auf --t-klein
 * ergeben rund 43 px, mehr als die 24 px, die test/kontrast-und-klickziel.
 * test.mjs verlangt — und mehr als die 34 px der ersten Runde. */
.tafel:has(.tafel__achse) .sprung {
  border-bottom: none;
  padding-top: .7rem;
  padding-bottom: .7rem;
}
.tafel:has(.tafel__achse) .sprung + .sprung { border-top: 1px solid var(--linie-2); }
/* Unter der letzten Zeile steht keine Linie (siehe oben) — der Fuß bringt seine
 * eigene mit. Sein grauer Grund allein trennt ihn nicht, seit die Bänder
 * denselben Grund tragen. */
.tafel:has(.tafel__achse) .tafel__fuss { border-top: 1px solid var(--linie-2); }

/* PUNKT UND ZAHL HÄNGEN AN DER ERSTEN ZEILE (30.08.2026), nicht in der Mitte
 * der Zeile. Sichtbar wird das nur, wenn ein Titel doch einmal umbricht — dann
 * stand die Zahl bisher neben dem Zeilenzwischenraum und der Punkt neben dem
 * Nichts. Die Titel sind am selben Tag gekürzt worden, damit das gar nicht
 * mehr vorkommt; diese Regel ist die Absicherung für den Titel, den morgen
 * jemand länger schreibt. */
.sprung {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--linie-2);
  text-decoration: none;
  color: var(--ink);
  font-size: var(--t-klein);
}
.sprung:last-of-type { border-bottom: none; }
.sprung:hover { background: var(--grund); }
.sprung__punkt {
  width: .55rem;
  height: .55rem;
  /* Auf die Mitte der ERSTEN Zeile gerechnet, nicht geschätzt: 1,55 ist die
   * Zeilenhöhe des Dokuments, .55rem der Durchmesser des Punktes. `em` bezieht
   * sich hier auf --t-klein, das die Zeile vom `.sprung` erbt. */
  margin-top: calc((1.55em - .55rem) / 2);
  border-radius: var(--r-marke);
  background: var(--linie);
  flex: none;
}
.sprung__zahl {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--ink-2);
}
/* NOCH ZWEI TÖNE AUS DER PALETTE, und nur noch für EINE Stelle: die drei
 * Schritte im Vereinsprofil (`seiten-verein.mjs`, „fehlt noch etwas" gegen
 * „steht"). Die beiden Übersichtskästen sind am 30.08.2026 vollständig auf die
 * Ampel weiter unten umgezogen — `fast`, `offen` und `verein` sind dabei
 * ersatzlos entfallen, weil niemand sie mehr erzeugt hat. */
.sprung[data-ton="gut"]   .sprung__punkt { background: var(--gruen); }
.sprung[data-ton="weg"]   .sprung__punkt { background: var(--amber); }

/* DIE TÖNE DES DATENSCHUTZ-LOTSEN (09.09.2026): Farbe nach ART, nicht nach
 * Stand. Grün heißt, hier kommt Papier heraus; bronze heißt, hier müsst ihr
 * selbst etwas regeln; salbei heißt Ereignis. Verworfen wurde die Fassung nach
 * dem Erledigt-Zustand (grün/gelb/grau): Sie hätte am Anfang fast alles gelb
 * gefärbt und die Seite wie eine Mahnung aussehen lassen. Der Stand steht
 * stattdessen am Häkchen der Karte und im Fuß der Tafel.
 *
 * Alle drei Farben stehen schon in :root — es kommt keine dazu. Die Aussage
 * steht zusätzlich als Wort in der Zeile (ADR Abschnitt 11). */
.sprung[data-ton="drucken"]  .sprung__punkt { background: var(--gruen); }
.sprung[data-ton="regeln"]   .sprung__punkt { background: var(--bronze); }
.sprung[data-ton="ereignis"] .sprung__punkt { background: var(--salbei); }

/* Derselbe Ton am linken Rand der Karten des Blocks — wie .karte[data-ton] es
 * an anderer Stelle schon tut. Die Kartenwurzel heißt .treffer--aufgabe. */
.block[data-ton="drucken"]  .treffer--aufgabe { border-left: 3px solid var(--gruen); }
.block[data-ton="regeln"]   .treffer--aufgabe { border-left: 3px solid var(--bronze); }
.block[data-ton="ereignis"] .treffer--aufgabe { border-left: 3px solid var(--salbei); }

/* Dieselbe Tafel trägt im Vereinsprofil die drei Schritte, und dort ist einer
 * davon der, auf dem man gerade steht. Die Markierung ist dieselbe wie im Kopf
 * (`aria-current`), damit „hier bin ich" überall gleich aussieht. */
.sprung[aria-current] {
  background: var(--akzent-hell);
  color: var(--akzent-tief);
  font-weight: 650;
}
.sprung[aria-current] .sprung__zahl { color: var(--akzent-tief); }

/* =============================================== Achsen (Förder-Radar) */

/* DIE EBENE ÜBER DEN BLÖCKEN, seit dem 27.08.2026 (Befund A vom 21.08.).
 *
 * Der Radar trennt seitdem zuerst danach, WORAN ein Topf hängt — am Verein
 * oder an einem Vorhaben —, und erst darunter nach Reife. Warum, steht bei
 * `teileNachBezug()` in scripts/lib/radar.mjs: 53 von 61, 57 von 68 und 38 von
 * 47 Einträgen hingen an einem Vorhaben, auf einer Seite, die das Gegenteil
 * behauptete.
 *
 * KEIN NEUES BAUTEIL, NUR EINE STUFE GRÖSSER. Kopf, Zahl und Unterzeile sind
 * dieselben drei Elemente wie beim Block; die Trennlinie oben und der Raum
 * darüber tragen die Hierarchie, nicht ein Kasten. Ein Rahmen um zwei mal drei
 * Blöcke hätte die Seite in Schachteln zerlegt.
 *
 * OHNE LINKEN EINZUG, mit Absicht: Achsenkopf, Blocktitel und Kartenkante
 * fluchten dadurch auf derselben Linie. Ein Einzug hätte die Zugehörigkeit
 * gezeigt und dafür drei Textkanten gegeneinander verschoben. */
.achse { margin-bottom: var(--s7); }
.achse + .achse {
  border-top: 1px solid var(--linie);
  padding-top: var(--s6);
}
.achse__kopf { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s1); }
.achse__kopf h2 { margin: 0; font-size: var(--t-titel); }
/* Dieselbe Marke wie am Block, damit die Zahlen einer Seite gleich aussehen —
 * die Größe der Überschrift daneben sagt die Ebene bereits. */
.achse__zahl {
  font-size: var(--t-winzig);
  font-weight: 650;
  padding: .1rem .45rem;
  border-radius: var(--r-marke);
  background: var(--schiefer-hell);
  color: var(--schiefer);
  font-variant-numeric: tabular-nums;
}
/* Eine Stufe dunkler als `.block__unter`: Die Achse erklärt die Sorte, der
 * Block darunter nur noch den Reifegrad. Gleiche Größe, damit die beiden
 * Zeilen nicht um Aufmerksamkeit streiten. */
.achse__unter { font-size: var(--t-klein); color: var(--ink-2); margin: 0 0 var(--s5); max-width: var(--spalte); }
/* Der Ton folgt der Karte: „Gehört zum Verein" trägt in KARTEN_ZUSTAENDE
 * Salbei, und wer von der Achse zur Karte sieht, findet dieselbe Farbe. */
.achse[data-achse="verein"] .achse__zahl { background: var(--salbei-hell); color: var(--salbei); }
/* Der letzte Block einer Achse trägt seinen eigenen Fußabstand nicht doppelt:
 * `.block` und `.achse` bringen beide var(--s7) mit, und übereinander wären
 * das 5 rem Leere zwischen zwei Überschriften. */
.achse > .block:last-child { margin-bottom: 0; }

/* ================================================================ Blöcke */

/* `scroll-margin-top` ist das Sprungziel-Maß: Ohne es landet die Überschrift
 * eines angesprungenen Blocks unter der Kopfleiste, und man sieht nach dem
 * Klick auf „Möglich, wenn ihr etwas ändert" die zweite Zeile des Blocks. */
.block { margin-bottom: var(--s7); scroll-margin-top: calc(var(--kopf-hoch) + var(--s4)); }
.block__kopf { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s1); }
/* `h3` seit dem 27.08.: Innerhalb einer Achse ist die Reifegruppe eine Ebene
 * tiefer. Beide Selektoren stehen hier, weil die Ergebnisseite ihre Blöcke
 * weiterhin als `h2` führt — dort gibt es keine Achse darüber. */
.block__kopf h2,
.block__kopf h3 { margin: 0; font-size: var(--t-gross); }
.block__anzahl {
  font-size: var(--t-winzig);
  font-weight: 650;
  padding: .1rem .45rem;
  border-radius: var(--r-marke);
  background: var(--schiefer-hell);
  color: var(--schiefer);
  font-variant-numeric: tabular-nums;
}
.block__unter { font-size: var(--t-klein); color: var(--ink-3); margin: 0 0 var(--s4); }

/* DER AUSBLICK IM RADAR IST ZUGEKLAPPT (Gründerentscheid 22.08.2026).
 *
 * Warum, steht bei `gruppeHtml()` in server/seiten-radar.mjs: Die Reparatur
 * von `radarGruppe()` ließ die Seite von 35 auf 68 Einträge wachsen, und fast
 * alles davon landete unter „Für künftige Vorhaben". Die ZAHL ist dort die
 * Auskunft, nicht die Liste.
 *
 * NUR EIN AUFKLAPPER, KEIN ZWEITER BAUSTEIN: `.block--ausblick` erbt alles
 * von `.block`, die drei Regeln hier setzen nur, was ein `<details>` anders
 * macht als eine `<section>` — der Zeiger, das Dreieck an der Grundlinie der
 * Überschrift statt der Zeilenmitte, und der Abstand, den `.block__unter` im
 * geschlossenen Zustand nicht braucht. */
.block--ausblick > summary { cursor: pointer; list-style-position: outside; }
.block--ausblick > summary::marker { color: var(--ink-3); }
.block--ausblick:not([open]) > summary .block__unter { margin-bottom: 0; }

/* Ein Block ohne Treffer ist eine Zeile: Titel, Null, Grund. Kein Kasten und
 * kein „Hier steht gerade nichts" — bei zwei leeren Blöcken übereinander waren
 * das 300 px, bevor irgendetwas kam. `align-items: baseline` hält Titel, Marke
 * und Begründung auf einer Schriftlinie, sonst tanzt die Marke aus der Zeile. */
.block--leer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
  margin: 0 0 var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--linie);
  /* `p` trägt global `max-width: var(--spalte)` — richtig für Fließtext, falsch
   * für eine Statuszeile: Sie stand 578 px breit unter 935 px breiten Blöcken,
   * und die Trennlinie endete mitten im Nichts. */
  max-width: none;
}
.block--leer strong { font-size: var(--t-gross); }
.block--leer .leise { font-size: var(--t-klein); }

/* ============================================================== Treffer */

.treffer {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  box-shadow: var(--schatten);
  padding: var(--s5);
  margin-bottom: var(--s3);
  display: grid;
  grid-template-columns: .6rem minmax(0, 1fr);
  gap: var(--s4);
}
.treffer__punkt {
  width: .55rem;
  height: .55rem;
  border-radius: var(--r-marke);
  background: var(--linie);
  margin-top: .45rem;
}
.treffer__geber { font-size: var(--t-winzig); color: var(--ink-3); margin: 0 0 .1rem; max-width: none; }
.treffer h3 { margin-bottom: var(--s2); line-height: 1.35; font-size: 1rem; }
.treffer__satz { margin: 0 0 var(--s3); color: var(--ink-2); font-size: var(--t-klein); }

/* Die Ergebnisklasse als Punkt am Treffer. Die Farbe ist NIE der einzige
 * Bedeutungsträger — daneben steht immer das Etikett im Klartext. */
.treffer[data-klasse="antragsbereit"]    .treffer__punkt { background: var(--gruen); }
/* Amber und ausdrücklich NICHT Grün: „fast passend" heißt, dass etwas im Weg
   steht — dieselbe Bedeutung wie beim Vorbehalt und beim anderen Weg. Eine
   eigene fünfte Farbe verbietet sich (siehe :root), und Grün wäre genau die
   Verwechslung, wegen der es diese Klasse überhaupt gibt (Audit P0-1). */
.treffer[data-klasse="fast_passend"]     .treffer__punkt { background: var(--amber); }
.treffer[data-klasse="alternativer_weg"] .treffer__punkt { background: var(--amber); }
.treffer[data-klasse="wegweiser"]        .treffer__punkt { background: var(--amber); }
.treffer[data-klasse="sachleistung"]     .treffer__punkt { background: var(--schiefer); }
.treffer[data-klasse="offene_fragen"]    .treffer__punkt { background: var(--akzent); }
.treffer[data-klasse="manuell_pruefen"]  .treffer__punkt { background: var(--akzent); }
/* Vereinsbezogen ist keine Absage und kein Vorbehalt: Diese Foerderung steht
   dem Verein zu, nur nicht aus diesem Vorhaben heraus. Deshalb Gruen wie
   antragsbereit -- die Nachricht ist gut, nur der Ort ein anderer. */
.treffer[data-klasse="vereinsbezogen"]   .treffer__punkt { background: var(--gruen); }
.treffer[data-klasse="passt_nicht"]      .treffer__punkt { background: var(--linie); }

/* ============================================================== Die Kachel
 *
 * EINE Trefferdarstellung für alle Stellen (Entscheidung des Gründers vom
 * 20.08.2026, Muster `docs/design-muster/set-a5-aufklapp.html`). Bis dahin
 * baute jede Seite ihre eigene Karte — Radar, Suche und Ergebnis —, und die
 * drei liefen auseinander; der doppelte Kontaktblock vom 19.08. kam genau
 * daher. Das Markup entsteht an einer Stelle (`server/kachel.mjs`), die Maße
 * hier.
 *
 * ZWEITE FASSUNG, 20.08.2026 abends: das Muster aus dem ChatGPT-Test,
 * übernommen auf Entscheidung des Gründers („Das design übernehmen wir 1:1 so,
 * ich finde das schön"). Befunde und Nachprüfung stehen in
 * `docs/foerderkarten-befunde-2026-08-20.md`.
 *
 * DIE MASSE SIND DIE DER REFERENZ, nachgerechnet auf die 17-px-Wurzel dieses
 * Projekts: 24 px Innenabstand, 17 px zwischen zwei Zeilengruppen, 9 px
 * innerhalb einer, 18 px Kartenradius, 13 px an der Faktenfläche, 9 px am
 * Knopf. Sie stehen als Variablen, weil eine Zahl im Regelwerk nur einmal
 * stehen darf.
 *
 * DIE FARBEN SIND DIE DIESES HAUSES, nicht die der Referenz. Das Muster ist
 * für hell und dunkel gebaut, das Produkt kennt nur hell — ein Dunkelmodus
 * wäre eine Änderung an jeder Seite und ist nicht bestellt. Übernommen ist die
 * ANATOMIE: was wo steht, wie groß, mit welchem Abstand.
 *
 * SECHS TONFAMILIEN, UND KEINE IST NEU. Die Regel oben in :root heißt „vier
 * Bedeutungen, vier Farben — und keine fünfte"; sie schützt vor Farben ohne
 * Aufgabe. Hier hat jede eine, und alle sechs stehen bereits in :root:
 *
 *   ja          --gruen     unsere Vorprüfung ist durch
 *   vielleicht  --amber     noch nicht entschieden (könnte, fast)
 *   klaeren     --akzent    eine Antwort des Vereins fehlt
 *   weg         --salbei    geht — aber nicht von hier aus
 *   still       --schiefer  keine Aussage möglich, keine Wertung
 *   nein        --fehler    ausgeschlossen
 *
 * GRÜN TRÄGT NUR „PASST NACH EUREN ANGABEN". Das ist die Regel, an der die
 * ganze Ampel hängt. Ein grünes „Könnte passen" wäre die Zusage, die dieses
 * Projekt nicht gibt.
 *
 * FARBE IST NIE DIE EINZIGE AUSSAGE. Jedes Abzeichen trägt Wort und Zeichen,
 * jede Zeile ihre Beschriftung. Wer keine Farben unterscheidet, verliert
 * nichts — und wer sich die Seite vorlesen lässt, hört den Text, weil alle
 * Zeichen `aria-hidden` sind.
 *
 * KEIN --ink-3 AUF DER KARTE. Das hellste Grau erreicht auf dem Kartengrund
 * 4,36:1 und trüge hier gelesenen Text. Die leiseren Zeilen stehen auf
 * --ink-2 (6,43:1); die Abstufung gegen den Titel machen Gewicht und Grad,
 * nicht ein drittes Grau.
 */

:root {
  --tk-innen:   1.4rem;   /* 23,8 px — Innenabstand oben und unten */
  --tk-innen-x: 1.5rem;   /* 25,5 px — links und rechts, minimal weiter */
  --tk-luft:    1rem;     /* 17 px — zwischen zwei Zeilengruppen */
  --tk-eng:     .5rem;    /* 8,5 px — innerhalb einer */
  /* 23,8 px — VOR einer Blockbeschriftung im Aufklapper. Eigener Wert, weil er
   * größer sein muss als --tk-luft: Er trennt zwei THEMEN, nicht zwei
   * Zeilengruppen desselben Themas. Gewählt am 28.08.2026 am gerenderten Bild
   * (docs/design-muster/aufklapp-trennung-2026-08-28.html, Variante C). */
  --tk-block:   1.4rem;
  --tk-abstand: var(--s4);/* zwischen zwei Karten */

  /* Der Titel wächst mit dem Fenster: 20 px auf dem Telefon, 27 px am Laptop.
   * Er ist der zweitgrößte Grad der Karte — größer ist nur der erste Fakt. */
  --tk-titel: clamp(1.18rem, 3.1vw, 1.6rem);
  --tk-wert:  1.06rem;    /* 18 px — die Fakten zwei und drei */
  --tk-wert1: 1.4rem;     /* 23,8 px — der erste Fakt, die eine große Zahl */
  --tk-satz:  .88rem;     /* 15 px — Passungszeilen, Warnung, Knopf, Aufklapp */

  /* Die Beschriftungsspalte der Passungszeilen. FEST — hinge sie am längsten
   * Wort der jeweiligen Karte, begänne der Text auf jeder Karte woanders. */
  --tk-marke: 6.4rem;
  --tk-zeichen: 1.05rem;  /* 17,9 px — die Zeichen, wie in der Referenz */
}

.tkachel {
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--karte);
  box-shadow: var(--schatten);
}

/* Der Abstand zwischen zwei Karten gehört der LISTE, nicht der Karte. Sonst
 * trägt die letzte Karte einen Abstand nach unten, den niemand bestellt hat,
 * und der Blockfuß steht zu tief. */
.tkliste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--tk-abstand);
}

/* Der obere Teil. Ein Raster statt Rändern an jedem Kind: So gilt derselbe
 * Abstand zwischen allen Zeilengruppen, auch wenn eine davon fehlt — und es
 * fehlt oft eine (nicht jede Karte hat eine Warnung, nicht jede eine
 * Kontextzeile). */
.tkachel__haupt {
  display: grid;
  gap: var(--tk-luft);
  padding: var(--tk-innen) var(--tk-innen-x) var(--tk-luft);
}

/* ── Zeile 1 · Wer gibt das Geld — und passt es? ────────────────────────── */

.tkachel__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--tk-eng) var(--tk-luft);
}

.tkachel__geber {
  /* `flex: 1 1 17rem` und nicht `1 1 auto`: Unter dieser Breite bricht die
   * Geberzeile lieber um, als das Abzeichen in die nächste Zeile zu drücken.
   * Der Zustand soll auf Höhe des Gebers stehen, nicht darunter. */
  flex: 1 1 17rem;
  min-width: 0;
  margin: 0;
  max-width: none;
  color: var(--ink-2);
  font-size: var(--t-klein);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.tkachel__lage {
  display: inline-flex;
  align-items: center;
  gap: var(--tk-eng);
  max-width: 100%;
  min-height: 2rem;
  padding: .3rem .65rem;
  border-radius: var(--r-marke);
  font-size: var(--t-klein);
  font-weight: 500;
  line-height: 1.35;
  /* Der Zustand ist der eine Punkt, an dem eine Zeile NICHT umbrechen soll:
   * „Passt nach euren Angaben" über zwei Zeilen liest sich wie zwei Aussagen.
   * Reicht der Platz nicht, rutscht das ganze Abzeichen unter den Geber —
   * dafür sorgt das `flex-wrap` am Kopf. */
  white-space: nowrap;
}

.tkachel__lage[data-ton="ja"]         { color: var(--gruen);    background: var(--gruen-hell); }
.tkachel__lage[data-ton="vielleicht"] { color: var(--amber);    background: var(--amber-hell); }
.tkachel__lage[data-ton="klaeren"]    { color: var(--akzent);   background: var(--akzent-hell); }
.tkachel__lage[data-ton="weg"]        { color: var(--salbei);   background: var(--salbei-hell); }
.tkachel__lage[data-ton="still"]      { color: var(--ink);      background: var(--schiefer-hell); }
.tkachel__lage[data-ton="nein"]       { color: var(--fehler);   background: var(--fehler-hell); }

/* ── Zeile 2 · Wofür ────────────────────────────────────────────────────── */

.tkachel__titel {
  margin: 0;
  max-width: 54rem;
  font-family: var(--disp);
  font-size: var(--tk-titel);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.02em;
  /* Der Titel wird NICHT abgeschnitten (Begründung in server/kachel.mjs).
   * Diese drei Zeilen sind die Layoutsicherung: Ein langes deutsches
   * Kompositum bricht um, statt die Karte zu sprengen. */
  overflow-wrap: anywhere;
  hyphens: auto;
  text-wrap: balance;
}

.tkachel__titel a { color: inherit; text-decoration: none; }
.tkachel__titel a:hover,
.tkachel__titel a:focus-visible {
  color: var(--akzent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Zeile 3 · Geprüft für ──────────────────────────────────────────────── */

/* Sie hängt am Titel und nicht im Rasterabstand: „Geprüft für: Trachten 2027"
 * gehört zur Überschrift wie ein Untertitel, nicht als eigene Aussage
 * daneben. Der negative Rand holt sie um zwei Drittel des Zeilenabstands
 * heran — dieselbe Nähe wie in der Referenz. */
.tkachel__kontext {
  margin: calc(var(--tk-luft) * -.65) 0 0;
  max-width: var(--spalte);
  color: var(--ink-2);
  font-size: var(--t-klein);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* ── Zeile 4 · Die Fakten ───────────────────────────────────────────────── */

/* `auto-fit` mit 9rem Mindestbreite: Drei Fakten stehen am Laptop
 * nebeneinander, bei schmalem Fenster untereinander — ohne Media Query und
 * ohne dass eine Zelle je schmaler wird als ihr längster Wert.
 *
 * Die Fläche ist eigens flacher als --grund: Sie soll die Zahlen tragen, nicht
 * selbst auffallen. */
/*
 * DIE DREI ZAHLEN STEHEN AUF EINER LINIE — auch wenn eine Beschriftung
 * umbricht und eine Zahl größer ist als die anderen.
 *
 * DER BEFUND (Gründer, 20.08.2026 abends): „die 15% ist in deinen vorschau
 * dateien bei mehreren kacheln weiter unten als 1.500 € je Tracht und 15.
 * September."
 *
 * ZWEI URSACHEN, und beide brauchten eine eigene Antwort:
 *
 *   1. „Zuschuss auf förderfähige Kosten" ist länger als „Frist" und bricht
 *      auf zwei Zeilen um. Ohne gemeinsames Raster schiebt das nur SEINE Zahl
 *      nach unten. `grid-template-rows: subgrid` an der Zelle hängt alle
 *      Beschriftungen in dieselbe Zeile und alle Werte in dieselbe darunter —
 *      die höchste Beschriftung bestimmt die Zeilenhöhe für alle.
 *   2. Die erste Zahl ist größer als die beiden anderen. Oben bündig gesetzt
 *      säße ihre Grundlinie tiefer. `align-self: baseline` stellt sie mit den
 *      kleineren auf DIESELBE Schreiblinie — das ist die Kante, die das Auge
 *      liest, nicht die Oberkante des Buchstabens.
 *
 * OHNE SUBGRID passiert nichts Schlimmes: Ältere Browser zeigen wieder die
 * Zelle als eigenständigen Block, also den Stand von vorher. Kein Bruch, nur
 * kein Gewinn.
 */
.tkachel__fakten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  grid-template-rows: auto auto;
  overflow: hidden;
  border-radius: 13px;
  background: var(--schiefer-flach);
}

.tkachel__fakt {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  align-items: baseline;
  min-width: 0;
  padding: .88rem 1.06rem;
  border-left: 1px solid var(--linie-2);
}

.tkachel__fakt:first-child { border-left: 0; }

.tkachel__marke {
  display: block;
  align-self: start;
  margin-bottom: .24rem;
  color: var(--ink-2);
  font-size: var(--t-winzig);
  line-height: 1.35;
}

/*
 * DIE SCHRIFT DES HAUSES (Entscheidung des Gründers, 20.08.2026 abends: „nehm
 * einfach die in dem der rest der website bis jetzt ist").
 *
 * Vier Fassungen standen zur Wahl; gewählt ist die, in der bis zum selben
 * Morgen die große Geldzeile stand — `--disp` mit Gewicht 650 und enger
 * Laufweite. Es ist dieselbe Schrift wie im Kartentitel darüber und in jeder
 * Überschrift der Anwendung. Die Referenz aus dem Test setzt Inter; eine
 * Webschrift wäre ein Drittinhalt und würde die Inhaltsregel aus
 * server/schutz.mjs aufweichen (siehe Kopf dieser Datei).
 */
.tkachel__wert {
  display: block;
  align-self: baseline;
  color: var(--ink);
  font-family: var(--disp);
  font-size: var(--tk-wert);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.015em;
  /* Ziffern gleicher Breite. Der Grund steht nicht in der Karte, sondern in
   * der LISTE: Untereinander stehende Beträge bilden nur dann eine lesbare
   * Spalte, wenn die 1 so breit ist wie die 8. */
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* DIE EINE GROSSE ZAHL. Sie steht immer an erster Stelle, weil die Frage
 * „wie viel?" immer dieselbe ist — und sie ist grün, weil Grün in diesem Haus
 * die Farbe des Geldes ist. */
.tkachel__fakt:first-child .tkachel__wert {
  color: var(--gruen);
  font-size: var(--tk-wert1);
}

/* Wo nichts feststeht, trägt dieselbe Zelle den Satz — aber NICHT in Grün.
 * Ein grünes „steht nicht fest" verspräche eine Summe, die es nicht gibt. */
.tkachel[data-geld="ohne-zahl"] .tkachel__fakt:first-child .tkachel__wert {
  color: var(--ink);
  font-size: var(--tk-wert);
}

/* ── Zeile 5 · Warum (nicht) ────────────────────────────────────────────── */

.tkachel__zeilen { display: grid; gap: var(--tk-eng); }

/* Drei Spalten: Zeichen · Beschriftung · Satz. Die mittlere ist fest, damit
 * die Sätze aller Karten einer Liste auf derselben Kante beginnen.
 * `align-items: start`, weil ein zweizeiliger Satz die Beschriftung sonst auf
 * seine halbe Höhe zöge — sie gehört auf die erste Zeile. */
.tkachel__zeile {
  display: grid;
  grid-template-columns: var(--tk-zeichen) var(--tk-marke) minmax(0, 1fr);
  align-items: start;
  gap: var(--tk-eng);
  margin: 0;
  font-size: var(--tk-satz);
  line-height: 1.45;
}

.tkachel__zeile .zk { margin-top: .12em; }

.tkachel__zeile[data-ton="gut"]     .zk { color: var(--gruen); }
.tkachel__zeile[data-ton="schlecht"] .zk { color: var(--fehler); }
.tkachel__zeile[data-ton="warnen"]  .zk { color: var(--amber); }
.tkachel__zeile[data-ton="info"]    .zk { color: var(--salbei); }

.tkachel__schluessel { font-weight: 500; color: var(--ink); }
.tkachel__satz { min-width: 0; color: var(--ink); overflow-wrap: anywhere; }

/* ── Zeile 6 · Der eine kritische Hinweis ───────────────────────────────── */

.tkachel__warnung {
  display: flex;
  align-items: flex-start;
  gap: var(--tk-eng);
  margin: 0;
  padding: .65rem .78rem;
  border-radius: var(--r-klein);
  font-size: var(--tk-satz);
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.tkachel__warnung .zk { margin-top: .1em; }

.tkachel__warnung[data-ton="warnen"]  { color: var(--amber);  background: var(--amber-hell); }
.tkachel__warnung[data-ton="halt"]    { color: var(--fehler); background: var(--fehler-hell); }
.tkachel__warnung[data-ton="hinweis"] { color: var(--salbei); background: var(--salbei-hell); }

/* ── Zeile 7 · Ein Weg nach unten und ein Knopf ─────────────────────────── */

/* Der Fuß hat einen eigenen Grund und eine Trennlinie: Er ist die
 * Handlungszone, und sie soll sich vom Gelesenen abheben.
 *
 * `align-items: start` und nicht `center`: Klappt der Aufklapper auf, wächst
 * die linke Spalte nach unten — bei zentrierter Ausrichtung schwebte der Knopf
 * dann auf halber Höhe eines langen Textes. Auf gleicher Höhe stehen beide
 * trotzdem, weil Aufklapp-Zeile und Knopf dieselbe Mindesthöhe haben. */
.tkachel__fuss {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--tk-luft);
  padding: .82rem var(--tk-innen-x);
  border-top: 1px solid var(--linie-2);
  background: var(--sand-hell);
}

/* Steht nur eines von beiden da, nimmt es die ganze Breite. */
.tkachel__fuss > :only-child { grid-column: 1 / -1; }
.tkachel__fuss > .tkachel__tat:only-child { justify-self: end; }

/* AUFGEKLAPPT BRAUCHT DER INHALT DIE GANZE BREITE (28.08.2026).
 *
 * DER BEFUND, vom Gründer an einem Muster gesehen: Der Aufklapper teilt sich
 * die Fußzeile mit dem Handlungsknopf — `minmax(0, 1fr) auto`. Zugeklappt ist
 * das richtig: „Alle Details ansehen" links, der Knopf rechts. Aufgeklappt
 * bekommt der Inhalt dann aber nur den Rest, den der Knopf übrig lässt.
 *
 * Gemessen an einer 412 px breiten Karte: Der offene Aufklapper war 149 px
 * breit, die Inhaltsspalte des `<dl>` davon 23 px — die feste Markenspalte
 * (`--tk-marke`, 6.4rem) fraß den Rest. Jedes Wort stand auf einer eigenen
 * Zeile, dazu zwei Scrollbalken. 34 Elemente liefen über.
 *
 * Mit dieser Zeile: Aufklapper 359 px, Inhaltsspalte 233 px, NULL Überläufe.
 * Der Knopf rutscht unter den geöffneten Text, und das ist auch die richtige
 * Reihenfolge — erst lesen, dann handeln.
 */
.tkachel__fuss > .tkachel__auf[open] { grid-column: 1 / -1; }

.tkachel__tat { display: flex; flex-wrap: wrap; gap: var(--tk-eng); }
.tkachel__tat form { margin: 0; }

.tkachel__tat .knopf {
  min-height: var(--klickziel);
  font-size: var(--tk-satz);
  display: inline-flex;
  align-items: center;
  gap: var(--tk-eng);
}

/* ── „Antwort ändern" — die Gegenprobe an der Karte (12.09.2026) ─────────
 *
 * Sie steht dort, wo sonst der Handlungsknopf steht, und sieht auch so aus:
 * eine Beschriftung und zwei leise Knöpfe in einer Zeile. Die eigene Klasse
 * braucht es allein wegen der Beschriftung — `.tkachel__tat` kennt nur Knöpfe
 * und stellt sie nebeneinander; ein nacktes `<span>` dazwischen stünde ohne
 * Größe und ohne Farbe.
 *
 * SIE IST LEISE UND BLEIBT SICHTBAR. Hinter einem Aufklapper wäre sie wieder
 * das, was der Prüfbericht gemeldet hat: eine Antwort, die verschwunden ist.
 */
.gegenprobe {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tk-eng);
}

.gegenprobe__marke { font-size: var(--tk-satz); color: var(--ink-2); }

/* ── Der Aufklapper IN der Karte ────────────────────────────────────────── */

.tkachel__auf { min-width: 0; }

/* Der Pfeil steht LINKS vor dem Wort und nicht rechts am Rand: Rechts hinge
 * er in der Luft, weil die Karte keine zweite rechte Kante hat. */
.tkachel__auf > summary {
  min-height: var(--klickziel);
  display: inline-flex;
  align-items: center;
  gap: var(--tk-eng);
  padding-right: var(--tk-eng);
  color: var(--ink);
  font-size: var(--tk-satz);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-klein);
}

.tkachel__auf > summary::-webkit-details-marker { display: none; }

.tkachel__auf > summary::before {
  content: "›";
  color: var(--akzent);
  font-size: 1.4rem;
  line-height: .8;
  transition: transform .16s ease;
}

.tkachel__auf[open] > summary::before { transform: rotate(90deg); }

.tkachel__auf > summary:hover,
.tkachel__auf > summary:focus-visible { color: var(--akzent); }

@media (prefers-reduced-motion: reduce) {
  .tkachel__auf > summary::before { transition: none; }
}

/* Der aufgeklappte Teil steht auf DERSELBEN Kante wie die Sätze der
 * Passungszeilen darüber. Die Karte wächst nach unten, sie rutscht nicht. */
/*
 * DIE BESCHRIFTUNG STEHT ÜBER IHREM BLOCK, NICHT DANEBEN (Gründerentscheid
 * vom 28.08.2026 abends, aus drei Mustern gewählt:
 * docs/design-muster/aufklapp-trennung-2026-08-28.html).
 *
 * DER BEFUND, mit Bild: „etwas mehr Abstand zwischen Themen da wo die roten
 * Linien sind." Die Linien lagen zwischen „Legt bereit" und „Wohin damit"
 * sowie zwischen dem Kontakt und den Quellen. Ursache war der Zeilenabstand:
 * 8,5 px ZWISCHEN zwei Blöcken — derselbe Wert wie INNERHALB eines. Gemessen
 * lagen die Abstände bei 9 bis 21 px, je nachdem wie hoch die Beschriftung
 * neben ihrem Text stand. Zwei Themen, die gleich weit auseinanderstehen wie
 * zwei Zeilen desselben Themas, sind keine zwei Themen mehr.
 *
 * WARUM ÜBER STATT DANEBEN, und nicht einfach mehr Luft: Die Marke daneben
 * erzeugt einen Abstand, der von der Höhe des Nachbarn abhängt — deshalb die
 * Spanne 9 bis 21. Über dem Block ist er konstant (gemessen 29 px), der Text
 * bekommt die volle Breite, und die Beschriftung trennt von selbst, weil sie
 * als Überschrift gelesen wird. Dieselbe Anordnung wie auf der Detailseite.
 *
 * DAS TELEFON MACHTE ES OHNEHIN SCHON SO. Unten im Blatt stand dafür ein
 * eigener Block unter `max-width`; er ist mit diesem Entscheid entfallen. Eine
 * Anordnung, die auf beiden Breiten gilt, braucht keine zwei Regeln.
 */
.tkachel__tiefer {
  margin: var(--tk-eng) 0 var(--tk-eng);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: .3rem;
  font-size: var(--t-klein);
  line-height: 1.5;
}

/* Der Abstand zwischen zwei Blöcken steckt hier und nicht im `row-gap`: Marke
 * und Inhalt gehören eng zusammen, die Lücke gehört davor. */
.tkachel__tiefer dt {
  margin: var(--tk-block) 0 0;
  color: var(--ink);
  font-weight: 600;
}
.tkachel__tiefer > dt:first-of-type { margin-top: 0; }

.tkachel__tiefer dd {
  margin: 0;
  color: var(--ink);
}

.tkachel__tiefer dd p { margin: 0 0 var(--tk-eng); max-width: var(--spalte); }
.tkachel__tiefer dd p:last-child { margin-bottom: 0; }

/*
 * WAS GELESEN WIRD, BLEIBT AUF LESEBREITE — auch ohne Beschriftungsspalte.
 *
 * Seit die Marke über dem Block steht, hat der Inhalt die volle Kartenbreite;
 * bei 969 px sind das über hundert Zeichen je Zeile. Für Absätze fing das die
 * Regel darüber schon ab (`--spalte`, rund 68 Zeichen), für Aufzählungen und
 * den hervorgehobenen Kasten nicht — und deren Zeilen sind oft zwei Sätze lang.
 *
 * NICHT GEDECKELT sind `blick` und `paare`: Sie sind Marke-Wert-Paare, keine
 * Fließtexte. Dort hilft Breite, weil eine Anschrift sonst dreimal umbricht.
 */
.tkachel__tiefer .tkachel__punkte,
.tkachel__tiefer .tkachel__bed,
.tkachel__tiefer .tkachel__zuerst,
.tkachel__tiefer .tkachel__nach { max-width: var(--spalte); }

/* Die Originalquellen als LETZTE Zeilen des Aufklappers (Zusatz des Gründers
 * vom 20.08.2026). Es sind Links auf fremde Dokumente — Richtlinie,
 * Merkblatt, Formular, Programmseite —, nicht unsere Redaktionstexte.
 * Deshalb steht der Prüfstand daneben: Wer eine fremde Seite öffnet, muss
 * wissen, wann wir sie zuletzt gesehen haben. */
.tkachel__quellen { margin: 0; padding: 0; list-style: none; }

.tkachel__quellen li + li { margin-top: var(--tk-eng); }

.tkachel__quellen a { min-height: var(--klickziel); display: inline-flex; align-items: center; }

.tkachel__stand { color: var(--ink-2); }

/* ── Aufzählungen und Marke-Wert-Paare im Aufklapper (28.08.2026) ─────────
 *
 * DER BEFUND, an einer Musterkarte gesehen: „Das ist unübersichtlich." Beides
 * lag längst strukturiert vor und wurde beim Rendern plattgemacht — die
 * Unterlagen des Kreisjugendrings als fünf Einzelpunkte, mit `.join(", ")` zu
 * einem Absatz von 289 Wörtern; der Kontakt als ein Freitextfeld mit Name,
 * zwei Anschriften, zwei E-Mails, zwei Telefonnummern und Bürozeiten darin.
 *
 * Die Marken erben die Maße des Aufklappers (`--tk-eng`, `--tk-marke`), damit
 * hier kein zweiter Rhythmus entsteht — dieselbe Regel, die der
 * Abstandswächter in test/kachel.test.mjs über der ganzen Karte hält. */
.tkachel__punkte { margin: 0; padding-left: 1.1rem; }
.tkachel__punkte li + li { margin-top: var(--tk-eng); }
.tkachel__leise { color: var(--ink-2); }

.tkachel__paare { display: grid; gap: var(--tk-eng); }

/* Unter --tk-marke bricht die Marke über den Wert statt neben ihn: Bei einer
 * schmalen Karte bliebe für die Anschrift sonst eine Spalte von wenigen
 * Zeichen — derselbe Fehler, den der Aufklapper selbst hatte, als er sich die
 * Fußzeile mit dem Knopf teilte. */
.tkachel__paar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--tk-luft);
}

@media (min-width: 30rem) {
  .tkachel__paar { grid-template-columns: var(--tk-marke) minmax(0, 1fr); align-items: baseline; }
}

.tkachel__paar > span { color: var(--ink-2); }
.tkachel__paar > b { font-weight: 500; overflow-wrap: anywhere; }

/* ── Der Baukasten der Detailkarte ──────────────────────────────────────────
 *
 * Dazugekommen am 28.08.2026 mit dem Bauauftrag „Die Detailkarte wird eine
 * Anzeige" (docs/bauauftrag-detailkarten-2026-08-28.md). Der Befund davor,
 * gemessen an allen 136 Karten: 420 Wörter je Karte, 53 % wiederholten sich
 * blockübergreifend, und „Gut zu wissen" stand auf 91 von 135 Karten
 * wortgleich auch woanders.
 *
 * ALLE MASSE ERBEN VOM AUFKLAPPER (--tk-eng, --tk-luft, --tk-marke). Ein
 * eigener Rhythmus wäre hier eine zweite Karte in der Karte.
 */

/* ZUERST — der einzige laute Ton auf einer bewusst ruhigen Karte.
 *
 * Er trägt, was man tun MUSS, bevor man irgendetwas anderes tut: anrufen, die
 * Beratung einschalten, nicht bestellen. Also Fehler, die sich nicht mehr
 * heilen lassen. Käme ein zweiter hervorgehobener Block dazu, wäre keiner mehr
 * hervorgehoben — deshalb begrenzt das Schema ihn auf drei Punkte. */
.tkachel__zuerst {
  border-radius: 11px;
  background: var(--akzent-hell);
  border-left: 3px solid var(--akzent);
  padding: .72rem .9rem;
}
.tkachel__zuerst ul { margin: 0; padding: 0; list-style: none; }
.tkachel__zuerst li { line-height: 1.55; }
/* Die Trennlinie leitet sich aus dem Akzent ab statt aus --linie: Auf der
 * grünen Fläche wäre der neutrale Grauton ein Fremdkörper. */
.tkachel__zuerst li + li {
  margin-top: .55rem; padding-top: .55rem;
  border-top: 1px solid color-mix(in srgb, var(--akzent) 18%, transparent);
}

/* Die Beschriftung nimmt die Farbe ihres Kastens an — sonst schwebte ein
 * grauer Zettel neben einer grünen Fläche. */
.tkachel__tiefer dt[data-ton="wichtig"] { color: var(--akzent-tief); font-weight: 600; }

/* DER KLARTEXT — die Wörter dieser Karte, die niemand kennt (29.08.2026).
 *
 * Er sitzt unter dem Einordnungsabsatz von „Was ist das?" und ist bewusst
 * ABGESETZT: Der Absatz erklärt die Förderung, der Klartext die Sprache
 * darüber. Ineinandergeschoben ergäben sie wieder die Textwand, gegen die der
 * Umbau vom 28.08. gebaut ist.
 *
 * DIE FLÄCHE IST NEUTRAL, nicht grün: Grün ist im Haus die Farbe von „das
 * musst du zuerst tun" (--akzent-hell bei .tkachel__zuerst), und ein zweiter
 * farbiger Kasten entwertete den einen, der wirklich dringend ist. Der
 * Klartext ist ruhig — er erklärt, er warnt nicht. */
.tkachel__klartext {
  margin: var(--tk-eng) 0 0;
  padding: .72rem .9rem;
  border-radius: 11px;
  background: var(--schiefer-flach);
  max-width: var(--spalte);
}
.tkachel__klartext dt {
  font-weight: 600;
  color: var(--ink);
  margin: .7rem 0 .1rem;
}
.tkachel__klartext > dt:first-child { margin-top: 0; }
.tkachel__klartext dd { margin: 0; line-height: 1.55; }

/* AUF EINEN BLICK — die Produktangaben als Preisliste.
 *
 * Sie nimmt das Formenvokabular der Faktenleiste oben an der Karte auf
 * (gerundete Fläche, --schiefer-flach, Haarlinien), damit die Karte EIN Ding
 * bleibt und nicht zwei Gestaltungen übereinander. */
.tkachel__blick { border-radius: 11px; overflow: hidden; background: var(--schiefer-flach); }

.tkachel__blickz {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--tk-luft);
  padding: .5rem .8rem;
  border-top: 1px solid var(--linie-2);
}
.tkachel__blickz:first-child { border-top: 0; }
.tkachel__blickm { color: var(--ink-2); }
.tkachel__blickw { overflow-wrap: anywhere; }

/* Dieselbe Umbruchgrenze wie beim Zeilenpaar darüber, und aus demselben Grund:
 * Unter --tk-marke bliebe für den Wert eine Spalte von wenigen Zeichen. */
@media (min-width: 30rem) {
  .tkachel__blickz { grid-template-columns: 7.4rem minmax(0, 1fr); align-items: baseline; }
}

/* IHR MÜSST SEIN / EUER VORHABEN MUSS — die Zugangsbedingungen.
 *
 * Der Ton ist ein data-Merkmal, nie eine Farbe im Markup; welche Farbe daraus
 * wird, entscheidet allein diese Datei (ADR Abschnitt 11). Das Zeichen steht
 * im ::before, weil es zur Aussage gehört und nicht zum Text — ein
 * Vorleseprogramm hört die Bedingung, nicht den Haken. */
.tkachel__bed { margin: 0; padding: 0; list-style: none; }
.tkachel__bed li { position: relative; padding-left: 1.25rem; line-height: 1.55; }
.tkachel__bed li + li { margin-top: .42rem; }
.tkachel__bed li::before { position: absolute; left: 0; top: 0; font-weight: 700; font-size: .9em; }
.tkachel__bed li[data-ton="erfuellt"]::before { content: "\2713"; color: var(--gruen); }
.tkachel__bed li[data-ton="offen"]::before { content: "?"; color: var(--amber); }
.tkachel__bed li[data-ton="offen"] { color: var(--ink-2); }
/* Ein ausdrücklicher Ausschluss. Er trägt NICHT die Fehlerfarbe: Hier ist
 * nichts kaputt, hier ist etwas nicht vorgesehen — und der Unterschied
 * entscheidet, ob ein Vorstand erschrickt oder weiterliest. */
.tkachel__bed li[data-ton="nein"]::before { content: "\00D7"; color: var(--schiefer); }

/* Die Fundstelle unter einem Ausschluss. Eigene Zeile statt Klammer im Satz:
 * Ein Beleg von zwei Sätzen mitten in der Bedingung macht aus der Bedingung
 * einen Absatz — und die Liste wäre keine mehr. */
.tkachel__beleg { display: block; margin-top: .2rem; color: var(--ink-2); }

/* Der leise Nachsatz unter einer Aufzählung — Herkunft, nicht Inhalt. Er sagt
 * etwa, dass die drei Unterlagen ein Grundset sind und nicht die Forderung des
 * Gebers. Deshalb leiser als die Liste, aber nicht kleiner als lesbar. */
.tkachel__nach { margin: .55rem 0 0; color: var(--ink-2); line-height: 1.5; }

/* ── Die Zeichen ────────────────────────────────────────────────────────── */

/* Das Sprite steht einmal je Seite im Rumpf. `display:none` wäre der bequeme
 * Weg und der falsche — in mehreren Browsern rendern <use>-Verweise darauf
 * dann gar nicht. So misst es nichts und trägt trotzdem. */
.zksprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/*
 * DIE STRICHFÜHRUNG GEHÖRT INS STYLESHEET, NICHT ANS SPRITE.
 *
 * DER BEFUND (Gründer, beim ersten Ansehen): „die schwarzen flecken stören
 * mich, vermutlich emojis die nicht richtig rendern." Es waren keine Emojis,
 * sondern diese Zeichen — als schwarze Klumpen.
 *
 * DIE URSACHE: `fill="none" stroke="currentColor"` stand als ATTRIBUT am
 * Sprite-Element. Attribute vererben sich nicht in den Baum, den ein `<use>`
 * an anderer Stelle aufspannt; dort galt wieder die Vorgabe von SVG, und die
 * lautet „schwarz gefüllt, kein Strich". Aus einem Häkchen wurde ein Fleck.
 *
 * CSS-Eigenschaften vererben sich sehr wohl bis in diesen Baum. Sie stehen
 * damit auch an der richtigen Stelle: Wie ein Zeichen aussieht, ist eine
 * Gestaltungsfrage (ADR Abschnitt 11), und die wird hier entschieden.
 */
.zk {
  flex: 0 0 auto;
  width: var(--tk-zeichen);
  height: var(--tk-zeichen);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Zeichen sind Dekoration, der Text daneben trägt die Aussage. Deshalb erben
   * sie die Farbe ihrer Zeile, statt eine eigene zu setzen. */
  color: currentColor;
}

/* Auf dem gefüllten Hauptknopf steht das Zeichen auf der Knopffarbe. Ein
 * Strich von 2 wirkt dort schwerer als auf hellem Grund — 1.8 gleicht das aus,
 * ohne dass die Form eine andere wird. */
.tkachel__tat .knopf .zk { stroke-width: 1.8; }

/* ── Schmales Fenster ───────────────────────────────────────────────────── */

/* Gemessene Ziele des Tests: 320, 360, 736 und 1.024 px, kein Querlauf. Die
 * Faktenleiste stapelt sich von allein (auto-fit); hier fallen die
 * Beschriftungsspalte und der Fuß. */
@media (max-width: 34rem) {
  .tkachel__haupt { padding: var(--tk-luft) var(--tk-luft) var(--tk-eng); }

  /*
   * DIE FAKTEN STAPELN SICH — und zwar wirklich.
   *
   * `auto-fit` mit 9 rem Mindestbreite ließ bei 375 px noch ZWEI Spalten zu
   * (gemessen am 20.08.2026: 343 px Kartenbreite, 309 px innen — zwei Zellen
   * à 153 px passen rechnerisch hinein). Gleichzeitig hatte die Regel darunter
   * die Trennlinien schon auf waagerecht gestellt: Striche über Zellen, die
   * nebeneinander standen. Eine feste Spalte beendet den Widerspruch.
   *
   * Und drei Werte à 150 px sind ohnehin keine Leiste mehr, sondern drei
   * beengte Kästchen — „1.500 € je Tracht" bricht dort um.
   */
  .tkachel__fakten { grid-template-columns: minmax(0, 1fr); }

  /* Untereinander wird die senkrechte Trennlinie zur waagerechten — sonst
   * schwebte sie über einer Zelle statt neben ihr. */
  .tkachel__fakt { border-left: 0; border-top: 1px solid var(--linie-2); }
  .tkachel__fakt:first-child { border-top: 0; }

  /* Beschriftung über den Satz statt daneben: 6,4 rem Spalte lassen bei 320 px
   * keine lesbare Zeile übrig. Das Zeichen bleibt links und überspannt beide
   * Zeilen — es gehört zur Aussage, nicht zur Beschriftung. */
  .tkachel__zeile { grid-template-columns: var(--tk-zeichen) minmax(0, 1fr); }
  .tkachel__schluessel,
  .tkachel__satz { grid-column: 2; }

  /* Der Aufklapper stand hier bis zum 28.08.2026: Beschriftung über den Text,
   * aber nur unter 30 rem. Seit dem Entscheid gilt das auf allen Breiten und
   * steht deshalb oben bei der Regel selbst. */

  /* DIE HAUPTAKTION STEHT ÜBER DEM DETAIL-LINK UND FÜLLT DIE BREITE. So
   * verlangt es der Test, und der Grund ist der Daumen: Auf dem Telefon ist
   * die Handlung das Erste, was erreichbar sein muss — nicht das Nachlesen. */
  .tkachel__fuss {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--tk-eng) var(--tk-luft) var(--tk-luft);
  }
  .tkachel__fuss > .tkachel__tat { grid-row: 1; }
  .tkachel__fuss > .tkachel__auf { grid-row: 2; }
  .tkachel__fuss > .tkachel__tat:only-child { justify-self: stretch; }
  .tkachel__tat .knopf { width: 100%; justify-content: center; }
  /* Ja und Nein bleiben nebeneinander — untereinander sähen sie aus wie zwei
   * verschiedene Handlungen. Die Beschriftung nimmt die Zeile darüber. */
  .gegenprobe__marke { width: 100%; }
  .gegenprobe .knopf { width: auto; flex: 1 1 0; }
}

/* ================================================================= Chips */

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.chip {
  font-size: var(--t-winzig);
  font-weight: 600;
  padding: .12rem .5rem;
  border-radius: var(--r-klein);
  background: var(--schiefer-hell);
  color: var(--schiefer);
  border: 1px solid transparent;
  white-space: nowrap;
}
.chip[data-klasse="antragsbereit"]    { background: var(--gruen-hell);  color: var(--gruen); }
.chip[data-klasse="fast_passend"]     { background: var(--amber-hell);  color: var(--amber); }
.chip[data-klasse="alternativer_weg"] { background: var(--amber-hell);  color: var(--amber); }
.chip[data-klasse="wegweiser"]        { background: var(--amber-hell);  color: var(--amber); }
.chip[data-klasse="sachleistung"]     { background: var(--schiefer-hell); color: var(--schiefer); }
.chip[data-klasse="offene_fragen"]    { background: var(--akzent-hell); color: var(--akzent); }
.chip[data-klasse="manuell_pruefen"]  { background: var(--akzent-hell); color: var(--akzent); }
.chip[data-klasse="vereinsbezogen"]   { background: var(--gruen-hell);  color: var(--gruen); }
.chip[data-klasse="passt_nicht"]      { background: var(--schiefer-hell); color: var(--schiefer); }

/* Der Stand eines Antrags in der Mappe. Vier Werte, und sie folgen demselben
   Farbschlüssel wie überall sonst: grün heißt „geht", amber heißt „ihr seid
   dran", neutral heißt „nichts zu tun". Ein Entwurf ist die einzige Zeile mit
   Arbeit darin und deshalb die einzige, die eine Farbe bekommt, die auffällt. */
.chip[data-stand="vorbereitet"] { background: var(--amber-hell);    color: var(--amber); }
.chip[data-stand="eingereicht"] { background: var(--akzent-hell);   color: var(--akzent); }
.chip[data-stand="bewilligt"]   { background: var(--gruen-hell);    color: var(--gruen); }
.chip[data-stand="abgelehnt"]   { background: var(--schiefer-hell); color: var(--schiefer); }

.chip[data-art="betrag-zahl"]     { background: var(--gruen-hell); color: var(--gruen); }
/* Ein Zustand, ein Text, eine Farbe (Entscheidung 2026-08-12): Seit
   betragAnzeige() alle Fälle ohne Zahl gleich beschriftet, wären zwei Farben
   für denselben Satz eine Unterscheidung ohne Unterschied. Die alten Arten
   `betrag-gesperrt` und `betrag-offen` erzeugt niemand mehr. */
.chip[data-art="betrag-ohne-zahl"] { background: var(--karte); color: var(--amber); border-color: var(--amber-hell); }

/* Die Größenangabe ist eine Information, keine Bewertung — deshalb neutral und
   ohne eigene Akzentfarbe. Das Stylesheet lässt bewusst keine fünfte zu:
   jede zusätzliche kostet Aussagekraft bei allen anderen. */
.chip[data-art="groesse"]         { background: var(--karte); color: var(--ink-2); border-color: var(--linie); font-weight: 500; }
.chip[data-art="frueh"]           { background: var(--karte); color: var(--amber); border-color: var(--amber-hell); }
.chip[data-art="risiko"]          { background: var(--karte); color: var(--amber); border-color: var(--amber-hell); }

/* ============================================================ Rückfragen */

.fragen {
  background: var(--karte);
  border: 1px solid var(--akzent-hell);
  border-left: 3px solid var(--akzent);
  border-radius: var(--r);
  box-shadow: var(--schatten);
  padding: var(--s5);
  margin-bottom: var(--s4);
}
.fragen h3 { margin-bottom: var(--s1); font-size: 1rem; }
.fragen__vor { font-size: var(--t-klein); color: var(--ink-3); margin: 0 0 var(--s4); }

.frage { padding: var(--s4) 0; border-top: 1px solid var(--linie-2); }
.frage:first-of-type { border-top: none; padding-top: 0; }
.frage:last-of-type { padding-bottom: 0; }
.frage__text { margin: 0 0 var(--s1); font-weight: 600; font-size: var(--t-klein); }
.frage__gewicht { font-size: var(--t-winzig); color: var(--akzent); font-weight: 600; margin: 0 0 var(--s3); }

/* ---------------------------------------------------- Die Schlüsselfragen
 *
 * Die Zwischenseite vor dem Ergebnis (Befund 5): vier bis sechs Fragen, die
 * bei „ja" wirklich einen Weg öffnen — auf EINER Seite statt als Strecke.
 *
 * SIE IST EIN <fieldset>, weil drei Radios eine Gruppe sind und ein `for` genau
 * ein Ziel braucht. Der Browser gibt einem fieldset dafür einen eigenen Rand
 * und ein eigenes Innenmaß; beides muss weg, sonst steht die Frage in einem
 * Kasten im Kasten. `.frage` setzt nur `border-top` — die drei anderen Kanten
 * blieben ohne diese Zeile stehen.
 */
fieldset.frage {
  border: none;
  border-top: 1px solid var(--linie-2);
  margin: 0;
  padding: var(--s4) 0;
  min-width: 0; /* sonst sprengt ein langer Fragetext das Raster */
}
fieldset.frage:first-of-type { border-top: none; padding-top: 0; }
fieldset.frage > legend {
  padding: 0;
  margin-bottom: var(--s1);
  font-weight: 600;
  font-size: var(--t-klein);
}
/* DREI KURZE ANTWORTEN NEBENEINANDER. `.kreuze` rechnet mit 14rem je Spalte —
 * richtig für „Fläche in der Natur (Streuobst, Biotop, Hecke, Gewässer)",
 * verschwenderisch für „Ja". Auf der schmalen Seite ergäben 14rem zwei Spalten
 * und eine Waise darunter. */
fieldset.frage[data-art="schluessel"] .kreuze {
  grid-template-columns: repeat(auto-fit, minmax(7rem, auto));
  gap: var(--s2) var(--s4);
  justify-content: start;
}

/* Eine Frage, die der Verein selbst weggeschoben hat — im Ergebnis unter „Das
 * habt ihr offengelassen". Leiser als die offenen darüber, aber nicht grau:
 * Sie ist beantwortbar, sobald jemand im Verein die Antwort kennt. */
.frage[data-stand="offengelassen"] .frage__gewicht { color: var(--ink-3); }

.antworten { display: flex; flex-wrap: wrap; gap: var(--s2); }
.antworten button {
  font: inherit;
  font-size: var(--t-klein);
  font-weight: 600;
  padding: .3rem var(--s3);
  border: 1px solid var(--linie);
  border-radius: var(--r-klein);
  background: var(--karte);
  color: var(--ink);
  cursor: pointer;
}
.antworten button:hover { border-color: var(--akzent); color: var(--akzent); }

/* ============================================================== Hinweise */

.hinweis {
  font-size: var(--t-klein);
  color: var(--ink-2);
  background: var(--grund);
  border-radius: var(--r-klein);
  padding: var(--s3);
  margin: 0 0 var(--s3);
}
/* Mehrere Sätze in einem Kasten — über der Vorlage stehen zwei: die Leitplanke
   („Muster …, keine Rechtsberatung", immer) und der Zusatz, den die Vorlage
   selbst mitbringt. Ohne diese Regel trügen sie den Absatzabstand des
   Fließtextes und der kleine Kasten liefe auseinander. */
.hinweis > p { margin: 0 0 var(--s2); }
.hinweis > p:last-child { margin-bottom: 0; }

/* Die nicht erfüllte Voraussetzung an einem „fast passend"-Treffer. Sie ist die
   Auskunft, wegen der die Karte überhaupt dort steht — deshalb abgesetzt und
   nicht im Fließtext des Kastens (Audit P0-1). */
.hinweis[data-art="voraussetzung"] { background: var(--amber-hell); color: var(--ink); }
.hinweis[data-art="voraussetzung"] ul { margin: var(--s2) 0 0; padding-left: 1.1rem; }
.hinweis[data-art="voraussetzung"] li { margin-bottom: var(--s1); }
.hinweis[data-art="voraussetzung"] li:last-child { margin-bottom: 0; }

/* WAS PASSIERT, WENN NICHT (30.08.2026).
 *
 * Die Rechtsfolge einer nicht erfüllten Pflicht — heute vier von neunzehn
 * Datenschutzkarten, nämlich die, bei denen ein Dritter den Verstoß von außen
 * bemerken kann (Begründung im Schema bei `bussgeld`).
 *
 * AMBER UND NICHT ROT, und das ist die ganze Gestaltungsentscheidung. Rot heißt
 * in diesem Werkzeug „hier ist etwas kaputt oder versäumt" (`--fehler`, die
 * verstrichene Frist). Hier ist nichts versäumt: Der Verein liest gerade, was
 * zu tun ist. Amber heißt überall sonst „ihr seid dran" — genau das ist die
 * Aussage. Ein roter Kasten mit einer Bußgeldnorm über einer Pflicht, die man
 * heute Nachmittag erledigen kann, macht aus einem Hinweis eine Drohung.
 *
 * DIE LINIE LINKS statt eines gefüllten Kastens: Sie hebt den Absatz aus dem
 * Fließtext, ohne ihn zum lautesten Element der Karte zu machen. Der Merksatz
 * darüber bleibt der Kasten, den das Auge zuerst findet. */
.folge {
  font-size: var(--t-klein);
  color: var(--ink-2);
  border-left: 3px solid var(--amber);
  padding: 0 0 0 var(--s3);
  margin: var(--s3) 0 0;
}
.folge b { color: var(--ink); }

/* Ein langer Vorbehalt: erster Satz sichtbar, Rest einen Klick entfernt. */
details.hinweis > summary { cursor: pointer; list-style: none; }
details.hinweis > summary::-webkit-details-marker { display: none; }
details.hinweis > summary::after { content: " mehr"; color: var(--akzent); font-weight: 600; }
details.hinweis[open] > summary::after { content: " weniger"; }
details.hinweis > p { margin: var(--s2) 0 0; font-size: inherit; }
.kontakt { font-size: var(--t-klein); color: var(--ink-2); margin: 0 0 var(--s3); }

/* =========================================================== Aufklappbar */

details.zu {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  box-shadow: var(--schatten);
}
details.zu > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s4) var(--s5);
  font-family: var(--disp);
  font-weight: 650;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: var(--s3);
}
details.zu > summary::-webkit-details-marker { display: none; }
details.zu > summary::after { content: "▾"; margin-left: auto; color: var(--ink-3); font-size: var(--t-klein); }
details.zu[open] > summary::after { content: "▴"; }

/*
 * Der Aufklapper vor einer unumkehrbaren Handlung.
 *
 * ER SIEHT AUS WIE `details.zu` UND TRÄGT NUR EINEN ANDEREN RAND. Das ist
 * Absicht: Ein Kasten, der schon zugeklappt in Warnfarbe leuchtet, schreit
 * einen Vorstand an, der gar nichts löschen wollte. Erst geöffnet steht die
 * Farbe da, wo die Entscheidung fällt — am Knopf, den `[data-art="gefahr"]`
 * längst rot fasst.
 *
 * DAS AUFKLAPPEN IST DIE RÜCKFRAGE. Ohne Skript gibt es keinen Dialog
 * (strenge Inhaltsregel, ADR Abschnitt 11), also sind es zwei bewusste Gesten
 * statt eines Fehlklicks in einer Reihe sonst harmloser Knöpfe.
 */
/* ROT SCHON IM ZUGEKLAPPTEN ZUSTAND (Sichtprüfung 18.08.: „der Knopf soll ganz
   nach unten und rot markiert werden").
 *
   Vorher war das Aufklappen neutral und die Farbe kam erst danach. Das war als
   Zurückhaltung gemeint, hatte aber die falsche Wirkung: Der einzige
   unumkehrbare Weg der Seite sah aus wie die Eckdaten darüber. Ein Weg, den man
   nicht rückgängig machen kann, sagt das VOR dem Klick.

   Die Rückfrage bleibt, was sie war — zwei bewusste Gesten. Rot heißt hier
   „Vorsicht", nicht „gleich passiert etwas": Aufklappen löscht nichts. */
details.gefahr {
  background: var(--karte);
  border: 1px solid var(--fehler-hell);
  border-left: 3px solid var(--fehler);
  border-radius: var(--r);
  margin-top: var(--s7);
}
details.gefahr > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s4) var(--s5);
  font-size: var(--t-klein);
  font-weight: 650;
  color: var(--fehler);
  display: flex;
  align-items: center;
  gap: var(--s3);
}
details.gefahr > summary::-webkit-details-marker { display: none; }
details.gefahr > summary::after { content: "▾"; margin-left: auto; color: var(--fehler); }
details.gefahr[open] { border-color: var(--fehler); }
details.gefahr[open] > summary::after { content: "▴"; }

/* Die Anträge eines Vorhabens. Aufbau wie `.schritt` auf der Ergebnisseite —
   Text links, Knopf rechts, gleiche Höhe pro Zeile —, damit ein Vorstand nicht
   zwei Listenformen lernen muss. */
/* Der Weg von einem Radar-Treffer auf seine Detailseite. Die Überschrift bleibt
   eine Überschrift und wird nur anklickbar — ein Link, der aussieht wie ein
   Link, sobald man ihn ansteuert. */
.treffer__link { color: inherit; text-decoration: none; }
.treffer__link:hover, .treffer__link:focus-visible { color: var(--akzent); text-decoration: underline; text-underline-offset: 3px; }
.treffer__mehr { margin: .5rem 0 0; font-size: var(--t-klein); }

/* Die Detailseite eines Bestandseintrags: Abschnitte als Karten untereinander,
   damit die sieben Fragen (worum, wie viel, wer, was, bis wann, wohin, woran)
   auch beim Überfliegen auseinanderfallen. */
.hoehe__satz { margin: 0 0 var(--s3); font-size: var(--t-gross); font-weight: 650; color: var(--akzent-tief); }
.frist__kurz {
  margin: 0 0 var(--s3);
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--amber);
  background: var(--amber-hell);
  border-radius: var(--r-klein);
  font-weight: 650;
}
.frist__lang p { color: var(--ink-2); font-size: var(--t-klein); }

.antragsliste { display: flex; flex-direction: column; gap: .7rem; margin-top: var(--s4); }
.antragszeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--linie);
  border-radius: var(--r-klein);
  background: var(--grund);
}
/* Ein Entwurf ist die einzige Zeile mit offener Arbeit — er bekommt als
   einzige den Balken. */
.antragszeile[data-stand="vorbereitet"] { border-left: 3px solid var(--amber); background: var(--karte); }
.antragszeile > div { min-width: 0; }
.antragszeile__geber {
  margin: 0 0 .1rem;
  color: var(--ink-3);
  font-size: var(--t-winzig);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.antragszeile__titel { margin: 0 0 .35rem; font-family: var(--disp); font-size: var(--t-gross); font-weight: 650; line-height: 1.3; }
.antragszeile__stand { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: var(--t-klein); }
.antragszeile__betrag { margin: .3rem 0 0; color: var(--gruen); font-size: var(--t-klein); font-weight: 700; font-variant-numeric: tabular-nums; }
.antragszeile .knopf { white-space: nowrap; }

@media (max-width: 560px) {
  .antragszeile { grid-template-columns: minmax(0, 1fr); }
  .antragszeile .knopf { justify-self: start; }
}

/* Die Notiz steht unter den beiden Reihenformularen, nicht neben ihnen: Ein
   Textfeld in einer `.formreihe` würde die Datumsfelder auf Handybreite
   drücken. */
.notizform { margin-top: var(--s5); border-top: 1px solid var(--linie-2); padding-top: var(--s5); }
.notizform textarea { min-height: 5rem; }

.stumpf {
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--linie-2);
  font-size: var(--t-klein);
  color: var(--ink-3);
  margin: 0;
  max-width: none;
}
.stumpf strong { color: var(--ink-2); font-weight: 600; }

/* ============================================================ Formulare */

.feld { margin-bottom: var(--s4); }
.feld:last-child { margin-bottom: 0; }

/* „Eure Angaben" im Hauptstrom (18.08.): neun Felder untereinander sind eine
 * Wand, nebeneinander sind sie ein Formular. `auto-fit` mit einer Mindestbreite
 * statt einer festen Spaltenzahl — bei schmalem Fenster wird von selbst wieder
 * eine Spalte daraus, ohne zweiten Umbruchpunkt.
 *
 * `align-items: start` hält die Beschriftungen auf einer Linie: Ohne das ziehen
 * unterschiedlich lange Hilfetexte die Felder einer Zeile auf gleiche Höhe
 * auseinander, und die Eingaben stünden versetzt. */
.felderraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--s4) var(--s5);
  align-items: start;
  margin-bottom: var(--s5);
}
.felderraster .feld { margin-bottom: 0; }

/* DIE AUSWAHLBOXEN EINER ZEILE STEHEN AUF EINER LINIE (30.08.2026).
 *
 * DER BEFUND des Gründers am Bildschirm: „Sind die Auswahlboxen in den
 * Zeilen?" — sie waren es nicht. `align-items: start` richtet die KÄSTEN
 * oben aus, nicht ihren Inhalt. Sobald eine Beschriftung zweizeilig umbrach
 * („Nutzt ihr Cloud-Dienste (EasyVerein, Google Drive, Microsoft 365)?"),
 * rutschte deren Auswahlbox eine Zeile tiefer als die beiden daneben. Bei
 * zwölf Fragen in drei Spalten traf das jede zweite Reihe.
 *
 * `subgrid` löst genau das: Jedes Feld übernimmt die Zeilen seines Rasters,
 * statt eigene aufzumachen. Zeile 1 trägt alle Beschriftungen der Reihe,
 * Zeile 2 alle Eingaben, Zeile 3 alle Hilfetexte — die höchste Beschriftung
 * bestimmt die Zeilenhöhe für alle, und darunter fluchten die Boxen.
 * `span 3` gilt auch für Felder ohne Hilfetext; ihre dritte Zeile bleibt
 * leer und kostet nichts, weil sie nur so hoch wird wie ihr Inhalt.
 *
 * DER EIGENE `row-gap` IST PFLICHT, nicht Geschmack: Ein Subgrid erbt sonst
 * den Zeilenabstand des Elternrasters (`--s4`), und der stünde dann zwischen
 * Beschriftung und Auswahlbox statt zwischen zwei Feldreihen. Der Abstand
 * zwischen den Reihen selbst gehört weiter dem Elternraster.
 *
 * MIT @supports, weil ein Browser ohne Subgrid `grid-template-rows` verwirft,
 * `grid-row: span 3` aber befolgt — dann belegte jedes Feld drei Zeilen ohne
 * sie zu füllen, und im Formular klafften Lücken. Ohne Subgrid bleibt alles
 * wie bisher: Kästen fluchten oben, Boxen versetzt. Das ist der heutige
 * Zustand, kein neuer Schaden. */
@supports (grid-template-rows: subgrid) {
  .felderraster .feld {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: var(--s1);
  }
  /* Der Abstand kommt jetzt aus `row-gap`; der Rand darunter käme obendrauf. */
  .felderraster .feld > label { margin-bottom: 0; }
}

/* EINE FRAGE, DIE PLATZ BRAUCHT, BEKOMMT IHN (30.08.2026).
 *
 * Die Frage nach den Personen am Computer trägt ihre Abgrenzung in der
 * Beschriftung — wer zählt, wer nicht. Das ist richtig so (der Kasten darunter
 * ist deshalb weg), aber in einer 240 px schmalen Rasterspalte sind es vier
 * Zeilen, und die Reihe, in der sie steht, wird so hoch wie ihre längste
 * Frage. Über die ganze Breite ist es eine Zeile.
 *
 * Die Eingabe bleibt schmal: Ein Feld für „2" so breit wie die Seite verspricht
 * eine Eingabe, die es nicht gibt. Welche Frage das Merkmal trägt, entscheidet
 * die Redaktion in fall-karte.mjs — nicht diese Datei. */
.felderraster .feld[data-breit="ja"] { grid-column: 1 / -1; }
/* Auch das Auswahlfeld, nicht nur die Zahl: Ein Ja/Nein-Feld über die ganze
   Seitenbreite verspricht eine Eingabe, die es nicht gibt — und daneben stünde
   die Zahl in ihren 12 rem wie ein Versehen. Beide gleich breit. */
.felderraster .feld[data-breit="ja"] > input,
.felderraster .feld[data-breit="ja"] > select { max-width: 12rem; }
/* In der schmalen Rasterspalte darf der Hilfetext nicht auf Lesebreite
 * bestehen — er soll mit seiner Spalte umbrechen, nicht darüber hinausragen. */
.felderraster .feld__hilfe { max-width: none; }
/* NUR DER EINLEITUNGSSATZ, nicht jedes `.leise` der Karte. Als
 * `.karte--angaben > .leise` geschrieben zog die Regel auch den Absatz
 * „Zuletzt geändert: …" am Kartenende nach oben — er lag dann auf dem Knopf
 * „Speichern und neu prüfen". Ein Nachbarschafts-Selektor sagt, was gemeint
 * ist: der Absatz direkt unter der Überschrift. */
.karte--angaben > h2 + .leise { margin-top: calc(var(--s2) * -1); }
.feld > label { display: block; font-weight: 600; margin-bottom: var(--s1); }
.feld__hilfe {
  display: block;
  color: var(--ink-3);
  font-size: var(--t-klein);
  margin-bottom: var(--s2);
  max-width: var(--spalte);
}

/* „Das ist dieser Antrag" — die Zuordnung unter der beantragten Summe
   (12.09.2026, Club-Vaudeville-Prüfbericht P0-7).
   Sie gehört zum Feld darüber und ist doch eine eigene Entscheidung, deshalb
   abgesetzt und eingerückt: Eine zweite Beschriftung auf derselben Kante läse
   sich wie eine zweite Frage des Vordrucks, und das ist sie nicht — sie
   entscheidet, wie wir RECHNEN. Die Einrückung ist dieselbe wie beim Haken
   darunter. */
.zuordnung {
  margin: var(--s2) 0 0;
  padding-left: var(--s3);
  border-left: 2px solid var(--linie);
  max-width: var(--spalte);
}

.zuordnung > label {
  display: block;
  font-weight: 500;
  font-size: var(--t-klein);
  margin-bottom: var(--s1);
}

.zuordnung > .feld__hilfe { margin-top: var(--s1); margin-bottom: 0; }

/* Der Haken unter einer Angabe, an der ein Datenschutzblatt rechtlich hängt
   (10.09.2026, Kodex F05). Er steht UNTER dem Textfeld: erst schreiben, was
   gilt, dann bestätigen, dass es gilt. Abgesetzt durch die Fläche, damit er
   nicht als weiterer Hilfetext gelesen wird — er ist eine Erklärung, für die
   der Verein einsteht. */
.feld__haken {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin: var(--s2) 0 var(--s3);
  padding: var(--s3);
  background: var(--sand-hell);
  border: 1px solid var(--sand-linie);
  border-radius: var(--r-klein);
  max-width: var(--spalte);
}
.feld__haken input { margin-top: .2em; flex: none; }
.feld__haken label { font-size: var(--t-klein); color: var(--ink-2); font-weight: normal; }

/* Übernommen aus dem Fördercheck (Audit P1-9).
 *
 * WOFÜR: Ein vorbelegtes Feld enthält etwas, das der Verein hier nicht getippt
 * hat. Er muss es erkennen können, ohne es zu suchen — sonst wandert eine
 * Angabe ungeprüft in einen Antrag, und zwar eine, die plausibel aussieht.
 *
 * WANN SIE VERSCHWINDET: beim Speichern. Diese Anwendung kommt ohne
 * Client-Skript aus — es gibt kein einziges <script> —, also kann die
 * Markierung nicht am Tastendruck hängen. Sobald der Verein die Angaben
 * sichert, ist der Wert eine gespeicherte Antwort und trägt keinen Streifen
 * mehr. Was danach noch markiert ist, hat er nicht angefasst.
 *
 * DER RAND STEHT IMMER, nur die Farbe wechselt — sonst rückte beim Speichern
 * die halbe Seite um drei Pixel zur Seite.
 *
 * NUR FELDER MIT DEM ATTRIBUT: `.feld` steht auch im Profil und im
 * Erstgespräch. Ein Rand auf der blanken Klasse verschöbe jedes Formular der
 * Anwendung um drei Pixel — für eine Anzeige, die es dort gar nicht gibt. */
.feld[data-uebernommen] { border-left: 3px solid transparent; padding-left: var(--s3); }
.feld[data-uebernommen="ja"] { border-left-color: var(--akzent); }

.feld [data-rolle="herkunft"] {
  margin-top: var(--s1);
  color: var(--akzent);
  font-size: var(--t-klein);
  max-width: var(--spalte);
}

/* `date` gehört in diese Liste (18.08.): Ohne sie behielt ein Datumsfeld seine
 * eigene Breite und stand als einziges Feld schmaler da als seine Nachbarn —
 * im Raster „Eure Angaben" war das ausgerechnet das erste Feld der Seite. */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  padding: var(--s3);
  font: inherit;
  color: inherit;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r-klein);
}
textarea { min-height: 6rem; resize: vertical; line-height: 1.6; }
textarea.gross { min-height: 12rem; }

/*
 * EIN GESPERRTES FELD MUSS AUSSEHEN WIE EIN GESPERRTES (09.09.2026).
 *
 * Das Betragsfeld eines festen Rechners trägt `readonly`, sah aber aus wie
 * jedes andere: weißer Grund, Cursor blinkt beim Klick. Der Gründer fragte zu
 * Recht, warum er dort etwas eintragen könne — er konnte es nicht, es sagte
 * ihm nur niemand.
 *
 * WARUM DIE REGEL HIER UNTEN STEHT UND NICHT OBEN BEI DEN FELDERN: Sie hat
 * dieselbe Spezifität wie `input[type="number"], …` — je ein Element und ein
 * Attribut. Bei Gleichstand gewinnt die spätere Regel, und der Block direkt
 * darüber setzt `background` erneut. Zwölf Zeilen weiter oben notiert, wäre
 * diese Kennzeichnung wirkungslos gewesen.
 *
 * `readonly` STATT `disabled` BLEIBT RICHTIG: Ein disabled-Feld wird beim
 * Absenden gar nicht mitgeschickt, und dann käme der gerechnete Betrag nie
 * beim Server an.
 */
input[readonly] {
  background: var(--grund);
  border-style: dashed;
  box-shadow: none;
  cursor: not-allowed;
  color: var(--ink-2);
}
input[readonly]:hover { border-color: var(--linie); }

input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }

/* Sichtbarer Fokus auf allem Bedienbaren — Grundausstattung, nicht Nacharbeit. */
:where(input, select, textarea, button, a, summary):focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

/*
 * DIE ZWEITE REGEL FÜR DENSELBEN WÄHLER — und sie gewinnt.
 *
 * Weiter oben steht schon `button, .knopf` mit `display: inline-flex`. Diese
 * hier kommt später und hat mit `inline-block` bisher gewonnen; deshalb saß auf
 * jedem Knopf AUSSERHALB einer Förderkarte das Zeichen am ersten Buchstaben
 * fest. In der Karte fiel es nie auf, weil `.tkachel__tat .knopf` den Flexbau
 * dort wiederherstellt.
 *
 * Gefunden am 30.08.2026, gemeldet vom Gründer: „Symbol bei E-Mail-Button
 * buggt. auch der bei Notiz speichern." Es waren die ersten beiden Knöpfe mit
 * Zeichen, die nicht in einer Karte stehen.
 *
 * Der Flexbau steht jetzt HIER, in der Regel, die gewinnt. Für einen Knopf ohne
 * Zeichen ändert sich nichts: Ein einzelner Text wird zum einzigen Flexkind und
 * steht wie zuvor in der Mitte.
 */
button, .knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tk-eng);
  padding: var(--s2) var(--s5);
  font: inherit;
  font-family: var(--sans);
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--karte);
  background: var(--akzent);
  border: 1px solid var(--akzent);
  border-radius: var(--r-klein);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
button:hover, .knopf:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); }

button[data-art="leise"], .knopf[data-art="leise"] {
  color: var(--ink);
  background: var(--karte);
  border-color: var(--linie);
}
button[data-art="leise"]:hover, .knopf[data-art="leise"]:hover {
  background: var(--grund);
  border-color: var(--ink-3);
}
button[data-art="gefahr"] {
  color: var(--fehler);
  background: var(--karte);
  border-color: var(--fehler);
}
button[data-art="gefahr"]:hover { background: var(--fehler-hell); }

/* Der Hauptknopf einer Seite darf größer sein als die Nebenwege. */
button[data-art="haupt"], .knopf[data-art="haupt"] {
  font-size: var(--t-basis);
  padding: var(--s3) var(--s6);
}

/* ============================================================= Meldungen */

/* KEINE LESEBREITE, SONDERN DIE BREITE DESSEN, WORÜBER SIE SPRICHT (18.08.).
 *
 * `p` trägt global `max-width: var(--spalte)`; eine Meldung ist aber ein
 * Kasten mit Rand und Farbe, kein Fließtext. Gemessen auf „Stimmen die
 * Angaben?": Der Warnkasten war 578 px breit und endete bei 928 px, die Karte
 * darunter bei 1090 — zwei Kanten, die um 162 px auseinanderliefen, direkt
 * übereinander. Der Text darin bleibt kurz, weil er kurz geschrieben ist. */
.meldung {
  padding: var(--s3) var(--s4);
  border-radius: var(--r-klein);
  border: 1px solid var(--linie);
  margin-bottom: var(--s4);
  max-width: none;
  font-size: var(--t-klein);
}
.meldung[data-art="fehler"]  { background: var(--fehler-hell); border-color: var(--fehler); }
.meldung[data-art="hinweis"] { background: var(--amber-hell);  border-color: var(--amber); }
.meldung[data-art="erfolg"]  { background: var(--gruen-hell);  border-color: var(--gruen); }

/* ================== Zustände sind Daten, nie Formatierung (Abschnitt 11) */

.status {
  font-size: var(--t-winzig);
  font-weight: 400;
  padding: 0 var(--s2);
  border-radius: var(--r-klein);
  border: 1px solid var(--linie);
  white-space: nowrap;
}
.status[data-status="bestaetigt"] { color: var(--gruen);  background: var(--gruen-hell);  border-color: var(--gruen); }
.status[data-status="unsicher"]   { color: var(--amber);  background: var(--amber-hell);  border-color: var(--amber); }
.status[data-status="unbekannt"]  { color: var(--ink-3); }
.status[data-status="ki"]         { color: var(--akzent); background: var(--akzent-hell); border-color: var(--akzent-hell); }
.status[data-status="verein"]     { color: var(--gruen);  background: var(--gruen-hell);  border-color: var(--gruen); }
/* ABGELEITET IST NICHT GERATEN, ABER AUCH NICHT BESTÄTIGT (21.08.2026).
   Die Gesamtkosten aus dem Kostenplan und die Dauer aus dem Zeitraum sind
   gerechnet: Sie folgen aus Angaben, die der Verein selbst gemacht hat, und
   ändern sich mit, wenn er eine Zeile ergänzt. Das ist mehr als ein
   KI-Vorschlag und weniger als eine eigene Eingabe — deshalb dieselbe ruhige
   Farbe wie beim gelesenen Wert, aber ohne Fläche: Es soll auffallen, dass
   dort etwas steht, und nicht drängen, es zu prüfen. */
.status[data-status="abgeleitet"] { color: var(--akzent); border-color: var(--akzent-hell); }

/* ======================================================== Support-Balken */

.supportbalken {
  background: var(--amber-hell);
  border-bottom: 2px solid var(--amber);
  color: var(--ink);
  padding: var(--s3) var(--s4);
}
.supportbalken > div {
  max-width: var(--raum-breit);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
  justify-content: space-between;
}

/* ============================================================== Tabellen */

.tabellenrahmen { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; margin-bottom: var(--s4); }
th, td {
  text-align: left;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
th { font-size: var(--t-klein); color: var(--ink-3); font-weight: 650; }

/* ================================================== Klein und ausgedruckt */

@media (max-width: 60rem) {
  .spalten { grid-template-columns: minmax(0, 1fr); }
  /* Die Übersicht wandert nach oben statt zu verschwinden: Sie ist die
   * Zusammenfassung, und die gehört bei wenig Platz zuerst.
   *
   * Mit dem Kleben fällt auch die Höhenbegrenzung weg — sie hat nur einen Sinn,
   * solange die Leiste stehenbleibt. Einspaltig wäre eine Tafel mit eigener
   * Bildlaufleiste mitten im Text eine Falle. */
  .seitlich { position: static; order: -1; max-height: none; overflow: visible; }
}

/* ---- Der Antragsarbeitsplatz (AP6) ---------------------------------------
   Vier Schritte mit sichtbarem Stand. Der Stand steht als data-Attribut am
   Element und zusätzlich im Text daneben: Farbe ist nie der einzige Träger
   einer Bedeutung. Dasselbe Punktmuster wie .sprung auf der Ergebnisseite —
   wer das eine kennt, erkennt das andere. */
.schritte {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linie);
  /* `var(--radius)` gibt es nicht — die Variable heißt `--r`. Ein Tippfehler
   * ohne Fehlermeldung: Der Kasten der Antragsstrecke stand seit jeher mit
   * scharfen Ecken zwischen lauter runden Karten. */
  border-radius: var(--r);
  background: var(--karte);
  overflow: hidden;
  margin-bottom: var(--s5);
}
.schritt {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--linie);
  text-decoration: none;
  color: inherit;
}
.schritt:last-child { border-bottom: none; }
.schritt:hover { background: var(--grund); }
.schritt[aria-current="step"] { background: var(--grund); }
.schritt__punkt {
  flex: none;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--linie);
}
.schritt[data-stand="erledigt"] .schritt__punkt { background: var(--gruen); }
.schritt__text { display: flex; flex-direction: column; gap: .1rem; }

/* DIE KLÄRPUNKTE AM ENTWURF (Schicht 3b, 27.08.2026).
 *
 * EIGENE KLASSE UND NICHT `.zeilen`: Das dort ist ein Flex-Stapel für die
 * Kosten- und Einnahmenzeilen, also für Formularfelder. Was hier steht, sind
 * Sätze zum Lesen — sie brauchen Aufzählungszeichen, weil man sonst nicht
 * sieht, wo der eine endet und der nächste anfängt, und Zeilenabstand, weil
 * jeder für sich beim Geber zu klären ist.
 *
 * Der Einzug steht als Wert hier und nicht im Markup: Ein `<ul>` in einer
 * Karte trägt sonst den Browser-Vorgabewert von 40 px und steht damit als
 * einziges Element der Seite nicht auf der Kartenkante. */
.klaerliste {
  margin: 0 0 var(--s4);
  padding-left: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.klaerliste li { max-width: var(--spalte); }

/* Feste Zeilen für Kosten und Einnahmen. Ohne Skript keine dynamischen
   Zeilen — also fünf, die leer bleiben dürfen. */
.zeilen { display: flex; flex-direction: column; gap: var(--s2); }
.zeile { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: var(--s2); }

/* Eine Auswahl, die aus dem Vorhaben übernommen wurde (Gründertest
   20.08.2026). Sie sieht anders aus als eine eigene Eingabe — sonst
   bestätigt der Verein mit dem nächsten Klick etwas, das er für seine eigene
   Antwort hält. Derselbe Ton wie bei jeder anderen Übernahme im Haus. */
.zeile select[data-herkunft="uebernommen"] {
  border-color: var(--akzent);
  background: var(--akzent-hell);
}

.zeilen__herkunft {
  margin: var(--s2) 0 0;
  color: var(--ink-2);
  font-size: .84rem;
}

.dateien { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.dateien li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--linie);
}
.dateien li:last-child { border-bottom: none; }

/* Die Kantenlänge eines Ankreuz- oder Auswahlfeldes.
 *
 * IN rem UND NICHT IN px: Wer im Browser die Schrift vergrößert, weil er sie
 * sonst nicht liest, braucht das größere Kästchen genauso. In px bliebe es
 * stehen, während alles daneben wächst — die Sackgasse, die
 * test/stil-system.test.mjs verhindert. */
:root { --kreuz: 1.2rem; }

/* `label.wahl` und nicht nur `.wahl` — die Spezifität entscheidet hier.
 *
 * DER BEFUND (Nachmessung 17.08.): Ein Ankreuzfeld im Anlege-Dialog stand
 * ÜBER seinem Text statt daneben. Grund war `.feld > label { display: block }`
 * weiter oben: gleiche Spezifität wie `.wahl`? Nein — höher (eine Klasse plus
 * ein Element gegen eine Klasse allein). Die Grundregel dieser Kästchen wurde
 * also überall dort ausgehebelt, wo sie in einem `<fieldset class="feld">`
 * stehen — und genau dort stehen sie beim Anlegen eines Vorhabens.
 *
 * Aufgefallen ist es beim Messen der berechneten Werte, nicht beim Ansehen:
 * Im Screenshot sieht ein umgebrochener Haken aus wie eine Gestaltungsfrage.
 * `getComputedStyle` sagte `display: block`, wo `flex` stehen sollte. */
label.wahl,
.wahl {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  padding: var(--s1) 0;
  cursor: pointer;
}
.wahl input { margin: 0; width: var(--kreuz); height: var(--kreuz); flex: none; cursor: pointer; }

/* ---- Ankreuzfeld mit Rand: „Was gehört dazu?" beim Anlegen ----------------
 *
 * GEMESSEN AN DER ALTEN FASSUNG (08.09.2026, Fenster 1440 px): Die beiden
 * Wahlzeilen waren je 1137 px breit, ohne Rand, ohne Fläche, nur durch
 * Weißraum getrennt. Das Kästchen saß ganz links am Rand einer sehr langen
 * Zeile — anklickbar wirkte es allein, obwohl das ganze Label es ist.
 *
 * `align-items: flex-start` und nicht `center`: Die Zeilen tragen eine
 * Begründung unter dem Namen („Ihr braucht Geld für Platzmiete …"), und die
 * ist bei einem Baustein da und beim anderen nicht. Zentriert säße das
 * Kästchen der längeren Zeile in der Mitte des Textblocks statt neben seinem
 * Namen — beide Kästchen stünden dann auf verschiedenen Höhen.
 *
 * Das Raster nimmt zwei Spalten, wenn sie hineinpassen, und fällt darunter auf
 * eine zurück. Bei zwei Bausteinen ist das der Unterschied zwischen einer
 * Wahl, die man auf einen Blick überschaut, und zwei Zeilen untereinander. */
.wahlfelder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s2);
  margin-top: var(--s2);
}
/* `label.wahl--feld` und nicht `.wahl--feld`: Die Grundregel oben steht als
 * `label.wahl` da (0,1,1) und schlägt eine einfache Klasse (0,1,0). Mit der
 * kürzeren Fassung blieb `align-items: center` in Kraft — gemessen saßen die
 * beiden Kästchen dann auf 494 und 519 px, weil das Raster beide Felder auf
 * dieselbe Höhe streckt und der kürzere Inhalt darin mittig hing. Zwei
 * Kästchen nebeneinander auf verschiedenen Höhen sind genau der Eindruck von
 * Unordnung, gegen den das Feld gebaut ist. */
label.wahl--feld,
.wahl--feld {
  align-items: flex-start;
  padding: var(--s3);
  border: 1px solid var(--linie);
  border-radius: var(--r-klein);
  background: var(--weiss);
  transition: border-color .16s ease, background-color .16s ease;
}
.wahl--feld:hover { border-color: var(--salbei); }
/* Der Zustand steht im data-Attribut, nicht in einer zweiten Klasse: Das
 * Markup sagt, WAS gilt, das Stylesheet, wie es aussieht. */
.wahl--feld[data-gewaehlt="ja"] { border-color: var(--gruen); background: var(--akzent-hell); }

/* Der Abschluss des Anlegen-Formulars — abgesetzt, nicht angeklebt.
 *
 * Nicht `.formular-abschluss`: Der ist sticky und trägt eine Standanzeige, weil
 * das Vereinsprofil über mehrere Bildschirme läuft. Diese Seite hat vier
 * Felder und passt auf einen. Ein mitfahrender Balken wäre dort eine Lösung
 * ohne Problem. */
.anlegen-abschluss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--linie);
}

/* ---- Die Ankreuzfelder des Vereinsprofils (Sparten, Verbände) -------------
 *
 * FÜR DIESE BEIDEN KLASSEN GAB ES KEINE EINZIGE REGEL. Das <fieldset> trug
 * den Standardrahmen des Browsers, die achtzehn Kästchen ihre 13 px und das
 * Systemblau. Sie waren nie gestaltet, nicht schlecht gestaltet.
 *
 * Zwei Spalten, weil dreizehn Sparten untereinander eine halbe Bildschirmhöhe
 * fressen; unter 34 rem Platz fällt es von selbst auf eine zurück. Farben,
 * Radien und Abstände kommen aus dem bestehenden System — das Aussehen der
 * Oberfläche ändert sich dadurch nicht, es entsteht nur dort eines, wo bisher
 * keines war. */
.ankreuz {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0 var(--s5);
}
.ankreuz__zeile {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  padding: 0 var(--s2);
  margin-left: calc(var(--s2) * -1);
  border-radius: var(--r-klein);
  cursor: pointer;
}
.ankreuz__zeile:hover { background: var(--akzent-hell); color: var(--akzent-tief); }
.ankreuz__zeile input { width: var(--kreuz); height: var(--kreuz); margin: 0; flex: none; cursor: pointer; }
/* Ein gesetztes Kästchen soll man von weitem sehen, ohne es zu suchen. */
.ankreuz__zeile:has(input:checked) { font-weight: 600; color: var(--akzent-tief); }

/* ---- Sparten: gegliedert und erklärt (07.09.2026) --------------------------
   Nur die Sparten tragen `data-gegliedert`; die Verbandsliste daneben nutzt
   dieselben Klassen und bleibt das flache Raster von oben.

   Zwei Sorten Zeile: „Musik" ist der Oberbegriff, „Blasmusik" und „Chor"
   stehen eingerückt darunter — dieselbe Ordnung, die SPARTEN_OBERBEGRIFF im
   Abgleich schon herstellt. Eine Gruppe darf deshalb nie über einen
   Spaltenrand brechen: Der Oberbegriff unten links und sein Unterfall oben
   rechts wären wieder die Nebenordnung, gegen die die Einrückung antritt. */
/* Die beiden Spalten kommen fertig gefüllt vom Server (ankreuzHtml in
   server/seiten-verein.mjs) und sind hier nur noch zwei Zellen des Rasters:
   Ein aufgeklappter Text verlängert seine Spalte, ohne die andere anzufassen.
   Unter der Mindestbreite fallen sie wie bisher untereinander. */
.ankreuz[data-gegliedert] { align-items: start; }
.ankreuz__spalte { display: flex; flex-direction: column; min-width: 0; }
.ankreuz__eintrag { position: relative; }

/* DER AST STATT EINES DURCHGEHENDEN STRICHS (Gründerbefund 07.09.2026).
   Zuerst trug jeder eingerückte Eintrag nur ein `border-left`. Das ergab zwei
   Striche, die zwar getrennt waren, aber in derselben Flucht standen — und
   weil zwischen ihnen nur „Kultur" ohne Strich lag, las sich das wie EINE
   Linie, die von Musik bis hinunter zum Theater durchläuft: „Man denkt aber,
   es ist fortlaufend bis zum Theater runter."
   Jetzt zeigt jede Gruppe, wo sie endet. Die Senkrechte läuft bis zum
   nächsten Geschwister; beim letzten biegt sie auf die Zeilenmitte ab und
   hört auf. Der Bogen ist derselbe, den die Oberfläche überall benutzt. */
.ankreuz[data-gegliedert] {
  /* Die zwei Maße des Astes an einer Stelle. Der Bogen ist kleiner als
     `--r-klein`: Ein 11er-Radius frisst den halben Winkel, der nur eine halbe
     Zeile hoch ist. */
  --ast-strich: 2px;
  --ast-bogen: 7px;
  --ast-arm: calc(var(--s5) - var(--s2));
}
.ankreuz__eintrag[data-tief] {
  margin-left: var(--s4);
  padding-left: var(--s5);
}
/* GEZEICHNET WIRD MIT RÄNDERN, NICHT MIT BREITEN. Zuerst stand hier ein
   `width: 2px` mit Hintergrundfarbe — dagegen hält test/stil-system.test.mjs
   („keine festen Pixelbreiten als Layoutmittel", Abschnitt 11 „keine
   Sackgassen"). Der Riegel hat recht, und zwar über die Regel hinaus: Das
   hier IST ein Strich und keine 2 px breite Fläche. Als Rand geschrieben,
   trägt er die Strichstärke da, wo sie hingehört. */
.ankreuz__eintrag[data-tief]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-left: var(--ast-strich) solid var(--linie);
}
/* Der Arm zur Zeile. Er sitzt auf halber Klickhöhe und damit genau auf der
   Mitte des Kästchens, das daneben steht. */
.ankreuz__eintrag[data-tief]::after {
  content: "";
  position: absolute;
  left: var(--ast-strich);
  top: calc(var(--klickziel) / 2 - var(--ast-strich) / 2);
  width: var(--ast-arm);
  border-top: var(--ast-strich) solid var(--linie);
}
/* Das letzte Kind schließt die Gruppe: Senkrechte und Arm werden zu einem
   Winkel, der nach der Zeile aufhört. Daran sieht man, dass „Chor" der letzte
   Unterfall von Musik ist und „Kultur" darunter wieder von vorn beginnt. */
.ankreuz__gruppe > .ankreuz__eintrag[data-tief]:last-child::before {
  bottom: auto;
  height: calc(var(--klickziel) / 2);
  width: var(--ast-arm);
  border-bottom: var(--ast-strich) solid var(--linie);
  border-bottom-left-radius: var(--ast-bogen);
}
.ankreuz__gruppe > .ankreuz__eintrag[data-tief]:last-child::after { content: none; }
/* DAS FRAGEZEICHEN STEHT AM WORT, nicht am Spaltenrand. Auf `flex: 1` gesetzt
   füllte die Beschriftung die Spalte und schob das Zeichen an deren Kante —
   eine Reihe gleich weit entfernter Fragezeichen, von denen keines mehr
   sichtbar zu „Soziales" gehörte. Die Zeile ist deshalb nur so breit wie ihr
   Inhalt; das macht nebenbei den Klickbereich ehrlich, der vorher bis weit
   neben das Wort reichte. */
.ankreuz__reihe { display: flex; align-items: center; gap: var(--s1); }
.ankreuz__reihe > .ankreuz__zeile { flex: 0 1 auto; min-width: 0; }

/* DAS FRAGEZEICHEN IST EIN <button> UND ERBTE DAMIT DEN GANZEN KNOPF
   (Gründerbefund 07.09.2026: „die ? sehen scheiße aus").
   Weiter oben steht `button, .knopf { min-height: 2.9rem; padding: .65rem 1rem;
   box-shadow: … }`. Eine `min-height` schlägt jede `height`, gleich wie
   spezifisch die Regel daneben ist — aus dem 1,35-rem-Kreis wurde eine 46 px
   hohe Kapsel mit Schatten, die beim Überfahren auch noch einen Pixel hüpfte.
   Alle drei Erbstücke werden hier ausdrücklich zurückgenommen; `min-height: 0`
   ist die Zeile, ohne die nichts davon wirkt. */
.ankreuz__fragezeichen {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--linie);
  border-radius: var(--r-marke);
  background: var(--karte);
  box-shadow: none;
  color: var(--ink-3);
  font: 600 var(--t-winzig)/1 var(--sans);
  cursor: pointer;
}
.ankreuz__fragezeichen:hover,
.ankreuz__fragezeichen:focus-visible,
.ankreuz__fragezeichen[aria-expanded="true"] {
  transform: none;
  border-color: var(--akzent);
  background: var(--akzent-hell);
  color: var(--akzent-tief);
}

/* DER AUSLÖSER IST DIE ZEILE UND NICHT MEHR DAS FRAGEZEICHEN
   (Gründerbefund 07.09.2026: „ich hab die hoveransicht noch nie gesehen").
   Vorher hing der Hover an einem 1,3 rem großen Knopf. Wer eine Liste liest,
   fährt aber über die WÖRTER — an dem Zeichen daneben kam er nie vorbei, und
   damit war die halbe Bedienung unsichtbar.
   DASS ES NICHT FLACKERT, LEISTET JETZT DIE VERZÖGERUNG statt der kleinen
   Fläche: 350 ms bis zum Erscheinen, sofortiges Verschwinden. Wer die Liste
   überfliegt, löst nichts aus; wer auf einer Zeile stehenbleibt, bekommt den
   Text. Deshalb `visibility` und nicht `display` — nur so lässt sich der
   Übergang überhaupt verzögern. */
.ankreuz__hilfe {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 100%;
  margin: 0;
  padding: var(--s3);
  font-size: var(--t-klein);
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r-klein);
  box-shadow: var(--schatten-hoch);
  visibility: hidden;
  opacity: 0;
  /* SIE FÄNGT DIE MAUS NICHT AB. Die Blase liegt zwischen der Zeile und der
     nächsten Sparte darunter — wer weiterfährt, müsste sonst durch sie
     hindurch und bliebe an ihr hängen. So wandert der Zeiger durch sie auf den
     Eintrag darunter, und sie verschwindet von selbst. Wer den Text behalten
     will, klickt das Fragezeichen; im Fluss ist er wieder anfassbar. */
  pointer-events: none;
}
/* DAS FRAGEZEICHEN IST DER AUSLÖSER, nicht die Zeile (Gründerentscheid
   07.09.2026: „A ohne hoveranimation über text, das fragezeichen reicht").
   Zwischendurch hing der Hover an der ganzen Zeile, weil er ihn am alten,
   verunglückten Zeichen nie gefunden hatte. Das Zeichen war aber nicht zu
   klein, sondern falsch geformt — eine 46 px hohe Kapsel, die niemand als
   Fragezeichen las. Repariert braucht es den Umweg nicht mehr.
   OHNE VERZÖGERUNG UND OHNE BLENDE: Beides war nur nötig, solange die Zeile
   auslöste und man beim Überfliegen ein Dutzend davon streifte. Auf ein
   Zeichen von 21 px fährt niemand versehentlich. */
.ankreuz__eintrag[data-hilfe="zu"]:has(.ankreuz__fragezeichen:hover) > .ankreuz__hilfe,
.ankreuz__eintrag[data-hilfe="zu"]:has(.ankreuz__fragezeichen:focus-visible) > .ankreuz__hilfe {
  visibility: visible;
  opacity: 1;
}
/* FESTGEKLICKT STEHT ER IM FLUSS und schiebt die Liste auseinander — wer sich
   entscheidet, soll den Text neben der Wahl behalten und nicht gegen die Maus
   verteidigen müssen. Ohne Schatten und Rahmen: Was bleibt, ist keine
   Sprechblase mehr, sondern ein Absatz, der zur Zeile darüber gehört. */
.ankreuz__eintrag[data-hilfe="offen"] > .ankreuz__hilfe {
  position: static;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: none;
  /* Der Rahmen der Blase zählt mit: Ohne das eine Pixel beginnt der Text
     einen Hauch rechts vom Wort darüber, und die Kante liest sich schief. */
  margin: 0 0 var(--s2) calc(var(--kreuz) - 1px);
  background: var(--schiefer-flach);
  border-color: var(--linie-2);
  box-shadow: none;
}

/* ---- Frühere Zuschüsse (AP6, Etappe B) ------------------------------------
   Die Herkunft steht in jeder Zeile: Ein nachgetragener Betrag ist die
   Erinnerung des Vereins, ein automatischer ein Beleg. Eine Liste, die beides
   gleich aussehen lässt, verschweigt, wie belastbar sie ist. */
.chip[data-herkunft="antrag"]       { background: var(--gruen-hell); color: var(--gruen); }
.chip[data-herkunft="nachgetragen"] { background: var(--grund); color: var(--ink-2); }

/* Das Nachtragfeld am Treffer — zugeklappt, bis jemand es braucht. */
.nachtrag { margin: var(--s3) 0; }
.nachtrag > summary { cursor: pointer; color: var(--ink-2); font-size: var(--t-klein); }
.nachtrag > summary:hover { color: var(--ink); }
.nachtrag form { margin-top: var(--s3); }
.nachtrag label { display: flex; flex-direction: column; gap: .2rem; font-size: var(--t-klein); }

/* ---- „Wo steht das?" (Gate 3, Befund S3) ----------------------------------
   Die Quelle ist der Vertrauensanker, aber nicht die Botschaft: zugeklappt,
   leise, unter der eigentlichen Aussage. Wer fragt, findet sie; wer nicht
   fragt, wird nicht mit Normtext zugedeckt. */
.quelle { margin: var(--s3) 0 0; }
.quelle > summary {
  cursor: pointer;
  color: var(--ink-3);
  font-size: var(--t-klein);
}
.quelle > summary:hover { color: var(--ink-2); }
.quelle > p { margin: var(--s2) 0 0; font-size: var(--t-klein); color: var(--ink-2); }
/* Die Rechtsgrundlage ist in den Daten oft ein ganzer Absatz — sie darf lang
   sein, aber sie darf die Karte nicht dominieren. */
/* Die Kindwahl `.quelle > p` oben ist spezifischer als eine reine Klasse —
   ohne das `p` davor bliebe die Schriftgröße hier wirkungslos. */
.quelle > p.quelle__norm { line-height: 1.5; }
.quelle > p.quelle__ref { color: var(--ink-3); }
.quelle > p.quelle__stand { color: var(--ink-3); font-size: var(--t-winzig); }

/* ---- Was ansteht (AP6, Etappe C) ------------------------------------------
   Erscheint nur, wenn es etwas gibt. Ein dauerhaft leerer Kasten „nichts zu
   tun" ist Bildschirmfläche ohne Aussage — nach dem dritten Mal liest ihn
   niemand mehr, auch nicht, wenn doch etwas darin steht. */
.karte[data-ton="ansteht"] { border-left: 3px solid var(--akzent); }
.ansteht { list-style: none; padding: 0; margin: 0; }
.ansteht__punkt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--linie-2);
}
.ansteht__punkt:last-child { border-bottom: none; }
.ansteht__punkt a { text-decoration: none; }
.ansteht__punkt a:hover { text-decoration: underline; }
/* Dringend und verstrichen tragen ihre Bedeutung im Text — die Farbe ist nur
   die zweite Spur. */
.ansteht__punkt[data-dringend="ja"] a { color: var(--fehler); font-weight: 600; }
.ansteht__punkt[data-art="verstrichen"] a { color: var(--fehler); }

/* ---- Kreisdiagramm der Startseite -----------------------------------------
 *
 * Baustein zu server/kreisdiagramm.mjs. Der Ring ist ein Bild, die Legende ist
 * die Auskunft — jede Zahl des Rings steht daneben als Text. Die Variablen
 * stehen oben im :root; hier steht keine Farbe beim Wert. */

/* DER ABSTAND GEHÖRT DEM DIAGRAMM, nicht seinen Nachbarn.
 *
 * `.karte` trägt ihren Abstand unten (margin-bottom: var(--s4)),
 * `.start-raster` gar keinen. Seit dem 21.08.2026 steht das Diagramm ZWISCHEN
 * beiden: unter den drei Kacheln, über „Was ansteht" — und dieser Kasten
 * erscheint nur, wenn es etwas gibt. Ohne eigenen Abstand nach oben klebte es
 * an den Kacheln, ohne den nach unten an der Fristenliste. Benachbarte
 * Blockabstände fallen zusammen, es bleibt also in jeder Kombination bei 16 px
 * — dieselbe Fuge wie zwischen zwei Karten.
 *
 * MITTIG STATT AM LINKEN RAND (Gründerentscheid 21.08.2026: „das kreisdiagramm
 * über das was ansteht machen in die mitte").
 *
 * `justify-content: center` rückt Ring und Text als Paar in die Mitte der
 * Karte. Die Karte selbst behält die Kanten ihrer Nachbarn — eine schmalere
 * Karte zwischen zwei breiten sähe aus wie ein Fehler, und die Kacheln darüber
 * wie die Liste darunter fluchten miteinander.
 *
 * DIE TEXTSPALTE BEKOMMT EIN MASS STATT `1fr`, und das ist die zweite Hälfte
 * derselben Entscheidung: Mit `1fr` lief die Legende bis zur Kartenkante,
 * während Einleitung und Fußnote bei --spalte endeten. Nachgemessen bei
 * 1280 px waren das 989,5 px gegen 1200 px — zwei rechte Kanten in einem
 * Textblock, 210 px auseinander. Jetzt enden alle drei an derselben Stelle. */
.kreis {
  display: grid;
  grid-template-columns: var(--kreis-groesse) minmax(0, var(--spalte));
  justify-content: center;
  gap: var(--s7);
  align-items: center;
  margin: var(--s4) 0;
  padding: var(--s6);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--karte);
  box-shadow: var(--schatten);
}

.kreis__bild { position: relative; width: var(--kreis-groesse); height: var(--kreis-groesse); }
.kreis__bild svg { display: block; width: 100%; height: 100%; }

/* Ein Segment ist ein Kreisumriss mit Lücke. Anteil und Startpunkt stehen als
 * stroke-dasharray und stroke-dashoffset IM MARKUP — Inhaltsattribute wie
 * value und max am <progress>, keine Gestaltung. Hier steht nur die Farbe. */
.kreis__segment { stroke: var(--kreis-leer); }
.kreis__segment[data-farbe="1"] { stroke: var(--kreis-1); }
.kreis__segment[data-farbe="2"] { stroke: var(--kreis-2); }
.kreis__segment[data-farbe="3"] { stroke: var(--kreis-3); }
.kreis__segment[data-farbe="4"] { stroke: var(--kreis-4); }
.kreis__segment[data-farbe="5"] { stroke: var(--kreis-5); }
.kreis__segment[data-farbe="6"] { stroke: var(--kreis-6); }
.kreis__segment[data-farbe="7"] { stroke: var(--kreis-7); }
.kreis__segment[data-farbe="8"] { stroke: var(--kreis-8); }

.kreis__mitte {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}

.kreis__mitte b { font-family: var(--disp); font-size: var(--t-haupt); line-height: 1; letter-spacing: -.02em; }
/* --ink-2 statt --ink-3: Die Beschriftung der großen Zahl stand auf 4,36:1 und
 * ist damit grenzwertig lesbar (Nachmessung vom 20.08.2026). */
.kreis__mitte span { display: block; margin-top: var(--s1); color: var(--ink-2); font-size: var(--t-winzig); }

.kreis__text h2 { margin: 0 0 var(--s2); font-size: var(--t-titel); }
.kreis__text > p { margin: 0 0 var(--s4); max-width: var(--spalte); color: var(--ink-2); font-size: var(--t-klein); }

/* Die Legende IST die Datentabelle: Name, Zahl, Anteil — und wo es einen gibt,
 * der Weg dorthin. */
.legende { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.legende li { border-top: 1px solid var(--linie-2); }
.legende li:first-child { border-top: 0; }

.legende a,
.legende .legende__zeile {
  display: grid;
  grid-template-columns: var(--kreis-punkt) 1fr auto;
  align-items: center;
  gap: var(--s3);
  min-height: var(--klickziel);
  padding: var(--s2);
  border-radius: var(--r-klein);
  color: var(--ink);
  font-size: var(--t-basis);
  text-decoration: none;
}

.legende a:hover,
.legende a:focus-visible { background: var(--akzent-hell); color: var(--akzent-tief); }

/* 50 % ist eine Form, kein Gestaltungswert: Der Punkt ist ein Ausschnitt des
 * Rings und deshalb rund wie er. */
.legende__punkt {
  width: var(--kreis-punkt);
  height: var(--kreis-punkt);
  border-radius: 50%;
  background: var(--kreis-leer);
}

.legende li[data-farbe="1"] .legende__punkt { background: var(--kreis-1); }
.legende li[data-farbe="2"] .legende__punkt { background: var(--kreis-2); }
.legende li[data-farbe="3"] .legende__punkt { background: var(--kreis-3); }
.legende li[data-farbe="4"] .legende__punkt { background: var(--kreis-4); }
.legende li[data-farbe="5"] .legende__punkt { background: var(--kreis-5); }
.legende li[data-farbe="6"] .legende__punkt { background: var(--kreis-6); }
.legende li[data-farbe="7"] .legende__punkt { background: var(--kreis-7); }
.legende li[data-farbe="8"] .legende__punkt { background: var(--kreis-8); }

/* Anzahl und Anteil teilen sich eine Spalte, damit die Zeile auf einem Telefon
 * dreispaltig bleibt statt umzubrechen. Hervorgehoben ist EINE Zahl — die
 * Anzahl; der Anteil ist die leise Wiederholung dessen, was der Ring zeigt.
 *
 * DIE BREITEN STEHEN IN ch, NICHT IN PIXELN: „37" und „5" sind
 * unterschiedlich breit, und ohne feste Spalte begänne der Zahlenblock in
 * jeder Zeile woanders — nachgemessen bei 375 px waren es drei verschiedene
 * Kanten (275,3 · 282,6 · 291,3 px). Ein ch ist die Breite der Ziffer 0 in der
 * jeweiligen Schrift, also kein Gestaltungswert, sondern ein Zeichenmaß: 3
 * Ziffern für die Anzahl, 4 Zeichen für „28 %". */
.legende__werte { display: flex; align-items: baseline; gap: var(--s2); }
.legende__zahl { min-width: 3ch; font-family: var(--disp); font-weight: 720; font-variant-numeric: tabular-nums; text-align: right; }
.legende__anteil { min-width: 4ch; color: var(--ink-2); font-size: var(--t-klein); font-variant-numeric: tabular-nums; text-align: right; }

/* ── Der Halbsatz. DIE BAUAUFLAGE ZU C3a ────────────────────────────────
 *
 * Er steht IMMER da. Im Muster hing er am Überfahren mit der Maus; auf dem
 * Telefon gibt es das nicht, und dort liest der Vorstand abends (Entscheidung
 * vom 20.08.2026, Punkt 3). Deshalb: kein :hover, kein :focus-within, kein
 * max-height, kein Aufklapper, kein Skript.
 *
 * Der Einwand dagegen — „dann hat eine Zeile etwas, das alle anderen nicht
 * haben" — wird nicht durch Verstecken beantwortet, sondern durch Gestaltung:
 * Die erklärte Zeile bekommt eine sehr flache Fläche und liest damit als Zeile
 * MIT ANMERKUNG. --schiefer-flach ist dafür da („ein Grauton unter --grund,
 * damit sie die Zahlen trägt und nicht selbst auffällt").
 *
 * Der linke Einzug bildet den Textbeginn der Zeile darüber nach: Innenabstand
 * plus Farbfeld plus Spalte. So fluchtet der Halbsatz mit dem Gruppennamen. */
.legende li[data-erklaert] {
  border-radius: var(--r-klein);
  background: var(--schiefer-flach);
}

.legende__halbsatz {
  margin: 0;
  padding: 0 var(--s2) var(--s2) calc(var(--s2) + var(--kreis-punkt) + var(--s3));
  color: var(--ink-2);
  font-size: var(--t-klein);
  line-height: 1.45;
}

.kreis__fuss { margin: var(--s4) 0 0; max-width: var(--spalte); color: var(--ink-2); font-size: var(--t-winzig); line-height: 1.5; }

/* ── Schmales Fenster ───────────────────────────────────────────────────
 * Unter 60rem stehen Bild und Text untereinander, unter 44rem schrumpft der
 * Ring. Gemessen bei 375 px: kein Querlauf, keine Zeile unter 44 px. */
@media (max-width: 60rem) {
  .kreis { grid-template-columns: 1fr; justify-items: center; gap: var(--s5); }
  .kreis__text { justify-self: stretch; }
}

@media (max-width: 44rem) {
  :root { --kreis-groesse: 14rem; }
  .kreis { padding: var(--s5); }
}

/* ── Kontrastmodus ──────────────────────────────────────────────────────
 * Dort verlieren Ring und Punkte ihre Farben; beide sind dann nur noch Form.
 * Die Auskunft steht in der Zeile daneben und bleibt vollständig. Der Umriss
 * hält den Punkt wenigstens sichtbar. */
@media (forced-colors: active) {
  .legende__punkt { outline: 1px solid CanvasText; }
}

.zeitraum > summary { cursor: pointer; }
.zeitraum form { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: end; margin-top: var(--s2); }
.fristen, .nachweise { list-style: none; padding: 0; margin: 0; }
.fristen li, .nachweise li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3);
  padding: var(--s2) 0; border-bottom: 1px solid var(--linie-2);
}
.fristen li:last-child, .nachweise li:last-child { border-bottom: none; }
.fristen li[data-verstrichen="ja"] { color: var(--fehler); }
/* Der Abhak-Knopf an einer Unterlage — im Chip-Stilsystem (Gründertest
 * 20.08.2026).
 *
 * DER BEFUND: „die ,offen'-Chips wirken unfertig." Sie sahen aus wie ein
 * halbes Element: weiße Fläche, graue Linie, graue Schrift — dieselbe
 * Erscheinung, die im Haus sonst „betrifft euch nicht" bedeutet. Auf der
 * Mappe heißt „offen" aber das Gegenteil: Der Verein ist dran.
 *
 * DESHALB DIE CHIP-WERTE UND DIE HAUSFARBEN, keine neuen: Maße, Rundung und
 * Schriftgrad kommen von `.chip`, Amber heißt hier wie überall „ihr seid
 * dran", Grün heißt „geht". Ein Verein, der die Chips im Ergebnis gelesen
 * hat, liest diese ohne nachzudenken.
 *
 * ER BLEIBT EIN KNOPF, und deshalb behält er seine Klickfläche: `.chip` ist
 * eine Beschriftung zum Lesen, das hier ist eine Fläche zum Treffen. */
.haken {
  min-width: 5.5rem;
  min-height: var(--klickziel);
  font-size: var(--t-winzig);
  font-weight: 600;
  border-radius: var(--r-klein);
  border: 1px solid var(--amber);
  background: var(--amber-hell);
  color: var(--amber);
  cursor: pointer;
}
.haken[data-erledigt="ja"] { background: var(--gruen-hell); color: var(--gruen); border-color: var(--gruen); }

/* ---- Der Fallarbeitsplatz (AP7) -------------------------------------------
   Die drei Töpfe der Pflichtenliste. Die Bedeutung steht IMMER auch im Text der
   Überschrift („Das müsst ihr erledigen" / „Erst klären" / „Betrifft euch
   nicht") — Farbe ist hier Verstärkung, nie der einzige Träger (ADR 11).

   Die Werte sind die der Ergebnisklassen und keine neuen: Was zu tun ist, trägt
   dasselbe Grün wie „antragsbereit", was zu klären ist denselben Akzent wie
   „offene Fragen", und der dritte Block wird leise wie `.stumpf`. Wer das eine
   kennt, erkennt das andere. */
.block[data-topf="TRIFFT_ZU"]  .block__kopf { border-left: 3px solid var(--gruen);  padding-left: var(--s3); }
.block[data-topf="RUECKFRAGE"] .block__kopf { border-left: 3px solid var(--akzent); padding-left: var(--s3); }
.block[data-topf="TRIFFT_NICHT"] { color: var(--ink-3); }

/* Der Punkt an der Aufgabe trägt dieselbe Farbe wie der Kopf ihres Blocks —
   sonst bliebe er in allen drei Töpfen grau und stünde als Element da, das
   nichts sagt. Er ist `aria-hidden`: Die Bedeutung steht in der Überschrift
   darüber, die Farbe wiederholt sie nur. Keine neuen Werte. */
.block[data-topf="TRIFFT_ZU"]  .treffer__punkt { background: var(--gruen); }
.block[data-topf="RUECKFRAGE"] .treffer__punkt { background: var(--akzent); }
.block[data-topf="TRIFFT_NICHT"] .treffer__punkt { background: var(--linie); }

/* DIE EREIGNIS-GRUPPE IST NICHT GRÜN (30.08.2026). Sie liegt technisch im
   Handlungstopf — Auskunftsersuchen und Datenpanne sind Pflichten, die gelten
   —, aber Grün heißt in diesem Werkzeug überall „das ist zu tun". Hier ist
   nichts zu tun, solange nichts passiert ist. Der Kopfstreifen und die Punkte
   werden deshalb still; die Aussage steht ohnehin in der Überschrift („Das
   kommt erst, wenn etwas passiert") und in der Unterzeile, nie in der Farbe
   allein (ADR 11). */
.block[data-gruppe="ereignis"] .block__kopf { border-left-color: var(--linie); }
.block[data-gruppe="ereignis"] .treffer__punkt { background: var(--linie); }

/* Dieselbe Auszeichnung wie `.fristen li[data-verstrichen="ja"]` weiter oben,
   nur an der Absatzfassung der Zeile: Ein verstrichener Richtwert, der aussieht
   wie jeder andere Termin, ist der eine Zustand, den niemand übersehen darf.
   Das Wort steht daneben, die Farbe ist die zweite Spur. */
.fristen[data-lage="verstrichen"] { color: var(--fehler); }

/* `.fristen` ist für die `<ul>`-Fassung geschrieben (Liste ohne Punkte, ohne
   Ränder). Der Fallarbeitsplatz setzt die Zeile als Absatz — der erbte damit
   `margin: 0` und klebte an dem, was darunter kommt. */
p.fristen { margin: 0 0 var(--s3); }

/* Der Ausweg unter einer verpassten, ans Förderjahr gebundenen Frist
   (10.09.2026, Kodex F01). Er erscheint in genau einem Zustand und soll dort
   nicht wie eine weitere Warnung aussehen, sondern wie der Weg hinaus —
   deshalb die ruhige Fläche statt der Fehlerfarbe der Zeile darüber. Der
   Seitenkopf bleibt sonst einzeilig. */
.fristen__ausweg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--akzent-hell);
  border-radius: var(--r-klein);
}
.fristen__ausweg p { margin: 0; color: var(--ink-2); font-size: var(--t-klein); }

/* Der abgesetzte Kasten für `kategorie: wegweiser` / `steuer_wegweiser`.

   Das Schema verlangt die Absetzung wörtlich: Diese Einträge sind KEIN
   Prüfergebnis, sondern ein neutraler Hinweis (StBerG/RDG). Sie stehen deshalb
   in keinem der drei Töpfe, sondern in einer eigenen Karte — dieselbe Bauform
   wie „Was ansteht" auf der Startseite, samt Randlinie als Signal.

   KEIN NEUER FARBWERT: --amber ist die Farbe, die dieses Projekt für
   „Vorbehalt, anderer Weg" führt — sie trägt schon `.chip[data-klasse=
   "wegweiser"]` auf der Ergebnisseite und den Prüf-Vermerk an der Vorlage. Die
   Bedeutung steht im Text darüber („Kein Prüfergebnis und nichts zum Abhaken"),
   die Linie ist die zweite Spur. */
/* Die Abschlussprüfung vor der Mappe (Audit P0-4). Dieselbe 3px-Kante wie bei
   „ansteht" und beim Wegweiser — kein neues Gestaltungsmittel, nur eine, die
   den Kasten von den übrigen Karten der Seite abhebt. Ohne sie stünde die
   Auskunft, wegen der die Seite überhaupt gebaut wurde, als eine Karte unter
   vielen da. `offen` trägt es auch für die KI-Lücken auf der Entwurfsseite. */
.karte[data-ton="offen"]   { border-left: 3px solid var(--amber); }
.karte[data-ton="fertig"]  { border-left: 3px solid var(--gruen); }

/* ---- Die Zweiteilung der Abschlussprüfung (Gründertest 20.08.2026) --------
 *
 * Zwei Sorten Befund unter einer Überschrift, und sie verlangen verschiedene
 * Handlungen: Bei der einen muss der Verein ENTSCHEIDEN (Plan ändern, anderen
 * Topf suchen), bei der anderen nur EINTRAGEN. Gleichrangig gesetzt, wird die
 * schwerere zur Fußnote — genau das ist dem Gründer passiert.
 *
 * DIE FARBEN SIND DIE DES HAUSES: Amber heißt in diesem Werkzeug überall
 * „Vorbehalt, anderer Weg, gesperrte Höhe"; Sand heißt „Hinweis am Rand".
 * Eine fünfte Farbe für diese eine Stelle kostet Aussagekraft bei allen
 * anderen. */
.pruefgruppe {
  margin: var(--s4) 0 0;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-klein);
}

.pruefgruppe__satz { margin: 0 0 var(--s2); font-size: .9rem; }
.pruefgruppe ul { margin: 0; padding-left: 1.2rem; }
.pruefgruppe li + li { margin-top: .35rem; }

.pruefgruppe[data-schwere="unstimmig"] {
  border: 1px solid var(--amber);
  background: var(--amber-hell);
}

.pruefgruppe[data-schwere="unstimmig"] .pruefgruppe__satz {
  font-weight: 600;
  color: var(--ink);
}

.pruefgruppe[data-schwere="bedarf"] {
  border: 1px solid var(--sand-linie);
  background: var(--sand-hell);
}

.pruefgruppe[data-schwere="bedarf"] .pruefgruppe__satz { color: var(--ink-2); }

/* ---- Was der Geber verlangt, ohne dass eine Frage danach fragt (B1) -------
 *
 * SAND UND NICHT AMBER: Das hier ist keine Warnung und kein offener Punkt,
 * sondern eine Packliste — Bedingungen, Anlagen und Kostenausschlüsse des
 * Topfs, damit der Verein sie beim Ausfüllen vor Augen hat. Amber hieße „ihr
 * seid dran", und das stimmt hier nur zum Teil.
 *
 * Der Kasten steht dauerhaft; er darf deshalb nicht laut sein. */
.karte[data-ton="sand"] { border-left: 3px solid var(--sand-linie); background: var(--sand-hell); }

.verlangt { margin: var(--s3) 0 0; }
.verlangt dt {
  margin-top: var(--s3);
  font-size: var(--t-winzig);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.verlangt dd { margin: var(--s1) 0 0; }
.verlangt ul { margin: 0; padding-left: 1.2rem; }
.verlangt li + li { margin-top: .3rem; }
.verlangt p { margin: 0; }

.karte[data-ton="wegweiser"] { border-left: 3px solid var(--amber); }
.karte[data-ton="wegweiser"] > article { margin-top: var(--s5); }
.karte[data-ton="wegweiser"] > article h3 { margin: 0 0 var(--s2); font-size: 1rem; }

/* ---- Die Vorlagen des Datenschutz-Lotsen (AP7) ----------------------------
   Ein Blatt, das der Verein ausdruckt und jemandem vorlegt — einem Mitglied,
   das unterschreibt, oder der Aufsichtsbehörde. Deshalb Fließtext statt
   Kartenoptik: Was hier steht, soll wie ein Vereinsformular aussehen und nicht
   wie eine Bildschirmseite.

   KEINE NEUEN FARBWERTE. Die Lücke trägt dasselbe Rot wie jede andere Stelle,
   an der etwas fehlt, der Prüf-Vermerk ist `.chip[data-art="risiko"]` und wird
   hier gar nicht angefasst. */
.dokument > section { margin-bottom: var(--s5); }
.dokument > section:last-child { margin-bottom: 0; }
.dokument h2 { font-size: 1rem; margin: 0 0 var(--s2); }
.dokument p { margin: 0 0 var(--s2); max-width: var(--spalte); }
.dokument p:last-child { margin-bottom: 0; }

/* Der Vorbehalt am Baustein: Er steht auf dem Blatt, WEIL wir nicht wissen, ob
   er zutrifft — weggelassen hätten wir im Zweifel eine Pflichtangabe. Das Wort
   „bitte prüfen" trägt die Aussage, die Linie ist die zweite Spur. */
.dokument > section[data-pruefen="ja"] { border-left: 3px solid var(--amber); padding-left: var(--s3); }

/* Abschnittsnummern bei Vorlagen mit `nummeriert` (die Datenschutzerklärung).
   GEZÄHLT WIRD, WAS AUF DEM BLATT STEHT: Stünden die Nummern im Text, spränge
   die Zählung 1, 3, 4 …, sobald ein bedingter Baustein wegfällt — und das Blatt
   sähe aus, als fehlte eine Seite. */
.dokument[data-nummeriert="ja"] { counter-reset: abschnitt; }
.dokument[data-nummeriert="ja"] h2::before { counter-increment: abschnitt; content: counter(abschnitt) ". "; }

/* Die Lücke: was die Vorlage nicht füllen kann. Sie zu verstecken hieße, ein
   halbfertiges Dokument als fertiges auszugeben — unterschrieben wird es
   trotzdem. */
.luecke {
  background: var(--fehler-hell);
  color: var(--fehler);
  padding: 0 var(--s1);
  border-radius: var(--r-klein);
  font-weight: 600;
}

@media (max-width: 34rem) {
  html { font-size: 16px; }
  .seite, .raum { padding: var(--s5) var(--s4) var(--s8); }
  .karte, .treffer, .fragen { padding: var(--s4); }
  .treffer { gap: var(--s3); }
  .zeile { grid-template-columns: minmax(0, 1fr); }
  /* Der Innenabstand schrumpft — der Fuß muss mitschrumpfen, sonst zöge er
     seine negativen Ränder über die Kartenkante hinaus (siehe .aufgabe__fuss). */
  .treffer--aufgabe { --tr-innen: var(--s4); padding-bottom: 0; }
  /* Untereinander statt nebeneinander, Knopf zuerst: Auf dem Handy ist er das,
     wonach gegriffen wird. Dieselbe Umstellung wie beim Fuß der Förderkachel. */
  .aufgabe__fuss { grid-template-columns: minmax(0, 1fr); }
  .aufgabe__fuss > .aufgabe__tat { grid-row: 1; justify-content: stretch; }
  .aufgabe__fuss > .aufgabe__mehr { grid-row: 2; }
  .aufgabe__tat form { flex: 1; }
  .aufgabe__tat .haken { width: 100%; }
}

/* Der Seitenrand ist absichtlich klein, und der eigentliche Rand entsteht als
   Innenabstand des Dokuments.

   DER GRUND IST KEIN GESCHMACK. Chrome zeichnet seine eigene Kopf- und Fußzeile
   — Datum, Seitentitel, die vollständige URL und die Seitenzahl — IN den
   Seitenrand und lässt sie weg, wenn dort kein Platz ist. Auf einer
   Einwilligung, die ein Verein seinen Mitgliedern zur Unterschrift vorlegt, hat
   „12.08.26, 12:42 · vereins-copilot.de/mein-verein/faelle/3/vorlage/…" nichts
   zu suchen: Das Blatt soll wie ein Vereinsformular aussehen und nicht wie ein
   Browser-Ausdruck.

   Waagrecht 0, senkrecht 8mm: Ein Innenabstand am Dokument wirkt nur auf der
   ERSTEN und der LETZTEN Seite. Stünde hier senkrecht ebenfalls 0, begänne ein
   zweiseitiges Formular auf Blatt 2 unmittelbar an der Papierkante — und die
   meisten Drucker schneiden dort ohnehin ab. Die 8mm gelten dagegen auf jeder
   Seite und bleiben unter der Schwelle, ab der Chrome seine Kopfzeile setzt.

   WÖRTLICH AUS DEM ABGELÖSTEN scripts/build-dsgvo.mjs. Beim Umzug der beiden
   Browserseiten an den Server ist die Regel verlorengegangen; seitdem druckte
   jede Vorlage die Browser-Kopfzeile mit. Die Abnahme mit eigenen Augen steht
   weiter aus (docs/todo-betrieb-und-support.md, Abschnitt „Das Druckbild"). */
@page { margin: 8mm 0; }

@media print {
  body { background: var(--karte); }
  .leiste, nav.wege, button, .knopf, .supportbalken, .antworten, .seitlich { display: none; }

  /* WAS NUR AUF DEN BILDSCHIRM GEHÖRT, sagt das Element selbst — ein Zustand
     als data-Attribut, wie überall sonst (Abschnitt 11). Auf der Vorlagenseite
     sind das drei Dinge, und alle drei sind Arbeitsnotizen für den Vorstand,
     der das Blatt erzeugt: der Muster-Hinweis, der Seitenkopf mit Vereinsname
     und Falltitel, und der Kasten „Das müsst ihr noch eintragen".
     Entscheidung des Betreibers vom 2026-08-12, schon einmal so getroffen im
     abgelösten dist/dsgvo.html: Der Muster-Hinweis richtet sich an den
     Vorstand, nicht an das Mitglied, das unterschreibt — auf dem Blatt liest er
     sich wie ein Vorbehalt gegen das eigene Formular. Die Vorlagen tragen ihre
     Titelzeile ohnehin als ersten Baustein, und was noch fehlt, sagen auf dem
     Papier die Ausfülllinien an Ort und Stelle. */
  [data-drucken="nein"] { display: none; }

  .spalten { grid-template-columns: minmax(0, 1fr); }
  .karte, .treffer, .fragen, details.zu {
    border: none;
    box-shadow: none;
    padding: 0;
    break-inside: avoid;
  }
  details.zu[open] > summary::after { content: ""; }
  .treffer { border-bottom: 1px solid var(--linie); padding-bottom: var(--s3); }
  /* Auf Papier gibt es keine Handlungszone: kein Grund, keine Trennlinie, und
     vor allem keine negativen Ränder — die Karte hat hier keinen Innenabstand
     mehr, den der Fuß zurückholen könnte. */
  .treffer--aufgabe { --tr-innen: 0; padding-bottom: var(--s3); }
  .aufgabe__fuss { margin: var(--s3) 0 0; padding: 0; background: none; border-top: none; }

  /* Das Blatt hat einen Rand. Die Zeile darüber nimmt jeder `.karte` ihren
     Innenabstand, und `.dokument` IST eine — `<article class="karte dokument">`.
     Ohne diese Regel begann der Text einer Fotoeinwilligung 8mm von der
     Papierkante entfernt: technisch bedruckbar, als Formular unbrauchbar.
     Zusammen mit den 8mm der @page-Regel ergibt das oben und unten rund 18mm
     auf der ersten Seite und 8mm auf den folgenden — dieselbe Rechnung wie im
     abgelösten scripts/build-dsgvo.mjs, dort an `#vorlage-ansicht`. */
  .dokument { border: none; margin: 0; padding: 10mm 20mm; }

  /* Auf Papier ist ein farbiger Kasten die falsche Form: Man kann nicht
     hineinschreiben, ohne den Platzhalter zu überschreiben, und daneben stehen
     echte Ausfülllinien. Bis zum 2026-08-12 stand hier eine halbe Lösung — der
     Platzhaltertext blieb stehen und bekam nur eine Unterstreichung. Genau
     diese Form hatte die alte Fassung schon einmal schriftlich verworfen: ein
     Kasten mit dem Wort darin neben echten Ausfülllinien, „niemand weiß dann,
     ob er den Text überschreiben soll".

     Jetzt die Formular-Konvention, wie im abgelösten dist/dsgvo.html: eine
     Linie zum Schreiben, darunter klein der Hinweis, was hingehört. Der
     Platzhalter selbst wird über `font-size: 0` unsichtbar, die Linie kommt aus
     ::before, der Hinweis aus ::after und dem Attribut `data-hinweis`, das
     server/seiten-vorlage.mjs an jede Lücke schreibt. Am Bildschirm bleibt
     alles, wie es ist — dort ist die rote Markierung mit dem Text darin das
     richtige Signal.

     KEINE NEUEN FARBWERTE: Linie in --ink wie jede Trennlinie im Fließtext,
     Hinweis in --ink-2 wie jeder Nebentext. */
  .luecke {
    display: inline-block; width: var(--linie-schreib); vertical-align: top;
    background: none; border: none; border-radius: 0; padding: 0; margin: 0;
    font-size: 0; line-height: 0;
  }
  .luecke::before {
    content: ""; display: block;
    height: var(--linie-schreib-hoch);
    border-bottom: 1px solid var(--ink);
  }
  .luecke::after {
    content: attr(data-hinweis);
    display: block; margin-top: var(--s1);
    font-size: var(--t-winzig); line-height: 1.25; font-weight: 400;
    color: var(--ink-2); white-space: normal;
  }

  /* Das Kreisdiagramm auf Papier. Der Ring ist ein SVG-Strich und druckt mit;
     Hintergründe druckt der Browser standardmäßig nicht. Deshalb bekommt die
     erklärte Legendenzeile hier einen Strich statt einer Fläche — sonst
     verschwände auf dem Papier, dass zu ihr eine Anmerkung gehört. */
  .kreis { box-shadow: none; break-inside: avoid; }
  .legende li[data-erklaert] { border-left: 2px solid var(--linie); }
}

/* Letzte Kaskadenstufe der Neugestaltung. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 12% -10%, rgba(225, 182, 111, .12), transparent 28rem),
    var(--grund);
}

h1 { font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 720; letter-spacing: -.045em; }
.seite, .raum { width: 100%; flex: 1; padding-top: 3rem; padding-bottom: 5rem; }

/* Die Anmeldeseite, beruhigt am 17.08.2026.
 *
 * Vorher war die grüne Hälfte zu wuchtig und wirkte an den Rändern
 * auseinandergezogen. Fünf Ursachen, fünf Eingriffe — der Aufbau bleibt, wie er
 * war:
 *
 *   1. KEINE MINDESTHÖHE MEHR. Hier stand `min-height: 42rem`. Der grüne Kasten
 *      war damit immer höher als sein Inhalt, und `space-between` hat Marke,
 *      Überschrift und Vorteile an die Ränder gedrückt. Jetzt bestimmt das
 *      Formular die Höhe; der Abstand entsteht aus dem Inhalt, nicht aus einer
 *      gesetzten Zahl.
 *   2. DIE ÜBERSCHRIFT AUF DIE HÄLFTE. `4.2vw` ergaben auf einem 1440er-Fenster
 *      60px und drei Umbrüche.
 *   3. EINE ZEILENLÄNGE STATT ZWEIER. Die Überschrift brach bei `12ch`, der
 *      Absatz darunter lief bis `37rem`. Zwei verschiedene Kanten übereinander —
 *      daher der unaufgeräumte Eindruck. Jetzt bricht beides an der Spalte.
 *   4. EINE DURCHGEHENDE LINIE über den drei Vorteilen statt drei kurzer. Die
 *      drei Striche haben aus ihnen einen Tabellenfuß gemacht.
 *   5. EIN SCHATTEN FÜR BEIDE HÄLFTEN. Grün trug `--schatten-hoch`, Weiß das
 *      schwächere `--schatten`; dadurch war die Naht in der Mitte sichtbar,
 *      statt dass es eine Karte ist.
 */
.auth {
  width: min(66rem, calc(100% - 2rem));
  margin: auto;
  padding: 3.5rem 0;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(23rem, .85fr);
  align-items: stretch;
}

.auth__intro {
  padding: 2.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.2rem;
  border-radius: 1.5rem 0 0 1.5rem;
  /* Ein sehr flacher Lichtschein oben links nimmt der Fläche das Plakathafte,
   * ohne eine zweite Farbe einzuführen. */
  background:
    radial-gradient(125% 95% at 0% 0%, rgba(255,255,255,.075), transparent 62%),
    var(--auth);
  color: var(--weiss);
  box-shadow: var(--schatten-hoch);
}

.auth__intro .appmarke { color: var(--weiss); }
.auth__intro .appmarke__zeichen { background: rgba(255,255,255,.15); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.auth__intro .appmarke__text small { color: rgba(255,255,255,.67); }
.auth__intro .ueberzeile { color: var(--auth-gold); }
/* ZWEI ZEILEN BEI JEDER FENSTERBREITE.
 *
 * Ohne Deckel läuft die Zeile bei 1366px auf einer einzigen Zeile aus und steht
 * dann 9px vor der Kante — bei 1440px bricht sie plötzlich um. Dieses Kippen
 * sieht man beim Ziehen am Fenster sofort.
 *
 * Das Maß steht in `em`, nicht in `rem` oder Pixeln: Der Satz ist rund 13,6em
 * breit, also erzwingt jeder Wert darunter den Umbruch — unabhängig davon, wie
 * groß `clamp()` die Schrift gerade macht. `balance` verteilt die beiden Zeilen
 * dann gleichmäßig, statt ein einzelnes Wort hängen zu lassen. */
.auth__intro h1 {
  max-width: 13em;
  margin-bottom: .7rem;
  font-size: clamp(1.85rem, 2.6vw, 2.45rem);
  line-height: 1.1;
  text-wrap: balance;
  color: var(--weiss);
}

/* NUR DER BESCHREIBENDE ABSATZ, nicht jedes p in der grünen Hälfte.
 *
 * Bis zum 17.08.2026 stand hier `.auth__intro p`, und das hat die Überzeile
 * mitgenommen: `.auth__intro p` (0,1,1) schlägt `.ueberzeile` (0,1,0) und hat
 * ihr `font-size: .73rem` überschrieben. „WENIGER SUCHEN. SICHERER HANDELN."
 * stand deshalb auf 17,5px statt auf 12,4px — dieselbe Zeile im weißen Feld
 * daneben war korrekt. Ein Nebeneffekt, den niemand gewählt hat, und ein
 * Grund, warum die grüne Seite laut wirkte. */
.auth__intro > div > p:last-child {
  /* 23rem, nicht mehr: Der Absatz braucht so oder so drei Zeilen, aber seine
   * längste Zeile steht damit 13px neben der Überschrift statt 133px. Der
   * Textblock bekommt dadurch EINE Kante statt zweier — bei 27rem lief er weit
   * über die Überschrift hinaus, und genau das las sich unaufgeräumt. */
  max-width: 23rem;
  color: rgba(255,255,255,.74);
  font-size: .95rem;
  line-height: 1.6;
}

.auth__vorteile {
  margin: 0;
  padding: 1.15rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.16);
  list-style: none;
}

.auth__vorteile li { padding-top: 0; border-top: 0; }
.auth__vorteile strong, .auth__vorteile span { display: block; }

/* GLEICHE KANTEN, EGAL WIE DER TEXT BRICHT.
 *
 * Die drei Spalten sind 148px breit, und die drei Titel brauchen einzeilig
 * 153px, 145px und 159px. „Fristen und Aufgaben" passt damit als einziger
 * gerade so auf eine Zeile — drei Pixel entscheiden das. Die Untertitel
 * begannen dadurch auf verschiedenen Höhen.
 *
 * Erster Versuch am 17.08.2026 war nur `min-height`: Die Untertitel fluchteten
 * danach zwar, aber unter dem einzeiligen Titel stand eine sichtbare LEERZEILE,
 * mitten in der Reihe. Ausgerechnet die Reparatur war der auffälligere Fehler.
 *
 * Deshalb zusätzlich ein Deckel, der JEDEN Titel umbrechen lässt. Er steht in
 * `em`, nicht in Pixeln, und liegt bewusst in der Mitte des brauchbaren
 * Bereichs: Ab etwa 9,7em bricht nichts mehr um, unter etwa 6em passte das
 * längste Wortpaar (87px) nicht mehr. 8em hat nach beiden Seiten Luft und hält
 * deshalb auch, wenn auf einem anderen System eine andere Schrift einspringt.
 *
 * `min-height` bleibt als zweite Sicherung stehen, falls doch einmal ein Titel
 * kurz genug für eine Zeile ist. */
.auth__vorteile strong { max-width: 8em; min-height: calc(2 * 1.25em); font-size: .87rem; font-weight: 640; line-height: 1.25; }
.auth__vorteile span { min-height: calc(2 * 1.35em); margin-top: .18rem; color: rgba(255,255,255,.56); font-size: .78rem; line-height: 1.35; }

.auth__panel {
  padding: 2.8rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--linie);
  border-left: 0;
  border-radius: 0 1.5rem 1.5rem 0;
  background: var(--karte);
  box-shadow: var(--schatten-hoch);
}

.auth__panelkopf { margin-bottom: 1.75rem; }
.auth__panelkopf h2 { margin: 0 0 .45rem; font-size: 1.65rem; }
.auth__panelkopf p:last-child { color: var(--ink-2); }
.auth__panel button { width: 100%; margin-top: .35rem; }
.auth__hilfe { margin-top: 1.5rem; color: var(--ink-3); font-size: .8rem; }

@media (max-width: 850px) {
  .auth { grid-template-columns: 1fr; width: min(38rem, calc(100% - 1.5rem)); padding: 1.5rem 0; }
  /* Auch hier fällt die Mindesthöhe weg: untereinander stünde sonst ein
   * 30rem hoher grüner Block über dem Formular. */
  .auth__intro { padding: 2rem; border-radius: 1.25rem 1.25rem 0 0; }
  .auth__intro h1 { font-size: 2.1rem; }
  /* Untereinander hat jeder Punkt die volle Breite und braucht nur eine Zeile.
   * Das feste Zweizeilenmaß von oben würde hier unter jedem Titel eine leere
   * Zeile stehen lassen — es löst ein Problem, das es nebeneinander gibt und
   * gestapelt nicht. */
  .auth__vorteile { grid-template-columns: 1fr; gap: 1.1rem; }
  .auth__vorteile strong, .auth__vorteile span { min-height: 0; }
  .auth__panel { padding: 2rem; border-left: 1px solid var(--linie); border-top: 0; border-radius: 0 0 1.25rem 1.25rem; }
}

/* DIE KNÖPFE STEHEN OBEN, NICHT AM TEXTENDE (Sichtprüfung 18.08.).
 *
 * Hier stand `align-items: flex-end`. Das sah richtig aus, solange der Kopftext
 * zwei Zeilen hatte — die Knöpfe standen dann zufällig auf Höhe der
 * Überschrift. Als der Text der Fördertöpfe-Seite auf sechs Zeilen wuchs,
 * rutschten „Profil ändern" und „Vorhaben öffnen" mit nach unten und standen
 * mitten im Absatz. Der Befund des Gründers: „Profil ändern und Vorhaben öffnen
 * verrutscht."
 *
 * `flex-start` bindet sie an die Oberkante des Kopfes. Damit ist ihre Lage
 * unabhängig davon, wie lang der Text daneben wird — und genau das war der
 * Fehler: eine Ausrichtung, die eine bestimmte Textlänge voraussetzt.
 *
 * Betrifft vier Seiten (Ergebnis, Fördertöpfe, Übersicht), nicht nur die eine.
 */
.seitenkopf--mit-aktion {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

.seitenkopf--mit-aktion > div:first-child { min-width: 0; }
.seitenkopf__aktionen { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }

/* Der Kopftext der Fördertöpfe: zwei Aussagen, zwei Gewichte.
 *
 * `--spalte` ist die lesbare Textbreite des Systems (rund 68 Zeichen). Ohne sie
 * läuft der Absatz über die ganze Kopfbreite, und bei 46rem beginnt das Auge am
 * Zeilenanfang zu suchen. `text-wrap: pretty` verhindert dazu die einzelne
 * Restzeile am Absatzende — genau die macht einen Block „hässlich", ohne dass
 * man benennen könnte, warum.
 *
 * Der zweite Absatz ist die Einschränkung. Er steht kleiner und leiser, weil er
 * gefunden werden muss und nicht gelesen: Wer die Seite kennt, überliest ihn;
 * wer neu ist, stolpert über das fette „Das sind nicht alle". */
.kopf__satz {
  max-width: var(--spalte);
  margin: 0;
  color: var(--ink-2);
  font-size: 1.05rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.kopf__satz b { color: var(--ink); font-weight: 640; }

.kopf__rest {
  max-width: var(--spalte);
  margin: var(--s4) 0 0;
  padding-left: var(--s4);
  border-left: 2px solid var(--linie);
  color: var(--ink-3);
  font-size: var(--t-klein);
  line-height: 1.55;
  text-wrap: pretty;
}
.kopf__rest b { color: var(--ink-2); font-weight: 700; }

/* Die Aktionsknöpfe in der Seitenspalte, über der Tafel.
 *
 * WARUM SIE DORT STEHEN (18.08.): Der Befund war „macht den Überblick auch noch
 * nach oben". Die Tafel konnte nicht höher, solange der Seitenkopf über der
 * vollen Breite lag — die Spalten begannen erst darunter. Jetzt liegt der Kopf
 * in der linken Spalte, und was vorher rechts NEBEN ihm stand, steht jetzt
 * rechts ÜBER der Tafel. Für den Blick ändert sich an den Knöpfen nichts, für
 * die Tafel alles.
 *
 * Rechtsbündig, weil sie die Kante der Tafel darunter aufnehmen sollen.
 *
 * DIE ZWEI KNÖPFE STEHEN NEBENEINANDER, UND ZWAR IMMER (07.09.2026). Vorher
 * hing das an der Textlänge, und der Unterschied fiel unter Vorhaben auf:
 * dieselbe Klasse, dasselbe Markup, und trotzdem standen sie dort untereinander
 * und unter Fördertöpfen nebeneinander.
 *
 * GEMESSEN bei 1440 px Fenster, Seitenspalte 306 px:
 *   Fördertöpfe  "Profil ändern" + "Vorhaben öffnen"    291,5 px  — passt
 *   Vorhaben     "Angaben ändern" + "Weitere Vorhaben"  323,5 px  — bricht um
 * Der Textunterschied sind 32 px. Fördertöpfe kam mit einer halben Pixelreserve
 * durch; das war Zufall, kein Entwurf. Ein Wort mehr, eine andere Schriftgröße
 * oder ein Zoomschritt, und auch dort wäre es gekippt.
 *
 * Deshalb zwei Änderungen statt einer Textkürzung. flex-wrap: nowrap nimmt dem
 * Umbruch die Möglichkeit — die Knöpfe schrumpfen dann, statt zu springen. Und
 * das schmalere Padding schafft die Luft, damit es zum Schrumpfen gar nicht
 * erst kommt: mit .7rem statt 1rem braucht das längere Paar 298 px von 306.
 *
 * min-width: 0 gehört dazu, sonst ignoriert ein Flex-Kind die Schrumpfregel und
 * läuft über den Container hinaus. */
.seitlich__aktionen {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.seitlich__aktionen .knopf {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: .7rem;
}

/* Suchfeld und Knopf in einer Zeile statt untereinander.
 *
 * „Macht den Suchen-Knopf rechts neben das Textfeld, dann können wir uns etwas
 * vertikale Höhe sparen" (18.08.). Der Kasten war 200px hoch für ein Feld.
 *
 * `align-items: flex-end` ist HIER richtig und nicht derselbe Fehler wie im
 * Seitenkopf: Der Nachbar ist ein Feld mit Beschriftung darüber, seine Höhe
 * steht fest. Der Knopf soll auf Höhe des Eingabefeldes sitzen, nicht auf Höhe
 * der Beschriftung. Umgebrochen wird erst, wenn der Platz wirklich fehlt. */
.suchform {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--s3);
}
.suchform .feld { flex: 1 1 16rem; margin: 0; min-width: 0; }
.suchform button { flex: 0 0 auto; }

.sicherheitshinweis {
  max-width: none;
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--sand-linie);
  border-radius: var(--r-klein);
  background: var(--sand-hell);
  color: var(--ink-2);
  font-size: .86rem;
}

/* Das Band über dem Profilformular, wenn jemand mitten aus einer Strecke
 * hierhergekommen ist (Gründertest 20.08.2026).
 *
 * ES TRÄGT DIE AKZENTFARBE und nicht den Sandton des Sicherheitshinweises
 * darüber: Der Hinweis ist eine Fußnote, dieses Band ein Weg. Wer nur wegen
 * einer Angabe hier ist, soll den Ausgang sehen, bevor er zu lesen anfängt. */
.rueckweg {
  max-width: none;
  margin: 0 0 1.25rem;
  padding: .85rem 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--akzent);
  border-radius: var(--r-klein);
  background: var(--akzent-hell);
  color: var(--ink-2);
  font-size: .9rem;
}

.profil-formular { padding-bottom: 2rem; }
.profil-formular > .karte { padding: 1.7rem; }
.profil-formular > .karte > h2 { margin-bottom: .3rem; }
.profil-formular > .karte > .leise { margin-bottom: 1.5rem; }

/* Der mitlaufende Abschluss eines Formulars.
 *
 * Er stand als eine Zeile aus Text und zwei Knöpfen da, und weil nichts davon
 * gegen das Umbrechen geschützt war, zerfiel er bei der schmalen Formularspalte
 * in vier Zeilen: „Speichern und" / „weiter", daneben „Nur" / „speichern".
 * Deshalb hier drei Dinge, die zusammengehören — die Knöpfe brechen nicht mehr
 * um (`white-space: nowrap`), sie verlieren keinen Platz mehr an den Text
 * (`flex: none` gegen `min-width: 0`), und der Text sagt in zwei kurzen Zeilen,
 * wo man steht, statt in einem langen Satz, warum Speichern nötig ist. */
.formular-abschluss {
  position: sticky;
  bottom: 1rem;
  z-index: 12;
  margin-top: var(--s5);
  padding: var(--s3) var(--s3) var(--s3) var(--s5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: rgba(255, 254, 250, .93);
  box-shadow: var(--schatten-hoch);
  backdrop-filter: blur(16px);
}

.formular-abschluss__stand {
  min-width: 0;
  display: grid;
  gap: .1rem;
}
.formular-abschluss__stand strong {
  color: var(--ink);
  font-size: var(--t-klein);
  font-weight: 680;
}
.formular-abschluss__knoepfe {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.formular-abschluss__knoepfe button { white-space: nowrap; }

.formular-abschluss p { margin: 0; color: var(--ink-3); font-size: .8rem; }

/* ------------------------------------------------- Sprechen statt tippen
 *
 * Die Dateiauswahl des Browsers ist das einzige Bedienelement der Anwendung,
 * das nicht gestaltet werden kann: Der graue Kasten mit „Datei auswählen" und
 * „Keine ausgewählt" daneben ist Betriebssystem und stammt sichtbar aus einer
 * anderen Zeit. Deshalb steht das echte Feld unsichtbar hinter der Zeile, und
 * bedient wird über sein <label> — dasselbe Feld, dieselbe Funktion, nur in der
 * Form dieser Anwendung.
 *
 * KEINE FESTE BREITE UND KEIN `display: none`: Versteckt wird über Deckkraft
 * und Stapelebene, damit das Feld für die Tastatur erreichbar bleibt. Ein
 * `display: none` nähme es aus der Bedienreihenfolge, und wer mit der Tabulator-
 * Taste arbeitet, käme nie hin. */
.aufnahme {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  position: relative;
}

.aufnahme__eingabe {
  position: absolute;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}

.aufnahme__stand {
  min-width: 0;
  color: var(--ink-3);
  font-size: var(--t-klein);
}

/* Der Fokusring gehört sichtbar an das, was man sieht — das echte Feld ist ja
 * unsichtbar. Ohne diese Regel wäre die Zeile für die Tastatur ein blinder
 * Fleck: Man steht auf ihr, ohne es zu erkennen. */
.aufnahme__eingabe:focus-visible + .knopf {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

/* Während aufgenommen wird: ein ruhiger Punkt, kein Blinken. Bewegung an dieser
 * Stelle wäre Druck, und wer gerade spricht, braucht keinen. */
.aufnahme[data-laeuft="ja"] .aufnahme__stand::before {
  content: "";
  width: .55rem;
  height: .55rem;
  margin-right: .45rem;
  display: inline-block;
  border-radius: var(--r-marke);
  background: var(--fehler);
}

.details__inhalt { padding: 0 1.25rem 1.25rem; color: var(--ink-2); font-size: .86rem; }
details.kompakt { margin-top: 1rem; }

/* ── Die aufgeklappte Anleitung einer Pflicht ─────────────────────────────
 *
 * DER BEFUND (Sichtprüfung des Gründers, 30.08.2026: „die Detailseite ist bei
 * allen schlecht designweise her"). Nachgemessen an einer echten Karte, und es
 * waren drei Sachen auf einmal:
 *
 *   1. NICHTS FLUCHTET. Die Absätze halten Lesebreite (578 px), Listen und
 *      Aufklapper nehmen die volle Breite (848 px) — bei sieben Blöcken
 *      untereinander springt die rechte Kante fünfmal. Genau der Befund, den
 *      der Gründer schon bei den Textblöcken hatte: gleiche Kanten, gleiche
 *      Abstände.
 *   2. DREI RHYTHMEN. Gemessen: 17 px unter Absätzen, 14,6 px um Listen,
 *      12,75 px um Merksatz und Fundstelle. Kein Wert davon war falsch, sie
 *      waren nur nie füreinander gewählt.
 *   3. KEINE GLIEDERUNG. Weshalb-Satz, Checkliste, Vorlagenknopf, Merksatz,
 *      Rechtsfolge und Fundstelle stehen als sechs gleich aussehende Blöcke
 *      untereinander. Was davon die Anleitung ist und was die Begründung, muss
 *      man sich erlesen.
 *
 * WAS HIER STEHT, ist die Antwort auf 1 und 2 — eine Kante, ein Abstand — und
 * auf 3 so weit, wie es ohne neue Auszeichnung geht: Der einleitende Satz wird
 * leiser, die Checkliste bekommt Luft und eigene Marken, und die Fundstelle
 * setzt sich mit einer Linie ab. Die Reihenfolge bleibt; sie ist richtig.
 *
 * NUR IN DER AUFGABENKARTE (`.aufgabe__mehr`): Dieselbe Klasse
 * `.details__inhalt` trägt anderswo Formulare und Tabellen, die Lesebreite
 * brauchen. Ein globaler Eingriff hier wäre der nächste Befund. */
.aufgabe__mehr > .details__inhalt { padding: 0; }
/* EINE KANTE für alles, was darin steht. `p` hat von Haus aus `max-width:
   var(--spalte)` — im schmalen Aufklapper einer Karte ist die Kartenbreite
   ohnehin die Lesebreite, und die springende rechte Kante kostet mehr, als die
   Zeilenlänge einbringt. */
.aufgabe__mehr > .details__inhalt > * { max-width: none; }
/* EIN ABSTAND. Der Rand kommt von oben, nicht von unten — dann trägt das erste
   Element keinen und die Reihe beginnt bündig an der Trennlinie. */
.aufgabe__mehr > .details__inhalt > * { margin-top: var(--s4); margin-bottom: 0; }
.aufgabe__mehr > .details__inhalt > :first-child { margin-top: 0; }

/* Der einleitende Satz (`wer_handelt.weshalb`) ist Vorspann, nicht Anleitung —
   er sagt, wer handelt und warum. Leiser gesetzt, damit die Checkliste
   darunter die erste Sache ist, die man liest. */
.aufgabe__mehr > .details__inhalt > p:first-child { color: var(--ink-3); }

/* Die Checkliste ist die eigentliche Anleitung und bekommt den Platz dafür:
   mehr Zeilenluft und eine eigene Marke statt des Aufzählungspunkts, den auch
   jede andere Liste der Seite trägt. Die Marke ist ein Strich in der
   Akzentfarbe — sie soll die Zeile anführen, nicht mit ihr konkurrieren. */
.aufgabe__mehr .zeilen { gap: var(--s3); }
.aufgabe__mehr .zeilen > li {
  position: relative;
  padding-left: 1.1rem;
  line-height: 1.55;
  /* OHNE DIESE ZEILE STEHEN ZWEI MARKEN DA. `.zeilen` ist ein Flex-Container,
     aber seine `li` behalten den Aufzählungspunkt des Browsers — mit der Marke
     unten las die Zeile „• – Alle Tätigkeiten auflisten". Beim ersten Blick auf
     das Muster sofort aufgefallen. */
  list-style: none;
}
.aufgabe__mehr .zeilen > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .45rem;
  height: 1.5px;
  border-radius: 1px;
  background: var(--akzent);
}

/* Der Merksatz stand als beiger Kasten auf beigem Grund — im Fuß der Karte
   war er praktisch unsichtbar, obwohl er der eine Satz ist, den ein Vorstand
   mitnehmen soll. Auf Weiß mit feiner Linie hebt er sich ab, ohne lauter zu
   werden als die Checkliste darüber. */
.aufgabe__mehr .hinweis {
  background: var(--weiss);
  border: 1px solid var(--linie);
}

/* Die Knopfreihe im Aufklapper: Der eigene Knopf und der Muster-Link stehen
   nebeneinander, auf schmalem Schirm untereinander. */
.aufgabe__mehr .knopfreihe { gap: var(--s3); }

/* Die Fundstelle schließt den Block ab und wird durch eine Linie davon
   getrennt — sie beantwortet eine andere Frage als alles darüber. */
.aufgabe__mehr .quelle {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--linie);
}

/* ========================================================= Sichtbares Warten
 *
 * DER BEFUND (Gründertest 20.08.2026): Der Gründer wartete „ca. 1 min" vor
 * einer Seite, die nichts sagte, weil sein Klick auf einen Modellaufruf lief,
 * der ins Zeitlimit lief. Die Anzeige hier ist die eine Stelle, an der ein
 * langer Server-Vorgang überhaupt sichtbar wird — sie darf deshalb nie still
 * stehen: Ein Standbild ist von einem hängenden Browser nicht zu unterscheiden.
 *
 * ZWEI BEWEGUNGEN, ZWEI AUFGABEN. Der Kreis sagt „es läuft noch", der Balken
 * gibt der Wartezeit einen Takt. Beide sind reines CSS; ohne Skript bleibt die
 * Seite trotzdem bedienbar, sie zeigt dann eben keine Anzeige.
 *
 * ALLE WERTE STEHEN OBEN als Variablen — wer den Takt ändert, ändert eine
 * Zeile und nicht sechs.
 */
.ladeflaeche {
  --lade-kreis:      3.25rem;
  --lade-kreis-dick: 4px;
  --lade-takt:       .9s;    /* eine Umdrehung des Kreises */
  --lade-lauf:       1.35s;  /* ein Durchgang des Balkens */
  --lade-balken:     .42rem;
  --lade-balken-anteil: 42%; /* wie viel des Balkens gefüllt läuft */

  position: fixed;
  inset: 0;
  z-index: 1000;
  padding: 1rem;
  display: grid;
  place-items: center;
  opacity: 0;
  background: rgba(24, 29, 25, .46);
  backdrop-filter: blur(8px);
  transition: opacity .18s ease;
}

.ladeflaeche[data-sichtbar="ja"] { opacity: 1; }

.ladekarte {
  width: min(29rem, 100%);
  padding: 2.25rem;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 1.35rem;
  background: var(--karte);
  box-shadow: 0 26px 80px rgba(24, 29, 25, .24);
  text-align: center;
}

.ladekarte .ueberzeile { margin-top: 1.2rem; }
.ladekarte h2 { margin: 0 0 .55rem; font-size: 1.65rem; }
.ladekarte p { margin-inline: auto; color: var(--ink-2); }

.ladekreis {
  width: var(--lade-kreis);
  height: var(--lade-kreis);
  display: inline-block;
  border: var(--lade-kreis-dick) solid var(--akzent-hell);
  border-top-color: var(--akzent);
  border-radius: 50%;
  animation: laden-drehen var(--lade-takt) linear infinite;
}

.ladebalken {
  height: var(--lade-balken);
  margin-top: 1.4rem;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: var(--linie-2);
}

.ladebalken > span {
  width: var(--lade-balken-anteil);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--akzent);
  animation: laden-laufen var(--lade-lauf) ease-in-out infinite;
}

@keyframes laden-drehen { to { transform: rotate(360deg); } }
@keyframes laden-laufen { from { transform: translateX(-110%); } to { transform: translateX(345%); } }

/* Wer Bewegung abbestellt hat, bekommt trotzdem eine Rückmeldung.
 *
 * Die Anzeige ganz stillzustellen wäre der schlechteste Ausgang: Ein
 * unbewegter Kreis über einer abgedunkelten Seite sieht aus wie ein
 * eingefrorener Browser. Statt Drehen und Laufen pulst hier die Fläche —
 * dieselbe Aussage, ohne Bewegung im Raum. */
@media (prefers-reduced-motion: reduce) {
  .ladekreis { animation: laden-pulsen calc(var(--lade-takt) * 2) ease-in-out infinite; }
  .ladebalken > span { width: 100%; animation: laden-pulsen calc(var(--lade-lauf) * 2) ease-in-out infinite; }
}

@keyframes laden-pulsen { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ====================================================== Mappe und Bausteine
 *
 * Der Mappen-Arbeitsplatz (Umbau 2026-08-17): Ein Vorhaben trägt Bereiche, und
 * jeder Bereich ist eine Kachel mit einer Unterseite dahinter.
 *
 * WARUM NICHT `.aktionskarte`: Die ist 20rem hoch und für die zwei großen
 * Wege auf der Startseite gebaut. Drei davon nebeneinander wären eine
 * Bildschirmseite für drei Wörter. Die Kachel nimmt dieselben Werte
 * (Kartenfläche, Linie, Radius, Schatten) und bleibt flach.
 *
 * Der Farbstreifen oben unterscheidet die Bereiche, ohne dass ein Wort mehr
 * dastehen muss — dieselbe Sprache wie `.aktionskarte::before`. */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s5);
}

/* FLEX-SPALTE MIT `flex-start`, NICHT `block` (Sichtprüfung 18.08.).
 *
 * DER BEFUND: In einer Reihe von drei Kacheln stand der Titel der mittleren
 * 62 px unter der Kachelkante, die der beiden Nachbarn bei 27 px — drei
 * gleich hohe Kacheln, deren Text auf drei verschiedenen Höhen anfing.
 *
 * DIE URSACHE war nicht zu sehen: Die mittlere Kachel („Gehört noch nicht
 * dazu") ist ein <button>, und Browser zentrieren den Inhalt eines Knopfs
 * vertikal — auch bei `display: block`, weil sie ihn in einen eigenen
 * anonymen Kasten legen, den kein Selektor erreicht. Kein Stilblock in dieser
 * Datei sagte je „mittig", und trotzdem stand es da.
 *
 * Als Flex-Spalte ist die Ausrichtung geschrieben statt geerbt, und sie gilt
 * für <a> und <button> gleichermaßen. */
.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: var(--s4);
  padding-right: var(--s5);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--karte);
  box-shadow: var(--schatten);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
}
.kachel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--akzent);
}
.kachel[data-baustein="fest"]::before { background: var(--bronze); }
.kachel[data-baustein="datenschutz"]::before { background: var(--schiefer); }
.kachel:hover { border-color: var(--akzent); }

/* Der erste Absatz einer Kachel setzt die Schriftlinie, an der alle drei
 * Kacheln einer Reihe fluchten — deshalb kein Vorabstand. */
.kachel__titel {
  margin: 0 0 var(--s2);
  font-size: var(--t-gross);
  font-weight: 680;
  line-height: 1.25;
}
.kachel__stand {
  margin: 0 0 .2rem;
  font-size: var(--t-klein);
  color: var(--ink-2);
}
/* Der Pfeil ist Schmuck: Dass die Kachel führt, sagt schon das Element. */
.kachel__pfeil {
  position: absolute;
  right: var(--s3);
  bottom: var(--s3);
  color: var(--ink-3);
}

/* Eine fehlende Kachel ist ein ANGEBOT, kein Stand.
 *
 * Gestrichelt statt gefüllt, damit sie im selben Raster stehen kann, ohne sich
 * als erledigt auszugeben — der Unterschied liegt in der Linie, nicht in der
 * Position. Vorher war „Datenschutz dazunehmen" ein leiser Knopf unter der
 * Kachelreihe und wurde übersehen (Sichtprüfung 17.08.).
 *
 * Die Knopf-Fassung braucht die Rücknahme der Browservorgaben: Ein <button>
 * bringt eigene Schrift, eigene Mitte und einen eigenen Rand mit. */
.kachel[data-stand="fehlt"] {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  color: var(--ink-2);
  font: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.kachel[data-stand="fehlt"]::before { background: var(--linie); }
.kachel[data-stand="fehlt"]:hover {
  border-color: var(--akzent);
  background: var(--karte);
  color: var(--ink);
}
.kachel[data-stand="anderswo"] { border-style: dashed; box-shadow: none; }

/* Im Knopf sind Titel und Stand <span> — ein <p> wäre dort ungültiges HTML. */
.kachel > span.kachel__titel,
.kachel > span.kachel__stand { display: block; }

/* Das Formular ist nur die Hülle für den Knopf: Es soll im Kachelraster keine
 * eigene Zelle beanspruchen, sonst steht der Knopf in einem Kasten im Kasten. */
.kachelform { margin: 0; display: contents; }

/* Mehrere kleine Formulare nebeneinander (Stand, Zeitraum, Bereiche) — sie
 * gehören zusammen, sind aber je ein eigener Schreibvorgang. */
.knopfreihe, .formreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  align-items: flex-end;
}
.formreihe form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: flex-end;
}
.formreihe .feld { margin: 0; }

/* Die Marke am Feldnamen: „klärt 4 Pflichten". Sie ersetzt die vier Verweise,
 * die vorher aus den Aufgaben auf dieses Feld zeigten — die Auskunft steht
 * jetzt dort, wo man sie einlösen kann. `data-offen` am Feld trägt den
 * Zustand, die Farbe kommt aus dem Stylesheet (ADR Abschnitt 11). */
/* SIE STAND IM TEXTFLUSS UND WAR BEIGE — beides ist am 08.09.2026 gefallen.
 *
 * DER BEFUND des Gründers, an der Fragenliste des Datenschutzes: „das ist
 * immer in einer anderen zeile, es sind andere formatierungen. Und die beige
 * Farbe verwirrt einen und lenkt den Blick nicht auf das Wesentliche."
 *
 * Beides stimmte, und beides hatte dieselbe Ursache. Als `inline-block` mit
 * `margin-left` hing die Marke am letzten Wort der Frage. Bei „Habt ihr eine
 * eigene Website?" blieb Platz, sie stand in derselben Zeile; bei
 * „Veröffentlicht ihr Fotos von Mitgliedern?" nicht, sie rutschte darunter.
 * Elf Fragen ergaben so elf verschiedene Bilder — der Blick fand keine Kante,
 * an der er entlanglaufen konnte.
 *
 * Jetzt steht sie IMMER auf einer eigenen Zeile unter der Frage. Damit ist die
 * Stelle vorhersehbar, und die Farbe wird überflüssig: Ein Element, das immer
 * am selben Ort steht, muss sich nicht durch einen Hintergrund behaupten.
 *
 * Das Beige war zudem falsch besetzt. `--amber-hell` heißt in diesem Werkzeug
 * „Achtung, hier stimmt etwas nicht" (siehe .dokument-status, .meldung). Die
 * Marke sagt aber das Gegenteil: Diese Antwort LOHNT sich, sie klärt Pflichten.
 * Ein Warnton für eine gute Nachricht zieht den Blick weg von Frage und
 * Auswahl — also von dem, was der Verein hier tun soll. */
.feld__wirkung {
  display: block;
  width: fit-content;
  margin: .3rem 0 0;
  padding: 0;
  background: none;
  color: var(--ink-3);
  font-size: var(--t-winzig);
  font-weight: 400;
  letter-spacing: .01em;
}
.feld[data-offen="ja"] > label { color: var(--ink); }

/* „Offen: Wo findet das Fest statt?" — die Begründung, warum eine Pflicht
 * unter „Erst klären" steht. Eine Zeile, kein Formular: Das steht seit dem
 * 18.08. einmal im Block darüber statt viermal in der Liste. */
.fragen__notiz {
  margin: var(--s2) 0 0;
  font-size: var(--t-klein);
  color: var(--ink-2);
}

/* ── Der Fuß der Aufgabenkarte ────────────────────────────────────────────
 *
 * DER ANLASS (Sichtprüfung des Gründers, 30.08.2026): „Den Erledigt-Knopf
 * finde ich schlecht und extrem schlecht designt, auch wenn man darüber
 * hovert. Packt ihn nach rechts unten — die Karten so ähnlich im Stil wie die
 * von den Fördermöglichkeiten."
 *
 * WAS DER KNOPF VORHER WAR: das letzte Kind der Textspalte. Linksbündig unter
 * dem Aufklapper, ohne Absetzung, in der Flucht der Absätze darüber — ein
 * Schalter an der Stelle, an der das Auge den nächsten Satz erwartet. Und weil
 * er im Fluss stand, wanderte er beim Aufklappen unvorhersehbar weit nach
 * unten.
 *
 * DIE FORM IST GELIEHEN, NICHT ERFUNDEN: `.tkachel__fuss` weiter oben, der Fuß
 * der Förderkachel. Gleiche Aufteilung (Aufklapper links, Handlung rechts),
 * gleicher Grund, gleiche Trennlinie, gleiche Regel beim Aufklappen. Ein
 * Vorstand, der die Ergebnisseite des Förderchecks kennt, muss hier nichts
 * Neues lernen — und genau das war der Auftrag.
 *
 * DIE NEGATIVEN RÄNDER ziehen den Streifen bis an die Kartenkante; die Karte
 * gibt dafür ihren unteren Innenabstand ab. `--tr-innen` hält beide Werte
 * zusammen, damit der schmale Bildschirm (unten, `padding: var(--s4)`) nicht
 * einen Streifen erzeugt, der seitlich übersteht. */
/* `scroll-margin-top` wie bei `.block`: Nach dem Abhaken springt die Seite an
 * die Kennung dieser Karte zurück, und ohne das Maß läge ihre Überschrift unter
 * der klebrigen Kopfleiste. Derselbe Wert, derselbe Grund. */
.treffer--aufgabe {
  --tr-innen: var(--s5);
  padding-bottom: 0;
  scroll-margin-top: calc(var(--kopf-hoch) + var(--s4));
}

/* DER KASTEN SASS ZU HOCH (Sichtprüfung des Gründers, 30.08.2026: „den Kasten
 * vertikal mittiger").
 *
 * NACHGEMESSEN an der Karte „Datenschutzerklärung für die Vereins-Website":
 * über dem Titel 22 px, unter dem Zuständig-Kasten 34 px. Der Inhalt hing
 * sichtbar oben, obwohl die Karte symmetrisch aussehen sollte. Die 34 kamen aus
 * drei Quellen, die sich addierten und von denen keine falsch war: der untere
 * Rand des Kastens (12 px), der Zeilenabstand des Kartenrasters und der obere
 * Rand des Fußes.
 *
 * JETZT TRÄGT NUR DER FUSS DEN ABSTAND, und zwar genau den des oberen
 * Innenrands. Der Zeilenabstand des Rasters entfällt (er gilt weiterhin für die
 * Spalten — Punkt zu Text), und was zuletzt in der Textspalte steht, gibt
 * seinen unteren Rand ab. Oben 21, unten 21. */
.treffer--aufgabe { row-gap: 0; }
.treffer--aufgabe > div > :last-child { margin-bottom: 0; }
.treffer--aufgabe .aufgabe__fuss { margin-top: var(--tr-innen); }

/* Der Zustand an der Karte: „offen" oder „erledigt", oben rechts auf Höhe der
 * Überschrift. Werte und Farben sind die der Chips im Ergebnis — Amber heißt
 * überall „ihr seid dran", Grün „geht". Der Titel bekommt rechts Platz, damit
 * eine lange Überschrift nicht unter den Chip läuft. */
.treffer--aufgabe > div { position: relative; }
.treffer--aufgabe > div > h3 { padding-right: 5.5rem; }
.treffer__lage {
  position: absolute;
  top: 0;
  right: 0;
  font-size: var(--t-winzig);
  font-weight: 650;
  padding: .12rem .5rem;
  border-radius: var(--r-klein);
  background: var(--amber-hell);
  color: var(--amber);
}
.treffer__lage[data-erledigt="ja"] { background: var(--gruen-hell); color: var(--gruen); }

/* EINE ERLEDIGTE KARTE TRITT ZURÜCK, verschwindet aber nicht: Sie bleibt
 * lesbar und abrufbar — nur zieht sie das Auge nicht mehr an, wenn man die
 * Liste nach dem sucht, was noch offen ist. Kein Durchstreichen: Der Text gilt
 * weiter, erledigt ist die Handlung, nicht die Pflicht. */
.treffer--aufgabe[data-erledigt="ja"] { background: var(--grund); }
.treffer--aufgabe[data-erledigt="ja"] h3 { color: var(--ink-2); }
.treffer--aufgabe[data-erledigt="ja"] .treffer__punkt { background: var(--gruen); }
.treffer--aufgabe[data-erledigt="ja"] .aufgabe__fuss { background: transparent; }
.aufgabe__fuss {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s3);
  margin: var(--s4) calc(var(--tr-innen) * -1) 0;
  padding: .82rem var(--tr-innen);
  border-top: 1px solid var(--linie-2);
  background: var(--sand-hell);
  border-radius: 0 0 var(--r) var(--r);
}
/* Steht nur eines von beiden da, nimmt es die ganze Breite — der Knopf bleibt
   dabei rechts, sonst rutschte er bei einer Karte ohne Aufklapper nach links
   und stünde wieder da, wo er nicht hingehört. */
.aufgabe__fuss > :only-child { grid-column: 1 / -1; }
.aufgabe__fuss > .aufgabe__tat:only-child { justify-self: end; }
/* Aufgeklappt braucht der Text die ganze Breite, der Knopf rutscht darunter:
   erst lesen, dann handeln. Wortgleich die Regel der Förderkachel, und aus
   demselben gemessenen Grund — sonst bleibt dem Inhalt nur, was der Knopf
   übrig lässt. */
.aufgabe__fuss > .aufgabe__mehr[open] { grid-column: 1 / -1; }
.aufgabe__tat { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end; }
.aufgabe__tat form { margin: 0; }
/* Der Flexbau des Erledigt-Knopfs steht seit dem 30.08.2026 GLOBAL in
 * `button, .knopf` — in der zweiten, gewinnenden Regel, samt `gap: var(--tk-eng)`.
 *
 * Hier stand bis zum Merge derselbe Bau ein zweites Mal lokal. Zwei parallele
 * Sitzungen fanden am selben Tag denselben Kaskadenfehler, die eine über den
 * E-Mail-Knopf, die andere über das Häkchen im Erledigt-Knopf; eine löste ihn
 * global, die andere an genau dieser Stelle. Die lokale Fassung ist entfallen:
 * Sie hätte denselben Abstand ohne Grund mit einem zweiten Wert überschrieben
 * (`--s2`, zufällig ebenfalls .5rem — die Gleichheit ist nicht zugesichert).
 *
 * Wer hier wieder `display` braucht, sieht zuerst nach, ob die globale Regel
 * noch `inline-flex` trägt. In einem Inline-Block wirkt `gap` nicht, und zwar
 * ohne jede Fehlermeldung. */

/* Der aufklappbare Teil einer Pflicht (18.08.). Er trägt bewusst KEINEN
 * eigenen Rahmen: Die Aufgabenkarte ist schon ein Kasten, ein zweiter darin
 * wäre der Kasten im Kasten, den die Kachelform anderswo gerade vermeidet.
 * Die Linie darüber trennt Auskunft (oben) von Begründung (aufgeklappt). */
.aufgabe__mehr { margin: var(--s3) 0 0; }
/* Im Fuß trägt der Streifen den Abstand, der Aufklapper braucht keinen
   eigenen mehr — sonst stünde die Zusammenfassung tiefer als der Knopf daneben. */
.aufgabe__fuss > .aufgabe__mehr { margin-top: 0; }
.aufgabe__mehr > summary {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 2.75rem;
  font-size: var(--t-klein);
  font-weight: 650;
  color: var(--akzent);
  cursor: pointer;
  list-style: none;
}
.aufgabe__mehr > summary::-webkit-details-marker { display: none; }
.aufgabe__mehr > summary::after { content: "▾"; color: var(--ink-3); }
.aufgabe__mehr[open] > summary::after { content: "▴"; }
.aufgabe__mehr[open] > summary { border-bottom: 1px solid var(--linie); margin-bottom: var(--s3); }

/* Der Vorhabentitel in der Liste: eine Schaltfläche, kein Textlink.
 * `inline-flex` mit `min-height` bringt ihn auf die 44 px, die jedes Klickziel
 * dieser Fassung hat — als reiner Text waren es 21. */
.vorhabenlink {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 2.75rem;
  padding: var(--s2) var(--s3);
  margin-left: calc(var(--s3) * -1);
  border-radius: var(--r-klein);
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
}
/* Der Pfeil sagt „führt weiter" — dasselbe Zeichen wie auf den Mappenkacheln.
 * Fünf Zeilen mit fünf gerahmten Knöpfen wären unruhiger als die Tabelle, die
 * sie tragen soll; ein Zeichen aus dem eigenen Bestand reicht und ist das
 * Muster, das der Verein von der Mappe schon kennt. */
.vorhabenlink::after {
  content: "→";
  color: var(--ink-3);
  font-weight: 400;
  transition: transform .12s ease;
}
.vorhabenlink:hover,
.vorhabenlink:focus-visible { background: var(--schiefer-hell); color: var(--akzent); }
.vorhabenlink:hover::after { color: var(--akzent); transform: translateX(2px); }

/* Auswahl und Knopf nebeneinander statt untereinander: Die Statuszeile war
 * dadurch doppelt so hoch wie ihr Inhalt und zog jede Tabellenzeile mit. */
.standform {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
}
.standform select { width: auto; min-width: 9rem; }
.standform button { white-space: nowrap; }

/* Zwei Formulare nebeneinander, jedes als eigener Block mit seinem Knopf
 * darunter (18.08.). Vorher lief alles in einer Reihe, und die zwei Knöpfe
 * „Übernehmen" ließen sich keinem der Felder zuordnen — eine Kette aus fünf
 * gleichrangigen Elementen, von denen zwei etwas anderes tun.
 *
 * `align-items: stretch` hebt das `flex-end` der Reihe darüber auf: Die
 * Formulare sollen gleich hoch anfangen, nicht auf ihrer letzten Zeile
 * stehen. */
.formreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5) var(--s6);
  align-items: stretch;
}
/* `space-between` drückt beide Knöpfe an den unteren Rand ihres Formstücks.
 * Weil die Reihe die Stücke auf gleiche Höhe zieht, stehen die Knöpfe damit
 * auf EINER Linie — sonst hinge der eine 50 px über dem anderen, nur weil sein
 * Hilfetext eine Zeile kürzer ist. */
.formreihe .formstueck {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  flex: 1 1 18rem;
}
.formreihe .formstueck .feld { width: 100%; }
/* Beginn und Ende gehören zusammen — nebeneinander, gleich breit. */
.feldpaar { display: flex; gap: var(--s3); width: 100%; }
.feldpaar .feld { flex: 1 1 0; margin: 0; }
.knopfreihe form { margin: 0; }

.liste { margin: var(--s3) 0 0; padding-left: 1.1rem; }
.liste li { margin-bottom: .3rem; font-size: var(--t-klein); }

/* ---- Anlege-Interview: Beispiele, Kurzhinweis, Wahl ----------------------
 *
 * Der Auftrag dahinter (Gründer, 17.08.): Der Verein soll erfahren, was mit
 * einem Vorhaben möglich ist — aber nirgends als Textwand. Deshalb drei
 * anklickbare Beispiele im Leerzustand, Chips über dem Feld und ein
 * Aufklapper, der auch bei voller Liste stehen bleibt. */
.anlass {
  display: block;
  padding: var(--s4);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--grund);
  text-decoration: none;
  color: var(--ink);
}
.anlass:hover { border-color: var(--akzent); background: var(--karte); }
.anlass .kachel__titel { margin-top: 0; }

/* Als Chip ist der Anlass ein LINK, nicht nur eine Marke — deshalb Zeiger und
 * eine sichtbare Reaktion. */
a.chip { text-decoration: none; }
a.chip:hover { border-color: var(--akzent); color: var(--akzent-tief); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); }

.kurzhinweis { margin-top: var(--s3); font-size: var(--t-klein); }
.kurzhinweis > summary {
  cursor: pointer;
  color: var(--akzent-tief);
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.kurzhinweis > p { margin: var(--s2) 0 0; color: var(--ink-2); max-width: 46rem; }

/* ---- Der Hinweis oben rechts an einer Karte -------------------------------
 *
 * Anlass: „Für die To-Do-List beim neuen Vorhaben anlegen soll ein Hinweis
 * kommen, oben rechts, den man anklicken kann" (Gründer, 21.08.2026).
 *
 * `.karte__kopf` ist die Kopfzeile einer Karte und reiht sich in die Familie
 * ein, die es längst gibt — `.aktionskarte__kopf`, `.block__kopf`,
 * `.tkachel__kopf`, `.tafel__kopf`. Sie ist keine neue Bauform, sondern das
 * fehlende Glied: eine Überschrift links, eine Nebensache rechts.
 *
 * `align-items: flex-start` und nicht `center`: Der Kasten wächst beim
 * Aufklappen nach unten. Mittig ausgerichtet rutschte die Überschrift daneben
 * mit nach unten — derselbe Fehler wie bei `.seitenkopf--mit-aktion`, wo
 * `flex-end` die Knöpfe in den Absatz schob, sobald der Text länger wurde.
 *
 * `flex-wrap: wrap`: Auf dem Telefon passen Überschrift und Hinweis nicht in
 * eine Zeile. Dann steht er unter der Überschrift statt gequetscht daneben —
 * „oben rechts" ist eine Anweisung für den Laptop, auf 375 px gibt es kein
 * Rechts.
 *
 * DER AUFGEKLAPPTE KASTEN BEKOMMT EIN MASS. Ohne `max-width` zöge sein Text
 * die Flexspalte auf die halbe Karte und schöbe die Überschrift zusammen; mit
 * `--spalte` bleibt er lesbar und die Überschrift, wo sie war. */
.karte__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
}
.karte__kopf > h2 { margin-bottom: 0; }

.kurzhinweis[data-lage="rechts"] {
  margin-top: 0;
  max-width: min(100%, var(--spalte));
}
/* Rechtsbündig, solange er zugeklappt neben der Überschrift steht. Bricht er
   auf eine eigene Zeile um, ist er der einzige Inhalt darin und steht ohnehin
   links — dann wäre eine rechte Beschriftung über einer linken Liste die
   unruhigere Lösung. */
.kurzhinweis[data-lage="rechts"] > summary { justify-content: flex-end; text-align: right; }
.kurzhinweis[data-lage="rechts"][open] > summary { justify-content: flex-start; text-align: left; }

/* Die ausgezählten Angaben. Zwei Zeilen je Eintrag — Name mit Häufigkeit,
   darunter das Beispiel —, deshalb Abstand ZWISCHEN den Einträgen statt
   Zeilenabstand innerhalb. */
.kurzhinweis > ul { margin: var(--s2) 0 0; padding-left: 1.1rem; color: var(--ink-2); max-width: 46rem; }
.kurzhinweis > ul > li { margin-bottom: var(--s2); line-height: 1.5; }
.kurzhinweis > ul > li:last-child { margin-bottom: 0; }
.kurzhinweis > ul > li > b { color: var(--ink); }

/* Die drei Häkchen des Interviews tragen je einen Begründungssatz — deshalb
 * oben ausgerichtet statt mittig, sonst schwebt das Kästchen neben zwei
 * Zeilen in der Luft. */
fieldset.feld { border: none; margin: 0; padding: 0; }
fieldset.feld > legend { font-weight: 650; margin-bottom: var(--s2); padding: 0; }

/* Die Bereiche eines Vorhabens: zwei Spalten statt dreizehn Zeilen.
 *
 * Untereinander wären sie eine halbe Bildschirmhöhe für eine einzige Frage —
 * dieselbe Überlegung wie bei den Sparten des Vereinsprofils. Unter 34rem
 * bricht das Raster auf eine Spalte um, weil zwei zu schmale Spalten schlechter
 * sind als eine lange Liste. */
.kreuze {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0 var(--s4);
}
.wahl > span { display: block; }
.wahl__grund { display: block; font-size: var(--t-klein); color: var(--ink-3); }
.wahl:has(.wahl__grund) { align-items: flex-start; padding: var(--s2) 0; }
/* Der Verweis auf die bestehende Datenschutz-Mappe ist ein ABSATZ, kein
 * Ankreuzfeld — und `.wahl` ist display:flex.
 *
 * DER BEFUND (Sichtprüfung 17.08.): Ohne diese Zeile werden die drei
 * Textstücke des Absatzes („Datenschutz führt ihr schon an einer Stelle:", der
 * Link, der Nachsatz) zu drei Flex-Spalten nebeneinander. Genau so stand es
 * live, und der Gründer las daraus nicht mehr heraus, wo der Datenschutz ist.
 *
 * min-height zurück auf 0: Die 44 px sind die Klickfläche eines
 * Ankreuzfelds. Ein Absatz braucht sie nicht und bekommt sonst eine
 * Leerzeile untergeschoben. */
.wahl--verweis {
  display: block;
  min-height: 0;
  padding: var(--s2) 0;
  font-size: var(--t-klein);
  color: var(--ink-2);
}

@media (max-width: 700px) {
  .seitenkopf--mit-aktion { align-items: flex-start; flex-direction: column; gap: .8rem; }
  .formular-abschluss { align-items: stretch; flex-direction: column; gap: var(--s3); padding: var(--s3); }
  .formular-abschluss__knoepfe { flex-direction: column; align-items: stretch; }
  .formular-abschluss button { width: 100%; }
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================ Sperrbalken und Abschickstrecke
 *
 * BAUSTEIN 4 UND 5 des Programms „Antrag absendebereit" (19.08.2026).
 *
 * DER SPERRBALKEN steht unmittelbar über dem Erzeugen-Knopf und nirgends sonst.
 * Die Abschlussprüfung sagt dasselbe ausführlicher, nur zwei Bildschirmhöhen
 * weiter oben — und die Entscheidung fällt am Knopf. Er trägt keine eigene
 * Farbe, sondern die beiden, die im ganzen Werkzeug dasselbe bedeuten: Amber
 * heißt „ihr seid dran", nicht „Fehler".
 *
 * DIE STRECKE ist eine nummerierte Liste und bewusst keine Kachelreihe: Es sind
 * Schritte in einer Reihenfolge, und die Reihenfolge ist die Auskunft. Die
 * Ziffern kommen aus dem CSS-Zähler statt aus dem Markup — im HTML steht die
 * Nummer schon in den Daten, doppelt gesetzt liefe sie irgendwann auseinander.
 */
.sperrbalken {
  margin: var(--s4) 0 .8rem;
  padding: .85rem 1.1rem;
  border-left: 3px solid var(--amber);
  border-radius: var(--r-klein);
  background: var(--amber-hell);
  color: var(--ink);
  font-size: var(--t-klein);
  line-height: 1.5;
}
.sperrbalken[data-art="handarbeit"] { border-left-color: var(--akzent); background: var(--akzent-hell); }
.sperrbalken strong { display: block; margin-bottom: .15rem; }
.sperrbalken a { color: inherit; }

.strecke {
  list-style: none;
  counter-reset: strecke;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.strecke > li {
  counter-increment: strecke;
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
}
.strecke > li::before {
  content: counter(strecke);
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--akzent-hell);
  color: var(--akzent-tief);
  font-size: .85rem;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}
/* ALLES AUSSER DER ZIFFER GEHÖRT IN DIE TEXTSPALTE (Befund Lauf 2 B13,
   19.08.2026). Das Raster hat zwei Spalten, ein Streckenpunkt aber drei
   Kinder: ::before mit der Ziffer, <b> mit dem Titel, <span> mit dem Text.
   Ohne diese Zeile setzt die automatische Platzierung das dritte Kind in die
   nächste Zeile und dort in die ERSTE Spalte — 1,9 rem breit. Auf dem
   Bildschirm des Testlaufs stand der Text daraufhin senkrecht, ein Wort je
   Zeile, während rechts zwei Drittel der Karte leer blieben.
   Die Regel gilt für jedes Kind, nicht für b und span einzeln: Ein viertes
   Element soll nicht wieder in die Ziffernspalte rutschen können. */
.strecke > li > * { grid-column: 2; min-width: 0; }
/* Der eine Schritt, der kein Schritt ist: Solange etwas offen ist, gibt es
   nichts abzuschicken. Er trägt deshalb den Vorbehaltston statt der Zählfarbe. */
.strecke > li[data-art="unfertig"]::before { background: var(--amber-hell); color: var(--amber); }
.strecke > li b { display: block; margin-bottom: .1rem; font-weight: 680; }
.strecke > li span { color: var(--ink-2); font-size: var(--t-klein); line-height: 1.55; }

/* ═══════════════════════════════════════════════════════════════════════════
   DIE ERKLÄRUNG — die Einführung beim ersten Einloggen
   Entwurf: docs/superpowers/specs/2026-08-21-erklaerung-startseite-design.md

   Ein Bauteil an zwei Plätzen. Oben ruft es (goldener Balken, leuchtet), unten
   steht es bereit (ruhige Zeile). Was wo steht, entscheidet der Server; hier
   steht nur, wie laut es jeweils ist.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Der Balken: Zustand „noch nie gesehen" ─────────────────────────────── */

.erklaerung-balken {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin: 0 0 var(--s5);
  padding: var(--s4) var(--s5);
  min-height: var(--klickziel);
  border: 1px solid var(--gold-linie);
  /* Die tragende Kante links, wie beim Hinweiskasten: Sie hält den Balken auch
     dann als Einheit zusammen, wenn das Aufleuchten vorbei ist. */
  border-left-width: 4px;
  border-radius: var(--r-klein);
  background: var(--gold-hell);
  color: var(--ink);
  text-decoration: none;
}

.erklaerung-balken__text { flex: 1; min-width: 0; }
.erklaerung-balken__text strong { display: block; font-weight: 700; }

.erklaerung-balken__pfeil::after {
  content: "›";
  font-size: 1.6rem;
  line-height: .7;
  color: var(--gold-linie);
}

.erklaerung-balken:hover,
.erklaerung-balken:focus-visible { border-color: var(--ink-2); }
.erklaerung-balken:hover .erklaerung-balken__pfeil::after { color: var(--ink-2); }

/* DAS AUFLEUCHTEN HÖRT AUF. Drei Durchläufe, dann Ruhe — ein dauerhaft
   pulsierender Kasten ist nach zehn Sekunden nur noch Lärm, und danach sieht
   ihn niemand mehr, auch nicht beim ersten Mal.
   Es liegt auf box-shadow und nicht auf der Fläche: Die Fläche trägt den Text,
   und Text auf wechselndem Grund ist beim Lesen anstrengend. */
@keyframes erklaerung-leuchten {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 165, 95, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(201, 165, 95, .35); }
}

@media (prefers-reduced-motion: no-preference) {
  .erklaerung-balken { animation: erklaerung-leuchten 1.6s ease-in-out 3; }
}

/* ── Die Zeile: Zustand „schon gesehen" ─────────────────────────────────── */

.erklaerung-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
  margin: var(--s6) 0 0;
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--linie-2);
  border-radius: var(--r-klein);
}

.erklaerung-zeile a { font-weight: 600; }

/* HIER IST ER HINGEWANDERT. Nach dem „Verstanden" springt der Browser auf
   #erklaerung, und diese eine Markierung sagt: genau das ist die Zeile, die eben
   noch oben stand. Sie läuft EINMAL und verklingt — :target gilt, solange die
   Adresse steht, eine Dauermarkierung wäre also die Folge.
   Ohne dieses Zeichen sähe der Sprung nach einem Fehler aus. */
@keyframes erklaerung-angekommen {
  from { background: var(--gold-hell); }
  to   { background: transparent; }
}

.erklaerung-zeile:target { animation: erklaerung-angekommen 2.4s ease-out 1; }

@media (prefers-reduced-motion: reduce) {
  .erklaerung-zeile:target { animation: none; background: var(--gold-hell); }
}

/* ── Das Panel ──────────────────────────────────────────────────────────── */

.erklaerung {
  margin: 0 0 var(--s5);
  padding: var(--s5) var(--s6) var(--s6);
  border: 1px solid var(--gold-linie);
  border-radius: var(--r);
  background: var(--karte);
  box-shadow: var(--schatten);
}

/* Aus der Zeile am Seitenende aufgeklappt steht das Panel UNTEN und braucht
   Luft nach oben statt nach unten. */
.erklaerung[data-stand="gesehen"] { margin: var(--s6) 0 0; }

.erklaerung__kopf { margin-bottom: var(--s5); }
.erklaerung__kopf h2 { margin: 0; font-family: var(--disp); font-size: var(--t-titel); }

/* Die Rubrik ist eine Zwischenüberschrift, kein Titel: klein, gesperrt, leise.
   Dieselbe Form wie .ueberzeile — der Verein soll sie nicht neu lernen. */
.erklaerung__rubrik {
  margin: var(--s6) 0 var(--s3);
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: var(--t-winzig);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.erklaerung__kopf + .erklaerung__rubrik { margin-top: 0; }

/* ── Die Landkarte ──────────────────────────────────────────────────────── */

.erklaerung__orte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.erklaerung__ort {
  padding: var(--s4);
  border: 1px solid var(--linie-2);
  border-radius: var(--r-klein);
  background: var(--grund);
}

.erklaerung__ort b { display: block; margin-bottom: var(--s1); font-weight: 680; }
.erklaerung__ort span { color: var(--ink-2); font-size: var(--t-klein); }

/* ── Der Handgriff: der eine Punkt, der offen steht ─────────────────────── */

.erklaerung__handgriff {
  margin: var(--s6) 0 0;
  padding: var(--s5);
  border-left: 4px solid var(--gold-linie);
  border-radius: var(--r-klein);
  background: var(--gold-hell);
}

.erklaerung__handgriff h3 {
  margin: 0 0 var(--s2);
  font-family: var(--sans);
  font-size: var(--t-basis);
  font-weight: 700;
}

.erklaerung__handgriff p { margin: 0; max-width: var(--spalte); }

/* ── Die nummerierten Punkte ────────────────────────────────────────────── */
/* Dieselbe Ziffernform wie .strecke an der Antragsseite. Sie sind zugleich die
   Ziffern, die in Stufe 2 an den roten Pfeilen auf dem Bild stehen — deshalb
   zählen sie inhaltlich und nicht bloß der Ordnung halber. */

.erklaerung__punkte {
  display: grid;
  gap: var(--s3);
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: erklaerung;
}

.erklaerung__punkte > li {
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  gap: var(--s3);
  align-items: start;
  max-width: var(--spalte);
  color: var(--ink-2);
  font-size: var(--t-klein);
}

.erklaerung__punkte > li::before {
  counter-increment: erklaerung;
  content: counter(erklaerung);
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--akzent-hell);
  color: var(--akzent-tief);
  font-size: .85rem;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

/* Im Goldkasten trägt die Ziffer den Goldton — sonst stünde mitten in der
   warmen Fläche ein grüner Kreis ohne Anlass. */
.erklaerung__handgriff .erklaerung__punkte > li::before {
  background: var(--weiss);
  color: var(--gold-linie);
}

.erklaerung__handgriff .erklaerung__punkte > li { color: var(--ink); }

/* ── Die Vertiefungen ───────────────────────────────────────────────────── */

.erklaerung__tiefer { border-top: 1px solid var(--linie-2); }

.erklaerung__auf { border-bottom: 1px solid var(--linie-2); }

.erklaerung__auf > summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--klickziel);
  padding: var(--s2) 0;
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.erklaerung__auf > summary::-webkit-details-marker { display: none; }

.erklaerung__auf > summary::before {
  content: "›";
  color: var(--akzent);
  font-size: 1.4rem;
  line-height: .8;
  transition: transform .16s ease;
}

.erklaerung__auf[open] > summary::before { transform: rotate(90deg); }
.erklaerung__auf > summary:hover,
.erklaerung__auf > summary:focus-visible { color: var(--akzent); }

@media (prefers-reduced-motion: reduce) {
  .erklaerung__auf > summary::before { transition: none; }
}

/* Der Inhalt steht auf der Kante des Wortes im Aufklapper, nicht auf der des
   Pfeils davor — sonst hinge er einen Zentimeter zu weit links. */
.erklaerung__aufinhalt {
  margin: 0 0 var(--s4);
  padding-left: calc(1.4rem + var(--s3));
}

.erklaerung__aufinhalt > p {
  margin: 0;
  max-width: var(--spalte);
  color: var(--ink-2);
  font-size: var(--t-klein);
}

.erklaerung__aufinhalt > .erklaerung__punkte { margin-top: var(--s3); }
.erklaerung__aufinhalt > .erklaerung__punkte + p { margin-top: var(--s4); }

/* ── Die sechs Ergebnis-Überschriften ───────────────────────────────────── */
/* Begriff und Erklärung als Paare: dt trägt die Überschrift, wie sie auf der
   Ergebnisseite steht, dd den Halbsatz dazu. Beide kommen aus BLOECKE. */

.erklaerung__bloecke {
  display: grid;
  grid-template-columns: minmax(11rem, auto) 1fr;
  gap: var(--s2) var(--s4);
  margin: var(--s4) 0 0;
}

.erklaerung__bloecke dt {
  font-size: var(--t-klein);
  font-weight: 680;
}

.erklaerung__bloecke dd {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-klein);
}

/* Auf schmalen Bildschirmen stünde die Überschrift sonst in einer 11rem-Säule
   und der Satz daneben als Wortkette. Untereinander bleibt beides lesbar. */
@media (max-width: 40rem) {
  .erklaerung__bloecke { grid-template-columns: 1fr; gap: var(--s1); }
  .erklaerung__bloecke dd { margin-bottom: var(--s3); }
}

/* ── Der Abschluss ──────────────────────────────────────────────────────── */

.erklaerung__abschluss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s6);
}

.erklaerung__abschluss form { margin: 0; }

/* ── Die Bilder in der Erklärung ─────────────────────────────────────────────── */
/* Ein Foto der echten Oberfläche, darüber rote Pfeile mit Ziffern. Die Ziffern
   stehen in einer Rinne LINKS NEBEN dem Bild — sie gehört zum Auftrag, nicht
   zur Aufnahme (siehe scripts/erklaerung-bilder.mjs). Deshalb ist das Bild um
   die Rinnenbreite eingerückt und das SVG liegt über beidem. */

.erklaerung-bild {
  --rinne: 46px;
  position: relative;
  /* FIT-CONTENT, damit ein schmales Bild nicht aufgeblasen wird. Der
     Ergebnis-Kasten ist 306 Pixel breit; auf die volle Panelbreite gezogen war
     er unscharf und dreimal so groß wie im Original. Jetzt behält jede
     Aufnahme ihre Größe und schrumpft nur, wenn der Platz nicht reicht. */
  width: fit-content;
  max-width: 100%;
  margin: var(--s4) 0 0;
  padding-left: var(--rinne);
}

.erklaerung-bild img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--linie-2);
  border-radius: var(--r-klein);
  /* Der Grund der aufgenommenen Seite ist derselbe wie hier — ohne diese Fläche
     blitzt beim Laden die Kartenfarbe durch die noch leere Bildfläche. */
  background: var(--grund);
}

/* GENAU AUF DEM BILD, nicht auf dem ganzen <figure>: Nur so haben Auftrag und
   Aufnahme dasselbe Seitenverhältnis, und nur dann zeigen die Pfeile auch dann
   noch richtig hin, wenn das Bild kleingerechnet wird. Die Ziffern ragen über
   den linken Rand hinaus (negative x-Werte) — dafür `overflow: visible`, und
   der Platz dafür kommt aus dem Innenabstand des <figure>.
   `pointer-events: none`, weil darunter nichts anklickbar ist und ein
   unsichtbarer Deckel über einem Bild sonst die Textauswahl schluckt. */
.erklaerung-bild__marken {
  position: absolute;
  top: 0;
  left: var(--rinne);
  width: calc(100% - var(--rinne));
  height: 100%;
  overflow: visible;
  pointer-events: none;
  color: var(--pfeil);
}

.erklaerung-bild__pfeil {
  stroke: var(--pfeil);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.erklaerung-bild__scheibe { fill: var(--pfeil); }

/* Die Ziffer ist echter Text im SVG: vorlesbar, scharf in jeder Vergrößerung,
   in einer Zeile korrigierbar. Eingebrannt wäre sie nichts davon. */
.erklaerung-bild__ziffer {
  fill: var(--weiss);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}

/* BESCHNITTEN HEISST: unten geht es weiter. Die Lotsenseiten sind mehrere
   tausend Pixel lang; gezeigt wird der obere Teil. Ohne dieses Ausblenden
   endete das Bild mitten im Wort, und eine harte Kante mitten im Satz liest
   sich wie ein Fehler statt wie eine Fortsetzung. */
/* `black` ist hier KEINE Farbe im Sinne des Designsystems: Eine Maske wertet
   nur die Deckkraft aus, sichtbar wird davon nichts. Ein Token dafür wäre eine
   Gestaltungsentscheidung, die es nicht gibt — als Hex-Wert notiert meldete es
   zu Recht der Wächter in test/stil-system.test.mjs, und der liest auch
   Kommentare mit: Das Schlüsselwort steht hier deshalb ausgeschrieben. */
.erklaerung-bild[data-beschnitten="ja"] img {
  -webkit-mask-image: linear-gradient(to bottom, black 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 72%, transparent 100%);
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Auf schmalen Bildschirmen ist die Rinne teurer als sie wert ist: Sie nimmt
   ein Sechstel der Breite, und das Bild wird darunter unlesbar klein. Dann
   rückt der Auftrag über das Bild — die Ziffern liegen auf der Aufnahme, was
   bei dieser Größe ohnehin die übliche Bauform ist. */
@media (max-width: 40rem) {
  .erklaerung-bild { --rinne: 26px; }
}

/* Die Ziffer vor einer Ergebnis-Überschrift — dieselbe Nummer wie am Pfeil im
   Bild darüber. Kleiner als die Ziffern der Punkteliste, weil sie hier vor
   einer Zeile steht und nicht vor einem Absatz. */
.erklaerung__ziffer {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-right: var(--s2);
  border-radius: 50%;
  background: var(--pfeil-hell);
  color: var(--pfeil);
  font-size: var(--t-winzig);
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  vertical-align: baseline;
}

.erklaerung__bildstand {
  margin: var(--s5) 0 0;
  color: var(--ink-3);
  font-size: var(--t-winzig);
}

/* Die Ziffern der Liste tragen die Farbe der Pfeile im Bild darüber — sonst
   trüge dieselbe Nummer zwei Farben, und der Leser müsste erst prüfen, ob damit
   wirklich dasselbe gemeint ist. Ohne Bild gibt es nichts zuzuordnen, dann
   bleibt es beim Hausgrün. */
.erklaerung__punkte[data-zu-bild="ja"] > li::before,
.erklaerung__handgriff .erklaerung__punkte[data-zu-bild="ja"] > li::before {
  background: var(--pfeil-hell);
  color: var(--pfeil);
}

/* Der Schlusssatz fluchtet mit dem TEXT der nummerierten Zeilen darüber, nicht
   mit deren Ziffern. Ohne diese Einrückung begann er einen Zentimeter weiter
   links als alles, worauf er sich bezieht — zwei Textkanten in einem Block,
   und das Auge liest ihn als etwas Eigenes statt als Fortsetzung. */
.erklaerung__punkte + p {
  margin-top: var(--s4);
  padding-left: calc(1.9rem + var(--s3));
}

/* ================================ Ampel und Zahlzeilen (Fördertöpfe) */

/* DIE AMPEL IN DER TAFEL (Gründerentscheid 29.08.2026): „verwende dort
 * ampelfarben und signalfarben. grün was geht, gelb was möglich, rot was
 * nicht."
 *
 * Vorher trugen die Punkte `--gruen`, `--amber` und `--akzent` — zwei davon
 * Grüntöne, die Verschiedenes meinten. Auf einer Tafel, die Mengen
 * untereinanderstellt, war das die Unübersichtlichkeit, die er gemeldet hat.
 *
 * EIGENE WERTE UND NICHT DIE PALETTE DER SEITE: Ein Signal soll auffallen und
 * sich nicht einfügen. Die drei sind gegen den Kartengrund auf
 * Kontrast geprüft; die Bedeutung trägt ohnehin der Text daneben, die Farbe
 * beschleunigt nur das Finden. */
.sprung[data-ton="gruen"] .sprung__punkt { background: var(--ampel-gruen); }
.sprung[data-ton="gelb"]  .sprung__punkt { background: var(--ampel-gelb); }
.sprung[data-ton="rot"]   .sprung__punkt { background: var(--ampel-rot); }
.sprung[data-ton="grau"]  .sprung__punkt { background: var(--ampel-grau); }
/* ZWEI STUFEN KAMEN AM 30.08.2026 DAZU, als der Ergebniskasten des Vorhabens
 * von der Palette auf diese Ampel umgestellt wurde. Er führt sechs Zeilen, wo
 * der Radar vier führt:
 *   hellgrün — es liegt an euch, danach ist es grün („Voraussetzung fehlt noch")
 *   salbei   — geht, aber nicht für dieses Vorhaben („Für den Verein selbst")
 * Salbei ist die einzige Nicht-Ampelfarbe hier, und mit Absicht: Der Block
 * beschreibt keinen Reifegrad, sondern einen anderen ORT. Er ist dieselbe
 * Farbe, die die Kachel dieser Treffer trägt (`.tkachel__lage`). */
.sprung[data-ton="hellgruen"] .sprung__punkt { background: var(--ampel-hellgruen); }
.sprung[data-ton="salbei"]    .sprung__punkt { background: var(--salbei); }
/* Und eine siebte am 12.09.2026, aus demselben Grund wie Salbei:
 *   bronze — ausgeschlossen, aber vom Verein selbst („Das habt ihr
 *            ausgeschlossen"). Rot hieße endgültig, und das ist es gerade
 *            nicht — die Antwort steht an der Karte und ist dort geändert. */
.sprung[data-ton="bronze"]    .sprung__punkt { background: var(--bronze); }

/* DIE ZWEI ZAHLZEILEN AM FUSS DER SEITE.
 *
 * Sie sind bewusst KEINE Karten und KEIN Aufklapper: Was hier steht, soll
 * gezählt und nicht angesehen werden („diese soll man allerdings nicht
 * anschauen dürfen"). Deshalb kein Rahmen, kein Schatten, kein Klickziel —
 * eine Zeile mit einem Signalpunkt davor. */
.zahlzeilen { margin-top: var(--s7); border-top: 1px solid var(--linie); padding-top: var(--s5); }
.zahlzeile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--s3);
  align-items: baseline;
  padding: var(--s3) 0;
}
.zahlzeile + .zahlzeile { border-top: 1px solid var(--linie-2); }
.zahlzeile__punkt {
  width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--linie); align-self: center;
}
.zahlzeile[data-ampel="grau"] .zahlzeile__punkt { background: var(--ampel-grau); }
.zahlzeile[data-ampel="rot"]  .zahlzeile__punkt { background: var(--ampel-rot); }
.zahlzeile__kopf { margin: 0; font-size: var(--t-basis); color: var(--ink); }
.zahlzeile__kopf b { font-variant-numeric: tabular-nums; }
.zahlzeile__satz {
  grid-column: 2;
  margin: .15rem 0 0;
  font-size: var(--t-klein);
  color: var(--ink-2);
  max-width: var(--spalte);
}

/* DER HEBEL ALS ZEILE (29.08.2026, Muster A).
 *
 * Vorher ein grau umrandeter Kasten mit vier Textebenen — Überschrift,
 * Vorsatz, je Hebel ein Absatz mit Trennlinie — für oft genau einen Satz. Der
 * Befund des Gründers: „finde ich ist hässlich designt". Die Verpackung war
 * größer als der Inhalt.
 *
 * Jetzt: ein Signalstrich links, eine Zeile, eine Liste. Dieselbe Bauart wie
 * eine Warnzeile auf der Karte — und das ist die richtige Verwandtschaft, denn
 * es IST ein Hinweis und keine Rubrik. */
.hebelzeile {
  border-left: 3px solid var(--ampel-gelb);
  background: var(--amber-hell);
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--s3) var(--s4);
  margin: 0 0 var(--s4);
}
.hebelzeile__kopf {
  display: flex; align-items: center; gap: .45rem;
  margin: 0; font-weight: 650; font-size: var(--t-klein); color: var(--amber);
}
.hebelzeile__kopf svg { width: 1rem; height: 1rem; flex: none; }
.hebelzeile__liste {
  margin: .35rem 0 0; padding-left: 1.15rem;
  font-size: var(--t-klein); color: var(--ink);
}
.hebelzeile__liste li + li { margin-top: .25rem; }
/* Befund 5 vom Durchklicken (Muster B, 21.09.2026): Der Hinweis nennt die
 * Karten, für die er gilt, und die übrigen stehen hinter einer Trennlinie. */
.hebelzeile__fuer { display: block; margin-top: .2rem; color: var(--ink-2); }
/* Befund 13 Teil 2 (Muster A, 21.09.2026): der Lotse unter einer
 * ungewöhnlichen Anlage — bei wem ihr sie bekommt, mit Link. */
.lotse { display: block; margin-top: .2rem; font-size: var(--t-klein); color: var(--ink-2); }
/* Befund 12 (Muster B2, 21.09.2026): Rückfragen nach Ort gruppiert, je Punkt
 * der Weg zum Feld, und im Gespräch die Rückfrage über ihrem Feld. */
.luecken-gruppe { margin-top: var(--s4); }
.luecken-gruppe__kopf { font-weight: 650; margin: 0 0 .3rem; }
.luecken-gruppe li + li { margin-top: .6rem; }
.luecke-ziel { display: inline-block; margin-top: .25rem; font-weight: 600; }
.luecke-am-feld {
  border-left: 3px solid var(--ampel-gelb); background: var(--amber-hell);
  border-radius: 0 var(--r) var(--r) 0; padding: .6rem .9rem; margin: var(--s3) 0 var(--s2);
  font-size: var(--t-klein);
  max-width: none; /* fluchtet mit dem Eingabefeld darunter */
}
.block__trenner { border: 0; border-top: 1px solid var(--linie); margin: var(--s5) 0 var(--s4); }
.block__trenntext { font-size: var(--t-klein); color: var(--ink-3); margin: 0 0 var(--s3); }
.hebelzeile__vor {
  margin: .4rem 0 0; font-size: var(--t-winzig); color: var(--ink-2);
}

/* ═══════════════════════════════════════════ Die Kontaktstrecke ═════════ */

/*
 * DIE SEITE, DIE „ANRUF VORBEREITEN" ABGELÖST HAT (30.08.2026).
 *
 * Sein Befund zum ersten Muster: „dort ist als Kontakt nichts hinterlegt, nur
 * ein riesiger Textblock, das lässt uns unseriös bzw. lachhaft wirken." Die
 * Antwort darauf steht nicht hier, sondern in server/seiten-kontakt.mjs: Die
 * rohe Freitextzeile wird nicht mehr angezeigt. Was hier steht, ist die Form
 * für das, was übrig bleibt — benannte Zeilen, eine je Angabe.
 */

.strecke__teil { margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--linie-2); }
.strecke__teil:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.strecke__teil > h2 {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1.125rem; margin: 0 0 .75rem;
}
.strecke__vor { color: var(--ink-2); margin: 0 0 1rem; }
.strecke__hinweis {
  display: flex; align-items: flex-start; gap: .5rem;
  background: var(--schiefer-hell); border-radius: .5rem; padding: .75rem 1rem; margin: 0;
}
.strecke__knopf { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin: 0 0 .5rem; }
.strecke__preis, .strecke__bald { color: var(--ink-3); font-size: .9375rem; }
.strecke__bald { margin: 0; }
.strecke__rueckweg { margin-top: 2rem; }
.strecke__hilfe { list-style: none; padding: 0; margin: .5rem 0; }
.strecke__hilfe li { padding-left: 1.25rem; position: relative; }
.strecke__hilfe li::before { content: "✓"; position: absolute; left: 0; color: var(--gruen); font-weight: 700; }

/* ── Ein Kontakt ───────────────────────────────────────────────────────── */

.kontakt {
  border: 1px solid var(--linie); border-radius: .5rem;
  padding: .875rem 1.125rem; margin-bottom: .75rem; background: var(--karte);
}
.kontakt__rolle {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3); margin: 0 0 .15rem;
}
.kontakt__name { font-size: 1rem; margin: 0 0 .5rem; }
.kontakt__funktion { font-weight: 400; color: var(--ink-2); }
.kontakt__zeile {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: .25rem 1rem; padding: .3rem 0; align-items: baseline;
}
.kontakt__marke {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3);
}
.kontakt__wert { overflow-wrap: anywhere; }

/*
 * DIE ERREICHBARKEIT WIRD HERVORGEHOBEN, und das ist keine Verzierung: Sie ist
 * der Grund, aus dem die Kontaktliste überhaupt gebaut wurde. Von 73 Stellen
 * sagten 67 nicht, wann man anrufen kann; die Vereinsberatung des Landkreises
 * ist Di und Do 16–19 Uhr zu sprechen — also genau dann, wenn das Amt sonst zu
 * hat. Wer die Zeile übersieht, ruft umsonst an.
 */
.kontakt__zeile[data-ton="zeit"] .kontakt__wert {
  background: var(--gold-hell); border-radius: .25rem;
  padding: .1rem .4rem; font-weight: 600;
}
.kontakt__zweck { color: var(--ink-2); font-size: .9375rem; margin: .5rem 0 0; }

/* ── Was zu klären ist ─────────────────────────────────────────────────── */

.klaeren { margin: 0; padding-left: 1.4rem; }
.klaeren li { margin-bottom: 1.25rem; }
.klaeren__frage { margin: 0 0 .25rem; font-weight: 600; }
.klaeren__hinweis { margin: 0 0 .25rem; color: var(--ink-2); font-size: .9375rem; }
.klaeren__warum { margin: 0; color: var(--ink-3); font-size: .875rem; }

@media (max-width: 40rem) {
  .kontakt__zeile { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kontakt__marke { margin-top: .35rem; }
}

/* ── Der Entwurf der Kontaktanfrage ────────────────────────────────────── */

/*
 * SEIN TEXT, NICHT UNSERER. Der Entwurf steht als Fließtext und nicht in einem
 * Eingabefeld: Geändert wird er im Mailprogramm des Vereins, aus dem er auch
 * abgeht. Ein Formular hier würde eine Bearbeitung versprechen, die wir gar
 * nicht speichern.
 */
.entwurfsform { margin: 0; }
.entwurfsform .feld { margin-bottom: 1rem; }

.entwurf { margin: 0; }
.entwurf__betreff {
  display: flex; align-items: baseline; gap: .75rem;
  margin: 0 0 .5rem; flex-wrap: wrap;
}
.entwurf__text {
  white-space: pre-wrap; font-family: inherit; font-size: .9375rem;
  background: var(--schiefer-hell); border-radius: .5rem;
  padding: 1rem 1.25rem; margin: 0 0 1rem; overflow-wrap: anywhere;
}
.entwurf__luecken {
  background: var(--gold-hell); border: 1px solid var(--gold-linie);
  border-radius: .5rem; padding: .75rem 1.125rem; margin: 0 0 1rem;
}
.entwurf__luecken p { margin: 0 0 .25rem; }
.entwurf__luecken ul { margin: 0; padding-left: 1.25rem; }

/* ── Schritt 4: was ihr erfahren habt ──────────────────────────────────── */

/*
 * DIE FELDER SIND SCHMAL UND ZWEIZEILIG, und das ist Absicht: Hier steht,
 * was am Telefon gesagt wurde — „kein Stichtag, läuft fortlaufend“ —, kein
 * Gesprächsprotokoll. Ein großes Feld lädt zu etwas ein, das niemand
 * hinterher liest.
 */
.erfahren { margin: 0; }
.erfahren .feld { margin-bottom: .875rem; }
.erfahren label { font-weight: 600; }
.erfahren textarea { min-height: 3.25rem; }

/*
 * DIE HÄKCHENLISTE IM KASTEN BRAUCHT DAS POLSTER DER TAFEL (30.08.2026).
 *
 * `.tafel` selbst polstert nicht — Kopf und Fuß bringen ihr Polster mit, und
 * dazwischen steht sonst eine Liste von Links, die ihres selbst trägt. Eine
 * blanke `<ul>` lag deshalb an den Kanten an, und der Kasten sah aus, als sei
 * er zusammengeschoben.
 */
.strecke__hilfe { padding: var(--s3) var(--s4); }

/* ══════════════════════════════════ Der Anlegekasten „Neues Vorhaben" ═══
 *
 * Zweispaltig: links wird geschrieben, rechts mitgelesen. Gewählt am
 * 30.08.2026 aus drei Entwürfen (docs/design-muster/vorhaben-anlegen-muster-
 * 2026-08-30.html, Muster A). Der Grund für die Zweispaltigkeit ist die
 * Bewegung: Wer tippt und daneben Punkte aufleuchten sieht, versteht ohne
 * einen Satz Erklärung, dass hier etwas mitliest.
 *
 * ES BLEIBT IN 72rem — der Breite, die die Vorhabenseite (`main.seite`) schon
 * hat. Wäre der Kasten breiter, wäre der Umbau nicht ein Kasten, sondern die
 * Seite.
 */

.anlegen {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  padding: 0;
}

/* Untereinander ab Tablet: Nebeneinander wären beide Spalten zu schmal, und
   die Liste rutschte unter das Feld statt neben es. */
@media (max-width: 60rem) { .anlegen { grid-template-columns: 1fr; } }

.anlegen__schreiben { padding: var(--s5); }
.anlegen__lesen {
  padding: var(--s5);
  background: var(--schiefer-flach);
  border-left: 1px solid var(--linie-2);
}
@media (max-width: 60rem) {
  .anlegen__lesen { border-left: 0; border-top: 1px solid var(--linie-2); }
}

.anlegen h2 { margin: 0 0 var(--s2); font-size: var(--t-titel); }
/* Ein <label>, kein Absatz: Der Satz IST die Aufforderung an das Feld, und
   damit hat das Feld einen Namen, ohne dass eine zweite Zeile ihn wiederholt. */
.anlegen__einleitung {
  display: block;
  margin: 0 0 var(--s4);
  color: var(--ink-2);
  font-size: var(--t-basis);
  font-weight: 400;
}

/* Die Kopfzeile am Feld — der Grund, warum das Feld nicht mehr wie ein
   gewöhnliches Formularfeld aussieht. Sie ist ein <label> und gehört damit
   zum Feld, statt nur darüber zu schweben. */
.anlegen__marke {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: .5rem .75rem;
  border: 1px solid var(--akzent-hell);
  border-bottom: 0;
  border-radius: .72rem .72rem 0 0;
  background: var(--akzent-hell);
  color: var(--akzent);
  font-size: var(--t-klein);
  font-weight: 600;
  cursor: text;
}
.anlegen__marke svg { width: 1rem; height: 1rem; flex: none; }
.anlegen__zaehler { margin-left: auto; font-weight: 500; opacity: .75; }

/* 13rem und nicht 11: Ein großes Feld ist die Aufforderung, viel
   hineinzuschreiben — genau das, wofür der Kasten gebaut ist. Nebenbei nimmt
   es die letzten Pixel Höhenunterschied zur Liste rechts auf. */
.anlegen textarea {
  width: 100%;
  min-height: 13rem;
  border-radius: 0 0 .72rem .72rem;
  border-color: var(--akzent-hell);
  font-family: var(--sans);
  font-size: var(--t-basis);
  line-height: 1.55;
  resize: vertical;
}
.anlegen textarea:focus { border-color: var(--akzent); outline: 2px solid var(--akzent-hell); outline-offset: 1px; }

.anlegen__unterm-feld { margin: var(--s3) 0 0; font-size: var(--t-klein); color: var(--ink-2); }
.anlegen__knopfzeile { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); flex-wrap: wrap; }

/* --ink-3 misst auf der Karte 4,36:1 und auf --schiefer-flach 4,05:1, beides
   unter 4,5:1. Was gelesen werden soll, steht deshalb in --ink-2. */
.anlegen__fein { font-size: var(--t-klein); color: var(--ink-2); line-height: 1.55; margin: 0; }
.anlegen__lesen .anlegen__fein { margin-top: var(--s3); }

.anlegen__ueber {
  margin: 0 0 var(--s1);
  font-size: var(--t-klein);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-2);
}
.anlegen__kopf { margin: 0 0 var(--s3); }
.anlegen__kopf b { display: block; font-size: var(--t-gross); color: var(--ink); line-height: 1.3; }
.anlegen__kopf span { display: block; margin-top: var(--s1); font-size: var(--t-klein); color: var(--ink-2); }

/* Der Abstand ist --s2 und nicht --s3: Sieben Punkte mal ein Viertel Zeile
   entscheiden, ob der rechte Teil am Knopf endet oder darunter weiterläuft. */
.anlegen__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.anlegen__liste li { display: flex; gap: var(--s3); align-items: flex-start; }
.anlegen__liste b { display: block; font-size: var(--t-klein); font-weight: 600; color: var(--ink); }
.anlegen__nach { display: block; margin-top: 2px; font-size: var(--t-klein); color: var(--ink-2); line-height: 1.5; }

/* Der Punkt trägt die Stufe: leer, halb, voll. DREI ZUSTÄNDE UND KEINE AMPEL —
 * ein roter Punkt hieße „Fehler", und ein fehlender Satz ist kein Fehler.
 *
 * Die halbe Stufe ist der Kern der Sache (Auflage des Gründers vom 30.08.:
 * „wenn es fertig abgehakt ist hört der user auf"). Sie ist deshalb sichtbar
 * anders und nicht nur blasser: halb gefüllt, in Amber. */
.anlegen__punkt {
  flex: none;
  width: .95rem;
  height: .95rem;
  margin-top: .12rem;
  border-radius: 50%;
  border: 2px solid var(--feld-linie);
  background: var(--karte);
  position: relative;
  transition: background-color .18s ease, border-color .18s ease;
}
.anlegen__liste li[data-stufe="1"] .anlegen__punkt {
  border-color: var(--amber);
  background: linear-gradient(90deg, var(--amber) 50%, var(--karte) 50%);
}
.anlegen__liste li[data-stufe="2"] .anlegen__punkt { border-color: var(--gruen); background: var(--gruen); }
.anlegen__liste li[data-stufe="2"] .anlegen__punkt::after {
  content: "";
  position: absolute;
  left: .22rem; top: .04rem;
  width: .2rem; height: .42rem;
  border: solid var(--weiss);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.anlegen__liste li[data-stufe="2"] b { color: var(--ink-2); }

/* Datenschutz: Einstieg, lesbare Aufgaben und direkt bearbeitbare Dokumente. */
.datenschutz-start { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; padding: 2rem; margin: 1.5rem 0; background: var(--akzent-hell); border: 1px solid var(--linie); border-radius: 20px; }
.datenschutz-start h2 { margin-top: .2rem; font-size: clamp(1.5rem, 2.5vw, 2rem); }
.datenschutz-start p { max-width: 62ch; }
.datenschutz-schritte { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; align-content: center; }
.datenschutz-schritte li { display: grid; gap: .3rem; padding-left: 1rem; border-left: 3px solid var(--salbei); }
.datenschutz-schritte span { color: var(--ink-2); }
/* `.datenschutz-sprung` und `.datenschutz-angaben` sind am 09.09.2026
 * ersatzlos entfallen. Die drei Sprungpillen zeigten auf drei Ziele, während
 * die Seite fünf Gruppen hatte — die Tafel in der Seitenspalte ist jetzt die
 * Navigation. Die zugeklappte Angabenleiste ist eine eigene Seite geworden
 * (server/seiten-datenschutz-angaben.mjs). Regeln, die niemand mehr erzeugt,
 * stehen hier nicht: Sie machen bei der nächsten Suche den Eindruck, es gäbe
 * das Element noch.
 *
 * Die Lage der Sammelerklärung — sie steht im Kasten und trägt die Auskunft,
 * ob überhaupt jemand unterschreiben muss. */
.datenschutz-lage { margin: var(--s3) 0; font-weight: 600; }
.datenschutz-lage[data-lage="keine"] { color: var(--gruen); }
.datenschutz-lage[data-lage="ungeklaert"] { color: var(--amber); }
/* EINE KARTE, EINE ZEILE — der Gründerentscheid vom 08.09.2026: „eine karte
 * bekommt einen ganzen raum, nicht zwei nebeneinander, nur untereinander."
 *
 * Hier standen zwei Spalten. Gemessen bei 1440 px: jede Karte 582 px breit bei
 * bis zu 1936 Zeichen Inhalt. Eine Aufgabe ist kein Kachelinhalt — sie trägt
 * Kurztext, einen Schritt-Kasten, Fußzeile und Knöpfe. Auf halber Breite bricht
 * das in schmale Textsäulen, die Knopfzeile rutscht um, und zwei ungleich lange
 * Karten nebeneinander lassen eine Lücke, die wie ein Fehler aussieht.
 *
 * Über die volle Breite hat der Text eine ruhige Zeilenlänge, und die Karten
 * fluchten links — der Blick läuft eine Kante hinunter statt im Zickzack. */
.datenschutz-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: start; margin-top: 1rem; }
.datenschutz-raster .treffer--aufgabe { margin: 0; min-width: 0; }
/* Der Kurztext bekommt eine Lesebreite, die Karte darf breiter sein: Bei 1180 px
 * liefe eine Zeile sonst über 150 Zeichen, und das Auge verliert den
 * Zeilenanfang. Die Knöpfe und der Schritt-Kasten bleiben davon unberührt. */
.datenschutz-raster .aufgabe__kurz { max-width: 68ch; }
/* Auch der aufgeklappte Teil braucht die Lesebreite. Gemessen liefen die
 * Absätze dort über 834 px, das sind bei dieser Schriftgröße rund 110 Zeichen
 * je Zeile — weit über den 60 bis 80, bei denen das Auge den Zeilenanfang noch
 * sicher wiederfindet. Zugeklappt fällt das niemandem auf; wer aufklappt, will
 * genau diesen Text lesen. */
.datenschutz-raster .aufgabe__mehr p,
.datenschutz-raster .aufgabe__mehr li { max-width: 72ch; }
.datenschutz-raster .treffer--aufgabe h3 { font-size: 1.3rem; line-height: 1.3; max-width: 52ch; }
.aufgabe__kurz { margin: .8rem 0; line-height: 1.55; }

/* DAS BAND ÜBER DER KARTE (09.09.2026): Was im Blattsatz der Sammelerklärung
 * entsteht, sagt es hier — nicht als Marke unten im Fuß, wo man handelt,
 * sondern als Zuordnung ganz oben. Beim Vorbeirollen sieht man die drei Karten
 * als Gruppe, und es kostet keine Zeile im Körper.
 *
 * `grid-column: 1 / -1` UND NEGATIVE RÄNDER: `.treffer` ist ein Raster aus
 * Punktspalte und Inhaltsspalte mit Innenabstand. Ohne beides säße das Band in
 * der Inhaltsspalte und hätte links den Punktrand und rundum das Kartenmaß —
 * ein Streifen, der nicht bis an die Kante reicht, sieht abgeschnitten aus.
 * (Die Lesebreite für Absätze aus Zeile 844 muss ebenfalls zurückgenommen
 * werden, sonst endet das Band auf halber Karte.) */
.aufgabe__band {
  grid-column: 1 / -1;
  margin: calc(var(--s5) * -1) calc(var(--s5) * -1) 0;
  max-width: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s5);
  border-radius: var(--r) var(--r) 0 0;
  background: var(--salbei-hell);
  color: var(--salbei);
  font-size: var(--t-klein);
  font-weight: 600;
}
.aufgabe__band svg { width: 1em; height: 1em; flex: none; }

/* LUFT ZWISCHEN DEN SEKTIONEN (Gründerbefund 09.09.2026: „etwas mehr Abstand
 * zwischen 2 Sektionen").
 *
 * GEMESSEN: 17 px zwischen zwei Karten, 43 px zwischen zwei Blöcken — ein
 * Verhältnis von 2,5 zu 1. Zu wenig: Die nächste Blocküberschrift schließt so
 * dicht an die letzte Karte an, dass sie wie deren Fortsetzung wirkt und der
 * Schnitt zwischen „selbst regeln" und „wenn etwas passiert" verlorengeht.
 * Mit --s8 sind es 56 px und damit gut das Dreifache.
 *
 * NUR AUF DIESER SEITE: `.hauptinhalt > .block` gäbe es auch auf der
 * Ergebnisseite (seiten-pruefung.mjs), die dieselbe Struktur benutzt und ihre
 * eigenen Abstände hat. Deshalb der eigene Haken an der Spalte. */
.hauptinhalt--datenschutz > .block { margin-bottom: var(--s8); }

/* Die Rechtsgrundlage über dem Titel — die Auskunft, die ein Vorstand braucht,
 * wenn ihn jemand fragt, woher die Pflicht kommt. Sie lag bis zum 09.09. im
 * Quellenkasten hinter zwei Klicks. */
.aufgabe__ueber {
  margin: 0 0 .15rem;
  color: var(--ink-3);
  font-size: var(--t-klein);
  letter-spacing: .01em;
}

/* ZWEI FLÄCHEN, NICHT VIER (Gründerbefund 09.09.2026: „jetzt ist es wieder zu
 * viel — zu viel für die Augen, nicht an Info").
 *
 * GEMESSEN, was sich in EINER Karte stapelte: das Band (salbei-hell), die
 * Karte, der Schritt-Kasten (schiefer-flach) und der Fuß. Vier Gründe
 * übereinander, und keiner der beiden mittleren sagte etwas — der Schritt ist
 * ein Satz, kein Kasten. Dazu drei grüne Marken für dieselbe Zuordnung:
 * Streifen links, Punkt und Band.
 *
 * (Die Farbwerte stehen hier bewusst NICHT ausgeschrieben:
 * test/stil-system.test.mjs sucht Hex-Farben außerhalb von :root und liest
 * dabei auch Kommentare — am 09.09. hineingelaufen.)
 *
 * Es bleiben zwei Flächen, die etwas bedeuten: das Band oben (welchem Blatt
 * die Karte gehört) und der Fuß unten (hier wird gehandelt). Dazwischen Weiß.
 * Der Inhalt ist unverändert — nur die Flächen darunter sind weg. */
.datenschutz-raster .aufgabe__schritt {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: var(--t-basis);
}
/* Der Punkt sagt dasselbe wie der farbige Streifen am linken Kartenrand, nur
 * kleiner und neun Pixel weiter rechts. Der Streifen bleibt: Er trägt die Art
 * des Blocks und läuft über die ganze Karte. */
.datenschutz-raster .treffer--aufgabe { grid-template-columns: minmax(0, 1fr); }
.datenschutz-raster .treffer__punkt { display: none; }
.aufgabe__schritt { background: var(--schiefer-flach); padding: .8rem; border-radius: 9px; font-size: .9rem; line-height: 1.5; }
.datenschutz-raster .aufgabe__tat { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: flex-end; }
.datenschutz-raster .aufgabe__fuss { flex-wrap: wrap; }
.datenschutz-raster .aufgabe__mehr { min-width: 0; }
.dokument-editor fieldset { border: 0; padding: 0; margin: 1.4rem 0; min-width: 0; }
.dokument-editor legend { font-weight: 700; margin-bottom: 1rem; }
.dokument-editor .feld { margin: 1rem 0; }
.dokument-editor textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 7rem; font: inherit; line-height: 1.5; padding: .8rem; border: 1px solid var(--feld-linie); border-radius: 10px; }
.dokument-editor details { margin-bottom: 1.3rem; }
.dokument-status { border-left: 4px solid var(--amber); padding: 1rem 1.3rem; background: var(--amber-hell); margin: 1.5rem 0; border-radius: 0 12px 12px 0; }
.dokument-status[data-bereit="ja"] { border-color: var(--gruen); background: var(--gruen-hell); }
.dokument-status p:last-child { margin-bottom: 0; }
.antrag-finanzuebersicht, .antrag-downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1rem; }
.antrag-downloads { padding: 0; list-style: none; margin: 1.5rem 0; }
.antrag-downloads li { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; padding: 1.25rem; border: 1px solid var(--feld-linie); border-radius: 14px; background: var(--weiss); overflow-wrap: anywhere; }
.antrag-downloads li a { font-weight: 700; }
.antrag-textfeld { margin: 1.5rem 0; scroll-margin-top: 2rem; }
.antrag-textfeld textarea { display: block; width: 100%; box-sizing: border-box; padding: .85rem; font: inherit; line-height: 1.6; resize: vertical; border: 1px solid var(--feld-linie); border-radius: 10px; }
.antrag-textfeld .leise { font-size: .85rem; margin: .45rem 0; }
.antrag-bestaetigung { display: flex; align-items: flex-start; gap: .7rem; margin: 1rem 0; line-height: 1.5; }
.antrag-bestaetigung input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .2rem; }
.antrag-versandstatus { border-left: 4px solid var(--amber); }
.antrag-versandstatus[data-bereit="ja"] { border-color: var(--gruen); background: var(--gruen-hell); }
.formular-linie { display: block; min-height: 2.3rem; border-bottom: 1px solid var(--salbei); font-size: .8rem; color: var(--ink-2); margin: .5rem 0; padding-top: 1.2rem; }
@media (max-width: 760px) { .datenschutz-start, .datenschutz-raster { grid-template-columns: 1fr; } .datenschutz-start { padding: 1.3rem; gap: 1.5rem; } .datenschutz-raster .aufgabe__tat { justify-content: flex-start; } }
@media print { .datenschutz-start, .seitlich { display: none; } .datenschutz-raster { display: block; } .formular-linie { color: var(--ink); break-inside: avoid; } }


/* Die Staffelung der Schlüsselfragen-Seite — Ergänzung zu web/stil.css.
 *
 * SIE LIEGT HIER UND NICHT IN web/stil.css, weil am 08.09.2026 eine zweite
 * Sitzung an jener Datei arbeitete (181 ungesicherte Zeilen). Sie gehört
 * unverändert ans Ende von web/stil.css, sobald jener Umbau eingecheckt ist —
 * das Designsystem hat genau EINE Datei (ADR Abschnitt 11), und zwei wären
 * die Drift-Quelle, vor der dieses Repo an jeder zweiten Stelle warnt.
 *
 * Es sind vier Regeln. Alles andere trägt bereits vorhandene Klassen:
 * `details.zu` den Kasten, `.block__kopf` die Überschrift, `.frage` das
 * Kreuzfeld, `.feld__hilfe` die Erklärung unter der Frage.
 */

/* Die Topfblöcke stehen untereinander, nicht aneinandergeklebt. */
[data-art="schluessel-gruppen"] details.zu + details.zu { margin-top: var(--s3); }

/* Der Name des Topfes darf umbrechen und schiebt die Anzahl nicht aus der
 * Zeile: Manche Titel sind lang („DSEE-Mikroförderprogramm ‚Engagement
 * gewinnen. Ehrenamt binden. Zivilgesellschaft stärken.'"), und abschneiden
 * hieße dem Verein zu verschweigen, worum es geht — die eine Auskunft, für die
 * dieser Block gebaut ist. */
[data-art="schluessel-topf"] > summary { align-items: flex-start; }
[data-art="schluessel-topf"] > summary .topf__name { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
[data-art="schluessel-topf"] > summary .block__anzahl { flex: none; margin-top: .15rem; }

/* `.details__inhalt` ist auf .86rem gesetzt — richtig für einen Hinweistext,
 * zu klein für ein Formular. Hier stehen Fragen, die beantwortet werden. */
[data-art="schluessel-topf"] .details__inhalt { font-size: 1rem; padding-top: var(--s1); }
[data-art="schluessel-topf"] .details__inhalt > .leise { margin-top: 0; margin-bottom: var(--s4); }

/* DIE FRAGE IST EINE ÜBERSCHRIFT GEWORDEN und darf so aussehen.
 *
 * Vorher trug `legend` dieselbe Größe wie der Text darunter und unterschied
 * sich nur durch Fettung — das reichte, solange darunter nichts stand als die
 * Kreuze. Seit dem 08.09.2026 steht zwischen Frage und Kreuzen die Erklärung,
 * und zwei gleich große Absätze übereinander lesen sich als ein Absatz. Eine
 * Stufe größer und in der Display-Schrift trennt beides ohne einen Strich. */
fieldset.frage[data-art="schluessel"] > legend {
  font-family: var(--disp);
  font-size: var(--t-gross);
  line-height: 1.35;
  margin-bottom: var(--s1);
}

/* Der Knopf steht allein am Ende der Strecke, nicht in einer leeren Karte. */
.karte[data-art="abschluss"] { display: flex; justify-content: flex-end; }

/* Die Marke an einer Aufgabe, deren Papier im Blattsatz entsteht (09.09.2026).
 *
 * Sie steht da, wo sonst der Vorlagen-Knopf stünde, und sieht ausdrücklich
 * NICHT wie einer aus: Sie erzeugt nichts, sie verweist. Amber ist im Werkzeug
 * die Farbe für „hier fehlt noch etwas" — hier heißt sie „das gibt es schon,
 * eine Etage höher". Der Pfeil sagt, wohin; das Wort sagt, was (ADR 11: nie
 * die Farbe allein). */
.paketmarke {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--t-klein);
  padding: var(--s1) var(--s3);
  border-radius: 999px;
  background: var(--amber-hell);
  color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 25%, transparent);
  text-decoration: none;
}
.paketmarke::after { content: "\2191"; }
.paketmarke:hover,
.paketmarke:focus-visible { border-color: var(--amber); background: var(--weiss); }

/* Die Fragen, die über den Inhalt des Blattsatzes entscheiden (09.09.2026).
 *
 * Sie stehen IM Sammelerklärungs-Kasten und nicht am Seitenende, weil sie
 * bestimmen, was auf dem Blatt landet — und amber abgesetzt, weil das im
 * Werkzeug „hier fehlt noch etwas" heißt. Der Kasten selbst ist salbeigrün;
 * ohne eigenen Grund verschwämme der Block darin. */
.blattfragen {
  margin: var(--s4) 0;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-klein);
  background: var(--amber-hell);
  border: 1px solid color-mix(in srgb, var(--amber) 25%, transparent);
}
.blattfragen__kopf {
  margin: 0 0 var(--s2);
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--amber);
}
/* Die Frage darin trägt keinen zweiten Rahmen — der Kasten ist schon einer. */
.blattfragen .frage { border: 0; padding: 0; background: none; }
.blattfragen .frage + .frage { margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px solid color-mix(in srgb, var(--amber) 20%, transparent); }

/* Vorhaben: Arbeitsübersicht und Mappe. Auf diese beiden Seiten begrenzt. */
body:has(.vorhaben-seite) {
  --grund: var(--vh-grund);
  --karte: var(--weiss);
  --ink: var(--vh-ink);
  --ink-2: var(--vh-ink-2);
  --ink-3: var(--vh-ink-3);
  --linie: var(--vh-linie);
  --linie-2: var(--vh-linie-2);
  --akzent: var(--vh-akzent);
  --akzent-tief: var(--vh-akzent-tief);
  --akzent-hell: var(--vh-akzent-hell);
  --vorhaben-dunkel: var(--vh-dunkel);
  --vorhaben-zitrone: var(--vh-zitrone);
  --vorhaben-helltext: var(--vh-helltext);
  background: var(--grund);
}
.vorhaben-seite { max-width: 75rem; padding: 2.5rem 2rem 4rem; font-size: 1rem; }
.vorhaben-seite *, .vorhaben-seite *::before, .vorhaben-seite *::after { box-sizing: border-box; }
/*
 * DER FOKUSRAHMEN — 1 px am Rand, nicht 3 px daneben (Sichtprüfung 09.09.).
 *
 * SEIN BEFUND, wörtlich: „Wenn die Box angeklickt wird, erscheint darum ein
 * fetter grüner Kasten, der macht keinen Sinn. Das passiert bei allen Boxen,
 * das sieht hässlich aus."
 *
 * ER KOMMT VOM KLICK, NICHT VON DER MAUS. Gemessen am laufenden Server: Maus
 * drüber macht den Rand 1 px grün und den Grund leicht grün, beim Textfeld
 * passiert gar nichts. Erst der Klick löste die alte Regel aus — 3 px sattes
 * Grün, 4 px NEBEN der Box schwebend. Neben dem eigenen Rand der Box wurden
 * daraus zwei Kästen übereinander, und genau das sah er.
 *
 * AUS VIER FASSUNGEN GEWÄHLT (docs/design-muster/rahmen-maus-und-klick-2026-09-09.html):
 * ein Pixel am Rand, dazu färbt sich der Rand der Box selbst. Zwei leise
 * Signale statt einem lauten.
 *
 * GANZ WEG KANN ER NICHT. Wer mit der Tabulatortaste bedient, sieht ohne diese
 * Markierung nicht, wo er steht — für ihn wäre die Seite unbedienbar. Das ist
 * keine Kür (WCAG 2.4.7), nur die Lautstärke war verhandelbar.
 *
 * NUR DIESE ZWEI SEITEN. Die App-weite Regel bei stil.css:2634 bleibt, wie sie
 * ist; sie steht dort mit 2 px Abstand statt 4 und gilt für Seiten, die hier
 * niemand nachgesehen hat.
 */
.vorhaben-seite :is(a, button, summary, input, select, textarea):focus-visible {
  outline: 1px solid var(--akzent);
  outline-offset: 0;
  border-color: var(--akzent);
}
/*
 * DER GEFÜLLTE KNOPF IST SELBST GRÜN. Ein grüner Rand darauf wäre unsichtbar —
 * ausgerechnet der Hauptknopf hätte dann keine Markierung. Dort liegt sie als
 * weiße Kante innen.
 */
.vorhaben-seite :is(.knopf, button)[data-art="haupt"]:focus-visible,
.vorhaben-seite .vorhaben-weiter .knopf:focus-visible {
  box-shadow: inset 0 0 0 1px var(--weiss);
}
.vorhaben-seite :is(.knopf, button) { min-height: 2.75rem; border-radius: .65rem; font-size: .875rem; gap: .65rem; }
.vorhaben-seite .knopf .zk { width: 1.15rem; height: 1.15rem; }
.vorhaben-seite .karte { border-radius: 1rem; box-shadow: 0 2px 5px rgb(24 47 41 / 3%); }
.vorhaben-seite .leise { color: var(--ink-2); font-size: .875rem; }
.vorhaben-seite :is(h1, h2, h3, p) { overflow-wrap: anywhere; }
.vorhaben-seite h1 { font-size: clamp(2rem, 3.2vw, 2.65rem); line-height: 1.15; letter-spacing: -.04em; font-weight: 730; }
.vorhaben-seite h2 { font-size: 1.25rem; font-weight: 700; }
.vorhaben-seite .vorhaben-kicker { margin: 0 0 .55rem; color: var(--akzent); font-size: .75rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.vorhaben-kopf { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 2.35rem; padding: 0; }
.vorhaben-kopf > div { min-width: 0; }
.vorhaben-kopf > div > p:last-child { color: var(--ink-2); margin: .8rem 0 0; max-width: 43rem; line-height: 1.6; }
.vorhaben-kopf > .knopf { flex: none; }
.vorhaben-abschnittskopf { display: flex; align-items: center; justify-content: space-between; gap: .9rem; margin-bottom: 1rem; }
.vorhaben-abschnittskopf h2 { margin: 0; display: flex; align-items: center; gap: .65rem; }
.vorhaben-abschnittskopf > span { color: var(--ink-2); font-size: .8rem; }
.vorhaben-abschnittskopf > .zk { width: 1.2rem; height: 1.2rem; color: var(--ink-2); }
.vorhaben-anzahl { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; background: var(--linie-2); border-radius: 50%; font-size: .8rem; color: var(--ink-2); }
.vorhaben-zaehlung { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; font-size: .825rem; color: var(--ink-2); }
.vorhaben-zaehlung b { color: var(--ink); margin-right: .2rem; }
.vorhaben-bestand { margin-bottom: 2.4rem; }
.vorhaben-liste { display: grid; gap: .65rem; }
/*
 * `column-gap` STATT `gap` (Sichtprüfung 10.09.).
 *
 * `gap: 1.5rem` gilt für Spalten UND Zeilen. Seit die Werkstatt eine eigene
 * Rasterzeile hat, kostete das 25,5 px an einer Stelle, an der ohnehin eine
 * Trennlinie mit eigenem Polster steht — doppelter Abstand für einen Zweck.
 * Sein Befund dazu: „oder dass es zu groß wird." Die 1,5 rem gehören der
 * Spalte, damit das Symbol nicht am Titel klebt; zwischen den Zeilen setzt die
 * Werkstatt ihren Abstand selbst.
 */
.vorhaben-zeile { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; align-items: center; column-gap: 1.5rem; row-gap: 0; border: 1px solid var(--linie); border-radius: .9rem; padding: 1.25rem 1.4rem; background: var(--karte); transition: border-color .18s, box-shadow .18s; }
.vorhaben-zeile:hover { border-color: var(--vh-kante-warm); box-shadow: 0 4px 14px rgb(24 47 41 / 4%); }
/*
 * DER AUFKLAPPER HAT EINE EIGENE ZEILE — UND DESHALB VERRUTSCHT NICHTS
 * (Sichtprüfung 09. und 10.09., Muster M3).
 *
 * ZWEI BEFUNDE HINTEREINANDER, und der zweite hat die Lösung des ersten
 * ersetzt.
 *
 * ERST: „Den Pfeil Status Prüfstand öffnet, dann sieht die Karte hässlich
 * aus." Gemessen stand das Symbol dann 104 px unter der Kartenkante, weil
 * `align-items: center` es gegen die lang gewordene rechte Spalte ausmittelte.
 * Die damalige Antwort war `align-items: start`, sobald etwas offen ist.
 *
 * DANN: „pass auf, dass nichts verrutscht, wenn man den Aufklapper öffnet,
 * beispielsweise dass das grüne Icon links zu hoch rutscht." Genau das tat
 * jene Antwort — das Symbol sprang beim Öffnen von 47 px auf 22 px. Eine
 * Bewegung als Nebenwirkung einer Bewegung, die ich abstellen wollte.
 *
 * M3 LÖST BEIDES, OHNE ZU SCHALTEN: Der Aufklapper sitzt in einer EIGENEN
 * Rasterzeile über die ganze Kartenbreite. Die obere Zeile ändert ihre Höhe
 * dadurch nicht — also bleibt das Symbol mittig, wo es war, offen wie
 * geschlossen. Es gibt keine Regel mehr, die am Zustand hängt, und damit auch
 * nichts, was springen könnte.
 */
.vorhaben-zeile { grid-template-areas: "symbol inhalt aktionen" "werkstatt werkstatt werkstatt"; }
.vorhaben-symbol { grid-area: symbol; }
.vorhaben-zeile__inhalt { grid-area: inhalt; }
.vorhaben-zeile__aktionen { grid-area: aktionen; }
.vorhaben-werkstatt { grid-area: werkstatt; }
.vorhaben-symbol { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; background: var(--akzent-hell); color: var(--akzent); border: 1px solid var(--vh-symbolrand); border-radius: .85rem; }
.vorhaben-symbol .zk { width: 1.55rem; height: 1.55rem; }

/*
 * DER STAND STEHT IM SYMBOL UND ÜBER DER GRUPPE (Sichtprüfung 09.09.).
 *
 * SEIN BEFUND, wörtlich: „Den Status in Arbeit, der verändert gar nichts,
 * außer dass es in Arbeit grau wird. Und das sieht man auch nur minimal, das
 * sollte ein bisschen mehr hervorgehoben werden, was in Arbeit ist, was
 * pausiert und was abgeschlossen ist."
 *
 * ER HATTE IN BEIDEM RECHT. Der Stand stand nur in einer 12,75-px-Pille, und
 * die Liste sortierte zwar schon nach ihm (faelle.mjs:226, offen vor ruht vor
 * abgeschlossen) — aber ohne Überschriften sah niemand, dass sie das tut.
 *
 * ER HAT ZWEI MUSTER ZUSAMMEN GEWÄHLT (S3 + S2 aus
 * docs/design-muster/vorhaben-korrekturen-2026-09-09.html):
 *
 *   S3  Die Farbfläche links, die bisher bei jeder Karte gleich aussah und
 *       damit nichts sagte, trägt jetzt den Stand. Sie ist auf einen Blick von
 *       links lesbar, auch bei einem einzigen Vorhaben.
 *   S2  Die Liste bekommt Gruppenüberschriften. Wer den Stand umstellt, sieht
 *       seine Karte danach unter einer anderen Überschrift stehen — das ist
 *       die Rückmeldung, die vorher fehlte.
 *
 * DIE PILLE AN DER KARTE ENTFÄLLT DAFÜR. Neben Überschrift und Farbfläche wäre
 * sie die dritte Ansage derselben Sache in derselben Zeile. Auf der
 * Detailseite bleibt sie, denn dort steht keine Gruppenüberschrift darüber.
 *
 * DIE FORM SAGT WEITER, WAS ES IST (Klemmbrett für ein Fest, Blatt mit Stift
 * für Förderung), die FARBE sagt, wie weit es ist. Zwei Kanäle, zwei
 * Bedeutungen — sie stören sich nicht.
 */
.vorhaben-zeile[data-status="offen"] .vorhaben-symbol { background: var(--akzent); color: var(--weiss); border-color: var(--akzent); }
.vorhaben-zeile[data-status="ruht"] .vorhaben-symbol { background: var(--amber-hell); color: var(--amber); border-color: var(--vh-amberrand); }
.vorhaben-zeile[data-status="abgeschlossen"] .vorhaben-symbol { background: var(--linie-2); color: var(--ink-3); border-color: var(--linie); }
/* Abgeschlossenes tritt als Ganzes zurück — es ist erledigt, nicht erledigt-
   und-trotzdem-so-laut-wie-der-Rest. Anklickbar bleibt es unverändert. */
.vorhaben-zeile[data-status="abgeschlossen"] { background: var(--vh-grund-ruhend); }
.vorhaben-zeile[data-status="abgeschlossen"] .vorhabenlink { color: var(--ink-2); }

/* Die Gruppen der Liste. Die Farbe des Punktes ist dieselbe wie im Symbol. */
.standgruppe + .standgruppe { margin-top: 1.6rem; }
.standgruppe > h3 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .65rem; font-family: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.standgruppe > h3 .standpunkt { width: .5rem; height: .5rem; border-radius: 50%; background: var(--akzent); flex: none; }
.standgruppe[data-stand="ruht"] > h3 .standpunkt { background: var(--amber); }
.standgruppe[data-stand="abgeschlossen"] > h3 .standpunkt { background: var(--vh-punkt-ruhend); }
.standgruppe > h3 .standzahl { font-weight: 650; font-size: .8rem; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.vorhaben-zeile__inhalt { min-width: 0; }
/*
 * BAUSTEINE UND STAND STEHEN AUF EINER SCHRIFTLINIE (Sichtprüfung 09.09.).
 *
 * SEIN BEFUND: „Außerdem ist Förderung und In Arbeit versetzt." Gemessen: Die
 * Chips sind nackter Text (20,4 px hoch), der Stand eine Pille mit Polster
 * (26,2 px). Mittig nebeneinandergestellt lagen ihre Schriftlinien 6 px
 * auseinander — sichtbar genug, um schief zu wirken, zu wenig, um absichtlich
 * zu sein. `baseline` stellt beide auf dieselbe Linie, egal wie hoch das
 * Polster einer der beiden ist.
 */
.vorhaben-zeile__kategorien { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem; margin-bottom: .35rem; }
.vorhaben-zeile .chip { font-size: .75rem; padding: 0; background: transparent; border: 0; color: var(--ink-2); }
.vorhaben-status { display: inline-flex; align-items: center; gap: .4rem; padding: .17rem .65rem; border-radius: 2rem; background: var(--akzent-hell); color: var(--akzent-tief); font-size: .75rem; font-weight: 650; white-space: nowrap; }
.vorhaben-status[data-status="ruht"] { color: var(--amber); background: var(--amber-hell); }
.vorhaben-status[data-status="abgeschlossen"] { color: var(--ink-2); background: var(--linie-2); }
.vorhaben-zeile h4 { font-size: 1.04rem; margin: 0; letter-spacing: -.018em; }
/*
 * DER TITEL FÄNGT DA AN, WO SEINE SPALTE ANFÄNGT (Sichtprüfung 09.09.).
 *
 * SEIN BEFUND: „Das grüne Icon links ist viel zu nah an den ersten Buchstaben,
 * wie beispielsweise Zeltlager." Gemessen: 9 px zwischen Symbol und erstem
 * Buchstaben, während in derselben Karte darunter 21 px standen.
 *
 * DIE URSACHE WAR EIN ERBSTÜCK. `.vorhabenlink` ist die alte Knopf-Fassung des
 * Titels und bringt `margin-left: -.75rem` mit, damit der Knopftext mit dem
 * Absatz darunter fluchtete. Ohne Knopf zieht dieser Rest den Titel um 12,75 px
 * aus seiner eigenen Spalte heraus — dem Symbol entgegen.
 *
 * `margin-left: 0` setzt ihn zurück; die Spalte selbst steht seit derselben
 * Durchsicht auf 1,5 rem Abstand statt 1,25 rem.
 */
.vorhaben-zeile .vorhabenlink { display: inline-block; min-height: 0; margin-left: 0; padding: .2rem 0; border: 0; background: none; box-shadow: none; color: var(--ink); font-weight: 700; line-height: 1.4; text-decoration: none; }
.vorhaben-zeile .vorhabenlink::after { content: none; }
.vorhaben-zeile .vorhabenlink:hover { color: var(--akzent); text-decoration: underline; }
.vorhaben-zeile__meta { display: flex; gap: .4rem 1.2rem; flex-wrap: wrap; color: var(--ink-2); font-size: .825rem; margin-top: .45rem; }



.vorhaben-zeile__notiz { font-size: .875rem; color: var(--ink-2); margin: .4rem 0 0; white-space: pre-line; }
.vorhaben-zeile__aktionen { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.vorhaben-oeffnen { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .55rem 1rem; gap: 1rem; border: 1px solid var(--linie); border-radius: .6rem; font-size: .875rem; font-weight: 650; text-decoration: none; }
.vorhaben-oeffnen:hover { background: var(--akzent-hell); border-color: var(--akzent); }
/*
 * DIE WERKSTATT — ein Aufklapper für Zeitraum UND Stand, volle Kartenbreite.
 *
 * ER HAT SIE AUS VIER MUSTERN GEWÄHLT (10.09.2026,
 * docs/design-muster/vorhaben-nachschlag-2026-09-10.html): „Nimm M3, aber pass
 * auf, dass nichts verrutscht … oder dass es zu groß wird."
 *
 * ZWEI FORMULARE BLEIBEN ZWEI FORMULARE. Sie gehen an verschiedene Routen und
 * prüfen verschieden; ein gemeinsames wäre eine zweite Stelle, an der jemand
 * die Datumsprüfung nachzieht. Sie stehen deshalb nebeneinander mit eigener
 * Überschrift — dieselbe Anordnung wie in `verwaltung()` auf der Detailseite,
 * wo dieselbe Frage schon einmal entschieden wurde.
 *
 * GEGEN „ZU GROSS" ARBEITEN DREI DINGE: Die Datumsfelder sind so breit, dass
 * Beginn, Ende und der Knopf in EINE Zeile passen (vorher rutschte der Knopf
 * in eine zweite und kostete 60 px). Die Hilfesätze stehen einzeilig. Und der
 * Kasten trägt nur einen Grund, keinen zweiten Rahmen um jedes Stück.
 */
/* `margin-top` HÄLT DIE LINIE VON DER METAZEILE WEG (Sichtprüfung 10.09.).
   Mit `row-gap: 0` sass die Trennlinie unmittelbar unter „02.08.2027 bis
   06.08.2027   Geändert am 08.09.2026" — sein Wunsch: „noch ein kleines
   bisschen mehr Abstand zwischen der Linie und den Datumszahlen und der
   geändert Schrift". `padding-top` hätte den Abstand auf der falschen Seite
   der Linie vergrößert. */
.vorhaben-werkstatt { font-size: .75rem; color: var(--ink-2); margin-top: .7rem; padding-top: .75rem; border-top: 1px solid var(--linie-2); }
.vorhaben-werkstatt > summary { cursor: pointer; min-height: 1.5rem; padding: 0; font-weight: 650; color: var(--ink-2); }
.vorhaben-werkstatt > summary:hover { color: var(--akzent); }
.vorhaben-werkstatt[open] > summary { margin-bottom: .6rem; }
.vorhaben-werkstatt__inhalt { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; background: var(--grund); border: 1px solid var(--linie-2); border-radius: .7rem; padding: .8rem .9rem; }
.vorhaben-werkstatt__stueck { min-width: 0; }
.vorhaben-werkstatt h5 { margin: 0 0 .45rem; font-family: inherit; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); line-height: 1.3; }
.vorhaben-werkstatt form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; margin: 0; }
.vorhaben-werkstatt label { display: block; }
.vorhaben-werkstatt :is(input, select) { min-width: 0; }
.vorhaben-werkstatt input[type="date"] { width: 9rem; }
.vorhaben-werkstatt select { width: 10rem; }
.vorhaben-werkstatt p { margin: .55rem 0 0; }
/* Zwei Spalten, sobald die Karte sie tragen kann. Der Strich dazwischen
   ersetzt einen zweiten Rahmen — er trennt, ohne Höhe zu kosten. */
@media (min-width: 60rem) {
  .vorhaben-werkstatt__inhalt { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.5rem; }
  .vorhaben-werkstatt__stueck + .vorhaben-werkstatt__stueck { border-left: 1px solid var(--linie); padding-left: 1.5rem; }
}
.vorhaben-seite .anlegen { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); margin: 0; border-color: var(--vh-anlegenrand); }
.vorhaben-seite .anlegen__schreiben { padding: 1.8rem; }
.vorhaben-seite .anlegen h2 { font-size: 1.8rem; margin-bottom: 1rem; }
.vorhaben-schritte { list-style: none; padding: 0 0 1.4rem; margin: 0 0 1.35rem; border-bottom: 1px solid var(--linie-2); display: flex; flex-wrap: wrap; gap: .6rem 1.05rem; }
.vorhaben-schritte li { display: flex; align-items: center; gap: .45rem; font-size: .775rem; color: var(--ink-2); }
.vorhaben-schritte li > span { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; background: var(--grund); border-radius: 50%; font-size: .75rem; font-weight: 700; }
.vorhaben-schritte li[aria-current] { color: var(--akzent); font-weight: 700; }
.vorhaben-schritte li[aria-current] > span { background: var(--akzent); color: var(--weiss); }
.vorhaben-seite .anlegen__einleitung { font-size: .94rem; margin-bottom: 1rem; }
.vorhaben-seite .anlegen__marke { max-width: none; margin: 0; background: var(--vorhaben-dunkel); border-color: var(--vorhaben-dunkel); color: var(--weiss); padding: .7rem .9rem; font-size: .8rem; border-radius: .6rem .6rem 0 0; }
.vorhaben-seite .anlegen textarea { display: block; min-height: 12rem; border: 1px solid var(--vh-feldrand); border-top: 0; padding: 1rem; font-size: 1rem; line-height: 1.65; border-radius: 0 0 .6rem .6rem; background: var(--weiss); }
.vorhaben-seite .anlegen textarea::placeholder { color: var(--vh-platzhalter); opacity: 1; }
/*
 * DER FOKUS AM KI-FELD: KEIN RING, SONDERN SEINE EIGENEN KANTEN
 * (Sichtprüfung 10.09.).
 *
 * SEIN BEFUND: „das sieht immernoch unförmig aus, die klickanimation auf der
 * ki textbox."
 *
 * NICHT DER RAHMEN WAR ZU DICK — ER SASS AN DER FALSCHEN KANTE. Dieses Feld
 * hat `border-top: 0` und nur unten runde Ecken, weil es fugenlos unter dem
 * dunkelgrünen Balken sitzt und mit ihm ein Bauteil bildet. Ein `outline`
 * umrundet aber immer die ganze Box: Es zog eine grüne Linie QUER ÜBER DIE
 * NAHT und setzte eckige Ecken gegen die runden des Balkens.
 *
 * (Eine Animation gab es nie. `transition-duration` steht auf 0s — das Wort
 * beschrieb, was er sah, nicht, was der Stil tat.)
 *
 * JETZT WERDEN SEINE DREI ECHTEN KANTEN grün und über den inneren Schein
 * doppelt so kräftig; die Oberkante bleibt frei, weil dort keine Kante
 * hingehört. Der Balken darüber wechselt auf den tieferen Grünton, damit
 * Balken und Feld als ein Stück reagieren — sie sind eins.
 *
 * SICHTBAR BLEIBT ES: Der Rand springt von blassem Graugrün auf das satte Grün
 * der Seite. Das ist der Wechsel, den auch die Tastaturbedienung braucht.
 *
 * `:has(+ textarea:focus)` UND NICHT `form:focus-within`: Der Balken gehört zu
 * DIESEM Feld. Am Formular gemessen würde er auch dunkler, wenn jemand auf den
 * Absendeknopf tabbt — eine Rückmeldung an der falschen Stelle.
 */
.vorhaben-seite .anlegen textarea:is(:focus, :focus-visible) {
  outline: none;
  border-color: var(--vh-akzent);
  box-shadow: inset 1px 0 0 0 var(--vh-akzent), inset -1px 0 0 0 var(--vh-akzent), inset 0 -1px 0 0 var(--vh-akzent);
}
.vorhaben-seite .anlegen__marke:has(+ textarea:focus) {
  background: var(--vh-akzent-tief);
  border-color: var(--vh-akzent-tief);
}
.vorhaben-seite .anlegen__unterm-feld { font-size: .8rem; line-height: 1.6; }
.vorhaben-seite .anlegen__knopfzeile { align-items: flex-start; gap: .75rem; margin-top: 1.3rem; }
.vorhaben-seite .anlegen__knopfzeile .anlegen__fein { max-width: 13rem; padding-top: .25rem; font-size: .75rem; }
.vorhaben-seite .anlegen__lesen { background: var(--vh-lesengrund); padding: 1.8rem; border-left-color: var(--vh-lesenkante); }
.vorhaben-seite .anlegen__ueber { color: var(--akzent); font-size: .75rem; letter-spacing: .08em; }
.vorhaben-seite .anlegen__kopf { margin: .7rem 0 1.1rem; }
.vorhaben-seite .anlegen__kopf b { font-size: 1.2rem; line-height: 1.35; }
.vorhaben-seite .anlegen__kopf > span { font-size: .8rem; margin-top: .5rem; }
.vorhaben-seite .anlegen__liste { gap: .85rem; }
.vorhaben-seite .anlegen__liste li { gap: .7rem; }
.vorhaben-seite .anlegen__liste b { font-size: .825rem; line-height: 1.45; }
.vorhaben-seite .anlegen__nach { font-size: .8rem; }
.vorhaben-seite .anlegen__nach i { font-style: normal; }
.vorhaben-seite .anlegen__punkt { margin-top: .22rem; }
.vorhaben-seite .anlegen__lesen > .anlegen__fein { border-top: 1px solid var(--vh-lesenkante); padding-top: .9rem; font-size: .75rem; }
.vorhaben-seite > .kurzhinweis { margin: 1.25rem 0 0; font-size: .875rem; }
.vorhaben-seite > .kurzhinweis summary { min-height: 2.75rem; display: flex; align-items: center; }
.vorhaben-brotkrumen { display: flex; gap: .8rem; align-items: center; font-size: .8rem; color: var(--ink-2); margin-bottom: 1.75rem; }
.vorhaben-brotkrumen a { text-decoration: none; padding: .4rem 0; }
.vorhaben-brotkrumen a:hover { text-decoration: underline; }
.vorhaben-detailkopf { margin: 0 0 1.75rem; padding: 0; }
.vorhaben-detailkopf h1 { max-width: 60rem; margin-top: .9rem; }
.vorhaben-detailkopf > p:last-child { font-size: 1rem; margin-top: .75rem; }
.vorhaben-detailkopf__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1.1rem; }
.vorhaben-detailkopf__meta > span:last-child { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink-2); font-size: .875rem; }
.vorhaben-detailkopf__meta .zk { width: 1.1rem; height: 1.1rem; flex: none; }
.vorhaben-weiter { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; padding: 1.5rem; background: var(--vorhaben-dunkel); color: var(--weiss); border-radius: 1rem; margin-bottom: 2rem; }
.vorhaben-weiter__symbol { display: grid; place-items: center; border: 1px solid var(--vh-weiterrand); background: var(--vh-weitergrund); height: 3rem; width: 3rem; border-radius: .8rem; color: var(--vorhaben-zitrone); }
.vorhaben-weiter__symbol .zk { height: 1.5rem; width: 1.5rem; }
.vorhaben-weiter .vorhaben-kicker { color: var(--vorhaben-zitrone); margin: 0 0 .35rem; font-size: .7rem; }
.vorhaben-weiter h2 { color: var(--weiss); margin: 0 0 .45rem; font-size: 1.16rem; }
.vorhaben-weiter p:last-child { color: var(--vorhaben-helltext); font-size: .825rem; margin: 0; max-width: 43rem; }
.vorhaben-weiter .knopf { color: var(--vorhaben-dunkel); background: var(--vorhaben-zitrone); border-color: var(--vorhaben-zitrone); white-space: nowrap; }
.vorhaben-weiter .knopf:hover { background: var(--weiss); }
.vorhaben-weiter .knopf:focus-visible { outline-color: var(--weiss); }
.vorhaben-arbeitsplatz { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.6rem; align-items: start; }
.vorhaben-arbeit { min-width: 0; }
.vorhaben-bereiche { margin-bottom: 1.65rem; }
.vorhaben-seite .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-bottom: .8rem; }
.vorhaben-seite .kachel { min-width: 0; padding: 1.25rem; box-shadow: none; border-radius: .85rem; }
.vorhaben-seite .kachel::before { content: none; }
.vorhaben-seite .kachel:not([data-stand="fehlt"]) { border-color: var(--vh-kachelrand); }
.vorhaben-seite .kachel:hover { background: var(--vh-kachelhover); border-color: var(--akzent); transform: none; }
.vorhaben-bereichsymbol { display: grid; place-items: center; height: 2.35rem; width: 2.35rem; background: var(--akzent-hell); color: var(--akzent); border-radius: .6rem; margin-bottom: .8rem; }
.vorhaben-bereichsymbol .zk { width: 1.25rem; height: 1.25rem; }
.vorhaben-seite .kachel__titel { font-size: 1.1rem; margin-bottom: .35rem; }
.vorhaben-bereichtext { font-size: .825rem; line-height: 1.5; color: var(--ink-2); margin: 0 0 .9rem; font-weight: 400; }
.vorhaben-seite .kachel__stand { font-size: .8rem; line-height: 1.5; padding-right: .85rem; }
.vorhaben-seite .kachel[data-stand="fehlt"] { background: transparent; border-color: var(--vh-kachelfehlt); }
.vorhaben-seite .kachel[data-stand="fehlt"] .vorhaben-bereichsymbol { background: var(--linie-2); color: var(--ink-2); }
.vorhaben-seite .kachel[data-stand="fehlt"] .kachel__stand { margin-top: auto; }

/*
 * DIE FEHLENDE KACHEL FRAGT ERST (Sichtprüfung 09.09.).
 *
 * SEIN BEFUND, wörtlich: „Das Fest ist standardmäßig ausgegraut, wenn man aber
 * draufklickt wird sofort eins hinzugefügt und man kann es dann im Nachhinein
 * nicht mehr weg machen. Deshalb vielleicht vorher noch eine Bestätigung."
 *
 * Beides stimmte. Der Klick legte den Bereich an und sprang gleich auf dessen
 * Unterseite — ein Fehlklick war nicht zu bemerken und nicht zu widerrufen.
 *
 * WARUM `<details>` UND KEIN ZWEITER SEITENAUFRUF (Muster F1, von ihm gewählt):
 * Die Frage steht an Ort und Stelle, ohne Seitenwechsel und ohne Dialogfenster,
 * und sie braucht kein Skript. Nochmal auf die Kachel geklickt bricht ab — die
 * Zusammenfassung sagt im offenen Zustand ausdrücklich, dass sie das tut.
 * Angelegt wird erst mit dem Knopf darin, und der geht an die Route, die es
 * schon gibt.
 *
 * KEIN „WIEDER ENTFERNEN". Die Route kann es (faelle.mjs:124, solange nichts
 * bearbeitet ist), aber er hat F1 gewählt und nicht F3. Der Weg bleibt
 * unverbaut, falls die Frage im Gebrauch nicht reicht.
 *
 * DAS POLSTER SITZT AN DER ZUSAMMENFASSUNG, nicht an der Kachel. Läge es an
 * der Kachel, wäre ein 16 px breiter Ring um die Aufforderung herum nicht
 * anklickbar — bei einer Kachel, deren ganzer Zweck das Anklicken ist.
 */
.vorhaben-seite details.kachel { padding: 0; }
.vorhaben-seite details.kachel > summary { display: flex; flex: 1; flex-direction: column; align-items: stretch; padding: var(--s4); padding-right: var(--s5); cursor: pointer; list-style: none; }
.vorhaben-seite details.kachel > summary::-webkit-details-marker { display: none; }
.vorhaben-seite details.kachel > summary::marker { content: ""; }
.vorhaben-seite details.kachel[open] { border-style: solid; border-color: var(--akzent); background: var(--akzent-hell); }
.vorhaben-seite details.kachel[open] .vorhaben-bereichsymbol { background: var(--weiss); color: var(--akzent); border-color: var(--vh-kacheloffen); }
.vorhaben-seite details.kachel[open] .kachel__pfeil { display: none; }
.kachel__stand--auf { display: none; }
.vorhaben-seite details.kachel[open] .kachel__stand--zu { display: none; }
.vorhaben-seite details.kachel[open] .kachel__stand--auf { display: block; }
.kachel__frage { padding: 0 var(--s4) var(--s4); }
.kachel__frage p { margin: 0 0 .9rem; font-size: .8rem; line-height: 1.55; color: var(--ink-2); }
.kachel__frage button { width: 100%; }
.vorhaben-bereichhilfe { display: flex; align-items: flex-start; gap: .5rem; font-size: .75rem; color: var(--ink-2); line-height: 1.6; max-width: none; margin: 0; }
.vorhaben-bereichhilfe .zk { flex: none; width: .95rem; height: .95rem; margin-top: .15rem; }
.vorhaben-seite #antraege { margin: 0; padding: 1.4rem; scroll-margin-top: 7rem; }
.vorhaben-seite #antraege > .leise { font-size: .825rem; max-width: none; line-height: 1.6; }
.vorhaben-seite .antragszeile { grid-template-columns: minmax(0, 1fr); padding: 1.2rem; border-radius: .65rem; gap: .9rem; }
.vorhaben-seite .antragszeile__geber { font-size: .75rem; letter-spacing: 0; text-transform: none; color: var(--ink-2); margin-bottom: .6rem; font-weight: 500; }
.vorhaben-seite .antragszeile__titel { font-size: 1.075rem; line-height: 1.45; margin-bottom: .75rem; }
.vorhaben-seite .antragszeile__stand { font-size: .8rem; line-height: 1.65; }
.vorhaben-seite .antragszeile__stand.fristen { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--linie-2); }
.vorhaben-seite .antragszeile .knopf { justify-self: start; }
.vorhaben-eckdaten { padding: 1.3rem; margin: 0; }
.vorhaben-eckdaten .vorhaben-abschnittskopf { margin-bottom: 1.3rem; }
.vorhaben-eckdaten .formreihe { display: grid; gap: 1.3rem; }
.vorhaben-eckdaten .formreihe .formstueck { display: flex; gap: .7rem; min-width: 0; }
.vorhaben-eckdaten .formstueck + .formstueck { border-top: 1px solid var(--linie-2); padding-top: 1.2rem; }
.vorhaben-eckdaten :is(label, select, input, textarea) { font-size: .875rem; }
.vorhaben-eckdaten :is(select, input, textarea) { background: var(--vh-eckfeldgrund); border: 1px solid var(--vh-eckfeldrand); border-radius: .5rem; min-width: 0; width: 100%; }
.vorhaben-eckdaten :is(select, input) { min-height: 2.75rem; padding: .6rem; }
.vorhaben-eckdaten .feldpaar { gap: .55rem; }
.vorhaben-eckdaten .feldpaar .feld { min-width: 0; }
.vorhaben-eckdaten .feld__hilfe { font-size: .775rem; line-height: 1.65; margin: .45rem 0 0; color: var(--ink-2); }
.vorhaben-eckdaten button { min-height: 2.5rem; font-size: .8rem; padding: .45rem .8rem; }
.vorhaben-eckdaten .notizform { margin-top: 1.25rem; padding-top: 1.15rem; border-top: 1px solid var(--linie-2); }
.vorhaben-eckdaten .notizform .feld { margin-bottom: .75rem; }
.vorhaben-eckdaten textarea { min-height: 6rem; padding: .7rem; line-height: 1.6; }
.vorhaben-detail > .gefahr { margin-top: 1.8rem; border: 0; border-top: 1px solid var(--linie); border-radius: 0; background: transparent; box-shadow: none; }
.vorhaben-detail > .gefahr summary { padding: 1rem 0; min-height: 2.75rem; font-size: .8rem; }
#neues-vorhaben { scroll-margin-top: 7rem; }
.design-vorschau-hinweis { background: var(--vh-dunkel); color: var(--vh-zitrone); text-align: center; font-size: .75rem; padding: .45rem 1rem; }
@media (max-width: 68rem) {
  .vorhaben-arbeitsplatz { grid-template-columns: minmax(0, 1fr) 19rem; gap: 1rem; }
  .vorhaben-seite .kacheln { grid-template-columns: 1fr; }
  .vorhaben-weiter { grid-template-columns: 3rem minmax(0, 1fr); }
  .vorhaben-weiter .knopf { grid-column: 2; justify-self: start; }
}
@media (max-width: 60rem) {
  .vorhaben-seite .anlegen { grid-template-columns: 1fr; }
  .vorhaben-seite .anlegen__lesen { border-left: 0; }
  .vorhaben-arbeitsplatz { grid-template-columns: 1fr; }
  .vorhaben-seite .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vorhaben-eckdaten .formreihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vorhaben-eckdaten .formstueck + .formstueck { border: 0; padding-top: 0; }
  .vorhaben-zeile { grid-template-columns: 2.6rem minmax(0, 1fr) auto; column-gap: .9rem; }
  .vorhaben-symbol { width: 2.6rem; height: 2.6rem; }
  /*
   * DER AUFGEKLAPPTE KASTEN WIRD HIER SCHMALER (Sichtprüfung 09.09.).
   *
   * Zwischen diesem Umbruch und dem bei 40rem steht die Karte noch dreispaltig.
   * Mit den 20rem der breiten Fassung nahm die dritte Spalte dort 340 von 632
   * Pixeln — und der Titel brach im aufgeklappten Zustand auf drei Zeilen. Am
   * Rechner, wo der Copilot bedient wird, tritt das nur beim verkleinerten
   * Fenster auf; hässlich ist es trotzdem.
   */


}
@media (max-width: 40rem) {
  .vorhaben-seite { padding: 1.5rem 1rem 3rem; }
  .vorhaben-kopf { align-items: flex-start; flex-direction: column; gap: 1.15rem; margin-bottom: 1.75rem; }
  .vorhaben-desktop { display: none; }
  .vorhaben-kopf > .knopf { width: 100%; }
  .vorhaben-abschnittskopf { flex-wrap: wrap; }
  /*
   * DIE SCHMALE FASSUNG BRAUCHT IHRE EIGENEN FELDER (nachgezogen 10.09.).
   *
   * `grid-template-areas` bestimmt auch, WIE VIELE Spalten das Raster hat. Die
   * breite Fassung nennt drei; nur `grid-template-columns` auf zwei zu setzen,
   * hätte eine dritte Geisterspalte stehen lassen und `grid-area: aktionen`
   * hätte gegen das alte `grid-column: 2` gearbeitet. Der Punkt vor „aktionen"
   * ist die leere Zelle unter dem Symbol.
   */
  .vorhaben-zeile { grid-template-columns: 2.5rem minmax(0, 1fr);
    grid-template-areas: "symbol inhalt" ". aktionen" "werkstatt werkstatt";
    padding: 1rem; column-gap: .8rem; row-gap: .6rem; align-items: start; }
  .vorhaben-zeile__aktionen { flex-direction: row; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }

  .vorhaben-oeffnen { padding: .45rem .7rem; }
  .vorhaben-zeile__meta { flex-direction: column; gap: .3rem; }
  .vorhaben-seite .anlegen__schreiben, .vorhaben-seite .anlegen__lesen { padding: 1.25rem; }
  .vorhaben-seite .anlegen__knopfzeile { flex-direction: column; }
  .vorhaben-seite .anlegen__knopfzeile button { width: 100%; }
  .vorhaben-seite .anlegen__knopfzeile .anlegen__fein { max-width: none; }
  .vorhaben-seite .anlegen__marke { flex-wrap: wrap; }
  .vorhaben-weiter { padding: 1.2rem; gap: .8rem; grid-template-columns: 1fr; }
  .vorhaben-weiter__symbol { display: none; }
  .vorhaben-weiter .knopf { grid-column: 1; width: 100%; white-space: normal; }
  .vorhaben-seite .kacheln, .vorhaben-eckdaten .formreihe { grid-template-columns: 1fr; }
  .vorhaben-eckdaten .formstueck + .formstueck { border-top: 1px solid var(--linie-2); padding-top: 1.2rem; }
  .vorhaben-seite #antraege { padding: 1.2rem; }
  .vorhaben-seite .antragszeile { padding: 1rem; }
  .vorhaben-seite .antragszeile .knopf { width: 100%; white-space: normal; }
  .vorhaben-detailkopf__meta { align-items: flex-start; }
  .vorhaben-detailkopf__meta > span:last-child { align-items: flex-start; }
  .vorhaben-detailkopf__meta .zk { margin-top: .15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .vorhaben-seite *, .vorhaben-seite *::before, .vorhaben-seite *::after { transition: none; scroll-behavior: auto; }
}
@media print {
  .vorhaben-seite { max-width: none; padding: 0; }
  .vorhaben-arbeitsplatz { display: block; }
  .vorhaben-seite :is(.vorhaben-weiter, .vorhaben-werkstatt, .gefahr, .anlegen) { display: none; }
}

/* Die vier Stationen des Antrags, im selben Rahmen wie die Vorhaben. */
.antrag-seite { --antrag-feldgrund: var(--vh-eckfeldgrund); --antrag-wegweiser-abstand: calc(var(--kopf-hoch) + 1rem); }
.antrag-brotkrumen { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; color: var(--ink-2); font-size: 1rem; margin: 0 0 1.4rem; }
.antrag-brotkrumen a { text-decoration: none; padding: .3rem 0; }
.antrag-brotkrumen a:hover { text-decoration: underline; }
.antrag-seite > .seitenkopf { margin-bottom: 1.75rem; padding: 0; }
.antrag-seite > .seitenkopf h1 { font-size: clamp(1.9rem, 3vw, 2.45rem); max-width: 62rem; margin: .7rem 0; }
.antrag-kopfmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.antrag-kopfmeta .vorhaben-kicker { margin: 0; }
.antrag-statuschip { display: inline-flex; padding: .15rem .7rem; border-radius: 2rem; color: var(--akzent-tief); background: var(--akzent-hell); font-size: .875rem; font-weight: 650; }
.antrag-statuschip[data-status="abgelehnt"] { background: var(--linie-2); color: var(--ink-2); }
.antrag-seite .antrag-geber { color: var(--ink-2); max-width: none; font-size: 1rem; margin-bottom: .65rem; }
.antrag-seite > .seitenkopf .fristen { display: inline-block; margin: .15rem 0 0; padding: .4rem .7rem; border: 1px solid var(--linie); border-radius: .5rem; background: var(--karte); font-size: 1rem; color: var(--ink-2); }
.antrag-seite > .seitenkopf .fristen[data-lage="dringend"], .antrag-seite > .seitenkopf .fristen[data-lage="verstrichen"] { background: var(--amber-hell); border-color: var(--amber); color: var(--amber); }
.antrag-wegweiser { flex: none; padding: 1rem .4rem .4rem; border: 1px solid var(--linie); border-radius: .9rem; background: var(--karte); box-shadow: var(--schatten); }
.antrag-wegweiser > .vorhaben-kicker { margin: 0 .95rem .6rem; font-size: .875rem; }
.antrag-seite .schritte { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; border: 0; border-radius: 0; background: transparent; padding: 0; margin: 0; overflow: visible; }
.antrag-seite .schritte .schritt { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .8rem .95rem; border: 0; box-shadow: none; border-radius: .6rem; margin: 0; background: transparent; }
.antrag-seite .schritte .schritt:hover { background: var(--akzent-hell); }
.antrag-seite .schritte .schritt[aria-current="step"] { background: var(--vorhaben-dunkel); color: var(--weiss); }
.antrag-seite .schritt__punkt { display: grid; place-items: center; flex: 0 0 2.2rem; width: 2.2rem; height: 2.2rem; background: var(--grund); border: 1px solid var(--linie); color: var(--ink-2); font-size: 1rem; font-weight: 700; }
.antrag-seite .schritt[data-stand="erledigt"] .schritt__punkt { background: var(--akzent-hell); color: var(--akzent); border-color: var(--vh-symbolrand); }
.antrag-seite .schritt[aria-current="step"] .schritt__punkt { background: var(--vorhaben-zitrone); color: var(--vorhaben-dunkel); border-color: var(--vorhaben-zitrone); }
.antrag-seite .schritt__text { min-width: 0; gap: .15rem; }
.antrag-seite .schritt__text b { font-size: 1rem; }
.antrag-seite .schritt__text .leise { font-size: .875rem; line-height: 1.4; }
.antrag-seite .schritt[aria-current="step"] .leise { color: var(--vorhaben-helltext); }
.antrag-seite > .spalten { grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.8rem; align-items: start; }
.antrag-seite > .spalten > div { min-width: 0; }
/* Die Leiste klebt beim Scrollen unter der Kopfleiste, und der Wegweiser
   steht darin oben — er bleibt damit auch dann im Bild, wenn die Leiste
   höher als das Fenster wird.
   KEIN DECKEL UND KEIN ZWEITER SCROLLBEREICH. Beides stand hier: die Leiste
   war auf Fensterhöhe gedeckelt und der Kontextblock scrollte in sich
   selbst. Bei einem 900 px hohen Fenster waren so 39 % der Hinweise
   sichtbar, der Rest lag hinter einer kaum erkennbaren zweiten Scrollkante.
   Was hier steht, muss kurz genug sein, um ganz zu stehen — alles andere
   gehört in die Hauptspalte. */
.antrag-seite .antrag-seitenleiste { position: sticky; top: var(--antrag-wegweiser-abstand); display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.antrag-kontext { min-width: 0; }
.antrag-aufgabe { margin-bottom: 1.45rem; }
.antrag-aufgabe h2 { margin: .4rem 0 .65rem; font-size: 1.5rem; line-height: 1.3; }
.antrag-aufgabe > p:last-child { color: var(--ink-2); font-size: 1rem; line-height: 1.65; max-width: 43rem; }
.antrag-seite .antrag-kontext .karte { padding: 1.25rem; margin: 0 0 1rem; border-radius: .85rem; box-shadow: none; }
.antrag-kontext .karte h2 { font-size: 1rem; line-height: 1.45; margin-bottom: .65rem; }
.antrag-kontext .karte :is(p, li, dd) { font-size: 1rem; line-height: 1.7; }
.antrag-kontext .karte ul { padding-left: 1.05rem; }
.antrag-kontext .karte p { margin-bottom: .7rem; }
.antrag-kontext .karte .leise { font-size: .875rem; }
.antrag-kontext .verlangt dt { font-size: .875rem; color: var(--ink-2); margin-top: .95rem; }
.antrag-begleitung { padding: 1.3rem; border: 1px solid var(--vh-anlegenrand); border-radius: .85rem; background: var(--akzent-hell); }
.antrag-begleitung__kopf { display: flex; align-items: center; gap: .5rem; color: var(--akzent); font-weight: 700; font-size: 1rem; padding-bottom: .9rem; margin-bottom: 1rem; border-bottom: 1px solid var(--vh-lesenkante); }
.antrag-begleitung__kopf .zk { width: 1.1rem; height: 1.1rem; }
.antrag-begleitung h3 { font-size: 1rem; margin: 1.1rem 0 .35rem; line-height: 1.4; }
.antrag-begleitung p { font-size: 1rem; line-height: 1.7; color: var(--ink-2); margin: 0; }
.antrag-begleitung > a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; padding: .75rem 0 0; border-top: 1px solid var(--vh-lesenkante); font-size: 1rem; font-weight: 650; text-decoration: none; }
.antrag-begleitung > a:hover { text-decoration: underline; }
.antrag-fragen { counter-reset: antrag-frage; }
/* EINE KANTE FÜR DIE GANZE KARTE. Die Nummer hängt links außen, Fragetitel,
   Hilfetext und Eingabefeld beginnen darunter auf derselben Linie. Zuvor war
   nur der Titel um die Nummer eingerückt und alles darunter sprang um 2,6 rem
   nach links zurück. */
.antrag-fragen > .feld { position: relative; counter-increment: antrag-frage; padding: 1.4rem 1.4rem 1.4rem 4rem; margin: 0 0 1rem; border: 1px solid var(--linie); border-radius: .85rem; background: var(--karte); box-shadow: var(--schatten); }
.antrag-fragen > .feld::before { content: counter(antrag-frage, decimal-leading-zero); position: absolute; left: 1.4rem; top: 1.35rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: .5rem; background: var(--akzent-hell); color: var(--akzent); font-weight: 700; font-size: .875rem; }
.antrag-fragen > .feld > label { min-height: 1.9rem; margin: 0 0 .85rem; font-size: 1rem; font-weight: 700; line-height: 1.5; }
.antrag-fragen > .feld > label > .leise { font-size: .875rem; font-weight: 500; white-space: nowrap; color: var(--ink-2); }
.antrag-fragen > .feld > .leise { max-width: none; color: var(--ink-2); font-size: 1rem; line-height: 1.7; margin-bottom: .9rem; }
.antrag-fragen > .feld[data-uebernommen="ja"] { border-left: 3px solid var(--salbei); padding-left: calc(4rem - 2px); }
.antrag-fragen > .feld[data-uebernommen="ja"]::before { left: calc(1.4rem - 2px); }
/* JEDES FELD DER ANTRAGSSTRECKE IN DER SEITENSCHRIFT (Gründerbefund 16.09.2026).
   Bis dahin standen die Felder bei 16 px — größer als jeder Text drumherum
   (Fragetitel und Hilfetext 1 rem). Eine Antwort aus fünf Zeilen stand
   abgeschnitten im Feld, und den Ziehregler unten rechts kennt kaum jemand.
   Zuerst wurden nur die Antwortfelder im Gespräch umgestellt; sein Urteil
   danach: „Bitte die anderen Textboxen auch noch anpassen". Deshalb gilt es
   jetzt für jedes Feld der Strecke — Gespräch, Rückfragen, Antragstext,
   Abschluss —, und Eingaben nebeneinander stehen nie in zwei Größen.
   TEXTFELDER WACHSEN MIT IHREM TEXT (`field-sizing: content`), gedeckelt bei
   70 vh; der Antragstext hat weiter unten seine eigene Mindest- und
   Höchsthöhe. Wo der Browser das nicht kennt, zieht web/app.js nach. */
.antrag-seite :is(textarea, select, input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"])) { font-size: 1rem; border: 1px solid var(--vh-feldrand); border-radius: .55rem; padding: .75rem .85rem; background: var(--antrag-feldgrund); color: var(--ink); min-width: 0; max-width: 100%; }
.antrag-seite textarea { display: block; width: 100%; line-height: 1.6; min-height: 5.5rem; max-height: 70vh; field-sizing: content; resize: none; }
.antrag-seite select { width: 100%; min-height: 2.85rem; }
.antrag-seite input[type="number"] { width: 100%; max-width: 15rem; font-variant-numeric: tabular-nums; }
.antrag-seite input[type="date"] { min-height: 2.85rem; width: 100%; }
.antrag-fragen > .feld > [data-rolle="herkunft"] { padding: .7rem .85rem; margin: .8rem 0 0; border-radius: .45rem; background: var(--akzent-hell); color: var(--akzent-tief); font-size: .875rem; line-height: 1.65; }
/* Der Balken trägt die Aktion, die eine Station abschließt: sichern auf
   Gespräch und Abschluss, weiterziehen auf Entwurf und Mappe. Vorher hingen
   „Neu erzeugen“, „Neu schreiben lassen“ und die beiden Weiter-Knöpfe
   linksbündig im Nichts, während dieselbe Handlung zwei Stationen weiter
   einen Balken hatte. */
.antrag-speichern { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.2rem 1.4rem; margin: 1.3rem 0; background: var(--vorhaben-dunkel); border-radius: .85rem; color: var(--weiss); }
.antrag-speichern > div:not(.antrag-speichern__knoepfe) { display: grid; gap: .25rem; min-width: 0; }
.antrag-speichern strong { font-size: 1rem; font-weight: 650; }
.antrag-speichern span { color: var(--vorhaben-helltext); font-size: .875rem; }
.antrag-speichern .knopf { background: var(--vorhaben-zitrone); color: var(--vorhaben-dunkel); border-color: var(--vorhaben-zitrone); }
.antrag-speichern .knopf:hover { background: var(--weiss); }
.antrag-speichern .knopf:focus-visible { outline-color: var(--weiss); }
/* Zwei Knöpfe im Balken — die Nebenaktion tritt zurück, statt neben der
   Hauptaktion ein zweites Mal zitronengelb zu leuchten. */
/* `flex: none` hält die beiden Knöpfe nebeneinander. Ohne das schrumpfte
   die Gruppe auf die Breite eines Knopfes und stapelte sie übereinander,
   während links im Balken Platz frei blieb. Reicht die Zeile nicht, bricht
   der Balken als Ganzes um — Text oben, Knöpfe darunter. */
.antrag-speichern__knoepfe { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; flex: none; }
.antrag-speichern__knoepfe > form { margin: 0; }
.antrag-speichern .knopf[data-art="leise"] { background: transparent; color: var(--weiss); border-color: var(--vorhaben-helltext); }
.antrag-speichern .knopf[data-art="leise"]:hover { background: var(--vorhaben-helltext); color: var(--vorhaben-dunkel); }
/* Das Auffrischen bereits erzeugter Dateien ist keine Hauptaktion: heller
   Grund, damit auf der Mappe nur ein Balken das Auge zieht. */
.antrag-speichern[data-art="leise"] { background: var(--karte); color: var(--ink); border: 1px solid var(--linie); }
.antrag-speichern[data-art="leise"] span { color: var(--ink-2); }
.antrag-speichern[data-art="leise"] .knopf[data-art="leise"] { background: var(--grund); color: var(--ink); border-color: var(--linie); }
.antrag-speichern[data-art="leise"] .knopf[data-art="leise"]:hover { background: var(--akzent-hell); color: var(--akzent-tief); }
.antrag-speichern[data-art="leise"] .knopf[data-art="leise"]:focus-visible { outline-color: var(--akzent); }
.antrag-speichern .antrag-speichern__kosten { display: block; margin-top: .45rem; line-height: 1.55; }

/* DIE KOSTEN-MARKE (server/ki-marke.mjs): dasselbe Zeichen an jedem Knopf,
   hinter dem ein Modell läuft oder ein KI-Entwurf verbraucht wird. Drei
   Farben, drei Bedeutungen — und die Bedeutung steht immer auch im Wort
   (ADR 11), nie nur in der Farbe:
     frei     grün      „KI · kostenlos"
     entwurf  bernstein „1 KI-Entwurf"   — hier kostet es
     ohne     grau      „kostenlos"      — kein Modell, keine Kosten
   `span.ki-marke` statt `.ki-marke`: Die Marke steht auch in Balken, deren
   `span`-Regel sonst Größe und Farbe überschriebe. Eigener Grund, damit sie
   auf dem dunklen Balken genauso lesbar ist wie auf einer weißen Karte. */
span.ki-marke { display: inline-flex; align-items: center; margin-right: .4rem; padding: .08rem .5rem; border-radius: 2rem; font-size: .75rem; font-weight: 700; line-height: 1.5; letter-spacing: .01em; white-space: nowrap; vertical-align: .05em; }
span.ki-marke[data-art="frei"] { background: var(--akzent-hell); color: var(--akzent-tief); }
span.ki-marke[data-art="entwurf"] { background: var(--amber-hell); color: var(--amber); }
span.ki-marke[data-art="ohne"] { background: var(--linie-2); color: var(--ink-2); }
/* Knopf und Marke auf einer Zeile — die Marke steht rechts neben dem Knopf,
   den sie betrifft, damit man sie vor dem Klick liest. */
.ki-knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin: 0; }
.antrag-seite #texteditor { padding: 1.6rem; }
.antrag-seite #texteditor > h2 { font-size: 1.3rem; }
.antrag-seite #texteditor > p { font-size: .875rem; color: var(--ink-2); max-width: none; }
.antrag-seite .antrag-textfeld { margin: 1.5rem 0; padding-top: 1.4rem; border-top: 1px solid var(--linie-2); }
.antrag-seite .antrag-textfeld > label { display: block; margin-bottom: .55rem; font-size: 1rem; }
.antrag-seite .antrag-textfeld > p { max-width: none; font-size: 1rem; line-height: 1.6; }
/* DAS FELD WÄCHST MIT SEINEM TEXT. Der Antragstext ist regelmäßig länger als
   15 rem; er stand dann in einem Guckloch mit eigener Scrollleiste, genau an
   der Stelle, wo der Verein ihn prüfen soll. `field-sizing: content` (seit
   dem 16.09.2026 in der Grundregel aller Felder der Strecke, oben) lässt das
   Feld auf seinen Inhalt wachsen; wo der Browser das noch nicht kennt, zieht
   web/app.js nach. Nach oben deckelt `max-height`, damit ein sehr langer Text
   nicht die ganze Seite zur Textwand macht. */
.antrag-seite .antrag-textfeld textarea { background: var(--weiss); }
.antrag-seite .antrag-textfeld textarea[rows="8"] { min-height: 15rem; max-height: 80vh; }

/* Die Rückfrage vor dem Überschreiben — die einzige Stelle der Strecke, an
   der etwas unwiederbringlich verloren gehen kann. */
.antrag-seite .antrag-ueberschreiben { padding: 1.5rem 1.6rem; margin: 0 0 1.5rem; border: 1px solid var(--vh-amberrand); border-left: 4px solid var(--amber); background: var(--sand-hell); }
.antrag-seite .antrag-ueberschreiben h2 { font-size: 1.2rem; margin: 0 0 .6rem; }
.antrag-seite .antrag-ueberschreiben p { font-size: 1rem; line-height: 1.65; max-width: 44rem; margin: 0 0 1.2rem; }
.antrag-ueberschreiben__tat { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.antrag-ueberschreiben__tat form { margin: 0; }
.antrag-seite .antrag-bestaetigung { padding: .8rem; border: 1px solid var(--linie); border-radius: .6rem; font-size: .875rem; background: var(--grund); }
.antrag-seite .antrag-dokument { padding: 2.2rem; border-top: 4px solid var(--akzent); line-height: 1.85; }
.antrag-seite .antrag-dokument h2 { font-size: 1.25rem; margin-top: 1.5rem; }
.antrag-seite .antrag-dokument h2:first-child { margin-top: 0; }
.antrag-seite .antrag-dokument p { max-width: none; font-size: 1rem; }
.antrag-seite .antrag-finanzuebersicht { gap: 1rem; }
.antrag-seite .antrag-finanzuebersicht .karte { margin: 0; padding: 1.2rem; }
.antrag-seite .tabelle { width: 100%; font-size: .875rem; }
.antrag-seite .tabelle td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* EIN FARBIGER BLOCK JE SEITE, UND DER TRÄGT DIE HAUPTAKTION.
   Die Antragsseite hatte drei: einen sandfarbenen Zustandskasten, einen
   amber Sperrbalken und den dunkelgrünen Aktionsbalken — dazu zwei weitere
   Warnkästen. Nichts führte mehr zum Wichtigen, weil alles leuchtete.
   Der Zustandskasten sagt jetzt nur, wo man steht: heller Kartengrund,
   die Lage allein an der linken Kante. Die Farbfläche bleibt dem
   Erzeugen-Balken vorbehalten. */
.antrag-seite .antrag-versandstatus { padding: 1.35rem; background: var(--karte); border: 1px solid var(--linie); border-left: 4px solid var(--amber); }
.antrag-seite .antrag-versandstatus h2 { font-size: 1.2rem; }
.antrag-seite .antrag-versandstatus p { font-size: 1rem; line-height: 1.65; max-width: 44rem; }
.antrag-seite .antrag-versandstatus > a { display: inline-block; margin-top: .35rem; font-weight: 650; }
.antrag-seite .antrag-versandstatus[data-bereit="ja"] { border-left-color: var(--akzent); }
/* DER KI-WEG AN EINER STELLE. Überschrift und Chip in einer Zeile, darunter
   die Metazeile mit Zeitpunkten (nie in der Überschrift), die Kette, ein Satz
   und die Handlung. Weiße Karte ohne Farbfläche: Die Farbe trägt der Chip,
   nicht der Kasten — die Seite hat genug, was leuchtet. */
.antrag-seite .antrag-werkbank { padding: 1.5rem 1.6rem 1.4rem; margin: 0 0 1.3rem; }
.antrag-werkbank__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.antrag-werkbank__kopf h2 { font-size: 1.25rem; line-height: 1.3; margin: 0; }
.antrag-werkbank__stand { display: inline-flex; align-items: center; padding: .2rem .7rem; border-radius: 2rem; font-size: .8rem; font-weight: 650; white-space: nowrap; background: var(--linie-2); color: var(--ink-2); }
.antrag-werkbank[data-lage="bereit"] .antrag-werkbank__stand,
.antrag-werkbank[data-lage="bearbeitet"] .antrag-werkbank__stand { background: var(--akzent-hell); color: var(--akzent-tief); }
.antrag-werkbank[data-lage="geschrieben"] .antrag-werkbank__stand { background: var(--gruen-hell); color: var(--gruen); }
.antrag-werkbank[data-lage="fehlt"] .antrag-werkbank__stand { background: var(--amber-hell); color: var(--amber); }
.antrag-werkbank__meta { margin: .3rem 0 0; font-size: .875rem; color: var(--ink-2); }
.antrag-seite .antrag-werkbank__satz { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.65; color: var(--ink-2); max-width: 44rem; }
.antrag-werkbank__tat { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.antrag-werkbank__tat form { margin: 0; }
.antrag-seite .antrag-werkbank__tat > .leise { margin: 0; font-size: .875rem; max-width: none; }
.antrag-werkbank .ausweg { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--linie-2); }

/* DAS BILD ÜBER DEM SCHREIBKNOPF: aus diesen Angaben wird dieser Text
   (16.09.2026, ersetzt die waagerechte Kette). Zwei Teile auf einer hellen
   Fläche, dazwischen der Copilot mit Pfeil — keine Nummern, keine Stationen,
   damit es nicht wie eine zweite Fassung des Wegweisers rechts aussieht.
   Die Fragen tragen ihren Wortlaut, einzeilig gekappt; die grauen Zeilen
   rechts sind das Blatt, das daraus wird. Unter 40 rem stehen die Teile
   untereinander, der Pfeil zeigt dann nach unten. */
.antrag-werkbild { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; margin: 1.1rem 0 1rem; padding: 1rem; border-radius: .75rem; background: var(--grund); }
.antrag-werkbild__angaben, .antrag-werkbild__blatt { display: grid; align-content: start; gap: .45rem; min-height: 6.2rem; padding: .85rem 1rem; border-radius: .6rem; background: var(--karte); box-shadow: 0 0 0 1px var(--linie-2); }
.antrag-werkbild b { font-size: .9rem; line-height: 1.3; }
.antrag-werkbild__angaben > span { display: flex; align-items: center; gap: .4rem; min-width: 0; font-size: .85rem; line-height: 1.35; color: var(--ink-2); }
.antrag-werkbild__angaben > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.antrag-werkbild__angaben .zk { flex: none; width: 1rem; height: 1rem; color: var(--akzent); }
.antrag-werkbild__rest { padding-left: 1.4rem; }
.antrag-werkbild__copilot { display: grid; justify-items: center; gap: .2rem; color: var(--akzent); font-size: .75rem; font-weight: 650; }
.antrag-werkbild__copilot .zk { width: 2.2rem; height: 2.2rem; padding: .45rem; box-sizing: border-box; border-radius: 50%; background: var(--akzent-hell); }
.antrag-werkbild__copilot::after { content: "→"; font-size: 1.1rem; line-height: 1; }
.antrag-werkbild__blatt i { display: block; height: .45rem; border-radius: .3rem; background: var(--linie-2); }
.antrag-werkbild__blatt i:nth-of-type(1) { width: 92%; }
.antrag-werkbild__blatt i:nth-of-type(3) { width: 78%; }
.antrag-werkbild__blatt i:nth-of-type(4) { width: 96%; }
.antrag-werkbild__blatt i:nth-of-type(5) { width: 60%; }
@media (max-width: 40rem) {
  .antrag-werkbild { grid-template-columns: minmax(0, 1fr); }
  .antrag-werkbild__copilot::after { content: "↓"; }
}

/* Die Hinweise aus dem Entwurf: lesbar, gezählt, ohne Kontrollkästchen. */
.antrag-luecken { margin: 1.2rem 0 .4rem; padding: 1.2rem 1.3rem; border: 1px solid var(--vh-amberrand); border-left: 4px solid var(--amber); border-radius: .7rem; background: var(--sand-hell); }
/* Speichern und Abhaken nebeneinander: Beides schließt die Arbeit am Text ab,
   und das Abhaken speichert den Text gleich mit. */
.antrag-textfeld__tat { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.4rem; }
.antrag-luecken > strong { display: block; font-size: 1rem; margin-bottom: .3rem; }
.antrag-luecken > .leise { font-size: .875rem; line-height: 1.6; margin: 0 0 .8rem; max-width: 44rem; }
.antrag-luecken ul { margin: 0 0 1rem; padding-left: 1.15rem; }
.antrag-luecken li { font-size: .875rem; line-height: 1.6; }
.antrag-luecken li + li { margin-top: .5rem; }
.antrag-dateibereich { margin: 1.6rem 0; }
.antrag-seite .antrag-downloads { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; gap: .85rem; }
.antrag-seite .antrag-downloads li { position: relative; display: flex; gap: .55rem; border: 1px solid var(--linie); border-radius: .8rem; padding: 1.25rem; min-width: 0; }
.antrag-seite .antrag-downloads li:last-child { border-bottom: 1px solid var(--linie); }
.antrag-dateizeichen { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--akzent); background: var(--akzent-hell); border-radius: .45rem; padding: .45rem .6rem; margin-bottom: .4rem; }
.antrag-dateizeichen .zk { width: 1.1rem; height: 1.1rem; }
.antrag-dateizeichen > span { font-weight: 700; letter-spacing: .04em; }
.antrag-seite .antrag-downloads a { font-size: 1rem; line-height: 1.5; text-decoration: none; }
.antrag-seite .antrag-downloads a:hover { text-decoration: underline; }
.antrag-seite .antrag-downloads .leise { font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
.antrag-seite :is(#abschluss, #versandcheck, #abschicken, #texteditor, [id^="f_"]) { scroll-margin-top: 6rem; }
.antrag-seite #abschluss, .antrag-seite #versandcheck { padding: 1.4rem; }
.antrag-seite #abschluss > .leise { font-size: 1rem; line-height: 1.7; }
.antrag-seite .pruefgruppe { padding: 1rem; border-radius: .6rem; background: var(--grund); }
.antrag-seite .pruefgruppe li { font-size: .875rem; line-height: 1.6; }
.antrag-seite .pruefgruppe li + li { margin-top: .75rem; }
.antrag-seite .pruefgruppe li a { display: inline-block; margin-left: .25rem; font-weight: 650; }
.antrag-seite .nachweise li { padding: 1rem 0; border-bottom: 1px solid var(--linie-2); }
.antrag-seite .nachweise li:last-child { border: 0; }
.antrag-seite .nachweise li > span { font-size: 1rem; line-height: 1.6; }
/* Der Abhak-Knopf ist so breit wie sein längster Zustand, damit die Zeile
   beim Klicken nicht springt. Erledigte Punkte treten zurück — die Liste
   zeigt dann auf einen Blick, was noch aussteht. */
.antrag-seite .nachweise .knopf[data-erledigt] { min-width: 9.5rem; justify-content: center; }
.antrag-seite .nachweise li[data-erledigt="ja"] > span { color: var(--ink-2); }
.antrag-seite .antrag-abschlussform { padding: 1.4rem; margin-top: 0; }
.antrag-statuswahl { border: 0; padding: 0; margin: 0 0 1.6rem; min-width: 0; }
.antrag-statuswahl legend { font-size: 1.1rem; font-weight: 700; margin: 0 0 1rem; padding: 0; }
.antrag-statuswahl > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.antrag-statuswahl .wahl { display: flex; align-items: flex-start; gap: .75rem; margin: 0; border: 1px solid var(--linie); border-radius: .7rem; padding: 1rem; background: var(--weiss); min-width: 0; }
.antrag-statuswahl .wahl:hover { border-color: var(--akzent); }
.antrag-statuswahl .wahl:has(input:checked) { border-color: var(--akzent); background: var(--akzent-hell); box-shadow: inset 0 0 0 1px var(--akzent); }
.antrag-statuswahl .wahl input { margin-top: .25rem; accent-color: var(--akzent); }
.antrag-statuswahl .wahl b { display: block; font-size: 1rem; text-transform: capitalize; }
.antrag-statuswahl .wahl .leise { display: block; font-size: .875rem; margin-top: .35rem; line-height: 1.5; }
.antrag-abschlussdaten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; border-top: 1px solid var(--linie-2); padding-top: 1.35rem; }
.antrag-abschlussdaten > .feld { display: flex; flex-direction: column; margin: 0; }
.antrag-abschlussdaten label { font-size: 1rem; font-weight: 650; }
.antrag-abschlussdaten .leise { font-size: .875rem; line-height: 1.65; margin: .5rem 0 .8rem; }
.antrag-abschlussdaten input { margin-top: auto; }
.antrag-abschlussform .antrag-speichern { margin-top: 1.6rem; }
@media (max-width: 68rem) {
  .antrag-seite > .spalten { grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.2rem; }
  .antrag-seite .schritte .schritt { padding: .75rem .65rem; gap: .55rem; }
}
@media (min-width: 60.001rem) and (max-width: 1050px) {
  .antrag-seite { --antrag-wegweiser-abstand: calc(var(--kopf-hoch) + 4rem); }
}
/* Bei flachen Fenstern rücken die vier Schritte enger zusammen. Ein
   Scrollbereich entsteht hier nicht mehr: die Leiste klebt mit ihrer
   Oberkante, der Wegweiser steht darin oben und bleibt damit im Bild,
   auch wenn die Hinweise darunter unten hinausragen. */
@media (min-width: 60.001rem) and (max-height: 640px) {
  .antrag-seite .schritte .schritt { padding-block: .5rem; }
}
@media (max-width: 60rem) {
  .antrag-seite > .spalten { display: flex; flex-direction: column; }
  .antrag-seite > .spalten > div { width: 100%; }
  .antrag-seite .antrag-seitenleiste { display: contents; }
  .antrag-wegweiser { order: -1; width: 100%; }
  .antrag-seite .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
  .antrag-seite .antrag-kontext { width: 100%; margin-top: .5rem; }
}
@media (max-width: 40rem) {
  .antrag-seite > .seitenkopf h1 { font-size: 1.85rem; }
  .antrag-seite .schritte .schritt { padding: .7rem .55rem; }
  .antrag-seite .schritt__punkt { flex-basis: 1.8rem; width: 1.8rem; height: 1.8rem; font-size: .875rem; }
  .antrag-seite .schritt__text b { font-size: 1rem; }
  .antrag-seite .schritt__text .leise { font-size: .875rem; }
  .antrag-aufgabe h2 { font-size: 1.35rem; }
  /* Am Telefon ist die Breite zu knapp, um 2,5 rem an die Nummer zu geben:
     sie rückt über den Fragetitel, damit alles auf einer Kante bleibt. */
  .antrag-fragen > .feld { padding: 3.2rem 1.1rem 1.1rem; }
  .antrag-fragen > .feld::before { left: 1.1rem; top: 1.05rem; }
  .antrag-fragen > .feld[data-uebernommen="ja"] { padding-left: calc(1.1rem - 2px); }
  .antrag-fragen > .feld[data-uebernommen="ja"]::before { left: calc(1.1rem - 2px); }
  .antrag-fragen > .feld > label { padding-left: 0; }
  .antrag-speichern__knoepfe { flex-direction: column; align-items: stretch; }
  .antrag-speichern__knoepfe > form, .antrag-speichern__knoepfe .knopf { width: 100%; }
  .antrag-seite :is(textarea, select, input:not([type="radio"]):not([type="checkbox"])) { font-size: 1rem; }
  .antrag-seite :is(.antrag-downloads, .antrag-statuswahl > div, .antrag-abschlussdaten) { grid-template-columns: minmax(0, 1fr); }
  .antrag-seite .antrag-dokument, .antrag-seite #texteditor { padding: 1.2rem; }
  .antrag-speichern { align-items: stretch; flex-direction: column; padding: 1.1rem; }
  .antrag-seite .antrag-abschlussform { padding: 1.1rem; }
  .antrag-seite .antrag-begleitung { grid-column: auto; }
}
@media print {
  .antrag-seite .antrag-seitenleiste, .antrag-begleitung, .antrag-brotkrumen { display: none; }
  .antrag-seite > .spalten { display: block; }
  .antrag-fragen > .feld, .antrag-seite .antrag-downloads li { break-inside: avoid; }
}