/* ========================================================================== CTW Design System – Tokens Quelle: ctw-design-system.html (v4.0 "Brand Guidance Edition"). Die Werte sind unverändert aus dem System übernommen. Hell ist die Grundeinstellung und folgt dem CTW Design System ohne Abweichung bei den Farbrollen. Dunkel gibt es nur, wenn jemand den Schalter benutzt: html[data-ansicht="dunkel"]. Die Werte dafür stammen aus .dark des Design Systems und stehen genau einmal im Code. Bewusst NICHT verwendet: prefers-color-scheme und light-dark(). Beide hängen an color-scheme, und das setzen manche Umgebungen (Vorschau- Rahmen, eingebettete Ansichten) von außen – dann bliebe die Seite dunkel. ========================================================================== */ :root { color-scheme: light; /* Markenfarben */ --brand-teal-900: oklch(32% .04 210); --brand-teal-700: oklch(48% .05 210); --brand-teal-500: oklch(78% .06 210); --brand-teal-200: oklch(93% .02 210); --brand-sand-50: oklch(96% .01 80); --brand-stone-50: oklch(97% .005 240); --brand-red-600: oklch(55% .18 25); --brand-red-100: oklch(94% .04 25); --brand-grey-500: oklch(58% .02 220); /* Systemfarben – nur für Status */ --sys-red: oklch(63% .22 25); --sys-yellow: oklch(83% .16 85); --sys-green: oklch(72% .17 145); --sys-blue: oklch(62% .18 250); --status-success: oklch(62% .14 155); --status-success-bg: oklch(96% .04 155); --status-warning: oklch(70% .14 75); --status-warning-bg: oklch(97% .05 80); --status-info: oklch(62% .1 230); --status-info-bg: oklch(96% .03 230); /* Semantische Rollen (hell, Design System) */ --bg: var(--brand-sand-50); --bg-elevated: #fff; --surface: var(--brand-stone-50); --surface-strong: var(--brand-teal-900); --fg: var(--brand-teal-900); --fg-muted: var(--brand-grey-500); --fg-on-strong: var(--brand-stone-50); --accent: var(--brand-teal-500); --accent-fg: var(--brand-teal-900); --danger: var(--brand-red-600); --danger-fg: #fff; --border: color-mix(in oklab, var(--brand-teal-900) 10%, transparent); --border-strong: color-mix(in oklab, var(--brand-teal-900) 18%, transparent); --ring: color-mix(in oklab, var(--sys-blue) 45%, transparent); /* Materialien */ --material-thin: color-mix(in oklab, var(--bg-elevated) 55%, transparent); --material-regular: color-mix(in oklab, var(--bg-elevated) 72%, transparent); --material-thick: color-mix(in oklab, var(--bg-elevated) 86%, transparent); --material-chrome: color-mix(in oklab, var(--brand-stone-50) 78%, transparent); --blur-material: saturate(180%) blur(20px); /* Typografie */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --fs-2xs: .6875rem; --fs-xs: .75rem; --fs-sm: .8125rem; --fs-base: .9375rem; --fs-md: 1rem; --fs-lg: clamp(1.125rem, 1.05rem + .4vw, 1.25rem); --fs-xl: clamp(1.375rem, 1.2rem + .8vw, 1.625rem); --fs-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem); --fs-3xl: clamp(2.25rem, 1.8rem + 2.2vw, 3rem); --lh-tight: 1.12; --lh-snug: 1.35; --lh-base: 1.55; --tracking-tight: -.022em; --tracking-snug: -.01em; --tracking-wide: .06em; /* Radien */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; /* Abstände */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Schatten */ --shadow-xs: 0 0 0 .5px var(--brand-teal-900), 0 1px 2px var(--brand-teal-900); --shadow-xs: 0 0 0 .5px color-mix(in oklab, var(--brand-teal-900) 10%, transparent), 0 1px 2px color-mix(in oklab, var(--brand-teal-900) 6%, transparent); --shadow-sm: 0 0 0 .5px var(--brand-teal-900), 0 2px 6px var(--brand-teal-900); --shadow-sm: 0 0 0 .5px color-mix(in oklab, var(--brand-teal-900) 8%, transparent), 0 2px 6px color-mix(in oklab, var(--brand-teal-900) 6%, transparent); --shadow-md: 0 0 0 .5px var(--brand-teal-900), 0 8px 24px var(--brand-teal-900); --shadow-md: 0 0 0 .5px color-mix(in oklab, var(--brand-teal-900) 8%, transparent), 0 8px 24px color-mix(in oklab, var(--brand-teal-900) 10%, transparent); --shadow-lg: 0 0 0 .5px var(--brand-teal-900), 0 24px 60px var(--brand-teal-900); --shadow-lg: 0 0 0 .5px color-mix(in oklab, var(--brand-teal-900) 10%, transparent), 0 24px 60px color-mix(in oklab, var(--brand-teal-900) 18%, transparent); --shadow-inset: inset 0 .5px 0 oklab(100% 0 0 / .6); /* Bewegung */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-fast: .12s; --dur-base: .18s; --dur-slow: .28s; /* Layout */ --container: 1080px; } /* Dunkel – nur auf Wunsch über den Schalter. Werte aus .dark des Design Systems. */ :root[data-ansicht="dunkel"] { color-scheme: dark; --bg: oklch(18% .015 230); --bg-elevated: oklch(23% .02 225); --surface: oklch(27% .025 225); --surface-strong: oklch(14% .015 225); --fg: oklch(97% .005 230); --fg-muted: oklch(70% .02 225); --fg-on-strong: oklch(97% .005 230); --accent: oklch(78% .07 210); --accent-fg: oklch(16% .02 210); --danger: oklch(68% .18 25); --border: oklab(100% 0 0 / .1); --border-strong: oklab(100% 0 0 / .2); --ring: color-mix(in oklab, var(--sys-blue) 55%, transparent); --material-thin: color-mix(in oklab, var(--bg-elevated) 45%, transparent); --material-regular: color-mix(in oklab, var(--bg-elevated) 65%, transparent); --material-thick: color-mix(in oklab, var(--bg-elevated) 82%, transparent); --material-chrome: color-mix(in oklab, var(--surface) 70%, transparent); --shadow-xs: 0 0 0 .5px oklab(100% 0 0 / .08); --shadow-sm: 0 0 0 .5px oklab(100% 0 0 / .08), 0 2px 6px #00000059; --shadow-md: 0 0 0 .5px oklab(100% 0 0 / .08), 0 10px 30px #00000073; --shadow-lg: 0 0 0 .5px oklab(100% 0 0 / .1), 0 28px 70px #0000008c; /* Website-Ergänzungen, dunkel */ --fg-muted-text: var(--fg-muted); /* 7,1:1 */ --link: var(--accent); /* 9,6:1 */ } /* ========================================================================== Website-Ergänzungen Abgeleitet, nicht neu erfunden: jede Rolle zeigt auf Tokens von oben. Kontrastwerte berechnet aus den oklch-Definitionen. ========================================================================== */ :root { /* Grey 500 erreicht auf Sand 50 nur 3,8:1 – für Fließtext unzulässig. Mischung mit Teal 900 ergibt 5,0:1 auf Sand 50, 5,6:1 auf Weiß. */ --fg-muted-text: color-mix(in oklab, var(--brand-grey-500) 75%, var(--brand-teal-900)); /* Links: Teal 700 hat 5,7:1 auf Sand 50. */ --link: var(--brand-teal-700); /* Handlung: Red 600 mit weißer Schrift 5,3:1, in beiden Modi. --danger aus dem Dark Mode (68 %) hätte mit Weiß nur 3,1:1. */ --action: var(--brand-red-600); --action-fg: var(--danger-fg); /* Fokus: --ring (45 % Blau) erreicht auf Sand nur 1,6:1 gegen den Hintergrund. Fokusrahmen daher in vollem System-Blau: 3,2:1. */ --focus: var(--sys-blue); /* Fließtext in 16 px statt --fs-base (15 px): Lesbarkeit auf dem Handy für ein Publikum, das nicht mit der Lupe liest. */ --fs-body: var(--fs-md); /* Lesebreite */ --measure: 38rem; /* Raster der Website (nach dem Vorbild großzügiger Architektur-Seiten): breiter Rahmen, drei Spalten, Haarlinien als Struktur statt Schatten. --container (1080 px) aus dem Design System bleibt für Fließtext-Seiten. */ --frame: 1440px; --gutter: clamp(16px, 2.2vw, 32px); --col-gap: calc(var(--gutter) * 2); --line: var(--border-strong); --line-on-strong: color-mix(in oklab, var(--fg-on-strong) 18%, transparent); /* Große, leichte Überschriften. Abgeleitet von --fs-3xl, nach oben erweitert. */ --fs-display: clamp(3rem, 1.2rem + 5.6vw, 7.25rem); --fs-title: clamp(2.5rem, 1.5rem + 3.4vw, 4.75rem); --fs-section: clamp(2rem, 1.35rem + 2vw, 3.25rem); --weight-light: 300; --tracking-display: -.035em; /* QR-Codes brauchen dunkle Module auf heller Fläche, auch in der dunklen Ansicht: Viele Kameras lesen invertierte Codes nicht. */ --qr-hell: var(--danger-fg); --qr-dunkel: var(--brand-teal-900); }