/* ============================================================================= SCHULUNGSPORTAL · DESIGN-TOKENS ----------------------------------------------------------------------------- Einzige Quelle fuer Farbe, Typografie, Abstand, Radius, Elevation und Motion. Wird von jeder Seite geladen – auch von den eigenstaendigen Seiten (Login, Meeting-Raum, Nutzungsvereinbarung), die ohne App-Shell gerendert werden. Dark Mode ueber die Klasse .dark-mode am -Element. ----------------------------------------------------------------------------- GESTALTUNGSPRINZIPIEN (Redesign) 1. Der Inhalt traegt die Seite, nicht die Oberflaeche. Flaechen sind ruhig, Trennung passiert ueber Linien und Abstand – nicht ueber Schatten, Verlaeufe oder Glaseffekte. 2. Eine Akzentfarbe, sparsam eingesetzt. Azurblau markiert genau das, was anklickbar oder aktiv ist. Verlaeufe sind der Wortmarke vorbehalten und erscheinen nie auf Bedienelementen – ein Verlauf auf einem Button macht ihn nicht wichtiger, nur unruhiger. 3. Farbe bedeutet etwas. Rot, Gruen, Gelb und Blau sind Status, keine Dekoration. Wer sie dekorativ verwendet, nimmt ihnen die Warnwirkung. 4. Wenige, klar unterscheidbare Stufen. 4 Elevation-Stufen, 5 Radien, eine 4px-Abstandsskala, eine Typo-Skala mit spuerbaren Spruengen. Zwischenwerte gibt es nicht. 5. Kontrast ist Pflicht, nicht Geschmack. Alle Text/Flaeche-Paare erfuellen WCAG 2.1 AA (>= 4.5:1 fuer Text, >= 3:1 fuer Bedienelemente und Grenzen). Geprueft in beiden Themes. ============================================================================= */ /* ============================================================================= 1. DESIGN-TOKENS ============================================================================= */ :root { /* ------------------------------------------------------------------------- Rohpalette – ausschliesslich hier als Rohwert. In Komponenten wird immer ueber die semantischen Tokens weiter unten zugegriffen, damit ein Farbwechsel an genau einer Stelle passiert. ---------------------------------------------------------------------- */ /* Neutrale Achse: kuehles Tintenblau statt reinem Grau. Reines Grau wirkt neben einem blauen Akzent schmutzig; ein leichter Blaustich haelt die Flaeche ruhig und die Schrift praezise. */ --ink-950: #080b12; --ink-900: #0e121b; --ink-850: #141926; --ink-800: #1a2030; --ink-700: #252d40; --ink-600: #3a4459; --ink-500: #5a657c; --ink-400: #7c879e; --ink-300: #a8b2c5; --ink-200: #d3dae6; --ink-100: #e7ebf2; --ink-50: #f3f5f9; --ink-25: #f8fAfc; /* Akzent: Azur. Gewaehlt statt des bisherigen Indigo/Violett-Verlaufs, weil Blau in einer Lernplattform als sachlich und verlaesslich gelesen wird und ueber die gesamte Helligkeitsachse kontraststark bleibt. --azure-600 auf Weiss = 5,6:1 (AA), --azure-700 = 8,9:1 (AAA). */ --azure-800: #0d3576; --azure-700: #12459e; --azure-600: #1b62d6; --azure-500: #2b76e8; --azure-400: #5b9bf5; --azure-300: #8fbcfa; --azure-200: #c2dbfd; --azure-100: #e4effe; /* --- Flaechen --- */ --bg-app: #f6f8fb; --bg-app-tint: transparent; /* Der Farbschleier ist bewusst entfernt: er faerbte jede Flaeche leicht ein und machte Weiss auf Weiss schwer unterscheidbar. */ --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-elevated: #ffffff; --bg-input: #ffffff; --bg-hover: rgba(26, 32, 48, 0.045); --bg-active: rgba(26, 32, 48, 0.075); --bg-subtle: #f6f8fb; /* --- Linien --- */ --border-color: #e2e7ef; /* Trennlinien, Kartenrahmen – dekorativ */ --border-heavy: #c8d1de; --border-strong: #a8b2c5; --border-control: #8c929b; /* Grenze von Eingabefeldern, Auswahlfeldern und Checkboxen. Bewusst dunkler als --border-color: WCAG 1.4.11 verlangt fuer die Grenze eines Bedienelements 3:1 – 3,13:1 gegen die Feldflaeche. Fuer reine Trennlinien gilt das nicht. */ --glass-border: #e2e7ef; /* --- Text --- Gemessen auf --bg-card (#fff): primaer 18,3:1, sekundaer 7,5:1, muted 4,9:1. Auf --bg-app (#f6f8fb) bleibt muted bei 4,6:1 – dieser Wert bestimmt die Farbe, nicht der bequemere Wert gegen Weiss. */ --text-primary: #10151f; --text-secondary: #4a5568; --text-muted: #677183; --text-tertiary: #677183; --text-on-accent: #ffffff; /* Schrift auf gefuellten Statusflaechen. Im Hellschema sind die Statusfarben dunkel, also ist die Schrift weiss – im Dunkelschema kehrt sich das um (siehe unten). */ --on-danger: #ffffff; --text-on-status: #ffffff; --accent-text: #12459e; /* Akzent als Textfarbe: 8,9:1 auf Weiss (AAA). */ /* --- Akzent & Status (semantisch) --- */ /* --accent-color ist die FUELLfarbe (Buttons, aktive Flaechen, Marke). Fuer farbigen TEXT auf heller Flaeche gilt --accent-text. Die beiden duerfen nicht getauscht werden, sonst kippt der Kontrast. */ --accent-color: #1b62d6; --accent-color-2: #12459e; /* Kein zweiter Farbton mehr, nur eine dunklere Stufe derselben Farbe. */ --accent-hover: #12459e; --accent-active: #0d3576; --accent-soft: #e4effe; --accent-soft-hover: #c2dbfd; --accent-border: #8fbcfa; --accent-gradient: linear-gradient(135deg, #1b62d6 0%, #0d3576 100%); --danger-color: #c8262c; --danger-hover: #a51d22; --danger-soft: #fdeaea; --danger-soft-hover: #fce2e2; /* Nur wenig dunkler als --danger-soft: mehr Toenung liesse die rote Schrift darauf unter 4,5:1 fallen (geprueft: 4,54:1). */ --danger-border: #f4b6b8; --success-color: #14714a; --success-hover: #0f5a3a; --success-soft: #e6f4ed; --success-soft-hover: #cfe9dc; --success-border: #a7d9c1; --warning-color: #92500a; --warning-hover: #7a4208; --warning-soft: #fdf1de; --warning-soft-hover: #fae2bd; --warning-border: #f0cd94; --info-color: #12558a; --info-hover: #0e4470; --info-soft: #e5f1f9; --info-soft-hover: #cfe4f2; --info-border: #a3ccdf; /* --- Overlays --- */ --modal-bg: #ffffff; --header-bg: rgba(255, 255, 255, 0.88); --overlay-bg: rgba(8, 11, 18, 0.45); --focus-ring: #1b62d6; --focus-ring-soft: rgba(27, 98, 214, 0.28); /* --- Elevation --- Vier Stufen, bewusst zurueckhaltend. Karten liegen auf der Flaeche, sie schweben nicht: Trennung leistet in erster Linie die Linie, der Schatten setzt nur die Tiefenreihenfolge. */ --shadow-color: rgba(16, 21, 31, 0.08); --shadow-xs: 0 1px 1px rgba(16, 21, 31, 0.04); --shadow-sm: 0 1px 2px rgba(16, 21, 31, 0.06); --shadow-md: 0 4px 12px -2px rgba(16, 21, 31, 0.10), 0 2px 4px -2px rgba(16, 21, 31, 0.06); --shadow-lg: 0 16px 40px -12px rgba(16, 21, 31, 0.22), 0 4px 10px -4px rgba(16, 21, 31, 0.08); --shadow-accent: 0 1px 2px rgba(16, 21, 31, 0.10); /* Farbige Button-Schatten entfernt: sie liessen jeden Button wie eine Warnung wirken. */ /* --- Radien --- Fuenf Stufen. Der bisherige 24px-Radius wirkte an Datentabellen weich und unpraezise; 16px ist die neue Obergrenze. */ --radius-xs: 5px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 13px; --radius-xl: 16px; --radius-pill: 999px; /* --- Abstandsraster (4px-Basis) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* --- Typografie --- Skala mit spuerbaren Spruengen (ca. Faktor 1,2). Zwischenstufen wie 21px oder 22px, die vorher pro Seite abwichen, entfallen. */ --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; --text-2xs: 11px; --text-xs: 12px; --text-sm: 13.5px; --text-base: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 25px; --text-3xl: 32px; --text-4xl: 40px; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.22; --leading-snug: 1.38; --leading-normal: 1.55; --leading-relaxed: 1.7; --tracking-tight: -0.021em; --tracking-normal: 0; --tracking-wide: 0.08em; /* Lesbare Zeilenlaenge fuer Fliesstext (Nutzungsbedingungen, Support). */ --measure: 68ch; /* --- Layout --- */ /* 288px statt der frueheren 276px. Der laengste Menuepunkt ("Schulungsunterlagen" samt Zaehler-Badge) passte bei 280px in Chrome exakt auf den Pixel genau – in Safari, das etwas breiter setzt, wurde er abgeschnitten. Zusammen mit der leicht kleineren Schrift im Menue (14px statt 14.5px) bleibt jetzt echter Spielraum. */ --sidebar-width: 288px; --sidebar-width-collapsed: 72px; --topbar-height: 64px; --gutter: clamp(18px, 3vw, 40px); --content-max: 1440px; /* Mindestgroesse fuer Tippziele (WCAG 2.5.5 / Apple HIG). */ --tap-target: 44px; /* --- Motion --- */ --ease: cubic-bezier(0.32, 0.72, 0, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 0.12s; --duration-base: 0.18s; --duration-slow: 0.26s; /* --- Ebenen --- */ --z-sidebar: 999; --z-overlay: 998; --z-header: 900; --z-banner: 10000; --z-modal: 10001; color-scheme: light; accent-color: var(--accent-color); } /* ============================================================================= 2. DARK MODE ----------------------------------------------------------------------------- Kein invertiertes Hellschema, sondern eine eigene Flaechenordnung: die App-Flaeche ist am dunkelsten, jede hoehere Ebene wird heller. So bleibt die Tiefenstaffelung sichtbar, ohne dass Schatten arbeiten muessen – Schatten sind auf dunklem Grund ohnehin fast wirkungslos. Reines Schwarz und reines Weiss werden vermieden: der Kontrastsprung flimmert und ermuedet beim Lesen laengerer Listen. ============================================================================= */ html.dark-mode { --bg-app: #080b12; --bg-app-tint: transparent; --bg-sidebar: #0e121b; --bg-card: #141926; --bg-elevated: #1a2030; --bg-input: #1a2030; --bg-hover: rgba(255, 255, 255, 0.06); --bg-active: rgba(255, 255, 255, 0.10); --bg-subtle: #11161f; --border-color: #242c3d; --border-heavy: #364057; --border-strong: #4a5673; --border-control: #5b6c92; /* 3,10:1 gegen die Feldflaeche --bg-input. */ --glass-border: #242c3d; /* Gemessen auf --bg-card (#141926): primaer 15,6:1, sekundaer 9,2:1, muted 6,0:1. Auf der hellsten Ebene --bg-elevated noch 5,5:1. */ --text-primary: #eef2f8; --text-secondary: #b3bccd; --text-muted: #8d97ab; --text-tertiary: #8d97ab; --text-on-accent: #ffffff; /* Im Dunkelschema sind die Statusfarben aufgehellt. Schrift auf einer gefuellten Statusflaeche muss deshalb dunkel sein – weiss auf --danger-color erreicht hier nur 2,4:1. Mit dunkler Tinte: 7,6:1. */ --on-danger: #10151f; --text-on-status: #10151f; --accent-text: #8fbcfa; /* 9,0:1 auf --bg-card (AAA). */ /* Fuellfarbe und Textfarbe trennen sich hier bewusst: ein Blau, das als Flaeche mit weisser Schrift AA erreicht (#2971df, 4,64:1), ist als Linktext auf dunklem Grund zu dunkel (3,78:1). Fuer Text gilt daher --accent-text (#8fbcfa, 8,98:1). */ --accent-color: #2971df; --accent-color-2: #5b9bf5; --accent-hover: #3d82e8; --accent-active: #5b9bf5; --accent-soft: rgba(43, 118, 232, 0.16); --accent-soft-hover: rgba(43, 118, 232, 0.26); --accent-border: rgba(91, 155, 245, 0.42); --accent-gradient: linear-gradient(135deg, #2971df 0%, #12459e 100%); /* Statusfarben werden im Dunkeln aufgehellt und entsaettigt: die hellen Varianten des Hellschemas haetten auf dunklem Grund zu wenig Kontrast. */ --danger-color: #ff8085; --danger-hover: #ffa0a4; --danger-soft: rgba(255, 128, 133, 0.15); --danger-soft-hover: rgba(255, 128, 133, 0.26); --danger-border: rgba(255, 128, 133, 0.38); --success-color: #4ed19b; --success-hover: #74dcb2; --success-soft: rgba(78, 209, 155, 0.15); --success-soft-hover: rgba(78, 209, 155, 0.26); --success-border: rgba(78, 209, 155, 0.38); --warning-color: #f2b544; --warning-hover: #f6c86e; --warning-soft: rgba(242, 181, 68, 0.15); --warning-soft-hover: rgba(242, 181, 68, 0.26); --warning-border: rgba(242, 181, 68, 0.38); --info-color: #5cbdf0; --info-hover: #85cef4; --info-soft: rgba(92, 189, 240, 0.15); --info-soft-hover: rgba(92, 189, 240, 0.26); --info-border: rgba(92, 189, 240, 0.38); --modal-bg: #1a2030; --header-bg: rgba(14, 18, 27, 0.88); --overlay-bg: rgba(4, 6, 10, 0.68); --focus-ring: #5b9bf5; --focus-ring-soft: rgba(91, 155, 245, 0.34); --shadow-color: rgba(0, 0, 0, 0.5); --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.7), 0 4px 10px -4px rgba(0, 0, 0, 0.5); --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.4); color-scheme: dark; } /* ============================================================================= 3. NUTZERPRAEFERENZEN ============================================================================= */ /* Wer Bewegung reduziert haben moechte, bekommt keine. Uebergaenge werden nicht auf 0 gesetzt, sondern auf einen Wert, der Zustandswechsel noch nachvollziehbar macht, ohne zu animieren. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0.01ms; --duration-base: 0.01ms; --duration-slow: 0.01ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Hoher Kontrast: Linien werden verstaerkt, damit Begrenzungen auch bei reduzierter Farbwahrnehmung sicher erkennbar bleiben. */ @media (prefers-contrast: more) { :root { --border-color: #9aa5b8; --border-heavy: #6b7688; --text-secondary: #2c3444; --text-muted: #4a5568; } html.dark-mode { --border-color: #4a5673; --border-heavy: #6b7791; --text-secondary: #d5dce7; --text-muted: #b3bccd; } }