/* ========================================================================== VöhringerSolutions Design System — TOKENS Version 2.0 · 13.08.2026 · Farbmodell OKLCH -------------------------------------------------------------------------- Die einzige Quelle für Werte. Enthält KEINE Komponenten und KEIN Reset — dafür ist components.css da. Import: Website @import "tokens.css"; @import "components.css"; Businessplattform @import "tokens.css"; (Tailwind übernimmt den Rest) --------------------------------------------------------------------------- WAS SICH GEGENÜBER 1.0 GEÄNDERT HAT — NUR FARBE 1. Alle Farben stehen in OKLCH statt Hex. In Hex und HSL verlieren die hellen und dunklen Enden einer Leiter ihre Sättigung, und der Farbton driftet, ohne dass man es im Code sieht. Gemessen an 1.0: der Blaustich der Neutralen schwankte zwischen C 0.0029 und 0.0153 bei 16° Hue-Drift. 2. Die Neutralen sind reines Grau. Kein Blaustich, kein Warmton, Chroma 0. Damit ist der Farbton der Neutralen keine Frage mehr, und der Akzent steht allein für die Marke. 3. Die Leitern sind gleichmäßig. Die Lightness-Schritte folgen einer erkennbaren Kurve statt dreizehn Einzelentscheidungen; --u-600 bleibt exakt auf dem Markenwert. 4. Flächen heißen --bg-dark / --bg / --bg-light. Der Name sagt die Helligkeit, nicht die Rolle — dadurch stimmt er in Hell UND Dunkel. --bg-dark ist immer der dunkelste Ton, --bg-light immer der hellste. Die Zuordnung bleibt in beiden Fällen gleich: Seite --bg-dark, Karte --bg, angehobenes Element --bg-light. Nur die Werte kippen. 5. --ink/--ink-60/--ink-40 heißen jetzt --text/--text-muted/--text-faint. Die Zahlen suggerierten Deckkraft, gemeint waren immer eigene Farben. 6. Zustände und Signale sind getrennt: Zustände tragen Text (AA, 4,5:1), Signale sind 7-px-Punkte und Balken (1.4.11, 3:1). Beide Sätze haben dieselbe Lightness und dasselbe Chroma je Gruppe — nur der Hue unterscheidet sie. Genau dafür ist OKLCH da: Farben, die gleich laut sind. Die Signalfarben standen vorher als --sig-* lokal in style.css und verfehlten dort 1.4.11 (Amber lag bei 2,61:1). 7. --text-faint erfüllt AA. In 1.0 lag der Wert bei 3,29:1 und damit unter der Norm — er trug alle zwölf Sektionslabels der Website. Bewusst NICHT übernommen: Verläufe, Lichtkanten und getönte Neutrale. Gebaut, gerechnet und geparkt in `_geparkt-tiefe-und-farbton.css` — dort steht auch, welche Fallen beim Zurückholen zu beachten sind. --------------------------------------------------------------------------- REGELN, DIE NICHT VERHANDELBAR SIND 1. Ein Akzent. Ultramarin. Kein zweiter Markenton. 2. Die Neutralen sind neutral. Chroma 0, kein Farbstich in irgendeine Richtung. Wer Wärme oder Kälte will, holt sich den geparkten Parameter zurück — und dann für das ganze System, nicht für eine Seite. 3. Grün/Amber/Rot sind AUSSCHLIESSLICH Zustände, niemals Marke. 4. Neue Werte nur, wenn keine bestehende Stufe passt — dann Stufe ergänzen, nicht daneben einen Sonderwert schreiben. Erst recht nicht als lokaler :root-Override in einer Seiten-CSS. 5. Schriftgrößen in rem (Browser-Zoom), Abstände/Radien in px (Layout soll nicht mitskalieren). 6. Höhere Ebenen sind heller, nicht dunkler — in beiden Themes. ========================================================================== */ @layer tokens { :root { /* ====================================================================== 1 · FARB-PRIMITIVE — rohe Paletten, nie direkt im Code verwenden. Immer über die semantischen Tokens in Abschnitt 2 gehen. Der Hex-Wert im Kommentar ist die sRGB-Entsprechung, nur zum Nachschlagen. ====================================================================== */ /* Ultramarin — der Akzent, und die einzige Farbe der Marke. 600 ist der Grundton und unveränderlich. */ --u-50: oklch(0.965 0.014 267.4); /* #EFF3FD */ --u-100: oklch(0.935 0.028 267.4); /* #E1E9FD */ --u-200: oklch(0.875 0.055 267.4); /* #C6D6FB */ --u-300: oklch(0.785 0.104 267.4); /* #9CB7FC */ --u-400: oklch(0.660 0.165 267.4); /* #668BF6 */ --u-500: oklch(0.530 0.205 267.4); /* #395CE0 */ --u-600: oklch(0.4271 0.2191 267.4); /* #1F35C4 ← Marken-Ultramarin */ --u-700: oklch(0.360 0.195 267.4); /* #1524A1 */ --u-800: oklch(0.295 0.160 267.4); /* #0D197A */ --u-900: oklch(0.235 0.125 267.4); /* #071058 */ /* Neutrale — reines Grau, Chroma 0. Dreizehn Stufen, dicht im hellen Bereich (dort liegen die Flächen) und gröber im dunklen (dort liegt im Wesentlichen nur Text). */ --n-0: oklch(1.000 0 0); /* #FFFFFF */ --n-25: oklch(0.980 0 0); /* #F8F8F8 */ --n-50: oklch(0.955 0 0); /* #F0F0F0 */ --n-100: oklch(0.935 0 0); /* #E9E9E9 */ --n-200: oklch(0.910 0 0); /* #E1E1E1 */ --n-300: oklch(0.860 0 0); /* #D1D1D1 */ --n-400: oklch(0.750 0 0); /* #AEAEAE */ --n-500: oklch(0.620 0 0); /* #868686 */ --n-600: oklch(0.520 0 0); /* #696969 */ --n-700: oklch(0.400 0 0); /* #484848 */ --n-800: oklch(0.320 0 0); /* #333333 */ --n-900: oklch(0.230 0 0); /* #1D1D1D */ --n-950: oklch(0.150 0 0); /* #0B0B0B */ /* Zustandsfarben. Gleiche Lightness, gleiches Chroma je Zeile — nur der Hue unterscheidet. NIE als Markenfarbe einsetzen. Die fg-Reihe trägt Text und erfüllt AA auf --bg-light und --bg-dark. */ --ok-fg: oklch(0.50 0.120 154.5); /* #0F7643 · 5,69:1 auf Weiß */ --ok-bg: oklch(0.95 0.022 154.5); --ok-line: oklch(0.88 0.050 154.5); --warn-fg: oklch(0.50 0.102 74.6); /* #85590B · 6,12:1 */ --warn-bg: oklch(0.95 0.022 74.6); --warn-line: oklch(0.88 0.050 74.6); --err-fg: oklch(0.50 0.150 29.8); /* #A8372A · 6,47:1 */ --err-bg: oklch(0.95 0.022 29.8); --err-line: oklch(0.88 0.050 29.8); /* Signalfarben. Für Punkte, Balken und Fortschritt — alles, was Zustand ohne Text zeigt. Heller und kräftiger als die fg-Reihe, damit sie als 7-px-Fläche noch trägt. Erfüllt WCAG 1.4.11 (3:1) auf beiden Flächen. */ --sig-ok: oklch(0.58 0.139 154.5); /* #159153 · 4,03:1 */ --sig-warn: oklch(0.58 0.118 74.6); /* #A36E11 · 4,38:1 */ --sig-err: oklch(0.58 0.200 29.8); /* #D73627 · 4,72:1 */ /* ====================================================================== 2 · SEMANTISCHE FARBEN — das, was im Code benutzt wird. Im dunklen Kontext (Abschnitt 9) werden genau diese Namen umgehängt. ====================================================================== */ /* Marken-Akzent. --brand ist der Instanz-Haken: Ein Kundensystem überschreibt NUR --brand zur Laufzeit, alles andere bleibt konstant. */ --brand: var(--u-600); --accent: var(--brand); --accent-hover: var(--u-700); --accent-soft: var(--u-50); /* Flächen hinter Akzenttext */ --accent-line: var(--u-200); --on-accent: var(--n-0); /* Weiß auf Akzent — 8,88:1 */ /* Flächen, nach Helligkeit benannt. Seite --bg-dark, Karte --bg, angehobenes Element --bg-light. */ --bg-dark: var(--n-50); --bg: var(--n-25); --bg-light: var(--n-0); /* Füllfläche für Chips, Icon-Flächen und flache Karten. Eigene Stufe und kein Alias auf --bg-dark: im Dunkeln wäre --bg-dark der dunkelste Ton, und eine flache Karte läge unter der Fläche, auf der sie sitzt. */ --fill: var(--n-100); /* Linien */ --line: var(--n-200); --line-soft: var(--n-100); --line-strong: var(--n-500); /* 3,64:1 — Inputs, Bedienelement-Grenzen */ /* Text */ --text: var(--n-950); /* Überschriften. Bewusst nicht reines Schwarz — das wäre zu hart. 19,7:1 */ --text-muted: var(--n-700); /* Fließtext · 9,15:1 */ --text-faint: var(--n-600); /* Meta, Labels · 5,49:1, auf --bg-dark noch 4,82:1 und damit AA */ --text-on-accent: var(--on-accent); /* Verdunkelung hinter Modals und Menüs */ --scrim: oklch(0.15 0 0 / .42); /* ====================================================================== 3 · TYPOGRAFIE Eine Familie: Instrument Sans (Variable, 400–700). Lokal hosten — siehe fonts/README.md. Kein Google-CDN im Livebetrieb. ====================================================================== */ --font-sans: 'Instrument Sans', -apple-system, 'Segoe UI', system-ui, sans-serif; /* Die einzige zweite Familie, und sie ist eng begrenzt: AUSSCHLIESSLICH für Zeichenfolgen, die der Nutzer Zeichen für Zeichen abgleichen oder abtippen muss — API-Schlüssel, DNS-Einträge, Hashes, Container-IDs. Dort ist die Unterscheidbarkeit von 0 und O, l und 1 eine Funktion und keine Geschmacksfrage. NICHT für Token-Namen, Werte, Zahlen oder Codebeispiele in Fließtext. Dafür reichen Akzentfarbe, --w-medium und tabellarische Ziffern — die Vorschau in showcase.html zeigt das gesamte System ohne eine einzige Stelle in dieser Familie. Bis 13.08.2026 stand hier ein --font-mono ohne jede Einschränkung, direkt unter einer Überschrift, die "eine Familie" behauptet. Kurz darauf ganz gestrichen — und sofort zurückgeholt, weil die Plattform API-Schlüssel und DNS-Einträge anzeigt. Der Bedarf ist echt, nur die fehlende Grenze war das Problem. */ --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Gewichte — bewusst zwischen den Standardwerten, das gibt die Präzision */ --w-normal: 400; --w-medium: 520; --w-semi: 620; --w-bold: 700; /* Größen. 100–700 sind feste Stufen, 800/900 skalieren mit dem Viewport. */ --fs-100: 0.6875rem; /* 11px · micro, Uppercase-Labels, Tabellenköpfe */ --fs-200: 0.75rem; /* 12px · Pills, Fußnoten */ --fs-300: 0.8125rem; /* 13px · Hinweise, Meta */ --fs-400: 0.875rem; /* 14px · App-Body, Tabellenzellen */ --fs-500: 0.9375rem; /* 15px · Karten-Text, sekundärer Fließtext */ --fs-600: 1.0625rem; /* 17px · Marketing-Body */ --fs-700: 1.125rem; /* 18px · h3 */ --fs-800: clamp(1.5rem, 1.05rem + 2.3vw, 1.9375rem); /* 24 → 31px · h2 */ --fs-900: clamp(2.125rem, 1.35rem + 3.9vw, 3.75rem); /* 34 → 60px · h1 */ /* Zeilenhöhen */ --lh-tight: 1.06; /* h1 */ --lh-snug: 1.14; /* h2, Zitate */ --lh-head: 1.3; /* h3 */ --lh-body: 1.55; /* Standard */ --lh-loose: 1.7; /* langer Fließtext */ /* Laufweiten */ --ls-head: -0.014em; /* alle Headlines */ --ls-display: -0.026em; /* große Grade brauchen enger */ --ls-tight: -0.017em; /* große Zahlen */ --ls-micro: 0.09em; /* Uppercase-Labels */ /* Maximale Lesebreite — global auf

, nicht pro Komponente */ --measure: 34em; /* ====================================================================== 4 · ABSTÄNDE — 4er-Basis. Keine Zwischenwerte erfinden. ====================================================================== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-26: 104px; /* Rhythmus-Abstände, die mit dem Viewport atmen */ --sp-section: clamp(40px, 5.4vw, 66px); --sp-section-lg: clamp(48px, 6.8vw, 82px); --sp-head: clamp(20px, 2.8vw, 30px); --sp-gap: clamp(16px, 2vw, 22px); /* ====================================================================== 5 · RADIEN — vier Stufen, nach Zweck vergeben. Nicht nach Größe. ====================================================================== */ --r-action: 4px; /* Buttons, Inputs, Chips, kleine Flächen */ --r-media: 8px; /* Bilder, Videos, Visuals */ --r-box: 10px; /* Container: Karten, Tabellen, Kacheln, Modals */ --r-pill: 999px; /* Pills, Status, runde Buttons, Avatare */ /* ====================================================================== 6 · LAYOUT ====================================================================== */ --shell: 1140px; /* Inhaltsbreite Marketing */ --shell-app: 1440px; /* Inhaltsbreite App-Ansichten */ --shell-read: 720px; /* Artikel, Rechtstexte */ --pad: clamp(20px, 5vw, 44px); /* horizontaler Rand */ /* Das wiederkehrende asymmetrische Raster. Immer dasselbe Verhältnis — einmal so, einmal gespiegelt. Mehr Raster braucht das System nicht. */ --grid-75: minmax(0, 7fr) minmax(0, 5fr); --grid-57: minmax(0, 5fr) minmax(0, 7fr); /* Breakpoints — nur zur Doku, CSS braucht sie als Literale. Mobile-First, also immer min-width. */ --bp-sm: 700px; /* Karten-Grids brechen auf */ --bp-md: 820px; /* Hauptraster + Navigation */ --bp-lg: 1100px; /* App-Sidebar dauerhaft sichtbar */ /* ====================================================================== 7 · TIEFE Die Tiefe kommt aus Linien. Schatten nur für echte Overlays — etwas, das über dem Dokument schwebt und wieder verschwindet. ====================================================================== */ --sh-pop: 0 4px 14px rgba(11, 12, 16, .10), 0 1px 3px rgba(11, 12, 16, .06); --sh-over: 0 14px 42px rgba(11, 12, 16, .16), 0 2px 8px rgba(11, 12, 16, .07); --ring: 0 0 0 2px var(--accent); /* Fokus, immer mit Offset 3px */ /* ====================================================================== 8 · MOTION — schnell. Alles Interaktive 180ms. ====================================================================== */ --t-fast: .18s; /* Hover, Fokus, Farbwechsel */ --t-mid: .28s; /* Panels, Menüs */ --t-slow: .55s; /* Reveal beim Scrollen */ --t-image: .6s; /* Bild-Zoom */ --ease: ease; --ease-out: cubic-bezier(.2, .6, .25, 1); } /* ======================================================================== 9 · DUNKEL Ein Satz Werte für beide Fälle: das Dark-Theme der App-Ansichten () und den dunklen Kontrastblock im hellen Marketing-Verlauf (

). Version 1.0 hatte dafür zwei getrennte Wertesätze — doppelte Pflege für dieselbe Sache. Die Flächen-Zuordnung bleibt exakt wie im Hellen. Nur die Werte kippen. ======================================================================== */ [data-theme="dark"], .night { color-scheme: dark; /* color muss mit, nicht nur die Variablen: Die berechnete Textfarbe wird an alle Nachfahren vererbt und ließe sich sonst durch ein späteres Umhängen der Tokens nicht mehr einholen. */ color: var(--text); /* Akzent muss aufhellen, sonst reißt der Kontrast auf dunklem Grund */ --accent: var(--u-400); /* 6,2:1 auf --bg-dark */ --accent-hover: var(--u-300); /* 9,9:1 */ --accent-soft: oklch(0.66 0.165 267.4 / .16); --accent-line: oklch(0.66 0.165 267.4 / .32); --on-accent: var(--n-950); --bg-dark: oklch(0.150 0 0); /* #0B0B0B */ --bg: oklch(0.190 0 0); /* #141414 */ --bg-light: oklch(0.240 0 0); /* #1F1F1F */ /* Heller als die Karte, damit Chips und flache Karten nach vorn kommen statt nach hinten zu fallen */ --fill: oklch(0.270 0 0); --line: oklch(0.270 0 0); --line-soft: oklch(0.215 0 0); --line-strong: oklch(0.360 0 0); --text: oklch(0.960 0 0); /* 17,6:1 — nicht reines Weiß */ --text-muted: oklch(0.760 0 0); /* 9,2:1 */ --text-faint: oklch(0.620 0 0); /* 5,4:1 */ --scrim: oklch(0.08 0 0 / .60); /* Zustände und Signale: L hoch für Lesbarkeit, Hue unverändert */ --ok-fg: oklch(0.78 0.130 154.5); --ok-bg: oklch(0.78 0.13 154.5 / .14); --ok-line: oklch(0.78 0.13 154.5 / .30); --warn-fg: oklch(0.78 0.130 74.6); --warn-bg: oklch(0.78 0.13 74.6 / .14); --warn-line: oklch(0.78 0.13 74.6 / .30); --err-fg: oklch(0.78 0.130 29.8); --err-bg: oklch(0.78 0.13 29.8 / .14); --err-line: oklch(0.78 0.13 29.8 / .30); --sig-ok: oklch(0.75 0.145 154.5); --sig-warn: oklch(0.75 0.130 74.6); --sig-err: oklch(0.75 0.150 29.8); --sh-pop: 0 4px 14px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .30); --sh-over: 0 14px 42px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35); /* --ring enthält var(--accent) und muss deshalb hier stehen: Ein Custom Property, das var() enthält, wird auf dem Element aufgelöst, das es definiert — aus :root käme der helle Akzent an. */ --ring: 0 0 0 2px var(--accent); } /* ======================================================================== 10 · HELL INNERHALB VON DUNKEL Gegenstück zu .night. Stellt die hellen Werte wieder her, damit eine helle Fläche in einem dunklen Abschnitt liegen kann — etwa eine Produktansicht im dunklen Hero. Ohne das würde .night nach unten durchschlagen und das Fenster mitfärben. ======================================================================== */ .day { color-scheme: light; color: var(--text); --accent: var(--u-600); --accent-hover: var(--u-700); --accent-soft: var(--u-50); --accent-line: var(--u-200); --on-accent: var(--n-0); --bg-dark: var(--n-50); --bg: var(--n-25); --bg-light: var(--n-0); --fill: var(--n-100); --line: var(--n-200); --line-soft: var(--n-100); --line-strong: var(--n-500); --text: var(--n-950); --text-muted: var(--n-700); --text-faint: var(--n-600); --scrim: oklch(0.15 0 0 / .42); --ok-fg: oklch(0.50 0.120 154.5); --ok-bg: oklch(0.95 0.022 154.5); --ok-line: oklch(0.88 0.050 154.5); --warn-fg: oklch(0.50 0.102 74.6); --warn-bg: oklch(0.95 0.022 74.6); --warn-line: oklch(0.88 0.050 74.6); --err-fg: oklch(0.50 0.150 29.8); --err-bg: oklch(0.95 0.022 29.8); --err-line: oklch(0.88 0.050 29.8); --sig-ok: oklch(0.58 0.139 154.5); --sig-warn: oklch(0.58 0.118 74.6); --sig-err: oklch(0.58 0.200 29.8); --sh-pop: 0 4px 14px rgba(11, 12, 16, .10), 0 1px 3px rgba(11, 12, 16, .06); --sh-over: 0 14px 42px rgba(11, 12, 16, .16), 0 2px 8px rgba(11, 12, 16, .07); --ring: 0 0 0 2px var(--accent); } /* ------------------------------------------------------------------------ ÜBERGANGS-ALIAS — ENTFERNT am 13.08.2026. Hier standen die Namen aus Version 1.0: --paper, --grey, --surface-2, --ink, --ink-60, --ink-40, --ink-on-accent und die --night-* Reihe. Sie waren als Übergang gedacht, aber components.css stand zu hundert Prozent darauf — sechzig Verwendungen, keine einzige der neuen Namen. Damit hätte der Block nie fallen können. Vor dem Entfernen geprüft: Website und Businessplattform arbeiten mit eigenen Kopien des Systems, die Marketing-HTMLs unter business/active/ definieren ihre Farben selbst. Es hing nichts mehr daran. Ersetzt durch: --paper → --bg-light --ink → --text --grey → --bg-dark --ink-60 → --text-muted --grey-2 → --fill --ink-40 → --text-faint --surface-2 → --bg --night-* → reguläre Flächenrollen in .night ------------------------------------------------------------------------ */ } /* @layer tokens */ /* ========================================================================== TAILWIND-BRÜCKE Für die Businessplattform (Tailwind 4). Macht aus den Tokens oben Utilities wie bg-surface, text-muted, border-line, rounded-box. Tailwind 4 nutzt selbst OKLCH als Default — die Werte passen direkt. Für die Website ist dieser Block wirkungslos und kann bleiben. ========================================================================== */ @theme inline { --color-brand: var(--brand); --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); --color-accent-soft: var(--accent-soft); --color-accent-line: var(--accent-line); --color-on-accent: var(--on-accent); --color-bg-dark: var(--bg-dark); --color-bg: var(--bg); --color-bg-light: var(--bg-light); --color-fill: var(--fill); --color-line: var(--line); --color-line-soft: var(--line-soft); --color-line-strong: var(--line-strong); --color-text: var(--text); --color-text-muted: var(--text-muted); --color-text-faint: var(--text-faint); --color-ok: var(--ok-fg); --color-ok-bg: var(--ok-bg); --color-ok-line: var(--ok-line); --color-warn: var(--warn-fg); --color-warn-bg: var(--warn-bg); --color-warn-line: var(--warn-line); --color-err: var(--err-fg); --color-err-bg: var(--err-bg); --color-err-line: var(--err-line); --color-scrim: var(--scrim); --font-sans: var(--font-sans); /* Trägt in der Plattform die Utility font-mono — API-Schlüssel und DNS-Einträge. Siehe die Einschränkung in Abschnitt 3. */ --font-mono: var(--font-mono); --radius-action: var(--r-action); --radius-media: var(--r-media); --radius-box: var(--r-box); --radius-pill: var(--r-pill); }