/* chrisinterface UI-Kit
   Christian Steiner · chrisinterface.com
   Version 5.10.0.
   ============================================================
   AUTO-GENERIERT von ui-kit/sync.py — NICHT hier editieren!
   Quelle: ui-kit/grundlage.css + buttons.css + forms.css + modal.css + ueber.css + account-menu.css + werkzeug-menu.css + kopfleiste.css + menu.css + login-gate.css + datenblatt.css + leer.css
   Aussehen aendern? -> in der Quelle, dann "Sync".
   ============================================================ */

html, body {
    min-height: 100%;
    background: var(--flaeche);
    color: var(--text);
    font-family: var(--schriftart-ui);
    font-weight: var(--gewicht-normal);
    font-size: var(--schrift-sm);
    line-height: 1.5;
    /* Ohne diese Zeile malt macOS helle Schrift auf dunklem Grund mit
       Subpixel-Glättung: fetter und mit Farbstich an den Kanten. Auf einer
       fest dunklen Oberfläche wie dieser ist das kein Geschmacksurteil,
       sondern der Unterschied zwischen „gesetzt" und „ausgefranst". */
    -webkit-font-smoothing: antialiased;
}

/* Button-Icon: Inline-SVG (currentColor, D-034: kein Icon-Asset) vor dem Text.
   Suite-eigen — das Buero fuehrt keine SVGs im Knopf. */
.btn svg { width: 14px; height: 14px; flex-shrink: 0; margin-right: var(--abstand-4); }

/* ══ HAUS-BAUSTEIN: knopf ══ Quelle: Material/design/bausteine/knopf.css
   HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
   und zwar in ALLEN Dächern gleichzeitig. */
/* ══ KNOPF ══ eine Basis, sechs Aufsätze
   Gemeinsam seit V-3 (05.08.2026). Entschieden an der knopfkarte.html.

   BAUWEISE: Basis + Variante (Chris 05.08.2026) — `class="btn btn-primaer"`.
   Das Büro hatte fünf eigenständige Klassen, die Suite hatte die Basis. Die
   Basis gewinnt, weil sie WENIGER wird, wenn Varianten dazukommen: Ein neuer
   Knopf sagt nur noch, was ihn unterscheidet. Beim Umbau war das zugleich der
   risikoärmere Weg — die Büro-Namen blieben, es kam nur `btn` davor.

   WERTE: gemischt, je Zeile am Bild entschieden. Grob — Polsterung, Gewicht
   und die deckende Fläche kommen aus dem Büro (größeres Ziel für den Finger,
   und ein durchsichtiger Knopf verschwindet auf getönten Flächen halb); die
   Mindesthöhe, der Hover am Hauptknopf, die Rolle statt `#fff` beim
   zerstörenden Knopf und das ruhigere Ausgegraut kommen aus der Suite.

   `.btn-sekundaer` GIBT ES NICHT MEHR: Die Neben-Aktion IST die Basis. Wer
   `btn` schreibt, bekommt sie.

   Zwei Rollen mussten dafür in V-3a nachgezogen werden: das Büro bekam
   `--akzent-aktiv` (es hatte gar keinen Hover-Wert — der Hauptknopf gab beim
   Überfahren nichts zurück), die Suite `--schrift-kompakt` für den leisen
   Knopf. */

.btn {
    border: 1px solid var(--linie);
    background: var(--flaeche-erhaben);
    color: var(--text);
    font-family: inherit;
    font-size: var(--schrift-sm);
    font-weight: var(--gewicht-mittel);
    padding: var(--abstand-8) var(--abstand-14);
    /* 34px ist die einzige nackte Zahl hier und mit Absicht keine Rolle: Sie
       ist die Anatomie des Knopfs, kein geteilter Wert. Ohne sie sind Knöpfe
       verschieden hoch, je nachdem wie groß ihre Schrift gerade ist. */
    min-height: 34px;
    border-radius: var(--rundung-mittel);
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--abstand-6);
    /* Auch ein <a> darf ein Knopf sein — ein Download etwa, der eine echte
       Adresse braucht („Tabelle als CSV" in Verladung, 09.09.2026). Ohne
       diese Zeile trüge er den Unterstrich des Browsers, und ob er ihn
       trägt, hinge daran, ob das Werkzeug zufällig `a { text-decoration:
       none }` gesetzt hat. Der Baustein bringt es selbst mit. */
    text-decoration: none;
    /* Und dieselbe Zeilenhöhe wie ein <button>: Der bekommt vom Browser
       `normal`, ein <a> erbt die 1.45 der Seite und wurde damit 0,84 px
       höher als sein Nachbar — gemessen, nicht vermutet. Nebeneinander ist
       das ein Zittern in der Kante. */
    line-height: normal;
    /* Gezielt statt `all`: Ein `all` animiert auch, was niemand animiert haben
       will — beim Umschalten der Farbwelt etwa würde jede Rahmenfarbe
       hinterherlaufen. */
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
/* Die Fläche beim Überfahren nur dort, wo es einen Zeiger GIBT — am Handy
   bliebe sie sonst nach dem Antippen kleben. */
@media (hover: hover) {
    .btn:hover { background: var(--linie-zart); }
}

/* ── Haupt-Aktion ── der Knopf, den man sucht */
.btn-primaer {
    background: var(--akzent);
    border-color: var(--akzent);
    color: var(--text-auf-akzent);
    font-weight: var(--gewicht-halbfett);
    /* KEIN eigenes Polster (Chris 15.08.2026, an Aufträge/Benutzerverwaltung:
       „warum sind die blauen höher als die anderen?"): 10/16 statt 8/14 hob den
       Hauptknopf über die 34-px-Höhe seiner Nachbarn — in ALLEN Dächern, weil
       dieser Block überall hinsynct. Er hebt sich durch Farbe und Gewicht ab,
       nicht durch Größe: die Höhe ist die Anatomie des EINEN Knopfs. */
}
@media (hover: hover) {
    .btn-primaer:hover { background: var(--akzent-aktiv); border-color: var(--akzent-aktiv); }
}

/* ── Leise ── Tabellen-Aktionen und Nebenwege; trägt keine Fläche und keinen
      Rahmen, bleibt aber ein volles Treffer-Ziel (34px aus der Basis). */
.btn-leise {
    border: 0;
    background: transparent;
    color: var(--text-gedaempft);
    font-size: var(--schrift-kompakt);
    padding: var(--abstand-8) var(--abstand-10);
}
@media (hover: hover) {
    .btn-leise:hover { background: var(--linie-zart); color: var(--text); }
}
/* Löschen als TEXT — die leise Form des Entfernens, dort wo eine rote Fläche
   zu laut wäre. Der Hover hält die Farbe, damit sie nicht ins Neutrale kippt. */
.btn-loeschen { color: var(--fehler); }
@media (hover: hover) {
    .btn-loeschen:hover { color: var(--fehler); }
}

/* ── Zerstörend ── rote FLÄCHE, für den Punkt ohne Wiederkehr.
      Bis V-3 stand hier im Büro ein hartes `#fff` — der einzige Wert des
      ganzen Knopfs, den der Baustein-Lint ablehnt, und zu Recht: In einer
      geteilten Quelle muss auch die Schrift auf der Fläche eine Rolle sein. */
.btn-gefahr {
    background: var(--fehler-flaeche);
    border-color: var(--fehler-flaeche);
    color: var(--text-auf-akzent);
    font-weight: var(--gewicht-halbfett);
}
@media (hover: hover) {
    .btn-gefahr:hover { background: var(--fehler-flaeche-aktiv); border-color: var(--fehler-flaeche-aktiv); }
}

/* ── Klein ── für Zeilen und enge Köpfe. Die 2px sind Feinjustage, nicht
      Raster (Abstands-Modell: unter 4px kein Raster). */
.btn-klein {
    min-height: 26px;
    padding: 2px var(--abstand-8);
    font-size: var(--schrift-xs);
}
/* ── Symbol ── Quadrat für ein einzelnes Zeichen, gleich hoch wie die Basis */
.btn-symbol {
    width: 34px;
    padding: var(--abstand-6);
}

/* Ausgegraut: neutrale Fläche statt Deckkraft auf der Akzentfarbe. Deckkraft
   allein ergab auf Navy einen matschigen Graublau-Ton — auf der Knopfkarte
   nebeneinander gut zu sehen. */
.btn:disabled,
.btn:disabled:hover {
    background: var(--linie-zart);
    border-color: var(--linie);
    color: var(--text-leise);
    cursor: not-allowed;
    opacity: 0.55;
}
/* ══ HAUS-BAUSTEIN: knopf ENDE ══ */

/* ═══ SUITE-EIGENE KNOPF-REGELN — hinter dem Haus-Block, sonst frisst sie
   der nächste Werkstatt-Sync (am 15.08.2026 zweimal passiert). ═══ */

/* AUF ERHABENEM GRUND rückt der Knopf eine Stufe hoch (Chris 15.08.2026,
   Sollkurven-Leiste: „dunkler und schlechter lesbar"): Die Tab-Leiste liegt
   selbst auf --flaeche-erhaben — dieselbe Farbe wie der Knopf. Gleiche
   Farbe auf gleicher Farbe: der Knopf hing nur noch an seiner Rahmenlinie.
   Jetzt trägt er dort --flaeche-schwebend („schwebt drauf") und hovert nach --flaeche-betont.
   Farbige Varianten (primär, gefahr, leise) und der durchsichtige Instrumenten-
   Knopf sind ausgenommen — sie haben ihren eigenen Grund. */
.tabs .btn:not(.btn-primaer):not(.btn-gefahr):not(.btn-leise):not(.btn-instrument) {
    background: var(--flaeche-schwebend);
}
@media (hover: hover) {
    .tabs .btn:not(.btn-primaer):not(.btn-gefahr):not(.btn-leise):not(.btn-instrument):hover {
        background: var(--flaeche-betont);
    }
}

/* INSTRUMENTEN-VARIANTE (Chris 15.08.2026, an der Sollkurven-Leiste): derselbe
   Knopf in der Typografie der Cockpit-Familie — Versalien, 2xs, Laufweite,
   gedämpft, durchsichtig. Genau die Sprache, die im Cockpit jede Beschriftung
   spricht (TOOLS · FILTER · Kachelköpfe · BEREIT); der Standardknopf wirkte
   dort „klobig, gedrungen" (Formular-Register). Ersetzt die frühere Kit-Pille
   .tab-pill-btn UND den Dashboard-Sonderling .sidebar-action-btn: EIN Knopf,
   eine weitere benannte Variante — wie primär/gefahr. KEINE eigene Höhe:
   Charakter und Größe sind zwei Achsen — Standard 34 (bündig mit Feldern) vom
   .btn, klein 26 per .btn-klein (Tab-Leiste, Chart-Kopf). `.active` = Schublade
   offen / Zustand an. Suite-eigen (Cockpit); das Büro braucht sie nicht. */
.btn.btn-instrument {
    padding-inline: 12px;
    background: transparent;
    border-color: var(--linie);
    color: var(--text-gedaempft);
    font-size: var(--schrift-2xs);
    font-weight: var(--gewicht-mittel);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
}
@media (hover: hover) {
    .btn.btn-instrument:hover { color: var(--text); border-color: var(--linie-stark); background: var(--flaeche-schwebend); }
}
.btn.btn-instrument.active { color: var(--text); border-color: var(--linie-stark); background: var(--flaeche-schwebend); }
.btn.btn-instrument:disabled, .btn.btn-instrument:disabled:hover {
    opacity: 0.4; color: var(--text-leise); border-color: var(--linie); background: transparent;
}

/* ══ HAUS-BAUSTEIN: feld ══ Quelle: Material/design/bausteine/feld.css
   HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
   und zwar in ALLEN Dächern gleichzeitig. */
/* ══ FELD ══ Hülle · Etikett · Eingabe · Hinweis · Fehler
   Gemeinsam seit V-4b (05.08.2026). Entschieden an der feldkarte.html.

   BAUWEISE: eigene Klassen (Chris 05.08.2026) — `<input class="eingabe">`
   statt `.feld input`. Element-Selektoren wären kürzer im HTML, treffen aber
   auch, was man nicht meint: In den Büro-Tools stecken drei KÄSTCHEN in
   Feld-Hüllen, die mit einer Element-Regel das Aussehen eines Textfelds
   bekommen hätten. Wer eigene Klassen vergibt, kann das nicht.

   DIE HAUPTENTSCHEIDUNG war die Schriftgröße: 13px statt der 12px, die das
   Büro führte. Das stand seit dem 02.08.2026 als O-5 in formen.css offen
   („77 Fundstellen … eigener Schritt"). Ein Feld zeigt, was jemand
   EINGETIPPT hat — das ist Inhalt, keine Nebeninfo.

   DIE POLSTERUNG kommt vom Büro (10/12), nicht von der Suite (6/10): Chris
   sah die Büro-Felder als „luftiger" an. Nachgemessen war der Unterschied
   nicht die Höhe (36 gegen 34 px), sondern die Luft IM Feld — 10px über und
   unter dem Text gegen 6. Und die haengt nicht an der Schriftgröße: 13px mit
   10/12 ergibt 37px, also einen Pixel mehr Luft als das Büro vorher hatte.
   Beides ging, man musste nicht wählen.

   Die Mindesthöhe 34px kommt aus der Suite. Sie greift bei 37px nie — sie ist
   ein Boden für den Tag, an dem jemand die Polsterung kleiner dreht.

   WAS AUS WELCHEM DACH KOMMT, gemischt und je Zeile am Bild entschieden:
     Büro   → Polsterung, Etikett-Farbe, Größe von Hinweis und Fehler, der
              LESBARE Ausgegraut-Zustand, Fehler-Markierung an der Hülle
     Suite  → Schriftgröße, Mindesthöhe, Nur-Lesen-Zustand, Feldfläche

   `--eingabe` als Feldfläche ist die zweite sichtbare Änderung: In der hellen
   Welt ist sie identisch mit der bisherigen (#ffffff), in der DUNKLEN dunkler
   (#151D27 gegen #17212C). Ein Eingabefeld ist eine Vertiefung, keine
   erhabene Fläche — es liegt IN der Karte, nicht darauf. */

.feld {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-6);
    min-width: 0;
}
.feld.voll { grid-column: 1 / -1; }

.feld-etikett {
    font-size: var(--schrift-xs);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
    color: var(--text-gedaempft);
    font-weight: var(--gewicht-mittel);
}

.eingabe {
    width: 100%;
    /* min-width schlägt width — ohne die 0 drückt die eingebaute Mindestbreite
       von iOS-Datumsfeldern das Feld über den Modal-Rand hinaus. */
    min-width: 0;
    max-width: 100%;
    background: var(--eingabe);
    color: var(--text);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-mittel);
    font-family: inherit;
    font-size: var(--schrift-sm);
    /* Senkrecht 6 wie .auswahl und .btn. 34px ist die Zeilenhöhe des Hauses —
       sie steht als min-height bei JEDEM Formular-Bauteil. Nur .eingabe hielt
       sie nicht ein: mit 10 wurde sie von Natur aus 38px hoch (Datumsfelder
       sogar 40) und überfuhr damit ihre eigene Vorgabe, während Auswahl und
       Knopf daneben brav auf 34 standen. Mit 6 bleiben alle unter 34, und
       min-height gibt die Höhe vor — das hält auch, wenn sich später die
       Schriftgröße ändert.
       Chris fand es am 10.08.2026 am Sollkurven-Konfigurator und korrigierte
       es in der Suite; am 12.08.2026 nachgemessen, dass die Büro-Tools
       dieselbe Abweichung tragen, und hier in die Quelle gezogen. */
    padding: var(--abstand-6) var(--abstand-12);
    min-height: 34px;
    outline: none;
    transition: border-color 0.15s ease;
}
.eingabe::placeholder { color: var(--text-leise); opacity: 1; }

/* Fokus = Akzent-RAHMEN, kein Ring — Hausstil aller drei Dächer.
   Der Ring wird ERSETZT, nicht gestrichen: Ohne `outline: none` malt Safari
   seinen eigenen blauen Ring darüber, ohne den Rahmen sähe man mit der
   Tastatur nicht mehr, wo man steht. */
.eingabe:focus { border-color: var(--akzent); }

textarea.eingabe { resize: vertical; min-height: 76px; line-height: 1.5; }

/* GESPERRT und NUR-LESEN sind zwei verschiedene Dinge:
   gesperrt = darf hier niemand ändern · nur-lesen = wird woanders gepflegt.
   Gesperrt bekommt einen EIGENEN Stil statt Deckkraft — ohne den zeichnet iOS
   solche Felder so blass, dass man den Wert nicht mehr liest. Das war eine
   teure Lektion im Büro-Dach und ist der Grund, warum hier kein `opacity`
   steht. */
.eingabe:disabled {
    background: var(--linie-zart);
    color: var(--text-gedaempft);
    -webkit-text-fill-color: var(--text-gedaempft);
    opacity: 1;
    cursor: default;
}
.eingabe[readonly] {
    background: var(--flaeche);
    color: var(--text-gedaempft);
}

/* iOS zentriert den Datumswert — linksbündig wie jedes andere Feld.
   ALLE DREI Typen, nicht nur `date`: „Sicherheit" benutzt `datetime-local`,
   und dort stand der Wert lange als einziges Feld mittig. Am Mac fällt das
   nie auf, der Fehler ist WebKit-only.

   NICHT WEITER BEHANDELT — und das ist eine Entscheidung, kein Versäumnis
   (Chris, 12.08.2026): Auf dem iPhone ist `datetime-local` ein natives
   Rad-Auswahlfeld mit einer eigenen Mindestbreite. Im Unfall-Formular von
   Sicherheit ragt es dadurch als einziges Feld über den rechten Rand hinaus.
   Ein Versuch mit `width: 100%` auf diesem Pseudo-Element half nicht und ist
   deshalb wieder entfernt.

   Warum hier nichts weiter passiert: Der Hebel, der greifen würde
   (`-webkit-appearance: none`), nimmt dem Feld sein natives Aussehen — ein
   Eingriff in eine Plattform-Eigenheit, den alle acht Werkzeuge mittragen
   müssten. Chris' Entscheid: „wenn das ein Apple-spezifisches Ding ist, will
   ich, dass der Code stabil bleibt und keine Workarounds."

   NACHPRÜFBAR ist das übrigens nur am Gerät. Playwrights WebKit läuft auf
   macOS und baut dieses Feld anders — dort messen Text- und Datumsfeld auf den
   Pixel gleich, mit und ohne jede Korrektur (nachgestellt am 12.08.2026).
   Wer das je angeht, braucht ein echtes iPhone, nicht eine Emulation.
   Der saubere Weg wäre ohnehin kein CSS-Kniff, sondern zwei getrennte Felder
   (Datum + Uhrzeit) statt `datetime-local`. */
.eingabe[type="date"]::-webkit-date-and-time-value,
.eingabe[type="datetime-local"]::-webkit-date-and-time-value,
.eingabe[type="time"]::-webkit-date-and-time-value { text-align: left; }

/* Zahl-Felder ohne Spinner-Pfeile — Hausregel (Chris): getippt, nicht
   geklickt. Global und nicht auf `.eingabe` beschränkt, denn die Regel gilt
   für jedes Zahlenfeld; eines in Rennsport liegt ausserhalb jeder Hülle. */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* KEIN Kontakt-Autofill-Symbol — zweite Hausregel (Chris 03.08., bekräftigt
   05.08.: „das will ich in keinem Tool haben"). Safari ignoriert
   autocomplete="off" bei Feldern, die es für Kontaktdaten hält, und setzt sein
   Symbol trotzdem hinein; abschalten geht nur über das Pseudo-Element.
   Der Passwort-Manager am Login bleibt unangetastet — anderes Element. */
input::-webkit-contacts-auto-fill-button {
    visibility: hidden !important;
    display: none !important;
    pointer-events: none;
    position: absolute;
    right: 0;
}

.feld-hinweis { color: var(--text-leise); font-size: var(--schrift-xs); }

/* Der FEHLER hängt an der HÜLLE, nicht am Feld: So schaltet eine Klasse den
   roten Rahmen UND den Fehlertext gleichzeitig. Sässe sie am Feld, müsste das
   JavaScript zwei Stellen treffen und könnte eine vergessen. */
.feld-fehler { display: none; color: var(--fehler); font-size: var(--schrift-xs); }
.feld.fehler .eingabe { border-color: var(--fehler); }
.feld.fehler .feld-fehler { display: block; }
/* ══ HAUS-BAUSTEIN: feld ENDE ══ */

/* ══ HAUS-BAUSTEIN: suchfeld ══ Quelle: Material/design/bausteine/suchfeld.css
   HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
   und zwar in ALLEN Dächern gleichzeitig. */
/* ══ SUCHFELD ══ das Feld über oder neben einer Liste
   Gemeinsam seit V-4c/1 (05.08.2026). Hieß in beiden Dächern `.search`.

   DIE BREITE STEHT ABSICHTLICH NICHT HIER. Sie ist der einzige echte
   Unterschied zwischen den Dächern, und sie ist Layout, kein Aussehen: Die
   Suite legt das Feld breit über die Liste (`width: 100%`), die Büro-Tools
   stellen es schmal in die Kopfzeile (`flex: 1 1 220px`). Beides steht so im
   Spiegel als BEANTWORTETE Frage — Suchen ist dort die Hauptbewegung, hier
   Nebensache. Hausregel seit V-2: Komponente = Optik zentral, Größe lokal.

   DIE FELDFLÄCHE ist `--eingabe`, nicht `--flaeche-erhaben`, das das Büro
   führte. Gleiche Begründung wie bei den Feldern in V-4b: Ein Suchfeld ist
   eine Vertiefung, keine erhabene Fläche. In der hellen Welt ist das
   identisch (#ffffff), in der dunklen einen Hauch tiefer.

   HÖHE UND POLSTERUNG kommen aus der Suite (6/12 auf Mindesthöhe 34) und
   nicht aus dem Büro (8/12, ohne Boden). Grund ist die Zeile, in der das Feld
   steht: Auswahl und Knöpfe daneben sind 34 px hoch. Ein Suchfeld, das als
   einziges 35 px misst, verzieht die Kopfleiste um einen Pixel.

   Es trägt NICHT die 13 px der Eingabefelder aus V-4b — hier steht keine
   Eingabe, die man später wieder liest, sondern ein Filter. */

.suche {
    background: var(--eingabe);
    color: var(--text);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-mittel);
    font-family: inherit;
    font-size: var(--schrift-sm);
    padding: var(--abstand-6) var(--abstand-12);
    min-height: 34px;
    outline: none;
    transition: border-color 0.15s ease;
}
.suche::placeholder { color: var(--text-leise); opacity: 1; }

/* Fokus = Akzent-RAHMEN, kein Ring — Hausstil aller Dächer (siehe feld.css). */
.suche:focus { border-color: var(--akzent); }

/* KEIN eingebautes Lösch-Kreuz. Dieselbe Hausregel wie Spinner-Pfeile und
   Kontakt-Autofill (Chris): Ein Feld zeigt, was wir hineinbauen, nicht was der
   Browser dazustellt. Bisher lag die Regel nur in der Suite — Vertriebs
   Suchfeld trug das Kreuz. Nur WebKit zeichnet es überhaupt.

   Global und nicht auf `.suche` beschränkt, aus demselben Grund wie die
   Spinner-Regel in feld.css: Sie gilt für JEDES Suchfeld. Rennsport sucht
   über `.sec-filter` in der Abschnitts-Kopfzeile — ein anderes Bauteil, aber
   dieselbe Hausregel. */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Touch: 16 px verhindern den iOS-Auto-Zoom beim Antippen. Anker ist der
   FINGER, nicht die Fensterbreite — sonst zoomt das iPad trotzdem (Vertrieb
   V-28). Die Regel lag bisher nur tool-lokal im Vertrieb; in der Suite zoomte
   die Suche auf dem iPad. Am Mac sieht man das nie.

   ENTSCHIEDEN am 05.08.2026 (Chris), nachdem wir die Alternative durchgesprochen
   haben: Es BLEIBT bei der Feld-Regel. Der Zoom ist Safaris Automatik, nicht
   unsere — ohne Gegenregel passiert er. Man könnte ihn auch mit einer Zeile in
   der Kopfzeile abstellen (`maximum-scale=1` im viewport); das wäre kürzer,
   hielte die 13 px auch auf Touch und machte das Lint-Ventil überflüssig.
   Dagegen sprach: Die Feld-Regel ist bewährt und beweisbar, die Kopfzeilen-Zeile
   ruht auf Browser-Verhalten, das hier niemand nachmessen kann, und auf Android
   sperrte sie zusätzlich das Aufziehen mit zwei Fingern. SICHER SCHLÄGT SCHLANK.
   Der Preis ist bekannt und angenommen: Eingabefelder sind auf Touch 16 px statt
   der 13 px aus V-4b. Wer das später ändern will, ändert eine Entscheidung —
   nicht ein Versehen. */
@media screen and (pointer: coarse) {
    .suche { font-size: 16px; }   /* haus-ausnahme: 16px ist die Schwelle, unter der iOS beim Antippen zoomt — eine Grenze des Betriebssystems, keine Rolle, die ein Dach je anders auflösen würde */
}

/* ══ DAS LÖSCH-KREUZ ══ (20.08.2026, Chris: „brauchen wir überall")
   Ein Suchfeld mit Text braucht einen Weg zurück, der EIN Griff ist — auf dem
   Tablet ist Markieren-und-Löschen kein Weg. Das native Kreuz kam dafür nicht
   in Frage (siehe Regel darüber): Nur WebKit zeichnet es, in jeder Fassung
   anders, und es ist für einen Finger zu klein. Also zeichnen wir es selbst —
   einmal hier, sichtbar in jedem Werkzeug.

   DER PREIS ist wie bei der Auswahl eine Hülle je Feld: Ein <input> kann kein
   ::after tragen. Die Hülle zieht `suchfeld.js` beim Laden von allein ein; im
   Markup der Werkzeuge steht weiterhin nur das Feld.

   KEIN `width` an der Hülle — dieselbe Regel wie bei `.auswahl-huelle`: Ob sie
   die ganze Breite füllt oder in einer Kopfleiste mitfließt, ist Layout und
   gehört dem Dach. Jedes Dach gibt der Hülle dort die Rolle, die vorher das
   Feld hatte (Suite: 100 %, Büro: flex). */
.suche-huelle {
    position: relative;
    display: block;
    min-width: 0;                    /* darf in einer Flex-Zeile schrumpfen */
}
/* Versteckt jemand das FELD, geht die Hülle mit — sonst bliebe ein Kreuz ohne
   Feld stehen. Die Lehre stammt von der Auswahl-Hülle (Vertriebs-Cockpit). */
.suche-huelle:has(> .suche[hidden]) { display: none; }

/* 100 % der HÜLLE — Vertrag der Komponente, nicht Layout: Das Kreuz sitzt an
   deren rechtem Rand, ein schmaleres Feld ließe es daneben schweben. */
.suche-huelle > .suche {
    width: 100%;
    min-width: 0;
    padding-right: 32px;   /* haus-ausnahme: die Freihaltung für das Kreuz (4 rechts + 26 Knopf + Luft) — Geometrie dieses Bauteils, dieselbe Rechnung wie die 32px der Auswahl, keine Abstands-Entscheidung für die Leiter */
}

/* Der Knopf ist 26 px groß, das gezeichnete Kreuz nur 9: Die Fläche ist für
   den Finger, das Zeichen fürs Auge (Touch-Regel des Hauses). Er erscheint
   erst, wenn etwas im Feld steht — `suchfeld.js` setzt `hidden`. */
.suche-loeschen {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    /* KEINE Rundung, keine Hover-Fläche: Der Knopf hat keinen Grund, auf dem
       sie sichtbar wäre — das Kreuz allein wird beim Überfahren dunkler.
       (Und `--rundung-klein` gibt es nur in der Dokument-Welt; im Rennsport
       fiele die Zeile still auf den Browser-Wert zurück — der Token-Wächter
       von Pitwall hat sie am 20.08.2026 genau dafür gemeldet.) */
    color: var(--text-gedaempft);
    display: grid;
    place-items: center;
}
.suche-loeschen:hover { color: var(--text); }
.suche-loeschen[hidden] { display: none; }

/* Das Kreuz: zwei Striche, gedreht — dieselbe Bauweise wie der Chevron der
   Auswahl (kein Bild, keine Schrift, kein zweites Adressenpaar je Dach). */
.suche-loeschen::before,
.suche-loeschen::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
}
.suche-loeschen::before { transform: rotate(45deg); }
.suche-loeschen::after  { transform: rotate(-45deg); }
/* ══ HAUS-BAUSTEIN: suchfeld ENDE ══ */

/* Die BREITE ist Dach-Sache, nicht Haus-Sache (siehe Kopf des Bausteins):
   Die Suite legt die Suche breit über die Liste. Seit dem Lösch-Kreuz
   (20.08.2026) gilt sie AUCH für die Hülle: Sie ist es, die seither in der
   Zeile steht — das Feld füllt nur noch sie aus. */
.suche, .suche-huelle { width: 100%; }

/* ══ HAUS-BAUSTEIN: auswahl ══ Quelle: Material/design/bausteine/auswahl.css
   HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
   und zwar in ALLEN Dächern gleichzeitig. */
/* ══ AUSWAHL ══ das Dropdown, geschlossen
   Gemeinsam seit V-4c/2 (05.08.2026). Entschieden an der wahlkarte.html.

   DAS HAUS HATTE DREI PFEILE, und das war der ganze Unterschied — der Kasten
   war überall fast derselbe:
     nativ      18 Felder im Büro. Das Betriebssystem malt ihn. Sieht auf Mac,
                Windows und iPhone verschieden aus und lässt sich NICHT
                einfärben — in der dunklen Welt blieb er, was macOS für richtig
                hält.
     SVG-Bild    6 Felder im Vertrieb. Ein gezeichneter Pfeil als Hintergrund.
                Sein Ton steckt IN der Bild-Adresse und ist deshalb keine
                Rolle; er musste je Farbwelt einzeln gepflegt werden. Dieselbe
                Regel stand zusätzlich in ALLEN VIER Suite-Werkzeugen und traf
                dort kein einziges sichtbares Feld — vier tote Regeln.
     Chevron     9 Felder in der Suite. GEWÄHLT (Chris 05.08.2026).

   WARUM DER CHEVRON GEWINNT: Er ist keine Datei, sondern eine gedrehte Ecke
   aus zwei Rahmenlinien. Sein Ton ist eine ROLLE (--text-gedaempft) und folgt
   der Farbwelt von allein. Beim nächsten Farbwechsel ist hier nichts zu tun —
   bei der Bild-Variante wären es zwei Adressen je Dach gewesen. Die Rolle
   --menue-pfeil ist damit ersatzlos entfallen.

   DER PREIS ist eine Hülle je Feld: Der Pfeil hängt an ihr, nicht am
   Auswahlfeld selbst — ein <select> kann kein ::after tragen.

   DIE MASSE kommen aus der Suite (Polsterung 6/10, Mindesthöhe 34), NICHT die
   10/12 der Eingabefelder aus V-4b. Grund ist die Zeile, in der die Auswahl
   steht: Sie sitzt neben Suchfeldern und Knöpfen, die 34 px hoch sind.
   Der GESPERRTE Zustand dagegen kommt vom Feld — siehe unten. */

/* Die Hülle trägt den Pfeil. Kein `width` hier: Ob sie die ganze Breite füllt
   (im Formular) oder sich an ihren Inhalt schmiegt (in einer Kopfleiste), ist
   Layout und gehört dem Werkzeug. Als Block tut sie von allein das Richtige. */
.auswahl-huelle {
    position: relative;
    display: block;
}
/* Versteckt jemand das FELD, muss die Hülle mit — sonst bleibt ein Chevron
   ohne Feld in der Zeile stehen. Genau das passierte im Vertriebs-Cockpit:
   Im Vergleichs-Modus wird `cockpitMa` versteckt, der Pfeil schwebte daneben
   (Chris 05.08.2026). Vor V-4c/2 saß der Pfeil am Feld selbst und verschwand
   mit ihm — beim Umzug auf die Hülle ging diese Selbstverständlichkeit
   verloren. Sie steht hier, damit sie nicht in jedem Werkzeug neu auffällt. */
.auswahl-huelle:has(> .auswahl[hidden]) { display: none; }

.auswahl-huelle::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 5.5px;                    /* optisch ~8px — Chris 02.07.2026, final nach Live-Vergleich 10/9/8/6 */
    height: 5.5px;
    border-right: 1.25px solid var(--text-gedaempft);
    border-bottom: 1.25px solid var(--text-gedaempft);
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

.auswahl {
    /* 100 % der HÜLLE — nicht Layout, sondern der Vertrag der Komponente:
       Der Pfeil sitzt am rechten Rand der Hülle. Wäre das Feld schmaler,
       schwebte er daneben. */
    width: 100%;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    background: var(--eingabe);
    color: var(--text);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-mittel);
    font-family: inherit;
    font-size: var(--schrift-sm);
    padding: var(--abstand-6) 32px var(--abstand-6) var(--abstand-10);   /* haus-ausnahme: die 32px sind die Freihaltung für den Pfeil (12 rechts + 5,5 breit + Luft), also Geometrie dieses Bauteils — keine Abstands-Entscheidung, die auf die Leiter gehörte */
    min-height: 34px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease;
}

/* Fokus = Akzent-RAHMEN, kein Ring — Hausstil aller Dächer (siehe feld.css). */
.auswahl:focus { border-color: var(--akzent); }

/* GESPERRT wie beim Eingabefeld, nicht wie bisher in der Suite (`opacity: .55`).
   Die teure Lektion aus V-4b gilt hier genauso: Mit Deckkraft zeichnet iOS den
   Wert so blass, dass man ihn nicht mehr liest. Eine gesperrte Auswahl soll
   sagen „hier ändert niemand etwas" — nicht „hier steht vielleicht etwas". */
.auswahl:disabled {
    background: var(--linie-zart);
    color: var(--text-gedaempft);
    -webkit-text-fill-color: var(--text-gedaempft);
    opacity: 1;
    cursor: not-allowed;
}
/* ══ HAUS-BAUSTEIN: auswahl ENDE ══ */

/* ══ HAUS-BAUSTEIN: kaestchen ══ Quelle: Material/design/bausteine/kaestchen.css
   HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
   und zwar in ALLEN Dächern gleichzeitig. */
/* ══ KÄSTCHEN ══ das Häkchen-Feld
   Gemeinsam seit V-4c/2 (05.08.2026). Entschieden an der wahlkarte.html.

   BEIDE DÄCHER WAREN SICH LÄNGST EINIG, ohne voneinander zu wissen: nativ, in
   der Markenfarbe getönt. Die Suite hat das am 29.06.2026 nach Chris' Urteil
   so gewählt („die native Variante war beliebter") und ihre selbstgezeichnete
   Box damals stillgelegt; QS macht es seit je genauso. Zu entscheiden blieb
   allein die GRÖSSE — 15 px (Suite) oder 17 px (QS). Chris am 05.08.2026:
   **15**, weil das Kästchen dann so groß ist wie die Schrift daneben.

   EINE KORREKTUR AUF DEM WEG: Ich hatte „neun Kästchen im Büro" gemeldet.
   Fünf davon sind SCHALTER — dort ist das Kästchen nur die Mechanik unter der
   Bahn und darf dieses Aussehen gerade nicht bekommen. Echte Kästchen gibt es
   vier: drei in QS, eines in Rennsport. Das in Rennsport hatte überhaupt keine
   Regel und war so groß und so blau, wie das Betriebssystem es zeichnet.

   NICHT HIER, SONDERN SUITE-LOKAL: die Kästchen-LISTE (anklickbare Zeilen mit
   Innenabstand und Hover). Das Büro hat sie nirgends — ein Baustein, den nur
   ein Dach benutzt, gehört nicht ins Haus.
   (Der zweite Grund von damals ist entfallen: Ihr Hover-Ton hieß `--karte-aktiv`
   und war angeblich eine Rolle, „die es im Büro nicht gibt". Das stimmte schon
   am 19.08.2026 nicht mehr — mit dem Menü-Baustein wurde sie DIE Hover-Rolle
   des Hauses und in beiden Dächern definiert; seit Stufe 3 heißt sie
   `--flaeche-betont`. Es bleibt beim Suite-lokalen Ort, aber nur noch aus dem
   ersten Grund.) */

.kaestchen {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-8);
    cursor: pointer;
    font-family: var(--schriftart-ui);
    font-size: var(--schrift-sm);
    color: var(--text);
    user-select: none;
}

/* Nativ, nur getönt: `accent-color` färbt Kasten und Häkchen des Betriebssystems.
   Bewusst KEIN eigener Kasten aus <span> — die native Variante wirkt schlanker,
   trägt das vertraute OS-Häkchen und braucht kein zusätzliches Markup.

   ZWEI SCHREIBWEISEN, weil es zwei Lagen gibt: In einem Formular steht das
   Kästchen in seiner Beschriftung (`<label class="kaestchen">`), in einer
   Tabellenzelle steht es allein (`<input class="kaestchen">`). QS hat drei von
   der zweiten Sorte — ohne diese Zeile hätten sie ihr Aussehen verloren. */
.kaestchen input,
input.kaestchen {
    accent-color: var(--akzent);
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.kaestchen:has(input:disabled) { cursor: not-allowed; }
.kaestchen input:disabled ~ * { opacity: 0.55; }
/* ══ HAUS-BAUSTEIN: kaestchen ENDE ══ */

/* Kästchen-LISTE — bewusst SUITE-LOKAL, nicht im Haus-Baustein.
   Kästchen als anklickbare Zeilen mit Innenabstand und Hover (Bericht-Modul-
   Picker, Optionen-Gruppen): die ganze Zeile ist das Ziel, nicht nur das
   Kästchen. Die Büro-Tools haben so etwas nirgends, und der Hover-Ton
   --flaeche-betont ist eine Rolle, die es dort nicht gibt. Ein Baustein, für den
   das zweite Dach erst eine Rolle erfinden müsste, gehört nicht ins Haus. */
.kaestchen-liste {
    display: flex;
    flex-direction: column;
}
.kaestchen-liste .kaestchen {
    padding: var(--abstand-6) var(--abstand-8);
    border-radius: var(--rundung-mittel);
    transition: background 0.12s ease;
}
.kaestchen-liste .kaestchen:hover {
    background: var(--flaeche-betont);
}

/* ══ HAUS-BAUSTEIN: schalter ══ Quelle: Material/design/bausteine/schalter.css
   HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
   und zwar in ALLEN Dächern gleichzeitig. */
/* ══ SCHALTER ══ der Kippschalter (an/aus)
   Gemeinsam seit V-4c/1 (05.08.2026).

   NUR DER SCHALTER SELBST — die Zeile drumherum (Beschriftung links, Wert
   rechts, Abstände) ist tool-eigen. Das Büro führt das seit je so und hat
   `.schalter-feldzeile` bewusst außerhalb des Kits gelassen: Dieselbe
   Optik steht mal in einer Formularzeile, mal in einer Kopfleiste.

   DIE NAMENSKOLLISION, die diese Etappe ausgelöst hat: `.toggle` hieß im
   Büro die SEGMENTGRUPPE (mehrere Knöpfe, einer aktiv), in der Suite der
   KIPPSCHALTER. Zwei Bauteile, ein Name. Aufgelöst wurde es an der
   schlafenden Seite: Der Suite-Schalter war im Markup NULL Mal in Gebrauch
   (nur der Styleguide zeigte ihn), also kostete das Umbenennen keine einzige
   Markup-Änderung. Das Büro-`.toggle` behielt seinen Namen zunächst — und
   heißt seit Stufe 3 (09.09.2026) `.umschalter`, als Haus-Baustein in beiden
   Dächern. Die Kollision ist damit endgültig aufgelöst.

   MASSE UND FARBEN kommen vom Büro: Es führt den Schalter live an sechs
   Stellen, die Suite an keiner. Die Unterschiede lagen ohnehin unter der
   Feinjustage-Schwelle (Bahn 38×23 gegen 40×22, Knopf 17 gegen 16).

   EINGESCHALTET IST GRÜN (`--ok`, Chris 05.08.2026) — nicht Akzentblau, das
   die Suite vorgesehen hatte. Ein Schalter meldet einen ZUSTAND; Akzentblau
   ist im Haus die Farbe für „hier drückst du".

   Aus der Suite kommt, was das Büro nicht hatte: der gesperrte Zustand. */

.schalter {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    cursor: pointer;
}

/* Der native Eingang bleibt fokussierbar, wird nur unsichtbar — nicht
   `display:none`, das nähme ihn aus der Tastatur-Reihenfolge und aus dem
   Formular. */
.schalter input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.schalter .bahn {
    display: block;
    position: relative;
    width: 38px;
    height: 23px;
    border-radius: 999px;   /* Pille — bewusst voll rund, unabhängig vom globalen Radius */
    background: var(--linie);
    transition: background 0.15s;
}
.schalter .bahn::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--flaeche-erhaben);
    box-shadow: var(--schatten-knopf);
    transition: left 0.15s;
}

.schalter input:checked + .bahn { background: var(--ok); }
.schalter input:checked + .bahn::after { left: 18px; }   /* haus-ausnahme: die Strecke des Griffs — Bahn 38 minus Rand 3 minus Griff 17. Geometrie dieses Bauteils, kein Abstand auf der Leiter */

/* Gesperrt: der Zeiger sagt es, und der Schalter tritt zurück. Aus dem
   Suite-Kit übernommen — das Büro hatte für diesen Fall gar nichts. */
.schalter:has(input:disabled) { cursor: not-allowed; }
.schalter input:disabled + .bahn { opacity: 0.55; }
/* ══ HAUS-BAUSTEIN: schalter ENDE ══ */


/* ═══ K5-Regel auch für die FORMULAR-Welt (Chris, 10.08.2026) ═══
   "Ganz klar Nummer 1": Versehentliches Ziehen markierte in Sollkurven,
   Aufträge und Benutzerverwaltung Labels, Chips und halbe Tabellen blau —
   jetzt ist die Bedienung stumm wie in einer nativen App. Wer Werte
   herausholen will, öffnet das Modal (Eingabefelder BLEIBEN markierbar)
   oder exportiert. Bewusst GEGEN die Alternative "Chrome stumm, Tabellen-
   zellen markierbar" entschieden — erst mal beobachten, wie es sich in den
   nächsten Wochen anfühlt; der Rückweg ist eine Zeile.
   Wortgleich mit cockpit.css (K5) — Dashboard abonniert BEIDE Bausteine und
   erbt die Regel doppelt mit identischem Wert: kein Konflikt, kein Drift-
   Risiko, denn geändert wird sie nur über diese zwei Kit-Quellen.
   Das BÜRO-DACH (QS/Vertrieb/Sicherheit/Logistik) ist absichtlich NICHT
   dabei — eigene Werkstatt, eigener Beschluss, wenn Chris es dort will. */
body {
    user-select: none;
    -webkit-user-select: none;
}
input, textarea, [contenteditable] {
    user-select: text;
    -webkit-user-select: text;
}

/* ═══ Formular-Grundton + Passwort-Schlüssel — SUITE-Beschluss (14.08.2026) ═══
   Stand bis dahin byte-identisch DREIMAL in den Modulen (Dashboard, Aufträge,
   Benutzerverwaltung — Kit-Audit vom 15.08.), Sollkurven hatte es gar nicht.
   (1) Formularelemente erben Schrift und Farbe des Werkzeugs statt der
       Browser-Voreinstellung — sonst tippt man in Arial in einem Roboto-Tool.
   (2) Der Passwort-Manager-Schlüssel wird ausgeblendet. Der HAUS-Baustein
       „feld" oben nimmt bewusst nur das Kontakte-Symbol (Chris 05.08.) und
       lässt den Schlüssel stehen — die SUITE hat sich beim Login anders
       entschieden (er drängte sich ins Feld). Darum hier, ausserhalb der
       Haus-Marker: eine Suite-Entscheidung, keine Haus-Entscheidung, und
       das Büro-Dach behält seinen Schlüssel. */
button, input, textarea, select {
    font-family: inherit;
    color: inherit;
}
input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    height: 0;
    width: 0;
    margin: 0;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: var(--abstand-16);
}
.modal-backdrop.open { display: flex; }
/* Die Seite dahinter scrollt nicht mit (09.09.2026). Vorher brauchte es die
   Regel nicht: Der Koerper war ein Cockpit und konnte gar nicht scrollen.
   Seit dem freien Aufbau wandert die Liste unter dem offenen Dialog weg,
   sobald jemand daneben scrollt — auf dem Tablet bei jeder Wischgeste.
   Ueber `:has()` statt einer Klasse, die jedes Modul selbst setzen muesste:
   Der Dialog ist offen, wenn ein Backdrop offen ist, und das weiss das CSS
   allein. Das Buero-Dach loest dasselbe mit `body.modal-offen` — dort setzt
   das Werkzeug die Klasse. */
body:has(.modal-backdrop.open),
body:has(.auswahl-ueberdeckung[data-offen="1"]) { overflow: hidden; }

.modal {
    background: var(--flaeche-gehoben);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-gross);
    box-shadow: var(--schatten-fenster);
    max-width: 520px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* ══ HAUS-BAUSTEIN: dialog-breiten ══ Quelle: Material/design/bausteine/dialog-breiten.css
   HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
   und zwar in ALLEN Dächern gleichzeitig. */
/* ══ BREITEN-LEITER ══ S 380 · M 520 (Standard, oben) · L 680 · XL 880
   Vier Stufen fürs ganze Haus (Chris 04.08.2026), gleich benannt in Suite,
   Büro und Racing. Vorher hieß dieselbe Stufe je nach Werkzeug .modal-md,
   .modal-breit oder gar nichts, und zwischen M und L hatten sich zwei
   Einzelstücke bei 560 eingenistet — die sind eingesammelt.
   Jedes Modal nimmt die KLEINSTE Stufe, die passt: Komponente zentral,
   Größe ist Kontext-Wahl. Wer eine fünfte Zahl braucht, braucht meist
   keinen Dialog, sondern eine Seite. */
.modal-s  { max-width: 380px; }
.modal-l  { max-width: 680px; }
.modal-xl { max-width: 880px; }
/* ══ HAUS-BAUSTEIN: dialog-breiten ENDE ══ */
.modal.modal-tall { max-height: 90vh; height: 80vh; }   /* hohe Variante, z.B. Tabellen-Modale */

/* ══ HAUS-BAUSTEIN: dialog ══ Quelle: Material/design/bausteine/dialog.css
   HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
   und zwar in ALLEN Dächern gleichzeitig. */
/* ══ DIALOG — Innenleben ══ Kopf · Schließen-Knopf · Rumpf · Fuß
   Gemeinsam seit V-2 (04.08.2026). Maße nach der Dialogkarte entschieden:
   BÜRO gewinnt — mehr Polsterung, größerer Schließen-Knopf, halbfetter
   Titel. Die Büro-Fassung ist die durchgeprüfte, und das größere Ziel für
   den Finger zählt am Handy, wo „Sicherheit" bedient wird.

   NICHT hier, absichtlich:
   · Die HÜLLE (.overlay / .modal-backdrop). Die Dächer verstecken sie
     verschieden — Büro über das [hidden]-Attribut, Suite über eine
     .open-Klasse. Vereinen hieße, in acht Werkzeugen JavaScript umzubauen:
     viel Risiko für wenig Gewinn.
   · Die SCHALE (.modal selbst): Fläche, Schatten, Eckenradius. Dort
     unterscheiden sich die Dächer mit Grund. Die Suite setzt den Dialog auf
     ihre DRITTE Flächenstufe, damit er über den Panels schwebt — die helle
     Welt hat nur zwei Stufen, über Weiß liegt nichts. Und ein Schatten mit
     18 % Schwarz, der auf Papierweiß richtig sitzt, ist auf dunklem Grund
     unsichtbar. Beides wäre nur durch Raten zu vereinen.

   WAS DER DIALOG AN DER SCHALE ERWARTET (jedes Dach setzt es selbst):
   display:flex · flex-direction:column · overflow:hidden · max-height.
   Darauf beruht das beschlossene Verhalten: Kopf und Fuß bleiben stehen,
   nur der Rumpf scrollt (Chris 04.08.2026, Suite-Bauweise). */

.modal-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--abstand-12);
    padding: var(--abstand-16) var(--abstand-20);
    border-bottom: 1px solid var(--linie);
    flex-shrink: 0;   /* der Kopf gibt nicht nach, wenn der Rumpf lang wird */
}
.modal-kopf h2 {
    margin: 0;
    font-size: var(--schrift-grund);
    font-weight: var(--gewicht-halbfett);
}
.modal-x {
    border: 0;
    background: transparent;
    color: var(--text-leise);
    font-size: var(--schrift-titel);
    line-height: 1;
    cursor: pointer;
    padding: var(--abstand-4) var(--abstand-8);
    border-radius: var(--rundung-mittel);
    font-family: inherit;
}
/* Die Fläche beim Überfahren nur dort, wo es einen Zeiger GIBT — am Handy
   bliebe sie sonst nach dem Antippen kleben. */
@media (hover: hover) {
    .modal-x:hover { background: var(--linie-zart); color: var(--text); }
}

/* Der Rumpf ist das einzige Teil, das nachgibt. `min-height: 0` ist dabei
   kein Schmuck: Ohne diese Zeile weigert sich ein Flex-Kind zu schrumpfen
   und drückt den Fuß aus dem Dialog heraus — die Regel stammt aus der
   Suite und war dort schon so kommentiert. */
.modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--abstand-20);
}

.modal-fuss {
    display: flex;
    gap: var(--abstand-10);
    align-items: center;
    padding: var(--abstand-16) var(--abstand-20);
    border-top: 1px solid var(--linie);
    flex-wrap: wrap;
    flex-shrink: 0;
}
/* Zwei Gruppen statt einer Ausrichtung: Ohne .links steht auch so alles
   rechts, weil .rechts sich den freien Platz nimmt. Umgekehrt ginge es
   nicht — ein reines justify-content: flex-end kann keinen Löschen-Knopf
   nach links stellen. Deshalb hat diese Bauweise die der Suite abgelöst. */
.modal-fuss .links  { display: flex; gap: var(--abstand-8);  align-items: center; flex-wrap: wrap; }
.modal-fuss .rechts { display: flex; gap: var(--abstand-10); align-items: center; margin-left: auto; }
/* Muss display:flex schlagen, sonst bleibt ein ausgeblendeter Fuß sichtbar. */
.modal-fuss[hidden] { display: none; }

/* ── Der Fehler IM Dialog ────────────────────────────────────────────────
   Kam mit V-7 (05.08.2026) ins Haus. Er stand nur im Büro-Dach, obwohl er
   nichts Büro-Eigenes hat: ein Satz, der über dem Formular erscheint, wenn
   das Abschicken nicht geklappt hat. Die Suite schickte solche Sätze bisher
   als schwebende Meldung — was für den Arbeitsbildschirm richtig ist, aber
   nicht für ein Formular, das man gerade ausgefüllt hat. Der Fehler gehört
   dorthin, wo der Blick schon ist.

   Er ist von Haus aus UNSICHTBAR und wird über `.zeigen` eingeblendet — so
   muss das JavaScript nur eine Klasse schalten und den Text setzen. */
.modal-fehler {
    display: none;
    margin: 0 0 var(--abstand-16);
    padding: var(--abstand-10) var(--abstand-12);
    border-radius: var(--rundung-mittel);
    background: color-mix(in srgb, var(--fehler) 9%, transparent);
    color: var(--fehler);
    font-size: var(--schrift-kompakt);
}
.modal-fehler.zeigen { display: block; }
/* ══ HAUS-BAUSTEIN: dialog ENDE ══ */

/* ══ HAUS-BAUSTEIN: ueber-dialog ══ Quelle: Material/design/bausteine/ueber-dialog.css
   HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
   und zwar in ALLEN Dächern gleichzeitig. */
/* HAUS-BAUSTEIN: ueber-dialog — wer die Software gemacht hat.

   Herkunft: Lager (Chris, 07.09.2026, mehrere Runden am Bild). Am 08.09. ins
   Büro-Kit, am 09.09. in die Suite („mach das gleich zentral für alle"), am
   09.09. hierher — weil er danach ZWEIMAL im Haus stand, Wort für Wort
   dieselben Werte in zwei Dateien. Genau der Fall, den Stufe 3 aufräumt.

   Markup und Verhalten baut jedes Dach selbst (`ueberBauen()` im Büro,
   `ueber.js` in der Suite): Der Dialog geht dort über `[hidden]` auf, hier
   über die Klasse `.open` — das zu vereinen hieße, in neun Werkzeugen
   JavaScript umzubauen. Die OPTIK dagegen ist dieselbe, und sie steht hier.

   Drei Gruppen untereinander, sonst nichts: keine Überschrift, keine
   Trennlinie, keine Auszeichnung, kein Fett. ZWEI Rollen, und Größe und Ton
   gehen miteinander: die tragenden Zeilen — Firma, Name, Version — hell und
   1 px unter dem Grundtext; alles Erklärende — Adresse, Label, Technik —
   gedämpft und eine Stufe kleiner. Mehr Stufen gibt es nicht. Der Name des
   Werkzeugs steht schon im Fenstertitel; ihn darunter zu wiederholen wäre
   doppelt.

   WAS NICHT HIER STEHT, weil es je Dach anders ist:
     · Die FÄRBUNG des Logos. Die Suite ist fest dunkel und hellt die
       Bilddatei hinter dem Block mit einem Filter auf. Das Büro braucht dort
       nichts: Sein Bild trägt `class="logo ueber-logo"`, und `.logo` wird im
       Dunkeln ohnehin aufgehellt — mit der Druck-Ausnahme, die eine zweite
       Zeile verloren hätte.
     · Der WEG hinein. Im Büro ist es `.logo-knopf`, in der Suite
       `.marke-knopf` — zwei Elemente, eine Geste (aus dem Apfel-Menü,
       Chris 07.09.2026). */
.ueber-zeile {
    /* 14 statt 15 px (Chris, 08.09.2026): Im zentrierten Fenster mit Logo
       trugen die hellen Zeilen zu laut. Der Abstand zu den gedämpften 12 px
       bleibt sichtbar, ohne dass sie als Überschriften auftreten. */
    font-size: var(--schrift-md);
    font-weight: var(--gewicht-normal);
    color: var(--text);
    line-height: 1.6;
}
.ueber-zeile.leiser { font-size: var(--schrift-xs); color: var(--text-gedaempft); }
.ueber-gruppe { margin-top: var(--abstand-20); }
/* Eine halbe Stufe Luft INNERHALB einer Gruppe: trennt Anschrift und
   Registerangaben, ohne einen neuen Absatz aufzumachen (Chris, 07.09.2026 —
   erst 10, dann 20 probiert, geblieben ist 10). */
.ueber-zeile.abgesetzt { margin-top: var(--abstand-10); }
/* Ein Aufzählungsglied bricht NICHT in sich um (Chris am Bild, 07.09.2026:
   „chrisinterface wird mittendrin umgebrochen"). Umbrochen wird nur an den
   Mittelpunkten — und weil das Leerzeichen davor geschützt ist, wandert der
   Punkt dabei nie an den Anfang der neuen Zeile. */
.ueber-zeile .nb { white-space: nowrap; }

/* Zentriert wie bei Apple und Figma (Chris, 08.09.2026 — zur Ansicht). Der
   Dialog hat weder Kopfzeile noch Fuß — seine erste und letzte Zeile stießen
   sonst hart an die Kante. Oben und unten darum 32 statt der 20, die ein
   Arbeits-Dialog hat; seitlich bleibt 20. Der Fuß ist am 09.09.2026 mit dem
   Schließen-Knopf gegangen (Chris: „bei Anzeige von Software wäre das
   passender ohne den Button"); die Luft unten trägt jetzt dieses Polster
   allein. */
.modal-ohne-kopf {
    /* Anker für das ×, das ohne Kopfzeile frei in der Ecke sitzt. */
    position: relative;
}
/* Das × sitzt in der Ecke, 12 zu beiden Kanten. Es ist leise: eine
   Herkunfts-Anzeige braucht keinen auffälligen Ausgang, nur einen sichtbaren.
   Am Tablet gibt es kein Escape, und ein Web-Dialog bringt keinen
   Fensterrahmen mit — deshalb bleibt es, obwohl sonst nichts im Fenster
   steht. */
.modal-ohne-kopf .modal-x {
    position: absolute;
    top: var(--abstand-12);
    right: var(--abstand-12);
    z-index: 1;
}
.modal-ohne-kopf .modal-body {
    text-align: center;
    padding: var(--abstand-32) var(--abstand-20);
}

/* Das Logo führt den zentrierten Satz an: eigene Zeile, Luft darunter. Klein
   gehalten (Chris, 08.09.2026) — es ist eine Herkunftsmarke, kein Bild. Der
   Abstand darunter ist eine Stufe größer als zwischen den Blöcken: Das Logo
   gehört nicht zur ersten Gruppe, es steht über allem. */
.ueber-logo {
    display: block;
    margin: 0 auto var(--abstand-20);
    height: 18px;
    width: auto;
}
/* ══ HAUS-BAUSTEIN: ueber-dialog ENDE ══ */

/* Weiß gefärbt, ohne Bedingung, und darum hinter dem Block: Die Suite ist
   FEST DUNKEL (farben.css: „Pages hell, Final Cut fest dunkel"), es gibt hier
   keinen Hellmodus, den man abfragen müsste. Dieselbe Zeile trägt schon
   `.marke-zeichen` in der Kopfleiste — EINE Bilddatei in der Hausfarbe, vom
   Filter aufgehellt. Im Büro steht an dieser Stelle eine Modus-Abfrage. */
.ueber-logo { filter: brightness(0) invert(1); }

/* Die MARKE ist der Weg hinein (09.09.2026, wie in den Werkzeugen). Sie sieht
   aus wie ein Logo und verhält sich wie ein Knopf: kein Rahmen, kein Grund,
   kein Polster — nur der Zeiger verrät, dass man klicken kann. Die Geste
   stammt aus dem Apfel-Menü; wer sie nicht kennt, verliert nichts. */
.marke-knopf { cursor: pointer; }

.user-acc {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-8);
    background: transparent;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    color: var(--text-gedaempft);
    font-size: var(--schrift-xs);
    border-radius: var(--rundung-mittel);
}

.user-acc:hover { color: var(--text); background: var(--flaeche-schwebend); }

/* Der Kreis mit den Initialen, der Name daneben und der Pfeil sind am
   08.09.2026 aus der Kopfleiste verschwunden — dort steht nur noch das Wort
   „Account". Ihre Regeln (.user-acc-avatar, .user-acc-name, .user-acc-caret)
   sind am 09.09.2026 entfallen: Ein Baustein darf mehr anbieten, als jedes
   Dach benutzt — aber nichts, was niemand mehr benutzen SOLL. */

.user-menu {
    position: fixed;
    z-index: 150;          /* ueber Drawer/Inhalt, unter dem Login-Gate (300) */
    min-width: 220px;
    background: var(--flaeche-gehoben);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-mittel);
    box-shadow: var(--schatten-schwebend);
    padding: var(--abstand-6);
}

/* ══ HAUS-BAUSTEIN: konto-kopf ══ Quelle: Material/design/bausteine/konto-kopf.css
   HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
   und zwar in ALLEN Dächern gleichzeitig. */
/* HAUS-BAUSTEIN: konto-kopf — wer angemeldet ist, oben im Konto-Menü.

   Name und Rolle, darunter ein Trenner. Die drei Zeilen standen seit dem
   09.09.2026 wortgleich in beiden Dach-Kits und in keiner Quelle — sie kamen
   mit dem Account-Menü, das an dem Tag in der Suite vom Kit GEBAUT wurde
   statt in vier Modulen von Hand zu stehen. Die Optik reiste dabei mit,
   ungefragt und doppelt.

   NICHT HIER: das Menü selbst (`.user-menu`, `.user-menu-item`). Es liegt in
   beiden Dächern auf verschiedenem Grund und hovert verschieden — das Büro
   auf die zarte Linie, die Suite auf die schwebende Fläche. Beides ist am
   Bild bestätigt; ein gemeinsamer Wert wäre in einem der beiden falsch. */
/* Seit 08.09.2026 ohne Avatar: Name und Titel, sonst nichts. Der Kreis mit
   den Initialen ist aus der Kopfleiste verschwunden, und im Menü hätte er nur
   wiederholt, was daneben steht. */
.user-menu-kopf {
    padding: var(--abstand-6) var(--abstand-12) var(--abstand-8);
    line-height: 1.35;
}
.user-menu-name { font-size: var(--schrift-sm); color: var(--text); }
/* Darunter der TITEL der Person, nicht ihre Rolle im System (Chris,
   08.09.2026). Gemischtschreibung: ein Titel ist ein Name, keine Kategorie. */
.user-menu-rolle { font-size: var(--schrift-kompakt); color: var(--text-gedaempft); }
.user-menu-trenner { height: 1px; background: var(--linie); margin: var(--abstand-6) 0; }
/* ══ HAUS-BAUSTEIN: konto-kopf ENDE ══ */

/* Zwischenueberschrift im Menue. Seit 08.09.2026 nimmt die Suite sie NICHT
   mehr: „Sprache" und „Werkzeuge" sagten nichts, was die Trennlinie nicht
   schon sagt (Chris). Die Regel bleibt — ein Baustein darf mehr anbieten,
   als jedes Dach benutzt. */
.user-menu-label {
    padding: 2px var(--abstand-12);
    font-size: var(--schrift-2xs);
    color: var(--text-leise);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
}

/* 30 PX JE EINTRAG seit 13.09.2026 (Chris: „bei dem Menü Tools und Account
   könnten die Klickflächen etwas größer sein — ich wollte es schmal, aber auf
   dem iPad war es schon grenzwertig. Einfach ein bisschen größer."). Eine
   Stunde lang waren es 34 — „etwas viel, mach mal 30".
   Vorher 26 px, eng wie im System (macOS setzt 22 px bei 13 px Schrift) —
   mit der Maus genau richtig, mit dem Finger zu knapp. Gewachsen ist nur die
   HÖHE: Waagerecht bleiben es 12 px, denn der Kopf mit Name und Titel
   (Haus-Baustein konto-kopf) steht auf derselben Kante. Die Einträge sitzen
   in einem 6-px-Rahmen (siehe .user-menu), damit der Hover nicht an den Rand
   stößt. Dieselbe Regel trägt das Tools-Menü (werkzeug-menu.css). */
.user-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 30px;
    background: none;
    border: none;
    border-radius: var(--rundung-klein);
    padding: var(--abstand-6) var(--abstand-12);
    color: var(--text);
    font-size: var(--schrift-sm);
    line-height: 18px;
    text-align: left;
    cursor: pointer;
}

.user-menu-item:hover { background: var(--flaeche-schwebend); color: var(--text); }

/* KEINE sichtbare Markierung des aktuellen Eintrags (Chris, 08.09.2026):
   „man klickt auf die Sprache oder auf die Software und dann geht es zu."
   Der Haken bleibt im Markup und traegt weiter aria-current fuer
   Screenreader — er wird nur nicht mehr gezeigt. */
.user-menu-check { display: none; }

.werkzeug-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-gedaempft);
    border-radius: var(--rundung-mittel);
    flex-shrink: 0;
}

.werkzeug-knopf:hover { color: var(--text); background: var(--flaeche-schwebend); }

/* Das 3x3-Punktraster: neun echte Kreise als INLINE-SVG im Markup, nicht als
   gekachelter Verlauf und nicht als data-URI-Token.

   · Inline, damit `fill="currentColor"` greift — der Wuerfel folgt dem Hover.
     Ein data-URI-SVG kann das nicht (es braeuchte ein zweites Token in einer
     zweiten Farbe), ein Bild-Token also auch nicht.
   · Echte Kreise statt `radial-gradient`, weil ein gekacheltes Raster nur
     dann aufgeht, wenn die Kaesten exakt in die Flaeche passen. Die erste
     Fassung (31.08.2026) hatte 16 px Flaeche bei 6 px Rasterweite und 1 px
     Versatz: Die dritte Spalte lag mit ihrem Mittelpunkt GENAU auf der Kante
     und wurde halbiert — rechte Spalte und untere Reihe abgeschnitten.
     Ein Raster, dessen Sauberkeit an einer Division haengt, ist die falsche
     Bauweise fuer neun Punkte.

   Geometrie: viewBox 18x18, Mittelpunkte auf 3 / 9 / 15, Radius 1.6 —
   jeder Punkt liegt mit Rand vollstaendig innen (1.4 bis 16.6). */
.werkzeug-knopf-punkte {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
    fill: currentColor;
}

/* Die Eintraege sind echte Links (neuer Tab, Mittelklick, Adresse kopieren) —
   .user-menu-item ist auf <button> gemuenzt und bringt keine Link-Regeln mit. */
.werkzeug-menu .user-menu-item {
    text-decoration: none;
    box-sizing: border-box;
}

/* SCHMALER ALS DAS ACCOUNT-MENUE (09.09.2026, Chris am Bild: „es reicht aber,
   wenn das Popup Tools nur halb so breit ist").
   Die 220 px kommen von `.user-menu` und sind fuer den ACCOUNT gerechnet —
   dort stehen Name, Rolle, vier Sprachen und Abmelden untereinander. Hier
   stehen vier Woerter. Gemessen braucht der breiteste Eintrag („Dashboard"
   samt Haken) 99 px inklusive Polster; 140 laesst dem Haken Luft zum Wort,
   ohne dass die Liste breiter wirkt als ihr Inhalt.
   Seit dem 09.09.2026 haengt das Menue an einem eigenen Titel „Tools" oben
   rechts — vorher an der Marke oben links, wo es die Breite des Werkzeugnamens
   ohnehin mitbrachte. */
.werkzeug-menu { min-width: 140px; }

/* ── Die Seite ──────────────────────────────────────────────────────────
   EXAKT die Werte des Buero-Dachs (dort `main` in bausteine.css): 1140 px
   breit, 32 oben, 24 seitlich, 80 unten. Chris am 09.09.2026: „mach die
   Bildschirmbreite fuer die Gestaltung erst mal genau so wie Logistik und
   QS und Vertrieb, damit wir vergleichen koennen."

   UND SIE SCROLLT WIE DORT: die ganze Seite, nicht ein Kasten darin. Die
   vier Module waren Cockpits (`body { height: 100dvh; overflow: hidden }`,
   der Inhalt in einem eigenen Scroll-Kasten). Zwei Anlaeufe, das mit der
   Seite zu verheiraten, brachten erst gar kein Scrollen (ein Block brach
   die Flex-Kette) und dann einen toten 80-px-Streifen unter dem Kasten.
   Seit dem dritten Anlauf (09.09.2026) scrollt der Koerper wie in Logistik
   und Vertrieb; die Module haben ihre Cockpit-Regeln abgelegt (siehe
   dort). Dialoge, Schubladen und die Anmeldekarte liegen `position: fixed`
   und brauchen keinen festen Koerper.

   Wer die Breite spaeter weiter machen will, aendert sie HIER — und in
   beiden Daechern zugleich, sonst laufen sie wieder auseinander. */
.seite {
    /* `width: 100%` bleibt: Wo ein Modul den Koerper noch als Flex-Spalte
       fuehrt, naehme ein Flex-Kind sonst seine INHALTSbreite. */
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 32px var(--abstand-24) 80px;
    min-width: 0;
}
/* SCHWEBENDE MENÜS gehören nicht als Kind in `.seite` (13.09.2026): Die Regel
   darunter nähme ihnen die Mindestbreite — im Dashboard war das Tools-Menü so
   104 statt 140 px breit und das Account-Menü 99 statt 220 (gemessen). Sie stehen dort jetzt wie überall direkt im <body>. */
.seite > *,
.seite .tabellen-leiste,
.seite table { min-width: 0; max-width: 100%; }

/* ── EBENE 1 · Der Kopf ─────────────────────────────────────────────────
   Dieselbe Anatomie wie im Buero-Dach: links die Marke, rechts alles, was
   das Werkzeug als Ganzes betrifft, und ganz aussen der Konto-Menuetitel. */
.header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--abstand-12) var(--abstand-16);
    flex-wrap: wrap;
    margin-bottom: var(--abstand-24);
    position: relative;   /* Anker fuer die Menues */
}
/* ══ HAUS-BAUSTEIN: kopfzeile ══ Quelle: Material/design/bausteine/kopfzeile.css
   HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
   und zwar in ALLEN Dächern gleichzeitig. */
/* HAUS-BAUSTEIN: kopfzeile — die zwei Zeilen, mit denen jede Seite anfängt.

   EBENE 1 trägt die Marke links und alles Persönliche rechts, EBENE 2 die
   Umschalter. Beide Zeilen stehen seit dem 08./09.09.2026 in beiden Dächern
   und standen bis Stufe 3 (09.09.2026) in keiner Quelle — wortgleich, weil
   sie am selben Tag im einen Dach gebaut und ins andere abgeschrieben wurden.

   Was hier steht, ist die ANATOMIE: Wie die Zeilen sich verteilen, wie groß
   der Menütitel ist, wie er sich anfühlt. Die Farben seiner Zustände stehen
   ABSICHTLICH nicht hier — dazu unten.

   WAS BEWUSST NICHT HIER STEHT:
     · `.header` selbst. Die Suite braucht ein `position: relative` als Anker
       für ihr Werkzeug-Popover; das Büro hat keins und bekäme mit der Zeile
       einen Anker, den niemand benutzt.
     · Die MARKE (`.marke`, `.marke-zeichen`, `.marke-name`). Die Suite ist
       fest dunkel und hellt das Zeichen ohne Bedingung auf, das Büro fragt
       den Modus ab — mit der Druck-Ausnahme. Der Unterschied ist die halbe
       Regel; gemeinsam wäre nur die andere Hälfte.
     · Die FLÄCHE unter Zeiger und geöffnetem Menü. Das Büro nimmt die zarte
       Linie, die Suite die gehobene Fläche. Beides ist am Bild bestätigt und
       hell/dunkel verschieden begründet — ein gemeinsamer Wert wäre in einem
       der beiden Dächer falsch. Jedes Dach setzt seinen hinter dem Block. */

/* Was in Ebene 1 nach rechts gehört: Menütitel, Modus-Knopf, was sonst zum
   Benutzer zählt. */
.header .rechts {
    display: flex;
    align-items: center;
    gap: var(--abstand-10);
    flex-wrap: wrap;
    /* Marke oben, die Knöpfe bewusst 24 tiefer — „leicht versetzte
       Anordnung", so sieht Vertrieb aus (Chris, 09.09.2026: „Logistik und
       Vertrieb sind die Referenz"). Die Suite-Vorschau hatte beides auf
       einer Höhe; wer das zurückwill, streicht diese eine Zeile. */
    margin-top: var(--abstand-24);
}

/* Der Menütitel — „Account" bzw. der Name des Benutzers. Kein Kreis mit
   Initialen, kein Pfeil (Chris, 08.09.2026): Wer angemeldet ist, steht im
   Menü darunter. Ein Knopf, der wie Text aussieht, bis man ihn anfasst. */
.kopf-menuetitel {
    margin: 0;
    padding: var(--abstand-6) var(--abstand-10);
    border: 0;
    background: none;
    border-radius: var(--rundung-mittel);
    color: var(--text-gedaempft);
    font: inherit;
    font-size: var(--schrift-sm);
    cursor: pointer;
    white-space: nowrap;
}
.kopf-menuetitel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* EBENE 2 — die Navigationszeile: Umschalter links, weitere Umschalter oder
   Knöpfe rechts. Sie DARF FEHLEN: Aufträge und Benutzerverwaltung haben keine
   Ansichten zu wechseln, und ein Modul ohne sie ist kein Sonderfall. */
.kopf-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-10);
    flex-wrap: wrap;
    margin-bottom: var(--abstand-24);
}
/* ══ HAUS-BAUSTEIN: kopfzeile ENDE ══ */

/* ── Die Marke: Zeichen + Name, ein Menuetitel ──────────────────────────
   Der Klick oeffnet die Liste der Werkzeuge (und, wo es ihn gibt, „Ueber").
   Der Wuerfel („Waffel") rechts ist damit entfallen — der Einstieg ins Ganze
   sitzt oben links, wo ihn jeder sucht. */
/* Die Marke OHNE Knopf: auf der Anmeldekarte gibt es nichts zu oeffnen, dort
   steht sie als schlichtes <div class="marke">. Bis Stufe 3 (09.09.2026) trug
   `login-gate.css` dafuer eine eigene Kopie von `.marke`, `.marke-zeichen` und
   `.marke-name` — dieselben Werte, zweite Stelle, und beim Abschreiben war das
   `white-space: nowrap` verlorengegangen. Eine Marke, ein Ort. */
.marke {
    display: flex;
    align-items: center;
    gap: var(--abstand-10);
}

.marke-knopf {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-10);
    margin: -4px 0 0 -8px;   /* zieht die Flaeche des Knopfes an die Kante */
    padding: var(--abstand-4) var(--abstand-8);
    border: 0;
    background: none;
    border-radius: var(--rundung-mittel);
    color: inherit;
    font: inherit;
    cursor: pointer;
}
/* KEIN HOVER (Chris, 09.09.2026, am Bild der Vorlage): „sollte eigentlich
   keine Hover haben — wenn man drauf klickt, öffnen sich die Software-Credits,
   aber das Icon und der Name sind kein Button."
   Das Büro-Dach hatte es die ganze Zeit richtig und schreibt es dort auch hin:
   „Das Logo IST ein Knopf, sieht aber wie ein Logo aus — nur der Zeiger
   verrät, dass man klicken kann." Die Suite trug als einzige eine Fläche
   unter dem Zeiger; sie stammt aus der Zeit, als an der Marke das
   WERKZEUG-MENÜ hing (D-103) — dort war die Fläche richtig, denn ein Menü
   zeigt an, dass es sich öffnet. Seit dem 09.09.2026 hängt das Menü an einem
   eigenen Titel „Tools", und die Marke öffnet nur noch die Credits.
   Mit der Fläche fiel auch `[aria-expanded="true"]`: Der Zustand kann hier
   gar nicht mehr auftreten — `Ueber.montieren()` nimmt dem Knopf
   `aria-haspopup` und `aria-expanded` ausdrücklich ab.
   Der Fokusring BLEIBT. Er ist kein Hover, sondern der einzige Hinweis für
   den, der mit der Tastatur navigiert. */
.marke-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Das O-Zeichen. Die Datei liegt in der Hausfarbe vor; die Suite hat nur eine
   dunkle Welt, darum faerbt der Filter fest weiss. */
.marke-zeichen {
    width: 20px;
    height: 20px;
    display: block;
    flex: none;
    filter: brightness(0) invert(1);
}

.marke-name {
    font-size: var(--schrift-grund);
    font-weight: var(--gewicht-halbfett);
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    white-space: nowrap;
}

.kopf-menuetitel:hover,
.kopf-menuetitel[aria-expanded="true"] { background: var(--flaeche-gehoben); color: var(--text); }

.kopf-nav-rechts {
    display: flex;
    align-items: center;
    gap: var(--abstand-10);
}

/* ══ HAUS-BAUSTEIN: umschalter ══ Quelle: Material/design/bausteine/umschalter.css
   HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
   und zwar in ALLEN Dächern gleichzeitig. */
/* HAUS-BAUSTEIN: umschalter — der Segmented-Schalter.

   Zwei bis vier Ansichten desselben Inhalts, nebeneinander in einer flachen
   Wanne, die gewählte hebt sich als Griff heraus. Herkunft: Büro-Dach
   (`.toggle`, seit V-3). Die Suite hat ihn am 09.09.2026 Wert für Wert
   nachgebaut — an Logistik gemessen, unter eigenen Selektoren
   (`.kopf-nav .tab`). Zwei Fassungen, gleiche Zahlen, keine Quelle: seit
   Stufe 3 (09.09.2026) steht er hier.

   MARKUP — in beiden Dächern dasselbe, seit Stufe 3: ein <nav> mit der
   Klasse `umschalter` und role="tablist", darin <button>-Reiter mit der
   Klasse `tab` und role="tab"; der gewählte trägt zusätzlich `active`.

   `role` ist kein Beiwerk: Die Tastaturbedienung dazu liefert der Baustein
   `umschalter.js` — ein Tab-Anschlag in die Leiste, Pfeile zwischen den
   Reitern, Enter schaltet. Wer das Markup ohne `role` schreibt, bekommt die
   Optik und keine Bedienung.

   Die Suite setzt neben `umschalter` noch die Klasse `tabs`: Dort gibt es
   eine zweite, größere Reiterleiste (48 px Topbar mit Unterstrich), und
   `umschalter` schaltet sie auf diese Form um. Das Büro hat nur diese eine
   Form und braucht das zweite Wort nicht.

   ZWEI ZUSTÄNDE, EIN AUSSEHEN: `.active` setzt das Werkzeug (wie bisher),
   `aria-selected` schreibt `umschalter.js` nach. Die Regel unten nimmt beide
   — dann sieht die Leiste auch dann richtig aus, wenn ein Werkzeug den
   Baustein nicht geladen hat. */
.umschalter {
    display: inline-flex;
    align-items: center;
    /* Nicht schrumpfen: In einer Kopfzeile mit Knöpfen daneben würde die Wanne
       sonst auf schmalen Fenstern zusammengedrückt. Kam am 09.09.2026 aus
       `tabs.css` mit, als die Suite ihre 48-px-Reiterleiste löschte — es war
       die EINZIGE Eigenschaft, die `.tabs` gab und `.umschalter` nicht. */
    flex-shrink: 0;
    gap: 2px;
    padding: 3px;
    border-radius: var(--rundung-mittel);
    background: var(--linie-zart);
}
.umschalter .tab {
    border: 0;
    background: transparent;
    padding: var(--abstand-8) var(--abstand-14);
    border-radius: var(--rundung-klein);
    cursor: pointer;
    color: var(--text-gedaempft);
    font-family: inherit;
    font-size: var(--schrift-sm);
    font-weight: var(--gewicht-mittel);
    line-height: normal;
    letter-spacing: 0;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.umschalter .tab:hover { color: var(--text); }
.umschalter .tab.active,
.umschalter .tab[aria-selected="true"] {
    /* An Logistik gemessen: Griff rgb(46,55,72) = --flaeche-aktiv, Schatten
       0 1px 2px bei 5 % = --schatten-kante. */
    background: var(--flaeche-aktiv);
    color: var(--text);
    box-shadow: var(--schatten-kante);
}
/* Der Fokus-Ring gehört hierher und nicht ins Werkzeug: Mit dem roving
   tabindex ist der Fokus die einzige Anzeige, WO man in der Leiste steht,
   solange man mit den Pfeilen wandert und noch nicht geschaltet hat. */
.umschalter .tab:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: -2px;
}
/* ══ HAUS-BAUSTEIN: umschalter ENDE ══ */

/* SUITE-EIGEN, hinter dem Block: Hier tragen dieselben Knoepfe auch die grosse
   Reiterleiste (`.tabs`, 48 px Topbar mit Unterstrich, tabs.css). Der Haus-
   Baustein kennt sie nicht und setzt deshalb weder Hoehe noch Unterstrich
   zurueck — das muss die Suite selbst tun, wo beide Klassen zusammenstehen.
   Stand bis Stufe 3 IM Umschalter-Block und ist beim Zusammenlegen ersatzlos
   gefallen: Dashboard und Sollkurven zeigten einen Abend lang 48-px-Reiter
   mit Akzent-Unterstrich statt des Umschalters (Deepview 09.09.2026, B-02). */
.tabs.umschalter {
    height: auto;
    min-height: 0;
    border-bottom: 0;
}
.tabs.umschalter .tab {
    height: auto;
    min-height: 0;
    margin: 0;                 /* .tab traegt margin-bottom -1px fuer den Unterstrich */
    border: 0;
    border-bottom: 0;
}
.tabs.umschalter .tab.active,
.tabs.umschalter .tab[aria-selected="true"] { border-bottom-color: transparent; }
/* Fuer eine Stunde am 09.09.2026 stand hier ein zweiter Zweig `.tabs .umschalter`
   — Pitwall hing den Umschalter damals IN seine 48-px-Leiste. Mit dem freien
   Aufbau (Pitwall D-069) ist die Leiste weg und der Zweig ohne Abnehmer. Was
   dabei gelernt wurde, bleibt: Das `margin-bottom: -1px` von `.tab` kostet
   die Wanne ein Pixel, wo immer beide zusammentreffen. */

/* ══ HAUS-BAUSTEIN: tabellen-leiste ══ Quelle: Material/design/bausteine/tabellen-leiste.css
   HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
   und zwar in ALLEN Dächern gleichzeitig. */
/* HAUS-BAUSTEIN: tabellen-leiste — die Zeile ÜBER einer Tabellenkarte.

   Suche links, Filter und Anzahl rechts. Sie gehört zur Tabelle, nicht in den
   Kopf der Seite: Wer sucht, sucht IN dieser Liste (Chris, 09.09.2026 — „so
   wie bei Vertrieb").

   DER NAME KOMMT AUS DER SUITE, die WERTE kommen aus Vertrieb. Dort gab es
   dieselbe Zeile seit V-4c als `.filters`; als Logistik sie brauchte, wäre
   ein dritter Name (`filterzeile`) der Rückschritt gewesen, den Stufe 2
   gerade beseitigt hatte. EIN Ding, EIN Name — und seit Stufe 3 (09.09.2026)
   auch EINE Quelle: Bis dahin stand die Zeile wortgleich in beiden
   Dach-Kits und in keiner Werkstatt-Datei.

   NICHT HIER, weil es je Dach anders ist:
     · `.tabellen-leiste .auswahl.aktiv` — der kräftigere Rahmen eines
       gesetzten Filters. Nur das Büro kennt ihn; die Suite hat für denselben
       Zustand noch keine Entscheidung.
     · Die BREITE der Karte darunter. Wie viele Spalten eine Tabelle hat,
       weiß nur das Werkzeug. */
.tabellen-leiste {
    display: flex;
    align-items: center;
    gap: var(--abstand-10);
    margin-bottom: var(--abstand-24);
    flex-wrap: wrap;
    /* Kein Rahmen, kein Innenabstand: eine nackte Zeile über der Karte,
       bündig mit deren Kopf. Ein Rahmen ergäbe mit dem Kartenrand darunter
       eine doppelte Linie. */
}
/* Das Suchfeld — und die Hülle, die `suchfeld.js` darumlegt (sie trägt das
   Lösch-Kreuz). Ohne den Deckel wäre die Hülle unbegrenzt breit: In Logistik
   stand das Feld nach dem Umbau auf 854 px und schob die zwei Knöpfe an den
   Bildrand. 420 ist der Wert, den die Suite für dieselbe Zeile trägt. */
.tabellen-leiste .suche,
.tabellen-leiste .suche-huelle { flex: 1 1 auto; max-width: 420px; min-width: 0; }
.tabellen-leiste .suche-huelle .suche { width: 100%; max-width: none; }
/* Was nach rechts gehört, kommt in diese Gruppe — sonst müsste jedes Werkzeug
   den Abstand selbst rechnen. */
.tabellen-leiste .rechts {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--abstand-12);
}
/* ══ HAUS-BAUSTEIN: tabellen-leiste ENDE ══ */

/* ── Die Karte — Anatomie des Buero-Dachs, in Logistik gemessen ──────────
   Rahmen 1 px, Rundung 8, Grund erhaben, 24 darunter, Inhalt geschnitten. Die
   Kopfzeile: 14/20, 11 px Versalien mit Laufweite, gedaempft, Trennlinie. */
.karte {
    background: var(--flaeche-erhaben);
    border: 1px solid var(--linie);
    /* Eigene Rolle, nicht --rundung-gross: Das Buero-Dach nennt 8 so, die
       Suite-Leiter kennt nur 6 und 12. Begruendung an der Rolle. */
    border-radius: var(--rundung-karte);
    margin-bottom: var(--abstand-24);
    /* `clip`, nicht `hidden` (Chris am Bild, 09.09.2026). Beide schneiden
       den Inhalt an der Rundung ab — aber `hidden` macht die Karte zu einem
       SCROLL-Kasten, und daran klebte der Tabellenkopf fest (`position:
       sticky` haengt immer am naechsten Scroll-Kasten). Der scrollt nie, also
       wanderten die Spaltennamen beim Scrollen aus dem Bild. Mit `clip` gibt
       es keinen Kasten dazwischen: Der Kopf klebt am Fenster und bleibt
       stehen. Der Fall, an dem es sich entschied: 1001 Benutzer, neun
       Spalten — bei Zeile 500 stehen rechts zwei graue Pillen, und ohne die
       Ueberschriften weiss niemand, welche die Rolle ist und welche der
       Status. */
    overflow: clip;
}
.karte-kopf,
.abschnitt-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-12);
    padding: var(--abstand-14) var(--abstand-20);
    border-bottom: 1px solid var(--linie);
    font-size: var(--schrift-xs);
    font-weight: var(--gewicht-mittel);
    letter-spacing: var(--laufweite);
    text-transform: uppercase;
    color: var(--text-gedaempft);
    /* Das Buero setzt html/body auf 1.45, die Suite auf 1.5 — im Kopf ist
       das der halbe Pixel zwischen 45 und 45,5. Hier fest, damit die Kopfzeile
       in beiden Daechern gleich hoch ist (Logistik gemessen: 45). */
    line-height: 1.45;
}
/* Rechts im Kopf: die Zahl zur Liste („249 Auftraege"), wie Vertriebs
   .sec-meta — Gemischtschreibung, 13 px, gedaempft; die Zahl selbst in
   Textfarbe. */
.karte-kopf .anzahl {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--schrift-sm);
    font-weight: var(--gewicht-mittel);
    color: var(--text-gedaempft);
    white-space: nowrap;
}
.karte-kopf .anzahl strong { color: var(--text); font-weight: var(--gewicht-halbfett); }

/* ── Ein Bereich, der sich auf- und zuklappt ────────────────────────────
   Er traegt seinen Schalter AN SICH SELBST, als Zeile mit Pfeil — nicht in
   der Kopfleiste des Werkzeugs. So macht es jedes Betriebssystem; niemand
   legt den Schalter fuer einen Bereich in die Titelleiste der App.
   (Chris, 08.09.2026 — deshalb verliess Sollkurvens Konfiguration-Knopf den
   Kopf, siehe dort P-027.) */
.abschnitt-kopf {
    justify-content: flex-start;
    width: 100%;
    margin: 0;   /* Sollkurven gab #pp-config-btn in der alten Leiste 12 px links */
    border-left: 0; border-right: 0; border-top: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.abschnitt-kopf:hover { background: var(--flaeche-gehoben); }
/* Zugeklappt traegt die Kopfzeile keine Trennlinie — es steht ja nichts
   darunter. Den Zustand fuehrt `aria-expanded`; ein frueher mitgedachtes
   `data-zu` am Abschnitt setzt kein Werkzeug, die Regel dafuer ist am
   09.09.2026 entfallen. */
.abschnitt-kopf[aria-expanded="false"] { border-bottom-color: transparent; }

/* Der Pfeil zeigt zu nach unten und dreht sich beim Oeffnen nach oben — die
   Geste aus dem Web, nicht das Dreieck von macOS. 7 px: Er markiert nur, er
   ruft nicht. */
.abschnitt-kopf .pfeil {
    width: 7px;
    height: 7px;
    margin: -3px 4px 0 2px;
    border-right: 1.5px solid var(--text-gedaempft);
    border-bottom: 1.5px solid var(--text-gedaempft);
    transform: rotate(45deg);
    transition: transform 0.2s;
}
.abschnitt-kopf[aria-expanded="true"] .pfeil {
    margin-top: 3px;
    transform: rotate(-135deg);
}
.abschnitt-kopf .abschnitt-name { font-weight: var(--gewicht-mittel); }
/* Die Zusammenfassung steht nur, wenn der Bereich zu ist — dann sagt sie in
   einer Zeile, was drinsteht. */
.abschnitt-kopf .abschnitt-zusammenfassung {
    margin-left: var(--abstand-8);
    color: var(--text-gedaempft);
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--schrift-sm);
}
.abschnitt-kopf[aria-expanded="true"] .abschnitt-zusammenfassung { display: none; }

/* ── Das Auswahl-Popup ──────────────────────────────────────────────────
   Eine Liste, aus der man EINEN Eintrag waehlt und die sich danach schliesst
   — im Dashboard die Aufnahmen, die vorher in einer festen Seitenleiste
   standen. Ein mittiges Fenster ueber abgedunkeltem Grund.

   Es war am 09.09.2026 einen Tag lang eine SCHUBLADE: rechts angeschlagen,
   seitlich hereinfahrend, mit dem Gedanken, die Liste sei ein Werkzeug zum
   Waehlen und kein Dialog, der eine Antwort verlangt. Am 10.09. standen
   beide Fassungen nebeneinander, und Chris entschied am Bild anders: Mittig
   steht die Liste dort, wo man ohnehin hinsieht. Die Schublade ist nicht
   verloren, sie liegt in der Historie dieses Kits
   (`git log -p bausteine/kopfleiste.css`) — sechs Zeilen, falls sie je
   wieder gebraucht wird.

   Masse aus dem Dialog-Baustein, nicht neu erfunden: Breite L (680), Hoehe
   wie `.modal-tall` (80vh, hoechstens 90). Die FESTE Hoehe ist Absicht —
   ohne sie huepft das Fenster bei jedem Tastendruck in der Suche, weil es
   mit der Trefferzahl waechst und schrumpft. Als Schublade fiel das nicht
   auf: die war immer bildschirmhoch.

   Der Uebergang haengt am Zustand, NICHT an einer @keyframes-Animation: Die
   startet bei jedem display-Wechsel neu und blieb im Anfangsbild stehen. */
.auswahl-ueberdeckung {
    position: fixed;
    inset: 0;
    z-index: 120;   /* ueber dem Inhalt, unter dem Login-Gate (300) */
    background: var(--overlay);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--abstand-16);
}
.auswahl-ueberdeckung[data-offen="1"] { display: flex; }

.auswahl-fenster {
    width: 100%;
    max-width: 680px;
    height: 80vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--flaeche-gehoben);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-gross);
    box-shadow: var(--schatten-fenster);
    /* Aufblenden und leicht heben, statt zu schieben: Ein mittiges Fenster
       kommt aus keiner Richtung — es ist da. */
    opacity: 0;
    transform: translateY(8px);
    transition: transform 0.18s ease-out, opacity 0.18s ease-out;
}
.auswahl-ueberdeckung[data-offen="1"] .auswahl-fenster { opacity: 1; transform: none; }

.auswahl-kopf {
    display: flex;
    align-items: center;
    gap: var(--abstand-12);
    padding: var(--abstand-12) var(--abstand-16);
    border-bottom: 1px solid var(--linie);
    flex-shrink: 0;
}
.auswahl-kopf .titel { font-weight: var(--gewicht-halbfett); }
.auswahl-kopf .anzahl { color: var(--text-gedaempft); font-size: var(--schrift-kompakt); }
.auswahl-kopf .zu {
    margin-left: auto;
    border: 0;
    background: none;
    color: var(--text-gedaempft);
    font: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.auswahl-kopf .zu:hover { color: var(--text); }

.auswahl-filter {
    display: flex;
    gap: var(--abstand-8);
    /* Unten enger und OHNE Linie (Chris am Archiv-Fenster, 13.09.2026): Die
       Linie trennte Filter und Liste, aber die Liste hat schon ihre eigene
       Kopfzeile — zwei Trenner uebereinander. */
    padding: var(--abstand-12) var(--abstand-16) var(--abstand-8);
    flex-shrink: 0;
}
/* Das Suchfeld traegt denselben Deckel wie in der Tabellen-Leiste: 420.
   Ohne ihn nimmt es alles, was die zwei Klapplisten uebrig lassen — in der
   380er-Schublade fiel das nicht auf, im mittigen Fenster stand es quer
   ueber die ganze Breite und drueckte die Filter an den Rand (Chris am
   Bild, 10.09.2026). Dieselbe Zahl aus demselben Grund wie oben. */
.auswahl-filter .suche,
.auswahl-filter .suche-huelle { flex: 1 1 auto; max-width: 420px; min-width: 0; }
.auswahl-filter .suche-huelle .suche { width: 100%; max-width: none; }
/* Die Klapplisten daneben bekommen eine feste Breite statt der
   Inhaltsbreite: „Alle" und „2026" sind kurze Woerter, die Felder standen
   daneben wie zusammengeschoben. 168 ist die Mindestbreite, die eine
   aufklappende Liste im Haus hat (`.menu`) — so ist das geschlossene Feld
   so breit wie das, was es oeffnet, und beim Aufklappen springt nichts. */
.auswahl-filter .auswahl-huelle { flex: 0 0 168px; }
.auswahl-liste { overflow-y: auto; padding: var(--abstand-8); flex: 1; min-height: 0; }

/* ══ HAUS-BAUSTEIN: menue ══ Quelle: Material/design/bausteine/menue.css
   HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
   und zwar in ALLEN Dächern gleichzeitig. */
/* ══ MENUE ══ das schwebende Popup an einem Anker
   Gemeinsam seit 19.08.2026 (Auswahl-Listen-Etappe). Herkunft: Suite
   ui-kit/bausteine/menu.css — dort seit Wochen im Einsatz (Account-Menü,
   ⋮-Zeilenaktionen, Custom-Select). Das Büro-Dach hatte KEINE Popup-Schale;
   mit der gemeinsamen Auswahl-Liste braucht es sie.

   DREI NUTZER aus EINER Komponente:
     · ⋮-Zeilenaktionen (Bearbeiten/…/Löschen) mit .kebab als Auslöser
     · Auswahl-Liste (.cs* — bausteine/auswahl-liste.css + .js)
     · Account-Menü der Suite (eigene Datei, gleiche Anatomie)

   Position setzt das JS per getBoundingClientRect (randsicher). z-index 1100
   ist Anatomie: über den Modalen beider Dächer (Büro ≤ 100, Suite < 1100) —
   ein Select IM Modal muss sein Popup darüber öffnen können.

   ZWEI ROLLEN-ENTSCHEIDE beim Umzug in die Werkstatt (19.08.2026), weil ein
   geteilter Baustein nur Rollen sagen darf, die BEIDE Dächer auflösen:
     · Hover war in der Suite die schwebende Fläche (#222B3C, damals
       `--karte` genannt) — das ging nur, weil der Menügrund dort dunkler
       ist als die Karte. Im hellen Büro wäre Weiß auf Weiß.
       Jetzt var(--flaeche-betont): DIE Hover-Rolle des Hauses, in beiden
       Dächern definiert. Suite-Delta: #222B3C → #2a3345, eine Nuance heller.
     · Schatten war in der Suite var(--schatten) — eine Rolle, die das Büro
       nicht führt (dort ist die Leiter benannt: kante/knopf/schwebend/
       fenster). Ein Popup schwebt: var(--schatten-schwebend).
       Suite-Delta: 0 4px 16px/.30 → 0 6px 24px/.35, minimal weicher.

   Markup (Zeilenaktionen):
     <button class="kebab" data-act="menu" aria-haspopup="true">⋮</button>
     <div class="menu" hidden>
        <button class="menu-item">Bearbeiten</button>
        <button class="menu-item danger">Löschen</button>
     </div>
   ══════════════════════════════════════════════════════════════════════════ */

.menu {
    position: fixed;
    z-index: 1100;
    min-width: 168px;
    background: var(--flaeche-gehoben);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-mittel);
    box-shadow: var(--schatten-schwebend);
    padding: var(--abstand-4);
    display: flex;
    flex-direction: column;
    /* Luft zwischen den Einträgen: Hervorhebung des Gewählten und Hover des
       Nachbarn sind zwei gefüllte, gerundete Flächen — ohne Abstand backen
       sie zu einem Klumpen zusammen (Chris am Bild, 19.08.2026). 2px ist
       Feinjustage unterm 4er-Raster, wie beim kleinen Knopf. */
    gap: 2px;
}
.menu[hidden] { display: none; }

.menu-item {
    background: transparent;
    border: none;
    text-align: left;
    padding: var(--abstand-8) var(--abstand-12);
    border-radius: var(--rundung-mittel);
    color: var(--text);
    font-family: var(--schriftart-ui);
    font-size: var(--schrift-sm);
    cursor: pointer;
    white-space: nowrap;
}
.menu-item:hover,
.menu-item.is-active { background: var(--flaeche-betont); }   /* :hover + Tastatur-Hervorhebung */
.menu-item.danger { color: var(--fehler); }
.menu-item.danger:hover { background: color-mix(in srgb, var(--fehler) 12%, transparent); }

/* GESPERRTER Eintrag — nativ zeigt ihn das OS ausgegraut und übergeht ihn in
   der Tastatur; das JS der Auswahl-Liste tut dasselbe. Ein disabled-<button>
   feuert keinen Klick, aber :hover matcht trotzdem — darum die Rücknahme. */
.menu-item.is-disabled { color: var(--text-leise); cursor: default; }
.menu-item.is-disabled:hover { background: transparent; }

/* Kebab-Auslöser (⋮) — randloser, kompakter Trigger fürs .menu-Popup.
   Bewusst OHNE .btn-Rahmen/min-height (34px zog die Tabellenzeile in die Höhe);
   Punkte dicker durch größeren, fetteren Glyph. Zentral, damit jedes Tool
   denselben ⋮ nutzt (Benutzer-Tabelle, Auftrags-Baum …). */
.kebab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-gedaempft);
    font-family: var(--schriftart-ui);
    font-size: var(--schrift-lg);       /* 18px — größere Punkte */
    font-weight: var(--gewicht-fett);   /* 700 — dickere Punkte */
    line-height: 1;
    border-radius: var(--rundung-mittel);
    cursor: pointer;
}
.kebab:hover { background: var(--flaeche-betont); color: var(--text); }
/* ══ HAUS-BAUSTEIN: menue ENDE ══ */

/* ══ HAUS-BAUSTEIN: auswahl-liste ══ Quelle: Material/design/bausteine/auswahl-liste.css
   HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
   und zwar in ALLEN Dächern gleichzeitig. */
/* ══ AUSWAHL-LISTE ══ das Dropdown, GEÖFFNET
   Gemeinsam seit 19.08.2026. Herkunft: Suite ui-kit (menu.css + customselect.js).

   Der Baustein „auswahl" (V-4c/2) hat das GESCHLOSSENE Feld vereinheitlicht —
   die geöffnete Liste malte weiter das Betriebssystem: weißes OS-Popup mit
   Systemblau, auf jedem Rechner anders, im dunklen Werkzeug ein Loch im Bild.
   Und zwar UNHEILBAR: `color-scheme: dark` stand längst in beiden Dächern und
   erreicht die Liste trotzdem nicht — sie folgt dem Rechner, nicht der Seite
   (Chris' Befund am Logistik-Bild, 18.08.2026).

   DAS PRINZIP (aus der Suite übernommen): Das native <select> bleibt als
   Wert-/Form-Träger im DOM (display:none via .cs-native) und feuert weiter
   'change' — bestehende Handler laufen 1:1. Die Anzeige übernimmt ein
   .cs-trigger im Look des geschlossenen Feldes, die Liste ist ein .menu-Popup
   (bausteine/menue.css). Das Verhalten liefert bausteine/auswahl-liste.js.

   Der TRIGGER trägt wörtlich die Deklarationen aus auswahl.css — gleiche
   Polsterung, gleiche Mindesthöhe, gleicher Chevron, gleicher Gesperrt-
   Zustand. Ein Feld, zwei Zustände, EINE Optik. */

/* Das aufgerüstete native Feld: unsichtbar, aber im DOM und im Formular. */
select.cs-native { display: none; }

/* Sitzt das Feld in einer .auswahl-huelle, übernimmt der Trigger den Chevron —
   der Pfeil der Hülle geht aus, sonst stünden zwei übereinander. */
.auswahl-huelle.cs-host::after { display: none; }

.cs { position: relative; display: block; width: 100%; }

.cs-trigger {
    position: relative;
    width: 100%;
    text-align: left;
    background: var(--eingabe);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-mittel);
    color: var(--text);
    /* inherit statt einer Schrift-Rolle — Doktrin aus auswahl.css: das Feld
       spricht die Schrift seiner Umgebung. Ein <button> erbt von sich aus
       NICHT, darum steht es hier ausdrücklich. */
    font-family: inherit;
    font-size: var(--schrift-sm);
    padding: var(--abstand-6) 32px var(--abstand-6) var(--abstand-10);   /* haus-ausnahme: die 32px sind die Freihaltung für den Pfeil (12 rechts + 5,5 breit + Luft), also Geometrie dieses Bauteils — keine Abstands-Entscheidung, die auf die Leiter gehörte */
    min-height: 34px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color 0.15s ease;
}
.cs-trigger::after {                              /* Chevron — dieselbe gedrehte Ecke wie .auswahl-huelle */
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 5.5px;                                 /* optisch ~8px — Chris 02.07.2026, final */
    height: 5.5px;
    border-right: 1.25px solid var(--text-gedaempft);
    border-bottom: 1.25px solid var(--text-gedaempft);
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

/* Fokus = Akzent-RAHMEN, kein Ring — Hausstil aller Dächer (siehe feld.css). */
.cs-trigger:focus { outline: none; border-color: var(--akzent); }

/* GESPERRT — wörtlich der Zustand aus auswahl.css: sagt „hier ändert niemand
   etwas", nicht „hier steht vielleicht etwas" (keine Deckkraft, V-4b-Lektion).
   Das JS spiegelt das disabled des nativen Feldes auf den Trigger. */
.cs-trigger:disabled {
    background: var(--linie-zart);
    color: var(--text-gedaempft);
    opacity: 1;
    cursor: not-allowed;
}

/* Versteckt jemand das FELD (hidden-Attribut), verschwindet die ganze
   Aufrüstung mit — Trigger UND Hülle. Ohne diese Regeln stünde ein sichtbarer
   Trigger vor einem unsichtbaren Feld: genau der Fall des Vertriebs-Cockpits
   (#zeitraum wird im Vergleichs-Modus versteckt). Die Schwester-Regel in
   auswahl.css (`> .auswahl[hidden]`) greift nach der Aufrüstung nicht mehr,
   weil .cs als Zwischenschicht dazwischenrückt. */
.cs:has(> .cs-native[hidden]) { display: none; }
.auswahl-huelle.cs-host:has(.cs-native[hidden]) { display: none; }

/* Lange Listen (z. B. Kunden) scrollen im Popup statt den Schirm zu fluten. */
.cs-pop { max-height: 280px; overflow-y: auto; }

/* Der aktuell gewählte Wert in der offenen Liste. */
.menu-item.is-sel { color: var(--akzent); }

/* ZUSATZ RECHTS (29.09.2026) — nur wenn die Option `data-rechts` trägt, siehe
   auswahl-liste.js. Name links, Zusatz rechtsbündig und leise, mit Luft
   dazwischen, eine Stufe kleiner als der Name (Chris 29.09.2026);
   tabellarische Ziffern, damit Zahlen untereinander stehen.
   `data-rechts-ton="fehler"` färbt ihn in der Fehlerfarbe (z. B. überbucht). */
.menu-item:has(> .cs-rechts) { display: flex; justify-content: space-between; gap: var(--abstand-24); }
.cs-rechts { color: var(--text-leise); font-size: var(--schrift-xs); font-variant-numeric: tabular-nums; }
.cs-rechts.cs-rechts-fehler { color: var(--fehler); }
/* ══ HAUS-BAUSTEIN: auswahl-liste ENDE ══ */

/* ══ HAUS-BAUSTEIN: anmeldung ══ Quelle: Material/design/bausteine/anmeldung.css
   HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
   und zwar in ALLEN Dächern gleichzeitig. */
/* ══ ANMELDUNG ══ das Tor: vollflächig, ein Formular, mehr nicht
   Gemeinsam seit V-7 (05.08.2026). Entschieden an der loginkarte.html.

   DIE KLEINSTE FAMILIE DER REIHE — und das ist ein Ergebnis, kein Zufall.
   Felder (V-4b), Knopf (V-3), Dialog und Breite (V-2, V-1) waren hier längst
   dieselben; die Anmeldung besteht fast nur aus Bauteilen, die schon
   gemeinsam sind. Übrig blieben zwei Fragen, und beide hat Chris am
   05.08.2026 entschieden:

     A  DAS LOGO, in beiden Dächern. Die Anmeldung ist die einzige Stelle, an
        der ein Werkzeug sagt, VON WEM es ist; welches es ist, sagt die Zeile
        darunter. Die Suite hatte bis dahin keine einzige Bilddatei — das
        Logo reist jetzt über den Kit-Sync mit, wie die Schriften.
     B  DER FEHLER STEHT IM DIALOG, über den Feldern. Das schränkt die
        V-6-Entscheidung („Fehler unten Mitte, bleibt stehen") für genau
        diesen Fall ein, und zwar mit Grund: Ein Anmelde-Tor ist kein
        Arbeitsbildschirm. Es füllt die ganze Fläche, hat ein einziges
        Formular — und die schwebende Meldung landete unten in der Mitte,
        also am einzigen Ort, an dem man gerade NICHT hinsieht. Der Kasten
        dafür ist `.modal-fehler` aus dem Dialog-Baustein.
     C  DIE AUSFÜLLHILFE BLEIBT AN. Ein Passwort-Manager, der Benutzer und
        Passwort einträgt, ist auf einem Werkstatt-Rechner ein Gewinn; wer
        keinen benutzt, merkt nichts davon. (Das ist Markup, kein CSS —
        `autocomplete="on"` am Formular.)

   WARUM DER LOGIN SEINEN EIGENEN RUMPF BAUT und nicht `.modal-body` nimmt:
   Er ist der einzige Dialog ohne Fuß. Kopf und Rumpf sitzen direkt
   aufeinander, und der Rumpf IST das Formular. Die zwei Zeilen `flex: 1` und
   `min-height: 0` sind dabei keine Kosmetik: Seit V-2 ist `.modal` eine
   Flex-Spalte mit `max-height: 85vh` — ohne sie wäre der Inhalt bei kleinem
   Fenster abgeschnitten und der Anmelde-Knopf säße unerreichbar unter der
   Kante. Gefunden 2026-08-04 beim Durchzählen der Dialoge, nicht von einem
   Test: 331 Proben liefen an der Stelle grün vorbei. */

/* Vollflächig und DECKEND — hinter dem Tor darf nichts zu sehen sein. */
.anmeldung {
    background: var(--flaeche);
    align-items: center;
}

.anmelde-karte {
    max-width: 380px;   /* Stufe S der Breiten-Leiter (dialog-breiten.css) */
    box-shadow: var(--schatten-fenster);
}

.anmelde-kopf {
    padding: 28px 28px 0;   /* haus-ausnahme: 28px ist die Anatomie dieser einen Karte — sie sitzt bewusst luftiger als ein Arbeits-Dialog, weil auf ihr nichts steht außer der Anmeldung */
    flex-shrink: 0;
}

.anmelde-body {
    padding: var(--abstand-24) 28px 28px;   /* haus-ausnahme: 28px SEITLICH, damit Marke und Formular auf einer Kante stehen. Oben 24 statt 16 seit 08.09.2026: die Marke ist schmaler als der alte Schriftzug und braucht Luft nach unten, seit Titel und Untertitel weg sind (Chris) */
    display: flex;
    flex-direction: column;
    gap: var(--abstand-14);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Die Marke auf der Anmeldekarte ist DIESELBE wie in der Kopfzeile: gleiche
   Groessen, keine Sonderregel (Chris, 08.09.2026: „1 zu 1"). Sie ersetzt seit
   dem 08.09.2026 den breiten Schriftzug UND den Titel „Werkzeug — Anmeldung";
   dass man sich anmeldet, sieht man an den zwei Feldern (Chris: „das weiss
   jeder").
   Hier steht nur, dass sie NICHT klickbar ist: In der Kopfzeile oeffnet das
   Zeichen den Ueber-Dialog, auf der Anmeldekarte gibt es nichts zu oeffnen.
   Wie die Marke AUSSIEHT, sagt jedes Dach in seiner Kopfzeile — sie steht
   dort ohnehin, und zweimal beschrieben waere zweimal zu pflegen. */
.anmelde-kopf .marke { pointer-events: none; }

/* Welches Werkzeug — direkt unter dem Logo, das sagt, von wem es ist. */
.anmelde-titel {
    margin: 0;
    font-size: var(--schrift-grund);
    font-weight: var(--gewicht-halbfett);
    color: var(--text);
}

/* Die kleine Zeile unter dem Titel — wer sie braucht, nimmt sie: Die Suite
   schreibt dort „ProKASRO Suite" bzw. „Anmeldung", das Büro sagt beides schon
   im Titel und lässt sie weg. Ein Baustein darf mehr anbieten, als jedes Dach
   benutzt; er darf nur nichts ERZWINGEN. */
.anmelde-untertitel {
    color: var(--text-leise);
    font-size: var(--schrift-xs);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
    margin: -8px 0 0;   /* zieht sie an den Titel heran, gegen den Spalten-Abstand */
}

/* Der Anmelde-Knopf nimmt die volle Breite: Es gibt nichts daneben. */
.anmelde-body .btn-primaer {
    width: 100%;
    text-align: center;
    margin-top: 2px;
    padding: var(--abstand-12) var(--abstand-16);
}
/* ══ HAUS-BAUSTEIN: anmeldung ENDE ══ */

/* Das Tor liegt ÜBER allem, auch über dem Konto-Menü (150). Eigene Zeile,
   weil die Stapel-Ordnung eine Dach-Frage ist: Das Büro hat kein Konto-Menü
   und kommt dort mit 60 aus. */
.anmeldung { z-index: 300; }

/* Das Logo. Dach-eigen und NICHT im Baustein, weil die Einfärbung eine
   Dach-Frage ist: Die Datei ist dunkelblau (Logo-Navy). Das Büro dreht sie nur
   in seiner DUNKLEN Welt auf Weiß und lässt sie hell dunkel — die Suite hat
   überhaupt nur eine dunkle Welt, hier gilt es immer. Ohne diese Zeile stünde
   ein dunkelblaues Logo auf dunkelblauem Grund: unsichtbar. */
.logo {
    width: 130px;
    height: auto;
    display: block;
    filter: brightness(0) invert(1);
}

/* Zwei Karten-Spalten (Dashboard-Auftrag-Tab): jede Sektion ist eine Karte
   mit Gewicht. Jede Spalte stapelt ihre Karten von oben — keine Löcher.
   Schmal stapeln die Spalten.

   BREITE: die volle Breite der Seite, die Spalten teilen sie sich (Chris,
   09.09.2026: „die Kacheln sollen die volle Breite annehmen und skalieren").
   Bis dahin stand hier ein Deckel von 2 × 440 + 16 (Chris 14.08.2026, am
   Bild von 400 nachjustiert; davor 1400) — auf breiten Fenstern standen
   Label und Wert ~650 px auseinander und die Zeile zerfiel. Der Deckel ist
   weg, weil die SEITE die Breite begrenzt (Kit kopfleiste.css, 1140 —
   von Chris am 09.09.2026 bestätigt, breiter erst bei einem konkreten
   Fall). Wird sie einmal breiter, kommt der alte Befund zurück; dann ist
   die Antwort nicht der Deckel, sondern die Zeile: Label in fester Spalte,
   Wert links daneben — oder drei Spalten. */
.protokoll-shell {
    display: flex;
    align-items: flex-start;
    gap: var(--abstand-16);
    padding-bottom: 60px;
}
.pk-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-16);
}
@media (max-width: 760px) {
    .protokoll-shell { flex-direction: column; }   /* schmal: Spalten stapeln, Reihenfolge bleibt */
}

.pk-section {
    background: var(--flaeche-gehoben);   /* Probe 2 (Chris 04.07.): einen Tick heller als der Grund */
    border-radius: var(--rundung-mittel);
    padding: 16px 18px;              /* randlos (Chris 04.07.): Abhebung nur über den Grund */
}

.pk-section-head {
    font-size: var(--schrift-xs);
    font-weight: var(--gewicht-halbfett);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
    color: var(--text-gedaempft);
    margin-bottom: 12px;
}

.pk-section-body {
    display: flex;
    flex-direction: column;
}

/* Label links, Wert rechts, dünne Trennlinie je Zeile (führt das Auge) */
.pk-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 7px 0;
    /* Zeilen-Trennung: seit dem 14.08.2026 die Rolle --linie (Chris: das
       frühere rgba(255,255,255,0.045) war „etwas sehr schwach" — und ein
       Literal im geteilten Baustein, wo Rollen hingehören). */
    border-bottom: 1px solid var(--linie);
    font-size: var(--schrift-sm);
    line-height: 1.4;
}
.pk-row:last-child { border-bottom: none; }

.pk-label {
    color: var(--text-gedaempft);   /* lesbar (war muted = zu dunkel) */
    flex-shrink: 0;
}

.pk-value {
    color: var(--text);
    font-weight: var(--gewicht-mittel);
    text-align: right;
}

.pk-empty {
    color: var(--linie-stark);   /* leere Werte fast unsichtbar — kein „—"-Rauschen */
    font-weight: var(--gewicht-normal);
}

/* === EINGABE-ZEILE (11.08.2026, Auftragstool) =============================
   Dieselbe Zeile, nur trägt die rechte Seite ein Feld statt Text. Die Zeile
   richtet sich dafür an der MITTE aus (baseline kippt, sobald ein Rahmen im
   Spiel ist) und bekommt etwas mehr Luft, damit die 34-px-Felder nicht
   aneinanderkleben. Eigene Klasse statt `:has()` — der Renderer weiss ohnehin,
   welche Art Zeile er baut, und eine Zeile, die sich selbst benennt, kann an
   keinem Browser scheitern. */
.pk-row-eingabe {
    align-items: center;
    padding: 4px 0;
    /* KEINE Trennlinie unter Eingabe-Zeilen (Chris, Go 14.08.2026): der
       Feldkasten ist selbst der Zeilen-Anker — Linie darunter war doppelte
       Struktur. Lese-Zeilen (.pk-value) behalten ihre Linie: dort ist sie
       die Brücke zwischen Label links und Wert rechts. */
    border-bottom: none;
}

/* Lese-Zeile OHNE Linie — für eine Text-Zeile ZWISCHEN Eingabe-Zeilen (der
   Techniker eines erledigten Auftrags, 18.08.2026). Zwischen Feldkästen wäre
   die Linie kein Brückenschlag Label→Wert mehr, sondern ein Trennstrich, den
   sonst keine Zeile der Karte hat (Chris am Bild: „die Trennlinie bei
   Techniker raus"). Wie .pk-row-eingabe benennt sich die Zeile selbst — der
   Renderer weiss, dass er sie zwischen Felder setzt; kein Geschwister-Selektor,
   kein :has(). Als letzte Zeile einer Lese-Karte braucht es sie nicht
   (:last-child nimmt die Linie ohnehin). */
.pk-row-ohne-linie { border-bottom: none; }

.pk-eingabe {
    display: flex;
    align-items: center;
    gap: var(--abstand-8);
    /* 230 statt 260 seit dem 14.08.2026 (Chris: „die Inhalte haben Platz,
       die Felder können 30 px kürzer") — längster realer Inhalt ist ein
       Firmenname, und der bekommt beim Tippen ohnehin Scroll im Feld. */
    flex: 0 1 230px;
    justify-content: flex-end;
}
/* Das Feld selbst kommt aus forms.css (.eingabe) — hier nur seine Rolle in der
   Zeile: es füllt die rechte Spalte und schrumpft mit dem Fenster. Die
   EINHEIT (mm/m/°C) steht seit dem 14.08.2026 in Klammern im LABEL — eine
   Einheiten-Spalte hinter dem Feld (.pk-einheit) gab es bis dahin; sie liess
   Felder mit Einheit früher enden als die ohne und ist ersatzlos raus. */
.pk-eingabe .eingabe { flex: 1 1 auto; min-width: 0; }

/* Ein Auswahlfeld in der Zeile. CustomSelect (menu.css) hängt das native
   <select> in eine `.cs`-Hülle und legt seinen Auslöser daneben — die Hülle
   ist dann das, was in der Zeile Platz braucht. */
.pk-eingabe .cs,
.pk-eingabe select { flex: 1 1 auto; min-width: 0; }

/* ══ HAUS-BAUSTEIN: zustand ══ Quelle: Material/design/bausteine/zustand.css
   HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
   und zwar in ALLEN Dächern gleichzeitig. */
/* HAUS-BAUSTEIN: zustand — was ein Bereich sagt, wenn er nichts zu zeigen hat.

   ZWEI FORMEN, ZWEI SITUATIONEN (Chris' Frage 06.08.2026, „einmal richtig"):
     · `.zustand`          — der leere BEREICH: eine ganze Ansicht oder Karte
                             hat nichts. Großzügig, mittig, meist mit Titel.
     · `.zustand.knapp`    — die leere STELLE: ein Block innerhalb von etwas,
                             das sonst Inhalt hat. Kompakt, linksbündig, leise.

   BEIDE DÄCHER HATTEN DIESE STRUKTUR — unabhängig voneinander gefunden, und
   das ist der beste Beleg dafür, dass sie stimmt: das Büro am 06.08.2026, die
   Suite am 15.08.2026 (dort hieß sie `.leer-zustand` / `.leer-hinweis`, aus
   sieben lokalen Fassungen zusammengeführt — `empty-workspace`,
   `wizard-projekt-leer`, `lampen-drawer-empty`, `empty-fehler`, `empty-panel`,
   `rx-leer-hinweis`, `uv-leer`). Einig war der Bau, nicht die Zahlen:

     Bereich   Büro: im Fluss, Polster 48/24, Titel 14 halbfett
               Suite: füllt den Wirt und zentriert sich senkrecht darin,
                      Titel 18 mittel
     Stelle    Büro: linksbündig, gedämpft, 14 senkrecht
               Suite: mittig, leise, 28/16

   ENTSCHIEDEN am Bild (Chris, 09.09.2026, Stufe 3): **die Büro-Fassung**, bis
   auf den Pixel. Damit fällt auch die senkrechte Zentrierung der Suite weg —
   sie brauchte einen Wirt mit Höhe, und wo der fehlte, saß der Text oben statt
   in der Mitte. Der leere Bereich sitzt jetzt überall im Fluss.

   Die Vorgeschichte der knappen Form: Vorher gab es sie vier Mal in
   Handarbeit — `.zv-leer`, `.mk-leer`, `.pk-leer`, `.auswertung-leer` — mit
   vier verschiedenen Schriftgrößen und Abständen. Aufgefallen ist es an
   Vertriebs Zielvereinbarungen: 8 px oben, 14 px unten, der Satz saß sichtbar
   zu hoch. Die Asymmetrie war aus dem Rhythmus der Listenzeilen geerbt, wo sie
   richtig ist — für einen einzelnen Satz gibt es aber keine nächste Zeile.

   SEITLICH KEIN ABSTAND bei der knappen Form: Der Einzug richtet sich nach dem
   Wirt. Manche Container rücken selbst ein (`.liste`), andere nicht — dieselbe
   Regel wie überall im Haus: Optik zentral, Größe und Position lokal. */
.zustand {
    padding: 48px var(--abstand-24);   /* haus-ausnahme: 48 senkrecht ist die Anatomie des leeren Bereichs, nicht die Leiter — doppelt so viel wie deren oberste Sprosse (24), damit die Leere als Leere gelesen wird und nicht als vergessener Inhalt. Waagerecht ist es die Leiter. */
    text-align: center;
    color: var(--text-gedaempft);
    font-size: var(--schrift-sm);
}
.zustand .titel {
    font-size: var(--schrift-md);
    font-weight: var(--gewicht-halbfett);
    color: var(--text);
    margin-bottom: var(--abstand-6);
}
.zustand.knapp {
    /* NUR SENKRECHT, und als LANGSCHREIBWEISE. Die Kurzform `padding` nullt
       auch links und rechts — und weil `.zustand.knapp` zwei Klassen trägt,
       schlägt sie jede einklassige Regel des Werkzeugs, egal wo die steht.
       Der seitliche Einzug des Wirts ging damit verloren, der Satz klebte am
       Rand (06.08.2026, beim ersten Anlauf selbst hineingetappt). */
    padding-top: var(--abstand-14);
    padding-bottom: var(--abstand-14);
    text-align: left;
}
/* Ein Knopf im leeren Bereich („Erneut versuchen") bekommt Luft nach oben.
   Kam mit der Suite-Fassung ins Haus — das Büro hatte den Fall noch nicht,
   aber er ist keiner, den ein Dach für sich behalten müsste. */
.zustand .btn { margin-top: var(--abstand-8); }
/* ══ HAUS-BAUSTEIN: zustand ENDE ══ */