/* ========================================================================== FristenManagement – Design-Tokens (theme.css) Basis: Hybrid aus Entwurf A ("Aktenklar") und B ("Warmton") Alle Farben NUR über diese Variablen verwenden – nie Hex im Layout-Code. Modus: HELL ist Standard. Dunkel gilt nur nach manueller Umstellung (, gesetzt von theme.js, gespeichert im localStorage). Die Systemeinstellung wird bewusst NICHT ausgewertet. ========================================================================== */ :root { color-scheme: light; /* --- Flächen ------------------------------------------------------- */ --bg: #F7F7F5; /* Seitenhintergrund */ --karte: #FFFFFF; /* Karten, Mappe, Dialoge */ --karte-hover: #FAFAF8; /* --- Text ---------------------------------------------------------- */ --text: #24292E; /* Primärtext */ --text-2: #5F5E5A; /* Sekundärtext (Daten, Werte) */ --text-3: #888780; /* Beschriftungen, Spaltenköpfe */ --text-4: #B4B2A9; /* Platzhalter, leere Werte */ /* --- Ränder -------------------------------------------------------- */ --rand: #E4E4E0; /* Kartenränder */ --rand-stark: #DDDDD9; /* Container, Trennlinien im Kopf */ --rand-fein: #F0F0EC; /* Zeilentrenner innerhalb der Mappe */ /* --- Akzent (Stahlblau) -------------------------------------------- */ --akzent: #185FA5; /* Logo "MANAGEMENT", Links, Buttons, Tabs */ --akzent-hover: #14528F; --auf-akzent: #FFFFFF; /* Text auf Akzentfläche */ --akzent-flaeche:#E6F1FB; /* helle Akzentfläche (aktive Filter-Pill) */ /* --- Ampel: Stufe ROT ("Sofort") ----------------------------------- */ --rot-kante: #E24B4A; /* linke Farbkante, Punkte */ --rot-flaeche: #FCEBEB; /* Pill-Hintergrund */ --rot-text: #A32D2D; /* Pill-Text */ /* --- Ampel: Stufe GELB ("Kümmern") --------------------------------- */ --gelb-kante: #EF9F27; --gelb-flaeche: #FAEEDA; --gelb-text: #854F0B; /* --- Ampel: Stufe GRÜN ("Im Plan") --------------------------------- */ --gruen-kante: #97C459; --gruen-flaeche: #EAF3DE; --gruen-text: #3B6D11; /* --- Geometrie ------------------------------------------------------ */ --radius: 10px; /* Karten */ --radius-gross: 14px; /* Mappe, Dialoge */ --radius-pill: 999px; /* --- Typografie ----------------------------------------------------- */ --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* -------------------------------------------------------------------------- Dark Mode – nur bei manueller Umstellung aktiv. Anthrazit statt Tiefschwarz, Akzent eine Stufe heller, Ampelflächen entsättigt, damit Rot nicht "brüllt". -------------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --bg: #1B1E22; --karte: #2A2D33; --karte-hover: #30343B; --text: #E8E6E1; --text-2: #B4B2A9; --text-3: #9A968E; --text-4: #6F6C66; --rand: #3A3E45; --rand-stark: #34383F; --rand-fein: #33373D; --akzent: #378ADD; --akzent-hover: #4E9AE4; --auf-akzent: #FFFFFF; --akzent-flaeche:#1E3450; --rot-kante: #E24B4A; --rot-flaeche: #462222; --rot-text: #F09595; --gelb-kante: #EF9F27; --gelb-flaeche: #423314; --gelb-text: #FAC775; --gruen-kante: #97C459; --gruen-flaeche: #28391A; --gruen-text: #C0DD97; }