fs
25f36e5a53
Auf schmalen Bildschirmen stapeln sich Container- und Kartenabstand so, dass für
den Inhalt kaum Breite bleibt. Gemessen bei 309px: Container 11,5 + Karte 32 je
Seite, das Eingabefeld hatte 220px, also 71% der Bildschirmbreite.
Kein harter Breakpoint ("ab 310px vollflächig"), sondern fluide Abstände — ein
Umbruch bei 310px sähe bei 311px wieder falsch aus. Das Muster gab es im Projekt
schon: fee-table, membership-card, legal__card und matchcenter-empty nutzen
clamp()-Abstände. Fest waren genau die drei, über die es stolperte: .form (32px),
.group-card (32px) und .group-tabs__panel (40px).
Zwei neue Token in tokens.css als einzige Quelle, --pad-card (20…32px) und
--pad-card-lg (24…40px). Die OBERGRENZEN sind die bisherigen festen Werte, am
Desktop ändert sich also nichts — nachgemessen: 32px bei 1269px Viewport, wie
vorher. Es wird nur nach unten schmaler.
Ergebnis: Feldbreite bei 309px von 71% auf 76%, bei 379px von 74% auf 80%.
Kein Überlauf auf /turnen, den Disziplinseiten und /kontakt bei 320px und 1280px.
Die vier bereits fluiden Karten behalten ihre eigenen clamp()-Werte, damit ihr
Desktop-Bild unangetastet bleibt; sie in die Token einzusammeln ist eine
Aufräumung für später.
VORBESTEHEND und nicht von dieser Änderung verursacht (per git stash gegengeprüft,
mit und ohne Änderung identisch): /mitglied-werden läuft bei 320px um 12px über,
/turnen bei 300px um 13px. Die 320px sind eine echte Gerätebreite (iPhone SE),
das gehört als Nächstes angeschaut.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
184 lines
12 KiB
CSS
184 lines
12 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-accent-hsl: 356.7 94.8% 45.5%; /* dasselbe Rot als H S L */
|
||
--clr-accent-h: 356.7; /* nur der Farbton — die Dateiablage (/dateien)
|
||
leitet daraus ihre Flächen ab, siehe dateien.css */
|
||
/* Akzentfarben einzelner Werbe-Banner (Sponsor-CI statt Vereins-Rot).
|
||
Sie stehen hier und nicht in data/banners.json, weil ein Hex-Wert aus der JSON
|
||
nur per Inline-Style in die Seite käme — und den verwirft die CSP
|
||
(default-src 'self', kein style-src). Die JSON nennt nur den Namen
|
||
("accent": "breadcrumb"), components.css bildet ihn auf dieses Token ab.
|
||
Neuer Sponsor mit eigener CI = eine Zeile hier plus eine Klasse dort. */
|
||
--clr-banner-accent-breadcrumb: #6cbbbc;
|
||
|
||
--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-logo-card: #ffffff; /* Partner-Logowall: Farb-Logos brauchen neutralen weißen Grund */
|
||
--clr-photo-frame: #faf9f6; /* Polaroid-Rahmen (split--polaroid): fast reinweiß, minimal warm */
|
||
--clr-tape: rgb(255 250 235 / 0.4); /* Klebestreifen auf Polaroids: milchig, leicht vergilbt */
|
||
--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-bg-solid: #313131; /* dieselbe Fläche, aber OPAK (--clr-field-bg über --clr-bg gerechnet) —
|
||
nötig für den Autofill-Fix (box-shadow inset kann keine Transparenz
|
||
über die native Browser-Füllung legen, siehe components.css) */
|
||
--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-lightbox-bg: rgb(0 0 0 / 0.93); /* Bild-Großansicht (lightbox): fast schwarz, damit das Foto
|
||
allein wirkt und der Seitenhintergrund nicht durchdrückt */
|
||
--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;
|
||
--ff-serif: 'PT Serif', Georgia, 'Times New Roman', serif; /* nur Stadionzeitung-Vorwort-Fließtext */
|
||
--ff-signature: 'Mr Dafoe', cursive; /* nur Unterschrift des Vorwort-Unterzeichners (Stadionzeitung) */
|
||
--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-heading: 0.012em; /* Coolvetica-Überschriften unter ~40px: nur ein Hauch Luft
|
||
zwischen den Versalien (0,4px bei 34px). Der Schnitt ist
|
||
condensed, ohne Sperrung kleben die Buchstaben — mit
|
||
--ls-caps (0.08em) wirkt eine Überschrift dagegen
|
||
auseinandergezogen. Nicht für kleine Labels, dafür
|
||
--ls-caps/--ls-wide. */
|
||
--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. */
|
||
/* Karten-Innenabstände. Fluid statt fest, damit auf schmalen Handys nicht ein
|
||
Viertel der Bildschirmbreite in gestapelten Innenabständen verschwindet
|
||
(gemessen bei 309px: Container 11,5 + Karte 32 je Seite → nur 71% der Breite
|
||
blieben für das Eingabefeld). Ein harter Breakpoint bei ~310px wäre die
|
||
Alternative gewesen, sieht aber bei 311px wieder falsch aus.
|
||
Die OBERGRENZEN entsprechen genau den bisherigen festen Werten, am Desktop
|
||
ändert sich also nichts — es wird nur nach unten schmaler.
|
||
Vier Karten (fee-table, membership-card, legal__card, matchcenter-empty)
|
||
hatten diese clamp()-Formeln schon einzeln stehen; sie behalten ihre eigenen
|
||
Werte, damit ihr Desktop-Bild unangetastet bleibt. Sie hier einzusammeln ist
|
||
eine Aufräumung für später. */
|
||
--pad-card: clamp(var(--space-m), var(--space-s) + 1.5vw, var(--space-2xl)); /* 20…32px */
|
||
--pad-card-lg: clamp(var(--space-l), var(--space-s) + 2.5vw, var(--space-3xl)); /* 24…40px */
|
||
|
||
--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;
|
||
--radius-photo: 4px; /* Polaroid-/Fotorahmen (split--polaroid): fast eckig wie ein echter Abzug */
|
||
--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; /* Mindesthöhe der Kopfleiste (.site-header__inner) */
|
||
--logo-h: 72px; /* Logo — größer als --header-h, bestimmt also faktisch die Höhe */
|
||
--header-top: 20px; /* Versatz der Leiste von oben (.site-header) */
|
||
/* Was die Kopfleiste vom Seitenanfang wegnimmt. NICHT --header-h dafür
|
||
nehmen: die Leiste ist wegen des Logos 72px hoch, nicht 60px, und sitzt
|
||
zusätzlich 20px versetzt — wer mit --header-h rechnet, landet 32px zu
|
||
hoch und schiebt seinen Inhalt unter das Logo. Abgeleitet statt fest,
|
||
damit es nicht auseinanderläuft, wenn Logo oder Versatz sich ändern. */
|
||
--header-space: calc(var(--header-top) + var(--logo-h));
|
||
|
||
/* --- 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 */
|