/*
 * Die Galerie unter der Wohnungsseite
 * ===================================
 *
 * Nachgebaut nach dem Galerie-Abschnitt einer Residence bei belgradearbor.rs.
 * Acht Bilder in eigenen Formen; beim Durchscrollen wandern sieben davon nach
 * außen, die achte wächst auf den ganzen Bildschirm, danach blättert man mit
 * zwei Pfeilen durch alle acht.
 *
 * **Alles hängt an zwei Zahlen:** `--ld-gal-w` sagt, wie weit die Hauptkachel
 * gewachsen ist, `--ld-gal-m`, wie weit ihre Form aufgelöst ist. Das Skript
 * setzt sie, das Aussehen macht ausschließlich dieses Stylesheet — dieselbe
 * Bauart wie in der Auftakt-Sequenz.
 *
 * **In der Vorlage nachgemessen**, bei 2056 auf 1147 und bei 375 auf 812:
 *
 * | | Schreibtisch | Telefon |
 * |---|---|---|
 * | Abschnittshöhe | 180 px Überschrift + 600 svh | dieselbe |
 * | Bühne | bildschirmfüllend, klebend | dieselbe |
 * | Mosaik | über die ganze Fläche gestreut | kompakt, 329 × 513, mittig |
 * | Masken | acht eigene Dateien | **acht andere eigene Dateien** |
 * | Pfeile | 64 × 64, 96 vom Rand | dieselben |
 *
 * **Die Formen kommen aus `werkzeuge/galerie-formen.py`.** Lage und Maske je
 * Kachel stecken in der Modifier-Klasse, nicht in einem Inline-Stil — dieselbe
 * Regel wie bei den Orten im Abschnitt „Umgebung".
 */

.ld-galerie {
	background-color: var( --wp--preset--color--base );

	/*
	 * **Das Mosaik hat eine feste Größe und wächst nicht mit dem Fenster.**
	 * In der Vorlage nachgemessen: Bei 1440 wie bei 2056 Fensterbreite ist es
	 * rund 1299 auf 866 Bildpunkte groß — es zentriert sich nur. Stünde es in
	 * Prozent der Bühne, zöge es sich auf einem breiten Bildschirm über die
	 * ganze Fläche und wirkte grob; genau das war der erste Versuch.
	 *
	 * Die Lage jeder Kachel ist deshalb ein **einheitenloser Anteil** dieses
	 * Kastens, kein Prozentwert der Bühne.
	 */
	--ld-gal-b: min( 100vw, 1440px );
	--ld-gal-h: min( 100svh, 900px );
	--ld-gal-l: calc( ( 100% - var( --ld-gal-b ) ) / 2 );
	--ld-gal-t: calc( ( 100% - var( --ld-gal-h ) ) / 2 );

	/*
	 * **Zwei Bewegungen nacheinander, nicht gleichzeitig — daran hing alles.**
	 *
	 * `--ld-gal-w` treibt das Wachsen, `--ld-gal-m` das Auflösen der Form. In
	 * der Vorlage nachgemessen: Das Wachsen läuft über die **erste Hälfte** des
	 * Schachts und ist genau in der Mitte fertig, das Auflösen über die zweite.
	 *
	 * **Laufen beide zugleich, sieht man die Kante des Bildes.** Genau das war
	 * der erste Versuch: Die Maske löste sich auf, während das Element noch
	 * kleiner als der Bildschirm war — übrig blieb ein Rechteck mit sichtbarem
	 * Rand oben und unten, statt einer Form, die aus dem Bild hinauswächst.
	 *
	 * **Beide Zahlen setzt das Skript**, und zwar fertig verrechnet. Sie aus
	 * einer einzigen rohen Zahl im CSS abzuleiten ging, solange beide Rampen
	 * geradlinig liefen; die Maske der Vorlage läuft aber weich an und aus, und
	 * eine solche Kurve kann CSS nicht rechnen. Die Rückfallwerte hier gelten
	 * nur für den Augenblick vor dem ersten Bild.
	 */
	--ld-gal-w: 0;
	--ld-gal-m: 0;

	/* Die Kurve des Wipe, in der Vorlage gemessen: 1,3 s, symmetrisch. */
	--ld-gal-wipe: cubic-bezier( 0.76, 0, 0.24, 1 );
}

/* --------------------------------------------------------- Die Überschrift */

/*
 * In der Vorlage gemessen, bei 2056 auf 1147: **100 Bildpunkte Grad — also
 * 4,86 vw —, Editorial Old in Light, Versalien, keine Sperrung, Zeilenhöhe
 * 1,0.** Sie steht am linken Seitenrand und 80 Bildpunkte (3,89 vw) unter der
 * Abschnittskante. **Sie klebt nicht**, sondern scrollt mit weg, während die
 * Bühne darunter stehen bleibt.
 *
 * **Genau dieser Block ist der Vorlauf.** Solange die Überschrift nach oben
 * wegläuft, steht das Mosaik still — erst danach beginnt das Wachsen. Ohne
 * ihn setzt der Zoom im selben Augenblick ein, in dem der Abschnitt auftaucht,
 * und das war der Unterschied, den man neben der Vorlage sofort sah.
 *
 * Der Schnitt ist Light (300), wie in der Vorlage (bis 28.10.2026 Ultralight
 * aus der Probeversion).
 *
 * **Die Farbe weicht bewusst ab.** Dort steht die Zeile in ihrem Goldton auf
 * Sand, nachgerechnet 3,1 zu 1. Hier steht sie in Card Room Green tief auf
 * Kalkweiß (5,5) — dieselbe Farbe wie „Weitere Wohnungen“ unmittelbar
 * darunter, sodass die beiden großen Überschriften der Seite als Paar gelesen
 * werden.
 */
.ld-galerie__kopf {
	padding-block-start: 3.89vw;
	padding-inline: 7.39vw;
}

.ld-galerie__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 „GALERIE“ abgestimmt — mit dem allgemeinen
	 * Wert (`--ld-light-lauf`) lag die Breite einige Zehntelprozent daneben. */
	letter-spacing: -0.0225em;
	text-transform: uppercase;
	color: var( --wp--preset--color--primary-deep );
}

/*
 * **Ohne Skript kein Scrollschacht.** Die Höhe kommt erst mit `is-bereit`;
 * sonst stünde ein fünf Bildschirme hoher leerer Bereich in der Seite. Dieselbe
 * Vorsichtsmaßnahme wie beim Auftakt.
 */
.ld-galerie__schacht {
	position: relative;
	height: 100svh;
}

.ld-galerie__schacht.is-bereit {
	/*
	 * **600 Bildschirmhöhen, wie in der Vorlage.** Davon ist eine die klebende
	 * Bühne selbst; gescrollt wird also über 500. Erste Hälfte wachsen, zweite
	 * Hälfte Form auflösen — und weil die Maske weich ausläuft, steht das
	 * randlose Vollbild am Ende von allein rund anderthalb Bildschirme lang da.
	 * Genau das ist das Fenster für die Pfeile.
	 */
	height: 600svh;
}

.ld-galerie__buehne {
	position: sticky;
	inset-block-start: 0;
	height: 100svh;
	overflow: clip;
	/*
	 * Abgegrenzt, damit die Masken der Kacheln sich nicht mit dem mischen,
	 * was darunter liegt.
	 */
	isolation: isolate;
}

/* ------------------------------------------------------------ Die Kacheln */

.ld-galerie__kachel {
	position: absolute;
	inset-inline-start: calc( var( --ld-gal-l ) + var( --ld-k-x ) * var( --ld-gal-b ) );
	inset-block-start: calc( var( --ld-gal-t ) + var( --ld-k-y ) * var( --ld-gal-h ) );
	width: calc( var( --ld-k-b ) * var( --ld-gal-b ) );
	height: calc( var( --ld-k-h ) * var( --ld-gal-h ) );
	margin: 0;
	mask-size: 100% 100%;
	mask-position: center;
	mask-repeat: no-repeat;
	/*
	 * **Die sieben äußeren fliegen auseinander.** Richtung ist die Linie von
	 * der Bühnenmitte zur Kachelmitte, als Einheitsvektor in der
	 * Modifier-Klasse. Der Weg ist großzügig — sie sollen am Ende wirklich
	 * draußen sein, nicht knapp am Rand kleben.
	 */
	translate:
		calc( var( --ld-k-dx ) * var( --ld-gal-w, 0 ) * 85vw )
		calc( var( --ld-k-dy ) * var( --ld-gal-w, 0 ) * 85svh );
}

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

/*
 * **Die Hauptkachel fliegt nicht, sie wächst — und zwar über den Bildschirm
 * hinaus.**
 *
 * **Die Maske bleibt dabei unverändert bei 100 Prozent.** Das ist der Kern:
 * Weil die Maske immer genau so groß ist wie das Element, bleibt die Form
 * erhalten, während das Element wächst — man sieht bis zuletzt die schräge
 * Silhouette und niemals die Kante des Bildes. Erst ganz am Ende sind die
 * Ecken der Form aus dem Bild hinausgewachsen, und übrig bleibt ein randloses
 * Vollbild.
 *
 * **Der erste Versuch machte es umgekehrt** und war falsch: Dort wuchs die
 * Maske von 100 auf 400 Prozent, während das Element nur bis genau zum
 * Bildschirmrand wuchs. Die Form verschwand dadurch viel zu früh, und weil das
 * Element nur bildschirmgroß war, sah man oben und unten seine geraden Kanten —
 * das Bild wirkte abgeschnitten statt bildschirmfüllend.
 *
 * **165 Prozent** ist das Maß, bei dem die Form sicher aus dem Bild ist: Der
 * Umriss füllt seinen Kasten nicht ganz aus, ein Element in Bildschirmgröße
 * ließe an den schrägen Ecken den Grund durchscheinen.
 *
 * Gewachsen wird über die Mitte — Lage und Größe laufen gemeinsam, und
 * `translate` hält den Mittelpunkt fest. Über `scale` ginge es nicht: Das
 * Bild würde in die Breite gezogen; so bleibt es durch `object-fit: cover`
 * unverzerrt.
 */
.ld-galerie__kachel--haupt {
	--ld-gal-ziel: 118%;
	z-index: 2;
	translate: -50% -50%;
	inset-inline-start: calc(
		( var( --ld-gal-l ) + ( var( --ld-k-x ) + var( --ld-k-b ) / 2 ) * var( --ld-gal-b ) )
		* ( 1 - var( --ld-gal-w ) )
		+ 50% * var( --ld-gal-w )
	);
	inset-block-start: calc(
		( var( --ld-gal-t ) + ( var( --ld-k-y ) + var( --ld-k-h ) / 2 ) * var( --ld-gal-h ) )
		* ( 1 - var( --ld-gal-w ) )
		+ 50% * var( --ld-gal-w )
	);
	width: calc(
		var( --ld-k-b ) * var( --ld-gal-b )
		+ ( var( --ld-gal-ziel ) - var( --ld-k-b ) * var( --ld-gal-b ) ) * var( --ld-gal-w )
	);
	height: calc(
		var( --ld-k-h ) * var( --ld-gal-h )
		+ ( var( --ld-gal-ziel ) - var( --ld-k-h ) * var( --ld-gal-h ) ) * var( --ld-gal-w )
	);
	/* Zum Schluss wandern die Ecken der Form aus dem Bild. */
	/* In der Vorlage gemessen: von 100 auf 400 Prozent. */
	mask-size:
		calc( 100% + var( --ld-gal-m ) * 300% )
		calc( 100% + var( --ld-gal-m ) * 300% );
}

/* ---------------------------------------------------- Die Bilderreihe darin */

/*
 * **Die acht Bilder liegen übereinander, nicht nebeneinander.** Das ist der
 * Unterschied zum ersten Versuch, und er ist in der Vorlage gemessen: Dort
 * schiebt sich beim Blättern nicht eine Reihe weiter, sondern das **Fenster
 * des neuen Bildes** von rechts über das alte. Das alte bewegt sich dabei gar
 * nicht — es wird nur zugedeckt.
 *
 * **Das Bild im Fenster läuft gegenläufig, aber nur den halben Weg.**
 * Nachgemessen: Das Fenster fährt von +2056 auf 0, das Bild darin von −1028
 * auf 0. Dadurch fliegt die Aufnahme nicht herein, sondern driftet. Läuft sie
 * mit ihrem Fenster mit, wirkt derselbe Griff wie ein Karussell — genau das
 * war unser erster Stand.
 *
 * Dauer 1,3 Sekunden, symmetrisch weich an- und auslaufend; auch das dort
 * gemessen. Welches Bild über welchem liegt, setzt das Skript.
 */
.ld-galerie__reihe,
.ld-galerie__bild,
.ld-galerie__lauf {
	position: absolute;
	inset: 0;
	display: block;
}

.ld-galerie__bild {
	overflow: clip;
	translate: var( --ld-b-x, 100% );
	transition: translate 1.3s var( --ld-gal-wipe );
}

.ld-galerie__lauf {
	translate: calc( var( --ld-b-x, 100% ) * -0.5 );
	transition: translate 1.3s var( --ld-gal-wipe );
}

/*
 * **Ein Bild, das schon einmal dran war, muss zurückgestellt werden**, bevor
 * es erneut hereinfahren kann — und zwar ohne Übergang, sonst sähe man es
 * hinausfahren. Das Skript setzt diese Klasse für genau ein Einzelbild.
 */
.ld-galerie__bild.is-sprung,
.ld-galerie__bild.is-sprung .ld-galerie__lauf {
	transition: none;
}

/*
 * **Unter dem Galerie-Auftakt (/galerie/) entfällt die Überschrift** — der
 * Auftakt ist sie (Kunde, 14.10.2026). Der Kopf bleibt als Raum stehen: Er ist
 * der Vorlauf, auf dem das Mosaik stillsteht, bevor es wächst.
 */
.ld-gauftakt ~ .ld-galerie .ld-galerie__titel {
	visibility: hidden;
}

/* ------------------------------------------ Wohnungsnummer und Hinweis */

/*
 * **Die Wohnungsnummer unten links**, seit dem 14.10.2026 — vom Kunden so
 * gewünscht, im Stil der großen Nummer in der Spalte des Finders: Antiqua,
 * Versalien, hell auf dem Bild. Sie steht im Fenster des Bildes und fährt mit
 * ihm herein; eingerückt wie der Pfeil darüber (4,67 vw).
 *
 * **Zwei Schatten, kein Kasten** — der enge für die Kante, der weite für den
 * Grund; derselbe Griff wie bei der Marke über dem Luftbild.
 *
 * Sie erscheint erst, wenn das Mosaik ganz aufgegangen ist (`is-offen`), so wie
 * die Pfeile. Für Vorlesegeräte steht die Nummer im Alternativtext des Bildes.
 *
 * **Der Überstand der Kachel wird mitgerechnet.** Im Vollbild ist die
 * Hauptkachel 118 Prozent der Bühne (`--ld-gal-ziel`) und ragt an jeder Seite
 * um 9 Prozent über den Bildschirm hinaus. Die Nummer steht im Fenster des
 * Bildes, also in der Kachel — ohne diesen Zuschlag lag sie außerhalb.
 */
.ld-galerie {
	--ld-gal-ueber-x: 9vw;
	--ld-gal-ueber-y: 9svh;
}

.ld-galerie__einheit {
	position: absolute;
	z-index: 2;
	inset-inline-start: calc( var( --ld-gal-ueber-x ) + 4.67vw );
	inset-block-end: calc( var( --ld-gal-ueber-y ) + 4.67vw );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 4.86vw;
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	color: var( --wp--preset--color--base );
	text-shadow:
		0 1px 2px color-mix( in srgb, var( --wp--preset--color--contrast ) 45%, transparent ),
		0 0 2.2vw color-mix( in srgb, var( --wp--preset--color--contrast ) 45%, transparent );
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.45s var( --ld-ease );
}

.ld-galerie.is-offen .ld-galerie__einheit {
	opacity: 1;
}

/*
 * **Eine Vignette in der Ecke der Nummer**, nicht über dem ganzen Bild —
 * dieselbe Regel wie hinter dem Riesenwort in „Die zwei Wohnwelten“. Die
 * Renderings sind unten oft hell (Eichenboden, Teppiche); die Schatten an der
 * Schrift allein trugen dort nicht. Sie liegt im Fenster des Bildes und fährt
 * mit ihm herein, und sie kommt erst mit dem Vollbild — im Mosaik bliebe sonst
 * eine dunkle Ecke in jeder Form.
 */
.ld-galerie__bild::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(
		55% 50% at calc( var( --ld-gal-ueber-x ) * 0.8 ) calc( 100% - var( --ld-gal-ueber-y ) * 0.8 ),
		color-mix( in srgb, var( --wp--preset--color--contrast ) 82%, transparent ) 0%,
		color-mix( in srgb, var( --wp--preset--color--contrast ) 62%, transparent ) 35%,
		color-mix( in srgb, var( --wp--preset--color--contrast ) 22%, transparent ) 70%,
		transparent 100%
	);
	opacity: 0;
	transition: opacity 0.45s var( --ld-ease );
}

.ld-galerie.is-offen .ld-galerie__bild::after {
	opacity: 1;
}

/*
 * **Der Hinweis zur Unverbindlichkeit**, unten rechts auf der Höhe der Nummer.
 * Die Faktenbasis verlangt ihn für jedes Rendering; der Kunde hat ihn so
 * bestätigt.
 */
.ld-galerie__hinweis {
	position: absolute;
	z-index: 3;
	inset-inline-end: 4.67vw;
	inset-block-end: 4.67vw;
	margin: 0;
	font-family: var( --wp--preset--font-family--body );
	font-size: clamp( 0.72rem, 0.73vw, 0.85rem );
	letter-spacing: 0.02em;
	color: var( --wp--preset--color--base );
	text-shadow: 0 1px 2px color-mix( in srgb, var( --wp--preset--color--contrast ) 60%, transparent );
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.45s var( --ld-ease );
}

.ld-galerie.is-offen .ld-galerie__hinweis {
	opacity: 1;
}

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

/*
 * In der Vorlage gemessen: 64 auf 64 bei 2056 Fensterbreite, also 3,11 vw,
 * und 96 von jeder Bildschirmkante — 4,67 vw. Haarlinie und Füllung wie an
 * den Pfeilen im Abschnitt „Die zwei Wohnwelten".
 *
 * Angelegt werden sie vom Skript: Sie tragen keinen Inhalt, den der Kunde
 * pflegen müsste, und ohne Skript öffnet sich das Mosaik ohnehin nicht.
 */
.ld-galerie__pfeil {
	position: absolute;
	z-index: 3;
	inset-block-start: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 3.11vw;
	min-width: 2.75rem;
	aspect-ratio: 1;
	padding: 0;
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--base ) 70%, transparent );
	border-radius: 999px;
	background: color-mix( in srgb, var( --wp--preset--color--contrast ) 40%, transparent );
	color: var( --wp--preset--color--base );
	transform: translateY( -50% );
	opacity: 0;
	pointer-events: none;
	cursor: pointer;
	transition: opacity 0.45s var( --ld-ease ), background-color 0.4s ease;
}

.ld-galerie.is-offen .ld-galerie__pfeil {
	opacity: 1;
	pointer-events: auto;
}

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

.ld-galerie__pfeil--zurueck {
	inset-inline-start: 4.67vw;
}

.ld-galerie__pfeil--vor {
	inset-inline-end: 4.67vw;
}

.ld-galerie__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-galerie__pfeil--zurueck::before {
	transform: rotate( 180deg );
}

/* -------------------------------------------- Lage und Form je Kachel */

.ld-galerie__kachel--1 {
	--ld-k-x: 0.04931;
	--ld-k-y: 0.01889;
	--ld-k-b: 0.23611;
	--ld-k-h: 0.66556;
	--ld-k-dx: -0.913;
	--ld-k-dy: -0.407;
	mask-image: url( "../../images/formen/galerie/1.svg" );
}

.ld-galerie__kachel--2 {
	--ld-k-x: 0.18750;
	--ld-k-y: 0.01889;
	--ld-k-b: 0.22778;
	--ld-k-h: 0.26667;
	--ld-k-dx: -0.496;
	--ld-k-dy: -0.868;
	mask-image: url( "../../images/formen/galerie/2.svg" );
}

.ld-galerie__kachel--3 {
	--ld-k-x: 0.63750;
	--ld-k-y: 0.01889;
	--ld-k-b: 0.31389;
	--ld-k-h: 0.44889;
	--ld-k-dx: 0.754;
	--ld-k-dy: -0.657;
	mask-image: url( "../../images/formen/galerie/3.svg" );
}

.ld-galerie__kachel--4 {
	--ld-k-x: 0.67361;
	--ld-k-y: 0.40333;
	--ld-k-b: 0.27778;
	--ld-k-h: 0.57667;
	--ld-k-dx: 0.852;
	--ld-k-dy: 0.523;
	mask-image: url( "../../images/formen/galerie/4.svg" );
}

.ld-galerie__kachel--5 {
	--ld-k-x: 0.42361;
	--ld-k-y: 0.56333;
	--ld-k-b: 0.31944;
	--ld-k-h: 0.41778;
	--ld-k-dx: 0.293;
	--ld-k-dy: 0.956;
	mask-image: url( "../../images/formen/galerie/5.svg" );
}

.ld-galerie__kachel--6 {
	--ld-k-x: 0.24861;
	--ld-k-y: 0.50556;
	--ld-k-b: 0.26389;
	--ld-k-h: 0.43111;
	--ld-k-dx: -0.475;
	--ld-k-dy: 0.880;
	mask-image: url( "../../images/formen/galerie/6.svg" );
}

.ld-galerie__kachel--7 {
	--ld-k-x: 0.04931;
	--ld-k-y: 0.53667;
	--ld-k-b: 0.30000;
	--ld-k-h: 0.44444;
	--ld-k-dx: -0.758;
	--ld-k-dy: 0.652;
	mask-image: url( "../../images/formen/galerie/7.svg" );
}

.ld-galerie__kachel--haupt {
	--ld-k-x: 0.33889;
	--ld-k-y: 0.01889;
	--ld-k-b: 0.28611;
	--ld-k-h: 0.59889;
	--ld-k-dx: -0.099;
	--ld-k-dy: -0.995;
	mask-image: url( "../../images/formen/galerie/haupt.svg" );
}

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

/*
 * **Die Vorlage hat auf dem Telefon acht eigene Masken und eine andere
 * Aufteilung** — kein verkleinertes Abbild des Schreibtischs. Statt der
 * gestreuten Kacheln steht dort ein kompaktes Mosaik von 329 auf 513
 * Bildpunkten mittig im Bild, mit demselben Seitenrand von 23, den auch die
 * Kopfzeilen-Pille hat. Die Kacheln sind breiter und flacher; dieselben Formen
 * dorthin zu quetschen ginge nicht.
 *
 * **Die Mechanik bleibt dieselbe.** Es ändern sich nur Lage, Maße und
 * Maskendatei je Kachel — die Öffnungsbewegung, das Wachsen der Hauptkachel
 * und die Pfeile stehen oben und gelten hier unverändert.
 */

@media ( max-width: 767px ) {

	/*
	 * **Die Überschrift bleibt groß.** In der Vorlage auf dem Telefon
	 * nachgemessen: 50 Bildpunkte bei 375 Breite, also 13,33 vw — nicht die
	 * 4,86 vw des Schreibtischs, die hier nur 18 ergäben und damit kleiner
	 * wären als der Fließtext daneben. Der Seitenrand ist unser üblicher, 6 vw;
	 * dort sind es 23 Bildpunkte, bei uns 22,5.
	 *
	 * Der Deckel bei 3,125 rem hält sie auf einem Tablet bei denselben 50.
	 */
	/*
	 * **Oben 4,8 rem, nicht 6 vw** — in der Vorlage steht die Überschrift
	 * 77 Bildpunkte unter der Abschnittskante (`pt-20`), und das Mosaik
	 * beginnt deshalb erst bei 286. Mit 6 vw stand bei uns alles 54
	 * Bildpunkte höher, und die Überschrift lag beim Ankommen hinter der
	 * Kopfzeilen-Pille.
	 */
	.ld-galerie__kopf {
		padding-block-start: 4.8rem;
		padding-inline: 6vw;
	}

	/*
	 * **Auf der eigenen Seite /galerie/ steht die Galerie ganz oben** — dort
	 * läge die Überschrift hinter der Kopfzeilen-Pille, die auf dem Telefon
	 * die volle Breite einnimmt. Sie rückt deshalb unter die Pille. Auf der
	 * Wohnungsseite ist die Galerie nie das erste Kind und bleibt unberührt.
	 */
	.ld-galerie__einheit {
		inset-inline-start: calc( var( --ld-gal-ueber-x ) + 6vw );
		inset-block-end: calc( var( --ld-gal-ueber-y ) + 6vw );
		font-size: 11vw;
		text-shadow:
			0 1px 2px color-mix( in srgb, var( --wp--preset--color--contrast ) 45%, transparent ),
			0 0 5vw color-mix( in srgb, var( --wp--preset--color--contrast ) 45%, transparent );
	}

	.ld-galerie__hinweis {
		inset-inline-end: 6vw;
		inset-block-end: 6vw;
		max-width: 40vw;
		text-align: end;
		font-size: 0.72rem;
	}

	main > .ld-galerie:first-child .ld-galerie__kopf {
		padding-block-start: calc( var( --ld-pille-fuss ) + 6vw );
	}

	/*
	 * **Eine Spur tiefer als bei Arbor**, vom Kunden so gewünscht: 1,2 rem.
	 * Verschoben wird nur die Zeile selbst, nicht der Kopf — so bleibt das
	 * Mosaik darunter auf Arbors Lage.
	 */
	.ld-galerie__titel {
		position: relative;
		inset-block-start: 1.2rem;
		font-size: min( 13.33vw, 3.125rem );
	}

	/*
	 * Auf dem Telefon ist der Bezugskasten kleiner — gemessen 329 auf 494
	 * Bildpunkte bei 375 auf 812.
	 */
	.ld-galerie {
		--ld-gal-b: min( 100vw, 420px );
		--ld-gal-h: min( 100svh, 880px );
	}

	.ld-galerie__kachel--1 {
		--ld-k-x: 0.32267;
		--ld-k-y: 0.19581;
		--ld-k-b: 0.61600;
		--ld-k-h: 0.15640;
		--ld-k-dx: 0.501;
		--ld-k-dy: -0.866;
		mask-image: url( "../../images/formen/galerie/1-m.svg" );
	}

	.ld-galerie__kachel--2 {
		--ld-k-x: 0.68267;
		--ld-k-y: 0.28202;
		--ld-k-b: 0.25600;
		--ld-k-h: 0.15640;
		--ld-k-dx: 0.912;
		--ld-k-dy: -0.410;
		mask-image: url( "../../images/formen/galerie/2-m.svg" );
	}

	.ld-galerie__kachel--3 {
		--ld-k-x: 0.51733;
		--ld-k-y: 0.58621;
		--ld-k-b: 0.42133;
		--ld-k-h: 0.21798;
		--ld-k-dx: 0.760;
		--ld-k-dy: 0.650;
		mask-image: url( "../../images/formen/galerie/3-m.svg" );
	}

	.ld-galerie__kachel--4 {
		--ld-k-x: 0.06133;
		--ld-k-y: 0.60468;
		--ld-k-b: 0.55467;
		--ld-k-h: 0.19828;
		--ld-k-dx: -0.621;
		--ld-k-dy: 0.784;
		mask-image: url( "../../images/formen/galerie/4-m.svg" );
	}

	.ld-galerie__kachel--5 {
		--ld-k-x: 0.06133;
		--ld-k-y: 0.42980;
		--ld-k-b: 0.40000;
		--ld-k-h: 0.22291;
		--ld-k-dx: -0.985;
		--ld-k-dy: 0.170;
		mask-image: url( "../../images/formen/galerie/5-m.svg" );
	}

	.ld-galerie__kachel--6 {
		--ld-k-x: 0.12267;
		--ld-k-y: 0.32389;
		--ld-k-b: 0.37867;
		--ld-k-h: 0.16995;
		--ld-k-dx: -0.900;
		--ld-k-dy: -0.436;
		mask-image: url( "../../images/formen/galerie/6-m.svg" );
	}

	.ld-galerie__kachel--7 {
		--ld-k-x: 0.06133;
		--ld-k-y: 0.19581;
		--ld-k-b: 0.42133;
		--ld-k-h: 0.21305;
		--ld-k-dx: -0.756;
		--ld-k-dy: -0.655;
		mask-image: url( "../../images/formen/galerie/7-m.svg" );
	}

	/*
	 * **Rechts in der Mitte, nicht links.** In der Vorlage bei 375 gemessen:
	 * 137 / 435 bei 215 × 165, also 0,36533 und — gegen die erste Kachel bei
	 * 286 — 0,37931. Hier stand 0,07733 / 0,48153; die Kachel lag dadurch
	 * links über der fünften, und rechts klaffte eine Lücke im Mosaik.
	 */
	.ld-galerie__kachel--haupt {
		--ld-k-x: 0.36533;
		--ld-k-y: 0.37931;
		--ld-k-b: 0.57333;
		--ld-k-h: 0.20320;
		--ld-k-dx: -0.853;
		--ld-k-dy: 0.522;
		mask-image: url( "../../images/formen/galerie/haupt-m.svg" );
	}

	/* Auf dem Telefon fliegen die Kacheln kürzer — die Bühne ist schmaler. */
	.ld-galerie__kachel {
		translate:
			calc( var( --ld-k-dx ) * var( --ld-gal-w, 0 ) * 110vw )
			calc( var( --ld-k-dy ) * var( --ld-gal-w, 0 ) * 70svh );
	}

	/*
	 * **Hier stand einmal `translate: none`.** Das sollte nur die Flugbewegung
	 * der äußeren Kacheln abschalten — es hat aber auch die Zentrierung der
	 * Hauptkachel aufgehoben, und die stand dadurch auf dem Telefon in der
	 * unteren rechten Ecke statt mittig. Sie braucht dieselbe Verschiebung wie
	 * am Schreibtisch.
	 */
	.ld-galerie__kachel--haupt {
		translate: -50% -50%;
	}
}

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

	/*
	 * Ohne Bewegung bleibt das Mosaik stehen — ein Bildschirm, acht Bilder,
	 * keine Sequenz. Das ist die vollständige Aussage des Abschnitts, nicht
	 * ein Rest davon.
	 */
	.ld-galerie__schacht.is-bereit {
		height: 100svh;
	}

	.ld-galerie__bild,
	.ld-galerie__lauf {
		transition: none;
	}
}