/* =========================================================================== Buehne · Frage, Grund und Zweifel nach dem Laborflug --------------------------------------------------------------------------- Sie loest den frueheren Abschnitt
ab. Der Inhalt ist derselbe, nur die Darreichung ist neu: statt eines Rasters, das man auf einmal sieht, kommt beim Scrollen ein Stueck nach dem anderen (Vorgabe Alex, 30.08.2026). ZWEI FASSUNGEN IN EINER DATEI. Ohne die Klasse .bue-live ist das hier ein ganz normaler Abschnitt im Fluss: Frage, darunter links der Grund und rechts die drei Zweifel. Genau so sieht ihn, wer ein schmales Geraet hat oder prefers-reduced-motion gesetzt hat, und genau so sieht ihn eine Maschine ohne JavaScript. Alles steht dann auf Deckkraft 1 und im Fluss. Erst landing-buehne.js setzt .bue-live, und ab da gilt der zweite Block: angehefteter Bildschirm, Elemente auf Deckkraft 0, Scroll steuert. Der Grund fuer diese Reihenfolge: was beim Laden auf Deckkraft 0 liegt, ist als Textquelle heikel -- dieselbe Ueberlegung, die in landing.html schon den Definitionssatz aus den eingeblendeten Ebenen heraushaelt. Hier liegt der Text im Grundzustand sichtbar da, und nur ein Skript versteckt ihn. =========================================================================== */ /* --- Grundzustand: normaler Abschnitt -------------------------------------- */ .bue{position:relative;background:var(--bg)} /* Kein eigener Innenabstand: den bringt die allgemeine Regel section{padding:76px 0} aus landing.css mit, und der Abschnitt soll im Rohzustand genauso sitzen wie jeder andere. Ein zweiter Abstand obendrauf haette ihn doppelt so weit vom Flug weggeschoben wie alle anderen Abschnitte voneinander. */ .bue-pin{padding:0} .bue-inhalt{position:relative} .bfrage{text-align:center;margin-bottom:46px} .bfrage h2{font-size:clamp(30px,4.4vw,60px);letter-spacing:-.028em;line-height:1.1; max-width:20ch;margin:0 auto} .bfrage em{font-style:normal;color:var(--acc)} /* Ein Wort ist ein eigener Kasten, damit es einzeln eingeblendet werden kann. inline-block, weil ein reines inline keine Transformation annimmt. */ .bfrage .w{display:inline-block} .bgrid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center} .bgrund p{color:var(--mut);font-size:17.5px;line-height:1.66;max-width:36ch} .bgrund p b{color:var(--text);font-weight:600} /* Die Laborzahl. Sie stand vorher als .probstat im alten Abschnitt und behaelt ihr Aussehen, damit die Zahl nicht ploetzlich anders wirkt als bisher. */ .bstat{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);max-width:36ch} .bstat b{font:600 30px var(--mono);letter-spacing:-.02em;color:var(--red)} .bstat > span{display:block;color:var(--dim);font-size:13px;margin-top:4px} .bstat b span{display:inline;font-size:inherit;margin:0;color:var(--text)} .bstat b #probRed{color:var(--red)} .bstat .ps-of{font-size:.62em;color:var(--dim);letter-spacing:0;margin:0 2px} .bzweifel{display:flex;flex-direction:column} .bz{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px 0; border-top:1px solid var(--line)} .bz:first-child{border-top:0;padding-top:4px} .bz .ico{width:44px;height:44px;border-radius:11px;background:var(--acc-dim); display:flex;align-items:center;justify-content:center} .bz .ico svg{width:21px;height:21px;stroke:var(--acc);fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .bz h3{font-size:17.5px;margin-bottom:7px} .bz p{color:var(--mut);font-size:14.5px;line-height:1.55;max-width:56ch} /* Die Schlusszeile ("Testen ist aufwaendig.") war am 30.08.2026 kurz die letzte Stufe dieser Buehne und steht seit demselben Tag wieder als Ueberschrift im Abschnitt #klarheit, siehe landing.css. Grund: angeheftet erscheint ein Satz erst und wandert dann, im Fluss tut er beides zugleich. */ @media (max-width:900px){ .bgrid{grid-template-columns:1fr;gap:30px} .bgrund p,.bstat{max-width:none} .bfrage{margin-bottom:34px} } /* --- Zweite Fassung: angeheftet und vom Scrollen gesteuert ------------------ */ /* Die Hoehe ist die Scrollstrecke der Bühne. Sie steht hier und nicht im Skript, damit man sie ohne Codeaenderung verschieben kann. Wer sie kuerzt, kuerzt jeden Schritt im selben Verhaeltnis: die Fenster im Skript sind Anteile, keine Pixel. */ /* 340vh statt der urspruenglichen 520 (30.08.2026, in drei Schritten): der Zeitplan im Skript ist vorn gekuerzt worden, und zuletzt hat die Schlusszeile die Buehne verlassen. Ohne dieselbe Kuerzung hier waere die gesparte Strecke hinten jedes Mal als Leerlauf wieder aufgetaucht. padding:0, weil section{padding:76px 0} sonst 152 Pixel in die Sektion rechnet, die den angehefteten Bildschirm nach unten schieben. */ .bue-live{height:340vh;padding:0; /* DIE BUEHNE GREIFT IN DEN FLUG HINEIN (30.08.2026, Ansage Alex: "bevor der Score weggeht und die Animation ausblurrt, kann die Aussage mit den 8 EAs schon kommen"). Der negative Abstand heisst: der angeheftete Bildschirm der Buehne dockt frueher an, und das erste Wort der Frage blendet auf, waehrend Ring und 74 hinter ihr noch unscharf werden. Innerhalb des Flugs war das nicht zu erreichen -- die Frage steht in dieser Sektion, und eine Sektion faengt an, wo sie anfaengt. Also faengt sie frueher an. WARUM 145vh UND NICHT WENIGER. Zweimal nachgemessen und zweimal zu wenig gewesen: die feste Ebene des Flugs loest sich schon 100vh vor dem Ende seiner Sektion, und danach faehrt sie nur noch hoch und ist da laengst schwarz. Ein Ueberlapp bis 100vh landet also vollstaendig in diesem toten Stueck und bringt gar nichts. Gerechnet: der Flug ist 580vh, sein Blur beginnt bei Anteil 0,87 des Scrollwegs von 480vh, also bei 418vh. Damit die Frage mittendrin einsetzt, muss die Buehne bei rund 435vh anfangen -- das sind die 145vh. Die 74 ist dann etwa zur Haelfte aufgeloest, und das erste Wort blendet darueber auf. Die Rechnung steht in Bildschirmhoehen und traegt deshalb auf jedem Fenster. background:transparent ist dafuer Bedingung und kein Aufraeumen: mit dem Grundton wuerde die Buehne den Flug auf dieser ganzen Strecke zudecken, und man saehe vom Blur nichts mehr. Dahinter liegt ohnehin derselbe Ton, erst der schwarze Grund des Flugs, dann der Seitenhintergrund. pointer-events:none aus demselben Grund: die Ebene der Buehne liegt eine volle Bildschirmhoehe lang UEBER Ton-Schalter und Stufentafel des Flugs und wuerde deren Klicks schlucken. Die Buehne selbst hat nichts zum Anklicken. Der Preis ist, dass sich ihr Text nicht markieren laesst -- das ist der kleinere Verlust. */ margin-top:-145vh; background:transparent} .bue-live .bue-pin{position:sticky;top:0;height:100vh;height:100svh; padding:0;overflow:hidden;display:flex;align-items:center;pointer-events:none} /* KEIN Bezugsrahmen mehr im Live-Betrieb. Im Rohzustand ist .bue-inhalt position:relative, und solange das so bleibt, rechnen die Prozentwerte von .bfrage gegen die HOEHE DES TEXTBLOCKS statt gegen den Bildschirm. Der Textblock ist hier gut 1500 Pixel hoch, die Frage landete damit mitten in den Zweifeln statt darueber, und der Fehler waendert sich mit jeder Textlaenge. Statisch gestellt ist der naechste positionierte Vorfahr .bue-pin, und das ist genau der Bildschirm. */ .bue-live .bue-inhalt{width:100%;position:static} /* Die Frage haengt an der Buehne, nicht am Textblock. Sonst rechnen ihre Prozentwerte gegen die Hoehe des Textblocks, und sie landet beim Zurueckgehen mitten in den Zweifeln statt darueber. */ .bue-live .bfrage{position:absolute;left:0;right:0;top:50%;margin:0; padding:0 20px;transform:translateY(-50%); z-index:5;will-change:transform,opacity,filter} .bue-live .bfrage .w{opacity:0;transform:translateY(16px);filter:blur(7px); will-change:opacity,transform,filter} /* Der obere Abstand haelt das Raster unter der zurueckgegangenen Frage frei. Gemessen bei 1440x900: die Frage liegt dann auf 87 bis 165, das Raster beginnt bei 252. Ohne diesen Abstand stossen die Unterlaengen der Frage auf die erste Zweifel-Ueberschrift, und beides zusammen ist unleserlich. Wer die Frage im Skript hoeher oder tiefer legt (A_ZURUE, der Faktor an top), muss hier nachziehen. */ .bue-live .bgrid{position:relative;z-index:2;margin-top:96px} .bue-live .bgrund{opacity:0;will-change:opacity,transform} .bue-live .bstat{opacity:0;will-change:opacity,transform} .bue-live .bz{opacity:0;will-change:opacity,transform}