/* ============================================================ elbabe · DESIGN-TOKENS — DIE EINE QUELLE DER WAHRHEIT ------------------------------------------------------------ Alle Design-Entscheidungen (Farben, Schriften, Größen, Abstände, Radien, Schatten) leben HIER. Ändere einen Wert an dieser Stelle und er ändert sich auf der ganzen Website. Farben sind als RGB-Kanäle (z. B. "245, 183, 49") hinterlegt, damit dieselbe Farbe sowohl deckend -> rgb(var(--c-yellow-rgb)) als auch transparent -> rgba(var(--c-yellow-rgb), 0.2) aus EINER Definition kommt. Ändere den Kanal, ändert sich beides. ============================================================ */ :root { /* ======================================================== 1 · FARBEN ======================================================== */ /* ---- Marken-Farben (exakt aus dem Vereins-Logo) · als RGB-Kanäle ---- */ --c-yellow-rgb: 245, 183, 49; /* werdende Mutter / Blob */ --c-orange-rgb: 232, 104, 58; /* Herz / Baby */ --c-pink-rgb: 244, 163, 163; /* zartes Lachs-Rosa */ --c-steel-rgb: 100, 123, 138; /* Beziehungs-Schlaufen */ --c-amber-rgb: 184, 76, 14; /* dunkles Orange: Links, Bold */ --c-text-rgb: 46, 36, 24; /* Fließtext dunkel */ --c-white-rgb: 255, 255, 255; /* ---- Deckende Marken-Töne (aus den Kanälen abgeleitet) ---- */ --logo-yellow: rgb(var(--c-yellow-rgb)); --logo-orange: rgb(var(--c-orange-rgb)); --logo-pink: rgb(var(--c-pink-rgb)); --logo-steel: rgb(var(--c-steel-rgb)); --yellow: rgb(var(--c-yellow-rgb)); --orange: rgb(var(--c-orange-rgb)); --pink: rgb(var(--c-pink-rgb)); --steel: rgb(var(--c-steel-rgb)); --yellow-deep: #e8a020; /* dunkleres Gelb (Button-Verlauf) */ --amber: rgb(var(--c-amber-rgb)); /* Links, Bold-Text */ --amber-mid: #d9600a; /* mittleres Orange */ /* weiche Hintergrund-Varianten der Marken-Farben */ --yellow-soft: #fff7e4; --orange-soft: #fff1ec; --pink-soft: #fff1f1; --steel-soft: #eef2f5; /* ---- Text & Flächen ---- */ --text: rgb(var(--c-text-rgb)); /* Fließtext dunkel */ --text-light: #6b5040; /* Sekundärtext */ --bg: #fffaf6; /* warmes Off-White */ --bg-card: rgba(var(--c-white-rgb), 0.55); --footer-bg: #20303a; /* dunkler Footer */ /* ---- Dekorative Tint-Flächen (Verläufe in Hero, Verein, Modal) ---- */ --c-peach-rgb: 255, 247, 237; /* pfirsich */ --c-cream-rgb: 255, 252, 224; /* creme */ --c-blush-rgb: 255, 244, 250; /* rosé */ --c-sand-rgb: 254, 215, 170; /* sand */ --c-rose-rgb: 252, 231, 243; /* altrosa */ --c-vanilla-rgb: 254, 252, 232; /* vanille */ --c-navbg-rgb: 255, 250, 246; /* Nav-Glas */ --tile-warm-1: #fdf2ec; /* Instagram-Kachel Verlauf */ --tile-warm-2: #fff7e4; --modal-bg-1: #fffaf8; /* Modal-Box Verlauf */ --modal-bg-2: #fffceb; /* ======================================================== 2 · TYPOGRAFIE ======================================================== */ /* ---- Schrift-Familien ---- */ --font-head: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* ---- Fluide Überschriften (skalieren mit dem Viewport) ---- */ --fs-h1: clamp(2.1rem, 7vw, 3.8rem); --fs-h2: clamp(1.7rem, 5vw, 2.6rem); --fs-h3: clamp(1.15rem, 3.2vw, 1.5rem); --fs-body: clamp(1rem, 2.4vw, 1.06rem); /* globaler Fließtext */ /* fluide Sondergrößen */ --fs-hero-lead: clamp(1.02rem, 2.6vw, 1.12rem); --fs-modal-h2: clamp(1.6rem, 5vw, 2rem); --fs-prose-h2: clamp(1.3rem, 4vw, 1.7rem); /* ---- Feste Schriftgrößen · aufsteigende Leiter ---- Ändere einen Wert hier, ändert er sich überall. Weniger Stufen = einheitlicher; du kannst Stufen später zusammenlegen. */ --fs-01: 0.60rem; /* Marken-Untertitel (Nav) */ --fs-02: 0.66rem; /* Instagram-Pin-Label */ --fs-03: 0.70rem; /* Datums-Label, Vorstands-Rolle */ --fs-04: 0.72rem; /* Eyebrow, Footer-Rechtliches */ --fs-05: 0.78rem; /* Sub-Labels, Modal-H4 */ --fs-06: 0.80rem; /* Hero-Kicker, Pille */ --fs-07: 0.82rem; /* Vorstands-Name */ --fs-08: 0.85rem; /* Kleintext, Links, Footer-Text */ --fs-09: 0.88rem; /* Kachel-Text */ --fs-10: 0.90rem; /* Nav-Links, Hinweise */ --fs-11: 0.92rem; /* Karten- & Support-Text */ --fs-12: 0.95rem; /* Buttons, Modal-Text, Zuw-Punkte */ --fs-13: 0.96rem; /* Accordion-Titel */ --fs-14: 0.98rem; /* Kachel-Überschrift */ --fs-15: 1.00rem; /* Basis */ --fs-16: 1.05rem; /* Karten-Überschrift */ --fs-17: 1.10rem; /* Modal-Schließen */ --fs-18: 1.30rem; /* Marken-Name, Modal-Zitat */ --fs-19: 1.50rem; /* Flip-Initialen (Vorderseite) */ --fs-20: 1.70rem; /* Flip-Rückseite, Footer-Logo */ --fs-small: 0.86rem; /* generisches Kleintext-Alias */ /* ---- Schrift-Gewichte ---- */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; /* ---- Buchstaben-Abstände (uppercase Labels) ---- */ --ls-tight: 0.07em; --ls-wide: 0.10em; --ls-wider: 0.12em; --ls-widest: 0.16em; /* ======================================================== 3 · ABSTÄNDE / LAYOUT ======================================================== */ --maxw: 1120px; --gap: clamp(1rem, 3vw, 1.6rem); --section-y: clamp(3.2rem, 9vw, 6rem); --nav-h: 64px; /* kleine Utility-Abstände (Inhalts-Ränder) */ --space-1: 0.4rem; --space-2: 0.6rem; --space-3: 0.8rem; --space-4: 1rem; --space-5: 1.2rem; /* ======================================================== 4 · RADIEN ======================================================== */ --radius-2xs: 2px; /* Burger-Striche */ --radius-xs: 10px; /* Scrollbar-Daumen */ --radius-sm: 14px; /* Hinweis-Boxen */ --radius-md: 18px; /* Vorstands-Karten */ --radius: 22px; /* Standard-Karten */ --radius-lg: 28px; /* große Boxen */ --radius-pill: 100px; /* Buttons, Pillen */ /* ======================================================== 5 · SCHATTEN & EFFEKTE ======================================================== */ --shadow-soft: 0 14px 40px rgba(var(--c-amber-rgb), 0.10); --shadow-card: 0 8px 24px rgba(var(--c-orange-rgb), 0.12); --shadow-btn: 0 10px 26px rgba(var(--c-orange-rgb), 0.30); --shadow-modal: 0 24px 80px rgba(var(--c-amber-rgb), 0.18); --blur-glass: blur(9px); /* Nav / Karten-Glas */ --blur-soft: blur(6px); /* Verein-Box */ --blur-overlay: blur(5px); /* Modal-Overlay */ --blur-blob: blur(60px); /* Hero-Farbblobs */ /* ======================================================== 6 · ÜBERGÄNGE ======================================================== */ --t-fast: 0.2s ease; --t-med: 0.3s ease; }