/* 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 */
--suchfeld:48px; /* das große Suchfeld */
--symbol-klein:16px; /* Zusatzzeichen an einer Beschriftung */
--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:32px; /* Einsatzort-Kreis auf der Karte */
--geo-schild:36px; /* Kästchen für Standort und Zielklinik */
--geo-ring:3px; /* Ringstärke Start/Ende am Schild */
--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;
/* ---- 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). */
--dauer:.18s;
--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; }
}
/* == 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:
*
* — nicht das darum. Die Attribute fill="none",
* stroke="currentColor" und stroke-width="2" stehen in der Datei aber am
* , damit sie sich auch einzeln öffnen und ansehen lässt. Beim Verweis
* sind sie deshalb nicht dabei, und ohne Ersatz malte der Browser schwarze
* Klumpen statt Strichzeichnungen. Alle fünf Eigenschaften sind vererbbar
* und fließen vom Wirts- über das in den geklonten Baum.
*
* currentColor heißt: Das Symbol nimmt die Schriftfarbe seiner Umgebung an.
* Ein Symbol in einem roten Knopf ist rot, ohne dass irgendwo eine zweite
* Regel stünde. */
.symbol{
width:var(--symbol);height:var(--symbol);
flex:0 0 auto;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
vertical-align:middle;
}
.symbol-gross{width:var(--symbol-gross);height:var(--symbol-gross)}
/* Der Winkel liegt EINMAL vor (winkel.svg, zeigt nach unten) und wird
* gedreht — statt vier Dateien für vier Richtungen. */
.symbol-links{transform:rotate(90deg)}
.symbol-rechts{transform:rotate(-90deg)}
.symbol-oben{transform:rotate(180deg)}
/* Der Stern wird gefüllt, wenn die Vorbelegung gesetzt ist. Dasselbe Zeichen,
* zwei Zustände — kein zweites Symbol. */
.symbol-gefuellt{fill:currentColor}
/* Das Schloss an der Beschriftung eines verschlüsselten Feldes (F-N1-B). Es
* steht NEBEN dem Wort, nicht davor: Die Beschriftung ist die Auskunft, das
* Zeichen der Zusatz. Kleiner als ein gewöhnliches Symbol und in der Farbe
* der Beschriftung — es soll gefunden werden, wenn man danach sucht, und
* nicht auffallen, wenn man es nicht tut. */
/* SENKRECHT MITTIG ZUM TEXT (S3/AP6) — und der Wert ist gemessen, nicht
* geraten. Das Schloss ist mit 16 px hoeher als die Versalhoehe des
* 15-px-Wortes daneben; `baseline` stellt seinen Kasten auf die Schriftlinie
* und schiebt es damit nach oben, `middle` (und ebenso `text-bottom` und
* `sub`) um denselben Betrag nach unten. Nachgemessen an einer echten Zeile
* der Einsatzansicht, Symbolmitte gegen die Mitte des Zeilenkastens:
*
* baseline -2,0 px middle +2,0 px
* -0.1em -0,5 px -0.15em +0,3 px -0.2em +1,0 px
*
* -0.1em trifft beide Bezugsgroessen auf einen halben Punkt genau (gegen die
* Versalmitte +0,5 px) und ist damit die Wahl. Die Angabe haengt an der
* Schriftgroesse der Zeile, nicht an einer festen Pixelzahl — sie stimmt
* damit auch dort, wo das Schloss in einer anderen Groesse steht. */
.symbol-schutz{
width:var(--symbol-klein);height:var(--symbol-klein);
margin-left:var(--abstand-1);
vertical-align:-0.1em;
}
/* ---- Nur für Screenreader ------------------------------------------------
* Text, der gelesen, aber nicht gezeigt wird. Braucht jeder Symbolknopf, der
* keine sichtbare Beschriftung trägt. */
.nur-vorlesen{
position:absolute;width:1px;height:1px;
padding:0;margin:-1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap;border:0;
}
/* ---- Bewegung abbestellt -------------------------------------------------
* Wer im Betriebssystem „Bewegung reduzieren" gesetzt hat, meint es. */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
}
/* == 4. GERÜST =============================================================
*
* Kopfleiste, Rahmen, Leiste/Schublade, Inhalt, Fußzeile.
*
* DIE KOPFHÖHE IST --kopf UND SONST NICHTS. Im Bestand stand sie fünfmal als
* 50px im Stylesheet, und die tatsächliche Höhe hing zusätzlich vom Umbruch
* des Markentexts ab; das Demo-Banner verschob sie ein weiteres Mal. Ergebnis:
* Im Demo-Konto rutschte die Leiste unter der Kopfleiste hervor. Jetzt gibt es
* eine Zahl an einer Stelle, und der Demo-Hinweis steht innerhalb des Inhalts.
*
* MOBIL ZUERST. Was hier ohne Media-Abfrage steht, gilt für das Handy. Die
* vier Schwellen (720, 1024, 1200, 1600) bauen nach oben aus.
*/
/* ---- Kopfleiste ---------------------------------------------------------- */
.kopf{
position:sticky;top:0;z-index:40;
background:var(--dunkelblau);color:var(--auf-dunkel);
height:var(--kopf);
}
/* Der Inhalt der Kopfleiste sitzt auf demselben Raster wie Leiste und Inhalt
* darunter — die Leiste selbst bleibt voll breit (E-P3-12). */
.kopf-innen{
display:flex;align-items:center;gap:var(--abstand-2);
height:var(--kopf);
max-width:var(--rahmen);margin:0 auto;
padding:0 var(--abstand-3);
}
.kopf .knopf{color:var(--auf-dunkel)}
/* .knopf-symbol:hover setzt sonst --rauch — ein heller Block auf der dunklen
* Leiste. Hier gilt die gedämpfte Weißfläche. */
.kopf .knopf-symbol:hover,.kopf .kopf-zahnrad:hover{background:var(--auf-dunkel-flaeche)}
.kopf-menue{margin-left:calc(var(--abstand-2) * -1)}
.kopf-marke{
display:flex;align-items:center;gap:var(--abstand-2);
color:var(--auf-dunkel);text-decoration:none;
min-width:0;flex:1 1 auto;
}
.kopf-marke:hover{text-decoration:none}
/* 34 px statt 26 (F-N1-D). Die Bildmarke ist das einzige Bild der Kopfleiste
* und war darin das kleinste Element — kleiner als die Schrift daneben.
* 34 px lassen in der 56 px hohen Leiste oben und unten je 11 px Luft. */
.kopf-marke img{height:34px;width:auto;flex:0 0 auto}
.kopf-name{
font-family:var(--schrift-kopf);font-weight:600;
font-size:var(--groesse-5);line-height:1;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Der Nutzername erscheint erst, wenn Platz dafür da ist. Auf dem Handy ist
* die Kopfleiste für Menü, Marke und Zahnrad da — der eigene Name steht auf
* der Einstellungs-Übersicht, wo man ihn sucht. */
.kopf-nutzer{display:none}
.kopf-punkte{display:flex;align-items:center;gap:var(--abstand-1);margin-left:auto}
.kopf-punkt{
display:none; /* < 1024: nur Menüknopf und Zahnrad */
align-items:center;gap:var(--abstand-2);
height:var(--knopf);padding:0 var(--abstand-3);
color:var(--auf-dunkel);text-decoration:none;
border-bottom:var(--strich-stark) solid transparent;
font-family:var(--schrift-kopf);font-weight:600;
}
.kopf-punkt:hover{text-decoration:none;border-bottom-color:var(--auf-dunkel-strich)}
.kopf-punkt.aktiv{border-bottom-color:var(--orange)}
/* Der Rückweg der öffentlichen Hülle („Zurück zur Anmeldung") gilt in jeder
* Breite — .kopf-punkt ist unter 1024 px ausgeblendet, weil dort die
* Schublade die Hauptpunkte trägt; einen Rückweg trägt sie nicht. */
.kopf-zurueck{display:inline-flex}
.kopf-zahnrad{margin-right:calc(var(--abstand-2) * -1)}
.kopf-zahnrad.aktiv{background:var(--auf-dunkel-flaeche);border-radius:var(--radius)}
/* ---- Rahmen: Leiste und Inhalt als Einheit, zentriert -------------------- */
.rahmen{
max-width:var(--rahmen);margin:0 auto;
display:flex;align-items:flex-start;
}
.inhalt{
flex:1 1 auto;min-width:0;
padding:var(--abstand-4) var(--abstand-3) var(--abstand-5);
}
.rahmen-lesespalte .inhalt{max-width:var(--lesespalte);margin:0 auto}
/* ---- Leiste und Schublade — EIN Markup ----------------------------------
*
* Unter 1024 px liegt die Leiste als Schublade von links über dem Inhalt,
* darüber steht sie fest daneben. Der Unterschied ist ausschließlich hier.
*
* Das ist die Lehre aus der Vormerkliste von P0: Der Mechanismus hängt an der
* KLASSE, nicht an der Funktion, die die Diensttage ausgibt — sonst bliebe
* die Suchseite als einzige ohne mobiles Menü.
*/
.leiste{
position:fixed;inset:0 auto 0 0;z-index:60;
width:86%;max-width:var(--schublade);
background:var(--schnee);
border-right:var(--strich) solid var(--linie);
display:flex;flex-direction:column;
transform:translateX(-100%);
transition:transform var(--dauer) ease-out;
overscroll-behavior:contain;
}
.schublade-auf .leiste{transform:none}
.schleier{
position:fixed;inset:0;z-index:50;
background:var(--schleier);
opacity:0;transition:opacity var(--dauer) ease-out;
}
.schublade-auf .schleier{opacity:1}
/* Der Körper scrollt nicht, solange die Schublade offen ist — sonst scrollt
* unter dem Schleier der Inhalt weg. */
.schublade-auf{overflow:hidden}
.leiste-kopf{
display:flex;align-items:center;gap:var(--abstand-2);
height:var(--kopf);flex:0 0 auto;
padding:0 var(--abstand-3);
border-bottom:var(--strich) solid var(--linie);
color:var(--dunkelblau);
}
.leiste-haupt{padding:var(--abstand-3) var(--abstand-2) 0;flex:0 0 auto}
.leiste-liste{flex:1 1 auto;overflow-y:auto;padding:var(--abstand-2)}
.leiste-fuss{
flex:0 0 auto;padding:var(--abstand-2);
border-top:var(--strich) solid var(--linie);
}
/* EINE STUFE GRÖSSER (F-N1-K). Mit 12 px war die Überschrift der Leiste das
* kleinste Element darin — kleiner als die Gruppen, die sie überschreibt, und
* kleiner als jede Beschriftung darunter. Eine Überschrift, die von allem
* überragt wird, das sie ordnet, ordnet nichts.
*
* SEIT S3/AP4 (E-R43-2) EINE STUFE HOEHER: 15 px statt 13, --asphalt statt
* --gedaempft. Die Rueckmeldung „wirkt verloren" war ein Problem von Groesse
* und Kontrast, nicht von Ausrichtung — linksbuendig bleibt sie.
*
* VERSALIEN UND SPERRUNG SIND DABEI ENTFALLEN, und das ist am Bild
* entschieden (E-S3-12 a): Bei 15 px in Bricolage 600 liest sich
* „DIENSTTAGE" gesperrt als ETIKETT und steht dem Jahreseintrag „2026"
* darunter an Lautstaerke kaum nach — zwei Ueberschriften statt einer
* Ordnung. Gemischt gesetzt bleibt es eine Ueberschrift: praesent, aber
* ersichtlich eine Ebene ueber dem, was es ordnet. Bei 13 px trug die
* Sperrung noch, weil die Groesse allein nicht reichte; sie war der Ersatz
* fuer die Groesse, die jetzt da ist. */
.leiste-kopfzeile{
font-family:var(--schrift-kopf);font-size:var(--groesse-3);
font-weight:600;
color:var(--asphalt);
padding:var(--abstand-3) var(--abstand-3) var(--abstand-2);
}
.leiste-leer{color:var(--gedaempft);padding:0 var(--abstand-3)}
/* ---- Fußzeile ------------------------------------------------------------
* Zweizeilig, zentriert, unter dem Inhalt — und außerhalb von . */
.fuss-seite{
border-top:var(--strich) solid var(--linie);
padding:var(--abstand-4) var(--abstand-3);
text-align:center;
color:var(--gedaempft);font-size:var(--groesse-2);
}
.fuss-zeile{margin:0;display:flex;flex-wrap:wrap;gap:var(--abstand-2);justify-content:center}
.fuss-rechts{margin-top:var(--abstand-1)}
.fuss-seite a{color:var(--blau-tief);font-weight:600}
/* --gedaempft, nicht --sand (O10). Auf --rauch ergab Sand 1,53:1 — die
* Versionsnummer ist die Auskunft, mit der ein Fehlerbericht anfaengt, und
* damit ein zu LESENDER Text. `kontrast.py` fuehrte „Sand auf Schnee" als
* Ausnahme, begruendet aber nur den Akkordeon-Winkel („Mechanik, keine
* Botschaft"); das trifft auf eine Zahl nicht zu, die man abtippen soll.
* Jetzt 5,30:1. Die dunkle Fassung darunter bleibt, wie sie ist. */
.fuss-version{color:var(--gedaempft)}
.fuss-dunkel{
background:var(--dunkelblau);color:var(--rauch);
border-top:0;
}
.fuss-dunkel a{color:var(--auf-dunkel)}
.fuss-dunkel .fuss-version{color:var(--auf-dunkel-leise)}
/* ---- Was nur in der Schublade steht -------------------------------------- */
.nur-schublade{display:block}
.nur-breit{display:none}
.nur-schmal{display:inline-flex}
/* == 5. LEISTENINHALT ======================================================
*
* Akkordeon und Einträge. Beide Leisten — Diensttage und Einstellungen —
* benutzen dieselben Klassen; bis Web 8.0.1 trug das Einstellungsmenü
* buchstäblich die Klasse `.daylist` und erbte damit jede Regel der
* Tagesleiste, einschließlich der 100-vh-Höhe.
*/
/* ---- Akkordeon -----------------------------------------------------------
* DIE GANZE ZEILE KLAPPT, nicht nur das Dreieck (E-P3-09). Bisher war der
* Text der Link auf die Jahresübersicht und nur das Dreieck der Schalter — auf
* einem Touchgerät nicht zu unterscheiden. Der Weg in die Übersicht ist jetzt
* ein eigenes Symbol rechts.
*
* Der Winkel steht in Sand: Er ist Mechanik, keine Botschaft.
*/
/* GRÖSSER ALS DIE FELDTITEL DARIN (F-N1-K). Beide standen auf 15 px und
* unterschieden sich nur durch die Schrift — die Gruppe „Einsatz" war
* genauso groß wie „Wochentage" darin, obwohl sie eine Ebene darüber steht.
* 16 px, und mit Bricolage dazu ist der Unterschied auch ohne Nachmessen zu
* sehen. */
.akkordeon-zeile{
display:flex;align-items:center;gap:var(--abstand-2);
min-height:var(--knopf);
padding:0 var(--abstand-1) 0 var(--abstand-2);
border-radius:var(--radius-klein);
cursor:pointer;list-style:none;
font-family:var(--schrift-kopf);font-weight:600;font-size:var(--groesse-4);
color:var(--dunkelblau);
}
.akkordeon-zeile::-webkit-details-marker{display:none}
.akkordeon-zeile:hover{background:var(--rauch)}
/* winkel.svg zeigt nach UNTEN. Zugeklappt wird er nach rechts gedreht,
* aufgeklappt steht er in Ruhelage — so zeigen es die Mockups 01/03/06:
* „›" heißt zu, „⌄" heißt offen. Die erste Fassung hatte es umgekehrt
* (offen = oben) — das ist die Konvention mancher Aufklappmenüs, aber nicht
* die dieses Entwurfs (Fable-Kontrolle, F-P3-Q). */
.akkordeon-winkel{color:var(--sand);transition:transform var(--dauer) ease-out;
transform:rotate(-90deg)}
details[open] > .akkordeon-zeile > .akkordeon-winkel{transform:none}
.akkordeon-text{flex:1 1 auto;min-width:0}
/* Der Weg in die Jahres- bzw. Monatsübersicht: eigenes Ziel, eigene
* Trefferfläche, 44 px. ER STEHT IM — die erste Fassung hatte ihn
* daneben, als Kind des , und der Inhalt eines geschlossenen
* wird nicht gerendert: Der Link war an jeder zugeklappten Zeile
* unsichtbar und unerreichbar, die Mockups zeigen ihn an jeder
* (Fable-Kontrolle, F-P3-R). Weil ein Link im beim Klick auch das
* Auf- und Zuklappen auslöste, fängt daylist.js ihn ab und navigiert selbst. */
.akkordeon-uebersicht{
margin-left:auto;flex:0 0 auto;
width:var(--knopf);height:var(--knopf);
display:flex;align-items:center;justify-content:center;
color:var(--sand);border-radius:var(--radius-klein);
}
.akkordeon-uebersicht:hover{color:var(--blau-tief);background:var(--rauch)}
.akkordeon-inhalt{padding-left:var(--abstand-3)}
.akkordeon-monat > .akkordeon-zeile{font-size:var(--groesse-3)}
/* ---- Eintrag -------------------------------------------------------------
* Menüpunkt und Diensttag. Aktiv: hell orange mit orangem Strich links —
* in BEIDEN Leisten gleich (E-P3-10).
*/
.eintrag{
display:flex;align-items:center;gap:var(--abstand-2);
min-height:var(--knopf);
padding:0 var(--abstand-2);
border-radius:var(--radius-klein);
border-left:var(--abstand-1) solid transparent;
color:var(--asphalt);text-decoration:none;
}
.eintrag:hover{background:var(--rauch);text-decoration:none}
.eintrag .symbol{color:var(--dunkelblau)}
/* Das Datum schrumpft NICHT. Beim ersten Anlauf hatten Datum und
* Rettungsmittelname beide `flex:1 1 auto`, und bei 260 px Leistenbreite wurde
* aus „27.12.2026" ein „27.12.20…" — abgeschnitten wurde also die Auskunft,
* die den Eintrag überhaupt identifiziert. Der Name absorbiert die Restbreite
* (E-P3-09: Ellipse am NAMEN, voller Name im Tooltip). */
/* NORMAL, NICHT FETT (S3/AP4). Alle Eintraege standen auf 600. In einer
* Liste, in der JEDE Zeile fett ist, hebt das nichts hervor -- es macht nur
* den Block schwer, und der aktive Punkt muss seine Erkennbarkeit allein aus
* Flaeche und Randstrich holen. Die Auszeichnung wandert von „alle" zu
* „einer": Grundschnitt 400, der aktive Punkt 600. Dieselbe Ueberlegung wie
* bei den Blattzeilen (F-N1-F). */
.eintrag-text{
flex:1 0 auto;min-width:0;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
font-family:var(--schrift-kopf);font-weight:400;
}
/* Lange Rettungsmittelnamen werden abgeschnitten („NEF Neubran…"); der volle
* Name steht im Tooltip und im Seitentitel. Unter 1200 px entfällt der Name
* ganz — das Artzeichen bleibt (E-P3-09). */
.eintrag-neben{
flex:0 1 auto;min-width:0;
color:var(--gedaempft);font-size:var(--groesse-2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.eintrag.aktiv{background:var(--orange-hell);border-left-color:var(--orange)}
.eintrag.aktiv .eintrag-text{color:var(--dunkelblau);font-weight:600}
/* Der Fuß der Leiste: „Zuordnung offen" (rosa mit rotem Zähler, nur solange
* etwas offen ist), „Diensttag anlegen" (orange), Papierkorb (gedämpft). */
.eintrag-offen{background:var(--rosa)}
.eintrag-offen .symbol{color:var(--rot-tief)}
.eintrag-offen .eintrag-text{color:var(--rot-tief)}
.eintrag-anlegen .symbol,
.eintrag-anlegen .eintrag-text{color:var(--orange-tief)}
/* `font-weight:400` stand hier, solange die Grundform 600 war; seit S3/AP4
* ist 400 die Grundform und die Angabe waere eine Dublette (9.16). */
.eintrag-leise .symbol,
.eintrag-leise .eintrag-text{color:var(--gedaempft)}
.zaehler{
flex:0 0 auto;
min-width:var(--abstand-5);height:var(--abstand-5);padding:0 var(--abstand-1);
display:inline-flex;align-items:center;justify-content:center;
border-radius:var(--radius-rund);
background:var(--rot);color:var(--auf-dunkel);
font-size:var(--groesse-1);font-weight:700;
}
/* == 6. KARTE, ZEILE, TITELZEILE ===========================================
*
* Jeder Inhaltsblock ist eine Karte mit Titel, optionaler Zahl und GENAU
* EINER Kopfaktion rechts. Eine zweite gibt es nicht — was mehr braucht,
* bekommt ein Aktionsmenü (E-P3-25).
*/
.karte{
background:var(--schnee);
border:var(--strich) solid var(--linie);
border-radius:var(--radius-gross);
margin-bottom:var(--abstand-5);
}
/* flex-wrap: Wird die Zeile zu eng (Titel + Zahl + Sortieren + Nachtragen bei
* 360 px), bricht die Kopfaktion in eine zweite Zeile um. Ohne wrap schrumpft
* die Titelspalte unter ihre Textbreite und der Text uebermalt die Zahl. */
.karte-kopf{
display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-2);
padding:var(--abstand-3) var(--abstand-4);
border-bottom:var(--strich) solid var(--linie);
list-style:none;
}
.karte-kopf::-webkit-details-marker{display:none}
.karte-titel{
font-size:var(--groesse-5);
flex:0 1 auto;min-width:0;
}
.karte-zahl{color:var(--gedaempft);font-size:var(--groesse-2);flex:0 0 auto}
/* Die Kopfaktion ist ein LINK mit Symbol, kein Knopf: Was kleiner als 44 px
* ist, ist kein Knopf (E-P3-22). Die Trefferfläche erreicht sie über den
* Innenabstand trotzdem. */
.karte-aktion{
margin-left:auto;flex:0 0 auto;
display:inline-flex;align-items:center;gap:var(--abstand-2);
min-height:var(--knopf);padding:0 var(--abstand-2);
font-family:var(--schrift-kopf);font-weight:600;
}
.karte-aktion-blau{color:var(--blau-tief)}
.karte-aktion-orange{color:var(--orange-tief)}
.karte-inhalt{padding:var(--abstand-4)}
.karte-vorschau{
margin-left:auto;color:var(--gedaempft);
font-size:var(--groesse-2);text-align:right;
}
.karte-klappbar > .karte-kopf{cursor:pointer;border-bottom:0}
.karte-klappbar[open] > .karte-kopf{border-bottom:var(--strich) solid var(--linie)}
.karte-klappbar > .karte-kopf .akkordeon-winkel{color:var(--sand)}
.karte-klappbar[open] > .karte-kopf .akkordeon-winkel{transform:none}
/* ---- Zeile ---------------------------------------------------------------
* Text links (fett plus Kleinzeile), Plaketten, Aktionen rechts. Am Desktop
* sind die Aktionen Knöpfe; mobil ein „⋯" je Zeile (E-P3-26).
*/
.zeile{
display:flex;align-items:center;gap:var(--abstand-3);
padding:var(--abstand-3) 0;
border-bottom:var(--strich) solid var(--linie);
}
.zeile:last-child{border-bottom:0;padding-bottom:0}
.zeile:first-child{padding-top:0}
.zeile-text{flex:1 1 auto;min-width:0}
.zeile-haupt{font-weight:600;color:var(--asphalt)}
.zeile-text a{color:inherit}
.zeile-klein{display:block;color:var(--gedaempft);font-size:var(--groesse-2)}
.zeile-plaketten{display:flex;flex-wrap:wrap;gap:var(--abstand-1);flex:0 1 auto}
.zeile-aktionen{display:flex;gap:var(--abstand-2);flex:0 0 auto}
/* Zeile hervorgehoben — die Spurliste des Diensttages (S2/AP4).
*
* Kein neuer Farbwert und kein neues Mass: dieselbe Rauchflaeche, die schon
* die neutrale Plakette traegt, plus ein orangener Balken links in
* --strich-stark. Der Balken ist die Verbindung zur Karte, auf der die
* zugehoerige Linie gleichzeitig dicker wird — beides ohne zusaetzliches
* Element und ohne dass die Zeile ihre Hoehe aendert. */
.zeile-hervor{
background:var(--rauch);
box-shadow:inset var(--strich-stark) 0 0 var(--orange);
padding-left:var(--abstand-2);
}
/* Kein eigener Fokusring: Es gibt EINEN fuer die ganze Anwendung
* (`:focus-visible` weiter oben), und der greift auch hier. */
.spur-zeile{cursor:pointer}
/* ---- Titelzeile ---------------------------------------------------------- */
.titelzeile{margin-bottom:var(--abstand-4)}
.rueckweg{
display:inline-flex;align-items:center;gap:var(--abstand-1);
min-height:var(--knopf);
color:var(--blau-tief);font-weight:600;
}
.titelzeile-haupt{display:flex;align-items:flex-start;gap:var(--abstand-3);flex-wrap:wrap}
/* flex-basis auto statt fester 14rem: Ein kurzer Titel („Einsatz 1") liess
* sonst die Knoepfe umbrechen, obwohl alles in eine Zeile passt (O4). Lange
* Titel sind mobil ohnehin kurz gefasst (wtag-kurz). */
.titelzeile-text{flex:1 1 auto;min-width:0}
.titelzeile-unter{color:var(--gedaempft);font-size:var(--groesse-2);margin-top:var(--abstand-1)}
.titelzeile-aktionen{display:flex;gap:var(--abstand-2);flex:0 0 auto;margin-left:auto}
/* == 7. KNOPF ==============================================================
*
* EINE HÖHE: 44 px, mobil wie Desktop, auch für Zeilenaktionen. Es gibt keine
* Kompaktvariante — was kleiner ist, ist kein Knopf (E-P3-22). Der Bestand
* hatte sechs Varianten und sechs ortsgebundene Größen; `.btn-primary` trug
* global `width:100%` und wurde an zehn Stellen zurückgenommen.
*
* Die Vollständigkeitsprüfung liest die Höhenangabe nach: Sie muss aus
* --knopf kommen.
*/
.knopf{
display:inline-flex;align-items:center;justify-content:center;
gap:var(--abstand-2);
height:var(--knopf);
padding:0 var(--abstand-4);
border-radius:var(--radius);
border:var(--strich-stark) solid transparent;
font-family:var(--schrift-kopf);font-weight:600;
font-size:var(--groesse-3);
text-decoration:none;cursor:pointer;
white-space:nowrap;
}
.knopf:hover{text-decoration:none}
.knopf[disabled],.knopf[aria-disabled="true"]{opacity:.5;cursor:default}
/* Dunkelblaue Schrift auf Orange: 5,97:1. Weiß auf Orange wären 2,3:1 und
* damit unlesbar — die Mockups zeigen an dieser Stelle Weiß, der
* Entscheidungstext gilt (E-P3-15, Fund F-P3-L). */
.knopf-primaer{
background:var(--knopf-primaer-flaeche);
color:var(--knopf-primaer-schrift);
border-color:var(--knopf-primaer-flaeche);
}
.knopf-primaer:hover{background:var(--orange-tief);border-color:var(--orange-tief);color:var(--auf-dunkel)}
.knopf-neutral{
background:var(--schnee);color:var(--dunkelblau);
border-color:var(--linie-stark);
}
.knopf-neutral:hover{background:var(--rauch)}
.knopf-gefahr{background:var(--schnee);color:var(--rot-tief);border-color:var(--rot)}
.knopf-gefahr:hover{background:var(--rosa)}
.knopf-leise{background:none;color:var(--gedaempft);padding:0 var(--abstand-2)}
.knopf-leise:hover{color:var(--asphalt)}
.knopf-symbol{
width:var(--knopf);height:var(--knopf);padding:0;
background:none;color:inherit;border-color:transparent;
}
.knopf-symbol:hover{background:var(--rauch)}
.knopf-breit{width:100%}
/* == 8. PLAKETTE ===========================================================
*
* Plaketten tragen KEIN Häkchen: Ihr Vorhandensein ist das Häkchen. Und sie
* sind keine Bedienelemente (E-P3-17).
*/
.plakette{
display:inline-flex;align-items:center;gap:var(--abstand-1);
padding:var(--abstand-1) var(--abstand-2);
border-radius:var(--radius-klein);
font-size:var(--groesse-1);font-weight:600;
white-space:nowrap;
}
.plakette .symbol{width:14px;height:14px}
.plakette-neutral{background:var(--rauch);color:var(--gedaempft);border:var(--strich) solid var(--linie)}
.plakette-orange{background:var(--orange-hell);color:var(--asphalt)}
.plakette-blau{background:var(--blau-hell);color:var(--dunkelblau)}
.plakette-rot{background:var(--rosa);color:var(--rot-tief)}
.plakette-weg{
display:inline-flex;align-items:center;justify-content:center;
width:var(--symbol);height:var(--symbol);
margin-right:calc(var(--abstand-1) * -1);color:inherit;
}
/* == 9. MELDUNG ============================================================
*
* Vier Töne mit Symbol und optionalem fettem Auftakt (E-P3-16). Grün ist
* fort: Die Vollzugsmeldung ist jetzt blau wie der Hinweis und unterscheidet
* sich durch das Symbol — Haken gegen Kreis-i. Farbe ist nie der einzige
* Träger (Grundregel 3).
*
* Die Warnung trägt ihren Text in Asphalt, nicht in Orange tief: Orange tief
* auf Orange hell sind 3,81:1 und damit unter der Schwelle für Fließtext.
* Der fette Auftakt darf orange sein — für fette Schrift ab 14 px gilt 3:1.
*/
.meldung{
display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-3);
padding:var(--abstand-3) var(--abstand-4);
border-radius:var(--radius);
margin-bottom:var(--abstand-5);
}
/* Der Text braucht eine Mindestbreite, unter der die Aktion in die naechste
* Zeile umbricht — sonst quetscht ein breiter Knopf den Text auf ein Wort je
* Zeile (Fund aus O3 am Geraetehinweis bei 390 px). */
.meldung p{flex:1 1 16rem;min-width:0}
.meldung .symbol{flex:0 0 auto}
.meldung-aktion{flex:0 0 auto}
.meldung-fehler{background:var(--rosa);color:var(--rot-tief)}
.meldung-fehler .symbol{color:var(--rot)}
.meldung-info{background:var(--blau-hell);color:var(--blau-tief)}
.meldung-info .symbol{color:var(--blau-tief)}
.meldung-ok{background:var(--blau-hell);color:var(--blau-tief)}
.meldung-ok .symbol{color:var(--blau-tief)}
/* SCHUTZ — rot, aber kein Fehler (S3, Rueckmeldung vom 01.09.2026). Fuer den
* einen Fall, in dem eine Meldung dauerhaft steht und trotzdem die Farbe des
* Ernstfalls braucht: ein Datenschutzhinweis an der Stelle, an der jemand
* gleich Daten herunterlaedt. Er benutzt die Flaeche und die Schrift von
* `fehler` — kein neuer Farbwert —, aber `role="status"` statt `alert`: Was
* bei JEDEM Aufruf der Seite dasteht, darf einen Vorleser nicht jedes Mal
* unterbrechen. Das Symbol ist das Schloss, nicht die Warnung: Es geht um
* Schutzbeduerftigkeit, nicht um einen Fehlgriff. */
.meldung-schutz{background:var(--rosa);color:var(--rot-tief)}
.meldung-schutz .symbol{color:var(--rot)}
.meldung-schutz strong{color:var(--rot-tief)}
.meldung-warn{background:var(--orange-hell);color:var(--asphalt)}
.meldung-warn .symbol{color:var(--orange-tief)}
.meldung-warn strong{color:var(--orange-tief)}
/* == 10. AKTIONSMENÜ UND BLATT =============================================
*
* Mobil ein „⋯", das ein Blatt von unten öffnet; am Desktop derselbe Vorrat
* als Aufklappmenü. EIN Markup für beide Formen — assets/blatt.js öffnet und
* schließt nur, welche Form erscheint, sagt dieses Stylesheet (E-P3-27).
*/
.aktionen{position:relative}
.aktionen-knopf .symbol:last-child{transition:transform var(--dauer) ease-out}
.aktionen-knopf[aria-expanded="true"] .symbol:last-child{transform:rotate(180deg)}
.blatt{
position:fixed;inset:auto 0 0 0;z-index:70;
background:var(--schnee);
border-radius:var(--radius-gross) var(--radius-gross) 0 0;
box-shadow:var(--schatten-hoch);
padding:var(--abstand-3) var(--abstand-3) var(--abstand-5);
max-height:80vh;overflow-y:auto;
}
.blatt-griff{
width:2.5rem;height:var(--abstand-1);margin:0 auto var(--abstand-3);
border-radius:var(--radius-rund);background:var(--sand);
}
.blatt-titel{
font-size:var(--groesse-5);text-align:center;
margin-bottom:var(--abstand-2);
}
.blatt-liste{display:flex;flex-direction:column}
/* NORMAL STATT FETT (F-N1-F). Die Einträge standen auf 600 — dasselbe
* Gewicht wie ein Kartentitel. In einem Menü, in dem JEDE Zeile so gesetzt
* ist, hebt das nichts hervor; es macht nur den ganzen Block schwer.
* Unterschieden wird hier ohnehin durch Symbol und Farbe (orange fürs
* Anlegen, rot fürs Löschen), nicht durch das Gewicht.
*
* WARUM NICHT 500 als Mittelweg: Open Sans liegt in 400, 600 und 700 vor —
* einen 500er-Schnitt gibt es nicht. Die Angabe fiele still auf 400 zurück,
* und im Stylesheet stünde eine Zahl, die nichts bedeutet. Ein vierter
* Schriftschnitt wäre eine weitere Datei für einen Menüeintrag. */
.blatt-zeile{
display:flex;align-items:center;gap:var(--abstand-3);
min-height:var(--blatt-zeile);
padding:0 var(--abstand-3);
border-radius:var(--radius-klein);
color:var(--asphalt);font-weight:400;
}
.blatt-zeile:hover{background:var(--rauch);text-decoration:none}
.blatt-zeile .symbol{color:var(--dunkelblau)}
.blatt-anlegen,.blatt-anlegen .symbol{color:var(--orange-tief)}
/* Löschen steht rot UND durch eine Linie abgesetzt: Wer schnell tippt, soll
* nicht danebengreifen. */
.blatt-gefahr{
color:var(--rot-tief);
margin-top:var(--abstand-2);padding-top:var(--abstand-2);
border-top:var(--strich) solid var(--linie);
}
.blatt-gefahr .symbol{color:var(--rot)}
.blatt-abbrechen{width:100%;margin-top:var(--abstand-3)}
/* == 11. FORMULAR ==========================================================
*
* Feld, Schalter, Segmentwahl, Speichern-Leiste.
*
* Die Beschriftung steht in NORMALSCHRIFT. Im Bestand waren Feldnamen,
* Tabellenköpfe und Legenden gesperrte Versalien — das prägende Stilmittel
* und zugleich das, was auf 360 px am meisten Breite kostete (E-P3-21).
*/
/* EIN , DAS NUR GRUPPIERT (S3/AP10). Gebraucht fuer das
* `disabled`-Attribut: Es sperrt ein ganzes Formular in einem Zug, statt an
* jedem Feld ein Attribut zu setzen. Die Elementregeln fuer fieldset sind mit
* O11 gefallen — ohne diese Ruecknahme brachte der Browser seinen eigenen
* Rahmen und seine eigene Polsterung mit. `min-width:0` gehoert dazu: Ein
* fieldset hat eine eingebaute Mindestbreite nach seinem Inhalt und sprengt
* damit sonst jedes schmale Raster. */
.feldsatz-gesperrt{border:0;padding:0;margin:0;min-width:0}
.feldsatz-gesperrt[disabled]{opacity:.55}
.feld{margin-bottom:var(--abstand-3)}
.feld-label{display:block;font-weight:600;margin-bottom:var(--abstand-1)}
.feld-pflicht{color:var(--rot-tief)}
.feld-eingabe{
display:block;width:100%;
height:var(--knopf);
padding:0 var(--abstand-3);
background:var(--schnee);color:var(--asphalt);
border:var(--strich) solid var(--linie-stark);
border-radius:var(--radius-klein);
}
.feld-mehrzeilig{height:auto;padding:var(--abstand-3)}
/* DAS DATEIFELD: sein Knopf hängt oben, solange ihn nichts in die Mitte holt.
*
* `input[type=file]` stellt den nativen Knopf auf die Textzeile. Die steht bei
* `height:var(--knopf)` ohne senkrechte Polsterung am oberen Innenrand —
* gemessen 0 px Luft darüber, 19 px darunter, und genau das ist als schiefer
* „Browse…"-Knopf zu sehen.
*
* `display:flex;align-items:center` ändert daran NICHTS. Chromium legt den
* Shadow-Inhalt eines Eingabefeldes nicht in einen Flex-Fluss; nachgemessen
* blieb es bei 0/19. Die Zeilenhöhe auf den Innenraum zu setzen wirkt dagegen
* und lässt die 44 px stehen — gemessen 10 px oben, 9 px unten (die 42 px
* Innenraum sind ungerade, mittiger geht es nicht).
*
* Der Attributselektor ist nicht Zierde, sondern die Abgrenzung: Getroffen
* werden nur die beiden Dateifelder (import.php, einstellungen.php). 77
* Eigenschaftsmessungen über sieben Feldarten zeigten genau diese eine
* Änderung und keine zweite. */
input[type=file].feld-eingabe{line-height:calc(var(--knopf) - 2*var(--strich))}
.feld-klein{color:var(--gedaempft);font-size:var(--groesse-2);margin-top:var(--abstand-1)}
.feld-reihe{display:flex;flex-wrap:wrap;gap:var(--abstand-3)}
.feld-reihe > .feld{flex:1 1 12rem;min-width:0}
/* ---- Schalter ------------------------------------------------------------
* Aus einer echten Checkbox gebaut — Tastaturbedienung, Vorlesezustand und
* Absenden kommen damit vom Browser und nicht aus einem Skript. */
.schalter{margin-bottom:var(--abstand-3)}
/* DER SELEKTOR IST ABSICHTLICH SO LANG — dieselbe Falle wie F-P3-AP, hier
* in O11 nachgezogen. `.schalter-box` (0,1,0) verliert gegen
* `input[type=checkbox]` in den Grundformen (0,1,1), die jedem Kästchen
* 20 x 20 px gibt; gemessen war es genau das. Weder `.schalter` noch
* `.wahlliste` setzen `position:relative`, das unsichtbare Kästchen lag also
* auf seiner statischen Stelle über dem linken Rand der Beschriftung. */
input[type=checkbox].schalter-box{position:absolute;opacity:0;width:0;height:0;min-height:0}
.schalter-label{
display:flex;align-items:center;gap:var(--abstand-3);
min-height:var(--knopf);cursor:pointer;
}
.schalter-text{flex:1 1 auto;font-weight:600}
.schalter-klein{display:block;font-weight:400;color:var(--gedaempft);font-size:var(--groesse-2)}
.schalter-griff{
flex:0 0 auto;position:relative;
width:var(--schalter-breit);height:var(--schalter-hoch);
border-radius:var(--radius-rund);
background:var(--sand);
transition:background var(--dauer) ease-out;
}
.schalter-griff::after{
content:"";position:absolute;
top:calc((var(--schalter-hoch) - var(--schalter-punkt)) / 2);
left:calc((var(--schalter-hoch) - var(--schalter-punkt)) / 2);
width:var(--schalter-punkt);height:var(--schalter-punkt);
border-radius:var(--radius-rund);
background:var(--schnee);
transition:transform var(--dauer) ease-out;
}
.schalter-box:checked + .schalter-label .schalter-griff{background:var(--orange)}
.schalter-box:checked + .schalter-label .schalter-griff::after{
transform:translateX(calc(var(--schalter-breit) - var(--schalter-hoch)));
}
.schalter-box:focus-visible + .schalter-label .schalter-griff{
outline:var(--strich-stark) solid var(--blau);outline-offset:var(--strich-stark);
}
/* Abhängige Felder klappen darunter auf, eingerückt mit orangem Randstrich. */
.schalter-abhaengig{
margin:var(--abstand-2) 0 var(--abstand-4) var(--abstand-3);
padding-left:var(--abstand-4);
border-left:var(--strich-stark) solid var(--orange);
}
/* ---- Segmentwahl ---------------------------------------------------------
* Als Radiogruppe gebaut: Pfeiltasten, Vorlesezustand und Absenden kommen
* damit vom Browser. */
.segment{
display:flex;flex-wrap:wrap;
border:var(--strich) solid var(--linie-stark);
border-radius:var(--radius);
overflow:hidden;
}
/* DER SELEKTOR IST ABSICHTLICH SO LANG (F-P3-AP, O9c). `.segment-box`
* allein (0,1,0) verliert gegen `input[type=radio]` (0,1,1) in Abschnitt 15,
* die jedem Radio 20 x 20 px gibt — und weil diese Regel spaeter steht, blieb
* das Kaestchen 20 x 20 gross, nur durchsichtig. Absolut positioniert und
* unsichtbar lag es damit UEBER der Umgebung und fing Klicks ab; gefunden
* beim Bedienen der Wartungsseite („intercepts pointer events"). Es betraf
* jede Segmentwahl der Anwendung — Zeitraum, Suchfilter, Reiter. */
input[type=radio].segment-box,
input[type=checkbox].segment-box{position:absolute;opacity:0;width:0;height:0;min-height:0}
/* DER RAND MUSS WEG (F-N1-L). Die Taste ist ein ``, und die
* Grundformen geben jedem `label` `margin-bottom: --abstand-3` — den Abstand
* zum nächsten Feld. Innerhalb des Segmentrahmens ist das kein Abstand,
* sondern ein toter Streifen: Der Rahmen war 58 px hoch, die Tasten 44, und
* unter ihnen lagen 12 px Leere im Kasten. Betroffen war JEDE Segmentwahl der
* Anwendung — Wochentage, Dreiwertfilter, Zeitraum-Reiter, Logo-Wahl.
*
* Das ist die Falle aus `Design.md` 9.16, in Reinform: Ein Baustein auf einem
* Elementnamen, dessen Grundform er nicht zurücknimmt. */
.segment-taste{
flex:1 1 auto;margin:0;
display:flex;align-items:center;justify-content:center;
min-height:var(--knopf);padding:0 var(--abstand-3);
background:var(--schnee);color:var(--dunkelblau);
font-family:var(--schrift-kopf);font-weight:600;
cursor:pointer;text-align:center;
border-right:var(--strich) solid var(--linie);
}
.segment-taste:last-of-type{border-right:0}
.segment-box:checked + .segment-taste{background:var(--orange);color:var(--knopf-primaer-schrift)}
.segment-box:focus-visible + .segment-taste{
outline:var(--strich-stark) solid var(--blau);outline-offset:calc(var(--strich-stark) * -1);
}
/* ---- Speichern-Leiste ----------------------------------------------------
* Klebt am unteren Rand und erscheint, sobald das Formular schmutzig ist.
* KEIN „Verwerfen" — der Rückweg oben genügt, und ein Verwerfen-Knopf neben
* einem Speichern-Knopf ist die Stelle, an der man sich vergreift (E-P3-29). */
.speichern{
position:sticky;bottom:0;z-index:30;
/* KARTENFORM (E-R43-1). Bis Web 12.2.2 brach die Leiste mit
* `margin: … calc(var(--abstand-3) * -1)` seitlich aus dem Inhalt aus und
* lief ohne Radius von Rand zu Rand — sie wirkte dadurch „eckig und
* breiter" als die Karte darüber, obwohl sie zu ihr gehört. Jetzt Radius
* und Breite wie die Karte; der Ausbruch ist ersatzlos entfallen.
*
* WAS BLEIBT, ist alles, was die FUNKTION traegt: der klebende Sitz, die
* Trennlinie nach oben und der Schatten. Die Leiste soll auffallen, weil
* sie folgt — nicht, weil sie anders geschnitten ist. */
margin:var(--abstand-4) 0 0;
padding:var(--abstand-3);
background:var(--schnee);
border-top:var(--strich) solid var(--linie);
border-radius:var(--radius-gross);
box-shadow:var(--schatten);
}
/* KNOPF RECHTS, ZAEHLUNG LINKS DANEBEN. Im Markup steht der Hinweis zuerst
* (ui_speichern_leiste), damit die Vorlesereihenfolge stimmt: erst „12
* ausgewaehlt", dann „Auswahl sichern". flex-end schiebt das Paar an den
* rechten Rand — die Haupthandlung sitzt dort, wo die Hand sie sucht. */
.speichern-innen{
display:flex;align-items:center;justify-content:flex-end;gap:var(--abstand-3);
max-width:var(--rahmen);margin:0 auto;
}
.speichern-hinweis{display:none;color:var(--gedaempft);font-size:var(--groesse-2)}
/* == 12. KENNZAHL ==========================================================
*
* Wert in Bricolage mit Einheit, darunter die Beschriftung. Die Hervorhebung
* eines Extremwerts war rot und ist jetzt orange: Rot heißt in dieser
* Oberfläche „Aufmerksamkeit", und ein Höchstwert ist kein Fehler (E-P3-37).
*/
.kennzahl-raster{
display:grid;gap:var(--abstand-3);
grid-template-columns:repeat(2,minmax(0,1fr));
margin-bottom:var(--abstand-4);
}
/* SENKRECHT MITTIG (S3/AP5). Die Kacheln stehen in einem Raster und werden
* alle so hoch wie die hoechste — und die ist hoeher, sobald EINE
* Beschriftung umbricht („Laengste Flugstrecke · 14.08."). Der Inhalt der
* uebrigen klebte dann oben, und eine Reihe gleich hoher Kacheln zeigte
* Werte auf verschiedenen Hoehen. `justify-content:center` verteilt die
* Restluft nach oben und unten; die Kachel selbst bleibt, wie sie war. */
.kennzahl{
position:relative;
display:flex;flex-direction:column;justify-content:center;
padding:var(--abstand-3);
background:var(--schnee);
border:var(--strich) solid var(--linie);
border-radius:var(--radius);
}
.kennzahl.aktiv{background:var(--orange-hell);border-color:var(--orange)}
.kennzahl-wert{
font-family:var(--schrift-kopf);font-weight:600;
font-size:var(--groesse-6);line-height:var(--zeile-eng);
color:var(--dunkelblau);
}
.kennzahl-einheit{font-size:var(--groesse-2);color:var(--gedaempft);margin-left:var(--abstand-1)}
.kennzahl-label{font-size:var(--groesse-2);color:var(--gedaempft)}
/* Der Tag des Extremwerts steht IN der Beschriftungszeile („Längste
* Flugstrecke · 14.08.", Mockup 30), nicht darunter: Er gehört zur Aussage
* der Kachel und nicht als zweite Zeile darunter. Bei schmalen Kacheln
* bricht die Zeile um — das ist richtiger, als eine feste zweite Zeile zu
* erzwingen, die bei den übrigen Kacheln leer bliebe. */
.kennzahl-tag{color:var(--orange-tief);font-weight:600;white-space:nowrap}
.kennzahl-extrem::after{
content:"";position:absolute;top:var(--abstand-2);right:var(--abstand-2);
width:var(--abstand-2);height:var(--abstand-2);
border-radius:var(--radius-rund);background:var(--orange);
}
/* == 13. TEXT UND ÖFFENTLICHE HÜLLE ========================================
*
* Fließtext in der Lesespalte — Erklärtexte, Abbruchseite, Impressum und
* Datenschutz (E-P3-12, E-P3-38).
*/
.text{max-width:var(--lesespalte)}
.text h1{margin-bottom:var(--abstand-2)}
.text h2{font-size:var(--groesse-5);margin:var(--abstand-5) 0 var(--abstand-2)}
.text h3{font-size:var(--groesse-4);margin:var(--abstand-4) 0 var(--abstand-2)}
.text p{font-size:var(--groesse-4);line-height:var(--zeile-lesen);margin-bottom:var(--abstand-3)}
.text ul,.text ol{margin:0 0 var(--abstand-3) var(--abstand-5);list-style:disc}
.text ol{list-style:decimal}
.text li{font-size:var(--groesse-4);line-height:var(--zeile-lesen);margin-bottom:var(--abstand-1)}
.text a{text-decoration:underline}
.text-stand{color:var(--gedaempft);font-size:var(--groesse-2);margin-top:var(--abstand-5)}
/* ---- Anmeldung ----------------------------------------------------------- */
.anmeldung-body{
background:var(--dunkelblau);
min-height:100vh;min-height:100dvh;
display:flex;flex-direction:column;
}
.anmeldung{
flex:1 1 auto;
display:flex;align-items:center;justify-content:center;
padding:var(--abstand-5) var(--abstand-3);
}
.anmeldung-karte{
width:100%;max-width:var(--anmeldekarte);
background:var(--schnee);
border-radius:var(--radius-gross);
padding:var(--abstand-5);
box-shadow:var(--schatten-hoch);
}
.anmeldung-logo{display:block;height:56px;width:auto;margin:0 auto var(--abstand-4)}
.anmeldung-titel{text-align:center;font-size:var(--groesse-6)}
.anmeldung-unter{text-align:center;color:var(--gedaempft);margin-bottom:var(--abstand-5)}
/* LINKSBUENDIG, nicht zentriert (O10, Mockup 32). Der Link steht unter einem
* 100 % breiten Knopf und ueber dem linken Rand der Feldbeschriftungen;
* zentriert schwebt er zwischen beidem. Betrifft Anmeldung, „Passwort
* vergessen" und die Abmeldeseite — alle drei tragen dieselbe Klasse. */
.anmeldung-neben{margin-top:var(--abstand-4)}
/* ---- Demo-Hinweis --------------------------------------------------------
* Dauerhaft, nicht wegklickbar. Ein Hinweis, den man einmal schließt, ist
* beim zweiten Besuch nicht mehr da — und genau dann wäre er nötig. */
.demo-hinweis{
display:flex;align-items:center;gap:var(--abstand-3);
padding:var(--abstand-3) var(--abstand-4);
margin-bottom:var(--abstand-5);
background:var(--orange-hell);
border-radius:var(--radius);
font-size:var(--groesse-2);
}
.demo-hinweis .symbol{color:var(--orange-tief)}
/* == 14. TABELLE UND KACHEL ================================================
*
* Das Gerüst; gefüllt wird es in O3 (Startseite und Kachelform) und O6/O7.
*
* Unter 720 px gibt es KEINE Tabelle: Die Einsätze erscheinen als dreizeilige
* Kachel (E-P3-32). Der Grund steht im Befund — bei 360 px bekamen Einsatzort
* und Diagnose null Pixel Breite und verschwanden ohne Hinweis, während sieben
* Zahlenspalten stehen blieben.
*/
/* tabular-nums: Ziffern gleicher Breite, damit Zahlenspalten (Beginn, Dauer,
* km) untereinander fluchten — die frühere mono-Klasse entfällt (Mockup 03
* setzt die Textschrift, keine Schreibmaschine). */
.tabelle{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
/* SPALTENTITEL ZENTRIERT (F-N1-G). Vorher folgte der Titel der Ausrichtung
* seiner Zellen: links über Text, rechts über Zahlen, mittig über Haken —
* drei Ausrichtungen in einer Zeile. Der Kopf ist aber keine Zeile der
* Daten, sondern ihre Beschriftung; einheitlich zentriert liest er sich als
* das, was er ist. Die ZELLEN behalten ihre Ausrichtung: Zahlen fluchten
* weiter rechts, Text steht weiter links. */
.tabelle th{
text-align:center;font-weight:600;
color:var(--dunkelblau);
padding:var(--abstand-2) var(--abstand-2);
border-bottom:var(--strich-stark) solid var(--linie);
white-space:nowrap;
}
/* Die Hakenspalten tragen zusammengesetzte Wörter („Sekundärtransport") mit
* weichem Trennzeichen. Sie dürfen umbrechen — sonst wäre die Spalte so
* breit wie ihr Titel, obwohl in ihr nur ein Haken steht. */
.tabelle th.haken-spalte{white-space:normal}
.tabelle td{
padding:var(--abstand-3) var(--abstand-2);
border-bottom:var(--strich) solid var(--linie);
vertical-align:middle;
}
.tabelle tr:last-child td{border-bottom:0}
.tabelle-scroll{overflow-x:auto}
/* == 15. DIALOG ============================================================
*
* Bestätigen, Entsperren, Rückspielen, Karte wählen: am Desktop eine Karte im
* Schleier, mobil ein Blatt von unten (E-P3-27, 5.3).
*/
.dialog{
border:0;padding:0;
background:var(--schnee);
border-radius:var(--radius-gross);
box-shadow:var(--schatten-hoch);
max-width:min(92vw,32rem);width:100%;
color:var(--asphalt);
}
.dialog::backdrop{background:var(--schleier)}
.dialog-kopf{padding:var(--abstand-4) var(--abstand-4) 0}
.dialog-inhalt{padding:var(--abstand-4)}
/* Ein erklärender Absatz vor den Feldern braucht Luft nach unten — sonst
* klebt die erste Beschriftung an ihm (O9, Rückspieldialog). Der letzte
* Absatz bekommt keine: Er steht ohnehin vor dem Fuß mit eigenem Abstand. */
.dialog-inhalt p{margin:0 0 var(--abstand-3)}
.dialog-inhalt p:last-child{margin-bottom:0}
.dialog-fuss{
display:flex;gap:var(--abstand-3);justify-content:flex-end;
padding:0 var(--abstand-4) var(--abstand-4);
}
.dialog-fuss .knopf{flex:1 1 auto}
/* == 16. KARTENANSICHT (Leaflet) ===========================================
*
* Höhe nach Token, Position nach Schwellen. Der Marker-Satz entsteht in O3.
*/
.geo{
height:var(--karte-mobil);
border-radius:var(--radius);
overflow:hidden;
background:var(--rauch);
margin-bottom:var(--abstand-5);
/* EIGENER STAPELKONTEXT. Leaflet vergibt intern z-index bis 1000 — seine
* Bedienelemente zeichneten über Schublade (60) und Schleier (50), der
* Kartenpin stand mitten im Menü (Fable-Kontrolle, F-P3-Y). position und
* z-index:0 sperren die inneren Werte in die Karte ein; kein Wettrüsten
* der z-Indizes nötig. */
position:relative;z-index:0;
}
/* == 17. GRUNDFORMEN ======================================================
*
* Bis Web 9.11.1 hieß dieser Abschnitt ROHSCHICHT und war ausdrücklich ein
* ÜBERGANG: P3 baute die Seiteninhalte Paket für Paket um (O3 bis O11), und
* bis dahin stand auf jeder noch nicht umgebauten Seite Markup mit
* Klassennamen, für die es keine Regel mehr gab. Dieser Übergang ist mit
* O11 zu Ende, und was ihn ausmachte, ist weg:
*
* .alert-Familie Die eine begründete Klassen-Ausnahme (F-P3-T). Ersetzt
* durch den Meldungs-Baustein `.meldung` — in PHP über
* ui_meldung_markup(), in JS über dasselbe Markup
* (import_ui.js, einstellungen.php, patient.js).
* .muted Die zweite Ausnahme, zuletzt 16 Stellen. Ersetzt durch
* `.feld-hinweis` (Absatz), `.feld-klein` (Absatz unter
* einem Feld), `.feld-klein-inline` (Zusatz in einer
* Beschriftung) und `.dash` (Tabellenzelle) — vier Rollen,
* die eine Klasse vorher gemeinsam trug.
* table/th/td Die Notbremse gegen waagerechten Überlauf. Es gibt keine
* Tabelle mehr, die ihre Gestaltung von hier bezieht: Die
* letzte (`.imp-table` im Import — eine Klasse, die selbst
* nie eine Regel hatte) trägt jetzt `.tabelle` und liegt wie
* die übrigen in `.tabelle-scroll`.
* fieldset/legend Null Verwendungen — die letzten fünf standen im
* Einrichter und sind in O10 zu Karten geworden.
* hr Null Verwendungen — der letzte Trenner stand auf der
* Wartungsseite und ist in O11 mit den Karten entfallen.
*
* WAS BLEIBT, IST KEIN ÜBERGANG MEHR, sondern die Grundform der Elemente,
* auf denen die Bausteine aufsetzen. Ein `.feld` ist eine Beschriftung mit
* Eingabefeld — aber ein `Text ` ist
* gültiges HTML und steht an 46 Stellen — die Filterreihen der Suche, das
* Einsatzformular, die Anmeldung. Sie zu tilgen hieße, jede dieser Stellen
* in eine `.feld`-Hülle umzubauen; das wäre ein Umbau der beiden
* kompliziertesten Seiten der Anwendung für eine Regel, die nichts falsch
* macht. `.feld` ist der BAUSTEIN für ein beschriftetes Feld, nicht das
* Gebot, dass jede Beschriftung einer sein müsse.
*
* DIE EINTRITTSKARTE BLEIBT ENG: Hier stehen ausschließlich Elementnamen.
* Eine KLASSE hier einzutragen hieße, das Redesign zurückzunehmen — dafür
* gibt es die Bausteine in den Abschnitten davor.
*/
input,select,textarea{
max-width:100%;
padding:var(--abstand-2) var(--abstand-3);
min-height:var(--knopf);
background:var(--schnee);color:var(--asphalt);
border:var(--strich) solid var(--linie-stark);
border-radius:var(--radius-klein);
}
/* Kästchen und Radios sind keine Textfelder: feste Größe statt Mindesthöhe.
* ACHTUNG, DRITTE FALLE DIESER ART (F-P3-AP, F-P3-AZ): Diese Regel hat
* Spezifität (0,1,1) und schlägt damit jede bloße Klasse. Wer ein solches
* Kästchen ausblenden will, braucht `input[type=checkbox].meine-klasse` —
* `.meine-klasse` allein verliert. */
input[type=checkbox],input[type=radio]{
min-height:0;width:var(--symbol);height:var(--symbol);accent-color:var(--orange);
}
/* Das Muster `Text `: Beschriftung oben, Feld darunter
* in voller Breite. Ohne diese Regel liefe die Eingabe neben der Beschriftung
* her und bräche auf schmalen Geräten an unvorhersehbaren Stellen um. */
label{display:block;margin-bottom:var(--abstand-3)}
label > input:not([type=checkbox]):not([type=radio]),
label > select,
label > textarea{display:block;width:100%;margin-top:var(--abstand-1)}
label:has(> input[type=checkbox]),
label:has(> input[type=radio]){
display:flex;align-items:center;gap:var(--abstand-2);
min-height:var(--knopf);margin-bottom:var(--abstand-3);
}
summary{cursor:pointer}
code,kbd,pre{font-family:var(--schrift-fest);font-size:var(--groesse-2)}
pre{overflow-x:auto;background:var(--rauch);padding:var(--abstand-3);border-radius:var(--radius-klein)}
/* == 18. SCHWELLEN =========================================================
*
* Die vier Schwellen aus Anlage G des Konzepts, und NUR hier stehen sie als
* Zahlen: Custom Properties funktionieren in Media-Abfragen nicht. Zur
* Auskunft liegen dieselben Werte als --s-handy, --s-leiste, --s-zwei und
* --s-karte-neben in :root.
*
* 720 Handy → Tablet hoch: Kachel wird Tabelle, Karte 220 px
* 1024 Schublade → feste Leiste, Hauptpunkte in der Kopfleiste
* 1200 Leiste 260 px, Zweispalter, Formularkarten nebeneinander
* 1600 Karte neben Diensttag-Daten und Tabelle
*/
/* ---- ab 720: Tablet hoch ------------------------------------------------- */
@media (min-width:720px){
.inhalt{padding:var(--abstand-5) var(--abstand-4)}
.geo{height:var(--karte-tablet)}
.kennzahl-raster{grid-template-columns:repeat(4,minmax(0,1fr))}
.speichern-hinweis{display:block}
.speichern .knopf-breit{width:auto}
.segment{display:inline-flex}
}
/* ---- ab 1024: die Leiste steht fest -------------------------------------
* Ab hier ist die Schublade fort und die Leiste ein Teil des Rasters. Das
* Markup ist dasselbe; nur diese Regeln unterscheiden sich. */
@media (min-width:1024px){
.leiste{
/* REIHENFOLGE IST HIER DIE SACHE (F-N1-A). `inset` ist die Kurzform fuer
alle vier Seiten und setzt ein davor stehendes `top` wieder auf `auto`.
Genau das ist passiert: Die Leiste klebte gar nicht, sondern scrollte
mit — bei 600 px Scrollhoehe gemessen auf -544 px, also weit ueber der
Kopfleiste. `inset` steht deshalb ZUERST und `top` danach.
Und der z-index muss zurueck: 60 stammt aus der Schubladen-Regel, wo er
ueber dem Schleier liegen muss. Hier liegt die Kopfleiste bei 40 — mit
60 malte die Leiste ueber sie. Ab 1024 px ist sie ein Teil des Rasters
und braucht gar keine eigene Ebene. */
inset:auto;
position:sticky;top:var(--kopf);z-index:1;
width:var(--leiste-schmal);max-width:none;
height:calc(100vh - var(--kopf));
transform:none;
flex:0 0 auto;
}
.schleier{display:none}
.schublade-auf{overflow:visible}
.kopf-menue{display:none}
.kopf-punkt{display:inline-flex}
.kopf-nutzer{
/* MITTE AUF MITTE (F-N1-D). Beide sitzen als Flex-Kinder in .kopf-marke
und sind damit lotrecht zentriert — optisch aber nicht, solange das
eine `line-height:1` trägt und das andere die geerbte 1,55: Die höhere
Zeilenbox verschiebt die Grundlinie nach unten. Dieselbe Zeilenhöhe
für beide, und die Mitten liegen übereinander.
15 px statt 13: Der Name ist eine Auskunft, kein Kleingedrucktes. */
display:inline-block;color:var(--sand);
font-size:var(--groesse-3);font-weight:400;line-height:1;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nur-schublade{display:none}
.nur-breit{display:inline-flex}
.nur-schmal{display:none}
/* Die Filterleiste der Suche ist breiter als die Tagesliste: Sie traegt
Auswahlfelder und Zahlenpaare („von … bis"), nicht Zeilen. Die Werte
kommen aus Anlage G des Konzepts; die beiden Token lagen bis O12
ungenutzt in :root (F-P3-BC). */
.leiste-filter{width:var(--leiste-filter-schmal)}
/* Unter 1200 px entfällt der Rettungsmittelname in der Leiste; das
Artzeichen bleibt (E-P3-09). Bei 220 px Leistenbreite bliebe von ihm
ohnehin nur eine Ellipse. */
.eintrag-neben{display:none}
/* Das Aktionsmenü wird ein Aufklappmenü statt eines Blattes. */
.blatt{
position:absolute;inset:auto 0 auto auto;top:calc(var(--knopf) + var(--abstand-1));
width:16rem;
border-radius:var(--radius);
padding:var(--abstand-2);
border:var(--strich) solid var(--linie);
}
.blatt-griff,.blatt-titel,.blatt-abbrechen{display:none}
.blatt-zeile{min-height:var(--knopf)}
}
/* ---- ab 1200: breite Leiste und Zweispalter ------------------------------ */
@media (min-width:1200px){
.leiste{width:var(--leiste)}
.leiste-filter{width:var(--leiste-filter)}
.eintrag-neben{display:block}
.geo{height:var(--karte-desktop)}
.zweispalter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--abstand-4);align-items:start}
}
/* ---- ab 1600: die Karte steht neben Daten und Tabelle -------------------- */
@media (min-width:1600px){
.karte-neben{display:grid;grid-template-columns:1fr var(--karte-neben-breit);
gap:var(--abstand-4);align-items:start}
}
/* == 19. ÜBERSICHTSZEILE ===================================================
*
* Die Einstellungs-Übersicht (E-P3-11): Symbol, Text, Winkel. Auf dem Handy
* ist sie der einzige Weg, der zeigt, WAS es im Bereich gibt.
*/
.uebersicht-zeile{
display:flex;align-items:center;gap:var(--abstand-3);
min-height:calc(var(--knopf) + var(--abstand-3));
padding:0 var(--abstand-2);
border-bottom:var(--strich) solid var(--linie);
color:var(--asphalt);text-decoration:none;
}
.uebersicht-zeile:last-child{border-bottom:0}
.uebersicht-zeile:hover{background:var(--rauch);text-decoration:none}
.uebersicht-zeile .symbol{color:var(--dunkelblau)}
.uebersicht-text{
flex:1 1 auto;min-width:0;
font-family:var(--schrift-kopf);font-weight:600;font-size:var(--groesse-4);
}
.uebersicht-winkel{color:var(--sand)}
/* Blocküberschrift ÜBER einer Karte („Administration") — Mockup 07 zeigt sie
* als gesperrte Versalzeile außerhalb der Karte, nicht als Kartentitel. */
.uebersicht-block{
font-family:var(--schrift-kopf);font-size:var(--groesse-1);
font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--gedaempft);
margin:var(--abstand-5) 0 var(--abstand-2) var(--abstand-1);
}
/* Die Anmeldekarte des Einrichters und der Passwortvergabe ist breiter: Dort
* stehen Formulare mit Feldgruppen, nicht zwei Zeilen. */
/* == 20. TAGESÜBERSICHT UND EINSATZLISTE (O3) ==============================
*
* Kachel, Tabelle mit Farbstreifen, Diensttag-Daten als Lesezustand und das
* Raster, das die Karte ab 1600 px neben Daten und Tabelle stellt.
*/
/* ---- Sichtbarkeitsschwelle 720 -------------------------------------------
* Unter 720 px gibt es KEINE Einsatztabelle, sondern die Kachel (E-P3-32).
* Zwei Hilfsklassen tragen den Wechsel; sie blenden nur AUS und lassen die
* Grundform des Elements unangetastet. */
.nur-ab-720{display:none}
@media (min-width:720px){
/* revert statt block: Die Utility soll die GRUNDFORM wiederherstellen —
* ein (Titelzusatz „· 07:34 Uhr") wurde mit block zur eigenen
* Zeile (Fund aus O4). */
.nur-ab-720{display:revert}
/* Doppelt geschrieben, um jede Baustein-Regel gleicher Spezifität zu
* schlagen (der Sortier-Knopf traegt .karte-sortieren mit display:flex —
* eine Klasse gegen eine Klasse verloere nach Reihenfolge). */
.nur-unter-720.nur-unter-720{display:none}
}
/* ---- Kachel (E-P3-32, Mockup 10) ---------------------------------------- */
.kachelliste{display:flex;flex-direction:column}
.kachel{
display:flex;gap:var(--abstand-3);
padding:var(--abstand-3) 0;
border-bottom:var(--strich) solid var(--linie);
color:var(--asphalt);text-decoration:none;
}
.kachel:last-child{border-bottom:0;padding-bottom:0}
.kachel:first-child{padding-top:0}
.kachel:hover{text-decoration:none;background:var(--rauch)}
.kachel-streifen{
flex:0 0 auto;width:var(--abstand-1);
border-radius:var(--radius-rund);
/* Die Farbe kommt je Einsatz aus den Spur-Token (style-Attribut aus JS —
* ein Wert, kein Stil; die Ausnahme steht in tools/vollstaendigkeit). */
}
.kachel-zeit{
flex:0 0 auto;
font-family:var(--schrift-kopf);font-weight:600;
color:var(--dunkelblau);
min-width:3.2em;
}
.kachel-rumpf{flex:1 1 auto;min-width:0}
.kachel-kopf{display:flex;align-items:baseline;gap:var(--abstand-2)}
.kachel-ort{
flex:1 1 auto;min-width:0;
font-weight:600;font-size:var(--groesse-4);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.kachel-km{flex:0 0 auto;color:var(--gedaempft);font-size:var(--groesse-2)}
.kachel-dx{
color:var(--asphalt);
display:-webkit-box;-webkit-box-orient:vertical;
-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
}
/* In Suche und Zeitraum eine Zeile mit Abschneiden (E-P3-32). */
.kachel-knapp .kachel-dx{-webkit-line-clamp:1;line-clamp:1}
.kachel-fuss{
display:flex;align-items:center;flex-wrap:wrap;
gap:var(--abstand-1) var(--abstand-2);
margin-top:var(--abstand-1);
color:var(--gedaempft);font-size:var(--groesse-2);
}
/* Artzeichen und Datum als erstes Element (Suche, Zeitraum). */
.kachel-art{flex:0 0 auto;color:var(--dunkelblau);align-self:center}
.kachel-datum{
flex:0 0 auto;
font-family:var(--schrift-kopf);font-weight:600;color:var(--dunkelblau);
}
/* Warnzeichen „vorhanden, aber nicht lesbar" in der Kachel. */
.kachel .patfehler{color:var(--rot-tief)}
/* ---- Tabelle: Verfeinerungen (E-P3-32, Mockup 04) ------------------------
* Der Baustein .tabelle steht in Abschnitt 14; hier kommt dazu, was die
* EINSATZtabelle braucht: display:table gegen die Übergangsregel (der
* Überlauf gehört dem Behälter .tabelle-scroll), Farbstreifen, blauer
* Sortierpfeil, dunkelblaue Haken, die klickbare Zeile. */
.tabelle{display:table}
.tabelle-scroll{overflow-x:auto}
.tabelle th.sortable{cursor:pointer;white-space:nowrap}
.tabelle th.sortable:hover{color:var(--blau-tief)}
.tabelle .arrow{color:var(--blau);vertical-align:middle}
.tabelle .arrow .symbol{width:var(--groesse-2);height:var(--groesse-2)}
.tabelle .tabelle-haken{color:var(--dunkelblau)}
.tabelle .streifen{
display:inline-block;width:var(--abstand-1);height:var(--abstand-5);
border-radius:var(--radius-rund);vertical-align:middle;
}
.tabelle .streifen-spalte{width:var(--abstand-3)}
.tabelle tr.clickable{cursor:pointer}
.tabelle tr.clickable:hover td{background:var(--rauch)}
.tabelle tr.clickable:focus-visible{outline-offset:calc(var(--strich-stark) * -1)}
.tabelle td.dash,.tabelle .patfehler{color:var(--gedaempft)}
.tabelle .patfehler .symbol{color:var(--rot-tief)}
.tabelle td.zahl-spalte{text-align:right}
.tabelle td.haken-spalte{text-align:center}
/* Eine Dauer wie „1h 06min" ist EINE Angabe und wird nicht getrennt. */
.tabelle td.zeit-spalte{white-space:nowrap}
/* MITTIG — die dritte Zellenausrichtung neben links (Text) und rechts (Zahl).
* Sie ist fuer Spalten da, deren Inhalt WEDER Flietext noch eine Groesse zum
* Vergleichen ist: eine Rolle, ein Datum, eine Plakette, eine laufende
* Nummer. Solche Werte fluchten nicht sinnvoll an einer Kante, und der
* zentrierte Spaltentitel (F-N1-G) stand ueber ihnen im Leeren.
* ALS KLASSE, nicht als :nth-child — Spalten der Kontentabelle erscheinen
* datengetrieben, und eine Zaehlung rutschte still auf die falsche. */
.tabelle td.mitte-spalte{text-align:center}
/* Sortieren-Link im Kartenkopf — nur dort, wo es keine Spaltenköpfe gibt. */
.karte-sortieren{
display:inline-flex;align-items:center;justify-content:center;
min-width:var(--knopf);min-height:var(--knopf);
color:var(--blau-tief);flex:0 0 auto;
}
.blatt-zeile.aktiv{background:var(--orange-hell);color:var(--dunkelblau)}
/* ---- Wochentag im Titel: lang ab 720, kurz darunter (E-P3-31) ------------ */
.wtag-lang{display:none}
.wtag-kurz{display:inline}
@media (min-width:720px){
.wtag-lang{display:inline}
.wtag-kurz{display:none}
}
/* ---- Diensttag-Daten: Lesezustand (E-P3-31, Mockups 02/03) --------------- */
.tag-lese{display:block}
.tagfeld{
display:grid;grid-template-columns:minmax(7em,auto) 1fr;
gap:var(--abstand-1) var(--abstand-4);
padding:var(--abstand-1) 0;
}
.tagfeld dt{color:var(--gedaempft)}
.tagfeld dd{margin:0;min-width:0;overflow-wrap:anywhere}
.tag-lese-leer{color:var(--gedaempft)}
/* Standort und Rettungsmittel entfallen mobil — sie stehen dort schon in der
* Unterzeile des Titels (Mockup 02). */
.tagfeld-doppelt{display:none}
@media (min-width:720px){
.tagfeld-doppelt{display:grid}
}
.tag-form-fuss{display:flex;align-items:center;gap:var(--abstand-3)}
@media (min-width:720px){
.tag-lese{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 var(--abstand-5)}
/* BESATZUNG UND NOTIZEN UEBER BEIDE SPALTEN (F-N1-E). Standort und
Rettungsmittel sind zwei Wörter und teilen sich die Zeile; die Besatzung
ist eine Aufzählung aus bis zu sieben Rollen mit Namen und brach in der
halben Breite auf zwei bis drei Zeilen um — neben einer leeren rechten
Spalte. Notizen sind Fließtext und haben dasselbe Problem. */
.tagfeld-breit{grid-column:1 / -1}
}
/* ---- Das Raster der Tagesübersicht (E-P3-31) -----------------------------
* Unter 1600 px gewöhnlicher Fluss: Daten, Karte, Einsätze. Ab 1600 rückt
* die Karte in eine rechte Spalte und läuft von der Höhe der Diensttag-Daten
* bis unter die Tabelle. */
@media (min-width:1600px){
.tag-raster{
display:grid;
grid-template-columns:minmax(0,1fr) var(--karte-neben-breit);
grid-template-areas:"daten karte" "einsaetze karte";
grid-template-rows:auto 1fr;
gap:0 var(--abstand-4);
align-items:start;
}
.tag-raster > .karte-daten{grid-area:daten}
.tag-raster > .geo-spalte{grid-area:karte;align-self:stretch}
.tag-raster > .karte-einsaetze{grid-area:einsaetze}
.geo-spalte .geo{height:100%;min-height:var(--karte-desktop)}
}
/* == 21. KARTENMARKER (O3, E-P3-40, Mockup 26) =============================
*
* Der Marker-Satz gilt für alle drei Kartenseiten und entsteht in
* assets/geo.js. Die Zeichnung: Schilder (Haus, Klinik) als weiße, dunkel-
* blau umrandete Kästchen mit Namensschild darunter; der Einsatzort als
* oranger Kreis mit Pin; Start und Ende als blauer bzw. roter Ring UM das
* Schild des Ortes, an dem die Spur beginnt oder endet — beides am selben
* Ort als Doppelring. Richtungspfeile erscheinen erst ab einer Zoomstufe,
* bei der sie nicht gedrängt stehen.
*/
/* KEIN NAMENSSCHILD MEHR (S3/AP7). Die Spalte traegt seit S3 genau ein Kind;
* `gap` und `flex-direction` bleiben trotzdem stehen, weil die Ringklassen
* darauf aufsetzen und ein Marker mit zwei Kindern jederzeit wiederkommen
* kann — dann aber mit ausdruecklichem `iconSize` (siehe geo.js). */
.geo-schild{display:flex;flex-direction:column;align-items:center;gap:var(--abstand-1)}
/* ENGER (S3/AP7): 36 statt 44 px. Die 44 kamen von `--knopf` — der Kasten
* ist aber kein Bedienelement, sondern eine Zeichnung, und die 44-px-Regel
* gilt fuer das, was man DRUECKT. Das Symbol darin bleibt bei 20 px; was
* verschwindet, ist Weissraum zwischen Symbol und Rand (12 px ringsum
* vorher, 8 px jetzt). */
.geo-schild-kasten{
display:flex;align-items:center;justify-content:center;
width:var(--geo-schild);height:var(--geo-schild);
background:var(--schnee);color:var(--dunkelblau);
border:var(--strich-stark) solid var(--dunkelblau);
border-radius:var(--radius);
box-shadow:var(--schatten);
}
/* Ringe liegen als zusätzliche Rahmen um das Kästchen. Der Doppelring ist
* außen rot (Ende) und innen blau (Start) — wie im Mockup. */
.geo-ring-start .geo-schild-kasten{
box-shadow:0 0 0 var(--geo-ring) var(--schnee),
0 0 0 calc(var(--geo-ring) * 2) var(--blau);
}
.geo-ring-ende .geo-schild-kasten{
box-shadow:0 0 0 var(--geo-ring) var(--schnee),
0 0 0 calc(var(--geo-ring) * 2) var(--rot);
}
.geo-ring-beide .geo-schild-kasten{
box-shadow:0 0 0 var(--geo-ring) var(--schnee),
0 0 0 calc(var(--geo-ring) * 2) var(--blau),
0 0 0 calc(var(--geo-ring) * 3) var(--schnee),
0 0 0 calc(var(--geo-ring) * 4) var(--rot);
}
/* OHNE WEISSE UMRANDUNG UND ETWAS KLEINER (S3/AP7). Der weisse Rand war ein
* Rest aus der Zeit vor dem Schatten: Er sollte den Kreis von der Karte
* abheben. Das tut der Schatten, und der Rand machte den Kreis zusaetzlich
* um 4 px breiter, als er aussah. 32 statt 36 px. */
.geo-kreis{
display:flex;align-items:center;justify-content:center;
width:var(--geo-kreis);height:var(--geo-kreis);
background:var(--orange);color:var(--dunkelblau);
border-radius:var(--radius-rund);
box-shadow:var(--schatten);
}
.geo-punkt{
width:var(--abstand-3);height:var(--abstand-3);
border-radius:var(--radius-rund);
border:var(--strich-stark) solid var(--schnee);
}
.geo-pfeil{color:var(--dunkelblau)}
.geo-pfeil .symbol{
filter:drop-shadow(0 0 var(--strich) var(--schnee))
drop-shadow(0 0 var(--strich) var(--schnee));
}
/* Leaflet-DivIcons bringen eine eigene Klasse mit weißem Hintergrund mit —
* unsere Marker zeichnen sich selbst. */
.leaflet-div-icon{background:none;border:0}
/* == 22. EINSATZANSICHT (O4, E-P3-33, Mockups 19/20/21) ====================
*
* Vier Karten (Einsatz, PatientIn, Transport, Reanimation) plus Besatzung;
* die DOM-Reihenfolge ist die MOBILE (Angaben, Karte, Phasen, Reanimation).
* Ab 1200 px ordnet das Raster um: Karte und Einsatzphasen wandern in eine
* klebende rechte Spalte, die Reanimation in die linke — Mockup 20.
*/
@media (min-width:1200px){
.einsatz-raster{
display:grid;
grid-template-columns:minmax(0,1fr) var(--karte-neben-breit);
grid-template-areas:
"einsatz neben" "patientin neben" "transport neben"
"besatzung neben" "reanimation neben" ". neben";
grid-template-rows:repeat(5,min-content) 1fr;
gap:0 var(--abstand-4);
}
.karte-block-einsatz{grid-area:einsatz}
.karte-block-patientin{grid-area:patientin}
.karte-block-transport{grid-area:transport}
.karte-block-besatzung{grid-area:besatzung}
.karte-block-reanimation{grid-area:reanimation}
.einsatz-neben{
grid-area:neben;
position:sticky;top:calc(var(--kopf) + var(--abstand-4));
align-self:start;
}
.einsatz-neben .geo{height:var(--karte-desktop)}
}
/* Die Leseansicht der Einsatz-Karten ist einspaltig — anders als die
* Diensttag-Daten, deren Zweispalter volle Inhaltsbreite hat. */
.einsatz-raster .tag-lese{display:block}
/* Kleinzeile unter einem Lesewert: Höhe, Luftlinie und Strecke unter dem
* Einsatzort, das Alter unter dem Geburtsdatum (Mockup 19). */
.lese-klein{display:block;color:var(--gedaempft);font-size:var(--groesse-2)}
/* Die Plaketten am Fuß der Einsatz-Karte — dieselben wie auf der Kachel. */
.karte-inhalt .zeile-plaketten{margin-top:var(--abstand-3)}
/* ---- Einsatzphasen als Zeilenliste (Mockup 19) ---------------------------
* Nummer gedämpft, Name, rechts die Uhrzeit mit dem Minutenabstand zur
* vorigen Phase klein darunter. Die angetippte Zeile leuchtet orange und
* hebt ihr Teilstück auf der Karte hervor (einsatz.php). */
.phasen-zeile{
display:grid;
grid-template-columns:var(--symbol-gross) minmax(0,1fr) auto;
gap:var(--abstand-3);align-items:center;
padding:var(--abstand-2) var(--abstand-4);
border-top:var(--strich) solid var(--linie);
cursor:pointer;
}
.phasen > .phasen-zeile:first-child{border-top:0}
.phasen-nr{color:var(--gedaempft)}
.phasen-zeit{text-align:right;font-weight:600;color:var(--dunkelblau)}
.phasen-abstand{
display:block;font-weight:400;
color:var(--gedaempft);font-size:var(--groesse-2);
}
.phasen-zeile.hl{background:var(--orange-hell)}
.phasen-zwischentitel{
font-size:var(--groesse-3);color:var(--dunkelblau);
padding:var(--abstand-3) var(--abstand-4) 0;
}
/* ---- Phasenmarker auf der Karte (Bestand, neu eingekleidet) --------------
* Kleine Nummernschilder an den GPS-Positionen der Phasen; der Umschalter
* ist ein Leaflet-Control mit Text — Leaflets eigene 26-px-Knopfbreite
* würde ihn abschneiden. */
.pm-chip{
display:flex;align-items:center;justify-content:center;
width:var(--symbol-gross);height:var(--symbol-gross);
background:var(--schnee);color:var(--dunkelblau);
border:var(--strich) solid var(--dunkelblau);
border-radius:var(--radius-klein);
font:600 var(--groesse-1)/1 var(--schrift-text);
box-shadow:var(--schatten);
}
.pm-chip.hl{background:var(--orange);border-color:var(--orange-tief)}
.geo .map-ctrl-phase a{
width:auto;height:auto;
padding:var(--abstand-1) var(--abstand-2);
font:600 var(--groesse-1)/var(--zeile) var(--schrift-text);
color:var(--dunkelblau);
}
/* Der Vollbildknopf teilt den aktiven Zustand mit dem Phasenumschalter — ein
* Selektor mehr, keine zweite Regel (O11). Vorher hatte `a.active` am
* Vollbildknopf gar keine: Der Knopf hiess im Vollbild „Vollbild verlassen"
* und sah aus wie vorher. */
.geo .map-ctrl-phase a.active,
.geo .map-ctrl-fs a.active{background:var(--orange-hell)}
/* ---- VOLLBILD (O11) ------------------------------------------------------
*
* ZWEI WEGE, EIN AUSSEHEN. `map_fullscreen.js` nimmt die Fullscreen-API,
* wenn es sie gibt, und sonst einen CSS-Rueckfall — „relevant v. a. iOS
* Safari, das requestFullscreen() fuer beliebige Elemente nicht
* unterstuetzt" (Dateikopf des Skripts).
*
* DER RUECKFALL WAR TOT. Die Klassen `map-fs` und `map-fs-lock` hatten seit
* dem Neubau des Stylesheets (Web 9.0.0, O1) keine Regel mehr — auf einem
* iPhone passierte beim Druck auf „Vollbild" NICHTS: Die Karte blieb, wie
* sie war, nur der Knopf hiess jetzt „Vollbild verlassen". Vier Monate
* unbemerkt, weil der Weg nur dort genommen wird und die Bildaufnahme den
* Vollbildzustand nie herstellt.
*
* Der Selektor heisst jetzt `.geo`, nicht mehr `.map`: Der Kartenbehaelter
* wurde in O1 umbenannt. Die alten Zeilen zurueckzukopieren haette den
* Fehler stehen lassen.
*
* z-index 70 statt der alten 2000: Das ist die Ebene des Blatts. Hoehere
* Werte braucht die Anwendung nicht mehr, seit `.geo` einen eigenen
* Stapelkontext hat (Abschnitt 16, oben).
*
* Die `:fullscreen`-Zeile ist auch am Schreibtisch noetig: Das UA-Blatt
* setzt Groesse und Rand mit `!important`, den `border-radius` von `.geo`
* aber nicht — die Karte haette im Vollbild abgerundete Ecken auf schwarzem
* Grund. */
.geo.map-fs{
position:fixed;inset:0;z-index:70;
width:100%;height:100%;
margin:0;border-radius:0;
}
body.map-fs-lock{overflow:hidden}
.geo:fullscreen{margin:0;border-radius:0}
/* ---- Ring ohne Schild: Start/Ende der Spur abseits von Standort/Ziel ----- */
.geo-ringpunkt{
display:block;
width:var(--abstand-4);height:var(--abstand-4);
border-radius:var(--radius-rund);
background:var(--schnee);
border:var(--geo-ring) solid var(--blau);
box-shadow:var(--schatten);
}
.geo-ringpunkt-ende{border-color:var(--rot)}
.geo-ringpunkt-beide{
border-color:var(--blau);
box-shadow:0 0 0 var(--strich-stark) var(--schnee),
0 0 0 calc(var(--geo-ring) * 2) var(--rot);
}
/* == 23. EINSATZFORMULAR (O5, E-P3-34, Mockups 22/23/25) ===================
*
* Karten statt Rahmengruppen; Ja/Nein als Schalter mit eingerückten
* Detailfeldern; Phasen- und Reanimationszeilen mit 44-px-Zeitfeld und
* rotem Entfernen-Knopf; Ortsfeld mit Lupe und Pin; Speichern-Leiste unten.
* Ab 1200 px zwei Kartenspalten: links PatientIn, Einsatz, Transport —
* rechts der Rest (die DOM-Reihenfolge ist die mobile).
*/
@media (min-width:1200px){
.form-raster{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 var(--abstand-4);
align-items:start;
}
}
/* Zwei kurze Felder in einer Zeile (Nachname/Vorname, Geburtsdatum/Alter) —
* auch mobil, wie im Mockup. */
.fld-reihe,.patname{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 var(--abstand-3);
}
/* Detailfelder eines Schalters: eingerückt hinter einer orangen Linie
* (Mockup 22 Mitte — Cycles unter dem Windeneinsatz). */
.childfields{
margin:0 0 var(--abstand-3) var(--abstand-2);
padding-left:var(--abstand-4);
border-left:var(--strich-stark) solid var(--orange);
}
.fld-sub{margin-left:0}
/* Hinweistexte im Formular. Sie hiessen bis Web 9.11.1 „muted small" und
* bezogen Farbe und Groesse aus der Uebergangsschicht; seit deren Auflösung
* (O11) steht beides hier. */
.feld-hinweis{color:var(--gedaempft);font-size:var(--groesse-2)}
/* Steht der Hinweis VOR einem Feld (Gefahrenzone der Kontoseite: erst die
* Folgen, dann die Eingabe), braucht er Abstand nach unten — p hat global
* keinen. Steht er danach, ist der Abstand des Feldes schon da. */
.feld-hinweis + .feld,.feld-hinweis + form{margin-top:var(--abstand-3)}
/* KLEINTEXT GEHOERT ZU DEM FELD UEBER IHM (F-N1-I). `label` traegt
* `margin-bottom: --abstand-3` als Abstand zum NAECHSTEN Feld. Folgt ein
* `.feld-klein` („Zufahrt, Besonderheiten, Lage vor Ort"), stand der Hinweis
* damit 16 px unter seinem eigenen Feld und 4 px ueber dem naechsten — er
* las sich als Ueberschrift des folgenden statt als Erlaeuterung des
* vorigen. Der Abstand wandert vom Feld hinter den Hinweis. */
label:has(+ .feld-klein){margin-bottom:0}
label + .feld-klein{margin-bottom:var(--abstand-3)}
/* ---- Ortsfeld: Feld + Lupe + Pin (E-P3-34) ------------------------------- */
/* DIESELBE NAEHE WIE UEBERALL SONST (F-N1-I). Beim Muster
* `Text ` liegen 4 px zwischen Beschriftung und Feld
* (`label > input{margin-top: --abstand-1}`). Das Ortsfeld kann dieses Muster
* nicht benutzen — sein Feld steht in einer Zeile mit Lupe und Pin —, und so
* griff nur `label{margin-bottom: --abstand-3}`: 12 px statt 4. „Einsatzort"
* hing dadurch zwischen den Feldern, statt zu seinem zu gehoeren. */
.loc-widget > label{margin-bottom:var(--abstand-1)}
/* Und der Block als Ganzes braucht den Abstand nach unten, den ein `label`
* mitbraechte — sonst klebte „Beschreibung Einsatzort" am Koordinaten-Chip. */
.loc-widget{margin-bottom:var(--abstand-3)}
.ortsfeld-zeile{display:flex;gap:var(--abstand-2);align-items:stretch}
.ortsfeld-zeile input{flex:1 1 auto;min-width:0}
.ortsfeld-zeile .knopf-symbol{flex:0 0 auto}
.ortsfeld-aktionen{position:relative;display:inline-flex}
/* Vorschlagsliste unter dem Feld (Photon, Stammdaten, Koordinaten). */
.loc-suggest{
margin:var(--abstand-1) 0 0;
background:var(--schnee);
border:var(--strich) solid var(--linie-stark);
border-radius:var(--radius-klein);
box-shadow:var(--schatten);
overflow:hidden;
}
.loc-suggest li{padding:var(--abstand-2) var(--abstand-3);cursor:pointer}
.loc-suggest li:hover{background:var(--rauch)}
.locstate{color:var(--gedaempft);font-size:var(--groesse-2);margin:var(--abstand-1) 0 0}
.locstate:empty{display:none}
.locstate-fehler{color:var(--rot-tief)}
/* ---- Chips (Koordinaten am Ortsfeld, gewählte Rettungsmittel) ------------ */
.rmchips{display:flex;flex-wrap:wrap;gap:var(--abstand-1);align-items:center}
.rmchip{
display:inline-flex;align-items:center;gap:var(--abstand-1);
background:var(--blau-hell);color:var(--dunkelblau);
border-radius:var(--radius-rund);
padding:var(--abstand-1) var(--abstand-2);
font-size:var(--groesse-2);font-weight:600;
}
.rmx{
border:0;background:none;color:inherit;cursor:pointer;
min-height:0;padding:0 var(--abstand-1);
font-size:var(--groesse-3);line-height:1;
}
/* Eingabefeld mit Chips darin (Weitere Rettungsmittel, Mockup 22). */
.rmbox{position:relative}
.rmfeld{
display:flex;flex-wrap:wrap;gap:var(--abstand-1);align-items:center;
background:var(--schnee);
border:var(--strich) solid var(--linie-stark);
border-radius:var(--radius-klein);
padding:var(--abstand-1) var(--abstand-2);
min-height:var(--knopf);
}
.rmeingabe,.rmfeld .rmeingabe{
flex:1 1 8rem;min-width:0;border:0;min-height:0;
padding:var(--abstand-1);background:none;
}
.rmlist{
position:absolute;left:0;right:0;z-index:20;
background:var(--schnee);
border:var(--strich) solid var(--linie-stark);
border-radius:var(--radius-klein);
box-shadow:var(--schatten);
overflow:hidden;
}
.rmlist .rmopt{
display:block;width:100%;text-align:left;
background:none;border:0;border-radius:0;min-height:var(--knopf);
padding:var(--abstand-2) var(--abstand-3);cursor:pointer;
}
.rmlist .rmopt:hover{background:var(--rauch)}
/* ---- Phasen- und Reanimationszeilen (Mockup 22/25) ----------------------- */
.phasen-eingabe{
display:grid;
grid-template-columns:minmax(0,1fr) calc(var(--knopf) * 2) var(--knopf);
gap:var(--abstand-2);align-items:center;
margin-bottom:var(--abstand-3);
}
.phasen-eingabe .zeitfeld{text-align:center;width:auto}
.phasen-eingabe label{margin:0}
.rea-sitzung{
border:var(--strich) solid var(--linie);
border-radius:var(--radius);
padding:var(--abstand-3);
margin-bottom:var(--abstand-3);
}
.rea-ereignisse{margin-left:var(--abstand-2);padding-left:var(--abstand-3);
border-left:var(--strich-stark) solid var(--orange)}
.zeile-weg{color:var(--rot)}
/* ---- Schneide-Bereich (S4/A2b, E-S4-17) -----------------------------------
*
* Der aufklappbare Bereich unter einer Ruhesegment-Zeile: Aus dem Segment
* wird ein Einsatz herausgeschnitten. Er GEHÖRT ZUR ZEILE DARÜBER, und das
* sagt der orange Randstrich — dieselbe Form wie `.rea-ereignisse`, kein
* neuer Gedanke (E-P3-28).
*
* Kein eigener Farbwert und keine eigene Größe: Alles hier kommt aus den
* vorhandenen Token. Die Zeitleiste benutzt `--sand` für die volle Dauer und
* `--orange` für das Gewählte — dieselbe Aussage wie überall sonst („dieser
* Teil ist gemeint"). */
.schnitt-bereich{
margin:var(--abstand-2) 0 var(--abstand-4) var(--abstand-2);
padding:var(--abstand-3) 0 var(--abstand-3) var(--abstand-3);
border-left:var(--strich-stark) solid var(--orange);
}
/* Untereinander, ab 720 px nebeneinander und gleich breit — dieselbe Form und
* dieselbe Schwelle wie `.listen-form-felder`. `grid-auto-flow:column` statt
* einer festen Spaltenzahl, weil die Reihe mal zwei und mal drei Felder trägt;
* eine feste Grundbreite in Pixeln bräuchte eine Zahl, die in keinem Token
* steht. */
.schnitt-felder{display:grid;gap:var(--abstand-3)}
.schnitt-felder .feld{min-width:0}
@media (min-width:720px){
.schnitt-felder{grid-auto-flow:column;grid-auto-columns:1fr}
}
/* Die Zeitleiste. Sie ist eine ANZEIGE und keine Bedienung: Geführt wird über
* die Zeitfelder, die Leiste zeigt das Ergebnis. Deshalb kein Ziehen an den
* Griffen — es gäbe eine zweite Eingabe für dieselbe Zahl, und die beiden
* liefen auseinander (Mockup A0, Vorschlag 2).
*
* SIE IST HTML UND KEIN SVG, und das war eine Korrektur: Ein SVG mit
* `viewBox` skaliert seine Beschriftung mit der Breite. Auf 1280 px stand sie
* richtig, auf 390 px war sie sechs Pixel hoch und unlesbar — dieselbe Zahl
* in zwei Größen, je nach Fenster. Mit Prozentbreiten auf gewöhnlichen
* Elementen bleibt der Text der Text und nur der Balken skaliert. */
.schnitt-vorschau{
background:var(--rauch);
border-radius:var(--radius);
padding:var(--abstand-3) var(--abstand-3) var(--abstand-2);
margin-bottom:var(--abstand-3);
}
/* Die Leiste IST der Balken — die Beschriftungen hängen mit `bottom:100%`
* darüber und mit `top:100%` darunter. Das erspart gerechnete Versätze, und
* damit die einzigen Zahlen, für die es hier kein Token gäbe. Der obere
* Abstand hält den Platz für die Griffbeschriftung frei. */
.schnitt-leiste{position:relative;height:var(--abstand-4);margin-top:var(--abstand-5)}
.schnitt-bahn{
position:absolute;inset:0;
background:var(--sand);border-radius:var(--radius-rund);
}
.schnitt-wahl{
position:absolute;top:0;bottom:0;
background:var(--orange);border-radius:var(--radius-rund);
}
/* Schon einmal Geschnittenes: dieselbe Fläche, aber blasser — es ist kein
* zweiter gewählter Bereich, sondern einer, der nicht mehr da ist. Ein
* zweiter Vollton hieße „auch das ist gemeint". */
.schnitt-weg{
position:absolute;top:0;bottom:0;
background:var(--gedaempft);opacity:.35;
}
/* Der Griff ragt oben und unten über den Balken hinaus, damit die Kante auch
* dort sichtbar ist, wo Balken und Auswahl dieselbe Höhe haben. */
.schnitt-griff{
position:absolute;top:calc(-1 * var(--abstand-1));
bottom:calc(-1 * var(--abstand-1));
width:var(--strich-stark);background:var(--dunkelblau);
}
/* Die Beschriftung am Griff: mittig darüber, und `translateX(-50%)` statt
* einer gerechneten Verschiebung — die Textbreite kennt nur der Browser. */
.schnitt-marke{
position:absolute;bottom:calc(100% + var(--abstand-1));
transform:translateX(-50%);
white-space:nowrap;font-size:var(--groesse-2);color:var(--dunkelblau);
}
.schnitt-raender{
display:flex;justify-content:space-between;
font-size:var(--groesse-2);color:var(--gedaempft);
margin-top:var(--abstand-2);
}
/* Orange Anlegen-Wege in Kartenfüßen („+ Phase hinzufügen"). */
.anlegen-link{
display:inline-flex;align-items:center;gap:var(--abstand-2);
min-height:var(--knopf);
color:var(--orange-tief);font-family:var(--schrift-kopf);font-weight:600;
}
.karte-fussweg{margin:0}
/* ---- Kartendialog der Ortswahl (Fadenkreuz, E-P3-34) --------------------- */
.dialog-karte{width:min(92vw, calc(var(--karte-neben-breit) * 1.4))}
.ortswahl-karte{position:relative}
.ortswahl-karte .geo{height:var(--karte-desktop);margin-bottom:0}
.ortswahl-kreuz{
position:absolute;left:50%;top:50%;
width:var(--symbol-gross);height:var(--symbol-gross);
transform:translate(-50%,-50%);
pointer-events:none;z-index:1;
}
.ortswahl-kreuz::before,.ortswahl-kreuz::after{
content:"";position:absolute;background:var(--dunkelblau);
box-shadow:0 0 0 var(--strich) var(--schnee);
}
.ortswahl-kreuz::before{left:50%;top:0;bottom:0;width:var(--strich-stark);
transform:translateX(-50%)}
.ortswahl-kreuz::after{top:50%;left:0;right:0;height:var(--strich-stark);
transform:translateY(-50%)}
/* Blatt-Zeilen gibt es seit O5 auch als (Ortswahl) — dieselbe
* Gestalt wie die Verweise, ohne Knopf-Grundform. */
button.blatt-zeile{
width:100%;background:none;border:0;text-align:left;cursor:pointer;
border-radius:0;
}
/* == 24. SUCHE (O6, E-P3-36, Mockups 27/28) ================================
*
* Die Filterspalte IST die Leiste (O2) — hier steht nur, was ihren Inhalt
* ausmacht: Akkordeongruppen mit einer Zahl im Kopf, von/bis nebeneinander,
* Wochentage und Dreiwert als Segmentwahl, der Fuß mit „Zurücksetzen" und —
* nur in der Schublade — „n Treffer zeigen".
*/
.filtergruppe > .akkordeon-zeile{padding:0 var(--abstand-3)}
.filterzahl{flex:0 0 auto;margin-left:auto}
.filtergruppe .akkordeon-text{flex:1 1 auto}
.filterfelder{padding:var(--abstand-2) var(--abstand-3) var(--abstand-4)}
/* HIER STAND `.filterfelder label{margin-bottom:var(--abstand-3)}` — und
* setzte damit GENAU DEN WERT, den die Grundform `label` schon setzt. Eine
* Regel ohne eigene Wirkung, aber mit höherer Spezifität (0,1,1): Sie schlug
* jedes `.segment-taste{margin:0}` (0,1,0) und hielt den toten Streifen unter
* den Segmenttasten der Filterleiste fest, nachdem er überall sonst fort war
* (F-N1-L). Eine Dublette ist nie harmlos — sie tut nichts, bis sie etwas
* verhindert. */
/* Ab 1024 px ist die Segmentwahl inline (E-P3-30) — in der Filterleiste
* soll sie die Spaltenbreite füllen wie jedes Feld darüber. */
.filterfelder .segment{display:flex;width:100%}
/* Am UNTEREN Rand ausrichten — als Netz, nicht als Reparatur: Seit die
* Paare „von"/„bis" heißen und ihren Namen über sich tragen (F-N1-J), sind
* beide Beschriftungen gleich kurz und stehen ohnehin auf einer Höhe. Bliebe
* eine künftig doch einmal länger, stünden die Felder trotzdem nebeneinander
* und nicht versetzt. */
.filterfelder .fld-reihe{gap:0 var(--abstand-2);align-items:end}
.filterfelder .fld-reihe label{display:flex;flex-direction:column;justify-content:flex-end}
/* Beschriftung über einer Gruppe von Bedienelementen (Segmentwahl), dort wo
* ein nicht taugt: Es kann nur EIN Element beschriften. Die
* Beschriftung selbst ist `.feld-label` aus Abschnitt 11 — hier stand sie
* bis S3/AP2 ein zweites Mal, mit demselben Wert und ohne font-weight, und
* setzte damit nichts, was die erste Regel nicht schon gesetzt hätte. Eine
* Änderung am Abstand wäre an einer der beiden Stellen hängengeblieben. */
.feldblock{margin-bottom:var(--abstand-3)}
/* Segmentwahl in der Filterspalte: leiser als die Segmentwahl im Inhalt —
* hell orange mit orangem Rahmen statt voller Fläche (Mockup 27/28). Bis zu
* sieben davon stehen untereinander; sieben orange Balken wären ein Alarm,
* und gemeint ist eine Einstellung. */
.segment-filter .segment-taste{padding:0 var(--abstand-2)}
.segment-filter .segment-box:checked + .segment-taste{
background:var(--orange-hell);color:var(--asphalt);
box-shadow:inset 0 0 0 var(--strich-stark) var(--orange);
}
/* Mehrfachwahl (Wochentage): dieselben Tasten, aber Kästchen statt
* Radioknöpfen — mehrere Tage gleichzeitig sind der Regelfall. Sieben Tasten
* müssen nebeneinander in die 260 px breite Leiste passen; deshalb ohne
* Innenabstand und mit gleicher Breite. */
.segment-mehrfach .segment-taste{
padding:0 var(--abstand-1);flex:1 1 0;min-width:0;
font-size:var(--groesse-2);
}
.filterfuss{display:flex;flex-direction:column;gap:var(--abstand-2)}
/* ---- Suchzeile: Feld und Filterknopf (Mockup 27) ------------------------- */
.suchzeile{display:flex;gap:var(--abstand-2);align-items:stretch;margin-bottom:var(--abstand-3)}
.suchfeld{position:relative;flex:1 1 auto;display:flex;align-items:center}
.suchfeld input{
width:100%;min-height:var(--suchfeld);
padding-left:calc(var(--abstand-3) * 2 + var(--symbol-gross));
padding-right:calc(var(--abstand-3) * 2 + var(--symbol-gross));
font-size:var(--groesse-4);
}
.suchfeld-lupe{
position:absolute;left:var(--abstand-3);
color:var(--gedaempft);pointer-events:none;
}
.suchfeld-x{
position:absolute;right:var(--abstand-2);
display:flex;align-items:center;justify-content:center;
width:var(--knopf);height:var(--knopf);
border:0;background:none;color:var(--gedaempft);cursor:pointer;
}
.suchfeld-x:hover{color:var(--asphalt)}
.filterknopf{flex:0 0 auto;min-height:var(--suchfeld)}
.suchhinweis{margin-bottom:var(--abstand-3)}
/* Ein Link mitten im Fließtext, der aufklappt statt zu navigieren. */
.leiser-link{
border:0;background:none;padding:0;cursor:pointer;
color:var(--blau-tief);font:inherit;font-weight:600;
}
.suchsyntax{
background:var(--schnee);
border:var(--strich) solid var(--linie);
border-radius:var(--radius);
padding:var(--abstand-3) var(--abstand-4);
margin-bottom:var(--abstand-3);
}
.suchsyntax li{margin-bottom:var(--abstand-1)}
.suchsyntax code{
background:var(--rauch);border-radius:var(--radius-klein);
padding:0 var(--abstand-1);
}
.filterplaketten{margin-bottom:var(--abstand-3)}
/* ---- Trefferkarte -------------------------------------------------------- */
.sortieren-aktion{margin-left:auto;position:relative}
.karte-treffer .karte-aktion{margin-left:0}
/* Das Trefferwort hell orange hinterlegt (E-P3-36) — die Fläche trägt hier
* keine Bedeutung allein, sie zeigt nur, wo der Begriff steht; der Text
* bleibt Asphalt und damit voll lesbar. */
mark.treffer{background:var(--orange-hell);color:inherit;border-radius:var(--radius-klein)}
/* Die Nachladezeile unter der Tabelle (missiontable.js, 200 Zeilen je Seite). */
.mehrzeile{
display:flex;flex-wrap:wrap;gap:var(--abstand-3);
padding:var(--abstand-3) var(--abstand-4) 0;
}
/* Artzeichen, Datum und Beginn der Kachel stehen in einer Zeile (Mockup 27);
* das Zeichen sitzt vor dem Datum und nimmt die Farbe der Zeile an. */
.kachel-art{margin-right:var(--abstand-1);color:var(--dunkelblau)}
.kachel-art .symbol{vertical-align:-.15em}
.kachel-datum{white-space:nowrap}
/* Mit Datum braucht die Zeitspalte mehr Platz als die reine Uhrzeit. */
.kachel-zeit:has(.kachel-datum){min-width:0;flex:0 0 auto}
/* ===========================================================================
* 25 ZEITRAUM (P3/O7, E-P3-37)
*
* Die Übersicht eines Monats oder Jahres. Neu daran ist weniger die
* Gestaltung als der ZUSCHNITT: „Gemischt" zeigt vier Kennzahlen statt acht,
* und unter 720 px sind von jedem Satz vier sichtbar, der Rest steht hinter
* „Weitere Statistik".
*
* Die Kachel selbst ist der Baustein aus O1 (`.kennzahl`, ui_kennzahl) — hier
* stehen nur Raster, mobile Kappung und die Segmentwahl in der Titelzeile.
* ======================================================================== */
/* Spaltenzahl folgt dem Satz: vier Kacheln in vier Spalten, acht in zwei
* Reihen zu vier, zehn in zwei Reihen zu fünf — so bleibt keine Reihe halb
* leer. Unter 720 px sind es immer zwei (Grundregel von .kennzahl-raster). */
@media (min-width:720px){
.kennzahl-raster-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kennzahl-raster-5{grid-template-columns:repeat(5,minmax(0,1fr))}
}
/* MOBIL VIER (E-P3-37). Die übrigen Kacheln stehen im Markup und sind nur
* verborgen — nicht ausgelassen: Der Knopf „Weitere Statistik" klappt sie
* auf, ohne dass etwas nachgeladen oder neu gerechnet würde. Deshalb
* `display:none` und nicht das `hidden`-Attribut: Letzteres gehört dem
* Zustand „gibt es nicht", nicht dem Zustand „gerade eingeklappt". */
.kennzahl-mehr{display:none}
.kennzahl-raster-offen .kennzahl-mehr{display:block}
.kennzahl-mehr-knopf{
display:flex;align-items:center;gap:var(--abstand-1);
margin:calc(-1 * var(--abstand-2)) 0 var(--abstand-4);
}
/* Der Winkel zeigt im Ruhezustand nach unten — winkel.svg tut das von sich
* aus (Abschnitt 5), es braucht dafür keine Drehung. Beim Aufklappen dreht
* er sich nach oben. */
.kennzahl-mehr-knopf .symbol{transition:transform var(--dauer)}
.kennzahl-mehr-knopf.offen .symbol{transform:rotate(180deg)}
@media (min-width:720px){
/* Ab hier gibt es nichts zu verbergen: Der ganze Satz steht da, und der
Knopf ist ohnehin `nur-unter-720`. */
.kennzahl-mehr{display:block}
}
/* Die Segmentwahl steht in den AKTIONEN der Titelzeile: ab 720 px rechts
* neben dem Titel (Mockup 29), darunter vollbreit unter dem Titel
* (Mockup 31). `width:100%` an der Wahl allein genügt dafür nicht —
* `.titelzeile-aktionen` ist ein Flex-Kind mit `flex:0 0 auto` und schrumpft
* auf die Breite seines Inhalts. Der Aktionsblock muss deshalb mobil selbst
* umbrechen und die volle Breite nehmen; die drei Segmente teilen sie sich
* dann zu gleichen Teilen. */
.titelzeile-aktionen:has(.segment-art){flex:1 0 100%;margin-left:0}
.segment-art{width:100%}
.segment-art .segment-taste{flex:1 1 0;text-align:center}
@media (min-width:720px){
.titelzeile-aktionen:has(.segment-art){flex:0 0 auto;margin-left:auto}
.segment-art{width:auto}
.segment-art .segment-taste{flex:0 0 auto}
}
/* DIE MARKIERUNG DES ANGEZEIGTEN ZEITRAUMS in der Leiste (E-P3-37). Sie
* sitzt auf der Zeile des Akkordeons, nicht auf dem `` selbst —
* sonst färbte sich auch der aufgeklappte Inhalt. Dieselben Farben wie beim
* aktiven Diensttag (`.eintrag.aktiv`), damit „hier stehe ich" überall
* gleich aussieht. */
.akkordeon.aktiv > .akkordeon-zeile{
background:var(--orange-hell);
box-shadow:inset var(--strich-stark) 0 0 var(--orange);
}
.akkordeon.aktiv > .akkordeon-zeile .akkordeon-text{color:var(--dunkelblau)}
/* Die Zeile des Extremwert-Trägers, hell orange statt rot (E-P3-37): Rot
* heißt in dieser Oberfläche „Aufmerksamkeit" — ein Höchstwert ist kein
* Fehler. Gilt für die Tabellenzeile ab 720 px und die Kachel darunter. */
.hl-extrem{background:var(--orange-hell)}
tr.hl-extrem td{background:var(--orange-hell)}
/* ===========================================================================
* 26 EINSTELLUNGEN UND VERWALTUNGSLISTEN (P3/O8, E-P3-35)
* ======================================================================== */
/* WAHLLISTE (.wahlliste) — eine aus vieren, untereinander, 44 px hoch.
* Freigegeben mit Mockup 13. Die Radios selbst sind unsichtbar; die Zeile
* ist das Bedienelement, und der Punkt links wird gezeichnet — so lässt er
* sich färben und auf Größe bringen, was ein Systemradio nicht zulässt.
*
* SCHLICHTE LISTE STATT UMRANDETER EINZELZEILEN (S3/AP8). Jede Zeile trug
* einen eigenen Rahmen auf eigener Fläche und stand mit 8 px Abstand zur
* nächsten — vier Kästchen untereinander, die aussahen wie vier Karten und
* nur eine Wahl sind. Die Auswahl braucht diese Umrandung nicht: Sie zeigt
* sich am Punkt links und, bei der gewählten Zeile, an der Fläche.
* Was bleibt, sind die 44 px Zeilenhöhe und der gezeichnete Punkt. */
.wahlliste{display:flex;flex-direction:column}
input[type=radio].wahl-box{position:absolute;opacity:0;width:0;height:0;min-height:0}
.wahl-zeile{
display:flex;align-items:center;gap:var(--abstand-3);
min-height:var(--knopf);
padding:var(--abstand-2) var(--abstand-3);
border-radius:var(--radius-klein);
cursor:pointer;
}
.wahl-zeile:hover{background:var(--rauch)}
.wahl-punkt{
flex:0 0 auto;width:var(--symbol);height:var(--symbol);
border:var(--strich-stark) solid var(--linie-stark);
border-radius:var(--radius-rund);
background:var(--schnee);
}
.wahl-text{flex:1 1 auto;font-weight:600;color:var(--dunkelblau)}
.wahl-zusatz{flex:0 0 auto;color:var(--gedaempft);font-size:var(--groesse-2)}
/* Gewählt: hell orange mit orangem Rahmen und gefülltem Punkt — dieselbe
* Sprache wie die aktive Kennzahl-Kachel und der aktive Leisteneintrag. */
.wahl-box:checked + .wahl-zeile{background:var(--orange-hell)}
.wahl-box:checked + .wahl-zeile .wahl-punkt{
border-color:var(--orange);
box-shadow:inset 0 0 0 var(--strich-stark) var(--schnee);
background:var(--orange);
}
/* Der Fokusring gehört an die ZEILE, nicht an das versteckte Radio: Sonst
* ist die Tastaturbedienung unsichtbar. */
.wahl-box:focus-visible + .wahl-zeile{outline:var(--strich-stark) solid var(--blau);outline-offset:var(--strich-stark)}
/* Unter 480 px rutscht der Zusatz unter den Text — „zurzeit Hubschrauber
* (RTH)" neben „Standard der Installation" sprengt sonst jede Zeile. */
@media (max-width:479px){
.wahl-zeile{flex-wrap:wrap}
.wahl-zusatz{flex:1 0 100%;padding-left:calc(var(--symbol) + var(--abstand-3))}
/* DAS WORTZEICHEN EINE STUFE KLEINER (F-N1-D). „Gen-EM Einsatzdoku" braucht
bei 19 px genau 193 px; bei 360 px Fenster bleiben neben Menüknopf, Logo
und Zahnrad 187 übrig — sechs zu wenig, und die Marke endete auf einer
Ellipse. Bei 16 px sind es 163 px und damit Luft. Die Stufe steht in der
Skala; eine Zwischengröße gäbe es dafür nicht. */
.kopf-name{font-size:var(--groesse-4)}
}
/* PASSWORTSTÄRKE als Balken (E-P3-16, Mockup 11). Vier Segmente, gefüllt
* nach Stufe; die Farbe verstärkt nur, was die Zahl der Segmente schon
* sagt. Vorher war es eine Textzeile in fünf Farben, darunter Grün und
* Gelb — zwei Töne, die es in der Marke nicht gibt. */
.pwstaerke{
display:flex;align-items:center;flex-wrap:wrap;
gap:var(--abstand-2);
font-size:var(--groesse-2);color:var(--gedaempft);
}
.pwstaerke:empty{display:none}
.pwstaerke-balken{display:flex;gap:var(--abstand-1);flex:0 0 auto}
.pwstaerke-balken > span{
width:var(--balken-glied);height:var(--strich-balken);
border-radius:var(--radius-klein);
background:var(--linie);
}
.pwstaerke-text{font-weight:600;color:var(--dunkelblau)}
/* Der Hinweissatz steht in eigener Zeile — er ist zwei Zeilen lang und
* schöbe die Stufe sonst aus dem Bild. */
.pwstaerke-hinweis{flex:1 0 100%}
/* Rot bis Stufe 0, orange für 1–2, Dunkelblau ab 3: dieselbe Bedeutung wie
* überall — Rot ist ein Halt, Orange ein Hinweis, Dunkelblau die Ruhe. */
.pwq-0 .pwstaerke-balken > span.an{background:var(--rot)}
.pwq-0 .pwstaerke-text{color:var(--rot-tief)}
.pwq-1 .pwstaerke-balken > span.an,
.pwq-2 .pwstaerke-balken > span.an{background:var(--orange)}
.pwq-1 .pwstaerke-text,
.pwq-2 .pwstaerke-text{color:var(--orange-tief)}
.pwq-3 .pwstaerke-balken > span.an,
.pwq-4 .pwstaerke-balken > span.an{background:var(--dunkelblau)}
/* VERWALTUNGSLISTEN (E-P3-35). Erklärtext auf drei Zeilen unter dem Titel,
* dann die Karte mit Zeilen und darunter — IN derselben Karte — das
* Formular zum Anlegen. */
.seiten-erklaerung{
max-width:var(--lesespalte);
margin:calc(-1 * var(--abstand-2)) 0 var(--abstand-4);
color:var(--gedaempft);
}
/* Der negative Rand oben ist auf die TITELZEILE abgestimmt, die ihren eigenen
* Abstand nach unten mitbringt. Steht die Erklärung dagegen direkt unter einem
* blanken — öffentliche Seiten und Einrichter, die kein Gerüst und damit
* keine Titelzeile haben —, zieht er sie an die Überschrift heran (O10). */
h1 + .seiten-erklaerung{margin-top:0}
/* Das Formular unter der Liste, durch eine Linie abgesetzt: Es gehört zur
* Karte, ist aber eine andere Art von Inhalt als die Zeilen darüber. */
.listen-form{
border-top:var(--strich) solid var(--linie);
padding-top:var(--abstand-4);
margin-top:var(--abstand-3);
}
.listen-form-titel{
font-family:var(--schrift-kopf);font-weight:600;
font-size:var(--groesse-3);color:var(--dunkelblau);
margin:0 0 var(--abstand-2);
}
.listen-form-felder{display:grid;gap:var(--abstand-3)}
.listen-form-fuss{display:flex;flex-wrap:wrap;gap:var(--abstand-2);margin-top:var(--abstand-4)}
/* Ab 720 px stehen Name und Lage nebeneinander (Mockup 08) — sie gehören
* zusammen und passen in eine Zeile. */
@media (min-width:720px){
.listen-form-felder{grid-template-columns:1fr 1fr;align-items:start}
}
/* Der Vorbelegungsstern in der Zeile: orange, weil er eine Auszeichnung ist
* und keine Warnung. */
.zeile-stern{color:var(--orange)}
/* Die Knopfreihe der Zeilenaktionen (Desktop). Mobil steht dort das „⋯",
* das der Aktionsblatt-Baustein mitbringt.
*
* KEIN `display` in der Grundregel: `.nur-ab-720` blendet mit `display:none`
* aus und stellt ab 720 px die Grundform mit `revert` wieder her. Eine
* eigene `display:flex`-Regel gleicher Spezifität, die später steht, schlägt
* beides — und dann stehen unter 720 px die Knöpfe UND das „⋯" nebeneinander.
* Die Flex-Eigenschaften gehören deshalb in die 720er-Regel; sie greifen
* genau dort, wo die Reihe überhaupt sichtbar ist. */
@media (min-width:720px){
.zeile-knoepfe{display:flex;flex-wrap:wrap;gap:var(--abstand-2);justify-content:flex-end}
}
/* „Als Vorbelegung" ist leise UND orange (Mockup 11): Sie ist eine
* Auszeichnung, kein Hauptweg — ein voller Orangeknopf neben „Bearbeiten"
* und „Löschen" behauptete, sie sei die zu erwartende Handlung. */
.knopf-leise-orange{color:var(--orange-tief)}
.knopf-leise-orange .symbol{color:var(--orange)}
/* Die Listen innerhalb einer Standort-Karte (Rettungsmittel, Besatzung,
* Zielkliniken, weitere Rettungsmittel, Bergwacht). Sie sind Abschnitte,
* keine eigenen Karten: Zwei Rahmen um dieselbe Sache trennen, was
* zusammengehört — die zweite Ebene ordnet nur. */
/* ABSTAND AUCH VOR DER ERSTEN LISTE (F-N1-M). Die Regel setzte den Abstand
* nur ZWISCHEN zwei Listen. Steht davor etwas anderes — der Hinweis
* „[systemweit] Dieser Standort wird von der Administration gepflegt" —,
* klebte die Überschrift „Rettungsmittel" unmittelbar daran. */
.sd-liste{margin-top:var(--abstand-4)}
.sd-liste:first-child{margin-top:0}
.sd-liste + .sd-liste{
border-top:var(--strich) solid var(--linie);
margin-top:var(--abstand-5);
padding-top:var(--abstand-4);
}
/* ART NEBENEINANDER (F-N1-N). „luftgebunden" und „bodengebunden" sind zwei
* Wörter und standen untereinander — zwei Zeilen für eine Entweder-oder-Wahl,
* neben der die halbe Formularbreite leer blieb. Sie umbrechen weiterhin,
* wenn der Platz nicht reicht. Dieselbe Überlegung wie bei den beiden Haken
* des Einsatzformulars („nebeneinander" im Feldkatalog). */
.vehkind{display:flex;flex-wrap:wrap;gap:0 var(--abstand-4)}
.vehkind label{margin-bottom:0}
.sd-titel{
display:flex;align-items:center;gap:var(--abstand-2);
font-family:var(--schrift-kopf);font-weight:600;
font-size:var(--groesse-4);color:var(--dunkelblau);
margin:0 0 var(--abstand-2);
}
.sd-zahl{
font-family:var(--schrift-text);font-weight:400;
font-size:var(--groesse-2);color:var(--gedaempft);
}
/* Die Rolle innerhalb der Besatzungsliste — eine Ebene tiefer als der
* Listentitel, deshalb kleiner und ohne eigene Linie. */
.sd-rolle{
font-family:var(--schrift-kopf);font-weight:600;
font-size:var(--groesse-3);color:var(--dunkelblau);
margin:var(--abstand-4) 0 var(--abstand-2);
}
/* Der Klammerzusatz an einer Feldbeschriftung („(optional)"). */
.feld-klein-inline{font-weight:400;color:var(--gedaempft);font-size:var(--groesse-2)}
/* CODEBLOCK — Geräte-ID, API-Schlüssel, Wiederherstellungsschlüssel,
* Cron-Zeile, Serverschlüssel. Werte, die von einem Bildschirm abgeschrieben
* oder herauskopiert werden, oft unter Zeitdruck: groß, in Festbreite, mit
* Abstand zwischen den Zeichen.
*
* DER KOPPLUNGSCODE STEHT SEIT WEB 13.1.0 NICHT MEHR HIER. Er wandert seit S5
* in die andere Richtung — das Gerät zeigt ihn, ein Mensch tippt ihn im Web
* ein —, und dafür ist ein Eingabefeld zuständig (.feld-fest). Der Baustein
* bleibt: sechs andere Stellen benutzen ihn. */
.codeblock{
background:var(--rauch);
border:var(--strich) solid var(--linie);
border-radius:var(--radius);
padding:var(--abstand-3);
margin:var(--abstand-3) 0;
}
.codeblock-titel{
font-size:var(--groesse-2);color:var(--gedaempft);
margin:0 0 var(--abstand-1);
}
.codeblock-titel:not(:first-child){margin-top:var(--abstand-3)}
.codeblock-wert{
font-family:var(--schrift-fest);
font-size:var(--groesse-5);font-weight:600;
color:var(--dunkelblau);
letter-spacing:.06em;
word-break:break-all;
margin:0;
}
/* ZUSTANDSZEILE — Fortschritt und Ergebnis einer langen Handlung (Backup,
* Import). Sie hält ihre Höhe frei, damit der Kasten beim Erscheinen der
* ersten Meldung nicht springt; ein Ergebnis erscheint darin als
* Meldungs-Baustein, Fortschritt als schlichte Zeile. */
.zustandszeile{
min-height:var(--zeile-frei);
margin-top:var(--abstand-3);
color:var(--gedaempft);
font-size:var(--groesse-2);
}
.zustandszeile .meldung{margin:0}
/* ===========================================================================
* 27 ADMINISTRATION (P3/O9, E-P3-41)
*
* Kontoseite, NutzerInnen-Liste, Backup-Regeln. Fast alles daran sind
* vorhandene Bausteine — Karte, Zeile, Zeilenaktionen, Kennzahl, Dialog.
* Neu ist nur die GEFAHRENZONE: eine Karte, die von weitem als solche zu
* erkennen ist.
* ======================================================================== */
/* GEFAHRENZONE (.karte-gefahr) — Mockup 40, Karte „Konto löschen". Roter
* Rand, roter Titel, sonst eine gewöhnliche Karte. Kein roter GRUND: Eine
* rot geflutete Fläche zwingt jeden Text darin auf einen zweiten Kontrastwert
* und macht das Formular darin schwerer lesbar — die Warnung soll den Rahmen
* betreffen, nicht die Eingabe. */
.karte-gefahr{border-color:var(--rot)}
.karte-gefahr .karte-titel{color:var(--rot-tief)}
/* ---- Statuskacheln mit Ton (O9b, Mockup 41) ------------------------------
* Eine Kachel, die einen Befund meldet, ist eingefärbt: Orange für „das will
* angesehen werden", Rot für „das fehlt". Dieselben zwei Töne wie bei der
* Plakette, dieselbe Bedeutung. Als Verweis behält sie ihre Farben und
* bekommt beim Überfahren nur den Rahmen. */
.kennzahl-orange{background:var(--orange-hell);border-color:var(--orange)}
.kennzahl-rot{background:var(--rosa);border-color:var(--rot)}
.kennzahl-rot .kennzahl-wert{color:var(--rot-tief)}
a.kennzahl{display:block;text-decoration:none;color:inherit}
a.kennzahl:hover{border-color:var(--blau);text-decoration:none}
/* ---- Kopf einer langen Liste: Suche und Filter --------------------------- */
.listenkopf{display:flex;flex-direction:column;gap:var(--abstand-3);
margin-bottom:var(--abstand-4)}
.listensuche{display:flex;gap:var(--abstand-2);align-items:center}
/* Ab 1024 px stehen Suche und Filter NEBENEINANDER (Mockup 41). Darunter
* untereinander: Fünf Filterplaketten neben einem Suchfeld ergäben auf einem
* Tablet fünf einzeilige Spalten. */
@media (min-width:1024px){
.listenkopf{flex-direction:row;align-items:center}
.listensuche{flex:0 1 26rem}
.filterreihe{flex:1 1 auto}
}
/* FILTERREIHE (.filterreihe) — Verweise, keine Knöpfe im Formular: Ein Filter
* ändert die angezeigte Liste, und das ist eine Navigation. So trägt jeder
* Filter eine eigene Adresse (teilbar, im Verlauf, mit der Zurück-Taste
* erreichbar), und er funktioniert ohne Skript. Der aktive ist orange
* hinterlegt — dieselbe Auszeichnung wie die aktive Kennzahl. */
.filterreihe{display:flex;flex-wrap:wrap;gap:var(--abstand-2)}
/* AUCH DIESER NAME IST NICHT FREI: `.filterknopf` gehoert seit O6 dem Knopf,
* der auf der Suchseite die Filterschublade oeffnet — und der ist 48 px hoch,
* weil er neben dem 48-px-Suchfeld steht (die einzige benannte Ausnahme von
* der 44-px-Regel). Eine zweite Regel gleichen Namens weiter unten haette ihn
* auf 44 px gesetzt. Gemeldet hat es der Bilderlauf, nicht der Verstand:
* „15-suche · Filter 0 · 44 px (soll 48)", achtmal, in jeder Breite. */
.listenfilter{
display:inline-flex;align-items:center;gap:var(--abstand-2);
min-height:var(--knopf);padding:0 var(--abstand-3);
border:var(--strich) solid var(--linie-stark);
border-radius:var(--radius);
background:var(--schnee);color:var(--dunkelblau);
font-family:var(--schrift-kopf);font-weight:600;
text-decoration:none;white-space:nowrap;
}
.listenfilter:hover{background:var(--rauch);text-decoration:none}
.listenfilter.aktiv{background:var(--orange-hell);border-color:var(--orange)}
/* Die Zahl ist eine eigene Fläche, damit sie sich vom Wort abhebt, ohne eine
* zweite Schriftgröße zu brauchen.
*
* SIE HEISST NICHT `.filterzahl`. Diese Klasse ist seit O6 vergeben — die
* Suche hängt sie als `filterzahl plakette plakette-blau` in den Kopf jeder
* Filtergruppe (suche.php). Eine zweite Regel gleichen Namens weiter unten im
* Stylesheet hätte deren Hintergrund und Schriftfarbe überschrieben, weil die
* spätere Regel gleicher Spezifität gewinnt: Aus den blauen Zählern der
* Suchseite wären graue geworden, und zwar auf einer Seite, die dieses Paket
* gar nicht anfasst. */
.listenfilter-zahl{
display:inline-flex;align-items:center;justify-content:center;
min-width:calc(var(--symbol) + var(--abstand-1));
padding:0 var(--abstand-1);
border-radius:var(--radius-klein);
background:var(--rauch);color:var(--gedaempft);
font-size:var(--groesse-1);
}
.listenfilter.aktiv .listenfilter-zahl{background:var(--orange);color:var(--knopf-primaer-schrift)}
/* ---- Kontentabelle ------------------------------------------------------- */
/* Name und Adresse stehen untereinander in EINER Zelle (Mockup 41): Zwei
* Spalten dafür kosteten Breite und träfen doch nie beide zugleich zu — ein
* Konto ohne Namen hat nur die Adresse. */
.konto-name{display:block;font-weight:600;color:var(--dunkelblau)}
.konto-mail{display:block;color:var(--gedaempft);font-size:var(--groesse-2)}
.tabelle-konten .wahl-spalte{width:var(--knopf);text-align:center}
.tabelle-konten .oeffnen-spalte{width:1%;text-align:right;white-space:nowrap}
.tabelle-konten th.sortable a{
display:inline-flex;align-items:center;gap:var(--abstand-1);
color:inherit;text-decoration:none;
}
.tabelle-konten th.sortable a:hover{color:var(--blau-tief);text-decoration:none}
.oeffnen{
display:inline-flex;align-items:center;gap:var(--abstand-1);
min-height:var(--knopf);color:var(--blau-tief);
font-family:var(--schrift-kopf);font-weight:600;
}
/* Das Kästchen vor dem Text einer Zeile (mobile Fassung derselben Liste). */
.zeile-vorn{flex:0 0 auto;display:flex;align-items:center}
/* ---- Fuß einer langen Liste: Zählung und Seitenwechsel -------------------- */
.listenfuss{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:var(--abstand-3);
margin-top:var(--abstand-4);padding-top:var(--abstand-3);
border-top:var(--strich) solid var(--linie);
}
.listenzahl{color:var(--gedaempft);font-size:var(--groesse-2)}
.seitenwahl{display:flex;flex-wrap:wrap;gap:var(--abstand-1)}
/* Die Seitenknöpfe sind quadratisch und 44 px hoch wie jeder Knopf — sie
* werden auf dem Handy mit dem Daumen getroffen (E-P3-22). */
.seitenknopf{
display:inline-flex;align-items:center;justify-content:center;
min-width:var(--knopf);min-height:var(--knopf);padding:0 var(--abstand-2);
border:var(--strich) solid var(--linie-stark);
border-radius:var(--radius);
background:var(--schnee);color:var(--dunkelblau);
font-family:var(--schrift-kopf);font-weight:600;
text-decoration:none;
}
.seitenknopf:hover{background:var(--rauch);text-decoration:none}
.seitenknopf.aktiv{background:var(--orange-hell);border-color:var(--orange)}
/* Der Pfeil am Rand bleibt STEHEN, wenn es nichts mehr gibt, statt zu
* verschwinden: Ein Knopf, der sich beim Blättern in Luft auflöst, verschiebt
* die übrigen unter dem Finger weg. */
.seitenknopf.aus{color:var(--sand);border-color:var(--linie);cursor:default}
.seitenknopf.aus:hover{background:var(--schnee)}
.seitenluecke{
display:inline-flex;align-items:center;justify-content:center;
min-width:var(--knopf);min-height:var(--knopf);color:var(--gedaempft);
}
/* Die Zahl der Sammelleiste ist IMMER sichtbar (der Hinweis eines schmutzigen
* Formulars erscheint erst ab 720 px). Sie ist die ganze Aussage der Leiste. */
.speichern-zahl{display:block;color:var(--asphalt);font-weight:600}
/* ===========================================================================
* 28 RECHTSTEXTE (P3/O10, E-P3-38, R32)
*
* Impressum und Datenschutzerklärung — die beiden öffentlichen Seiten und
* ihr Editor. Erstaunlich wenig eigenes: Die Seiten sind Lesespalte
* (`.rahmen-lesespalte`) plus eine Karte plus `.text`, der Editor ist der
* Zweispalter mit zwei Karten und je einem Textfeld. Was hier steht, sind
* die drei Dinge, für die es im Bestand nichts gab.
* ======================================================================== */
/* Monospace im Textfeld (Mockup 35). Das Token gibt es seit O1
* (--schrift-fest), benutzt haben es bisher nur `code, kbd, pre` und
* `.codeblock-wert` — ein