/* ---- Scroll-Szene (Figma 271:5869, Unternehmen-Hero) ---- Bewusste JS-Ausnahme zu „Warum kein JavaScript für Inhalt" (Kommentar am Dateianfang): der Text aller drei Schritte steht vollständig und in Lesereihenfolge im Server-HTML (`render_scrollszene()`) — hier ist NUR die Präsentation. Ohne `assets/scrollszene..js` oder bei `prefers-reduced-motion` bleibt es bei genau diesem Grundzustand: drei gestapelte Bänder, keine Überblendung. Erst die vom Skript gesetzte Klasse `js-scrollszene` an schaltet auf Scroll-Pin um — die Regeln davor sind IMMER aktiv. Bis zum 07.09.2026 kam eine dritte Bedingung dazu: unter 900 px Breite blieb es ebenfalls beim Grundzustand. Das Gate ist weg, die Szene läuft auch auf dem Telefon. */ /* `.page .sec` (Spezifitaet 0,2,0) schlaegt eine blosse Klasse — die Regel hiess bis zum 02.09.2026 `.sec-scrollszene` und hat nie gegriffen. Der Abschnitt trug also 40 px Innenabstand oben und unten, und das war unsichtbar, solange dort Weiss auf Weiss und Dunkel auf Dunkel traf. Mit dem Navy-Ausklang stiess plötzlich Navy an Navy, und dazwischen stand ein 40 px hoher weisser Streifen. */ .page .sec.sec-scrollszene { padding: 0; } .scrollszene-stage .sec.prosa + .sec.prosa { border-top: 0; } .scrollszene-schritt { position: relative; padding: 56px 24px; background-size: cover; background-position: center; overflow: hidden; } .scrollszene-schritt .wrap { position: relative; z-index: 1; } .scrollszene-schritt.schritt-eins { background-color: var(--weiss); /* Nur die Netzlinien, kein Verlauf darunter. Bis zum 06.09.2026 lag hier derselbe Shader wie in jedem Hero (451:586 „Hero Shader BG"), begründet damit, dass Schritt 1 sonst kahler wirke als der Rest der Seite — genau diese Begründung dreht sich um, seit jeder Hero weiss ist. */ background-image: var(--scrollszene-netz); } .scrollszene-schritt.schritt-zwei { background-color: var(--dunkel); color: var(--grau); } .scrollszene-schritt.schritt-zwei { background-image: linear-gradient(90deg, rgba(13, 4, 6, .55), rgba(13, 4, 6, .15) 60%), var(--scrollszene-landschaft); } .scrollszene-schritt.schritt-zwei .kicker { color: var(--grau); margin: 0; } /* Der Glaskasten (271:5869 „Panel BG – Text/Dark") — dieselbe Optik wie `.sec.panel-rechts::before` (rgba(13,4,6,.82), Blur, oranger Schein), hier als echtes Element statt Pseudo-Element, weil die Szene ihre eigene Bühne baut statt der geteilten `panel-rechts`-Bandmasse. */ /* Mobil füllt der Kasten die Spalte und trägt 24 px Innenabstand: die 40 px des Entwurfs liessen von 342 px Breite noch 262 für den Text übrig, und die Aussage bräche darin auf sieben Zeilen. Maße und Platz rechts stehen im Desktop-Block am Ende dieses Abschnitts. */ .scrollszene-panel { padding: 24px; border-radius: 10px; background: rgba(13, 4, 6, .82); box-shadow: 0 0 50px rgba(242, 34, 12, .35); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); } .scrollszene-panel h2 { font-size: 24px; line-height: 32px; margin: 12px 0; } .scrollszene-panel p:last-child { margin-bottom: 0; } /* ---- Der Ausklang (Figma 939:15081) ---- Das Navy-Band, das sich über das stehende Raster schiebt. Ohne Skript ist es einfach das dritte Band im Fluss; mit Skript liegt es über der klebenden Bühne (z-index unten im @media-Block). Die Maße stammen aus dem Entwurf (Band 1440 × 496): Text bei x = 297, also 212 px hinter dem Seitenrand von 85 px — als Prozent der Innenbreite (1270) sind das 16.7 %, damit die Einrückung mit dem Fenster mitgeht statt bei 1440 px zu stimmen und sonst nirgends. 117 px über dem Text, 48 px zwischen Text und Bahn, Bahn 176 px, 48 px darunter — zusammen genau die 496. */ /* `.page .sec` und nicht blosse Klasse — dieselbe Falle wie eine Zeile weiter oben bei `.sec-scrollszene`: mit zwei Klassen schlaegt sie jede einfache, und ein `padding` hier haette nie gegolten. Der Entwurfsabstand von 117 px stand im CSS und am Bildschirm standen 40 px, ohne dass irgendetwas rot wurde. */ .page .sec.scrollszene-ausklang { background: var(--navy); color: var(--dim); /* Der Nachlauf ist EINE Variable statt einer zweiten padding-Regel im js-Block. Grund ist die Spezifitaet: diese Regel hier zaehlt (0,3,0), eine Regel `.js-scrollszene .scrollszene-ausklang` nur (0,2,0) — sie haette verloren, und zwar lautlos (beim dritten Anlauf gemessen: das Band blieb 589 px hoch, das padding kam nie an). Eine Variable vererbt sich von `` herunter und umgeht den Wettstreit ganz. Wozu der Nachlauf da ist, steht bei `nachlaufSetzen()` in SCROLLSZENE_JS. */ /* Die 197 px sind eine Desktop-Zahl (Band 1440 × 496); auf 390 px stünden zwei Bildschirmdrittel leer, bevor der Satz anfängt. Die Entwurfsmaße stehen im Desktop-Block am Ende dieses Abschnitts. */ padding: 64px 0 calc(48px + var(--ausklang-nachlauf, 0px)); /* Der Schatten des Entwurfs, nach OBEN geworfen (X 0, Y -40, Weichzeichnen 30, Streuung 0, #000 bei 100 %): das Band liegt vor dem Raster, also fällt sein Schatten auf das, was es gerade überdeckt. Ohne ihn klebt eine Fläche auf einer Fläche; mit ihm schiebt sich etwas davor. */ box-shadow: 0 -40px 30px rgba(0, 0, 0, 1); } .scrollszene-ausklang-inhalt { max-width: 100%; margin-left: 0; } .scrollszene-ausklang p { color: var(--dim); } .scrollszene-ausklang p:last-of-type { margin-bottom: 0; } /* Die gestrichelte Bahn: 4 px Strich, 4 px Lücke (im Entwurf gemessen), unten ein fester Punkt. Sie sagt „hier geht es weiter" — und weil ein statischer Strich das nur behauptet, läuft ein Lichtschweif sie hinunter. Bewegt wird ausschliesslich `transform`, damit die Animation keinen Umbruch auslöst. */ /* Bahn und Beschriftung nebeneinander: im Entwurf steht „so gehen wir vor" 25 px rechts von der Linie, etwas oberhalb ihrer Mitte. */ .szene-scrollpfad-reihe { display: flex; align-items: center; gap: 25px; margin-top: 48px; } .szene-scrollpfad-marke { font-size: 14px; color: var(--dim); } .szene-scrollpfad { position: relative; width: 6px; height: 176px; flex: 0 0 auto; } .szene-scrollpfad::before { content: ""; position: absolute; left: 2px; top: 0; bottom: 6px; width: 1px; background: repeating-linear-gradient(180deg, var(--dim) 0 4px, transparent 4px 8px); opacity: .5; } .szene-scrollpfad::after { content: ""; position: absolute; left: 0; bottom: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--weiss); } .szene-scrollpfad-lauf { position: absolute; left: 2px; top: 0; width: 1px; height: 44px; background: linear-gradient(180deg, transparent, var(--weiss)); animation: szene-scrollpfad 2.6s cubic-bezier(.45, 0, .55, 1) infinite; } @keyframes szene-scrollpfad { 0% { transform: translateY(-44px); opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translateY(170px); opacity: 0; } } /* Dieselbe Zusage wie bei der Szene selbst: wer weniger Bewegung will, bekommt die Bahn als Standbild — nicht einen unsichtbar gewordenen Hinweis. Der Schweif steht dann am oberen Ende der Bahn und zeigt weiter nach unten. */ @media (prefers-reduced-motion: reduce) { .szene-scrollpfad-lauf { animation: none; opacity: .8; } } /* Canvas und Label-Ebene sind ohne Skript NICHT DA — nicht bloss leer. Ein leerer Canvas waere eine 100dvh hohe transparente Flaeche ueber dem ersten Band; unsichtbar, aber im Fluss. Die Begriffsliste traegt `hidden` schon in der Auszeichnung; die Regel hier haelt sie auch dann unsichtbar, wenn ein Stylesheet `[hidden]` ueberschreibt. */ .scrollszene-canvas, .scrollszene-labels { display: none; } .szene-begriffe { display: none; } /* Ohne Skript gibt es weder Scrollweg noch Standzeit — beides sind leere Strecken, die nur im gepinnten Betrieb einen Sinn haben. */ .scrollszene-weg, .scrollszene-halt { display: none; } /* ---- Der gepinnte Betrieb --------------------------------------------------- Diese Regeln standen bis zum 07.09.2026 in `@media (min-width: 900px)` — die Szene lief nur am Desktop. Sie gelten jetzt auf JEDER Breite; was hochkant anders liegt, steht als Ausnahme im Desktop-Block darunter, nicht umgekehrt. Die Reihenfolge ist Absicht und folgt dem Rest dieser Datei: mobil ist der Normalfall, der Desktop ist die Erweiterung. Der Schalter bleibt derselbe: ohne `assets/scrollszene..js` und bei `prefers-reduced-motion` fehlt die Klasse `js-scrollszene` an , und dann gilt weiterhin ausschliesslich, was oberhalb steht — drei gestapelte Bänder. */ /* Die Höhe des Spacers ergibt sich aus seinen Teilen, statt fest zu stehen: Bühne (100svh) + Scrollweg (400vh) + Standzeit (60vh) + Ausklang. Vorher waren es 500vh am Stück, was auf dasselbe hinauslief — nur konnte man dem Wert nicht ansehen, wovon er sich ableitet, und der Ausklang hätte nirgends hingepasst. Die Szene selbst läuft über Bühne + Weg, also unverändert 400vh; die Standzeit lässt das fertige Raster einen Moment für sich stehen, bevor der Ausklang es überschiebt. */ .js-scrollszene .scrollszene-spacer { height: auto; } /* Der Abschnitt NACH der Szene rutscht in die verlängerte Klebestrecke hinein und überdeckt dort die Bühne. Ohne `z-index` gewönne die sticky Bühne (positioniert schlägt statisch) und das Raster läge über dem nächsten Band. Ein transparenter Grund dort würde die Bühne durchscheinen lassen — auf der Unternehmen-Seite folgt das deckende Lila-Band. */ .js-scrollszene .sec-scrollszene + * { position: relative; z-index: 1; margin-top: calc(-1 * var(--ausklang-nachlauf, 0px)); } .js-scrollszene .scrollszene-weg { display: block; height: 400vh; } .js-scrollszene .scrollszene-halt { display: block; height: 60vh; } /* `svh` und nicht `dvh` — der Unterschied ist auf einem Telefon der ganze Punkt. `dvh` folgt der ein- und ausfahrenden Adressleiste: die geklebte Bühne würde mitten im Pin um 60 bis 100 px wachsen und schrumpfen, und mit ihr die Szene darin. `svh` ist die KLEINE Fassung — die Höhe bei sichtbarer Leiste — und rührt sich nicht. Der Preis ist ein Streifen unten, wenn die Leiste einfährt; den füllt der Grund der Bühne, den die Szene ohnehin selbst färbt. Am Desktop sind svh, dvh und vh derselbe Wert. `100vh` davor ist die Rückfallebene für Browser ohne svh (vor Chrome 108 / Safari 15.4) — dort war es vorher auch dvh, also kein Rückschritt. */ .js-scrollszene .scrollszene-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; z-index: 0; } /* Der Ausklang liegt ÜBER der klebenden Bühne und schiebt sich davor — deshalb ein höherer z-index und ein deckender Grund. Beides ist nötig: ohne z-index gewinnt die sticky Bühne (positioniert schlägt statisch), ohne deckenden Grund schiene das Raster durch den Text. Die Höhe des Bandes bleibt die des Entwurfs; was es stehen lässt, ist der Nachlauf unten. */ .js-scrollszene .scrollszene-ausklang { position: relative; z-index: 1; } /* `--ausklang-nachlauf` steht hier bewusst NICHT: die Zahl setzt das Skript an , weil sie nur dort zu rechnen ist. Warum, steht bei `nachlaufSetzen()` in SCROLLSZENE_JS. */ /* Mobil trägt allein der `.wrap` den Rand (`--rand`, 24 px); ein zweiter Innenabstand hier nähme von 390 px noch einmal 176. Der Desktop-Block unten setzt seine 88 px darüber. */ .js-scrollszene .scrollszene-schritt { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; padding-left: 0; padding-right: 0; transition: none; } .js-scrollszene .scrollszene-stage.ist-initialisiert .scrollszene-schritt { transition: opacity .6s ease; } /* Hochkant steht der Text OBEN und der Glaskasten UNTEN, und das Netz weicht jeweils zur anderen Seite aus (`VERSATZ.hochAnteil` in szene_komplexitaet.js). Das ist dieselbe Alternanz wie im Querformat, wo der Text links und der Kasten rechts steht — nur um 90 Grad gedreht, weil hochkant die Höhe geteilt wird, nicht die Breite. Die Bedingung ist das SEITENVERHÄLTNIS und nicht die Breite, und das ist hier keine Feinheit: die Szene drüben entscheidet an ihrem eigenen Verhältnis (`HOCH_SCHWELLE`, ebenfalls 0.85). Stünde hier eine Breiten-Schwelle, gingen die beiden im Band zwischen 768 und 900 px auseinander — ein liegend gehaltenes Telefon (844 × 390) bekäme den Text oben über der vollen Breite, während das Netz seitlich ausweicht und damit genau dorthin läuft. Die Bühne ist volle Breite und `100svh` hoch, also ist ihr Verhältnis das des Fensters. */ @media (max-aspect-ratio: 85/100) { .js-scrollszene .scrollszene-schritt.schritt-eins { align-items: flex-start; } .js-scrollszene .scrollszene-schritt.schritt-zwei { align-items: flex-end; } } .js-scrollszene .scrollszene-schritt.ist-aktiv { opacity: 1; z-index: 1; } .js-scrollszene .scrollszene-schritt .wrap { width: 100%; } /* Die Szene uebernimmt den Grund. Die Standbilder der drei Schritte bleiben in der Auszeichnung stehen und gelten weiter, wenn das Skript nicht laeuft — hier werden sie nur verdeckt bzw. abgeschaltet, damit der Canvas durchkommt. Den Farbverlauf Weiss → Dark Chocolate faerbt die Szene selbst auf die Buehne (`stage.style.backgroundColor`), synchron zum Netz. */ .js-scrollszene .scrollszene-canvas, .js-scrollszene .scrollszene-labels { display: block; position: absolute; inset: 0; z-index: 0; } .js-scrollszene .scrollszene-canvas { width: 100%; height: 100%; } .js-scrollszene .scrollszene-labels { pointer-events: none; } .js-scrollszene .scrollszene-schritt { background-image: none; background-color: transparent; } /* Der Schlussabsatz steht unten, nicht mittig. Er ist als einziger Schritt ueber ZWEI Akte aktiv: erst neben der Wortmarke (die allein in der Mitte steht), dann waehrend das Raster entsteht — und das Raster fuellt die Bildmitte samt rechter Haelfte. Mittig gesetzt lag der Absatz quer ueber zwei Rasterspalten, Schrift auf Label, beides unlesbar. Unten hat er in BEIDEN Akten freie Flaeche: das Raster endet bei rund 74 % der Hoehe, der Lichtschein der Wortmarke traegt dunkel aus. */ /* ---- Was am Desktop anders liegt -------------------------------------------- Nur noch die Maße des Entwurfs, die auf 390 px keinen Platz haben. Alles Tragende — Pin, Überblendung, Canvas, Ausklang — steht oben und gilt überall. */ @media (min-width: 900px) { /* Der Satzspiegel des Entwurfs (271:5869): 88 px zusätzlich zum Seitenrand. */ .js-scrollszene .scrollszene-schritt { padding-left: 88px; padding-right: 88px; } /* Die Innenmaße des Glaskastens aus dem Entwurf (271:5869 „Panel BG – Text/Dark"); wo er steht, entscheidet das Seitenverhältnis eine Regel weiter unten. */ .scrollszene-panel { padding: 32px 40px; } /* Band 1440 × 496: Text bei x = 297, also 212 px hinter dem Seitenrand von 85 px — als Prozent der Innenbreite (1270) sind das 16.7 %, damit die Einrückung mit dem Fenster mitgeht statt bei 1440 px zu stimmen und sonst nirgends. 117 px über dem Text, 48 px zwischen Text und Bahn, Bahn 176 px, 48 px darunter — zusammen genau die 496. */ .page .sec.scrollszene-ausklang { padding-top: 197px; } .scrollszene-ausklang-inhalt { max-width: 428px; margin-left: 16.7%; } } /* Der Glaskasten steht NEBEN dem Netz, nicht darüber — solange das Bild liegt. Das ist dieselbe Entscheidung wie die Alternanz oben und hängt am selben Wert: quer teilt sich das Bild links/rechts, hochkant oben/unten. Ein quer gehaltenes Telefon (844 × 390) bekommt damit die Desktop-Komposition in klein statt eines Kastens über der ganzen Bühne, hinter dem vom Netz nichts mehr zu sehen ist. */ @media (min-aspect-ratio: 85/100) { .scrollszene-panel { max-width: 480px; margin-left: auto; } }