/* ==========================================================================
   GuidePro — Darstellung

   Farben: EXAKT aus Spez. 09, 9.1a. Auflage 9.1: Farben als Variablen,
   nicht in die Bildschirme geschrieben. Ein Schema, hell — kein
   Dunkelmodus (9.1).
   Schrift (9.2): Josefin Sans für Kopfzeile und Überschriften, Inter für
   Formulare, Listen, Tabellen, Fließtext und Zahlen.
   Raster (9.2a): ein Spaltenraster je Bildschirm, nicht je Abschnitt.

   Herkunft der Bauteile: das Klickgerüst des Durchgangs (geruest-02).
   Was dort Attrappe war — Kartenmockup, Skriptkarten, Prototypfußzeile —
   steht hier nicht.
   ========================================================================== */

:root {
  /* --- 9.1a, wörtlich: zwölf Verwendungen, neunzehn Werte --- */
  --nav:          #1F2E25;   /* Navigation, Fläche */
  --nav-active:   #2A3D31;   /* Navigation, aktiver Punkt */
  --marke:        #8CC152;   /* Markengrün: Logo, aktive Kante, Hervorhebung */
  --knopf:        #4E8B3E;   /* Hauptknopf, Fläche */
  --knopf-fg:     #FFFFFF;   /* Hauptknopf, Schrift */
  --grund:        #F3F6F0;   /* Grundfläche der Seite */
  --karte:        #FFFFFF;   /* Karten, Fläche */
  --linie:        #E4E9DF;   /* Karten, Rand */
  --text:         #1F2A22;   /* Text */
  --neben:        #6B7A6E;   /* Nebentext */

  /* Die vier Statusflächen (9.1a, 9.1b). Ein fünfter Wert entstünde nur
     mit einem fünften redaktionellen Status; weitere Statussätze
     benutzen diese vier nach ihrer Aussage. */
  --st-aktiv-bg:   #E5F2DC;  --st-aktiv-fg:   #3E6B2C;   /* gilt */
  --st-qs-bg:      #FBF1CE;  --st-qs-fg:      #8A6A16;   /* hier ist Arbeit */
  --st-entwurf-bg: #ECEFE9;  --st-entwurf-fg: #5C685E;   /* nichts zu tun */
  --st-deakt-bg:   #FAE3E1;  --st-deakt-fg:   #A33A2E;   /* nicht in Gebrauch */

  --hinweis-bg:   #FDF6E0;  --hinweis-linie: #E8CE7A;    /* Aktueller Hinweis */

  /* --- Die dreiundzwanzig Werte, die 9.1a nicht führt ---
     Gefunden am 22.08.2026: sie standen in den Bildschirmen,
     nicht als Variablen. Auflage 9.1: „Farben werden von Beginn
     an als Variablen angelegt … Dann ist ein zweites Schema
     später eine Einstellung und kein Umbau.“ Die Werte sind
     Zeichen für Zeichen dieselben — der Umbau ändert nichts am
     Bild, nur am Ort. Welche davon in 9.1a gehören und unter
     welchem Namen, ist eine Frage ans Papier (Baublatt). --- */
  --weiss:           #fff;                    /* Weiß auf dunklem Grund — Marke, aktiver Menüpunkt, Ring */
  --nav-text:        #E8EFE8;                 /* Navigation, Schrift */
  --nav-unterpunkt:  #B9C9BC;                 /* Navigation, Unterpunkt */
  --nav-gruppe:      #7D9385;                 /* Navigation, Gruppentitel */
  --nav-rolle:       #9DB3A4;                 /* Navigation, Rollenzeile im Fuß */
  --nav-trenner:     rgba(255,255,255,.09);   /* Navigation, Trennlinie */
  --nav-kante:       rgba(255,255,255,.10);   /* Navigation, Kante am Fuß */
  --nav-flaeche:     rgba(255,255,255,.08);   /* Navigation, aufgehellte Fläche */
  --schatten-pop:    rgba(31,42,34,.14);      /* Aufklappfenster, Schatten */
  --schatten-karte:  rgba(0,0,0,.35);         /* Kartenmarke, Schatten */
  --beschriftung:    #8A968C;                 /* Feldbeschriftung, Spaltenkopf, Augenbraue */
  --leer:            #A8B2A6;                 /* Was nicht ausgefüllt ist (L119) */
  --flaeche-still:   #FAFBF8;                 /* Stille Fläche: Tag, Tabellenkopf, Leerfeld */
  --zeile-hover:     #F0F6EC;                 /* Tabellenzeile unter dem Zeiger */
  --erfolg-linie:    #CBE3BB;                 /* Erfolgsmeldung, Rand */
  --fehler-linie:    #EFC4BE;                 /* Fehlermeldung, Rand */
  --hinweis-text:    #7A5A13;                 /* Aktueller Hinweis, Schrift */
  --hinweis-fett:    #5F450D;                 /* Aktueller Hinweis, Hervorhebung */
  --karo-dunkel:     #565b60;                 /* Transparenzkaro, dunkler Ton (gerechnet, 9.1a) */
  --karo-hell:       #8b9197;                 /* Transparenzkaro, heller Ton (gerechnet, 9.1a) */
  --film-grund:      #000;                    /* Videofläche, Grund */
  --vollbild-grund:  #1D231E;                 /* Vollbildansicht, Grund */
  --kartenpunkt:     #2B2F2A;                 /* Kartenpunkt, Rand */

  /* Gestaltung ist nach 9.1a ausdrücklich nicht festgelegt; hier gewählt. */
  --sidebar: 248px;  --topbar: 60px;  --radius: 8px;  --radius-s: 6px;
  --rand-stark: #CFD8CA;
  --schatten: 0 1px 2px rgba(31,42,34,.06), 0 1px 3px rgba(31,42,34,.05);
  --font-head: "Josefin Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Das Raster (9.2a): vier Spalten für den ganzen Schirm. */
  --spalten: 4;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  color: var(--text); background: var(--grund); -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; letter-spacing: .2px; margin: 0; }
a { color: inherit; }
summary { list-style: none; } summary::-webkit-details-marker { display: none; }

/* **Der Griff am Klappfeld.** Die Zeile darüber nimmt jedem `<details>`
   sein Standardzeichen. Für die Klappfelder der Kopfleiste (`.pop`) ist
   das richtig — sie tragen Rahmen und Symbol und sind als Knopf zu
   erkennen. **Den übrigen blieb damit nichts:** *„Auf der Karte wählen"*
   und *„Arten ändern"* standen in 12,5 px und `--neben` —
   **zeichengleich mit dem Hilfetext darunter und dem Label darüber.**

   *Am Bildschirm gefunden am 06.08.2026, nach der Erprobung von 9c. Der
   Betreiber hat den Griff nur gefunden, weil in meiner Anleitung stand,
   wo er klicken soll: **nicht „der Bau tut nicht, was er sagt", sondern
   „der Bau tut es, und niemand sieht, dass er es kann."***

   **Ein Winkel, kein gefülltes Dreieck** — die Symbole dieser Anwendung
   sind durchweg gestrichen (`fill: none; stroke: currentColor`); ein
   gefülltes Zeichen wäre das einzige. **Und aus Rändern gebaut**, wie
   `.badge::before` und `.stx::before`, nicht als Schriftzeichen: *Ein
   Unicode-Dreieck hängt davon ab, ob die Schrift es führt.*

   **Eine Klasse, nicht eine Aufzählung.** Bis zum 06.08.2026 nannte der
   Selektor `.kartenwahl` und `.arten` einzeln — beim **dritten**
   Klappfeld (dem Aktuellen Hinweis) wurde daraus `.klappgriff`: *Drei
   Namen in einem Selektor sind an der vierten Stelle nicht mehr
   dasselbe.* **Die Deckungsprüfung hat den Anlass geliefert** — sie
   wurde beim dritten `<details>` rot, wie sie sollte.

   **Und `user-select: none`, weil ein Griff kein Text ist.** `<summary>`
   verhält sich darin anders als `<button>`: Wer zweimal kurz
   hintereinander klappt, markiert beim zweiten Klick das Wort statt zu
   klappen. *Am Bildschirm gesehen am 06.08.2026 — „Arten" stand blau
   hinterlegt da.* Die Seitenleiste trägt die Zeile aus demselben Grund. */
.klappgriff > summary {
  display: flex; align-items: center; gap: 7px;
  color: var(--text); user-select: none;
}
.klappgriff > summary::before {
  content: ""; width: 5px; height: 5px; flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
.klappgriff[open] > summary::before { transform: rotate(45deg); }

/* ===== Die Quellenarten in Schritt 2 (06/2.2) ============================
   **Eine eigene Klasse neben `.klappgriff`, nicht statt ihm.** *Das
   Hausmuster hängt in zehn Vorlagen — Galerie, Neuerungen, Termine,
   Wissenskarten, Zwischenschritt;* **wer dort die Optik ändert, ändert
   sie überall.**

   ***Der Anlaß, 15.09.2026:*** *„die einzelnen Kategorien sind ein
   bißchen unscheinbar in der heutigen Optik mit dem `>` Symbol …
   etwas deutlicher, aber nicht übertrieben."* **Am Mockup gewählt:**
   *Fläche und Trennlinie je Zeile, kräftigerer Pfeil, die Zahl als
   Abzeichen.* */
/* **Der Rahmen sitzt an der Gruppe, nicht an jeder Zeile.** *Die erste
   Fassung rundete die Ecken über `:has()` und `first-of-type` — ein
   Behälter je Gruppe tut dasselbe ohne Akrobatik und trägt in jedem
   Browser.* */
.quellgruppe {
  border: 1px solid var(--linie); border-radius: var(--radius-s);
  overflow: hidden;
}
.quellgriff + .quellgriff { border-top: 1px solid var(--linie); }
.quellgriff > summary {
  padding: 9px 11px; background: var(--flaeche-still); font-weight: 500;
}
.quellgriff[open] > summary {
  background: var(--karte); border-bottom: 1px solid var(--linie);
}
.quellgriff > summary:hover { background: var(--grund); }
/* **Der Pfeil bekommt Gewicht** — *5 px und 1,5 px Strich waren am
   Bildschirm kaum zu sehen.* */
.quellgriff > summary::before {
  width: 7px; height: 7px; border-width: 2px; color: var(--knopf);
}
/* **Die Drehung führt jede Griffklasse selbst** — *`kern`s
   Deckungsprüfung verlangt es, und sie hat recht:* **wer `.quellgriff`
   ohne `.klappgriff` verwendete, hätte einen Winkel, der immer gleich
   zeigt** — *und der sagt nicht, ob offen oder zu.* (Gefunden vom
   Volldurchlauf, 15.09.2026; der enge Satz `werkstatt` konnte es nicht
   sehen, weil der Wächter in `kern` wohnt.) */
.quellgriff[open] > summary::before { transform: rotate(45deg); }
/* **Das Abzeichen mit der Zahl.** *Die Gestalt ist die von
   `.panel-head .count` — der Selektor greift dort nur im Kartenkopf,
   also steht sie hier noch einmal* (gemessen, 15.09.2026). */
/* ***Die Zahl trägt `--text`, nicht `--neben`*** — *`KontrastZensusTest`
   hat es erzwungen:* **`--neben` auf `--grund` erreicht 4,15 : 1, die
   WCAG-AA-Schwelle für Kleinschrift ist 4,5** *(gefunden vom
   Volldurchlauf, 15.09.2026)*. **Der Zensus ist ein Riegel, kein
   Freibrief:** *eine neue Regel darunter wäre eine neue Zeile in
   `HEUTE_DARUNTER` — und die steht dem Betreiber im Baublatt vor.*
   *`.panel-head .count` trägt dieselbe Gestalt und steht dort seit dem
   22.08.2026;* **hier wird sie nicht wiederholt.** */
.quellgriff .anzahl {
  font-size: 12px; font-weight: 500; color: var(--text);
  background: var(--grund); border: 1px solid var(--linie);
  border-radius: 20px; padding: 0 8px; line-height: 18px;
}
.quellgriff .anzahl:empty { display: none; }

/* ===== Verwerfen — in jedem Schritt unten ================================
   **Er nimmt etwas zurück und ist keine Hauptsache** (Betreiber,
   15.09.2026: *„verwirft den kompletten Dialog … und bringt den User
   wieder auf die Einstiegsseite zurück"*). *Darum still gezeichnet und
   rechts,* **abseits von „Weiter".** */
/* **Er steht am rechten Rand seiner Aktionszeile**, *abseits vom
   Hauptknopf* — **die erste Fassung gab ihm eine eigene Zeile
   darunter**, *und der Betreiber am Bildschirm:* „der Verwerfen-Button
   geht unter … außerdem sitzt er an einer komischen Stelle."
   (15.09.2026) */
.form-actions .btn.verwerfen { margin-left: auto; }
.btn.verwerfen { border-color: transparent; color: var(--neben); }
.btn.verwerfen:hover {
  border-color: var(--linie); color: var(--st-deakt-fg);
}

/* ===== Ausgewählte Quellen — der Warenkorb ===============================
   **Je Art eine Gruppe, je Quelle eine Zeile mit ihrem Knopf.** *Der
   Knopf ist still: er nimmt etwas zurück und ist keine Hauptsache.* */
.korbgruppe + .korbgruppe { margin-top: 8px; }
.korbzeile {
  display: flex; align-items: center; gap: 8px; padding: 2px 0;
  font-size: 13px;
}
.korbzeile > span { flex: 1 1 auto; min-width: 0; }
.korbzeile > button {
  flex: none; font: inherit; font-size: 12px; color: var(--neben);
  background: none; border: 1px solid transparent; border-radius: var(--radius-s);
  padding: 1px 7px; cursor: pointer;
}
.korbzeile > button:hover {
  color: var(--st-deakt-fg); border-color: var(--linie);
  background: var(--karte);
}
/* **Ein eigener Kasten, nicht `.rollkasten`.** *Die Maße sind
   dieselben — aber* `.rollkasten` *zählt ein Wächter:* **sechs Stück,
   eines je Quellenart aus GuidePro** *(seit **C13** vom 16.09.2026;
   bis dahin fünf — „für alle Listen außer den Terminen")*. *Der
   Warenkorb ist keine Quellenliste;* **er mitzuzählen hätte die Zusage stumpf
   gemacht** *(gefunden vom Prüflauf, 15.09.2026).* */
.korbkasten {
  max-height: 260px; overflow-y: auto; border: 1px solid var(--linie);
  border-radius: var(--radius-s); padding: 6px 10px;
  background: var(--karte); margin-bottom: 8px;
}

/* ===== Seitenleiste — auf jedem Bildschirm gleich (7.0) =================== */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar);
  background: var(--nav); color: var(--nav-text); display: flex; flex-direction: column; z-index: 20;
}
.brand {
  height: var(--topbar); display: flex; align-items: center; gap: 10px; padding: 0 20px;
  font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--weiss);
  border-bottom: 1px solid var(--nav-flaeche); flex: 0 0 auto; text-decoration: none;
}
.brand .mark { width: 24px; height: 24px; border-radius: 6px; background: var(--marke); display: grid; place-items: center; flex: 0 0 auto; }
.brand .mark svg { width: 15px; height: 15px; stroke: var(--weiss); }
.nav { padding: 12px 12px 8px; overflow-y: auto; flex: 1 1 auto; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius-s);
  color: var(--nav-text); text-decoration: none; font-size: 14px; margin-bottom: 2px;
  user-select: none; white-space: nowrap;
}
.nav-item svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .85; }
a.nav-item:hover { background: var(--nav-active); }
/* Aktiver Punkt: Fläche nach 9.1a, linke Kante in Markengrün */
.nav-item.is-active { background: var(--nav-active); color: var(--weiss); font-weight: 600; box-shadow: inset 3px 0 0 var(--marke); }
/* Der Zähler am Menüpunkt (Spez. 07, 7.2): Ungelesenes, nicht Bestand.
   Er steht rechts am Rand, damit er die Namen nicht gegeneinander
   verschiebt — bei null zeichnet die Vorlage ihn gar nicht. */
.nav-zaehler {
  margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 9px;
  background: var(--marke); color: var(--weiss); font-size: 11.5px; font-weight: 700;
  text-align: center; flex: 0 0 auto;
}
.nav-sep { height: 1px; background: var(--nav-trenner); margin: 10px 12px; }
.nav-cap { padding: 8px 14px 4px; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--nav-gruppe); }
.nav-unter { margin: 0 0 6px 12px; padding-left: 12px; border-left: 1px solid var(--nav-kante); }
.nav-unter a { display: block; padding: 6px 10px; font-size: 13px; color: var(--nav-unterpunkt); text-decoration: none; border-radius: var(--radius-s); }
.nav-unter a:hover { background: var(--nav-active); color: var(--nav-text); }
.nav-unter a.is-active { color: var(--weiss); font-weight: 600; }
.nav-gruppe { padding: 8px 10px 2px; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--nav-gruppe); }

/* Fußzeile des Menüs (7.0): angemeldeter Nutzer und laufende Version */
.nav-foot { flex: 0 0 auto; padding: 11px 18px; border-top: 1px solid var(--nav-flaeche); font-size: 12px; color: var(--nav-rolle); }
.nav-foot .wer { display: flex; align-items: center; gap: 8px; color: var(--nav-text); }
.nav-foot .wer .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--marke); flex: 0 0 auto; }
.nav-foot .rolle { color: var(--nav-rolle); font-weight: 400; }
.nav-foot .version { display: block; margin-top: 5px; color: var(--nav-gruppe); text-decoration: none; font-size: 11.5px; }
.nav-foot .version:hover { color: var(--nav-unterpunkt); }

/* ===== Hauptbereich und Kopfzeile (9.3a) ================================= */
.main { margin-left: var(--sidebar); min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; height: var(--topbar); background: var(--karte);
  border-bottom: 1px solid var(--linie); display: flex; align-items: center; gap: 14px;
  padding: 0 26px; z-index: 10;
}
/* Der Pfad — auf der obersten Ebene entfällt er (9.3a) */
.pfad { font-size: 13px; color: var(--neben); }
.pfad a { text-decoration: none; color: var(--neben); }
.pfad a:hover { color: var(--text); }
.pfad b { color: var(--text); font-weight: 600; }
.pfad .sep { margin: 0 6px; opacity: .5; }
.topbar .spacer { flex: 1; }

.hbtn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: var(--radius-s); border: 1px solid var(--rand-stark); background: var(--karte); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; }
.hbtn svg { width: 16px; height: 16px; }
.hbtn.avatar { width: 36px; padding: 0; justify-content: center; border-radius: 50%; background: var(--nav); color: var(--weiss); font-size: 12px; font-weight: 600; }

/* Klappmenü (Neu anlegen, Profil) */
.pop { position: relative; }
.pop > summary { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: var(--radius-s); border: 1px solid var(--rand-stark); background: var(--karte); color: var(--text); font-size: 13px; cursor: pointer; }
.pop > summary svg { width: 15px; height: 15px; }
.pop[open] > summary { border-color: var(--marke); }
.pop .panel {
  position: absolute; right: 0; top: 42px; min-width: 210px; background: var(--karte);
  border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: 0 6px 24px var(--schatten-pop);
  padding: 6px; z-index: 30;
}
.pop .panel .ph { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--neben); padding: 6px 10px 4px; }
.pop .panel a, .pop .panel span.dead, .pop .panel button {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-s);
  text-decoration: none; color: var(--text); font: inherit; font-size: 13.5px; width: 100%;
  background: none; border: 0; text-align: left;
}
.pop .panel a, .pop .panel button { cursor: pointer; }
.pop .panel a:hover, .pop .panel button:hover { background: var(--grund); }
.pop .panel .dead { color: var(--neben); }
.pop .panel .trenner { height: 1px; background: var(--linie); margin: 5px 4px; }

/* **Dasselbe Klappfeld eine Etage tiefer** — der Export in der
   Handlungsleiste (Spez. 05, 2.4). Es erbt `.pop`, damit es wie ein Knopf
   aussieht und die Deckungsprüfung aus 9d es als eigenes Aussehen
   erkennt; `.exp` gleicht nur die Maße an die Nachbarn an.

   **34 statt 36 Pixel:** `.abtn` daneben ist 34 hoch. Zwei Pixel klingen
   nach nichts und sind der Unterschied zwischen einer Leiste und einer
   Reihe. */
.pop.exp > summary { height: 34px; }
.pop.exp .panel { top: 40px; }

/* ===== Inhalt und Seitenkopf (9.3a) ====================================== */
.content { padding: 26px; max-width: 1200px; width: 100%; }
.page-head { margin: 0 0 20px; }
.page-head h1 { font-size: 25px; }
/* Unterzeile: Umfang und Ausschnitt, genau eine Stelle je Bildschirm */
.page-head .sub { color: var(--neben); font-size: 13px; margin-top: 3px; }
.page-head .row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-head .row .spacer { flex: 1; }

/* Meldungen */
.meldung { border-radius: var(--radius-s); padding: 11px 15px; margin-bottom: 16px; font-size: 13.5px; border: 1px solid var(--linie); background: var(--karte); }
.meldung.erfolg { background: var(--st-aktiv-bg); border-color: var(--erfolg-linie); color: var(--st-aktiv-fg); }
.meldung.warnung { background: var(--st-qs-bg); border-color: var(--hinweis-linie); color: var(--st-qs-fg); }
.meldung.fehler { background: var(--st-deakt-bg); border-color: var(--fehler-linie); color: var(--st-deakt-fg); }

/* ===== Panels ============================================================ */
.panel { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); }
.panel + .panel { margin-top: 18px; }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--linie); }
.panel-head h2 { font-size: 15px; }
.panel-head .count { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--neben); background: var(--grund); border: 1px solid var(--linie); border-radius: 20px; padding: 1px 9px; }
.panel-head .more { margin-left: auto; font-size: 12px; color: var(--neben); }
.panel-body { padding: 16px 18px; }

/* ===== Statuskennzeichnung =============================================== */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1; padding: 4px 9px; border-radius: 20px; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.badge.st-aktiv   { background: var(--st-aktiv-bg);   color: var(--st-aktiv-fg); }
.badge.st-qs      { background: var(--st-qs-bg);      color: var(--st-qs-fg); }
.badge.st-entwurf { background: var(--st-entwurf-bg); color: var(--st-entwurf-fg); }
.badge.st-deakt   { background: var(--st-deakt-bg);   color: var(--st-deakt-fg); }

/* Kontozustand bleibt Text, ohne Fläche (9.1b) */
.stx { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1; padding: 4px 10px; border-radius: 20px; white-space: nowrap; color: var(--text); background: var(--karte); border: 1px solid var(--rand-stark); }
.stx::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--neben); }

.tag { display: inline-block; font-size: 12px; color: var(--neben); background: var(--flaeche-still); border: 1px solid var(--linie); border-radius: 5px; padding: 2px 8px; }
.pill { display: inline-block; font-size: 11px; font-weight: 600; color: var(--neben); background: var(--grund); border-radius: 20px; padding: 1px 8px; border: 1px solid var(--linie); }

/* **Die zwei Abzeichen der Partnerliste** (06/2.6, **C11** vom
   15.09.2026) — *die Art sagt, **was** eine Stelle ist; die Nennung,
   **was folgt**.* **Zwei Bedeutungen, zwei Gestalten**, *am Mockup
   entschieden (Variante B, 16.09.2026): die Art rund und leise, die
   Folge eckig mit Kante.*

   ***Keine von beiden ist `.tag`*** — *die Marke bleibt den vier
   Grenzen der Quellenauswahl vorbehalten* **(A4: „eine Marke bedeutet
   immer dasselbe: hier wurde etwas entschieden")**.

   ***Und keine erbt von `.tag` oder `.pill`***: beide setzen die
   Schrift auf `--neben` und unterschreiten damit die Schwelle
   (4,36 und 4,15), *sie stehen als Befunde in `HEUTE_DARUNTER`.*
   **Hier steht `--text`** — *gemessen **13,63 : 1** auf `--grund` und
   **14,31 : 1** auf der stillen Fläche,* **und damit weit über den
   4,5 des Kontrastzensus.** */
.p-art { display: inline-block; font-size: 12px; color: var(--text); background: var(--grund); border: 1px solid var(--linie); border-radius: 20px; padding: 1px 9px; white-space: nowrap; }
.p-folge { display: inline-block; font-size: 12px; font-weight: 600; color: var(--text); background: var(--flaeche-still); border: 1px solid var(--rand-stark); border-left: 3px solid var(--marke); border-radius: 5px; padding: 1px 9px; white-space: nowrap; }
.p-folge:empty { display: none; }
/* ***Der Name nimmt nur, was er braucht*** *(16.09.2026, Durchgang
   P1)* — **bis dahin `flex: 1`**, *und das schob die Abzeichen an den
   rechten Rand:* „die badgets stehen … zu weit von den Eintraegen
   entfernt". **Die Zeile bleibt ein Flex-Container**, *nur dehnt sich
   nichts mehr;* `margin-right: auto` *am Namen waere dasselbe
   Uebel.* */
.p-name { flex: 0 1 auto; }

/* *Die zwei Zwischenüberschriften der Partnerliste* — **sie stehen im
   Papier nicht und sind ein Zusatz** *(der Betreiber am Mockup:
   „Zwischenüberschriften hätte ich gerne")*. */
.gruppenzeile { font-size: 12px; color: var(--neben); padding: 10px 9px 4px; text-transform: uppercase; letter-spacing: .04em; }
.partnerarten { display: flex; flex-wrap: wrap; gap: 16px; padding: 4px 0 12px; border-bottom: 1px solid var(--linie); margin-bottom: 10px; }

/* ===== Regler und Schalter, grafisch (06/8.6a) ==========================
   **Variante 1, am Mockup entschieden** *(16.09.2026)* — *eine
   Schaltflächenreihe je Regler, ein Kippschalter je Schalter.*

   ***Ohne eine Zeile JavaScript*** (06/2.8: „zwei Wege, nicht einer"):
   *die Radioknöpfe und Kästchen bleiben im Markup und tragen die
   Wahl;* **sie werden nur verborgen, und das Label daneben zeichnet
   sich nach `:checked`.** *Ohne Stilblatt steht eine gewöhnliche
   Liste da.*

   ***Die gewählte Fläche trägt `--karte` auf `--text`*** — **14,87 : 1**,
   *weit über den 4,5 des Kontrastzensus;* **die ruhende umgekehrt.** */
.reglerblock { margin-bottom: 14px; }
.stufenreihe { display: inline-flex; border: 1px solid var(--rand-stark); border-radius: 7px; overflow: hidden; }
.stufenreihe .stufe { margin: 0; cursor: pointer; }
/* *Verborgen, aber bedienbar* — **Tastatur und Vorleseprogramm finden
   den Knopf**; `display: none` *nähme ihn beiden.* */
.stufenreihe input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.stufenreihe span { display: block; padding: 7px 15px; border-right: 1px solid var(--linie); font-size: 13.5px; color: var(--neben); background: var(--karte); white-space: nowrap; }
.stufenreihe .stufe:last-child span { border-right: none; }
/* ***Die gewaehlte Stufe traegt Markengruen*** *(16.09.2026,
   Durchgang P8)* — **bis dahin `--text` auf `--karte`**, *also fast
   schwarz:* „die schalter mit schwarzer auswahl gefallen mir nicht.
   wir sollten hier eine zum gesamtdesign passendere farbauswahl
   suchen." ***Gemessen vor dem Zeichnen:*** **`--text` auf `--marke`
   = 6,98 : 1** *(die Schwelle ist 4,5)*; **keine neue Farbe**, *die
   Hausfarbe steht seit je in der Palette (09/9.1).* */
/* ***Variante A*** *(Betreiberentscheidung vom 17.09.2026, nach vier
   Mockup-Gruppen)*. **Die Regel dahinter ist die eigentliche
   Entscheidung:** *Handlungen werden* **gefuellt**, *Zustaende*
   **markiert** — **damit kann eine Reglerstufe nie mit einem Knopf
   verwechselt werden**, *egal welche Farbe der Knopf traegt.*

   > ***Zwei Farben waren vorher da und sind verworfen:*** `--text`
   > *gefuellt* **(„die schalter mit schwarzer auswahl gefallen mir
   > nicht")** *und* `--marke` *gefuellt* **(zu nah am Hauptknopf)**.
   > *09/9.1a sagt „Nicht festgelegt ist die Gestaltung"* — **diese
   > Regel ist ein Nachtrag dorthin.**

   ***Das `background` steht ausdruecklich da, obwohl es das Erbe
   waere:*** **der Kontrastzensus liest nur Ruempfe mit `color` und
   `background`** *(`kern.KontrastZensusTest`)*; **ohne die Zeile
   verschwaende das Paar still aus der Messung.** *Gemessen:*
   `--text` *auf* `--karte` **= 14,87 : 1**, *die ungewaehlten*
   `--neben` **= 4,53 : 1** *(die Schwelle ist 4,5)*. **Die Kante in**
   `--knopf` **trifft 4,13** — *fuer Nichttext gilt 3 : 1 (WCAG
   1.4.11), also zulaessig.*

   *Das `padding` traegt die Kante mit,* **damit die Zeile nicht
   springt**: *7 + 4 + 3 = 10 + Rahmen, wie vorher.* */
.stufenreihe input:checked + span {
  background: var(--karte); color: var(--text); font-weight: 600;
  padding-bottom: 4px; border-bottom: 3px solid var(--knopf);
}
/* **Der Tastaturring gehört an die Fläche**, *nicht an den verborgenen
   Knopf* — sonst sieht niemand, wo er steht. */
.stufenreihe input:focus-visible + span { outline: 2px solid var(--marke); outline-offset: -2px; }

.kipp { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; padding: 4px 0; }
.kipp input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.kippbahn { width: 38px; height: 21px; border-radius: 20px; background: var(--linie); position: relative; flex: none; transition: background .15s; }
.kippbahn::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--karte); box-shadow: 0 1px 2px var(--schatten-pop); transition: left .15s; }
.kipp input:checked + .kippbahn { background: var(--marke); }
.kipp input:checked + .kippbahn::after { left: 19px; }
.kipp input:focus-visible + .kippbahn { outline: 2px solid var(--marke); outline-offset: 2px; }
.kipp.ausgegraut { opacity: .45; cursor: default; }

/* ===== Die Werkzeugleiste der Feinarbeit (06/2.9) =======================
   **Weg A, am Mockup entschieden** *(16.09.2026)* — *die Knöpfe setzen
   Markierungszeichen in den Text.*

   ***Ohne Skript trägt sie `hidden`*** (06/2.8: „zwei Wege, nicht
   einer") — **das Textfeld allein ist der Weg.**

   *Die Fläche trägt `--text` auf `--flaeche-still`* — **14,31 : 1.** */
/* ***`hidden` muss gewinnen*** — *eine Klasse mit `display` schlaegt
   das Merkmal sonst tot,* **und die Leiste staende ohne Skript da.**
   *Genau die Zusage, die dieser Zug traegt; gefangen vom
   `VerborgenWaechterTest`.* */
.wzleiste[hidden] { display: none; }

/* ***Die zwei Kopierknöpfe in Schritt 8*** *(16.09.2026, Durchgang
   P17)* — **sie fielen nicht auf:** *vier Glieder in einer Reihe,
   Knopf und Satz im Wechsel, und die Beschriftung brach zweizeilig
   um.* **Jetzt ein Paar je Knopf, der Satz darunter** — *und die
   Marke als Kante links,* **keine neue Farbe** *(09/9.1: „Farben
   werden als Variablen angelegt"; die Kante ist dieselbe Bauart wie
   an* `.p-folge`*)*. */
/* **Luft nach oben** *(Betreiberwunsch vom 20.09.2026: „das hängt zu
   dicht aneinander")* — *die Hashtag-Zeile des Textes und die
   Kopierknöpfe berührten sich.* */
.kopierzeile { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin-top: 14px; }
.kopierzeile[hidden] { display: none; }
.kopierpaar { display: flex; flex-direction: column; gap: 4px; max-width: 260px; }
/* ***Zwei Klassen, nicht eine*** *(17.09.2026, Fund am Bildschirm)*.
   **`.btn` steht 680 Zeilen weiter unten und schreibt zwei
   Kurzformen** — `border: 1px solid …` *und* `font: inherit`. *Bei
   gleicher Spezifitaet gewinnt die spaetere Regel,* **und die
   Kurzformen loeschen `border-left` und `font-weight` mit.** *Die
   ganze Regel war wirkungslos, nicht nur die Kante.*

   ***`.btn.verwerfen` macht es seit je richtig*** *(Zeile 203)*:
   **zwei Klassen schlagen eine, unabhaengig von der Reihenfolge.**
   *Dazu die Langform statt der Kurzform* — `border-left-width` *und
   seine Geschwister koennen von keinem spaeteren* `border:`
   *ueberrascht werden, das vorher steht.* */
.btn.kopierknopf {
  border-left-width: 3px; border-left-style: solid;
  border-left-color: var(--marke); font-weight: 600;
}
.wzleiste { display: flex; flex-wrap: wrap; gap: 3px; padding: 6px; background: var(--flaeche-still); border: 1px solid var(--linie); border-bottom: none; border-radius: 7px 7px 0 0; }
.wzknopf { min-width: 32px; height: 30px; padding: 0 9px; border: 1px solid transparent; border-radius: 5px; background: transparent; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.wzknopf:hover { background: var(--karte); border-color: var(--rand-stark); }
.wzknopf:focus-visible { outline: 2px solid var(--marke); outline-offset: -1px; }
.wztrenner { width: 1px; background: var(--linie); margin: 3px 5px; }
/* *Das Feld schließt an die Leiste an* — **eine Kante, kein Spalt.** */
.wzleiste + .field { border-radius: 0 0 7px 7px; }

/* ===== Filterleiste und Listen (9.3b) ==================================== */
/* **Die Filterzeile ist eine Zeile. Was nicht hineinpasst, ist kein
   Filter** (9.3b, L131). Kein Umbruch, kein Aufklappen — ein verborgener
   aktiver Filter macht die Liste unwahr. Die Felder dürfen schrumpfen;
   passt es dann noch nicht, fällt ein Filter, nicht die Regel. */
.filterbar { padding: 12px 18px; margin-bottom: 16px; }
.filterzeile { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; width: 100%; }
/* Die Facetten der Bildsuche stehen unter der Suchzeile — **im selben
   Formular**, damit kein Knopf verwirft, was der andere gesetzt hat.
   Jede der beiden bleibt für sich eine Zeile (L131). */
.facettenzeile { margin-top: 8px; }
.field { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--rand-stark); border-radius: var(--radius-s); background: var(--karte); color: var(--text); font: inherit; font-size: 13px; }
.filterzeile .field { flex: 0 1 auto; min-width: 0; text-overflow: ellipsis; }
select.field { -webkit-appearance: none; appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7A6E' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; cursor: pointer; }
/* Ein nicht gesetzter Filter trägt nur seinen Namen, ein gesetzter seinen
   Wert — daran erkennt man auf einen Blick, welcher greift. */
select.field:not(.gesetzt) { color: var(--neben); }
select.field.gesetzt { border-color: var(--knopf); color: var(--text); font-weight: 600; }
.field.grow { flex: 1 1 auto; min-width: 110px; }
.filterzeile .btn { flex: 0 0 auto; }
input.field::placeholder { color: var(--neben); }
/* Die Filterzeile trägt KEINE zweite Zahl (9.3a, Befund F4) — der Umfang
   steht in der Unterzeile. */

.kt { width: 100%; border-collapse: collapse; }
.kt thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--beschriftung); font-weight: 600; padding: 10px 18px; border-bottom: 1px solid var(--linie); background: var(--flaeche-still); white-space: nowrap; }
.kt thead th a { text-decoration: none; }
/* **Die Sortierung ist erkennbar** (9.3b). Gefordert ist Erkennbarkeit,
   nicht Bedienbarkeit — die Spalte, nach der geordnet wird, trägt die
   Richtung. */
.kt thead th.sortiert { color: var(--text); }
.kt thead th .richtung { margin-left: 4px; color: var(--knopf); font-weight: 700; }
.kt tbody td { padding: 11px 18px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.kt tbody tr:last-child td { border-bottom: 0; }
.kt .c-id { color: var(--beschriftung); font-size: 12.5px; white-space: nowrap; }
.kt .c-titel { font-weight: 600; }
.kt .c-titel a { text-decoration: none; }
.kt .c-titel a:hover { color: var(--knopf); }
.kt .c-num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--neben); }
.kt .c-leer { color: var(--leer); }
/* Und dieselbe Farbe außerhalb der Tabelle. Die Regel darüber ist auf
   `.kt` beschränkt; `routen/detail.html` setzt `c-leer` seit Portion 5 an
   sechs Stellen in Abschnitten — „Noch keine Vermerke", „Noch keine
   Anhänge" —, und dort wirkte sie nicht: Der Satz stand in voller
   Textfarbe und las sich wie Inhalt statt wie dessen Abwesenheit.
   Gefunden beim Bau der Tour, die denselben Satzbau braucht. */
.c-leer { color: var(--leer); }
.kt tbody tr:hover { background: var(--zeile-hover); }
.kt tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--marke); }
.list-leer { padding: 26px 18px; text-align: center; color: var(--neben); font-size: 13.5px; }

.blaettern { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--linie); font-size: 13px; color: var(--neben); }
.blaettern a { text-decoration: none; color: var(--knopf); font-weight: 600; }
.blaettern .spacer { flex: 1; }

/* ===== Detailansicht — Muster 9.3 ======================================== */
.detail-wrap { display: grid; grid-template-columns: 1fr 176px; gap: 26px; align-items: start; }
@media (max-width: 1000px) { .detail-wrap { grid-template-columns: 1fr; } }
/* 1 — Kennung und Typ, darüber nichts */
.card-top .eyebrow { font-size: 12.5px; color: var(--beschriftung); }
.card-top .eyebrow b { color: var(--neben); font-weight: 600; }
/* 2 — Titel und daneben der Status */
.title-row { display: flex; align-items: center; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
.title-row h1 { font-size: 27px; }
/* 3 — Handlungen rechts oben, genau eine hervorgehoben */
.actions { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.abtn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; font: inherit; font-size: 13px; border-radius: var(--radius-s); border: 1px solid var(--rand-stark); background: var(--karte); color: var(--neben); cursor: pointer; text-decoration: none; }
.abtn svg { width: 15px; height: 15px; }
.abtn.primary { background: var(--knopf); border-color: var(--knopf); color: var(--knopf-fg); font-weight: 600; }
.abtn.danger { color: var(--st-deakt-fg); }

/* 4 — Aktueller Hinweis, farblich abgesetzt (kommt mit Kapitel 13) */
.hinweis { display: flex; gap: 12px; align-items: flex-start; background: var(--hinweis-bg); border: 1px solid var(--hinweis-linie); border-left-width: 4px; border-radius: var(--radius); padding: 13px 16px; margin-top: 20px; }
.hinweis .txt { color: var(--hinweis-text); } .hinweis .txt b { color: var(--hinweis-fett); }
.hinweis .bis { display: block; margin-top: 4px; font-size: 12.5px; opacity: .85; }
/* **`display` schlägt `hidden`** — dieselbe Falle wie beim Fortschritt
   (unten), und diesmal an zwei Bildschirmen zugleich. Ohne diese Zeile
   stand der Mengenhinweis des Erzeugungsdialogs bei **null Zeichen** da:
   Vorlage und Skript blendeten ihn beide korrekt aus, und beide wirkten
   nicht. Am Bildschirm gefunden am 18.08.2026, `kern.
   VerborgenWaechterTest` hält die Regel seither über den ganzen
   Bestand. */
.hinweis[hidden] { display: none; }
/* **Abgelaufen heißt nicht verschwunden** (Spez. 08, 7.4) — der Kasten
   bleibt, verliert aber seine Dringlichkeit: *Ein abgelaufener Hinweis,
   der aussieht wie ein gültiger, ist schlimmer als keiner.* */
.hinweis.abgelaufen { background: var(--st-entwurf-bg); border-color: var(--rand-stark); }
.hinweis.abgelaufen .txt, .hinweis.abgelaufen .txt b { color: var(--st-entwurf-fg); }
.hinweiswahl { margin-top: 10px; }
.hinweiswahl form { display: flex; flex-direction: column; gap: 8px; max-width: 520px; margin-top: 8px; }

.sec { margin-top: 26px; }
.sec > h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--beschriftung); margin-bottom: 12px; font-family: var(--font-body); font-weight: 700; }

/* 4a — Mehrere gleichartige Unterblöcke in einem Abschnitt (Nachbereitung:
   Parkplatz und Einkehr; die drei Abrechnungsgruppen) — dasselbe
   Abstands-Idiom wie .panel + .panel, die eigene <h3> trägt das
   Trennsignal, kein zusätzlicher Rahmen nötig.

   Zwei Selektoren, ein Wert: Der Bedarf ist derselbe, und zwei Regeln
   mit derselben Zahl laufen mit der ersten Änderung auseinander. */
.teil-erfahrung + .teil-erfahrung,
.gruppe + .gruppe { margin-top: 18px; }

/* 5 — Felder am gemeinsamen Raster (9.2a): ein Raster für den ganzen
   Schirm. Ein Abschnitt mit drei Feldern lässt die vierte Spalte leer. */
.raster { display: grid; grid-template-columns: repeat(var(--spalten), 1fr); gap: 15px 22px; }
@media (max-width: 900px) { :root { --spalten: 2; } }
@media (max-width: 560px) { :root { --spalten: 1; } }
.sp2 { grid-column: span 2; }
.sp3 { grid-column: span 3; }
.voll { grid-column: 1 / -1; }

/* 5a — Der Abstand zwischen zwei Zeilen eines Satzes (Formsets: Team am
   Termin, Konten und Ansprechpartner an der externen Stelle, Referenzen,
   Standorte).

   ***Die Zahl ist keine Wahl, sondern eine Beziehung:*** Sie muss
   GRÖSSER sein als der vertikale `gap` oben. Ein Satzblock, dessen
   Löschkästchen in eine zweite Rasterzeile rutscht, wird sonst falsch
   gelesen — das Auge gruppiert nach Nähe, und was enger steht, gehört
   zusammen. Bei 12 aussen zu 15 innen sagt das Layout: das Kästchen
   eröffnet den nächsten Block.

   Gefunden am Team des Termins (10.08.2026), und der Bestand trug den
   Fehler an allen sechs Stellen — 10px, 12px, 14px, alle unter 15.
   Die 22 ist der zweite Wert derselben `gap`-Regel, also keine neue
   Zahl im System. Kein Fachdokument regelt das: 09/9.2a sagt
   ausdrücklich, das Raster sage „nicht wie viel Abstand, sondern dass
   alles an derselben Kante beginnt". Ein Wächter in `kern/tests.py`
   hält die Beziehung. */
.satzzeile { margin-bottom: 22px; }
.feld .f-label { font-size: 12px; color: var(--beschriftung); margin-bottom: 3px; }
.feld .f-val { font-size: 14px; }
.feld .f-val.leer { color: var(--leer); }
/* Geerbte und abgeleitete Felder tragen eine Kennzeichnung (9.3, Punkt 5,
   L121). Sie sagt: dieser Wert entsteht nicht hier.
   Sie hieß bis zum 08.08.2026 `.geerbt` und trug damit nur den ersten
   ihrer Fälle. Mit Portion 4 kamen zwei weitere hinzu — `nach DIN`
   (gerechnet) und `abgeleitet` (aus zwei anderen Feldern) —, und der
   Name behauptete etwas Falsches. L121 nennt beides in einem Atemzug:
   „geerbte UND abgeleitete Felder". Der Name folgt jetzt der Regel.
   Zurückhaltend, nicht als Statusfläche: Sie ist eine Herkunftsangabe,
   kein Zustand — die vier Flächen aus 9.1b bleiben dem Status. */
.herkunft { display: inline-block; margin-left: 5px; padding: 1px 6px;
          border: 1px solid var(--linie); border-radius: 9px;
          font-size: 10.5px; font-weight: 500; color: var(--neben);
          letter-spacing: .2px; vertical-align: 1px; cursor: help; }
/* ***Eine Reihe, die umbricht*** — *am 05.09.2026 vom Punkt vor
   `.feld` befreit* **(Betreiberentscheidung)**. Sie stand seit je
   da, aber nur innerhalb eines Formularfeldes; **die Marken an den
   Kacheln standen deshalb untereinander** — *bei vier Kanälen vier
   Zeilen je Foto.* ***Sie einfach zu benutzen wäre die Falle
   gewesen, vor der `KlassenwaechterTest` warnt:*** **der Name stand
   in einer Regel, gewirkt hätte nichts.** */
.taglist { display: flex; flex-wrap: wrap; gap: 6px; }
/* Listenfelder stehen in eigener Zeile unter den kurzen Feldern (9.3, L105) */
.listenzeile { margin-top: 15px; }
/* Die Bereiche der Content-Werkstatt (09/7.0). Sie stehen als Zeile über
   der Arbeitsfläche und nicht als Untermenü: `rahmen.html` macht aus
   einem Menüpunkt mit Unterpunkten ein `<span>` — er wäre dann kein Link
   mehr und trüge das Datenbanksymbol von Stammdaten. Gemessen am
   14.08.2026. */
.werkstattbereiche { margin-bottom: 18px; }
.reflist { display: flex; flex-direction: column; gap: 6px; }
.reflist .ref { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.reflist .ref .bez { font-weight: 500; }
.reflist .ref a { color: var(--knopf); }
/* **Die Nebenangaben einer Standortzeile** (01/3.6): Ortsbezeichnung und
   Koordinaten stehen neben Bezeichnung und Region, aber leiser.

   ***`.s-meta` gab es schon — an einem anderen Ort.*** Die Regel
   `.statuszeile .s-meta` (weiter unten) gehört dem **Systemstatus**; die
   Standortzeile steht in einer `.reflist`. **Der Name stand also im
   Stilblatt und wirkte hier trotzdem nicht** — gefunden am 09.08.2026
   beim Erweitern des Klassenwächters, *der genau das nicht sehen kann.*

   **Koordinaten in Zifferngleichlauf**, wie `.protokoll time`: *Untereinander
   stehende Zahlen, die springen, liest niemand als Spalte.* */
.reflist .ref .s-meta { color: var(--neben); font-size: 12.5px; }
.reflist .ref .s-gps { color: var(--neben); font-size: 12px;
                       font-variant-numeric: tabular-nums; }

/* 6 — Texte, lange zuletzt */
.flie p { margin: 0 0 12px; max-width: 70ch; } .flie p:last-child { margin-bottom: 0; }
.flie ul { margin: 0 0 12px; padding-left: 18px; max-width: 70ch; }
.flie li { margin-bottom: 4px; }

/* Der Texteditor (Spez. 01, 3.3e, L128) — **eine Leiste, vier
   Auszeichnungen.** Sie sitzt über dem Feld und ist bewusst klein: Sie
   ist ein Werkzeug, kein Bedienfeld. Ohne JavaScript entsteht sie nicht,
   und das Textfeld bleibt, was es war. */
.editorleiste { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.editorleiste .ew {
  height: 26px; min-width: 30px; padding: 0 9px; font-size: 12.5px;
  border: 1px solid var(--rand-stark); border-radius: var(--radius-s);
  background: var(--karte); color: var(--text); cursor: pointer;
}
.editorleiste .ew:hover { border-color: var(--marke); }
.editorleiste .ew.fett { font-weight: 700; }
.editorleiste .ew.kursiv { font-style: italic; }
.editorleiste .ehinweis { font-size: 11.5px; color: var(--neben); margin-left: auto; }

/* 8 — die vier gemeinsamen Bereiche in einer Zeile, je mit Anzahl */
.bereiche { display: grid; grid-template-columns: repeat(var(--spalten), 1fr); gap: 12px; }
/* **Anklickbar**, weil jede Kachel zu ihrem Abschnitt springt. */
.bereich { display: block; text-decoration: none; color: inherit; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); padding: 14px 16px; }
.bereich .b-top { display: flex; align-items: center; gap: 9px; }
.bereich .b-name { font-weight: 600; font-size: 14px; }
.bereich .b-count { margin-left: auto; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); background: var(--grund); border: 1px solid var(--linie); min-width: 26px; text-align: center; border-radius: 20px; padding: 1px 8px; }
.bereich .b-count.leer { color: var(--leer); font-weight: 600; }
.bereich .b-hint { font-size: 12px; color: var(--beschriftung); margin-top: 8px; }
a.bereich:hover { border-color: var(--rand-stark); }
/* Auf dem Telefon untereinander — vier Spalten gibt es dort nicht. */
@media (max-width: 900px) { .bereiche { grid-template-columns: 1fr 1fr; } }

/* Kommentare (Spez. 01, Kap. 9) — Text, Autor, Zeitpunkt, Antworten
   eine Ebene tief. **Die Antwort rueckt ein**, damit man sieht, worauf
   sie sich bezieht, ohne den Faden zu lesen. */
.kommentare, .kommentare .antworten { list-style: none; margin: 0; padding: 0; }
.kommentare > li { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.kommentare > li:last-child { border-bottom: 0; }
.kommentare .kopf { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.kommentare .kopf time { color: var(--neben); font-size: 12.5px; }
.kommentare .txt { font-size: 13.5px; }
.kommentare .txt p { margin: 4px 0 0; }
.kommentare .antworten { margin: 8px 0 0 18px; padding-left: 12px; border-left: 2px solid var(--linie); }
.kommentare .antworten > li { padding: 6px 0; }
.antwortform { display: flex; gap: 8px; margin-top: 8px; }
.antwortform .field { flex: 1; max-width: 420px; }
.kommentarform { margin-top: 14px; max-width: 620px; }

/* Der erkannte Text am Bild (Spez. 01, Kap. 2) — schmal wie die Kachel,
   die ihn traegt. */
.bildtext { margin-top: 8px; }
.bildtext > summary { font-size: 12px; }
.bildtext textarea { width: 100%; font-size: 12.5px; min-height: 90px; margin: 6px 0; }

/* Die uebergreifende Suche (Spez. 01, Kap. 2) — Treffer gemischt, jede
   Zeile mit ihrem Bereich. */
.suchfeld { min-width: 280px; }
.trefferliste { list-style: none; margin: 0; padding: 0; }
.trefferliste > li { padding: 12px 0; border-bottom: 1px solid var(--linie); }
.trefferliste > li:last-child { border-bottom: 0; }
.trefferliste .kopf { display: flex; align-items: baseline; gap: 10px; }
.trefferliste .bereich {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--neben); background: var(--grund); border: 1px solid var(--linie);
  border-radius: 20px; padding: 1px 9px; flex: none;
}
.trefferliste .auszug { font-size: 13px; color: var(--neben); margin-top: 4px; max-width: 80ch; }
.trefferliste .fundorte { font-size: 12.5px; margin-top: 4px; }
/* Die Miniatur der Bildsuche (Spez. 04, 4a.5) — ein weiteres Glied der
   Kopfzeile, die ohnehin eine Reihe ist. Kein eigener Umbau der Zeile:
   die übrigen Bereiche liefern keine und merken nichts davon. */
.trefferliste .trefferbild { width: 72px; height: 54px; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--linie); flex: none; align-self: center; }

/* Sprungmenü „Auf dieser Seite" (9.3a) */
.sprung { position: sticky; top: calc(var(--topbar) + 24px); }
.sprung .cap { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--beschriftung); font-weight: 700; margin: 0 0 8px 10px; }
.sprung a { display: block; padding: 6px 10px; font-size: 13px; color: var(--neben); text-decoration: none; border-left: 2px solid var(--linie); }
.sprung a:hover { color: var(--text); border-left-color: var(--marke); background: var(--karte); }

.leerfeld { border: 1px dashed var(--linie); border-radius: var(--radius); padding: 18px; text-align: center; color: var(--leer); font-size: 13px; background: var(--flaeche-still); }

/* ===== Formulare ========================================================= */
/* Auch das Formular hängt am Raster des Bildschirms (9.2a). Auf dem
   Bearbeitungsformular bleiben alle Felder stehen — dort füllt man sie
   (9.3, L119). */
.form { max-width: 900px; }
.form .frow { margin-bottom: 0; }
.form label, .form .f-label { display: block; font-size: 12.5px; color: var(--neben); margin-bottom: 5px; font-weight: 600; }
.form label .opt, .form .f-label .opt { color: var(--leer); font-weight: 400; }
/* **Ein Kontrollkästchen steht neben seinem Text**, nicht darunter —
   dieselben drei Eigenschaften wie bei .zone-arten und .punktziel.
   Das Feld liegt innerhalb des Etiketts; ohne das brächte kein Stil
   die beiden in eine Zeile. */
.form label.haken { display: flex; align-items: center; gap: 6px; }
/* **Eine Gruppe von Kästchen** (`_feld.html`, 09/9.2; 22.09.2026) —
   *die Zeilen der Werkstatt-Quellen, ab elf Einträgen im `.rollkasten`.*
   **„Text ansehen" steht unter seinem Etikett, eingerückt um die Breite
   des Kästchens** — *außerhalb des Etiketts, sonst schaltete der Klick
   das Kästchen.* */
.kaestchengruppe { margin-bottom: 5px; }
.zeilentext { font-size: 12px; margin: 2px 0 6px; }
.zeilentext > summary { cursor: pointer; color: var(--neben); }
.kaestchengruppe .zeilentext { margin: -2px 0 6px 22px; }
/* ***Dieselbe Absicherung fuer den Kippschalter*** *(16.09.2026,
   Durchgang P9)*. **`.form label` traegt `display: block` und hat
   hoehere Spezifitaet als `.kipp`** *(eine Klasse plus ein Element
   schlaegt eine Klasse)* — **also wurde `.kippbahn` inline, verlor
   `width` und `height`, und ihr weisser Knopf lag ueber dem Text:**
   *„der weisse schalter fuer das zitat ist falsch plaziert, er haengt
   auf dem text."* ***`.haken` hatte diese Zeile, `.kipp` nicht*** —
   *die Diagnose ging der Behebung voraus, eine erste Vermutung
   (`position: absolute` ohne Bezugsrahmen) war falsch.* */
.form label.kipp { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 5px; }
/* **Ausgeschlossen wird, was aufgezählt war** (15.08.2026).

   Hier stand eine Liste der erlaubten Arten — `text · password · email ·
   number`. **Jede Art, die nicht darin steht, blieb ungestylt:** ohne
   Rahmen, ohne Breite, ohne Polsterung, in der Schrift des Browsers.

   > **Am Bildschirm des Betreibers gefunden**, am Linkfeld des
   > Auslagerns (`type=url`): *ein nacktes, schmales Kästchen mitten in
   > einem gesetzten Formular.*
   >
   > ***Und gemessen war es nicht mein Feld allein:*** **`type=date`
   > steht an vier Stellen im Bestand** — *Aktueller Hinweis, Passwort-
   > wechsel, Umbenennung, Termin* — **und in keiner Regel.** *Jedes
   > Datumsfeld der Anwendung war seit seinem Bau ungestylt;* **es fiel
   > nicht auf, weil ein Browser sein Datumsfeld selbst schmückt und das
   > Ergebnis für sich genommen nicht falsch aussieht.**
   >
   > ***Dieselbe Fehlerart, die dieses Vorhaben führt:*** **eine
   > Aufzählung neben einer Regel**, und die Aufzählung wandert nicht
   > mit. *Vgl. die Filterliste in 04/4a.5 und die Formatliste in 06/6.7.*

   **Deshalb die Umkehrung:** *gestylt wird jedes Eingabefeld eines
   Formulars* — **außer den sechs, die ihre eigene Gestalt haben** und
   von einem Rahmen mit voller Breite entstellt würden. `hidden` ist
   nicht sichtbar und stünde nur der Vollständigkeit halber da; es wird
   trotzdem genannt, damit die Liste die Frage „warum fehlt das?" nicht
   aufwirft. */
.form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=submit]):not([type=button]):not([type=hidden]),
.form textarea, .form select {
  width: 100%; border: 1px solid var(--rand-stark); border-radius: var(--radius-s); background: var(--karte);
  font: inherit; font-size: 14px; color: var(--text); padding: 9px 11px;
}
.form textarea { resize: vertical; min-height: 88px; }
/* ***Ein Textfeld ist kein Eingabefeld*** (Fund vom 15.09.2026, am
   Bildschirm des Betreibers: „das freitextfeld ist zu klein"). `.field`
   setzt `height: 36px` für alle Felder; bei einem `textarea` schlägt das
   `rows` tot, und `min-height: 88px` hob jedes auf dieselben 88 px —
   **auch das Feld der Feinarbeit, das `rows="18"` trägt.** */
textarea.field { height: auto; }
.form select[multiple] { min-height: 150px; padding: 6px; }
/* ***Das Auge am Passwortfeld*** *(Betreiberwunsch vom 27.09.2026, am
   Mockup entschieden: neben dem Feld, kein Overlay)*. **Die grosse
   Feldregel oben traegt durch ihre sieben `:not` die Spezifitaet
   (0,8,1)** — *ein Overlay mit `padding-right` am Input verloere gegen
   ihr `padding` ohne `!important`, gleich wo die Regel steht.* Flex
   setzt keine ihrer Eigenschaften: `width: 100%` bleibt als Flexbasis
   und schrumpft neben dem Knopf. **Ohne JavaScript ist der Knopf
   `hidden`, und das Bild ist das heutige.** *`::-ms-reveal` nimmt das
   browsereigene Auge (Edge) fort — sonst stuenden zwei nebeneinander.*
   **Die `svg[hidden]`-Regel traegt den vollen Vorwaehlersatz**, damit
   sie `display: block` durch Spezifitaet schlaegt, nicht nur durch
   die Reihenfolge. */
.passwortfeld { display: flex; align-items: center; gap: 6px; }
.passwortfeld input { flex: 1 1 auto; min-width: 0; }
.passwortfeld input::-ms-reveal { display: none; }
.passwortfeld .wzknopf { flex: none; color: var(--neben); }
.passwortfeld .wzknopf svg { width: 18px; height: 18px; display: block; }
.passwortfeld .wzknopf svg[hidden] { display: none; }
.form .fixed { display: inline-flex; align-items: center; height: 38px; padding: 0 11px; border: 1px solid var(--linie); border-radius: var(--radius-s); background: var(--grund); color: var(--neben); font-size: 13.5px; }
.form .hilfe { font-size: 12.5px; color: var(--neben); margin-top: 5px; }
/* Schreibhilfe am Primärtyp (Spez. 01, 3.3c) — trägt der Typ keine,
   erscheint nichts. Kein leerer Kasten. */
.schreibhilfe { background: var(--hinweis-bg); border: 1px solid var(--hinweis-linie); border-radius: var(--radius-s); padding: 9px 12px; font-size: 12.5px; color: var(--hinweis-text); margin-top: 6px; }
.schreibhilfe .sh-kopf { font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 10.5px; opacity: .8; }
.form .fehler { color: var(--st-deakt-fg); font-size: 12.5px; margin-top: 5px; }
.form input.hat-fehler, .form textarea.hat-fehler, .form select.hat-fehler { border-color: var(--st-deakt-fg); }
/* ***Auch hier muss `hidden` gewinnen*** *(seit dem 16.09.2026)* —
   **die Kopierzeile in Schritt 8 traegt es**, *und ohne diese Regel
   staende sie ohne Skript da.* */
.form-actions[hidden] { display: none; }
.form-actions { display: flex; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--linie); }
/* **„Weitere …" unter den Zeilen eines Formsatzes** (22.09.2026) — *nicht
   `.form-actions`: die trägt Linie und Abstand der Speichern-Leiste.* */
.satzmehr { margin: 4px 0 12px; }
/* ===== Galerie und Ablagezone (Spez. 01, 6.2; Spez. 04, 6.2) ============
   Eine Galerie, nicht drei Bereiche — die Gruppierung entsteht aus der
   Reihenfolge, nicht aus Reitern. */
/* **Richtwert 300 px Kantenlänge** (Spez. 04, 2.2): *groß genug zur
   Beurteilung* — „ob ein Bild als Sachfoto der Kapelle taugt,
   entscheidet man nicht an einer Briefmarke". Bis zum 13.08.2026 waren
   es 180 px bei 140 px Bildhöhe. **Die Bildansicht ist einmal gebaut
   und überall aufgerufen**, deshalb gilt das Maß auch an Wissenskarte,
   Route und Tour — zwei Kachelgrößen wären zwei Bauarten. */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 6px; }
.kachel { margin: 0; border: 1px solid var(--linie); border-radius: var(--radius-s); overflow: hidden; background: var(--karte); }
.kachel img { width: 100%; height: 200px; object-fit: cover; display: block; }
.kachel figcaption { padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
/* **Das Logo einer externen Stelle** (08/Kap. 6) — *Ausgangsmaterial für
   die Branding-Pipeline*, hier nur zur Kontrolle gezeigt.

   ***Die Höhe stand bis zum 09.08.2026 als `style="max-height:80px"` am
   Bild.*** **Ein geretteter Inline-Stil ist das Eingeständnis, dass die
   Klasse nicht wirkt** — und dieselbe Angabe an zwei Orten ist der
   Fehler, den dieses Haus am häufigsten macht. */
.logo-vorschau { display: flex; flex-direction: column; gap: 6px;
                 align-items: flex-start; }
/* Das Karo unter der Vorschau — gerechnet, nicht geschmückt.

   Am Bildschirm des Betreibers gefunden (14.08.2026): Das TYWW-Logo ist
   weiß auf transparentem Grund. Auf der weißen Fläche wäre es
   unsichtbar; ein dunkles auf dunklem Grund ebenso. Das Karo sagt
   zugleich, dass hier Transparenz ist.

   Bei den Sponsorenlogos fiel es nie auf, weil die farbig sind; die
   Klasse steht seit Modul 8 und trug bis dahin keinen Hintergrund.

   DIE TÖNE SIND GERECHNET, NICHT GEWÄHLT. Der erste Griff nahm
   #565b60/#8b9197 und nannte sie „Mitteltöne" — weiß erreichte darauf
   2,64:1 und 1,70:1. Für eine Grafik gelten 3:1 als Untergrenze
   (WCAG 2.1, 1.4.11); die weiße Marke hat nie eine Chance gehabt, und
   für ein dunkles Logo war der Grund bestens. Genau deshalb sah es beim
   Bauen richtig aus.

   Diese beiden tragen alle vier Paarungen:

       #565b60   weiß 6,86:1   schwarz 3,06:1
       #8b9197   weiß 3,18:1   schwarz 6,59:1

   `DerKatalogZeigtSeineDateiTest` rechnet sie nach — die Vorgängerin
   fragte nur, OB ein Karo dasteht, und war grün, während der Bildschirm
   nichts zeigte. */
.logo-vorschau img { max-height: 120px; width: auto; padding: 6px;
                     border-radius: var(--radius-s);
                     background-color: var(--karo-dunkel);
                     background-image:
                       linear-gradient(45deg, var(--karo-hell) 25%, transparent 25%),
                       linear-gradient(-45deg, var(--karo-hell) 25%, transparent 25%),
                       linear-gradient(45deg, transparent 75%, var(--karo-hell) 75%),
                       linear-gradient(-45deg, transparent 75%, var(--karo-hell) 75%);
                     background-size: 16px 16px;
                     background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
/* Dieselbe Auskunft in einer Tabellenzelle, eine Nummer kleiner.

   Das Bild steht IN der Zelle, nicht die Klasse AN ihr:
   `.logo-vorschau` ist `display: flex`, und eine Tabellenzelle mit
   `flex` fällt aus dem Tabellenfluss (ZellenklassenwaechterTest). */
.minivorschau { max-height: 48px; width: auto; padding: 3px;
                border-radius: var(--radius-s);
                background-color: var(--karo-dunkel);
                background-image:
                  linear-gradient(45deg, var(--karo-hell) 25%, transparent 25%),
                  linear-gradient(-45deg, var(--karo-hell) 25%, transparent 25%),
                  linear-gradient(45deg, transparent 75%, var(--karo-hell) 75%),
                  linear-gradient(-45deg, transparent 75%, var(--karo-hell) 75%);
                background-size: 10px 10px;
                background-position: 0 0, 0 5px, 5px -5px, -5px 0; }
/* ***Hier stand `.kachel .tag { align-self: flex-start }`*** —
   *sie hielt die Marke davon ab, über die ganze Spalte zu ziehen.*
   **Seit die Marken in `.taglist` stehen, greift sie an nichts
   mehr**, und *auf den Behälter darf sie nicht übergehen:* **eine
   umbrechende Reihe braucht die volle Breite, sonst bricht sie nie
   um** (05.09.2026). */
.klein { font-size: 12px; color: var(--neben); display: inline-flex; align-items: center; gap: 5px; }
.zahl { font-size: 13px; font-weight: 400; color: var(--neben); }

/* Überall dieselbe Zone — gerade bei den Rückmeldungen entstehen sonst
   die Abweichungen zwischen Stellen. */
.zone { margin-top: 16px; padding: 14px; border: 1px dashed var(--rand-stark); border-radius: var(--radius-s); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; cursor: pointer; }
/* Während etwas darüber schwebt — die Zone soll zeigen, dass sie
   entgegennimmt. */
.zone.bereit { border-color: var(--knopf); background: var(--st-aktiv-bg); }
/* **Untereinander, nicht nebeneinander.** In einer Kachel von 200 px
   passen Auswahl und Knopf nicht in eine Zeile — der Knopf stand rechts
   außerhalb, und damit war die Handlung unerreichbar. Am Bildschirm
   gefunden am 05.08.2026. */
.auch { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.auch .field { font-size: 12px; height: 30px; padding: 0 8px; width: 100%; max-width: 100%; }
.auch .abtn { align-self: flex-start; }
/* **Im Fluss, nicht schwebend.** Das Klappfeld der Kopfzeile (.pop) legt
   sein Panel absolut über die Seite — in einer 180-px-Kachel bräche es
   heraus. Hier wächst die Kachel stattdessen mit. */
/* Die Farbe steht oben beim Griff — hier stünde sie **später in der
   Datei** und schlüge sie bei gleicher Spezifität. */
.arten > summary { font-size: 12px; cursor: pointer; padding: 3px 0; }
.arten form { display: flex; flex-direction: column; gap: 5px; margin: 5px 0 2px; }
.arten .field { font-size: 12px; height: 30px; padding: 0 8px; width: 100%; max-width: 100%; }
.arten .abtn { align-self: flex-start; }
.arten .klein { align-items: flex-start; line-height: 1.35; }
/* **Textfelder brauchen ihr Label darüber, nicht daneben.** `.klein` ist
   für Ankreuzfelder gebaut — dort steht das Wort neben dem Kästchen.
   Bei einem Eingabefeld drängte es sich in dieselbe Zeile und ließ dem
   Feld eine Handbreit. *Derselbe Griff wie bei `.probeform`.* */
.arten .klein:has(input[type=text]) { flex-direction: column; gap: 3px; width: 100%; }

/* **Die Angaben zum Motiv an der Kachel** (Spez. 04, 4a.5). Der Titel
   trägt, die Unterschrift erläutert, der Autor steht kleiner darunter —
   *drei Zeilen in gleicher Schrift wären eine Wand.* */
.kachel .motiv { color: var(--neben); font-size: 12px; line-height: 1.35; }
.kachel .motiv.titel { color: var(--text); font-weight: 600; font-size: 12.5px; }
.kachel .motiv.autor { font-size: 11.5px; }

/* **Die Spalte „Zur Prüfung"** (Position 16) — wer vorgelegt hat und
   warum. *Zwei Angaben in einer Zelle: Der Name trägt, der Grund
   erläutert; in gleicher Schrift wären sie ein Block.* */
.pruefung { display: flex; flex-direction: column; gap: 2px; max-width: 280px; }
/* **Eigene Namen, nicht `.wer`** — den trägt die Seitenleiste schon für
   den angemeldeten Nutzer. *Zwei Bedeutungen an einem Klassennamen sind
   dieselbe Falle wie ein Zeichen mit zwei Bedeutungen (3.3e).* */
.pruefung .vorleger { font-size: 13px; }
.pruefung .vorlagegrund { font-size: 12px; color: var(--neben); line-height: 1.35; }

/* Systemstatus (Spez. 09, Kap. 6) — fünf Zeilen, Begriff links, Auskunft
   rechts. Bei schmalem Schirm untereinander. */
.status { margin: 0; }
.statuszeile { display: grid; grid-template-columns: 220px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.statuszeile:last-child { border-bottom: 0; }
.statuszeile dt { color: var(--neben); font-size: 13.5px; }
.statuszeile dd { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.statuszeile .s-meta { color: var(--neben); font-size: 12.5px; }
/* **Was mahnt, sieht anders aus als was beruhigt** (6.1a). */
.statuszeile .warnt { color: var(--st-deakt-fg); }
.probeform { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.probeform .klein { flex-direction: column; align-items: flex-start; gap: 3px; }
@media (max-width: 720px) { .statuszeile { grid-template-columns: 1fr; gap: 4px; } }

/* ===== Das Cockpit (Spez. 09, Kap. 2) ================================
   **Links der Gegenstand, rechts der Status als Fläche** (2.1b) — und
   zwar in *jedem* Bereich: „damit tragen alle Cockpit-Bereiche dieselbe
   Zeile". *Darum kein Rasterpaar wie bei `.statuszeile`, wo links ein
   Begriff fester Breite steht — hier nimmt der Gegenstand den Platz und
   die Fläche steht rechts daneben.* */
.cockpitliste { list-style: none; margin: 0; padding: 0; }
.cockpitliste li { display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--linie); }
.cockpitliste li:last-child { border-bottom: 0; }
.cockpitliste .gegenstand { display: flex; flex-direction: column; gap: 3px; }
.cockpitliste .badge { flex: none; }

/* ===== Die Neuerungen (Spez. 09, Kap. 4) ==============================
   **Ein Verlauf, kein Formular.** Der Behälter ist das gewöhnliche
   `.panel`, jeder Eintrag ein Klappfeld mit dem Griff des Hauses
   (`klappgriff`). *Hier steht nur, was diesen Bildschirm von einem
   gewöhnlichen Klappfeld unterscheidet:* **die Kopfzeile aus Version,
   Kennzeichnung, Datum und einer Zeile Zusammenfassung.** */
.neuerung { padding: 12px 0; border-bottom: 1px solid var(--linie); }
.neuerung:last-child { border-bottom: 0; }
/* *Auf schmalen Bildschirmen rutscht die Zusammenfassung in die zweite
   Zeile, statt die Kopfzeile hinauszuschieben.* */
.neuerung > summary { flex-wrap: wrap; }
.neuerung-version { font-weight: 600; color: var(--text); }
.neuerung-datum { font-size: 12.5px; color: var(--neben); }
.neuerung-kurz { flex: 1 1 14rem; min-width: 0; color: var(--neben); }
/* **Das Lesemaß** — *derselbe Wert wie bei `.flie p`.* */
.neuerung-absatz { margin: 8px 0 0; max-width: 70ch; color: var(--text); }

/* ===== Der schmale Rahmen (Spez. 09, 9.4) =============================
   **Der einzige Bildschirm, der auf dem Telefon taugen muss.** Er trägt
   keine Seitenleiste — die des Hauptrahmens steht fest auf 248 px und
   ließe auf einem 375-px-Gerät 127 px übrig. */
body.schmal { background: var(--grund); }
.schmal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; background: var(--nav); color: var(--nav-text); }
.schmal-kopf .brand { color: var(--nav-text); }
.schmal-kopf .wer { font-size: 12.5px; opacity: .8; }
.schmal-inhalt { max-width: 560px; margin: 0 auto; padding: 18px 18px 40px; }
.schmal-inhalt h1 { font-size: 24px; margin: 6px 0 2px; }
.schmal-inhalt .sub { margin-bottom: 18px; }
.schnellform { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.schnellform input[type="file"] { width: 100%; }
/* **Am Telefon muss man treffen können** — 44 px ist die Größe, unter der
   ein Finger danebengreift. */
.schnellform .field, .schnellform input, .schnellform select { min-height: 44px; font-size: 16px; }
.schnellform button { min-height: 48px; font-size: 16px; }
.ortsstand { font-size: 12.5px; color: var(--neben); }
.ortsstand.hat-ort { color: var(--st-aktiv-fg); }
.zuletzt { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--linie); font-size: 13px; }

/* ===== Landkarte (Spez. 09, Kap. 8) ===================================
   **Ohne Höhe ist eine Karte unsichtbar.** Leaflet zeichnet in den
   Behälter und übernimmt dessen Höhe; hat er keine, ist sie null Pixel —
   die Bibliothek lädt, die Kacheln werden angefragt, die Punkte sind
   gesetzt, **und man sieht nichts.** Der bekannteste Anfängerfehler mit
   Leaflet und zugleich die Fehlerart dieses Projekts: Alles geschieht,
   nur sichtbar wird es nicht. */
.standortkarte { height: 320px; margin-top: 12px; border: 1px solid var(--linie); border-radius: var(--radius-s); }
/* Am Telefon flacher — dort zählt, dass darunter noch etwas steht. */
@media (max-width: 720px) { .standortkarte { height: 220px; } }
/* Die Bestandskarte des Moduls (3.6a) ist die Ansicht selbst, nicht eine
   Beigabe zu einem Feld — sie bekommt die Höhe, die eine Gegend braucht. */
.standortkarte.gross { height: min(70vh, 640px); margin-top: 0; }
@media (max-width: 720px) { .standortkarte.gross { height: 60vh; } }
/* Das Klappfeld des Kartenklicks (6.3, Weg 2) — zu, bis jemand es
   braucht: Die Kacheln laden erst beim Öffnen. */
/* Farbe und Griff stehen oben — hier stünden sie später in der Datei. */
.kartenwahl > summary { font-size: 12.5px; cursor: pointer; padding: 4px 0; }
.kartenwahl[open] > summary { margin-bottom: 6px; }
.kartenwahl .standortkarte { height: 260px; margin-top: 0; }

/* Das Objektprotokoll am Objekt (Spez. 01, 8.1) — die erste der beiden
   Lesestellen. **Drei Spalten in fester Breite**, damit die Zeitpunkte
   untereinander stehen: Wer ein Protokoll liest, sucht den Zeitraum, nicht
   den Satz. */
.protokoll { list-style: none; margin: 0; padding: 0; }
.protokoll li {
  display: grid; grid-template-columns: 130px 160px 1fr; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--linie); font-size: 13px;
}
.protokoll li:last-child { border-bottom: 0; }
.protokoll time { color: var(--neben); font-variant-numeric: tabular-nums; }
.protokoll .wer { font-weight: 600; }
/* Auf dem Telefon untereinander — drei Spalten à 110 px gibt es dort nicht. */
@media (max-width: 700px) {
  .protokoll li { grid-template-columns: 1fr; gap: 2px; }
}

/* Gleichzeitiges Bearbeiten (Spez. 01, 8.1a). **Die Auskunft ist leise,
   der Zusammenstoß nicht** — die erste ist eine Beiläufigkeit („hier war
   gerade jemand"), der zweite hält den Nutzer an. */
.zuletzt-geaendert { font-size: 12.5px; color: var(--neben); margin-bottom: 14px; }
.zusammenstoss .wege { display: flex; gap: 8px; margin-top: 10px; }
/* `.meldung.warnung` steht seit Kapitel 4 weiter oben — hier stand sie
   ein zweites Mal, bis ich nachgesehen habe. **Eine Angabe, ein Ort.** */

/* Der Umschalter Liste ⇄ Karte (3.6a) — zwei Wege, einer davon aktiv. */
.ansichtswahl { display: inline-flex; gap: 0; }
.ansichtswahl .abtn { border-radius: 0; }
.ansichtswahl .abtn:first-child { border-radius: var(--radius-s) 0 0 var(--radius-s); }
.ansichtswahl .abtn:last-child { border-radius: 0 var(--radius-s) var(--radius-s) 0; margin-left: -1px; }
.ansichtswahl .abtn.is-active { background: var(--nav); color: var(--weiss); border-color: var(--nav); }
/* Die Namensnennung der Kacheldienste (8.3, 8.5) — klein, aber lesbar;
   sie ist eine Bedingung ihrer Nutzung, keine Verzierung. */
.leaflet-container .leaflet-control-attribution { font-size: 10.5px; }

/* Der Fortschritt der Ablagezone (Spez. 04, 6.2) — die erste der drei
   einheitlichen Rückmeldungen. */
.fortschritt { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
/* **`display` schlägt `hidden`.** Ohne diese Zeile stand der leere
   Balken dauerhaft in der Zone — am Bildschirm gefunden am 05.08.2026,
   eine Stunde nachdem er gebaut war. */
.fortschritt[hidden] { display: none; }
.fortschritt progress { flex: 1; max-width: 320px; height: 8px; }
.fortschritt .stand { font-size: 12.5px; color: var(--neben); min-width: 110px; }

/* Videos an der Wissenskarte (4a.7) — höchstens zwei, deshalb breiter
   als eine Fotokachel: Ein Abspieler von 180 px wäre keiner. */
.filme { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 6px; }
.film { margin: 0; border: 1px solid var(--linie); border-radius: var(--radius-s); overflow: hidden; background: var(--karte); }
.film video { width: 100%; max-height: 260px; display: block; background: var(--film-grund); }
.film figcaption { padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.film figcaption form { display: flex; flex-direction: column; gap: 5px; }
.film .abtn { align-self: flex-start; }

/* Selbsttest (6.2) — **drei Ergebnisse, nicht zwei.** „Nicht prüfbar"
   bekommt eine eigene Farbe: Es ist weder ein Fehler noch eine
   Beruhigung, und beides zu suggerieren wäre die Fehlanzeige, gegen die
   das Kapitel geschrieben ist. */
.pruefliste { margin: 10px 0 0; }
.pruefzeile { display: grid; grid-template-columns: 220px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.pruefzeile:last-child { border-bottom: 0; }
.pruefzeile dt { color: var(--neben); font-size: 13.5px; }
.pruefzeile dd { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.pruefzeile dd > b { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; }
.pruefzeile dd > b::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--neben); }
.p-geht dd > b { color: var(--st-aktiv-fg); }
.p-geht dd > b::before { background: var(--st-aktiv-fg); }
.p-geht-nicht dd > b { color: var(--st-deakt-fg); }
.p-geht-nicht dd > b::before { background: var(--st-deakt-fg); }
.p-nicht-prufbar dd > b { color: var(--neben); }
@media (max-width: 720px) { .pruefzeile { grid-template-columns: 1fr; gap: 4px; } }
.ortsangebot { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
/* **Eine Regel, zwei Namen** — `.hakenreihe` ist dasselbe außerhalb der
   Ablagezone (Bildansicht: Kanäle und Fotoarten, Spez. 04, 2.2). Eine
   zweite Regel liefe mit der ersten Änderung auseinander. */
.zone-arten, .hakenreihe { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13.5px; }
.zone-arten label, .hakenreihe label { display: inline-flex; align-items: center; gap: 6px; }
.hakenreihe { margin: 10px 0; }
/* **Der rollende Kasten der Quellenlisten** (Spez. 06, 2.2 · 2.4a) —
   Betreiberentscheidung vom 18.08.2026.

   06/2.4a benutzt das Bild selbst: *„bei zwei ausgewählten Karten sind
   es zwei Zeilen, bei einundvierzig **rollt der Kasten**."* Am
   Bildschirm standen 148 Wissenskarten als Kästchen zwischen den
   Quellen und dem Prompt — man rollte an allen vorbei, um den Knopf zu
   erreichen.

   *Verworfen: erst suchen, dann sehen.* Wer nicht weiß, wonach er
   sucht, sähe nichts — genau der Einwand, mit dem L153 gegen die
   Klappliste entschieden hat.

   **Die Termine bekommen ihn seit C13** *(16.09.2026)* — *bis dahin
   nicht, mit A12: „Wer einen Newsletterbeitrag schreibt, sucht nichts
   — er sichtet."* **Die Annahme lief ab:** *bei fünfzig Terminen im
   Jahr stünden nach fünf Jahren 250 Kästchen untereinander.* */
.rollkasten { max-height: 260px; overflow-y: auto; border: 1px solid var(--linie);
  border-radius: var(--radius-s); padding: 6px 10px; background: var(--karte); }

/* Die Bildansicht im Vollbild (Spez. 04, 2.2, L81). Dunkler Grund,
   damit das Bild trägt und nicht die Fläche darum. */
.vollbild { background: var(--vollbild-grund); border-radius: var(--radius); display: grid; place-items: center; padding: 12px; }
.vollbild img { max-width: 100%; max-height: 70vh; display: block; }
.bildnav { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
/* **Abgesetzt, weil es keine Fotoart ist** — es sagt, was mit der Datei
   geschieht, nicht was sie darstellt. Stünde es in der Reihe der Arten,
   läse es sich als vierte. */
.zone-original { display: flex; align-items: center; gap: 6px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--linie); font-size: 12.5px; color: var(--neben); }

/* Warum ein Statusweg gerade nicht geht (Spez. 01, 7.2a). Steht unter der
   Handlungsleiste, damit der Knopf kurz bleibt — und sichtbar statt im
   Tooltip, weil ein Tastgerät nicht hovert. */
.wegsperre { margin-top: 10px; font-size: 13px; color: var(--neben); }

/* Die zweite Zusage vor dem harten Löschen (Spez. 01, 4.1) — sie steht
   für sich, damit sie nicht als weiteres Feld gelesen wird. */
.zusage { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; }
.zusage input { width: 17px; height: 17px; accent-color: var(--st-deakt-fg); cursor: pointer; }
.btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: var(--radius-s); border: 1px solid var(--rand-stark); background: var(--karte); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; }
/* **Dieselbe Zeile aus demselben Grund** — gefunden am 18.08.2026 von
   dem Wächter, der wegen des Mengenhinweises entstand, *bevor* er
   gebaut war. `werkstatt/umbenennen.js` setzt `knopfPacken.hidden` und
   meint es ernst; der Knopf „Packen" stand trotzdem seit Portion 2b von
   Anfang an da, ohne daß eine Datei gewählt war. */
.btn[hidden] { display: none; }
.btn.primary { background: var(--knopf); border-color: var(--knopf); color: var(--knopf-fg); font-weight: 600; }
.btn.danger { color: var(--st-deakt-fg); }
/* **Ein stummer Knopf ist als solcher zu sehen: grau** (06/2.1a,
   Bauposition 12; Fund vom 13.09.2026, Baublatt 358). *Bis dahin kannte
   das Stilblatt keine Regel für abgeschaltete Knöpfe:* **„Text
   erzeugen" war bei fehlendem Termin abgeschaltet und sah satt grün aus
   wie ein wacher.** *Der Betreiber sah einen Knopf, der nichts tat.*
   Die Regel gilt jedem Knopf des Hauses, nicht nur dem der Werkstatt. */
.btn:disabled, .btn[disabled] { background: var(--st-entwurf-bg); border-color: var(--linie); color: var(--st-entwurf-fg); cursor: default; font-weight: 400; }

/* ===== Der Schrittdialog (06/2.1a, L323) ================================= */
/* **Eine Seite, acht Schritte, offen ist genau einer.** *Ein erledigter
   Schritt ist ein `details.klappgriff` und trägt nur seine
   Überschrift — keine Zusammenfassung, kein Häkchen; der offene ist ein
   Panel wie überall.* **Der Zwischenschritt steht darin und zeigt, was
   an das Modell geht** (2.9). */
.schritt { margin-bottom: 14px; }
details.schritt { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px 16px; }
details.schritt > summary { font-weight: 600; color: var(--neben); }
details.schritt[open] > summary { color: var(--text); }
.zwischenschritt { margin: 10px 0; background: var(--flaeche-still); border: 1px solid var(--linie); border-radius: var(--radius-s); padding: 8px 14px; }
.zwischenschritt > summary { font-size: 13px; color: var(--neben); }

/* ===== Anmeldung ========================================================= */
.anmeldung { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.anmeldung .box { width: 100%; max-width: 380px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); padding: 30px 28px; }
.anmeldung .marke { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.anmeldung .marke .mark { width: 28px; height: 28px; border-radius: 7px; background: var(--marke); display: grid; place-items: center; }
.anmeldung .marke .mark svg { width: 17px; height: 17px; stroke: var(--weiss); }
.anmeldung .unter { color: var(--neben); font-size: 13px; margin-bottom: 22px; }
.anmeldung .btn { width: 100%; justify-content: center; margin-top: 4px; }
.anmeldung .fuss { margin-top: 18px; font-size: 12px; color: var(--neben); text-align: center; }

/* Marker unterscheiden sich nach Bedeutung (Spez. 09, 8.3b, L123).
   Der Befund: In der Werkbank trugen alle dieselbe Nadel. Der Betreiber
   sah zugeordnete Wissenskarten außerhalb des Umkreises und hielt die
   Umkreissuche für fehlerhaft. Ein Marker, der drei Dinge bedeuten kann,
   bedeutet nichts.
   Die Klassen setzt der Kartenbaustein aus der `rolle`, die das Modul
   je Marker mitgibt — der Baustein weiß nicht, was eine Wissenskarte
   ist.

   ZWEI KLASSEN, UND DAS IST DER GANZE PUNKT DIESER ZEILE.
   Leaflet setzt beide an dasselbe Element (leaflet.js, `_setIconStyles`:
   `t.className = "leaflet-marker-" + e + " " + (i.className || "")`),
   und `leaflet.css` führt in Zeile 42:

       .leaflet-marker-icon, .leaflet-marker-shadow { display: block; }

   `leaflet.css` wird in `karte.html` nachgeladen — am gerenderten
   Bildschirm nachgezählt: stil.css bei Zeichen 252, leaflet.css bei
   6517. Bei gleichem Gewicht (je eine Klasse) entscheidet die
   Reihenfolge, und dann gewinnt `display: block`.

   Die Folge war am Bildschirm zu sehen: `place-items: center` wirkte
   nicht, die Ziffer begann bei (2,2) — 15,6 Pixel vom Mittelpunkt, bei
   Radius 13 — und ragte weiß auf die Landkarte hinaus. Die Marker
   sahen aus wie leere Kreise, und genau die Nummer der
   Erzählreihenfolge ist der Kern von L123.

   Das Muster stand längst im Haus und wurde hier nicht angewandt:
   `.leaflet-container .leaflet-control-attribution` weiter oben führt
   aus demselben Grund zwei Klassen. */
.leaflet-marker-icon.kartenrolle {
              display: grid; place-items: center; border-radius: 50%;
               box-shadow: 0 1px 4px var(--schatten-karte); }
/* Zugeordnet: trägt die Nummer der Erzählreihenfolge — sie ist das
   Eigentliche, wofür die Werkbank existiert. */
.kr-zugeordnet { background: var(--knopf); color: var(--weiss); font-weight: 700;
                 font-size: 13px; line-height: 1; border: 2px solid var(--weiss); }
/* Start und Ende: eigene Form, keine Nadel. Ein Ring, kein Punkt —
   damit sie sich auch von einem Vorschlag unterscheiden. */
.kr-punkt { background: var(--weiss); border: 4px solid var(--kartenpunkt); }
/* Vorgeschlagen: schlicht und sichtbar zurückhaltender. Er ist ein
   Angebot, keine Entscheidung. */
.kr-vorgeschlagen { background: var(--neben); opacity: .55;
                    border: 2px solid var(--weiss); }

/* Die Punkte des Tages — je eigene Form (8.3b, vierte Zeile).

   ***Am Bildschirm gefunden am 11.08.2026:*** Auf der Werkbank standen
   zwei grüne Kreise mit derselben Nummer 1 — die zugeordnete
   Wissenskarte und der Pausenplatz. *„Ein Marker, der drei Dinge
   bedeuten kann, bedeutet nichts"* (L123).

   **Dieselbe Grundform, drei Inhalte:** „T", „P", die Nummer. Sie
   unterscheiden sich untereinander am Zeichen, von den Wissenskarten
   an der Farbe — und `var(--text)` ist eine geführte, keine neue
   (09/9.1a: neunzehn Farbwerte bleiben neunzehn).

   *Nicht das `#2B2F2A` von `.kr-punkt`: Diese Rohzahl steht im ganzen
   Blatt genau einmal, und sie auf drei weitere Klassen zu übernehmen
   machte aus einem Einzelfall ein Muster.* */
.kr-treffpunkt, .kr-parken, .kr-pause {
              background: var(--text); color: var(--weiss); font-weight: 700;
              font-size: 13px; line-height: 1; border: 2px solid var(--weiss); }

/* Die Werkbank (Spez. 10, Kap. 4). Die Anordnung steht im Fachdokument
   und ist keine Wahl der Bauart: "Die Karte oben, die Zuordnungsliste
   darunter in voller Breite, die Streckendaten neben der Karte. Eine
   Erzählreihenfolge liest sich in einer breiten Liste, nicht in einer
   schmalen Spalte." */
.werkbank-oben { display: grid; grid-template-columns: 1fr 260px; gap: 22px; }
@media (max-width: 900px) { .werkbank-oben { grid-template-columns: 1fr; } }
.werkbank-daten h2 { font-size: 13px; text-transform: uppercase;
                     letter-spacing: .4px; color: var(--neben);
                     margin: 0 0 8px; }
.werkbank-daten h2 + .feld { margin-top: 0; }
.werkbank-daten .feld { margin-bottom: 10px; }
.werkbank-daten .c-leer { font-size: 12px; margin-top: 6px; }
/* Ein weiterer Block in derselben Spalte — dieselbe Trennung wie
   `.punktwahl` darüber.

   ***Der Abstand ist eine Beziehung, keine Zahl*** (Merkzettel vom
   10.08.): **innen trennt die Überschrift ihren Inhalt mit 8px**, also
   muss außen mehr sein — sonst gruppiert das Auge den Knopf darüber zur
   Überschrift darunter.

   > **Am Bildschirm gefunden am 11.08.2026:** *„PARKPLATZ" klebte am
   > Knopf „Übernehmen".* **Der Block hatte im ersten Entwurf eine
   > Klasse, der Klassenwächter fing sie zu Recht** — *und sie wurde
   > **entfernt** statt definiert.* **Damit ging der Abstand mit.** */
.werkbank-block { margin-top: 12px; padding-top: 12px;
                  border-top: 1px solid var(--linie); }

/* Eine Zeile der Erzählreihenfolge: Nummer, Inhalt, Handlungen. */
.werkbank-zeile { display: grid; grid-template-columns: 34px 1fr auto;
                  gap: 12px; align-items: start; padding: 12px 0;
                  border-bottom: 1px solid var(--linie); }
.werkbank-zeile:last-child { border-bottom: 0; }
/* **Zwei der drei Listen tragen keine Nummer** — die Vorschläge im
   Umkreis und die Trefferliste der Suche. *Nur die Erzählreihenfolge ist
   geordnet; ein Vorschlag hat keinen Platz, den man ihm ansehen könnte.*

   ***Ohne diese Regel landete ihr Inhalt in der 34-Pixel-Spalte*** — der
   Titel brach wortweise um, und die Handlungen rutschten in die breite
   Spalte daneben, also über den Titel. **Am Bildschirm des Betreibers
   gefunden am 09.08.2026**, als die Suche zum ersten Mal lange Titel aus
   dem übernommenen Bestand lieferte.

   *Ein Raster füllt seine Spalten der Reihe nach. Es fehlt kein Kind —
   es sitzt nur jedes eine Spalte zu weit links.* */
.werkbank-zeile.ohne-nr { grid-template-columns: 1fr auto; }
/* Dieselbe Form wie der Marker auf der Karte — die Nummer ist an beiden
   Orten dasselbe (09/8.3b).

   ***Und dieselbe Farbe wie der Marker derselben Sache.*** Der Grundton
   gilt der zugeordneten Wissenskarte, deren Marker `.kr-zugeordnet`
   ebenfalls `--knopf` trägt.

   > **Am Bildschirm gefunden am 11.08.2026:** Die Pausenplatzliste
   > führte grüne Nummern, während ihre Marker seit dem Umbau auf eigene
   > Rollen **dunkel** sind — und der Satz hier oben behauptete das
   > Gegenteil. *Er war richtig, als er geschrieben wurde; die neue
   > Rolle hat ihn überholt, ohne ihn zu berühren.* **Dieselbe Fehlerart
   > wie beim Blocksatz und bei `__str__`: Der Bau sagt etwas, das er
   > nicht mehr tut.**

   **Wer eine Liste mit Nummern baut, deren Marker eine andere Rolle
   trägt, setzt die zweite Klasse dazu** — nicht einen zweiten Kreis. */
.werkbank-nr { display: grid; place-items: center; width: 26px; height: 26px;
               border-radius: 50%; background: var(--knopf); color: var(--weiss);
               font-weight: 700; font-size: 13px; }
/* Die Punkte des Tages: dunkel wie `.kr-treffpunkt`, `.kr-parken`,
   `.kr-pause`. */
.werkbank-nr.nr-tag { background: var(--text); }
.werkbank-titel { display: flex; align-items: center; gap: 8px;
                  flex-wrap: wrap; }
/* Eine Zeile Kurzfassung (L122): "was erzähle ich hier eigentlich",
   ohne dass man die Karte öffnen muss. */
.werkbank-kurz { color: var(--neben); font-size: 13px; margin-top: 3px; }
.werkbank-hinweis { margin-top: 8px; font-size: 13px; }
.werkbank-handlungen { display: flex; gap: 6px; align-items: center; }
/* ***Die drei Handlungen sind Formulare, keine Verweise*** (09.08.2026) —
   *sie ändern Daten, und eine Adresse, die das bei einem Aufruf täte,
   entstünde beim nächsten Vorschaubild des Browsers ein zweites Mal.*

   **Ein `<form>` ist von Haus aus ein Block.** *Ohne diese Zeile stünden
   ↑, ↓ und „Lösen" untereinander statt nebeneinander — die Zeile ist ein
   Flexraster, und drei Blöcke darin sind drei Reihen.* */
.werkbank-handlungen form { display: inline; margin: 0; }

/* Die zwei Umkreisregler der Werkbank (Spez. 10, 4.1a). Kein
   Umschalter, sondern zwei Regler nebeneinander: "Ein Umschalter hätte
   einen verborgenen Zustand — man sieht eine Karte nicht und weiß
   nicht, ob sie fehlt oder ob der andere Modus greift."
   Der Preis ist im Fachdokument benannt: ein Bedienelement mehr auf dem
   bedienungsintensivsten Bildschirm des Systems. */
/* **Start- und Endpunkt setzen** (10/3.5) — der Umschalter, das
   Übernahmefeld und die zwei Knöpfe, in der schmalen Spalte neben der
   Karte.

   ***Der Umschalter sagt, welcher Punkt scharf ist*** — Kartenklick,
   Ziehen und Übernahme schreiben alle in denselben. *Zwei Karten
   nebeneinander zeigten denselben Track dreimal.* */
.punktwahl { margin-top: 12px; padding-top: 12px;
             border-top: 1px solid var(--linie); }
.punktziel { display: flex; flex-direction: column; gap: 4px;
             margin-bottom: 8px; font-size: 13px; }
.punktziel label { display: flex; align-items: center; gap: 6px; }
.punkt-knoepfe { display: flex; gap: 8px; margin-top: 8px; }

.regler-zeile { display: flex; gap: 22px; align-items: flex-end;
                flex-wrap: wrap; margin-bottom: 10px; }
.regler { display: flex; flex-direction: column; gap: 4px; min-width: 190px; }
.regler-kopf { display: flex; justify-content: space-between; gap: 12px;
               font-size: 12.5px; color: var(--neben); font-weight: 600; }
.regler-kopf b { color: var(--text); }
.regler input[type="range"] { width: 100%; accent-color: var(--knopf); }
.regler .c-leer { font-size: 11.5px; }