/*
 * Abschnitt: Die Lage
 *
 * Nachbau des Lage-Bildschirms von belgradearbor.rs, dort bei 1512 × 711
 * gemessen. Ein Bildschirm hoch, dahinter ein randloses Foto mit einer
 * zurückgenommenen Fläche darüber. Darauf drei Dinge in einem gleichmäßigen
 * Rahmen — 69 Pixel links und rechts, 94 oben und unten:
 *
 *   oben links   eine abgerundete Kachel, 458 × 320, Radius 16
 *   oben rechts  ein Absatz, genau so breit wie die Kachel
 *   unten rechts das Wort in 125 Pixel, Versalien, rechtsbündig
 *
 * Alle Maße stehen als vw-Anteile, weil die Vorlage ihre Grundgröße ebenfalls
 * mit dem Fenster wachsen lässt: 69/1512 = 4,56vw, 94/1512 = 6,22vw,
 * 458/1512 = 30,3vw, 12,55/1512 = 0,83vw, 125,5/1512 = 8,3vw.
 *
 * Der Auftritt liegt in assets/js/sections/lage.js.
 */

.ld-lage {
	position: relative;
	padding: 0;
	/*
	 * Wie weit die Bilder beim Durchscrollen zurückhängen. In der Vorlage
	 * gemessen: das Bild in der Kachel 10 rem, das Hintergrundfoto 20 rem,
	 * also doppelt so weit. Die 10 rem sind genau der Weg unserer Regel für
	 * den Abschied eines Abschnitts — deshalb steht hier dieselbe Größe.
	 */
	--ld-lage-kachel-weg: var(--ld-abschied-weg);
	--ld-lage-grund-weg: calc(var(--ld-abschied-weg) * 2);
}

/*
 * Die Bühne ist der Vorhang: Sie schneidet ab, was rechts von der Kante liegt.
 * --ld-lage-vorhang läuft von 100 auf 0 Prozent. Ohne Skript steht sie offen.
 */
.ld-lage__buehne {
	position: relative;
	display: block;
	height: 100svh;
	overflow: clip;
	/*
	 * Ein eigener Stapelraum: Das Foto liegt darin ganz unten, ohne aus dem
	 * Abschnitt auszubrechen.
	 */
	isolation: isolate;
}

.ld-lage.is-bereit .ld-lage__buehne {
	clip-path: inset(0 var(--ld-lage-vorhang, 100%) 0 0);
}

/* ------------------------------------------------------------- Hintergrund */

/*
 * Das Foto ist um seinen ganzen Weg höher als die Bühne und beginnt genau um
 * diesen Weg zu hoch. Dadurch deckt es die Bühne an beiden Enden der Fahrt
 * lückenlos ab: am Anfang von oben überstehend, am Ende von unten. So wie in
 * der Vorlage, wo es die Bühnenhöhe plus 20 rem misst.
 */
.ld-lage__grund {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(-1 * var(--ld-lage-grund-weg));
	height: calc(100% + var(--ld-lage-grund-weg));
	z-index: 0;
	margin: 0;
	/*
	 * translate statt transform: Das Bild darin trägt schon ein transform für
	 * das Heranfahren beim Auftritt. Die beiden Eigenschaften stören einander
	 * nicht.
	 */
	translate: 0 calc(var(--ld-lage-p, 0) * var(--ld-lage-grund-weg));
	will-change: translate;
}

.ld-lage__grund img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Wie in der Vorlage: der Bildausschnitt sitzt links außermittig. */
	object-position: 20% 50%;
	transform: scale(var(--ld-lage-zoom, 1));
	will-change: transform;
}

/*
 * Die Fläche über dem Foto. Die Vorlage nimmt Schwarz mit 20 Prozent; auf
 * unserem warmen Foto würde das die Farbe herausziehen, deshalb ist es unser
 * Dunkelbraun. Es ist ein echter Block, damit die Farbe im Editor änderbar
 * bleibt — die Stärke gehört zum Entwurf und steht deshalb hier.
 *
 * SIE STEHT SEIT DEM 11.09.2026 AUF NULL, und das ist kein Versehen.
 *
 * Die 0,42 waren für die frühere Aufnahme gerechnet — einen hellen Wohnraum
 * mit Sessel, auf dem der Absatz ohne Schleier auf 4,3 zu 1 fiel. Die jetzige
 * Aufnahme ist eine Abendszene und an beiden Textstellen fast schwarz:
 * mittlere Leuchtdichte 0,008 unter dem Absatz und 0,014 unter dem Riesenwort.
 * Blockweise zu acht Bildpunkten gemessen, Kalkweiß darauf, jeweils das
 * Fünf-Prozent-Quantil:
 *
 *                        ohne Schleier     mit 0,42        nötig
 *   Absatz                 12,32 : 1       12,27 : 1        4,5
 *   Riesenwort              8,40 : 1        9,89 : 1        3,0
 *
 * Der Schleier kauft hier also nichts mehr — er legt nur die warme Aufnahme
 * flach, genau wie die ganzflächige Fläche im Abschnitt „Haidhausen". Siehe
 * dort die Regel: nachmessen, wo das Bild wirklich zu hell ist.
 *
 * Der Block bleibt trotzdem stehen. Er ist das Werkzeug für den Tag, an dem
 * hier eine hellere Aufnahme liegt — dann ist es diese eine Zahl.
 */
.ld-lage__schleier {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

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

.ld-lage__rahmen {
	position: absolute;
	inset: 0;
	z-index: 2;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr auto;
	align-items: start;
	padding-block: 6.22vw;
	padding-inline: 4.56vw;
}

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

/*
 * Seitenverhältnis 1,43 zu 1 und Radius 1,04vw — beides in der Vorlage
 * gemessen. Zwei Aufnahmen liegen übereinander und wechseln sich ab; das
 * Skript schaltet dafür die Klasse is-zweite.
 */
.ld-lage__kachel {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	width: 30.3vw;
	aspect-ratio: 1.43 / 1;
	border-radius: 1.04vw;
	overflow: clip;
	/*
	 * Ein Grund unter der Kachel, so wie bei der Filmkachel in „Haidhausen".
	 * Solange ein Bild darin lag, war er überflüssig. Ein Film, der nicht lädt,
	 * malt dagegen gar nichts — und dann klaffte hier ein Loch im Foto statt
	 * einer ruhigen Fläche.
	 */
	background-color: var(--wp--preset--color--contrast);
	transform: scale(var(--ld-lage-kachel-zoom, 1));
	will-change: transform, clip-path;
}

.ld-lage.is-bereit .ld-lage__kachel {
	clip-path: inset(0 var(--ld-lage-kachel-vorhang, 100%) 0 0);
}

/*
 * Dasselbe eine Ebene tiefer: Der Rahmen der Kachel steht und scrollt ganz
 * normal mit; das Bild darin hängt zurück. Man schaut wie durch ein Fenster
 * auf etwas, das langsamer vorbeizieht.
 *
 * Der Bildkasten wächst dabei in beide Richtungen — die zusätzliche Breite ist
 * die zusätzliche Höhe mal 1,43, dem Seitenverhältnis der Kachel. Nur höher
 * zu machen hätte den Ausschnitt verändert: Bei gleichbleibender Breite und
 * mehr Höhe schneidet „cover" seitlich stärker an, und das Haus stünde
 * plötzlich viel enger im Bild. Auch die Vorlage nimmt deshalb ein Medium,
 * das in beide Richtungen größer ist als sein Rahmen.
 */
.ld-lage__clip {
	position: absolute;
	inset-block-start: calc(-1 * var(--ld-lage-kachel-weg));
	inset-inline-start: calc(-0.715 * var(--ld-lage-kachel-weg));
	height: calc(100% + var(--ld-lage-kachel-weg));
	width: calc(100% + 1.43 * var(--ld-lage-kachel-weg));
	margin: 0;
	translate: 0 calc(var(--ld-lage-p, 0) * var(--ld-lage-kachel-weg));
	will-change: translate;
}

/*
 * Ein Film hängt nicht zurück — und das ist keine Sparsamkeit, sondern
 * Rechnung.
 *
 * Damit der Inhalt der Kachel beim Scrollen zurückhängen kann, muss er größer
 * sein als sein Fenster: einen ganzen Weg höher und, damit der Ausschnitt
 * bleibt, das 1,43-fache davon breiter. Der Browser rechnet „cover" dann auf
 * diesen größeren Kasten — und vom Bild ist im Fenster entsprechend weniger zu
 * sehen.
 *
 * Bei 1512 Fensterbreite nachgemessen, Fenster 504 × 352:
 *
 *                              mit Nachlauf      ohne
 *   Medienkasten                701 × 490      504 × 352
 *   Film gerendert              872 × 490      626 × 352
 *   davon sichtbar, Breite          58 %          80 %
 *   davon sichtbar, Höhe            72 %         100 %
 *   davon sichtbar, Fläche          42 %          80 %
 *
 * Bei einem Standbild ist der Nachlauf den Preis wert — man schaut wie durch
 * ein Fenster auf etwas, das langsamer vorbeizieht, und das Bild selbst tut
 * sonst nichts. **Ein Film bewegt sich ohnehin.** Er bezahlt denselben Griff
 * mit der Hälfte seines Bildes, und das ist genau verkehrt herum.
 *
 * Dieselbe Überlegung wie beim Heranfahren weiter unten: Was als Ersatz für
 * fehlende Bewegung gebaut wurde, gehört weg, sobald echte Bewegung da ist.
 *
 * Die 80 Prozent sind das Maximum für dieses Fenster — die restlichen 20
 * kostet das Format, 16 : 9 in 1,43 : 1. Wer sie auch noch haben will, muss
 * das Fenster ändern, und das ist ein Maß aus der Vorlage.
 */
.ld-lage__kachel:has( video ) {
	--ld-lage-kachel-weg: 0px;
}

.ld-lage__clip :is( img, video ) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Solange die echten Filme fehlen, stehen hier zwei Aufnahmen. Damit die
 * Kachel lebt, fährt jede langsam heran, und sie lösen einander ab.
 *
 * Der Wechsel ist ein Wisch von unten nach oben, so wie er in der Vorlage im
 * Film geschnitten ist: Die kommende Aufnahme wird von einer Kante freigegeben,
 * die von unten nach oben läuft. Beide Bilder bleiben dabei an ihrem Platz —
 * es wandert nur die Kante.
 *
 * Die kommende Aufnahme legt sich dafür nach oben und läuft ein; die
 * abgelöste bleibt darunter einfach stehen und wird verdeckt. Beim nächsten
 * Mal tauschen die beiden die Rollen, deshalb läuft der Wisch immer in
 * dieselbe Richtung.
 *
 * Liefert ihr später einen fertig geschnittenen Film, genügt es, die zweite
 * Aufnahme aus dem Pattern zu nehmen — dann fällt der Wechsel von selbst weg.
 */
/*
 * Beide Aufnahmen sind grundsätzlich ganz da; welche man sieht, entscheidet
 * allein die Stapelung. Das ist der Kern: Die abgelöste bleibt darunter stehen,
 * bis die neue über sie hinweggelaufen ist. Wäre ihr Ruhezustand „unsichtbar",
 * stünde die Kachel im Moment des Wechsels kurz leer — und genau das war sie.
 */
.ld-lage__clip--1 {
	z-index: 1;
}

.ld-lage__clip--2 {
	z-index: 0;
}

/*
 * Die Kante braucht zwei Sekunden für die Höhe der Kachel. Mit 1,1 und auch
 * mit 1,5 wirkte der Wechsel noch gehetzt — er soll ruhig ablaufen und nicht
 * überraschen.
 */
.ld-lage.is-bereit .ld-lage__clip.is-wischt {
	z-index: 2;
	animation: ld-lage-wisch 2s cubic-bezier(0.645, 0.045, 0.355, 1) both;
}

/*
 * Die einlaufende Aufnahme schiebt sich zugleich ein Stück mit nach oben —
 * sie kommt nicht nur zum Vorschein, sie kommt in Bewegung an. Das macht den
 * Wechsel lebendig statt bloß sauber.
 *
 * Der Nachhang-Anteil steht in beiden Bildern der Bewegung, sonst risse die
 * Aufnahme im Moment des Wischs aus ihrer Parallaxe heraus und spränge.
 */
.ld-lage {
	--ld-lage-schub: 8%;
}

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

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

/*
 * Das langsame Heranfahren gilt nur für Standbilder — es war die
 * Ersatzbewegung, solange die Filme fehlten („Damit die Kachel lebt, fährt
 * jede langsam heran"). Seit dem 11.09.2026 liegen echte Filme in der Kachel,
 * und die bringen ihre Kamerafahrt selbst mit. Beides übereinander hieße zwei
 * Bewegungen gegeneinander, und der Zoom zöge die Aufnahme zusätzlich weich.
 *
 * Die Regel bleibt trotzdem stehen: Wer ein Bild statt eines Films in die
 * Kachel legt, bekommt die Ersatzbewegung von selbst wieder.
 */
.ld-lage.is-bereit .ld-lage__clip img {
	animation: ld-lage-fahrt 14s ease-in-out infinite alternate;
}

.ld-lage.is-bereit .ld-lage__clip--2 img {
	animation-direction: alternate-reverse;
}

@keyframes ld-lage-fahrt {
	from {
		transform: scale(1.04) translate3d(-1%, 0, 0);
	}

	to {
		transform: scale(1.1) translate3d(1%, -1%, 0);
	}
}

/* ------------------------------------------------------------------- Text */

/*
 * Der Absatz steht rechts oben, genau so breit wie die Kachel, und endet
 * bündig mit dem Wort darunter. Grad, Zeilenabstand und Farbe in der Vorlage
 * gemessen: 12,55 Pixel, Zeilenabstand 1,2, sandfarben.
 */
.ld-lage__absatz {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	margin: 0;
	width: 30.3vw;
	max-width: none;
	font-size: clamp(0.72rem, 0.83vw, 0.95rem);
	line-height: 1.2;
	letter-spacing: normal;
	text-wrap: pretty;
}

/*
 * Das Wort unten rechts. Die Vorlage setzt 125,5 Pixel bei 1512 Fensterbreite,
 * Versalien, Zeilenabstand 1 und die rechte Kante bündig mit dem Absatz.
 */
.ld-lage__wort {
	grid-column: 1 / -1;
	grid-row: 3;
	justify-self: end;
	margin: 0;
	font-size: clamp(2.75rem, 8.3vw, 10rem);
	/* Regular — siehe die große Aussage in idee.css: Light gibt es nicht. */
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-transform: uppercase;
	text-align: end;
	max-width: none;
}

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

/*
 * Alle drei Bewegungen der Vorlage, dort aus dem Quelltext gelesen: Der
 * Abschnitt wird in 1,7 Sekunden aufgedeckt, das Foto geht dabei von 110 auf
 * 100 Prozent zurück, und die Kachel macht beides noch einmal für sich in 1,2
 * Sekunden. Die Kurve ist power2.inOut — sanft an, sanft ab.
 */
.ld-lage.is-bereit {
	--ld-lage-vorhang: 100%;
	--ld-lage-zoom: 1.1;
	--ld-lage-kachel-vorhang: 100%;
	--ld-lage-kachel-zoom: 1.1;
}

.ld-lage.is-bereit .ld-lage__buehne,
.ld-lage.is-bereit .ld-lage__grund img {
	transition: clip-path 1.7s cubic-bezier(0.645, 0.045, 0.355, 1),
		transform 1.7s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/*
 * Die Kachel wartet, bis der Vorhang durch ist, und wischt erst danach herein.
 * Deshalb die Verzögerung von 1,7 Sekunden — genau die Dauer des Vorhangs.
 * Ohne sie hätte der Vorhang die Kachel schon nach einem Drittel seines Wegs
 * überquert und man sähe sie halbfertig.
 */
.ld-lage.is-bereit .ld-lage__kachel {
	transition: clip-path 0.9s cubic-bezier(0.645, 0.045, 0.355, 1) 1.7s,
		transform 0.9s cubic-bezier(0.645, 0.045, 0.355, 1) 1.7s;
}

/*
 * Ein Wimpernschlag zum Zurücksetzen, bevor der Auftritt von vorn beginnt —
 * dieselbe Stelle wie im Abschnitt „Architektur". Die Kachel wartet 1,7
 * Sekunden, bevor sie sich bewegt; ohne das Abschalten käme sie beim
 * Zurücksetzen nie geschlossen an und stünde beim Neuaufbau schon da.
 */
.ld-lage.is-zurueck .ld-lage__buehne,
.ld-lage.is-zurueck .ld-lage__kachel,
.ld-lage.is-zurueck .ld-lage__grund img {
	transition: none;
}

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

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

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

/*
 * Nebeneinander wird auf dem Handy zu eng: Die Kachel nähme zwei Drittel der
 * Breite und der Absatz daneben bliebe ein Streifen. Deshalb untereinander —
 * Kachel, Text, Wort —, so wie es die Vorlage auf schmalen Geräten auch macht.
 */
/*
 * **Auf dem Telefon nach Arbors `#Location`**, bei 375 gemessen (27.10.2026).
 * Ihr Grundmaß ist 15,375 Bildpunkte, unseres 16 — umgerechnet.
 *
 * |               | Telefon (375)                                        |
 * |---------------|------------------------------------------------------|
 * | Abschnitt     | ein Bildschirm                                       |
 * | Kachel        | drei Viertel breit, **rechts**, Oberkante 77, Radius 19,2 |
 * | Absatz        | drei Viertel breit, links, 89 unter der Kachel, 15,4 |
 * | Riesenwort    | 46,1 Versalien, unten links, 38 über der Kante       |
 * | Seitenrand    | 23                                                   |
 */
@media (max-width: 767px) {
	.ld-lage__rahmen {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 1fr auto;
		padding-block: 4.8rem 2.4rem;
		padding-inline: 1.4375rem;
		gap: 0;
	}

	.ld-lage__kachel {
		grid-column: 1;
		grid-row: 1;
		justify-self: end;
		width: 75%;
		/*
		 * Arbor rundet mit 1,25 Grundmaß, also 19,2 bei 375. Unsere 1,04 vw
		 * treffen das am Schreibtisch, schrumpfen auf dem Telefon aber auf
		 * 3,9 — ihr Grundmaß hört dort auf, mit der Breite zu fallen.
		 */
		border-radius: 1.2rem;
	}

	.ld-lage__absatz {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
		width: 75%;
		margin-block-start: 5.55rem;
		font-size: 0.96rem;
	}

	.ld-lage__wort {
		grid-column: 1;
		grid-row: 4;
		justify-self: start;
		text-align: start;
		font-size: 2.88rem;
	}
}

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

/*
 * Kein Vorhang, kein Heranfahren, kein Wechsel: Der Abschnitt steht sofort
 * vollständig da, mit der ersten Aufnahme in der Kachel. Ein vollwertiges
 * Standbild, nicht bloß abgeschaltete Bewegung.
 */
@media (prefers-reduced-motion: reduce) {
	.ld-lage.is-bereit .ld-lage__buehne,
	.ld-lage.is-bereit .ld-lage__kachel {
		clip-path: none;
		transition: none;
	}

	.ld-lage.is-bereit .ld-lage__grund img,
	.ld-lage.is-bereit .ld-lage__kachel {
		transform: none;
		transition: none;
	}

	.ld-lage.is-bereit .ld-lage__clip img {
		animation: none;
	}

	/*
	 * Die Filme starten ohnehin nicht — das Skript steigt vorher aus, und im
	 * Markup steht kein „autoplay". Sichtbar ist dann das erste Bild, und das
	 * ist die vollwertige Fassung dieses Abschnitts.
	 */

	.ld-lage__grund,
	.ld-lage__clip {
		translate: none;
	}

	.ld-lage.is-bereit .ld-lage__clip--2 {
		display: none;
	}

	.ld-lage.is-bereit .ld-lage__clip.is-wischt {
		animation: none;
	}
}