/* ══════════════════════════════════════════════════════════════════════════ LUFTRAUMWERK® · DESIGNSYSTEM · 00 TOKENS Angelegt 25.09.2026 · Schritt 2 des Neubaus WOFÜR DAS GILT — DIE ROLLEN Hauptseite ist das STUDIO (die Bühne, ab 900 px Breite). Die klassische Seite „Lass es sichtbar werden" ist die MOBILFASSUNG und zusätzlich unter /klassisch.html erreichbar. Beide teilen sich diese Werte — das Studio nannte sie bisher nur anders (--acid statt --acc, --dark statt --bg). Beide Namen gelten weiter. WAS DAS HIER IST Die eine Stelle, an der Farben, Schriften, Abstände und Zeiten stehen. Heute liegen dieselben Werte an vier Stellen unter vier Namen — die Acid- Farbe heißt gleichzeitig --acc, --lime, --lwk-acid und --lws-acid und steht zusätzlich 25× hart als #E8FF00 im Code. Eine Änderung hieß bisher: in zwanzig Dateien suchen. EISERNE REGEL BEIM ANLEGEN Kein einziger Wert wurde verändert, gerundet oder „vereinheitlicht". Wo zwei Stellen leicht unterschiedliche Töne hatten (#f5f5f5 gegen #E4E4E4), bleiben BEIDE erhalten. Das Designsystem ordnet, es gestaltet nicht um. Optisch darf sich nichts ändern — das ist der Prüfstein. AUFBAU 1. Die Marke — die Werte, die Luftraumwerk ausmachen 2. Flächen & Text — Hintergründe, Schrift, Linien 3. Schrift — Familien und Stufen 4. Bewegung — Zeiten und Beschleunigung 5. Maße — Kopfhöhen, Ränder, Radien 6. Altnamen — zeigen auf die neuen Werte, damit nichts bricht ══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── 1 · DIE MARKE ────────────────────────────────────────────────────── */ --lrw-acid: #E8FF00; /* Luftraumwerk Acid Yellow */ --lrw-acid-leise: rgba(232,255,0,.1); /* Flächen, Hinterlegungen */ --lrw-acid-schein: rgba(232,255,0,.28); /* Leuchten, Schatten */ /* ── 2 · FLÄCHEN & TEXT ───────────────────────────────────────────────── */ --lrw-dunkel: #0a0a0a; /* Grundfläche der Seite */ --lrw-dunkel-2: #0c0c0c; /* zweite Ebene, Abstufung */ --lrw-hell: #f5f5f0; /* helle Abteilung */ --lrw-text: #f5f5f5; /* Fließtext auf dunkel */ --lrw-text-2: #E4E4E4; /* Kopf/Fuß — bewusst anders */ --lrw-text-leise: #979797; /* Nebentext */ --lrw-text-leise-2:#9A9A96; /* Kopf/Fuß — bewusst anders */ --lrw-text-tief: #292929; /* sehr zurückgenommen */ --lrw-linie: #1a1a1a; /* Trennlinien dunkel */ --lrw-linie-hell: #292929; /* Trennlinien im Hover */ --lrw-linie-glas: rgba(255,255,255,.14); /* Linien auf Glas */ --lrw-linie-buehne:rgba(255,255,255,.16); /* Linien im Studio */ --lrw-glas: rgba(10,10,10,.40); /* Glasfläche über der Bühne */ /* ── 3 · SCHRIFT ──────────────────────────────────────────────────────── */ --lrw-ff: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Die Kopfzeilen-Variante liess BlinkMacSystemFont schon immer weg. Der Unterschied ist folgenlos, aber er bleibt erhalten - das System ordnet, es gleicht nicht an. */ --lrw-ff-kopf: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --lrw-ff-eng: 'Antonio', 'Manrope', system-ui, sans-serif; /* Hero-Schlagzeile */ --lrw-ff-hand: 'Rock Salt', cursive; /* nur Ocean-Zero-Logo */ --lrw-ff-marke:'Korataki', 'Manrope', system-ui, sans-serif; /* Wortmarke */ --lrw-ff-notiz:'Caveat', cursive; /* Handschrift im Studio */ /* Das Studio hat eine kürzere Ersatzkette als die klassische Seite. Der Unterschied ist folgenlos, aber er bleibt — angleichen wäre eine Designänderung. */ --lrw-ff-buehne:'Manrope',system-ui,-apple-system,sans-serif; /* ── 4 · BEWEGUNG ─────────────────────────────────────────────────────── */ --lrw-ease: cubic-bezier(0.16,1,0.3,1); /* Seite: weich auslaufend */ --lrw-ease-kopf: cubic-bezier(.22,1,.36,1); /* Kopfleiste: etwas straffer */ --lrw-blende: 1100ms; /* Übergang zwischen zwei Stationen */ /* ── 5 · MASSE ────────────────────────────────────────────────────────── */ --lrw-kopf-hoch: 84px; /* Platzreserve ohne Vollbild-Hero */ --lrw-kopf-flach: 58px; /* schlanke Leiste */ --lrw-rand: clamp(16px,2.4vw,40px); /* Fensterrand der Kopfleiste */ --lrw-oben: 16px; /* Abstand Leiste nach oben */ } /* ══════════════════════════════════════════════════════════════════════════ 6 · ALTNAMEN Die bisherigen Variablennamen bleiben gültig und zeigen auf dieselben Werte. Dadurch läuft jede bestehende Datei unverändert weiter, während Neues nur noch die --lrw-Namen benutzt. Nichts muss auf einmal umgestellt werden — und nichts kann dabei kaputtgehen. ══════════════════════════════════════════════════════════════════════════ */ :root{ /* aus index.html */ --bg: var(--lrw-dunkel); --bg-2: var(--lrw-dunkel-2); --acc: var(--lrw-acid); --acc-dim: var(--lrw-acid-leise); --acc-glow: var(--lrw-acid-schein); --lime: var(--lrw-acid); --txt: var(--lrw-text); --txt-2: var(--lrw-text-leise); --txt-3: var(--lrw-text-tief); --brd: var(--lrw-linie); --brd-h: var(--lrw-linie-hell); --ease: var(--lrw-ease); --ff: var(--lrw-ff); --fft: var(--lrw-ff-kopf); /* aus assets/lw-struktur.css */ --lws-dark: var(--lrw-dunkel); --lws-line: var(--lrw-linie-glas); --lws-text: var(--lrw-text-2); --lws-muted: var(--lrw-text-leise-2); --lws-acid: var(--lrw-acid); --lws-kopf: var(--lrw-kopf-flach); /* aus studio/index.html — die Bühne, also die Hauptseite */ --acid: var(--lrw-acid); --dark: var(--lrw-dunkel); --light: var(--lrw-text); --glass: var(--lrw-glas); --line: var(--lrw-linie-buehne); --t-fade:var(--lrw-blende); /* aus assets/lw-kopf.css */ --lwk-acid: var(--lrw-acid); --lwk-ease: var(--lrw-ease-kopf); --lwk-rand: var(--lrw-rand); --lwk-oben: var(--lrw-oben); --lwk-kopf: var(--lrw-kopf-hoch); }