/*
 * Abschnitt: Wohnungen
 *
 * Nachgebaut nach „Residences" auf belgradearbor.rs. Ein Bildschirm, dahinter
 * ein randloses Foto, unten links das Riesenwort und unten rechts ein kurzer
 * Text. Beide sitzen auf derselben Grundlinie.
 *
 * Alle Maße sind in der Vorlage gemessen und als Anteile der Fläche notiert:
 *
 *   Rand links                    4,6 %  der Breite
 *   Rand unten                   12,1 %  der Höhe   (Wort und Text gemeinsam)
 *   Riesenwort                    8,30 vw            (dieselbe Stufe wie „Die Lage")
 *   Textspalte, Beginn           58,6 %  der Breite
 *   Textspalte, Breite             26 vw
 *
 * Was hier steht, ist Form. Schriftart und Farbe tragen die Blöcke selbst,
 * damit sie im Editor änderbar bleiben.
 */

.ld-wohnungen {
	position: relative;
	overflow: clip;
	padding: 0;
}

.ld-wohnungen .ld-wohnungen__buehne {
	position: relative;
	height: 100svh;
	margin: 0;
	overflow: clip;
}

/* ------------------------------------------------------------------ Grund */

/*
 * Das Foto hängt beim Durchscrollen zurück — dieselbe Bauart wie im
 * Lage-Abschnitt. Es ist um seinen ganzen Weg höher als die Bühne und beginnt
 * um genau diesen Weg zu hoch, damit es an beiden Enden lückenlos abdeckt.
 * Die zusätzliche Breite wächst im Seitenverhältnis mit, sonst verschöbe
 * object-fit den Ausschnitt.
 */
.ld-wohnungen__grund {
	position: absolute;
	inset: calc(var(--ld-abschied-weg) * -1) 0 0 0;
	margin: 0;
	z-index: 0;
	pointer-events: none;
}

.ld-wohnungen__grund img {
	display: block;
	width: 100%;
	height: calc(100% + var(--ld-abschied-weg));
	object-fit: cover;
	object-position: center;
	translate: 0 calc(var(--ld-wohnungen-p, 0) * var(--ld-abschied-weg));
	will-change: translate;
}

/* ----------------------------------------------------------------- Rahmen */

/*
 * Wort und Text stehen nebeneinander und schließen unten auf derselben Linie
 * ab. Der rechte Rand ist mit 15,4 Prozent deutlich größer als der linke — der
 * Text steht in der Vorlage nicht bündig an der Kante, sondern eingerückt.
 */
/*
 * Jeder Teil steht an seiner gemessenen Stelle, statt in einem Raster zu
 * hängen. Das Raster hatte den Absatz an die Unterkante des Wort-Kastens
 * gebunden; der ist wegen der Zeilenhöhe von 0,92 aber höher als die Schrift
 * darin, und der Absatz saß dadurch zwölf Prozent zu hoch.
 *
 * In der Vorlage gemessen, als Anteil der Abschnittshöhe:
 *
 *   Kachel        oben 20,2 %   links 13,2 %   30,3 vw   1,43 zu 1
 *   Riesenwort    unten 91,1 %  links  4,6 %
 *   Absatz        unten 87,9 %  links 58,6 %   26 vw
 */
.ld-wohnungen__rahmen {
	position: absolute;
	inset: 0;
	z-index: 2;
	margin: 0;
}

/* ----------------------------------------------------------------- Kachel */

/*
 * Dieselbe Kachel wie im Abschnitt „Die Lage" — Verhältnis, Radius, Vorhang
 * und Bildwechsel sind dort schon gebaut und stimmen mit der Vorlage überein.
 * Wer eine der beiden Stellen ändert, sollte die andere ansehen; ein dritter
 * Abschnitt mit Kachel wäre der Anlass, das Ganze nach base.css zu heben.
 *
 * Lage in der Vorlage gemessen: links 12,9 Prozent der Breite, oben 18,1
 * Prozent der Höhe, 30,3 vw breit im Verhältnis 1,43 zu 1.
 */
.ld-wohnungen__kachel {
	position: absolute;
	inset-block-start: 20.2%;
	inset-inline-start: 13.2%;
	margin: 0;
	width: 30.3vw;
	aspect-ratio: 1.43 / 1;
	border-radius: 1.04vw;
	overflow: clip;
	will-change: clip-path;
}

.ld-wohnungen.is-bereit .ld-wohnungen__kachel {
	clip-path: inset(0 var(--ld-wohnungen-kachel-vorhang, 100%) 0 0);
	/*
	 * Die Kachel wartet, bis der Vorhang durch ist, und wischt erst danach
	 * herein — dieselbe Verzögerung wie bei „Die Lage".
	 */
	transition: clip-path 0.9s cubic-bezier(0.645, 0.045, 0.355, 1) 1.7s;
}

/*
 * Die Aufnahmen hängen beim Scrollen zurück. Ein Bild, das so wandert, muss um
 * seinen ganzen Weg größer sein als sein Rahmen und um genau diesen Weg zu hoch
 * beginnen; die zusätzliche Breite wächst im Seitenverhältnis mit.
 */
.ld-wohnungen__clip {
	position: absolute;
	inset-block-start: calc(-1 * var(--ld-abschied-weg));
	inset-inline-start: calc(-0.715 * var(--ld-abschied-weg));
	height: calc(100% + var(--ld-abschied-weg));
	width: calc(100% + 1.43 * var(--ld-abschied-weg));
	margin: 0;
	translate: 0 calc(var(--ld-wohnungen-p, 0) * var(--ld-abschied-weg));
	will-change: translate;
}

.ld-wohnungen__kachel .ld-wohnungen__clip img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ld-wohnungen__clip--1 { z-index: 1; }
.ld-wohnungen__clip--2 { z-index: 0; }

/*
 * **Mit Film entfällt das Zurückhängen in der Kachel.** Es braucht einen
 * Medienkasten, der größer ist als sein Fenster, und das kostet bei „cover"
 * Bild — bei einem Standbild ist das den Preis wert, ein Film bewegt sich
 * ohnehin. Dieselbe Regel wie in „Die Lage". Der Grund der Kachel steht da,
 * falls der Film nicht lädt; sonst klaffte ein Loch im Hintergrund.
 */
.ld-wohnungen__kachel:has( video ) {
	background-color: var( --wp--preset--color--surface );
}

.ld-wohnungen__kachel .ld-wohnungen__clip--film {
	inset: 0;
	width: 100%;
	height: 100%;
	translate: none;
	will-change: auto;
}

.ld-wohnungen__kachel .ld-wohnungen__clip--film video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Der Wechsel ist ein Wisch von unten nach oben; die einlaufende Aufnahme
 * schiebt sich dabei ein Stück mit nach oben, damit sie in Bewegung ankommt.
 * Zwei Sekunden für die Höhe der Kachel — mit weniger wirkte es gehetzt.
 */
.ld-wohnungen {
	--ld-wohnungen-schub: clamp(1.5rem, 3vw, 3.5rem);
}

.ld-wohnungen.is-bereit .ld-wohnungen__clip.is-wischt {
	z-index: 2;
	animation: ld-wohnungen-wisch 2s cubic-bezier(0.645, 0.045, 0.355, 1) both;
}

@keyframes ld-wohnungen-wisch {
	from {
		clip-path: inset(100% 0 0 0);
		translate: 0 calc(var(--ld-wohnungen-p, 0) * var(--ld-abschied-weg) + var(--ld-wohnungen-schub));
	}

	to {
		clip-path: inset(0 0 0 0);
		translate: 0 calc(var(--ld-wohnungen-p, 0) * var(--ld-abschied-weg));
	}
}

/*
 * Wort und Absatz enden auf derselben Linie, bei 87,9 Prozent der Höhe — so
 * steht es in der Vorlage. Die Zeilenhöhe ist dort 1,0; mit den 0,92, die wir
 * zwischenzeitlich hatten, wurde der Kasten flacher und die Linie stimmte
 * nicht mehr.
 */
.ld-wohnungen__wort {
	position: absolute;
	inset-inline-start: 4.6%;
	inset-block-end: 12.1%;
	margin: 0;
	/*
	 * Nicht der Grad der Vorlage, sondern ihre Wirkung — dieselbe Entscheidung
	 * wie beim Riesenwort in „Architektur". Dort sind es 8,3 vw für
	 * „Residences", zehn Zeichen. „Wohnungen" hat neun, ist bei gleichem Grad
	 * aber breiter: 53,4 statt 49 Prozent der Breite. Der Fließtext beginnt
	 * fest bei 58,6 Prozent, und die Lücke dazwischen schrumpfte dadurch von
	 * 5,1 auf 0,6 Prozent — das Wort stieß fast an den Text.
	 *
	 * 7,5 vw bringt unser Wort auf dieselben 49 Prozent und damit dieselbe
	 * Lücke wie in der Vorlage. Es waren 7,6, solange hier -0,01 em Sperrung
	 * stand; ohne die Sperrung wird das Wort breiter, und der Grad gleicht das
	 * aus.
	 */
	font-size: 7.5vw;
	font-weight: 400;
	line-height: 1;
	/*
	 * Keine Sperrung. Hier stand einmal -0,01 em ohne Begründung; die Vorlage
	 * setzt ihre Versalien bei 96, 100, 160, 215 und 320 Bildpunkten
	 * ausnahmslos auf `normal`.
	 */
	letter-spacing: normal;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Der Text steht rechts neben dem Wort und endet auf derselben Linie. */
.ld-wohnungen__absatz {
	position: absolute;
	inset-inline-start: 58.6%;
	/* Der Knopf darunter braucht seine Höhe plus Abstand. */
	inset-block-end: calc(12.1% + 4.4vw);
	width: 26vw;
	margin: 0;
	font-size: clamp(0.8rem, 0.83vw, 1rem);
	line-height: 1.5;
}

/*
 * **Der Weg auf die Wohnungsseite.** Der Abschnitt war bis dahin eine
 * Sackgasse: Wort, Bild und drei Zeilen Text, aber kein Verweis — der Knopf
 * „Alle ansehen" saß im Zimmerzahl-Abschnitt, und der ist von der Startseite
 * genommen. Wer hier ankam, musste zurück ins Menü.
 *
 * Er steht unter dem Fließtext und damit dort, wo das Lesen endet. Das
 * Riesenwort links und der Knopf rechts sitzen auf derselben unteren Linie;
 * der Text rückt um die Höhe des Knopfes nach oben.
 */
.ld-wohnungen__schalter {
	position: absolute;
	inset-inline-start: 58.6%;
	inset-block-end: 12.1%;
	margin: 0;
}

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

/*
 * Der Abschnitt wird von links nach rechts aufgedeckt, während das Foto von
 * 110 auf 100 Prozent zurückgeht — dieselben drei Bewegungen wie bei „Die
 * Lage", und in der Vorlage steht an dieser Stelle derselbe Vorhang:
 * clip-path: inset(0% 100% 0% 0%) am ganzen Abschnitt.
 */
.ld-wohnungen.is-bereit {
	--ld-wohnungen-vorhang: 100%;
	--ld-wohnungen-zoom: 1.1;
	--ld-wohnungen-kachel-vorhang: 100%;
}

.ld-wohnungen.is-bereit .ld-wohnungen__buehne {
	clip-path: inset(0 var(--ld-wohnungen-vorhang, 0%) 0 0);
	transition: clip-path 1.7s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.ld-wohnungen.is-bereit .ld-wohnungen__grund img {
	transform: scale(var(--ld-wohnungen-zoom, 1));
	transition: transform 1.7s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.ld-wohnungen.is-auf {
	--ld-wohnungen-vorhang: 0%;
	--ld-wohnungen-zoom: 1;
	--ld-wohnungen-kachel-vorhang: 0%;
}

/* Für den Wimpernschlag beim Zurücksetzen — siehe „Architektur". */
.ld-wohnungen.is-zurueck .ld-wohnungen__buehne,
.ld-wohnungen.is-zurueck .ld-wohnungen__kachel,
.ld-wohnungen.is-zurueck .ld-wohnungen__grund img {
	transition: none;
}

/* ----------------------------------------------------- Ohne Skript und ruhig */

/*
 * Ohne JavaScript steht alles sofort da — das übernimmt .ld-reveal in
 * base.css. Bei reduzierter Bewegung hängt das Foto zusätzlich nicht zurück.
 */
@media (prefers-reduced-motion: reduce) {
	.ld-wohnungen__grund img {
		translate: none;
	}
}

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

/*
 * Nebeneinander wird zu eng: Das Riesenwort nähme die ganze Breite und der
 * Text daneben bliebe ein Streifen. Deshalb untereinander — erst der Text,
 * darunter das Wort, so wie es die Vorlage auf schmalen Geräten auch macht.
 */
/*
 * **Auf dem Telefon nach Arbors `#Residences`**, bei 375 gemessen
 * (27.10.2026). Ihr Grundmaß ist 15,375 Bildpunkte, unseres 16.
 *
 * |               | Telefon (375)                                          |
 * |---------------|--------------------------------------------------------|
 * | Kachel        | drei Viertel breit, **rechts**, Oberkante 115, Radius 19,2 |
 * | Riesenwort    | 46,1 Versalien, links, Oberkante 384                   |
 * | Absatz        | volle Breite, **am unteren Rand**, 58 über der Kante   |
 *
 * **Eine Abweichung:** Unser Knopf „Alle 23 Wohnungen" bleibt, unter dem
 * Absatz — er ist der Weg in den Finder. Arbor hat hier keinen.
 */
@media (max-width: 767px) {
	.ld-wohnungen__rahmen {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: 0;
		padding: 7.2rem 1.4375rem 3.6rem;
	}

	.ld-wohnungen__kachel {
		position: relative;
		inset: auto;
		align-self: flex-end;
		width: 75%;
		margin: 0;
		border-radius: 1.2rem;
		order: 1;
	}

	.ld-wohnungen__wort {
		position: relative;
		inset: auto;
		margin-block-start: 6rem;
		font-size: 2.88rem;
		white-space: nowrap;
		order: 2;
	}

	.ld-wohnungen__absatz {
		position: relative;
		inset: auto;
		width: 100%;
		margin-block-start: auto;
		font-size: 0.96rem;
		line-height: 1.2;
		order: 3;
	}

	.ld-wohnungen__schalter {
		position: relative;
		inset: auto;
		margin-block-start: 2rem;
		order: 4;
	}

	/*
	 * **Niedrige Bildschirme** (Kunde, 30.10.2026, iPhone mit Safari): bei
	 * 664 Bildpunkten Höhe stieß das Wort an den Absatz (Lücke 0). Das Wort
	 * rückt höher, die Lücke wird 40. Ab 760 Höhe greift nichts davon;
	 * dieselbe Regel steht im Auftakt der Ausstattung.
	 */
	@media (max-height: 760px) {
		.ld-wohnungen__rahmen {
			padding-block-start: 6rem;
		}

		.ld-wohnungen__wort {
			margin-block-start: 2.5rem;
		}
	}
}