/* SPDX-License-Identifier: Apache-2.0 — Webkultur GmbH
*
* Eigenes, schlankes CSS. Kein Framework, kein CDN: die App darf nichts aus
* dem Netz holen (VPN-intern), und ein Tailwind-Werkzeugkasten waere fuer
* eine Handvoll Ansichten mehr Bau als Nutzen.
*
* ANMUTUNG bewusst wie die zugekauften Schwester-Apps (Urlaubsverwaltung und
* Zeiterfassung von focus shift), weil die Praxis alle drei im selben Atemzug
* benutzt: ruhige Zinc-Graustufen, gruene Hauptaktion, 0.875rem in
* Bedienelementen, 6px Eckenradius, blauer Fokusring, drei Themen
* (System/Hell/Dunkel) ueber eine Klasse am .
*
* Herkunft der Werte: die Farbrollen und Abstaende sind an der
* **Urlaubsverwaltung** (Apache-2.0, github.com/urlaubsverwaltung/urlaubsverwaltung,
* src/main/css/theme.css und components/*.css) abgelesen; die dortigen Werte
* sind die Tailwind-Standardpalette (MIT). Uebernommen sind nur Farbwerte und
* Maße — kein Code, kein CSS, keine Templates. Aus der Zeiterfassung ist
* NICHTS uebernommen (AGPL-3.0, Netzwerk-Copyleft; siehe
* docs/konzept-dienstplanung.md).
*/
/* --- Farbrollen: hell ---------------------------------------------------- */
:root {
color-scheme: light;
--grund: #fafafa; /* zinc-50 */
--flaeche: #ffffff;
--flaeche-leise: #f4f4f5; /* zinc-100 */
--flaeche-tot: #e4e4e7; /* zinc-200 */
--linie: #e4e4e7; /* zinc-200 */
--linie-stark: #d4d4d8; /* zinc-300 */
--text: #27272a; /* zinc-800 */
--text-leise: #52525b; /* zinc-600 */
--text-schwach: #71717a; /* zinc-500 */
--haupt: #15803d; /* green-700 */
--haupt-rand: #166534; /* green-800 */
--haupt-leise: #f0fdf4; /* green-50 */
/* Die Farbe des Zeichens. Im hellen Thema ist das `haupt`; im dunklen
waere `haupt` (green-700) auf zinc-900 matt -- nebeneinander gelegt und
angesehen, nicht geschaetzt. Dort traegt `haupt-rand` (green-600). Eine
eigene Rolle, damit die Regel unten nichts vom Thema wissen muss. */
--marke: var(--haupt);
--haupt-text: #ffffff;
--info: #1d4ed8; /* blue-700 */
--info-leise: #eff6ff; /* blue-50 */
--fokus: #93c5fd; /* blue-300 */
--warn: #b45309; /* amber-700 */
--warn-leise: #fffbeb; /* amber-50 */
--warn-rand: #fcd34d; /* amber-300 */
--gefahr: #b91c1c; /* red-700 */
--gefahr-leise: #fef2f2; /* red-50 */
--gefahr-rand: #fca5a5; /* red-300 */
--besetzt: #dbeafe; /* blue-100 */
--besetzt-rand: #1d4ed8;
--besetzt-text: #1e3a8a; /* blue-900 */
--radius: 6px;
--radius-klein: 4px;
--schrift: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
sans-serif;
--bedien-groesse: 0.875rem;
--kopf-hoehe: 3.5rem;
/* Breite des linken Modulmenues (docs/design-guidelines.md, Abschnitt 1). */
--menue-breite: 15rem;
/* 32px je Kachel-Spur = Balkenhoehe der Vorlage (ohne Kopfzeile). */
--kachelhoehe: 2rem;
--schatten: 0 1px 2px rgb(0 0 0 / 0.05);
/* Rahmen nach docs/design-guidelines.md: linkes Menue, Springer im Plan, Kacheln. */
--menue: #f4f4f5; /* zinc-100 */
--menue-aktiv: #e4e4e7; /* zinc-200 */
--springer: #ede9fe; /* violet-100 */
--springer-rand: #6d28d9; /* violet-700 */
--kachel-schatten: 0 1px 3px rgb(0 0 0 / 0.08);
}
/* --- Farbrollen: dunkel -------------------------------------------------- */
/* Zwei Wege, dasselbe Ergebnis: System-Einstellung (Klasse theme-system, der
* Startwert) und ausdrueckliche Wahl (theme-dark). Jede Rolle wird hier neu
* gesetzt -- genau das fehlte vorher, weshalb dunkel schwarze Baender ueber
* den Zellen zeigte. */
@media (prefers-color-scheme: dark) {
html.theme-system {
color-scheme: dark;
--grund: #18181b; /* zinc-900 */
--flaeche: #27272a; /* zinc-800 */
--flaeche-leise: #1f1f23;
--flaeche-tot: #202024;
--linie: #3f3f46; /* zinc-700 */
--linie-stark: #52525b; /* zinc-600 */
--text: #f4f4f5; /* zinc-100 */
--text-leise: #d4d4d8; /* zinc-300 */
--text-schwach: #a1a1aa; /* zinc-400 */
--haupt: #15803d;
--haupt-rand: #16a34a;
--haupt-leise: #14251a;
--marke: var(--haupt-rand);
--haupt-text: #f0fdf4;
--info: #93c5fd;
--info-leise: #1e293b;
--fokus: #93c5fd;
--warn: #fcd34d;
--warn-leise: #2a2010;
--warn-rand: #b45309;
--gefahr: #fca5a5;
--gefahr-leise: #2a1516;
--gefahr-rand: #b91c1c;
--besetzt: #1e3a5f;
--besetzt-rand: #60a5fa;
--besetzt-text: #dbeafe;
--schatten: 0 1px 2px rgb(0 0 0 / 0.4);
--menue: #1f1f23;
--menue-aktiv: #2d2d33;
--springer: #2e1065; /* violet-950 */
--springer-rand: #a78bfa; /* violet-400 */
--kachel-schatten: 0 1px 3px rgb(0 0 0 / 0.5);
}
}
html.theme-dark {
color-scheme: dark;
--grund: #18181b;
--flaeche: #27272a;
--flaeche-leise: #1f1f23;
--flaeche-tot: #202024;
--linie: #3f3f46;
--linie-stark: #52525b;
--text: #f4f4f5;
--text-leise: #d4d4d8;
--text-schwach: #a1a1aa;
--haupt: #15803d;
--haupt-rand: #16a34a;
--haupt-leise: #14251a;
--marke: var(--haupt-rand);
--haupt-text: #f0fdf4;
--info: #93c5fd;
--info-leise: #1e293b;
--fokus: #93c5fd;
--warn: #fcd34d;
--warn-leise: #2a2010;
--warn-rand: #b45309;
--gefahr: #fca5a5;
--gefahr-leise: #2a1516;
--gefahr-rand: #b91c1c;
--besetzt: #1e3a5f;
--besetzt-rand: #60a5fa;
--besetzt-text: #dbeafe;
--schatten: 0 1px 2px rgb(0 0 0 / 0.4);
/* Diese fuenf fehlten hier, waehrend `theme-system` sie im Dunkeln schon
hatte. Der Fehler war im Browser sofort zu sehen und im Blatt nicht: wer
ausdruecklich „Dunkel" gewaehlt hatte, bekam ein WEISSES Modulmenue neben
einer schwarzen Seite, weil `--menue` still auf den hellen Wert der
`:root`-Ebene zurueckfiel. CSS meldet so etwas nie — der Wert existiert ja.
Der Waechter `tests/test_css_tokens.py` haelt die beiden dunklen Wege
seitdem zusammen. */
--menue: #1f1f23;
--menue-aktiv: #2d2d33;
--springer: #2e1065;
--springer-rand: #a78bfa;
--kachel-schatten: 0 1px 3px rgb(0 0 0 / 0.5);
}
/* --- Grundlagen --------------------------------------------------------- */
* { box-sizing: border-box; }
/* Das `hidden`-Attribut muss auch Elemente mit eigenem `display` verbergen
* (z.B. `.knopf { display: inline-flex }`) — sonst zeigt der Bedarfs-Dialog
* „zurueck zum Template" auch bei einem Template-Balken. */
[hidden] { display: none !important; }
body {
margin: 0;
font: 15px/1.5 var(--schrift);
color: var(--text);
background: var(--grund);
-webkit-text-size-adjust: 100%;
}
h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; }
a { color: var(--info); }
:focus-visible {
outline: 2px solid var(--fokus);
outline-offset: 2px;
}
.nur-sr {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* --- Kopfzeile ---------------------------------------------------------- */
/* Sie sitzt rechts neben dem Modulmenue und traegt nur noch die sechs Menues
(Verlauf, Lesezeichen, Zahnrad, Neues, Hilfe, Benutzer). Die Navigation ist
nach links gewandert; der Platz links in der Kopfzeile bleibt bewusst leer,
dorthin kommt in Welle 2 die Suche. */
.kopf {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
gap: 1.5rem;
height: var(--kopf-hoehe);
padding: 0 1.25rem;
background: var(--flaeche);
border-bottom: 1px solid var(--linie);
box-shadow: var(--schatten);
}
/* Das Zeichen der Marke. Hiess `marke-punkt`, weil es bis zum 08.09.2026 ein
Punkt war -- ein ausdruecklich vorlaeufiges Zeichen. Der Name bleibt, damit
nicht dreissig Vorlagen angefasst werden muessen; was er zeigt, ist jetzt
der Turnus aus drei Boegen (static/img/turnuswerk-zeichen.svg).
WARUM MASKE UND NICHT ![]()
: ein eingebettetes Bild erbt keine Farbe. Als
Maske bestimmt `background` die Farbe, und damit faerbt der Themenwechsel
das Zeichen mit -- im dunklen Thema traegt `haupt` denselben Wert, aber wer
spaeter dort einen helleren Gruenton setzt, bekommt ihn hier geschenkt.
`-webkit-mask` bleibt daneben stehen: Safari braucht es bis heute. */
.marke-punkt {
width: 1.15rem; height: 1.15rem;
flex: none;
background: var(--marke);
mask: url("../img/turnuswerk-zeichen.24798b09d534.svg") center / contain no-repeat;
-webkit-mask: url("../img/turnuswerk-zeichen.24798b09d534.svg") center / contain no-repeat;
}
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 0.15rem; }
/* Segmentierter Umschalter System / Hell / Dunkel (jetzt im Benutzermenue) */
.thema-wahl {
display: flex;
gap: 0;
margin: 0;
padding: 2px;
border: 1px solid var(--linie-stark);
border-radius: var(--radius);
background: var(--flaeche-leise);
}
.thema-wahl label {
position: relative;
font-size: 0.78rem;
color: var(--text-leise);
padding: 0.25rem 0.55rem;
border-radius: var(--radius-klein);
cursor: pointer;
}
.thema-wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.thema-wahl input:checked + span { font-weight: 600; color: var(--text); }
.thema-wahl label:has(input:checked) { background: var(--flaeche); box-shadow: var(--schatten); }
.thema-wahl label:has(input:focus-visible) { outline: 2px solid var(--fokus); outline-offset: 1px; }
/* Der `