fs
8304095dc3
Vorbereitung für die Konsolidierung. tokens.css war für Farben und Typo schon die Single Source of Truth, für Abstände aber nur mit --space-section und --container-pad besetzt — dem standen ~450 Spacing-Deklarationen mit 39 verschiedenen rem-Werten gegenüber. Neu: 14-stufige Spacing-Skala auf 4px-Raster, aus dem Ist-Bestand geclustert statt frei erfunden. Die neun häufigsten Werte der Codebase (1, 1.5, 1.25, 2.5, 0.75, 0.5, 1.75, 2, 3rem — zusammen ~60% aller Deklarationen) liegen bereits exakt auf Stufen, die Migration ist dort verlustfrei. Nach oben wird das Raster gröber (3 → 4 → 5 → 7rem), weil große Abstände das vertragen. --space-4xs (2px) ist ausdrücklich nur für optische Korrekturen an Icon-/Baseline-Nudges. Dazu --tap-min (44px, WCAG 2.5.5) und --focus-ring/--focus-offset. Der Fokus wird auf Weiß festgeschrieben: 15,9:1 auf --clr-bg gegenüber 3,2:1 für Rot, das WCAG 1.4.11 nur knapp schafft und als einziger Indikator zu schwach ist. --container-pad und --space-section verweisen jetzt auf die Skala statt eigene Werte zu führen. Entfernt: --clr-bg-light und --clr-surface-raised, beide projektweit 0× verwendet. Consumer folgen in den nächsten Commits — dieser Schritt ändert die Darstellung noch nicht. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MSsVdooFLgPA8gPFp7HwZU
112 lines
5.9 KiB
CSS
112 lines
5.9 KiB
CSS
/* ============================================================
|
||
DESIGN-TOKENS — EINZIGE Quelle für Farben, Typo, Spacing etc.
|
||
Werte extrahiert und verifiziert aus der alten Seite
|
||
(CSS bc-style + DB main_layout). Siehe CLAUDE.md.
|
||
============================================================ */
|
||
:root {
|
||
/* --- Farben --- */
|
||
--clr-accent: #e20612; /* Marken-Rot (alte DB: primary_accent) */
|
||
--clr-accent-dark: #b00510; /* Hover/Active auf Rot */
|
||
--clr-accent-rgb: 226 6 18; /* für rgb(var(--clr-accent-rgb) / α) */
|
||
--clr-bg: #222222; /* Grund-Hintergrund (mit Textur) */
|
||
--clr-bg-deep: #161616; /* abgesetzte Sektionen */
|
||
--clr-bg-footer: #000000;
|
||
--clr-bg-corporate: #383838; /* Scrollbar-Thumb */
|
||
--clr-text: #ffffff;
|
||
--clr-text-muted: #b3b3b3; /* 7.7:1 auf --clr-bg */
|
||
--clr-text-faint: #8c8c8c; /* 4.5:1 auf --clr-bg (AA) */
|
||
--clr-sepia-bg: #f3efe4; /* Timeline-Museumsrahmen (Foto-Mount) */
|
||
--clr-sepia-text: #3a372f; /* Timeline-Text auf hellem Sepia-Grund */
|
||
--clr-glass-bg: rgb(0 0 0 / 0.22); /* dunkles Glas (dunkler als der Grund) */
|
||
--clr-glass-border: rgb(255 255 255 / 0.14); /* sehr dezenter Card-Rand — Glow/Sheen tragen die Kontur */
|
||
--clr-glass-border-strong: rgb(255 255 255 / 0.45); /* Back-to-Top, position-/group-card etc.: ≥3:1 (WCAG 1.4.11) */
|
||
--clr-field-bg: rgb(255 255 255 / 0.07); /* Formularfelder: sanfte Füllfläche (etwas heller als das Glas) */
|
||
--clr-field-border: rgb(255 255 255 / 0.22); /* Feld-Rand weich — Fläche + Rand machen das Feld erkennbar */
|
||
--clr-field-border-hover: rgb(255 255 255 / 0.4); /* Feld-Hover: dezent */
|
||
--clr-error: #ff8a8a; /* Formularfehler, lesbar auf dunkel */
|
||
--clr-success: #8ce99a;
|
||
|
||
/* --- Typografie --- */
|
||
--ff-heading: 'Coolvetica', 'Arial Narrow', system-ui, sans-serif;
|
||
--ff-body: 'Abel', 'Helvetica Neue', system-ui, sans-serif;
|
||
--fs-300: 0.8125rem; /* 13px Buttons klein */
|
||
--fs-400: 0.9375rem; /* 15px Footer, Meta */
|
||
--fs-500: 1.125rem; /* 18px Navigation */
|
||
--fs-600: 1.3125rem; /* 21px Body */
|
||
--fs-650: 1.75rem; /* 28px Zwischengröße (z.B. Footer-Headings) */
|
||
--fs-675: 2.125rem; /* 34px Header-Wortmarke */
|
||
--fs-700: clamp(2rem, 1.2rem + 3.5vw, 3.125rem); /* 50px h3 */
|
||
/* Mobil-Minima bewusst hoch: Coolvetica Condensed wirkt bei gleicher
|
||
nomineller Größe deutlich kleiner als normale Schnitte. */
|
||
--fs-800: clamp(2.625rem, 1.3rem + 4.5vw, 3.75rem); /* 42–60px h2 */
|
||
--fs-900: clamp(3.5rem, 1.75rem + 5.5vw, 6rem); /* 56–96px h1 */
|
||
--lh-heading: 0.9;
|
||
--lh-body: 1.5;
|
||
--fw-regular: 400;
|
||
--fw-bold: 700;
|
||
|
||
/* --- Spacing ---
|
||
4px-Raster. EINZIGE Quelle für padding/margin/gap — keine rohen rem-Werte
|
||
mehr in den anderen CSS-Dateien. Stufen wurden aus dem Ist-Bestand
|
||
geclustert, die häufigsten Werte treffen exakt (--space-s ist mit Abstand
|
||
der meistgenutzte). Nach oben wird das Raster gröber, weil große Abstände
|
||
das vertragen. --space-4xs (2px) ist ausschließlich für optische
|
||
Korrekturen gedacht (Icon-/Baseline-Nudges), nicht für Layout. */
|
||
--space-4xs: 0.125rem; /* 2px */
|
||
--space-3xs: 0.25rem; /* 4px */
|
||
--space-2xs: 0.5rem; /* 8px */
|
||
--space-xs: 0.75rem; /* 12px */
|
||
--space-s: 1rem; /* 16px */
|
||
--space-m: 1.25rem; /* 20px */
|
||
--space-l: 1.5rem; /* 24px */
|
||
--space-xl: 1.75rem; /* 28px */
|
||
--space-2xl: 2rem; /* 32px */
|
||
--space-3xl: 2.5rem; /* 40px */
|
||
--space-4xl: 3rem; /* 48px */
|
||
--space-5xl: 4rem; /* 64px */
|
||
--space-6xl: 5rem; /* 80px */
|
||
--space-7xl: 7rem; /* 112px */
|
||
|
||
/* --- Buttons --- */
|
||
--btn-font: 1rem; /* 16px – Default (moderat) */
|
||
--btn-font-sm: var(--fs-300); /* 13px – dezente Buttons */
|
||
--btn-font-lg: var(--fs-500); /* 18px – Hero-CTAs */
|
||
--btn-pad-y: 0.625em; /* skaliert mit font-size */
|
||
--btn-pad-x: 1.25em;
|
||
--btn-line: 1.2;
|
||
|
||
/* --- Interaktion --- */
|
||
/* Mindest-Trefferfläche (WCAG 2.5.5 AAA). Controls, die optisch kleiner
|
||
bleiben sollen, strecken ihre Hit-Area per .tap-target auf diesen Wert —
|
||
gewertet wird die Trefferfläche, nicht die sichtbare Fläche. */
|
||
--tap-min: 44px;
|
||
/* Fokus immer weiß: 15,9:1 auf --clr-bg. Rot käme nur auf 3,2:1 und würde
|
||
WCAG 1.4.11 gerade so schaffen — als einziger Fokus-Indikator zu knapp. */
|
||
--focus-ring: 2px solid var(--clr-text);
|
||
--focus-offset: 3px;
|
||
|
||
/* --- Form & Tiefe --- */
|
||
--radius-btn: 8px;
|
||
--radius-card: 15px;
|
||
--shadow: 0 0 14px rgb(0 0 0 / 0.15);
|
||
--shadow-card: 0 14px 38px rgb(0 0 0 / 0.42), inset 0 1px 0 rgb(255 255 255 / 0.18); /* Hover-Lift + Top-Sheen */
|
||
|
||
/* --- Glas-Oberflächen (Frosted Glass) — siehe „Frosted Glass"-Block in components.css --- */
|
||
--glass-blur: blur(13px) saturate(1.4);
|
||
--glass-shadow: 0 6px 22px rgb(0 0 0 / 0.30), inset 0 1px 0 rgb(255 255 255 / 0.15); /* Ruhe-Glow + Top-Sheen */
|
||
|
||
/* --- Layout --- */
|
||
--container-max: 1200px;
|
||
--container-pad: var(--space-s);
|
||
--space-section: var(--space-6xl);
|
||
--header-h: 60px;
|
||
--logo-h: 72px;
|
||
|
||
/* --- Bewegung --- */
|
||
--transition: 300ms ease;
|
||
}
|
||
|
||
/* Breakpoints (Referenz — Custom Properties funktionieren nicht in Media Queries,
|
||
Werte müssen in den CSS-Dateien synchron gehalten werden):
|
||
1249px Burger-Menü | 1024px | 992px | 768px | 600px | 500px */
|