/* --------------------------------------------------------------------- Theme: CSS Custom Properties only. Diese Datei enthaelt bewusst noch KEINE finalen Marken-/Designwerte (Logo, exakte Farbpalette) -- das kommt in der eigenen, spaeteren Design-Phase (Roadmap Abschnitt 13). Hier steht nur das technische Grundgeruest: Variablen + Hell/Dunkel-Umschaltung, damit spaeter nur diese Werte ausgetauscht werden muessen, nicht die Struktur. --------------------------------------------------------------------- */ :root { /* Flaechen */ --bg: #f7f6f3; --bg-elevated: #ffffff; --card: #ffffff; --sidebar-bg: #f0efec; --row-soft: rgba(0, 0, 0, 0.035); /* Text */ --ink: #23241f; --muted: #6b6a5e; --muted-2: #8a8a7c; /* Akzent: Blau ist der Standard aus der Design-Phase (Fusion E). Wird zur Laufzeit von js/modules/akzent.js per Inline-Style überschrieben, sobald der Schüler eine andere Farbe wählt. */ --accent: #3e74f0; --accent-light: #6da0ff; --accent-dark: #1f4bb8; --accent-soft: rgba(62, 116, 240, 0.14); --warn: #b9852f; --danger: #a3402f; --success: #2f6b4f; /* Fusion E: IBM Plex Sans fuer Text/UI, Space Mono fuer Zahlen/Countdown */ --font-sans: "IBM Plex Sans", "Source Sans 3", system-ui, -apple-system, sans-serif; --font-mono: "Space Mono", ui-monospace, "SF Mono", Consolas, monospace; /* Linien / Schatten */ --line: rgba(0, 0, 0, 0.1); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-hero: 0 16px 32px -14px rgba(31, 75, 184, 0.45); /* Radius / Abstand -- ein System statt Zufallswerte */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; color-scheme: light; } /* Dunkel: automatisch nach Systemeinstellung -- Fusion-E-Navy, 1:1 aus dem Design-Mockup (FusionFinal.dc.html). Karten sind hier bewusst KEINE eigenen Flaechen mehr, sondern nur eine leicht transluzente Tuenchung auf dem Navy-Hintergrund (wie im Mockup: rgba(255,255,255,0.04)). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #161c30; --bg-elevated: #1b2340; --card: rgba(255, 255, 255, 0.045); --sidebar-bg: #121728; --row-soft: rgba(255, 255, 255, 0.045); --ink: #ededf3; --muted: rgba(237, 237, 243, 0.62); --muted-2: rgba(237, 237, 243, 0.4); --warn: #d9a441; --danger: #d6685a; --success: #5aa77e; --line: rgba(255, 255, 255, 0.09); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4); --shadow-hero: 0 16px 32px -14px rgba(0, 0, 0, 0.55); color-scheme: dark; } } /* ... oder per explizitem Umschalter erzwungen (data-theme="dark"/"light" auf ) */ :root[data-theme="dark"] { --bg: #161c30; --bg-elevated: #1b2340; --card: rgba(255, 255, 255, 0.045); --sidebar-bg: #121728; --row-soft: rgba(255, 255, 255, 0.045); --ink: #ededf3; --muted: rgba(237, 237, 243, 0.62); --muted-2: rgba(237, 237, 243, 0.4); --warn: #d9a441; --danger: #d6685a; --success: #5aa77e; --line: rgba(255, 255, 255, 0.09); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4); --shadow-hero: 0 16px 32px -14px rgba(0, 0, 0, 0.55); color-scheme: dark; }