/* ════════════════════════════════════════════════════════════════════════════════════════════ SH Wholesale Calculator · Landingpage · tokens.css Stand 19.09.2026 Royal Harvest: Navy trägt die Interaktion, Gold trägt die Marke. Diese Datei ersetzt für die Landingpage die Tokens des Designsystem-Projekts auf claude.ai (dort noch Blau, veraltet). Das Projekt führt noch das shadcn-Blau als Primärfarbe, kein Gold, keine Verläufe, und sein readme sagt „kein Verlauf", „kein Skalieren beim Drücken", „Desktop-Werkzeug, keine Hero-Flächen, keine Illustration". Für die Landingpage gilt davon nichts. Es gelten die Werte in dieser Datei. HERKUNFT [APP] unverändert aus frontend/src/index.css (origin/main, 19.09.2026) [APP-KLASSE] Tailwind-Klasse der App als Token (die App führt Semantik bewusst als Klasse) [ABGELEITET] App-Regel im Maßstab einer öffentlichen, mobilen Seite [NEU] nur für die Landingpage FORMAT Farben sind HSL-Tripel im shadcn-Stil: hsl(var(--primary)), Tönung hsl(var(--primary) / .1). Jede Token-Zeile trägt eine @kind-Annotation (color, font, spacing, radius, shadow, motion, other), dann den HEX-Wert und die Kontraste. „x:1 auf --y" heißt: die Farbe dieser Zeile gegen die Fläche --y im selben Block. Alle Kontraste nach WCAG 2.1 (relative Luminanz) mit Python nachgerechnet, auf 8-Bit-Farben gerundet. AA: Text 4,5:1 · große Schrift und Nicht-Text 3:1. FÜNF REGELN, DIE KEIN TOKEN AUSDRÜCKEN KANN 1 Gold (--brand) ist Fläche. Nie Schrift, Symbol oder Rahmenlinie auf hellem Grund (2,91:1). Erlaubt: Fläche ab 24 px mit --brand-foreground, die 2-px-Markenkante, der Goldschein der Schiene, blasses Gold (--on-navy-accent) als Schrift nur auf der Schiene. Im Nachbau zusätzlich nur die 3-px-Führungskante der Übersicht (README §3.1). 2 Blau ist kein Akzent. Navy (229 Grad) ist Interaktion, Violett (--category) ist Kategorie, emerald/red/amber sind Bedeutung und nie Schmuck. 3 Kein Navy-Hero mit Gold-Knopf: So sieht heute der Marktführer der Nische aus. Der Hero ist hell und typografisch. Auf Navy ist der Knopf hell (--cta-*), nie golden. 4 Verläufe nur in der Rahmung (Schiene, Knopf, Markenkante), nie hinter Zahlen, nie als Schriftfüllung. 5 Schatten nur am Produktrahmen (--shadow-frame). ════════════════════════════════════════════════════════════════════════════════════════════ */ /* ════ HELL (Standard) ════════════════════════════════════════════════════════════════════ */ :root, [data-theme="light"] { color-scheme: light; /* ── Flächen und Text [APP index.css:25-49] ──────────────────────────────────────────── */ --background: 45 20% 97.5%; /* @kind color · #FAF9F7 · Seitengrund, warm (DS-25) · 1,05:1 auf --card: Karte hebt sich ohne Linie ab */ --foreground: 229 43% 19%; /* @kind color · #1C2345 · Text, Überschriften · 15,26:1 auf --card · 14,51:1 auf --background · 13,40:1 auf --secondary */ --card: 0 0% 100%; /* @kind color · #FFFFFF · Karte und Produktrahmen bleiben weiß */ --card-foreground: 229 43% 19%; /* @kind color · #1C2345 · 15,26:1 auf --card */ --popover: 0 0% 100%; /* @kind color · #FFFFFF · schwebende Ebene (Belegkarte, Fußnote) */ --popover-foreground: 229 43% 19%; /* @kind color · #1C2345 · 15,26:1 auf --popover */ --secondary: 46 30% 93%; /* @kind color · #F3F0E8 · Wechselfläche für helle Kapitel · 1,08:1 auf --background */ --secondary-foreground: 229 40% 22%; /* @kind color · #222A4F · 12,20:1 auf --secondary */ --muted: 45 22% 95%; /* @kind color · #F5F4EF · gedämpfte Fläche, Platzhalter */ --muted-foreground: 229 16% 42%; /* @kind color · #5A607C · Nebentext, Fußnoten · 6,18:1 auf --card · 5,87:1 auf --background · 5,43:1 auf --secondary · 5,61:1 auf --muted · nie abschwächen: mit 80 % Deckkraft nur 3,77 zu 1 */ --accent: 46 34% 91%; /* @kind color · #F0ECE0 · Hover-Fläche */ --accent-foreground: 229 40% 22%; /* @kind color · #222A4F · 11,76:1 auf --accent */ --primary: 229 48% 26%; /* @kind color · #222E62 · Interaktion: Links, Umrissknopf, aktiver Zustand · 12,84:1 auf --card · 12,21:1 auf --background · 11,28:1 auf --secondary */ --primary-foreground: 45 40% 98%; /* @kind color · #FCFBF8 · Schrift auf Navy · 12,41:1 auf --primary */ --link: 229 48% 26%; /* @kind color · #222E62 · [NEU] Linkfarbe, auf der Schiene blasses Gold · 12,84:1 auf --card · 12,21:1 auf --background */ --destructive: 0 74% 42%; /* @kind color · #BA1C1C · Unumkehrbares; auf der Landingpage ohne Einsatz · 6,42:1 auf --card */ --destructive-foreground: 0 0% 100%; /* @kind color · #FFFFFF · 6,42:1 auf --destructive */ --border: 44 18% 86%; /* @kind color · #E2DED5 · Linie, nie Text · 1,34:1 auf --card */ --input: 44 18% 84%; /* @kind color · #DEDACF · Eingaberahmen · 1,40:1 auf --card */ --ring: 229 48% 34%; /* @kind color · #2D3C80 · Fokusring · 10,15:1 auf --card · 9,64:1 auf --background */ --radius: 0.5rem; /* @kind radius · 8 px · shadcn-Basis im App-Maßstab (lg 8 · md 6 · sm 4), nur für Nachbauten */ /* ── Marke [APP index.css:50-54] ─────────────────────────────────────────────────────── */ --brand: 46 51% 46%; /* @kind color · #B19539 · NUR FLÄCHE (DS-23) · als Schrift 2,91:1 auf --card = durchgefallen · als Fläche 2,76:1 auf --background */ --brand-foreground: 229 44% 11%; /* @kind color · #101428 · Schrift auf Gold · 6,27:1 auf --brand */ --brand-soft: 46 52% 88%; /* @kind color · #F0E9D0 · [NEU] ruhige Ertrags-/Ergebnisfläche ab 24 px, ohne Rahmenlinie · 1,22:1 auf --card */ --brand-soft-foreground: 229 43% 19%; /* @kind color · #1C2345 · 12,55:1 auf --brand-soft */ /* ── Kategorie und Gruppen [APP index.css:55-71] ─────────────────────────────────────── */ --category: 271 45% 42%; /* @kind color · #6D3B9B · wertungsfreies Etikett, nie Handlung (DS-30) · 7,64:1 auf --card · 6,51:1 auf --category/10 über --card */ --g-produkt: 96 24% 30%; /* @kind color · #495F3A · Gruppenkante „Produkt" (2 px) und 12-px-Gruppentitel · 7,04:1 auf --card */ --g-lieferant: 271 45% 42%; /* @kind color · #6D3B9B · Gruppe „Lieferant" · 7,64:1 auf --card */ --g-analyse: 316 30% 36%; /* @kind color · #774069 · Gruppe „Analyse" · 7,72:1 auf --card */ /* ── Bedeutung [APP-KLASSE, DS-1/DS-20]: Text hell -700, Fläche -500, Tönung -500/10 ──── */ --positive: 162.9 93.5% 24.3%; /* @kind color · #047857 · emerald-700 · Gewinn, erreicht, gebucht · 5,48:1 auf --card · 5,21:1 auf --background · 4,99:1 auf --positive-fill/10 über --card */ --positive-fill: 160.1 84.1% 39.4%; /* @kind color · #10B981 · emerald-500 · Balken, Punkt, Tönung · 2,54:1 auf --card: trägt nie allein Information */ --negative: 0 73.7% 41.8%; /* @kind color · #B91C1C · red-700 · Verlust, verfällt · 6,47:1 auf --card · 6,15:1 auf --background · 5,66:1 auf --negative-fill/10 über --card */ --negative-fill: 0 84.2% 60.2%; /* @kind color · #EF4444 · red-500 · 3,76:1 auf --card */ --warning: 26 90.5% 37.1%; /* @kind color · #B45309 · amber-700 · Frist, Schwelle · 5,02:1 auf --card · 4,77:1 auf --background · 4,65:1 auf --warning-fill/10 über --card · Warn-Chips nur auf Karte: auf der Tönung über dem Grund 4,44 zu 1 · als Schrift NIE auf --secondary: 4,41 zu 1 = durchgefallen */ --warning-fill: 37.7 92.1% 50.2%; /* @kind color · #F59E0B · amber-500 · 2,15:1 auf --card: trägt nie allein Information */ --neutral-fill: 240 5% 65%; /* @kind color · #A1A1AA · zinc-400 · Punkt „unbekannt", immer mit Wort · 2,56:1 auf --card */ --tint-alpha: 0.1; /* @kind other · Deckkraft jeder Chip- und Icon-Tönung: hsl(var(--positive-fill) / var(--tint-alpha)); 0.15 ist durchgefallen (DS-20) */ /* ── Diagrammserien [APP index.css:84-99, DS-18]: keine Bedeutung, kein Rot, nur in Produktausschnitten ── */ --chart-1: 46 51% 44%; /* @kind color · #A98F37 · Gold · 3,15:1 auf --card */ --chart-2: 229 48% 32%; /* @kind color · #2A3979 · Navy · 10,72:1 auf --card */ --chart-3: 198 52% 38%; /* @kind color · #2F7593 · Petrol · 5,14:1 auf --card */ --chart-4: 268 34% 50%; /* @kind color · #7D54AB · Violett · 5,63:1 auf --card */ --chart-5: 300 40% 46%; /* @kind color · #A446A4 · Magenta · 5,26:1 auf --card */ --chart-6: 330 55% 50%; /* @kind color · #C63980 · Himbeere · 4,89:1 auf --card */ --chart-7: 84 45% 34%; /* @kind color · #5F7E30 · Oliv · 4,65:1 auf --card */ --chart-8: 141 42% 34%; /* @kind color · #327B4C · Grün · 5,16:1 auf --card */ /* ── Markenfläche „Schiene" [ABGELEITET DS-29, index.css:214-232] ─────────────────────── Navy-Kapitel und Fußzeile. In BEIDEN Modi dieselben Werte, deshalb nur hier definiert. Angewendet über die Klasse .schiene weiter unten, die die Text-Tokens lokal umstellt. */ --rail-start: 229 42% 17%; /* @kind color · #19203E · Schienen-Navy oben links */ --rail-end: 230 34% 25%; /* @kind color · #2A3155 · Schienen-Navy unten rechts */ --rail-glow: 46 46% 42%; /* @kind color · #9C853A · Goldschein unten mittig, 34 % Deckkraft */ --gradient-rail: radial-gradient(130% 55% at 50% 112%, hsl(var(--rail-glow) / 0.34), transparent 72%), linear-gradient(172deg, hsl(var(--rail-start)), hsl(var(--rail-end))); /* @kind other · [APP] Hintergrund der Schiene */ --on-navy: 0 0% 100%; /* @kind color · #FFFFFF · Schrift auf der Schiene · 15,94:1 auf --rail-start · 12,58:1 auf --rail-end · im Goldschein mindestens 8,25 zu 1 */ --on-navy-muted: 46 16% 82%; /* @kind color · #D8D5CA · Nebentext auf der Schiene · 10,85:1 auf --rail-start · 8,56:1 auf --rail-end · im Goldschein mindestens 5,62 zu 1 */ --on-navy-accent: 46 58% 78%; /* @kind color · #E7D8A6 · blasses Gold, auf der Schiene als Schrift ERLAUBT (Links, eine Hervorhebung) · 11,21:1 auf --rail-start · 8,85:1 auf --rail-end · im Goldschein mindestens 5,81 zu 1 */ --on-navy-line: 230 22% 36%; /* @kind color · #484E70 · [NEU] Linie auf der Schiene, opak statt Weiß mit Deckkraft · 1,97:1 auf --rail-start */ --on-navy-surface: 229 30% 22%; /* @kind color · #272D49 · [NEU] Fläche auf der Schiene, braucht --on-navy-line als Rand · 1,18:1 auf --rail-start */ --ring-on-navy: 46 58% 78%; /* @kind color · #E7D8A6 · [NEU] Fokusring auf Navy · 11,21:1 auf --rail-start · 8,85:1 auf --rail-end · der normale --ring hätte dort 1,57 zu 1 */ /* ── Rahmung: Knopf und Markenkante [APP index.css:79, 291-320] ─────────────────────── */ --gradient-button: linear-gradient(160deg, hsl(229 46% 28%), hsl(230 44% 22%)); /* @kind other · [APP] Navy-Verlauf #273368 → #1F2851 · #FCFBF8 11,53:1 auf #273368 · #FCFBF8 13,71:1 auf #1F2851 · beim Überfahren brightness(1.1) mindestens 10,62 zu 1 */ --edge-brand: linear-gradient(90deg, hsl(229 42% 17%) 0, hsl(229 42% 17%) 24px, hsl(230 25% 31%) 42px, hsl(28 20% 42%) 86px, hsl(46 51% 46%) 152px, hsl(46 51% 46%) 58%, hsl(46 51% 46% / 0.42) 82%, hsl(46 51% 46% / 0.14) 100%); /* @kind other · [ABGELEITET .marken-kante] 2-px-Markenkante #19203E → #3B4263 → warmes Braun #816A56 → Gold #B19539; der braune Zwischenhalt ist Pflicht (sonst läuft Navy→Gold über Oliv und Grau) · Schmuck, trägt keine Information */ --edge-brand-height: 2px; /* @kind spacing · Höhe der Markenkante, nie dicker */ --gradient-topbar: linear-gradient(90deg, hsl(45 26% 98.5%) 0%, hsl(46 30% 95.5%) 100%); /* @kind other · [APP index.css:77] Kopfzeile der App-Hülle #FCFCFA → #F7F5F0 · #1C2345 14,86:1 auf #FCFCFA · #1C2345 14,01:1 auf #F7F5F0 · nur im Nachbau der App, nicht als Seitenkopf */ /* ── Hauptknopf [NEU nach Fallstrick 25]: hell = Navy-Verlauf, auf Navy = heller Knopf ── */ --cta-background: hsl(229 48% 26%); /* @kind other · [22.09.2026 B+] flaches Navy #222E62 statt Verlauf · #FCFBF8 12,37:1 · zugleich Fläche des Zeichens */ --cta-background-hover: hsl(229 44% 33%); /* @kind other · etwas heller #2F3C79 · #FCFBF8 9,85:1 */ --cta-hover-filter: none; /* @kind other · Farbwechsel statt Filter */ --cta-foreground: 45 40% 98%; /* @kind color · #FCFBF8 · Schrift im Hauptknopf (Kontraste siehe --gradient-button) */ /* ── Navigation [NEU nach apple-design §12] ──────────────────────────────────────────── */ --nav-h: 56px; /* @kind spacing · [APP TopBar 56 px] Höhe der klebenden Leiste */ --nav-bg-alpha: 0.92; /* @kind other · Deckkraft der Leiste, fast deckend, weil Safari prefers-reduced-transparency nicht kennt (war 0,8). Gerechnet als flache Mischung mit dem dunkelsten bzw. hellsten Inhalt darunter: hell mindestens --foreground 12,34 zu 1, --primary 10,38 zu 1; dunkel über dem hellen Hauptknopf #FCFBF8 mindestens --foreground 13,93 zu 1, --primary 5,40 zu 1 (bei 0,8 waren es 3,61 zu 1). Darin trotzdem nur --foreground und --primary; --muted-foreground hell nur 4,99 zu 1, dort vermeiden */ --nav-background: hsl(var(--background) / var(--nav-bg-alpha)); /* @kind other · Leistenfläche, folgt dem Modus */ --nav-backdrop: blur(20px) saturate(180%); /* @kind other · nur solange Inhalt darunter scrollt; unten die Markenkante statt einer grauen Linie */ /* ── Schrift [APP Familie: Tailwind-3.4-Standard, keine Webfonts] ───────────────────── */ --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* @kind font · Systemschrift der App (SF Pro auf Apple-Geräten, Segoe UI auf Windows) · keine Google Fonts, kein CDN */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* @kind font · Kennungen: ASIN, EAN, SKU, LPN, Fall-ID */ --font-features: "rlig" 1, "calt" 1; /* @kind font · [APP index.css:161] */ --fw-regular: 400; /* @kind font · Fließtext */ --fw-medium: 500; /* @kind font · nur Beschriftungen in Produktausschnitten */ --fw-semibold: 600; /* @kind font · Überschriften, Beträge; höchstens diese drei Gewichte */ /* Größen fließend, px bei 360 / 768 / 1024 / 1280 und breiter */ --fs-display: clamp(2.5rem, 1.95rem + 2.6vw, 4rem); /* @kind font · H1 im Hero · 40,6 / 51,2 / 57,8 / 64 px · längstes Wort der H1 bei 360 px höchstens rund 14 Zeichen */ --lh-display: 1.05; /* @kind font · Display eng */ --tr-display: -0.025em; /* @kind font · große Schrift negativ (apple-design §15) */ --fs-title: clamp(2rem, 1.55rem + 1.5vw, 2.75rem); /* @kind font · H2 je Kapitel · 32 / 36,3 / 40,2 / 44 px */ --lh-title: 1.1; /* @kind font */ --tr-title: -0.02em; /* @kind font */ --fs-heading: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); /* @kind font · H3 · 22 / 23,7 / 25,8 / 27,8 px (28 ab 1300) */ --lh-heading: 1.2; /* @kind font */ --tr-heading: -0.01em; /* @kind font */ --fs-lead: clamp(1.125rem, 1.03rem + 0.35vw, 1.3125rem); /* @kind font · Unterzeile, Einleitung · 18 / 19,2 / 20,1 / 21 px */ --lh-lead: 1.45; /* @kind font */ --tr-lead: -0.005em; /* @kind font */ --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); /* @kind font · Fließtext · 16,1 px mobil, 17 px ab 768 */ --lh-body: 1.5; /* @kind font · Fließtext locker */ --tr-body: 0; /* @kind font · Fließtext ohne Laufweite */ --fs-small: 0.875rem; /* @kind font · 14 px · Fußnoten, Kleingedrucktes mit AA (--muted-foreground) */ --lh-small: 1.45; /* @kind font */ --tr-small: 0; /* @kind font */ --fs-caption: 0.75rem; /* @kind font · 12 px · Landing-Minimum (App-Minimum 11 px, DS-48) · Bildunterschrift „Beispiel" */ --lh-caption: 1.35; /* @kind font */ --tr-caption: 0.01em; /* @kind font · kleine Schrift leicht positiv */ --numeric: tabular-nums; /* @kind font · jede Zahl gleich breit (DS-51/DS-54), siehe .tabular-nums */ /* ── Produktausschnitte im App-Maßstab [APP DS-51/DS-53]; Größe = calc(App-Wert * --motiv-scale) ── */ --motiv-scale: 1.125; /* @kind other · mobil 1,125 (11 px werden 12,4 px), ab 1024 px 1,25, Nahaufnahme höchstens 1,5 */ --app-fs-title: 20px; /* @kind font · Seitentitel, Antwort-Überschrift der Übersicht */ --app-fs-kpi: 18px; /* @kind font · Wert der KpiCard */ --app-fs-claim: 17px; /* @kind font · Forderungsbetrag der ZahlenTafel */ --app-fs-body: 14px; /* @kind font · text-sm, Knöpfe, Handlungszeilen */ --app-fs-value: 13px; /* @kind font · Werte, Produkttitel */ --app-fs-table: 12.5px; /* @kind font · KennungsTafel, ZahlenTafel */ --app-fs-group: 12px; /* @kind font · Gruppentitel, Marke, Zusatzzeilen */ --app-fs-label: 11px; /* @kind font · Beschriftung, Chips, Kennungen */ --app-control-h: 32px; /* @kind spacing · Control-Höhe der App (DS-9), gilt nur im Ausschnitt */ --app-radius-container: 8px; /* @kind radius · Karte, Kachel in der App */ --app-radius-control: 6px; /* @kind radius · Knopf, Eingabe, Icon-Chip in der App */ --app-radius-chip: 4px; /* @kind radius · StatusChip in der App */ --app-radius-flag: 2px; /* @kind radius · gezeichnete Fahne 15 × 11 */ /* ── Abstände: 8-px-Raster, Name = px [ABGELEITET DS-52 + NEU große Stufen] ──────────── */ --space-4: 4px; /* @kind spacing · halbe Stufe, nur innerhalb von Bausteinen */ --space-8: 8px; /* @kind spacing */ --space-12: 12px; /* @kind spacing · [APP gap-3] */ --space-16: 16px; /* @kind spacing · Seitenrand mobil */ --space-24: 24px; /* @kind spacing */ --space-32: 32px; /* @kind spacing */ --space-40: 40px; /* @kind spacing */ --space-48: 48px; /* @kind spacing */ --space-64: 64px; /* @kind spacing */ --space-80: 80px; /* @kind spacing */ --space-96: 96px; /* @kind spacing */ --space-128: 128px; /* @kind spacing */ --space-160: 160px; /* @kind spacing */ --section-y: clamp(4.5rem, 2.75rem + 6vw, 10rem); /* @kind spacing · Kapitelabstand · 72 / 90 / 105 / 121 px, 130 bei 1440, 160 ab rund 1930 */ --section-y-tight: clamp(3rem, 2rem + 3vw, 5rem); /* @kind spacing · Abstand innerhalb eines Kapitels · 48 / 55 / 63 / 70 px, 80 ab 1600 */ --gutter: 16px; /* @kind spacing · Seitenrand und Spaltenabstand: 16 mobil, 24 ab 768, 32 ab 1280 */ --container: 1200px; /* @kind spacing · Text und Kacheln */ --container-wide: 1320px; /* @kind spacing · Produktausschnitte */ --measure: 40rem; /* @kind spacing · Fließtext höchstens 640 px, rund 65 bis 70 Zeichen bei 17 px */ --measure-lead: 34rem; /* @kind spacing · Hero-Unterzeile und Einleitungen */ --grid-cols: 4; /* @kind other · Spalten: 4 unter 768, 8 ab 768, 12 ab 1024 */ /* Umbruchpunkte [APP Tailwind-Standard]. In @media als Literal schreiben; Tokens nur zur Dokumentation. */ --bp-sm: 640px; /* @kind other */ --bp-md: 768px; /* @kind other */ --bp-lg: 1024px; /* @kind other */ --bp-xl: 1280px; /* @kind other */ --bp-2xl: 1536px; /* @kind other · darüber wächst nur der Weißraum */ /* ── Radien nach Rolle [ABGELEITET DS-53: je runder, desto flüchtiger] ─────────────── */ --radius-label: 4px; /* @kind radius · Etikett, Chip, Fußnotenmarke */ --radius-control: 8px; /* @kind radius · Knopf, Eingabe, Hauptknopf; KEINE Pillen-Knöpfe */ --radius-card: 12px; /* @kind radius · Inhaltskarte, Belegkarte */ --radius-frame: 16px; /* @kind radius · Rahmen um Produktausschnitte */ --radius-state: 9999px; /* @kind radius · nur Zustand: Statuspunkt, Fortschrittsbalken, Kreis der StatusSteps */ /* ── Tiefe [NEU; die App ist fast schattenlos] ───────────────────────────────────────── */ --shadow-frame: 0 1px 1px hsl(229 43% 19% / 0.04), 0 8px 24px -6px hsl(229 43% 19% / 0.12), 0 32px 64px -24px hsl(229 43% 19% / 0.18); /* @kind shadow · NUR der Produktrahmen; Karten tragen Rand plus Helligkeitssprung Grund/Karte */ /* ── Bewegung [APP index.css:333-342 + NEU nach emil-design-eng] ─────────────────────── */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* @kind motion · Eintritt, Rückweg des Drucks */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* @kind motion · Bewegung auf dem Schirm; nie ease-in */ --ease-color: ease; /* @kind motion · Farbe und Hover */ --dur-press-in: 0ms; /* @kind motion · Druck antwortet sofort (DS-41) */ --dur-press: 100ms; /* @kind motion · Rückweg nach dem Loslassen */ --press-scale: 0.97; /* @kind motion · Knopf beim Drücken; nie Hover-Skalieren */ --dur-hover: 150ms; /* @kind motion · Farbwechsel beim Überfahren, nur unter (hover: hover) and (pointer: fine) */ --dur-reveal: 400ms; /* @kind motion · nur für die Sequenzen aus README §3.8 (Posten der Signatur, Überblendung von Herkunfts- und Belegkarte); KEIN allgemeiner Eintritt beim Scrollen */ --reveal-distance: 8px; /* @kind motion · Weg eines Postens der Signatur von oben (README §3.8 Nr. 3) */ --stagger: 50ms; /* @kind motion · Versatz nur zwischen den Posten der Signatur (README §3.8 Nr. 3) */ --dur-step: 320ms; /* @kind motion · Erklär-Sequenz: ein Kreis der StatusSteps füllt sich */ --step-delay: 160ms; /* @kind motion · Pause bis zum nächsten Kreis; die Sequenz läuft genau einmal */ /* ── Bedienung [NEU; DS-9 gilt nur für die Desktop-App] ──────────────────────────────── */ --tap-min: 44px; /* @kind spacing · kleinstes Tapziel (Apple HIG); WCAG 2.2 AA verlangt 24 px */ --control-h: 44px; /* @kind spacing · Zweitknopf, Navigationseintrag, Sprachwahl auf der Seite */ --cta-h: 48px; /* @kind spacing · Hauptknopf „Beta-Platz anfragen" */ --focus-width: 2px; /* @kind spacing · Fokusring [APP index.css:194] */ --focus-offset: 2px; /* @kind spacing */ } /* ════ DUNKEL: Systemeinstellung ══════════════════════════════════════════════════════════ Zwei gleichlautende Blöcke: dieser folgt dem Betriebssystem, der nächste einem ausdrücklichen data-theme="dark" (auch auf einem einzelnen Produktrahmen). Die Schiene bleibt unverändert. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; /* Flächen und Text [APP index.css:103-150] */ --background: 229 38% 9%; /* @kind color · #0E1120 · Seitengrund · 1,09:1 auf --card */ --foreground: 45 18% 95%; /* @kind color · #F5F3F0 · warmes Weiß · 15,56:1 auf --card · 16,93:1 auf --background · 13,11:1 auf --secondary */ --card: 229 34% 13%; /* @kind color · #161A2C · Karte, vier Punkte über dem Grund (DS-19) */ --card-foreground: 45 18% 95%; /* @kind color · #F5F3F0 · 15,56:1 auf --card */ --popover: 229 34% 14%; /* @kind color · #181C30 */ --popover-foreground: 45 18% 95%; /* @kind color · #F5F3F0 · 15,20:1 auf --popover */ --secondary: 229 26% 19%; /* @kind color · #24283D · Wechselfläche · 1,29:1 auf --background */ --secondary-foreground: 45 18% 95%; /* @kind color · #F5F3F0 · 13,11:1 auf --secondary */ --muted: 229 26% 18%; /* @kind color · #22263A */ --muted-foreground: 45 12% 68%; /* @kind color · #B7B2A4 · 8,14:1 auf --card · 8,86:1 auf --background · 7,05:1 auf --muted · 6,86:1 auf --secondary */ --accent: 229 24% 26%; /* @kind color · #323852 · Hover, bewusst ungleich --border */ --accent-foreground: 45 18% 95%; /* @kind color · #F5F3F0 · 10,40:1 auf --accent */ --primary: 229 45% 68%; /* @kind color · #8996D2 · helles Navy, Interaktion · 6,04:1 auf --card · 6,57:1 auf --background */ --primary-foreground: 229 44% 11%; /* @kind color · #101428 · 6,38:1 auf --primary */ --link: 229 45% 68%; /* @kind color · #8996D2 · 6,04:1 auf --card · 6,57:1 auf --background */ --destructive: 0 62% 48%; /* @kind color · #C62F2F · nur Fläche mit weißer Schrift */ --destructive-foreground: 0 0% 100%; /* @kind color · #FFFFFF · 5,46:1 auf --destructive */ --border: 229 22% 23%; /* @kind color · #2E3248 · 1,37:1 auf --card */ --input: 229 22% 25%; /* @kind color · #32374E · 1,47:1 auf --card */ --ring: 229 48% 62%; /* @kind color · #7081CD · 4,69:1 auf --card · 5,10:1 auf --background */ /* Marke */ --brand: 46 44% 56%; /* @kind color · #C0A95D · Fläche · 7,45:1 auf --card */ --brand-foreground: 229 44% 11%; /* @kind color · #101428 · 7,87:1 auf --brand */ --brand-soft: 46 30% 18%; /* @kind color · #3C3520 · [NEU] Ergebnisfläche dunkel · 1,41:1 auf --card */ --brand-soft-foreground: 45 18% 95%; /* @kind color · #F5F3F0 · 11,01:1 auf --brand-soft */ /* Kategorie und Gruppen */ --category: 271 55% 72%; /* @kind color · #B990DF · 6,66:1 auf --card · 5,68:1 auf --category/10 über --card */ --g-produkt: 96 30% 66%; /* @kind color · #A3C28E · 8,75:1 auf --card */ --g-lieferant: 271 55% 72%; /* @kind color · #B990DF · 6,66:1 auf --card */ --g-analyse: 316 36% 72%; /* @kind color · #D19EC4 · 7,72:1 auf --card */ /* Bedeutung: Text dunkel -400, Fläche bleibt -500 */ --positive: 158.1 64.4% 51.6%; /* @kind color · #34D399 · emerald-400 · 8,97:1 auf --card · 9,76:1 auf --background · 7,72:1 auf --positive-fill/10 über --card */ --negative: 0 90.6% 70.8%; /* @kind color · #F87171 · red-400 · 6,23:1 auf --card · 6,78:1 auf --background · 5,69:1 auf --negative-fill/10 über --card */ --warning: 43.3 96.4% 56.3%; /* @kind color · #FBBF24 · amber-400 · 10,33:1 auf --card · 11,23:1 auf --background · 8,80:1 auf --warning-fill/10 über --card */ /* Diagrammserien: hellere Stufen */ --chart-1: 46 51% 54%; /* @kind color · #C6AA4E · 7,60:1 auf --card */ --chart-2: 215 58% 62%; /* @kind color · #6695D6 · 5,61:1 auf --card */ --chart-3: 190 54% 52%; /* @kind color · #43B1C7 · 6,86:1 auf --card */ --chart-4: 268 44% 66%; /* @kind color · #A682CE · 5,50:1 auf --card */ --chart-5: 300 48% 66%; /* @kind color · #D27FD2 · 6,33:1 auf --card */ --chart-6: 329 62% 66%; /* @kind color · #DE73AA · 5,86:1 auf --card */ --chart-7: 82 52% 52%; /* @kind color · #96C445 · 8,44:1 auf --card */ --chart-8: 141 46% 52%; /* @kind color · #4CBD74 · 7,26:1 auf --card */ /* Kopfzeile der App-Hülle dunkel [APP index.css:137] */ --gradient-topbar: linear-gradient(90deg, hsl(229 34% 11%) 0%, hsl(44 14% 14%) 100%); /* @kind other · #131626 → #29261F · #F5F3F0 16,20:1 auf #131626 · #F5F3F0 13,63:1 auf #29261F */ /* Markenkante dunkel [APP index.css:310-320] */ --edge-brand: linear-gradient(90deg, hsl(229 42% 17%) 0, hsl(229 42% 17%) 24px, hsl(231 22% 38%) 42px, hsl(30 22% 48%) 86px, hsl(46 44% 56%) 152px, hsl(46 44% 56%) 58%, hsl(46 44% 56% / 0.40) 82%, hsl(46 44% 56% / 0.13) 100%); /* @kind other · #19203E → #4C5276 → #957A5F → #C0A95D */ /* Hauptknopf dunkel: HELL, nicht der goldene Knopf des App-Dunkelmodus (Fallstrick 25) */ --cta-background: hsl(45 40% 98%); /* @kind other · #FCFBF8 · 18,12:1 gegen #0E1120 */ --cta-background-hover: hsl(46 30% 93%); /* @kind other · #F3F0E8 · #222E62 11,28:1 auf #F3F0E8 */ --cta-hover-filter: none; /* @kind other */ --cta-foreground: 229 48% 26%; /* @kind color · #222E62 · Navy-Schrift · #222E62 12,41:1 auf #FCFBF8 */ /* Tiefe dunkel: Kante statt Schatten */ --shadow-frame: 0 0 0 1px hsl(0 0% 100% / 0.08), 0 24px 48px -16px hsl(0 0% 0% / 0.5); /* @kind shadow · Produktrahmen dunkel */ } } /* ════ DUNKEL: ausdrücklich gewählt (identisch zum Block darüber) ════════════════════════ */ :root[data-theme="dark"], [data-theme="dark"] { color-scheme: dark; --background: 229 38% 9%; /* @kind color · #0E1120 · Seitengrund · 1,09:1 auf --card */ --foreground: 45 18% 95%; /* @kind color · #F5F3F0 · warmes Weiß · 15,56:1 auf --card · 16,93:1 auf --background · 13,11:1 auf --secondary */ --card: 229 34% 13%; /* @kind color · #161A2C · Karte, vier Punkte über dem Grund (DS-19) */ --card-foreground: 45 18% 95%; /* @kind color · #F5F3F0 · 15,56:1 auf --card */ --popover: 229 34% 14%; /* @kind color · #181C30 */ --popover-foreground: 45 18% 95%; /* @kind color · #F5F3F0 · 15,20:1 auf --popover */ --secondary: 229 26% 19%; /* @kind color · #24283D · Wechselfläche · 1,29:1 auf --background */ --secondary-foreground: 45 18% 95%; /* @kind color · #F5F3F0 · 13,11:1 auf --secondary */ --muted: 229 26% 18%; /* @kind color · #22263A */ --muted-foreground: 45 12% 68%; /* @kind color · #B7B2A4 · 8,14:1 auf --card · 8,86:1 auf --background · 7,05:1 auf --muted · 6,86:1 auf --secondary */ --accent: 229 24% 26%; /* @kind color · #323852 · Hover, bewusst ungleich --border */ --accent-foreground: 45 18% 95%; /* @kind color · #F5F3F0 · 10,40:1 auf --accent */ --primary: 229 45% 68%; /* @kind color · #8996D2 · helles Navy, Interaktion · 6,04:1 auf --card · 6,57:1 auf --background */ --primary-foreground: 229 44% 11%; /* @kind color · #101428 · 6,38:1 auf --primary */ --link: 229 45% 68%; /* @kind color · #8996D2 · 6,04:1 auf --card · 6,57:1 auf --background */ --destructive: 0 62% 48%; /* @kind color · #C62F2F · nur Fläche mit weißer Schrift */ --destructive-foreground: 0 0% 100%; /* @kind color · #FFFFFF · 5,46:1 auf --destructive */ --border: 229 22% 23%; /* @kind color · #2E3248 · 1,37:1 auf --card */ --input: 229 22% 25%; /* @kind color · #32374E · 1,47:1 auf --card */ --ring: 229 48% 62%; /* @kind color · #7081CD · 4,69:1 auf --card · 5,10:1 auf --background */ --brand: 46 44% 56%; /* @kind color · #C0A95D · Fläche · 7,45:1 auf --card */ --brand-foreground: 229 44% 11%; /* @kind color · #101428 · 7,87:1 auf --brand */ --brand-soft: 46 30% 18%; /* @kind color · #3C3520 · [NEU] Ergebnisfläche dunkel · 1,41:1 auf --card */ --brand-soft-foreground: 45 18% 95%; /* @kind color · #F5F3F0 · 11,01:1 auf --brand-soft */ --category: 271 55% 72%; /* @kind color · #B990DF · 6,66:1 auf --card · 5,68:1 auf --category/10 über --card */ --g-produkt: 96 30% 66%; /* @kind color · #A3C28E · 8,75:1 auf --card */ --g-lieferant: 271 55% 72%; /* @kind color · #B990DF · 6,66:1 auf --card */ --g-analyse: 316 36% 72%; /* @kind color · #D19EC4 · 7,72:1 auf --card */ --positive: 158.1 64.4% 51.6%; /* @kind color · #34D399 · emerald-400 · 8,97:1 auf --card · 9,76:1 auf --background · 7,72:1 auf --positive-fill/10 über --card */ --negative: 0 90.6% 70.8%; /* @kind color · #F87171 · red-400 · 6,23:1 auf --card · 6,78:1 auf --background · 5,69:1 auf --negative-fill/10 über --card */ --warning: 43.3 96.4% 56.3%; /* @kind color · #FBBF24 · amber-400 · 10,33:1 auf --card · 11,23:1 auf --background · 8,80:1 auf --warning-fill/10 über --card */ --chart-1: 46 51% 54%; /* @kind color · #C6AA4E · 7,60:1 auf --card */ --chart-2: 215 58% 62%; /* @kind color · #6695D6 · 5,61:1 auf --card */ --chart-3: 190 54% 52%; /* @kind color · #43B1C7 · 6,86:1 auf --card */ --chart-4: 268 44% 66%; /* @kind color · #A682CE · 5,50:1 auf --card */ --chart-5: 300 48% 66%; /* @kind color · #D27FD2 · 6,33:1 auf --card */ --chart-6: 329 62% 66%; /* @kind color · #DE73AA · 5,86:1 auf --card */ --chart-7: 82 52% 52%; /* @kind color · #96C445 · 8,44:1 auf --card */ --chart-8: 141 46% 52%; /* @kind color · #4CBD74 · 7,26:1 auf --card */ --gradient-topbar: linear-gradient(90deg, hsl(229 34% 11%) 0%, hsl(44 14% 14%) 100%); /* @kind other · #131626 → #29261F · #F5F3F0 16,20:1 auf #131626 · #F5F3F0 13,63:1 auf #29261F */ --edge-brand: linear-gradient(90deg, hsl(229 42% 17%) 0, hsl(229 42% 17%) 24px, hsl(231 22% 38%) 42px, hsl(30 22% 48%) 86px, hsl(46 44% 56%) 152px, hsl(46 44% 56%) 58%, hsl(46 44% 56% / 0.40) 82%, hsl(46 44% 56% / 0.13) 100%); /* @kind other · #19203E → #4C5276 → #957A5F → #C0A95D */ --cta-background: hsl(45 40% 98%); /* @kind other · #FCFBF8 · 18,12:1 gegen #0E1120 */ --cta-background-hover: hsl(46 30% 93%); /* @kind other · #F3F0E8 · #222E62 11,28:1 auf #F3F0E8 */ --cta-hover-filter: none; /* @kind other */ --cta-foreground: 229 48% 26%; /* @kind color · #222E62 · Navy-Schrift · #222E62 12,41:1 auf #FCFBF8 */ --shadow-frame: 0 0 0 1px hsl(0 0% 100% / 0.08), 0 24px 48px -16px hsl(0 0% 0% / 0.5); /* @kind shadow · Produktrahmen dunkel */ } /* ════ SCHIENE: Navy-Kapitel und Fußzeile, in beiden Modi dunkel [ABGELEITET DS-29] ═══════ Spannt einen lokalen Token-Bereich auf wie .marken-schiene in der App. Bausteine darin lesen dieselben Namen und bekommen die Werte für Navy. Ein Produktrahmen darin trägt data-theme="dark" und bekommt damit wieder die Tokens der App. */ .schiene { color-scheme: dark; background: var(--gradient-rail); color: hsl(var(--foreground)); --background: 229 42% 17%; /* @kind color · #19203E · = --rail-start */ --foreground: 0 0% 100%; /* @kind color · #FFFFFF · 15,94:1 auf --rail-start · 12,58:1 auf --rail-end · im Goldschein mindestens 8,25:1 */ --card-foreground: 0 0% 100%; /* @kind color · #FFFFFF · 13,48:1 auf --card */ --card: 229 30% 22%; /* @kind color · #272D49 · Fläche auf Navy, mit --border als Rand */ --muted: 229 30% 22%; /* @kind color · #272D49 */ --muted-foreground: 46 16% 82%; /* @kind color · #D8D5CA · 10,85:1 auf --rail-start · 8,56:1 auf --rail-end · 9,17:1 auf --card · im Goldschein mindestens 5,62:1 */ /* Flächen der Schiene (ergänzt 19.09.2026): Ohne diese Werte blieben --secondary, --accent, --popover, --input und --brand-soft hell, und die weiße Schrift darauf fiele auf 1,14 bis 1,47 zu 1. Die Belegkarte () liegt trotzdem nie in .schiene (README §6, Fuß). */ --secondary: 229 30% 22%; /* @kind color · #272D49 · Weiß 13,48:1 · #D8D5CA 9,17:1 · #E7D8A6 9,48:1 */ --secondary-foreground: 0 0% 100%; /* @kind color · #FFFFFF · 13,48:1 auf --secondary */ --accent: 229 26% 28%; /* @kind color · #353C5A · Hover-Fläche auf Navy · Weiß 10,79:1 · #D8D5CA 7,35:1 · #E7D8A6 7,59:1 */ --accent-foreground: 0 0% 100%; /* @kind color · #FFFFFF · 10,79:1 auf --accent */ --popover: 229 34% 14%; /* @kind color · #181C30 · Weiß 16,83:1 · #D8D5CA 11,45:1 · #E7D8A6 11,84:1 */ --popover-foreground: 0 0% 100%; /* @kind color · #FFFFFF · 16,83:1 auf --popover */ --input: 230 22% 36%; /* @kind color · #484E70 · Eingaberahmen, nie Text · 1,67:1 auf --secondary */ --brand-soft: 229 30% 22%; /* @kind color · #272D49 · ruhige Ergebnisfläche auf Navy (kein Gold auf der Schiene außer dem Schein) */ --brand-soft-foreground: 0 0% 100%; /* @kind color · #FFFFFF · 13,48:1 auf --brand-soft */ --primary: 0 0% 100%; /* @kind color · #FFFFFF · Interaktion auf Navy ist hell, NIE golden (Fallstrick 25) */ --primary-foreground: 229 48% 26%; /* @kind color · #222E62 · 12,84:1 auf --primary */ --link: 46 58% 78%; /* @kind color · #E7D8A6 · blasses Gold nur als Linkschrift · 11,21:1 auf --rail-start · 8,85:1 auf --rail-end · 9,48:1 auf --card · im Goldschein mindestens 5,81:1 */ --border: 230 22% 36%; /* @kind color · #484E70 · = --on-navy-line · 1,97:1 auf --rail-start */ --ring: 46 58% 78%; /* @kind color · #E7D8A6 · = --ring-on-navy · 11,21:1 auf --rail-start · 8,85:1 auf --rail-end */ --cta-background: hsl(45 40% 98%); /* @kind other · heller Knopf #FCFBF8 · 15,40:1 gegen #19203E · 12,16:1 gegen #2A3155 */ --cta-background-hover: hsl(46 30% 93%); /* @kind other · #F3F0E8 */ --cta-hover-filter: none; /* @kind other */ --cta-foreground: 229 48% 26%; /* @kind color · #222E62 · #222E62 12,41:1 auf #FCFBF8 · #222E62 11,28:1 auf #F3F0E8 */ } /* ════ ANPASSUNGEN AN DEN UMBRUCHPUNKTEN ════════════════════════════════════════════════ */ @media (min-width: 768px) { :root { --gutter: 24px; /* @kind spacing */ --grid-cols: 8; /* @kind other */ } } @media (min-width: 1024px) { :root { --grid-cols: 12; /* @kind other · 12 Spalten wie StartseitePage.tsx:728 */ --motiv-scale: 1.25; /* @kind other */ } } @media (min-width: 1280px) { :root { --gutter: 32px; /* @kind spacing */ } } /* ════ WENIGER BEWEGUNG: weniger, nicht nichts (DS-42) ══════════════════════════════════ Eintritt wird zur reinen Überblendung, Druck und Wege entfallen, Farbübergänge bleiben. Die Erklär-Sequenz der StatusSteps steht sofort im Endzustand. */ @media (prefers-reduced-motion: reduce) { :root { --press-scale: 1; /* @kind motion */ --reveal-distance: 0px; /* @kind motion */ --dur-reveal: 200ms; /* @kind motion · nur opacity */ --stagger: 0ms; /* @kind motion */ --dur-step: 0ms; /* @kind motion */ --step-delay: 0ms; /* @kind motion */ } html { scroll-behavior: auto; } } /* ════ WENIGER TRANSPARENZ (apple-design §14, DS-46) ═══════════════════════════════════ Verstärkung, kein Ersatz: Safari (macOS, iOS) und Firefox ohne Schalter kennen diese Abfrage nicht (caniuse, 19.09.2026). Deshalb ist --nav-bg-alpha schon im Standard 0,92. */ @media (prefers-reduced-transparency: reduce) { :root { --nav-bg-alpha: 1; /* @kind other · Leiste deckend */ --nav-backdrop: none; /* @kind other · kein Weichzeichner */ } } /* ════ MEHR KONTRAST (apple-design §14; die App kennt das noch nicht) ════════════════════ */ @media (prefers-contrast: more) { :root, [data-theme="light"] { --muted-foreground: 229 20% 34%; /* @kind color · #454C68 · 8,44:1 auf --card · 8,03:1 auf --background */ --border: 44 10% 52%; /* @kind color · #918A78 · 3,44:1 auf --card · 3,27:1 auf --background */ } :root[data-theme="dark"], [data-theme="dark"] { --muted-foreground: 45 14% 80%; /* @kind color · #D3D0C5 · 11,16:1 auf --card */ --border: 229 16% 52%; /* @kind color · #717898 · 3,97:1 auf --card */ } } @media (prefers-contrast: more) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --muted-foreground: 45 14% 80%; /* @kind color · #D3D0C5 · 11,16:1 auf --card */ --border: 229 16% 52%; /* @kind color · #717898 · 3,97:1 auf --card */ } } /* ════ REFERENZ-ANWENDUNG ════════════════════════════════════════════════════════════════ Wenige globale Regeln, die aus der App übernommen sind oder die Knopf-Regel festschreiben. Alles Weitere baut die Seite selbst aus den Tokens. */ /* Grund und Schrift */ body { background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--tr-body); font-feature-settings: var(--font-features); font-optical-sizing: auto; } /* Jede Zahl gleich breit: Beträge, Prozente, Daten, Zähler (DS-51, DS-54) */ .tabular-nums { font-variant-numeric: tabular-nums; } /* Tastaturfokus überall, Spezifität 0 [APP index.css:193-196]; auf der Schiene wird --ring blasses Gold */ :where(a[href], button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible { outline: var(--focus-width) solid hsl(var(--ring)); outline-offset: var(--focus-offset); } /* Druck antwortet sofort, Rückweg 100 ms [APP DS-41, index.css:333-342]; Farbe und Fläche beim Überfahren 150 ms ease (README §3.8 Nr. 2) */ button:not(:disabled), [role="button"]:not([aria-disabled="true"]), .cta { transition: transform var(--dur-press) var(--ease-out), color var(--dur-hover) var(--ease-color), background-color var(--dur-hover) var(--ease-color), border-color var(--dur-hover) var(--ease-color), filter var(--dur-hover) var(--ease-color); } button:not(:disabled):active, [role="button"]:not([aria-disabled="true"]):active, .cta:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press-in); } /* Der Hauptknopf „Beta-Platz anfragen" (ein mailto-Link, deshalb .cta statt button). Hell: Navy-Verlauf mit #FCFBF8. Dunkel und auf der Schiene: heller Knopf mit Navy-Schrift. Radius 8, keine Pille, 48 px hoch, nie golden. */ .cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); min-height: var(--cta-h); min-width: var(--tap-min); padding: 0 var(--space-24); border-radius: var(--radius-control); background: var(--cta-background); color: hsl(var(--cta-foreground)); font-weight: var(--fw-semibold); font-size: var(--fs-body); line-height: 1; white-space: nowrap; text-align: center; text-decoration: none; } @media (hover: hover) and (pointer: fine) { .cta:hover { background: var(--cta-background-hover); filter: var(--cta-hover-filter); } }