fs
8437f00e06
Formulare (form-field.php, 3 Form-Wrapper, components.css, form.js): - Floating Labels (Label im Feld, wandert bei Fokus/Inhalt hoch; select/date dauerhaft oben) via :has() + placeholder=" "-Trick. Echtes <label> bleibt im DOM (kein Placeholder-als-Label). - Globale "Pflichtfelder mit *"-Hinweiszeile entfernt; Stern bleibt am Feld, pro Feld als visually-hidden "(Pflichtfeld)" für Screenreader erklärt. - Markenroter Fokus-Ring statt Weiß. - Felder als sanfter Füll-Look: weichere Ränder (eigene --clr-field-*-Tokens), Erkennbarkeit über Fläche + Rand (WCAG 1.4.11 erfüllt). - form.js: Submit-Button-Text wird je Formular korrekt wiederhergestellt. Glas-Look global (tokens.css, components.css): - Frosted Glass zentral: --glass-blur + --glass-shadow (Glow + Top-Sheen), eine Regel statt 28× wiederholt; Leaf-Karten mit Blur, Container nur Glow (kein Doppel-Frost). @supports-Fallback. - Dunkleres Glas (--clr-glass-bg auf Schwarz-Tint), dezenter Card-Rand. Hero-Fade (components.css): - Unterer Auslauf nicht mehr mit grauem --clr-bg zugedeckt, sondern .hero__media per mask-image ausgeblendet → echter dunkler, texturierter Hintergrund scheint durch (schwärzer, durchsichtig, kein graues Band). Abdunklung auf reines Schwarz. Gilt für alle drei Hero-Varianten. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HGzc6GhWhmLJt1jC2q1SRZ
79 lines
4.2 KiB
CSS
79 lines
4.2 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;
|
||
--clr-bg-light: #f5f5f5;
|
||
--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 */
|
||
--fs-800: clamp(2.25rem, 1.3rem + 4.5vw, 3.75rem); /* 60px h2 */
|
||
--fs-900: clamp(3rem, 1.75rem + 5.5vw, 6rem); /* 96px h1 */
|
||
--lh-heading: 0.9;
|
||
--lh-body: 1.5;
|
||
--fw-regular: 400;
|
||
--fw-bold: 700;
|
||
|
||
/* --- 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;
|
||
|
||
/* --- 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: 1rem;
|
||
--space-section: 5rem;
|
||
--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 */
|