/*
 * Abschnitt: Ausstattung — Auftakt
 *
 * **Eine Kopie des Abschnitts „Wohnungen", und das mit Absicht.** Bei Arbor
 * ist jeder Rubrik-Auftakt derselbe Bildschirm — Residences, Business Spaces,
 * Amenities. Der Wohnungen-Abschnitt ist bereits Zeile für Zeile an der
 * Vorlage vermessen; jede Zahl hier hat ihre Begründung dort.
 *
 * **Ein Neuaufbau daneben war der Fehler.** Ein erster Anlauf hat Arbor live
 * neu vermessen — auf einer animierten Seite hinter einem Ladeschirm. Dabei
 * kamen falsche Kachelmaße, eine falsche Lage und eine scrollgekoppelte
 * statt einer zeitbasierten Bewegung heraus. **Wo ein Abschnitt aus derselben
 * Vorlage schon gebaut ist, wird er kopiert und nicht neu hergeleitet.**
 *
 * 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.
 *
 * ## Auf dem Telefon — am 08.10.2026 an `#Amenities` gemessen
 *
 * **Hier bleibt es bei einem Bildschirm und bei derselben Komponente.** Anders
 * als bei „Architektur" schaltet die Vorlage diesen Abschnitt auf dem Telefon
 * nicht ab; sie stellt ihn nur um. Das ist der Normalfall, und er ist billig.
 *
 *                              1512        375
 *   Abschnittshöhe             1 Bildschirm   1 Bildschirm
 *   Anordnung                  nebeneinander  **untereinander**, Kachel oben
 *   Riesenwort                 160 px         **46,1 px**, Regular
 *   Kachel                     1,43 : 1       **1,44 : 1** — unverändert
 *   Seitenrand                 184 px         23 px
 *
 * **Die Kachel behält ihr Seitenverhältnis**, sie wird nur kleiner (247 × 172).
 * Und sie steht oben, nicht unten: `max-md:flex-col` kehrt die Reihenfolge um.
 *
 * **Ein Absatz kommt auf dem Telefon dazu, den es am Schreibtisch nicht gibt.**
 * In der Vorlage trägt er `hidden … max-md:block` und steht mit 15,4 px unter
 * dem Riesenwort. Der Grund liegt auf der Hand: Am Schreibtisch trägt das Bild
 * die Aussage, auf 375 Bildpunkten trägt sie der Text.
 *
 * **Daraus eine Regel, die über diesen Abschnitt hinausgeht: Eine Mobilfassung
 * darf Inhalt *hinzufügen*.** Wir haben bisher nur weggelassen und umsortiert.
 *
 * 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-ausstattung {
	position: relative;
	overflow: clip;
	padding: 0;
}

/*
 * **Die Bühne trägt die Grundfarbe selbst, und das ist keine Doppelung.**
 *
 * Die Kammzugputz-Fläche darin wird multipliziert — und `mix-blend-mode`
 * mischt nur mit dem, was **im selben Stapelraum** darunterliegt. Die Bühne
 * bekommt beim Auftritt ein `clip-path`, und das macht einen eigenen
 * Stapelraum auf: Die Farbe des Abschnitts liegt damit außerhalb, die Fläche
 * mischte mit nichts und stand als weißes Rechteck über dem Blau.
 *
 * **`background-color: inherit` statt einer zweiten Farbangabe.** Es nimmt den
 * berechneten Wert des Abschnitts — ändert der Kunde dessen Farbe im Editor,
 * wandert die Bühne mit. Eine hier hingeschriebene Farbe liefe beim ersten
 * Wechsel auseinander.
 */
.ld-ausstattung .ld-ausstattung__buehne {
	position: relative;
	height: 100svh;
	margin: 0;
	overflow: clip;
	background-color: inherit;
	isolation: isolate;
}

/* ------------------------------------------------------------------ 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-ausstattung__grund {
	position: absolute;
	inset: calc(var(--ld-abschied-weg) * -1) 0 0 0;
	margin: 0;
	z-index: 0;
	pointer-events: none;
	/*
	 * **Die Mischmethode gehört an den Rahmen, nicht an das Bild darin.**
	 * Der Rahmen steht auf `z-index: 0` und ist damit selbst ein Stapelraum;
	 * eine Mischmethode am Bild bliebe darin gefangen und mischte mit nichts.
	 * Genau so stand die helle Fläche als weißes Rechteck über dem Blau.
	 */
	mix-blend-mode: multiply;
}

/*
 * **Die Fläche wird multipliziert, seit der Abschnitt dunkel ist.**
 *
 * Sie ist eine Kammzugputz-Aufnahme in Kalkweiß und deckend — auf einem
 * hellen Grund war sie deshalb ein kaum wahrnehmbarer Schimmer, auf
 * Schieferblau wäre sie ein bildschirmfüllendes weißes Rechteck. **Die
 * Grundfarbe des Abschnitts wäre gar nicht zu sehen gewesen.**
 *
 * `multiply` löst es an der Wurzel: Weiß multipliziert sich zu nichts, der
 * blaue Grund bleibt also unberührt, und nur die Faltungen dunkeln ihn
 * leicht ab. Aus der hellen Fläche wird damit dieselbe Fläche in Blau —
 * dieselbe Regel wie beim Hofhaus-Bild auf der Wohnungsseite.
 */
.ld-ausstattung__grund img {
	display: block;
	width: 100%;
	height: calc(100% + var(--ld-abschied-weg));
	object-fit: cover;
	object-position: center;
	translate: 0 calc(var(--ld-ausstattung-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-ausstattung__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-ausstattung__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-ausstattung.is-bereit .ld-ausstattung__kachel {
	clip-path: inset(0 var(--ld-ausstattung-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 nicht mehr zurück, sie zoomen** — seit dem
 * 14.10.2026, vom Kunden gewünscht. Das Zurückhängen verlangte ein Bild, das
 * um seinen ganzen Weg größer ist als die Kachel: Zu sehen waren nur gut
 * 70 Prozent davon, der gewählte Ausschnitt wurde also noch einmal enger und
 * hochgezogen — der Kunde sah es als „sehr niedrig auflösend". Jetzt füllt
 * genau der gewählte Ausschnitt die Kachel. Dieselbe Abwägung wie beim Film in
 * der Kachel von „Die Lage": Jede Vergrößerung über das Fenster hinaus ist
 * Beschnitt.
 *
 * `--ld-ausstattung-kachel-weg` hält die alte Bauart vor: Wer das Zurückhängen
 * wieder will, setzt dort `var(--ld-abschied-weg)`.
 */
.ld-ausstattung {
	--ld-ausstattung-kachel-weg: 0px;
}

.ld-ausstattung__clip {
	position: absolute;
	inset-block-start: calc(-1 * var(--ld-ausstattung-kachel-weg));
	inset-inline-start: calc(-0.715 * var(--ld-ausstattung-kachel-weg));
	height: calc(100% + var(--ld-ausstattung-kachel-weg));
	width: calc(100% + 1.43 * var(--ld-ausstattung-kachel-weg));
	margin: 0;
	overflow: clip;
	translate: 0 calc(var(--ld-ausstattung-p, 0) * var(--ld-ausstattung-kachel-weg));
}

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

/*
 * **Der kleine Zoom.** Jede Aufnahme wächst, solange sie zu sehen ist, ganz
 * langsam um fünf Prozent — 7,5 Sekunden, also über ihren Wisch (2 s) und ihre
 * Standzeit (5 s) hinweg, weich auslaufend. `is-zoom` setzt `ausstattung.js`
 * beim Auftritt an die erste Aufnahme und mit jedem Wisch an die neue; der
 * alten nimmt es die Klasse erst ab, wenn sie ganz zugedeckt ist — sonst
 * spränge sie mitten im Wisch zurück.
 */
.ld-ausstattung__clip.is-zoom img {
	animation: ld-ausstattung-zoom 7.5s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

@keyframes ld-ausstattung-zoom {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.05);
	}
}

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

/*
 * 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-ausstattung {
	--ld-ausstattung-schub: clamp(1.5rem, 3vw, 3.5rem);
}

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

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

	to {
		clip-path: inset(0 0 0 0);
		translate: 0 calc(var(--ld-ausstattung-p, 0) * var(--ld-ausstattung-kachel-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-ausstattung__wort {
	position: absolute;
	inset-inline-start: 4.6%;
	inset-block-end: 12.1%;
	margin: 0;
	/*
	 * Nicht der Grad der Vorlage, sondern ihre Wirkung — dieselbe Rechnung wie
	 * bei „Wohnungen", nur mit einem längeren Wort. Dort sind es 8,3 vw für
	 * „Residences" (zehn Zeichen) und 7,5 vw für „Wohnungen" (neun).
	 *
	 * „Ausstattung" hat **elf** Zeichen. Auf 7,5 vw endete es bei 57,4 Prozent
	 * der Breite, der Fließtext beginnt fest bei 58,6 — die Lücke betrug damit
	 * **1,2 statt der 5,1 Prozent** der Vorlage, das Wort stieß fast an den
	 * Text.
	 *
	 * 6,93 vw bringt es auf dieselben 49 Prozent Breite und damit auf dieselbe
	 * Lücke. Wer das Wort ändert, rechnet hier nach: Breite des Wortes plus
	 * 4,6 Prozent Rand soll bei 53,5 Prozent enden.
	 */
	font-size: 6.93vw;
	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-ausstattung__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-ausstattung__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-ausstattung.is-bereit {
	--ld-ausstattung-vorhang: 100%;
	--ld-ausstattung-zoom: 1.1;
	--ld-ausstattung-kachel-vorhang: 100%;
}

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

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

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

/* Für den Wimpernschlag beim Zurücksetzen — siehe „Architektur". */
.ld-ausstattung.is-zurueck .ld-ausstattung__buehne,
.ld-ausstattung.is-zurueck .ld-ausstattung__kachel,
.ld-ausstattung.is-zurueck .ld-ausstattung__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-ausstattung__grund img {
		translate: none;
	}

	.ld-ausstattung__clip.is-zoom img {
		animation: 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.
 */
@media (max-width: 767px) {
	/*
	 * **Aufteilung wie der Wohnungen-Teaser** — vom Kunden so gewünscht
	 * (27.10.2026), nach Arbors `#Residences`: Kachel drei Viertel breit
	 * **rechts** bei 115, Radius 19,2; Riesenwort einzeilig links bei 384,
	 * 46,1; Absatz am unteren Rand, Knopf darunter.
	 *
	 * **Davor stand hier Arbors `#Amenities`** (Kachel links, Wort direkt
	 * darunter) und das Wort auf zwei Zeilen „AUS- / STATTUNG". Dem Kunden
	 * gefiel die Anordnung des Wohnungen-Teasers besser, und beide Rubriken
	 * stehen damit gleich. Die Trennstelle im Block ist wieder heraus;
	 * `setupSteigen()` kann sie weiterhin, falls sie zurück soll.
	 */
	.ld-ausstattung__rahmen {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: 0;
		padding: 7.2rem 1.4375rem 3.6rem;
	}

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

	.ld-ausstattung__wort {
		position: relative;
		inset: auto;
		margin-block-start: 6rem;
		/*
		 * Arbors 46,1 — aber „AUSSTATTUNG" ist dabei 340 breit, die Spalte
		 * 329; es lief zwölf Bildpunkte in den Rand. Das Wort misst 7,4
		 * Schriftgrade, deshalb höchstens ein Siebeneinhalbtel der Spalte.
		 */
		font-size: min(2.88rem, calc((100vw - 2.875rem) / 7.4));
		line-height: 1;
		white-space: nowrap;
		order: 2;
	}

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

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

	/*
	 * **Niedrige Bildschirme** (Kunde, 30.10.2026, iPhone mit Safari): Der
	 * Absatz steht am unteren Rand, das Wort hängt oben — bei 664
	 * Bildpunkten Höhe stießen beide aneinander (Lücke 1). Das Wort rückt
	 * höher, die Lücke wird 76. Ab 760 Höhe greift nichts davon; dieselbe
	 * Regel steht im Wohnungen-Teaser.
	 */
	@media (max-height: 760px) {
		.ld-ausstattung__rahmen {
			padding-block-start: 6rem;
		}

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