/* ========================================================================== KLARWERK — KERN-TOKEN-SYSTEM ========================================================================== Die einzige Quelle der Wahrheit für alle visuellen Werte. REGEL #1 DES HAUSES: In Komponenten werden NIEMALS Rohwerte geschrieben — keine Hex-Farben, keine px-Abstände, keine Bezier-Kurven. Nur Tokens. Schichten: 1. core.css → dieses File: Skalen, die für ALLE Marken gelten 2. palettes/css/* → Farbe (via [data-palette] + [data-mode]) 3. fonts/css/* → Schriftfamilien (via [data-pairing]) 4. animations/* → Bewegung (via [data-motion]) Eine Kundenseite entsteht durch Kombination: ========================================================================== */ :root { /* ------------------------------------------------------------------ FLUIDE TYPOGRAFIE-SKALA Utopia-Methode: Minor Third (1,2) bei 320px → Major Third (1,25) bei 1240px Viewport. Basis 16px → 18px. Formel: clamp(min, intercept + slope·vw, max) ------------------------------------------------------------------ */ --step--2: clamp(0.6944rem, 0.6855rem + 0.0445vw, 0.72rem); /* Fußnoten */ --step--1: clamp(0.8333rem, 0.8101rem + 0.1159vw, 0.9rem); /* Klein/Meta */ --step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem); /* Fließtext */ --step-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem); /* Lead/H5 */ --step-2: clamp(1.44rem, 1.3295rem + 0.5527vw, 1.7578rem); /* H4 */ --step-3: clamp(1.728rem, 1.5648rem + 0.8162vw, 2.1973rem); /* H3 */ --step-4: clamp(2.0736rem, 1.8395rem + 1.1704vw, 2.7466rem); /* H2 */ --step-5: clamp(2.4883rem, 2.1596rem + 1.6433vw, 3.4332rem); /* H1 */ --step-6: clamp(2.986rem, 2.5319rem + 2.2705vw, 4.2915rem); /* Display S */ --step-7: clamp(3.5832rem, 2.9637rem + 3.0977vw, 5.3644rem); /* Display M */ --step-8: clamp(4.2998rem, 3.463rem + 4.184vw, 6.7056rem); /* Display L/Hero */ /* ------------------------------------------------------------------ SCHRIFT-SLOTS — werden von fonts/css/pairings.css gefüllt. System-Fallbacks sorgen für sauberes Rendering vor Font-Load. ------------------------------------------------------------------ */ --font-display: var(--font-heading); --font-heading: ui-sans-serif, system-ui, sans-serif; --font-body: ui-sans-serif, system-ui, sans-serif; --font-accent: var(--font-heading); --font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace; /* Gewichte & Laufweiten — Pairings dürfen überschreiben */ --weight-display: 700; --weight-heading: 650; --weight-body: 400; --weight-medium: 500; --weight-semibold: 600; --leading-display: 1.04; --leading-tight: 1.12; --leading-heading: 1.2; --leading-snug: 1.35; --leading-body: 1.6; --leading-loose: 1.75; --tracking-display: -0.022em; --tracking-heading: -0.012em; --tracking-body: 0; --tracking-caps: 0.07em; /* Eyebrows, Labels, Buttons in Versalien */ --tracking-wide: 0.16em; /* Sehr gesperrte Mikro-Labels */ /* Lesemaß — optimale Zeilenlänge */ --measure-prose: 65ch; --measure-narrow: 45ch; --measure-wide: 80ch; /* ------------------------------------------------------------------ ABSTÄNDE a) Fluide Skala (Utopia) — für Layout-Rhythmus zwischen Sektionen b) Fixe 4px-Skala — für Komponenten-Innereien (Buttons, Inputs) ------------------------------------------------------------------ */ --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem); --space-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem); --space-xs: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem); --space-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem); --space-m: clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem); --space-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem); --space-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem); --space-2xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem); --space-3xl: clamp(6rem, 5.7391rem + 1.3043vw, 6.75rem); /* Sektionsabstand & Gutter — die zwei wichtigsten Layout-Tokens */ --section-space: clamp(4rem, 2.7826rem + 6.087vw, 7.5rem); --gutter: clamp(1rem, 0.4783rem + 2.6087vw, 2.5rem); --sp-px: 1px; --sp-0: 0; --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; /* ------------------------------------------------------------------ CONTAINER & LAYOUT ------------------------------------------------------------------ */ --container-sm: 40rem; --container-md: 48rem; --container-lg: 64rem; --container-xl: 80rem; --container-2xl: 90rem; --container-content: var(--container-lg); /* Standard-Inhaltsbreite */ /* ------------------------------------------------------------------ RADIEN --radius-interactive & --radius-surface sind die Marken-Stellschrauben: scharf (Editorial) vs. weich (Wellness) — eine Zeile, ganzer Charakter. ------------------------------------------------------------------ */ --radius-0: 0; --radius-xs: 0.125rem; --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 999px; --radius-interactive: var(--radius-md); /* Buttons, Inputs, Chips */ --radius-surface: var(--radius-lg); /* Cards, Modals, Bilder */ /* ------------------------------------------------------------------ SCHATTEN-ARCHITEKTUR Dreischichtig statt 'box-shadow: 0 4px 6px rgba(0,0,0,.1)'-Einheitsbrei: Ambient (weich, breit) + Key (gerichtet) + Cast (Kontaktkante). Farbe kommt aus der Palette (--color-shadow-color) → getönte Schatten statt totem Grau. color-mix steuert die Intensität. ------------------------------------------------------------------ */ --shadow-xs: 0 1px 2px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 7%, transparent); --shadow-sm: 0 1px 2px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 7%, transparent), 0 2px 8px -2px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 9%, transparent); --shadow-md: 0 1px 2px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 6%, transparent), 0 6px 16px -4px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 10%, transparent), 0 12px 32px -8px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 10%, transparent); --shadow-lg: 0 2px 4px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 5%, transparent), 0 12px 24px -6px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 12%, transparent), 0 24px 56px -12px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 14%, transparent); --shadow-xl: 0 4px 8px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 5%, transparent), 0 20px 40px -8px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 16%, transparent), 0 48px 96px -16px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 18%, transparent); --shadow-inner: inset 0 1px 3px color-mix(in oklab, var(--color-shadow-color, oklch(25% 0 0)) 10%, transparent); /* Fokus-Ring — Barrierefreiheit ist nicht verhandelbar */ --focus-ring-width: 2px; --focus-ring-offset: 2px; /* ------------------------------------------------------------------ RAHMEN & DECKKRAFT ------------------------------------------------------------------ */ --border-thin: 1px; --border-thick: 2px; --border-heavy: 4px; --opacity-disabled: 0.45; --opacity-muted: 0.65; --opacity-overlay: 0.55; /* Modal-Backdrops */ --opacity-tint: 0.06; /* Subtile Hintergrund-Tönungen */ /* ------------------------------------------------------------------ Z-INDEX-ORDNUNG — niemals freie Zahlen vergeben ------------------------------------------------------------------ */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-dropdown: 300; --z-overlay: 400; --z-drawer: 500; --z-modal: 600; --z-popover: 700; --z-toast: 800; --z-max: 999; /* ------------------------------------------------------------------ BEWEGUNG — Standardwerte ("Studio-Neutral"). Die 5 Motion-Presets (animations/presets.css) überschreiben diese via [data-motion="…"]. ------------------------------------------------------------------ */ --dur-1: 120ms; /* Mikro: Hover, Fokus */ --dur-2: 200ms; /* UI: Dropdowns, Toggles */ --dur-3: 320ms; /* Element: Cards, Reveals */ --dur-4: 560ms; /* Szene: Sektions-Einstiege */ --dur-5: 900ms; /* Bühne: Hero-Choreografie */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-spring: linear(0, 0.0047, 0.0185, 0.0414, 0.073, 0.113, 0.1611, 0.2165, 0.2782, 0.3451, 0.4159, 0.4893, 0.5638, 0.638, 0.7104, 0.7796, 0.8443, 0.9032, 0.9554, 1, 1.0368, 1.0656, 1.0866, 1.1002, 1.107, 1.1078, 1.1036, 1.0952, 1.0838, 1.0703, 1.0556, 1.0407, 1.0263, 1.013, 1.0014, 0.9918, 0.9844, 0.9793, 0.9765, 0.9759, 0.9774, 0.9806, 0.9854, 0.9913, 0.998, 1); --anim-distance: 24px; /* Versatz für Entrance-Animationen */ --anim-scale-from: 0.96; --anim-blur-from: 6px; --stagger-step: 60ms; /* Abstand zwischen gestaffelten Kindern */ /* ------------------------------------------------------------------ BREAKPOINTS (Referenz — CSS-Variablen funktionieren nicht in @media; diese Werte sind die verbindliche Dokumentation für alle Projekte) sm: 40em / 640px md: 48em / 768px lg: 64em / 1024px xl: 80em / 1280px 2xl: 96em / 1536px Container-Queries bevorzugen, wo Komponenten-Verhalten gemeint ist. ------------------------------------------------------------------ */ } /* ========================================================================== GLOBALE GRUNDREGELN — gehören zu jedem Klarwerk-Projekt ========================================================================== */ /* ------------------------------------------------------------------ RESPONSIVE-FUNDAMENT — Pflicht auf jeder echten Seite. Die drei häufigsten Mobile-Defekte werden hier an der Wurzel verhindert, damit kein Projekt sie einzeln nachfixen muss: 1. border-box: width:100% + Padding liefe sonst über die Viewport- Kante (Buttons/Inputs ragen rechts raus). 2. overflow-x:clip: ein einziges überbreites Element erzeugt sonst seitenweites horizontales Wackeln (clip statt hidden — erzeugt keinen Scroll-Container, Sticky funktioniert weiter). 3. scroll-padding: Anker-Sprünge landen nie unter Sticky-Headern (WCAG 2.2 „Focus Not Obscured"). ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: clip; } html { scroll-padding-block-start: calc(var(--header-height, 5rem) + var(--sp-4)); } /* Medien skalieren mit ihrem Container statt ihn zu sprengen */ img, video { max-width: 100%; height: auto; } /* Typografische Qualität: Kerning, Ligaturen, saubere Umbrüche */ html { text-size-adjust: none; font-kerning: normal; font-variant-ligatures: common-ligatures contextual; } body { font-family: var(--font-body); font-size: var(--step-0); line-height: var(--leading-body); letter-spacing: var(--tracking-body); color: var(--color-text-1); background-color: var(--color-bg-1); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--weight-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); text-wrap: balance; /* ausgewogene Headline-Umbrüche */ } p, li, blockquote { text-wrap: pretty; /* keine einsamen Wortwaisen */ max-width: var(--measure-prose); } /* Deutsche Silbentrennung für Langtexte (aktivierbar per Klasse) */ .hyphenate { hyphens: auto; hyphenate-limit-chars: 8 4 4; } /* Tabellarische Ziffern für Zahlen, Preise, Statistiken */ .tnum { font-variant-numeric: tabular-nums lining-nums; } /* Sichtbarer, konsistenter Fokus — überall */ :focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-xs); } /* Sanftes Scrollen nur wenn Bewegung erwünscht */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ========================================================================== BRIEF-SCHALTER (Schema v1.2+) — Kundenwünsche aus dem Builder ========================================================================== Werden als Attribute auf gesetzt (AGENT-INDEX §1). Die Vorschau des Builders und die ECHTE Kundenseite nutzen dieselben Selektoren — was der Kunde konfiguriert, ist 1:1 baubar. radiusStyle → data-radius · frameStyle → data-frame ('soft' = Archetyp-Default behalten, kein Override nötig) */ html[data-radius='sharp'] { --radius-interactive: var(--radius-0); --radius-surface: var(--radius-xs); } html[data-radius='round'] { --radius-interactive: var(--radius-full); --radius-surface: var(--radius-2xl); } /* Rahmen-Charakter für Karten/Flächen — übersteuert den Archetyp-Default (gewinnt per Spezifität, unabhängig von der Ladereihenfolge) */ html[data-frame='hairline'] .card { border-width: var(--border-thin); box-shadow: none; } html[data-frame='bold'] .card { border: var(--border-thick) solid var(--color-text-1); box-shadow: none; } html[data-frame='none'] .card { border-color: transparent; box-shadow: var(--shadow-md); background: var(--color-bg-2); } /* ------------------------------------------------------------------ EIGENE MARKENFARBE (Schema v1.5) — Hex → OKLCH live. Aktivierung: — der Kunde gibt EINEN Hex-Wert ein, daraus regenerieren wir die komplette Primär- Tonleiter (--p-*) per Relative-Color-Syntax: wir behalten Helligkeit & Chroma jeder Stufe aus der Referenz-Rampe und übernehmen NUR den Farbton (h) der Markenfarbe. Dadurch: • bleibt der sorgfältige Hell/Dunkel-Kontrast erhalten (die Palette mappt --color-primary je Modus auf eine andere --p-Stufe), • bleiben die Neutraltöne der gewählten Palette unangetastet (kohärentes Gesamtbild, nur die Marke ändert sich), • ist es 1:1 dieselbe Mechanik in Vorschau UND echter Kundenseite. Die Agentur kann später aus demselben Hex eine handfeine Vollpalette generieren (palettes.config.mjs) — das hier ist der Live-Sofort-Effekt. Fallback (Browser ohne Relative-Color < 2023): Attribut wirkt nicht, die gewählte Basispalette bleibt sichtbar — kein Bruch. */ @supports (color: oklch(from #000 l c h)) { html[data-brand] { --p-50: oklch(from var(--brand-hex) 97.0% 0.016 h); --p-100: oklch(from var(--brand-hex) 94.0% 0.032 h); --p-200: oklch(from var(--brand-hex) 88.5% 0.064 h); --p-300: oklch(from var(--brand-hex) 82.0% 0.101 h); --p-400: oklch(from var(--brand-hex) 74.5% 0.122 h); --p-500: oklch(from var(--brand-hex) 66.5% 0.130 h); --p-600: oklch(from var(--brand-hex) 58.0% 0.130 h); --p-700: oklch(from var(--brand-hex) 50.0% 0.117 h); --p-800: oklch(from var(--brand-hex) 42.0% 0.101 h); --p-900: oklch(from var(--brand-hex) 34.0% 0.081 h); --p-950: oklch(from var(--brand-hex) 27.0% 0.065 h); --color-focus-ring: oklch(from var(--brand-hex) 66.5% 0.130 h); --gradient-brand: linear-gradient(135deg, oklch(from var(--brand-hex) 58.0% 0.130 h), oklch(from var(--brand-hex) 55.0% 0.100 calc(h + 24))); } }