/*
 * Abschnitt: Wohnung — die Seite einer einzelnen Wohnung
 *
 * Nachgebaut nach der Residence-Seite von belgradearbor.rs: links die
 * Raumaufstellung mit allen Flächen, rechts der Grundriss mit Umschaltern,
 * darunter eine Reihe weiterer Wohnungen.
 *
 * **Alle Maße dort bei 2056 × 1147 nachgemessen** — Zeile für Zeile, nicht
 * geschätzt:
 *
 * | Teil                          | bei 2056 | hier      |
 * |-------------------------------|----------|-----------|
 * | Seitenrand                    | 152 px   | 7,39 vw   |
 * | Faktenspalte                  | 395 px   | 19,21 vw  |
 * | Bühne, Abstand von oben       | 160 px   | 13,95 svh |
 * | Bühne, Höhe                   | 907 px   | 79 svh    |
 * | Wohnungsname                  | 100/100  | 4,86 vw   |
 * | Kicker bis Name               | 26 px    | 1,26 vw   |
 * | „Wohnfläche“, Schrift         | 20/30    | 0,97 vw   |
 * | „Wohnfläche“, Polster         | 16 px    | 0,78 vw   |
 * | Raumzeile, Polster            | 12 px    | 0,58 vw   |
 * | Raumzeile, Schrift            | 16/16    | 0,78 vw   |
 * | Raumzeile, Höhe daraus        | 41 px    |           |
 * | Marken, Abstand nach oben     | 48 px    | 2,33 vw   |
 * | Marken, zwei Spalten, Lücke   | 12 px    | 0,58 vw   |
 * | Zeichen                       | 24 px    | 1,17 vw   |
 * | Zeichen bis Wort              | 8 px     | 0,39 vw   |
 * | Umschalter, Höhe              | 26 px    | 1,26 vw   |
 * | Zurück, Schrift               | 16 px    | 0,78 vw   |
 * | Zurück, Pfeil                 | 24 × 9   | 1,17 vw   |
 * | Karten unten, Nummer          | 80 px    | 3,89 vw   |
 *
 * **Eine Raumzeile ist genau 41 Pixel hoch: 12 Polster, 16 Zeile, 12 Polster,
 * 1 Linie.** Die Zeilenhöhe ist dabei **1,0**, nicht 1,2 — bei 1,2 wächst jede
 * Zeile um drei Pixel, und über zehn Räume sieht man das als lockeren Satz, wo
 * die Vorlage eine dichte Aufstellung hat.
 *
 * **`min-height` rechnet ohne das Polster — zweimal zugebissen.** Das Theme
 * stellt `box-sizing` nicht global um, also gilt `content-box`: Ein
 * `min-height` meint dann den **Inhalt**, und Polster und Rahmen kommen
 * obendrauf.
 *
 * Einmal an der Raumzeile: `min-height: 2vw` sind 41 Pixel, dazu 24 Polster
 * und 1 Linie — die Zeile stand auf 66 statt 41, und die ganze Spalte wirkte
 * locker gesetzt. Die Höhe ergibt sich aus Polster und Zeilenhöhe von allein;
 * das `min-height` ist ersatzlos weg.
 *
 * Und einmal am Abschnitt: `min-height: 100svh` plus 240 Pixel Polster ergaben
 * 1387 statt 1147 — eine Wohnungsseite war damit immer länger als ein
 * Bildschirm, auch wenn nichts überstand. Dort steht jetzt `box-sizing:
 * border-box`.
 *
 * **Zwei Stellen weichen bewusst ab, beide wegen der Lesbarkeit.** Arbor setzt
 * Überschriften und Wohnungsnummern in ihrem Golden auf Sand — nachgerechnet
 * 3,12 zu 1. Hier stehen sie in Card Room Green tief auf Kalkweiß, das sind
 * 5,5. Und unsere Datenzeilen tragen eine Beschriftung: „130,96 m²“ ist für
 * sich verständlich, „Erdgeschoss“ ohne Wort davor nicht. Dieselben zwei
 * Abweichungen wie auf der Wohnungsliste — die beiden Seiten gehören zusammen.
 */

.ld-wohnung {
	--ld-w-rand: 7.39vw;
	--ld-w-spalte: 19.21vw;
	--ld-w-luecke: 6.42vw;
	--ld-w-oben: 13.95svh;
	--ld-w-unten: 6.97svh;
	--ld-w-linie: color-mix( in srgb, var( --wp--preset--color--primary ) 42%, transparent );

	position: relative;
	box-sizing: border-box;
	min-height: 100svh;
	padding-block: var( --ld-w-oben ) var( --ld-w-unten );
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
}

.ld-wohnung__buehne {
	display: grid;
	grid-template-columns: var( --ld-w-spalte ) 1fr;
	column-gap: var( --ld-w-luecke );
	align-items: stretch;
	min-height: 79svh;
	padding-inline: var( --ld-w-rand );
}

/* ------------------------------------------------------------- Zurück */

/*
 * Oben rechts auf der Höhe des Kickers, wie in der Vorlage — dort steht dort
 * nur „BACK“ mit einem flachen Pfeil davor.
 *
 * **Ohne Sperrung.** Hier stand einmal „Zurück zur Übersicht“ auf 0,02 em
 * gesperrt; das ist dreimal so breit und zieht den Blick nach oben rechts,
 * genau weg von der Wohnung. Ein Wort reicht.
 */
.ld-wohnung__zurueck {
	position: absolute;
	/*
	 * Über die Ansicht heben. Die Bildfläche des Grundrisses reicht bis in die
	 * obere rechte Ecke und lag sonst über dem Verweis — er sah richtig aus,
	 * nahm den Klick aber nicht an.
	 */
	z-index: 2;
	inset-block-start: var( --ld-w-oben );
	inset-inline-end: var( --ld-w-rand );
	display: inline-flex;
	align-items: center;
	gap: 0.78vw;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78vw;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: uppercase;
	text-decoration: none;
	color: var( --wp--preset--color--contrast );
}

.ld-wohnung__zurueck::before {
	content: "";
	width: 1.17vw;
	height: 0.44vw;
	background-color: currentColor;
	mask: url( "../../images/symbole/zurueck.svg" ) center / contain no-repeat;
	transition: transform 0.65s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.ld-wohnung__zurueck:hover::before,
.ld-wohnung__zurueck:focus-visible::before {
	transform: translateX( -0.3em );
}

/* ------------------------------------------------------- Die Faktenspalte */

/*
 * Eine Spalte über die ganze Bühnenhöhe. Der Anfragen-Knopf sitzt an ihrem
 * Fuß, nicht unter dem Text — in der Vorlage endet er auf den Pixel dort, wo
 * auch die Umschalter der Ansicht enden.
 */
.ld-wohnung__spalte {
	display: flex;
	flex-direction: column;
}

.ld-wohnung__kicker {
	margin: 0;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78vw;
	letter-spacing: 0.02em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var( --wp--preset--color--muted );
}

.ld-wohnung__nummer {
	margin: 1.26vw 0 0;
	font-family: var( --wp--preset--font-family--heading );
	font-size: 4.86vw;
	font-weight: 300;
	line-height: 1;
	letter-spacing: var(--ld-light-lauf);
	text-transform: uppercase;
	color: var( --wp--preset--color--primary-deep );
}

.ld-wohnung__aufstellung {
	margin: 0;
}

/*
 * Die Kopfzeile trägt die Gesamtfläche. Die Linie darunter ist **dieselbe
 * Haarlinie wie zwischen den Räumen** — in der Vorlage ist es sogar physisch
 * dieselbe, nämlich die Oberkante der Liste. Sie stand hier einmal in voller
 * Textfarbe und trennte damit stärker, als sie sollte.
 */
.ld-wohnung__summe {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
	margin-block-start: 0;
	padding-block: 0.78vw;
	border-block-end: 1px solid var( --ld-w-linie );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.97vw;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ld-wohnung__summe dt,
.ld-wohnung__summe dd {
	margin: 0;
}

.ld-wohnung__raum {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
	padding-block: 0.58vw;
	border-block-end: 1px solid var( --ld-w-linie );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78vw;
	line-height: 1;
}

.ld-wohnung__raum dt,
.ld-wohnung__raum dd {
	margin: 0;
}

/*
 * `display: flex` an der Zeile sticht die Browser-Vorgabe `[hidden] { display:
 * none }` aus — eine Klasse zählt mehr als ein nacktes Attribut. Ohne diese
 * Zeile setzt das Skript `hidden`, und die Zeilen stehen trotzdem da.
 */
.ld-wohnung__raum[ hidden ],
.ld-wohnung__ebene[ hidden ] {
	display: none;
}

/*
 * **Und schon vor dem Skript zugeklappt**, sobald es eins gibt (`ld-js` setzt
 * der Kopf der Seite). Das Skript kommt erst am Ende der Seite; bis dahin
 * stand die volle Aufstellung da und schnurrte danach zusammen. Beim Wischen
 * aus dem Finder sah man genau das — die neue Seite ist dabei schon zu sehen,
 * bevor ihr Skript läuft. Aufgeklappt wird über `is-alle` an der Liste.
 */
.ld-js .ld-wohnung__aufstellung:not( .is-alle ) > .ld-wohnung__mehr {
	display: none;
}

.ld-wohnung__raum dd {
	white-space: nowrap;
	color: var( --wp--preset--color--primary-deep );
}

/*
 * Nur die beiden Maisonetten E20 und E22 haben Ebenen. Bei allen anderen
 * taucht diese Zeile gar nicht auf.
 */
.ld-wohnung__ebene {
	margin: 1.17vw 0 0;
	padding-block-end: 0.3em;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.68vw;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var( --wp--preset--color--muted );
}

/* ---------------------------------------------------------- Aufklappen */

/*
 * Die ersten vier Räume stehen offen, der Rest kommt auf Klick — wie in der
 * Vorlage, wo unter der Liste ein schlichtes „More“ steht.
 *
 * **Versteckt wird über ein Attribut, nicht über eine Klasse am Elternteil.**
 * `hidden` nimmt die Zeilen aus dem Fluss, ohne dass eine zweite Regel nötig
 * wäre; ohne Skript steht `hidden` nirgends und die vollständige Liste ist da.
 * Das ist der richtige Rückfall für eine Aufstellung von Flächen.
 */
.ld-wohnung__aufklappen {
	align-self: flex-start;
	margin-block-start: 0.78vw;
	padding: 0;
	border: 0;
	background: none;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78vw;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var( --wp--preset--color--primary-deep );
	text-transform: uppercase;
	cursor: pointer;
}

.ld-wohnung__aufklappen-wort {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.ld-wohnung__aufklappen-wort::after {
	content: "";
	width: 0.44vw;
	height: 0.44vw;
	border-inline-end: 1px solid currentColor;
	border-block-end: 1px solid currentColor;
	transform: translateY( -0.15em ) rotate( 45deg );
	transition: transform 0.65s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.ld-wohnung__aufklappen[ aria-expanded="true" ] .ld-wohnung__aufklappen-wort::after {
	transform: translateY( 0.1em ) rotate( -135deg );
}

/*
 * Der Vorbehalt zu den Flächen. Kursiv statt blasser: Card Room Green tief
 * stünde auf Kalkgrau bei 4,39 zu 1 und trüge diese kleine Schrift nicht.
 */
.ld-wohnung__vorbehalt {
	margin: 1.56vw 0 0;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.68vw;
	font-style: italic;
	line-height: 1.5;
	color: var( --wp--preset--color--contrast );
}

/*
 * Die Energie-Pflichtangaben nach GEG (26.10.2026) — ein schmales Band unter
 * dem ersten Bildschirm, in der Schrift des Vorbehalts, aber aufrecht. Es
 * steht außerhalb von .ld-wohnung, damit der 3D-Finder es mit der Spalte
 * nicht mitnimmt. Hofgrün tief auf Kalkgrau: 9,71 zu 1.
 */
.ld-wohnung-energie {
	box-sizing: border-box;
	margin: 0;
	padding: 1.3vw 7.39vw;
	background-color: var( --wp--preset--color--surface-mist );
	border-block-start: 1px solid color-mix( in srgb, var( --wp--preset--color--contrast ) 15%, transparent );
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78vw;
	line-height: 1.5;
	color: var( --wp--preset--color--contrast );
}

.ld-wohnung__merkmal {
	margin: 1.56vw 0 0;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78vw;
	line-height: 1.5;
	color: var( --wp--preset--color--contrast );
}

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

/*
 * Stichpunkte mit Zeichen, **keine Pillen**. In der Vorlage stehen dort „Wing
 * A“ und „Balcony“, jeweils mit einem 24 Pixel großen Zeichen davor, ohne
 * Rahmen, ohne Füllung, in normaler Textfarbe und ohne Versalien — zwei
 * Spalten in einem Raster.
 *
 * Umrandet sahen sie aus wie Schaltflächen und luden zum Klicken ein. Sie sind
 * aber Angaben, keine Wege.
 */
.ld-wohnung__marken {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 0.58vw;
	margin: 2.33vw 0 0;
	padding: 0;
	list-style: none;
}

.ld-wohnung__marke {
	display: flex;
	align-items: center;
	gap: 0.39vw;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78vw;
	line-height: 1.5;
	color: var( --wp--preset--color--contrast );
}

/*
 * Die Zeichnungen sind Masken — sie geben nur die Form vor, die Farbe kommt
 * aus dem Token. Dieselbe Bauart wie die Zeichen in `.ld-schalter`.
 */
.ld-wohnung__marke::before {
	content: "";
	flex: none;
	width: 1.17vw;
	height: 1.17vw;
	background-color: var( --wp--preset--color--primary );
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}

.ld-wohnung__marke--haus::before {
	mask-image: url( "../../images/symbole/haus.svg" );
}

.ld-wohnung__marke--geschoss::before {
	mask-image: url( "../../images/symbole/geschoss.svg" );
}

.ld-wohnung__marke--zimmer::before {
	mask-image: url( "../../images/symbole/zimmer.svg" );
}

.ld-wohnung__marke--freibereich::before {
	mask-image: url( "../../images/symbole/freibereich.svg" );
}

/*
 * **Der Verkaufsstand** (vorläufig) steht seit dem 19.10.2026 als gefülltes
 * Etikett neben der Nummer — vom Kunden gewünscht, vorher war er der erste
 * Stichpunkt unten. Reserviert in Bronze, verkauft in Card Room Green tief,
 * die Schrift Kalkweiß (5,1 und 5,6 zu 1). Dieselben Töne wie die Schilder
 * im Finder. Die Nummer bleibt das `h1` für sich; das Etikett ist ein
 * eigener Absatz daneben.
 */
.ld-wohnung__kopf {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6vw 1.1vw;
	margin: 1.26vw 0 0;
}

.ld-wohnung__kopf .ld-wohnung__nummer {
	margin: 0;
}

.ld-wohnung__stand {
	margin: 0;
	padding: 0.45vw 0.9vw;
	border-radius: 999px;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78vw;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--base );
}

.ld-wohnung__stand--reserviert {
	background-color: var( --wp--preset--color--accent-deep );
}

.ld-wohnung__stand--verkauft {
	background-color: var( --wp--preset--color--primary-deep );
}

/*
 * Der Knopf steht am Fuß der Spalte, nicht unter dem Text — `auto` schiebt
 * ihn dorthin. In der Vorlage endet er auf gleicher Höhe wie die Umschalter
 * der Ansicht daneben, und genau das hält die beiden Hälften zusammen.
 *
 * Er trägt kein Zeichen und braucht deshalb die zweite Regel aus dem
 * `.ld-schalter`-Abschnitt: zentriert wird an der Zeile, nicht am Verweis.
 */
/*
 * **Der Fuß der Spalte: Anfrage-Knopf links, „PDF" rechts** — wie bei Arbor,
 * deren „PDF" und „Share" mit `justify-between` am rechten Rand der Spalte
 * stehen. Der Fuß sitzt am unteren Ende der Bühne, wo vorher der Knopf allein
 * saß.
 */
.ld-wohnung__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: calc( 1.5 * var( --ld-pille-e ) );
	margin-block: auto 0;
	padding-block-start: 2vh;
}

.ld-wohnung__fuss > .ld-wohnung__anfrage {
	margin: 0;
}

/*
 * In der Vorlage gemessen (1512 und 375): ein Grundmaß Grad, Laufweite
 * 0,1 em, Zeilenhöhe 1, Versalien, unterstrichen mit 0,2 em Abstand, in der
 * Textfarbe. Sie öffnet das PDF in einem neuen Tab, wie dort.
 */
.ld-wohnung__pdf {
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --ld-pille-e );
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	color: var( --wp--preset--color--contrast );
	transition: color 0.3s ease;
}

.ld-wohnung__pdf:hover,
.ld-wohnung__pdf:focus-visible {
	color: var( --wp--preset--color--primary );
}

.ld-wohnung__anfrage a,
.ld-wohnung__anfrage .ld-schalter__zeile {
	justify-content: center;
}

/* ---------------------------------------------------------- Die Ansicht */

.ld-wohnung__ansicht {
	position: relative;
	display: flex;
	flex-direction: column;
}

/*
 * Die beiden Bilder liegen übereinander und werden überblendet. Bei Bildern
 * ist ein Überblenden richtig — bei Text nicht, und genau deshalb wechselt die
 * Beschriftung im Abschnitt „Die zwei Wohnwelten“ nacheinander statt zugleich.
 */
.ld-wohnung__bilder {
	position: relative;
	flex: 1;
	min-height: 0;
}

/*
 * **Die Deckung liegt am Bild, nicht am Rahmen darum — und das ist keine
 * Geschmacksfrage.** Ein Element mit einer Deckung unter 100 Prozent macht
 * einen eigenen Stapelkontext auf, und der kapselt das Mischen ab: Das Bild
 * darin hätte dann nichts mehr, womit `mix-blend-mode` mischen könnte, und der
 * weiße Blattgrund stünde voll da. Genau das blitzte bei jedem Wechsel
 * zwischen Grundriss und Geschossansicht auf.
 *
 * Am Bild selbst stört die Deckung nicht — nachgestellt: bei 0,999 am Rahmen
 * ist das weiße Rechteck sofort da, bei 0,5 am Bild bleibt alles richtig.
 *
 * Der Rahmen schaltet deshalb nur noch die Sichtbarkeit, damit das
 * abgetretene Bild keine Mausklicks mehr abfängt.
 */
.ld-wohnung__bild {
	position: absolute;
	inset: 0;
	margin: 0;
	visibility: hidden;
	transition: visibility 0s linear 0.65s;
}

.ld-wohnung__bild.is-vorn {
	visibility: visible;
	transition: visibility 0s;
}

.ld-wohnung__bild img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	opacity: 0;
	/* Die Blätter haben weißen Grund; er verschwindet auf Kalkweiß fast. */
	mix-blend-mode: multiply;
	transition: opacity 0.65s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.ld-wohnung__bild.is-vorn img {
	opacity: 1;
}

/*
 * **Die Schrägansicht wird nicht multipliziert.** Grundriss und
 * Geschossansicht sind Zeichnungen auf weißem Blatt — dort lässt `multiply`
 * den Grund im Seitengrund aufgehen und nur die Linien stehen. Die
 * Schrägansicht ist dagegen eine gerenderte Aufnahme mit eigenem grauen
 * Grund: multipliziert würde sie als Ganzes nachdunkeln und ihre Lichter
 * verlieren. Dieselbe Unterscheidung wie zwischen Plan und Foto überall
 * sonst im Theme.
 */
.ld-wohnung__bild--voll img {
	mix-blend-mode: normal;
}

/* ------------------------------------------------------- Die Umschalter */

/*
 * Unten rechts in der Ansicht, wie in der Vorlage — auf gleicher Höhe mit dem
 * Anfragen-Knopf der Spalte daneben. Drei Pillen: 3D, Grundriss, Im Geschoss.
 *
 * **Die erste ist seit dem 06.10.2026 belegt** — mit den Schrägansichten aus
 * dem Wohnungspaket. Wo eine Wohnung keine hat, bleibt der Reiter stehen und
 * ist abgeblendet; verschwände er, sprängen die beiden anderen.
 */
.ld-wohnung__umschalter {
	--ld-w-steg: 0.39vw;

	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var( --ld-w-steg );
	margin-block-start: auto;
	padding-block-start: 2vh;
}

/*
 * **Zwischen zwei Pillen ein kleiner Strich, der die Lücke füllt** — bei
 * Arbor ein eigenes, leeres Element (`h-px w-2`, grau), am Schreibtisch wie
 * auf dem Telefon. Hier ein Pseudoelement, weil er nichts trägt, was jemand
 * pflegen müsste. Seine Breite ist die Lücke selbst; der eine Bildpunkt
 * extra reicht über die Rahmenlinie der linken Pille, damit keine Fuge bleibt.
 */
.ld-wohnung__reiter + .ld-wohnung__reiter::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: calc( -1 * var( --ld-w-steg ) - 1px );
	width: var( --ld-w-steg );
	height: 1px;
	background-color: var( --wp--preset--color--muted );
	pointer-events: none;
}

.ld-wohnung__reiter {
	position: relative;
	min-height: 1.26vw;
	padding: 0.35em 1em;
	border: 1px solid var( --ld-w-linie );
	border-radius: 999px;
	background: transparent;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78vw;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var( --wp--preset--color--contrast );
	cursor: pointer;
	transition: background-color 0.65s cubic-bezier( 0.4, 0, 0.2, 1 ),
		border-color 0.65s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.ld-wohnung__reiter:hover:not( :disabled ) {
	background-color: color-mix( in srgb, var( --wp--preset--color--primary ) 14%, transparent );
}

.ld-wohnung__reiter.is-vorn {
	border-color: var( --wp--preset--color--primary-deep );
	background-color: color-mix( in srgb, var( --wp--preset--color--primary ) 22%, transparent );
	color: var( --wp--preset--color--primary-deep );
}

.ld-wohnung__reiter:disabled {
	opacity: 0.38;
	cursor: default;
}

/* ------------------------------------------------------ Die Geschosswahl */

/*
 * **Nur die beiden Maisonetten haben sie.** E20 und E22 liegen über zwei
 * Etagen; beide auf ein Blatt zu legen halbiert jede von ihnen — bei E20 war
 * der Grundriss damit 290 statt 610 Bildpunkte breit und nicht mehr zu lesen.
 * **Vom Kunden gemeldet.**
 *
 * **Sie steht über dem Blatt, die Ansichten darunter.** Die beiden
 * beantworten verschiedene Fragen: *wo* bin ich und *wie* sehe ich es. Über-
 * und untereinander gesetzt bleiben sie auseinanderzuhalten; nebeneinander
 * läsen sich fünf Pillen als eine Reihe.
 *
 * Dieselbe Pillenform wie die Ansichtsreiter — es ist dieselbe Art von Wahl,
 * und zwei verschiedene Formen für dasselbe wären eine Behauptung, die keine
 * ist.
 */
.ld-wohnung__geschosse {
	display: flex;
	justify-content: center;
	gap: 0.39vw;
	padding-block-end: 1.6vh;
}

.ld-wohnung__geschoss {
	min-height: 1.26vw;
	padding: 0.35em 1.1em;
	border: 1px solid var( --ld-w-linie );
	border-radius: 999px;
	background: transparent;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78vw;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var( --wp--preset--color--contrast );
	cursor: pointer;
	transition: background-color 0.65s cubic-bezier( 0.4, 0, 0.2, 1 ),
		border-color 0.65s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.ld-wohnung__geschoss:hover {
	background-color: color-mix( in srgb, var( --wp--preset--color--primary ) 14%, transparent );
}

.ld-wohnung__geschoss.is-vorn {
	border-color: var( --wp--preset--color--primary-deep );
	background-color: color-mix( in srgb, var( --wp--preset--color--primary ) 22%, transparent );
	color: var( --wp--preset--color--primary-deep );
}

/* ---------------------------------------------------------- Der Kompass */

/*
 * **Er gilt für alle drei Ansichten.** Grundriss, Geschossansicht und
 * Schrägansicht zeigen die Wohnung in derselben Lage — nachgesehen, nicht
 * angenommen —, deshalb liegt er über der Bildfläche und nicht in einem
 * einzelnen Bild.
 *
 * **Die Drehung ist die eine Stellschraube.** `--ld-w-nord` sagt, wie weit
 * der Pfeil aus der Senkrechten steht: Im Grundriss ist oben Südost, Norden
 * also 135 Grad gegen den Uhrzeigersinn. Die Begründung steht in
 * `functions.php` beim Markup. Wer künftig anders orientierte Pläne einsetzt,
 * ändert diese eine Zahl.
 *
 * **Unten rechts, in der Bildfläche.** Vom Kunden so gewünscht. Er sitzt
 * dadurch unmittelbar über den Umschaltern und bildet mit ihnen eine Ecke;
 * oben rechts steht „Zurück“. Wichtig ist, dass er im **Bildkasten** liegt
 * und nicht in der Ansicht darum — sonst stünde er auf gleicher Höhe wie die
 * Umschalter und liefe ihnen in die Quere.
 */
/*
 * **Seit dem 14.10.2026 gilt die Zahl nur noch für Grundriss und 3D.** Die
 * Ansicht „Im Geschoss“ ist eine Explosionsansicht, je Wohnung aus einer
 * anderen Richtung; ihr Winkel steht am Bild (`ld28_geschoss_nord`), und
 * `wohnung.js` setzt ihn hier ein. Als `@property` angemeldet, damit der
 * Kompass beim Umschalten **dreht** statt springt — im Takt der Überblendung.
 */
@property --ld-w-nord {
	syntax: "<angle>";
	inherits: true;
	initial-value: -135deg;
}

.ld-wohnung__ansicht {
	--ld-w-nord: -135deg;
	--ld-w-kompass: clamp( 40px, 3.9vw, 60px );
	transition: --ld-w-nord 0.65s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.ld-wohnung__kompass {
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: 0;
	z-index: 2;
	width: var( --ld-w-kompass );
	height: var( --ld-w-kompass );
	pointer-events: none;
}

.ld-wohnung__kompass svg {
	display: block;
	width: 100%;
	height: 100%;
	/*
	 * Gedreht wird die ganze Zeichnung, nicht die Nadel darin: Der Ring ist
	 * rund und bleibt dadurch unverändert, und die Drehung steht an einer
	 * Stelle statt an zweien.
	 */
	transform: rotate( var( --ld-w-nord ) );
}

/*
 * **Die Nadel ist längs geteilt, nicht quer.** Beide Hälften zeigen nach
 * Norden; die eine ist gefüllt, die andere hell mit Kontur. So liest sich die
 * Richtung aus der Form selbst, ohne dass eine Farbe sie tragen muss — und
 * der Akzent bleibt für die Stellen frei, an denen er wirklich zählt.
 */
.ld-wohnung__kompass-nord {
	fill: var( --wp--preset--color--primary-deep );
}

/*
 * Die helle Hälfte steht in Kalkweiß, nicht in Weiß: Auf der Schrägansicht
 * mit ihrem grauen Grund hebt sie sich dadurch ab, auf dem weißen Blatt des
 * Grundrisses trägt die Kontur sie.
 */
.ld-wohnung__kompass-sued {
	fill: var( --wp--preset--color--base );
	stroke: var( --wp--preset--color--primary-deep );
	stroke-width: 1;
	stroke-linejoin: round;
}

/*
 * **Das N steht aufrecht, auch wenn die Nadel schräg steht.** Ein mitgedrehter
 * Buchstabe wäre auf dem Kopf, sobald Norden nach unten zeigt. Es sitzt an der
 * Spitze — über denselben Winkel gerechnet, damit beide zusammen wandern, wenn
 * jemand `--ld-w-nord` ändert.
 */
.ld-wohnung__kompass-n {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	/*
	 * Der Weg nach außen rechnet in der Kompassgröße, nicht in em: In em hinge
	 * er an der Schriftgröße des Buchstabens, und beim kleinsten Nachjustieren
	 * rutschte das N auf die Nadel.
	 *
	 * **Die drei Zahlen hängen zusammen** — Versatz 0,375, Schriftgrad 0,24
	 * und die Nadellänge im SVG. Das N reicht damit von 12,2 bis 23,8 der
	 * viewBox-Einheiten, die Nadelspitze liegt bei 10 und der Kastenrand bei
	 * 24. Wer eine davon ändert, rechnet die anderen nach.
	 */
	transform: rotate( var( --ld-w-nord ) )
		translateY( calc( var( --ld-w-kompass ) * -0.375 ) )
		rotate( calc( -1 * var( --ld-w-nord ) ) );
	font-family: var( --wp--preset--font-family--heading );
	font-size: calc( var( --ld-w-kompass ) * 0.24 );
	font-weight: 300;
	letter-spacing: var(--ld-light-lauf);
	line-height: 1;
	color: var( --wp--preset--color--primary-deep );
}

/* --------------------------------------------------- Weitere Wohnungen */

/*
 * Kalkweiß, nicht gedämpft: Darüber liegt seit dem Abschnitt „Zwei Charaktere"
 * ein gedämpfter Bildschirm, und zwei gleiche Gründe hintereinander brechen
 * den Rhythmus. Die Folge ist jetzt hell — gedämpft — hell.
 */
.ld-wweitere {
	/*
	 * **Sie ist genau ein Bildschirm hoch.** Aus Polster, Kopf und Kartenreihe
	 * ergaben sich rund neunzig Prozent der Fensterhöhe — der Abschnitt endete
	 * also kurz vor der Kante, und darunter begann die Fußzeile. Als letzter
	 * Bildschirm vor dem Fuß soll er die Seite füllen.
	 *
	 * `box-sizing` gehört an dieselbe Stelle wie die Höhe: Ohne sie käme das
	 * Polster von 22 vh oben drauf und der Abschnitt stünde ein Fünftel über
	 * den Bildschirm hinaus.
	 */
	box-sizing: border-box;
	min-height: 100svh;
	padding: 10vh var( --ld-w-rand, 7.39vw ) 12vh;
	background-color: var( --wp--preset--color--base );
}

/*
 * **Der Kopf richtet sich an der ersten Zeile aus, nicht an der letzten.**
 * Die Überschrift steht über zwei Zeilen; „Alle ansehen" und die Pfeile
 * gehörten sonst plötzlich neben die zweite und stünden zweihundert
 * Bildpunkte zu tief. In der Vorlage sitzt ihr „See more" auf Höhe der
 * ersten Zeile, die Pfeile darunter.
 */
.ld-wweitere__kopf {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 2em;
	margin-block-end: 4vh;
}

/*
 * **Die Überschrift stand auf 2,72 vw und war damit halb so groß wie die der
 * Vorlage** — dort nachgemessen: 99,9 Bildpunkte bei 1440 Fensterbreite, also
 * 6,94 vw.
 *
 * **Wir nehmen 4,7 vw, und zwar wegen der zweiten Zeile.** „SIMILAR" ist ein
 * Wort aus sieben Zeichen; „Weitere Wohnungen im Vorderhaus" hat
 * neunundzwanzig und wäre auf ihrem Grad rund 1300 Bildpunkte breit — breiter
 * als die Spalte. Über zwei Zeilen gerechnet ergäbe ihr Grad einen Block von
 * rund 320 Bildpunkten, dreimal so hoch wie ihrer. Bei 4,7 vw ist er
 * anderthalbmal so hoch und bleibt großzügig.
 *
 * **Light (300), wie in der Vorlage.** Bis zum 28.10.2026 stand hier
 * Ultralight, weil die Probeversion kein Light hatte — Regular war neben den
 * Grundrissen zu laut. Mit der gekauften Lizenz ist die Ausnahme erledigt.
 *
 * Zeilenhöhe 1,08: Bei 1,0 stößt das „g" von „Wohnungen" an das „V" von
 * „Vorderhaus".
 */
/*
 * **Ein Wort in Versalien, in der Größe der Vorlage.** Dort steht „SIMILAR"
 * auf 100 Bildpunkten — bei 1440 wie bei 2056 Fensterbreite nachgemessen,
 * also genau der Grad ihrer Galerie-Überschrift. Bei uns sind das 4,86 vw,
 * und die Galerie-Überschrift ein Stück weiter oben trägt denselben Wert;
 * die beiden großen Wörter der Seite lesen sich dadurch als ein Paar.
 *
 * **Vorher standen hier „Weitere Wohnungen im Vorderhaus" über zwei Zeilen**
 * auf 4,7 vw. Der feste Umbruch entfällt damit ersatzlos.
 *
 * Zeilenhöhe 1,0 statt 1,12: Das ist die Regel für einzeilige Riesenwörter in
 * Versalien — die 1,12 waren für den zweizeiligen Satz da, wo die Punkte von
 * Ä, Ö und Ü an die Zeile darüber stoßen.
 *
 * Der Schnitt ist Light (300), wie in der Vorlage.
 */
.ld-wweitere__titel {
	margin: 0;
	font-family: var( --wp--preset--font-family--heading );
	font-size: 4.86vw;
	font-weight: 300;
	line-height: 1;
	/* Der Ausgleich für Light, auf „VORDERHAUS“ und „HOFHAUS“ abgestimmt — mit dem allgemeinen
	 * Wert (`--ld-light-lauf`) lag die Breite einige Zehntelprozent daneben. */
	letter-spacing: -0.024em;
	text-transform: uppercase;
	color: var( --wp--preset--color--primary-deep );
}

/* „Alle ansehen" oben, die Pfeile darunter — wie in der Vorlage. */
.ld-wweitere__steuerung {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-end;
	gap: 1.6vw;
}

.ld-wweitere__alle {
	margin: 0;
	flex: none;
}

/*
 * ------------------------------------------------------- Die blätternde Reihe
 *
 * **Drei Karten sichtbar, der Rest wartet daneben.** Die Vorlage macht es
 * genauso; bei uns stehen dahinter alle vierzehn übrigen Wohnungen des
 * Vorderhauses beziehungsweise alle sieben des Hofhauses.
 *
 * **Gerechnet wird in vw, nicht in Prozent.** Ein Prozentwert in `translate`
 * bezöge sich auf die Breite der Reihe selbst — und die ist bei vierzehn
 * Karten fünfmal so breit wie das Fenster. Ein Schritt wäre damit
 * unvorhersehbar. In vw steht die Kartenbreite fest und ein Schritt ist genau
 * eine Karte plus eine Lücke.
 *
 * **Ohne Skript schiebt sich nichts**, deshalb ist das Fenster von Haus aus
 * seitlich scrollbar; erst `is-bereit` macht daraus die geschnittene Bühne.
 * Sonst wären ohne JavaScript elf Wohnungen unerreichbar hinter der Kante.
 */
.ld-wweitere {
	--ld-ww-luecke: 0.97vw;
	--ld-ww-karte: calc( ( 100vw - 2 * var( --ld-w-rand, 7.39vw ) - 2 * var( --ld-ww-luecke ) ) / 3 );
	--ld-ww-schritt: calc( var( --ld-ww-karte ) + var( --ld-ww-luecke ) );
}

.ld-wweitere__fenster {
	overflow-x: auto;
}

.ld-wweitere__fenster.is-bereit {
	overflow: clip;
}

.ld-wweitere__reihe {
	display: flex;
	gap: var( --ld-ww-luecke );
	transform: translateX( calc( var( --ld-ww-i, 0 ) * -1 * var( --ld-ww-schritt ) ) );
	transition: transform 0.65s cubic-bezier( 0.4, 0, 0.2, 1 );
}

/*
 * **Zwei Zeilen, die keine Kosmetik sind — beide standen schon als Regel da.**
 *
 * `box-sizing: border-box`: Das Theme stellt es nicht global um, es gilt also
 * `content-box`, und dort meint eine Breitenangabe den **Inhalt**. Die Karten
 * haben 1,2 vw Polster; die vorgegebenen 571 Bildpunkte wurden dadurch zu 622,
 * und die dritte Karte ragte 154 über den Rand hinaus. Dieselbe Falle wie
 * damals bei `min-height` auf der Raumzeile.
 *
 * `min-width: 0`: Ein Flex-Element schrumpft von sich aus nicht unter die
 * Breite seines Inhalts. Ohne die Zeile wäre die Vorgabe nur ein Wunsch,
 * sobald ein Grundriss oder eine lange Geschossangabe breiter ausfällt.
 */
.ld-wweitere__reihe > * {
	box-sizing: border-box;
	flex: 0 0 var( --ld-ww-karte );
	min-width: 0;
}

@media ( prefers-reduced-motion: reduce ) {

	.ld-wweitere__reihe {
		transition: none;
	}
}

/*
 * Dieselben Pfeile wie im Abschnitt „Die zwei Wohnwelten" — dort in der
 * Vorlage gemessen: 70 Bildpunkte bei 2056 Fensterbreite, Haarstrich, Füllung
 * aus der dunklen Farbe. Hier stehen sie auf hellem Grund, deshalb sind Linie
 * und Zeichen dunkel statt hell.
 */
.ld-wweitere__pfeile {
	display: flex;
	gap: 0.78vw;
}

.ld-wweitere__pfeil {
	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--primary-deep ) 42%, transparent );
	border-radius: 999px;
	background: none;
	color: var( --wp--preset--color--primary-deep );
	cursor: pointer;
	transition: background-color 0.4s ease, border-color 0.4s ease;
}

.ld-wweitere__pfeil:hover,
.ld-wweitere__pfeil:focus-visible {
	border-color: var( --wp--preset--color--primary-deep );
	background: color-mix( in srgb, var( --wp--preset--color--primary-deep ) 10%, transparent );
}

/* Das Zeichen ist eine Maske: nur die Form, die Farbe kommt aus `color`. */
.ld-wweitere__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-wweitere__pfeil--zurueck::before {
	transform: rotate( 180deg );
}

.ld-wweitere__karte {
	display: block;
	padding: 1.2vw;
	border: 1px solid var( --ld-w-linie, rgba( 107, 115, 96, 0.42 ) );
	background-color: var( --wp--preset--color--base );
	text-decoration: none;
	color: inherit;
	transition: border-color 0.65s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.ld-wweitere__karte:hover {
	border-color: var( --wp--preset--color--primary-deep );
}

/*
 * Der Grundriss ist das Bild der Karte — er steht oben und füllt sie. Das
 * Seitenverhältnis ist das der Blätter, 1 zu 1.
 */
.ld-wweitere__plan {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.ld-wweitere__plan img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.ld-wweitere__nummer {
	display: block;
	margin-block-start: 0.6em;
	font-family: var( --wp--preset--font-family--heading );
	font-size: 3.89vw;
	font-weight: 300;
	line-height: 1;
	letter-spacing: var(--ld-light-lauf);
	text-transform: uppercase;
	color: var( --wp--preset--color--primary-deep );
}

.ld-wweitere__daten {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	margin-block-start: 1em;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78vw;
	line-height: 1.4;
	color: var( --wp--preset--color--contrast );
}

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

/*
 * Auf dem Handy zuerst der Grundriss, dann die Zahlen. Wer eine Wohnung
 * aufruft, will sie sehen — die Aufstellung liest man danach.
 */


/* ------------------------------------------------------------ Ohne Bewegung */

@media ( prefers-reduced-motion: reduce ) {

	.ld-wohnung__ansicht,
	.ld-wohnung__bild,
	.ld-wohnung__bild img,
	.ld-wohnung__reiter,
	.ld-wohnung__zurueck::before,
	.ld-wweitere__karte {
		transition: none;
	}
}

/* ------------------------------------------------- Zwei Charaktere */

/*
 * Der Abschnitt unter der Wohnungsseite, nachgebaut nach dem, der bei
 * belgradearbor.rs unter der Residence-Ansicht folgt. Bei 2056 × 1147
 * nachgemessen:
 *
 * | Teil                        | dort      | hier      |
 * |-----------------------------|-----------|-----------|
 * | Abschnitt                   | 1147 hoch | 100 svh   |
 * | Bühne, Abstand oben/unten   | 120 px    | 10,46 svh |
 * | linke Spalte                | 713 px    | 34,68 vw  |
 * | Bildrahmen                  | 571 × 396 | 27,77 vw  |
 * | Eckenradius                 | 20 px     | 0,97 vw   |
 * | Bild darin                  | 571 hoch  | 144 %     |
 * | rechte Spalte, x            | 885 px    | 43,05 vw  |
 * | rechte Spalte, Breite       | 856 px    | 41,63 vw  |
 * | Versalien-Zeile             | 20/30     | 0,97 vw   |
 * | Aussage                     | 56 px     | 2,72 vw   |
 * | Fließtext                   | 16 px     | 0,78 vw   |
 * | Fließtext, Breite           | halbe     | 20,8 vw   |
 * | Abstände in der Spalte      | 40 px     | 1,95 vw   |
 * | Bild rechts unten           | 700 × 381 | 34 vw     |
 *
 * **Das Bild im Rahmen ist höher als der Rahmen und wandert beim Scrollen.**
 * Dieselbe Bauart wie im Abschnitt „Die Lage": Ein Bild, das so wandert, muss
 * um seinen ganzen Weg größer sein als sein Rahmen und um genau diesen Weg zu
 * hoch beginnen — dann deckt es an beiden Enden der Fahrt lückenlos ab.
 *
 * **Zwei Stellen weichen bewusst ab.** Arbors Aussage steht in ihrem Golden
 * auf Sand — nachgerechnet 3,12 zu 1. Hier steht sie in Card Room Green tief
 * auf Kalkweiß gedämpft, das sind 5,0. Und ihr Fließtext läuft auf Zeilenhöhe
 * 1,2; bei uns 1,4, weil im Deutschen sonst die Umlaute an die Zeile darüber
 * stoßen.
 */

.ld-charakter {
	position: relative;
	box-sizing: border-box;
	min-height: 100svh;
	padding-block: 10.46svh;
	padding-inline: var( --ld-w-rand, 7.39vw );
	overflow: clip;
	background-color: var( --wp--preset--color--surface );
	color: var( --wp--preset--color--contrast );
}

/*
 * Links das Bild am Fuß der Bühne, rechts die Spalte an ihrem Kopf. In der
 * Vorlage nachgemessen: Die Spalte beginnt 20 Punkte nach der linken Hälfte
 * und ist 856 breit — rechts bleiben damit rund 315 Punkte frei, und genau
 * dort schiebt sich das Blatt herein.
 */
.ld-charakter__buehne {
	display: grid;
	grid-template-columns: 34.68vw 1fr;
	column-gap: 0.97vw;
	align-items: stretch;
	min-height: 79svh;
}

/* --------------------------------------------------------- Das Bild links */

.ld-charakter__bildseite {
	display: flex;
	align-items: flex-end;
	height: 100%;
}

.ld-charakter__rahmen {
	position: relative;
	width: 27.77vw;
	aspect-ratio: 1.44 / 1;
	margin: 0;
	border-radius: 0.97vw;
	overflow: clip;
}

/*
 * 144 Prozent Höhe und um den Überschuss nach oben versetzt: So beginnt das
 * Bild oben angeschnitten und endet unten angeschnitten, ohne dass an einem
 * Ende eine Lücke aufreißt. `--ld-char-p` setzt das Skript zwischen 0 und 1.
 *
 * **Ein Prozentwert in `translateY` rechnet in der Höhe des Bildes, nicht in
 * der des Rahmens** — und das Bild ist hier um die Hälfte höher. Der Weg
 * beträgt 44 Prozent der **Rahmenhöhe**, also 44 ÷ 144 = **30,5556 Prozent**
 * der Bildhöhe. Mit den 44, die hier standen, lief das Bild ein Drittel zu
 * weit: Am Ende der Durchfahrt stand es 19,4 Prozent über der Unterkante des
 * Rahmens, und darunter klaffte der Abschnittsgrund. **Vom Kunden gemeldet**,
 * und zwar als etwas ganz anderes — „die unteren zwei Ecken sind nicht mehr
 * rund". Sie waren es noch; man sah sie nur nicht mehr, weil das Bild vorher
 * aufhörte. Nachgemessen: Lücke unten jetzt über die ganze Fahrt null.
 */
.ld-charakter__rahmen img {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 100%;
	height: 144%;
	object-fit: cover;
	transform: translateY( calc( var( --ld-char-p, 0.5 ) * -30.5556% ) );
}

/* ------------------------------------------------------ Die Spalte rechts */

.ld-charakter__spalte {
	display: flex;
	flex-direction: column;
	gap: 1.95vw;
	align-self: start;
	width: 41.63vw;
}

.ld-charakter__kicker {
	margin: 0;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.97vw;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var( --wp--preset--color--contrast );
}

.ld-charakter__aussage {
	margin: 0;
	font-family: var( --wp--preset--font-family--heading );
	font-size: 2.72vw;
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: calc(0.02em + var(--ld-light-lauf));
	color: var( --wp--preset--color--primary-deep );
}

/*
 * **Im Vorderhaus 2,5 vw statt 2,72.** Seit dem 29.10.2026 steht in der
 * Aussage der Vorbehalt zu den abgehängten Decken (Freigabe durch den
 * Anwalt); in voller Größe lief der Satz eine Zeile länger und in das Bild
 * der Pflanze. Bei 2,5 vw steht er wieder auf acht Zeilen wie vorher —
 * nachgemessen bei 1280, 1512 und 2056. Vom Kunden so entschieden. Unter 901
 * gelten die Grade der schmalen Fassung.
 */
@media ( min-width: 901px ) {
	.ld-charakter:not( .ld-charakter--hofhaus ) .ld-charakter__aussage {
		font-size: 2.5vw;
	}
}

.ld-charakter__text {
	width: 20.8vw;
	margin: 0;
	font-family: var( --wp--preset--font-family--body );
	font-size: 0.78vw;
	line-height: 1.4;
	color: var( --wp--preset--color--contrast );
}

/* ------------------------------------------------------- Der Wortauftritt */

/*
 * Kicker, Aussage und Fließtext kommen Wort für Wort von unten, sobald der
 * Abschnitt ins Bild kommt. Einmal, nicht scrollgekoppelt — so wie in der
 * Vorlage.
 *
 * **Als Überblendung mit Verzögerung je Wort, nicht als gerechneter
 * Fortschritt.** Dieselbe Bauart wie im Abschnitt „Umgebung": Das Skript setzt
 * nur eine Klasse, den Rest macht das CSS. Ein Fortschritt, den ein Skript
 * Bild für Bild setzen muss, bleibt stehen, sobald der Browser die Einzelbilder
 * drosselt — und der Text wäre dann unsichtbar.
 */
.ld-charakter__wort {
	display: inline-block;
	opacity: 0;
	transform: translateY( 0.5em );
	transition: opacity 0.9s cubic-bezier( 0.215, 0.61, 0.355, 1 ),
		transform 0.9s cubic-bezier( 0.215, 0.61, 0.355, 1 );
	transition-delay: var( --ld-wort-v, 0s );
}

.ld-charakter.is-worte .ld-charakter__wort {
	opacity: 1;
	transform: none;
}

/* Ohne Skript und ohne Bewegung steht der Text sofort vollständig da. */
.ld-charakter:not( .is-bereit ) .ld-charakter__wort {
	opacity: 1;
	transform: none;
}

@media ( prefers-reduced-motion: reduce ) {

	.ld-charakter__wort {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ------------------------------------------------ Das Objekt rechts unten */

/*
 * An dieser Stelle schiebt die Vorlage eine freigestellte Pflanze über die
 * Bildkante. Unseres ist **nicht freigestellt** — der fast weiße Grund wird
 * über eine weiche Maske ausgeblendet und der Rest mit `multiply` in den
 * Grund gemischt. Damit verhält es sich wie ein freigestelltes Objekt, ohne
 * dass wir eines erfinden.
 *
 * **Ohne Mischmethode.** `multiply` machte den fast weißen Grund auf dem
 * gedämpften Kalkweiß dunkler statt unsichtbar — 224 mal 233 durch 255 sind
 * 205, ein deutlich sichtbarer grauer Fleck. Ohne sie liegen Bildgrund und
 * Abschnittsgrund nur neun Stufen auseinander, und die Maske erledigt den
 * Rest.
 */
/*
 * **Das Maß kommt aus dem freien Platz, nicht aus dem Augenmaß.** Rechts der
 * Aussage ist bis zu deren Unterkante nichts frei; darunter beginnt der Raum
 * für das Objekt. Nachgemessen bei 2056 mal 1203: Aussage bis 646, Fließtext
 * bis 776 und nur bis x 1312, Bildrahmen bis x 723. Daraus die drei Werte:
 *
 * | | |
 * |---|---|
 * | Breite 38 vw | die Pflanze beginnt bei x 1306 und endet bei 2006 |
 * | seitlich −1,5 vw | der leere Teil des Ausschnitts hängt über, die Pflanze nicht |
 * | unten −6 svh | der Fuß des Glases läuft über die Abschnittskante hinaus |
 *
 * **Der Fuß darf abschneiden, die Blätter nicht.** Sie sind das, was man
 * sieht; das Glas darunter trägt nichts bei und über die Kante zu laufen
 * gehört zu dieser Art Bild. Der Abschnitt schneidet sauber ab
 * (`overflow: clip`).
 *
 * **Gespiegelt wird nicht.** Die Blätter neigen sich im Bild nach links, also
 * zurück zum Text — sie binden die Ecke an die Seite. Gespiegelt zeigten sie
 * aus dem Bildschirm heraus. Der Ausschnitt ist ohnehin so gesetzt, dass die
 * Pflanze schon rechts unten steht.
 */
.ld-charakter__objekt {
	position: absolute;
	inset-inline-end: -1.5vw;
	inset-block-end: -6svh;
	width: 38vw;
	height: auto;
	/*
	 * **Das Seitenverhältnis muss dastehen, bevor das Bild da ist.** Sonst ist
	 * die Höhe null, das Element liegt als Strich unter der Abschnittskante —
	 * und der Browser holt ein Bild, das dort liegt, gar nicht erst. Es blieb
	 * dadurch dauerhaft leer.
	 */
	aspect-ratio: 1200 / 1109;
	mask-image: radial-gradient( closest-side at 50% 54%, #000 74%, transparent 100% );
	pointer-events: none;

	/*
	 * **Sie hängt beim Scrollen zurück, wie jedes andere Bild im Theme.** Die
	 * Regel steht im Abschnitt „Der neue Abschnitt überholt den alten": Was
	 * auf einer Bühne liegt, wandert langsamer als die Seite. Hier über
	 * dieselbe Zahl, die auch das Bild im Rahmen bewegt — ein zweiter Zuhörer
	 * wäre dafür nicht nötig.
	 *
	 * **Sichtbar ist davon nur ein Ausschnitt.** `--ld-char-p` läuft über die
	 * ganze Durchfahrt von 0 bis 1, lesbar ist der Abschnitt aber nur um 0,5
	 * herum — rund ein Drittel des Weges. Von den 1,2 Wegmaßen bleiben damit
	 * etwa 70 Bildpunkte übrig, und genau so minimal soll es sein.
	 *
	 * `translate` und nicht `transform`: Die Eigenschaften stören einander
	 * nicht, und `transform` bleibt frei.
	 */
	translate: 0 calc( ( var( --ld-char-p, 0.5 ) - 0.5 ) * var( --ld-abschied-weg ) * 1.2 );
}

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



/* ------------------------------------------ Das Hofhaus steht auf Sandbraun */

/*
 * **Die Farbe kommt aus der Aufnahme, nicht aus der Fassade.** Das ist die
 * zweite Ausnahme von der Regel „jede Farbe hat eine gebaute Entsprechung" —
 * die erste war Graphit auf der Kontaktseite, und sie wird hier mit demselben
 * Verfahren gemacht: Der mittlere Farbton des Bildes wird auf **genau die
 * Helligkeit** der bisherigen Farbe gebracht. Gemessen: Card Room Green tief
 * liegt bei 0,1182, Sandbraun bei 0,1182.
 *
 * **Weil nur der Farbton wandert und nicht die Helligkeit, bleibt jeder auf
 * dieser Seite gemessene Kontrast gültig** — sie stehen unverändert unten in
 * der Tabelle. Und der Hell-Dunkel-Rhythmus der Seite ist unangetastet.
 *
 * **Der Grund für den Wechsel war nicht die Lesbarkeit, sondern die Häufung.**
 * Die Seite hatte bereits fünf grüne Flächen; hier stand die sechste. Jetzt
 * gibt das Bild seine Wärme an den Grund ab, und die Aufnahme sitzt darauf wie
 * auf ihrem eigenen Papier.
 *
 * **Vorher stand hier Card Room Green tief**, die Fassadenfarbe des Hofhauses.
 * Das Argument war gut — es hält nur der Häufung nicht stand. Die beiden
 * Häuser unterscheiden sich weiter deutlich, nur eben nicht mehr grün gegen
 * hell, sondern warm gegen hell.
 *
 * Nachgerechnete Kontraste auf Sandbraun:
 *
 * | Textfarbe          | Verhältnis | taugt für   |
 * |--------------------|------------|-------------|
 * | Kalkweiß           | 5,5        | Fließtext   |
 * | Kalkweiß gedämpft  | 5,0        | Fließtext   |
 * | Kalkgrau           | 4,4        | große Schrift |
 * | Salbei             | 3,8        | große Schrift |
 * | Terrakotta-Rosé    | 1,8        | gar nichts  |
 * | Perlmausgrau       | 1,5        | gar nichts  |
 *
 * Die Aussage steht deshalb in Salbei — mit rund 56 Bildpunkten groß genug —,
 * die Versalien-Zeile in Kalkweiß gedämpft und der Fließtext in Kalkweiß.
 * Dieselbe Paarung wie im Abschnitt „Architektur".
 *
 * **Der Rhythmus der Wohnungsseite hängt damit am Haus:** Im Vorderhaus hell,
 * gedämpft, hell — im Hofhaus hell, dunkel, hell.
 *
 * **`ld-dunkel` bleibt Pflicht.** Der Abschnitt ist weiter dunkel; die Pille
 * der Kopfzeile und der Schweif des Mauszeigers richten sich danach.
 */

.ld-charakter--hofhaus {
	background-color: var( --wp--preset--color--sandbraun );
	color: var( --wp--preset--color--base );
}

.ld-charakter--hofhaus .ld-charakter__kicker {
	color: var( --wp--preset--color--surface );
}

.ld-charakter--hofhaus .ld-charakter__aussage {
	color: var( --wp--preset--color--sage );
	/*
	 * 0,003 em mehr Ausgleich als sonst: Bei 390 Bildpunkten Breite brach die
	 * Aussage im Hofhaus mit dem allgemeinen Wert eine Zeile länger um als mit
	 * Ultralight. Nur hier — die Aussage im Vorderhaus braucht den allgemeinen
	 * Wert. Gemessen mit werkzeuge/layout-abdruck.js, 28.10.2026.
	 */
	letter-spacing: calc(0.02em + var(--ld-light-lauf) - 0.003em);
}

.ld-charakter--hofhaus .ld-charakter__text {
	color: var( --wp--preset--color--base );
}

/*
 * **Der rechte Rand der Aufnahme ist ein weißer Türrahmen** — die letzten
 * 36 von 1600 Bildpunkten, nachgemessen (Helligkeit 230 gegen 200 daneben).
 * Im Rahmen lief er als heller Streifen an der Rundung entlang, und die Ecken
 * sahen dadurch unsauber aus. **Vom Kunden gemeldet.** Drei Prozent mehr
 * Breite, links verankert, schieben ihn ganz aus dem Fenster; `scale` stört
 * die Wanderbewegung in `transform` nicht.
 */
.ld-charakter--hofhaus .ld-charakter__rahmen img {
	scale: 1.03;
	transform-origin: 0% 50%;

	/*
	 * **Der Ausschnitt endet genau über dem Parkett.** Das Parkett im Foto
	 * passt nicht zu unserem Boden und darf nicht zu sehen sein; es beginnt
	 * bei Zeile 1378 von 1600, also bei 86,1 Prozent der Bildhöhe. Mit 144
	 * Prozent Bildhöhe und 3 Prozent Vergrößerung liegt diese Linie genau
	 * dann auf der Unterkante des Rahmens, wenn das Bild um 17,7 Prozent
	 * seiner Höhe hochgeschoben ist — mehr darf es nie werden.
	 *
	 * **Gewandert wird deshalb nur noch ein Fünftel davon** (13,9 bis 17,4
	 * Prozent): Unten steht der Topf der Pflanze ganz da, das Parkett nie.
	 * Vorher stand beim Lesen die Bildmitte im Rahmen, und Topf und Sofa
	 * waren angeschnitten. **Vom Kunden so gewünscht, nur fürs Hofhaus.**
	 * Wer das Bild tauscht, misst die Linie neu.
	 */
	transform: translateY( calc( ( 0.8 + var( --ld-char-p, 0.5 ) * 0.2 ) * -17.4% ) );
}

/*
 * **Hier liegt das ganze Bild hinter dem Abschnitt, nicht ein ausgeschnittenes
 * Objekt darin.** Eine weiche Maske verrät sich auf dunklem Grund als runder
 * Verlauf, sobald Bild- und Abschnittsgrund nicht fast dieselbe Farbe haben —
 * man sieht dann die Technik statt des Bildes. Ganzflächig gibt es keine
 * Kante, die das könnte.
 *
 * **Das Bild darf nur verdunkeln, nie aufhellen.** Salbei auf Card Room Green
 * tief steht bei 3,84 zu 1 — das ist die Schwelle für große Schrift, und
 * darüber ist kein Spielraum. Nachgemessen: Der Strauß hat unter der Aussage
 * ausgebrannte Lichter bis 255, und schon bei 16 Prozent Deckung samt
 * Schleier fiel die Zeile dort auf 2,9. Mit einem Schleier ist das nicht zu
 * retten, ohne das Bild wegzudecken.
 *
 * `multiply` löst es an der Wurzel: Weiß multipliziert sich zu nichts, der
 * Grund bleibt also überall dort unberührt, wo im Bild Licht ist — und wo
 * etwas Dunkles steht, wird der Grund dunkler und die Zeile darauf besser.
 * **Der Kontrast kann damit rechnerisch nie unter 3,84 fallen**; unter den
 * Blättern steigt er auf rund 7.
 *
 * Genau so macht es die Vorlage mit ihrer Blattschatten-Aufnahme. Aus dem
 * Foto wird dadurch kein Bild hinter der Seite, sondern ein Schatten darauf —
 * und der Strauß, der vorher als runder Ausschnitt auffiel, steht jetzt als
 * Silhouette da.
 *
 * **Der Schleier ist damit weg.** Er war nur dafür da, die Aufhellung
 * zurückzunehmen; jetzt gibt es keine mehr.
 */
/*
 * **Auch dieses Bild hängt beim Scrollen zurück**, wie das im Rahmen und die
 * Pflanze im Vorderhaus. Dieselbe Regel wie im Abschnitt „Die Lage": Ein
 * Bild, das wandert, muss um seinen ganzen Weg größer sein als sein Rahmen
 * und um genau diesen Weg zu hoch beginnen — dann deckt es an beiden Enden
 * der Fahrt lückenlos ab. Der Grund liegt hinter allem, deshalb der doppelte
 * Weg; das Bild im Rahmen bewegt sich um den einfachen.
 *
 * **Nebenbei geht das Bild dadurch unbeschnitten auf.** Der Kasten ist mit
 * den zwei Wegmaßen 1544 statt 1203 hoch, bei 2056 Breite also 1,332 zu 1 —
 * und die Aufnahme selbst hat 1,333. Bei dieser Fenstergröße fällt kein
 * einziger Bildpunkt weg.
 */
.ld-charakter__grund {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc( var( --ld-abschied-weg ) * -1 );
	width: 100%;
	height: calc( 100% + var( --ld-abschied-weg ) * 2 );
	translate: 0 calc( ( var( --ld-char-p, 0.5 ) - 0.5 ) * var( --ld-abschied-weg ) * 2 );
	object-fit: cover;
	/*
	 * **Mittig und ohne Zoom.** Die Datei ist das ganze Bild, nicht ein
	 * Ausschnitt daraus; bei 4 zu 3 auf einen Abschnitt von 1,71 zu 1 fallen
	 * oben und unten zusammen 22 Prozent weg, seitlich nichts. Damit steht
	 * die Aufnahme so da, wie sie aufgenommen wurde — der vorige Strauß war
	 * ein Ausschnitt und wirkte entsprechend herangeholt.
	 */
	object-position: 50% 50%;

	/*
	 * **Gespiegelt.** Im Original steht der Kübel mit dem Farn links — also
	 * genau dort, wo schon das Bild im Rahmen liegt. Gespiegelt steht er
	 * rechts, und die beiden Hälften des Abschnitts sind wieder verteilt.
	 * `transform` und `translate` stören einander nicht; der Wanderweg oben
	 * bleibt davon unberührt.
	 */
	transform: scaleX( -1 );
	opacity: 0.32;
	mix-blend-mode: multiply;
	z-index: 0;
	pointer-events: none;
}

/*
 * **Die Bühne muss über dem Schatten liegen, darf ihn aber nicht abtrennen.**
 * Eine Deckung unter eins an einem Vorfahren schneidet jede Mischmethode von
 * ihrem Untergrund ab — daran ist auf dieser Seite schon der Bildwechsel
 * einmal gescheitert. Hier steht deshalb nur eine Ebene, keine Deckung.
 */
.ld-charakter--hofhaus .ld-charakter__buehne {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   Schmale Geräte — dieser Block steht bewusst am Ende der Datei
   ========================================================================== */

/*
 * **Er stand einmal zweigeteilt in der Mitte der Datei, und das ging schief.**
 * Die Deckung des Hofhaus-Bildes war hier auf 0,45 gesetzt; hundert Zeilen
 * weiter unten stand am selben Selektor `opacity: 0.32`, und die gewann — auf
 * dem Telefon galt also der Wert vom Schreibtisch. Aufgefallen ist das nicht
 * beim Ansehen, sondern durch `werkzeuge/css-mobilbloecke.py`.
 *
 * **Eine Medienabfrage erhöht die Gewichtung nicht.** Bei gleichem Gewicht
 * gewinnt die spätere Regel — und „später" heißt: weiter unten in der Datei.
 * Deshalb steht hier alles Schmale beisammen, ganz am Schluss.
 */

@media ( max-width: 900px ) {

	.ld-wohnung {
		--ld-w-rand: 6vw;

		min-height: 0;
		padding-block: 12vh 8vh;
	}

	.ld-wohnung__buehne {
		display: flex;
		flex-direction: column;
		gap: 5vh;
		min-height: 0;
	}

	/*
	 * Zuerst der Grundriss, dann die Zahlen: Wer eine Wohnung aufruft, will sie
	 * sehen. Der Weg zurück steht darüber, weil er sonst zwischen Umschalter
	 * und Aufstellung geriete — mitten in die Sache hinein.
	 */
	.ld-wohnung__ansicht {
		order: -1;
		min-height: 0;
	}

	/*
	 * Das Blatt ist quadratisch; ein Kasten in seinem Verhältnis lässt keinen
	 * Leerraum darüber und darunter stehen.
	 */
	.ld-wohnung__bilder {
		aspect-ratio: 1 / 1;
	}

	.ld-wohnung__zurueck {
		position: static;
		order: -2;
		font-size: 0.75rem;
	}

	.ld-wohnung__kicker,
	.ld-wohnung__raum,
	.ld-wohnung__merkmal,
	.ld-wohnung__marke,
	.ld-wohnung__reiter,
	.ld-wohnung__geschoss,
	.ld-wweitere__daten {
		font-size: 0.9rem;
	}

	.ld-wohnung__summe {
		font-size: 1rem;
		padding-block: 0.8rem;
	}

	/*
	 * Diese beiden stehen im Grundmaß der Seitenbreite. Auf 375 Bildpunkten
	 * wären das zweieinhalb und drei Pixel — sie brauchen hier eine feste
	 * Angabe.
	 */
	.ld-wohnung__ebene {
		font-size: 0.75rem;
		margin-block-start: 1.4rem;
	}

	.ld-wohnung__aufklappen {
		font-size: 0.8rem;
		margin-block-start: 1rem;
	}

	.ld-wohnung__merkmal {
		margin-block-start: 1.4rem;
	}

	.ld-wohnung__vorbehalt {
		margin-block-start: 1.4rem;
		font-size: 0.8rem;
	}

	.ld-wohnung-energie {
		padding: 1.2rem 6vw;
		font-size: 0.8rem;
	}

	.ld-wohnung__aufklappen-wort::after {
		width: 0.4rem;
		height: 0.4rem;
	}

	.ld-wohnung__nummer {
		font-size: 3.4rem;
		margin-block-start: 0.5rem;
	}

	.ld-wohnung__kopf {
		gap: 0.75rem;
		margin-block-start: 0.5rem;
	}

	.ld-wohnung__stand {
		padding: 0.4rem 0.75rem;
		font-size: 0.6875rem;
	}

	.ld-wohnung__raum {
		padding-block: 0.7rem;
	}

	/* Auf 375 Bildpunkten stehen zwei Spalten zu eng; eine reicht. */
	.ld-wohnung__marken {
		grid-template-columns: 1fr;
		gap: 0.7rem;
		margin-block-start: 2rem;
	}

	.ld-wohnung__marke {
		gap: 0.6rem;
	}

	.ld-wohnung__marke::before {
		width: 1.35rem;
		height: 1.35rem;
	}

	.ld-wohnung__fuss {
		margin-block-start: 2rem;
	}

	.ld-wohnung__pdf {
		font-size: 1rem;
	}

	.ld-wohnung__zurueck::before {
		width: 1.4rem;
		height: 0.55rem;
	}

	.ld-wohnung__umschalter {
		margin-block-start: 1.5rem;
	}

	.ld-wohnung__reiter {
		min-height: 0;
		padding-block: 0.55em;
	}

	/*
	 * **Die Geschosswahl in vw gerechnet ist auf dem Telefon unbenutzbar** —
	 * nachgemessen 37 × 7 Bildpunkte bei 2,9 Punkt Schrift. Hier gelten
	 * deshalb dieselben Maße wie bei den Ansichtsreitern darunter, und das
	 * Tippziel bekommt die 44 Bildpunkte, die eine Fingerkuppe braucht.
	 */
	.ld-wohnung__geschosse {
		gap: 0.5rem;
		padding-block-end: 1rem;
	}

	.ld-wohnung__geschoss {
		min-height: 44px;
		padding-block: 0.55em;
		padding-inline: 1em;
	}

	.ld-wweitere__kopf {
		flex-direction: column;
		align-items: flex-start;
	}

	/*
	 * **So groß wie die Galerie-Überschrift auf dem Telefon.** Dort sind es in
	 * der Vorlage 50 Bildpunkte bei 375 Breite, also 13,33 vw; die 4,86 vw des
	 * Schreibtischs ergäben hier nur 18 und damit weniger als der Fließtext.
	 */
	.ld-wweitere__titel {
		font-size: min( 13.33vw, 3.125rem );
	}

	/*
	 * **Eine Karte auf einmal, nicht drei.** Die Kartenbreite ist ein Drittel
	 * der Fläche; bei 375 Bildpunkten wären das 104 je Karte, und darin ein
	 * Grundriss. Auf dem Telefon füllt eine Karte die Breite, geblättert wird
	 * mit denselben Pfeilen. So macht es die Vorlage auch — ihre Karte trägt
	 * dort `w-full`.
	 *
	 * Nur die beiden Zahlen ändern sich, die ganze Mechanik bleibt.
	 */
	/*
	 * **Der Seitenrand ist hier 6 vw, wie überall auf dem Telefon.** Er stand
	 * auf dem Rückfallwert 7,39 vw, weil `--ld-w-rand` an `.ld-wohnung` hängt
	 * und dieser Abschnitt daneben liegt, nicht darin. Am Schreibtisch fiel
	 * das nicht auf — dort ist 7,39 vw der richtige Wert. Auf dem Telefon
	 * stand die Überschrift dadurch bei 28 statt 23 und damit fünf Bildpunkte
	 * neben der Galerie-Überschrift unmittelbar darüber.
	 */
	.ld-wweitere {
		--ld-w-rand: 6vw;
		--ld-ww-luecke: 3vw;
		--ld-ww-karte: calc( 100vw - 2 * var( --ld-w-rand, 7.39vw ) );
	}

	.ld-wweitere__nummer {
		font-size: 2rem;
	}



	.ld-charakter {
		min-height: 0;
		padding-block: 8vh;
	}

	.ld-charakter__buehne {
		display: flex;
		flex-direction: column;
		gap: 4vh;
		min-height: 0;
	}

	.ld-charakter__rahmen {
		width: 100%;
	}

	.ld-charakter__spalte {
		width: 100%;
		margin-block-end: 0;
		gap: 1.4rem;
	}

	.ld-charakter__kicker {
		font-size: 0.8rem;
	}

	.ld-charakter__aussage {
		font-size: 1.9rem;
	}

	.ld-charakter__text {
		width: 100%;
		font-size: 0.9rem;
	}

	/* Auf dem Handy nimmt das Objekt zu viel Platz und deckt den Text zu. */
	.ld-charakter__objekt {
		display: none;
	}

	/*
	 * Das ganzflächige Bild bleibt — es liegt ja hinter allem und verdunkelt
	 * nur. Auf dem Handy steht der Text über der ganzen Breite, deshalb eine
	 * Spur zurückgenommen.
	 */
	.ld-charakter__grund {
		opacity: 0.45;
	}

	/*
	 * **Auf dem Telefon wie Arbors Residence** — dort bei 375 nachgemessen
	 * (Wurzel 15,375 gegen unsere 16):
	 *
	 * | Teil                 | Arbor 375                         | hier            |
	 * |----------------------|-----------------------------------|-----------------|
	 * | „Back“               | oben rechts, 34,6 vom Rand, 15,4  | 2,16 rem, 0,96  |
	 * | Bildfläche           | 329 × 444, also 1 : 1,35          | 1 / 1,35        |
	 * | Umschalter           | links, direkt unter dem Bild      | ohne Abstand    |
	 * | Strich dazwischen    | 7,7 × 1, grau, füllt die Lücke    | 0,48 rem        |
	 * | Wohnungsname         | 50 px                             | 3,125 rem       |
	 * | Anfrage-Knopf        | volle Breite, 46 hoch             | 100 %           |
	 * | „PDF“                | mittig, 30,7 unter dem Knopf      | 1,92 rem        |
	 *
	 * Der Plan bleibt quadratisch und steht mittig in der höheren Fläche; oben
	 * bleibt dadurch Luft für „Zurück“, so wie über Arbors Schrägansicht.
	 */
	@media ( max-width: 767px ) {

		.ld-wohnung .ld-wohnung__zurueck {
			position: absolute;
			inset-block-start: 12vh;
			inset-inline-end: 2.16rem;
			gap: 0.96rem;
			font-size: 0.96rem;
		}

		/*
		 * **Bei den Maisonetten lag „Zurück" auf der Geschosswahl** — beide
		 * standen bei 12 vh (29.10.2026 gefunden, E20 und E22). Die
		 * Geschosswahl rückt deshalb unter „Zurück": Polster statt Rand,
		 * damit kein Rand von WordPress dazwischenfunkt.
		 */
		.ld-wohnung .ld-wohnung__geschosse {
			padding-block-start: 2.6rem;
		}

		.ld-wohnung__bilder {
			aspect-ratio: 1 / 1.35;
		}

		.ld-wohnung .ld-wohnung__umschalter {
			--ld-w-steg: 0.48rem;

			justify-content: flex-start;
			margin-block-start: 0;
			padding-block-start: 0;
		}

		/*
		 * Arbor: 15,4 Grad, 3,8 / 15,4 Polster — 25 hoch. Der Grad bleibt hier
		 * bei 0,9 rem: „Im Geschoss“ ist länger als ihr „Floor“, und mit 0,96
		 * ragte die Reihe sieben Bildpunkte über den Seitenrand.
		 */
		.ld-wohnung .ld-wohnung__reiter {
			padding: 0.27rem 0.96rem;
			font-size: 0.9rem;
		}

		.ld-wohnung__nummer {
			font-size: 3.125rem;
		}

		.ld-wohnung .ld-wohnung__fuss {
			flex-direction: column;
			gap: 1.92rem;
		}

		.ld-wohnung__fuss > .ld-wohnung__anfrage {
			align-self: stretch;
		}

		.ld-wohnung__fuss > .ld-wohnung__anfrage a {
			width: 100%;
			box-sizing: border-box;
		}

		/*
		 * **„Zwei Charaktere“ wie Arbors „Designed around you“** — bei 375
		 * nachgemessen:
		 *
		 * | Teil                 | Arbor 375                          | hier          |
		 * |----------------------|------------------------------------|---------------|
		 * | Seitenrand           | 23                                 | 1,4375 rem    |
		 * | Polster oben / unten | 15,4 / 307,5 (Platz für die Pflanze) | 1 / 20 rem  |
		 * | Bild                 | volle Breite, 1,44 : 1, Rundung 19,2 | 1,2 rem     |
		 * | Bild bis Kicker      | 80                                 | 5 rem         |
		 * | Kicker               | 19,2                               | 1,2 rem       |
		 * | Aussage              | 34,6, Zeilenhöhe 1,1               | 2,16 rem      |
		 * | Absatz               | 15,4, Zeilenhöhe 1,2, volle Breite | 0,96 rem      |
		 * | Abstände dazwischen  | rund 38                            | 2,4 rem       |
		 * | Pflanze              | unten, volle Breite, bündig        | ebenso        |
		 *
		 * **Die Pflanze gibt es nur im Vorderhaus** — dort steht dasselbe Blatt
		 * wie am Schreibtisch. Im Hofhaus liegt das Bild ganzflächig hinter dem
		 * Abschnitt; unten braucht es dort keinen Platz.
		 */
		.ld-charakter {
			padding: 1rem 1.4375rem 20rem;
		}

		.ld-charakter.ld-charakter--hofhaus {
			padding-block-end: 4.8rem;
		}

		.ld-charakter .ld-charakter__buehne {
			gap: 5rem;
		}

		.ld-charakter__rahmen {
			border-radius: 1.2rem;
		}

		.ld-charakter .ld-charakter__spalte {
			gap: 2.4rem;
		}

		.ld-charakter__kicker {
			font-size: 1.2rem;
		}

		.ld-charakter__aussage {
			font-size: 2.16rem;
		}

		.ld-charakter__text {
			font-size: 0.96rem;
			line-height: 1.2;
		}

		.ld-charakter .ld-charakter__objekt {
			display: block;
			inset-inline: 0;
			inset-block-end: 0;
			width: 100%;
		}

		/*
		 * **Die Reihe „Vorderhaus“ / „Hofhaus“ wie Arbors „Similar“** — bei
		 * 375 nachgemessen:
		 *
		 * | Teil                  | Arbor 375                            | hier          |
		 * |-----------------------|--------------------------------------|---------------|
		 * | Polster oben          | 115                                  | 7,2 rem       |
		 * | Überschrift           | 50, Light, Versalien                 | wie bisher    |
		 * | Karte                 | bei 208, volle Breite, Polster 16    | 0,96 rem      |
		 * | Nummer                | 53,8, links                          | 3,36 rem      |
		 * | Angaben               | 15,4 / 1,2, rechts neben der Nummer  | 0,96 rem      |
		 * | „See more“            | unter der Karte, volle Breite, 46    | 100 %         |
		 * | Pfeile                | keine — gewischt wird                | ausgeblendet  |
		 *
		 * „Alle ansehen“ steht im Markup im Kopf; der Kopf löst sich hier auf
		 * (`display: contents`), und die Reihenfolge stellt `order`.
		 * **Gewischt wird in `wohnung.js`**, nur unterhalb von 768.
		 */
		.ld-wweitere {
			--ld-w-rand: 1.4375rem;

			display: flex;
			flex-direction: column;
			min-height: 0;
			padding: 7.2rem 1.4375rem 4.8rem;
		}

		.ld-wweitere__kopf {
			display: contents;
		}

		.ld-wweitere .ld-wweitere__titel {
			order: 0;
			margin-block-end: 2.7rem;
		}

		.ld-wweitere__fenster {
			order: 1;
			touch-action: pan-y;
		}

		.ld-wweitere .ld-wweitere__steuerung {
			order: 2;
			align-items: stretch;
			margin-block-start: 2.7rem;
		}

		.ld-wweitere__alle a {
			width: 100%;
			box-sizing: border-box;
		}

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

		.ld-wweitere__pfeile {
			display: none;
		}

		.ld-wweitere .ld-wweitere__karte {
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			padding: 0.96rem;
		}

		.ld-wweitere__plan {
			grid-column: 1 / -1;
		}

		.ld-wweitere .ld-wweitere__nummer {
			margin-block-start: 1.5rem;
			font-size: 3.36rem;
		}

		/*
		 * **Größere Tippflächen, gleiches Aussehen** — „Zurück“, „Alle
		 * Räume“ und „PDF“ waren 16 bis 23 Bildpunkte hoch; ein Finger
		 * braucht 44. Die ersten beiden bekommen eine unsichtbare Fläche
		 * darüber (`::after`, das `::before` trägt beim Zurück den Pfeil),
		 * „PDF“ als Verweis im Text Polster mit negativem Rand. Vom Kunden
		 * so gewünscht.
		 */
		.ld-wohnung .ld-wohnung__zurueck::after,
		.ld-wohnung .ld-wohnung__aufklappen::after {
			content: "";
			position: absolute;
			inset: -0.75rem -0.5rem;
		}

		.ld-wohnung .ld-wohnung__aufklappen {
			position: relative;
		}

		.ld-wohnung .ld-wohnung__pdf {
			padding: 0.9rem 1rem;
			margin: -0.9rem -1rem;
		}

		.ld-wweitere .ld-wweitere__daten {
			gap: 0.12rem;
			margin-block-start: 1.5rem;
			font-size: 0.96rem;
			line-height: 1.2;
		}
	}
}