/* * Design-Tokens. * * Einzige Quelle für Farben, Schriften, Radien und Schatten. Alle anderen * Stylesheets verwenden nur diese Variablen. * * Farbrollen: * --akzent Links, Kicker, aktive Auswahl (Dathe-Blau) * --knopf Fläche der Hauptaktionen (Dathe-Orange, Text darauf in Navy: * Weiß auf Orange erreicht nur 2,85:1, Navy auf Orange 5:1) * --bereich* Farbe des aktuellen Leistungsbereichs, gesetzt über * [data-bereich="…"] am Bereich, an einer Karte oder an * --bereich für Flächen und Symbole * --bereich-ink für Text und alles, was auf hellem Grund lesbar sein muss * --bereich-hell zarte Tönung für Hintergründe * * Dunkelmodus: folgt dem Gerät, außer der Besucher hat im Kopf selbst * gewählt (data-theme auf , gesetzt von theme.js). * Die beiden Dunkelblöcke unten müssen inhaltlich gleich bleiben. */ :root { --schrift: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; --schrift-titel: "Cormorant Garamond", Georgia, "Times New Roman", serif; --r-s: 12px; --r-m: 16px; --r-l: 22px; --r-xl: 30px; --r-rund: 999px; --breite: 1240px; --breite-schmal: 820px; --rand: 40px; --grund: #EEF2F4; --blob-1: #CFE1EA; --blob-2: #F8E3D1; --blob-3: #D8E5EC; --flaeche: rgba(255, 255, 255, 0.6); --flaeche-stark: rgba(255, 255, 255, 0.82); --flaeche-feld: rgba(255, 255, 255, 0.9); --rand-glas: rgba(255, 255, 255, 0.85); --linie: rgba(14, 46, 59, 0.14); --linie-stark: rgba(14, 46, 59, 0.28); --schatten: 0 8px 32px rgba(14, 46, 59, 0.08); --schatten-hoch: 0 16px 40px rgba(14, 46, 59, 0.16); --text: #0E2E3B; --text-leise: #465A64; --akzent: #0148A5; --akzent-hell: rgba(1, 72, 165, 0.1); --knopf: #FE6C03; --knopf-hover: #FF8A33; --auf-knopf: #0E2E3B; --knopf-schatten: rgba(254, 108, 3, 0.32); --fokus: #0148A5; --tief: #0E2E3B; --auf-tief: #FFFFFF; --auf-tief-leise: #B9C6CC; --bereich: #0E2E3B; --bereich-ink: #0E2E3B; --bereich-hell: rgba(14, 46, 59, 0.1); --erfolg-text: #1F5A3A; --erfolg-grund: #E2F2E8; --fehler-text: #8E2424; --fehler-grund: #FBE8E8; --gefahr: #B42318; --auf-gefahr: #FFFFFF; --platzhalter: #D6E2E8; --platzhalter-text: #485F6B; color-scheme: light; } [data-bereich="bau"] { --bereich: #FE6C03; --bereich-ink: #A34500; --bereich-hell: rgba(254, 108, 3, 0.13); } [data-bereich="reinigung"] { --bereich: #0E2E3B; --bereich-ink: #0E2E3B; --bereich-hell: rgba(14, 46, 59, 0.1); } [data-bereich="praxis"] { --bereich: #12808C; --bereich-ink: #0A6470; --bereich-hell: rgba(18, 128, 140, 0.13); } [data-bereich="hausmeister"] { --bereich: #0B8C35; --bereich-ink: #046C27; --bereich-hell: rgba(11, 140, 53, 0.13); } [data-bereich="it"] { --bereich: #0148A5; --bereich-ink: #0148A5; --bereich-hell: rgba(1, 72, 165, 0.1); } /* Dunkel: tiefes Petrolblau statt Schwarz */ @media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) { --grund: #0B1A22; --blob-1: #12333F; --blob-2: #2B1D12; --blob-3: #0F2A36; --flaeche: rgba(22, 46, 58, 0.55); --flaeche-stark: rgba(26, 52, 66, 0.84); --flaeche-feld: rgba(11, 26, 34, 0.7); --rand-glas: rgba(255, 255, 255, 0.09); --linie: rgba(173, 205, 220, 0.16); --linie-stark: rgba(173, 205, 220, 0.3); --schatten: 0 8px 32px rgba(0, 0, 0, 0.3); --schatten-hoch: 0 16px 40px rgba(0, 0, 0, 0.45); --text: #E8F0F4; --text-leise: #A9BCC5; --akzent: #8DB8FF; --akzent-hell: rgba(141, 184, 255, 0.16); --fokus: #8DB8FF; --tief: #071319; --auf-tief: #FFFFFF; --auf-tief-leise: #B0C2CA; --bereich: #FE6C03; --bereich-ink: #FFA060; --bereich-hell: rgba(254, 108, 3, 0.18); --erfolg-text: #9ED9B4; --erfolg-grund: rgba(158, 217, 180, 0.12); --fehler-text: #F3A6A6; --fehler-grund: rgba(243, 166, 166, 0.12); --gefahr: #E5645A; --auf-gefahr: #1A0705; --platzhalter: #17303C; --platzhalter-text: #8FA5B0; color-scheme: dark; } :root:not([data-theme="hell"]) [data-bereich="bau"] { --bereich-ink: #FFA060; --bereich-hell: rgba(254, 108, 3, 0.18); } :root:not([data-theme="hell"]) [data-bereich="reinigung"] { --bereich: #7FA6B8; --bereich-ink: #A9C6D3; --bereich-hell: rgba(169, 198, 211, 0.14); } :root:not([data-theme="hell"]) [data-bereich="praxis"] { --bereich-ink: #5CC7D3; --bereich-hell: rgba(92, 199, 211, 0.15); } :root:not([data-theme="hell"]) [data-bereich="hausmeister"] { --bereich-ink: #6FD08D; --bereich-hell: rgba(111, 208, 141, 0.15); } :root:not([data-theme="hell"]) [data-bereich="it"] { --bereich: #3D7FE0; --bereich-ink: #8DB8FF; --bereich-hell: rgba(141, 184, 255, 0.16); } } :root[data-theme="dunkel"] { --grund: #0B1A22; --blob-1: #12333F; --blob-2: #2B1D12; --blob-3: #0F2A36; --flaeche: rgba(22, 46, 58, 0.55); --flaeche-stark: rgba(26, 52, 66, 0.84); --flaeche-feld: rgba(11, 26, 34, 0.7); --rand-glas: rgba(255, 255, 255, 0.09); --linie: rgba(173, 205, 220, 0.16); --linie-stark: rgba(173, 205, 220, 0.3); --schatten: 0 8px 32px rgba(0, 0, 0, 0.3); --schatten-hoch: 0 16px 40px rgba(0, 0, 0, 0.45); --text: #E8F0F4; --text-leise: #A9BCC5; --akzent: #8DB8FF; --akzent-hell: rgba(141, 184, 255, 0.16); --fokus: #8DB8FF; --tief: #071319; --auf-tief: #FFFFFF; --auf-tief-leise: #B0C2CA; --bereich: #FE6C03; --bereich-ink: #FFA060; --bereich-hell: rgba(254, 108, 3, 0.18); --erfolg-text: #9ED9B4; --erfolg-grund: rgba(158, 217, 180, 0.12); --fehler-text: #F3A6A6; --fehler-grund: rgba(243, 166, 166, 0.12); --gefahr: #E5645A; --auf-gefahr: #1A0705; --platzhalter: #17303C; --platzhalter-text: #8FA5B0; color-scheme: dark; } :root[data-theme="dunkel"] [data-bereich="bau"] { --bereich-ink: #FFA060; --bereich-hell: rgba(254, 108, 3, 0.18); } :root[data-theme="dunkel"] [data-bereich="reinigung"] { --bereich: #7FA6B8; --bereich-ink: #A9C6D3; --bereich-hell: rgba(169, 198, 211, 0.14); } :root[data-theme="dunkel"] [data-bereich="praxis"] { --bereich-ink: #5CC7D3; --bereich-hell: rgba(92, 199, 211, 0.15); } :root[data-theme="dunkel"] [data-bereich="hausmeister"] { --bereich-ink: #6FD08D; --bereich-hell: rgba(111, 208, 141, 0.15); } :root[data-theme="dunkel"] [data-bereich="it"] { --bereich: #3D7FE0; --bereich-ink: #8DB8FF; --bereich-hell: rgba(141, 184, 255, 0.16); }