/* Workbench Design-Tokens (W1) — 1:1 aus der real existierenden FNW-Workbench (frontend/styles/brands/fnw.css + foundation.css). Dunkel = Default, Hell via [data-color-mode="light"]. Siehe DESIGN_SYSTEM.md + REFERENZ_ANALYSE.md. */ :root { /* Marke */ --brand-blau: #00385D; --brand-blau-dark: #002844; --brand-khaki: #C1B699; --brand-khaki-soft: rgba(193,182,153,0.15); --brand-khaki-bd: rgba(193,182,153,0.30); /* Dunkles Basis-Theme (Default) */ --bg-base: #0A1628; --bg-panel: #0D1B30; --bg-card: #0F1E34; --bg-hover: #152439; --bg-modal: #0D1B30; --bg-expanded: #081320; --bd: #182D47; --bd-light: #1F3A5A; --bd-subtle: #121F34; --tx-1: #CDD9E8; --tx-2: #7B9BBE; --tx-3: #6F8DAC; /* WCAG 2.1 AA: ≥4.5:1 auf allen dunklen Flächen (war #4A6480, 2.55:1) */ --tx-4: #688DB9; /* WCAG 2.1 AA: ≥4.5:1 auf allen dunklen Flächen (war #283D56, 1.41:1) */ --ac: #2D68AD; --ac-soft: rgba(45,104,173,0.12); --ac-bd: rgba(45,104,173,0.28); --online: #2A8A52; /* Ampel — tragendes Status-Prinzip */ --rot-text: #D86A60; --rot: #C0392B; --rot-bg: rgba(192,57,43,0.10); --rot-bd: rgba(192,57,43,0.30); --gelb-text: #D4A820; --gelb: #C8960D; --gelb-bg: rgba(200,150,13,0.10); --gelb-bd: rgba(200,150,13,0.28); --gruen-text: #38C472;--gruen: #27AE60;--gruen-bg: rgba(39,174,96,0.10); --gruen-bd: rgba(39,174,96,0.28); --grau-text: #7A8E9E; --grau: #5D6D7E;--grau-bg: rgba(93,109,126,0.10); --grau-bd: rgba(93,109,126,0.26); --blau-text: #48A2D8; --blau: #2980B9;--blau-bg: rgba(41,128,185,0.10); --blau-bd: rgba(41,128,185,0.28); /* Typografie */ --font: 'Raleway', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --f-xs: 10px; --f-sm: 12px; --f-md: 13px; --f-lg: 15px; --f-xl: 18px; /* Abstände / Radien */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-pill: 999px; --focus: #5BA8E0; /* Gemeinsames Icon-Maß UND gemeinsames Buttonmaß für BEIDE Button-Typen (linke Werkzeug-Buttons + Aktions-Buttons). Skalieren mit der Schriftstufe, damit beide Typen in jeder Stufe identisch groß bleiben (Abweichung 0px). */ --icon-size: 24px; --iconbtn: 62px; /* Kantenlänge des quadratischen Buttons (inkl. Padding) */ --btn-gap: 6px; /* GEMEINSAMER Abstand: senkrechte Aktionsspalte UND linkes Werkzeugraster */ } /* Schriftgrößen-Präferenz je Login (Personalisierung, BFSG/WCAG-Dynamic-Type). data-font auf : normal (Default) · gross · sehrgross. Typo-Token UND das gemeinsame Buttonmaß/Icon-Maß skalieren identisch für beide Button-Typen. */ :root[data-font="gross"] { --f-xs: 11px; --f-sm: 13px; --f-md: 15px; --f-lg: 17px; --f-xl: 21px; --icon-size: 26px; --iconbtn: 70px; } :root[data-font="sehrgross"]{ --f-xs: 12px; --f-sm: 15px; --f-md: 17px; --f-lg: 20px; --f-xl: 24px; --icon-size: 28px; --iconbtn: 78px; } /* Hellmodus — Option (Präferenz je Login) */ [data-color-mode="light"] { --bg-base: #F2F5F9; --bg-panel: #E8EEF5; --bg-card: #FFFFFF; --bg-hover: #DDE6EF; --bg-modal: #FFFFFF; --bg-expanded: #EBF0F7; --bd: #C9D8E8; --bd-light: #B8CCDF; --bd-subtle: #D4E2EE; --tx-1: #0D1E2E; --tx-2: #2E4A67; --tx-3: #4E6985; /* WCAG 2.1 AA: ≥4.5:1 auf allen hellen Flächen (war #5A7A9A, 3.55:1) */ --tx-4: #456A8B; /* WCAG 2.1 AA: ≥4.5:1 auf allen hellen Flächen (war #8BAAC5, 1.92:1) */ --ac: #1356A8; --ac-soft: rgba(19,86,168,0.10); --ac-bd: rgba(19,86,168,0.25); --rot-bg: rgba(192,57,43,0.07); --gelb-bg: rgba(200,150,13,0.08); --gruen-bg: rgba(39,174,96,0.08); --grau-bg: rgba(93,109,126,0.08); --blau-bg: rgba(41,128,185,0.08); --rot-text: #B23A2C; --gelb-text: #8A6A07; --gruen-text: #1E7A3D; --grau-text: #51616F; --blau-text: #1F6FA8; --focus: #1356A8; }