/* ============================================================ 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 */