/* ========================================================================= Design-Tokens — Online-Schulung 11.2.3.9 mF HRI-Berlin · Human Reliability Institute ------------------------------------------------------------------------- GESTALTUNGSTHESE — "Weiche Werkbank" Die Oberfläche besteht aus wenigen großen, stark gerundeten Flächen, die mit Abstand nebeneinander liegen: Schiene, Blatt, Wiedergabe. Sie werden nicht von Rahmen getrennt, sondern von Rundung, Abstand und einer leisen Helligkeitsstufe. Struktur entsteht aus Form und Farbe, nicht aus Linien und nicht aus Schatten. RADIUS-SKALA — abgestuft, nicht beliebig Jede Ebene hat ihren eigenen Radius; verschachtelte Elemente werden immer um ihr Innenmaß kleiner gerundet als ihr Träger. Nichts ist eckig. --r-2xl 32px Außenflächen: Schiene, Blatt, Dialog, Schublade --r-xl 24px große Blöcke im Blatt --r-lg 18px Kacheln, Listenzeilen, Kopfzeile --r-md 12px Tasten, Felder, Optionen --r-sm 8px kleine Marken --r-pill 999px Chips, Icon-Tasten, Wiedergabeleiste FARBROLLEN Tinte #16181b Text und dunkle Sonderflächen Blatt #ffffff Inhaltsfläche Werkbank #e8eaec Fläche zwischen den Panelen Signalrot #c80000 DER Akzent. Er besitzt: · primäre Handlung · aktives Kapitel und aktuelle Position · Fortschritt · Pflicht-, Warn- und Fehlerzustände · innerste Sicherheitszone Dunkle Flächen bleiben Sonderfall: Fortschrittskarte und Wiedergabe- pille. Der Rest ist hell — der Kurs läuft in hellen Lager- und Büroumgebungen. Die vier Fachzonen (Landseite → Luftseite → Sicherheitsbereich → sensibler Teil) bleiben als Rampe vom neutralen Grau ins Markenrot. Grün ist reine Statusfarbe für "richtig / erfüllt". Es werden keine Webfonts geladen — der Kurs muss ohne Internet laufen. ========================================================================= */ :root { color-scheme: light; /* ---------- Primitive: Marke ---------- */ --hri-rot: #c80000; --hri-anthrazit: #4d4e52; --c-rot-50: #fef2f1; --c-rot-100: #fbdedc; --c-rot-200: #f6bcb9; --c-rot-300: #ec8a86; --c-rot-400: #db4f4a; --c-rot-500: #c80000; --c-rot-600: #ab0505; --c-rot-700: #8a0808; --c-rot-800: #5f0808; /* ---------- Primitive: Neutral (kühl, aus #4d4e52 abgeleitet) ---------- */ --c-n-0: #ffffff; --c-n-25: #fbfbfc; --c-n-50: #f5f6f7; --c-n-75: #eef0f2; --c-n-100: #e8eaec; --c-n-200: #dadde0; --c-n-300: #c2c6ca; --c-n-400: #9ba0a6; /* #767b82 erreichte auf der gesenkten Fläche #f5f6f7 nur 3,94:1 und blieb damit unter WCAG AA. Dieser Wert trägt auf allen drei hellen Flächen: Blatt #ffffff 5,30:1 · gesenkt #f5f6f7 4,90:1 · Füllung #eef0f2 4,64:1. */ --c-n-500: #676c72; --c-n-600: #5b6067; --c-n-650: #4d4e52; --c-n-700: #3b3f45; --c-n-800: #26292e; --c-n-850: #1c1e22; --c-n-900: #16181b; --c-n-950: #0d0e10; /* ---------- Primitive: Status ---------- */ --c-ok-100: #ddf0e5; --c-ok-500: #157a44; --c-ok-600: #106236; --c-ok-700: #0b4a29; --c-warn-100:#fceeda; --c-warn-500:#9c6a08; --c-warn-600:#7c5406; /* ---------- Fachzonen: Rampe Grau → Markenrot ---------- */ --zone-land: #8a8d93; --zone-luft: #4d4e52; --zone-sb: #96261d; --zone-sensibel: #c80000; --zone-land-bg: #eef0f1; --zone-luft-bg: #e6e7e9; --zone-sb-bg: #fbeceb; --zone-sensibel-bg: #fde3e1; /* Schriftfarbe auf der vollflächigen Zonenmarke. Im hellen Schema sind alle vier Zonenfarben dunkel genug für Weiß; im dunklen Schema werden Land- und Luftseite aufgehellt und brauchen dann dunkle Schrift. */ --zone-land-fg: #14161a; /* 5,44:1 auf #8a8d93 */ --zone-luft-fg: #ffffff; /* 8,31:1 auf #4d4e52 */ --zone-sb-fg: #ffffff; /* 8,10:1 auf #96261d */ --zone-sensibel-fg: #ffffff; /* 6,08:1 auf #c80000 */ /* ---------- Semantische Rollen: Hell (Standard) ---------- */ --bg-app: var(--c-n-100); /* Werkbank zwischen den Flächen */ --bg-canvas: var(--c-n-0); /* Blatt */ --bg-raised: var(--c-n-0); --bg-sunken: var(--c-n-50); /* Block im Blatt */ --bg-fill: var(--c-n-75); /* träge Fläche: Taste, Feld */ --bg-inverse: var(--c-n-900); /* Sonderfläche: Fortschritt, Player */ --bg-rail: var(--c-n-0); --fg-strong: var(--c-n-900); --fg-default: var(--c-n-800); --fg-muted: var(--c-n-600); --fg-subtle: var(--c-n-500); --fg-inverse: var(--c-n-25); --fg-onbrand: #ffffff; /* Linien sind Ausnahme, nicht Prinzip. */ --line-chassis: var(--c-n-200); --line-strong: var(--c-n-300); --line-default: var(--c-n-200); --line-subtle: var(--c-n-75); /* DER Akzent. Er besitzt Handlung, Aktivzustand und Fortschritt. */ --brand: var(--c-rot-500); --brand-hover: var(--c-rot-600); --brand-soft: var(--c-rot-50); --brand-tint: var(--c-rot-100); --brand-fg: var(--c-rot-700); /* Akzent-Sekundär = Tinte, für ruhige Sekundärflächen. */ --accent: var(--c-n-900); --accent-soft: var(--c-n-75); --accent-fg: var(--c-n-900); --ok: var(--c-ok-500); --ok-soft: var(--c-ok-100); --ok-fg: var(--c-ok-700); --bad: var(--c-rot-500); --bad-soft: var(--c-rot-100); --bad-fg: var(--c-rot-700); --warn: var(--c-warn-500); --warn-soft: var(--c-warn-100); --focus-ring: var(--c-rot-500); /* ---------- Typografie ---------- */ --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "Cascadia Mono", "Roboto Mono", Consolas, monospace; /* Zahlen laufen in derselben Schrift, nur tabellarisch — das hält die Oberfläche weich statt technisch. */ --font-num: var(--font-ui); --fs-micro: 0.6875rem; --fs-2xs: 0.75rem; --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-md: 1.0625rem; --fs-lg: clamp(1.15rem, 1rem + 0.55vw, 1.35rem); --fs-xl: clamp(1.55rem, 1.05rem + 1.9vw, 2.85rem); --fs-2xl: clamp(2rem, 1.3rem + 2.8vw, 3.6rem); --fs-3xl: clamp(3.5rem, 2rem + 7vw, 7.5rem); --lh-tight: 0.98; --lh-snug: 1.14; --lh-body: 1.55; --lh-read: 1.68; --fw-normal: 400; --fw-medium: 500; --fw-bold: 600; --fw-black: 700; --track-display: -0.03em; --track-tight: -0.014em; --track-label: 0.07em; --track-num: -0.01em; --track-wide: 0.07em; /* ---------- Raster ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-7: 2rem; --sp-8: 2.5rem; --sp-9: 3rem; --sp-10: 4rem; --sp-11: 5rem; /* ---------- Radius: abgestuft ---------- */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px; /* ---------- Tiefe: nur ein Hauch, nur für schwebende Flächen ---------- */ --sh-1: 0 1px 2px rgba(22, 24, 27, .05); --sh-2: 0 2px 8px rgba(22, 24, 27, .07); --sh-3: 0 10px 34px rgba(22, 24, 27, .16); --scrim: rgba(22, 24, 27, .42); /* ---------- Motion ---------- */ --mo-instant: 90ms; --mo-fast: 160ms; --mo-normal: 240ms; --mo-slow: 340ms; --mo-stage: 480ms; --ease-enter: cubic-bezier(.22, 1, .36, 1); --ease-exit: cubic-bezier(.5, 0, .75, 0); --ease-move: cubic-bezier(.4, 0, .2, 1); --stagger: 52ms; /* ---------- Layout ---------- */ --rail-w: 292px; --gap-shell: 10px; --bar-h: 60px; --stage-max: 1240px; --read-max: 66ch; } /* ========================================================================= Dunkle Variante — nur auf ausdrückliche Wahl über die Kopfzeile. Dieselbe Flächenlogik, nur eine Stufe tiefer: Werkbank fast schwarz, Panele anthrazit. Das Signalrot wird angehoben, damit es gleich laut bleibt. ========================================================================= */ :root[data-theme="dark"] { color-scheme: dark; --bg-app: #0d0e10; --bg-canvas: #17191c; --bg-raised: #17191c; --bg-sunken: #1e2126; --bg-fill: #24272c; --bg-inverse: #24272c; --bg-rail: #17191c; --fg-strong: #f4f5f6; --fg-default: #e0e2e5; --fg-muted: #a3a8ae; /* #82878e blieb auf der gesenkten Fläche mit 4,46:1 knapp unter WCAG AA. Dieser Wert trägt auf allen drei dunklen Flächen: Blatt #17191c 5,41:1 · gesenkt #1e2126 4,96:1 · Füllung #24272c 4,60:1. */ --fg-subtle: #8a8f96; --fg-inverse: #f4f5f6; --fg-onbrand: #ffffff; --line-chassis:#2b2f35; --line-strong: #3a3f46; --line-default:#2b2f35; --line-subtle: #212429; /* Im dunklen Schema trägt Rot weiterhin weiße Schrift auf Taste, Chip und aktivem Kapitel. #ef3b33 wäre dafür zu hell (3,93:1); #dd2f26 erreicht 4,66:1 gegen Weiß und bleibt mit 4,15:1 gegen die Arbeitsfläche klar sichtbar. Der Hover geht deshalb nach unten statt nach oben. */ --brand: #dd2f26; --brand-hover: #c8241d; --brand-soft: #2b100e; --brand-tint: #3a1512; --brand-fg: #ff8b85; --accent: #f4f5f6; --accent-soft: #24272c; --accent-fg: #f4f5f6; --ok: #35b573; --ok-soft: #0d2c1d; --ok-fg: #7cdfa8; --bad: #ef3b33; --bad-soft:#2b100e; --bad-fg:#ff8b85; --warn: #d9a13c; --warn-soft:#2d2308; --focus-ring: #ef3b33; --zone-land: #9ea1a7; --zone-luft: #c3c5ca; --zone-sb: #e0605a; --zone-sensibel: #ef3b33; --zone-land-bg: #1e2126; --zone-luft-bg: #24272c; --zone-sb-bg: #2c1413; --zone-sensibel-bg: #351110; --zone-land-fg: #14161a; /* 6,99:1 */ --zone-luft-fg: #14161a; /* 10,49:1 */ --zone-sb-fg: #14161a; /* 5,17:1 — Weiß käme nur auf 3,51:1 */ --zone-sensibel-fg: #14161a; /* 4,61:1 — Weiß käme nur auf 3,93:1 */ --sh-1: 0 1px 2px rgba(0, 0, 0, .5); --sh-2: 0 2px 10px rgba(0, 0, 0, .5); --sh-3: 0 12px 40px rgba(0, 0, 0, .6); --scrim: rgba(0, 0, 0, .66); } /* Größere Schrift für Bildschirmarbeitsplätze / Sehhilfe */ :root[data-textsize="gross"] { --fs-micro: 0.75rem; --fs-2xs: 0.8125rem; --fs-xs: 0.875rem; --fs-sm: 1.0625rem; --fs-md: 1.1875rem; --lh-body: 1.62; --lh-read: 1.78; }