/* Einsatzdoku — Stylesheet
===========================================================================
Neu geschrieben in P3 (Oberflächen-Redesign, mobil-first). Die Vorgängerin
war über zwanzig Fassungen gewachsen: 1 468 Zeilen, 78 Hexwerte außerhalb
von :root, 21 verschiedene Schriftgrößen, die Kopfhöhe fünfmal als 50px
fest verdrahtet, sechs Schaltflächenvarianten und zwei Graufamilien
nebeneinander. Sie war nicht schlecht gepflegt — sie hatte nur nie eine
Stelle, an der ein Wert **einmal** steht.
DIE DREI EBENEN (Konzept P3, E-P3-06):
Token Jeder Wert — Farbe, Größe, Abstand, Maß — steht in :root und
nirgends sonst. Wer eine Farbe ändern will, ändert sie hier.
Bausteine Benannte Klassen mit Skelett in ui.php, von PHP **und** von
den JS-Erzeugern verwendet. Eine Karte sieht überall gleich
aus, weil es nur eine Karte gibt.
Regel Eine neue Seite setzt vorhandene Bausteine zusammen und
definiert nichts Eigenes. Ein neuer Baustein wird vorher
beschrieben, vorgelegt, freigegeben und in docs/Design.md
aufgenommen.
MOBIL-FIRST heißt hier wörtlich: Was ohne Media-Abfrage dasteht, gilt für
das Handy. Die Abfragen bauen nach oben aus (min-width), nie nach unten
ab. Das ist der Grund, warum die Datei überhaupt neu entstanden ist — die
alte war für den Desktop geschrieben und nahm für schmale Geräte Regeln
zurück, weshalb unter 720 px anderthalb Bildschirme Seitenleiste vor dem
Inhalt standen.
GLIEDERUNG. Die Abschnittsnummern stehen auch in docs/Design.md.
1 Schriften (@font-face, unverändert aus dem Bestand)
2 Token (:root — alle Werte, sonst keiner)
3 Grundlagen (Reset, Körper, Typografie, Fokus, Symbole)
Die Bausteine folgen in Abschnitt 4 ff. — sie entstehen in Arbeitspaket O2.
Bis dahin ist diese Datei bewusst unvollständig: O1 legt das Fundament,
O2 setzt die Bausteine darauf. Ein Zwischenstand, in dem die Anwendung roh
aussieht, ist eingeplant (Konzept, O2 Punkt 6).
PRÜFMITTEL. tools/vollstaendigkeit/ liest diese Datei und meldet jeden
Hexwert, jede Schriftgröße und jedes Pixelmaß außerhalb von :root, dazu
jede Klasse des alten Stylesheets, die weder eine neue Regel noch einen
Eintrag auf der Streichliste hat. Der Stilvergleich (tools/stilvergleich/)
ruht während P3 und wird in O12 neu geeicht.
*/
/* == 1. SCHRIFTEN ==========================================================
*
* Wortgleich aus dem Bestand übernommen — an den Schriften ändert P3 nichts.
*
* Beide Schriften werden SELBST AUSGELIEFERT (assets/fonts/, Backlog Nr. 12).
* Vorher kamen sie per @import von Google; das meldete bei jedem Seitenaufruf
* die IP-Adresse der NutzerIn an Google — in einer Anwendung, deren ganzer
* Zweck darin besteht, dass Patientendaten den Browser nicht unverschlüsselt
* verlassen, war das ein Bruch in der Linie.
*
* Herkunft: npm-Pakete @fontsource/bricolage-grotesque 5.3.0 und
* @fontsource/open-sans 5.3.0 (beide OFL-1.1), Unterverzeichnis files/.
* Übernommen wurden ausschließlich die tatsächlich benutzten Schnitte:
* Bricolage 500/600, Open Sans 400/600/700 — je in den Subsets latin und
* latin-ext. Wer einen weiteren Schnitt braucht, legt die Datei dazu UND
* trägt sie hier ein; ohne @font-face nutzt die Datei nichts.
*
* unicode-range trennt die beiden Subsets: latin-ext wird nur geladen, wenn
* ein Zeichen daraus tatsächlich vorkommt (z. B. in osteuropäischen Namen).
* font-display:swap zeigt sofort die Ersatzschrift und tauscht danach.
*/
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500;
font-display:swap;src:url(fonts/bricolage-grotesque-latin-500-normal.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500;
font-display:swap;src:url(fonts/bricolage-grotesque-latin-ext-500-normal.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;
font-display:swap;src:url(fonts/bricolage-grotesque-latin-600-normal.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;
font-display:swap;src:url(fonts/bricolage-grotesque-latin-ext-600-normal.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;
font-display:swap;src:url(fonts/open-sans-latin-400-normal.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
U+FEFF,U+FFFD}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;
font-display:swap;src:url(fonts/open-sans-latin-ext-400-normal.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;
font-display:swap;src:url(fonts/open-sans-latin-600-normal.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
U+FEFF,U+FFFD}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;
font-display:swap;src:url(fonts/open-sans-latin-ext-600-normal.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;
font-display:swap;src:url(fonts/open-sans-latin-700-normal.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
U+FEFF,U+FFFD}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;
font-display:swap;src:url(fonts/open-sans-latin-ext-700-normal.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* == 2. TOKEN ==============================================================
*
* Hier steht jeder Wert der Oberfläche — und nur hier. Die
* Vollständigkeitsprüfung meldet jeden Hexwert, jede Schriftgröße und jedes
* Pixelmaß, das außerhalb dieses Blocks steht.
*
* FARBROLLEN (E-P3-15). Die Farbe sagt, worum es geht:
*
* Orange Handeln und „hier bin ich" — Primärknopf, aktiver
* Menüpunkt, Anlegen-Wege, Vorbelegungsstern, aktive Kachel,
* Zeilenhervorhebung.
* Rot Aufmerksamkeit — Löschen, Fehler, offene Zuordnung,
* unvollständiger Einsatz, Fehleinsatz.
* Blau Auswählen und Erklären — Textlinks, Sortierpfeil, gewählte
* Filter, Fokusring, Hinweis, Vollzug.
* Dunkelblau Struktur — Kopfleiste, Überschriften, Häkchen, Symbole,
* Tabellenkopf.
* Sand/Grau Mechanik — Winkel, Trennlinien, inaktive Symbole.
*
* Grün und Gelb gibt es nicht mehr. Beide waren markenfremd: Grün trug die
* Vollzugsmeldung und die Passwortstärke, Gelb den Knopf „Bearbeiten" in den
* Stammdaten — dieselbe Handlung, die anderswo orange war. Vollzug ist jetzt
* Blau mit Haken (E-P3-16), „Bearbeiten" der neutrale Rahmenknopf.
*
* JE FARBE EIN TIEF UND EIN HELL. Das „Tief" ist die Schriftfassung und
* erreicht auf Schnee die Kontrastschwelle; das „Hell" ist die Fläche. Die
* Marke selbst (Orange FF8F1F, Blau 4280E5, Rot D63338) ist Fläche und
* Strich, nicht Schrift.
*
* NACHGERECHNETE KONTRASTE (gegen Schnee FFFCFA, WCAG 2.1):
*
* Asphalt 19,29:1 Dunkelblau auf Orange 5,97:1 Primärknopf
* Dunkelblau 13,33:1 Weiß auf Dunkelblau 13,62:1 Kopfleiste
* Gedämpft 5,66:1 Blau als Strich/Fokus 3,77:1
* Blau tief 7,82:1 Orange als Fläche 2,23:1 nie Schrift
* Rot tief 7,58:1 Rot D63338 4,68:1
* Orange tief 4,32:1 — nur ab 14 px fett oder 18 px (Schwelle 3:1)
*
* Drei Werte weichen von Anlage G des Konzepts ab, alle nach oben (Asphalt
* 19,3 statt 17,5; Blau tief 7,8 statt 7,2; Rot tief 7,6 statt 7,1; Primärknopf
* 6,0 statt 5,4). Die Rechnung steht in tools/screenshots/kontrast.py und
* läuft bei jedem Screenshot-Lauf mit; die Tabelle in docs/Design.md wird
* daraus erzeugt, nicht abgeschrieben.
*/
:root{
/* ---- Flächen ---------------------------------------------------------
* Schnee ist die Karte, Rauch die Seite darunter, Sand die Mechanik.
* Weiß (#FFF) ist KEIN Token: In der Marke ist Weiß nur Logo- und
* Schriftfarbe auf Dunkel. Im alten Stylesheet stand es vierzehnmal als
* Fläche — das ist der Grund, warum die Oberfläche stellenweise kalt
* wirkte, während der Rest warm war. */
--schnee:#FFFCFA;
--rauch:#F7F5ED;
--sand:#D4C7AD;
/* ---- Schrift ---------------------------------------------------------
* Gedämpft ist die EINZIGE Graustufe. Der Bestand hatte daneben eine
* zweite, kühle Familie (5B5F66, 9AA0A6, 8A96A8, C6CEDB …) — zwei
* Grauwelten in einer Oberfläche. Sie ist ersatzlos fort. */
--asphalt:#1A0500;
--dunkelblau:#1A2E4D;
--gedaempft:#6E6459;
--auf-dunkel:#FFFFFF; /* Schrift auf Dunkelblau, 13,62:1 */
/* ---- Linien ----------------------------------------------------------
* ZWEI Linien, und der Unterschied ist keine Geschmacksfrage:
*
* --linie aufgehelltes Sand, 1,36:1. Trennt, schmückt, umrandet
* Karten. Rein zeichnerisch — WCAG 1.4.11 nimmt
* dekorative Trenner ausdrücklich aus.
* --linie-stark begrenzt BEDIENELEMENTE: Eingabefeld, neutraler Knopf,
* Segmentwahl, Kästchen. Dort ist der Rand die einzige
* Auskunft darüber, wo das Element anfängt und aufhört,
* und dafür verlangt WCAG 3:1. Gedämpft erreicht 5,66:1
* und ist ohnehin schon Token — ein neuer Farbwert war
* dafür nicht nötig.
*
* Das ist der Fund F-P3-K: Anlage G führt für Ränder 3:1, nennt aber nur
* Farben, die darunter liegen. Ohne die Trennung hätte jedes Eingabefeld
* einen Rand von 1,4:1 — sichtbar für gute Augen, unsichtbar für andere. */
--linie:#E3DAC6;
--linie-stark:var(--gedaempft);
/* ---- Orange — Handeln ------------------------------------------------ */
--orange:#FF8F1F;
--orange-tief:#C25A00;
--orange-hell:#FFEBD6;
/* ---- Blau — Auswählen und Erklären ----------------------------------- */
--blau:#4280E5;
--blau-tief:#1F4E9C;
--blau-hell:#D9ECFD;
/* ---- Rot — Aufmerksamkeit -------------------------------------------- */
--rot:#D63338;
--rot-tief:#9E2226;
--rosa:#FCE2D6;
/* ---- Primärknopf -----------------------------------------------------
* Die eine Stelle, an der die Kontrastfrage entschieden wurde: Weiß auf
* Orange sind 2,3:1 und damit unlesbar; Dunkelblau auf Orange sind 5,97:1.
* Der Knopf trägt deshalb dunkelblaue Schrift (E-P3-15). Die Mockups
* zeigen an dieser Stelle Weiß — der Entscheidungstext gilt, nicht die
* Skizze (Konzept 3, Vorbemerkung). */
--knopf-primaer-flaeche:var(--orange);
--knopf-primaer-schrift:var(--dunkelblau);
/* ---- Schriftfamilien -------------------------------------------------
* Die Ersatzlisten sind NORMAL BREIT. Hier stand einmal 'Arial Narrow' an
* zweiter Stelle; kam die Webschrift nicht durch, wurde die ganze
* Oberfläche gedrungen, und es sah nach einem Gestaltungsfehler aus statt
* nach einem fehlgeschlagenen Download. */
--schrift-kopf:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',
Roboto,'Helvetica Neue',Arial,sans-serif;
--schrift-text:'Open Sans',system-ui,'Segoe UI',Roboto,
'Helvetica Neue',Arial,sans-serif;
/* Schreibmaschinenschrift nur, wo sie die Aussage IST: Kopplungscode
* (seit Web 13.1.0 im Eingabefeld, .feld-fest — er wird abgetippt, nicht
* angezeigt), Wiederherstellungsschlüssel, Rechtstext-Editor. */
--schrift-fest:ui-monospace,'SF Mono','Cascadia Mono','JetBrains Mono',
Consolas,monospace;
/* ---- Schriftskala ----------------------------------------------------
* Major Third (1,25) um die Grundgröße 15/16 px. Der Bestand hatte 21
* verschiedene Größen und damit keine Skala, sondern eine Sammlung.
*
* 1 12 Kleinzeile, Plakette, Tabellenfuß
* 2 13 Kleinzeile groß, Beschriftung, Meta
* 3 15 Grundgröße der Oberfläche
* 4 16 Fließtext (Lesespalte, Rechtstexte) — 15 × 1,067
* 5 19 Kartentitel, Abschnittskopf — 15 × 1,25
* 6 24 Seitentitel klein, Kennzahl — 19 × 1,25
* titel Seitentitel: 28 mobil, 30 ab 720 — 24 × 1,25
*
* Der Seitentitel hat einen eigenen Namen statt --groesse-7, weil er als
* einziger von der Fensterbreite abhängt. Das Konzept nennt in 5.2 sechs
* Namen und sieben Werte; das ist die Auflösung (Fund F-P3-I). */
--groesse-1:12px;
--groesse-2:13px;
--groesse-3:15px;
--groesse-4:16px;
--groesse-5:19px;
--groesse-6:24px;
--groesse-titel:28px;
--zeile-eng:1.3; /* Titel, Kacheln */
--zeile:1.55; /* Oberfläche */
--zeile-lesen:1.6; /* Fließtext in der Lesespalte */
/* ---- Abstände --------------------------------------------------------
* Fünf Stufen, Vierer-Raster. Mehr braucht es nicht; weniger hätte den
* Bestand nicht abgebildet. */
--abstand-1:4px;
--abstand-2:8px;
--abstand-3:12px;
--abstand-4:16px;
--abstand-5:24px;
/* ---- Radien ----------------------------------------------------------- */
--radius-klein:6px; /* Plakette, Kästchen, Eingabefeld */
--radius:10px; /* Knopf, Meldung */
--radius-gross:12px; /* Karte, Blatt, Dialog */
/* ---- Maße -------------------------------------------------------------
* --kopf ist die Kopfhöhe und steht GENAU HIER. Im Bestand stand sie
* fünfmal als 50px im Stylesheet (.layout min-height, .daylist top und
* height, .filterspalte top und height) — und weil die tatsächliche Höhe
* vom Umbruch des Markentexts abhing und das Demo-Banner sie zusätzlich
* verschob, rutschte im Demo-Konto die Leiste unter der Kopfleiste hervor.
* Das ist Fund F-P3-G; er ist mit diesem einen Token erledigt.
*
* --knopf ist 44 px, für JEDEN Knopf, mobil wie Desktop, auch für
* Zeilenaktionen. Es gibt keine Kompaktvariante: Was kleiner ist, ist kein
* Knopf, sondern ein Link mit Symbol (E-P3-22). */
--kopf:56px;
--knopf:44px;
--leiste:260px; /* Seitenleiste ab 1200 */
--leiste-schmal:220px; /* Seitenleiste 1024–1199 */
--leiste-filter:280px; /* Filterleiste der Suche ab 1200 */
--leiste-filter-schmal:240px; /* Filterleiste 1024–1199 */
--rahmen:1680px; /* Leiste und Inhalt als Einheit */
--lesespalte:760px; /* Fließtext */
--schublade:320px; /* Höchstbreite der mobilen Schublade */
--blatt-zeile:50px; /* Zeilenhöhe im Aktionsblatt */
--unterpunkt:28px; /* Sprungmarke unter dem Menüpunkt */
--listensuche-breit:36rem; /* Höchstbreite des Suchfelds einer Liste */
--uebersicht-spalte:240px; /* schmalste Spalte der Einstellungs-Übersicht */
--suchfeld:48px; /* das große Suchfeld */
--symbol-klein:16px; /* Zusatzzeichen an einer Beschriftung */
/* Drei abgeleitete Symbolmasse aus der Mockup-Runde 9c (AP2, Nr. 42). Die
* Skala ist geschlossen (`CLAUDE.md` 5), deshalb stehen sie als RECHNUNG da,
* und die Rechnung ist ihre Herkunft:
* --symbol-winzig 12 px = --symbol-klein (16) minus --abstand-1 (4). So
* gross wie das Malzeichen, das es ersetzt (E-MR-14): Der 16-px-Vorschlag
* war „zu gross, zu dicht" und ist verworfen.
* --ziel-chip 28 px = --symbol-gross (24) plus --abstand-1 (4). Das
* TREFFZIEL um dieses Symbol, freigegeben als F-MR-6b. Es ist groesser
* als das der Filter-Plakette (20 px, .plakette-weg) — mit Absicht: Der
* Chip steht in einem Formular, die Plakette in einer Leiste, und ein
* Fehlgriff kostet hier einen Wert.
* --symbol-text 1em = so gross wie die Schrift, in der es steht. Das
* Warnzeichen im Satz einer Meldung waechst mit ihr (E-MR-10). */
--symbol-winzig:calc(var(--symbol-klein) - var(--abstand-1)); /* 12 px, im Chip */
--ziel-chip:calc(var(--symbol-gross) + var(--abstand-1)); /* 28 px, Treffziel */
--symbol-text:1em; /* Symbol im Fliesstext */
--symbol:20px; /* Symbolgröße in der Zeile */
--symbol-gross:24px; /* Symbolgröße im Knopf und Kartenkopf */
--strich:1px; /* Haarlinie */
--strich-stark:2px; /* Aktivstrich, Randstrich, Fokus */
--radius-rund:999px; /* Zähler, Griff, Punkt — voll rund */
--schalter-breit:46px; /* der Schalter aus E-P3-28 … */
--schalter-hoch:26px; /* … 26 hoch, damit er in eine */
--schalter-punkt:20px; /* 44-px-Zeile passt und greifbar bleibt */
--geo-kreis:28px; /* Einsatzort-Kreis auf der Karte */
--geo-schild:30px; /* Kästchen für Standort und Zielklinik */
--geo-ring:3px; /* Randstärke des Farbrands Start/Ende */
/* Zwei abgeleitete Maße aus M-S9-01 V1 (S9/AP3). Die Skala ist geschlossen
* (`CLAUDE.md` 5), deshalb stehen sie nicht als neue Stufen da, sondern als
* Rechnung — und die Rechnung IST ihre Herkunft:
* Ringpunkt 14 px = --abstand-4 (16) minus --strich-stark (2). Er ist der
* Ring ohne Schild und soll um genau eine Randstärke kleiner sein als
* das Rasterfeld, in dem er bisher saß.
* Symbol im Schild 18 px = --symbol (20) minus --strich-stark (2). Der
* Kasten schrumpft um 6 px; das Symbol gibt eine Randstärke ab, damit
* der Weißraum um es herum nicht auf null fällt.
* Das Symbol IM KREIS bekommt kein eigenes Maß — es ist --symbol-klein. */
--geo-ringpunkt:calc(var(--abstand-4) - var(--strich-stark)); /* Ring ohne Schild (14 px) */
--geo-symbol:calc(var(--symbol) - var(--strich-stark)); /* Symbol im Kartenschild (18 px) */
/* Speicherbalken (E-S8-18, Web 15.1.0). Zwei Maße, beide abgeleitet:
* 8 px ist --abstand-2, also eine Stufe des Vierer-Rasters — ein Balken,
* der eine Zeile Grafik ist und keine Fläche; 10 px ist --radius, die
* kleinste Rundung, und ergibt einen Punkt, der neben 13-px-Text
* (--groesse-2) lesbar ist, ohne ihn zu überragen. */
--balken:8px; /* Höhe des Speicherbalkens */
--logo-kachel:var(--kopf); /* Vorschau-Kachel der Installation … */
--balken-punkt:10px; /* Farbpunkt in seiner Legende */
--anmeldekarte:400px; /* Karte der Anmeldung (E-P3-38) */
--zeile-frei:1.4em; /* Mindesthöhe der Zustandszeile */
--balken-glied:28px; /* ein Segment des Passwortstärke- … */
--strich-balken:6px; /* … balkens, vier davon (E-P3-16) */
--karte-neben-breit:400px; /* Kartenspalte ab 1600 px (E-P3-31) */
/* ---- Karte (Leaflet) --------------------------------------------------- */
--karte-mobil:160px;
--karte-tablet:220px;
--karte-desktop:300px;
/* DIE DRITTE GROESSE (Backlog Nr. 45, M-MR-03, F-MR-7). Zwischen 300 px und
* Vollbild lag nichts: Wer mehr von der Spur sehen wollte, musste die Seite
* verlassen. `min()` statt einer festen Zahl, und beide Haelften haben einen
* Grund — 60vh laesst auf jedem Geraet ein Drittel des Glases fuer die
* Liste darunter uebrig, 520 px deckelt das auf einem hohen Schreibtisch-
* bildschirm, wo 60vh sonst 800 px waeren und die Liste aus dem Bild
* schoebe. Freigegeben am 14.09.2026. */
--karte-gross:min(60vh, 520px);
/* ---- Spurfarben (P3/O3, E-P3-40) --------------------------------------
* Acht Farben für die Einsätze eines Tages, in Vergabereihenfolge. Bis
* Web 9.1.1 stand die Liste als COLORS-Array in index.php und enthielt
* fünf markenfremde Werte (F-P3-H). Jetzt: die drei Markenfarben,
* Dunkelblau und vier ABGELEITETE Töne — jede Ableitung mit Herkunft:
* spur-5..7 die Tief-Töne der drei Markenfarben (stehen oben bereits
* als Schrifttöne; hier tragen sie Fläche auf der Karte)
* spur-8 Sand, von L 75 % auf 40 % abgedunkelt (4,6:1 auf Schnee)
* Die Ruhespur ist Mechanik, keine Botschaft — sie fährt gedämpft.
* JavaScript liest die Werte über getComputedStyle; eine zweite Liste im
* Code gibt es nicht mehr. */
--spur-1:var(--orange);
--spur-2:var(--blau);
--spur-3:var(--rot);
--spur-4:var(--dunkelblau);
--spur-5:var(--orange-tief);
--spur-6:var(--blau-tief);
--spur-7:var(--rot-tief);
--spur-8:#867146;
--spur-ruhe:var(--gedaempft);
/* ---- Schwellen ---------------------------------------------------------
* Diese vier Werte stehen hier zur AUSKUNFT — für JavaScript, für
* docs/Design.md und für den, der die Datei liest. In @media-Abfragen
* lassen sich Custom Properties nicht verwenden; dort stehen dieselben
* Zahlen als Literale, und zwar ausschließlich dort. Die
* Vollständigkeitsprüfung sieht Media-Präludien nicht an.
*
* 720 Handy → Tablet hoch: Kachel wird Tabelle
* 1024 Schublade → feste Leiste, Hauptpunkte in der Kopfleiste
* 1200 Zweispalter: Einsatzansicht, Formularkarten, Kontoseite
* 1600 Karte neben Diensttag-Daten und Tabelle
*/
--s-handy:720px;
--s-leiste:1024px;
--s-zwei:1200px;
--s-karte-neben:1600px;
/* ---- Bewegung ----------------------------------------------------------
* Kurz und einheitlich. Wer Bewegung abbestellt hat, bekommt keine
* (Abschnitt 3).
*
* SEIT WEB 19.6.0 SIND ES 240 ms, VORHER 180 (E-MR-22). Anlass war das
* Aktionsblatt: Bei 180 ms war die Auffahrt aus der unteren Bildkante
* eher ein Aufblitzen als eine Bewegung, und eine Bewegung, die man
* nicht sieht, erklaert auch nichts. Der Wert gilt fuer ALLE Nutzer des
* Tokens — Schublade und Schleier, Akkordeon-Winkel, Winkel am
* „Aktionen"-Knopf, Schalter-Griff, Kennzahlen-Winkel und das Blatt.
* Ein zweites Token nur fuers Blatt waere die Stelle, an der die
* Anwendung anfaengt, verschieden schnell zu sein. */
--dauer:.24s;
--schleier:rgba(26,46,77,.55); /* Dunkelblau, halbdurchsichtig */
--schatten:0 2px 8px rgba(26,5,0,.10);
--schatten-hoch:0 8px 28px rgba(26,5,0,.22);
/* Auf der dunklen Kopfleiste: eine gedämpfte Fassung von Weiß für Hover
* und Nebenangaben. Ein eigener Hexwert wäre hier falsch — die Fläche
* darunter ist Dunkelblau, und der Ton soll mit ihr zusammen entstehen. */
--auf-dunkel-leise:rgba(255,255,255,.55);
--auf-dunkel-flaeche:rgba(255,255,255,.14);
--auf-dunkel-strich:rgba(255,255,255,.35);
}
@media (min-width:720px){
:root{ --groesse-titel:30px; }
}
/* ---- Die zweite Bedienhöhe: 36 px am Zeigergerät (E-S8-09, R76) ----------
*
* 44 px BLEIBT DIE VORGABE, und sie gilt überall dort, wo ein Finger tippt.
* Die Zahl kommt aus WCAG 2.5.8 (Zielgröße mindestens 24 × 24 px) und aus
* den Plattformvorgaben, die 44 beziehungsweise 48 nennen — sie ist für die
* Fingerkuppe gerechnet, nicht für den Mauszeiger.
*
* WARUM ES AM SCHREIBTISCH ZU VIEL IST. Ein Zeiger trifft ein 36 px hohes
* Ziel genauso sicher wie ein 44 px hohes; was er nicht hat, ist die
* Ungenauigkeit, für die die acht Pixel da sind. Bezahlt werden sie in
* Formularhöhe: Das Einsatzformular hat über dreissig Felder, und acht Pixel
* je Zeile sind dort eine Bildschirmhöhe. Wer am Schreibtisch dokumentiert,
* rollt sie bei jedem Einsatz.
*
* DREI BEDINGUNGEN, UND ALLE DREI MÜSSEN GELTEN:
*
* hover: hover das Gerät kann zeigen, ohne zu drücken
* pointer: fine das primäre Zeigegerät ist genau (Maus, Trackpad, Stift)
* min-width 1024 und es ist der Schreibtisch, nicht ein grosses Tablet
*
* Die Breite allein genügt NICHT: Ein Touch-Laptop mit 1920 px ist ein
* Fingergerät, und ein iPad im Querformat meldet 1024 px. Umgekehrt genügen
* die Medienmerkmale allein auch nicht — ein Zeiger an einem schmalen Fenster
* bekommt weiterhin die grosse Höhe, weil dort die Zeilen ohnehin knapp sind.
*
* WAS SICH NICHT ÄNDERT, weil es eigene Token hat: die Kopfleiste
* (`--kopf`, 56), der Schalter (`--schalter-*`), die Zeile des Aktionsblatts
* (`--blatt-zeile`, 50 — sie gilt nur unter 1024 px), das grosse Suchfeld
* (`--suchfeld`, 48) und die Sprungmarke unter dem Menüpunkt
* (`--unterpunkt`, 28). */
@media (hover: hover) and (pointer: fine) and (min-width:1024px){
:root{ --knopf:36px; }
}
/* == 3. GRUNDLAGEN =========================================================
*
* Was hier steht, gilt für die ganze Anwendung und hängt an keinem Baustein:
* Reset, Körper, Typografie, Fokus, Symbole, Bewegung. Alles Weitere sind
* Bausteine und steht ab Abschnitt 4 (Arbeitspaket O2).
*/
*,*::before,*::after{box-sizing:border-box}
/* hidden gewinnt IMMER — auch gegen Bausteine mit eigenem display (flex,
* grid). Ohne diese Regel überstimmt jede display-Angabe das Attribut, und
* JS-Umschalter zeigen Lese- und Formularzustand gleichzeitig (Fund aus O3
* am Diensttag-Umschalter). */
[hidden]{display:none !important}
/* Innenabstände und Ränder der Standardelemente auf null. Was Abstand
* braucht, bekommt ihn vom Baustein — nicht vom Browser. */
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol,fieldset,legend{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
html{
/* Beim Sprung zu einem Anker nicht unter die klebende Kopfleiste rutschen. */
scroll-padding-top:calc(var(--kopf) + var(--abstand-4));
-webkit-text-size-adjust:100%;
}
body{
background:var(--rauch);
color:var(--asphalt);
font-family:var(--schrift-text);
font-size:var(--groesse-3);
line-height:var(--zeile);
/* Der Rahmen ist zentriert (E-P3-12); die Kopfleiste bleibt voll breit und
* setzt ihr Inneres selbst auf dasselbe Raster. */
min-height:100vh;
min-height:100dvh;
}
/* ---- Überschriften -------------------------------------------------------
*
* Bricolage 600 für alles, was Titel ist. GESPERRTE VERSALIEN gibt es nur
* noch für Abschnittsköpfe in den Leisten („Diensttage", „Filter",
* „Administration") — im Bestand trugen sie acht Regeln, darunter jeder
* Tabellenkopf, jede Legende und jeder Feldname. Auf 360 px war das die
* teuerste Zeile der Anwendung.
*
* Nebenbei erledigt sich damit Fund F-P3-A: `.metanotes` erbte Versalien und
* Sperrung vom umgebenden `summary` und setzte sie nicht zurück, sodass die
* Notiz „Wetter: Nebel bis 9 Uhr" als gesperrte Versalzeile erschien. Wenn
* das `summary` selbst keine Versalien mehr trägt, gibt es nichts mehr zu
* erben. */
h1,h2,h3,h4{
font-family:var(--schrift-kopf);
font-weight:600;
line-height:var(--zeile-eng);
color:var(--dunkelblau);
text-wrap:balance;
}
h1{font-size:var(--groesse-titel)}
h2{font-size:var(--groesse-6)}
h3{font-size:var(--groesse-5)}
h4{font-size:var(--groesse-4)}
p{margin:0}
/* ---- Zahlen --------------------------------------------------------------
*
* Tabellarische Ziffern überall, wo Zahlen untereinanderstehen. Open Sans
* kann das über 'tnum' und hat dabei — anders als jede Schreibmaschinenschrift
* auf dem Markt — eine GLATTE NULL. Die durchgestrichene Null der
* Monospace-Familien sah in einer Uhrzeit aus wie ein Sonderzeichen; das war
* der Grund, diese Familie in Web 7.0.0 aus den Tabellen zu nehmen. */
.zahl,td,th,time,output{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
/* ---- Links ---------------------------------------------------------------
*
* Blau ist „Auswählen und Erklären". Textlinks tragen es; sie sind nicht
* unterstrichen, solange sie in einer Zeile mit anderer Auszeichnung stehen,
* aber im Fließtext schon — dort ist die Farbe allein zu wenig. */
a{color:var(--blau-tief);text-decoration:none}
a:hover{text-decoration:underline}
/* ---- Formularelemente erben die Schrift ----------------------------------
* Ohne das nehmen sie die des Betriebssystems, und die Seite hat plötzlich
* zwei Schriften. */
input,select,textarea,button{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
img,svg,video{max-width:100%;height:auto}
/* ---- Fokus ---------------------------------------------------------------
*
* EIN Fokusring für die ganze Anwendung, in Blau, außen liegend. :focus-visible
* statt :focus — der Ring erscheint bei Tastaturbedienung, nicht bei jedem
* Mausklick auf einen Knopf.
*
* outline-offset ist wichtig: Ohne ihn verschwindet der Ring bei Elementen
* mit eigenem Rand in dessen Farbe. */
:focus{outline:none}
:focus-visible{
outline:var(--strich-stark) solid var(--blau);
outline-offset:var(--strich-stark);
border-radius:var(--radius-klein);
}
/* Textauswahl in der Markenfarbe statt im Systemblau. */
::selection{background:var(--orange-hell);color:var(--asphalt)}
/* ---- Symbole -------------------------------------------------------------
*
* Jedes Zeichen der Oberfläche liegt als eigene Datei unter
* assets/images/symbole/ und wird per Verweis eingebunden:
*
*
*
* WARUM DIE STRICHATTRIBUTE HIER STEHEN und nicht in der Datei: Der Verweis
* holt das — nicht das