/*
 * Abschnitt: Auftakt
 *
 * Genau ein Bildschirm: das Rendering über die volle Fläche, unten die Fläche
 * für den Schriftzug. Beim Scrollen läuft er nach oben weg und gibt den
 * Projekt-Abschnitt frei. Sonst passiert hier nichts.
 *
 * **Hier lag bis zum 11.09.2026 eine scrollgesteuerte Sequenz über 6,6
 * Bildschirme** — Vorhang aus der Bildmitte, dann die Fahrt durch drei
 * Innenräume. Vom Kunden ersatzlos gestrichen. Danach stand hier noch ein
 * Auftakt mit Wortmarke in der oberen Hälfte, Untertitel, Bauträger-Logo und
 * Ortszeile; **seit dem 11.09.2026 ist auch das weg** und der Abschnitt ist
 * Arbors Auftakt, Maß für Maß.
 *
 * In der Vorlage gemessen, bei 1512 × 850:
 *
 *   Abschnitt          h-svh, also genau eine Bildschirmhöhe
 *   Medium             object-cover über die volle Fläche
 *   Textebene          absolut, inset 0, flex, unten und mittig
 *   Polster der Ebene  62,748 px bei 1512, 80 px bei 2056, 38,4 px bei 375
 *   Schriftzug         PP Editorial Old Regular, Versalien
 *   Grad               10,5 vw = 158,8 px; mobil 17 vw
 *   Laufweite          normal, Zeilenhöhe 1,0
 *   Farbe              rgb(244, 240, 219) — ihr Sand
 *   Abstand nach unten 63 px
 *   Sonst              **nichts** — kein Untertitel, kein Logo, keine Zeile
 *
 * **Die Vorlage hat keinen Verlauf** — nachgemessen: Der Auftakt hat genau
 * zwei Kinder, das Video und eine durchsichtige Textebene; keine
 * Pseudoelemente, kein Filter, kein background-image. Was dort wie eine
 * Verdunkelung aussieht, ist der Schatten im Video selbst.
 *
 * **Bei uns braucht es trotzdem einen, und die Stärke ist an ihnen gemessen.**
 * Unser Rendering ist unten hell — Pflaster, weiße Blüten, ein weißes Fahrrad.
 *
 * **Der Maßstab ist ihr Videobild selbst.** Es liegt auf derselben Domain und
 * ließ sich deshalb im Browser direkt abtasten — Leinwand, `drawImage`,
 * `getImageData`.
 *
 * **Und dabei ist ein Denkfehler aufgeflogen, der zwei Anläufe gekostet hat.**
 * Der erste Versuch traf Arbors *Kontrast* unter dem Schriftzug (8,17 gegen
 * 8,20) — und sah trotzdem nicht aus wie dort. Denn Kontrast ist ein
 * Verhältnis, und wie **dunkel** eine Fläche wirkt, ist eine Leuchtdichte.
 * Beides ist nicht dasselbe:
 *
 *   unterste 20 Prozent des Bildschirms, mittlere Leuchtdichte
 *     unser Bild ohne Verlauf                 0,1419
 *     erste Fassung (Hofgrün tief, bis 85 %)  0,0399
 *     **Arbor**                               **0,0076**
 *
 * Arbors unterer Rand ist **fünfmal dunkler** — und hier liegt der eigentliche
 * Grund: **Hofgrün tief selbst hat 0,0261.** Selbst bei voller Deckung kämen
 * wir nicht an Arbor heran; ihr Rand ist dunkler als unsere dunkelste
 * Palettenfarbe.
 *
 * **Deshalb geht der Verlauf gegen Schwarz und nicht gegen Hofgrün tief.**
 * `--ld-a-schatten` ist Hofgrün tief zu 35 Prozent gegen Schwarz — ein
 * Beinaheschwarz, das den Grünstich der Fassade behält. Das ist keine neue
 * Farbe der Palette, sondern eine Abdunklung einer vorhandenen, so wie
 * `color-mix(…, transparent)` an vielen Stellen im Theme eine Aufhellung ist.
 *
 * Damit erreicht:
 *
 *                          unterste 20 %   unter der Schrift
 *   wir                        0,0075           0,0088
 *   Arbor                      0,0076           0,0134
 *
 * Die Stufen bilden ein weiches Anlaufen nach (smoothstep von 40 auf 100
 * Prozent). **Der Fuß ist voll deckend** — das ist der Punkt, an dem es
 * aussieht wie dort und nicht wie ein abgeschwächtes Bild.
 *
 * Der frühere ganzflächige Schleier (Card Room Green tief zu 30 Prozent) ist
 * weg — dieselbe Regel wie bei „Haidhausen" und „Die Lage": nachmessen, wo das
 * Bild wirklich zu hell ist, und nur dort abdunkeln. Hier kommt dazu, dass das
 * Grün im Bild die echte Fassadenfarbe des Hofhauses ist; eine grüne Fläche
 * darüber nimmt ihr genau das.
 */

.ld-auftakt {
	position: relative;
	width: 100%;
}

/* ------------------------------------------------------------------ Bühne */

.ld-auftakt .ld-auftakt__buehne {
	position: relative;
	align-items: stretch;
	height: 100svh;
	min-height: 100svh;
	/* Der Cover-Block bringt 1em Innenabstand mit; die Vorlage hat keinen. */
	padding: 0;
	overflow: clip;
}

/*
 * Der Verlauf. Er liegt als ::before am Cover und damit zwischen Bild und
 * Inhalt — dieselbe Stelle wie in „Haidhausen", und aus demselben Grund: Die
 * Füllung des Cover-Blocks trägt ihre Farbe mit „!important" und ließe sich
 * nicht durch einen Verlauf ersetzen.
 */
.ld-auftakt__buehne::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: linear-gradient(
		to bottom,
		transparent 40%,
		color-mix(in srgb, var(--ld-a-schatten) 22%, transparent) 56%,
		color-mix(in srgb, var(--ld-a-schatten) 60%, transparent) 70%,
		color-mix(in srgb, var(--ld-a-schatten) 90%, transparent) 84%,
		var(--ld-a-schatten) 100%
	);
}

/* ------------------------------------------------------------------ Inhalt */

/*
 * **Mit Skript wird der Verlauf zu einem Band**, das genau über dem
 * Schriftzug beginnt (`--ld-auf-band`, vom Skript gesetzt). Darüber stehen
 * nach dem Hochgleiten die Menschen. **Seit dem 25.10.2026 weich**, vom Kunden
 * gewünscht: Er läuft über 1,4 Schriftgrade (`--ld-auf-weich`), langsam
 * anlaufend, und ist ein Drittel Schriftgrad unter der Oberkante der
 * Buchstaben ganz dunkel. Die Unterkante des Films liegt darin und ist nicht
 * mehr als Linie zu sehen; die Beine der Menschen gehen hinter den
 * Buchstaben in den Grund über. Ohne Skript bleibt der Verlauf über das
 * untere Bilddrittel, wie er war.
 */
@media (prefers-reduced-motion: no-preference) {
	.ld-js .ld-auftakt:not( .is-ohne ) .ld-auftakt__buehne::before {
		top: var(--ld-auf-band, 60%);
		background-image: linear-gradient(
			to bottom,
			transparent 0,
			color-mix(in srgb, var(--ld-a-schatten) 8%, transparent) calc(var(--ld-auf-weich, 8rem) * 0.25),
			color-mix(in srgb, var(--ld-a-schatten) 30%, transparent) calc(var(--ld-auf-weich, 8rem) * 0.5),
			color-mix(in srgb, var(--ld-a-schatten) 65%, transparent) calc(var(--ld-auf-weich, 8rem) * 0.75),
			var(--ld-a-schatten) var(--ld-auf-weich, 8rem)
		);
	}
}

.ld-auftakt .ld-auftakt__buehne > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: none;
	height: 100%;
	padding: 0;
}

/* ----------------------------------------------------------- Schriftzug */

/*
 * Die Ebene, die den Schriftzug trägt: unten und mittig, mit dem Polster der
 * Vorlage.
 */
.ld-auftakt__marke {
	position: absolute;
	inset: 0;
	/*
	 * Eine Stufe über dem Verlauf, und zwar ausdrücklich.
	 *
	 * Ohne diese Zeile lag der Schriftzug bei „z-index: auto" und stand nur
	 * deshalb über dem Verlauf, weil er im Markup später kommt. Das trägt,
	 * solange beide im selben abgeschlossenen Kasten liegen — und genau den
	 * nimmt WordPress weg, sobald das Menü offen ist:
	 *
	 *   .has-modal-open … .wp-block-cover__inner-container { z-index: auto }
	 *
	 * Die Regel schickt WordPress inline mit. Sie greift bei Cover-Blöcken,
	 * deren Hintergrund-Span nicht unmittelbar vom Inhalt gefolgt wird — bei
	 * uns steht das Bild dazwischen, also greift sie. Der Inhalt bildet dann
	 * keinen eigenen Stapelraum mehr, der Verlauf mit seiner 1 steigt eine
	 * Ebene höher, und der Schriftzug mit „auto" bleibt darunter zurück: Beim
	 * Öffnen des Menüs verschwand er hinter dem dunklen Fuß.
	 *
	 * Mit einer eigenen Zahl ist die Reihenfolge in beiden Welten dieselbe.
	 * Nachgewiesen am 12.09.2026 in drei Schritten: Klasse allein gesetzt →
	 * Fehler da; Menü offen und Klasse entfernt → Fehler weg; Klasse gesetzt
	 * und nur diese Zahl zurückgestellt → Fehler weg.
	 */
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/*
	 * Fünf von **Arbors** Grundmaßen, nicht von unserem.
	 *
	 * Sie misst alles an ihrer eigenen Wurzelgröße — 0,83 vw, bei 16 Pixeln
	 * gedeckelt —, und ihr Polster ist 5 rem davon. An drei Breiten
	 * nachgemessen: 62,75 px bei 1512, 80 px bei 2056. Dieselbe Einheit, in
	 * der auch die Kopfzeilen-Pille rechnet (`--ld-pille-e` in base.css); sie
	 * steht dort am Kopfzeilen-Block und ist hier deshalb noch einmal
	 * ausgeschrieben.
	 *
	 * **In vw umgerechnet wäre es falsch.** 4,15 vw trifft die 1512 genau und
	 * geht auf dem Telefon auf 7,8 Bildpunkte herunter — Arbor steht dort bei
	 * 38,4. Der Wert ist eben kein Anteil der Breite, sondern ein Vielfaches
	 * einer gedeckelten Wurzel.
	 *
	 * **Unten seit dem 25.10.2026 acht statt fünf Grundmaße** — vom Kunden
	 * „ein bisschen höher" gewünscht, rund 100 statt 63 Bildpunkte bei 1512.
	 * Eine Abweichung von Arbor; oben bleibt ihr Wert, er wirkt hier nicht.
	 */
	padding-block: calc(5 * min(0.8rem, 0.83vw)) calc(8 * min(0.8rem, 0.83vw));
	margin-block: 0;
	pointer-events: none;
}

.ld-auftakt__marke > * {
	margin-block: 0;
}

/*
 * Der Schriftzug. Echter Text in derselben Schrift, die auch die Vorlage
 * benutzt — nachgemessen stimmen beide auf drei Stellen überein.
 *
 * **Der Grad ist nicht ihre Zahl.** Arbor setzt 10,5 vw für „BELGRADE ARBOR",
 * vierzehn Zeichen. „METZ ACHT&ZWANZIG" hat siebzehn und wäre damit breiter
 * als das Fenster. Maßgeblich ist die Wirkung, und die ist bei ihnen messbar:
 * Ihr Schriftzug füllt **91,7 Prozent der Fensterbreite**, an zwei Breiten
 * gleich. Unsere Zeichenfolge misst 10,863 je Schriftgrad, also
 * 0,917 ÷ 10,863 = **8,44 vw**. Dieselbe Wirkung, andere Zahl.
 *
 * Dasselbe Vorgehen wie beim Riesenwort in „Architektur" — auch dort ist die
 * Zahl der Vorlage nicht übernommen, sondern ihre Proportion.
 *
 * **Er steht in Salbei, und auch das ist Arbors Logik übersetzt.** Ihr Gebäude
 * ist sandbeige, ihr Schriftzug ist sandbeige aufgehellt — sie nehmen die
 * Farbe des Hauses und machen sie hell. Unser Haus ist Card Room Green, und
 * Salbei ist genau dessen aufgehellte Fassung. Auf dem abgedunkelten Fuß sind
 * das 11,0 zu 1; Kalkweiß stand dort bei 15,7 und nahm keinen Bezug zum Bild
 * auf. **Vom Kunden im direkten Vergleich von vier Tönen entschieden.**
 *
 * Die Farbe steht als Blockangabe, nicht hier — sie bleibt damit im Editor
 * änderbar.
 */
.ld-auftakt__schriftzug {
	font-size: 8.44vw;
	/* Regular — eine große Überschrift, kein Aussagesatz. */
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-transform: uppercase;
	text-align: center;
	/*
	 * Am Schreibtisch einzeilig. Ohne das bräche die Zeile am Leerzeichen um,
	 * sobald jemand das Fenster schmaler zieht, und stünde dann halb so breit
	 * in der Mitte.
	 */
	white-space: nowrap;
}

/* ----------------------------------------------------------------- Mobil */

@media (max-width: 781px) {
	/*
	 * **Auf dem Telefon das Hofhaus mit etwas Hof davor** — vom Kunden aus
	 * fünf Ausschnitten gewählt (25.10.2026, Fassung D2). Zu sehen ist dort
	 * nur gut ein Viertel der Filmbreite; die Mitte zeigte Fenster und
	 * Balkone des Vorderhauses ohne Bezug. Die Vorlage schneidet für das
	 * Telefon ebenfalls einen eigenen Ausschnitt auf ihr Hauptmotiv zu (einen
	 * eigenen Film im Hochformat, `hero-m.webm`).
	 *
	 * Gilt für Film, Erstbild und das Standbild des Cover-Blocks gleich.
	 */
	.ld-auftakt {
		--ld-auf-x: 0.94;
	}

	.ld-auftakt .wp-block-cover__image-background {
		object-position: calc(var(--ld-auf-x) * 100%) 50%;
	}

	.ld-auftakt__marke {
		/*
		 * In der Vorlage die Hälfte — py-10 statt py-20, dort 38,4 Bildpunkte
		 * bei 375. Unsere 2,5 rem ergeben 40; Arbors Wurzel liegt dort bei
		 * 15,4 statt unseren 16. Unten seit dem 25.10.2026 im selben
		 * Verhältnis höher wie am Schreibtisch (8 zu 5).
		 */
		padding-block: 2.5rem 4rem;
	}

	/*
	 * Auf dem Telefon bricht der Schriftzug um und wird dafür größer — so
	 * macht es die Vorlage, deren „BELGRADE ARBOR" dort zweizeilig auf 17 vw
	 * steht. Einzeilig bliebe unserer bei 8,44 vw und damit 32 Bildpunkte
	 * groß; Arbors sind dort 64.
	 *
	 * Maßgeblich ist die **längere** Zeile: „ACHT&ZWANZIG" misst 7,94 je
	 * Schriftgrad, 0,917 ÷ 7,94 = 11,55 vw. Damit füllt sie dieselben 91,7
	 * Prozent wie am Schreibtisch.
	 */
	.ld-auftakt__schriftzug {
		font-size: 11.55vw;
		/*
		 * Der Umbruch soll hier kommen, und zwar am Leerzeichen: „METZ" oben,
		 * „ACHT&ZWANZIG" darunter.
		 */
		white-space: normal;
		/*
		 * Zeilenhöhe 1,0 trotz zweier Zeilen. Die Ausnahme von 1,12 gilt für
		 * mehrzeilige deutsche Versalien, weil dort die Punkte von Ä, Ö und Ü
		 * an die Zeile darüber stoßen — in „METZ ACHT&ZWANZIG" steht kein
		 * Umlaut. **Wer den Text ändert und einen einsetzt, muss hier auf
		 * 1,12.**
		 */
		line-height: 1;
	}
}


/* ------------------------------------------------- Der Film und der Ladeschirm
 *
 * **Seit dem 25.10.2026 ein einziger Film**, so wie bei Arbor: leeres Papier,
 * die Zeichnung entsteht, ein weißes Papiermodell, das Rendering reißt von der
 * Himmelsmitte her auf, dann bewegen sich Menschen im Hof. 11,6 Sekunden,
 * ohne `loop` — er bleibt auf seinem letzten Bild stehen.
 *
 * Vorher waren es eine Zeichnung, ein Vorhang im CSS und zwei Filme
 * hintereinander. Alles, was dafür hier stand — die Naht zwischen den Filmen,
 * das gleiche Seitenverhältnis, der verschobene Vorhang statt einer Maske —,
 * ist mit dem Umbau entfallen; die Regeln dahinter stehen in `CLAUDE.md`.
 *
 * **Der Ladeschirm liegt auf dem ersten Filmbild.** Der Film steht mit
 * `poster` da, und das ist das leere Papier, auf dem er beginnt. Marke und
 * Prozentzahl blenden aus, der Film läuft los — es gibt keine Naht, weil
 * unter dem Ladeschirm schon das Bild liegt, mit dem der Film anfängt. Arbor
 * macht es genauso: Ihr Film beginnt im Creme ihres Ladeschirms.
 */

.ld-auftakt {
	/* Hofgrün tief zu 35 Prozent gegen Schwarz — der Grund unter dem Schriftzug. */
	--ld-a-schatten: color-mix(in srgb, var(--wp--custom--gruen-tief) 35%, #000);

	/*
	 * Das Abdunkeln und das Hochgleiten laufen zusammen, in dieser Zeit. Zur
	 * Hälfte setzt der Schriftzug ein (`MARKE` im Skript).
	 */
	--ld-auf-grund: 1.2s;

	/* Die Hülle des Schriftzugs blendet mit ein — in der Vorlage rund 0,4 s. */
	--ld-auf-marke: 0.4s;
}

.ld-auftakt__wandel {
	position: absolute;
	inset: 0;
	/*
	 * **Unter den Verlauf, nicht darüber.** Der Verlauf liegt als ::before am
	 * Cover und steht auf 1; ein Pseudoelement wird vor allen Kindern
	 * gezeichnet, bei gleicher Zahl gewönne also diese Ebene. Der Schriftzug
	 * steht in Salbei und ist nur auf dem dunklen Grund lesbar.
	 */
	z-index: 0;
	overflow: clip;
	/*
	 * **Bis der Film hochgleitet, ist der Grund Kalkweiß** — fast genau der
	 * Papierton des ersten Filmbilds (gemessen `#FBF5EA`). So steht der
	 * Ladeschirm schon auf Papier, bevor das Bild überhaupt geladen ist.
	 */
	background: var(--wp--preset--color--base);
	pointer-events: none;
	/* blockGap, der siebte Fall: Die Ebene stand 30 Bildpunkte zu tief. */
	margin-block: 0;
}

/*
 * **Der Film ist genau so groß wie sein Bild unter `cover`**, nicht so groß
 * wie der Bildschirm. Die Maße rechnet `auftakt.js` aus und setzt sie als
 * `--ld-auf-fb`, `--ld-auf-fh` und `--ld-auf-fo`; ohne sie füllt er die
 * Fläche wie bisher.
 *
 * **Der Grund ist das Hochgleiten.** Wird ein bildschirmgroßes Element mit
 * `object-fit: cover` verkleinert, schrumpft sein Kasten mit — links und
 * rechts bliebe ein Streifen frei, obwohl das Bild breiter ist als der
 * Bildschirm. Ist das Element dagegen so breit wie das Bild selbst, darf es
 * schrumpfen, bis es genau die Bildschirmbreite füllt.
 */
/*
 * **Welcher Teil des Films zu sehen ist, sagt `--ld-auf-x`** — der Anteil
 * des Überstands, der links wegfällt: 0,5 ist die Mitte, 1 der rechte Rand.
 * Am Schreibtisch die Mitte, auf dem Telefon das Hofhaus (Mobilblock).
 * Der Ursprung der Verkleinerung liegt an derselben Stelle; so bleibt der
 * Ausschnitt beim Hochgleiten derselbe, und seitlich wird nie etwas frei.
 */
.ld-auftakt__film {
	position: absolute;
	left: calc((100% - var(--ld-auf-fb, 100%)) * var(--ld-auf-x, 0.5));
	top: var(--ld-auf-fo, 0);
	display: block;
	width: var(--ld-auf-fb, 100%);
	height: var(--ld-auf-fh, 100%);
	margin: 0;
	object-fit: cover;
	object-position: calc(var(--ld-auf-x, 0.5) * 100%) 50%;
	transform-origin: calc(var(--ld-auf-x, 0.5) * 100%) 0;
	transition: transform var(--ld-auf-grund, 1.2s) cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * **Das Hochgleiten** — vom Kunden gewünscht (25.10.2026), eine Abweichung
 * von Arbor. Unten stehen im Film die Menschen; der Schriftzug säße auf
 * ihnen, und der Verlauf darunter schluckte sie. Wenn der Grund abdunkelt,
 * gleitet der Film deshalb nach oben und wird dabei höchstens so viel
 * kleiner, dass er noch die volle Breite füllt. Die Menschen stehen danach
 * über dem Schriftzug.
 *
 * **Wie weit, rechnet das Skript je Fenster aus** (`--ld-auf-k`, `--ld-auf-dy`)
 * — auf einem flachen Fenster muss der Film weiter, auf einem hohen weniger.
 * Bewegt wird nur `transform`; das kostet beim Abspielen nichts.
 */
/*
 * **Dann wird der Grund zum dunklen Streifen.** Gleitet der Film nach oben,
 * wird unten genau dieser Grund frei, und der Schriftzug steht darauf.
 */
.ld-auftakt.is-grund .ld-auftakt__wandel {
	background: var(--ld-a-schatten);
}

.ld-auftakt.is-hoch .ld-auftakt__film {
	transform: translateY(var(--ld-auf-dy, 0px)) scale(var(--ld-auf-k, 1));
}

/*
 * Der Ladeschirm: die Marke und darunter, wie viel vom Film schon da ist.
 * Er steht auf dem Papier des ersten Filmbilds.
 */
.ld-auftakt__lader {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(0.9rem, 1.4vw, 1.6rem);
	margin: 0;
	transition:
		opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
		translate 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ld-auftakt__lader-marke {
	display: block;
	width: auto;
	height: clamp(2.4rem, 3.6vw, 4.2rem);
}

/* Card Room Green tief auf dem Papier: 5,5 zu 1. */
.ld-auftakt__lader-zahl {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(0.75rem, 0.78vw, 0.95rem);
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--primary-deep);
}

/*
 * Er tritt ab, bevor der Film beginnt — 0,8 s, leicht nach oben (`ABTRITT`
 * im Skript wartet genau so lange).
 */
.ld-auftakt.is-geladen .ld-auftakt__lader {
	opacity: 0;
	translate: 0 -0.75rem;
}

/*
 * **Der Verlauf kommt zum Schluss, mit dem Lebensfilm.**
 *
 * In der Vorlage nachgemessen — der Grund unter ihrem Schriftzug wird erst
 * spät dunkel, und das ist die halbe Wirkung:
 *
 *   Filmzeit     0 s      7 s     11 s     15,5 s
 *   Helligkeit  242      194      47       16
 *   Kontrast    ~1,0     ~1,3     9,97     16,27
 *
 * **Ihr Video kann das von allein, unseres nicht.** Arbors Rendering wird
 * unten dunkel; unseres ist dort hell — Pflaster, weiße Blüten, ein weißes
 * Fahrrad. Wir brauchen den Verlauf also, aber er darf nicht von Anfang an
 * liegen, sonst wäre der Schriftzug schon auf dem leeren Blatt lesbar und die
 * ganze Wirkung fiele weg.
 *
 * Er läuft deshalb mit dem **Lebensfilm**: 3,9 Sekunden auf dessen 5,04.
 * Ergebnis: auf dem weißen Blatt 1,43 zu 1 (unsichtbar), am Ende die
 * gemessenen 11,0 zu 1. **Der Schriftzug kommt danach**, nicht mit ihm —
 * siehe weiter unten.
 *
 * **Gesteuert über eine Klasse, nicht über eine Zahl je Einzelbild** — dieselbe
 * Regel wie bei `.ld-steigen`. Ein Fortschritt, den ein Skript Bild für Bild
 * setzen müsste, bliebe bei gedrosselten Einzelbildern stehen, und dann stünde
 * der Schriftzug dauerhaft unlesbar da.
 */
@media (prefers-reduced-motion: no-preference) {
	.ld-js .ld-auftakt:not( .is-ohne ):not( .is-grund ) .ld-auftakt__buehne::before {
		opacity: 0;
	}
}

.ld-auftakt.is-grund .ld-auftakt__buehne::before {
	transition: opacity var( --ld-auf-grund, 3.9s ) cubic-bezier( 0.215, 0.61, 0.355, 1 );
}

/*
 * **Der Schriftzug kommt nach dem Abdunkeln, nicht mit ihm.**
 *
 * Und er wird tatsächlich eingeblendet — das ist in der Vorlage nachgemessen,
 * nachdem ich es dreimal falsch behauptet hatte. Ihre Textebene über dem Video
 * trägt beim Laden die Klasse `opacity-0`:
 *
 *   DIV.absolute inset-0 flex items-end justify-center … opacity-0
 *
 * **Der Messfehler war ein zu enger Ausschnitt.** Ich hatte nur das `h1`
 * selbst beobachtet, und dessen Deckung steht die ganze Zeit auf 1 — Deckung
 * vererbt sich nicht als berechneter Wert. Die **Hülle** darum hatte ich nur
 * am Ende geprüft, als sie längst bei 1 war. Daraus wurde „nie animiert".
 *
 * **Daraus die Regel: Wer prüft, ob etwas animiert wird, prüft die ganze
 * Kette — und zwar am Anfang, nicht am Ende.** Ein neutraler Wert nach Ablauf
 * einer Animation sieht genauso aus wie gar keine Animation.
 *
 * Die Reihenfolge ist damit: Der Grund dunkelt mit dem Lebensfilm ab, und
 * **danach** kommt der Schriftzug — ausgelöst kurz vor dessen Ende, siehe
 * `MARKE_VOR` im Skript.
 *
 * **Die Deckung, nicht die Sichtbarkeit.** Ein Element mit `opacity: 0` steht
 * weiterhin im Baum für Vorlesegeräte — und dieser Schriftzug ist das `h1` der
 * Seite. Mit `display` oder `visibility` wäre der Titel der Startseite zehn
 * Sekunden lang weg.
 *
 * Ohne Skript (kein `ld-js`) und bei reduzierter Bewegung greift das nicht, und er
 * steht sofort da.
 */
@media (prefers-reduced-motion: no-preference) {
	.ld-js .ld-auftakt:not( .is-ohne ):not( .is-marke ) .ld-auftakt__marke {
		opacity: 0;
	}
}

.ld-auftakt.is-marke .ld-auftakt__marke {
	transition: opacity var( --ld-auf-marke, 0.4s ) linear;
}

/*
 * **Der Vermerk „Visualisierung, KI-gestützt" (base.css) kommt mit dem
 * Rendering**, nicht mit dem leeren Blatt — auf dem Papier stünde er als
 * Schatten ohne Bild da. Er hängt am Abdunkeln, dasselbe Signal wie der
 * Verlauf. Ohne Skript steht er sofort da.
 */
@media (prefers-reduced-motion: no-preference) {
	.ld-js .ld-auftakt:not( .is-ohne ):not( .is-grund ) .ld-auftakt__buehne > .ld-ki-vermerk {
		opacity: 0;
	}
}

.ld-auftakt.is-grund .ld-auftakt__buehne > .ld-ki-vermerk {
	transition: opacity 0.6s var( --ld-ease );
}

/*
 * **Und die Buchstaben steigen dabei herein — Zahl für Zahl an der Vorlage
 * gemessen.** Am 15.09.2026 im Vordergrund aufgenommen, dreizehn Buchstaben
 * einzeln über 268 Proben abgetastet:
 *
 *   Weg               32 Bildpunkte von unten, **fest**
 *   Versatz           50 ms je Buchstabe (gemessen 49 bis 51, zwölfmal)
 *   Dauer             0,9 s je Buchstabe
 *   Verlauf           weiches Auslaufen dritter Ordnung
 *   Gesamtlauf        1,30 s
 *   Auslöser          Videozeit 15,60 — **das Ende ihres Films**
 *
 * **Der Weg hängt nicht am Schriftgrad.** Ihr Auftakt steht auf 10,5 vw, also
 * rund 216 Bildpunkten; 32 davon sind 0,148 em. In der Fußzeile, bei ganz
 * anderem Grad, sind es wieder genau 32. Es ist ein fester Wert, und deshalb
 * steht hier `32px` und nicht `em` — anders als im Vorgabewert des Bausteins.
 *
 * **Der Takt ist ein anderer als sonst im Theme.** Der Baustein steht auf
 * 26 ms, die Fußzeile auf 25; hier sind es **50**. Das ist kein Widerspruch,
 * sondern die Stelle: Ein Schriftzug über die volle Bildbreite darf sich Zeit
 * lassen, eine Listenzeile nicht.
 *
 * **Dass es überhaupt Buchstaben sind, war lange nicht zu sehen.** Ihr `h1`
 * hat im Ruhezustand **null Kinder** — ihr Skript zerlegt die Zeile erst in
 * dem Moment, in dem es sie einblendet. Wer vorher oder nachher misst, findet
 * einen gewöhnlichen Text und schließt daraus auf gar keine Bewegung. Genau
 * das ist mir dreimal passiert.
 *
 * **Und die Hülle blendet zusätzlich ein**, in rund 0,4 Sekunden — dort über
 * eine Deckung, die ihr Skript inline schreibt (0,094 → 0,399 → 0,644 …).
 */
.ld-auftakt__schriftzug.ld-steigen {
	--ld-steig-weg: 32px;
	--ld-steig-dauer: 0.9s;
	--ld-steig-takt: 0.05;
}

/*
 * Das Rendering im Cover-Block bleibt als Rückfall liegen: Ohne Skript, bei
 * reduzierter Bewegung und wenn der Film nicht lädt, steht sofort das fertige
 * Bild da — der Auftakt ist der Titel der Seite und darf nie leer sein.
 */
.ld-auftakt__wandel {
	display: none;
}

/*
 * **Der Ladeschirm steht ab dem ersten gezeichneten Bild da**, nicht erst,
 * wenn `auftakt.js` läuft. Das Skript sitzt am Seitenende; bis dahin zeigte der
 * Browser einen Moment lang das fertige Schlussbild samt Schriftzug und sprang
 * dann aufs Papier zurück. `ld-js` setzt der Kopf der Seite
 * (`ld28_scroll_oben()`), also vor dem ersten Bild.
 *
 * **Steigt das Skript aus** — Rückkehr in den 3D-Finder, kein Film —, setzt es
 * `is-ohne`, und es bleibt beim Schlussbild.
 */
@media (prefers-reduced-motion: no-preference) {
	.ld-js .ld-auftakt:not( .is-ohne ) .ld-auftakt__wandel {
		display: block;
	}
}

/*
 * **Kommt der Film nicht, tritt die ganze Ebene ab.** Darunter liegt das
 * fertige Rendering des Cover-Blocks — der Besucher bekommt also den Auftakt,
 * den er ohne Skript ohnehin bekäme, nur mit einem Aufbau davor.
 */
.ld-auftakt__wandel {
	transition: opacity 0.6s cubic-bezier( 0.215, 0.61, 0.355, 1 );
}

.ld-auftakt.is-aufgabe .ld-auftakt__wandel {
	opacity: 0;
}