/* ============================================================ DOKU FLUX - Design Tokens Quelle: Figma "DOKU FLUX" (26gcadfrvSjagHfKh8DPuS), Stand 2026-07-04 Kuratiert aus Figma Variables + Komponenten-Inspektion. Alle Werte 1:1 aus dem File gelesen (Radien, Schatten, Focus-Ringe direkt aus den Komponenten Button/Input/Cards/ExtractionResults). Verwendung: VOR allen anderen Stylesheets einbinden. Bestehende Hardcodes schrittweise durch var(--*) ersetzen - nicht big-bang. ============================================================ */ :root { /* ---- Farbe: Marke -------------------------------------- */ --color-brand: #0e7490; /* Prüfstand: Petrol - Primär-CTA, Links, Akzente */ --color-brand-hover: #0b5f78; /* Petrol dunkler */ --color-brand-light: #14859e; /* Petrol heller - sekundäre Akzente */ --color-brand-tint: #e2f1f4; /* Petrol-Tint - Badge-/Info-Hintergründe */ --color-brand-tint-2: #f2f8f9; /* sehr helle Akzentfläche (kühl) */ /* ---- Farbe: Text ---------------------------------------- */ --color-ink: #15181d; /* Headlines (Graphit) */ --color-body: #3c424b; /* Fließtext (kühl) */ --color-muted: #5b6770; /* Sekundärtext - WCAG (5.8:1), NICHT heller aufhellen */ --color-subtle: #5f6b7a; /* Captions/Labels - WCAG-Fix (5.4:1), NICHT zurück auf #9ca3af */ --color-text-on-dark: #ffffff; --color-text-on-dark-muted: rgba(255, 255, 255, 0.78); /* ---- Farbe: Flächen ------------------------------------- */ --color-surface: #f4f6f7; /* Seitenhintergrund (kühl) */ --color-surface-alt: #ffffff; /* Karten auf Surface (weiß, hebt sich ab) */ --color-white: #ffffff; --color-navy: #1b1f26; /* Graphit - dunkle Sektionen, Footer, Ergebnis-Panel */ --color-navy-deep: #15181d; /* Graphit tiefer - Verlaufs-Partner */ --color-navy-deeper: #101318; /* Graphit am tiefsten */ /* ---- Farbe: Linien -------------------------------------- */ --color-border: #dbe0e3; /* Standard-Rahmen (kühl, Haarlinie) */ --color-border-strong: #c6cdd1; /* betonte Rahmen, Inputs */ --color-border-cool: #dbe0e3; /* Rahmen auf weißen App-Flächen */ /* ---- Farbe: Semantik ------------------------------------ */ --color-success: #15803d; /* WCAG-Fix (5.0:1), NICHT zurück auf #16a34a */ --color-success-bg: #f0fdf4; --color-warning: #d97706; /* color/orange/44 */ --color-warning-text: #92400e; /* Text auf warning-bg */ --color-warning-bg: #fef3c7; --color-info-teal: #0f766e; /* cyan/26 - Konfidenz-/Zweit-Akzent */ --color-info-teal-bg: rgba(15, 118, 110, 0.08); --color-error: #b91c1c; /* nicht in Variables gepflegt - aus Upload-Error-Screen; bei Abweichung in Figma nachziehen */ --color-error-bg: #fef2f2; /* ---- Typografie ------------------------------------------ */ --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* --font-mono lebt in main.css - dort bereits definiert und referenziert, keine zweite Deklaration hier (würde je nach Ladereihenfolge kollidieren). */ /* Skala lt. Findings-Ziel: 12/14/16/18/20/24/32/40 + Display. 13/15/17/22 existieren noch im Design (nach Sub-Pixel-Bereinigung); bei Neubau immer die Kernskala nutzen. */ --text-xs: 12px; --leading-xs: 18px; /* Labels, Captions - nie für Fließtext */ --text-sm: 14px; --leading-sm: 22px; --text-base: 16px; --leading-base: 26px; /* Fließtext-Minimum */ --text-lg: 18px; --leading-lg: 28px; --text-xl: 20px; --leading-xl: 30px; --text-2xl: 24px; --leading-2xl: 32px; --text-3xl: 32px; --leading-3xl: 40px; --text-4xl: 40px; --leading-4xl: 46px; /* Section-Headlines */ --text-display: 52px; --leading-display: 57px; /* Sub-Hero */ --text-display-xl: 66px; --leading-display-xl: 69px; /* Hero; Letter-Spacing -0.03em */ --tracking-display: -0.03em; --tracking-tight: -0.02em; --tracking-caps: 0.06em; /* Eyebrow-Labels, VERSALIEN */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 700; /* stärkstes selbst gehostetes IBM-Plex-Gewicht */ /* ---- Spacing (4er-Raster) -------------------------------- --space-7/8/9 leben in main.css (bereits dort mit abweichender Skala definiert und referenziert) - keine zweite Deklaration hier. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-section: 96px; /* vertikaler Abstand zwischen Marketing-Sektionen */ /* ---- Layout ----------------------------------------------- */ --container: 1200px; /* Screens sind auf 1200 gebaut */ --container-content: 920px; /* Textlastige Sektionen */ --container-narrow: 680px; /* Intros, FAQ, Legal-Seiten */ /* ---- Radien (aus Komponenten gelesen) --------------------- --radius-md/lg/xl leben in main.css (bereits dort mit abweichender Skala definiert und referenziert) - keine zweite Deklaration hier. */ --radius-sm: 3px; /* Prüfstand: flach/technisch - Pricing-Cards, kleine Chips */ --radius-2xl: 6px; /* große Feature-Cards (Prüfstand: kantig) */ --radius-pill: 999px; /* Pills, Toggles, App-Nav-Buttons */ /* ---- Schatten (aus Komponenten gelesen) -------------------- */ --shadow-card-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06); --shadow-card: 0 2px 4px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.08); --shadow-table: 0 6px 20px rgba(14,116,144,0.10); /* ExtractionResults (Petrol) */ --shadow-cta: 0 3px 10px rgba(14,116,144,0.28); /* Primär-CTA Hover-Glow (Petrol, flacher) */ /* ---- Focus (aus Komponenten gelesen) ------------------------ Buttons: 3px weiß + 6px brand · Inputs/Pills: 2px weiß + 4px brand. Als box-shadow, damit der Radius mitgeht. -------------------- */ --focus-ring: 0 0 0 3px var(--color-white), 0 0 0 6px var(--color-brand); --focus-ring-input: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-brand); /* ---- Motion ------------------------------------------------ */ --transition-fast: 150ms ease; --transition-base: 250ms ease; } /* Basis-Anwendung - bewusst minimal, kollidiert nicht mit Bestand */ :focus-visible { outline: none; box-shadow: var(--focus-ring); } input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: var(--focus-ring-input); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }