/* ===== Der Hero: Sternenfenster ===== Der Stern groß und mittig, die Wortmarke darüber nach unten versetzt. Ruhige, zentrierte Sektionen. */ /* ---------- HERO ---------- */ .hero{ position:relative; min-height:min(96vh, 960px); display:grid; place-items:center; overflow:hidden; isolation:isolate; padding:4rem var(--gutter) 8rem; /* --ring-color und --ring-scale sind hier bewusst nicht gesetzt: Variante 1 hat keine Kontur mehr, der Stern besteht nur noch aus den beiden Glasscheiben. Variante 2 und 3 nutzen beides weiterhin. */ --photo-pos:center 46%; } /* ---------- Außenfläche ---------- Die Headergrafik liegt vollflächig hinter allem. Darüber nur noch ein Schleier – kein deckender Verlauf mehr, sonst wäre das Bild weg. Der Schleier hat zwei Aufgaben: oben Kontrast für die Menüleiste, unten Kontrast für die weiße Wortmarke. Dazwischen darf das Foto durch. Das alte Dunkelblau liegt als Grundfarbe auf .hero – fällt das Bild aus, steht immer noch der Verlauf. */ .hero{ background: linear-gradient(172deg, #02060f 0%, var(--pille-deep) 20%, #102339 38%, var(--pille-navy) 56%, #1c3c68 74%, #22508f 90%, #2a5da8 100%); } .hero__field{ position:absolute; inset:0; z-index:0; overflow:hidden; } .hero__field img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; } .hero__veil{ position:absolute; inset:0; background: /* Bühnenlicht aus der rechten unteren Ecke – jetzt deutlich zarter, weil darunter ein Foto liegt und kein Verlauf. */ radial-gradient(64% 56% at 100% 99%, rgba(255,226,120,.5) 0%, rgba(255,233,154,.26) 34%, rgba(255,240,190,0) 70%), /* Kopfzone abdunkeln: trägt die Menüleiste und die oberen Zacken */ radial-gradient(120% 55% at 50% -4%, rgba(2,6,15,.6) 0%, rgba(2,6,15,.14) 58%, rgba(2,6,15,0) 100%), /* Vignette: nimmt das Foto zum Rand hin zurück. Ohne sie steht der Stern in einem gleichmäßig lauten Bild und bekommt keinen Vordergrund. */ radial-gradient(78% 72% at 50% 52%, rgba(2,6,15,0) 36%, rgba(2,6,15,.26) 72%, rgba(2,6,15,.5) 100%), /* Grundschleier. Bewusst nur an den Rändern dicht: in der Mitte soll das Foto klar bleiben – milchig ist nur der Stern. Oben trägt er die Menüleiste, unten die weiße Wortmarke. */ linear-gradient(176deg, rgba(2,6,15,.42) 0%, rgba(2,6,15,.16) 22%, rgba(2,6,15,.08) 46%, rgba(8,21,37,.34) 68%, rgba(6,16,32,.72) 88%, rgba(2,6,15,.84) 100%); } /* Sternenstreu */ .hero__veil::after{ content:""; position:absolute; inset:0; opacity:.16; background-image: radial-gradient(circle, #fff 1.6px, transparent 1.7px), radial-gradient(circle, var(--yellow-light) 1.2px, transparent 1.3px); background-size:120px 120px, 77px 77px; background-position:0 0, 38px 54px; } /* ---------- Das Sternenfenster, frech groß ---------- Die Größe hängt an --star-x: 1 = Ausgangsgröße, 2 = doppelt. Desktop und Tablet laufen auf 200 %, das Handy auf 150 % (siehe die Media Query am Dateiende) – auf 414 px wäre der Stern bei 200 % nur noch Fragment. Der Stern läuft dabei oben und unten aus dem Bild; .hero hat overflow:hidden und schneidet ihn ab. Der Umschalter in der Review-Leiste setzt diese Variable live. */ .hero{ --star-x:2; } .hero__star{ position:absolute; top:50%; left:50%; z-index:1; width:min(72vmin, 680px); aspect-ratio:872.97 / 878.51; transform:translate(-50%, -50%) scale(var(--star-x)); } /* ---------- Der Stern als Fensterscheibe ---------- Die Ebenen sind gegenüber der ersten Fassung vertauscht: die Headergrafik liegt vollflächig dahinter, der Stern liegt als milchige Scheibe darüber. Durch ihn sieht man dasselbe Bild – nur weichgezeichnet und eingefärbt. Welche Fläche gelb und welche blau ist, bestimmt NICHT dieses Stylesheet, sondern sternchen-logo.svg: build-mask.py gruppiert die Pfade nach ihrer Füllfarbe und erzeugt daraus zwei Masken. Ändert sich das Logo, ändern sich die Scheiben mit. (Vorher standen hier Sektoren aus einem conic-gradient – geraten statt abgeleitet.) Zwei Dinge daran sind empfindlich, beide gemessen: 1. `backdrop-filter` wird von der Maske beschnitten (Streuung 0,5 innerhalb gegen 85 außerhalb). Das trägt den ganzen Effekt. 2. Ein `filter` an einem ELTERNelement macht ihn kaputt – es entsteht ein eigener Backdrop-Root und das Glas sieht nichts mehr (Streuung springt von 0,5 auf 46). tokens.css legt für die Varianten 2 und 3 einen drop-shadow auf .starwin – Variante 1 muss ihn deshalb ausdrücklich abschalten. Diese eine Zeile zu löschen, lässt den Effekt kommentarlos verschwinden. Keine weiße Ebene mehr: Kontur und Schatten hatten an den Zacken links und rechts eine gerade Schnittkante, weil der viewBox der Vorlage exakt die Bounding Box der Form ist. Ein Strich auf der Kontur liegt mittig und ragt zur Hälfte darüber hinaus, die SVG-Leinwand schneidet ihn ab (gemessen: noch 21 bzw. 23 weiße Pixel in der ersten und letzten Pixelspalte). Wer die Kontur zurückholen will, muss zuerst den viewBox aufweiten. */ .starwin{ filter:none; } /* Die beiden Scheiben. Bewusst durchsichtig gehalten: das Foto soll dahinter erkennbar bleiben, nicht nur als Farbfleck durchschimmern. blur(5px) weicht genug auf, dass man Glas sieht, lässt aber Köpfe, Federhüte und Kostüme als Formen stehen. */ .hero--glas .starwin__pane{ position:absolute; inset:0; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; -webkit-backdrop-filter:blur(5px) saturate(1.3) brightness(1.18); backdrop-filter:blur(5px) saturate(1.3) brightness(1.18); } .hero--glas .starwin__pane--gelb{ background: /* Glanz, wie Licht schräg auf einer Scheibe */ linear-gradient(150deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 38%, rgba(255,255,255,0) 60%), /* Die Scheibenfarbe. Als flacher Verlauf notiert, nicht als Farbe: `background` erlaubt nur EINEN Farbwert, und zwar als letzten. Zwei Farben hintereinander machen die ganze Deklaration ungültig – dann verschwindet die Einfärbung spurlos (gemessen: Scheibenmittel rgb(113,121,125), also grau statt gelb). */ linear-gradient(rgba(255,205,45,.46), rgba(255,205,45,.46)), /* Weiß UNTER dem Gelb: Gelb direkt auf dunklem Heckengrün mischt olivstichig. Erst aufhellen, dann einfärben – derselbe Grund wie beim Bühnenlicht im Verlauf. Mehr als ein Hauch wäscht die Farbe aus. */ rgba(255,255,255,.14); } .hero--glas .starwin__pane--blau{ background: linear-gradient(150deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 38%, rgba(255,255,255,0) 60%), linear-gradient(rgba(42,112,238,.44), rgba(42,112,238,.44)), rgba(255,255,255,.08); } /* ---------- Parallaxe ---------- Jetzt wandert die ganze Headergrafik, nicht mehr nur ein Ausschnitt im Stern. Rechenweg: scale(1.24) erzeugt 24 % Überstand, also 12 % Luft je Kante. Der Versatz von 8 % wird im skalierten System angewandt, zählt also 1,24-fach: 9,92 % gegen 12 % Spielraum. Das sind 83 % des Spielraums und gilt bei jeder Fenstergröße gleich, weil beide Größen an derselben Höhe hängen. Nachgemessen an der fertigen Seite (computed transform bei verschiedenen Scrollständen): y=0 -> matrix(…, -86.95), y=1000 -> matrix(…, +86.95) bei 876 px Hero-Höhe, linear dazwischen. Achtung beim Nachrechnen: Chrome schreibt in die Matrix bereits den skalierten Wert (1,24 × 8 % × 876 = 86,95), nicht die 70 px aus den Prozentangaben. Mit dem ersten Ansatz scale(1.2) standen 84,1 px Versatz gegen 87,6 px Spielraum – vier Pixel Reserve, zu wenig gegen Rundung. Deshalb 1,24. Ergebnis: Die Grafik läuft rund 80 % des Vordergrundtempos. */ .hero__field img{ transform:scale(1.24); will-change:transform; } @keyframes bgParallax{ from{ transform:scale(1.24) translateY(-8%); } to { transform:scale(1.24) translateY(8%); } } @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: scroll()){ .hero__field img{ animation:bgParallax linear both; animation-timeline:scroll(root); animation-range:0 100vh; } } } /* ---------- Wortmarke: eine Ebene darüber, nach unten versetzt ---------- */ .hero__text{ position:relative; z-index:3; text-align:center; transform:translateY(clamp(120px, 26vh, 270px)); } /* Eigener Grund für die Wortmarke. Ohne ihn steht weiße Schrift stellenweise auf milchig hellem Glas – gemessen 1,0:1, also schlicht unsichtbar. Ein weicher, dunkler Hauch dahinter löst das, ohne die Scheiben anzufassen. */ .hero__text::before{ content:""; position:absolute; z-index:-1; pointer-events:none; left:50%; top:48%; transform:translate(-50%,-50%); width:min(1360px, 134%); height:175%; background:radial-gradient(60% 56% at 50% 50%, rgba(2,6,15,.74) 0%, rgba(2,6,15,.6) 42%, rgba(4,12,26,.3) 66%, rgba(4,12,26,0) 85%); } .hero h1{ font-size:clamp(2.9rem, 11.5vw, 8.5rem); color:#fff; margin-bottom:.1em; /* Gegen das viele Foto dahinter braucht die Marke mehr Halt */ text-shadow:0 .05em 0 var(--navy), 0 .14em .3em rgba(15,27,76,.7), 0 .3em .9em rgba(15,27,76,.45); } .hero__sub{ display:inline-block; background:var(--yellow); color:var(--navy); font-weight:800; letter-spacing:.02em; padding:.4rem 1.4rem; border-radius:99px; box-shadow:0 8px 22px rgba(15,27,76,.4); margin-bottom:1.6rem; font-size:var(--step-0); } .hero__cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; } /* ---------- Die weiße Welle, mit Schlagschatten auf den Stern ---------- Zwei gestaffelte Schatten: ein harter Kontaktschatten direkt an der Kante, darüber ein weicher Umgebungsschatten. Ein einzelner, zarter Schatten verschwindet gegen das kräftige Blau. */ .hero__wave{ position:absolute; left:0; right:0; bottom:-1px; z-index:4; width:100%; height:clamp(50px,7vw,110px); overflow:visible; filter:drop-shadow(0 -5px 8px rgba(8,16,52,.55)) drop-shadow(0 -20px 30px rgba(8,16,52,.45)); } /* ---------- Sektionen: zentriert, plakativ ---------- */ .sec__head{ text-align:center; margin-inline:auto; } .sec__head .lead{ margin-inline:auto; } @media (max-width:760px){ .hero{ min-height:min(88vh, 760px); padding-bottom:5rem; } /* Auf dem Handy zahmer: 150 % statt 200 %, sonst bleibt vom Stern nur noch ein Ausschnitt ohne erkennbare Form. */ .hero{ --star-x:1.5; } .hero__star{ width:min(88vmin, 420px); } .hero__text{ transform:translateY(clamp(70px, 15vh, 150px)); } }