/* ============================================================================ UNSIGNED — style.css ---------------------------------------------------------------------------- Aufbau dieser Datei: 1. Theme-Variablen (Dark/Light über CSS Custom Properties) 2. Reset & Basis 3. Wiederverwendbares (Container, Buttons, Stern, Section-Köpfe) 4. Navbar 5. Hero 6. Drop of the Week 7. Roster-Vorschau 8. Musik-Vorschau 9. CTA-Band 10. Footer 11. Reveal-Animation & Reduced Motion 12. Responsive (mobile-first wird ergänzt mit Breakpoints) ========================================================================== */ /* ============================================================================ 1. THEME-VARIABLEN ---------------------------------------------------------------------------- Alle Farben/Abstände als Custom Properties. Umschalten passiert allein über [data-theme="..."] am . So bleibt das Rebranding trivial: nur hier oben Werte ändern, der Rest zieht automatisch nach. ========================================================================== */ :root { /* Abstände (konsistentes Raster) */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 7rem; /* Layout */ --container: 1200px; --radius: 14px; --radius-lg: 22px; /* Schriften */ --font-head: 'Space Grotesk', sans-serif; --font-body: 'Manrope', sans-serif; /* Navbar-Höhe (für Scroll-Offset etc.) */ --nav-h: 76px; /* Übergänge */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --t-fast: 0.25s var(--ease); --t-med: 0.45s var(--ease); } /* ----- DARK (Default) ----- */ [data-theme="dark"] { --bg: #0a0a0a; /* Haupt-Hintergrund */ --bg-soft: #131313; /* leicht abgesetzte Flächen (Cards) */ --bg-elev: #1a1a1a; /* noch eine Stufe höher */ --line: #262626; /* Rahmen/Trennlinien */ --text: #f5f5f5; /* Haupttext */ --text-soft: #a1a1a1; /* Sekundärtext */ --text-mute: #6b6b6b; /* sehr dezent */ --invert: #f5f5f5; /* "Kontrastfarbe" für Buttons -> hier hell */ --invert-text: #0a0a0a; /* Text auf der Kontrastfarbe */ --logo-dark: block; /* weißes Logo sichtbar */ --logo-light: none; /* schwarzes Logo versteckt */ --glow: rgba(255,255,255,0.05); /* weicher Hintergrund-Glow (Dark: heller Schein) */ --shadow: none; /* Dark hebt Flächen über Kontrast ab, keine Schatten */ } /* ----- LIGHT ----- */ [data-theme="light"] { --bg: #f4f3f0; /* gedämpftes, leicht warmes Off-White — wie gutes Papier */ --bg-soft: #faf9f7; /* Cards minimal heller als der Grund -> heben sich ab */ --bg-elev: #ffffff; /* höchste Ebene, fast weiß */ --line: rgba(0,0,0,0.06); /* hauchdünne Borders statt harter Linien */ --text: #161616; /* near-black statt pur schwarz */ --text-soft: #565452; /* warmer Mittelgrau */ --text-mute: #8a8884; --invert: #161616; /* dunkle Buttons */ --invert-text: #f4f3f0; --logo-dark: none; --logo-light: block; --glow: rgba(15,15,20,0.03); /* Light: zarter grauer Schein für Tiefe */ --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 10px 30px rgba(0,0,0,0.05); /* sehr weiche Tiefe */ } /* ============================================================================ 2. RESET & BASIS ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { /* Lenis übernimmt smooth scroll per JS; nativ ausschalten, damit es sich nicht doppelt. Bei reduced motion greift wieder der Browser. */ scroll-behavior: auto; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; /* Theme-Wechsel weich animieren */ transition: background var(--t-med), color var(--t-med); overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; } /* Sichtbarer Fokus-Rahmen für Tastatur-Navigation (Accessibility) */ :focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; } /* ============================================================================ 3. WIEDERVERWENDBARES ========================================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-md); } .section { padding-block: var(--space-xl); } /* Nur für Screenreader sichtbar (visuell ausgeblendet, bleibt zugänglich) */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Logo-Sichtbarkeit per Theme-Variable (kein JS, kein Flackern) */ .logo--dark { display: var(--logo-dark); } .logo--light { display: var(--logo-light); } /* ----- Buttons ----- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.6rem; font-family: var(--font-head); font-weight: 500; font-size: 0.95rem; border-radius: 100px; border: 1px solid transparent; transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } /* gefüllt: Kontrastfarbe (hell auf dunkel / dunkel auf hell) */ .btn--primary { background: var(--invert); color: var(--invert-text); } .btn--primary:hover { opacity: 0.88; } /* nur Umriss (background explizit transparent -> als