/* ========================================================================== TS Engel — Design Tokens Technischer Service Engel · CNC-Teile & Traktorenzubehör Farbraum: OKLCH. Vorteil gegenüber HSL — gleiche L-Werte werden vom Auge auch als gleich hell wahrgenommen. Die Rampen sind dadurch gleichmäßig abgestuft und die Kontrastwerte berechenbar statt geraten. Die Chroma jeder Blau-Stufe ist per min() auf ihr sRGB-Maximum gedeckelt. Dadurch bleibt die Farbe in jeder Intensitätsstufe exakt darstellbar und kippt nicht ins Verwaschene. ========================================================================== */ :root { /* --- Steuergrößen ------------------------------------------------------ */ /* Farbwinkel 255 = der Blauton des Monogramms im Logo (#0A4F9E liegt bei 256,3°). Die Palette lag zunächst bei 242° und damit sichtbar daneben — nebeneinander wirkte es wie zwei verschiedene Blautöne. Unter 235 kippt es ins Cyan, über 270 ins Violett. */ --blau-hue: 255; --blau-chroma: 1; /* Festgelegt am 31.08.2026: „ausgewogen“. */ --grau-hue: 255; /* Neutralgrau, minimal zur Markenfarbe getönt */ /* --- Blau-Rampe -------------------------------------------------------- Die min()-Deckel sind die sRGB-Maxima bei Hue 255. Sie greifen beim festgelegten Chroma-Faktor nicht — sie sichern nur ab, falls der Farbwinkel später erneut verschoben wird. */ --blau-50: oklch(0.972 min(0.013, calc(0.008 * var(--blau-chroma))) var(--blau-hue)); --blau-100: oklch(0.941 min(0.028, calc(0.018 * var(--blau-chroma))) var(--blau-hue)); --blau-200: oklch(0.888 min(0.055, calc(0.036 * var(--blau-chroma))) var(--blau-hue)); --blau-300: oklch(0.812 min(0.096, calc(0.058 * var(--blau-chroma))) var(--blau-hue)); --blau-400: oklch(0.706 min(0.156, calc(0.082 * var(--blau-chroma))) var(--blau-hue)); --blau-500: oklch(0.610 min(0.200, calc(0.098 * var(--blau-chroma))) var(--blau-hue)); --blau-600: oklch(0.508 min(0.167, calc(0.104 * var(--blau-chroma))) var(--blau-hue)); --blau-700: oklch(0.424 min(0.139, calc(0.090 * var(--blau-chroma))) var(--blau-hue)); --blau-800: oklch(0.348 min(0.114, calc(0.072 * var(--blau-chroma))) var(--blau-hue)); --blau-900: oklch(0.282 min(0.093, calc(0.055 * var(--blau-chroma))) var(--blau-hue)); --blau-950: oklch(0.208 min(0.068, calc(0.040 * var(--blau-chroma))) var(--blau-hue)); /* --- Grau-Rampe — leicht zur Markenfarbe getönt, nie neutral-tot -------- */ --grau-50: oklch(0.978 0.003 var(--grau-hue)); --grau-100: oklch(0.953 0.005 var(--grau-hue)); --grau-200: oklch(0.912 0.007 var(--grau-hue)); --grau-300: oklch(0.855 0.009 var(--grau-hue)); --grau-400: oklch(0.720 0.011 var(--grau-hue)); --grau-500: oklch(0.598 0.012 var(--grau-hue)); --grau-600: oklch(0.498 0.012 var(--grau-hue)); --grau-700: oklch(0.406 0.011 var(--grau-hue)); --grau-800: oklch(0.322 0.010 var(--grau-hue)); --grau-900: oklch(0.248 0.009 var(--grau-hue)); --grau-950: oklch(0.178 0.008 var(--grau-hue)); /* --- Signalfarbe — sparsam einsetzen, unter 5 % der Fläche ------------- */ --signal-100: oklch(0.955 0.030 60); --signal-300: oklch(0.830 0.100 60); --signal-400: oklch(0.762 0.128 60); --signal-500: oklch(0.700 0.140 60); --signal-600: oklch(0.620 0.135 60); --signal-700: oklch(0.520 0.115 60); --signal-800: oklch(0.430 0.092 60); /* --- Statusfarben ------------------------------------------------------ Die Helligkeit ist so gewählt, dass jede Farbe auch auf ihrer eigenen hellen Fläche noch 4,5:1 erreicht — nicht nur auf Weiß. Das ist der Fall, der in der Praxis auftritt (farbiger Hinweiskasten). */ --ok: oklch(0.510 0.105 150); /* 4,8:1 auf eigener Fläche */ --ok-flaeche: oklch(0.955 0.022 150); --achtung: oklch(0.520 0.115 75); /* 5,0:1 auf eigener Fläche */ --achtung-flaeche: oklch(0.960 0.030 75); --fehler: oklch(0.520 0.160 25); /* 5,2:1 auf eigener Fläche */ --fehler-flaeche: oklch(0.957 0.022 25); /* ====================================================================== Semantische Rollen — im Projekt IMMER diese verwenden, nie die Rampenwerte direkt. Nur so lässt sich später global nachjustieren. ====================================================================== */ --bg: #ffffff; --bg-gedaempft: var(--grau-50); --flaeche: #ffffff; --flaeche-akzent: var(--blau-50); --flaeche-invers: var(--blau-950); --linie: var(--grau-200); --linie-stark: var(--grau-300); --text: var(--grau-900); /* 16.2:1 — Fließtext, Überschriften */ --text-sekundaer: var(--grau-700); /* 9.0:1 — Beschriftungen, Metadaten */ --text-gedaempft: var(--grau-600); /* 6.1:1 — Untergrenze für Lesetext */ --text-invers: #ffffff; /* Text auf --marke */ /* Text auf --marke-tief. Eigene Rolle, weil diese Fläche in BEIDEN Modi dunkel bleibt — --text-invers kippt im Dunkelmodus und wäre hier unlesbar. */ --text-auf-tief: #ffffff; --marke: var(--blau-600); /* 5.8:1 auf Weiß — Flächen, Buttons */ --marke-hover: var(--blau-700); --marke-text: var(--blau-700); /* 8.4:1 auf Weiß — Links, Auszeichn.*/ --marke-tief: var(--blau-950); /* Header-, Footer-, Ankerflächen */ --fokus: var(--blau-600); --fokus-kontrast: #ffffff; /* ====================================================================== Typografie — IBM Plex, festgelegt am 31.08.2026 Condensed für Überschriften (deutsche Komposita sind lang), die normale Breite für Fließtext, Mono für Artikelnummern und Maße. ====================================================================== */ --font-titel: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif; --font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --gewicht-titel: 600; --gewicht-titel-stark: 700; --titel-laufweite: -0.015em; --titel-zeilenhoehe: 1.12; /* Fluide Skala — Minimum bei 360 px, Maximum bei ca. 1400 px Viewport */ --schrift-display: clamp(2.25rem, 1.45rem + 3.6vw, 4rem); /* 36 → 64 */ --schrift-h1: clamp(1.875rem, 1.35rem + 2.4vw, 3rem); /* 30 → 48 */ --schrift-h2: clamp(1.5rem, 1.22rem + 1.25vw, 2.125rem); /* 24 → 34 */ --schrift-h3: clamp(1.375rem, 1.22rem + 0.7vw, 1.625rem); /* 22 → 26 */ --schrift-h4: 1.25rem; /* 20 */ --schrift-gross: 1.25rem; /* 20 */ --schrift-basis: 1.125rem; /* 18 */ --schrift-klein: 1rem; /* 16 */ --schrift-mikro: 0.9375rem; /* 15 */ --schrift-mini: 0.875rem; /* 14 */ /* Alles, was gelesen wird, steht auf --schrift-basis (18 px). Darunter nur, was überflogen wird: Beschriftungen, Tabellenzellen, Messwerte. 14 px ist die absolute Untergrenze und nur für Mono-Marginalien. h4 und --schrift-gross liegen bewusst gleichauf: h4 hebt sich über die schmale Schrift und Gewicht 600 ab, nicht über die Größe. */ /* Zeilenabstand richtet sich nach Zeilenlänge, nicht nach Schriftgröße: lange Zeilen brauchen mehr Führung, kurze Labels kommen mit weniger aus. Größere Schrift braucht relativ weniger — 1,6 bei 18 px ergibt denselben optischen Abstand wie 1,65 bei 16 px. */ --zeilenhoehe-eng: 1.2; /* Überschriften */ --zeilenhoehe-text: 1.6; /* Fließtext 18 px bis 68 Zeichen = 28,8px */ --zeilenhoehe-klein: 1.55; /* 16 px, mittlere Zeilenlänge = 24,8px */ --zeilenhoehe-mini: 1.45; /* 14–15 px, kurze Beschriftungen */ --zeilenhoehe-weit: 1.75; --lesebreite: 68ch; /* Obergrenze für Fließtextspalten */ /* --- Abstände — 4-px-Raster ------------------------------------------- */ --abstand-1: 0.25rem; --abstand-2: 0.5rem; --abstand-3: 0.75rem; --abstand-4: 1rem; --abstand-5: 1.25rem; --abstand-6: 1.5rem; --abstand-8: 2rem; --abstand-10: 2.5rem; --abstand-12: 3rem; --abstand-16: 4rem; --abstand-20: 5rem; --abstand-24: 6rem; --abstand-32: 8rem; /* --- Radien — knapp gehalten; große Radien wirken verspielt ------------ */ --radius-s: 2px; --radius-m: 4px; --radius-l: 8px; --radius-voll: 999px; /* --- Schatten — kühl getönt statt neutralschwarz ----------------------- */ --schatten-s: 0 1px 2px oklch(0.208 0.040 var(--blau-hue) / 0.08); --schatten-m: 0 2px 4px oklch(0.208 0.040 var(--blau-hue) / 0.06), 0 4px 12px oklch(0.208 0.040 var(--blau-hue) / 0.07); --schatten-l: 0 4px 8px oklch(0.208 0.040 var(--blau-hue) / 0.06), 0 12px 32px oklch(0.208 0.040 var(--blau-hue) / 0.10); /* --- Ebenen — semantisch benannt, nie 9999 ---------------------------- */ --ebene-basis: 0; --ebene-dropdown: 100; --ebene-sticky: 200; --ebene-overlay: 300; --ebene-dialog: 400; --ebene-hinweis: 500; --ebene-tooltip: 600; /* --- Bewegung — exponentielles Ausklingen, kein Federn ----------------- */ --dauer-schnell: 120ms; --dauer-mittel: 220ms; --dauer-ruhig: 420ms; --kurve: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */ --kurve-weich: cubic-bezier(0.33, 1, 0.68, 1); /* ease-out-cubic */ } /* ========================================================================== Dunkle Variante Nicht die Standarddarstellung: Die Seite wird überwiegend bei Tageslicht genutzt — Werkstattbüro, Hof, unterwegs. Hell ist dort die richtige Grundeinstellung. Dunkel ist die bewusste Alternative. ========================================================================== */ [data-modus="dunkel"] { --bg: var(--grau-950); --bg-gedaempft: oklch(0.208 0.010 var(--grau-hue)); --flaeche: oklch(0.232 0.010 var(--grau-hue)); --flaeche-akzent: oklch(0.268 0.030 var(--blau-hue)); --flaeche-invers: var(--grau-100); --linie: oklch(0.310 0.010 var(--grau-hue)); --linie-stark: oklch(0.400 0.011 var(--grau-hue)); --text: var(--grau-100); --text-sekundaer: var(--grau-300); --text-gedaempft: var(--grau-400); /* 7.6:1 auf dunklem Grund */ --text-invers: var(--grau-950); --text-auf-tief: #ffffff; /* bleibt weiß — Fläche ist dunkel */ /* Statusfarben aufhellen: Die hellen Varianten von oben wären auf dunklem Grund zu schwach (3,6:1). */ --ok: oklch(0.800 0.105 150); --ok-flaeche: oklch(0.300 0.045 150); --achtung: oklch(0.800 0.115 75); --achtung-flaeche: oklch(0.300 0.045 75); --fehler: oklch(0.800 0.150 25); --fehler-flaeche: oklch(0.300 0.045 25); --marke: var(--blau-400); --marke-hover: var(--blau-300); --marke-text: var(--blau-300); /* 10.6:1 auf dunklem Grund */ --marke-tief: oklch(0.268 0.040 var(--blau-hue)); --fokus: var(--blau-300); --fokus-kontrast: var(--grau-950); --schatten-s: 0 1px 2px oklch(0 0 0 / 0.4); --schatten-m: 0 2px 4px oklch(0 0 0 / 0.3), 0 4px 12px oklch(0 0 0 / 0.35); --schatten-l: 0 4px 8px oklch(0 0 0 / 0.3), 0 12px 32px oklch(0 0 0 / 0.45); }