60 lines
2.7 KiB
CSS
60 lines
2.7 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-glass-bg: rgb(255 255 255 / 0.11);
|
||
--clr-glass-border: rgb(255 255 255 / 0.22);
|
||
--clr-glass-border-strong: rgb(255 255 255 / 0.4); /* Formularfelder: ≥3:1 Kontrast (WCAG 1.4.11) */
|
||
--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-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;
|
||
|
||
/* --- Form & Tiefe --- */
|
||
--radius-btn: 8px;
|
||
--radius-card: 15px;
|
||
--shadow: 0 0 14px rgb(0 0 0 / 0.15);
|
||
--shadow-card: 0 7px 29px rgb(0 0 0 / 0.33);
|
||
|
||
/* --- Layout --- */
|
||
--container-max: 1200px;
|
||
--container-pad: 1rem;
|
||
--space-section: 5rem;
|
||
--header-h: 60px;
|
||
--logo-h: 97px;
|
||
|
||
/* --- 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 */
|