/* flug.css — der Raum weicht, das All kommt (js/flug.js). --------------------------------------------------------------------------- Eine einzige Zahl steuert alles: `--flug-stand` läuft von 0 (Raum) bis 1 (All) und wird Bild für Bild von js/flug.js auf das -Element geschrieben. Alles hier hängt daran oder am Schalter `html[data-flug="an"]`, der genau dort umschlägt, wo das All den Raum überwiegt — siehe die Begründung im Kopf von js/flug.js. WARUM z-index: -1 UND NICHT MEHR Ein fest stehendes Element mit negativem z-index wird nach dem Seitenhintergrund, aber vor allem Inhalt gezeichnet. Der Himmel deckt damit den Hintergrund der Seite ab, ohne dass eine einzige vorhandene z-index-Angabe angefasst werden muss. Bei jedem anderen Wert hätte der Inhalt eigene Stapelangaben gebraucht — und davon stehen in dieser Seite gut zwanzig. WAS SOLIDE BLEIBT Die drei Plakate (.bs-buehne, .wt-buehne, .st-buehne) behalten ihren Grund. Ein Plakat, das solide im Sternenfeld hängt, sieht aus wie ein Plakat im All; ein durchscheinendes sieht aus wie ein Fehler. Durchlässig werden nur die ruhigen Flächen daneben. LESBARKEIT Backstage ist eine helle Papierseite mit schwarzer Schrift. Ohne Gegenmaßnahme stünde dort schwarzer Text vor schwarzem All. Zwei Griffe dagegen: die Schrift wird hell, und sie bekommt einen weichen Schlagschatten. Der Schatten ist nicht Zierde — er hält den Text auch dort lesbar, wo gerade ein heller Stern durchfliegt. */ /* ---------- Die zwei Flugfarben je Modus ---------- Aus den Modus-Tokens, damit sie mitwandern, wenn dort etwas geändert wird. */ html[data-modus="backstage"] { --flug-eins: #d71920; --flug-zwei: #f5b700; } html[data-modus="welttournee"] { --flug-eins: #ff5b1a; --flug-zwei: #ffb52e; } html[data-modus="stumpi"] { --flug-eins: #ffd400; --flug-zwei: #e10600; } /* ---------- Der Himmel ---------- */ .flug-himmel { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: var(--flug-stand, 0); } /* Steht der Flug ganz still, wird die Fläche ausgehängt: kein Zusammensetzen, keine Schicht. */ .flug-himmel[data-an="nein"] { display: none; } /* ---------- Im Flug ---------- */ /* Zwei Attribute im Wähler, damit die Modus-Regeln (ebenfalls html[data-modus="…"]) nicht gewinnen können — unabhängig von der Reihenfolge der Stilblätter. */ html[data-flug="an"][data-modus] body { color: #f6f1e7; text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 18px rgba(0, 0, 0, .5); transition: color .45s ease; } /* Die ruhigen Flächen geben den Blick frei. Die Plakate bleiben, wie sie sind. */ html[data-flug="an"][data-modus] :is(.aushang, .wt-tour, .st-gigs, .hifi-bereich, footer.seite) { background: transparent; transition: background .45s ease; } /* Die Schrift IN diesen Flächen mit. Gemessen am 30.09.2026 auf der ausgelieferten Seite: ohne diese Regel stehen in Backstage vier und in Stumpi zwei Stellen unlesbar im All, darunter die Überschriften „Stumpi FM" (Kontrast 1,05) und „Kegeltermine" (1,07) — also praktisch unsichtbar. Sie tragen ausdrücklich dunkle Farben, weil sie vorher auf Papier bzw. auf Gelb lagen. Aufgezählt statt pauschal: Knöpfe, Karten und Tickets behalten ihre eigenen Farben. */ html[data-flug="an"][data-modus] :is(.aushang, .wt-tour, .st-gigs, .hifi-bereich, footer.seite) :is(.ueberschrift, .ueberschrift span, .zwischentitel, .zwischentitel span, .unterzeile, .aushang-klein, .aushang-text, .aushang-text p) { color: #f6f1e7; } /* Die Kopfleiste wird zur dunklen Glasschiene — sonst schwebt in Stumpi ein gelber Balken mitten im Weltall. */ html[data-flug="an"][data-modus] .kopf { background: rgba(6, 8, 18, .55); color: #f6f1e7; border-bottom-color: rgba(255, 255, 255, .18); backdrop-filter: blur(4px); transition: background .45s ease, color .45s ease; } html[data-flug="an"][data-modus] .kopf :is(a, .logo) { color: #f6f1e7; } html[data-flug="an"][data-modus] .kopf nav a[aria-current="page"] { background: var(--flug-eins); color: #0c0c0c; text-shadow: none; } /* Das Gerät, aus dem die Sterne kommen, glüht dabei. */ html[data-flug="an"][data-modus] [data-hifi] { box-shadow: 0 0 60px color-mix(in srgb, var(--flug-eins) 32%, transparent); transition: box-shadow .8s ease; } /* Die Sprungmarke behält ihre eigenen Farben: sie wird nur bei Tastaturfokus sichtbar und darf nicht von der hellen Flugschrift eingefärbt werden. */ html[data-flug="an"][data-modus] .sprung { background: #f6f1e7; color: #0c0c0c; text-shadow: none; } /* Knöpfe und Karten haben eigene Farben und sollen sie behalten — ein Schlagschatten auf einem gelben Knopf sieht schmutzig aus. */ html[data-flug="an"][data-modus] :is(.knopf, .gig, .ticket, .countdown-zahlen div, .countdown-laeuft, .kein-termin, .stoerung, .gig-balken, .tourleiste, .meldung) { text-shadow: none; } /* ---------- Weniger Bewegung ---------- js/flug.js hält den Flug dann bei Tempo null an: der Raum weicht, die Sterne stehen still. Hier fallen zusätzlich die Übergänge weg, damit gar nichts wandert. */ @media (prefers-reduced-motion: reduce) { html[data-flug="an"][data-modus] :is(body, .kopf, .aushang, .wt-tour, .st-gigs, .hifi-bereich, footer.seite, [data-hifi]) { transition: none; } }