/* ===================================================================== DER HERO AUS DEM MASTERPLAN, ALS EIGENE DATEI Wortgleich aus index.html herausgeloest, damit die Einstiegsseite denselben Hero laedt statt einen zweiten zu bauen. index.html bleibt unangetastet und behaelt ihre eigene Fassung: eine Aenderung an der laufenden Seite waere ein Risiko ohne Gegenwert. ===================================================================== */ /* HELIOTROPICA-HERO */ /* ===================================================================== KINEMATISCHES PARALLAX-SCROLLYTELLING Die Huelle ist so hoch wie die Summe aller Szenen. Ihr Inneres klebt und ist genau einen Bildschirm hoch. Dadurch scrollt man DURCH die Serien statt an ihnen vorbei. Links der Verkaufsgrund, Mitte der Beweis. Diese Trennung ist der Grund, warum der Hero konvertiert und nicht nur beeindruckt. ===================================================================== */ /* DIE HOEHE DER HUELLE. Ohne sie ist der Hero null Pixel hoch, es gibt keine Scrollstrecke, und die Leinwand bleibt auf ihrem Standardmass von 300 mal 150 stehen. Am 14.08.2026 genau so gemessen. --h3-scheiben ist die Summe der Bildschirmhoehen aller Serien aus der Tabelle SERIEN, gewichtet nach HOEHEN: sechs Serien zu je einer Hoehe, zusammen 6. Frueher waren es 8: die Farbserie trug 1.6 fuer den scrollgebundenen Farbwaehler, das Finale 2.4 fuer die Umdrehung und den Rueckzug in die Schlussfolie. Beides ist entfallen, also ist auch die Strecke entfallen, die es getragen hat. hero-lauf.js rechnet dieselbe Zahl aus der Tabelle und schreibt sie beim ersten Messen hier hinein. Diese Angabe traegt also nur, bis das Modul geladen ist, aber sie traegt: die Scrollstrecke steht schon vor dem ersten Bild, und das Fenster springt nicht. svh statt vh, damit auf dem Telefon die einfahrende Adressleiste die Strecke nicht bei jedem Wisch neu bemisst. */ /* ===================================================================== DIE DREI SPALTEN UND DIE BEIDEN BAENDER Der Hero ist keine Flaeche, auf der Dinge liegen, sondern ein Raster: oben Ankuendigungsleiste und Kopf. Kein Hero-Text beginnt hier. links der Claim. Hoechstens 34 Prozent der Bildbreite. rechts der Auswaehler. Hoechstens 18 Prozent der Bildbreite. unten Modulangaben, Punkte, Hinweis. Mitte was uebrig bleibt. NUR dort steht das Modul. --h3-oben, --h3-unten, --h3-mitte und --h3-zone-breite werden von hero-lauf.js zur LAUFZEIT gemessen und hier hereingeschrieben. Die Werte hinter dem Komma sind nur der Stand, bis das Modul laeuft. Eine feste Zahl waere bei der naechsten Fensterbreite wieder falsch: bei 1920 ist die Ankuendigungsleiste flach, bei 800 bricht sie um und wird hoeher. Genau daran lag der Serientitel hinter dem Kopf. ===================================================================== */ #hero3d{ position:relative; width:100%; background:#0d1b2e; --h3-akzent:#F4A900; --h3-scheiben:6; --h3-fuge:24px; --h3-oben:132px; --h3-unten:190px; --h3-mitte:50%; --h3-zone-mitte:50vh; --h3-zone-oben:132px; --h3-zone-unten:190px; --h3-zone-breite:52vw; height:calc(var(--h3-scheiben) * 100vh); height:calc(var(--h3-scheiben) * 100svh) } #hero3d-innen{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:block } /* Die Leinwand fuellt das klebende Innere. Ihre Pixelmasse setzt hero-lauf.js beim Messen, Breite der Huelle mal Fensterhoehe mal Geraeteverhaeltnis. Die beiden Angaben hier sind die Anzeigemasse, nicht der Zeichenpuffer. DIE LEINWAND LIEGT UEBER DER TYPOGRAFIE. Hier lag der gemeldete Fehler, dass man die Hintergrundtypografie DURCH die Module sieht. Es war nie ein Fehler der Materialien: im Zeichenpuffer sind die Module voll deckend, gemessen. Die Typografie stand aber mit z-index 1 UEBER der Leinwand, die gar keinen hatte. Sie wurde also nicht durch das Modul hindurch gesehen, sie wurde darauf gemalt. Jetzt liegt sie darunter, und die Leinwand deckt sie dort ab, wo ein Modul steht. Wo keines steht, bleibt die Leinwand durchsichtig und die Typografie kommt durch, so wie es sein soll. */ /* touch-action:pan-y ist der Grund, warum das Drehen das Scrollen nicht blockiert. Der Browser behaelt das senkrechte Wischen fuer sich und scrollt wie immer. Das waagerechte Wischen bleibt bei der Leinwand und dreht das Modul. Ohne diese Zeile muesste die Leinwand das Scrollen selbst nachbauen, und das ruckelt immer. */ #hero3d-leinwand{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; touch-action:pan-y; cursor:grab } #hero3d-leinwand:active{ cursor:grabbing } /* Die kinetische Typografie im Hintergrund. z-index 0, hinter der Leinwand, aber vor dem Farbverlauf der Huelle. SIE IST DEUTLICH ZURUECKGENOMMEN. Vorher stand sie mit bis zu 300 Pixeln Schriftgroesse und einer Deckkraft bis 0.105 im Bild und rang damit mit dem Modul um die Aufmerksamkeit. Das Modul ist der Beweis, die Typografie ist die Tiefe dahinter. Jetzt hoechstens 170 Pixel, und ihre Deckkraft setzt hero-lauf.js je Bild auf hoechstens 0.006. Die Grenze ist nicht geschaetzt: weiss auf einem Grund der Helligkeit L ergibt bei Deckkraft o die Helligkeit L plus o mal (255 minus L). Gemessen wird an der DUNKELSTEN Stelle des Verlaufs hinter der Schrift, denn dort faellt der Abstand am groessten aus. Sie liegt am Ende der Strecke bei 11. Mit 0.004 sind das 12.0, also das 1.089fache. Gefordert ist hoechstens das 1.15fache. */ #hero3d-typo{ position:absolute; left:50%; top:50%; z-index:0; font-size:clamp(54px,9.5vw,170px); font-weight:900; letter-spacing:-.045em; color:#fff; white-space:nowrap; pointer-events:none; user-select:none; transform:translate(-50%,-50%); opacity:.005 } /* Links: der Grund zu kaufen. Er steht in seiner Spalte und wird darin mittig gehalten, statt am halben Bild zu haengen. Dadurch kann er weder unter den Kopf noch ueber die Modulangaben geraten, und die Module wissen, wo seine Kante ist. Die Schriftgroessen stehen auf den erlaubten Stufen 10, 13, 15, 18, 24, 32, 48, 64 und nicht auf einer fliessenden Zwischengroesse: eine Stufe ist nachpruefbar, ein clamp nicht. */ /* DIE SPALTE IST BREITER GEWORDEN, und das ist die Behebung des gemeldeten Umbruchs. Bei 400 Pixeln und Schriftgroesse 48 brauchte "EU-Ursprungszeugnis zu jeder Lieferung." vier Zeilen, die Landesfarben sogar fuenf, und die Enden franste es aus. Das laengste Wort der Tabelle, EU-Ursprungszeugnis, misst bei 48 Pixeln rund 500 Pixel. Eine Spalte, die schmaler ist als ihr laengstes Wort, kann gar nicht sauber brechen. Mit 560 passt es in eine Zeile und die Ueberschrift kommt mit hoechstens drei aus. */ #hero3d-claim{ position:absolute; left:clamp(20px,4vw,72px); top:var(--h3-oben); bottom:var(--h3-unten); z-index:6; width:min(560px,34vw); max-width:36vw; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; color:#fff; pointer-events:none } #hero3d-claim .h3-marke{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--h3-akzent); border:1px solid currentColor; padding:6px 13px; border-radius:999px; margin-bottom:18px; opacity:.92 } /* DER CLAIM IST EIN STAR, und Stars sind gross. 32 auf dem schmalen Schirm, 48 sobald Platz ist. Alles andere im Hero ausser dem Modul ist ausdruecklich kleiner geworden, damit diese beiden allein auffallen. */ /* text-wrap:balance verteilt die Zeilen gleichmaessig, statt die ersten voll zu machen und den Rest haengen zu lassen. Das letzte Wort haelt zusaetzlich hero-lauf.js ueber ein festes Leerzeichen am vorletzten fest, siehe ohneWaise. Das Stilblatt allein verspricht ueber das letzte Wort nichts. */ #hero3d-claim h3{ margin:0 0 14px; font-size:24px; font-weight:900; line-height:1.10; letter-spacing:-.03em; text-shadow:0 3px 30px rgba(0,0,0,.55); text-wrap:balance; hyphens:auto } #hero3d-claim p{ margin:0; font-size:15px; line-height:1.6; color:rgba(255,255,255,.82) } /* Oben Mitte: Serie und Technik. Sie beginnt UNTERHALB des gemessenen oberen Bandes, nicht bei einer geschaetzten Hoehe, und sie steht ueber der Mitte der Modulzone und nicht ueber der Mitte des Bildes. */ /* SEINE BREITE HAENGT NICHT MEHR AN DER ZONE. Die Zone beginnt jetzt unterhalb dieses Blocks, also bestimmt seine Hoehe die Zone. Stuende seine Breite umgekehrt auf der Zone, jagten sich beide: schmalere Zone, mehr Umbruch, hoeherer Block, noch kleinere Zone. Eine feste Breite bricht den Kreis. */ #hero3d-serie{ position:absolute; left:var(--h3-mitte); top:calc(var(--h3-oben) + var(--h3-fuge)); transform:translateX(-50%); z-index:6; text-align:center; color:#fff; pointer-events:none; width:min(760px, 46vw) } /* Serientitel 24 und Technikzeile 13, und dabei bleibt es auch auf dem breiten Schirm. Frueher wuchs der Titel ab 1200 Pixeln auf 32 und stand damit so gross da wie der Claim. Zwei gleich grosse Ueberschriften sind keine Ordnung, das ist ein Wettbewerb. */ #hero3d-serie h2{ margin:0; font-size:24px; font-weight:900; letter-spacing:.02em; line-height:1.15 } #hero3d-serie p{ margin:6px 0 0; font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.58) } /* Unten Mitte: Leistung und Masse je Modul. Sie stehen UNTER der Modulgruppe, in ihrem eigenen Band, und koennen deshalb nicht mehr auf den Modulen liegen. */ #hero3d-module{ position:absolute; left:var(--h3-mitte); bottom:clamp(80px,10.5vh,116px); transform:translateX(-50%); z-index:6; display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(12px,2.2vw,40px); width:min(760px,92vw); color:#fff; pointer-events:none; text-align:center } #hero3d-module div{ min-width:76px } /* Watt 18, Masse und Zellen 13. Sie sind der Beleg zum Modul und nicht die Botschaft, deshalb stehen sie eine Stufe unter dem Serientitel. Die Abstufung nach Deckkraft ist entfallen: es steht nur noch das im Band, was auch im Bild steht, da gibt es nichts mehr hervorzuheben. */ #hero3d-module b{ display:block; font-size:18px; font-weight:900 } #hero3d-module span{ display:block; font-size:13px; font-weight:600; letter-spacing:.07em; color:rgba(255,255,255,.5); margin-top:4px } /* DIE DRITTE ZEILE IST LESBAR. Sie stand in der Akzentfarbe der Serie auf dem Verlauf derselben Serie, bei COLOURED also 0x904324 auf 0x2a1610, gemessen ein Kontrast von 2.4 zu 1 gegen die geforderten 4.5. Die Farbe kommt jetzt aus --h3-akzent-hell: hero-lauf.js mischt den Akzent so weit zu Weiss, bis der Kontrast gegen den wirklichen Grund an dieser Stelle 5.0 erreicht. Der Farbton der Serie bleibt, die Lesbarkeit ist gerechnet. Die Deckkraft ist auf 1, denn eine Deckkraft unter eins nimmt genau den Kontrast wieder weg, der eben gerechnet wurde. */ #hero3d-module i{ display:block; font-style:normal; font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--h3-akzent-hell, #fff); margin-top:6px; opacity:1 } /* ===================================================================== DER AUSWAEHLER Er sieht aus wie der frueher scrollgebundene Farbwaehler, runde Punkte mit Beschriftung in der rechten Spalte, und er steht jetzt bei JEDER Serie. Ein Klick wechselt das Modul, er scrollt nicht. ALLE SERIEN LIEGEN UEBEREINANDER IM SELBEN RASTERFELD. Das ist kein Kunstgriff um seiner selbst willen. Die Breite dieser Spalte geht in die Zone des Moduls ein, und die Reihen sind verschieden breit: TERRACOTTA ist ein langes Wort, 450 ist ein kurzes. Stuende immer nur die Reihe der laufenden Serie im Dokument, waere die Spalte bei jedem Serienwechsel anders breit, die Zone wuerde springen und das Modul mit ihr. Uebereinander gelegt ist die Spalte so breit wie die breiteste Reihe, immer, und die Zone steht still. ===================================================================== */ /* ER KLEBT NICHT MEHR AM FENSTERRAND. Ort und Hoehe setzt hero-lauf.js, sobald das Modul steht: waagerecht 68 Pixel neben seiner rechten Kante, senkrecht auf seiner Mitte. Die Angaben hier sind der Stand, bis das Modul laeuft, und die Fassung fuer den schmalen Schirm. Dazu die ruhige Traegerflaeche. Ohne sie schwebten die Knoepfe im Bild und gehoerten optisch zu nichts. */ /* PUNKT 3, 03.09.2026. Der rechte Umschalter traegt das Design aus dox/versionen/29.08.-1942-index-final-wird-index, dort .neun-waehler und .nw, und zwar auf allen drei Folien. Die Masse sind von dort uebernommen: Tafel mit 10 px Polster, 18 px Radius und 5 px Fuge, Zeilen als Pillen in 11,5 px mit 0.08em Sperrung, der Punkt 10 px mit innerem und aeusserem Ring. Einzige Zutat ist die Zielgroesse von 44 px Hoehe je Zeile, die der Bezug nicht hatte. */ /* An der Mitte der Zone ausgerichtet, nicht am eigenen Band. Damit liegen Umschalter, Container und Modul auf EINER Hoehe. */ /* Der Umschalter haengt an der Zonenmitte. Die halbe Eigenhoehe zieht ihn die Ebenenschicht zurueck, ueber ihr Feld vor, so wie sie es bei Serientitel und Kennzeichnungen mit translateX schon tut. Ein eigenes transform hier wuerde sie je Bild ueberschreiben. */ #hero3d-waehler{ position:absolute; right:clamp(14px,2vw,28px); top:var(--h3-zone-mitte); bottom:auto; transform:translateY(-50%); z-index:7; display:grid; align-content:center; justify-items:stretch; width:max-content; max-width:18vw; padding:10px; border-radius:18px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px); box-shadow:0 1px 2px rgba(0,0,0,.18), 0 18px 44px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14) } .h3-wahl{ grid-area:1/1; display:grid; gap:5px; align-content:center; justify-items:stretch; opacity:0; pointer-events:none; transition:opacity .35s } .h3-wahl.an{ opacity:1; pointer-events:auto } .h3-w{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 14px 8px 11px; border-radius:999px; border:1px solid transparent; background:transparent; cursor:pointer; white-space:nowrap; font:800 11.5px/1 var(--satz); letter-spacing:.08em; color:rgba(255,255,255,.45); transition:color .22s, background .22s, border-color .22s, transform .12s } .h3-w:hover{ color:rgba(255,255,255,.9); background:rgba(255,255,255,.06) } .h3-w:active{ transform:scale(.97) } .h3-w.an{ color:#fff; border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.09) } .h3-w-punkt{ width:10px; height:10px; border-radius:999px; flex:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 0 0 1px rgba(255,255,255,.34); transition:transform .22s, box-shadow .22s } .h3-w:hover .h3-w-punkt{ transform:scale(1.22) } .h3-w.an .h3-w-punkt{ transform:scale(1.3); box-shadow:0 0 0 1px rgba(255,255,255,.55) } /* Die Punkte. Ohne Scrollen laesst sich damit blaettern. */ #hero3d-punkte{ position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(26px,3.6vh,44px); z-index:9; display:flex; gap:10px } .h3-punkt{ width:9px; height:9px; border-radius:50%; border:0; padding:0; background:rgba(255,255,255,.3); cursor:pointer; transition:width .3s cubic-bezier(.22,.7,.3,1), background .3s } .h3-punkt.an{ width:32px; border-radius:99px; background:var(--h3-akzent) } #hero3d-punkte.wach .h3-punkt{ background:rgba(255,255,255,.45) } #hero3d-punkte.wach .h3-punkt.an{ background:var(--h3-akzent) } #hero3d-hinweis{ position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(58px,7.4vh,84px); z-index:9; font-size:10px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.42); transition:opacity .4s } /* Die Textbloecke treten beim Serienwechsel weich ein. Der Claim wird nicht mehr ueber translateY zentriert, sondern von seiner Spalte getragen. Sein Eintritt darf deshalb nur noch waagrecht schieben: ein translateY im Bild wuerde ihn aus seinem Band heben. */ .ein{ animation:h3ein .6s cubic-bezier(.22,.7,.3,1) both } @keyframes h3ein{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1 } } #hero3d-claim.ein{ animation-name:h3einLinks } @keyframes h3einLinks{ from{ opacity:0; transform:translateX(-22px) } to{ opacity:1; transform:translateX(0) } } #hero3d-module.ein{ animation-name:h3einUnten } @keyframes h3einUnten{ from{ opacity:0; transform:translateX(-50%) translateY(14px) } to{ opacity:1; transform:translateX(-50%) translateY(0) } } /* Der Serientitel tritt von oben ein, also GEGEN den Kopf. Sein Anlauf zaehlt deshalb zum Sicherheitsabstand dazu und darf ihn nicht aufbrauchen. Bei 800 Pixeln ist die Fuge 16, der Anlauf waren 14: gemessen stand der Titel im Anlauf auf 78, die Unterkante des Kopfes liegt auf 76. Zwei Pixel sind kein Abstand, das ist ein Zufall. Mit 8 bleiben immer mindestens 8 Pixel Luft, und die Bewegung ist weiterhin zu sehen. */ #hero3d-serie.ein{ animation-name:h3einOben } @keyframes h3einOben{ from{ opacity:0; transform:translateX(-50%) translateY(-8px) } to{ opacity:1; transform:translateX(-50%) translateY(0) } } /* Unter 1100 Pixeln wird der Auswaehler eine Stufe kleiner, von 13 auf 10. Das ist kein Schmuck: seine Spalte ist so breit wie ihr laengstes Wort, TERRACOTTA, und diese Breite geht der Modulzone verloren. Gemessen bei 800 Pixeln: die Spalte nahm 137 Pixel, die Zone blieb bei 340. Auf der Folie der Landesfarben stehen dort drei Module nebeneinander, und die wurden dadurch 146 Pixel hoch. */ @media (max-width:1099px){ .h3-w{ font-size:10px; padding:6px 10px; gap:8px } .h3-w-punkt{ width:9px; height:9px } } /* Ab 1200 Pixeln waechst NUR der Claim, und zwar auf die Stufe 48. Er und das Modul sind die beiden Stars, alles andere bleibt stehen, wo es steht. Wieder Stufen, kein clamp: eine Stufe ist nachpruefbar, ein clamp nicht. */ /* Die Stufen des Claims. 24 auf dem schmalen dreispaltigen Schirm, 32 ab 1100, 48 ab 1200. Wieder Stufen und kein clamp: eine Stufe ist nachpruefbar. Die Grenzen sind so gewaehlt, dass die Ueberschrift auf jeder Stufe mit hoechstens drei Zeilen auskommt, gemessen bei 800 und bei 1920. */ @media (min-width:1100px){ #hero3d-claim h3{ font-size:32px } } @media (min-width:1200px){ #hero3d-claim h3{ font-size:48px } } /* Die drei Spalten tragen bis 700 Pixel hinunter. Erst darunter wird gestapelt, denn bei 800 waeren drei Spalten noch bequem und der Claim gehoert dort weiter nach links. Frueher lag diese Grenze bei 900, dadurch stand bei 800 der Claim quer ueber dem ganzen Bild. */ @media (max-width:699px){ #hero3d-claim{ left:18px; right:18px; width:auto; max-width:none; top:auto; bottom:clamp(150px,22vh,210px); justify-content:flex-end } #hero3d-claim h3{ font-size:24px } #hero3d-claim p{ font-size:13px } #hero3d-claim.ein{ animation-name:h3ein } /* Die Angaben bleiben VOLLZAEHLIG, auch auf dem schmalen Schirm. Frueher wurden hier alle bis auf die erste ausgeblendet. Das war genau die Unstimmigkeit, die der Bauherr gemeldet hat: im Bild standen fuenf Module, darunter eine Angabe. Sie werden jetzt kleiner und brechen um, sie verschwinden nicht. */ #hero3d-module{ gap:10px 14px; bottom:56px } #hero3d-module i{ display:none } #hero3d-module div{ min-width:0 } #hero3d-module b{ font-size:15px } #hero3d-module span{ font-size:10px } #hero3d-waehler{ right:10px; max-width:26vw; padding:8px 9px; border-radius:16px } /* Auf dem Telefon darf der Serientitel nicht in einer 46 vw schmalen Spalte stehen. Er bricht dort auf vier Zeilen um, wird 144 Pixel hoch und schiebt die Zone des Moduls nach unten aus dem Bild. */ #hero3d-serie{ width:min(760px,92vw) } .h3-w{ font-size:10px; padding:6px 10px; gap:8px } .h3-w-punkt{ width:9px; height:9px } } @media (prefers-reduced-motion:reduce){ .ein{ animation:none } } /* /HELIOTROPICA-HERO */ /* ===================================================================== BERUEHRUNGSFLAECHEN AUF SCHMALEN GERAETEN Nur in dieser Fassung, index.html bleibt unberuehrt. Der Wattwaehler und die Foliepunkte sind so gross, wie das Auge sie braucht, aber nicht so gross, wie ein Daumen sie trifft: gemessen achtundzwanzig Bedienpunkte unter vierzig Pixel Hoehe. Die Flaeche waechst ueber Innenabstand, das Aussehen bleibt. ===================================================================== */ @media (max-width:1099px){ .h3-w{ padding-top:8px; padding-bottom:8px } .h3-punkt{ position:relative } .h3-punkt::after{ content:""; position:absolute; left:50%; top:50%; width:40px; height:40px; transform:translate(-50%,-50%) } } /* ===================================================================== SCHMALE GERAETE, NACHTRAG Nur in dieser Fassung, index.html bleibt unberuehrt. hero-lauf.js misst die Mitte des Bildes und schreibt sie als --h3-mitte in das Element. Auf breiten Schirmen stimmt das. Auf einem 390 Pixel breiten Telefon liegt die gemessene Mitte so weit links, dass Serientitel und Angaben, die sich an ihr ausrichten und um die halbe eigene Breite zurueckversetzt werden, ueber den linken Rand hinauslaufen: gemessen 173 Pixel Ueberhang und damit ein waagerechter Scrollbalken auf der ganzen Seite. Deshalb gilt hier die geometrische Mitte, und jeder Block bleibt im Fenster. Die Zahl aus der Messung bleibt fuer das Modell gueltig, sie wird in JavaScript gerechnet und nicht hier. ===================================================================== */ @media (max-width:699px){ #hero3d{ --h3-mitte:50% !important } #hero3d-serie{ left:50% !important; width:calc(100vw - 24px) !important; max-width:calc(100vw - 24px) !important } #hero3d-module{ left:50% !important; width:calc(100vw - 24px) !important; max-width:calc(100vw - 24px) !important; flex-wrap:wrap; justify-content:center } #hero3d-claim{ left:12px !important; right:12px !important; width:auto !important; max-width:none !important } #hero3d-typo{ max-width:100vw; overflow:hidden } } /* ===================================================================== E6 LOKALE SCHRIFTEN, CLS NULL Blueprint Eingriff 3. Alle @font-face hier, kein Google Fonts. Metrik-Ersatz (size-adjust, ascent-override, descent-override) haelt den Layout-Shift beim Tausch von System- auf Hausschrift bei null. ===================================================================== */ @font-face{ font-family:'Barlow'; src:url('/lib/schriften/Barlow-600-latin-ext.woff2') format('woff2'), url('/lib/schriften/Barlow-600-latin.woff2') format('woff2'); font-weight:600;font-style:normal;font-display:swap } @font-face{ font-family:'Barlow'; src:url('/lib/schriften/Barlow-700-latin-ext.woff2') format('woff2'), url('/lib/schriften/Barlow-700-latin.woff2') format('woff2'); font-weight:700;font-style:normal;font-display:swap } @font-face{ font-family:'Barlow'; src:url('/lib/schriften/Barlow-800-latin-ext.woff2') format('woff2'), url('/lib/schriften/Barlow-800-latin.woff2') format('woff2'); font-weight:800;font-style:normal;font-display:swap } @font-face{ font-family:'Barlow'; src:url('/lib/schriften/Barlow-400-latin-ext.woff2') format('woff2'), url('/lib/schriften/Barlow-400-latin.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap } @font-face{ font-family:'Barlow'; src:url('/lib/schriften/Barlow-500-latin-ext.woff2') format('woff2'), url('/lib/schriften/Barlow-500-latin.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap } @font-face{ font-family:'Barlow Condensed'; src:url('/lib/schriften/BarlowCondensed-700-latin-ext.woff2') format('woff2'), url('/lib/schriften/BarlowCondensed-700-latin.woff2') format('woff2'); font-weight:700;font-style:normal;font-display:swap } @font-face{ font-family:'Barlow Condensed'; src:url('/lib/schriften/BarlowCondensed-800-latin-ext.woff2') format('woff2'), url('/lib/schriften/BarlowCondensed-800-latin.woff2') format('woff2'); font-weight:800;font-style:normal;font-display:swap } @font-face{ font-family:'Barlow Condensed'; src:url('/lib/schriften/BarlowCondensed-600-latin-ext.woff2') format('woff2'), url('/lib/schriften/BarlowCondensed-600-latin.woff2') format('woff2'); font-weight:600;font-style:normal;font-display:swap } @font-face{ font-family:'IBM Plex Mono'; src:url('/lib/schriften/IBMPlexMono-400-latin-ext.woff2') format('woff2'), url('/lib/schriften/IBMPlexMono-400-latin.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap } @font-face{ font-family:'IBM Plex Mono'; src:url('/lib/schriften/IBMPlexMono-500-latin-ext.woff2') format('woff2'), url('/lib/schriften/IBMPlexMono-500-latin.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap } @font-face{ font-family:'IBM Plex Mono'; src:url('/lib/schriften/IBMPlexMono-600-latin-ext.woff2') format('woff2'), url('/lib/schriften/IBMPlexMono-600-latin.woff2') format('woff2'); font-weight:600;font-style:normal;font-display:swap } @font-face{ font-family:'Barlow Ersatz'; src:local('Arial'); size-adjust:98.5%;ascent-override:103%;descent-override:27%;font-weight:400 800 } /* ===================================================================== E5 LCP-SOFORTMALUNG .hero-sofort zeigt Folie-1-Headline sofort als Text, bevor Three.js laedt. Die Canvas blendet per Uebergang darueber, dann wird hero-sofort ausgeblendet. aria-hidden="true" weil Duplikat. ===================================================================== */ .hero-sofort{ position:absolute;inset:0;z-index:2;display:flex;flex-direction:column; align-items:flex-start;justify-content:center; padding:clamp(80px,10svh,140px) clamp(20px,6vw,100px) 0; pointer-events:none;contain:layout style } .hero-sofort .hs-etikett{ font:600 11px/1 'IBM Plex Mono','Barlow Ersatz',monospace; letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.65); margin:0 0 14px } .hero-sofort .hs-kopf{ font:800 clamp(34px,5.5vw,78px)/0.94 'Barlow Condensed','Barlow Ersatz', 'Arial Narrow',sans-serif; letter-spacing:-.02em;color:#fff;margin:0 0 10px; text-wrap:balance;max-width:14ch } .hero-sofort .hs-sub{ font:600 clamp(15px,1.4vw,20px)/1.4 'Barlow','Barlow Ersatz',sans-serif; color:rgba(255,255,255,.8);margin:0;max-width:42ch } #hero3d-leinwand.bereit{animation:leinwand-ein var(--zeit-max,260ms) ease-out forwards} @keyframes leinwand-ein{from{opacity:0}to{opacity:1}} /* Solange die Leinwand nicht laeuft, sind die Behaelter der Folien leer. Ein leerer Glasbehaelter ist ein sichtbarer Kasten ohne Inhalt, gemessen am 02.09.2026 02:11 rechts im Bild. Leer heisst weg. */ #hero3d-waehler:empty,#hero3d-claim:empty,#hero3d-serie:empty, #hero3d-module:empty,#hero3d-punkte:empty{display:none!important} /* Die Sofortmalung weicht erst, wenn die Leinwand wirklich steht. Ein blindes Ausblenden nach Zeit hat den Hero leer stehen lassen, wenn Three.js nicht laedt, siehe Messung 02.09.2026 02:11. */ .hero-sofort.verblasst{opacity:0;visibility:hidden; transition:opacity var(--zeit-max,260ms) ease-out} /* ===================================================================== PUNKT 4, DAS ANGEBOT RECHTS. 03.09.2026, Noahs Wortlaut. Zwei Kinder, der Titel steht ausserhalb. Oben der Beweis, warum es sich rechnet, darunter die Handlung. Die Reihenfolge ist die Konversion: erst der Grund, dann die Frage. Die beiden Ortsknoepfe tragen das Design aus dox/versionen/31.08.-0130-vor-blueprint, dort .kf-karte .lb-k: zwei Spalten, Name fett, Zeile darunter klein, der gewaehlte mit goldener Kante und goldenem Schleier. ===================================================================== */ /* Aussen das Band der Zone, damit die Mitte stimmt. Innen der Kasten, der nur so hoch ist wie sein Inhalt. Ohne diese Trennung malte das Glas ueber die ganze Zonenhoehe, gemessen 03.09.2026. */ #mp-angebot{ position:absolute; left:clamp(20px,4vw,72px); top:var(--h3-zone-oben); bottom:var(--h3-zone-unten); z-index:6; width:min(400px,32vw); display:grid; align-content:center; background:none; border:0; padding:0; box-shadow:none } /* Glas wie im Dashboard, auf dunklem Grund umgekehrt. 03.09.2026. */ #mp-angebot .ma-kasten{ display:grid; gap:14px; padding:clamp(16px,1.8vw,22px); border-radius:18px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px); box-shadow:0 1px 2px rgba(0,0,0,.18), 0 18px 44px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14); color:#fff } #mp-angebot .ma-titel{ margin:0; font:800 clamp(17px,1.5vw,21px)/1.2 var(--anzeige); letter-spacing:-.01em; color:#fff } #mp-angebot .ma-teil{ display:grid; gap:8px; padding-top:13px; border-top:1px solid rgba(255,255,255,.13) } #mp-angebot .ma-beweis p{ margin:0; font:400 13px/1.45 var(--satz); color:rgba(255,255,255,.78) } #mp-angebot .ma-beweis b{ font-weight:800; color:#fff } #mp-angebot .ma-frage{ margin:0; font:700 13px/1.4 var(--satz); color:#fff } #mp-angebot .ma-wahl{ display:grid; grid-template-columns:1fr 1fr; gap:8px } #mp-angebot .ma-k{ min-height:56px; padding:8px 12px; border-radius:8px; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.05); color:#fff; text-align:left; display:grid; align-content:center; gap:3px; cursor:pointer; transition:border-color .18s, background .18s } #mp-angebot .ma-k b{ font:700 14px/1.15 var(--satz) } #mp-angebot .ma-k span{ font:400 10.5px/1.2 var(--satz); color:rgba(255,255,255,.7) } #mp-angebot .ma-k:hover{ border-color:rgba(255,255,255,.45) } #mp-angebot .ma-k.an{ border-color:var(--gold,#F4A900); background:rgba(244,169,0,.16) } #mp-angebot .ma-k.an span{ color:rgba(255,255,255,.85) } #mp-angebot .ma-ruf{ min-height:52px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:999px; text-decoration:none; background:var(--gold,#F4A900); color:#002B49; font:800 14px/1 var(--satz); letter-spacing:.01em; transition:background .18s, transform .12s } #mp-angebot .ma-ruf svg{ width:18px; height:18px } #mp-angebot .ma-ruf:hover{ background:#FFBE1A; transform:translateY(-1px) } #mp-angebot .ma-ruf:active{ transform:translateY(0) } @media (max-width:900px){ #mp-angebot{ display:none } } /* Der Container gehoert auf die erste Folie und nur dorthin. Noahs Wort vom 03.09.2026. Er geht wie jede andere Ebene, also nach links hinaus, und nicht mit einem Schnitt. */ /* Der Container links gehoert auf Folie 1 und nur dorthin. Ueber display und nicht ueber opacity: die Klasse .ein traegt eine Animation, und eine Animation schlaegt jeden Inline-Stil und jede normale Deklaration. display schlaegt sie nicht. Gemessen 03.09.2026: mit opacity stand der Container auf Folie 2 und 3 wieder voll im Bild. */ #hero3d:not(.folie-eins) #mp-angebot{ display:none!important } /* ===================================================================== DER UMSCHALTER IST KOMPAKT. 03.09.2026, Noahs Wort. Bezug dox/versionen/29.08.-1942-index-final-wird-index, dort .nw. Diese Regeln stehen zuletzt und mit important, weil ueber die Monate an fuenf Stellen Hoehen hineingeschrieben wurden. Eine Stelle, eine Wahrheit. ===================================================================== */ #hero3d-waehler .h3-wahl{ gap:5px!important } #hero3d-waehler .h3-w, #f4-wahl .h3-w{ min-height:0!important; height:auto!important; padding:8px 14px 8px 11px!important; font:800 11.5px/1 var(--satz)!important; letter-spacing:.08em!important; gap:10px!important } /* Der Punkt traegt die Modulfarbe und braucht deshalb einen Ring, damit auch ein schwarzes Modul auf dunklem Grund eine Kante hat. Masse wie im Bezug. */ #hero3d-waehler .h3-w-punkt, #f4-wahl .h3-w-punkt{ width:12px!important; height:12px!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 0 0 1px rgba(255,255,255,.34)!important } #hero3d-waehler .h3-w.an .h3-w-punkt, #f4-wahl .h3-w.an .h3-w-punkt{ box-shadow:0 0 0 1px rgba(255,255,255,.7)!important } /* Die gewaehlte Zeile steht weiss, nicht in der Akzentfarbe. So im Bezug dox/versionen/29.08.-1942-index-final-wird-index: die Farbe traegt der Punkt, die Auswahl tragen Flaeche und Rand. 03.09.2026. */ #hero3d-waehler .h3-w.an, #hero3d-waehler .h3-w[aria-pressed="true"], #f4-wahl .h3-w.an{ color:#fff!important } /* ===================================================================== DER EINTRITT BEIM FOLIENWECHSEL. 03.09.2026, Vorlage /controlxenter/dox/masterplan/, dort woertlich: .ein{ animation:h3ein .6s cubic-bezier(.22,.7,.3,1) both } Jede Ebene kommt aus IHRER Richtung: oben von oben, unten von unten, der Umschalter von rechts, der Container von links. Die Keyframes tragen die Grundlage des Elements mit, sonst springt ein mittig gestelltes Element beim Start der Animation um seine halbe Breite. ===================================================================== */ .ein{ animation:h3ein .6s cubic-bezier(.22,.7,.3,1) both } /* Der Eintritt beginnt bei 0.35 und nicht bei 0. Bei null blitzte im Augenblick des Wechsels ein leeres Bild auf, gemessen 03.09.2026 bei Scrollstand 0.36. Punkt 7 verbietet den leeren Uebergang. */ @keyframes h3ein{ from{ opacity:.35 } to{ opacity:1 } } #hero3d-serie.ein{ animation-name:h3einOben } @keyframes h3einOben{ from{ opacity:.35; transform:translateX(-50%) translateY(-20px) } to { opacity:1; transform:translateX(-50%) translateY(0) } } #hero3d-module.ein{ animation-name:h3einUnten } @keyframes h3einUnten{ from{ opacity:.35; transform:translateX(-50%) translateY(20px) } to { opacity:1; transform:translateX(-50%) translateY(0) } } #hero3d-waehler.ein{ animation-name:h3einRechts } @keyframes h3einRechts{ from{ opacity:.35; transform:translateY(-50%) translateX(28px) } to { opacity:1; transform:translateY(-50%) translateX(0) } } #mp-angebot.ein, #hero3d-claim.ein{ animation-name:h3einLinks } @keyframes h3einLinks{ from{ opacity:.35; transform:translateX(-28px) } to { opacity:1; transform:translateX(0) } } @media (prefers-reduced-motion:reduce){ .ein{ animation:none } } /* ══════════════════════════════════════════════════════════════════ HERO-OVERLAYS, Noah 22.09.2026 Alles haengt an denselben Variablen wie das Modul-Lockup, die das Skript je Folie mit der echten Modulgeometrie fuellt: --h3-el-links linke Kante des mittleren Moduls, px --h3-el-breit seine Breite, px --h3-el-unten seine Unterkante, px --h3-el-mitte seine senkrechte Mitte, px Damit folgen Botschaft, Lockup und Pfeil dem Modul, statt geraten zu stehen. ══════════════════════════════════════════════════════════════════ */ /* PUNKT 1 und 9 · Die Botschaft: dieselbe Logik wie das Lockup, nur NEBEN dem Modul statt darauf. Sie endet 44 px vor der Modulkante. */ #hero3d .h3-botschaft{ position:absolute; z-index:11; /* 22.09.2026, Noah: weiter nach rechts. Sie sitzt mittig im freien Raum links vom Modul, statt am Fensterrand zu kleben. */ /* 22.09.2026, Noah: genau mittig zwischen Fensterrand und Modulkante. Der freie Raum ist 0 bis --h3-el-links. */ left:calc(var(--h3-el-links,42vw) / 2); width:min(46ch, calc(var(--h3-el-links,42vw) - 56px)); top:var(--h3-el-mitte,50%); transform:translate(-50%, -50%); opacity:1; transition:opacity .45s var(--kurve,ease); } #hero3d.h3-auftakt .h3-botschaft, #hero3d.h3-intro-dunkel .h3-botschaft{ opacity:0; pointer-events:none } .hb-satz{ display:none } .hb-satz.an{ display:block; animation:hbEin .42s var(--kurve,ease) both } @keyframes hbEin{ from{ opacity:0; translate:0 10px } to{ opacity:1; translate:0 0 } } #hero3d .h3-botschaft h2{ margin:0; color:#FFFFFF; letter-spacing:-.015em; white-space:pre-line; font:900 clamp(30px,3.0vw,46px)/1.04 'Barlow Condensed','Barlow',sans-serif; text-shadow:0 2px 22px rgba(0,12,22,.6); } #hero3d .h3-botschaft p{ margin:12px 0 0; color:rgba(255,255,255,.9); white-space:pre-line; font:600 clamp(15px,1.24vw,19px)/1.4 'Barlow',sans-serif; text-shadow:0 1px 14px rgba(0,12,22,.55); } #hero3d .hb-rufe{ display:flex; gap:9px; flex-wrap:nowrap; margin:20px 0 0 } #hero3d .hb-ruf{ display:inline-flex; align-items:center; justify-content:center; min-block-size:42px; padding:0 18px; border-radius:999px; font:800 15px/1 'Barlow',sans-serif; text-decoration:none; white-space:nowrap; transition:transform .2s var(--kurve,ease), background .2s var(--kurve,ease) } #hero3d .hb-ruf-stark{ background:var(--gold,#F4A900); color:var(--navy,#002B49) } #hero3d .hb-ruf-stark:hover{ transform:translateY(-2px); background:#FFB81A } #hero3d .hb-ruf-leise{ background:rgba(255,255,255,.14); color:#FFFFFF; border:1px solid rgba(255,255,255,.44) } #hero3d .hb-ruf-leise:hover{ transform:translateY(-2px); background:rgba(255,255,255,.22) } /* PUNKT 6 · Das Lockup: keine weisse Pille. Logo und Serienname nebeneinander, 15 px UNTER der Modulunterkante. */ /* 22.09.2026, Noah: die weisse Pille faellt samt ihrer Schrift weg. Es bleiben Logo und Serientyp. */ #hero3d .h3-el-art, #hero3d.h3-el-auf-modul .h3-el-art{ display:none !important } #hero3d .h3-el-name, #hero3d.h3-el-auf-modul .h3-el-name{ overflow:visible !important; text-overflow:clip !important; white-space:nowrap !important; color:var(--gold,#F4A900) !important; } #hero3d .h3-el-titel{ flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:12px !important; padding:0 !important; border-radius:0 !important; } #hero3d .h3-el-kopf{ flex-direction:row !important; gap:10px !important } /* PUNKT 7 · Der Fortschritt: tiefer und doppelt so stark. */ #hero3d #mp-punkte{ bottom:-22px !important } #hero3d #mp-punkte .mp-punkt::before, #hero3d #mp-punkte button::before{ height:18px !important; border-radius:99px !important } /* PUNKT 4 · Der rechte Pfeil in der Mitte des Moduls, 40 px hoeher. */ /* 22.09.2026, Noah: beide Pfeile stehen IMMER gleich weit von der Kante des mittleren Elements — auch bei den breiten Faechern. Die Breite meldet die Szene als --h3-mitte-halb. */ #hero3d .h3-mob-pfeil.links, #hero3d .h3-mob-pfeil.rechts{ translate:-50% 0; } /* 23.09.2026, Noah: "Die Pfeile sind zu hoch." Am Rechner gilt die Modulmitte, die das Skript setzt. */ @media (max-width:1024px){ #hero3d .h3-mob-pfeil.links, #hero3d .h3-mob-pfeil.rechts{ top:calc(var(--h3-el-mitte,50%) - 34px) !important } } #hero3d .h3-mob-pfeil.links{ display:grid !important; right:auto !important; left:calc(50vw - var(--h3-mitte-halb,14vw) - 52px) !important; } #hero3d .h3-mob-pfeil.rechts{ right:auto !important; left:calc(50vw + var(--h3-mitte-halb,14vw) + 52px) !important; } @media (max-width:1024px){ #hero3d .h3-botschaft{ left:16px; right:16px; width:auto; top:auto; bottom:clamp(104px,18vh,180px); transform:none; } #hero3d .h3-botschaft h2{ font-size:clamp(24px,6vw,34px) } #hero3d .h3-botschaft p{ font-size:clamp(13px,3.3vw,15px) } #hero3d .hb-ruf{ min-block-size:44px; flex:1 1 0; padding:0 10px; font-size:13px } #hero3d .h3-el-titel{ gap:10px !important } } @media (prefers-reduced-motion:reduce){ #hero3d .h3-botschaft{ transition:opacity 1ms linear } .hb-satz.an{ animation:none } #hero3d .hb-ruf{ transition:background 1ms linear } #hero3d .hb-ruf:hover{ transform:none } } /* ══ Korrektur 22.09.2026, nach Messung am laufenden Hero ══════════ Die Modulgeometrie liegt als Variable auf #h3-element und wird vom Skript auf #hero3d gespiegelt. Der Fortschritt ist .h3-regler-linie, nicht eine Punkteleiste. */ /* PUNKT 6 · Lockup 15 px UNTER die Modulunterkante. */ /* Das Lockup sass bisher UNTEN AUF dem Modul. Noah will es 15 px DARUNTER. Die Modulhoehe folgt aus der Breite und dem festen Seitenverhaeltnis 1762:1134 der Module, also Faktor 1.554; die Strecke vom Lockup bis zur Unterkante ist der Rest davon. */ #hero3d #h3-element.h3-element .h3-el-titel{ translate:0 calc(var(--h3-el-breit,378px) * 0.140 + 15px); } /* Das Logo war an der weissen Pille ausgerichtet (--h3-marke-breit und --h3-marke-links kamen aus deren Rechteck). Ohne Pille gibt es diesen Anker nicht mehr, also traegt das Flex-Layout die Ausrichtung. */ #hero3d .h3-el-marke, #hero3d.h3-el-auf-modul .h3-el-marke{ width:auto !important; height:clamp(13px,1.5vh,19px) !important; margin-left:0 !important; object-fit:contain !important; } /* Logo und Serientyp auf einer Linie, mittig zueinander. */ #hero3d .h3-el-titel, #hero3d.h3-el-auf-modul .h3-el-titel{ align-items:center !important } #hero3d .h3-el-marke, #hero3d.h3-el-auf-modul .h3-el-marke{ align-self:center !important; margin:0 !important; flex:0 0 auto !important } #hero3d .h3-el-kopf, #hero3d.h3-el-auf-modul .h3-el-kopf{ align-items:center !important; align-self:center !important } #hero3d .h3-el-name, #hero3d.h3-el-auf-modul .h3-el-name{ align-self:center !important; line-height:1 !important } /* PUNKT 7 · Der Fortschritt: tiefer und doppelt so stark. */ #hero3d .h3-regler{ translate:0 34px } #hero3d .h3-regler .h3-regler-linie, #hero3d span.h3-regler-linie{ height:6px !important; min-height:6px !important; border-radius:99px !important; background-size:auto 6px !important; } /* 22.09.2026: die Regeln in der index.html stehen spaeter und gewinnen bei gleicher Staerke. Deshalb hier mit dem Element-Id davor. */ #hero3d #h3-element .h3-el-titel, #hero3d.h3-el-auf-modul #h3-element .h3-el-titel{ align-items:center !important; flex-direction:row !important; gap:14px !important; } #hero3d #h3-element .h3-el-kopf, #hero3d.h3-el-auf-modul #h3-element .h3-el-kopf{ align-self:center !important; align-items:center !important; } #hero3d #h3-element .h3-el-marke, #hero3d.h3-el-auf-modul #h3-element .h3-el-marke{ align-self:center !important; } /* ── Noah 22.09.2026: Der Titel der Ladeseite bildet den Claim ──────── hero-vier-lauf.js laesst "Global Solar Supply Platform" aus dem Lockup nach links auf den Claim der ersten Botschaft fliegen und setzt dafuer .hb-titel-flug. Ab dann steht der Claim, waehrend das Modul sich aufbaut; Untertitel und Rufe folgen, wenn der Auftakt endet. */ #hero3d.hb-titel-flug #h3-botschaft{ opacity:1; transition:none } #hero3d #h3-botschaft .hb-satz p, #hero3d #h3-botschaft .hb-rufe{ transition:opacity .6s var(--kurve,ease) } #hero3d.hb-titel-flug #h3-botschaft .hb-satz p, #hero3d.hb-titel-flug #h3-botschaft .hb-rufe{ opacity:0 } /* Das Logo blieb bei 67 px, weil --h3-marke-breit seine Breite setzt und die Hoehe daraus folgt. Also die Breite begrenzen, nicht die Hoehe. */ #hero3d #h3-element .h3-el-marke, #hero3d.h3-el-auf-modul #h3-element .h3-el-marke{ width:clamp(64px, 6vw, 92px) !important; height:auto !important; max-height:none !important; } /* ══ 23.09.2026 · Gemessene Kanten statt geschaetzter Breite ═══════════ hero-vier-lauf.js wirft nach jedem Bild die Ecken aller Teilnetze des mittleren Elements auf den Bildschirm und setzt --h3-m-l, --h3-m-r, --h3-m-o, --h3-m-u, --h3-m-mitte (px in #hero3d-innen) und --h3-lockup-dy. Daran haengen Pfeile, Lockup und Botschaft. */ @media (min-width:1025px){ /* Noah: Pfeile auf beiden Seiten gleicher Abstand zur Elementkante. */ #hero3d .h3-mob-pfeil.links.links{ left:calc(var(--h3-m-l, 50vw - var(--h3-mitte-halb,14vw)) - 52px) !important } #hero3d .h3-mob-pfeil.rechts.rechts{ left:calc(var(--h3-m-r, 50vw + var(--h3-mitte-halb,14vw)) + 52px) !important } /* Noah: Logo und Serienname 15 px unter dem Modul, nie im Modul. */ #hero3d #h3-element.h3-element .h3-el-titel.h3-el-titel{ translate:0 var(--h3-lockup-dy, calc(var(--h3-el-breit,378px) * 0.140 + 15px)) } /* Noah: Botschaft genau mittig zwischen Rand und Modulkante. */ #hero3d #h3-botschaft.h3-botschaft{ left:calc(var(--h3-m-l, var(--h3-el-links,42vw)) / 2); width:min(46ch, calc(var(--h3-m-l, var(--h3-el-links,42vw)) - 56px)); top:var(--h3-m-mitte, var(--h3-el-mitte,50%)) } /* Waehrend des Auftakts steht die Szene noch nicht; der Claim, in den der Titel fliegt, steht deshalb an der Lage, die das ruhende Modul einnimmt, und gleitet danach auf die gemessene Kante. */ #hero3d.h3-auftakt #h3-botschaft.h3-botschaft{ left:calc((50vw - 18vh) / 2); width:min(46ch, calc(50vw - 18vh - 56px)); top:51.4vh } #hero3d.h3-auftakt-aus #h3-botschaft.h3-botschaft{ transition:opacity .45s var(--kurve,ease), left .6s cubic-bezier(.65,0,.35,1), top .6s cubic-bezier(.65,0,.35,1) } } /* Lesbarkeit auf jedem Farbnebel, auch auf dem Gelb von Colombia. */ #hero3d #h3-botschaft h2{ text-shadow:0 2px 22px rgba(0,12,22,.62), 0 1px 3px rgba(0,12,22,.4) } #hero3d #h3-botschaft p{ text-shadow:0 1px 14px rgba(0,12,22,.6), 0 1px 2px rgba(0,12,22,.35) } #hero3d #h3-botschaft .hb-ruf-stark{ box-shadow:0 6px 22px rgba(0,12,22,.3) } #hero3d #h3-botschaft .hb-ruf-leise{ background:rgba(0,20,35,.3); border-color:rgba(255,255,255,.6) } /* 23.09.2026 · Risikoumkehr direkt am Ruf. Verlust wird entfernt, nicht Gewinn versprochen: keine Mindestabnahme, Gebietsschutz, Antwortzeit. */ #hero3d #h3-botschaft p.hb-garantie{ margin:14px 0 0; color:rgba(255,255,255,.84); white-space:normal; font:600 clamp(12px,.82vw,14px)/1.45 'Barlow',sans-serif; letter-spacing:.01em; text-shadow:0 1px 10px rgba(0,12,22,.6); transition:opacity .6s var(--kurve,ease) } #hero3d.hb-titel-flug #h3-botschaft p.hb-garantie{ opacity:0 } @media (max-width:1024px){ #hero3d #h3-botschaft p.hb-garantie{ font-size:12px; margin-top:10px } } #hero3d #h3-botschaft p.hb-garantie{ display:flex; flex-wrap:wrap; gap:4px 16px } #hero3d #h3-botschaft p.hb-garantie span{ white-space:nowrap; display:inline-flex; align-items:center; gap:6px } #hero3d #h3-botschaft p.hb-garantie span::before{ content:""; inline-size:12px; block-size:12px; flex:0 0 12px; background:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4A900' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") } /* 23.09.2026, Noah: die Botschaft erscheint mit dem Modul. Ihre Einblendung dauert so lang wie ein Karussellschritt (330 ms), nicht laenger. */ #hero3d #h3-botschaft .hb-satz.an{ animation:hbEin .3s cubic-bezier(.2,.7,.2,1) both } /* 23.09.2026, Noah: "Folie 2 des Heros traegt die Elemente von Folie 1." Die Botschaft mit Claim und Rufen gehoert allein zu Folie 1. */ #hero3d:not(.folie-eins) #h3-botschaft.h3-botschaft{ opacity:0 !important; visibility:hidden; pointer-events:none; transition:opacity .2s ease, visibility 0s linear .2s } /* 23.09.2026, Noah: "Die ist ziemlich unruhig." Die Botschaft folgte jeder Modulkante und jeder Neigung und sprang bei jedem Wechsel. Sie steht jetzt fest: mittig zwischen Rand und der Kante des breitesten Elements (Faecher), auf der Hoehe der Modulmitte. Nur die Pfeile und das Lockup folgen dem Modul, und auch sie gleiten statt zu springen. */ @media (min-width:1025px){ #hero3d #h3-botschaft.h3-botschaft, #hero3d.h3-auftakt #h3-botschaft.h3-botschaft{ left:calc((50vw - 30vh) / 2); width:min(46ch, calc(50vw - 30vh - 56px)); top:51.4vh; transition:opacity .45s ease } #hero3d .h3-mob-pfeil.links.links, #hero3d .h3-mob-pfeil.rechts.rechts{ transition:left .28s cubic-bezier(.2,.7,.2,1), opacity .2s } }