/*
 * Abschnitt: Zwei Häuser, ein Hof
 *
 * Eine Draufsicht auf das Grundstück, die beim Scrollen waagrecht
 * durchgeschoben wird: links die Metzstraße, dann Vorderhaus, Hof und Hofhaus.
 *
 * Nachgebaut nach dem Abschnitt „Horizontal" der Vorlage. Dort gemessen:
 * genau ein Bildschirm hoch, gefüllt mit einem sehr breiten Bild, das ohne jede
 * Perspektive vorbeigeschoben wird. Der Schriftzug darüber steht in PP
 * Editorial Old Regular, 160 Pixel bei 2056 Fensterbreite — also 7,78 vw —,
 * Versalien, Zeilenhöhe 1,0, ohne Laufweite, 160 Pixel von oben.
 *
 * **Flach, nicht gekippt.** Eine erste Fassung stand auf einer gekippten
 * 3-D-Fläche. Beim seitlichen Durchfahren verzieht sich dabei alles, was nicht
 * in der Mitte liegt — genau das, was an der Vorlage nicht passiert.
 */

.ld-haeuser {
	position: relative;
	background-color: var(--wp--preset--color--surface);
}

.ld-haeuser__buehne {
	position: relative;
	height: 100svh;
	overflow: clip;
}

/*
 * Die Bühne bleibt stehen, während die Fahrt läuft: Erst wenn der Plan ganz
 * durchgeschoben ist, geht es weiter zum nächsten Abschnitt. Ohne das wandert
 * das Bild beim Scrollen gleichzeitig nach oben aus dem Fenster, und die Fahrt
 * nach rechts geht darin unter.
 *
 * Die Vorlage kommt an dieser Stelle ohne klebende Bühne aus — ihr Bild ist so
 * viel breiter als der Bildschirm, dass die Fahrt auch beim Vorbeiscrollen
 * deutlich ist. Unser Plan ist knapper, deshalb hier der Schacht.
 */
/*
 * **Der Schacht ist seit dem finalen Bild 3,2 Bildschirme statt 2,6.**
 * Die Aufnahme ist breiter geworden, die Fahrt damit von 938 auf 1497
 * Bildpunkte gewachsen (bei 2056 × 1203). Bliebe der Schacht, zöge das Bild
 * sechzig Prozent schneller vorbei als bisher. Mit 3,2 liegt das Tempo
 * wieder nahe am gewohnten: 0,57 Bildpunkte Bild je Bildpunkt Scrollweg
 * gegen vorher 0,49.
 *
 * **Das ist die eine Stellschraube fürs Tempo.** Wer die Fahrt gemächlicher
 * will, erhöht hier; wer den Abschnitt kürzer will, senkt.
 */
.ld-haeuser.is-bereit {
	height: 320svh;
}

.ld-haeuser.is-bereit .ld-haeuser__buehne {
	position: sticky;
	inset-block-start: 0;
}

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

/*
 * Der Schriftzug liegt über dem Plan und lässt den Zeiger durch — sonst wäre
 * die Fläche darunter nicht mehr anklickbar, und genau darum geht es hier.
 *
 * Farbe: In der Vorlage steht er hell auf einer dunklen Luftaufnahme. Unser
 * Plan ist hell, deshalb steht er dunkel. Sobald das Rendering da ist, kann er
 * zurück auf hell — die Farbe hängt am Block und ist im Editor änderbar.
 */
.ld-haeuser__titel {
	position: absolute;
	/*
	 * Unten statt oben. In der Vorlage steht der Schriftzug oben; bei uns liegt
	 * dort der Anschnitt der Karte, und der Zug bekommt unten mehr Ruhe.
	 */
	inset-block-end: 7.8svh;
	inset-inline: 0;
	z-index: 4;
	margin-block: 0;
	text-align: center;
	text-transform: uppercase;
	/*
	 * 6,06 vw, vorher 7,78 vw: Seit dem 29.10.2026 steht hier „Zwei Häuser,
	 * ein Innenhof“ statt „ein Hof“ (Kunde, nach der Freigabe durch den
	 * Anwalt). Der Grad ist so umgerechnet, dass die Zeile dieselbe Breite
	 * hat wie vorher — 84 Prozent des Fensters, einzeilig.
	 */
	font-size: 6.06vw;
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	pointer-events: none;
}

/*
 * Der Abgang: Jedes Zeichen verwischt und verblasst, von links nach rechts.
 * `--ld-h-aus` kommt aus dem Skript und läuft über das letzte Viertel der
 * Durchfahrt von 0 auf 1; `--ld-h-d` ist der eigene Verzug des Zeichens.
 * Gerechnet wird also im CSS, das Skript setzt nur eine Zahl am Abschnitt —
 * dieselbe Aufteilung wie beim Buchstabeneffekt der Auftakt-Sequenz.
 *
 * Der Weichzeichner steht in vw und wächst mit: 0,66 vw sind bei 1512 die
 * zehn Bildpunkte der Vorlage.
 */
/* Der Träger je Wort, siehe `zerlegen()` in haeuser.js: Er bricht nicht um. */
.ld-haeuser__wort {
	display: inline-block;
	white-space: nowrap;
}

.ld-haeuser__zeichen {
	display: inline-block;
	white-space: pre;
	--ld-h-ab: clamp(
		0,
		calc( ( var( --ld-h-aus, 0 ) - var( --ld-h-d, 0 ) ) / 0.38 ),
		1
	);
	opacity: calc( 1 - var( --ld-h-ab ) );
	filter: blur( calc( var( --ld-h-ab ) * 0.66vw ) );
	will-change: opacity, filter;
}

/* ------------------------------------------------------------------- Plan */

/*
 * Der Plan ist breiter als die Bühne und wird waagrecht durchgeschoben.
 * --ld-h-fahrt kommt aus dem Skript und läuft von 0 auf 1, --ld-h-weg ist der
 * Überstand in Bildpunkten.
 */
.ld-haeuser__bild {
	position: absolute;
	/*
	 * Etwas über der Mitte: Unten steht der Schriftzug, oben ist nur Karte.
	 * Auf der Mitte saß das Ensemble sichtbar zu tief.
	 */
	inset-block-start: 43%;
	inset-inline-start: 0;
	z-index: 0;
	/*
	 * blockGap, zum neunten Mal: Die Aufnahme ist das zweite Kind der Bühne und
	 * bekäme sonst dreißig Bildpunkte Rand von oben — bei einer absolut
	 * liegenden Ebene heißt das dreißig Bildpunkte zu tief.
	 */
	margin-block: 0;
	/* Mitte über transform, nicht über negative Ränder — siehe blockGap. */
	transform: translateY(-50%)
		translateX(calc(var(--ld-h-fahrt, 0) * var(--ld-h-weg, 0px) * -1));
	will-change: transform;
}

/*
 * Die Datei füllt den Rahmen, den das Skript gesetzt hat. `cover` greift dabei
 * nie wirklich zu — der Rahmen bekommt genau das Seitenverhältnis, das das
 * Skript an der Datei abliest. Es steht trotzdem da, damit eine Aufnahme mit
 * anderem Verhältnis nicht verzogen wird, bevor jemand die Zahlen nachzieht.
 */
.ld-haeuser__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * **Hier lag bis zum 06.10.2026 die Zeichnung.** Straßenband,
 * Grundstücksumriss, Hof, Zufahrt, Grünstreifen, Spielfläche, Sandkasten,
 * Fahrradstellplätze, Rampe und vier Bestandsbäume — alles aus den Metermaßen
 * der Planauswertung aufgebaut. An ihre Stelle ist eine echte Draufsicht aus
 * dem Modell getreten; die Regeln sind deshalb ersatzlos heraus.
 */

/* ---------------------------------------------------------------- Häuser */

/* --------------------------------------------------------- Straßenname */

/*
 * **Im Rendering steht „Mezıstraaẞe".** Das Modell hat die Schrift
 * zerschossen; vom Kunden gemeldet. Statt das Bild neu erzeugen zu lassen,
 * deckt diese Zeile die Stelle ab und schreibt den Namen richtig hin.
 *
 * **Sie liegt im Plan, nicht auf der Bühne.** Nur so wandert sie mit der
 * Fahrt und sitzt bei jeder Fenstergröße auf derselben Stelle der Straße.
 * Alle Maße stehen deshalb in Prozent des Plans; das Skript hängt den Block
 * dort ein und setzt den Schriftgrad.
 *
 * **Alles ist am Bild ausgemessen**, nicht geschätzt:
 *
 * | | im Bild (3840 × 1729) | hier |
 * |---|---|---|
 * | Mitte der alten Schrift | 1100 / 864 px | 28,646 % / 50,000 % |
 * | Länge der Schrift | 155 px | 4,04 % der Breite |
 * | Versalhöhe | 20 px | 0,52 % der Breite |
 * | Winkel der Hauptachse | −89,05° | Drehung 91° |
 * | Straßenton ringsum | rgb(149, 138, 130) | der Verlauf unten |
 *
 * **Der Winkel ist nicht ganz senkrecht, und das ist richtig so:** Die
 * Metzstraße läuft im Bild um knapp ein Grad geneigt. Bei 90 Grad stünde der
 * Name sichtbar schief zur Straße.
 */
.ld-haeuser__strassenname {
	position: absolute;
	/* Mitte der alten Schrift, am Bild ausgemessen. */
	inset-inline-start: 28.646%;
	inset-block-start: 50%;
	z-index: 1;
	/* blockGap — der Block käme sonst dreißig Bildpunkte zu tief. */
	margin-block: 0;
	/*
	 * Der Kasten ist großzügiger als die alte Schrift: 200 × 46 Bildpunkte
	 * gegen deren 155 × 20. Der Überstand ist der Platz, auf dem die weiche
	 * Kante ausläuft.
	 */
	width: 5.208%;
	height: 2.661%;
	display: grid;
	place-items: center;
	pointer-events: none;
	transform: translate(-50%, -50%) rotate(91deg);

	color: var(--wp--preset--color--contrast);
	font-size: var(--ld-h-str-grad, 26px);
	line-height: 1;
	white-space: nowrap;
}

/*
 * **Die Abdeckung ist ein eigener Verlauf, keine Fläche.** Die Straße ist
 * dort nicht gleichmäßig: Am oberen Ende liegt sie bei rgb(159, 147, 137),
 * am unteren kriecht der Schatten eines Baums herein und drückt sie auf
 * rgb(131, 126, 123). Ein flacher Fleck in einem Mittelwert wäre an beiden
 * Enden als Patzer zu sehen — der Verlauf folgt dem Gefälle.
 *
 * **Und die Kante läuft weich aus.** Dieselbe Regel wie bei den Wolken: Bei
 * einer Abdeckung ist der Rand weich, nie der Kern. Die Maske lässt die
 * Mitte voll deckend und blendet nach außen aus, damit nirgends eine Kante
 * im Asphalt steht.
 *
 * Es liegt als `::before` hinter dem Text — Pseudoelemente werden vor den
 * Kindern gezeichnet, und der Text ist hier der Inhalt des Elements selbst.
 */
.ld-haeuser__strassenname::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to right,
		rgb(159 147 137) 0%,
		rgb(152 140 131) 55%,
		rgb(131 126 123) 100%
	);
	-webkit-mask-image: radial-gradient(
		ellipse 52% 46% at 50% 50%,
		#000 60%,
		transparent 100%
	);
	mask-image: radial-gradient(
		ellipse 52% 46% at 50% 50%,
		#000 60%,
		transparent 100%
	);
}

/* ------------------------------------------------------------ Lichtkegel */

/*
 * **Beim Darüberfahren taucht der Rest der Aufnahme leicht ab.** Das ist das
 * Zeichen dafür, dass die beiden Häuser anklickbar sind — **vom Kunden so
 * gewünscht**, nachdem die vorige Lösung geflogen war.
 *
 * **Es ist ein Lichtkegel und kein Ausschnitt, und das ist der ganze Punkt.**
 * Die erste Fassung machte die Trefferfläche selbst sichtbar; der Kunde sah
 * sofort ein Rechteck, weil keiner der beiden Baukörper eins ist. Ein weicher
 * elliptischer Verlauf hat gar keine Kante, die etwas verraten könnte — er
 * muss das Haus nicht treffen, nur ungefähr über ihm stehen.
 *
 * Mitte und Maße kommen aus dem Skript, in Prozent dieser Ebene; sie liegt im
 * Plan und wandert deshalb mit der Fahrt mit.
 *
 * **Die Zahlen:** Der Kern bleibt bis 52 Prozent des Radius klar — bei einem
 * Radius von einer ganzen Hausbreite ist das genau die halbe Breite, also das
 * Haus selbst. Von dort läuft er über dieselbe Strecke noch einmal nach außen
 * aus. **45 Prozent Hofgrün tief** am Rand — seit dem 14.10.2026, vom Kunden
 * „ein bisschen stärker“ gewünscht; vorher 28. Die Aufnahme bleibt dabei
 * erkennbar, das gewählte Haus steht deutlich vorn.
 */
.ld-haeuser__fokus {
	position: absolute;
	inset: 0;
	/* Über dem Straßennamen — er gehört zum Bild und taucht mit ab. */
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	background: radial-gradient(
		ellipse var(--ld-h-fw, 30%) var(--ld-h-fh, 35%) at
			var(--ld-h-fx, 50%) var(--ld-h-fy, 50%),
		transparent 0%,
		transparent 52%,
		color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent) 100%
	);
}

.ld-haeuser.is-gewaehlt .ld-haeuser__fokus {
	opacity: 1;
}

/*
 * **Zwei unsichtbare Flächen über den Dächern.** Sie liegen genau auf den
 * beiden Baukörpern der Aufnahme — in Prozent, am Bild ausgemessen; die Zahlen
 * stehen im Skript. Sie tragen das Darüberfahren und den Klick.
 *
 * Vorher waren das die gezeichneten Baukörper selbst, mit Füllung, Dachkappe
 * und Schlagschatten. Auf einer echten Aufnahme hat all das keinen Sinn mehr:
 * Das Dach ist schon da.
 */
.ld-haeuser__haus {
	position: absolute;
	cursor: pointer;
	border-radius: 3px;
	transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/*
 * **Die Trefferfläche bleibt unsichtbar, auch beim Darüberfahren.** Ein heller
 * Hauch mit feiner Kante stand hier einen Anlauf lang und war genau das, was
 * der Kunde gemeldet hat: Man sah ein Rechteck. Das ist kein Fehler der
 * Deckung, sondern der Form — **kein Baukörper dieses Hauses ist ein
 * Rechteck.** Das Vorderhaus hat einen Rücksprung zum Hof, das Hofhaus einen
 * Anbau; jede Fläche, die man sichtbar macht, verrät sofort, dass sie nicht
 * das Haus ist.
 *
 * Es ginge nur mit einem Umriss je Haus — und der wäre an die eine Aufnahme
 * gebunden und müsste bei jedem neuen Rendering nachgezeichnet werden.
 *
 * **Das Zeichen trägt deshalb die Beschriftung**, und nur sie. Sie liegt
 * ohnehin auf dem Haus, auf das man zeigt.
 */

/*
 * **Das Zurücktreten des anderen Hauses ist entfallen.**
Es lief über
 * `filter: saturate()` auf der gezeichneten Fläche; an einer durchsichtigen
 * ist nichts zu entsättigen. Die ganze Aufnahme zu dämpfen wäre das Gegenteil
 * von zurückhaltend — dann flackerte bei jedem Überfahren der halbe
 * Bildschirm.
 */

/* ----------------------------------------------------------------- Marken */

.ld-haeuser__schicht {
	position: absolute;
	inset: 0;
	z-index: 3;
	/* blockGap: drittes Kind der Bühne, siehe die Aufnahme darüber. */
	margin-block: 0;
	pointer-events: none;
}

.ld-haeuser__marke {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	pointer-events: auto;
	cursor: pointer;
	text-align: center;
	transition: opacity 0.35s ease;
}

/*
 * **blockGap, und zwar an zwei Stellen übereinander.** WordPress setzt über
 * `blockGap` ein `margin-block-start` auf jedes Kind außer dem ersten — das
 * trifft die Beschriftungs-Ebene (drittes Kind der Bühne) und noch einmal die
 * zweite Marke darin. Beide sind absolut positioniert, und dort verschiebt ein
 * Rand das Element tatsächlich.
 *
 * **Sichtbar wurde es erst, als die Beschriftung mittig aufs Dach sollte.**
 * Vorher stand sie frei über dem Haus; 30 Bildpunkte Versatz fielen da nicht
 * auf. Erst als sie exakt sitzen musste, stand das Vorderhaus 30 und das
 * Hofhaus 60 Punkte zu tief — die doppelte Summe, weil dort beide Ränder
 * zusammenkamen.
 */
.ld-haeuser__schicht,
.ld-haeuser__marke,
.ld-haeuser__marke > * {
	margin-block: 0;
}

/*
 * **Der Name steht in einem Verweis, und der brachte seine eigene Farbe mit.**
 * Am Block ist Kalkweiß gesetzt — das wirkt aber nur auf die Überschrift, nicht
 * auf das `a` darin: Links haben ihre Farbe aus theme.json. Sichtbar war
 * deshalb Card Room Green tief auf dem Card Room Green des Daches, **Kontrast
 * 1,26** — „Hofhaus" war schlicht nicht zu lesen.
 *
 * **Derselbe Fehler erzeugte ein zweites Symptom:** Der Pfeil hängt als
 * ::after an der Überschrift und trug damit deren Kalkweiß, während der Text
 * daneben grün blieb — zwei Farben in einem Wort, aus einer Ursache.
 *
 * Am Vorderhaus fiel nichts auf: Dort ergibt dieselbe Linkfarbe auf dem hellen
 * Dach zufällig 4,39 und liest sich.
 */
.ld-haeuser__marke .ld-haeuser__name a {
	display: block;
	color: inherit;
	/*
	 * **Ohne Unterstreichung und ohne Pfeil** — seit dem 14.10.2026 vom Kunden
	 * so gewünscht. Die Beschriftung ist ein Knopf („Zum Vorderhaus“) und
	 * verhält sich wie alle Knöpfe der Seite: Beim Darüberfahren rollt die
	 * Zeile nach oben weg und kommt von unten nach (`setupSchalter()`), die
	 * Pille wird deckend.
	 */
	text-decoration: none;
}

/*
 * **Eine Beschriftung im Plan, keine Überschrift.** Sie steht deshalb in Work
 * Sans statt in der Antiqua und folgt der Konvention für kleine
 * Versalien-Zeilen im Theme: 0,02 em Laufweite, Zeilenhöhe 1,5.
 *
 * Die Schriftart selbst steht am Block und ist im Editor änderbar — hier steht
 * nur die Form.
 */
.ld-haeuser__marke .ld-haeuser__name {
	font-size: clamp(0.72rem, 0.92vw, 1.1rem);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/*
 * **Das Abrollen kommt auch, wenn der Zeiger über dem Haus liegt**, nicht nur
 * über der Pille: `haeuser.js` setzt dann `is-an` an die Marke. Ohne diese
 * Regel dunkelte das Haus ab, während die Beschriftung stillstand.
 */
.ld-haeuser__marke.is-an .ld-schalter__fenster > .ld-schalter__zeile {
	transform: translateY(-100%);
}

.ld-haeuser__marke.is-an .ld-schalter__fenster > .ld-schalter__zeile--klon {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.ld-haeuser__marke.is-an .ld-schalter__fenster > .ld-schalter__zeile {
		transform: none;
	}
}

/*
 * **Die Farben der Beschriftung stehen hier und nicht am Block.** Sie brauchen
 * zwei Zustände — hell auf der Aufnahme, dunkel im Rückfall ohne Skript — und
 * eine Preset-Farbe am Block kommt mit `!important`. Die Begründung steht
 * ausführlich im Kopf von patterns/haeuser.php.
 *
 * **Auf der Aufnahme trägt keine Palettenfarbe.** Nachgemessen unter den
 * beiden Beschriftungen: Auf dem Vorderhausdach reicht die Leuchtdichte von
 * 0,198 bis 0,796, auf dem Hofhaus von 0,060 bis 0,603. Der beste Wert einer
 * Palettenfarbe ist 3,26 am Vorderhaus und 2,28 am Hofhaus — eine Farbe zu
 * wählen hieße, sich für eine der beiden Hälften zu entscheiden.
 *
 * **Deshalb zwei Schatten übereinander**, derselbe Griff wie bei der Marke
 * über dem Luftbild im Projekt-Abschnitt: ein enger harter für die Kante, ein
 * weiter weicher für den Grund. Einer allein trägt nicht — der enge verliert
 * sich auf unruhigen Dächern, der weite macht aus dem Wort einen Fleck.
 */
.ld-haeuser__marke .ld-haeuser__name {
	color: var(--wp--preset--color--contrast);
}

.ld-haeuser__marke .ld-haeuser__zahl {
	color: var(--wp--preset--color--muted);
}

/*
 * **Auf der Aufnahme ist die Beschriftung eine Pille** — dasselbe Bauteil wie
 * die Kopfzeile, nur kleiner: Hofgrün tief zu 80 Prozent mit Weichzeichner
 * dahinter. **Vom Kunden im Vergleich dreier Fassungen gewählt.**
 *
 * **Das löst drei Dinge auf einmal.** Erstens das Aussehen: Das Wort lag vorher
 * frei auf dem Dach und sah, in den Worten des Kunden, „random" aus — jetzt ist
 * es Teil derselben Sprache wie alles andere auf der Seite.
 *
 * Zweitens den Kontrast. Auf dieser Aufnahme trägt **keine** Palettenfarbe:
 * unter den Beschriftungen reicht die Leuchtdichte von 0,198 bis 0,796 auf dem
 * Vorderhausdach und von 0,060 bis 0,603 auf dem Hofhaus; der beste Wert einer
 * Palettenfarbe war 3,26 und 2,28. Zwei Schatten standen hier einen Anlauf lang
 * als Notbehelf. Auf der Pille steht Kalkweiß nachgerechnet zwischen **7,0**
 * (hellstes Dach) und **12,2 zu 1** (dunkler Grund) — die Pille bringt ihren
 * eigenen Grund mit, deshalb hängt der Wert nicht mehr am Bild.
 *
 * Drittens das Ziel: Sie sieht aus, als könne man sie anklicken, und genau das
 * ist sie. Die unsichtbare Fläche über dem ganzen Haus bleibt als großes Ziel
 * daneben bestehen.
 *
 * Der Eckenradius steht fest in Bildpunkten — das ist die benannte Ausnahme
 * von „neue Maße in rem oder vw", genau wie beim Pillenradius der Kopfzeile.
 */
.ld-haeuser.is-bereit .ld-haeuser__marke {
	width: max-content;
	padding: 0.42em 1.15em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 80%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: opacity 0.35s ease, background-color 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.ld-haeuser.is-bereit .ld-haeuser__marke .ld-haeuser__name {
	color: var(--wp--preset--color--base);
	/* blockGap: erstes Kind der Marke — und die Pille lebt von engem Polster. */
	margin-block: 0;
}

/*
 * **Beim Darüberfahren wird die Pille deckend**, während die Zeile abrollt —
 * 0,65 Sekunden, dieselbe Dauer und Kurve wie die Füllung aller Knöpfe der
 * Seite: Die Schrift steht schon still, während die Farbe noch ankommt.
 */
.ld-haeuser.is-bereit .ld-haeuser__marke.is-an {
	background: var(--wp--preset--color--contrast);
}

.ld-haeuser__marke .ld-haeuser__zahl {
	margin-block-start: 0.35em;
	font-size: clamp(0.7rem, 0.78vw, 0.95rem);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/*
 * **Die Beschriftung sitzt auf dem Dach, und deshalb fällt die Wohnungszahl
 * dort weg.** Ein Plan beschriftet die Fläche selbst statt daneben mit einer
 * Linie dorthin; sobald der Name im Baukörper liegt, ist die Zuordnung
 * eindeutig und zwei schwebende Textblöcke entfallen.
 *
 * **Die Zahl bleibt trotzdem im Block stehen.** Ohne Skript entsteht der Plan
 * gar nicht — dann sind diese beiden Textblöcke die ganze Aussage des
 * Abschnitts, und ohne ihre Zahlen bliebe davon nur zweimal ein Hausname
 * übrig. Verborgen wird sie deshalb erst, wenn der Plan wirklich da ist.
 *
 * **Und der Abschnitt verliert dadurch nichts.** Er beantwortet, *wo* die
 * Häuser stehen; *was* sie sind — fünfzehn Wohnungen, Gründerzeit, saniert —
 * erzählt „Die zwei Wohnwelten" unmittelbar danach, und zwar ausführlich.
 */
.ld-haeuser.is-bereit .ld-haeuser__zahl {
	display: none;
}


/* --------------------------------------------------------------- Abschied */

/*
 * **Nur der Plan hängt zurück, nicht die Beschriftungen.** Sie saßen hier
 * früher frei über den Häusern und mussten deshalb mitwandern. Seit sie auf
 * den Dachflächen liegen, wandern sie ohnehin mit: stelle() misst die Lage
 * des Baukörpers, und die enthält den Abschied bereits.
 *
 * **Stand die Schicht weiter in dieser Regel, zählte der Abschied doppelt** —
 * die Wörter fuhren sichtbar aus ihren Häusern heraus und wieder hinein,
 * während man am Abschnitt vorbeiscrollte.
 */
.ld-haeuser.is-bereit .ld-haeuser__bild {
	translate: 0 calc(var(--ld-abschied, 0) * var(--ld-abschied-weg));
}

/* ------------------------------------------------------------ Die Wolken */

/*
 * **Drei Wolken vor dem Plan, jede schneller als er.** In der Vorlage
 * abgemessen — es ist der einzige Griff dieses Bildschirms, den man nicht
 * sofort durchschaut:
 *
 * | | Vorlage | hier |
 * |---|---|---|
 * | Zahl | 3 | 3 |
 * | Ton | reinweiß | reinweiß |
 * | **Deckung im Kern** | **98 – 100 %** | **100 %** |
 * | Fläche über 50 % Deckung | 10 – 16 % des Rahmens | 13 / 20 % |
 * | Rand-Deckung | **0,0 auf allen vier Rändern** | **0,0** |
 * | Anker | unten links / unten Mitte / oben rechts | gleich |
 * | Vorlauf vor dem Plan | 20 / 40 / 60 % | **12 / 24 / 36 %** |
 * | Filter, Mischmethode | keine | keine |
 *
 * **Hier steht kein `opacity`, und das ist der Kern der Sache.** Der erste
 * Anlauf hatte eines: Die Wolke war gebaut und wurde dann am Element
 * „zurückhaltend" gemacht. Damit war sie kein Kern mit weichem Rand mehr,
 * sondern ein gleichmäßiger Schleier — und ein halbdurchsichtiger heller
 * Schleier ist auf Kalkweiß gedämpft rechnerisch unsichtbar, elf von 255
 * Stufen. **Weich ist bei einer Wolke nur der Rand, nie der Kern.** Die
 * Zurückhaltung kommt aus Größe und Lage, nicht aus der Deckung.
 *
 * **Und der Rahmen muss Luft haben.** Die erste Fassung lief gerade aus dem
 * Bild — nachgemessen 20,5 Prozent Deckung auf der linken Kante, in der Spitze
 * 82,7. Das war die sichtbare Schnittkante. Arbors Wolken berühren keinen
 * Rand; unsere jetzt auch nicht. `werkzeug/wolken.php` misst das bei jeder
 * Umwandlung und meldet es.
 *
 * **Der Vorlauf ist zurückgenommen, und zwar gerechnet.** Die Vorlage fährt
 * über 4,57 Bildschirme, wir über 2,6 — das ist 0,57 ihrer Strecke. Mit ihren
 * 20/40/60 Prozent zögen die Wolken bei uns fast doppelt so schnell durch.
 * 0,6 davon ergibt 12/24/36; das Verhältnis 1 : 2 : 3 bleibt, und genau das
 * macht die Staffelung aus.
 */
.ld-haeuser__dunst {
	position: absolute;
	z-index: 1;
	inset-block: 0;
	inset-inline-start: 0;

	/*
	 * **Der Träger ist so breit wie der Plan, nicht wie der Bildschirm.** Das
	 * war der erste Fehler dieser Fassung: Bei Bildschirmbreite drängen sich
	 * alle drei Wolken auf einem Fenster und sind nach einem Drittel der Fahrt
	 * gemeinsam draußen. Über die volle Planbreite verteilt kommt eine nach der
	 * anderen ins Bild — genau das macht die Vorlage, deren Träger exakt die
	 * Breite ihres Bildes hat.
	 */
	width: calc(100% + var(--ld-h-weg, 0px));
	pointer-events: none;

	/* Dieselbe Fahrt wie der Plan — der Vorlauf kommt je Wolke dazu. */
	transform: translateX(calc(var(--ld-h-fahrt, 0) * var(--ld-h-weg, 0px) * -1));
	will-change: transform;
}

.ld-haeuser__schwade {
	position: absolute;
	display: block;
	aspect-ratio: 1;
	background-repeat: no-repeat;
	background-size: 100% 100%;

	/*
	 * Der Vorlauf: ein Anteil derselben Strecke, die der Plan zurücklegt.
	 * --ld-h-vor setzt jede Wolke selbst.
	 */
	translate: calc(var(--ld-h-vor) * var(--ld-h-fahrt, 0) * var(--ld-h-weg, 0px) * -1) 0;
}

/*
 * **Die Wolken sind tief angesetzt und werden vom Bildrand beschnitten.** So
 * macht es die Vorlage: Man sieht nie eine ganze Wolke frei im Bild stehen,
 * sondern immer eine, die durchzieht. Eine vollständig sichtbare Wolke wirkt
 * aufgeklebt.
 */
.ld-haeuser__schwade--1 {
	--ld-h-vor: 0.12;
	inset-block-end: -46svh;
	inset-inline-start: -7%;
	height: 125svh;
	background-image: url("../../images/platzhalter/haeuser-wolke-1.webp");
}

.ld-haeuser__schwade--2 {
	--ld-h-vor: 0.24;
	inset-block-end: -40svh;
	inset-inline-start: 33%;
	height: 110svh;
	background-image: url("../../images/platzhalter/haeuser-wolke-2.webp");
}

.ld-haeuser__schwade--3 {
	--ld-h-vor: 0.36;
	inset-block-start: -42svh;
	inset-inline-end: -5%;
	height: 118svh;
	background-image: url("../../images/platzhalter/haeuser-wolke-3.webp");
}

/*
 * Ohne Bewegung stehen die Wolken still da, statt zu verschwinden — sie sind
 * Teil des Bildes, nicht der Bewegung.
 */
@media (prefers-reduced-motion: reduce) {
	.ld-haeuser__dunst,
	.ld-haeuser__schwade {
		transform: none;
		translate: none;
	}
}

/* ------------------------------------------------- Ohne Skript und schmal */

/* ------------------------------------------ Der Grund unter dem Schriftzug */

/*
 * **Auf einer Aufnahme mit echten Schatten trägt der dunkle Schriftzug
 * nicht mehr.** Auf der gezeichneten Draufsicht ging Card Room Green tief, weil
 * die Fläche überall gleich hell war. Im Band, durch das der Zug läuft, fällt
 * er auf der Aufnahme auf **1,1 zu 1** — also auf unsichtbar.
 *
 * Nachgerechnet über die ganze Bildbreite, damit es an jeder Stelle der Fahrt
 * gilt: Kalkweiß auf einem Schleier aus Hofgrün tief erreicht auch an der
 * hellsten Stelle erst ab **55 Prozent** Deckung die 3 zu 1 für große Schrift.
 * Hier stehen **65 Prozent** — ein Zehntel Reserve.
 *
 * **Es ist ein Verlauf am unteren Rand, keine Fläche** — dieselbe Regel wie in
 * „Haidhausen". Über der Mitte des Bildes liegt nichts; dort steht auch kein
 * Text. Ganz unten geht er auf 80 Prozent, weil dort die Herkunftszeile steht
 * und kleine Schrift mehr braucht.
 */
.ld-haeuser.is-bereit .ld-haeuser__buehne::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset-inline: 0;
	inset-block-end: 0;
	height: 50%;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent) 32%,
		color-mix(in srgb, var(--wp--preset--color--contrast) 65%, transparent) 56%,
		color-mix(in srgb, var(--wp--preset--color--contrast) 65%, transparent) 88%,
		color-mix(in srgb, var(--wp--preset--color--contrast) 80%, transparent) 100%
	);
}

/*
 * **Die helle Farbe sitzt an den Zeichen, nicht am Block.** Der Schriftzug
 * braucht zwei Farben: hell, solange er auf der Aufnahme steht, und dunkel im
 * Rückfall ohne Skript, wo er über dem hellen Abschnittsgrund liegt. Eine
 * Preset-Farbe am Block kommt mit `!important` und ließe sich von hier aus
 * nicht umstellen.
 *
 * Die Zeichen legt `zerlegen()` an, und das läuft nur, wenn es den Plan
 * wirklich gibt. Damit greift genau die richtige Farbe in genau dem richtigen
 * Zustand, und die Farbe am Block bleibt im Editor änderbar — sie ist dann
 * die des Rückfalls.
 */
.ld-haeuser.is-bereit .ld-haeuser__zeichen {
	color: var(--wp--preset--color--base);
}

/*
 * Ohne Skript und bei reduzierter Bewegung entsteht der Plan nicht. Übrig
 * bleiben die beiden Häuser als Text mit ihrer Wohnungszahl und dem Verweis —
 * die vollständige Aussage des Abschnitts, nur ohne das Bild.
 */
.ld-haeuser:not(.is-bereit) .ld-haeuser__buehne {
	height: auto;
	padding-block: var(--wp--preset--spacing--60);
}

.ld-haeuser:not(.is-bereit) .ld-haeuser__titel {
	position: static;
	margin-block-end: var(--wp--preset--spacing--50);
}

.ld-haeuser:not(.is-bereit) .ld-haeuser__schicht {
	position: static;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding-inline: 7.4vw;
	pointer-events: auto;
}

.ld-haeuser:not(.is-bereit) .ld-haeuser__marke {
	position: static;
	text-align: start;
}

/*
 * Die Aufnahme steht dann ganz gewöhnlich im Fluss, in ihrer eigenen Höhe —
 * ohne Fahrt, aber vollständig. Das ist mehr als vorher: Da entstand der Plan
 * gar nicht, und es blieben nur die beiden Häuser als Text.
 */
.ld-haeuser:not(.is-bereit) .ld-haeuser__bild {
	position: static;
	width: auto;
	height: auto;
	transform: none;
	margin-block-end: var(--wp--preset--spacing--40);
}

.ld-haeuser:not(.is-bereit) .ld-haeuser__bild img {
	height: auto;
}


/*
 * Schmal bleibt der Plan bestehen — anders als bei der Umgebungskarte, denn
 * hier trägt er sich auch klein: Es sind zwei Rechtecke, keine Karte mit
 * sieben Marken. Nur der Schriftzug wird kleiner und die Beschriftungen
 * rücken enger.
 */
@media (max-width: 60rem) {
	/*
	 * **Der Schriftzug steht auch hier unten, nicht oben.** Er stand auf dem
	 * Telefon bei 5 svh — und weil die Grundregel zugleich `inset-block-end`
	 * setzt, spannte sich sein Kasten über 708 der 812 Bildpunkte und der Text
	 * saß ganz oben: **mitten unter der fixierten Kopfzeilen-Pille.**
	 *
	 * Auf der gezeichneten Draufsicht fiel das wenig auf, dort stand er dunkel
	 * auf einer gleichmäßig hellen Fläche. Auf der Aufnahme steht er in
	 * Kalkweiß und läge oben auf hellen Dächern — also unlesbar und verdeckt
	 * zugleich. Unten liegt der Verlauf, der ihn ohnehin trägt.
	 *
	 * Zeilenhöhe 1,12 statt 1,0: Bei 11 vw bricht die Zeile auf 375 Bildpunkten
	 * um, und mehrzeilige deutsche Versalien brauchen den Platz für die Punkte
	 * auf dem Ä.
	 */
	.ld-haeuser__titel {
		font-size: 11vw;
		line-height: 1.12;
	}

	/*
	 * **Nicht unter 12 Bildpunkten.** Aus der Schreibtischformel kämen hier
	 * 9,6 heraus, und die eigene Handy-Prüfung meldet alles darunter als
	 * Fehler. Platz ist genug: Die Beschriftung misst dann 94 Bildpunkte in
	 * einer 317 breiten Dachfläche.
	 */
	.ld-haeuser__marke .ld-haeuser__name {
		font-size: clamp(0.75rem, 2.4vw, 0.85rem);
	}

	/*
	 * **Auf dem Telefon in Arbors Maßen** (27.10.2026): Die Aufnahme steht in
	 * voller Höhe (siehe `T_HOCH` in haeuser.js), die Wolken deshalb kleiner
	 * und an Arbors Plätzen — ihre stehen dort bei 692, 846 und 769
	 * Bildpunkten, also 85, 104 und 95 svh, je zur Hälfte über den Bildrand
	 * hinaus. Mit unseren Schreibtischgrößen (110 bis 125 svh) deckte die
	 * dritte das Hofhaus fast ganz zu.
	 */
	@media (max-width: 767px) {
		.ld-haeuser__schwade--1 {
			inset-block-end: -42svh;
			height: 85svh;
		}

		.ld-haeuser__schwade--2 {
			inset-block-end: -27svh;
			height: 104svh;
		}

		.ld-haeuser__schwade--3 {
			inset-block-start: -60svh;
			height: 95svh;
		}
	}
}