/* * Grundlagen des Design-Systems. * * Frueher trug jede Seite ihren eigenen :root-Block mit eigenen Farbwerten - * drei verschiedene Blautoene, dreifach abweichende Grautoene, und der * Schriftstapel stand 21-mal woertlich im Code. Eine Farbaenderung bedeutete * sieben Dateien anzufassen. Jetzt gibt es genau eine Quelle. * * Zwei Farbwelten: * :root hell - Leinwand und Teilnehmerseite * [data-thema="dunkel"] dunkel - Regie und Verwaltung * * Eine Seite waehlt die dunkle Welt ueber . */ @import url('../schriften/schriften.css'); :root { /* Markenfarben aus dem Signet. Die Oberflaechen nutzen davon meist nur eine als Hauptakzent; gemeinsam erscheinen sie in Verlaeufen und Illustrationen. So bleibt das Produkt ruhig, aber klar wiedererkennbar. */ --marke-orange: #E9522C; --marke-gruen: #84B819; --marke-blau: #003B5C; --marke-gelb: #F8B810; /* Flaechen und Text (hell) */ --grund: #FAFAFA; /* Seitenhintergrund */ --flaeche: #FFFFFF; /* Karten, Panels */ --flaeche-tief: #F4F4F5; /* eingelassene Flaechen, Eingaben */ --text: #09090B; --text-gedimmt: #71717A; --linie: rgba(0, 0, 0, 0.08); --linie-hell: rgba(0, 0, 0, 0.16); /* Die fuenf Folientoene (Bernstein/Koralle -> Gruen -> Blau -> Gelb -> Petrol). folie.css legt sie ueber .ton-n / .kap-n auf Folien, die Teilnehmerseite faerbt sich im Ton des laufenden Kapitels. Je Ton: Grundfarbe, eine etwas dunklere Fassung fuer Schrift und feine Linien, eine zarte Flaeche, eine tiefe und eine helle Stufe fuer Verlaeufe. */ --ton-1: #E9522C; --ton-1-satt: #E04A25; --ton-1-flaeche: #FFF0EA; --ton-1-tief: #B63A1D; --ton-1-hell: #F4A38E; --ton-2: #7DAE17; --ton-2-satt: #6A9712; --ton-2-flaeche: #F1F7E6; --ton-2-tief: #4F750B; --ton-2-hell: #B9D878; --ton-3: #003B5C; --ton-3-satt: #00476E; --ton-3-flaeche: #E9F2F5; --ton-3-tief: #002B43; --ton-3-hell: #6D9CAF; --ton-4: #D99A00; --ton-4-satt: #B47F00; --ton-4-flaeche: #FFF7DC; --ton-4-tief: #8A5E00; --ton-4-hell: #F8D36D; --ton-5: #1B607B; --ton-5-satt: #1B607B; --ton-5-flaeche: #EAF3F6; --ton-5-tief: #0B4258; --ton-5-hell: #85B1C0; /* Dunkelblau fuehrt, Gruen und Gelb tragen positive bzw. neutrale Werte. */ --akzent: var(--marke-blau); --akzent-flaeche: rgba(0, 59, 92, 0.08); --akzent-linie: rgba(0, 59, 92, 0.25); --gut: #65930F; --neutral: #B77F00; --schlecht: #DC2626; --warnung: #CF4825; --gut-flaeche: rgba(132, 184, 25, 0.10); --schlecht-flaeche: rgba(220, 38, 38, 0.08); --warnung-flaeche: rgba(233, 82, 44, 0.10); /* Schrift */ --schrift: 'Inter', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --schrift-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; /* Form */ --radius-s: 6px; --radius-m: 12px; --radius-l: 16px; --radius-xl: 24px; /* Bewegung */ --weich: cubic-bezier(0.16, 1, 0.3, 1); --schwung: cubic-bezier(0.34, 1.56, 0.64, 1); /* Tiefe */ --schatten: 0 1px 2px rgba(0,0,0,0.02), 0 4px 8px rgba(0,0,0,0.02), 0 16px 32px rgba(0,0,0,0.04), 0 32px 64px rgba(0,0,0,0.04); --schatten-klein: 0 4px 12px rgba(0,0,0,0.05); } [data-thema="dunkel"] { --grund: #101014; --flaeche: #17171C; --flaeche-tief: #0B0B0E; --text: #F4F4F5; --text-gedimmt: #9C9CA6; --linie: rgba(255, 255, 255, 0.07); --linie-hell: rgba(255, 255, 255, 0.14); /* Auf dunklem Grund werden die Markenfarben etwas heller. */ --akzent: #45A0C7; --akzent-flaeche: rgba(69, 160, 199, 0.13); --akzent-linie: rgba(69, 160, 199, 0.4); --gut: #A1CF45; --neutral: #F8C64C; --schlecht: #EF4444; --warnung: #F07B5D; --gut-flaeche: rgba(161, 207, 69, 0.11); --schlecht-flaeche: rgba(239, 68, 68, 0.1); --warnung-flaeche: rgba(240, 123, 93, 0.11); --schatten: 0 2px 5px rgba(0,0,0,0.5), 0 10px 25px rgba(0,0,0,0.4); --schatten-klein: 0 2px 8px rgba(0,0,0,0.4); } /* Wer weniger Bewegung eingestellt hat, bekommt sie auch: alle Animationen * und Uebergaenge enden praktisch sofort. Endlosschleifen (wanderndes Raster, * Pulsringe) stehen damit still. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }