/* ========================================================================= Bühnenlayout — Übersetzung der Produktseiten-Architektur (Vorbild: ARRI ALEXA Mini LF) auf einen Kameramann. Der Unterschied zur Dokumentfassung: dort lief alles in einer Spalte mit Labelrand, wie ein Lebenslauf. Hier ist jede Sektion eine eigene Bühne über die volle Breite, mit eigenem Rhythmus. Text und Bild wechseln die Seite, Bewegtbild sitzt an den Bruchstellen zwischen den Kapiteln. Baut auf stil.css (Farben, Typografie, Schriften) und raum.css (Farbebenen, Aufbau aus Nebel, Poster-Laufband) auf und ersetzt nur die Geometrie. ========================================================================= */ /* ------------------------------------------------------------- Grundmaße */ body.buehnen { --rand: clamp(20px, 5vw, 88px); /* Seitenrand der Bühnen */ --bahn: 1320px; /* maximale Satzbreite */ --hoehe: clamp(52px, 9vh, 88px); /* Höhe der klebenden Leiste */ } /* Die feste Akzentfläche und der Ebenenraum aus der Dokumentfassung stören hier: Bühnen laufen randlos, ein seitlicher Streifen schnitte sie an. */ body.buehnen .kante { display: none; } body.buehnen .huelle { padding: 0; } body.buehnen .satz { max-width: none; margin: 0; } .bahn { max-width: var(--bahn); margin: 0 auto; padding-inline: var(--rand); } /* --------------------------------------------------- Klebende Navigation */ /* Wie bei ARRI: die Sprungmarken bleiben oben stehen, damit jemand, der nur die Filmografie sehen will, nicht durch die Inszenierung muss. */ /* Fest statt klebend. Sie steht im Quelltext vor der Kopfbuehne, weil die Ausgsting-Seite die Schlussphase dieser Buehne ist und die Leiste dort schon oben stehen soll. Fest, nicht klebend: als klebendes Element ganz oben im Fluss naehme sie eine Zeile Platz weg und schoebe die Kopfbuehne nach unten. Dafuer tragen die Sektionen scroll-margin-top, sonst landeten Sprungmarken unter ihr. */ .leiste { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--hoehe); display: flex; align-items: center; gap: clamp(12px, 2vw, 30px); padding-inline: var(--rand); background: color-mix(in srgb, var(--papier) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid transparent; transition: border-color .3s ease, background-color .3s ease; /* Rechts bleibt Platz für den Tonwert-Umschalter, der als fest stehendes Element darüber liegt. Ohne diese Reserve läuft die letzte Sprungmarke unter ihn. */ padding-right: calc(var(--rand) + clamp(94px, 8vw, 120px)); /* Blendet zusammen mit der Ausgsting-Karte ein: 0 bis --kopf .62, voll ab .78. Vorher ist die Landing Page frei von Navigation, wie bisher. */ opacity: calc(var(--kopf, 0) * 6.25 - 3.88); } /* Unsichtbar heisst auch unbedienbar; erst mit der Karte wird sie scharf. Die Phase steht am , nicht an der Buehne: die Leiste liegt ausserhalb von ihr, ueber :has() ginge es auch, aber ein Attribut an der Wurzel ist billiger und aelter unterstuetzt. */ .leiste { pointer-events: none; } html[data-kopfphase="probe"] .leiste { pointer-events: auto; } /* Sprungmarken duerfen nicht unter der festen Leiste landen. */ [id^="s-"], #oben, #inhalt { scroll-margin-top: var(--hoehe); } /* Die Schalterzeile sitzt in der Leistenzeile, auf dem Kopfbild schwebt sie frei an derselben Stelle. Die Regel aus stil.css, die sie auf schmalen Geräten nach unten schickt, gilt hier nicht: unten liegt keine Markenleiste mehr. */ body.buehnen .schalterzeile { top: calc((var(--hoehe) - 2.1rem) / 2); bottom: auto; right: clamp(14px, 3vw, 30px); z-index: 41; } .leiste[data-haftet="true"] { border-bottom-color: var(--linie); } .leiste__name { font-size: var(--schrift-label); font-weight: 700; letter-spacing: var(--sperr-label); text-transform: uppercase; white-space: nowrap; margin-right: auto; } .leiste__name a { text-decoration: none; } .leiste__marken { display: flex; gap: clamp(10px, 1.6vw, 26px); overflow-x: auto; scrollbar-width: none; margin-right: clamp(8px, 1.4vw, 20px); } .leiste__marken::-webkit-scrollbar { display: none; } .leiste__marken a { flex: 0 0 auto; color: var(--text-3); font-size: var(--schrift-label); font-weight: 500; letter-spacing: var(--sperr-label); text-transform: uppercase; text-decoration: none; padding: .4em 0; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; } .leiste__marken a:hover { color: var(--text-1); } .leiste__marken a[aria-current="true"] { color: var(--akzent-1); border-bottom-color: var(--akzent-1); } /* ----------------------------------------------------------------- Knopf */ /* Orange ist die einzige Handlungsfarbe der Seite. Sonst nichts in Orange, sonst verliert der Knopf seine Bedeutung. Die Vorlagen bestaetigen das dreifach: ORYZO nennt die einzige gefuellte Flaeche "rarity is the signal", Dala reserviert Iris ausschliesslich fuer den gefuellten Knopf, Creative Giants verbietet farbige CTA-Fuellungen ganz. Rundung vollrund statt 2px: ORYZO 36px, Creative Giants 1440px, Dala Pille. Die Schriftfarbe kommt aus --knopf-schrift, nicht fest aus #fff — auf dem helleren Ember der dunklen Lage haette Weiss nur 2,9:1. */ .knopf { display: inline-flex; align-items: center; gap: .7em; padding: .95em 1.7em; background: var(--akzent-1); color: var(--knopf-schrift); border: 0; border-radius: var(--rund-knopf); font: inherit; font-size: var(--schrift-label); font-weight: 700; letter-spacing: var(--sperr-label); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: filter .2s ease, transform .2s ease; } .knopf:hover { filter: brightness(1.12); transform: translateY(-1px); color: var(--knopf-schrift); } .knopf--leise { background: none; color: var(--akzent-1); padding-inline: 0; border-bottom: 1px solid currentColor; border-radius: 0; } .knopf--leise:hover { color: var(--akzent-1); transform: none; } .knopf__pfeil { font-size: 1.1em; line-height: 1; transform: translateY(-.04em); } /* ------------------------------------------------------------------ Kopf */ /* Die Bühne ist höher als das Fenster, ihr Inhalt klebt darin oben. Der Überstand ist der Scrollweg des Effekts — dieselbe Bauart wie bei den Reel-Bühnen. Über diesen Weg läuft --kopf von 0 auf 1. */ .kopfbuehne { position: relative; height: var(--kopfweg, 260vh); } /* Wo der Satz steht, entscheidet EINE Angabe — und zwar hier, an der Buehne. Halt und Blendblatt tragen denselben Rasterbau; laufen sie auseinander, sieht man beim Scrollen die Uebergabe zwischen Blatt und Satz. Deshalb teilen sie sich diese beiden Werte, statt sie zweimal zu fuehren. */ .kopfbuehne { --satz-lage: center; /* seit 30.08.2026 mittig */ --satz-fuss: clamp(38px, 7vh, 76px); } .kopfbuehne__halt { position: sticky; top: 0; height: 100svh; display: grid; align-content: var(--satz-lage); padding: var(--hoehe) 0 var(--satz-fuss); overflow: hidden; /* Pflicht: mix-blend-mode am Blendblatt darf nur mit den Lagen dieser Bühne rechnen, nicht mit der Seite dahinter. */ isolation: isolate; } /* Die Lagen liegen alle randlos übereinander. Reihenfolge von unten: Arbeitsprobe (1) · Fluid-Loop (2) · Verlauf (3) · Blendblatt (4) · Satz (5) */ .kopfbuehne__probe, .kopfbuehne__probe-standbild, .kopfbuehne__film, .kopfbuehne__standbild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* kein filter: der Verlauf darunter erledigt die Lesbarkeit ohne Rechenlast */ } .kopfbuehne__probe, .kopfbuehne__probe-standbild { z-index: 1; } .kopfbuehne__film, .kopfbuehne__standbild { z-index: 2; } /* Das Standbild liegt IMMER unter seinem Film, nicht nur in `ohne-film`. Der Grund ist Safari: es wendet `object-fit` nicht auf das `poster` eines