/* --- Source Sans 3 ---------------------------------------------------------
   Selbst ausgeliefert unter static/vendor/, kein CDN (Bauplan 12.1). Herkunft,
   Version und Lizenz stehen in static/vendor/LIESMICH.md. Der Lizenztext ist
   unverändert aus dem npm-Paket kopiert; berichtigt ist allein die Urheberzeile,
   die dort „Google Inc.“ nannte statt Adobe – nachgelesen im Namenseintrag 0 der
   Schriftdateien selbst, nicht geraten.

   `font-display: swap`: die Seite steht sofort im Systemstapel da und tauscht die
   Schrift nach, statt einen halben Wimpernschlag leer zu bleiben.

   Zwei Schnitte (400 und 600), zwei Untermengen. `unicode-range` sorgt dafür, dass
   ein deutscher Text nur die beiden `latin`-Dateien lädt (rund 31 KB); `latin-ext`
   kommt erst bei einem Namen mit polnischem oder tschechischem Zeichen dazu. Damit
   bleibt die Seite deutlich unter den 300 KB aus Bauplan 14.1.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("vendor/source-sans-3/source-sans-3-latin-400-normal.27ab01c4cb50.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("vendor/source-sans-3/source-sans-3-latin-ext-400-normal.397d4f3b04fb.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("vendor/source-sans-3/source-sans-3-latin-600-normal.9a35cba76eda.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("vendor/source-sans-3/source-sans-3-latin-ext-600-normal.2d5f5a2133ba.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- Farbe, Schrift, Breite ------------------------------------------------
   Hausfarbe ist das TAK-Rot #E41F13 (Auftraggeber, 19.09.2026). Weil Rot die
   Hauptfarbe ist, kann es nicht zugleich „Achtung“ heißen: ein zerstörender Knopf
   ist nie gefüllt rot, sondern umrandet in --tak-rot-dunkler (Bauplan 14.1).

   Jeder Wert ist nachgerechnet (sRGB, WCAG 2.x). Zwei Ergebnisse steuern den Bau:
   * Weiß auf --tak-rot = 4,66:1 – besteht 4,5 knapp. Deshalb auf Rot NIE Text
     unter 17 px; ein Test rechnet das Verhältnis nach, damit ein späteres
     Aufhellen des Rots auffällt.
   * --tak-rot als TEXT auf --tak-grund = 4,47:1 – besteht NICHT. Roter Text und
     Links sind --tak-rot-dunkel (6,51) oder --tak-rot-dunkler (9,02).

   Zwei Randtoken, weil --tak-rand auf --tak-grund nur 1,72:1 hat: als Zier genügt
   das, für ein Bedienelement verlangt WCAG 1.4.11 aber 3:1. --tak-rand-bedien hat
   3,72:1 auf Grund und 3,39 auf Sand. Abweichung vom freigegebenen Entwurf, in
   ADR 0018 benannt.

   `color-scheme: light`: ohne dieses eine Wort dunkeln iOS und Android Felder und
   Bildlaufleisten von sich aus ein – ein halbes Dunkelthema, das niemand wollte.
   Eine echte dunkle Darstellung gibt es bewusst nicht (ADR 0018).
   ------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Rollennamen, keine Farbnamen: ein späterer Wechsel soll nicht lügen. */
  --tak-rot: #e41f13;              /* Kopfzeile, Hauptknopf – Fläche, nie Text   */
  --tak-rot-dunkel: #b5170e;       /* gedrückt, Links                            */
  --tak-rot-dunkler: #8e1109;      /* Link im Zeigen, Text auf hellem Rot, Rand  */
  --tak-rot-flaeche: #fceae9;      /* Hinweisfläche, Statuschip                  */
  --tak-rot-flaeche-rand: #f3cfcb;
  --tak-tinte: #1a1614;            /* Text                                       */
  --tak-grau: #6b625e;             /* Nebentext                                  */
  --tak-sand: #f4efe9;             /* Entwurfskarte, ruhige Fläche               */
  --tak-sand-rand: #e4dcd3;
  --tak-grund: #fbfaf9;            /* Seitenhintergrund                          */
  --tak-rand: #c9c0b9;             /* Zier: Trennlinien, Kartenkanten            */
  --tak-rand-bedien: #8c7f76;      /* Felder, Kacheln, umrandete Knöpfe (3:1)    */
  --tak-gesperrt-flaeche: #ede7e1; /* gesperrter Knopf; --tak-grau darauf 4,84:1 */

  /* Breiten. `.container` wächst bis 1320 px, aber Fließtext darf das nicht.
     `rem` hängt an der **Wurzelschrift**, und die bleibt 16 px – Bootstrap 5.3
     setzt kein `html { font-size }`, und diese Datei auch nicht. 38 rem sind
     also 608 px, nicht 684: bei der gemessenen mittleren Zeichenbreite von
     8,1 px (Source Sans 3, 18 px) rund **75 Zeichen** je Zeile. Wer hier die
     18 px je rem weiterrechnet, landet bei 84 Zeichen und über der Grenze. */
  --lesebreite: 38rem;             /* 608 px, rund 75 Zeichen bei 18 px          */
  --seitenbreite: 76rem;           /* 1216 px                                    */
  --spaltenbreite: clamp(12rem, 22vw, 18rem); /* Kontextspalte, höchstens 288 px */

  /* --- Übersetzung nach Bootstrap ------------------------------------------
     Hier und nirgends sonst. Was NICHT greift, steht darunter als eigene Regel:
     `.btn-*` trägt in bootstrap.min.css literale Hexwerte und liest --bs-primary
     nicht; `--bs-primary` allein bewirkt an Knöpfen nichts. */
  --bs-body-bg: var(--tak-grund);
  --bs-body-color: var(--tak-tinte);
  --bs-emphasis-color: var(--tak-tinte);
  --bs-secondary-color: var(--tak-grau);       /* trägt alle text-body-secondary */
  --bs-border-color: var(--tak-rand);
  --bs-primary: var(--tak-rot);
  --bs-primary-rgb: 228, 31, 19;
  --bs-link-color: var(--tak-rot-dunkel);
  --bs-link-color-rgb: 181, 23, 14;
  --bs-link-hover-color: var(--tak-rot-dunkler);
  --bs-link-hover-color-rgb: 142, 17, 9;

  /* Hinweis und Fehler teilen die Fläche und trennen sich über die FORM:
     der Fehler bekommt links einen 6-px-Balken (Bauplan 14.1). */
  --bs-warning-bg-subtle: var(--tak-rot-flaeche);
  --bs-warning-border-subtle: var(--tak-rot-flaeche-rand);
  --bs-warning-text-emphasis: var(--tak-rot-dunkler);
  --bs-danger-bg-subtle: var(--tak-rot-flaeche);
  --bs-danger-border-subtle: var(--tak-rot-flaeche-rand);
  --bs-danger-text-emphasis: var(--tak-rot-dunkler);
  --bs-info-bg-subtle: var(--tak-sand);
  --bs-info-border-subtle: var(--tak-sand-rand);
  --bs-info-text-emphasis: var(--tak-tinte);

  /* Schrift eine Stufe größer: mindestens ein Laientester ist über 65.
     Fließtext 18, Seitenüberschrift 30, Frageüberschrift 22. */
  --bs-body-font-size: 1.125rem;
  /* Der Systemstapel bleibt als Rückfall stehen: fällt die Schrift aus (Netz,
     Sperre, `font-display: swap` vor dem Nachladen), liest die Seite weiter. */
  --bs-body-font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Die Überschriftenleiter ------------------------------------------------
   **Ganz** neu gesetzt, nicht nur die obersten zwei Sprossen. Bootstrap steht
   für h3 bei 1,75 rem (28 px) und für h4 bei 1,5 rem (24 px); mit h1 = 30 und
   h2 = 22 stand der Seitentitel damit kleiner da als jede Zwischenüberschrift
   darunter (`/personen/`: „Personen“ 22 px über vier Blöcken zu 24 px). Für
   einen Leser über 65 war die Gliederung der Seite verkehrt herum.

   Die Leiter fällt monoton und endet auf der Grundschrift: keine Überschrift
   ist kleiner als der Fließtext (Bauplan 14.1). Unterschieden wird unten über
   das Gewicht, nicht über die Größe. Ein Test rechnet die Leiter nach.
   ------------------------------------------------------------------------- */
h1,
.h1 {
  font-size: 1.875rem; /* 30 px */
}

h2,
.h2 {
  font-size: 1.375rem; /* 22 px – die acht Fragen tragen `class="h2"` */
}

h3,
.h3 {
  font-size: 1.25rem; /* 20 px */
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-size: 1.125rem; /* 18 px – die Grundschrift ist das Mindestmaß */
  font-weight: 600;
}

/* --- Knöpfe ----------------------------------------------------------------
   Gleiche Spezifität wie Bootstrap; diese Datei lädt später und gewinnt damit.
   `.btn-*` trägt in bootstrap.min.css literale Hexwerte, ein `--bs-primary`
   auf `:root` bewirkt an Knöpfen nichts.
   ------------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--tak-rot);
  --bs-btn-border-color: var(--tak-rot);
  --bs-btn-hover-bg: var(--tak-rot-dunkel);
  --bs-btn-hover-border-color: var(--tak-rot-dunkel);
  --bs-btn-active-bg: var(--tak-rot-dunkler);
  --bs-btn-active-border-color: var(--tak-rot-dunkler);
  /* Gesperrt über eine eigene Fläche statt über Bootstraps Deckkraft-Trick:
     der multipliziert Kontraste und drückt sie unter 4,5:1. Die Deckkraft muss
     dafür **abgeschaltet** werden – Bootstrap setzt sie in `.btn` auf 0,65, und
     ohne die folgende Zeile blieben von den gerechneten 4,84:1 nur 2,49:1. */
  --bs-btn-disabled-opacity: 1;
  --bs-btn-disabled-bg: var(--tak-gesperrt-flaeche);
  --bs-btn-disabled-color: var(--tak-grau);
  --bs-btn-disabled-border-color: var(--tak-rand-bedien);
}

/* Der umrandete Knopf: Rückweg und Nebenweg. Gesperrt bekommt er dieselbe
   Behandlung wie der Hauptknopf – ohne die Zeilen trüge ein gesperrter
   `btn-outline-primary` Bootstraps Blau #0d6efd, die Farbe, die nicht mehr
   zum Haus gehört. */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger {
  --bs-btn-color: var(--tak-rot-dunkler);
  --bs-btn-border-color: var(--tak-rand-bedien);
  --bs-btn-hover-bg: var(--tak-rot-dunkler);
  --bs-btn-hover-border-color: var(--tak-rot-dunkler);
  --bs-btn-active-bg: var(--tak-rot-dunkler);
  --bs-btn-active-border-color: var(--tak-rot-dunkler);
  --bs-btn-disabled-opacity: 1;
  --bs-btn-disabled-color: var(--tak-grau);
  --bs-btn-disabled-border-color: var(--tak-rand-bedien);
}

/* Der **zerstörende** Knopf ist nicht gefüllt rot (die gesetzte Vorgabe), aber
   er ist auch nicht sein eigener Rückweg: Auf `zugehoerigkeit_entziehen.html`
   standen „Ja, entfernen“ und „Abbrechen“ pixelgleich nebeneinander, und wer
   schnell tippt, trifft dann mit 50 Prozent das Falsche.

   Unterschieden wird über die **Form** – 2 px Rand gegen 1 px –, nicht über die
   Farbe (Bauplan 14.1). Die Randfarbe ist zugleich die aus dem freigegebenen
   Entwurf: #8E1109 auf Weiß hat 9,40:1 und erfüllt die 3:1 aus WCAG 1.4.11
   mühelos; der schwächere Bedienrand stand hier nur aus Versehen. */
.btn-outline-danger {
  --bs-btn-border-color: var(--tak-rot-dunkler);
  --bs-btn-border-width: 2px;
}

.btn-light {
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--tak-rand-bedien);
  --bs-btn-color: var(--tak-tinte);
}

/* `.btn-danger` steht in keiner Vorlage mehr; falls doch einmal, soll er nicht
   gefüllt rot danebenstehen. Ein Test hält das repoweit fest. */
.btn-danger {
  --bs-btn-bg: #fff;
  --bs-btn-color: var(--tak-rot-dunkler);
  --bs-btn-border-color: var(--tak-rot-dunkler);
}

/* Der Fokusring. Zweifarbig, damit er auf Rot wie auf Grund sichtbar ist:
   --tak-tinte hat auf --tak-rot 3,85:1 und auf --tak-grund 17,2:1.
   Die zweite Regel ist nötig, weil Bootstrap an `.btn:focus-visible`
   `outline: 0` setzt und den Einzelselektor in der Spezifität schlägt – der
   frühere blaue Ring griff auf KEINEM Knopf. */
:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 3px solid var(--tak-tinte);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

/* Fehler trennt sich vom Hinweis über die Form, nicht über die Farbe:
   beide tragen dieselbe helle Fläche, der Fehler zusätzlich den Balken. */
.alert-danger {
  border-left: 6px solid var(--tak-rot-dunkler);
}

.umgebung-band {
  background: repeating-linear-gradient(-45deg, #ffe08a, #ffe08a 12px, #ffd24d 12px, #ffd24d 24px);
  color: var(--tak-tinte);
  font-weight: 700;
  text-align: center;
  /* Ohne `letter-spacing` und mit kürzerem Text (kern/context_processors.py)
     bleibt der Streifen auch bei 360 px einzeilig. */
  padding: 0.2rem 1rem;
}

/* Die Fußzeile ist auf nicht angemeldeten Seiten der **einzige** Weg zum
   Datenschutzhinweis. Sie steht deshalb in der Grundschrift, und ihre Links sind
   Tippflächen wie jede andere (Bauplan 14.1). */
.seitenfuss {
  color: var(--tak-grau);
}

.seitenfuss a {
  display: inline-block;
  padding-block: 0.9rem;
}

/* --- Der Rand der Bedienelemente -------------------------------------------
   Ohne diese Regel zeichnen `.form-control` und `.form-select` ihren Rand aus
   `--bs-border-color` und damit aus --tak-rand: 1,72:1 auf dem Seitengrund,
   weit unter den 3:1 aus WCAG 2.2, 1.4.11. Das zweite Randtoken war für genau
   diese Stelle angelegt und erreichte sie nie – ein Eingabefeld war formal
   unsichtbar und für einen Laientester mit beginnender Linsentrübung nur an
   seiner Beschriftung zu erahnen. `--tak-rand` bleibt, was er ist: Zier.
   ------------------------------------------------------------------------- */
.form-control,
.form-select,
.form-check-input {
  border-color: var(--tak-rand-bedien);
}

/* Mindesthöhen für Tippflächen (Bauplan 14.1: mindestens 48 CSS-Pixel).
   Bootstrap 5.3 setzt für .btn-lg keine feste Höhe; sie entsteht aus Schriftgröße und
   Innenabstand und liegt bei --bs-body-font-size: 1.125rem knapp unter der Vorgabe.

   Dazu die Schriftgröße: Bootstrap setzt in `.btn` `--bs-btn-font-size: 1rem`
   **literal**, nicht aus der Grundschrift. Ohne die zweite Zeile trügen 53 Knöpfe
   16 px – darunter die Sportartkacheln und sechs gefüllt rote, auf denen Weiß nur
   4,66:1 hat und deshalb nie unter 17 px stehen darf. */
.btn {
  min-height: 3rem;
  --bs-btn-font-size: var(--bs-body-font-size);
}

/* Auch ein Feld ohne `-lg` ist eine Tippfläche. Bootstrap rechnet `.form-select`
   bei --bs-body-font-size: 1.125rem auf rund 41 px und `.form-control` auf 38 –
   beides unter den 48 aus Bauplan 14.1. Heute tragen alle Felder `-lg`; die Regel
   fängt das nächstliegende Versehen ab.

   Sie steht **vor** der `-lg`-Regel: gleiche Spezifität, und weiter unten hätte
   sie die 56 px der großen Felder auf 48 zurückgezogen. */
.form-select,
.form-control {
  min-height: 3rem;
}

.btn-lg,
.form-control-lg,
.form-select-lg {
  min-height: 3.5rem;
  /* Die `.btn`-Regel oben steht später als Bootstraps `.btn-lg` und hätte dessen
     20 px sonst auf 18 zurückgezogen. */
  --bs-btn-font-size: 1.25rem;
}

/* --- Nichts unter der Grundschrift -----------------------------------------
   Die Zusage „18 px“ war bisher nur beim Fließtext angekommen: `.form-text`
   stand bei 15,75 px (0,875 em von 18) an 38 Erklärsätzen, `small` ebenso, die
   Fußzeile bei 14. Ein Test rechnet jede `font-size` dieser Datei nach.
   Unterschieden wird über die Farbe – und die trägt nirgends eine Aussage
   allein, der Text steht ohnehin da (Bauplan 14.1). */
.form-text,
small,
.small {
  font-size: var(--bs-body-font-size);
}

/* --- Seitengitter ----------------------------------------------------------
   Zwei Höchstbreiten statt einer. `.container` wächst bis 1320 px, aber am
   27-Zöller lief der Fließtext damit über rund 180 Zeichen je Zeile.
   `.seitengitter` ist die äußere Grenze, `--lesebreite` die für Fließtext,
   Formulare und Kartenstapel. `.breit` hebt sie auf – für die Listen, die
   Tabellen in Listenform sind.
   ------------------------------------------------------------------------- */
.seitengitter {
  width: 100%;
  max-width: var(--seitenbreite);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Kein eigener Innenabstand mehr: den bringt `.seitengitter` mit, sonst stünde
   am Handy ein doppelter Rand von 28 px. */
main.container {
  max-width: var(--lesebreite);
  padding-inline: 0;
}

/* `main.container` ist Typ **und** Klasse (0-1-1). Ein bloßes `.breit` (0-1-0)
   verliert dagegen, gleich in welcher Reihenfolge es steht – die beiden Listen
   blieben damit auf 608 px und waren schmaler als vor dem Umbau. Deshalb hier
   dieselbe Grundlage plus eine Klasse (0-2-1). Ein Test hält die Kaskade fest;
   ein Markup-Test kann sie nicht sehen. */
main.container.breit {
  max-width: none;
}

/* --- Die Kontextspalte (ADR 0018, E11) -------------------------------------
   Ab 62 em. Die drei Spalten brauchen zusammen 608 + 32 + 288 = **928 px**; bei
   der Wurzelschrift von 16 px sind 62 em die 992 px, ab denen das mit Rand
   aufgeht. Darunter fällt sie weg – **nicht** nach unten: dort verdoppelte sie
   die Vorschau und kostete Tipps.

   Die Schwelle steht in `em` und nicht in `px`: Wer im Browser nur die
   **Schrift** vergrößert (WCAG 1.4.4, 200 %), verdoppelt damit auch Spalte und
   Abstand – die Medienabfrage in Pixeln tat es nicht und ließ bei 1024 px eine
   576 px breite Nebensache neben 19 Zeichen Lesespalte stehen. In `em`
   verschwindet die Spalte genau dann, wenn der Platz nicht mehr reicht.

   `justify-content: center` rückt Text **und** Spalte als Gruppe in die Mitte.
   Ohne sie klebte das 928-px-Gitter links im 1216 px breiten Seitengitter, und
   die Lesespalte sprang beim Schritt in den Assistenten um 288 px nach links.
   Ganz verschwindet der Sprung nicht – die Gruppe ist breiter als der Text
   allein –, aber die Seite steht nicht mehr schief (ADR 0018, offener Punkt 12).

   Das Gitter hängt an `:has(> .schrittspalte)`, damit eine Seite ohne Spalte
   nicht doch eine leere Spalte bekommt. Wo `:has` fehlt, steht die Spalte
   unter dem Inhalt statt daneben – lesbar, nur nicht schön.
   ------------------------------------------------------------------------- */
.schrittspalte {
  display: none;
}

@media (min-width: 62em) {
  .seitengitter:has(> .schrittspalte) {
    display: grid;
    grid-template-columns: minmax(0, var(--lesebreite)) var(--spaltenbreite);
    justify-content: center;
    gap: 2rem;
  }

  .schrittspalte {
    display: block;
    align-self: start;
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: var(--tak-sand);
    border: 1px solid var(--tak-sand-rand);
    border-radius: 0.375rem;
  }
}

.schrittspalte-kopf {
  color: var(--tak-grau);
  margin-bottom: 0.5rem;
}

.schrittzeile {
  border-top: 1px solid var(--tak-sand-rand);
}

/* Die **ganze** Zeile ist der Link, nicht nur der Schrittname: Wer zurück zum
   Titel will, klickt auf den Titel, den er sieht – nicht auf das Wort „3. Titel“
   darüber. Dazu 48 px Mindesthöhe wie an jeder Tippfläche (Bauplan 14.1). */
.schrittzeile > a,
.schrittzeile > .schrittzeile-hier-inhalt {
  display: block;
  padding: 0.5rem 0;
  min-height: 3rem;
}

/* Der Schritt, auf dem man steht: fett, mit Zeichen davor und `aria-current`.
   Drei Merkmale – Farbe trägt nichts allein (Bauplan 14.1). */
.schrittzeile-hier .schrittname {
  font-weight: 600;
}

.schrittname {
  display: block;
}

.schrittwert {
  display: block;
  color: var(--tak-grau);
  overflow-wrap: anywhere;
}

/* --- Kopfzeile und Menü (M1-03, hier nachgeholt) --------------------------- */

.kopfzeile {
  background-color: var(--tak-rot);
  color: #fff;
}

.kopfzeile-inhalt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 3.5rem;
}

/* 20 px: auf Rot nie unter 17 px, weil Weiß dort nur 4,66:1 hat. */
.kopfname {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
}

/* Jeder Menüpunkt ist eine Tippfläche von mindestens 48 px (Bauplan 14.1). */
.menue-link {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding-inline: 0.75rem;
  text-decoration: none;
}

/* Die offene Reihe schaltet erst ab `lg` (992 px) ein, nicht ab `md`. Gemessen
   mit den ausgelieferten Source-Sans-Metriken bei 18 px: die sechs Einträge
   brauchen 804 px, der Name „Tourenbuch“ 103, dazu 8 px Abstand und 32 px
   Innenrand – **947 px**. Bei 768 und 820 px war der Kopf deshalb 134 px hoch,
   bei 900 noch 86; die Ersparnis gegenüber den alten 150 px war weg und aus der
   einen Zeile ein dreistöckiger roter Block geworden. Bis 992 px bleibt der
   Aufklapper, der bei jeder Breite 56 px kostet. Ein Test hält die Schwelle fest.
   Kommt ein siebter Eintrag dazu, ist hier nachzumessen. */
.menue-reihe {
  flex-wrap: wrap;
  /* Ohne Lücke stießen zwei 48 px hohe Menülinks unmittelbar aneinander; ein
     ungenauer Tipp landete auf dem Nachbarn. */
  gap: 0.25rem;
}

.menue-reihe .menue-link {
  color: #fff;
}

.menue-reihe .menue-link:hover,
.menue-reihe .menue-link:focus {
  color: #fff;
  text-decoration: underline;
}

.menue {
  position: relative;
}

/* Der Aufklapper heißt wörtlich „Menü“: ein Zeichen allein trüge die Aussage über
   die Form, und Bauplan 14.1 verlangt sichtbare Beschriftungen.

   Das Zeichen bleibt trotzdem stehen – nur hinter dem Wort statt davor. Ohne es
   war „Menü“ weißer halbfetter Text neben dem ebenfalls weißen halbfetten
   „Tourenbuch“, und nichts sagte, dass man darauf tippen kann; gefunden wurde es
   durch Ausprobieren. Der zweite Aufklapper der Anwendung („Eine andere
   Sportart“) trägt sein Dreieck ebenfalls, jetzt sehen beide gleich aus. */
.menue-knopf {
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.menue-knopf::-webkit-details-marker {
  display: none;
}

.menue-knopf::after {
  content: " ▾";
}

.menue[open] > .menue-knopf::after {
  content: " ▴";
}

.menue[open] > .menue-liste {
  position: absolute;
  right: 0;
  z-index: 20;
  min-width: 14rem;
  background-color: #fff;
  border: 1px solid var(--tak-rand-bedien);
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(26, 22, 20, 0.2);
}

.menue-liste .menue-link {
  width: 100%;
  color: var(--tak-tinte);
}

.menue-liste li + li .menue-link {
  border-top: 1px solid var(--tak-rand);
}

.code-feld {
  font-size: 1.75rem;
  letter-spacing: 0.25em;
  text-align: center;
}

/* Ladeanzeige. basis.html setzt htmx auf includeIndicatorStyles: false, htmx
   bringt also keine eigene Regel mit; ein <style>-Element verbietet die CSP. */
.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Antippbare Fläche am Handy: mindestens 56 px hoch **und breit**. Bauplan 14.1
   verlangt 48 x 48; ohne die Mindestbreite war ein Knopf mit einem Zeichen Inhalt
   (das `×` der Terminzeile) rund 34 px breit und erfüllte nur die halbe Zusage. */
.tippziel {
  min-height: 56px;
  min-width: 48px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

/* Antippbare Textzeile. Kein Flex-Layout: sonst verschwände beim <summary>
   das Dreieck, das die Zeile als aufklappbar zu erkennen gibt. */
.tippziel-text {
  padding: 0.9rem 0;
  cursor: pointer;
}

/* Sprungmarken über einer langen Länderliste. Reine Anker, kein JavaScript;
   jeder Buchstabe ist ein eigenes Tippziel. */
.buchstabenreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.buchstabenreihe a {
  min-width: 2.5rem;
  padding: 0.5rem 0;
  border: 1px solid var(--tak-rand-bedien);
  border-radius: 0.375rem;
  text-align: center;
  text-decoration: none;
}

/* Karten auf „Meine Touren“ (M1-03). Ein langer Bergname darf die Seite am Handy
   nicht breiter machen als den Bildschirm; `anywhere` bricht notfalls im Wort. */
.tour-titel {
  overflow-wrap: anywhere;
}

/* Der Zustand steht als Text im Abzeichen, nie nur als Farbe (Bauplan 14.1).
   Bewusst keine Bootstrap-Klasse `.badge`: die setzt 0,75 em und läge damit bei
   13,5 px, weit unter der Vorgabe von 18 px. Ohne eigene Schriftgröße erbt das
   Abzeichen die Grundschrift.
   Rand als Langform: `border: 1px solid` würde die Randfarbe der
   `border-*-subtle`-Klasse zurücksetzen, weil diese Datei nach Bootstrap lädt. */
.tour-abzeichen {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border-width: 1px;
  border-style: solid;
  border-radius: 2rem;
  font-weight: 600;
}

/* Das Abzeichen des Entwurfs – **eigene** Marke statt `bg-warning-subtle`.

   Seit `--bs-warning-*` und `--bs-danger-*` auf dieselbe helle Fläche zeigen,
   waren „Noch nicht abgeschickt“ und „Frage an dich“ pixelgleich: #8E1109 auf
   #FCEAE9, beide. Vorher stand das eine gelb und das andere rot da. „Frage an
   dich“ ist der einzige Zustand, der vom Leiter etwas verlangt, und er fiel beim
   Überfliegen am Handy nicht mehr heraus.

   Umgestellt wird der **Entwurf**, nicht die Warnfläche: `--bs-warning-*` trägt
   auch die elf `alert-warning`, und dass der Testhinweis das helle Rot bekommt,
   ist eine gesetzte Vorgabe. Weiß mit kräftigem Rand heißt „hier steht noch
   nichts“ und ist von Sand („beim Referenten“) wie von Hellrot („Frage an dich“)
   auf zwei Meter zu unterscheiden. --tak-tinte auf Weiß hat 18,9:1, der Rand auf
   der Sandkarte 3,39:1. */
.chip-entwurf {
  background-color: #fff;
  border-color: var(--tak-rand-bedien);
  color: var(--tak-tinte);
}

/* Zwischenüberschrift je Saison im Block „Letztes Jahr“. Bootstraps `.h6` setzt
   1 rem = 16 px und läge damit unter der Vorgabe von 18 px (Bauplan 14.1). Die
   Grundschrift ist das Mindestmaß; kleiner als die Kartentitel bleibt sie trotzdem. */
.saison-name {
  font-size: var(--bs-body-font-size);
}

/* Der unfertige Entwurf: ruhige Sandkarte mit Balken. Vorher war sie gelb – seit
   dem Farbumbau heißt Gelb nur noch „Entwicklungsumgebung“, damit es wieder etwas
   heißt. Der Balken --tak-rand-bedien auf --tak-sand hat 3,39:1; er ist ein
   nichttextliches Element, für die verlangt WCAG 2.2 (1.4.11) mindestens 3:1.
   Die **Schrift** des Abzeichens kommt aus Bootstraps `text-warning-emphasis`
   und damit aus --tak-rot-dunkler: auf Sand 8,5:1. */
.karte-entwurf {
  background-color: var(--tak-sand);
  border-left: 6px solid var(--tak-rand-bedien);
}

/* Die abgesagte Tour: sichtbar zurückgenommen, ohne unter den Textkontrast zu fallen.
   Vorher dämpfte `opacity-75` die ganze Karte und damit auch die Datumszeile
   (`text-body-secondary`, rgba(33,37,41,.75)); beides multiplizierte sich zu 3,74:1
   und lag unter den 4,5:1 aus Bauplan 14.1. Hier ist jede Farbe für sich gerechnet:
   Datumszeile 6,6:1, Titel 7,8:1, beide auf der Fläche #f8f9fa. Der Rahmen ist reine
   Zier und trägt keine Aussage – #adb5bd ist dabei immer noch deutlich kräftiger als
   Bootstraps gewöhnlicher Kartenrahmen #dee2e6. Das Wort „Abgesagt“ steht ohnehin im
   Abzeichen; die Dämpfung ist Zugabe, nie der Träger der Aussage. */
.karte-abgesagt {
  background-color: #f8f9fa;
  border-color: #adb5bd;
}

.karte-abgesagt .tour-titel {
  color: #495057;
}


/* --- Toureneingabe (M1-04) ------------------------------------------------ */

/* Eine Auswahlzeile mit Erklärsatz: mindestens 56 px hoch, das ganze Feld ist
   Tippfläche. Der gewählte Zustand steht am Punkt im Kreis und nicht nur in einer
   Farbe (Bauplan 14.1, „Status nie nur über Farbe“). */
.auswahlzeile {
  min-height: 56px;
  padding: 0.75rem 0.75rem 0.75rem 2.25rem;
  border-bottom: 1px solid var(--tak-rand);
}

.auswahlzeile .form-check-input {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: -1.75rem;
  margin-top: 0.15rem;
}

.auswahlzeile .form-check-label {
  cursor: pointer;
}

/* Die schon gewählte Kachel (Sportart in Schritt 1, Tage in Schritt 2). Breiterer
   Rand und halbfette Schrift – **zusätzlich** zum ✓ dahinter, nie an seiner Stelle:
   Bauplan 14.1 verlangt „Status nie nur über Farbe“, und deshalb trägt hier auch
   keine Farbe die Aussage. Ohne diese Regel war der Klassenname ein leeres
   Versprechen; eine spätere Farbregel darauf wäre genau der Verstoß. */
.aktive-kachel {
  border-width: 2px;
  border-color: var(--tak-rot-dunkler);
  font-weight: 600;
}

/* Der Satz gehört zum Feld **darüber**, nicht zum nächsten. Vorher stand dafür
   Bootstraps `mt-n3` im Markup – ein toter Name: negative Abstände sind in der
   ausgelieferten `bootstrap.min.css` abgeschaltet (`$enable-negative-margins`
   steht auf `false`), und der Satz hing zwischen zwei Feldern. */
.hinweis-am-feld {
  margin-top: -0.75rem;
}

/* --- Eine Zeile der Terminliste (M1-08) ----------------------------------- */

/* Der Bezugsrahmen für das `×`. Ohne diese Regel war `.terminzeile` ein toter
   Klassenname – genau das, wovor `test_jede_klasse_aus_den_vorlagen_ist_auch_
   definiert` warnt. */
.terminzeile {
  position: relative;
}

/* Das `×` steht im Markup als **letzter** Absendeknopf und wird erst hier nach
   oben rechts gesetzt. Implizites Absenden – die Eingabetaste, „Los“ auf der
   Handytastatur – nimmt den ersten Absendeknopf samt seinem `formaction`; stand
   das `×` vorn, löschte „Los“ im Feld „Wo?“ den Termin. */
.terminzeile-loeschen {
  position: absolute;
  top: 0.75rem;
  right: 0;
}

/* Die beiden Kacheln in Schritt 7 sind gleich groß und gleich gefärbt. Eine blaue
   und eine graue wären faktisch eine Vorauswahl, und Bauplan 5.6 verlangt
   ausdrücklich „ohne Vorauswahl“. `white-space: normal` ist nötig, weil Bootstrap
   an `.btn` `white-space: nowrap` setzen kann. */
.artkachel {
  white-space: normal;
  padding: 1rem;
}

/* Eine Zeile der Heftvorschau. `.tippziel` bringt die Mindesthöhe mit; hier kommt
   nur dazu, dass die letzte Zeile keinen doppelten Rand bekommt. */
.heftvorschau .heftzeile:last-child {
  border-bottom: 0 !important;
}

.heftwert {
  overflow-wrap: anywhere;
}

/* „fehlt noch“ steht als Text da – und **ohne** eigene Farbe.

   Vorher war es --tak-rot-dunkler #8E1109, und die Links der Seite sind
   --tak-rot-dunkel #B5170E: zwischen beiden liegen 1,29:1, unterscheidbar wäre
   ab etwa 3:1. Auf der Vorschau trugen damit „ändern ›“ (Navigation), die
   Schrittnamen der Spalte (Navigation) und „fehlt noch“ (Mangel) denselben
   Farbeindruck; ein Leser tippte auf „fehlt noch“, und nichts geschah. Seit Rot
   die Hausfarbe ist, heißt Rot „hier kannst du hin“ und sonst nichts.

   Getragen wird die Aussage vom Wort, vom Gewicht und vom Zeichen davor – drei
   Merkmale, keines davon Farbe (Bauplan 14.1). */
.fehlt-noch {
  color: var(--tak-tinte);
  font-weight: 600;
}

.fehlt-noch::before {
  content: "▪ ";
}

/* Ein Knopf, der aussieht wie ein Textlink: für „Als neue Tour kopieren“ unter dem
   blauen „Wieder anbieten“. Er muss ein Knopf sein (POST), soll aber nicht mit dem
   Hauptweg konkurrieren. */
/* Der Innenabstand ist knapp gehalten: Bei 375 px bricht die Beschriftung auf
   zwei Zeilen, und mit den 0,9 rem aus `.tippziel-text` war der leise Link
   83 px hoch – höher als der Hauptknopf „Weitermachen“ mit 56. `min-height`
   hält die 48 px aus Bauplan 14.1 für den einzeiligen Fall. */
.knopf-als-text {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0.25rem 0;
  min-height: 3rem;
  color: var(--tak-rot-dunkel);
  text-decoration: underline;
}

/* --- Wieder anbieten (M1-05) ---------------------------------------------- */

/* Alte Jahreszahlen und Daten in Beschreibung, Treffpunkt und Hinweisen.
   `<mark>` ist das semantische Element dafür; die Farbe ist Zugabe. Über der
   Vorschau steht zusätzlich in Worten, wie viele Stellen markiert sind – Farbe
   trägt nie allein (Bauplan 14.1).
   #5c4600 auf #fff3cd hat 8,1:1 und erfüllt die geforderten 4,5:1 deutlich. Kein
   `opacity` (das multiplizierte sich mit der Textfarbe) und kein `style`-Attribut
   in der Vorlage: `SECURE_CSP` setzt `style-src 'self'`. */
.fundstelle {
  background-color: #fff3cd;
  color: #5c4600;
  padding: 0 0.15em;
  border-radius: 0.2rem;
}

/* Die Fundstellenliste über einem Bearbeitungsfeld. Ruhiger Kasten, kein Rot und
   kein Warnzeichen: Bauplan 5.4 führt alte Jahreszahlen unter „Nur zur Info“.

   **Sand, nicht mehr Gelb.** Der Kasten ist kein `<mark>`; die Ausnahme von der
   Regel „Gelb heißt Entwicklungsumgebung“ gilt dem markierten Text, nicht seinem
   Behälter. Sein Rand war zudem #ffe08a – genau der Ton, aus dem der
   Entwicklungsstreifen gestreift ist. Damit stand auf dem zweithäufigsten
   Schritt ein Kasten in der Farbe des Bandes „Entwicklung · erfundene Daten“.
   Die `<mark>`-Stellen darin bleiben gelb und heben sich auf Sand besser ab. */
.fundstellenliste {
  background-color: var(--tak-sand);
  border-color: var(--tak-sand-rand) !important;
}

/* --- Teilnehmer eintragen (M1-07) ----------------------------------------- */

/* Die Zeile „Eingetragen: 5“ bleibt beim Blättern oben stehen. Reines CSS, kein
   Skript: `SECURE_CSP` setzt `script-src 'self'` ohne Nonce. Sie ist der Grund,
   warum acht Ladevorgänge beim Eintragen nicht verwirren – die Rückmeldung bleibt
   sichtbar, auch wenn die Liste nach unten aus dem Bild läuft.
   Eigene Fläche, weil eine durchsichtige Zeile über den durchscrollenden Namen
   unlesbar wäre. Sand statt des früheren Blaus: Blau gehört seit dem Farbumbau
   nicht mehr zum Haus. --tak-tinte auf --tak-sand hat 15,72:1. */
.klebezeile {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--tak-sand);
  border: 1px solid var(--tak-sand-rand);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
}

/* Ein Chip aus „Aus deinen letzten Touren“. Zwei Zeilen – Name und Mitgliedschaft –
   und deshalb höher als ein gewöhnlicher Knopf. 56 px sind die Hausvorgabe für
   Tippflächen am Handy (Bauplan 14.1 verlangt mindestens 48).
   `white-space: normal`, weil Bootstrap an `.btn` `nowrap` setzen kann und ein
   langer Nachname sonst über den Rand liefe. */
.chip {
  min-height: 56px;
  white-space: normal;
  padding: 0.5rem 0.75rem;
}

/* Die zweite Zeile im Chip. Bewusst **keine** kleinere Schrift: Bootstraps `small`
   setzt 0,875 rem und läge bei einer Grundschrift von 18 px unter der Vorgabe aus
   Bauplan 14.1. Unterschieden wird über die Farbe, und die trägt hier keine
   Aussage – der Text steht ohnehin da. --tak-grau auf Weiß hat 5,98:1. */
.chip-zusatz {
  color: var(--tak-grau);
}

/* Eine Trefferzeile oder ein Chip, deren Person schon in der Liste steht. Sie
   verschwindet nicht, sondern steht gedämpft da – und trägt den **Text** „steht
   schon in der Liste“ bzw. „schon dabei“. Die Farbe ist Zugabe, nie der Träger der
   Aussage (Bauplan 14.1). --tak-tinte auf --tak-sand hat 15,72:1.

   Sand und nicht Weiß: Weiß ist die Fläche der antippbaren Zeile, und gedämpft
   wäre daran nichts (ADR 0014, Nr. 17). Die Unterscheidung bleibt „gefüllte
   Fläche gegen umrandet und weiß“; nur die Hexwerte stammen jetzt aus den
   Marken. */
.treffer-dabei,
.chip-dabei {
  background-color: var(--tak-sand);
  border-color: var(--tak-rand-bedien) !important;
  color: var(--tak-tinte);
}

/* Die Vorschau der Notfallmeldung: Beschriftung und Wert untereinander, damit ein
   langer Treffpunkt am Handy nicht in eine Spalte von 8 Zeichen gequetscht wird. */
.meldung dt {
  font-weight: 600;
}

.meldung dd {
  margin-bottom: 0.75rem;
  overflow-wrap: anywhere;
}

/* Die Rücklesezeilen vor dem Abschicken (M2-03). Beschriftung und Wert stehen
   untereinander statt nebeneinander: Auf 360 Pixel Breite bricht ein
   zweispaltiges Paar bei „Über den Beispielgrat zum Musterkopf“ ohnehin um, und
   dann steht der Wert eingerückt unter seiner eigenen Beschriftung.

   **Kein Tippziel und deshalb keine Mindesthöhe von 48 px:** Gelesen wird hier,
   geändert wird in der Vorschau. Bauplan 14.1 verlangt die 48 px für Tippziele,
   und eine Zeile, die auf nichts führt, ist keines.

   **Nicht** „sonst wäre der Knopf nicht ohne Scrollen erreichbar“: Das war die
   erste Begründung und sie stimmte nicht. Gemessen bei 375 × 667 px an der
   vollständigen Tour aus Aufgabe A4: Oberkante „Ja, Tour abschicken“ bei y = 729
   auf einer 1019 px hohen Seite – 62 px unter der Falz eines nackten Fensters und
   rund 170 px unter der von Safari mit seinen Leisten. Gescrollt wird also
   ohnehin, und das ist für den Warnsatz darüber sogar richtig. Die Tippziele der
   Fehlliste bekommen ihre 48 px deshalb sehr wohl (`d-block` in
   `touren/templates/touren/eingabe/abschicken.html`). */
.ruecklesen {
  margin-bottom: 1.5rem;
}

.ruecklesen dt {
  font-weight: 400;
}

.ruecklesen dd {
  overflow-wrap: anywhere;
}

.ruecklesen dd:last-child {
  margin-bottom: 0;
}

/* --- Prüfen und freigeben (M2-04) ------------------------------------------
   Die **erste** Oberfläche des Hauses, die für den breiten Bildschirm entworfen
   ist (ADR 0018, ADR 0021 E7). Alles hier gilt erst ab 62 em – darunter stehen
   die beiden Spalten untereinander, und die Seite bleibt am Handy benutzbar,
   auch wenn sie dort nicht gemeint ist.
   ------------------------------------------------------------------------- */

/* Die Zeilenhöhe der Liste ist eine Rechnung und keine Geschmacksfrage: Bei
   1366 x 768 (der Desktop-Größe aus Bauplan 14.1) bleiben unter Kopf und
   Überschrift rund 620 Pixel. Mit 48 px je Zeile sind das zwölf Zeilen ohne
   Scrollen – der Referententest misst zehn Touren (14.5). 48 px ist zugleich
   die Mindesttippfläche aus 14.1.

   Getragen wird die Höhe von `height` an der **Zelle**, nicht von `min-height`
   an der Zeile: Im Tabellenmodell wirkt `min-height` auf `display: table-row`
   nicht, und `height` an einer Tabellenzelle ist nach CSS 2.1 ohnehin eine
   Mindesthöhe. Vorher stand hier eine Regel ohne Wirkung, und die Rechnung
   oben stützte sich auf sie (ADR 0021 Nachtrag 1). */
.pruefliste td,
.pruefliste th {
  padding-block: 0.75rem;
}

.pruefliste tbody td {
  height: 48px;
}

/* Die von J und K gewählte Zeile. Farbe trägt nie allein (14.1): Der Rahmen
   links ist das zweite Merkmal, und die Zeile scrollt sich selbst ins Bild. */
.pruefliste tbody tr.zeile-gewaehlt {
  background-color: var(--tak-sand);
  box-shadow: inset 3px 0 0 0 var(--bs-primary);
}

/* „Zu klären“ steht als **Wort** da; die Farbe kommt dazu und nie allein. */
.zu-klaeren {
  color: var(--bs-danger-text-emphasis, #58151c);
}

/* Das zweispaltige Gitter der Prüfansicht – **innerhalb** von `<main>`.
   Links Lesebreite für die Heftfassung, rechts rund 20 rem Arbeitsfläche.
   Das ist der Unterschied zur Kontextspalte aus ADR 0018 Nr. 11: Die steht
   außerhalb `<main>` und trägt reinen Kontext; hier wird rechts gearbeitet. */
.pruefgitter {
  display: grid;
  gap: 2rem;
}

.pruefgitter-links {
  min-width: 0;
}

@media (min-width: 62em) {
  .pruefgitter {
    grid-template-columns: minmax(0, var(--lesebreite)) 20rem;
    align-items: start;
  }

  .pruefgitter-rechts {
    position: sticky;
    /* Klebt beim Scrollen mit: Bei einer langen Beschreibung stünde der
       Freigabeknopf sonst weit unter dem Text, und die Minute aus Bauplan 8
       ginge im Scrollen verloren. */
    top: 1.5rem;
    padding: 1rem;
    background-color: var(--tak-sand);
    border: 1px solid var(--tak-sand-rand);
    border-radius: 0.375rem;
  }
}

.pruefhinweis {
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: 0.375rem;
  background-color: var(--bs-body-bg);
}

.pruefhinweis-hart {
  border-left: 4px solid var(--bs-danger);
}

.pruefhinweis-weich {
  border-left: 4px solid var(--bs-secondary);
}

/* „Schon besprochen“ – Frage und Antwort über den Hinweisen. Ruhiger Grund und
   kein farbiger Balken: Das ist kein Hinweis, sondern das Gedächtnis der Seite. */
.pruefverlauf {
  background-color: var(--bs-tertiary-bg);
}

/* Der markierte Abschnitt in der Vorschau des Leiters: derselbe Ton wie die
   Fundstellen aus M1-05, damit „schau hier hin“ überall gleich aussieht. */
.rueckfrage-markiert {
  box-shadow: inset 3px 0 0 0 var(--bs-primary);
  background-color: var(--tak-sand);
}