/* meteo365 v4 — Design Tokens Nur Variablen. Keine Selektoren auf Komponenten. Aenderungen hier wirken ueberall. THEMES: Zwei bewusste Modi (kein Auto/Dark mehr, Stand 2026-07-16): - LIGHT (:root) = barrierefreie Alternative: dunkle Navy-Schrift auf Lagune-Hell. - BLUE (html[data-theme="dark"]) = Default/Marken-Look „Sommer, Sonne": helle Schrift auf Lagunen-Blau #0e6288. (Attribut heisst historisch "dark", damit die verstreuten [data-theme="dark"]-Regeln weiter greifen — der Modus IST aber Blue; im Header-Switcher als "Blue" beschriftet.) LAGUNE-Skala (Azur × Kapri — Blau-Tuerkis, noch nicht gruen): 50 #eaf7fc · 100 #cbe9f4 · 200 #a1daee · 300 #68c2e3 · 400 #37a8ce 500 #158dbd · 600 #0e75a0 · 700 #0e6288 · 800 #0a415d · 900 #083145 Akzent SONNE #f4a932 (Pflicht) · TUERKIS-Funke #68c2e3 sparsam. */ :root { /* ---- Fonts ---- */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-display: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* ---- Brand ---- */ --brand-sun: #f4a932; /* Pflicht-Akzent, Logo-Orange */ --brand-sun-2: #f29400; /* Das TIEFE Orange aus dem Logo (die Sonne läuft von #f4a932 nach #dc661e). Gedacht als dunkles Ende eines Orange-Verlaufs — nie als Textfarbe auf hellem Grund, dafür ist es zu hell (Weiß darauf nur 3,5:1). */ --brand-sun-deep: #dc661e; /* Schrift auf orangem Grund. Weiß fällt auf JEDEM dieser Orangetöne durch (1,99:1 bis 3,52:1). Dieses sehr dunkle Warmbraun kommt aus dem Logo und schafft 5,4:1 auf dem tiefsten und 9,6:1 auf dem hellsten Ton. */ --brand-sun-ink: #1a0d02; --brand-deep: #0e6288; /* Signatur-Lagune (700) */ --brand-deep-dark: #0a415d; /* Lagune 800 */ --brand-cyan: #68c2e3; /* Tuerkis — nur sparsamer Funke */ /* ---- Semantic Accents (v4) ---- Hauptakzent = Orange (Brand), Sek-Akzent = Magenta/Pink. */ --accent: var(--brand-sun); --accent-hover: var(--brand-sun-2); --accent-ink: #ffffff; /* Text auf Accent-Hintergrund */ --accent-soft-bg: rgba(244, 169, 50, .14); --accent-soft-border: rgba(244, 169, 50, .38); --accent-alt: #e11d74; /* Magenta — Premium/Alert/Sek */ --accent-alt-hover: #c2185b; --accent-alt-ink: #ffffff; --accent-alt-soft-bg: rgba(225, 29, 116, .12); --accent-alt-soft-border: rgba(225, 29, 116, .36); /* Accent-Skala fuer Erdbeben-Magnituden (vom Screen-Mockup abgeleitet) */ --mag-1: #15cf5f; /* M1.0 - 1.9 knalliges Grün */ --mag-2: #ffd60a; /* M2.0 - 2.9 knalliges Gelb */ --mag-3: #ff9d00; /* M3.0 - 3.9 knalliges Orange */ --mag-4: #ff6200; /* M4.0 - 4.9 knalliges Dunkelorange */ --mag-5: #ff2d3f; /* M5.0 - 5.9 Scharlachrot */ --mag-6: #c01eff; /* M6.0+ Elektro-Violett */ /* ---- Layout ---- */ --container: 1200px; --radius: 14px; --radius-sm: 10px; --radius-pill: 999px; --header-height: 86px; /* Site-Header 62 + Page-Title-Bar 24 */ --titlebar-height: 24px; /* ---- Motion ---- */ --ease: cubic-bezier(.2, .8, .2, 1); --t: 180ms; /* ================= LIGHT MODE (barrierefrei) ================= */ --bg: #eaf7fc; /* Lagune 50 — helle, luftige Basis */ --bg-elev: rgba(255, 255, 255, .82); --surface: #ffffff; --text: #083145; /* Lagune 900 Navy — dunkle Schrift (kein Schwarz) */ --muted: rgba(8, 49, 69, .62); /* Navy @62% */ --line: rgba(14, 98, 136, .16); /* Lagune 700 @16% */ --shadow: 0 10px 30px rgba(8, 49, 69, .12); --shadow-soft: 0 6px 18px rgba(8, 49, 69, .09); --glow: rgba(244, 169, 50, .22); /* Orange-Glow */ --glow-2: rgba(225, 29, 116, .18); /* Magenta-Glow */ --focus: rgba(244, 169, 50, .55); /* Orange-Focus-Ring */ /* Header / Menu */ --header-bg: #ffffff; /* weisser Header */ /* --footer-bg wird hier BEWUSST NICHT gesetzt: ohne Definition greifen die Rueckfallwerte, und beide Footer bleiben im hellen Modus so, wie sie waren (Mega-Footer weiss ueber --header-bg, schlichter Footer durchsichtig). Nur der blaue Modus weiter unten definiert das Token. */ --header-ink: #0a415d; /* Lagune 800 */ --header-line: rgba(14, 98, 136, .16); --header-shadow: 0 10px 24px rgba(8, 49, 69, .10); --header-link-hover: #083145; /* Lagune 900 */ --titlebar-accent: rgba(21, 141, 189, .18); /* Lagune 500 — Sky-Glow */ --menu-bg: rgba(255, 255, 255, .97); --menu-border: rgba(14, 98, 136, .14); --menu-divider: rgba(14, 98, 136, .10); --menu-label: rgba(8, 49, 69, .55); --menu-text: rgba(8, 49, 69, .90); --menu-meta: rgba(8, 49, 69, .58); --menu-hover: rgba(14, 98, 136, .07); --menu-card-bg: rgba(14, 98, 136, .035); --menu-card-border: rgba(14, 98, 136, .09); --menu-input-bg: rgba(14, 98, 136, .045); --menu-input-border: rgba(14, 98, 136, .14); --social-bg: rgba(14, 98, 136, .06); --social-border: rgba(14, 98, 136, .12); --social-ink: #0a415d; /* ---- Karten-Controls (KLEIN: Map-Buttons, Modell-Select, Slider, Legende) ---- Theme-UNABHAENGIG: sitzen ueber der bunten Karte, wo dunkles Lagune-Glas + weisse Schrift in BEIDEN Modi am lesbarsten ist. Bewusst nicht theme-folgend. */ --map-control-bg: linear-gradient(180deg, rgba(19, 145, 176, .88), rgba(14, 98, 136, .93), rgba(10, 65, 93, .98)); /* gleicher Himmel-zu-Meer-Verlauf wie die Panels */ --map-control-bg-hover: linear-gradient(180deg, rgba(45, 170, 205, .90), rgba(22, 120, 158, .94), rgba(14, 84, 116, .98)); /* Hover = heller */ --map-control-ink: #ffffff; --map-control-blur: blur(16px) saturate(1.3); /* Glas: Karte schimmert gefrostet durch */ /* ---- Inhaltsreiche Panels (Layer-Karte, Suche) — theme-FOLGEND ---- Light: gefrostetes Weiss + Navy-Schrift (barrierefrei). Blue: Lagune-Glas + helle Schrift. */ --map-panel-bg: rgba(255, 255, 255, .80); /* Light: kraeftig gefrostetes Weiss ueber der Karte */ --layer-panel-bg: var(--map-panel-bg); /* Layer-Panel folgt Map-Panel (beide Modi) */ --layer-rail-bg: rgba(255, 255, 255, .92); /* Icon-Rail (Light: near-opak); Blue-Override in start.css */ /* Overlay-Legenden (Special: Aurora/Warnungen/SPC) */ --legend-bg: rgba(8, 49, 69, .92); /* dunkel */ --legend-bg-light: rgba(255, 255, 255, .9); /* dieselbe Legende im Light-Theme */ /* Layer-Badges (LIVE / D2 / GFS / SPC …) — default = Magenta-Akzent */ --badge-bg: var(--accent-alt-soft-bg); --badge-ink: var(--accent-alt); --badge-border: var(--accent-alt-soft-border); color-scheme: light; } /* ================= BLUE MODE (Default, „Sommer, Sonne") ================= Attribut historisch "dark" — der Modus IST Blue (Lagunen-Blau). Helle Schrift auf #0e6288, weiss besteht AA-Kontrast. Orange bleibt Akzent. */ html[data-theme="dark"] { --bg: #0a415d; /* Lagune 800 — dunklerer Seiten-Grund (Start + Unterseiten inkl. Webcam). Header (--header-bg 700-Glas) + Footer (--surface) bleiben. */ --bg-elev: rgba(12, 82, 112, .72); /* etwas heller/glasig — Content-Karten */ --surface: #0a415d; /* Lagune 800 */ --text: #eaf7fc; /* Lagune 50 */ --muted: rgba(234, 247, 252, .68); --line: rgba(161, 218, 238, .16); /* Lagune 200 @ low alpha */ --shadow: 0 18px 44px rgba(3, 26, 38, .48); --shadow-soft: 0 10px 28px rgba(3, 26, 38, .36); --glow: rgba(244, 169, 50, .22); --glow-2: rgba(225, 29, 116, .18); --focus: rgba(244, 169, 50, .55); /* Accent-Soft-Backgrounds fuer den blauen Grund */ --accent-soft-bg: rgba(244, 169, 50, .14); --accent-soft-border: rgba(244, 169, 50, .34); --accent-alt-soft-bg: rgba(225, 29, 116, .14); --accent-alt-soft-border: rgba(225, 29, 116, .34); /* 07.08.2026 (Maren, in /admin/farben/ erprobt): #0C587A bei 84 %. Deckender als vorher (.62), das Glas bleibt aber erhalten — der Header hat backdrop-filter, die Karte schimmert weiterhin durch. */ --header-bg: rgba(12, 88, 122, .84); /* Footer in derselben Farbe, aber DECKEND. Eigenes Token statt --surface: letzteres haengt an 91 Stellen (Karten, Panels) und haette die halbe Seite mitgefaerbt. */ --footer-bg: #0c587a; --header-ink: #eaf7fc; --header-line: rgba(161, 218, 238, .18); --header-shadow: 0 14px 30px rgba(3, 26, 38, .40); --header-link-hover: var(--accent); --titlebar-accent: rgba(104, 194, 227, .24); /* Lagune 300 — Himmelblau-Glow */ /* Inhaltsreiche Panels — Himmel-zu-Meer-Verlauf (oben hell #1391b0 → 700 → 800), KRAEFTIG: hohe Deckung, Verlauf dominiert; oben ein Hauch Luft, unten satt geerdet. */ --map-panel-bg: linear-gradient(180deg, rgba(19, 145, 176, .88), rgba(14, 98, 136, .93), rgba(10, 65, 93, .98)); --menu-bg: rgba(10, 65, 93, .96); /* Lagune 800 */ --menu-border: rgba(161, 218, 238, .14); --menu-divider: rgba(161, 218, 238, .10); --menu-label: rgba(234, 247, 252, .52); --menu-text: rgba(234, 247, 252, .88); --menu-meta: rgba(234, 247, 252, .58); --menu-hover: rgba(161, 218, 238, .10); --menu-card-bg: rgba(161, 218, 238, .05); --menu-card-border: rgba(161, 218, 238, .12); --menu-input-bg: rgba(161, 218, 238, .06); --menu-input-border: rgba(161, 218, 238, .16); --social-bg: rgba(161, 218, 238, .08); --social-border: rgba(161, 218, 238, .14); --social-ink: #eaf7fc; --legend-bg: rgba(8, 49, 69, .92); /* Special-Legende: Tiefsee */ color-scheme: dark; } /* ===== Premium — EIN Farbschema für alle Einstiege ===== Bisher hatte jeder Premium-Kasten seine eigene Farbe: Livecams magenta (--accent-alt), News auf Gold-Grund mit Weiß, Dashboard neutral, Zeitzonen weiß-transparent. Jetzt zentral, aufgebaut auf dem Marken-Akzent (Logo-Gold). ⚠️ Gold als SCHRIFT geht nur auf dunklem Grund: #f4a932 auf Weiß ergibt Kontrast 1.99 (AA verlangt 4.5). Deshalb im hellen Thema ein abgedunkeltes Gold (#8a5a12 → 5.91). Der gefüllte Knopf trägt in BEIDEN Themes Navy auf Gold (6.88) — dieselbe Optik, überall lesbar. */ :root { --premium-ink: #8a5a12; /* Auszeichnung, helles Thema */ --premium-bg: linear-gradient(180deg, #fffaf1 0%, #fbeed6 100%); --premium-pattern: radial-gradient(38px 38px at 88% 30%, rgba(255, 255, 255, .92), rgba(104, 194, 227, .30) 45%, transparent 70%), radial-gradient(64px 64px at 95% 78%, rgba(255, 255, 255, .78), rgba(14, 98, 136, .20) 50%, transparent 72%), radial-gradient(26px 26px at 78% 76%, rgba(255, 255, 255, .92), rgba(244, 169, 50, .32) 50%, transparent 72%), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230e6288%22%20stop-opacity%3D%22.10%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%2368c2e3%22%20stop-opacity%3D%22.12%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f4a932%22%20stop-opacity%3D%22.14%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%220%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%22.00%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%22.85%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%22.00%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M420%2C200%20C600%2C150%20640%2C40%20820%2C26%20C980%2C14%201080%2C70%201200%2C44%20L1200%2C200%20Z%22%20fill%3D%22url%28%23a%29%22%2F%3E%3Cpath%20d%3D%22M420%2C200%20C600%2C150%20640%2C40%20820%2C26%20C980%2C14%201080%2C70%201200%2C44%22%20fill%3D%22none%22%20stroke%3D%22url%28%23b%29%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); --premium-border: rgba(244, 169, 50, .42); --premium-shadow: 0 14px 30px rgba(8, 49, 69, .13), 0 2px 0 rgba(255, 255, 255, .9) inset, 0 -12px 26px rgba(160, 120, 40, .07) inset; --premium-price-ink: #7d5210; --premium-price-bg: rgba(160, 120, 40, .10); --premium-price-shadow: inset 0 2px 5px rgba(140, 100, 30, .16), 0 1px 0 rgba(255, 255, 255, .8); --premium-cta-bg: linear-gradient(180deg, #ffc65e 0%, #f09d24 100%); --premium-cta-ink: #083145; /* Kein farbiges Leuchten (Wunsch Maren) — enger, neutraler Schatten. */ --premium-cta-shadow: 0 2px 4px rgba(0, 0, 0, .30), 0 1px 0 rgba(255, 255, 255, .55) inset, 0 -2px 0 rgba(120, 70, 0, .20) inset; } html[data-theme="dark"] { /* Aufgehelltes Gold: auf der hellen oberen Verlaufskante (#245a70) ergibt das Logo-Gold nur 4.16, dieses hier 5.69. */ --premium-ink: #ffd08a; --premium-bg: linear-gradient(180deg, #10547a 0%, #06283a 100%); --premium-pattern: radial-gradient(38px 38px at 88% 30%, rgba(255, 255, 255, .22), rgba(104, 194, 227, .16) 45%, transparent 70%), radial-gradient(64px 64px at 95% 78%, rgba(255, 255, 255, .14), rgba(14, 98, 136, .28) 50%, transparent 72%), radial-gradient(26px 26px at 78% 76%, rgba(255, 255, 255, .20), rgba(244, 169, 50, .20) 50%, transparent 72%), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2368c2e3%22%20stop-opacity%3D%22.26%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%230e6288%22%20stop-opacity%3D%22.16%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f4a932%22%20stop-opacity%3D%22.10%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%220%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%22.00%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%22.22%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%22.00%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M420%2C200%20C600%2C150%20640%2C40%20820%2C26%20C980%2C14%201080%2C70%201200%2C44%20L1200%2C200%20Z%22%20fill%3D%22url%28%23a%29%22%2F%3E%3Cpath%20d%3D%22M420%2C200%20C600%2C150%20640%2C40%20820%2C26%20C980%2C14%201080%2C70%201200%2C44%22%20fill%3D%22none%22%20stroke%3D%22url%28%23b%29%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); --premium-border: rgba(244, 169, 50, .28); --premium-shadow: 0 16px 34px rgba(3, 22, 32, .50), 0 2px 0 rgba(255, 255, 255, .07) inset, 0 -14px 28px rgba(0, 0, 0, .16) inset; --premium-price-ink: #ffc65e; --premium-price-bg: rgba(2, 20, 29, .28); --premium-price-shadow: inset 0 2px 5px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .06); }