/* GeoLage — Color tokens Brand: deep navy base, petrol accent, amber warn/active dot, light app bg. Built for a serious, government-grade situational-awareness platform. Base ramps (-50 lightest … -900 darkest) + semantic aliases. */ :root { /* ---- Navy (primary brand) ---- */ --navy-50: #EAF0F6; --navy-100: #D2DEEB; --navy-200: #A6BCD3; --navy-300: #748FAF; --navy-400: #486583; --navy-500: #1B3A5B; /* brand base #1B3A5B */ --navy-600: #163048; --navy-700: #122739; --navy-800: #0D1C2A; --navy-900: #08121C; /* ---- Petrol (accent / info) ---- */ --petrol-50: #E7F2F4; --petrol-100: #C7E2E6; --petrol-200: #93C6CE; --petrol-300: #5BA7B3; --petrol-400: #3E8E9B; --petrol-500: #2E7D8A; /* brand accent #2E7D8A */ --petrol-600: #266875; --petrol-700: #1F535D; --petrol-800: #173E46; /* ---- Amber (warn / active) ---- */ --amber-50: #FDF1E3; --amber-100: #FBDFC0; --amber-200: #F6BC7E; --amber-300: #F09E48; --amber-400: #E8821E; /* brand accent #E8821E */ --amber-500: #CE7016; --amber-600: #A85A11; --amber-700: #82460D; /* ---- Cool slate neutrals (tinted toward navy) ---- */ --slate-0: #FFFFFF; --slate-25: #F5F7FA; /* app background #F5F7FA */ --slate-50: #EEF2F6; --slate-100: #E2E8EF; --slate-200: #D0D9E2; --slate-300: #B4C0CD; --slate-400: #8A97A5; --slate-500: #647284; --slate-600: #4A5765; --slate-700: #36414D; --slate-800: #232C36; --slate-900: #141A21; /* ---- Status / operational severity ---- */ --critical: #C62828; /* Kritisch — highest severity */ --critical-bg: #FBEAEA; --critical-bd: #EFC4C4; --warning: #E8821E; /* Warnung — amber */ --warning-bg: #FDF1E3; --warning-bd: #F6D6AE; --caution: #C7991A; /* Beobachtung — yellow-ochre */ --caution-bg: #FBF3DA; --caution-bd: #EEDCA0; --ok: #2E7D4F; /* Entwarnung / OK — calm green */ --ok-bg: #E6F2EB; --ok-bd: #BEDCCB; --info: #2E7D8A; /* Info — petrol */ --info-bg: #E7F2F4; --info-bd: #BFDDE2; /* ================= SEMANTIC ALIASES ================= */ /* Surfaces & background */ --bg-app: var(--slate-25); --bg-sunken: var(--slate-50); --surface: var(--slate-0); --surface-2: var(--slate-25); --surface-3: var(--slate-50); --surface-inverse: var(--navy-500); --surface-overlay: rgba(8, 18, 28, 0.55); /* Text */ --text-strong: var(--navy-500); --text-body: var(--slate-700); --text-muted: var(--slate-500); --text-subtle: var(--slate-500); /* WCAG-Fix: slate-400 war nur 2.98:1 auf weiss -> slate-500 = 4.9:1 */ --text-on-dark: var(--slate-25); --text-on-dark-muted: var(--navy-200); --text-link: var(--petrol-600); /* Borders & lines */ --border: var(--slate-200); --border-strong: var(--slate-300); --border-subtle: var(--slate-100); --divider: var(--slate-100); --focus-ring: var(--petrol-400); /* Brand actions */ --action-primary: var(--navy-500); --action-primary-hover: var(--navy-600); --action-primary-active: var(--navy-700); --action-accent: var(--petrol-500); --action-accent-hover: var(--petrol-600); --action-warn: var(--amber-400); --action-warn-hover: var(--amber-500); /* Data-viz / Diagramm-Linien (Hoehenprofil etc.) — nicht Marken-Akzent */ --chart-line: #1D4ED8; /* Hochwasser als Gefahrenfarbe — bewusst Karto-Blau, getrennt vom Marken-Petrol */ --hazard-flood: #1565C0; --hazard-flood-line: #0D47A1; /* On-map / data-viz scale (sequential radius rings) */ --ring-1: var(--amber-400); --ring-2: var(--petrol-500); --ring-3: var(--petrol-300); --ring-4: var(--navy-300); } /* ===================== DARK THEME ===================== Aktiv via (Toggle in /vendor/theme.js, in localStorage gemerkt). Nur die semantischen Aliase werden umgehaengt — Komponenten, die var(--surface)/var(--text-*)/ var(--border) nutzen, kippen automatisch. Marken-/Status-Farben bleiben (lesbar auf dunkel). */ :root[data-theme="dark"] { color-scheme: dark; --slate-0: #14212E; /* "Weiss" -> dunkle Flaeche, damit #fff-Fallbacks nicht durchschlagen */ --slate-25: #0F1B27; /* helle Neutral-Toene mit-umhaengen (Chips/Tracks/Sunken) */ --slate-50: #182633; --slate-100: #20303E; --bg-app: #0D1722; --bg-sunken: #0A131C; --surface: #14212E; --surface-2: #1A2937; --surface-3: #213140; --text-strong: #EAF0F6; --text-body: #C4D0DC; --text-muted: #93A3B3; --text-subtle: #8294A6; /* WCAG-Fix: #6E8092 war nur 4.01:1 auf surface -> #8294A6 = 5.23:1 */ --text-link: #5BA7B3; --border: #2A3A4A; --border-strong: #3A4D5F; --border-subtle: #20303E; --divider: #243443; --focus-ring: var(--petrol-300); /* Aktions-Akzent auf Dunkel etwas heller fuer Kontrast */ --action-accent: var(--petrol-400); --action-accent-hover: var(--petrol-300); } /* #152: Demo-Sandbox „Anmelden"-FAB (per Edge-sub_filter injiziert, nur demo.geolage.de). Frueher inline style= am injizierten -> style-src-attr-Verstoss unter strict CSP. Jetzt Klasse, damit der sub_filter class="demo-login-fab" nutzen kann (kein inline style mehr). */ .demo-login-fab { position: fixed; right: 16px; bottom: 16px; z-index: 99999; background: #2E7D8A; color: #fff; padding: 10px 16px; border-radius: 999px; font: 600 14px/1 system-ui, sans-serif; text-decoration: none; box-shadow: 0 4px 14px rgba(13,28,42,.25); }