:root {
  --breite-seite: 240px;
  --breite-seite-schmal: 64px;

  /* Masse der Formensprache - an einer Stelle, damit nichts halb rund wird. */
  --radius-karte: 12px;
  --radius-feld: 9px;
  --radius-pille: 999px;

  /* ⟨Bis 05.10.2026⟩ slate-Stufen: Grund #f8fafc, heller #f1f5f9, Rand
     #e2e8f0/#cbd5e1, Text #0f172a/#475569. Seither die warmen Töne der
     DRK-App (Kopf dieser Datei). */
  --bg: #f7f7f5;
  --flaeche: #ffffff;
  --flaeche-hell: #efeeea;
  --rand: #e3e1dc;
  --rand-stark: #cfccc5;
  --text: #1f1d1b;
  --text-leise: #554f4a;
  /* Hier stand #94a3b8 - auf weissem Grund 2,6 : 1 und damit für Beschriftungen
     und Hilfstexte zu blass. #64748b trägt 4,8 : 1 (Punkt 168 K4).
     ⟨05.10.2026⟩ Der warme Ton daneben: #6b655f trägt 5,8 : 1 auf --flaeche
     und 5,0 : 1 auf --flaeche-hell. */
  --text-still: #6b655f;
  /* ⟨Bis 05.10.2026⟩ #dc2626 und #b91c1c. Seither DRK-Rot und sein
     Hover-Ton; weiss auf --rot 4,8 : 1, auf --rot-tief 7,5 : 1. */
  --rot: #e60005;
  --rot-tief: #a51e0f;
  /* Der Schimmer hinter der Anmeldekarte (05.10.2026, wie die DRK-App). */
  --rot-sanft: #fdeceb;
  /* ⟨04.10.2026, Vereinfachung Welle 2⟩ Rot als Schrift (Marker .rot,
     button.gefahr). Hell ist es --rot selbst (4,8 : 1 auf --flaeche). Im
     Dunkeln schafft --rot auf #0f172a nur 3,7 : 1 und auf --flaeche-hell
     3,0 : 1 - dort mit --text gemischt, 60 % Rot: 5,8 : 1 auf --flaeche,
     4,8 : 1 auf --flaeche-hell, 5,4 : 1 auf dem Grund des Markers. Flächen
     und Kanten bleiben --rot.
     ⟨Später am selben Tag:⟩ Hell ist es --rot-tief. --rot selbst trug auf dem
     Grund des Markers .rot nur 4,0 : 1; --rot-tief trägt 6,5 : 1 auf
     --flaeche, 5,9 : 1 auf --flaeche-hell, 5,4 : 1 im Marker und 5,7 : 1 auf
     dem Hover-Grund von button.gefahr.
     ⟨05.10.2026, DRK-Farben⟩ Hell ist es #c8000a, die Schriftfarbe Rot der
     DRK-App: 6,1 : 1 auf --flaeche, 5,2 : 1 auf --flaeche-hell, 4,9 : 1 im
     Marker und 5,3 : 1 auf dem Hover-Grund von button.gefahr. Dunkel steht
     sie jetzt fest (siehe dort) statt gemischt. */
  --rot-schrift: #c8000a;
  /* Signalfarben - unverändert (Kopf dieser Datei). */
  --gruen: #059669;
  --gelb: #b45309;
  /* ⟨Bis 05.10.2026⟩ #0284c7 in beiden Farbschemata. Seither das Verweisblau
     der DRK-App, dunkel heller (#5fb0ea). */
  --blau: #2275d0;
  /* ⟨Bis 05.10.2026⟩ leise Schatten an Karten und Kacheln. Die DRK-App
     zeichnet Karten nur mit Rand. */
  --schatten: none;
  --schatten-hoch: 0 12px 32px rgba(0, 30, 60, .16);
  --schatten-anmeldung: 0 20px 50px rgba(0, 30, 60, .12);
  /* ⟨Bis 06.10.2026⟩ 0 0 0 3px color-mix(in srgb, var(--blau) 30%,
     transparent) - ein blauer Hof. Seither rot mit Lücke (Kopf dieser Datei). */
  --fokus: 0 0 0 2px var(--flaeche), 0 0 0 4px var(--rot);
  /* Ein Feld im Fokus: roter Rand und ein leiser roter Hof. */
  --fokus-feld: 0 0 0 3px color-mix(in srgb, var(--rot) 22%, transparent);

  /* Seitenleiste.
     ⟨Bis 05.10.2026⟩ hell: Grund weiss, Schrift #334155, aktiv #fef2f2 mit
     roter Schrift, Gefahrenzone #dc2626. Seither DRK-Dunkelblau in beiden
     Farbschemata, Zwischentöne als Weiss-Anteil im Blau ausgerechnet (die
     DRK-App schreibt sie als rgba; hier fest, damit die Wächter rechnen
     können):
       --seite-text-leise  72 % Weiss   7,9 : 1 auf #002d55
       --seite-rand        14 % Weiss
       --seite-hover        8 % Weiss   leise Schrift darauf 6,2 : 1
       --seite-schalter    22 % Weiss   weisse Schrift darauf 7,1 : 1
                           ⟨seit 06.10.2026 #e60005 wie theme-switch .on der
                           App, weiss darauf 4,8 : 1⟩
     Aktiv: weiss auf #e60005, 4,8 : 1. Gefahrenzone und Gruppentitel
     #ff8a7a (das helle DRK-Rot der Kategorien) - 6,1 : 1 auf der Leiste,
     4,8 : 1 auf dem Hover-Grund; Hover und aktiv der Gefahrenzone sind
     18 bzw. 28 % DRK-Rot im Blau (6,3 bzw. 6,1 : 1). */
  --seite-bg: #002d55;
  --seite-rand: #244a6d;
  --seite-text: #ffffff;
  --seite-titel: #ffffff;
  --seite-text-leise: #b8c4cf;
  --seite-gruppe: #ff8a7a;
  --seite-hover: #143e63;
  --seite-aktiv: #e60005;
  --seite-aktiv-text: #ffffff;
  --seite-schalter: #e60005;
  --seite-zaehler: #ffffff;
  --seite-zaehler-text: #a51e0f;
  --seite-gefahr: #ff8a7a;
  --seite-gefahr-leise: #ff8a7a;
  --seite-gefahr-hover: #292547;
  --seite-gefahr-aktiv: #40203f;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    /* ⟨Bis 05.10.2026⟩ Schiefergrau (#020617, #0f172a, #1e293b, Text
       #e2e8f0) und die Leiste #0b1220. Seither DRK-Marineblau. */
    --bg: #001629;
    --flaeche: #001f3b;
    --flaeche-hell: #002d55;
    --rand: #123f69;
    --rand-stark: #22527f;
    --text: #eef3f9;
    --text-leise: #a3b5c9;
    /* 5,3 : 1 auf --flaeche, 4,9 : 1 auf --flaeche-hell (05.10.2026). */
    --text-still: #869cb3;
    --gelb: #d97706;
    /* ⟨04.10.2026 bis 05.10.2026⟩ color-mix(in srgb, var(--rot) 60%,
       var(--text)). Seither die Schriftfarbe Rot der DRK-App: 6,1 : 1 auf
       --flaeche, 5,1 : 1 auf --flaeche-hell, 6,1 : 1 im Marker. */
    --rot-schrift: #ee7a68;
    /* --rot-tief bleibt #a51e0f: Der Hover-Ton der DRK-App im Dunkeln
       (#ff2a2f) trüge weisse Schrift auf button.haupt nur mit 3,7 : 1. */
    --rot-sanft: #2e1222;
    --blau: #5fb0ea;
    --schatten: none;
    --schatten-hoch: 0 12px 40px rgba(0, 0, 0, .5);
    --schatten-anmeldung: 0 20px 50px rgba(0, 0, 0, .45);

    /* Leiste: dieselben Weiss-Anteile wie hell, im Blau #000e1c. */
    --seite-bg: #000e1c;
    --seite-rand: #0d2f50;
    --seite-text-leise: #b8bcbf;
    --seite-hover: #14212e;
    --seite-schalter: #e60005;
    --seite-gefahr-hover: #290b18;
    --seite-gefahr-aktiv: #400a16;
    color-scheme: dark;
  }
}

:root[data-thema="dunkel"] {
  /* ⟨Bis 05.10.2026⟩ Schiefergrau (#020617, #0f172a, #1e293b, Text
     #e2e8f0) und die Leiste #0b1220. Seither DRK-Marineblau. */
  --bg: #001629;
  --flaeche: #001f3b;
  --flaeche-hell: #002d55;
  --rand: #123f69;
  --rand-stark: #22527f;
  --text: #eef3f9;
  --text-leise: #a3b5c9;
  /* 5,3 : 1 auf --flaeche, 4,9 : 1 auf --flaeche-hell (05.10.2026). */
  --text-still: #869cb3;
  --gelb: #d97706;
  /* ⟨04.10.2026 bis 05.10.2026⟩ color-mix(in srgb, var(--rot) 60%,
     var(--text)). Seither die Schriftfarbe Rot der DRK-App: 6,1 : 1 auf
     --flaeche, 5,1 : 1 auf --flaeche-hell, 6,1 : 1 im Marker. */
  --rot-schrift: #ee7a68;
  /* --rot-tief bleibt #a51e0f: Der Hover-Ton der DRK-App im Dunkeln
     (#ff2a2f) trüge weisse Schrift auf button.haupt nur mit 3,7 : 1. */
  --rot-sanft: #2e1222;
  --blau: #5fb0ea;
  --schatten: none;
  --schatten-hoch: 0 12px 40px rgba(0, 0, 0, .5);
  --schatten-anmeldung: 0 20px 50px rgba(0, 0, 0, .45);

  /* Leiste: dieselben Weiss-Anteile wie hell, im Blau #000e1c. */
  --seite-bg: #000e1c;
  --seite-rand: #0d2f50;
  --seite-text-leise: #b8bcbf;
  --seite-hover: #14212e;
  --seite-schalter: #e60005;
  --seite-gefahr-hover: #290b18;
  --seite-gefahr-aktiv: #400a16;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 system-ui, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- Gerüst -------------------------------------------------------------- */

.schale { display: flex; min-height: 100vh; }

.seite {
  width: var(--breite-seite);
  flex: 0 0 var(--breite-seite);
  display: flex; flex-direction: column;
  background: var(--seite-bg);
  color: var(--seite-text);
  border-right: 1px solid var(--seite-rand);
  position: sticky; top: 0; height: 100vh;
  transition: width .16s ease, flex-basis .16s ease;
}
.schale.schmal .seite {
  width: var(--breite-seite-schmal);
  flex-basis: var(--breite-seite-schmal);
}

.seite-marke {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--seite-rand);
  min-height: 60px;
}
.seite-marke > svg { flex: 0 0 32px; border-radius: 9px; }
.marke-text { display: flex; flex-direction: column; overflow: hidden; line-height: 1.3; }
.marke-text b { font-size: 14.5px; font-weight: 700; color: var(--seite-titel); white-space: nowrap; }
.marke-text span { font-size: 12px; color: var(--seite-text-leise); white-space: nowrap; }

.seite-nav { flex: 1; overflow-y: auto; padding: 8px 10px; scrollbar-width: thin; }
.nav-gruppe {
  margin: 12px 0 3px; padding: 0 10px;
  font-size: 10.5px; line-height: 1.3; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  /* ⟨Bis 05.10.2026⟩ var(--seite-text-leise). Seither wie die Kategorien
     der DRK-App im hellen Rot. */
  color: var(--seite-gruppe);
}
.nav-eintrag {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 8px 10px; margin-bottom: 1px;
  background: transparent; border: 0; border-radius: 10px;
  color: var(--seite-text); font: inherit; font-size: 14px; text-align: left;
  cursor: pointer; position: relative; white-space: nowrap;
}
.nav-eintrag svg { flex: 0 0 20px; color: var(--seite-text-leise); }
.nav-eintrag:hover { background: var(--seite-hover); }
.nav-eintrag:focus-visible { outline: none; box-shadow: var(--fokus); }
.nav-eintrag.aktiv { background: var(--seite-aktiv); color: var(--seite-aktiv-text); font-weight: 600; }
.nav-eintrag.aktiv::before {
  content: ''; position: absolute; left: -10px; top: 7px; bottom: 7px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--rot);
}
/* ⟨Bis 05.10.2026⟩ stand hier var(--rot) - auf dem roten Grund des aktiven
   Eintrags verschwände das Zeichen. Es trägt seither die Schrift. */
.nav-eintrag.aktiv svg { color: var(--seite-aktiv-text); }
/* Der Fokusring in der Leiste (05.10.2026): Der blaue Ring der Inhaltsfläche
   steht auf dem Dunkelblau kaum ab, ein weisser schon. */
.seite { --fokus: 0 0 0 2px var(--seite-titel); }

/* Steht da, ist aber noch nicht gebaut (20.09.2026, siehe Angekuendigt in
   schale.ts). **Gedämpft mit Begründung, nicht versteckt** - dieselbe
   Zeichnung wie Leistenpunkt.folgt am Einsatzleitplatz: leisere Schrift, kein
   Zeigefinger, keine Fläche beim Überfahren, und rechts das Wort "folgt" für
   den, der nicht hovert. Der Satz dazu steht im title-Attribut.
   Der Knopf ist disabled; cursor und :hover erbt er trotzdem und muss sie
   deshalb hier zurücknehmen.
   (Kein Rückwärts-Hochkomma in dieser Datei - sie ist ein Vorlagenliteral.) */
.nav-eintrag.nav-folgt { color: var(--seite-text-leise); cursor: default; }
.nav-eintrag.nav-folgt:hover { background: transparent; }
.nav-eintrag.nav-folgt svg { opacity: .55; }
.nav-marke {
  margin-left: auto; padding-left: 8px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--seite-text-leise); opacity: .8;
}

/* Unterzeile unter dem Titel (Punkt 168, 14.09.2026). Nur wo eine Oberfläche
   sie setzt: Ohne sie bleibt der Eintrag ein Titel in einem span, und nichts
   hier trifft ihn. Zwei Zeilen brauchen weniger Luft darüber und darunter,
   sonst läuft eine Leiste mit siebzehn Einträgen aus dem Fenster.
   Mit K4 am selben Tag nachgemessen: Bei 6 px oben und unten passten die
   fünfzehn Einträge der Serverkonsole samt Marke und Fuss nicht in 940 px
   Fensterhöhe - 133 px zu viel. Mit den knapperen Massen hier und dem Fuss in
   zwei statt drei Zeilen passen sie (Satz in e2e/serverkonsole.spec.ts).
   Nachgemessen am 29.09.2026 (Punkt 320): Mit der Telefonie trägt die
   Konsole siebzehn Einträge, und die Leiste war bei 940 px um 22 px zu hoch
   (scrollHeight 845 zu clientHeight 823, jeder Eintrag 41 px). Deshalb 4 px
   statt 5 px oben und unten - 4 ist eine Stufe des Rasters (4/8/12/16/24/32),
   5 war keine - und 34 px gewonnen, also rund 12 px Luft. Die Gruppen und
   ihre Überschriften bleiben, wie sie sind: Die Telefonie steht schon in
   einer bestehenden Gruppe, eine Überschrift war nicht einzusparen.
   Der nächste Eintrag sprengt die 940 px wieder; dann ist nicht mehr an den
   Massen zu drehen, sondern an der Zahl der Einträge.
   ⟨29.09.2026 abends, Frage 62 (b), Entscheidung des Nutzers⟩ Das ist
   geschehen: "Mailausgang" und "Telefonie" sind ein Eintrag "Kommunikation",
   die Konsole trägt sechzehn Einträge. Nachgemessen in Chromium bei 1600 x
   940 am ausgelieferten Markup samt diesem Stil (angemeldet, alle Einträge
   sichtbar): Die Leiste bietet 823 px, ihr Inhalt braucht 771,6 px - rund
   51 px Luft; ein Eintrag misst 38,6 px. Gegengemessen mit einem
   verdoppelten Eintrag: siebzehn brauchen 811,2 px - dieselben 12 px Luft
   wie oben, die Messung trifft also die des e2e-Satzes -, achtzehn 850,8 px
   und damit 28 px zu viel. Ein weiterer Eintrag passt also wieder, der
   übernächste nicht.
   ⟨30.09.2026, Vereinfachung der Serverkonsole (Vorgabe des Nutzers)⟩ Die
   Konsole trägt jetzt acht Einträge **ohne** Unterzeile - diese Regel trifft
   dort keinen mehr, sie gilt nur noch, wo eine Oberfläche Unterzeilen setzt.
   Nachgemessen in Chromium (e2e/serverkonsole.spec.ts): Die Leiste braucht
   337 px, ein Eintrag misst 37,7 px; bei 940 px Fensterhöhe bietet sie 823 px
   - rund 480 px Luft. Die Rollprobe dort misst deshalb bei 400 statt 640 px.
   ⟨30.09.2026 nachmittags, Aufräumen des Hosterportals⟩ Die Regeln, die hier
   standen (.nav-text, .nav-titel, .nav-unterzeile und das knappere Polster
   eines Eintrags mit Unterzeile), sind entfernt, ebenso die Eigenschaft
   unterzeile in schale.ts: Keine Oberfläche setzt sie mehr. Die Messungen
   oben bleiben als Herleitung stehen - sie erklären, warum die Leiste der
   Konsole heute ohne Unterzeilen auskommt. */

/* Gefahrenzone (Punkt 168, 14.09.2026): kein Menüpunkt wie die anderen. Eine
   eigene Linie darüber und rote Schrift. Der Balken des aktiven Eintrags
   bleibt.
   Berichtigt mit K4 am selben Tag: Hier stand "hell genug für die dunkle
   Leiste, die beide Farbschemata heute haben" und die Farbe fest als #f87171.
   Die Leiste ist im Hellmodus jetzt hell - das Rot kommt aus dem Farbschema.
   Und die Zone klebt am unteren Rand der Leiste: Ist das Fenster so niedrig,
   dass die Leiste rollt, bleibt sie trotzdem zu sehen, statt unter den Rand
   zu rutschen. Der box-shadow deckt die Lücke über ihr, damit darunter
   durchrollende Einträge nicht durch ihre Linie scheinen.
   Nachgetragen mit K5: Die Leiste hat unten 8 px Innenabstand, und darin
   schaute beim Rollen die Unterkante des Eintrags davor hervor (bei 800 px
   Höhe ein halbes "Werkzeuge" unter der Gefahrenzone). Der zweite Schatten
   deckt ringsum diese 8 px.
   ⟨05.10.2026, DRK-Farben⟩ Die Leiste ist wieder in beiden Farbschemata
   dunkel (DRK-Dunkelblau). Die Zone schreibt deshalb im hellen DRK-Rot
   #ff8a7a - 6,1 : 1 auf der Leiste; ein volles Rot läge auf dem Blau unter
   3 : 1. */
.nav-eintrag.nav-gefahr {
  margin-top: 12px; color: var(--seite-gefahr);
  position: sticky; bottom: 0; z-index: 1;
  background: var(--seite-bg);
  box-shadow: 0 -12px 0 var(--seite-bg), 0 0 0 8px var(--seite-bg);
}
.nav-eintrag.nav-gefahr svg { color: var(--seite-gefahr); }
.nav-eintrag.nav-gefahr::after {
  content: ''; position: absolute; left: 10px; right: 10px; top: -7px;
  border-top: 1px solid color-mix(in srgb, var(--seite-gefahr) 30%, transparent);
}
.nav-eintrag.nav-gefahr:hover { background: var(--seite-gefahr-hover); }
.nav-eintrag.nav-gefahr.aktiv { background: var(--seite-gefahr-aktiv); color: var(--seite-gefahr); }
.schale.schmal .nav-eintrag.nav-gefahr::after { left: 6px; right: 6px; }

/* Fuss: Farbschema und Einklappen in einer Zeile. Hier stand "darunter das
   Konto" - seit der Kopfzeile (Punkt 168 K5, 14.09.2026) steht es oben rechts. */
.seite-fuss {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px;
  padding: 8px 10px 10px; border-top: 1px solid var(--seite-rand);
}

.thema {
  display: flex; gap: 2px; padding: 3px;
  background: var(--seite-hover); border-radius: var(--radius-feld);
}
.thema button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 5px 4px; border: 0; border-radius: 7px;
  background: transparent; color: var(--seite-text-leise);
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.thema button:hover { color: var(--seite-titel); }
.thema button.aktiv {
  background: var(--seite-schalter); color: var(--seite-titel); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 30, 60, .12);
}
.thema button:focus-visible { box-shadow: var(--fokus); }
.thema button svg { flex: 0 0 14px; }

.einklappen {
  width: 34px; padding: 0;
  background: transparent; border: 0; border-radius: var(--radius-feld);
  color: var(--seite-text-leise); cursor: pointer; font-size: 18px; line-height: 1;
}
.einklappen:hover { background: var(--seite-hover); color: var(--seite-titel); }
.schale.schmal .einklappen .pfeil { display: inline-block; transform: rotate(180deg); }

/* Eingeklappt: nur Symbole. Das Konto stand bis zur Kopfzeile mit in dieser
   Liste - seit es oben rechts steht, klappt es nicht mehr mit ein. */
.schale.schmal .marke-text,
.schale.schmal .nav-eintrag span,
.schale.schmal .nav-gruppe span,
.schale.schmal .thema button span { display: none; }
.schale.schmal .seite-marke,
.schale.schmal .nav-eintrag { justify-content: center; padding-left: 0; padding-right: 0; }
.schale.schmal .nav-gruppe { border-top: 1px solid var(--seite-rand); margin: 10px 4px 6px; padding: 0; height: 1px; }
.schale.schmal .seite-fuss { grid-template-columns: 1fr; }
.schale.schmal .thema { flex-direction: column; }
.schale.schmal .einklappen { width: 100%; height: 30px; }

/* ⟨30.09.2026, Punkt 343⟩ Unter 900 Pixel Fensterbreite setzt das Skript
   .eng (die Abfrage steht nur dort, hier keine Zahl). Die Leiste steht dann auf
   Symbolbreite; geöffnet liegt sie als Überlagerung über dem Inhalt, statt
   ihn zu verdrängen. Die Spalte behält dabei ihren Platz: Das Polster links
   steht für die Leiste, die aus dem Fluss genommen ist - sonst rückte der
   Inhalt beim Öffnen um 64 Pixel. */
.schale.eng.schwebend { padding-left: var(--breite-seite-schmal); }
.schale.eng.schwebend .seite {
  position: fixed; left: 0; top: 0; z-index: 30;
  width: var(--breite-seite); flex-basis: var(--breite-seite);
  box-shadow: var(--schatten-hoch);
}
.einklappen:focus-visible { outline: none; box-shadow: var(--fokus); }

/* --- Kopfzeile ----------------------------------------------------------- */

/* Punkt 168 K5, 14.09.2026. Über dem Inhalt und beim Rollen oben: links die
   Umgebung, in der Mitte der Kontext, rechts Verbindung, Uhr, Meldungen und
   das Konto. Leise gehalten - sie soll nicht mit dem Inhalt um den Blick
   streiten, und der Titel des Bereichs steht dort, nicht hier. */
.spalte { flex: 1; min-width: 0; }
.kopfzeile {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 18px;
  min-height: 58px; padding: 8px 30px;
  background: var(--flaeche); border-bottom: 1px solid var(--rand);
}
.kopf-links, .kopf-mitte, .kopf-rechts { display: flex; align-items: center; min-width: 0; }
.kopf-links { flex: 0 0 auto; }
.kopf-mitte { flex: 1 1 auto; gap: 10px; }
.kopf-links:not(:empty) + .kopf-mitte:not(:empty) {
  border-left: 1px solid var(--rand); padding-left: 18px;
}
.kopf-rechts { flex: 0 0 auto; gap: 12px; margin-left: auto; }
.kopf-umgebung { font-size: 14px; font-weight: 600; white-space: nowrap; }
.kopf-kontext, .kopf-zusatz { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf-kontext { font-size: 14px; }
.kopf-zusatz { font-size: 12.5px; color: var(--text-still); }
.kopf-uhr { font-size: 14px; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.kopf-meldungen {
  position: relative; display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  background: transparent; border: 0; border-radius: var(--radius-feld);
  color: var(--text-leise);
}
.kopf-meldungen:hover { background: var(--flaeche-hell); color: var(--text); }
/* Punkt 216, 15.09.2026: Der Server liefert eine andere Fassung dieser Seite.
   Ruhig wie die Uhr, aber ein Knopf - kein Rot, keine Bewegung. */
.kopf-fassung {
  padding: 5px 12px; white-space: nowrap;
  background: var(--flaeche-hell); border: 1px solid var(--rand);
  border-radius: var(--radius-pille); color: var(--text);
  font: inherit; font-size: 13px; cursor: pointer;
}
.kopf-fassung:hover { border-color: var(--text-leise); }
.kopf-zaehler {
  position: absolute; top: 2px; right: 0;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--radius-pille); background: var(--rot); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
}

/* Das Konto, oben rechts. Hier stand es mit den Farben der Seitenleiste. */
.konto { display: flex; align-items: center; gap: 2px; }
.konto-knopf {
  min-width: 0; max-width: 240px;
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 4px; background: transparent; border: 0; border-radius: var(--radius-pille);
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.konto-knopf:hover { background: var(--flaeche-hell); }
.kuerzel {
  width: 32px; height: 32px; flex: 0 0 32px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--rot); color: #fff; font-size: 12px; font-weight: 700;
}
.konto-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.konto-text b { font-size: 13px; color: var(--text); }
.konto-text b, .konto-text span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.konto-text span { font-size: 11px; color: var(--text-still); }
.konto-text span:empty { display: none; }
.konto-aus {
  flex: 0 0 auto; padding: 8px;
  background: transparent; border: 0; border-radius: var(--radius-feld);
  color: var(--text-still); cursor: pointer;
}
.konto-aus:hover { background: var(--flaeche-hell); color: var(--rot-schrift); }

@media (max-width: 1000px) { .kopf-zusatz { display: none; } }
@media (max-width: 800px) { .kopf-mitte, .kopf-uhr { display: none; } }
@media (max-width: 700px) {
  .kopfzeile { padding: 8px 14px; gap: 10px; }
  .konto-text { display: none; }
}

/* --- Inhalt -------------------------------------------------------------- */

/* Hier stand unten 64 px. Darüber steht die letzte Karte, die selbst schon
   16 px Abstand mitbringt - zusammen 80 px Leerfläche am Ende jedes der
   sechzehn Bereiche der Konsole (gemessen 20.09.2026). 32 px reichen, damit
   die letzte Karte nicht am Fensterrand klebt. */
.inhalt { flex: 1; min-width: 0; padding: 26px 30px 32px; }
@media (max-width: 700px) { .inhalt { padding: 16px 14px 40px; } }

.bereich-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.bereich-kopf h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.02em; line-height: 1.25; }
.bereich-kopf .hinweis { margin: 0; max-width: 72ch; }

/*
 * ===========================================================================
 * **Lesebreite des Fliesstextes** (20.09.2026, gemessen an der Serverkonsole)
 * ===========================================================================
 *
 * Die Zeile darüber deckelt den Hinweis im Bereichskopf seit je auf 72ch. Der
 * Fliesstext in der ersten Karte darunter - keine vierzig Pixel weiter - war
 * ungedeckelt: Bei 1920 px Fensterbreite bleiben dem Karteninneren 1577 px,
 * und eine Zeile mit 13,5 px Schrift trägt darin rund 234 Zeichen. Dieselbe
 * Seite gab damit zwei Antworten auf dieselbe Frage, und die falsche galt für
 * den weitaus grösseren Teil des Textes: 13 518 der 17 331 Zeichen, die in der
 * Konsole fest im Markup stehen.
 *
 * Die Rechnung ist im Haus schon einmal angestellt worden. An .handbuch-seite
 * (midend/src/oberflaeche.ts) steht 76ch mit der Begründung, eine Zeile mit
 * 233 Zeichen lese niemand an ihren Anfang zurück. Das gilt für jeden anderen
 * Absatz genauso - nur stand es bisher nur am Handbuch.
 *
 * **Warum dieselbe Zahl für 13,5 px und für 12 px.** ch misst die Breite der
 * Ziffer Null; ein Prosazeichen ist im Mittel schmaler, und beide wachsen mit
 * der Schrift. 72ch heissen deshalb in jeder dieser Grössen rund achtzig
 * Zeichen je Zeile. Eine Umrechnung in Pixel stünde hier falsch, weil sie von
 * der Schriftart abhängt, die das Betriebssystem stellt.
 *
 * **Nur im Inhalt.** Die Masken vor der Anmeldung stehen in Karten, die selbst
 * schon 400 bzw. 620 px breit sind; ein zweiter Deckel machte den Text dort
 * schmaler als die Felder daneben. Ausserhalb des Inhalts bleibt ohnehin
 * vieles unberührt: max-width greift an einem span im Fliesstext nicht, also
 * bleibt der Hilfstext in den Tabellenzellen des Hosterportals, wie er ist.
 * Derselbe span in einer knopfreihe ist ein Flex-Element und wird gedeckelt -
 * und dort ist das richtig, weil er die Zeile sonst bis zum Rand auszieht.
 */
.inhalt p.hinweis,
.inhalt .hilfstext,
.inhalt .meldung { max-width: 72ch; }

/* --- Bausteine ----------------------------------------------------------- */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-karte);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--schatten);
}
.karte.warn { border-color: color-mix(in srgb, var(--gelb) 55%, var(--rand)); }
.karte > h2:first-child, .karte > .karte-kopf:first-child { margin-top: 0; }

.karte-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}

/* Kartentitel: bis zum 14.09.2026 klein, in Grossbuchstaben und grau - eine
   Beschriftung, keine Überschrift. Die Vorgabe will die Hauptsache grösser und
   dunkler als das Beiwerk. */
h2 {
  font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  color: var(--text); margin: 0 0 10px; line-height: 1.35;
}
h3 { font-size: 14px; font-weight: 600; margin: 16px 0 8px; }
p.hinweis { color: var(--text-leise); font-size: 13.5px; margin: 0 0 12px; }
.hilfstext { color: var(--text-still); font-size: 12px; }
.leer { color: var(--text-still); font-size: 13px; margin: 6px 0; }

/*
 * Die Werteliste. Hier stand als zweite Spur 1fr - sie nahm damit alles, was
 * übrig war: im Bereich Server bei 1920 px Fenster rund 1420 px für eine
 * Server-ID, auf der Übersicht rund 1100 (gemessen 20.09.2026).
 *
 * Gedeckelt wird auf das, was der längste Wert wirklich braucht. Der breiteste
 * im Haus steht im Hosterportal: ein code-Feld mit dem Basislizenzschlüssel
 * und dem Knopf kopieren daneben, zusammen rund 275 px. 48ch lassen ihm Luft.
 * Was länger ist - eine Reihe Modulmarker, ein ganzer Satz in einem dd wie bei
 * den Zetteln der Schlüsselverwaltung -, bricht um, und das ist bei Fliesstext
 * das Gewünschte statt einer Zeile über die halbe Bildschirmbreite.
 *
 * ⟨Vorgeschlagen waren 32ch. Nachgerechnet sind das rund 250 px und damit
 * weniger als der Wert mit dem Kopierknopf - der wäre in die nächste Zeile
 * gerutscht, und zwar in einer Oberfläche, die dieser Befund gar nicht
 * betraf.⟩
 */
dl { display: grid; grid-template-columns: auto minmax(0, 48ch); gap: 8px 20px; margin: 0; font-size: 14px; }
dt { color: var(--text-still); }
dd { margin: 0; }

/* Festbreitenschrift nur für das, was abgetippt wird: Adressen, Schlüssel,
   Kennungen. */
code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px;
  background: var(--flaeche-hell); border: 1px solid var(--rand);
  border-radius: 6px; padding: 1px 6px;
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-still); padding: 8px 10px; border-bottom: 1px solid var(--rand);
  font-weight: 600;
}
td {
  padding: 10px 10px; vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
}
tr:last-child td { border-bottom: 0; }
tr.still td { opacity: .55; }
.tabelle-rollbar { overflow-x: auto; }

/* Marker als Pille - die Statusfarbe als Akzent, nicht als Fläche. */
.marker {
  display: inline-block; font-size: 11.5px; font-weight: 600; line-height: 1.5;
  border-radius: var(--radius-pille); padding: 1px 9px; white-space: nowrap;
  vertical-align: middle;
}
.gruen { background: color-mix(in srgb, var(--gruen) 13%, transparent); color: var(--gruen); }
.rot { background: color-mix(in srgb, var(--rot) 12%, transparent); color: var(--rot-schrift); }
.gelb { background: color-mix(in srgb, var(--gelb) 14%, transparent); color: var(--gelb); }
.grau { background: var(--flaeche-hell); color: var(--text-leise); }

label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-leise); }
input, select, textarea {
  background: var(--flaeche); border: 1px solid var(--rand-stark); color: var(--text);
  border-radius: var(--radius-feld); padding: 9px 11px; font: inherit; font-size: 14px; width: 100%;
}
/* ⟨Bis 06.10.2026⟩ border-color: var(--blau). */
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--rot); box-shadow: var(--fokus-feld);
}
input.schluessel {
  font-family: ui-monospace, Consolas, monospace; letter-spacing: .07em; text-transform: uppercase;
}
input[type="checkbox"] { width: auto; }
/* ⟨Bis 06.10.2026⟩ Fokus 2px Blau zu 45 %, Häkchen im Blau des Browsers.
   Seither wie .check-row der DRK-App: accent-color Rot. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--rot); }
input[type="checkbox"]:focus { box-shadow: none; outline: none; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--rot); outline-offset: 2px;
}

button {
  background: var(--flaeche); border: 1px solid var(--rand-stark); color: var(--text);
  border-radius: var(--radius-feld); padding: 8px 14px; font: inherit; font-size: 14px;
  cursor: pointer;
}
/* :where hält die Regel so leise wie "button" selbst - ein Knopf mit eigener
   Klasse (Eintrag der Seitenleiste, Farbschema, Konto) bestimmt sein Aussehen
   beim Überfahren und im Fokus selbst. Hier stand "button:hover:not(:disabled)",
   das mit zwei Pseudoklassen jede einfache Klassenregel überstimmte; es setzte
   nur die Randfarbe und fiel deshalb nicht auf. */
/* ⟨Bis 06.10.2026⟩ background: var(--flaeche-hell); border-color:
   var(--text-still). Seither wie .btn:hover der DRK-App: nur der Rand, rot. */
button:where(:hover:not(:disabled)) { border-color: var(--rot); }
button:where(:focus-visible) { outline: none; box-shadow: var(--fokus); }
button.haupt { background: var(--rot); border-color: var(--rot); color: #fff; font-weight: 600; }
button.haupt:hover:not(:disabled) { background: var(--rot-tief); border-color: var(--rot-tief); }
/* Gesperrt grau wie .btn.primary:disabled der App - ein blasses Rot las sich
   wie ein Knopf, der gleich geht (06.10.2026). */
button.haupt:disabled {
  background: var(--flaeche-hell); border-color: var(--rand); color: var(--text-still); opacity: 1;
}
button.leise { background: transparent; border-color: transparent; color: var(--text-leise); }
button.leise:hover:not(:disabled) { background: var(--flaeche-hell); border-color: transparent; color: var(--text); }
/* ⟨Bis 06.10.2026⟩ border-color: color-mix(in srgb, var(--rot) 35%,
   var(--rand-stark)), ohne Zeichen. Seither .btn.outline-red der App plus
   Warndreieck. */
button.gefahr { color: var(--rot-schrift); border-color: var(--rot); background: transparent; font-weight: 600; }
button.gefahr:hover:not(:disabled) { background: color-mix(in srgb, var(--rot) 8%, var(--flaeche)); border-color: var(--rot); }
button.gefahr:not(.leise):not([role="menuitem"])::before {
  content: ""; display: inline-block; width: 15px; height: 15px;
  margin: 0 7px 0 0; vertical-align: -2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.3%203.9%201.8%2018a2%202%200%200%200%201.7%203h17a2%202%200%200%200%201.7-3L13.7%203.9a2%202%200%200%200-3.4%200Z%22%2F%3E%3Cpath%20d%3D%22M12%209v4M12%2017h.01%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.3%203.9%201.8%2018a2%202%200%200%200%201.7%203h17a2%202%200%200%200%201.7-3L13.7%203.9a2%202%200%200%200-3.4%200Z%22%2F%3E%3Cpath%20d%3D%22M12%209v4M12%2017h.01%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
/* Leise Gefahr in Tabellenzeilen: .btn.danger-text der App. */
button.leise.gefahr { border-color: transparent; background: transparent; }
button.leise.gefahr:hover:not(:disabled) { background: var(--flaeche-hell); border-color: transparent; color: var(--rot-schrift); }
button:disabled { opacity: .5; cursor: not-allowed; }
/* Ein Verweis, der wie ein Knopf aussehen soll ("Anwenderbereich öffnen" an
   der Konsole). Die Klasse stand dort schon, eine Regel dazu gab es nicht - er
   sah aus wie ein blauer Textverweis zwischen Knöpfen. */
a.knopf {
  display: inline-block; padding: 8px 14px; border-radius: var(--radius-feld);
  border: 1px solid var(--rand-stark); background: var(--flaeche);
  color: var(--text); text-decoration: none; font-size: 14px;
}
/* ⟨Bis 06.10.2026⟩ background: var(--flaeche-hell); border-color: var(--text-still). */
a.knopf:hover { border-color: var(--rot); }
a.knopf:focus-visible { outline: none; box-shadow: var(--fokus); }

.knopfreihe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/*
 * Zwei Spalten, jede höchstens 420 px breit (20.09.2026).
 *
 * Hier stand 1fr 1fr ohne Deckel. Bei 1920 px Fensterbreite ist eine Spalte
 * damit 782 px breit, bei 2560 px sind es 1102 - und darin stand unter anderem
 * das Portfeld des Mailausgangs, ein Feld, das höchstens fünf Ziffern annimmt.
 * Ein Eingabefeld wird nicht besser, wenn es breiter wird; es wird nur
 * schwerer zu überblicken, weil Beschriftung und Eingabe auseinanderrücken.
 *
 * ⟨Vorgeschlagen war repeat(auto-fit, minmax(240px, 420px)). Nachgerechnet
 * ergibt das bei 1577 px Karteninnerem **sechs** Spalten zu 251 px und nicht
 * zwei zu 420: auto-fit räumt nur Spuren weg, in denen nichts steht, und jedes
 * Gitter hier trägt ein Kind mit der Klasse spanne über alle Spuren - es
 * bleibt keine leer. Das Formular des Mailausgangs hätte danach fünf leere
 * Zellen gehabt statt der einen, die es heute hat.⟩
 */
.gitter { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 420px)); }
.gitter.drei { grid-template-columns: repeat(3, minmax(0, 420px)); }
@media (max-width: 820px) { .gitter, .gitter.drei { grid-template-columns: 1fr; } }
.spanne { grid-column: 1 / -1; }

.verborgen { display: none !important; }

/* Codes zum Abschreiben oder Ausdrucken: Festbreitenschrift, damit sich
   Buchstaben und Ziffern nicht ähneln, und weiter Zeilenabstand, damit beim
   Abtippen niemand verrutscht. */
.codeliste {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: 0.08em;
  line-height: 2;
  margin: 10px 0;
  padding: 12px 16px;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--flaeche-hell);
  user-select: all;
}

/* Am Einsatzleitplatz eintragen (29.09.2026): Kennung und Adresse in der
   Kopplungskarte, zweispaltig wie ein Zettel zum Abschreiben. */
.am-platz {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 16px; align-items: center;
  margin: 10px 0; padding: 12px 16px;
  border: 1px solid var(--rand); border-radius: 10px; background: var(--flaeche-hell);
}
.am-platz dt { color: var(--text-leise); font-size: 13px; }
.am-platz .am-platz-kopf { grid-column: 1 / -1; font-weight: 600; color: inherit; }
.am-platz dd { margin: 0; overflow-wrap: anywhere; }
.am-platz code { font-size: 15px; letter-spacing: 0.04em; user-select: all; }

/* Meldungen: dunkler Text, die Farbe an der Kante und leise im Grund. Bis zum
   14.09.2026 stand der ganze Text in der Statusfarbe - Bernstein auf Beige
   liest sich schlecht, und die Farbe war Fläche statt Akzent. */
.meldung {
  border-radius: 10px; padding: 11px 14px; font-size: 13.5px; margin: 0 0 16px;
  color: var(--text); border: 1px solid var(--rand); border-left-width: 3px;
}
.meldung.fehler {
  background: color-mix(in srgb, var(--rot) 7%, var(--flaeche));
  border-color: color-mix(in srgb, var(--rot) 30%, var(--rand)); border-left-color: var(--rot);
}
.meldung.gut {
  background: color-mix(in srgb, var(--gruen) 7%, var(--flaeche));
  border-color: color-mix(in srgb, var(--gruen) 30%, var(--rand)); border-left-color: var(--gruen);
}
.meldung.warnung {
  background: color-mix(in srgb, var(--gelb) 8%, var(--flaeche));
  border-color: color-mix(in srgb, var(--gelb) 30%, var(--rand)); border-left-color: var(--gelb);
}

/* Kennzahlen */
.zahlen { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.zahl {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-karte);
  padding: 14px 16px; box-shadow: var(--schatten);
}
.zahl b { display: block; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
/* Nur die Beschriftung direkt in der Kachel. Hier stand ".zahl span", und das
   traf auch den Marker im Wert - ein grünes "Gültig" stand grau da, weil die
   Regel genauer war als die Farbe des Markers (Befund vom 14.09.2026). */
.zahl > span { font-size: 12px; color: var(--text-still); }

/* Verbindungskette */
.kette { display: flex; flex-direction: column; gap: 6px; }
.glied {
  display: flex; gap: 11px; align-items: flex-start; padding: 10px 12px;
  border-left: 3px solid var(--rand-stark); background: var(--flaeche-hell);
  border-radius: 10px;
}
.glied.gut { border-left-color: var(--gruen); }
.glied.warnung { border-left-color: var(--gelb); }
.glied.fehler { border-left-color: var(--rot); }
.glied b { font-size: 13px; display: block; }
.glied span { font-size: 13px; color: var(--text-leise); }
.glied em { font-size: 12px; color: var(--gelb); font-style: normal; display: block; margin-top: 3px; }
.punkt { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; background: var(--rand-stark); }
.punkt.gut { background: var(--gruen); }
.punkt.warnung { background: var(--gelb); }
.punkt.fehler { background: var(--rot); }

/* Schrittanzeige der Einrichtung */
.schritt {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--flaeche-hell); color: var(--text-still);
  font-size: 12px; font-weight: 700; margin-right: 8px;
}
.schritt.fertig { background: color-mix(in srgb, var(--gruen) 18%, transparent); color: var(--gruen); }
.schritt.dran { background: var(--rot); color: #fff; }

/* Kompaktlogo: Piktogramm plus Wortmarke */
.marke-logo { display: inline-flex; align-items: center; gap: 11px; }
.marke-logo > svg { border-radius: 9px; flex: 0 0 auto; }
.marke-wort { display: flex; flex-direction: column; line-height: 1.1; }
.marke-wort b {
  font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--text);
}
.marke-wort > span {
  font-size: 10px; font-weight: 700; letter-spacing: .28em;
  text-transform: uppercase; color: var(--rot-schrift);
}
/* ⟨Bis 05.10.2026⟩ color: var(--rot). Das ist Schrift - und #e60005 trägt
   auf dem Marineblau des Dunkelmodus nur 3,8 : 1. */

/* Anmeldemaske ohne Schale.
   ⟨05.10.2026⟩ Wie die DRK-App: ein roter Schimmer oben links im Grund und
   ein weicher, blau getönter Schatten unter der Karte. */
.anmeldeseite {
  display: grid; place-items: center; min-height: 100vh; padding: 24px;
  background: radial-gradient(1200px 600px at 10% -10%, var(--rot-sanft), transparent 60%), var(--bg);
}
.anmeldeseite .karte {
  width: 100%; max-width: 400px; margin: 0; padding: 24px;
  border-radius: 14px; box-shadow: var(--schatten-anmeldung);
}
.anmeldeseite .marke-logo { margin-bottom: 18px; }

/*
 * ===========================================================================
 * **Die Zeichnung im Handbuch** (20.09.2026, Bildfähigkeit des Handbuchs)
 * ===========================================================================
 *
 * Gesetzt wird sie in server-kit/src/handbuchsatz.ts: ein <figure> mit einem
 * <pre class="hb-bild"> und, wenn eine Unterschrift dasteht, einem
 * <figcaption class="hb-bildunterschrift">.
 *
 * **Warum die Regel hier steht und nicht bei ihren Nachbarn.** Die übrigen
 * hb-Klassen stehen im <style> von midend/src/oberflaeche.ts - dort, wo auch
 * das Gerüst des Handbuchs steht. Dafür, sie dorthin zu legen, spricht das
 * Naheliegende: Wer die Zeichnung sucht, sucht sie bei ihresgleichen. Dafür,
 * sie hierher zu legen, spricht die Reichweite: schale.css geht an alle drei
 * Serveroberflächen (Konsole, Hosterportal, Anwenderbereich), das <style> der
 * Konsole nur an eine. Sollte das Handbuch je an einer zweiten auftauchen -
 * seit dem 20.09.2026 steht es schon an zwei Stellen derselben Seite, in der
 * Schale und vor der Anmeldung -, ist die Zeichnung dort mit da.
 * **Wer beides zusammenlegt, legt es nach oberflaeche.ts**; dann stehen die
 * hb-Klassen wieder an einer Stelle, und diese hier fällt weg.
 *
 * Die Reihenfolge trägt: schale.css steht im <head> **vor** dem <style> der
 * Konsole. Eine gleich starke Regel dort gewänne - es gibt heute keine, und
 * eine neue wäre der Hinweis, dass die beiden Orte zusammengehören.
 *
 * **Eine Zeichnung darf nicht umbrechen.** Sie braucht feste Schrift (sonst
 * stehen zwei Zeilen mit gleich vielen Zeichen verschieden weit rechts) und
 * einen eigenen waagerechten Rollbereich: Ist sie breiter als die Spalte -
 * .handbuch-seite deckelt auf 76ch -, rollt **sie**, nicht die Seite. Eine
 * Seite, die seitwärts rollt, verliert ihren linken Rand für jeden Absatz.
 * ⟨Seit dem 30.09.2026 gelten die 76ch nur für den Fliesstext; die Zeichnung
 * darf die Spalte nehmen (bis 1100 px, Regeln weiter unten). Die Begründung
 * bleibt: Was dann noch breiter ist, rollt für sich.⟩
 *
 * **Die Zeile steht enger als der Fliesstext** (1,25 gegen 1,6): Ein
 * senkrechter Strich reicht nur so weit, wie die Zeile hoch ist. Bei lockerer
 * Zeile steht die Kante eines Kästchens als Folge von Strichelchen da statt
 * als durchgehende Linie. Enger als 1,15 geht auch nicht - dann berühren sich
 * Ober- und Unterlängen.
 */
.hb-bildrahmen { margin: 0 0 12px; }
.hb-bild {
  margin: 0; padding: 10px 12px; overflow-x: auto;
  background: var(--flaeche-hell); border: 1px solid var(--rand);
  border-radius: var(--radius-feld); color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.25; white-space: pre; tab-size: 2;
}
.hb-bildunterschrift {
  margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-leise);
}

/*
 * Das Bildschirmfoto im Handbuch (29.09.2026) - gesetzt in
 * server-kit/src/handbuchsatz.ts (fotoSetzen). Es passt sich der Spalte an
 * und rollt nicht: Ein Foto ist verkleinert noch lesbar genug, um die Maske
 * wiederzuerkennen, und wer Einzelheiten braucht, hat die Maske selbst.
 */
.hb-foto { margin: 0 0 12px; }
.hb-foto-bild {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--rand); border-radius: var(--radius-feld);
}

/*
 * ===========================================================================
 * **Das Gerüst und der Satz des Handbuchs, für jede Oberfläche** (29.09.2026,
 * Frage 86).
 * ===========================================================================
 *
 * Der Fall, den der Kopf über der Zeichnung vorhersah, ist eingetreten: Das
 * Handbuch steht an einer zweiten Oberfläche. Das Administrationsterminal
 * zeigt das Hosterhandbuch, gesetzt mit demselben Setzer
 * (server-kit/src/handbuchsatz.ts), also mit denselben hb-Klassen. Die
 * Regeln stehen deshalb hier und nicht ein drittes Mal im style einer Seite:
 * schale.css geht an Konsole, Terminal und Anwenderbereich.
 *
 * Wortgleich mit dem style von midend/src/oberflaeche.ts, wo sie bis heute
 * allein standen. Dort stehen sie vorerst weiter: Die Konsole wurde am selben
 * Abend von einer anderen Sitzung umgebaut, und ein Doppel mit gleichen
 * Werten ist unsichtbar - der style der Konsole kommt nach schale.css und
 * sagt dasselbe. Wegnehmen lässt er sich dort, ohne dass sich etwas ändert.
 * Die Begründungen der einzelnen Masse (76ch, 260 px, 900 px) stehen dort.
 *
 * ===========================================================================
 * ⟨**Seit dem 30.09.2026 die neue Ordnung, hier und nur hier.**⟩
 * ===========================================================================
 *
 * Vorgabe des Nutzers: „Bereite die Ansicht etwas auf, aktuell ist die
 * Fläche nicht gut genutzt und das Seitenregister etwas unübersichtlich."
 * Die Konsole bekam am selben Tag die neue Ordnung in ihrem style und setzte
 * dafür die Regeln, die bis dahin hier standen, ausdrücklich zurück (den
 * Kasten von 70vh an Verzeichnis und Seite, .hb-gruppe als Zwischenzeile in
 * Grossbuchstaben). Das Hosterportal zeigte weiter die alte Fassung.
 *
 * Seither stehen die Regeln der neuen Ordnung hier, für Konsole und Portal
 * gleich, und die alten sind weg - damit auch die Rücksetzungen im style der
 * Konsole. Das Markup dazu kommt aus server-kit/src/handbuchansicht.ts
 * (handbuchGeruest), die Bausteine im Browser ebenfalls von dort. Die Masse:
 *   - Register 280 px, klebt unter dem Kopf der Schale (58 px + Luft = 72)
 *     und rollt für sich; das Suchfeld steht darüber und rollt nicht mit.
 *   - Die Seite läuft im Dokument; 76ch für den Fliesstext, Foto, Zeichnung
 *     und Tabelle dürfen die Spalte nehmen, höchstens 1100 px.
 *   - Ab 1600 px steht die Sprungliste rechts neben der Seite und klebt.
 *   - Unter 900 px untereinander, das Register zuerst und flach.
 *   - Eine Gruppe ist ein details, ein Eintrag eine Zeile; die offene Seite
 *     trägt dieselbe Marke wie der offene Bereich der Seitenleiste: Fläche,
 *     Schriftgewicht, roter Strich an der Kante.
 */
.handbuch { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start }
@media (max-width: 900px) { .handbuch { grid-template-columns: minmax(0, 1fr) } }
.handbuch-register {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  position: sticky; top: 72px; max-height: calc(100vh - 96px)
}
.handbuch-register > .hb-suche { flex: 0 0 auto; padding: 7px 10px; font-size: 13.5px }
.handbuch-verzeichnis {
  display: flex; flex-direction: column; gap: 2px; min-height: 0;
  overflow-y: auto; padding-right: 6px
}
@media (max-width: 900px) {
  .handbuch-register { position: static; max-height: none }
  .handbuch-verzeichnis { max-height: 45vh }
}
.hb-trefferzahl { margin: 0 0 4px; padding: 0 8px; font-size: 12px; color: var(--text-leise) }
.hb-bereich {
  margin: 14px 0 2px; padding: 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-leise)
}
.hb-bereich:first-child { margin-top: 0 }
.hb-gruppe-block { margin: 0 }
.hb-gruppe-block.frei { margin-top: 14px }
.hb-gruppe {
  display: flex; align-items: center; gap: 6px; margin: 2px 0; padding: 5px 8px;
  border-radius: 8px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--text)
}
.hb-gruppe::-webkit-details-marker { display: none }
.hb-gruppe::before {
  content: ''; flex: 0 0 auto; width: 6px; height: 6px; margin-right: 2px;
  border-right: 1.5px solid var(--text-leise); border-bottom: 1.5px solid var(--text-leise);
  transform: rotate(-45deg); transition: transform .15s
}
.hb-gruppe-block[open] > .hb-gruppe::before { transform: rotate(45deg) }
.hb-gruppe:hover { background: var(--flaeche-hell) }
.hb-zahl { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--text-leise) }
.hb-gruppe-block > .hb-eintrag { margin-left: 14px; width: calc(100% - 14px) }
.hb-eintrag {
  position: relative; display: block; width: 100%; padding: 5px 8px; border: 0; border-radius: 8px;
  background: none; text-align: left; cursor: pointer; color: inherit; font: inherit
}
.hb-eintrag:hover { background: var(--flaeche-hell) }
.hb-eintrag.aktiv { background: var(--flaeche-hell); font-weight: 600 }
.hb-eintrag.aktiv::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--rot)
}
.hb-eintrag b { display: block; font-size: 13px; font-weight: inherit; line-height: 1.35 }
.handbuch-spalte { min-width: 0; max-width: 1100px; scroll-margin-top: 72px }
/* Breit steht die Sprungliste rechts neben der Seite und klebt oben; schmal
   steht sie über dem Titel - der Titel ist Teil des Server-HTML im article
   und lässt sich nicht davor stellen, ohne es zu verändern. */
@media (min-width: 1600px) {
  .handbuch-spalte {
    display: grid; grid-template-columns: minmax(0, 1100px) 240px; column-gap: 32px;
    max-width: none; align-items: start
  }
  .handbuch-spalte > * { grid-column: 1 }
  .handbuch-spalte > .hb-sprungliste {
    grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 72px;
    max-height: calc(100vh - 96px); overflow-y: auto
  }
  .hb-sprungliste button { display: block; margin: 0 0 4px }
}
.hb-krume { margin: 0 0 4px; font-size: 12px; color: var(--text-leise) }
.hb-sprungliste {
  margin: 0 0 16px; padding: 8px 12px; max-width: 76ch;
  border: 1px solid var(--rand); border-radius: 8px; font-size: 12.5px
}
.hb-sprungliste p { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise) }
.hb-sprungliste button {
  margin: 0 14px 2px 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--text); text-align: left
}
/* ⟨Bis 06.10.2026⟩ color: var(--blau). Seither wie a:hover der DRK-App. */
.hb-sprungliste button:hover { color: var(--rot-schrift); text-decoration: underline }
.hb-nachbarn {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--rand)
}
/* display: grid oben schlägt das hidden-Attribut; hier gilt es wieder. */
.hb-nachbarn[hidden] { display: none }
.hb-nachbarn button {
  padding: 8px 12px; border: 1px solid var(--rand); border-radius: 8px;
  background: none; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--text); text-align: left
}
.hb-nachbarn button:hover { background: var(--flaeche-hell) }
.hb-nachbarn button.weiter { grid-column: 2; text-align: right }
.hb-nachbarn small { display: block; font-size: 11.5px; color: var(--text-leise) }
/* Die Treffer einer Suche stehen an der Stelle der Seite: Solange sie
   dastehen, tritt alles andere in der Spalte zurück. */
.handbuch-spalte.suchend > :not(.hb-treffer) { display: none }
.hb-treffer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 90ch }
.hb-treffer button {
  display: block; width: 100%; padding: 8px 12px; border: 1px solid var(--rand); border-radius: 8px;
  background: none; cursor: pointer; font: inherit; color: var(--text); text-align: left
}
.hb-treffer button:hover { background: var(--flaeche-hell) }
.hb-treffer b { display: block; font-size: 13.5px }
.hb-treffer small { display: block; font-size: 11.5px; color: var(--text-leise) }
.hb-treffer span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--text-still) }
.hb-treffer mark {
  padding: 0 1px; border-radius: 2px; color: inherit;
  background: color-mix(in srgb, var(--gelb) 30%, transparent)
}
.handbuch-seite { min-width: 0 }
.handbuch-seite > :is(p, ul, ol, blockquote, h2, h3, h4, hr) { max-width: 76ch }
.hb-kopf { margin: 0 0 12px; font-size: 20px }
.hb-titel-2 {
  margin: 28px 0 8px; padding-bottom: 4px; font-size: 15px; font-weight: 700;
  border-bottom: 1px solid var(--rand); scroll-margin-top: 72px
}
.hb-titel-3 { margin: 18px 0 4px; font-size: 13.5px; font-weight: 600; color: var(--text-leise); scroll-margin-top: 72px }
.hb-absatz { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6 }
.hb-liste { margin: 0 0 10px; padding-left: 20px; font-size: 13.5px; line-height: 1.6 }
.hb-liste li { margin-bottom: 3px }
.hb-zitat {
  margin: 0 0 10px; padding: 6px 12px;
  border-left: 2px solid var(--rand-stark); background: var(--flaeche-hell);
  border-radius: 0 6px 6px 0
}
.hb-zitat > :last-child { margin-bottom: 0 }
/* Schreibmaschinenstellen im Handbuch (30.09.2026, Punkt 345). Im Kasten
   stand "( leitstelle , einsatz , lage )": code trägt dieselbe Fläche wie
   .hb-zitat, die Pille verschwand, und die 6 px Polster lasen sich als
   Leerzeichen vor Komma und Klammer. Im Kasten deshalb die Fläche der Karte,
   und im ganzen Handbuch das Polster des Platzes (px-1, app/handbuchsatz.tsx).
   Wächter: server-kit/src/schale.test.ts. */
.handbuch-seite code { padding: 0 4px }
.hb-zitat code { background: var(--flaeche) }
.hb-trenner { margin: 16px 0; border: 0; border-top: 1px solid var(--rand) }
.hb-tabelle { margin-bottom: 14px; overflow-x: auto; border: 1px solid var(--rand); border-radius: 8px }
.hb-tabelle table { width: 100%; border-collapse: collapse; font-size: 13px }
.hb-tabelle th {
  padding: 6px 12px; border-bottom: 1px solid var(--rand-stark);
  background: var(--flaeche-hell); text-align: left; font-weight: 600
}
.hb-tabelle td { padding: 6px 12px; border-top: 1px solid var(--rand); vertical-align: top }
.hb-verweis {
  padding: 0; border: 0; background: none; cursor: pointer; font: inherit;
  color: var(--blau); text-decoration: underline
}
.hb-verweis:hover { color: var(--rot-schrift) }

/* Umschalter zwischen zwei gleichrangigen Wegen - kein Menue, sondern eine
   Wahl, die beide Male zum selben Ziel fuehrt. */
.reiter { display: flex; gap: 2px; margin-bottom: 14px;
          background: var(--flaeche-hell); border: 1px solid var(--rand);
          border-radius: 10px; padding: 3px; }
.reiter button { flex: 1; border: 0; background: transparent; color: var(--text-still);
                 font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 8px;
                 cursor: pointer; }
.reiter button:hover { color: var(--text); }
.reiter button.aktiv { background: var(--flaeche); color: var(--text);
                       font-weight: 600; box-shadow: 0 1px 3px rgba(0, 30, 60, .12); }

dialog {
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--rand); border-radius: 16px;
  padding: 22px; max-width: 760px; width: calc(100% - 32px);
  box-shadow: var(--schatten-hoch);
}
dialog h1 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
/* ⟨Bis 05.10.2026⟩ rgba(2, 6, 23, .55) - Schiefer; seither Marineblau. */
dialog::backdrop { background: rgba(0, 22, 41, .55); }

/*
 * ===========================================================================
 * **Kleine Bausteine statt Inline-Stil** (30.09.2026, Aufräumen des
 * Hosterportals).
 * ===========================================================================
 *
 * Nur Ergänzungen - keine Regel darüber ist umgedeutet. Jede stand vorher als
 * style-Attribut an vielen Stellen des Terminals (237 Stück), meist mit leicht
 * verschiedenen Werten für dieselbe Absicht.
 *
 *   .dehnen          Schiebt, was danach kommt, an den rechten Rand einer
 *                    knopfreihe. Stand fünfmal im Terminal ohne Regel - die
 *                    gab es nur in stil.ts der Vertriebsseite.
 *   .betrag          Beträge und Zählspalten rechtsbündig und mit Ziffern
 *                    gleicher Breite, damit Stellen untereinander stehen.
 *   .knopfreihe.ende Knöpfe eines Formulars rechts, die Hauptaktion zuletzt.
 *   .karte-kopf > h  Die Überschrift im Kopf trägt keinen eigenen Abstand; den
 *                    setzt der Kopf. An der Serverkonsole stand dafür an jeder
 *                    Stelle style="margin:0" - dort ändert sich also nichts.
 *   .haken           Kästchen und Satz nebeneinander statt untereinander.
 *   span.still       Gedämpfter Text in gewöhnlicher Grösse (Tabellenzelle
 *                    "keiner", "kein Betrag"). Mit span davor, weil tr.still
 *                    eine andere Bedeutung hat (ganze Zeile blass).
 *   .balken          Ein Fortschrittsbalken; die Breite des Füllstands bleibt
 *                    am Element, sie ist der Wert.
 */
.dehnen { flex: 1; }
td.betrag, th.betrag { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.knopfreihe.ende { justify-content: flex-end; }
.karte-kopf > h1, .karte-kopf > h2 { margin: 0; }
.haken {
  flex-direction: row; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text); cursor: pointer;
}
span.still { color: var(--text-still); }
/* ⟨Bis 06.10.2026⟩ Füllstand var(--blau) auf 20 % --text-still. Seither
   .bar der DRK-App: rot auf --flaeche-hell. */
.balken {
  height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--flaeche-hell);
}
.balken > span { display: block; height: 100%; background: var(--rot); }