/*
 * Abschnitt: Die zwei Wohnwelten
 *
 * Der Abschnitt, der das Kernargument des Objekts sichtbar macht: Es gibt nicht
 * dreiundzwanzig Wohnungen, es gibt zwei Häuser mit fünfzehn und acht. Der
 * Plan davor zeigt, **wo** sie stehen; hier steht, **was** sie sind.
 *
 * Warum das nötig ist: Die beiden Häuser sprechen verschiedene Käufer an. Im
 * Vorderhaus liegen alle sechs Zwei-Zimmer-Wohnungen und keine über 138 m²; im
 * Hofhaus liegt keine unter 95 m², dafür hat dort jede Wohnung einen
 * Freibereich und mindestens ein Schlafzimmer en suite. Eine gemeinsame
 * Angabe „46 bis 195 m², 2 bis 5 Zimmer" beschreibt keine einzige echte
 * Wohnung gut.
 *
 * Nachgebaut nach Arbors „Residences": links eine helle Spalte, rechts das
 * Bild über die volle Höhe. Maße wie im Zimmerzahl-Abschnitt in der Vorlage
 * bei 1512 gemessen, ein rem entspricht dort 0,83 vw:
 *
 *   Bild rechts                55 vw       breit, volle Höhe, randlos
 *   Spalte links, Rand         7,39 %      der Breite (152 px bei 2056)
 *   Spalte, Rand oben/unten     4,15 vw
 *   Spalte, Inhaltsbreite      31,6 vw     (650 px bei 2056)
 *   Riesenwort im Bild         5,19 vw     Grad, 4,15 vw von rechts und unten
 *   Zeilen, Grad                2,90 vw    Zeilenhöhe 4,15 vw
 *   Strich                      1 px       über die volle Spaltenbreite
 *   Fakten, Abstand             2,12 vw    unter dem Strich
 *   Pfeile                      3,40 vw    Kreis, 2,75 vw von der Bildkante
 *   Zeichen im Pfeil            1,30 vw
 *
 * Die Pfeile sind in der Vorlage nachgemessen: 70 × 70 Bildpunkte bei 2056
 * Fensterbreite, ein Haarstrich in Hellton, Füllung aus der dunklen Farbe zu
 * 40 Prozent. Sie liegen **innerhalb** des Bildes, an beiden Kanten um
 * denselben Betrag eingerückt — dadurch stehen sie symmetrisch und werden
 * nirgends angeschnitten.
 *
 * **Der Abschnitt steht auf Card Room Green tief.** Er stand zuerst auf
 * Kalkweiß — und damit als dritter heller Bildschirm in Folge, nach „Zwei
 * Häuser, ein Hof" in Kalkweiß gedämpft und vor „Wohnungen" in Kalkweiß. Die
 * Seite wechselt sonst paarweise hell und dunkel; am Ende brach der Rhythmus.
 *
 * Gewählt ist die Fassadenfarbe des Hofhauses, eine Stufe textsicher gemacht:
 * die einzige Farbe der Palette, die noch nie ein Abschnittsgrund war, und ein
 * Grün statt eines fünften fast schwarzen Bildschirms. Nachgerechnete Kontraste
 * darauf: Kalkweiß 5,5 und Kalkweiß gedämpft 5,0 tragen Fließtext, Salbei 3,8
 * nur große Schrift, Perlmausgrau mit 1,5 gar nichts. Die Textfarben sind
 * entsprechend gesetzt — die ruhenden Zeilen in Salbei, weil sie mit rund 60
 * Bildpunkten Grad groß genug sind.
 *
 * Was hier steht, ist Form. Schriftart und Farbe tragen die Blöcke selbst.
 * Eine Ausnahme, unten begründet: die Farbe der gewählten Zeile.
 */

.ld-wohnwelten {
	--ld-ww-rand: 4.15vw;
	--ld-ww-spalte: 31.6vw;
	--ld-ww-zeile: 4.15vw;
	--ld-ww-bild: 55vw;

	/*
	 * **Das Polster der Listenzeilen gehört ins Rollfenster, nicht darum
	 * herum.** In der Vorlage gemessen: 16 Bildpunkte oben und 8 unten bei
	 * 56 Grad, also dieselben Anteile, die hier stehen — aber dort sitzen
	 * sie an der Zeile **innerhalb** des Fensters, und das Fenster ist
	 * dadurch 80 statt 56 Bildpunkte hoch.
	 *
	 * **Daran hing ein sichtbarer Fehler.** Die Zeilenhöhe ist 1,0, die
	 * Tinte einer Antiqua ragt darüber hinaus: „Garage" misst 62,7
	 * Bildpunkte bei einer 59,6 hohen Zeile. Die Unterlänge des g der
	 * weggerollten aufrechten Zeile hing deshalb oben im Fenster — bei
	 * „Bäder", „Vorderhaus" und „Hofhaus" fällt es nicht auf, die haben
	 * keine Unterlänge. **In der Vorlage kommt der Fall gar nicht vor:**
	 * Studio und One bis Four Bedroom haben keinen einzigen solchen
	 * Buchstaben.
	 *
	 * Die Zeile selbst trägt jetzt kein Polster mehr; der Zeilenabstand
	 * bleibt dadurch auf den Bildpunkt derselbe.
	 */
	--ld-ww-polster-o: 0.83vw;
	--ld-ww-polster-u: 0.415vw;
	--ld-ww-fenster: calc( 1em + var( --ld-ww-polster-o ) + var( --ld-ww-polster-u ) );

	position: relative;
	overflow: clip;
	padding: 0;
}

.ld-wohnwelten .ld-wohnwelten__buehne {
	position: relative;
	height: 100svh;
	margin: 0;
}

/* ------------------------------------------------------------ Bild rechts */

/*
 * Vier Bilder liegen übereinander am rechten Rand: je zwei pro Haus. Gewechselt
 * wird über die Deckung. Sie lassen den Zeiger durch — angefasst wird links und
 * an den Pfeilen.
 */
.ld-wohnwelten__bilder {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 1;
	width: var(--ld-ww-bild);
	margin: 0;
	overflow: clip;
	pointer-events: none;
}

/*
 * Der Bildblock bringt als Figure eigene Maße mit; ohne die drei Angaben hier
 * stünde die Aufnahme als schmaler Streifen mitten in der Fläche.
 */
.ld-wohnwelten__bild {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	transition: opacity 0.9s cubic-bezier(0.45, 0.03, 0.52, 0.96);
}

.ld-wohnwelten__bild.is-vorn {
	opacity: 1;
}

/*
 * Zwei Klassen im Selektor, sonst greift die eigene Angabe nicht: WordPress
 * gibt dem Bild `width: auto` mit, und die Aufnahme stünde als schmaler
 * Streifen mitten in der Fläche.
 */
.ld-wohnwelten__bilder .ld-wohnwelten__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * **Beim Hof im Garten hängt das Bild unten.** Es geht um den Hof, nicht um
 * das Haus dahinter; wird der Platz breiter als 0,94 und fällt deshalb oben
 * und unten etwas weg, soll es das Dach treffen und nicht Rasen, Sandkasten
 * und Bank. Vom Kunden so gewünscht. Die Datei ist bereits unten bündig
 * zugeschnitten (`QUELLE-wohnwelten.md`).
 */
.ld-wohnwelten__bilder .ld-wohnwelten__bild--hof-2 img {
	object-position: 50% 100%;
}

/* ---------------------------------------------------------------- Pfeile */

/*
 * Die beiden Pfeile legt das Skript an. Sie tragen keinen Inhalt, den der Kunde
 * pflegen müsste — dieselbe Begründung wie beim Zeichen der Menü-Schaltfläche.
 */
.ld-wohnwelten__pfeil {
	position: absolute;
	z-index: 4;
	inset-block-start: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 3.4vw;
	min-width: 2.75rem;
	aspect-ratio: 1;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 70%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 40%, transparent);
	color: var(--wp--preset--color--base);
	/* Mitte über transform, nicht über negative Ränder — siehe blockGap. */
	transform: translate(-50%, -50%);
	cursor: pointer;
	pointer-events: auto;
	transition: background-color 0.4s ease, border-color 0.4s ease;
}

.ld-wohnwelten__pfeil:hover {
	border-color: var(--wp--preset--color--base);
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 62%, transparent);
}

/* Eingerückt von beiden Bildkanten, um denselben Betrag. */
.ld-wohnwelten__pfeil--zurueck {
	inset-inline-start: calc(100% - var(--ld-ww-bild) + 2.75vw);
}

.ld-wohnwelten__pfeil--vor {
	inset-inline-start: calc(100% - 2.75vw);
}

/*
 * Das Zeichen ist eine Maske: Es gibt nur die Form vor, die Farbe kommt aus
 * `color`. Der Rückwärtspfeil ist derselbe, um 180 Grad gedreht.
 */
.ld-wohnwelten__pfeil::before {
	content: "";
	display: block;
	width: 1.3vw;
	min-width: 1rem;
	aspect-ratio: 1;
	background-color: currentColor;
	mask: url("../../images/symbole/pfeil.svg") center / contain no-repeat;
}

.ld-wohnwelten__pfeil--zurueck::before {
	transform: rotate(180deg);
}

/* ------------------------------------------------------------ Riesenwort */

/*
 * Unten rechts im Bild steht der Name des gewählten Eintrags, halb so groß wie
 * ein Abschnitts-Riesenwort. Maße aus der Vorlage: 5,19 vw Grad, 4,15 vw von
 * rechts und unten — dieselben Werte wie beim Wort im Zimmerzahl-Abschnitt.
 *
 * **Es wechselt mit der Auswahl, anders als in der Vorlage.** Dort steht ein
 * fester Titel über einer Liste von Wohnungsgrößen — alles Residences. Hier
 * stehen drei verschiedene Orte zur Wahl, und ein fester Titel „Wohnwelten"
 * wäre über dem Hof schlicht falsch: Der Hof ist keine Wohnwelt. So beschriftet
 * das Wort die Aufnahme, unter der es steht.
 */
.ld-wohnwelten__woerter {
	position: absolute;
	inset: 0;
	z-index: 2;
	margin: 0;
	pointer-events: none;
}

.ld-wohnwelten__wort {
	position: absolute;
	inset-block-end: var(--ld-ww-rand);
	inset-inline-end: var(--ld-ww-rand);
	margin: 0;
	font-size: clamp(2rem, 5.19vw, 6.2rem);
	font-weight: 300;
	line-height: 1;
	/* Der Ausgleich für Light, auf „Vorderhaus“, „Der Hof“, „Hofhaus“ abgestimmt — mit dem allgemeinen
	 * Wert (`--ld-light-lauf`) lag die Breite einige Zehntelprozent daneben. */
	letter-spacing: -0.0245em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.22s ease;
}

.ld-wohnwelten__wort.is-vorn {
	opacity: 1;
	transition: opacity 0.38s ease 0.22s;
}

/* --------------------------------------------------------- Spalte links */

/*
 * Oben Versalien-Zeile und die beiden Häuser, unten der Strich mit den Fakten,
 * dazwischen der große leere Raum der Vorlage. Deshalb ein Stapel mit Abstand
 * nach außen statt absolut gesetzter Ebenen.
 */
.ld-wohnwelten__spalte {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0;
	padding: var(--ld-ww-rand) 0 var(--ld-ww-rand) 7.39%;
	pointer-events: none;
}

/*
 * WordPress setzt über blockGap ein margin-block-start auf alle Kinder außer
 * dem ersten. Der Stapel trägt seine Abstände selbst — ohne das stünde alles
 * um 24 Bildpunkte zu tief.
 */
.ld-wohnwelten__spalte > *,
.ld-wohnwelten__oben > *,
.ld-wohnwelten__unten > *,
.ld-wohnwelten__liste > *,
.ld-wohnwelten__fakten > *,
.ld-wohnwelten__satz > * {
	margin-block: 0;
}

.ld-wohnwelten__oben,
.ld-wohnwelten__unten {
	width: var(--ld-ww-spalte);
	margin: 0;
}

/* Angefasst wird nur, was auch etwas tut. */
.ld-wohnwelten__liste {
	pointer-events: auto;
}

/*
 * Eigene Klasse statt `.ld-label`: Grad und Laufweite sind an der Vorlage
 * gemessen, so wie in „Architektur" und „Umgebung". Vorher stand hier
 * `.ld-label` mit 0,22 em Laufweite — die weite Sperrung fiel als Fremdkörper
 * auf, weil kein anderer gemessener Abschnitt sie benutzt.
 */
.ld-wohnwelten__kicker {
	margin-block-end: 2.12vw;
	font-size: clamp(0.8rem, 1.04vw, 1.15rem);
	letter-spacing: 0.02em;
	line-height: 1.5;
	text-transform: uppercase;
}

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

.ld-wohnwelten__liste {
	position: relative;
	margin: 0;
}

/*
 * **Der senkrechte Strich links zeigt, wo der Zeiger steht.**
 *
 * In der Vorlage nachgemessen: Er gehört nicht zu einer einzelnen Zeile,
 * sondern liegt einmal für die ganze Liste da und wird verschoben — beim
 * Überfahren fährt er zu der Zeile unter dem Zeiger, beim Verlassen der Liste
 * kehrt er zur gewählten zurück und blendet dabei aus. Die Auswahl trägt
 * damit allein die kursive Schrift.
 *
 * Er ist reine Auszeichnung und gehört deshalb ins CSS und nicht in einen
 * Block. Das Skript setzt nur die Nummer der Zeile; wohin der Strich gehört,
 * rechnet das CSS daraus aus.
 */
.ld-wohnwelten__liste::before {
	content: "";
	position: absolute;
	inset-inline-start: -1.06vw;
	inset-block-start: calc(var(--ld-ww-vorn, 0) * var(--ld-ww-zeile));
	width: 0.104vw;
	min-width: 1px;
	/*
	 * Vier Fünftel der Zeile, nicht die ganze — dort gemessen (h-[80%] bei 80
	 * Bildpunkten Zeilenhöhe), und mittig dazu gestellt.
	 */
	height: calc(var(--ld-ww-zeile) * 0.8);
	margin-block-start: calc(var(--ld-ww-zeile) * 0.1);
	background-color: var(--wp--preset--color--base);
	opacity: 0;
	/* 0,65 s mit derselben Kurve wie das aufgehende Menü — dort gemessen. */
	transition: inset-block-start 0.65s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.45s ease;
}

.ld-wohnwelten.is-da .ld-wohnwelten__liste.is-zeigt::before {
	opacity: 1;
}

.ld-wohnwelten__zeile {
	box-sizing: border-box;
	margin: 0;
	/* Das Polster sitzt an den Zeilen im Fenster — siehe --ld-ww-polster-o. */
	padding-block: 0;
	font-size: clamp(1.5rem, 2.9vw, 3.5rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: var(--ld-light-lauf);
	cursor: pointer;
}

/*
 * Ausnahme von der Regel, dass Farbe an den Block gehört: Welches Haus gerade
 * gewählt ist, ist ein Zustand und keine Gestaltungsentscheidung. Der Block
 * trägt die Farbe des ruhenden Zustands, hier steht nur der gewählte.
 */
/*
 * Gefärbt wird die Rolle und nicht die Zeile selbst: WordPress schreibt die
 * Farbwahl eines Blocks mit !important ins Stylesheet, und dagegen kommt eine
 * Regel auf demselben Element nicht an. Die Rolle liegt darin und trägt keine
 * Blockfarbe — dort genügt eine gewöhnliche Angabe. Der Ruheton bleibt damit am
 * Block und im Editor änderbar.
 */


/* ------------------------------------------------- Der Strich und die Fakten */

/*
 * Die Fakten stehen in einem festen Feld unter dem Strich und tauschen beim
 * Wechseln aus — die beiden Hausnamen bleiben dabei an ihrem Platz. Klappte
 * statt dessen unter dem Namen etwas auf, spränge die ganze Spalte bei jedem
 * Klick auf die Pfeile, und die liegen auf der anderen Bildschirmhälfte.
 *
 * Das Gefühl vom Öffnen macht der Aufbau: Die Zeilen steigen von unten herein,
 * mit dem Baustein `.ld-wort` aus base.css.
 */
.ld-wohnwelten__fakten {
	display: grid;
	padding-block-start: 2.12vw;
	border-block-start: 1px solid
		color-mix(in srgb, var(--wp--preset--color--base) 26%, transparent);
}

/*
 * Beide Fassungen liegen in derselben Rasterzelle. Dadurch ist das Feld immer
 * so hoch wie die längere von beiden und wackelt beim Wechseln nicht.
 */
/*
 * Erst tritt die alte Fassung ab, dann kommt die neue — nicht gleichzeitig.
 * Beim Überblenden lagen die beiden Texte einen Moment lang übereinander und
 * ergaben eine unlesbare Verschmierung. Bei Bildern ist ein Überblenden
 * richtig, bei Text nicht.
 */
.ld-wohnwelten__satz {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s ease;
}

.ld-wohnwelten__satz.is-vorn {
	opacity: 1;
	transition: opacity 0.38s ease 0.22s;
}

/*
 * Grad und Zeilenhöhe wie der Textblock unten links im Abschnitt „Umgebung" —
 * 16 Bildpunkte bei 2056, in der Vorlage gemessen. Er stand hier zuerst auf
 * 18,5 und war damit sichtbar größer als derselbe Text an anderer Stelle.
 */
.ld-wohnwelten__fakt {
	margin: 0;
	font-size: clamp(0.7rem, 0.78vw, 0.95rem);
	line-height: 1.4;
}

/*
 * Jede Fassung beginnt mit einer kleinen Titelzeile. Beim ersten Bild eines
 * Hauses trägt sie die Zahlen, beim zweiten sagt sie, worum es dort geht.
 */
.ld-wohnwelten__fakt--titel {
	margin-block-end: 0.83vw;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* ------------------------------------------------------- Die Schaltfläche */

/*
 * Unter den Fakten steht der Verweis in die Wohnungsliste des gewählten
 * Hauses. **Alle drei Einträge haben einen**, auch der Hof — er führt dort zu
 * allen Wohnungen. Verschwände er beim Hof, spränge die Spalte bei jedem
 * Wechsel; dasselbe Argument wie beim festen Faktenfeld. Und ein Knopf, der
 * ins Leere führt, wäre schlechter als gar keiner.
 *
 * Die drei liegen wie die Fakten in derselben Rasterzelle, damit das Feld
 * immer gleich hoch bleibt. Rechtsbündig wie in der Vorlage.
 */
.ld-wohnwelten__schalter {
	display: grid;
	justify-items: end;
	margin-block-start: 2.12vw;
	pointer-events: none;
}

.ld-wohnwelten__knopf {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s ease;
}

.ld-wohnwelten__knopf.is-vorn {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.38s ease 0.22s;
}

/*
 * **Ohne Zeichen.** Die Beschriftung ist hier lang („Wohnungen im Vorderhaus"),
 * und ein Zeichen daneben macht die Pille noch breiter, ohne etwas zu sagen.
 * Das Zeichen hängt am Modifier; er fehlt im Markup, deshalb bleibt es aus.
 *
 * **Zentriert wird an der Zeile, nicht am Verweis.** Die Zeile steht auf
 * `space-between` und hält damit rechts den Platz für das Zeichen frei; ohne
 * Zeichen rutscht die Beschriftung nach links. Am Verweis zu zentrieren hilft
 * nichts, weil das Fenster darin ohnehin die volle Breite einnimmt. Beim langen
 * Knopf fällt das nicht auf — er füllt die Pille aus. Erst „Alle Wohnungen"
 * zeigt es.
 */
.ld-wohnwelten__knopf a {
	justify-content: center;
}

.ld-wohnwelten__knopf .ld-schalter__zeile {
	justify-content: center;
}

/* --------------------------------------------------------------- Auftritt */

/*
 * Die beiden Hausnamen steigen beim Hineinscrollen von unten herein, so wie
 * die Ortsnamen im Abschnitt „Umgebung": aus 110 Prozent der eigenen Höhe,
 * 0,9 Sekunden, 0,06 Sekunden von Zeile zu Zeile.
 */
/*
 * **Die gewählte Zeile rollt in eine kursive Fassung.** So macht es die
 * Vorlage, und es ist der schönste Griff dieses Bildschirms: Unter jedem Namen
 * wartet, genau eine Zeilenhöhe tiefer, dieselbe Zeile noch einmal — in Kursiv
 * und im dunklen Ton. Beim Darüberfahren und beim Auswählen rollen beide nach
 * oben, die aufrechte geht, die kursive kommt. 0,5 Sekunden, in der Vorlage
 * gemessen.
 *
 * Der kursive Schnitt ist echt: `PPEditorialOld-LightItalic` liegt im
 * Theme und ist in `theme.json` als 300 kursiv eingetragen. Fehlte er, stellte
 * der Browser die aufrechte Schrift schräg — bei einer Displayschrift sieht man
 * das sofort.
 *
 * Im Markup steht der Name **einmal**; die zweite Ausfertigung legt das Skript
 * an. Dieselbe Regel wie bei den Schaltflächen: Stünde sie zweimal da, müsste
 * der Kunde denselben Text an zwei Stellen pflegen.
 */
.ld-wohnwelten__fenster {
	display: block;
	height: var( --ld-ww-fenster );
	overflow: clip;
}

/*
 * Zwei Bewegungen auf einem Element, und sie stören einander nicht: Der
 * Auftritt läuft über `translate`, das Abrollen über `transform`. Das ist
 * dieselbe Aufteilung wie beim Abschied klebender Abschnitte.
 */
/*
 * **Die Rolle bewegt sich beim Auftritt nicht mehr.** Sie trägt nur noch den
 * Wechsel auf die kursive Fassung beim Auswählen.
 *
 * In der Vorlage sind das zwei getrennte Dinge, übereinandergelegt: ein
 * Fenster mit fester Zeile darin für die Auswahl — und der Auftritt Buchstabe
 * für Buchstabe **in** der Zeile. Vorher rollte hier stattdessen die ganze
 * Zeile aus dem Fenster herauf; das war unsere eigene Zutat.
 */
.ld-wohnwelten__rolle {
	display: block;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ld-wohnwelten__vor,
.ld-wohnwelten__nach {
	display: block;
	padding-block: var( --ld-ww-polster-o ) var( --ld-ww-polster-u );
	line-height: 1;
}

/*
 * Die überfahrene Zeile tritt hervor — in der Vorlage 0,5 Sekunden. Dort wird
 * sie **dunkler** (Gold auf Dunkelgrün); bei uns steht helle Schrift auf
 * dunklem Grund, deshalb geht sie den umgekehrten Weg und wird heller.
 * Dieselbe Wirkung, gespiegeltes Hell-Dunkel.
 */
.ld-wohnwelten__vor {
	transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Die kursive Fassung trägt ihre Farbe selbst. Sie liegt **in** der
 * Überschrift und nicht auf ihr — nur deshalb greift eine gewöhnliche Angabe:
 * WordPress schreibt die Farbwahl des Blocks mit !important auf das Element
 * selbst, und dagegen käme eine Regel dort nicht an.
 */
.ld-wohnwelten__nach {
	font-style: italic;
	color: var(--wp--preset--color--base);
}

/*
 * **Nur beim Klicken, nicht beim Darüberfahren.** So macht es die Vorlage: Das
 * Abrollen zeigt an, was gewählt **ist**, nicht was unter dem Zeiger liegt.
 * Läuft es schon beim Darüberfahren, verliert es genau diese Aussage — man
 * sieht die Bewegung dann bei jedem Vorbeifahren und weiß am Ende nicht mehr,
 * welche Zeile gilt.
 *
 * Die Tastatur bleibt ausgenommen: Wer mit Tab hierherkommt, braucht ein
 * sichtbares Zeichen, wo er steht. Das betrifft die Maus nicht.
 */
.ld-wohnwelten__zeile.is-vorn .ld-wohnwelten__rolle,
.ld-wohnwelten__zeile:focus-visible .ld-wohnwelten__rolle {
	transform: translateY( calc( -1 * var( --ld-ww-fenster ) ) );
}

/* ------------------------------------------------------- Schmale Geräte */

/*
 * Nebeneinander geht auf dem Handy nicht: Das Bild bliebe ein Streifen und die
 * Hausnamen brächen um. Untereinander, Bild oben, Spalte darunter — und die
 * Pfeile wandern an den unteren Rand des Bildes.
 */
/* ---------------------------------------------------------- Darüberfahren */

/*
 * **Nur wo es einen Zeiger gibt.** Auf Tastgeräten löst ein Tippen sonst den
 * Hover-Zustand aus und lässt ihn danach stehen.
 *
 * Die Farbe ist eine Ausnahme von der Regel, dass Farbe an den Block gehört —
 * wo der Zeiger steht, ist ein Zustand und keine Gestaltungsentscheidung.
 * Dieselbe Begründung wie bei der kursiven Fassung weiter oben.
 */
/*
 * **Die Vignette hinter dem Riesenwort.**
 *
 * Das Wort steht in Salbei unten rechts **auf der Aufnahme** — und trug damit
 * nur dort, wo die Aufnahme zufällig dunkel ist. Am 15.09.2026 nachgemessen
 * bei 1440 × 900, Schwelle 3 für große Schrift: **fünf von neun Bildern lagen
 * darunter**, der schlechteste bei 1,13 zu 1. Aufgefallen ist es erst, als ein
 * helles Dachbild dazukam; die vier anderen Ausfälle standen schon vorher da.
 *
 * **Es ist eine Vignette und keine Fläche** — dieselbe Regel wie im Abschnitt
 * „Haidhausen": nachmessen, wo das Bild wirklich zu hell ist, und nur dort
 * abdunkeln. Der Verlauf sitzt in der unteren rechten Ecke, genau dort, wo das
 * Wort steht, und ist bei zwei Dritteln der Bildbreite bereits aus.
 *
 * **Die Stärke ist abgetastet, nicht gepeilt.** Salbei hat eine Leuchtdichte
 * von 0,595; für 3 zu 1 darf der Grund darunter höchstens 0,165 haben. Vier
 * Fassungen wurden über **alle fünfzehn Bilder beider Abschnitte** und drei
 * Fensterformate durchgerechnet — der schlechteste Wert je Fassung: 3,02 ·
 * **3,68** · 4,23 · 4,37. Genommen ist die zweite: Die erste trägt zwar
 * überall, aber ohne jede Reserve; die stärkeren dunkeln die ohnehin guten
 * Bilder nur unnötig ab. Dieselbe Abwägung wie in „Haidhausen".
 *
 * **Sie liegt an der Bildebene, nicht am Abschnitt.** Dadurch wird sie vom
 * `overflow: clip` derselben Ebene beschnitten und wandert nicht über die
 * Spalte links.
 */
.ld-wohnwelten__bilder::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(
		155% 80% at 100% 100%,
		color-mix(in srgb, var(--wp--preset--color--contrast) 84%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--contrast) 73%, transparent) 42%,
		color-mix(in srgb, var(--wp--preset--color--contrast) 32%, transparent) 76%,
		transparent 100%
	);
}

@media (hover: hover) {

	/*
	 * **Die Farbe gehört ans Kind, nicht an die Zeile.** WordPress setzt
	 * Preset-Farben wie has-sage-color mit `!important`; eine Angabe an der
	 * Zeile selbst greift deshalb nicht. Dieselbe Stelle und dieselbe
	 * Begründung wie bei der kursiven Fassung weiter oben.
	 */
	.ld-wohnwelten__zeile:hover .ld-wohnwelten__vor {
		color: var(--wp--preset--color--base);
	}
}

/* ------------------------------------------------------------- Auftritt */

/*
 * **Die beiden Hälften öffnen sich auseinander.** Die Spalte ist an ihrer
 * Unterkante auf null zusammengeschoben und wächst nach oben, die Bilder sind
 * an ihrer Oberkante zusammengeschoben und rollen nach unten auf.
 *
 * Am Listenbildschirm der Vorlage nachgemessen: Beide Hälften standen an
 * jedem Messpunkt auf **demselben** Wert, laufen also synchron. Ausgelöst
 * wird bei 0,7 der Fensterhöhe, die Fahrt dauert 1,2 Sekunden.
 *
 * **Sie hängt nicht am Scrollrad.** Nachgeprüft, indem das Scrollen mitten in
 * der Fahrt aufhörte — sie lief von allein zu Ende. Beim Zurückscrollen fährt
 * sie deshalb auch nicht zurück.
 *
 * Es ist derselbe Griff wie im Abschnitt „Umgebung", mit denselben Werten;
 * dort steht die ausführliche Begründung.
 */
.ld-wohnwelten.is-bereit .ld-wohnwelten__spalte {
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.ld-wohnwelten.is-da .ld-wohnwelten__spalte {
	clip-path: inset(0 0 0 0);
}

.ld-wohnwelten.is-bereit .ld-wohnwelten__bilder {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.ld-wohnwelten.is-da .ld-wohnwelten__bilder {
	clip-path: inset(0 0 0 0);
}

/*
 * **Text und Knopf unten kommen erst nach der Liste.**
 *
 * Die Spalte geht von unten nach oben auf, und die beiden stehen unten — sie
 * waren damit als Erste frei, während die Liste darüber noch gar nicht da
 * war. **In der Vorlage ist das genauso** (ihr „View all" bei 44 Prozent, ein
 * Knopf bei 94), aber der Eindruck war, dass immer schon alles dasteht.
 * Deshalb hier eine bewusste Zutat über die Vorlage hinaus: Sie blenden ein,
 * wenn die Namen fertig aufgebaut sind.
 *
 * **Die Deckung sitzt am Träger, nicht an Text und Knopf selbst.** Beide
 * wechseln beim Blättern, und ihre eigene Deckung gehört dieser Mechanik.
 */
.ld-wohnwelten.is-bereit .ld-wohnwelten__unten {
	opacity: 0;
}

/*
 * **Die Verzögerung gehört ans Einblenden, nicht an den Anfangszustand.**
 * Stand sie am geschlossenen Zustand, verzögerte sie das *Verschwinden*: Beim
 * Laden blieb der Block noch eine Sekunde sichtbar und blendete dann aus —
 * genau verkehrt herum.
 */
.ld-wohnwelten.is-da .ld-wohnwelten__unten {
	opacity: 1;
	transition: opacity 0.7s cubic-bezier( 0.215, 0.61, 0.355, 1 ) 0.95s;
}

/*
 * **Danach weg damit.** Ein stehengebliebener Ausschnitt schnitte alles ab,
 * was später über die Kante ragt — und die beiden Pfeile sitzen dicht an den
 * Rändern des Bildes. Dieselbe Vorsichtsmaßnahme wie bei „Umgebung".
 */
.ld-wohnwelten.is-aufgetreten .ld-wohnwelten__spalte,
.ld-wohnwelten.is-aufgetreten .ld-wohnwelten__bilder {
	clip-path: none;
}

@media (max-width: 767px) {
	.ld-wohnwelten {
		--ld-ww-spalte: 100%;
		--ld-ww-zeile: 3.4rem;

		/*
		 * Auch hier gehört das Polster ins Rollfenster, nicht darum herum —
		 * sonst zählte es doppelt und der Zeilenabstand wüchse um seinen
		 * eigenen Betrag. Die Werte sind dieselben wie vorher an der Zeile.
		 */
		--ld-ww-polster-o: 0.7rem;
		--ld-ww-polster-u: 0.35rem;
	}

	.ld-wohnwelten .ld-wohnwelten__buehne {
		height: auto;
	}

	.ld-wohnwelten__bilder {
		position: relative;
		width: 100%;
		height: 56svh;
	}

	.ld-wohnwelten__spalte {
		position: relative;
		inset: auto;
		padding: 2rem 1.5rem 3rem;
	}

	.ld-wohnwelten__kicker {
		margin-block-end: 1.5rem;
	}

	.ld-wohnwelten__zeile {
		padding-block: 0;
		font-size: clamp(1.9rem, 9vw, 2.8rem);
	}

	.ld-wohnwelten__liste::before {
		inset-inline-start: -0.75rem;
	}

	/*
	 * **Der Strich steht mittig zwischen „Hofhaus" und dem Text** — vom Kunden
	 * gewünscht. Gemessen: Unter der Schrift des letzten Namens bleiben in
	 * seiner Zeile rund 12 Bildpunkte Unterlängenraum, über der Versalhöhe des
	 * Textes rund 4. 0,8 rem Abstand oben und 1,25 rem Polster unten ergeben
	 * damit sichtbar je rund 25.
	 *
	 * **Zwei Klassen im Selektor:** Die Fakten sind das erste Kind ihrer
	 * Gruppe, und WordPress nimmt dem ersten Kind den oberen Rand mit
	 * `:root :where(.is-layout-flow) > :first-child` — der zählt zwei
	 * Klassenstufen. Mit einer stand hier 2 rem und wirkte gar nicht.
	 */
	.ld-wohnwelten .ld-wohnwelten__fakten {
		margin-block-start: 0.8rem;
		padding-block-start: 1.25rem;
	}

	/*
	 * **Beide Abschnitte gleich tief, 2,5 rem über der Bildkante.** In den
	 * Wohnwelten lag hier zusätzlich der blockGap-Rand von WordPress (16
	 * Bildpunkte), in der Ausstattungs-Liste nicht — die Pfeile standen
	 * dadurch verschieden hoch. Der Kunde wollte die tiefere Lage für beide;
	 * der Rand ist abgestellt und die Lage steht ausdrücklich da.
	 */
	.ld-wohnwelten .ld-wohnwelten__pfeil {
		inset-block-start: calc(56svh - 2.5rem);
		margin-block: 0;
	}

	/*
	 * **Das Riesenwort steht auch auf dem Telefon im Bild**, nicht am Fuß
	 * des Abschnitts. Die Wortebene liegt über der ganzen Bühne, und die ist
	 * hier Bild und Spalte untereinander — das Wort stand dadurch unter dem
	 * letzten Knopf. Jetzt deckt die Ebene nur das Bild, und das Wort sitzt
	 * über dem rechten Pfeil (dessen Mitte 3,5 rem über der Bildkante liegt),
	 * noch in der Vignette. Vom Kunden so gewünscht.
	 */
	.ld-wohnwelten .ld-wohnwelten__woerter {
		inset: 0 0 auto 0;
		height: 56svh;
	}

	.ld-wohnwelten .ld-wohnwelten__wort {
		inset-block-end: 5.5rem;
		inset-inline-end: 1.4375rem;
	}

	.ld-wohnwelten__pfeil--zurueck {
		inset-inline-start: 4rem;
	}

	.ld-wohnwelten__pfeil--vor {
		inset-inline-start: calc(100% - 4rem);
	}

	/*
	 * Der Vermerk „Visualisierung, KI-gestützt" (base.css) steht hier mittig
	 * zwischen den beiden Pfeilen — unten rechts lag er auf dem rechten.
	 */
	.ld-wohnwelten__bilder.ld-ki > .ld-ki-vermerk {
		inset-inline: 50% auto;
		transform: translateX( -50% );
	}

	/*
	 * **Die Kennzahlenzeile bricht ausgewogen um** (29.10.2026, Kunde). Seit
	 * der Anwaltsfassung steht dort „ca. 46 bis ca. 138 m²"; bei 375
	 * Bildpunkten blieb dadurch „Zimmer" allein in der zweiten Zeile.
	 * Ausgeglichen bricht sie vor „ca. 138" — gleich viele Zeilen, also
	 * gleiche Höhe. In Safari und Chrome nachgemessen bei 320 bis 767.
	 */
	.ld-wohnwelten .ld-wohnwelten__fakt--titel {
		text-wrap: balance;
	}
}

/* ------------------------------------------------------ Weniger Bewegung */

@media (prefers-reduced-motion: reduce) {
	.ld-wohnwelten__rolle {
		translate: 0 0;
		transition: none;
	}

	.ld-wohnwelten__bild,
	.ld-wohnwelten__satz {
		transition: none;
	}
}