/*
 * Abschnitt: Architektur
 *
 * Nachgebaut nach dem Abschnitt „Your roots" auf belgradearbor.rs. Ein
 * dunkler Bildschirm, darin oben links die Versalien-Zeile, mittig die
 * Riesenüberschrift und unten links Absatz und Schaltfläche. Dazu drei
 * Bildformen: eine hinter der Überschrift, zwei davor.
 *
 * Der Grund ist dunkel, weil die Vorlage es ist: Sie stellt diesen Abschnitt
 * auf ein tiefes Marineblau mit cremefarbenem Text und einer Überschrift in
 * gedämpftem Sandgold. Bei uns sind das Hofgrün tief, Kalkweiß und Salbei.
 * Der Abschnitt stand zwischenzeitlich auf Salbei — das war ein Messfehler.
 *
 * Alle Maße sind in der Vorlage gemessen und auf 1512 Fensterbreite
 * umgerechnet:
 *
 *   Abstand oben und unten     10 rem  = 125 px = 8,30 vw
 *   Überschrift                20 rem  = 251 px = 16,6 vw   (bei uns kleiner,
 *                                                            siehe unten)
 *   Absatz                    3,5 rem  =  44 px = 2,90 vw
 *   Abstand über dem Absatz     5 rem  =  63 px = 4,15 vw
 *   Abstand über dem Knopf   3,75 rem  =  47 px = 3,11 vw
 *   Form hinten             57,5 rem   = 722 px = 47,7 vw   oben 55 %, rechts 10 %
 *   Form Mitte                45 rem   = 565 px = 37,3 vw   oben 30 %, ab der Mitte
 *   Form vorn                 39 rem   = 490 px = 32,4 vw   mittig
 *
 * Die Überschrift der Vorlage heißt „Your roots" — zehn Zeichen mit Leerraum.
 * „Architektur" hat elf ohne, wäre bei 16,6 vw also deutlich breiter als das
 * Fenster. Der Grad ist deshalb so gewählt, dass das Wort die Spalte
 * ausfüllt wie dort, statt die Zahl blind zu übernehmen.
 *
 * Was hier steht, ist Form. Schriftart und Farbe tragen die Blöcke selbst.
 */

.ld-architektur {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100svh;
	padding-block: var(--ld-a-luft);
	overflow: clip;

	--ld-a-luft: clamp(3.5rem, 8.3vw, 10rem);
	--ld-a-spalte: clamp(1.25rem, 3.32vw, 4rem);

	/*
	 * Kicker, Überschrift und Absatz starten zu hoch und wandern über die
	 * Durchfahrt nach unten — dieselbe Machart wie beim Abschied, hier aber
	 * über die ganze Strecke. Maße der Vorlage: 10 rem zu hoch, 15 rem Weg.
	 */
	--ld-a-start: 8.3vw;
	--ld-a-weg: 12.4vw;
}

/*
 * Der Rahmen setzt bewusst kein z-index: Er wäre sonst eine eigene Stapelebene,
 * und die Blöcke darin könnten nicht mehr einzeln vor oder hinter die Bildformen
 * gelegt werden. Genau das braucht es hier aber — die Überschrift gehört hinter
 * die vorderen Formen, die Aussage darunter davor.
 */
.ld-architektur__rahmen {
	position: relative;
	width: 100%;
	max-width: 97.5vw;
	margin-inline: auto;
	padding-inline: var(--ld-a-spalte);
}

/*
 * Die drei Textblöcke hängen beim Scrollen zurück. Das Skript setzt dafür nur
 * --ld-a-p zwischen 0 und 1.
 */
.ld-architektur__kicker,
.ld-architektur__wort,
.ld-architektur__unten {
	translate: 0 calc(-1 * var(--ld-a-start) + var(--ld-a-p, 0.5) * var(--ld-a-weg));
}

/* ------------------------------------------------------------- Textblöcke */

.ld-architektur__kicker {
	position: relative;
	z-index: 1;
	margin-block: 0;
	margin-inline-start: 8.333%;
	font-size: clamp(0.8rem, 1.04vw, 1.15rem);
	letter-spacing: 0.02em;
	line-height: 1.5;
	text-transform: uppercase;
}

/*
 * Die Überschrift steht in einer Zeile und füllt die Spalte. Regular — eine
 * große Überschrift, kein Aussagesatz.
 */
.ld-architektur__wort {
	position: relative;
	z-index: 1;
	margin-block: clamp(1rem, 2.5vw, 3rem) 0;
	/*
	 * Der Grad ist so gewählt, dass „Architektur" die Spalte ausfüllt — nicht
	 * die 16,6 vw der Vorlage, deren Wort kürzer ist. Bei elf Zeichen sind das
	 * 12,6 vw: nachgemessen 1355 von 1374 Pixeln Spaltenbreite. Dass die Formen
	 * die Mitte des Wortes verdecken, gehört dazu; links und rechts muss aber
	 * genug stehen bleiben, sonst verschwindet es ganz.
	 */
	font-size: clamp(2.5rem, 12.6vw, 15rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

/*
 * Jeder Buchstabe fährt von rechts herein, eine Fensterbreite weit, um 0,1
 * Sekunden versetzt und in 1,7 Sekunden — die Werte der Vorlage. Das Skript
 * zerlegt das Wort und gibt jedem Zeichen seine Nummer; wann es an der Reihe
 * ist, rechnet das CSS daraus aus.
 */
.ld-architektur__zeichen {
	display: inline-block;
	white-space: pre;
	transform: translateX(100vw);
	transition: transform 1.7s cubic-bezier(0.45, 0.03, 0.52, 0.96);
	transition-delay: calc(var(--ld-a-nr, 0) * 0.1s);
}

.ld-architektur.is-da .ld-architektur__zeichen {
	transform: translateX(0);
}

/*
 * Die Trennstelle aus dem Block (`­`) wirkt nur auf dem Telefon, siehe
 * dort. Hier bleibt das Wort auf einer Zeile und ohne Strich.
 */
.ld-architektur__trenn {
	display: none;
}

/*
 * Die Aussage läuft über die Bilder, nicht darunter. Sie liegt deshalb über
 * allen drei Formen — anders als die Überschrift, die von den beiden vorderen
 * Formen verdeckt wird und genau davon lebt.
 */
.ld-architektur__unten {
	position: relative;
	z-index: 3;
	display: flex;
	margin-block-start: clamp(1.5rem, 4.15vw, 5rem);
}

.ld-architektur__text {
	width: 41.667%;
	margin-inline-start: 8.333%;
	margin-block: 0;
	font-size: clamp(1.25rem, 2.9vw, 3.5rem);
	/* Light — ein Aussagesatz in Displaygröße. */
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: calc(0.02em + var(--ld-light-lauf));
	text-wrap: pretty;
}

/*
 * Der Abschnitt stand einmal auf Salbei; die Pille brauchte dort eine eigene
 * Farbe, weil sie sich sonst in Salbei auf Salbei gezeichnet hätte. Auf dem
 * dunklen Grund gilt wieder die allgemeine Regel aus base.css.
 */
.ld-architektur__schalter {
	margin-block-start: clamp(1.25rem, 3.11vw, 3.75rem);
}

/* ---------------------------------------------------------------- Formen */

/*
 * Die drei Bildformen. Jede liegt in einer eigenen Hülle, die das Skript für
 * das Nachlaufen der Maus verschiebt; die Form selbst trägt die Maske und
 * wächst beim Auftritt aus dem Nichts.
 *
 * Die Umrisse in assets/images/formen/ folgen der Geometrie der Vorlage: keine
 * abgerundeten Rechtecke, sondern Keile — jeder mit einer langen diagonalen
 * Kante und großen weichen Ecken. Bei der vordersten läuft diese Diagonale
 * oben durch und lässt die obere linke Ecke frei; genau dort steht das
 * Riesenwort.
 */
.ld-architektur__form {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	/*
	 * WordPress gibt jedem Kind außer dem ersten einen Abstand nach oben
	 * (blockGap). Bei absolut liegenden Ebenen ist das ein Versatz von
	 * 24 Pixeln, den niemand bestellt hat.
	 */
	margin-block: 0;
	translate: var(--ld-a-x, 0px) var(--ld-a-y, 0px);
}

/*
 * Alle drei Formen sitzen mit ihrer Mitte auf einer Höhe im Abschnitt — in der
 * Vorlage gemessen: 30, 50 und 55 Prozent. Die hinterste stand hier einmal mit
 * ihrer Oberkante auf 55 Prozent und hing dadurch eine halbe Bildhöhe zu tief;
 * die drei Formen lagen fast doppelt so weit auseinander wie dort.
 *
 * Zentriert wird über transform und nicht über negative Ränder. WordPress setzt
 * am ersten Kind eines Flow-Layouts margin-block-start: 0 — über den Selektor
 * :root :where(.is-layout-flow) > :first-child, und der schlägt eine einzelne
 * Klasse. Die hinterste Form ist genau dieses erste Kind; ihr Rand ging dadurch
 * verloren. Mit transform kann das nicht passieren, und es bleibt auch dann
 * heil, wenn jemand die Blöcke im Editor anders sortiert.
 *
 * translate ist hier belegt: Damit lässt das Skript die Formen der Maus folgen.
 * Die beiden Eigenschaften stören einander nicht, sie werden nacheinander
 * angewandt.
 */
.ld-architektur__form--hinten {
	inset-block-start: 55%;
	inset-inline-end: 10%;
	width: 47.7vw;
	aspect-ratio: 901 / 506;
	transform: translateY(-50%);
}

.ld-architektur__form--mitte {
	z-index: 2;
	inset-block-start: 30%;
	inset-inline-start: 50%;
	width: 37.3vw;
	aspect-ratio: 725 / 551;
	transform: translateY(-50%);
}

.ld-architektur__form--vorn {
	z-index: 2;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 32.4vw;
	aspect-ratio: 629 / 831;
	transform: translate(-50%, -50%);
}

/*
 * Der Auftritt: Nicht eingeblendet, sondern die Maske wächst von null auf
 * volle Größe — je 1,5 Sekunden, um 0,3 Sekunden versetzt, wie in der Vorlage.
 *
 * Wann sie aufgehen, rechnet das Skript aus: erst die Überschrift, dann der
 * Fließtext, dann die Bilder. Es setzt das Ergebnis als --ld-a-bilder. Die 3,2
 * Sekunden hier sind nur der Rückfall, falls das Skript nicht dazu kommt.
 */
.ld-architektur__maske {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 0% 0%;
	mask-size: 0% 0%;
	transition: -webkit-mask-size 1.5s cubic-bezier(0.45, 0.03, 0.52, 0.96),
		mask-size 1.5s cubic-bezier(0.45, 0.03, 0.52, 0.96);
	transition-delay: calc(var(--ld-a-bilder, 3.2s) + var(--ld-a-nr, 0) * 0.3s);
}

/*
 * Ein Wimpernschlag zum Zurücksetzen, bevor der Auftritt von vorn beginnt.
 *
 * Ohne das bleiben die Bildformen offen stehen. Ihre Maske fährt nur mit
 * Verzögerung zu; in dem einen Zwischenschritt kommt sie deshalb nie bei null
 * an — und ein Wert, der sich nicht ändert, löst auch keine Bewegung aus. Die
 * Formen stünden schon da, während der Text noch hereinkommt. Genau anders
 * herum als gewollt.
 */
.ld-architektur.is-zurueck .ld-architektur__zeichen,
.ld-architektur.is-zurueck .ld-architektur__maske {
	transition: none;
}

.ld-architektur.is-da .ld-architektur__maske {
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/*
 * Die vorderste Form bleibt eine Spur kleiner als ihr Kasten — die Vorlage
 * setzt hier 95 Prozent, bei den beiden anderen 100. Das nimmt ihr genau die
 * Wucht, mit der sie sonst über dem Text steht.
 */
.ld-architektur.is-da .ld-architektur__form--vorn .ld-architektur__maske {
	-webkit-mask-size: 95% 95%;
	mask-size: 95% 95%;
}

.ld-architektur__form--hinten .ld-architektur__maske {
	-webkit-mask-image: url("../../images/formen/form-3.svg");
	mask-image: url("../../images/formen/form-3.svg");
}

.ld-architektur__form--mitte .ld-architektur__maske {
	-webkit-mask-image: url("../../images/formen/form-2.svg");
	mask-image: url("../../images/formen/form-2.svg");
}

.ld-architektur__form--vorn .ld-architektur__maske {
	-webkit-mask-image: url("../../images/formen/form-1.svg");
	mask-image: url("../../images/formen/form-1.svg");
}

.ld-architektur__maske img,
.ld-architektur__maske video {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.ld-architektur__maske figure {
	margin: 0;
	height: 100%;
}

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

/*
 * Ohne JavaScript und bei reduzierter Bewegung steht alles sofort da: Die
 * Buchstaben sitzen an ihrem Platz, die Formen sind offen, die Textblöcke
 * hängen nicht. Das ist keine abgespeckte Fassung, sondern derselbe Abschnitt
 * ohne Bewegung.
 */
.ld-architektur:not(.is-bereit) .ld-architektur__zeichen,
.ld-architektur:not(.is-bereit) .ld-architektur__maske {
	transition: none;
}

.ld-architektur:not(.is-bereit) .ld-architektur__zeichen {
	transform: none;
}

.ld-architektur:not(.is-bereit) .ld-architektur__maske {
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.ld-architektur:not(.is-bereit) .ld-architektur__kicker,
.ld-architektur:not(.is-bereit) .ld-architektur__wort,
.ld-architektur:not(.is-bereit) .ld-architektur__unten {
	translate: none;
}

@media (prefers-reduced-motion: reduce) {
	.ld-architektur__zeichen,
	.ld-architektur__maske {
		transition: none;
	}
}

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

/*
 * Die Vorlage blendet diesen Abschnitt auf dem Handy aus und baut ihn dort neu
 * auf. Bei uns bleibt er — nur stehen die drei Formen dann untereinander unter
 * dem Text statt hinter ihm, denn nebeneinander wäre auf dieser Breite nichts
 * mehr zu erkennen. Die Maus gibt es dort ohnehin nicht.
 */
@media (width <= 60rem) {
	.ld-architektur {
		justify-content: flex-start;
	}

	/*
	 * **Der Grad rechnet sich aus der Spaltenbreite**, nicht mehr fest aus
	 * 13 vw: „Architektur" misst 7,1 Schriftgrade, bei 13 vw also 347 auf 326
	 * Bildpunkte Spalte (375 breit) — das Wort brach vor dem letzten „R“ um,
	 * mitten im Wort, weil jeder Buchstabe ein eigenes Element ist. Am
	 * 19.10.2026 beim Gegenprüfen in Safari aufgefallen, in Chrome genauso.
	 * Geteilt durch 7,3 bleibt bei 320, 375 und 430 Breite eine kleine
	 * Reserve; `nowrap` sichert die eine Zeile zusätzlich.
	 */
	.ld-architektur__wort {
		font-size: clamp(2rem, calc((100vw - 3.1rem) / 7.3), 6rem);
		text-align: start;
		white-space: nowrap;
	}

	.ld-architektur__kicker,
	.ld-architektur__text {
		margin-inline-start: 0;
	}

	.ld-architektur__text {
		width: 100%;
	}

	/*
	 * Untereinander statt übereinander: Die Zentrierung aus der breiten
	 * Ansicht muss dafür weg — sonst zöge sie jede Form um ihre halbe Höhe
	 * nach oben und die vorderste zusätzlich zur Seite.
	 */
	.ld-architektur__form {
		position: relative;
		inset: auto;
		width: 100%;
		margin: clamp(1.5rem, 6vw, 3rem) 0 0;
		translate: none;
		transform: none;
	}

	/*
	 * **Auf dem Telefon nach Arbors `#RootsMobile`**, aus ihrem Code und bei
	 * 375 gemessen (27.10.2026). Ihr Grundmaß ist 15,375 Bildpunkte, unseres
	 * 16 — umgerechnet. Innerhalb dieses Blocks, damit es bei einem Block für
	 * schmale Geräte bleibt; darüber gilt bis 60 rem die Tablet-Fassung.
	 *
	 * |                  | Telefon (375)                                         |
	 * |------------------|-------------------------------------------------------|
	 * | Schacht          | 400 svh, klebende Bühne über einen Bildschirm         |
	 * | Stufe 1          | 0 – 0,45: Riesenwort, dann die drei Bilder            |
	 * | Stufe 2          | ab 0,5: Absatz und Knopf am unteren Rand              |
	 * | Versalien-Zeile  | fest, Oberkante 138, 19,2                             |
	 * | Riesenwort       | Oberkante 232 (Arbor 208), zwei Zeilen „ARCHI- /      |
	 * |                  | TEKTUR", 82 — Arbors 92 passten nicht in die Breite   |
	 * | Form hinten      | 346 breit, rechts 23, unten bündig                    |
	 * | Form Mitte       | 269 breit, rechts 23, Mitte bei 58 %                  |
	 * | Form vorn (Film) | 269 breit, hochkant, links 23, unten bündig, Maske 95 % |
	 * | Absatz           | 38,4 Light, Zeilenhöhe 1,1, 115 über der Unterkante   |
	 * | Knopf            | 38 unter dem Absatz                                   |
	 * | Fortschritt      | oben links bei 88, Schiene 123, 01 / 02 bei 0,5       |
	 *
	 * Bewegung, aus ihrem Code: Zeichen aus einer Fensterbreite rechts, Deckung
	 * und Unschärfe 4, 1,5 s, Versatz 0,08 s; Bilder aus Maßstab 1,1, Deckung
	 * und Unschärfe, 1,2 s, Versatz 0,3 s, erst nach 1,5 s; Absatz Wort für
	 * Wort; Knopf 0,8 s nach 0,15 s. Beim Verlassen laufen sie rückwärts.
	 */
	@media (max-width: 767px) {
		.ld-architektur.is-mobil {
			display: block;
			height: 400svh;
			min-height: 0;
			padding: 0;
		}

		.ld-architektur__buehne {
			position: sticky;
			inset-block-start: 0;
			height: 100svh;
			overflow: clip;
		}

		.ld-architektur.is-mobil .ld-architektur__rahmen {
			position: absolute;
			inset: 0;
			max-width: none;
			margin: 0;
			padding: 0;
			pointer-events: none;
		}

		.ld-architektur.is-mobil .ld-architektur__kicker,
		.ld-architektur.is-mobil .ld-architektur__wort,
		.ld-architektur.is-mobil .ld-architektur__unten {
			translate: none;
		}

		.ld-architektur.is-mobil .ld-architektur__kicker {
			position: absolute;
			z-index: 20;
			inset-block-start: 8.64rem;
			inset-inline: 1.4375rem;
			margin: 0;
			font-size: 1.2rem;
		}

		/*
		 * Auf zwei Zeilen wie Arbors „YOUR / ROOTS", getrennt an der Stelle,
		 * die im Block als `&shy;` steht. Grad aus der längeren Zeile: „TEKTUR"
		 * misst 4 Schriftgrade, bei 329 Bildpunkten Spalte also 82 — Arbors
		 * 92 passten nicht. Es liegt hinter den beiden vorderen Bildern, wie dort.
		 */
		.ld-architektur.is-mobil .ld-architektur__wort {
			position: absolute;
			z-index: 1;
			/* Arbor 208; bei uns tiefer, damit das Bild die Unterkante deckt (Kunde). */
			inset-block-start: var(--ld-a-wt);
			inset-inline-start: 1.4375rem;
			margin: 0;
			font-size: calc((100vw - 2.875rem) / 4.02);
			line-height: 1;
		}

		.ld-architektur.is-mobil .ld-architektur__trenn {
			display: block;
		}

		.ld-architektur.is-mobil .ld-architektur__zeichen--trenn::after {
			content: "-";
		}

		/* Zeichen: aus einer Fensterbreite rechts, beim Abtreten rückwärts gestaffelt. */
		.ld-architektur.is-mobil .ld-architektur__zeichen {
			opacity: 0;
			filter: blur(4px);
			transform: translateX(100vw);
			transition:
				transform 1.5s cubic-bezier(0.45, 0, 0.55, 1),
				opacity 1.5s cubic-bezier(0.45, 0, 0.55, 1),
				filter 1.5s cubic-bezier(0.45, 0, 0.55, 1);
			transition-delay: calc((var(--ld-a-n, 1) - 1 - var(--ld-a-nr, 0)) * 0.08s);
		}

		.ld-architektur.is-mobil.is-stufe1 .ld-architektur__zeichen {
			opacity: 1;
			filter: blur(0);
			transform: none;
			transition-delay: calc(var(--ld-a-nr, 0) * 0.08s);
		}

		/* Absatz und Knopf am Fuß der Bühne. */
		.ld-architektur.is-mobil .ld-architektur__unten {
			position: absolute;
			z-index: 10;
			inset: 0;
			display: flex;
			align-items: flex-end;
			margin: 0;
			padding: 0 1.4375rem 7.2rem;
		}

		.ld-architektur.is-mobil .ld-architektur__text {
			width: 100%;
			margin: 0;
		}

		/*
		 * Die Laufweite erbt der Absatz als fertige Länge, gerechnet am
		 * kleineren Grad des Trägers (0,02 em von 1,25 rem). Der Ausgleich für
		 * Light muss deshalb hier am eigenen Grad stehen, sonst wirkt er nur
		 * halb und der Absatz bricht eine Zeile länger um.
		 */
		.ld-architektur.is-mobil .ld-architektur__aussage {
			font-size: 2.4rem;
			line-height: 1.1;
			letter-spacing: calc(0.025rem + var(--ld-light-lauf));
		}

		.ld-architektur.is-mobil .ld-architektur__schalter {
			margin-block-start: 2.4rem;
			opacity: 0;
			filter: blur(4px);
			transform: translateY(2rem);
			transition:
				opacity 0.8s cubic-bezier(0.45, 0, 0.55, 1),
				filter 0.8s cubic-bezier(0.45, 0, 0.55, 1),
				transform 0.8s cubic-bezier(0.45, 0, 0.55, 1);
		}

		.ld-architektur.is-mobil.is-stufe2 .ld-architektur__schalter {
			opacity: 1;
			filter: blur(0);
			transform: none;
			transition-delay: 0.15s;
		}

		.ld-architektur.is-mobil.is-stufe2 .ld-architektur__schalter a {
			pointer-events: auto;
		}

		/* -- Die drei Formen -- */

		.ld-architektur.is-mobil .ld-architektur__form {
			margin: 0;
			translate: none;
			transform: none;
			opacity: 0;
			filter: blur(4px);
			scale: 1.1;
			transition:
				opacity 1.2s cubic-bezier(0.45, 0, 0.55, 1),
				filter 1.2s cubic-bezier(0.45, 0, 0.55, 1),
				scale 1.2s cubic-bezier(0.45, 0, 0.55, 1);
		}

		.ld-architektur.is-mobil.is-stufe1 .ld-architektur__form {
			opacity: 1;
			filter: blur(0);
			scale: 1;
			transition-delay: calc(1.5s + var(--ld-a-i, 0) * 0.3s);
		}

		/*
		 * **Die drei Formen richten sich nach dem Wort, nicht nach der
		 * Bildschirmhöhe** (Kunde, 30.10.2026, nach Messung über zwölf
		 * iPhone-Größen). Vorher hingen sie am unteren Rand, das Wort wächst
		 * aber mit der Breite: Auf einem Pro Max mit Safari-Leisten
		 * (440 × 780) deckte das mittlere Bild 78 Bildpunkte von „TEKTUR“
		 * zu, auf einem kleinen iPhone fast nichts. Jetzt steht das mittlere
		 * Bild immer 0,95 rem über der Unterkante des Wortes, das hintere
		 * setzt direkt darunter an (vom Kunden so gewünscht, damit die drei
		 * als Gruppe stehen), und alle drei sind so groß, wie Platz unter
		 * dem Wort bleibt. Bei 390 × 844 ergibt das die bisherigen Breiten.
		 *
		 * `--ld-a-wu` ist die Unterkante des Wortes: seine Oberkante plus
		 * zwei Zeilen zu einem Grad (Zeilenhöhe 1, Grad siehe `__wort`).
		 */
		.ld-architektur.is-mobil {
			--ld-a-wt: 14.5rem;
			--ld-a-wu: calc(var(--ld-a-wt) + 2 * (100vw - 2.875rem) / 4.02);
			--ld-a-platz: calc(100svh - var(--ld-a-wu) + 0.95rem);
		}

		.ld-architektur.is-mobil .ld-architektur__form--hinten {
			--ld-a-i: 0;
			position: absolute;
			inset: calc(var(--ld-a-wu) - 0.95rem + var(--ld-a-platz) * 0.426) 1.4375rem auto auto;
			width: min(calc(100vw - 2.875rem), calc(var(--ld-a-platz) * 0.757));
		}

		.ld-architektur.is-mobil .ld-architektur__form--mitte {
			--ld-a-i: 1;
			position: absolute;
			inset: calc(var(--ld-a-wu) - 0.95rem) 1.4375rem auto auto;
			width: min(calc((100vw - 2.875rem) * 0.78), calc(var(--ld-a-platz) * 0.588));
		}

		.ld-architektur.is-mobil .ld-architektur__form--vorn {
			--ld-a-i: 2;
			position: absolute;
			inset: auto auto 0 1.4375rem;
			width: min(calc((100vw - 2.875rem) * 0.78), calc(var(--ld-a-platz) * 0.588));
		}

		/* Die Masken stehen fest; bei Arbor wächst hier nichts, es blendet ein. */
		.ld-architektur.is-mobil .ld-architektur__maske {
			-webkit-mask-size: 100% auto;
			mask-size: 100% auto;
			transition: none;
		}

		.ld-architektur.is-mobil .ld-architektur__form--vorn .ld-architektur__maske {
			-webkit-mask-size: 95% auto;
			mask-size: 95% auto;
		}

		/* -- Fortschritt oben links -- */

		.ld-architektur__fortschritt {
			inset-block: 5.53rem auto;
			inset-inline-start: 1.4375rem;
			z-index: 20;
		}

		.ld-architektur__fortschritt .ld-fortschritt__schiene {
			width: 7.69rem;
		}

		/*
		 * **Niedrige Bildschirme** (Kunde, 30.10.2026, iPhone mit Safari):
		 * Der Absatz steht unten verankert und wächst nach oben; unter rund
		 * 750 Bildpunkten sichtbarer Höhe lief er in „GRÜNDERZEIT UND
		 * NEUBAU“ — bei 664 um 80 Bildpunkte. Weniger Abstand nach unten
		 * und ein Grad, der mit der Höhe schrumpft (bei 664 35 statt 38),
		 * lassen 65 Bildpunkte Luft. Ab 760 Höhe greift nichts davon.
		 *
		 * Zeile und Wort rücken hier außerdem höher; die Bilder richten sich
		 * nach dem Wort (siehe „Die drei Formen“) und wandern damit mit.
		 * Der Absatz in Stufe 2 bekommt dadurch 88 Bildpunkte Luft.
		 */
		@media (max-height: 760px) {
			.ld-architektur.is-mobil {
				--ld-a-wt: 12rem;
			}

			.ld-architektur.is-mobil .ld-architektur__kicker {
				inset-block-start: 7.2rem;
			}

			.ld-architektur.is-mobil .ld-architektur__unten {
				padding-block-end: 3.6rem;
			}

			.ld-architektur.is-mobil .ld-architektur__aussage {
				font-size: clamp(1.75rem, 5.3svh, 2.4rem);
			}

			.ld-architektur.is-mobil .ld-architektur__schalter {
				margin-block-start: 1.6rem;
			}
		}
	}
}