/*
 * Abschnitt: Haidhausen
 *
 * Nachgebaut nach dem Abschnitt „Office spaces and retails" auf
 * belgradearbor.rs. Ein ganzflächiges Foto, darüber eine Spalte, die oben die
 * Riesenüberschrift trägt und unten eine Zeile mit dem Text links und der
 * Filmkachel rechts.
 *
 * Alle Maße sind in der Vorlage gemessen und auf 1512 Fensterbreite
 * umgerechnet:
 *
 *   Abstand oben und unten     7,5 rem   =  94 px  =  6,22 vw
 *   Spalte, größte Breite    117,5 rem   = 1475 px = 97,5 vw
 *   Spalte, Rand innen         4 rem     =  50 px  =  3,32 vw
 *   Überschrift               10 rem     = 125 px  =  8,30 vw   (drei Viertel breit)
 *   Textspalte                                        ein Viertel
 *   Kachelspalte                                      fünf Zwölftel, Kachel darin vier Fünftel
 *   Kachel                     1,43 : 1, Eckenradius 1,25 rem = 16 px = 1,04 vw
 *   Abstand über der Kachel    7,5 rem   =  94 px  =  6,22 vw
 *
 * Die 8,30 vw der Überschrift sind dieselbe Stufe, die auf unserer Seite schon
 * „DIE LAGE" trägt — die Vorlage nennt sie „hero".
 *
 * Was hier steht, ist Form. Schriftart und Farbe tragen die Blöcke selbst,
 * damit sie im Editor änderbar bleiben.
 */

.ld-haidhausen {
	position: relative;
	display: flex;
	align-items: stretch;
	min-height: 100svh;
	padding-block: var(--ld-haidhausen-luft);
	overflow: clip;

	--ld-haidhausen-luft: clamp(3rem, 6.22vw, 7.5rem);
	--ld-haidhausen-radius: clamp(0.75rem, 1.04vw, 1.25rem);
	--ld-haidhausen-ton: var(--wp--preset--color--schieferblau);
}

/*
 * Das Foto füllt die ganze Fläche und ragt oben und unten über sie hinaus,
 * damit es beim Scrollen wandern kann, ohne einen Streifen freizugeben. Die
 * allgemeine Regel für Bildebenen (.ld-media in base.css) reicht hier nicht:
 * Sie lässt dem Bild seine eigene Höhe, und dieser Abschnitt ist höher als das
 * Bild von sich aus wäre — unten bliebe eine graue Fläche stehen.
 */
/*
 * Der Schleier ist eine Vignette, kein Tuch über dem ganzen Bild.
 *
 * Vorher lag hier eine ganzflächige Fläche in Hofgrün tief zu 70 Prozent.
 * Sie hat die Aufnahme flachgelegt: Aus einer sonnigen Straße wurde ein
 * durchgehend grüner Bildschirm. Deshalb dunkelt der Verlauf nur oben und
 * unten ab und lässt die Mitte fast unberührt.
 *
 * Der Ton ist Schieferblau, nicht Hofgrün tief. Bei einem Schleier über
 * grauem Asphalt sind die beiden kaum zu unterscheiden — gegengeprüft auch
 * gegen Graphit; die Farbe war nie das Problem, die Fläche war es. Den
 * Ausschlag gab der Abschnitt danach: „Architektur" steht in diesem Blau.
 * Schieferblau ist heller als Hofgrün tief und muss dichter stehen, um gleich
 * weit abzudunkeln: 56 statt 45 Prozent oben, 70 statt 60 unten.
 *
 * ---------------------------------------------------------------------------
 * SEIT DEM 12.09.2026 LIEGT EIN ANDERES BILD DARUNTER, UND DIE ZAHLEN HABEN
 * SICH UMGEDREHT.
 *
 * Der Verlauf ist unverändert geblieben — die Aufnahme nicht. Die frühere
 * Straßenaufnahme war oben mittelhell und unten links hell; die jetzige
 * Morgenansicht ist heller, wo die erste Zeile steht, und dunkler, wo der
 * Fließtext steht. Blockweise zu acht Bildpunkten gemessen (das ist ungefähr
 * die x-Höhe des Fließtextes), jeweils das Fünf-Prozent-Quantil der
 * schlechtesten Stellen, Kalkweiß darauf:
 *
 *                          Aufnahme davor    jetzige Aufnahme
 *   „HAIDHAUSEN,"              3,97 : 1          2,45 : 1
 *   „WIE ES IST"               3,16 : 1          3,40 : 1
 *   Fließtext unten links      4,86 : 1          8,73 : 1
 *
 * ZWEI VON DREI STELLEN SIND BESSER GEWORDEN. Die zweite Zeile läuft über die
 * efeubewachsene Ecke und den Baum, der Fließtext über den beschatteten
 * Gehsteig — beides dunkler als vorher. Nur die erste Zeile fällt heraus: Sie
 * reicht bis in die helle Dachkante und den diesigen Himmel dahinter.
 *
 * Gemessen ist dabei nicht nach Augenmaß, sondern an den Kästen, die im
 * Browser abgelesen wurden — die Tinte der Zeile, nicht der Block darum. Das
 * ist der Unterschied zwischen 2,42 und 2,45 und der Grund, warum hier zwei
 * Zeilen einzeln stehen statt eines Mittelwerts über beide.
 *
 * DIE 2,45 SIND UNTER DER SCHWELLE VON 3,0 FÜR GROSSE SCHRIFT, UND DAS IST
 * BEWUSST SO. Gerechnet und gebaut war eine Fassung, die den Verlauf oben
 * dichter hält (66 Prozent bis zur Unterkante des Wortes statt des Abfalls auf
 * 22) und damit auf 3,46 : 1 kommt — praktisch den alten Wert. Der Kunde hat
 * beide Fassungen als Vollbild nebeneinander gesehen und sich für diese hier
 * entschieden: Die dichtere nimmt der Aufnahme das warme Morgenlicht.
 *
 * Und das ist kein Abwägen zwischen zwei Meinungen, sondern eine Rechnung:
 * Damit die Fläche unter der ersten Zeile weiße Schrift auf 3,0 trägt, muss
 * ihre Leuchtdichte von 0,33 auf unter 0,244 fallen — und bei dieser Dichte
 * bestimmt der Schleier die Farbe des Bildes und nicht mehr die Aufnahme. BEIDES ZUSAMMEN GEHT NICHT.
 *
 * Sichtbar wird es am rechten Ende der ersten Zeile, wo „…USEN," über den
 * hellen Himmel läuft. Wer das später ändern will, braucht keine neue
 * Entscheidung, sondern diese Werte:
 *
 *   66 % bei 0, 62 % bei 20 %, 56 % bei 46 %, 34 % bei 60 %, 62 % bei 78 %
 *
 * Auf dem Telefon stellt sich die Frage nicht: Dort zeigt das Bild einen ganz
 * anderen Ausschnitt, und mit dem eigenen Verlauf weiter unten stehen 3,56 : 1
 * am Wort und 5,27 : 1 am Text.
 *
 * Der Anker für das Blau ist dabei schwächer geworden: Er war der blaue Himmel
 * über der Straße, und der ist auf dem neuen Bild cremefarben. Der zweite
 * Grund trägt weiter — „Architektur" steht in diesem Blau.
 */
.ld-haidhausen::before {
	content: "";
	position: absolute;
	inset: 0;
	/*
	 * Über dem Foto, das auf null steht, und unter dem Rahmen mit dem Text,
	 * der ausdrücklich auf zwei steht.
	 *
	 * Der Rahmen stand hier lange ebenfalls auf eins und lag nur deshalb
	 * darüber, weil ein ::before vor allen Kindern gezeichnet wird. Das trägt
	 * nicht: Sobald das Menü offen ist, nimmt WordPress dem Inhalt seinen
	 * eigenen Stapelraum, und aus „später im Markup" wird „gleiche Stufe,
	 * anderer Kasten". Siehe die ausführliche Begründung in `auftakt.css`.
	 */
	z-index: 1;
	pointer-events: none;
	background-image: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--ld-haidhausen-ton) 56%, transparent) 0%,
		color-mix(in srgb, var(--ld-haidhausen-ton) 47%, transparent) 20%,
		color-mix(in srgb, var(--ld-haidhausen-ton) 22%, transparent) 40%,
		color-mix(in srgb, var(--ld-haidhausen-ton) 35%, transparent) 52%,
		color-mix(in srgb, var(--ld-haidhausen-ton) 70%, transparent) 71%,
		color-mix(in srgb, var(--ld-haidhausen-ton) 70%, transparent) 100%
	);
}

.ld-haidhausen.ld-media > .wp-block-cover__image-background {
	inset-block: calc(var(--ld-parallax-range) * -1) calc(var(--ld-parallax-range) * -1);
	block-size: calc(100% + var(--ld-parallax-range) * 2);
	inline-size: 100%;
	object-fit: cover;
}

/*
 * Die Spalte, in der alles steht. Oben die Überschrift, unten die Zeile aus
 * Text und Kachel — dazwischen der ganze übrige Platz.
 */
.ld-haidhausen__rahmen {
	position: relative;
	/* Eine Stufe über dem Schleier — siehe dort. */
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/*
	 * Kein Abstand zwischen Überschrift und unterer Zeile: Sie stehen an den
	 * beiden Enden der Spalte, und ein Mindestabstand würde den Abschnitt auch
	 * dann höher machen als einen Bildschirm, wenn genug Platz da ist. Die
	 * Vorlage setzt ihn ebenfalls erst auf schmalen Geräten.
	 */
	width: 100%;
	max-width: 97.5vw;
	/*
	 * Die Spalte muss die volle Höhe nehmen, sonst hat „space-between" nichts
	 * zu verteilen und Wort und Text stehen dicht untereinander am oberen
	 * Rand. Solange die Filmkachel da war, fiel das nicht auf: Sie machte die
	 * untere Zeile von selbst hoch genug, die Spalte war dadurch gefüllt.
	 * Kaum war die Kachel weg, rutschte der Fließtext um 237 Bildpunkte nach
	 * oben — mitten in den hellen Teil des Bildes.
	 */
	min-height: 100%;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 3.32vw, 4rem);
}

.ld-haidhausen__wort {
	width: 75%;
	margin-block: 0;
	font-size: clamp(2.75rem, 8.3vw, 10rem);
	/* Regular — eine große Überschrift, kein Aussagesatz. */
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-transform: uppercase;
	text-wrap: balance;
}

.ld-haidhausen__unten {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(0.75rem, 1.04vw, 1.25rem);
}

.ld-haidhausen__text {
	width: 25%;
	margin-block: 0;
	font-size: clamp(0.8125rem, 0.83vw, 1rem);
	line-height: 1.5;
}

/*
 * Die Kachel sitzt in einer eigenen Spalte von fünf Zwölfteln und nimmt darin
 * vier Fünftel ein — zusammen also ein Drittel der Breite. Der Abstand über ihr
 * schiebt sie gegen die Textspalte nach unten versetzt.
 */
.ld-haidhausen__spalte {
	display: flex;
	justify-content: flex-end;
	width: 41.667%;
	padding-block-start: var(--ld-haidhausen-luft);
}

.ld-haidhausen__kachel {
	position: relative;
	width: 80%;
	aspect-ratio: 1.43 / 1;
	border-radius: var(--ld-haidhausen-radius);
	overflow: hidden;
	background-color: var(--wp--preset--color--contrast);
}

/*
 * Der Film füllt die Kachel und wird dabei beschnitten — das Fenster ist
 * fast quadratisch, eine Aufnahme im Querformat also breiter. Beim Drehen
 * gehört das Wichtige deshalb in die Mitte.
 */
.ld-haidhausen__film,
.ld-haidhausen__film img,
.ld-haidhausen__film video {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

/* --------------------------------------------------------------- Abschied */

/*
 * Am Ende hängt der Inhalt zurück, während der folgende Abschnitt ihn
 * überholt. Erklärung und Maß stehen bei --ld-abschied-weg in base.css. Das
 * Foto bleibt stehen — es trägt die Fläche.
 */
.ld-haidhausen__rahmen {
	translate: 0 calc(var(--ld-abschied, 0) * var(--ld-abschied-weg));
}

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

/*
 * Auf schmalen Geräten stehen Text und Kachel untereinander statt nebeneinander
 * — so macht es die Vorlage auch. Die Kachel rückt dabei nach rechts.
 */
@media (width <= 60rem) {
	/*
	 * Der Schleier läuft hier andersherum, und das folgt der anderen
	 * Aufteilung: Am Schreibtisch steht das Wort ganz oben und der Text ganz
	 * unten, dazwischen ist das Bild frei. Auf dem Telefon stehen beide
	 * untereinander und füllen die oberen sechs Zehntel — darunter ist gar
	 * nichts mehr. Der helle Mittelteil des Schreibtisch-Verlaufs läge also
	 * genau unter dem Fließtext, und der dichte Fuß über leerem Bild.
	 *
	 * Deshalb deckt er oben durchgehend und gibt nach unten frei. Das untere
	 * Drittel zeigt die Straße dann fast unverschleiert — es ist der einzige
	 * Teil des Bildschirms ohne Text, und die Aufnahme ist der Grund, warum
	 * dieser Abschnitt überhaupt da ist.
	 *
	 * Gemessen bei 375 Bildpunkten, wo das Bild einen ganz anderen Ausschnitt
	 * zeigt — hochkant beschnitten, der weite Himmel fällt dabei weitgehend
	 * heraus. Kalkweiß darauf, Fünf-Prozent-Quantil:
	 *
	 *                       Aufnahme davor    jetzige Aufnahme
	 *   Riesenwort               5,38 : 1          3,56 : 1
	 *   Fließtext                5,41 : 1          5,27 : 1
	 *
	 * Beides liegt über den Schwellen (3,0 und 4,5). Anders als am
	 * Schreibtisch, wo das Wort auf 2,38 steht, braucht es hier also nichts —
	 * nachgemessen am 12.09.2026 beim Bildwechsel.
	 */
	.ld-haidhausen::before {
		background-image: linear-gradient(
			to bottom,
			color-mix(in srgb, var(--ld-haidhausen-ton) 66%, transparent) 0%,
			color-mix(in srgb, var(--ld-haidhausen-ton) 62%, transparent) 58%,
			color-mix(in srgb, var(--ld-haidhausen-ton) 28%, transparent) 100%
		);
	}

	.ld-haidhausen__wort {
		width: 100%;
	}

	.ld-haidhausen__unten {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ld-haidhausen-luft);
	}

	.ld-haidhausen__text {
		width: 66.667%;
	}

	.ld-haidhausen__spalte {
		align-self: flex-end;
		width: 66.667%;
		padding-block-start: 0;
	}

	.ld-haidhausen__kachel {
		width: 100%;
	}

	/*
	 * **Auf dem Telefon nach Arbors `#BusinessSpaces`**, 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)                                       |
	 * |--------------|-----------------------------------------------------|
	 * | Riesenwort   | 46,1 Versalien, drei Viertel breit, Oberkante 154   |
	 * | Absatz       | drei Viertel breit, **rechts**, 46 darunter, 15,4   |
	 * | Kachel       | drei Viertel rechts — bei uns stillgelegt           |
	 * | Rand unten   | 115, Seitenrand 23                                  |
	 * | Ausschnitt   | bei uns 85 % nach rechts, die Straße in die Tiefe   |
	 *
	 * Der Zeilenabstand bleibt bei Arbors 1,2, wie in „Die Lage" — vom Kunden
	 * dort so entschieden.
	 */
	@media (max-width: 767px) {
		/* Der Cover-Block bringt eigenes Polster mit (48 / 16); die Maße stehen am Rahmen. */
		.wp-block-cover.ld-haidhausen {
			padding: 0;
		}

		/*
		 * Der Ausschnitt rückt nach rechts: Die Straße läuft dann bis in die
		 * Tiefe, statt dass die Fassade das Bild füllt. Vom Kunden aus drei
		 * Fassungen gewählt (60, 70, 85 Prozent).
		 */
		.ld-haidhausen .wp-block-cover__image-background {
			object-position: 85% 50%;
		}

		.ld-haidhausen__rahmen {
			box-sizing: border-box;
			max-width: none;
			justify-content: flex-start;
			gap: 2.88rem;
			padding: 9.6rem 1.4375rem 7.2rem;
		}

		.ld-haidhausen__wort {
			width: 75%;
			font-size: 2.88rem;
		}

		.ld-haidhausen__unten {
			align-items: flex-end;
		}

		.ld-haidhausen__text {
			width: 75%;
			font-size: 0.96rem;
			line-height: 1.2;
		}
	}
}