/* ========================================================================== TelRadKo Intranet — Design-Tokens Umschaltung ueber data-theme="light" | "dark" am -Element. HERKUNFT DER WERTE (2026-08-05) Die hellen Werte sind aus telradko.rad-x.net ausgelesen, nicht geschaetzt: Navy #003261 als Marken- und Flaechenfarbe, Cyan #06a9d0 als Auszeichnung, #212529 als Fliesstext, #e7f5fb als Abschnittstoenung, Kanten bei 2px. Die dunklen Werte sind daraus ABGELEITET -- eine dunkle Fassung gibt es auf der Webseite nicht. Einziger Anhaltspunkt ist deren Fusszeile #0e1929; die ist hier --panel. Das Dunkel ist deshalb navystichig und nicht neutralgrau. DIE ROLLENVERTEILUNG IST DER KERN Cyan traegt keinen weissen Text (2.77:1). Die Webseite nutzt es als Auszeichnung mit fast-schwarzem Text -- so auch hier: --signal. Flaechen unter weissem Text sind Navy (--accent-fill, 12.89:1). Im dunklen Theme drehen sich die Rollen: dort traegt Cyan als Vordergrundfarbe (--accent) und ein aufgehelltes Navy wird zur Flaeche. Beides sind Farben des Logos. Regel: In Templates NIE Hex-Werte schreiben, immer var(--…). Neue Farbe noetig? Erst hier als Token anlegen, dann verwenden. --accent-rgb und --accent-fill-rgb sind die Kanalformen derselben Werte. Die Tailwind-Config braucht sie, damit Deckkraft-Varianten wie bg-primary/90 funktionieren. Bei einer Aenderung gemeinsam pflegen. ========================================================================== */ :root, [data-theme="light"] { --bg: #eef5f9; --panel: #ffffff; --panel-2: #e7f5fb; /* die Abschnittstoenung der Webseite */ --panel-3: #f5fafd; --ink: #212529; /* Fliesstext der Webseite */ --ink-2: #55606b; --ink-3: #7b8794; --line: #d6e4ee; --line-strong: #b5dcec; /* der kraeftigere Blauton der Webseite */ /* Marke. --accent ist die Vordergrundfarbe (Links, Raender, Beschriftung), --accent-fill die Flaeche unter weissem Text. Im hellen Theme sind beide dasselbe Navy -- es traegt in beiden Rollen. */ --accent: #003261; --accent-rgb: 0 50 97; --accent-hover: #00264a; --accent-ink: #ffffff; /* Text AUF --accent-fill, beide Themes */ --accent-soft: #e7f5fb; /* Auszeichnung. Cyan wie im Logo-Rautezeichen: grosse Kennzahlen, die eine wichtige Aktion je Seite, Aktivmarken. Traegt NUR fast-schwarzen Text (6.95:1); weiss darauf waere 2.77:1. */ --signal: #06a9d0; --signal-ink: #090f18; --ok: #1f7a4d; --warn: #8c6312; --err: #b42318; --ok-soft: #e6f4ec; --warn-soft: #faf1dd; --err-soft: #fbeae8; /* Schriftfarbe AUF der zugehoerigen Soft-Flaeche. Eigene Paarung, eigens gerechnet -- die Basisfarbe traegt dort nicht immer. --ok-ink #186139 auf #e6f4ec 6.59:1 --warn-ink #8c6312 auf #faf1dd 4.78:1 --err-ink #b42318 auf #fbeae8 5.65:1 */ --ok-ink: #186139; --warn-ink: #8c6312; --err-ink: #b42318; /* Gesaettigte Flaechen mit weissem Text (Knoepfe, Ampelpunkte, Balken). Im hellen Theme identisch zur Basisfarbe; siehe den dunklen Block. */ --ok-fill: #1f7a4d; --warn-fill: #8c6312; --err-fill: #b42318; --accent-fill: #003261; --accent-fill-rgb: 0 50 97; --ok-fill-hover: #186139; --warn-fill-hover: #704e0e; --err-fill-hover: #911c13; --accent-fill-hover: #00264a; --nav-bg: #ffffff; --nav-ink: #55606b; --nav-ink-strong: #212529; --nav-active-bg: #e7f5fb; --nav-active-ink: #003261; --nav-line: #d6e4ee; --shadow: 0 1px 2px rgba(0,50,97,.07); --shadow-lg: 0 8px 24px rgba(0,50,97,.14); /* Die Webseite ist praktisch scharfkantig: 2px an Knoepfen und Feldern, 6px an Karten. --radius-karte ist die groessere Stufe fuer Karten und Panels; alles andere laeuft auf 2px. */ --radius: 2px; --radius-sm: 2px; --radius-karte: 6px; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --nav-w: 236px; --topbar-h: 52px; } [data-theme="dark"] { --bg: #0a1420; --panel: #0e1929; /* die Fusszeile der Webseite */ --panel-2: #152437; --panel-3: #091320; --ink: #e8eef5; --ink-2: #a3b3c4; --ink-3: #728499; --line: #1c2f45; --line-strong: #2b4159; /* Hier drehen sich die Rollen: Cyan traegt als Vordergrundfarbe (8.20:1 auf --panel), Navy allein waere mit 1.37:1 unlesbar. Die Flaeche unter weissem Text uebernimmt ein aufgehelltes Navy, siehe --accent-fill. */ --accent: #29c0e4; --accent-rgb: 41 192 228; --accent-hover: #4fd0ee; --accent-ink: #ffffff; --accent-soft: #12283f; --signal: #29c0e4; --signal-ink: #04121c; --ok: #3fbf7f; --warn: #e0a83c; --err: #f0705f; --ok-soft: #0e2a1d; --warn-soft: #2a2113; --err-soft: #2e1614; /* Auf Dunkel tragen die Basisfarben auf ihrer Soft-Flaeche bereits (6.56:1, 7.42:1, 5.79:1) -- hier also identisch. */ --ok-ink: #3fbf7f; --warn-ink: #e0a83c; --err-ink: #f0705f; /* Die Fuellfarben muessen ZWEI Bedingungen gleichzeitig erfuellen: >= 4.5:1 gegen weissen Text UND >= 3:1 gegen die umgebende --panel- Flaeche (WCAG 1.4.11) -- dieselben Klassen faerben auch textlose Grafik: Fortschrittsbalken, Ampelpunkte, Legendenquadrate. Bei --panel #0e1929 (L=0.0095) liegt das Fenster bei L 0.129-0.183: --ok-fill #2c784f L=0.1453 weiss 5.38:1 Panel 3.28:1 --warn-fill #8b6316 L=0.1447 weiss 5.39:1 Panel 3.27:1 --err-fill #c63322 L=0.1449 weiss 5.39:1 Panel 3.28:1 --accent-fill #1e6bb0 L=0.1393 weiss 5.55:1 Panel 3.18:1 Die Hover-Varianten liegen am oberen Rand desselben Fensters. */ --ok-fill: #2c784f; --warn-fill: #8b6316; --err-fill: #c63322; --accent-fill: #1e6bb0; --accent-fill-rgb: 30 107 176; --ok-fill-hover: #31855a; --warn-fill-hover: #96701a; --err-fill-hover: #d13a28; --accent-fill-hover: #2273bc; --nav-bg: #0b1523; --nav-ink: #a3b3c4; --nav-ink-strong: #e8eef5; --nav-active-bg: #12283f; --nav-active-ink: #29c0e4; --nav-line: #1c2f45; /* Flaechen heben sich auf Dunkel ueber Helligkeit voneinander ab, nicht ueber Schlagschatten -- ein schwarzer Schatten auf dunklem Grund ist unsichtbar. Modale und Dropdowns liegen UEBER dem Inhalt und brauchen die Trennung trotzdem. */ --shadow: none; --shadow-lg: 0 10px 30px rgba(0,0,0,.65); --radius: 2px; --radius-sm: 2px; --radius-karte: 6px; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --nav-w: 236px; --topbar-h: 52px; color-scheme: dark; } body { background: var(--bg); color: var(--ink); }