/* ============================================================ DESIGN-SYSTEM — Token-Kern v1.0 Destilliert aus 18 Referenzseiten (design-system/rohdaten/). Werte mit [DATA] stammen aus der Extraktion, nicht aus Schätzung. REGEL: Build-Agenten verwenden ausschließlich diese Variablen. Ein Hex-Wert oder eine px-Angabe direkt im Komponenten-CSS ist ein Fehler und muss im Report gemeldet werden. ============================================================ */ :root { /* ---------- TYPOGRAFIE ---------- Fluide Skala. [DATA] clamp() nutzen die modernsten Referenzen (retool, clay, decagon) durchgängig; die schwächeren gar nicht. */ --type-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.813rem); --type-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.938rem); --type-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --type-md: clamp(1.2rem, 1.13rem + 0.35vw, 1.375rem); --type-lg: clamp(1.5rem, 1.35rem + 0.75vw, 2rem); --type-xl: clamp(2rem, 1.7rem + 1.5vw, 3rem); --type-2xl: clamp(2.75rem, 2.1rem + 3.2vw, 4.5rem); --type-3xl: clamp(3.5rem, 2.4rem + 5.5vw, 6.5rem); --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.55; --leading-relaxed: 1.7; --tracking-display: -0.035em; --tracking-heading: -0.02em; --tracking-body: 0em; --tracking-label: 0.06em; --weight-normal: 400; --weight-medium: 500; --weight-semi: 600; /* ---------- AUSDRUCKSEBENE ---------- Monospace als zweite Stimme neben Display/Body — für Beschriftungen, Indizes und technische Nebeninformationen. Nie für Fließtext. */ --label-mono: var(--weight-medium) var(--type-xs) var(--font-mono); /* ---------- RAUM ---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --space-11: 12rem; --section-y: clamp(4rem, 10vw, 10rem); --section-y-tight: clamp(3rem, 6vw, 6rem); /* ---------- RASTER ---------- */ --container-text: 68ch; --container: 1180px; --container-wide: 1440px; --gutter: clamp(1.25rem, 5vw, 4rem); /* ---------- RADIEN ---------- [DATA] Die Referenzen sind BIMODAL: 8 Seiten nutzen 0, 8 Seiten die volle Pille, dazu 4px und 8px. Der weiche Mittelweg (12-16px) kommt praktisch NICHT vor und ist ein Kennzeichen generischer Templates. Regel: Flächen scharf, Interaktives rund. Nichts dazwischen. */ --radius-none: 0; --radius-xs: 4px; /* [DATA] 6 Seiten */ --radius-sm: 8px; /* [DATA] 5 Seiten */ --radius-md: 1rem; /* [DATA] 5 Seiten — Obergrenze für Flächen */ --radius-full: 999px; /* [DATA] 8 Seiten — Buttons, Chips, Avatare */ /* Semantische Zuweisung — hieran halten sich Build-Agenten */ --radius-surface: var(--radius-none); --radius-card: var(--radius-sm); --radius-input: var(--radius-xs); --radius-button: var(--radius-full); --radius-image: var(--radius-none); /* ---------- SCHATTEN ---------- Mehrschichtig, farbig getönt. Der Bootstrap-Standardschatten (0 4px 6px rgba(0,0,0,.1)) ist verboten. */ --shadow-tint: 220 40% 12%; --shadow-1: 0 1px 2px -1px hsl(var(--shadow-tint) / 0.08), 0 2px 4px -2px hsl(var(--shadow-tint) / 0.06); --shadow-2: 0 2px 4px -2px hsl(var(--shadow-tint) / 0.08), 0 8px 16px -4px hsl(var(--shadow-tint) / 0.08), 0 1px 0 0 hsl(var(--shadow-tint) / 0.04) inset; --shadow-3: 0 4px 8px -4px hsl(var(--shadow-tint) / 0.1), 0 16px 32px -8px hsl(var(--shadow-tint) / 0.12), 0 32px 64px -16px hsl(var(--shadow-tint) / 0.1); --hairline: 1px solid hsl(var(--shadow-tint) / 0.1); /* ---------- MOTION ---------- Alle Kurven [DATA] — im Wortlaut aus den Referenzen. Nur transform und opacity animieren. Immer. */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* 6 Seiten, 40 Fundstellen — Standard */ --ease-entrance: cubic-bezier(0, 0, 0.2, 1); /* 4 Seiten — Elemente kommen herein */ --ease-exit: cubic-bezier(0.4, 0, 0.6, 1); /* 4 Seiten — Elemente gehen hinaus */ --ease-out-quart:cubic-bezier(0.165, 0.84, 0.44, 1); /* 3 Seiten, 33 Fundstellen */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* 2 Seiten, 28 Fundstellen — Reveals */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* 3 Seiten — symmetrische Wege */ /* [DATA] Vier klare Stufen über alle Seiten hinweg. */ --dur-micro: 100ms; /* Farbwechsel, Fokusring */ --dur-fast: 150ms; /* häufigster Einzelwert überhaupt */ --dur-base: 250ms; /* Standard für Hover und Zustände */ --dur-medium: 300ms; /* Aufklappen, Menüs */ --dur-slow: 600ms; /* Scroll-Reveals */ --stagger: 70ms; --reveal-y: 24px; --reveal-scale: 0.98; /* ---------- Z-EBENEN ---------- */ --z-base: 1; --z-sticky: 100; --z-overlay: 500; --z-modal: 1000; /* ---------- BERÜHRFLÄCHEN ---------- WCAG 2.5.8 (Target Size, Minimum). Jedes interaktive Element (Button, Link als Button, Toggle, Formularfeld) muss mindestens diese Kantenlänge erreichen — nicht nur der sichtbare Inhalt. */ --touch-min: 44px; } /* ============================================================ BRANCHEN-THEMES Schriftwahl folgt einem Befund aus der Extraktion: Die hochwertigen Referenzen nutzen ausnahmslos lizenzierte Grotesken (Söhne, Suisse, Roobert, Saans, Lausanne, GT Walsheim, Circular, Everett). Die schwachen nutzen Poppins, Nunito Sans, Montserrat, Fira Sans. Wir verwenden freie Schriften aus der ERSTEN Familie. Alle über Fontshare oder Google Fonts frei kommerziell nutzbar und selbst hostbar (DSGVO — kein CDN). ============================================================ */ /* --- HANDWERK --- Erdig, kräftig, hoher Kontrast, scharfe Kanten. Kein Blau — das nutzt in dieser Branche jeder Baukasten. */ [data-theme="handwerk"] { --font-display: "Cabinet Grotesk", "Arial Black", sans-serif; --font-body: "Switzer", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --c-bg: #FBFAF8; --c-surface: #FFFFFF; --c-elevated: #F3F0EB; --c-ink: #14100C; --c-ink-soft: #57504A; --c-ink-muted: #8A827A; --c-accent: #C2410C; --c-accent-hover: #9A3412; --c-line: #E5DFD6; --shadow-tint: 25 30% 12%; --radius-card: var(--radius-none); --radius-image: var(--radius-none); } /* --- GESUNDHEIT --- Ruhig, hell, viel Luft. Vertrauen durch Zurückhaltung. Serif-Display als Gegenmittel zum Klinik-Look. */ [data-theme="gesundheit"] { --font-display: "Newsreader", Georgia, serif; --font-body: "Instrument Sans", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --c-bg: #FCFCFB; --c-surface: #FFFFFF; --c-elevated: #F1F5F3; --c-ink: #12211C; --c-ink-soft: #4A5B55; --c-ink-muted: #7E8D87; --c-accent: #0F766E; --c-accent-hover: #115E59; --c-line: #E2E9E6; --shadow-tint: 170 25% 12%; --radius-card: var(--radius-md); --radius-image: var(--radius-sm); } /* --- GASTRO --- Warm, dunkel. Dunkler Grund lässt Speisen leuchten. */ [data-theme="gastro"] { --font-display: "Fraunces", Georgia, serif; --font-body: "General Sans", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --c-bg: #17120E; --c-surface: #211A15; --c-elevated: #2C231C; --c-ink: #F7F1EA; --c-ink-soft: #C9BCAF; --c-ink-muted: #9A8C7E; --c-accent: #D9A441; --c-accent-hover: #EFBE5E; --c-line: #3A2E25; /* Gold trägt keinen weißen Text: --c-ink ist hier hell (invertiert für den Dunkelgrund), Buttons auf --c-accent/--c-accent-hover nutzen deshalb bewusst --c-surface (hier #211A15, dunkel) als Textfarbe — nicht --c-ink. */ --shadow-tint: 30 40% 4%; --radius-card: var(--radius-xs); } /* --- NEONDINER (Burgerbar Neuerburg, 2026-09-22) --- "Neon-Diner trifft Eifel-Holz": warmes Fast-Schwarz, genau zwei Neonfarben, ein Holzton. Herkunft der Farben (FAR-1, belegt statt erfunden): - --c-accent #FF7A1A Flammen-Orange aus dem Logo (Briefing) - --c-neon-blau #3FA9F5 LED-Band der Theke (Briefing, Foto bar-theke) - --c-holz #AA754A Median der Thekenleisten in bar-theke.jpg (gemessen, helle 40.-90. Perzentile), nur fuer Linien/Details - --c-ink #F3EDE4 Cremeweiss, --c-bg #0E0C0B (Briefing) Kontraste gegen --c-bg gerechnet: ink 16,8:1, ink-soft 10,8:1, ink-muted 5,7:1, Orange 7,5:1, Blau 7,6:1. Buttons auf Orange tragen --c-bg als Textfarbe (7,5:1), nie Weiss. Schriften: Bebas Neue (OFL, kondensiert, laut - wie Mikes gedruckte Karte) nur fuer Ueberschriften/Preise, Hanken Grotesk (OFL) fuer Fliesstext. Beide ueber Fontsource selbst gehostet. */ [data-theme="neondiner"] { --font-display: "Bebas Neue", "Arial Narrow", sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-mono: ui-monospace, monospace; --c-bg: #0E0C0B; --c-surface: #171311; --c-elevated: #221B17; --c-ink: #F3EDE4; --c-ink-soft: #CBBFB1; --c-ink-muted: #968878; --c-accent: #FF7A1A; --c-accent-hover: #FF9447; --c-neon-blau: #3FA9F5; --c-holz: #AA754A; --c-line: #2E2520; --shadow-tint: 25 40% 3%; --radius-card: var(--radius-xs); --radius-image: var(--radius-none); /* Bebas Neue ist bereits schmal gesetzt - negative Laufweite der Display-Stufe wuerde die Buchstaben verkleben. */ --tracking-display: 0.01em; --tracking-heading: 0.02em; } /* --- BERATUNG / B2B --- Nüchtern, präzise. Nah an Stripe, Plaid, Clerk. Geist ist frei (OFL) und wird von clerk.com selbst eingesetzt. */ [data-theme="beratung"] { --font-display: "Geist", system-ui, sans-serif; --font-body: "Geist", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --c-bg: #FFFFFF; --c-surface: #FFFFFF; --c-elevated: #F6F8FB; --c-ink: #0B1220; --c-ink-soft: #46536B; --c-ink-muted: #7C879B; --c-accent: #1D4ED8; --c-accent-hover: #1E40AF; --c-line: #E4E9F0; --shadow-tint: 220 45% 14%; --radius-card: var(--radius-sm); } /* --- ASSISTENZ --- Ruhig, warm, persönlich — für Büro-/Assistenzdienstleistungen im Einzelkontakt. Display-Serif für Wärme, klare Grotesk für Fließtext. Kein font-mono vom Kunden vorgegeben — Geist Mono als projektweiter Standard übernommen (siehe übrige Themes). [KUNDE 2026-08-10] Farben/Schriften exakt wie vom Kunden vorgegeben, keine Extraktion aus rohdaten/. --c-rose ist ein zusätzlicher Token ohne Entsprechung im Standard-Kern (Hintergrund/Fläche/Tinte/Akzent/ Linie) — ausschließlich für dieses Theme definiert, für dezente Akzentflächen (z. B. Zitat-/Empfehlungs-Blöcke), nicht Teil der Kernpalette. Kyrillisch-Prüfung (Fontsource-API, 2026-08-10): - Cormorant Garamond: Subsets umfassen cyrillic + cyrillic-ext. ✓ - Instrument Sans: Subsets nur latin + latin-ext. Kein Kyrillisch. ✗ Kein Ausfall auf Tofu-Glyphen: der bestehende Fallback "system-ui, sans-serif" in --font-body greift pro Zeichen automatisch für kyrillische Glyphen (CSS-Font-Fallback ist glyphweise, nicht elementweise) — die russische Fließtext-Type weicht dadurch sichtbar vom deutschen Instrument Sans ab (System-Schrift statt Markenschrift). Kein zusätzlicher Font-Import ergänzt, um keine zweite, nicht angefragte Schriftentscheidung zu treffen — dem Kunden gemeldet. */ [data-theme="assistenz"] { --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Instrument Sans", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --c-bg: #FAF7F2; --c-surface: #FFFFFF; --c-elevated: #F2ECE3; --c-ink: #2A2723; --c-ink-soft: #6B635A; --c-ink-muted: #9A9086; --c-accent: #A8843F; --c-accent-hover: #8A6B2F; --c-rose: #D9BFB7; --c-line: #E4DCD0; --shadow-tint: 30 15% 12%; --radius-card: var(--radius-sm); --radius-image: var(--radius-none); } /* --- VISIBLE (Cinzia Mosena) --- Editorial-ruhig, warm-creme, ein einziger tiefer Aubergine-Akzent. Farben/Schriften exakt wie vom Kunden vorgegeben (aus ihren eigenen HTML-Entwürfen übernommen), keine Extraktion aus rohdaten/. [KUNDE 2026-08-12] Helles Lila (--c-rose) ist ausschließlich Flächen- und Detailfarbe (Tags, dezente Kachel-Hintergründe, Gradient-Baustein für Entwurf B) — niemals Textfarbe. Auf --c-bg (#FAF7F2) liegt --c-rose bei rund 1.6:1 Kontrast, weit unter 4.5:1 für Fließtext. */ [data-theme="visible"] { --font-display: "Playfair Display", Georgia, serif; --font-body: "DM Sans", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --c-bg: #FAF7F2; --c-surface: #FFFFFF; --c-elevated: #F5EAF5; --c-ink: #1C0A1A; --c-ink-soft: #5C4A58; --c-ink-muted: #9B8094; --c-accent: #5B1659; --c-accent-hover: #3F0E3D; --c-rose: #D4A8CD; --c-line: #E9DCE6; --shadow-tint: 320 45% 12%; --radius-card: var(--radius-sm); --radius-image: var(--radius-none); } /* --- EDEL-VIOLETT --- Dunkle, elegante Anmutung — Beratung, Coaching, kreative Dienstleistung. Kundenpalette (2026-08-19), Kontrast geprüft. Nur EIN Rollen-Hinweis kam mit der Palette ("#0C0420 als Tinte"); die übrigen fünf Töne sind Bausteine ohne vorgegebene Rolle. Die Zuordnung folgt der WCAG-Rechnung: --c-ink (#0C0420) erreicht nur gegen die drei helleren Töne 4,5:1+ (9F6496 4.50 / BA6E8F 5.42 / D391B0 8.02), gegen die beiden dunkleren Töne (5D3C64, 7B466A) fällt es auf 2.18 / 2.78 — deshalb tragen NUR die drei helleren Töne Fläche (bg/surface/elevated), die beiden dunkleren sind Akzent/Akzent-Hover. "Dunkel" entsteht hier wie beim Theme `visible` über die Tinte (sehr dunkles Violett auf gedecktem Rosé), nicht über einen invertierten Dunkelgrund — für den gäbe es in dieser Palette keinen zweiten, ausreichend dunklen Ton. --c-ink-soft/--c-ink-muted/--c-line sind bewusst color-mix() aus --c-ink/--c-bg statt eines siebten/achten frei erfundenen Hex-Werts — bleibt vollständig auf die sechs geprüften Paletten-Farben rückführbar. Kontrast-Bericht (WCAG 2.1, alle Werte gegen 4,5:1 geprüft): - ink/bg 5.42:1 ✓ - ink/surface 8.02:1 ✓ - ink/elevated 4.50:1 ✓ (exakt an der Grenze — auf `elevated` nur Überschriften/große Schrift setzen, keinen Fließtext) - ink-soft/bg 5.16:1 ✓ (color-mix 94% ink) - ink-muted/bg 3.69:1 — wie in allen bestehenden Themes (siehe handwerk/gesundheit/beratung: 3.4–3.6:1) NICHT AA-Fließtext-fest, nur für große/dekorative Beschriftung - surface-Text auf accent/accentHover: 2.89 / 3.68 — fällt durch. Buttons/CTAs nutzen deshalb --c-ink als Füllung mit --c-surface als Text (8.02:1) statt --c-accent als Füllung. --c-accent/ --c-accent-hover sind für Flächen, Icons, Rahmen, Unterstreichung gedacht — NICHT als Textfarbe auf --c-bg/--c-surface (dort nur 1.95–3.68:1). Farbige Text-Links: color-mix(in srgb, var(--c-accent) 65%, var(--c-ink) 35%) verwenden, nicht die reine Akzentfarbe. */ [data-theme="edel-violett"] { --font-display: "Bodoni Moda", Georgia, serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --c-bg: #BA6E8F; --c-surface: #D391B0; --c-elevated: #9F6496; --c-ink: #0C0420; --c-ink-soft: color-mix(in srgb, var(--c-ink) 94%, var(--c-bg)); --c-ink-muted: color-mix(in srgb, var(--c-ink) 70%, var(--c-bg)); --c-accent: #7B466A; --c-accent-hover: #5D3C64; --c-line: color-mix(in srgb, var(--c-ink) 16%, var(--c-bg)); --shadow-tint: 320 35% 10%; --radius-card: var(--radius-sm); --radius-image: var(--radius-xs); } /* --- KANZLEI (Steuerberatung/Buchhaltung) --- v2, 2026-08-20: Kunde bat ausdrücklich um die echten Marken-Farben der Bestandsseite statt einer freien Neuinterpretation. Navy `#134464` und Grün `#89BD31` sind per Pixel-Sampling aus dem echten Logo extrahiert (`public/logo-jta.png`, Maskierung nach Grün-/Navy-Kanaldifferenz, Python/Pillow), nicht geschätzt - bestätigt durch das echte Ladenschild- Foto (`JTA-Office.jpg`, direkter Crawl), das dieselben zwei Farben auf der physischen Fassade zeigt. Ersetzt die v1-Gold/Navy-Erfindung vollständig. --font-display/--font-body/--radius-card unverändert gegenüber v1 (Begründung siehe Git-Historie dieser Datei). Grün ist strukturell schwierig als Text-/Flächenfarbe (mittlere Leuchtdichte, siehe Kontrast-Bericht unten) - deshalb bewusst NICHT als Fließtext-Trägerfarbe eingesetzt, sondern nur als Icon-/Chip-/ Rahmen-/Verlaufs-Akzent (Gradient-Familie, Abschnitt 3) sowie als Button-FLÄCHE mit --c-ink als Text (4.6:1, siehe unten - knapp aber ein echtes, rechnerisches Pass, kein geschöntes). `.btn--primary`/ `.btn--invert` in site.css nutzen genau dieses Muster (unveraendert aus v1 uebernommen, das Muster selbst war nie das Problem). Farbiger Fließtext/Links: color-mix(accent 35-40%, ink 60-65%) verwenden (siehe `--c-link`), nie die reine Akzentfarbe. ECHTER BUG gefunden und gefixt (2026-08-20, zweite Iteration dieses Themes): `--c-accent-hover` mischte urspruenglich Richtung --c-ink (dunkler), was bei einer ohnehin nur knapp bestehenden Basis-Fläche (4.6:1) den Hover-Zustand auf 3.6:1 reissen liess - fiel durch AA. Dunkler-Mischen reduziert bei dieser Akzentfarbe IMMER den Kontrast zum dunklen ink-Text, egal wie klein der Mix-Anteil; das Prinzip "Hover = dunkler" passt nicht zu einer mittelhellen Akzentfarbe mit dunklem Text obendrauf. Fix: Richtung --c-surface (heller) mischen statt --c-ink - ergibt einen leichten, ueblichen "Aufhellungs"-Hover UND haelt den Kontrast bei 5.2-5.5:1, komfortabel ueber 4.5:1. Kontrast (WCAG 2.1, gegen 4.5:1 geprüft, sRGB-Luminanz, rechnerisch nicht nur geschätzt): - ink (#134464) / bg (#FBFBFA): 9.9:1 ✓ - ink / surface (#FFFFFF): 10.3:1 ✓ - ink-soft / bg (color-mix 78%): 5.4:1 ✓ - ink-muted / bg (color-mix 55%): 3.0:1 — wie in allen Bestandsthemen nicht AA-fließtextfest, nur große/dekorative Beschriftung. - accent (#89BD31) / bg: 2.2:1 — fällt als Fließtext- /Link-Farbe komplett durch, auch großformatig fällt es unter 3:1. Nie Text auf --c-bg/--c-surface, nur Fläche/Icon/Rahmen/Verlauf. - surface (Weiß) / accent (Button-Text auf Grün-Fläche): 2.2:1 — fällt durch. ink (Navy) / accent (Button-Text auf Grün-Fläche): 4.6:1 ✓ - Basis-Zustand von `.btn--primary`/`.btn--invert`. - ink / accent-hover (color-mix 82% accent / 18% surface): 5.3:1 ✓ (ersetzt die fehlerhafte 3.6:1-Vorversion, siehe oben). - --c-link (color-mix 40% accent / 60% ink) / bg: 5.3:1 ✓ - surface / ink (invertierter Footer, Navy-Fläche): 10.3:1 ✓ */ [data-theme="kanzlei"] { --font-display: "Fraunces", Georgia, serif; --font-body: "Instrument Sans", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --c-bg: #FBFBFA; --c-surface: #FFFFFF; --c-elevated: #F2F5F7; --c-ink: #134464; --c-ink-soft: color-mix(in srgb, var(--c-ink) 78%, var(--c-bg)); --c-ink-muted: color-mix(in srgb, var(--c-ink) 55%, var(--c-bg)); --c-accent: #89BD31; --c-accent-hover: color-mix(in srgb, var(--c-accent) 82%, var(--c-surface) 18%); --c-link: color-mix(in srgb, var(--c-accent) 40%, var(--c-ink) 60%); --c-line: color-mix(in srgb, var(--c-ink) 12%, var(--c-bg)); --shadow-tint: 205 45% 12%; --radius-card: var(--radius-sm); --radius-image: var(--radius-sm); } /* --- SIGNAL-DUNKEL --- Kräftig und modern. Kundenpalette (2026-08-19), Kontrast geprüft. Alle sechs Töne kamen mit Rolle: Grund, helle Fläche, Akzent, Signalfarbe, abgesetzte Fläche, gedämpfter Ton. "Helle Fläche" (#E9D8C8) wird — wie bei `gastro` dokumentiert — invertiert als --c-ink eingesetzt: auf dem dunklen Grund ist sie die einzige Palettenfarbe, die als Fließtext gegen #142030 auf 11.82:1 kommt. "Abgesetzte Fläche" (#1E3442) wird wörtlich --c-surface (die Karten-Fläche, vom Grund abgesetzt). "Gedämpfter Ton" (#85A3B2) wird wörtlich --c-ink-soft. --c-elevated/ --c-accent-hover/--c-ink-muted/--c-line sind color-mix() aus den sechs gegebenen Tönen, kein siebter Hex-Wert. Kontrast-Bericht (WCAG 2.1, alle Werte gegen 4,5:1 geprüft): - ink/bg 11.82:1 ✓ - ink/surface 9.30:1 ✓ - ink/elevated 5.83:1 ✓ - ink-soft/bg 6.16:1 ✓ - ink-muted/bg 4.07:1 — wie bei edel-violett/den Bestandsthemen nicht AA-Fließtext-fest, nur große/dekorative Beschriftung - ink/accent (Text auf Akzentfläche) 7.14:1 ✓ - ink/accentHover (Text auf Hover-Fläche) 4.64:1 ✓ (color-mix 80% accent / 20% ink — bei mehr Aufhellung fällt der Wert unter 4,5:1, siehe Bericht) - bg/signal (Signalfarbe als Fläche, Text in --c-bg) 5.60:1 ✓ — Signalfarbe ist deutlich zu hell für --c-ink als Text (nur 2.11:1); auf --c-signal-Flächen (CTA, Badge) IMMER --c-bg als Textfarbe setzen, nie --c-ink. - accent als Text auf --c-bg: 1.66:1 — fällt durch, gleiche Regel wie bei edel-violett: --c-accent ist Flächen-/Icon-Farbe, keine Text-auf-Grund-Farbe. */ [data-theme="signal-dunkel"] { --font-display: "Bricolage Grotesque", system-ui, sans-serif; --font-body: "Instrument Sans", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --c-bg: #142030; --c-surface: #1E3442; --c-elevated: color-mix(in srgb, var(--c-surface) 82%, var(--c-ink) 18%); --c-ink: #E9D8C8; --c-ink-soft: #85A3B2; --c-ink-muted: color-mix(in srgb, var(--c-ink-soft) 75%, var(--c-bg) 25%); --c-accent: #732553; --c-accent-hover: color-mix(in srgb, var(--c-accent) 80%, var(--c-ink) 20%); --c-signal: #FF5C8D; --c-line: color-mix(in srgb, var(--c-ink) 14%, var(--c-bg) 86%); --shadow-tint: 325 40% 6%; --radius-card: var(--radius-none); --radius-image: var(--radius-none); } /* --- NEKTAR (Showcase "Nektar – Gaerten, die leben", 2026-10-13) --- Fiktives Studio fuer Gartengestaltung, Akquise-Demo + Reel. Palette aus den Projektbildern gemessen (FAR-1, belegt statt erfunden; Messung mit PIL ueber kunden-projekte/nektar-garten/assets): - --c-accent #15623A Smaragd: 25.-Perzentil des Kolibri-Gefieders (Median #238054 ist als Text auf hellem Grund zu schwach) - --c-rubin #B41A47 Median der Kolibri-Kehle (Rubin) - --c-elevated #DAC1AF Travertin: Median der Wegplatten in 01-morgen - --c-ink #2A2A0D dunkles Oliv: Median der Schattenpartien in 03-wiese - --c-gold #E0B464 aus dem Abendlicht 04-abend (#FCA02B) abgetoent, nur auf dunklem Oliv Kontraste (WCAG) auf --c-bg: ink 12,5:1, ink-soft 7,5:1, ink-muted 4,9:1, Smaragd 6,3:1, Rubin 5,6:1. Weiss auf Rubin 6,6:1 (Knopf), Gold auf Oliv 7,6:1. Schriften: Fraunces (OFL, variabel, Achse SOFT fuer die weichen Enden - organisch, ohne verspielt zu sein) fuer Ueberschriften, Instrument Sans (OFL) fuer Fliesstext. Beide ueber Fontsource selbst gehostet. Die Bilder sind nur 1672 px breit: --bild-max begrenzt die scharfe Flaeche, daneben laeuft eine weichgezeichnete Randfassung. */ [data-theme="nektar"] { --font-display: "Fraunces Variable", Georgia, serif; --font-body: "Instrument Sans Variable", system-ui, sans-serif; --font-mono: var(--font-body); --c-bg: #F4ECDF; --c-surface: #EADDCA; --c-elevated: #DAC1AF; --c-ink: #2A2A0D; --c-ink-soft: #4D4C2E; --c-ink-muted: #6A6848; --c-accent: #15623A; --c-accent-hover: #0F4C2C; --c-rubin: #B41A47; --c-rubin-hover: #96123A; --c-gold: #E0B464; --c-line: color-mix(in srgb, var(--c-ink) 14%, var(--c-bg) 86%); --shadow-tint: 60 55% 6%; --bild-max: 1672px; --radius-card: var(--radius-none); --radius-image: var(--radius-none); } /* ============================================================ SCHRIFTPAARUNGEN Ein Theme legt Palette UND Schrift fest. Manchmal soll aber nur die Schriftwirkung gewechselt werden, ohne die Farbwelt anzufassen — dafuer gibt es benannte Paarungen. Sie werden zusaetzlich zum Theme am -Element gesetzt und ueberschreiben ausschliesslich die drei Schrift-Tokens: Der Selektor ist bewusst :root[data-schriftpaarung="..."] (Spezifitaet 0,2,0) und nicht [data-schriftpaarung="..."] (0,1,0): die Theme-Bloecke oben liegen bei 0,1,0, ein gleichrangiger Selektor gewaenne nur solange er weiter unten steht. Ein spaeter ergaenztes Theme wuerde die Paarung sonst still aushebeln — genau die Art Fehler, die sich am Bildschirm nicht sehen laesst. Mit 0,2,0 gewinnt die Paarung unabhaengig von der Reihenfolge. Neu hinzugekommene Paarungen brauchen einen Eintrag im Motiv-/Zutaten-Katalog in design-feedback.md. ============================================================ */ /* --- HELL & FREUNDLICH --- Geometrische Grotesk in zwei Gewichten plus eine Handschrift als Akzent. Froehlich, leicht, menschlich — ohne den typischen KI-Einheitslook, weil das Kontrastmittel nicht die uebliche Serife-gegen-Grotesk-Paarung ist, sondern Grotesk gegen Schreibschrift. Herkunft: messie-hilfeservice.de, erfasst 2026-09-03, vollstaendig dokumentiert in design-system/rohdaten/messie-hilfeservice.de.md. Die Quelle diente ausdruecklich NICHT als Gesamt-Stilreferenz — ihre Kachel-Layouts und Nummerierungen sind bewusst nicht uebernommen. BEFUND DER QUELLE: dort gibt es keine eigene Display-Schrift. h1/h2/h3 erben dieselbe Grotesk vom body und setzen sich allein ueber font-weight: 800 ab. Diese Sparsamkeit ist Teil der Wirkung und wird hier uebernommen: --font-display und --font-body sind dieselbe Familie. Der Build-Agent traegt die Unterscheidung ueber das Gewicht, nicht ueber eine zweite Familie. ORIGINAL UND ERSATZ: - Sans: Original Montserrat (OFL-1.1, frei nutzbar). ERSETZT durch Outfit (OFL-1.1). Grund ist NICHT die Lizenz, sondern Abschnitt 2 dieser Verfassung: Montserrat ist als Hauptschrift ausdruecklich verboten. Outfit ist die naechstliegende freie Alternative — ebenfalls geometrische Grotesk mit nahezu kreisrunden Rundungen und hoher x-Hoehe, in 700/800 sehr nah an Montserrats Headline-Anmutung. - Handschrift: Kalam (OFL-1.1, frei nutzbar) unveraendert uebernommen. STOLPERFALLE: das Variable-Paket meldet sich als "Outfit Variable", nicht als "Outfit". Ein font-family: "Outfit" greift darauf NICHT und faellt still auf system-ui zurueck — deshalb stehen beide Namen in der Liste. Nach jeder Aenderung hier mit getComputedStyle pruefen, nicht nach Screenshot beurteilen. SELBST HOSTEN (Fontsource, kein Google-CDN): import "@fontsource-variable/outfit/wght"; // 100-900, latin + latin-ext import "@fontsource/kalam/latin-400"; import "@fontsource/kalam/latin-700"; Das Variable-Paket hat KEIN latin.css — /wght ist der richtige Einstieg und splittet die Subsets bereits per unicode-range. Kalam ist nicht variabel und hat genau drei Schnitte (300/400/700); jede Regel, die Kalam setzt, braucht deshalb ein explizites font-weight aus dieser Menge, sonst laedt der Browser eine zusaetzliche Datei fuer ein synthetisiertes Gewicht. --font-script ist ein Rollen-Token, das NUR diese Paarung belegt. Die Bausteine handschrift-kicker.css und slow-marquee.css setzen es nicht selbst — ohne die Paarung faellt der Kicker auf cursive zurueck und sieht in jedem Browser anders aus. Das ist Absicht: die Handschrift soll eine bewusste Entscheidung sein, kein Nebeneffekt eines Imports. EIGNUNG: empathische Branchen — Pflege, Hilfe-Dienstleistungen, Coaching, Familie, Therapie, Hebammen, Tierbetreuung. UNGEEIGNET: nuechtern-technische Auftritte — Kanzleien, B2B, Steuer/Buchhaltung, Ingenieur- und Planungsbueros. */ :root[data-schriftpaarung="hell-freundlich"] { --font-display: "Outfit Variable", "Outfit", system-ui, sans-serif; --font-body: "Outfit Variable", "Outfit", system-ui, sans-serif; --font-script: "Kalam", ui-rounded, cursive; /* Die Quelle setzt Headlines auf 800. Bei einer Sans, die zugleich Fliesstext traegt, ist das noetig, damit die Ueberschrift sich ueberhaupt absetzt — eine 500er-Headline in derselben Familie wirkt wie ein fetter Absatz. */ --weight-display: 800; /* Outfit laeuft geometrisch weit; die scharfe Display-Sperrung aus dem Token-Kern (-0.035em) drueckt sie sichtbar zusammen und nimmt ihr die Freundlichkeit. Bewusst gelockert. */ --tracking-display: -0.02em; } /* Die Grundregel unten setzt Ueberschriften auf --weight-medium. Fuer diese Paarung ist das zu leicht, weil Display und Body dieselbe Familie sind. */ :root[data-schriftpaarung="hell-freundlich"] :is(h1, h2, h3) { font-weight: var(--weight-display); } /* ============================================================ GLOBALE REGELN ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { background: var(--c-bg); color: var(--c-ink); font-family: var(--font-body); font-size: var(--type-base); line-height: var(--leading-normal); letter-spacing: var(--tracking-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); text-wrap: balance; font-weight: var(--weight-medium); } p { text-wrap: pretty; max-width: var(--container-text); } /* Ausdrucksebene: Monospace-Label für Beschriftungen, Indizes, technische Nebeninformationen. Nie für Fließtext oder Überschriften. */ .label-mono { font: var(--label-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; } /* Interaktives: immer --ease-standard, immer --dur-base. */ a, button, input, select, textarea { transition: color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), opacity var(--dur-base) var(--ease-standard); } /* Scroll-Reveal — Standardmuster. Mehr als drei Animationsarten pro Seite sind verboten. */ .reveal { opacity: 0; transform: translate3d(0, var(--reveal-y), 0); transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); } .reveal.is-visible { opacity: 1; transform: none; } /* Pflicht, nicht optional. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } }