/* ============================================================================ Eröffnung „Das Fenster" — jede Seite außer 404 (partials/head.php), einmal je Sitzung, nur mit html.lv-eroeffnung (setzt eroeffnung.js SYNCHRON im , vor dem ersten Paint). Ohne JS, mit „weniger Bewegung" oder beim zweiten Besuch in der Sitzung bleibt die Fläche display:none. Der Gedanke: die Seite stellt Text in die helle Zone eines Fotos — die Eröffnung beginnt also in genau diesem Weiß. Darauf zeichnet sich das Haus-Signet aus dem Logo, von links nach rechts wie mit dem Stift (0–700 ms). Dann öffnet sich unter dem Haus ein Fenster auf das Foto und wächst bis zur vollen Bühne (800–1550 ms); das Haus reitet auf der oberen Fensterkante hinaus. Erst danach fahren Kopf und Bühnentext ein — die Seite öffnet sich in EINER Bewegung, nicht in zweien. Zwei frühere Stände vom selben Tag (2026-10-01): erst die Giebellinie (zu wenig Zeichen auf der leeren Fläche), dann der Schriftzug „Levante" — der Betreiber wollte lieber das Haus. Es sind die echten Logo-Pfade als Inline-SVG (haus_marke in _marke.php), gefüllte Konturen: deshalb ein Wischer statt stroke-dashoffset. Das Fenster ist ein Loch in der weißen Fläche: clip-path: polygon(evenodd, …) mit Außenrechteck und Innenrechteck. Beide Zustände haben dieselbe Punktzahl, deshalb interpoliert der Browser die Öffnung. Ein Browser ohne evenodd in polygon() blendet die Fläche stattdessen schlicht aus (@supports unten). eroeffnung.js hört auf das animationend der Fläche und nimmt die Klasse dann weg — keine Phasenklassen, kein Warten auf DOMContentLoaded. ========================================================================== */ .eroeffnung { display: none; } @media (prefers-reduced-motion: no-preference) { html.lv-eroeffnung .eroeffnung { display: block; position: fixed; inset: 0; /* über Kopf (--z-header 50) UND Consent-Banner (--z-modal 100): sonst ragt der Banner 1,6 s lang in die Fläche. Er bleibt darunter klickbar, weil die Fläche keine Eingaben fängt. */ z-index: calc(var(--z-modal) + 1); pointer-events: none; overflow: hidden; contain: strict; /* Abfrage-Container: cqh misst die Fläche selbst, nicht den Viewport — auf dem Handy mit ein- und ausfahrender Browserleiste sind das zwei verschiedene Höhen, und der Schriftzug soll exakt auf der Fensterkante reiten. */ container-type: size; /* Breite des Fensters zu Beginn und des Hauses darauf: das Haus steht mit seiner Grundlinie auf der Fensterkante, das Fenster ist anderthalbmal so breit wie das Haus — ein Bild, auf dem ein Haus steht, kein Rahmen um das Haus. */ --fenster: clamp(10rem, 24vw, 16rem); --haus: clamp(6.5rem, 15vw, 10rem); --fenster-x1: calc(50% - var(--fenster) / 2); --fenster-x2: calc(50% + var(--fenster) / 2); /* Höhe der Fensterkante, von der aus sich alles öffnet. Unter 900 px liegt sie höher: dort ist die Bühne ein Fotoband oben und Text auf Weiß darunter, und in Bildschirmmitte stünde das Fenster auf dem Schleier zwischen beiden statt auf dem Motiv. */ --fenster-y: 50cqh; /* Takt: erst zeichnen, dann öffnen. */ --zeichnen: 0.7s; --oeffnen-ab: 0.8s; --oeffnen: 0.75s; } @media (max-width: 899px) { html.lv-eroeffnung .eroeffnung { --fenster-y: 30cqh; } } /* Die weiße Fläche mit dem Fenster. Ruhelage = Fenster geschlossen (eine Linie ohne Höhe direkt unter der Grundlinie): die Fläche ist zu, bis die Animation anläuft (`both` hält den from-Zustand). */ .eroeffnung__feld { position: absolute; inset: 0; background: var(--bg); clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, var(--fenster-x1) var(--fenster-y), var(--fenster-x2) var(--fenster-y), var(--fenster-x2) var(--fenster-y), var(--fenster-x1) var(--fenster-y), var(--fenster-x1) var(--fenster-y)); animation: eroeffnung-fenster var(--oeffnen) var(--ease-premium) var(--oeffnen-ab) both; } /* Das Haus: steht mit seiner Grundlinie knapp über der Fensterkante, in der Limette des Logos. Es zeichnet sich von links nach rechts — ein Wischer über das SVG, gleichmäßig wie ein Stift, der am Ende leicht abbremst: erst der Schnörkel, dann Dach und Wand, zuletzt die Spirale. Beim Öffnen reitet es auf der oberen Kante mit, bis sie den Bildschirmrand erreicht und es mitnimmt: gleiche Dauer, gleiche Kurve, gleicher Weg (--fenster-y nach oben) wie die Kante selbst. */ /* Der Selektor greift auf JEDES SVG direkt in der Fläche, nicht nur auf die Klasse: wechselt das Zeichen noch einmal, bleibt es auch mit einem noch gecachten Stylesheet klein und farbig statt schwarz und bildschirmbreit (so gesehen am 2026-10-01; seitdem traegt die Adresse zusaetzlich eine Inhaltskennung, head.php). */ .eroeffnung > svg { position: absolute; left: 50%; top: var(--fenster-y); width: var(--haus); height: auto; transform: translate(-50%, calc(-100% - 0.35rem)); color: var(--accent-2); clip-path: inset(-6% 100% -6% -6%); animation: eroeffnung-zeichnen var(--zeichnen) cubic-bezier(0.45, 0.05, 0.55, 0.95) both, eroeffnung-heben var(--oeffnen) var(--ease-premium) var(--oeffnen-ab) both; } /* Browser ohne evenodd in polygon(): die Fläche blendet nach dem Zeichnen schlicht aus. Die Klasse fällt dann über das animationend von eroeffnung-weg (eroeffnung.js hört auf beide Namen). */ @supports not (clip-path: polygon(evenodd, 0 0, 1px 0, 1px 1px)) { .eroeffnung__feld { clip-path: none; animation: eroeffnung-weg 0.5s var(--ease) var(--oeffnen-ab) both; } } /* Was unter der Fläche liegt, wartet: der Kopf (fährt sonst herein, bevor man ihn sieht), der Bühnentext, die Giebellinie über dem Claim und die Linie der drei Abschnitte. Alles steht bei 0 % und läuft an, sobald die Klasse fällt — paused ist additiv zu den Regeln in project.css und base.css, die dieselbe Eigenschaft fürs Logo-Warten setzen. */ html.lv-eroeffnung .site-header, html.lv-eroeffnung .site-header *, html.lv-eroeffnung .buehne__inhalt > *, html.lv-eroeffnung main .giebel .draw, html.lv-eroeffnung .mandat__linie .draw { animation-play-state: paused; } /* Die Einblendungen (.reveal, main.js) warten ebenso: unter der Fläche bleiben sie unsichtbar, sonst wären sie fertig, bevor sich das Fenster öffnet. !important schlägt auch die Masken-Varianten aus effects.css; fällt die Klasse, blendet ihre eigene Transition auf. */ html.lv-eroeffnung main .reveal { opacity: 0 !important; } } @keyframes eroeffnung-zeichnen { from { clip-path: inset(-6% 100% -6% -6%); } to { clip-path: inset(-6% -6% -6% -6%); } } @keyframes eroeffnung-fenster { to { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 0 0, 100% 0, 100% 100%, 0 100%, 0 0); } } @keyframes eroeffnung-heben { to { transform: translate(-50%, calc(-100% - 0.35rem - var(--fenster-y))); } } @keyframes eroeffnung-weg { to { opacity: 0; } }