/*
 * Abschnitt: Die Idee
 *
 * Eine klebende Bühne auf dunkler Fläche, nach dem Vorbild des grünen
 * Abschnitts von belgradearbor.rs. Zwei Bilder liegen in organisch
 * geschnittenen Formen. Beim Scrollen verwandeln sich die Umrisse ineinander,
 * die Fotos darin wechseln, beide Formen wandern nach links und werden
 * kleiner — und währenddessen verschwindet das erste Textbild wieder in der
 * Unschärfe, aus der das zweite hervorkommt.
 *
 * assets/js/sections/idee.js rechnet aus der Scrollposition die Zahlen und
 * setzt den jeweils gültigen Umriss als clip-path. Das Aussehen macht das CSS.
 *
 * Ohne JavaScript und bei reduzierter Bewegung gibt es keinen Scrollschacht:
 * Dann stehen beide Textbilder und beide Formen ruhig untereinander.
 */

.ld-idee {
	position: relative;
	overflow: clip;
}

/* ------------------------------------------------ Ruhige Fassung ohne Bewegung */

/*
 * Der Ausgangszustand ist bewusst der einfache: gestapelt, lesbar, ohne
 * Sequenz. Erst die Klasse is-bereit vom Skript macht daraus die Bühne.
 */
.ld-idee__buehne {
	display: flex;
	flex-direction: column;
	gap: clamp(2.5rem, 6vh, 5rem);
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: var(--wp--preset--spacing--40);
}

.ld-idee__form {
	position: relative;
	width: 100%;
	max-width: 34rem;
	margin-inline: auto;
	aspect-ratio: 3 / 4;
}

/*
 * Keine Höchstbreite: Die kleine Form wächst im Lauf der Durchfahrt auf 27 vw
 * und wäre sonst abgeschnitten.
 */

/* In der ruhigen Fassung zeigt jede Form nur ihr erstes Bild. */
.ld-idee__bild--b {
	display: none;
}

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

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

/* ------------------------------------------------------------------ Bühne */

.ld-idee.is-bereit .ld-idee__schacht {
	height: 700svh;
}

.ld-idee.is-bereit .ld-idee__buehne {
	position: sticky;
	inset-block-start: 0;
	display: block;
	height: 100svh;
	padding: 0;
	overflow: clip;
	/*
	 * Die Bühne trägt ihre Fläche selbst. Das Multiplizieren des Blattschattens
	 * braucht einen deckenden Grund in derselben Ebene — läge die Farbe nur am
	 * Abschnitt darunter, würde die Grafik einfach hell darübergelegt statt
	 * abzudunkeln. Genau daran ist der erste Versuch gescheitert.
	 */
	isolation: isolate;
}

/*
 * Lichtstrahlen über der Fläche. Bauart wie bei belgradearbor.rs — eine
 * bildschirmfüllende Grafik, an der oberen rechten Ecke verankert, auf 120
 * Prozent vergrößert, die sich um fünf Grad in vier Sekunden wiegt.
 *
 * Umgekehrt gerechnet als dort: Die Vorlage legt einen Schatten über mittleres
 * Grün und multipliziert ihn. Auf unserem dunklen Braun ginge ein Schatten
 * unter — Licht in einem dunklen Raum sieht man als helle Bahnen. Deshalb liegt
 * hier Licht auf schwarzem Grund und wird aufgehellt: Schwarz bleibt dabei
 * wirkungslos, nur die Strahlen wirken.
 *
 * Warum ein Bild und keine Farbverläufe: Verläufe haben keine Kanten, keine
 * Struktur und kein Korn, und sie wiederholen sich. Ein Lichtstrahl lebt genau
 * davon — von der Abschattung entlang seiner Länge, vom Dunst, vom Staub in
 * der Luft. Die Grafik ist ein Block und im Editor gegen ein Foto tauschbar.
 */
.ld-idee__licht {
	/* Ohne Sequenz kein Licht — es lebt von der Bewegung. */
	display: none;
}

.ld-idee.is-bereit .ld-idee__licht {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	pointer-events: none;
	opacity: 0.5;
	mix-blend-mode: screen;
	transform-origin: 100% 0;
	animation: ld-idee-licht 4s ease-in-out infinite alternate;
	will-change: transform;
}

.ld-idee.is-bereit .ld-idee__licht img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@keyframes ld-idee-licht {
	from {
		transform: scale(1.2) rotate(0deg);
	}

	to {
		transform: scale(1.2) rotate(5deg);
	}
}

/*
 * Der Abschied: Am Ende des Schachts hängt alles zurück, was auf der Bühne
 * liegt — Licht, Bildformen, Textbilder und der Fortschrittsbalken —, während
 * der Abschnitt darunter mit voller Scrollgeschwindigkeit hochkommt. Die Bühne
 * selbst bleibt stehen: Sie trägt die braune Fläche, und die soll nicht
 * mitwandern, sonst risse oben ein Streifen auf. Erklärung und Maß stehen bei
 * --ld-abschied-weg in base.css.
 *
 * translate statt transform, weil die Teile darin ihre eigenen transform-
 * Angaben haben; die beiden Eigenschaften stören einander nicht.
 */
.ld-idee.is-bereit .ld-idee__buehne > * {
	translate: 0 calc(var(--ld-abschied, 0) * var(--ld-abschied-weg));
}

/* ------------------------------------------------------------- Bildformen */

/*
 * Anfangs- und Endkasten je Form. Das Skript setzt --ld-wandel von 0 auf 1,
 * das CSS blendet dazwischen über. Alle Werte hängen am Fenster, damit die
 * Anordnung auf jedem Bildschirm gleich wirkt.
 */
.ld-idee.is-bereit .ld-idee__form {
	position: absolute;
	z-index: 2;
	max-width: none;
	margin: 0;
	aspect-ratio: auto;
	inset-inline-start: calc(var(--ld-x1) + (var(--ld-x2) - var(--ld-x1)) * var(--ld-wandel, 0));
	inset-block-start: calc(var(--ld-y1) + (var(--ld-y2) - var(--ld-y1)) * var(--ld-wandel, 0));
	width: calc(var(--ld-b1) + (var(--ld-b2) - var(--ld-b1)) * var(--ld-wandel, 0));
	height: calc(var(--ld-h1) + (var(--ld-h2) - var(--ld-h1)) * var(--ld-wandel, 0));
	/* Auftritt: aus der Unschärfe, minimal zu groß beginnend. */
	opacity: var(--ld-auftritt, 0);
	filter: blur(calc((1 - var(--ld-auftritt, 0)) * 8px));
	transform: scale(calc(1.06 - var(--ld-auftritt, 0) * 0.06));
	will-change: width, height, filter;
}

/*
 * Beide Lagen sind in der Vorlage gemessen, bei 2056 × 1203.
 *
 * Die Formen wandern nach links — das ist der Kern des Abschnitts und nicht nur
 * Zierde: Beim ersten Textbild steht der Text links und die Formen rechts, beim
 * zweiten ist es umgekehrt. Stünden sie fest rechts, lägen sie beim zweiten
 * Textbild hinter der Schrift. Dabei tauschen sie die Rollen — die große
 * schrumpft von 29,1 auf 15,6 vw, die kleine wächst von 16 auf 27,2 vw.
 *
 * **Die Höhe steht in vw, nicht in svh.** Beide Umrisse haben dasselbe
 * Seitenverhältnis von 0,745; die Höhe ist deshalb die Breite geteilt durch
 * diesen Wert und darf nicht frei gewählt werden. Sonst wird die Form
 * verzogen — genau das war passiert: Gemessen war der *Rahmen* der Vorlage, und
 * der ist bildschirmhoch. Das sichtbare Bild darin ist nur zwei Drittel davon
 * (28,9 × 66,5 statt 28,9 × 98,7). In vw bleibt das Verhältnis außerdem bei
 * jedem Fensterformat erhalten, in svh nicht.
 */
.ld-idee.is-bereit .ld-idee__form--1 {
	--ld-x1: 62.7vw;
	--ld-y1: 16.4svh;
	--ld-b1: 29.1vw;
	--ld-h1: 39.06vw;
	--ld-x2: 27.3vw;
	--ld-y2: 14svh;
	--ld-b2: 15.6vw;
	--ld-h2: 20.94vw;
}

/*
 * Die Kästen der beiden überlappen sich am Ende deutlich — in der Vorlage
 * ebenso. Sichtbar berühren sich die Formen trotzdem nicht: Ihre langen
 * Diagonalen zeigen aufeinander zu, die eine nimmt die andere in ihre schräge
 * Flanke auf.
 *
 * Die Endbreite ist aus der gemessenen Höhe abgeleitet, nicht selbst gemessen:
 * Breite und Höhe der Vorlage ergaben dort ein Verhältnis von 0,95, der Umriss
 * hat aber 0,745 — eine der beiden Zahlen war falsch abgelesen. Mit der Höhe
 * als Bezug wird die Form 21,3 statt 27,2 vw breit. Sie rückt damit auch vom
 * Fortschrittsbalken ab, an den sie vorher fast stieß.
 *
 * Der linke Rand ist dafür nachgezogen: Maßgeblich für den Abstand der beiden
 * ist die *rechte* Kante der kleinen Form, denn dort stehen sie einander
 * gegenüber. Sie liegt jetzt wieder auf Arbors 34,6 vw, womit sich die Kästen
 * wie dort um 7,3 vw überlappen. Nach dem Verschmälern war der Abstand auf 1,4
 * vw geschrumpft und die beiden standen sichtbar zu weit auseinander. Der linke
 * Rand weicht dadurch von der Vorlage ab — bei schmalerer Form lassen sich
 * nicht beide Kanten treffen, und die zugewandte ist die wichtigere.
 */
.ld-idee.is-bereit .ld-idee__form--2 {
	--ld-x1: 47.3vw;
	--ld-y1: 55.3svh;
	--ld-b1: 16vw;
	--ld-h1: 21.48vw;
	--ld-x2: 13.3vw;
	--ld-y2: 31.2svh;
	--ld-b2: 21.3vw;
	--ld-h2: 28.59vw;
}

.ld-idee.is-bereit .ld-idee__bild {
	position: absolute;
	inset: 0;
	height: 100%;
}

/* Das zweite Foto blendet sich während der Verwandlung über das erste. */
.ld-idee.is-bereit .ld-idee__bild--b {
	display: block;
	opacity: var(--ld-tausch, 0);
}

/* ---------------------------------------------------------- Textbilder */

.ld-idee.is-bereit .ld-idee__screen {
	position: absolute;
	z-index: 3;
	margin: 0;
	/*
	 * Alle drei Textbilder liegen übereinander und bleiben liegen, auch wenn
	 * sie unsichtbar sind. Das letzte im Markup liegt dabei ganz oben und fing
	 * bisher jede Mausbewegung ab — die Schaltflächen der ersten beiden
	 * reagierten deshalb nicht. Die Bilder lassen den Zeiger jetzt durch;
	 * nur die Schaltfläche des gerade sichtbaren nimmt ihn an.
	 */
	pointer-events: none;
}

.ld-idee.is-bereit .ld-idee__screen.is-vorn .ld-schalter a {
	pointer-events: auto;
}

.ld-idee.is-bereit .ld-idee__screen--1 {
	inset-inline-start: clamp(1.5rem, 5vw, 6rem);
	inset-block-start: 20svh;
	/* 573 Pixel bei 1512 Fensterbreite, wie in der Vorlage. */
	width: min(37.9vw, 36rem);
}

/* Das mittlere Textbild steht rechts — die Formen sind bis dahin nach links gewandert. */
.ld-idee.is-bereit .ld-idee__screen--2 {
	inset-inline-end: clamp(1.5rem, 5vw, 6rem);
	inset-block-start: 24svh;
	width: min(44vw, 40rem);
}

/*
 * Das letzte Textbild folgt der Anordnung der Vorlage, gemessen bei 1512 × 767:
 * Die Aussage beginnt 4,6 Prozent von links und 14 Prozent von oben und läuft
 * über 91 Prozent der Breite. Der Absatz setzt genau in der Bildmitte an und
 * ist 23 Prozent breit.
 */
.ld-idee.is-bereit .ld-idee__screen--3 {
	inset-inline: clamp(1.25rem, 4.6vw, 5.5rem);
	inset-block-start: 14svh;
}

/*
 * Der Absatz beginnt in der Mitte des Bildes. Weil der Textblock links und
 * rechts denselben Abstand hat, ist das zugleich seine eigene Mitte.
 */
.ld-idee__screen--3 .ld-idee__absatz,
.ld-idee__screen--3 .ld-idee__link {
	margin-inline-start: 50%;
	width: min(23vw, 26rem);
	max-width: none;
}

/*
 * In der Vorlage beginnt der Absatz bei 57 Prozent der Fensterhöhe. Unsere
 * Aussage ist etwas flacher, deshalb steht hier mehr Luft darüber als dort.
 */
.ld-idee__screen--3 .ld-idee__absatz {
	margin-block-start: clamp(2.5rem, 15svh, 9rem);
}

/*
 * Abstand der Schaltfläche zum Text darüber, in der Vorlage gemessen bei
 * 1512 × 767 — von der Unterkante des Textblocks bis zur Oberkante der Pille:
 * im ersten Textbild 87,8 Pixel, im zweiten 119,2. Arbor staffelt das bewusst,
 * das zweite Textbild steht freier. Das dritte hat dort gar keine
 * Schaltfläche und bekommt deshalb den Wert des ersten.
 *
 * Die Zahlen sind größer als der reine Außenabstand: Bei Arbor sitzt die Pille
 * in einer Textzeile und wird von deren Durchschuss noch etwas tiefer
 * geschoben. Gemessen und angeglichen ist deshalb der sichtbare Abstand, nicht
 * der eingetragene Wert.
 */
.ld-idee__screen--2 .ld-idee__link {
	margin-block-start: clamp(4.25rem, 7.23vw, 9rem);
}

/*
 * Maße der Vorlage, gemessen bei 1512 × 767: 15,7 Pixel Schriftgrad, 0,02 em
 * Laufweite, Zeilenabstand 1,5, und 31 Pixel Abstand zur Aussage darunter.
 * Unsere allgemeine Kennzeichnungs-Klasse sperrt mit 0,22 em elfmal so weit —
 * das war der Hauptgrund, warum die Zeile hier zu breit lief.
 */
.ld-idee__kicker {
	margin-block-end: clamp(1.25rem, 4.05svh, 2.75rem);
	font-size: clamp(0.8rem, 1.04vw, 1.15rem);
	letter-spacing: 0.02em;
	line-height: 1.5;
}

/* Ebenfalls aus der Vorlage: 43,9 Pixel, Zeilenabstand 1,1, 0,02 em Laufweite. */
.ld-idee__satz {
	margin-block: 0;
	/*
	 * Light. Aussagesätze in Displaygröße stehen im ganzen Theme in diesem
	 * Schnitt; Regular ist den großen Überschriften vorbehalten.
	 */
	font-weight: 300;
	font-size: clamp(1.35rem, 2.9vw, 3.1rem);
	line-height: 1.1;
	/*
	 * 0,003 em weniger Ausgleich als sonst: Bei 390 Bildpunkten Breite stand
	 * der zweite Satz mit dem allgemeinen Wert eine Zeile kürzer da als mit
	 * Ultralight. Gemessen mit werkzeuge/layout-abdruck.js, 28.10.2026.
	 */
	letter-spacing: calc(0.02em + var(--ld-light-lauf) + 0.003em);
	text-wrap: pretty;
}

/*
 * Die Vorlage setzt hier 8,3 Prozent der Fensterbreite. Unsere Schrift ist
 * breiter geschnitten und der deutsche Satz länger; bei gleichem Grad ergäbe
 * das drei Zeilen. Sieben Prozent füllen dieselben zwei Zeilen über die volle
 * Breite — das Satzbild stimmt damit, auch wenn die Zahl kleiner ist.
 */
.ld-idee__aussage {
	margin-block: 0;
	font-size: clamp(1.9rem, 7vw, 8rem);
	/*
	 * Regular — die große Aussage ist eine Überschrift, kein Aussagesatz.
	 */
	font-weight: 400;
	/*
	 * Die Vorlage setzt hier 1,0 — im Englischen gibt es aber keine Umlaute.
	 * Bei „FÜR" stoßen die beiden Punkte sonst an die Zeile darüber.
	 */
	line-height: 1.12;
	letter-spacing: normal;
	text-transform: uppercase;
	max-width: none;
	text-wrap: balance;
}

/*
 * Fließtext nach der Vorlage, gemessen bei 1512 Fensterbreite: 12,5 Pixel
 * Schriftgrad, Zeilenabstand 1,2, keine Sperrung. Beides hängt an der
 * Fensterbreite, damit die Proportion auf großen Bildschirmen bleibt.
 */
.ld-idee__absatz {
	margin-block: clamp(1.5rem, 4vh, 3rem) 0;
	max-width: 36ch;
	font-size: clamp(0.72rem, 0.83vw, 0.95rem);
	line-height: 1.2;
	letter-spacing: normal;
	text-wrap: pretty;
}

/*
 * Der Verweis ist seit dem Umbau eine Schaltfläche — Form, Grad und Laufweite
 * stehen bei .ld-schalter in base.css. Hier bleibt nur, wo er im Textbild
 * sitzt.
 */
.ld-idee__link {
	margin-block: clamp(3rem, 5.16vw, 6.25rem) 0;
}

/* --------------------------------------------- Abzüge nur für das Telefon */

/*
 * Das Telefon braucht vier Bildformen, das Markup hat zwei. Die beiden
 * weiteren legt idee.js als Abzüge an; am Schreibtisch stehen sie nicht da,
 * ebenso die Ziffern 04 und 05 der Zählung.
 */
.ld-idee__form--abzug,
.ld-fortschritt__zahl--telefon {
	display: none;
}

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

/*
 * Maße der Vorlage, `#IntroductionMobile` bei 375 Bildpunkten, aus ihrem Code
 * und ihren Klassen gelesen (27.10.2026). Ihr Grundmaß ist dort 15,375
 * Bildpunkte, unseres 16 — die Werte sind umgerechnet.
 *
 * |                     | Schreibtisch         | Telefon (375)                        |
 * |---------------------|----------------------|--------------------------------------|
 * | Schacht             | 700 svh              | 600 svh, wie Arbors h-[600vh]        |
 * | Ablauf              | Formen verwandeln    | fünf Stufen, die einander ablösen    |
 * | Textbilder          | links / rechts       | volle Breite, 23 Rand, mittig        |
 * | Kennzeile           | 15,7 bei 1512        | 19,2, Abstand 19,2                   |
 * | Aussagesatz         | 43,9 bei 1512        | 34,6, Zeilenhöhe 1,1                 |
 * | Große Aussage       | 7 vw                 | 46,1 Versalien, Zeilenhöhe 1,1       |
 * | Absatz darunter     | ab der Mitte, 23 vw  | drei Viertel breit, rechts, 15,4     |
 * | Abstand dazwischen  | 15 svh               | 57,7                                 |
 * | Formen Stufe 2      | —                    | 246 rechts mittig, 177 links ab Mitte|
 * | Formen Stufe 4      | —                    | 177 rechts bei 1/6, 288 links bei 40 %|
 * | Auftritt der Formen | am Scroll            | 0,7 s aus Unschärfe 4, Maßstab 1→1,1 |
 * | Schaltfläche        | im Textbild          | unten, 23 Rand, 57,7 über der Kante  |
 * | Fortschritt         | unten links          | oben links bei 88, Schiene 123       |
 */
@media (max-width: 767px) {
	/* Ruhige Fassung ohne Skript: nur Grade, keine Bühne. */
	.ld-idee__satz {
		font-size: 2.16rem;
	}

	.ld-idee__aussage {
		font-size: 2.88rem;
		line-height: 1.1;
	}

	.ld-idee__kicker {
		margin-block-end: 1.2rem;
		font-size: 1.2rem;
	}

	.ld-idee__absatz {
		font-size: 0.96rem;
		line-height: 1.4;
	}

	.ld-idee.is-bereit.is-mobil .ld-idee__schacht {
		height: 600svh;
	}

	/* -- Formen: vier feste Umrisse statt zwei wandelnder -- */

	.ld-idee__form--abzug {
		display: block;
	}

	.ld-idee.is-bereit.is-mobil .ld-idee__form {
		inset-inline-start: var(--ld-m-x, 0);
		inset-block-start: var(--ld-m-y, 0);
		width: var(--ld-m-b, 0);
		height: var(--ld-m-h, 0);
		opacity: 0;
		filter: blur(4px);
		transform: scale(1);
		transition:
			opacity 0.7s cubic-bezier(0.45, 0, 0.55, 1),
			filter 0.7s cubic-bezier(0.45, 0, 0.55, 1),
			transform 0.7s cubic-bezier(0.45, 0, 0.55, 1);
		will-change: opacity, filter, transform;
	}

	.ld-idee.is-bereit.is-mobil .ld-idee__form.is-da {
		opacity: 1;
		filter: blur(0);
		transform: scale(1.1);
	}

	/* Arbors Versatz von 0,03 s zwischen den beiden Formen einer Stufe. */
	.ld-idee.is-bereit.is-mobil .ld-idee__form.is-zweite {
		transition-delay: 0.03s;
	}

	.ld-idee.is-mobil .ld-idee__bild--b {
		display: none;
	}

	/* -- Textbilder: volle Fläche, Inhalt senkrecht mittig -- */

	.ld-idee.is-bereit.is-mobil .ld-idee__screen--1,
	.ld-idee.is-bereit.is-mobil .ld-idee__screen--2,
	.ld-idee.is-bereit.is-mobil .ld-idee__screen--3 {
		box-sizing: border-box;
		inset: 0;
		width: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-inline: 1.4375rem;
	}

	/* Die große Aussage steht bei Arbor einen halben Grundmaß weiter innen. */
	.ld-idee.is-bereit.is-mobil .ld-idee__screen--3 {
		padding-inline: 1.9375rem;
	}

	.ld-idee.is-mobil .ld-idee__screen--3 .ld-idee__absatz {
		align-self: flex-end;
		width: 75%;
		margin-block-start: 3.6rem;
		margin-inline-start: 0;
	}

	/* -- Schaltfläche: unten über die volle Breite, wie Arbors „Explore in 3D" -- */

	.ld-idee.is-bereit.is-mobil .ld-idee__screen .ld-idee__link {
		position: absolute;
		inset-inline: 1.4375rem;
		inset-block-end: 3.6rem;
		width: auto;
		margin: 0;
	}

	.ld-idee.is-bereit.is-mobil .ld-idee__link a {
		display: flex;
		width: 100%;
	}

	/* -- Fortschritt oben links, Zählung bis 05 -- */

	.ld-idee.is-bereit.is-mobil .ld-fortschritt {
		inset-block: 5.53rem auto;
		inset-inline-start: 1.4375rem;
	}

	.ld-idee.is-bereit.is-mobil .ld-fortschritt__schiene {
		width: 7.69rem;
	}

	.ld-idee.is-mobil .ld-fortschritt__zahl--telefon {
		display: block;
	}
}

/* ------------------------------------------------- Reduzierte Bewegung */

@media (prefers-reduced-motion: reduce) {
	.ld-idee.is-bereit .ld-idee__licht {
		animation: none;
	}
}