/* ========================================================================== 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; /* Die Vitrinenfläche. Die Werkstückaufnahmen entstehen im Studio auf einem kühlen hellen Grau. Gemessen liegen die drei Aufnahmen zwischen #DEE2E5 und #E4E7EC; dieser Wert ist ihr Mittel. Steht ein solches Foto auf genau dieser Fläche, hat es keine sichtbare Kante mehr und das Teil steht auf der Seite statt in einem Kasten. Der Wert gehört deshalb zum Bildmaterial und wird im Dunkelmodus NICHT gedreht — die Aufnahmen bringen ihren hellen Grund mit, und eine dunkle Fläche darunter würde sie wieder einrahmen. Aus demselben Grund tragen die Texte darauf eigene Rollen. */ --vitrine: oklch(0.918 0.007 var(--grau-hue)); --vitrine-text: var(--grau-900); /* 12,7:1 */ --vitrine-text-sekundaer: var(--grau-700); /* 7,0:1 */ --vitrine-text-gedaempft: var(--grau-600); /* 4,8:1 */ --vitrine-linie: oklch(0.855 0.009 var(--grau-hue)); /* ====================================================================== 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); }