fs
3fa521eaf1
Zweiter Teil der Konsolidierung. Vorher standen 31 font-size-Werte außerhalb der Skala — beim Durchgehen stellte sich heraus, dass 20 davon gar keine Textgrößen sind: der icon()-Helper rendert 1em, also steuerte font-size dort die Icon-Größe. Dafür gibt es jetzt eine eigene, kleine Skala (--icon-s/m/l/xl in rem, --icon-inline-sm/--icon-inline/--icon-inline-lg in em für Icons, die im Textfluss mitwachsen sollen). Elf Ad-hoc-Werte fallen damit auf sieben Stufen. h4–h6 laufen nicht mehr über Coolvetica. Sie lagen mit 26px und 21px unter der --fs-650-Grenze aus CLAUDE.md, ab der der Condensed-Schnitt in Uppercase unleserlich wird — die Regel war also nur dokumentiert, nicht durchsetzbar. Jetzt tragen h1–h3 Coolvetica (alle über der Grenze) und h4–h6 Abel mit Sperrung. Bezeichnend: das einzige <h4> im Markup hatte sich genau dieses Muster bereits von Hand gebaut. Die Basisregel liefert es jetzt, die Komponente gibt ihre drei Duplikat-Deklarationen ab — sichtbar ändert sich dadurch nichts. Neue Stufen schließen die Lücken: --fs-550 (fluider Lead), --fs-690 (Karten- Überschrift) und --fs-1000 (Display-Hero). Vier fast deckungsgleiche clamp()- Rampen für Karten-Überschriften (bento__heading, bento__stat-value, group-card__name, team-card__name) laufen jetzt über --fs-690; team-card__name wächst dabei am Desktop um ~5px, die anderen drei bleiben im 1px-Bereich. Die Wappen-Initialen im Matchcenter hingen an zwei Mini-Schriftgrößen (10,4 und 11,2px) unterhalb der Skala. Sie sind in Wahrheit ~0,4 × Kreisdurchmesser, folgen jetzt also --crest-size statt einer eigenen font-size. Nebenbei fallen drei redundante Doppel-Selektoren weg: .crest--initials trägt immer auch .crest. Ebenfalls tokenisiert: 27 letter-spacing-Werte mit elf verschiedenen Zahlen auf vier Stufen (--ls-tight/caps/wide/wider), maximale Abweichung 0,02em. Danach steht kein font-size- und kein letter-spacing-Wert mehr außerhalb von tokens.css. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MSsVdooFLgPA8gPFp7HwZU
135 lines
7.3 KiB
CSS
135 lines
7.3 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-550: clamp(1.25rem, 0.95rem + 1.3vw, 1.75rem); /* 20–28px fluider Lead/Tagline */
|
||
--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-690: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); /* 32–44px Karten-/Kachel-Überschrift */
|
||
--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 */
|
||
--fs-1000: clamp(3.5rem, 2rem + 7.5vw, 7.5rem); /* 56–120px Display-Hero (nur Startseite) */
|
||
--fs-deco: 9rem; /* dekorative Ziffer hinter Bento-Kacheln */
|
||
--lh-heading: 0.9;
|
||
--lh-body: 1.5;
|
||
--fw-regular: 400;
|
||
--fw-bold: 700;
|
||
/* Sperrung. Coolvetica ist Condensed und hat nur einen Schnitt: unter 28px
|
||
wird es in Uppercase unleserlich (siehe CLAUDE.md). Kleinere Auszeichnungen
|
||
laufen deshalb über --ff-body + uppercase + --ls-caps statt --ff-heading. */
|
||
--ls-tight: 0.03em; /* dezente Straffung in Fließtext-Größen */
|
||
--ls-caps: 0.08em; /* Standard für gesperrte Uppercase-Auszeichnungen */
|
||
--ls-wide: 0.12em; /* kleine Labels, Meta-Zeilen */
|
||
--ls-wider: 0.18em; /* sehr kleine Kicker/Overlines */
|
||
|
||
/* --- Icon-Größen ---
|
||
Der icon()-Helper rendert 1em, die font-size steuert also die Icon-Größe.
|
||
rem-Stufen für eigenständige Icons, em-Stufen für Icons, die im Textfluss
|
||
mit ihrer Zeile mitwachsen sollen (Chevrons, Pfeile). */
|
||
--icon-s: 1rem; /* 16px */
|
||
--icon-m: 1.25rem; /* 20px */
|
||
--icon-l: 1.5rem; /* 24px */
|
||
--icon-xl: 2.5rem; /* 40px */
|
||
--icon-inline-sm: 0.75em;
|
||
--icon-inline: 0.9em;
|
||
--icon-inline-lg: 1.25em;
|
||
|
||
/* --- 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 */
|