/* ============================================================ Echtgeld Slots — Design Tokens (Light & Dark) Identität: Violett = verbindender Akzent, Grün = CTA, Gold = Sterne. Werte = HEX (browser-genaue sRGB, deckungsgleich mit Figma). oklch-Quelle in Klammern. Dark aktivieren: (oder auf einem Container). ============================================================ */ /* ============================================================ BREAKPOINTS — kanonische Skala (desktop-first, rem) ------------------------------------------------------------ CSS-Variablen funktionieren NICHT in @media-Bedingungen, darum ist dies eine dokumentierte Konvention: immer diese Literalwerte verwenden, keine Ad-hoc-Breakpoints (nur begründete Custom-Fälle). 4 Bänder · 3 Grenzlinien (root 16px → alle Grenzen glatt in rem): Desktop ≥ 1360px (85rem) → Basis-Stil, KEIN @media (.container = 85rem max) Laptop 1024–1359px → @media (max-width: 84.9375rem) Tablet 768–1023px → @media (max-width: 63.9375rem) Phone ≤ 767px → @media (max-width: 47.9375rem) Desktop-first-Kaskade (jeder Block = „dieses Band und alles darunter"): @media (max-width: 84.9375rem) { … } Laptop ↓ (≤1359) @media (max-width: 63.9375rem) { … } Tablet ↓ (≤1023) @media (max-width: 47.9375rem) { … } Phone (≤767) Nur EIN Band ansprechen (Fix soll nicht nach unten durchsickern) → Range: @media (min-width: 64rem) and (max-width: 84.9375rem) { … } nur Laptop @media (min-width: 48rem) and (max-width: 63.9375rem) { … } nur Tablet Grenz-Offsets: .9375rem = Grenze − 1px (1360 bleibt Desktop, 768 Tablet). min-Werte (Range/„und aufwärts"): 48rem=768 · 64rem=1024 · 85rem=1360. BEGRÜNDETE CUSTOM-BREAKPOINTS (Ausnahmen, kein Ad-hoc): 106rem = 1696px → Nav-Push-Schwelle. Der Sidenav-Push (Flex-Shrink) mächt den Container erst NICHT platt, wenn viewport ≥ Container(85rem) + Sidenav(21rem) = 106rem. ≥1696px = Push · ≤1695px (105.9375rem) = Overlay. Siehe .sidenav in home.css. ============================================================ */ :root { /* --- Flächen & Linien --- */ --bg: #F8F4EC; /* Seite · oklch(0.968 0.012 84) */ --surface: #FFFDF9; /* Karten, Tabellen · oklch(0.995 0.006 84) */ --hero: #F9EFDD; /* Hero-Tint, Chips · oklch(0.955 0.026 80) */ --panel: #2E241D; /* Tipps-Sektion · oklch(0.27 0.02 60) */ --panel-ink: #FFFDF9; /* Text auf Panel */ --footer-bg: var(--panel); /* Footer */ --line: #E4DDD3; /* Rahmen, Trenner · oklch(0.90 0.016 78) */ /* --- Text --- */ --ink: #2E241D; /* Überschriften · oklch(0.27 0.02 60) */ --sub: #6B6157; /* Fließtext · oklch(0.50 0.02 68) */ /* --- Akzente --- */ --primary: #00945E; /* Grün — CTA · oklch(0.58 0.15 162) */ --on-primary: #ffffff; /* Text auf Grün */ --accent: #8A5FC9; /* Violett · oklch(0.58 0.16 300) */ --star: #D89529; /* Gold — Sterne · oklch(0.72 0.14 74) */ --nav-gold: #CE9131; /* Nav Hover/Aktiv · oklch(0.70 0.13 74) */ --negative: #C0453A; /* Rot — Nachteile / Kontra · oklch(0.52 0.17 27) */ --positive: var(--primary); /* Grün — Vorteile / Pro (Alias auf --primary) */ /* --- Form --- */ --radius: 1rem; /* 16px */ --radius-m: 0.75rem; /* 12px */ --radius-s: 0.5rem; /* 8px */ --radius-xs: 0.25rem; /* 4px */ --shadow: 0 6px 22px rgba(30, 80, 60, .10); --shadow-alt: 6px 12px 32px rgba(30, 80, 60, .10); /* --- Semantische Rollen (aus den Basis-Tokens abgeleitet) --- */ --logo: var(--accent); /* Logo-Marke */ --h1-accent: var(--accent); /* hervorgehobenes Wort in H1 */ --nav-hover: var(--nav-gold); --games-bg: var(--accent); /* Hersteller-Zahlen-Pill */ --games-fg: #ffffff; --grad-1: var(--accent); /* Verlauf Slot-Name: violett … */ --grad-2: var(--primary); /* … → grün */ --sign-open: var(--accent); /* Akkordeon offen */ --sign-closed: var(--primary); /* Akkordeon zu */ /* Eyebrows — im Light hier, im Dark vertauscht */ --kicker-alt: var(--accent); /* Beliebte Titel, FAQ */ --kicker-main: var(--primary); /* Grundlagen, Empfehlungen, Hersteller */ } [data-theme="dark"] { /* --- Flächen & Linien — Warm Charcoal --- */ --bg: #120F0C; /* oklch(0.17 0.008 70) */ --surface: #1B1813; /* oklch(0.21 0.010 70) */ --hero: #221D18; /* oklch(0.235 0.012 72) */ --panel: #1D1A24; /* violett getönt · oklch(0.225 0.020 300) */ --panel-ink: #EBE7E2; --footer-bg: var(--bg); /* dunkle Basis statt Panel */ --line: #342F2A; /* oklch(0.31 0.012 72) */ /* --- Text --- */ --ink: #EBE7E2; /* oklch(0.93 0.008 80) */ --sub: #9D9790; /* oklch(0.68 0.012 75) */ /* --- Akzente (heller für dunklen Grund) --- */ --primary: #00A56A; /* oklch(0.63 0.16 162) */ --on-primary: #ffffff; --accent: #A97CF0; /* oklch(0.68 0.17 300) */ --star: #F1BA4B; /* oklch(0.82 0.14 82) */ --nav-gold: #F1BA4B; /* oklch(0.82 0.14 82) */ --negative: #ca5143; /* heller für dunklen Grund */ --positive: var(--primary); /* Alias auf --primary (Grün) */ --shadow: 0 8px 26px rgba(0, 0, 0, .45); --shadow-alt: 6px 12px 32px rgba(0, 0, 0, .45); /* Eyebrows im Dark vertauscht */ --kicker-alt: var(--primary); /* Beliebte Titel, FAQ → Grün */ --kicker-main: var(--accent); /* Grundlagen, Empfehlungen, Hersteller → Violett */ }