/* ── Landing ── Seit 06.08.2026 keine eigene Seite mehr, sondern eine deckende Ebene über der fertig geladenen Werke-Seite im selben Dokument (index.html). Der Übergang ist dadurch reines Ausblenden statt eines Seitenaufrufs; wer den Hintergrund dazu sucht, findet ihn im Kopf von index.html. Alles hier hängt an `.landing-ebene` statt wie früher an `body.landing` — der Body gehört jetzt der Werke-Seite. */ /* ── Die Ebene selbst ── AUS, solange nicht ausdrücklich eingeschaltet. Eingeschaltet wird sie von einem winzigen Inline-Skript im Kopf von index.html, das `.landing-an` an hängt. Diese Richtung ist Absicht: ohne JavaScript — oder wenn beim Laden etwas schiefgeht — bleibt die Ebene weg und die Werke-Seite ist unbeschadet da. Andersherum (standardmäßig sichtbar, per JS entfernt) würde ein einziger Skriptfehler die ganze Seite hinter einem weißen Deckel begraben. */ .landing-ebene { display: none; } .landing-an .landing-ebene { display: block; position: fixed; inset: 0; /* Über allem: der höchste Wert der Werke-Seite ist 501 (main.css). */ z-index: 900; overflow: hidden; cursor: none; /* Deckend. Sollte der WebGL-Effekt aus irgendeinem Grund nichts zeichnen, ist das Ergebnis eine weiße Fläche mit dem Namen — nicht die halb durchscheinende Werke-Seite. */ background-color: #ffffff; /* Das Rad soll nicht durchschlagen und die Galerie dahinter verschieben, während die Landing läuft. Ergänzend fängt landing-uebergang.js Rad und Wischen ab — `overscroll-behavior` allein hält nur die Kettenreaktion an, nicht das Scrollen eines Elements darunter. */ overscroll-behavior: contain; } /* ── Blenden ── Am 06.08.2026 löste sich die Fläche hier als Nebel auf: durchsichtiger WebGL-Kontext, Auflösefront im Shader. Am 07.08. wieder herausgenommen — Noahs Urteil war „wirkt comichaft", und das lag an den großen, glatten, berandeten Formen, die ein Höhenfeld nun einmal erzeugt. Der Nebel liegt samt Shader-Teilen in ../Archiv/landing-eigene-seite/. Geblendet wird jetzt die ganze Ebene, kurz. Damit dabei nichts springt, nimmt landing-effect.js vorher das Fließen des Namens zurück (uBeruhigen) — der Name deckt sich dann mit dem Header-Namen dahinter und bleibt beim Blenden einfach stehen, statt sich mit ihm zu doppeln. Die Dauer setzt landing-uebergang.js über --landing-fade, damit Zeitangabe und Ablaufsteuerung an EINER Stelle stehen. Klicks gehören ab dem ersten Bild des Blendens der Seite darunter. */ .landing-ebene.geht { opacity: 0; transition: opacity var(--landing-fade, 600ms) ease; pointer-events: none; } /* Gegenrichtung: der Klick auf den Namen im Header holt die Landing zurück, sie blendet dann herein. Als Animation und nicht als Übergang, weil beim Zurückholen von „nicht angezeigt" auf „angezeigt" umgeschaltet wird — ein Übergang hätte darauf keinen Anfangswert. */ .landing-ebene.kommt { animation: landing-herein var(--landing-fade, 600ms) ease both; } @keyframes landing-herein { from { opacity: 0; } to { opacity: 1; } } /* ── Der Name beim Übergang ── Ab 801 px stehen der Name der Landing und der Name im Header der Werke-Seite an genau derselben Stelle, in derselben Größe und mit denselben Abständen — beim Ausblenden bleibt er deshalb einfach stehen, während der Rest der Seite aufblendet. Das ist der schönste Anschluss, den es hier gibt, und er kostet nichts. Darunter geht das nicht: der Header stellt bei 800 px auf Burger um und rückt den Namen kleiner in die Mitte (main.css:1765). Beide zugleich sichtbar ergäbe ein unleserliches Übereinander aus breitem und schmalem Namen. Deshalb bleibt der Header-Name hier weg, solange die Landing liegt, und kommt danach in Ruhe nach — .landing-an fällt am Ende des Übergangs weg (landing-uebergang.js), und dieser Übergang setzt sich dann in Gang. Wird die Landing übersprungen, ist .landing-an nie gesetzt: dann steht der Name von Anfang an da und hier passiert gar nichts. ANIMATION UND NICHT `transition`: main.css:1156 setzt auf .site-name den Kurzschreib-`transition: color 0.6s ease` und wird nach dieser Datei geladen. Eine Übergangsangabe von hier würde davon vollständig ersetzt (der Kurzschreibweise wegen, nicht wegen der Gewichtung) — der Name erschiene dann schlagartig. Eine Animation liegt auf einer anderen Eigenschaft und kommt beidem nicht in die Quere. */ @media (max-width: 800px) { .landing-an .site-name { opacity: 0; } /* Setzt landing-uebergang.js im selben Zug, in dem .landing-an wegfällt. */ .site-name.name-kommt { animation: name-einblenden 400ms ease both; } } @keyframes name-einblenden { from { opacity: 0; } to { opacity: 1; } } .cursor { position: fixed; width: 6px; height: 6px; background: white; border-radius: 50%; pointer-events: none; z-index: 1000; transform: translate(-50%, -50%); mix-blend-mode: difference; } .split { display: flex; width: 100%; height: 100%; } .seite { position: relative; height: 100%; overflow: hidden; flex: 1; display: flex; align-items: flex-end; justify-content: center; cursor: none; } /* Kein eigenes Weiß mehr (06.08.2026): das Weiß steht an .landing-ebene, und nur dort lässt es sich beim Auflösen wegnehmen. Ein zweites, undurchsichtiges Weiß an dieser Stelle hätte die Werke-Seite weiter verdeckt, egal wie durchsichtig die Fläche im Canvas wird. */ /* Name oben links — gleiche Position und Typografie wie der Header der Werke-Seite (.site-name in main.css: 1.5rem, weight 300, letter-spacing 0.45em, 2rem Abstand zum Rand, 0.8rem Grundlinie über der 64px-Headerhöhe). Bewusst dupliziert statt geteilt — die Landing ist hell und statisch, die Werke-Seite wechselt ihr Farbschema per JS; ein gemeinsamer Selektor müsste beides mitschleppen. pointer-events: none, damit der Klick weiter auf die Fläche darunter geht (die ganze Ebene ist ein Knopf zu den Arbeiten). */ .landing-name { position: fixed; top: 0; left: 2rem; height: 64px; display: flex; align-items: flex-end; /* +1px: der Header der Werke-Seite hat unten eine 1px-Trennlinie, die bei border-box von seinen 64px abgeht — sein Text sitzt also einen Pixel höher als hier, wo keine Linie ist. Bis 07.08.2026 stand hier glatt 0.8rem und die beiden Namen lagen beim Übergang um genau diesen Pixel versetzt. line-height: 1 aus demselben Grund wie dort: macht die Zeilenhöhe von den Maßen der Schriftdatei unabhängig (bei UbuntuMono ändert es nichts). */ padding-bottom: calc(0.8rem + 1px); line-height: 1; z-index: 20; pointer-events: none; font-family: var(--font); font-weight: 300; /* Der Name ist eine feste Zeile (white-space: nowrap) und war bei 1.5rem 479px breit — auf einem 390px-Handy stand nur noch „Noah Balthasar M" da, der Rest lag außerhalb des Bildschirms. clamp lässt ihn unterhalb von ~667px Fensterbreite mitschrumpfen; darüber bleibt er exakt bei 1.5rem, also unverändert zur Werke-Seite, deren Header dieselbe Typografie hat. Die Buchstabenabstände sind in em und folgen von selbst mit. */ font-size: clamp(0.85rem, 3.6vw, 1.5rem); letter-spacing: 0.45em; color: #2a2520; white-space: nowrap; animation: einblenden 1.2s ease 0.5s both; } @keyframes einblenden { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Die Werk-Diashow (3 zufällige Galerie-Bilder, .preview + landing.js) wurde am 21.07.2026 auf Wunsch entfernt — die Landing zeigt jetzt gar keine Bilder mehr, stattdessen den WebGL-Verformungseffekt (landing-effect.js). landing.js liegt in Ablage/entfernt/. */ /* ── WebGL-Bühne (landing-effect.js) ── Füllt die Ebene, liegt hinter allem und nimmt keine Klicks an. Ohne JS oder ohne WebGL bleibt sie leer und durchsichtig — dann sieht man die weiße Fläche und den Namen ganz normal darunter. `absolute` statt `fixed`: der Bezug ist jetzt die Ebene, nicht das Fenster — damit verschwindet die Bühne zuverlässig mit ihr. */ .landing-buehne { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; pointer-events: none; } /* Sobald der Effekt läuft, zeichnet er den Namen selbst — damit er mitverzerrt. Das echte Element bleibt im Dokument (der Effekt liest daraus Schriftgröße und Position, statt sie doppelt zu pflegen), wird aber unsichtbar. visibility statt display, damit es messbar bleibt. */ .landing-name.name-uebernommen { visibility: hidden; } /* Ganze Fläche klickbar, nicht nur der Text: ein unsichtbarer Knopf liegt über der kompletten Ebene. z-index 5 liegt über der Bühne (2), aber unter dem Namen (20). */ .seite-flaeche { position: absolute; inset: 0; z-index: 5; /* Ein