/* ========================================================= LUKEN — Recording, Mixing & Mastering Vanilla CSS, keine Abhängigkeiten. FARBEN Zwei Ebenen, die sich unabhängig umschalten lassen: data-theme = "dark" | "light" (Grundhelligkeit) data-accent = "mono" | "brass" | "ice" | "violet" Beides steckt der Umschalter oben rechts auf . ========================================================= */ /* ---------------- Grundton dunkel ---------------- */ :root{ --bg:#09090b; --bg2:#0d0d10; --surface:#121215; --surface2:#18181d; --line:#212127; --line2:#33333d; --text:#f2f2f0; --muted:#9a9aa2; --dim:#7d7d87; --navbg:rgba(9,9,11,.86); --danger:#ff7b7e; --grain:.42; --shadow:0 24px 56px rgba(0,0,0,.55); --r:12px; --r-sm:8px; --ease:cubic-bezier(.2,.9,.3,1); --pad:clamp(20px,5vw,80px); --secpad:clamp(58px,7.5vw,104px); /* Innenabstand der Abschnitte */ /* Höhe der Kopfleiste. Muss auf ALLEN Seiten gleich sein, sonst sitzt das Logo je nach Seite ein paar Pixel höher oder tiefer. 78 px ist die Höhe, die die Startseite von sich aus hat. */ --navh:78px; --maxw:1280px; /* Die eine Kante, an der ALLES ausgerichtet ist. Abschnitte mit eigenem Hintergrund (.sec--alt, Footer, CTA) laufen über die volle Breite; ihr Inhalt muss deshalb um die Seitenränder schmaler sein, sonst steht er weiter links als der Inhalt der normalen Abschnitte. */ --inner:calc(var(--maxw) - var(--pad) * 2); } /* ---------------- Grundton hell ---------------- Warmes Papierweiß statt Reinweiß — wirkt weicher und lässt die Akzentfarben ruhiger aussehen. */ :root[data-theme="light"]{ --bg:#faf9f7; --bg2:#f2f1ed; --surface:#ffffff; --surface2:#f7f6f3; --line:#e6e4df; --line2:#cbc8c0; --text:#121116; --muted:#5c5a63; --dim:#6d6b74; --navbg:rgba(250,249,247,.9); --danger:#b3242a; --grain:.22; --shadow:0 20px 46px rgba(28,24,20,.11); } /* ---------------- Paletten ---------------- Aktiv ist "brass" (Messing) — festgelegt im