/*
 * Zahlen zum Projekt — ein schmaler Balken zwischen „Projekt" und „Die Idee"
 *
 * **Die Regeln standen bis zum 16.09.2026 in `projekt.css`**, weil die Zahlen
 * dort in der Bildfolge „Vom Entwurf zum Bau" lagen. Die ist gestrichen, die
 * Zahlen haben einen eigenen Abschnitt bekommen — und damit eine eigene Datei.
 *
 * **Es ist ein Balken, kein Bildschirm.** 58 Prozent der Bildschirmhöhe: genug
 * für die beiden Reihen mit Luft, zu wenig, um als eigener Halt zu wirken.
 * Deshalb trägt der Abschnitt auch kein `ld-raste` — zwei Rastpunkte kurz
 * hintereinander machen das Scrollen klebrig.
 *
 * **`box-sizing` gehört an dieselbe Stelle wie die Höhe.** Das Theme steht auf
 * `content-box`; ohne die Zeile käme das Polster auf die 58svh obendrauf.
 *
 * **Die Ziffern laufen ein, sie blenden nicht auf.** Das steckt in
 * `assets/js/sections/fakten.js`; hier steht nur, wie es aussieht.
 */

.ld-faktenband {
	box-sizing: border-box;
	min-height: 58svh;
	padding-block: clamp(3rem, 7svh, 6rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/*
 * Im Balken steht die erste Reihe oben — die Luft darüber trägt das Polster
 * des Abschnitts. Auf der alten Bühne hing sie unter einem freigehaltenen
 * Band; diese Fassung ist mit der Bildfolge stillgelegt worden.
 */
.ld-fakten {
	width: 100%;
}

/*
 * **Die Breite ist die der alten Anordnung.** In der Bildfolge lagen die
 * Zahlen in einem `alignwide`-Block, also auf `wideSize` — rund 1320
 * Bildpunkte. Im neuen Abschnitt standen sie zuerst in einem `constrained`
 * Block und bekamen damit die **720 der `contentSize`**: Die drei Spalten
 * drängten sich in der Mitte zusammen. **Dem Kunden sofort aufgefallen.**
 *
 * **Daraus die Regel: Wer Markup aus einem Abschnitt in einen anderen hebt,
 * prüft die Breite des neuen Elternteils.** `constrained` und `alignwide`
 * unterscheiden sich hier um fast das Doppelte, und im Markup sieht man es
 * nicht — der Unterschied steckt in `theme.json`.
 */

/*
 * **Der Balken hängt beim Wegscrollen zurück**, während „Die Idee" darunter
 * mit voller Geschwindigkeit hochkommt und ihn überholt — das Verdecken, das
 * die Zahlen in der Bildfolge schon hatten. Der Baustein `ld-abschied` am
 * Abschnitt setzt `--ld-abschied`; was zurückhängt, entscheidet diese Zeile.
 *
 * **Der Grund des Balkens bleibt stehen** und wandert nicht mit: Sonst risse
 * oben ein Streifen auf. Verschoben wird nur, was darauf liegt — dieselbe
 * Aufteilung wie bei jeder klebenden Bühne im Theme.
 */
.ld-faktenband .ld-fakten {
	/*
	 * **Etwas enger als `wideSize`.** Auf voller Breite standen die äußeren
	 * beiden Zahlen sehr weit außen; **vom Kunden zurückgeholt** — „minimal
	 * zentrierter". 85 statt 92 vw sind bei 2056 Fensterbreite rund 72
	 * Bildpunkte je Seite.
	 *
	 * Der Deckel oben ist derselbe wie bei `wideSize` in `theme.json`, damit
	 * die Reihe auf sehr breiten Bildschirmen nicht ins Uferlose wächst.
	 */
	max-width: min(85vw, 2400px);
	margin-inline: auto;
	translate: 0 calc(var(--ld-abschied, 0) * var(--ld-abschied-weg));
}

/* --------------------------------------------------- Fakten zum Projekt */

/*
 * Zwei gleiche Reihen zu dritt. Jede Reihe ist ein Raster mit zwei Zeilen:
 * oben die Zahlen, unten die Beschriftungen. Die Fakten übernehmen dieses
 * Raster (subgrid), damit alle Beschriftungen auf einer Linie sitzen — auch
 * wenn eine Zahl einmal umbricht.
 */
.ld-fakten__reihe {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: auto auto;
	column-gap: clamp(1.5rem, 3vw, 3.5rem);
	row-gap: 0.5em;
	align-items: end;
}

/*
 * Der Wrapper steht mit im Selektor: WordPress setzt dem ersten Kind eines
 * Gruppenblocks von sich aus den oberen Abstand auf null, und diese Regel muss
 * schwerer wiegen als die aus dem Blocksatz.
 */
/*
 * Im Fluss braucht die erste Reihe keinen eigenen Abstand mehr — den trägt
 * `.ld-fakten` selbst. Auf der Bühne dagegen schon, dort hängt sie unter dem
 * freigehaltenen Band.
 */
.ld-projekt__wandel-lauf .ld-fakten .ld-fakten__reihe--1 {
	margin-block-start: var(--ld-fakten-luft);
}

.ld-fakten__reihe--2 {
	margin-block-start: clamp(1.5rem, 3svh, 3rem);
}

.ld-fakt {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	row-gap: 0.5em;
	text-align: center;
}

.ld-fakt__wert {
	margin-block: 0 0.35em;
	font-size: clamp(1.9rem, 3.6vw, 4.5rem);
	/* Zahlen auf Sand: Regular, sonst wirken sie zu zart. */
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	/*
	 * Beim Zahlenlauf wechseln die Ziffern ständig. Tabellenziffern haben alle
	 * dieselbe Breite — ohne sie würde die Zahl beim Laufen zappeln.
	 */
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	align-self: end;
}

.ld-fakt__text {
	margin-block: 0;
}

@media (max-width: 781px) {
	.ld-fakten__reihe {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto auto auto auto;
		row-gap: 0.4em;
	}

	.ld-fakten__reihe--2 {
		margin-block-start: 2rem;
	}

	/*
	 * **Die dritte Zahl steht allein in ihrer Reihe und bekommt beide
	 * Spalten.** Drei Angaben auf zwei Spalten heißt zwei oben, eine
	 * darunter — und „46 – 195 m²" ist mit 156 Bildpunkten breiter als die
	 * 147 einer halben Spalte. Sie stand dadurch über beide Kanten hinaus.
	 * Über die ganze Breite steht sie mittig und hat Luft.
	 */
	.ld-fakten__reihe > .ld-fakt:nth-child(3) {
		grid-column: 1 / -1;
	}
}