/* =========================================================================== Labor-Flug · Hero-Modul fuer eaproof.com --------------------------------------------------------------------------- Eigenstaendig. Wird NACH landing.css geladen, aendert dort nichts und benutzt nur eigene Klassen mit dem Praefix hf-. Kollidiert deshalb nicht mit dem, was ein anderer Chat parallel an landing.css macht. Farben, Radius und Schriften kommen aus den Variablen von landing.css. Wenn du dort etwas aenderst, zieht dieses Modul automatisch mit. Aufbau: .hf hohe Sektion, ihre Hoehe IST die Scrollstrecke des Flugs .hf-pin klebt oben fest, solange .hf durchs Bild laeuft (position:sticky) Bewusst sticky und nicht fixed: sticky loest sich am Ende der Sektion von selbst wieder, und der Rest der Seite scrollt normal weiter. Mit fixed muesste man diesen Moment in JavaScript nachbauen, und genau da entstehen die Ruckler, die man auf solchen Seiten oft sieht. =========================================================================== */ .hf{ position:relative; /* Scrollstrecke. Die letzten 20 Prozent davon sind Standzeit vor dem Ring, siehe HOLD in hero-flug.js. Kuerzer = schnellerer Flug. 16.08.2026: von 940vh auf 640vh. 940vh waren 8,4 Bildschirme Scrollweg, bevor ein Fremder den ersten Inhalt unter dem Flug erreicht. Jetzt sind es 5,4. WER DIESE ZAHL AENDERT, AENDERT HOLD MIT. Die Standzeit ist ein ANTEIL der Strecke, kein fester Weg: bei 940vh und HOLD 0.86 blieben 1,2 Bildschirme Standzeit vor dem Score-Ring, bei 640vh waeren es mit demselben HOLD nur noch 0,75. Der Hoehepunkt der Reise faellt dann in das am schnellsten bewegte Stueck des Scrollwegs, und man scrollt auf die Zahl und im selben Zug daran vorbei. Deshalb steht HOLD jetzt auf 0.80, das ergibt wieder gut einen Bildschirm. tools/test-heroflug.js rechnet beides gegeneinander. */ height:640vh; background:var(--bg); /* WICHTIG: landing.css gibt jedem
oben und unten Innenabstand. Erbt die Flugsektion den, startet die feste Ebene 76 Pixel zu tief und RUTSCHT waehrend der ersten 76 Scrollpixel nach oben, bevor sie andockt. Sieht aus, als wuerde das Gebaeude die Hoehe wechseln. */ padding:0; /* Unter die Kopfzeile ziehen, damit das Bild randlos ist und die Knoepfe schon beim ersten Bild vollstaendig sichtbar sind. Der Wert entspricht immer der AKTUELLEN Hoehe der Kopfzeile, gesetzt von hero-flug.js. Das ist kein Schoenheitsdetail: die Kopfzeile schrumpft beim Andocken von 61 auf 53 Pixel, und weil sie im Fluss steht, ruckt dabei die ganze Seite 8 Pixel nach oben. Weil der negative Abstand mitschrumpft, bleibt die Oberkante der Sektion exakt stehen und das Rucken faellt weg. Der Rueckfallwert 61px gilt, bis das Skript laeuft. Ohne ihn wuerde die Seite beim Laden einmal sichtbar springen. */ margin-top:calc(-1 * var(--hf-hdr, 61px)); } .hf-pin{ position:sticky; top:0; height:100vh; height:100svh; /* svh: auf dem Handy ohne Sprung beim Ein- und Ausblenden der Browserleiste */ overflow:hidden; background:var(--bg) center/cover no-repeat; /* Poster wird per JS gesetzt */ } .hf-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } /* Abdunklung. Oben und unten kraeftiger, damit Ueberschrift und Karte sicher ueber 4.5:1 Kontrast kommen, in der Mitte zurueckhaltend, damit der Raum sichtbar bleibt. Die einzige Stelle mit Verlauf, und sie ist funktional. */ .hf-veil{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(6,10,14,.74) 0%, rgba(6,10,14,.26) 32%, rgba(6,10,14,.28) 62%, rgba(6,10,14,.82) 100%); } /* --- Hero: nur Frage und die beiden Knoepfe --------------------------------- */ /* Ueberschrift oben, wo im ersten Bild der leere Himmel ueber dem Gebaeude ist. Unten waere sie mit der Faktenkarte auf einer Hoehe und wuerde das Gebaeude verdecken, das im ersten Bild die Hauptsache ist. */ .hf-hero{ position:absolute; z-index:2; left:clamp(24px,5vw,80px); top:clamp(96px,17vh,200px); /* SPANNT SEIT DEM 08.08.2026 UEBER DIE VOLLE BREITE, und das ist kein Layoutgeschmack, sondern die Bedingung dafuer, dass der Stoerer rechts mit ausblendet. hero-flug.js setzt Deckkraft und Verschiebung des Flugs auf genau EIN Element (.hf-hero). Ein Stoerer als Geschwister in .hf-pin haette diese Behandlung nicht bekommen und waere ueber die ganzen 800vh Flugstrecke ueber dem Labor stehen geblieben. Die Textbreite wandert dafuer auf die Kinder: h1 und .hf-cta tragen sie jetzt selbst. Ohne das liefe die Ueberschrift bis an den rechten Rand. */ right:clamp(24px,5vw,80px); text-align:left; will-change:opacity,transform; } .hf-hero h1,.hf-hero .hf-cta{max-width:min(700px,58vw)} .hf-hero h1{ font-size:clamp(32px,5.2vw,64px); font-weight:700; letter-spacing:-.025em; line-height:1.04; margin:0 0 30px; text-shadow:0 2px 50px rgba(6,10,14,.95); } .hf-hero h1 em{font-style:normal; color:var(--acc)} /* Der dein/sein-Wechsel aus landing.css laeuft hier unveraendert weiter: die Regeln .wswap sind nicht an .hero gebunden und greifen auch im Flug. Erster Versuch war, ihn abzuschalten. Das ging schief, weil dabei nur "sein" versteckt wurde, "dein" aber weiterhin ausgeblendet blieb -- ein halb unsichtbares Wort in der Ueberschrift. Also gar nicht eingreifen. */ .hf-cta{display:flex; gap:12px; flex-wrap:wrap} .hf-btn{ font:600 15px var(--sans); padding:15px 26px; border-radius:var(--r); text-decoration:none; border:1px solid transparent; display:inline-block; transition:transform .3s var(--ease), background .3s var(--ease); } .hf-btn-acc{background:var(--acc); color:#04120e} .hf-btn-ghost{ border-color:rgba(234,242,247,.28); color:var(--text); background:rgba(13,20,28,.4); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .hf-btn:hover{transform:translateY(-2px)} .hf-btn:focus-visible{outline:2px solid var(--blue); outline-offset:3px} /* --- Stoerer Early Bird, rechts im Hero (08.08.2026) ------------------------ Vorgaenger war eine Pille unter den Knoepfen. Alex dazu: "hab also 1h gewartet und sehe auf der starte eine pille.... ein stueck text." Seine Vorgabe war ein Stoerer rechts, und aus vier Entwuerfen hat er den mit dem Platzbalken gewaehlt. DIE PILLE IST ENTFALLEN, nicht ergaenzt. Zwei Kaesten mit derselben Aussage auf einem Bildschirm machen sie beliebiger, nicht dringlicher. Rechts und auf halber Hoehe, weil links die Ueberschrift steht und der Hauptknopf das lauteste Element im Hero bleiben soll: der Stoerer traegt deshalb KEINE gefuellte Akzentflaeche, sondern nur Rand und Schrift in der Akzentfarbe. Zwei ausgefuellte Aufforderungen nebeneinander waeren zwei Empfehlungen, und es gibt nur eine. */ .stoerer{ /* Der negative Versatz ist gemessen, nicht geraten: mit top:100% sass die Karte 100 px tiefer als im Entwurf, den Alex gewaehlt hat. Waagerecht kann sie nichts verdecken, links steht nur der Definitionssatz und der endet weit vor der Kartenkante. tools/test-stoerer.js prueft die Ueberlappung mit Ueberschrift und Hauptknopf, falls die Ueberschrift einmal drei Zeilen braucht. */ position:absolute; right:0; top:calc(100% - 66px); z-index:3; display:block; width:272px; box-sizing:border-box; padding:15px 17px 14px; border-radius:16px; border:1px solid color-mix(in srgb, var(--acc) 40%, transparent); background:color-mix(in srgb, var(--acc) 11%, rgba(9,14,20,.62)); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); text-decoration:none; color:var(--text); box-shadow:0 18px 50px rgba(6,10,14,.5); transition:transform .3s var(--ease), border-color .3s var(--ease); } .stoerer:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--acc) 70%, transparent)} .stoerer:focus-visible{outline:2px solid var(--blue); outline-offset:3px} /* DER SCHEIN (09.08.2026). Alex: "kann man optisch noch was beim angebot rechts machen? eine animation. ein leuchten oder so was?" Fuenf Varianten als Mockup (docs/mockup-stoerer-glanz.html), gewaehlt hat er das langsame Atmen. Die erste Fassung war ihm zu schwach, die Staerke hat er danach an einem Regler auf STUFE 8 von 10 gestellt; die Zahlen unten sind genau diese Stufe. Ueber Stufe 8 hinaus wird der Stoerer lauter als die Ueberschrift daneben. ES IST EIN PSEUDOELEMENT UND KEIN . Damit bleibt public/landing.html unangetastet, und die Datei liegt in der anderen Sitzung -- eine Aenderung dort waere eine vermeidbare Kollision vier Tage vor dem Start. BEWEGT WIRD NUR DIE DECKKRAFT. Einen box-shadow selbst zu animieren zwingt den Browser, die Weichzeichnung in jedem einzelnen Bild neu zu rechnen; die Deckkraft eines fertigen Elements kostet praktisch nichts. Auf einer Seite, die daneben ein Video abspielt, ist das kein Feinschliff. DER 1-PIXEL-RING IST DER WICHTIGERE TEIL. In der ersten Fassung atmete nur die weiche Wolke aussen, und Alex sah sie fast nicht -- das Auge fasst eine scharfe Kante deutlich frueher als einen Verlauf. Der Ring liegt durch inset:-1px genau auf der Kartenkante. KEIN z-index:-1 und keine eigene Flaeche: das Element hat keinen Hintergrund, ein aeusserer Schatten wird ausserhalb des Rahmens gezeichnet. Es liegt damit ueber der Karte, verdeckt aber nichts. Mit z-index:-1 geriete es hinter den backdrop-filter der Karte, und dessen Weichzeichnung wuerde den Schein mitverwaschen. */ .stoerer::before{ content:''; position:absolute; inset:-1px; border-radius:16px; pointer-events:none; opacity:.19; box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 84%, transparent), 0 0 62px 11px color-mix(in srgb, var(--acc) 58%, transparent); animation:stoererAtmen 6s ease-in-out infinite; } @keyframes stoererAtmen{ 0%,100%{opacity:.19} 50%{opacity:1} } /* Beim Ueberfahren steht der Schein still und ganz oben. Ohne das laeuft die Karte unter dem Zeiger weiter vor sich hin und die Beruehrung bleibt folgenlos -- und der Randwechsel des :hover darueber ginge im Atmen unter. */ .stoerer:hover::before{animation:none; opacity:1} .st-kopf{display:block; font:700 15.5px/1.25 var(--sans); letter-spacing:-.01em} /* Der Balken. Bahn dunkel, Fuellung in der Akzentfarbe, Breite kommt aus dem Skript. Bei zwei von fuenfzig vergebenen Plaetzen sind das 4 Prozent, also ein Strich -- gewollt: er ist eine Messung und keine Dekoration, und er waechst mit den Verkaeufen. Die min-width haelt ihn sichtbar, damit "zwei vergeben" nicht wie "keiner" aussieht. */ .st-bahn{ display:block; height:5px; margin:11px 0 9px; border-radius:999px; background:rgba(234,242,247,.14); overflow:hidden; } .st-bahn i{ display:block; height:100%; width:0; border-radius:999px; background:var(--acc); transition:width .8s var(--ease); } .st-zahl{display:block; font:500 13px/1.35 var(--sans); color:var(--mut)} .st-zahl b{color:var(--text); font-weight:700} /* Die Aufforderung traegt den Pfeil als eigenes Zeichen im Fluss, nicht als ::after mit Abstand: im Entwurf B ist genau daran der Pfeil allein in die zweite Zeile gerutscht. Ein geschuetztes Leerzeichen davor haelt ihn am Wort. */ .st-cta{ display:block; margin-top:11px; padding-top:11px; border-top:1px solid color-mix(in srgb, var(--acc) 22%, transparent); font:700 13px/1.3 var(--sans); color:var(--acc); } .st-cta::after{content:'\00a0→'} /* Schmale Schirme: der Stoerer steht im Fluss unter dem Definitionssatz statt rechts daneben. Rechts waere er dort auf 390 px entweder 100 px breit oder ueber der Ueberschrift. Er bleibt Kind von .hf-hero und blendet damit weiterhin mit dem Hero aus. */ @media (max-width:900px){ /* relative statt static: der Schein ist ein absolut gesetztes Pseudoelement. Bei `static` haette es keinen positionierten Vorfahren mehr und wuerde sich an .hf-hero ausrichten -- das Leuchten saesse dann quer ueber dem ganzen Hero statt auf der Karte. Am Layout aendert `relative` hier nichts. */ .stoerer{position:relative; width:100%; max-width:340px; margin-top:20px; padding:14px 15px 13px} .st-kopf{font-size:15px} } /* Wer Bewegung abbestellt hat, bekommt keinen wachsenden Balken und kein Atmen. Der Stoerer bleibt vollstaendig, nur die Bewegung faellt weg. DER SCHEIN VERSCHWINDET NICHT, er steht still. Er ist keine Animation, sondern Gestaltung; ihn ganz zu entfernen naehme dieser Gruppe die Hervorhebung, statt ihr die Bewegung zu ersparen. Deckkraft .62 ist die Mitte des Atmens. `relative` statt `static`, und das ist AUSDRUECKLICH KEINE Layoutaenderung: ohne Versatzangaben zeichnet `relative` genau wie `static`, das `margin-top` bleibt stehen. Es steht nur da, weil das Pseudoelement einen positionierten Vorfahren braucht -- sonst richtete sich der Schein an .hf-hero aus und laege quer ueber dem ganzen Hero. OFFEN und nicht angefasst: dieser Block schiebt den Stoerer auch am Rechner in den Fluss unter den Hero, aendert also das Layout unter einer Bewegungsregel. Am 09.08.2026 beim Einbau des Scheins aufgefallen. Es hier mitzuaendern waere ein zweites Thema, und der Kommentar darueber ("nur die Bewegung faellt weg") sagt, was eigentlich gemeint war. */ @media (prefers-reduced-motion: reduce){ .stoerer{position:relative; margin-top:24px; transition:none} .stoerer::before{animation:none; opacity:.62} .st-bahn i{transition:none} } /* Definitionssatz unter den Knoepfen. Bewusst klein und ruhig: er ist fuer Maschinen und fuer Besucher, die wissen wollen was das hier ist, aber er soll die Frage in der Ueberschrift nicht verwaessern. */ .hf-def{ margin:22px 0 0; max-width:52ch; color:var(--mut); font-size:14.5px; line-height:1.5; text-shadow:0 2px 24px rgba(6,10,14,.95); } /* --- Zwischenzeile im Gang ------------------------------------------------- Zwischen Eingang und Archiv ist der Gang leer und dunkel. Ohne etwas zu lesen wirkt die Strecke wie Wartezeit. Die Zeile sitzt mittig auf dem Fluchtpunkt. */ .hf-line{ position:absolute; z-index:2; left:0; right:0; top:44%; transform:translateY(-50%); text-align:center; padding:0 24px; opacity:0; pointer-events:none; } .hf-line b{ display:block; font-size:clamp(28px,4.1vw,52px); font-weight:700; letter-spacing:-.02em; line-height:1.15; text-shadow:0 2px 50px rgba(6,10,14,.95); } .hf-line b em{font-style:normal; color:var(--acc)} /* Die drei Fragen in den Raeumen. Etwas kleiner als die Kernzeile im Gang und auf zwei Zeilen gedeckelt: ueber die volle Breite gesetzt liefen sie unter die Stufentafel rechts, und eine Frage, die man an der Tafel vorbeilesen muss, ist keine. */ .hf-frage b{font-size:clamp(24px,3.2vw,41px); max-width:22ch; margin:0 auto} /* Zusammengehoerige Woerter mit Bindestrich duerfen nicht mittendrin umbrechen. Der Browser tut das am Bindestrich von selbst, und "Cent-" am Zeilenende mit "Konten" in der naechsten liest sich wie zwei Woerter. */ .hf-line .nb{white-space:nowrap} /* DIREKTES KIND, nicht jedes span (23.08.2026). Diese Regel formatiert die Unterzeile einer Flugzeile. Sie traf auch das INNERHALB des und machte "Cent-Konten" klein, grau und zu einem eigenen Block. Dasselbe Fehlerbild wie bei .alztext > span am 30.07.2026. */ .hf-line > span{ display:block; margin-top:12px; color:var(--mut); font-size:16px; text-shadow:0 2px 24px rgba(6,10,14,.95); } /* --- Stufentafel: Milchglas, rechts, alle vier Stufen immer sichtbar ------- Vorher tauchte je Raum eine einzelne Kachel auf und verschwand wieder. Man sah zwar wo man IST, aber nicht wo im Ablauf. Jetzt stehen alle vier Stufen da, die aktive klappt auf. Struktur nach dem Vorbild vectrfl.com, Material und Farben bleiben deine. */ /* Die Bullet-Listen der Stufentafel sind am 23.08.2026 entfallen (Vorgabe Alex auf fuenf Bildschirmfotos). Die Aussage steht seitdem als Frage IM BILD, je Raum eine. Die Tafel sagt nur noch, wo im Labor man gerade ist -- das war ohnehin ihr erklaerter Zweck. */ .hf-steps{ position:absolute; z-index:2; right:clamp(20px,5vw,80px); bottom:clamp(80px,13vh,140px); width:min(400px,38vw); background:rgba(11,17,23,.52); backdrop-filter:blur(18px) saturate(1.15); -webkit-backdrop-filter:blur(18px) saturate(1.15); border:1px solid rgba(147,166,184,.20); border-radius:var(--r); padding:10px 22px 12px; opacity:0; transform:translateY(18px); pointer-events:none; box-shadow:0 24px 60px -30px rgba(0,0,0,.9); } /* Anklickbar erst, wenn die Tafel auch sichtbar ist. hero-flug.js setzt das, sonst faengt eine unsichtbare Tafel Klicks ab. */ .hf-steps.is-live{pointer-events:auto} /*