/* ══════════════════════════════════════════════════════════════════ SimDashboard — Design-Tokens Die EINZIGE Stelle, an der Farben, Schriftgrößen, Abstände und Bewegungsdauern definiert werden. Wer in v2.css, buehne.css oder einer Seiten-CSS einen Zahlwert hartkodiert, bricht das System — genau daran ist die alte Fassung gescheitert (vier hartkodierte rgba-Akzentwerte, die nach jedem Farbwechsel nachgezogen werden mussten und es nie wurden). FARBREGEL — „Rahmen & Aktion" gegen „Messwert": --marke* Anwendungsrahmen und Handlungsangebote. HENN-Rot. --accent Messwerte. Bernstein. Was gemessen wurde, ist bernstein. --ok/--warn/--crit ausschließlich Ampelbewertung, sonst nie. --line3 neutraler Hover. Karten und Chips färben sich NICHT mehr, sie hellen nur ihren Rahmen auf. Warum der Fokusring nicht rot ist: #FF0000 gegen #F0564A (Ampel kritisch) hat einen Kontrast von 1,17 — die beiden sind visuell nicht unterscheidbar. Ein roter Fokusring neben einem roten kritischen Wert wäre Zufall, nicht Bedeutung. Der Ring ist darum neutral-hell und erreicht damit 13,0–15,6 auf allen Flächen, mehr als jedes Rot könnte. Alle Kontrastwerte unten sind gegen --bg / --panel / --panel2 gerechnet und auf der Seite /styleguide live nachprüfbar. ══════════════════════════════════════════════════════════════════ */ /* ── Schriften: IBM Plex, OFL 1.1, latin-Subset, lokal ────────────── Erzeugt von scripts/fonts_holen.sh — nicht von Hand pflegen. Vorher liefen Systemschriften: Luca sah SF Pro/SF Mono auf dem Mac, die Kollegen Segoe UI/Consolas auf Windows. Zwei verschiedene Dashboards, und Zahlenkolonnen, die nur auf einem davon fluchten. */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/plex-mono-400-latin.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/plex-mono-600-latin.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/plex-sans-400-latin.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/plex-sans-500-latin.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/plex-sans-600-latin.woff2') format('woff2'); } :root { /* ── Flächen ───────────────────────────────────────────────── */ --bg: #101418; --panel: #171c22; --panel2: #1e252d; --line: #2a333d; --line2: #39434e; /* Neutraler Hover-Rahmen. War zuerst #4d5865 — der Styleguide hat es mit 2,14:1 gegen --panel2 durchfallen lassen: als einziger Hinweis auf einen Zustand (WCAG 1.4.11 verlangt 3:1) war das zu schwach. #6a7787 erreicht 3,39–4,05 auf allen drei Flächen und setzt sich mit 2,20 deutlich gegen den Ruhezustand --line2 ab. */ --line3: #6a7787; /* ── Text ──────────────────────────────────────────────────── */ --ink: #e8ecef; /* 15,57 / 14,42 / 13,02 */ --ink2: #97a3ae; /* 7,19 / 6,66 / 6,01 */ --ink3: #8792a0; /* 5,86 / 5,43 / 4,90 war #5c6873 = 3,24 und verletzte damit die 4,5:1-Vorgabe an JEDEM Mikrolabel der App: KPI-Labels, Formularlabels, Tabellenköpfe, Eyebrows, Chips, die ganze Arbeitszeit-Seite. */ /* ── Marke: HENN-Rot ─────────────────────────────────────────── Verifiziert am 2026-07-31 aus henn-bildmarke.svg (fill: red), henn-bildmarke.png (#FF0000) und der CSS von henn-group.com (a:hover{color:#c20000}). NICHT #E30613 — das war eine Annahme. */ --marke: #ff0000; /* 4,63 / 4,29 / 3,87 — Kanten, Marke, Flächen OHNE Text. Als Textfarbe unbrauchbar: auf --panel2 nur 3,87. */ --marke-fuell: #c20000; /* gefüllte Flächen MIT weißem Text: 6,38 ✓ Weiß auf #ff0000 wären nur 4,00 — fällt durch. */ --marke-text: #ff7a70; /* 7,28 / 6,75 / 6,09 — Rot als Textfarbe */ --marke-schimmer: rgba(255, 0, 0, 0.10); --marke-wahl: rgba(255, 0, 0, 0.22); /* ::selection */ /* Hover auf roten Flächen hellt AUF, nicht ab. HENN verdunkelt auf der Website (#ff0000 -> #c20000), weil die weiß ist. Auf --bg fällt #c20000 auf 2,90 und verschwindet. Wer das hier später „korrigiert", macht die Buttons unsichtbar. */ --marke-heller: brightness(1.12); /* ── Messwerte: Bernstein ──────────────────────────────────── */ --accent: #ffb454; /* 10,49 / 9,72 / 8,77 */ --accent-schimmer: rgba(255, 180, 84, 0.14); --auf-accent: #17130a; /* Text auf Bernstein: 10,50 */ --cyan: #39c5cf; --purple: #b18cff; --info: #58a6ff; /* ── Ampel — nur Bewertung, sonst nie ──────────────────────── */ --ok: #3ecf8e; /* 9,27 */ --warn: #f5c542; /* 11,40 */ --crit: #f0564a; /* 5,40 */ /* Hinterlegungen für Chips und Delta-Marker. Standen vorher als rohe rgba() in v2.css und mussten bei jeder Farbänderung an sieben Stellen nachgezogen werden. */ --ok-schimmer: rgba(62, 207, 142, 0.12); --warn-schimmer: rgba(245, 197, 66, 0.12); --crit-schimmer: rgba(240, 86, 74, 0.12); --info-schimmer: rgba(88, 166, 255, 0.10); --ink2-schimmer: rgba(151, 163, 174, 0.14); --crit-dunkel: #b8362d; /* Schraffur für Ausreißer-Balken */ --schleier: rgba(6, 9, 12, 0.55); /* Mobil-Backdrop */ --code-flaeche: rgba(255, 255, 255, 0.07); --auf-marke: #fff; /* Text auf --marke-fuell: 6,38 */ --schatten-karte: 0 6px 18px rgba(0, 0, 0, 0.35); --schatten-drawer: 10px 0 34px rgba(0, 0, 0, 0.5); --schatten-hoch: 0 14px 40px rgba(0, 0, 0, 0.45); /* ── Fokus & Auswahl: neutral-hell ─────────────────────────── */ --fokus: #e8ecef; --fokus-ring: 0 0 0 2px rgba(232, 236, 239, 0.30); /* ── Schriftfamilien ───────────────────────────────────────── */ --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* ── Schriftgrößen: dichte Stufe (Arbeitsfläche) ──────────── Unverändert gegenüber der Fassung vom 21.07. — die Arbeitsflächen bleiben so dicht wie sie waren, das ist eine bewusste Entscheidung und keine offene Baustelle. */ --fs-label: 0.72rem; --fs-sub: 0.79rem; --fs-body: 0.95rem; --fs-table: 0.9rem; --fs-readout: 0.85rem; --fs-h1: 1.45rem; --fs-h2: 0.98rem; --fs-kpi: 1.46rem; /* ── Schriftgrößen: luftige Stufe (Schaufenster) ──────────── clamp() skaliert stufenlos mit der Fensterbreite — dadurch braucht die luftige Stufe keine eigenen Media-Queries und funktioniert auf 375 px genauso wie auf dem Besprechungsraum-Bildschirm. */ --sf-display: clamp(2.6rem, 7vw, 4.5rem); --sf-h1: clamp(1.8rem, 3.6vw, 2.6rem); --sf-h2: clamp(1.1rem, 1.8vw, 1.35rem); --sf-lead: clamp(1rem, 1.4vw, 1.15rem); --sf-nummer: 0.72rem; /* ── Abstands-Raster, Basis 4 ────────────────────────────────── Vorher frei gewachsen: 18/20, 13/16, 14/18, 12/14, 9/11, 15/16/13. Deshalb trafen sich Kanten nie auf einer Linie. Das Einrasten verschiebt einzelne Paddings um 1–2 px gegenüber der alten Fassung. */ --r1: 4px; --r2: 8px; --r3: 12px; --r4: 16px; --r5: 24px; --r6: 32px; --r7: 48px; /* ── Radien ────────────────────────────────────────────────── */ --rad-s: 4px; --rad-m: 6px; --rad-l: 8px; --rad-rund: 999px; /* ── Bewegung ────────────────────────────────────────────────── Drei Dauern, eine Kurve. Mehr braucht es nicht, und mehr führt dazu, dass jede neue Komponente ihre eigene Dauer erfindet. */ --dauer-flink: 120ms; /* Hover, Fokus — muss unbemerkt bleiben */ --dauer-normal: 200ms; /* Auf- und Zuklappen, Drawer */ --dauer-ruhig: 320ms; /* Seitenwechsel, Eintritt */ --kurve: cubic-bezier(0.2, 0, 0.2, 1); --kurve-aus: cubic-bezier(0.4, 0, 1, 1); }