/*
 * Abschnitt: Umgebung
 *
 * Links eine Liste der zehn Orte, rechts eine Karte von Haidhausen in
 * Schrägsicht mit den beiden Häusern in der Mitte. Wer einen Ort anfährt, sieht
 * die Kamera hinfahren, ein Foto über der Nadel und unter der Liste die Wege
 * und eine kurze Einordnung.
 *
 * Aufbau, gemessen an belgradearbor.rs („What's around"):
 * Karte 70 vw breit im Seitenverhältnis 16 zu 9, rechtsbündig und mittig,
 * Eckenradius 1,04 vw; links eine Spalte von einem knappen Drittel mit
 * Versalien-Marke, Liste, Trennlinie und darunter dem Textblock.
 *
 * Was hier steht, ist Form: Grad, Laufweite, Anordnung, Bewegung. Schriftart
 * und Farbe tragen die Blöcke selbst, damit sie im Editor änderbar bleiben.
 *
 * Die Karte selbst — Nadeln, Beschriftungen, Fotos und die beiden Baukörper —
 * baut assets/js/sections/umgebung.js. Ohne Skript, bei reduzierter Bewegung
 * und auf schmalen Geräten entfällt sie; dann stehen die zehn Orte
 * untereinander, mit Foto, Wegen und Text.
 */

.ld-umgebung {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100svh;
	overflow: clip;

	/* Wo die zehn Orte auf der Karte liegen. Die Karte reicht 939,9 Meter
	   nach jeder Seite; ein Prozent entspricht also 18,8 Metern. Die Werte
	   stammen aus den Koordinaten der Orte, nicht aus dem Augenmaß. */
	--ld-umgebung-karte-b: 70vw;
	/*
	 * In der Vorlage ist der Textblock 584 Pixel breit und beginnt 152 Pixel
	 * vom Rand — beides bei 2056 gemessen. Die Spalte trägt den Einzug als
	 * Innenabstand, ihre Gesamtbreite ist deshalb die Summe: 7,4 + 28,4 vw.
	 * Nur mit 28,4 vw blieben dem Text 432 Pixel statt 584, und die längeren
	 * Ortsnamen brächen um — was den Abschnitt über einen Bildschirm hinaus
	 * wachsen ließ.
	 */
	--ld-umgebung-spalte-b: clamp(22rem, 35.8vw, 41rem);

	/* Maße der Marke auf der Karte, in Bildschirmpunkten gemessen an der
	   Vorlage: das Foto 199 auf 138 bei 1512 Fensterbreite. */
	--ld-umgebung-bild-b: clamp(9rem, 13.16vw, 15rem);
	--ld-umgebung-bild-h: calc(var(--ld-umgebung-bild-b) / 1.442);
	--ld-umgebung-stiel: clamp(0.75rem, 1.19vw, 1.25rem);
	--ld-umgebung-kopf: clamp(0.5rem, 0.73vw, 0.75rem);
	--ld-umgebung-luft: clamp(0.5rem, 0.79vw, 0.875rem);
	--ld-umgebung-schild: clamp(1rem, 1.32vw, 1.5rem);
	--ld-umgebung-radius: clamp(0.75rem, 1.04vw, 1.25rem);

	/*
	 * Das Bildzeichen über den Häusern: gut dreimal so groß wie ein Nadelkopf.
	 * Es schwebt hoch genug, dass sein Strich über den Dächern endet — liefe er
	 * bis zum Boden durch, kreuzte er die beiden Baukörper, denn die Marken
	 * liegen vor der Karte und nicht dahinter.
	 */
	--ld-umgebung-zeichen-b: clamp(2rem, 2.9vw, 3.25rem);

	/*
	 * **Das Seitenverhältnis der Marke, Breite durch Höhe.** Die Breite ist
	 * hier das Maß und die Höhe folgt — anders als in der Kopfzeile, wo es
	 * umgekehrt ist. Grund: Über den Häusern zählt, wie weit die Marke
	 * seitlich ausgreift; sie soll die beiden Baukörper nicht überragen. Auf
	 * dieser Breite steht der Schriftzug fast genauso groß da wie oben in der
	 * Pille — 60 auf 21 gegen 67 auf 24.
	 *
	 * Eine andere Marke braucht hier nur diese eine Zahl.
	 *
	 * **Seit dem 01.10.2026 steht hier „metz28" mit 3,941 : 1** — dieselbe
	 * Marke wie in der Pille, vom Kunden so gewünscht. **Die Breite bleibt
	 * bei 60 Bildpunkten**, die Schrift wird dadurch kleiner: 15,2 statt
	 * 21,4 hoch.
	 *
	 * **Der Grund ist nachgemessen, nicht gewählt.** Die beiden Baukörper
	 * spannen in der Übersicht zusammen **49 Bildpunkte**; die Marke ragt mit
	 * ihren 60 schon heute gut fünf Bildpunkte je Seite darüber hinaus. Auf
	 * gleiche Schriftgröße gebracht wären es 85 — fast das Doppelte des
	 * Ensembles, und aus der Marke über den Häusern würde eine Beschriftung
	 * des halben Innenhofs. Hier zählt weiter, wie weit sie seitlich
	 * ausgreift.
	 */
	--ld-umgebung-zeichen-v: 3.941;
	--ld-umgebung-zeichen-hoehe: clamp(3.4rem, 5.2vw, 5.75rem);
	--ld-umgebung-zeichen-stiel: clamp(1rem, 1.5vw, 1.6rem);

	/*
	 * Die Töne der Baukörper sind keine eigenen Farben, sondern Mischungen aus
	 * der Palette — von der besonnten Dachkappe bis zur Schattenwand. Jedes
	 * Haus bekommt dabei seine echte Farbe: das Rückgebäude steht in Card Room
	 * Green, das Vorderhaus im hellen Putz mit Perlmausgrau im Schatten.
	 */
	--ld-haus-grund: var(--wp--preset--color--surface);
	--ld-haus-schatten: var(--wp--preset--color--muted);
}

/*
 * Wo die zehn Orte auf der Karte liegen. Ein Prozent entspricht 18,8 Metern;
 * die Werte stammen aus den Koordinaten der Orte. Sie stehen hier und nicht im
 * Markup, weil eigene data-Attribute im Block-Markup nichts zu suchen haben.
 *
 * Gerechnet wird ab der Metzstraße 28 (48,1301629 / 11,5988953), die auf
 * 50/50 liegt: x = 50 + Ost/18,798, y = 50 − Nord/18,798. Die Umrechnung ist
 * an den vorhandenen Nadeln geprüft — der Stationsknoten des Rosenheimer
 * Platzes rechnet sich zu 26,995/55,795 gegen die hier stehenden
 * 26,976/55,783, also auf zwei Hundertstel Prozent.
 *
 * Die drei Orte der Mobilität liegen alle innerhalb des Kartenausschnitts;
 * die Behandlung weit entfernter Orte am Kartenrand (Punkt ohne Stiel plus
 * waagrechter Pfeil, so wie in der Vorlage) wird deshalb nicht gebraucht.
 */
.ld-umgebung__ort--bordeauxplatz { --ld-ort-x: 57.027%; --ld-ort-y: 49.764%; }
.ld-umgebung__ort--franziskus-grundschule { --ld-ort-x: 67.471%; --ld-ort-y: 42.483%; }
.ld-umgebung__ort--grundschule-kirchenstrasse { --ld-ort-x: 52.782%; --ld-ort-y: 23.950%; }
/* Seit 25.10.2026 nach Markierung des Kunden: Mitte zwischen seinen beiden Kreuzen auf der S-Bahn-Linie (vorher 26,976 / 55,783, der Stationsknoten). */
.ld-umgebung__ort--rosenheimer-platz { --ld-ort-x: 31.730%; --ld-ort-y: 58.728%; }
.ld-umgebung__ort--wiener-platz { --ld-ort-x: 38.834%; --ld-ort-y: 25.311%; }
/* Seit 25.10.2026 statt des Gasteigs (Kunde): 48,128546 / 11,596171, Wikipedia. */
.ld-umgebung__ort--weissenburger-platz { --ld-ort-x: 39.223%; --ld-ort-y: 59.559%; }
.ld-umgebung__ort--muellersches-volksbad { --ld-ort-x: 8.633%; --ld-ort-y: 37.663%; }
.ld-umgebung__ort--werksviertel-mitte { --ld-ort-x: 75.264%; --ld-ort-y: 78.259%; }
/*
 * Seit 25.10.2026 nach Markierung des Kunden: die Halteplätze der Tram
 * Richtung St.-Veit-Straße (OSM, „Wörthstraße, Stop Tram 19/N19“,
 * 48,131967/11,598104 und 48,131815/11,598244), Mitte aus beiden. Vorher
 * 44,539 / 40,046 — der Haltestellenpunkt am Bahnsteig der Tram 15/25.
 */
.ld-umgebung__ort--tram-woerthstrasse { --ld-ort-x: 47.149%; --ld-ort-y: 39.783%; }
.ld-umgebung__ort--ostbahnhof { --ld-ort-x: 67.773%; --ld-ort-y: 58.587%; }
.ld-umgebung__ort--max-weber-platz { --ld-ort-x: 46.051%; --ld-ort-y: 17.430%; }

/* ------------------------------------------------------------------ Spalte */

.ld-umgebung__spalte {
	position: relative;
	z-index: 2;
	width: var(--ld-umgebung-spalte-b);
	/*
	 * Alle vier Maße in der Vorlage gemessen, bei 2056 × 1203: Die Spalte
	 * beginnt 152 Pixel vom linken Rand und 80 unter der Oberkante — also
	 * deutlich weiter oben, als ein mittig stehender Block sie setzen würde.
	 */
	/*
	 * Oben angeschlagen statt mittig: Der Abschnitt zentriert seine Kinder
	 * senkrecht, und dabei hängt die Höhe der Spalte davon ab, wie viele
	 * Ortsnamen umbrechen. Mittig gesetzt wanderte die Spalte also mit dem
	 * Fensterformat und mit der Textlänge. Angeschlagen sind die 6,65 svh der
	 * Vorlage auf jedem Bildschirm dieselben.
	 */
	/*
	 * **Die Spalte reicht über die volle Höhe, und der Textblock sitzt an
	 * ihrem Fuß.** Vom Kunden so gewünscht: Die Erklärung unten links soll
	 * immer an derselben Stelle stehen, egal welcher Reiter offen ist und wie
	 * lang die Liste gerade ist. Die Liste dehnt sich dafür (`flex: 1`), ihr
	 * Inhalt bleibt oben, und ihre untere Kante — die Trennlinie — liegt
	 * damit immer unmittelbar über dem Textblock.
	 *
	 * Vorher war die Spalte oben angeschlagen und wuchs nach unten; die
	 * Trennlinie wanderte dann mit der Länge der offenen Gruppe.
	 */
	align-self: stretch;
	display: flex;
	flex-direction: column;
	/* blockGap: WordPress gibt der Spalte 30 Pixel oberen Rand. */
	margin-block: 0;
	padding-block-start: 6.65svh;
	padding-block-end: var(--wp--preset--spacing--50);
	padding-inline-start: 7.4vw;
}

/*
 * Dieselbe Zeile wie die Kennzeichnung „Metzstraße achtundzwanzig" im
 * Abschnitt „Die Idee" — Grad und Laufweite identisch. Die weite Laufweite von
 * .ld-label wäre hier ein zweiter Auftritt derselben Sache in anderer Form.
 */
.ld-umgebung__kennung {
	/* 20 Pixel bei 2056, Zeilenhöhe 30 — beides in der Vorlage gemessen. */
	margin-block-end: 0;
	font-size: clamp(0.75rem, 0.97vw, 1.1rem);
	letter-spacing: 0.02em;
	line-height: 1.5;
}

/*
 * Die Liste legt das Skript an — je Ort eine Zeile, deren Text aus der
 * Überschrift des Ortes stammt. Stünde sie zweimal im Markup, müsste der Kunde
 * denselben Namen an zwei Stellen ändern.
 */
.ld-umgebung__liste {
	position: relative;
	margin: 0;
	/*
	 * 48 Pixel über der ersten Zeile — in der Vorlage gemessen, es ist der
	 * Abstand unter der Zeile „UMGEBUNG".
	 *
	 * **Unten standen dort 60, jetzt sind es 25.** Die 60 trennten in der
	 * Vorlage die letzte Listenzeile von der Linie darunter. Seit die Liste
	 * sich dehnt, liegt zwischen beiden ohnehin viel Luft — sichtbar wird
	 * das Polster nur noch im engsten Fall, und genau dort kostet es die
	 * Bildschirmhöhe.
	 */
	padding: 2.33vw 0 1.2vw;
	list-style: none;
	border-block-end: 1px solid var(--wp--custom--line);

	/*
	 * **Die Liste nimmt den freien Platz auf, ihr Inhalt bleibt oben.**
	 * Dadurch liegt ihre untere Kante — und damit die Trennlinie — immer an
	 * derselben Stelle, dicht über dem Textblock, ganz gleich wie viele
	 * Zeilen die offene Gruppe hat.
	 *
	 * **Eine gerechnete Mindesthöhe stand hier einen Anlauf lang** und hielt
	 * die Höhe der größten Gruppe frei. Sie ist weg: Was der Fuß der Spalte
	 * ohnehin erledigt, soll nicht ein zweites Mal im Skript stehen.
	 */
	box-sizing: border-box;
	flex: 1 1 auto;
}

/*
 * Die Liste steht in PP Editorial Old Light (300), mit dem Ausgleich
 * `--ld-light-lauf` — siehe base.css.
 *
 * Schriftart und Schnitt stehen hier und nicht am Block, weil es für die Liste
 * keinen Block gibt: Sie entsteht im Skript aus den Namen der Orte. Früher
 * übernahm sie die Schriftwahl von der Überschrift des Ortes — das ging nicht
 * mehr, seit diese Überschrift als kleine Versalien-Zeile in Work Sans steht.
 */
.ld-umgebung__liste li {
	font-family: var(--wp--preset--font-family--heading);
	/*
	 * Zeilenhöhe 1,0, Laufweite 0,02 em und Polster 0,286 em sind in der
	 * Vorlage gemessen. Dort steht die Liste in Light (300), bei uns
	 * seit dem 28.10.2026 ebenso.
	 *
	 * **Der Grad ist nicht ihre Zahl, und das hat einen Grund.** Sie misst
	 * 2,72 vw — in einer Spalte, in der die Liste das Einzige ist. Bei uns
	 * stehen darüber zwei Gruppennamen und darunter der Textblock, und die
	 * größere Gruppe hat seit dem 01.10.2026 sieben Zeilen. Mit 2,72 vw
	 * stand der Abschnitt bei 1203 Fensterhöhe auf 1370 Bildpunkten und war
	 * damit über einen Bildschirm hoch. **Eine gemessene Zahl trägt ihre
	 * Bedingung mit** — hier war die Bedingung eine Liste ohne Gruppen.
	 *
	 * 2,2 vw sind nachgemessen der größte Grad, bei dem die sieben Zeilen
	 * der Nachbarschaft samt Gruppennamen und Textblock auf einem 1147
	 * Bildpunkte hohen Fenster noch ganz hineinpassen.
	 */
	font-size: clamp(1.3rem, 2.2vw, 2.75rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: calc(0.02em + var(--ld-light-lauf));
	color: var(--wp--preset--color--primary);
	padding-block: 0.286em;
	cursor: default;
	transition: color 0.35s ease;
}

.ld-umgebung__liste li.is-an {
	color: var(--wp--preset--color--contrast);
}

/* ------------------------------------------ Nachbarschaft und Mobilität */

/*
 * **Zwei Gruppen, die sich aufklappen.** Vom Kunden so gewünscht: zwei große
 * Menüpunkte, darunter die Orte. Die Gruppennamen tragen jetzt den Grad, den
 * vorher die Orte hatten — sie sind die Menüpunkte, die Orte die Einträge
 * darin.
 *
 * **Und genau das macht den Abschnitt wieder tragbar.** Die Spalte ist einen
 * Bildschirm hoch; sieben Orte in voller Größe füllten sie schon, seit dem
 * 01.10.2026 sind es zehn. Zwei Überschriften plus eine offene Gruppe passen
 * dagegen immer — die längere der beiden hat sechs Zeilen.
 */
.ld-umgebung__gruppe {
	padding: 0;
	cursor: default;
}

/*
 * **Die Gruppen stehen in Work Sans, die Orte in PP Editorial Old.**
 * Vom Kunden so entschieden: Beide Ebenen in derselben Displayschrift waren
 * nicht auseinanderzuhalten. Jetzt trägt die Schrift den Unterschied —
 * Nachbarschaft und Mobilität sind kleine Versalien wie die Zeile
 * „UMGEBUNG" darüber, die Ortsnamen sind wieder das Große.
 *
 * **Das folgt der Schnitt-Regel des Themes**, es ist keine Ausnahme: Kleine
 * Beschriftungen gehören in Work Sans, Aussagen in Displaygröße in PP
 * Editorial Old. Die Gruppennamen sind Wegweiser, die Ortsnamen die Aussage.
 *
 * Grad, Laufweite und Zeilenhöhe sind dieselben wie bei der Kennung oben;
 * unterschieden werden die beiden über Farbe und Schnitt — 500 gegen 400.
 */
.ld-umgebung__gruppenkopf {
	display: block;
	width: 100%;
	margin: 0;
	/*
	 * 0,6 em oben und unten sind zugleich der Abstand, der die Gruppen
	 * voneinander trennt, seit sie nicht mehr durch ihre Größe auffallen.
	 * Mehr ginge nicht: Die Spalte ist genau einen Bildschirm hoch, und die
	 * größere Gruppe hat sieben Zeilen.
	 */
	padding-block: 0.6em;
	padding-inline: 0;
	border: 0;
	background: none;
	/*
	 * **Die offene Gruppe steht in Bronze, die geschlossene leiser in Card
	 * Room Green tief.** Beides vom Kunden gewünscht.
	 *
	 * **Bronze ist Terrakotta-Rosé, textsicher gemacht** — dieselbe
	 * Beziehung wie zwischen Card Room Green und Card Room Green tief. Der
	 * Palettenton selbst steht auf diesem Grund bei **2,71 zu 1** und trägt
	 * damit nicht einmal große Schrift; abgedunkelt sind es **4,52**, also
	 * genug für diese kleinen Versalien. Gerechnet, nicht geschätzt: Die
	 * linearen Kanäle sind mit demselben Faktor multipliziert, der Farbton
	 * bleibt deshalb erhalten.
	 *
	 * Card Room Green tief trägt mit 4,97 ebenfalls kleine Schrift;
	 * Perlmausgrau käme mit 3,00 nicht hin, Card Room Green mit 3,53
	 * ebensowenig.
	 */
	color: var(--wp--preset--color--primary-deep);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(0.75rem, 0.97vw, 1.1rem);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: start;
	cursor: pointer;
	transition: color 0.35s ease;
}

.ld-umgebung__gruppe.is-offen .ld-umgebung__gruppenkopf {
	color: var(--wp--preset--color--accent-deep);
}

@media (hover: hover) {
	.ld-umgebung__gruppenkopf:hover {
		color: var(--wp--preset--color--accent-deep);
	}
}

/*
 * **Aufgeklappt wird über die Zeilenhöhe des Rasters, nicht über `height`.**
 * `0fr` auf `1fr` fährt auf die echte Höhe des Inhalts, ohne dass sie jemand
 * vorher messen müsste — und ohne den Umbruch je Einzelbild, den eine
 * wandernde Höhe erzwingt.
 */
.ld-umgebung__fach {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ld-umgebung__gruppe.is-offen .ld-umgebung__fach {
	grid-template-rows: 1fr;
}

.ld-umgebung__fachliste {
	min-height: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * **Die Orte stehen wieder in voller Größe** — denselben 2,72 vw wie vor der
 * Gruppierung, in der Vorlage gemessen. Sie waren eine Stufe kleiner, solange
 * die Gruppen über ihnen dieselbe Schrift trugen; seit die Gruppen Work Sans
 * sind, braucht es diese zweite Stufe nicht mehr.
 *
 * **Und der Einzug ist weg.** Er war das dritte Mittel, die Stufe zu zeigen —
 * bei diesem Grad wären das rund vierzig Bildpunkte, und die Liste stünde
 * sichtbar neben der Kennung darüber statt unter ihr.
 */
.ld-umgebung__fachliste li {
	padding-block: 0.286em;
}

/*
 * Der Strich links wandert zwischen den Zeilen, statt an jeder Zeile einzeln
 * zu erscheinen. So macht es die Vorlage, und die Bewegung verbindet die
 * Zeilen sichtbar miteinander.
 */
.ld-umgebung__strich {
	position: absolute;
	inset-inline-start: calc(-1 * var(--wp--preset--spacing--20));
	inset-block-start: 0;
	width: 2px;
	background-color: var(--wp--preset--color--primary);
	opacity: 0;
	transition: transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1),
		height 0.35s cubic-bezier(0.645, 0.045, 0.355, 1),
		opacity 0.35s ease;
	pointer-events: none;
}

/* -------------------------------------------------------------- Textblock */

/*
 * Unter der Trennlinie steht immer nur ein Ort. Alle sieben liegen dafür
 * übereinander; das Skript blendet den gewählten ein. Die Höhe richtet sich
 * nach dem längsten Text, damit die Linie darüber nicht springt.
 */
.ld-umgebung.is-bereit .ld-umgebung__orte {
	position: relative;
	margin-block-start: var(--wp--preset--spacing--30);
	/*
	 * **Die Höhe richtet sich nach dem längsten Text — und der ist
	 * nachgemessen.** Bei 2056 Fensterbreite braucht der längste Eintrag
	 * 183,7 Bildpunkte, also 9,19 rem; hier standen 12. Die Luft kostete
	 * den Abschnitt seine Bildschirmhöhe, seit die Ortsnamen wieder groß
	 * sind.
	 */
	min-height: 9.5rem;
}

.ld-umgebung.is-bereit .ld-umgebung__ort {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translateY(0.5rem);
	pointer-events: none;
	transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1),
		transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.ld-umgebung.is-bereit .ld-umgebung__ort.is-an {
	opacity: 1;
	transform: translateY(0);
}

/*
 * Der Name wird unter der Linie zur kleinen Versalien-Zeile. Grad, Laufweite
 * und Zeilenhöhe in der Vorlage gemessen: 20 Pixel bei 2056, Laufweite 0,4
 * Pixel — also 0,02 em. Vorher standen hier 0,22 em, elfmal so weit.
 */
.ld-umgebung.is-bereit .ld-umgebung__name {
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.02em;
	line-height: 1.5;
	text-transform: uppercase;
	margin-block: 0 0.9em;
}

.ld-umgebung__wege {
	display: flex;
	margin-block: 0 0.9em;
}

.ld-umgebung__weg {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-block: 0;
	/* 16 Pixel bei 2056 und keine Laufweite — beides in der Vorlage gemessen. */
	font-size: clamp(0.7rem, 0.78vw, 0.95rem);
	letter-spacing: normal;
}

/*
 * Die beiden Angaben trennt ein feiner Strich, wie in der Vorlage.
 */
.ld-umgebung__weg--rad {
	padding-inline-end: 1.2em;
}

.ld-umgebung__weg--fuss {
	padding-inline-start: 1.2em;
	border-inline-start: 1px solid var(--wp--custom--line);
}

/*
 * Die beiden Zeichen sind Masken: Sie geben nur die Form vor, die Farbe kommt
 * aus dem Token. Neue Zeichen brauchen eine Datei in assets/images/symbole/
 * und eine Zeile hier.
 */
.ld-umgebung__weg::before {
	content: "";
	flex: none;
	width: 1.6em;
	height: 1.6em;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.ld-umgebung__weg--rad::before {
	-webkit-mask-image: url("../../images/symbole/fahrrad.svg");
	mask-image: url("../../images/symbole/fahrrad.svg");
}

.ld-umgebung__weg--fuss::before {
	-webkit-mask-image: url("../../images/symbole/fuss.svg");
	mask-image: url("../../images/symbole/fuss.svg");
}

.ld-umgebung__text {
	margin-block: 0;
	/*
	 * 16 Pixel bei 2056, wie in der Vorlage. Die Zeilenhöhe ist mit 1,4 eine
	 * bewusste Abweichung: Dort steht 1,2, und daran stoßen im Deutschen die
	 * Umlaute an die Zeile darüber.
	 */
	font-size: clamp(0.7rem, 0.78vw, 0.95rem);
	line-height: 1.4;
}

/*
 * Das Foto steht auf der Karte, nicht im Textblock. Die Regel greift bewusst
 * nur innerhalb eines Ortes — die Kopie in der Marke liegt außerhalb und
 * bleibt davon unberührt.
 */
.ld-umgebung.is-bereit .ld-umgebung__ort .ld-umgebung__bild {
	display: none;
}

/* ------------------------------------------------------------------- Karte */

.ld-umgebung__karte {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 0;
	z-index: 1;
	width: var(--ld-umgebung-karte-b);
	aspect-ratio: 16 / 9;
	transform: translateY(-50%);
	border-radius: var(--ld-umgebung-radius);
	overflow: hidden;

	/*
	 * Der Rand blendet weich aus, sonst endete die Karte an einer Kante mitten
	 * im Stadtplan. Dieselbe Bauart wie in der Vorlage, dort als SVG-Maske.
	 */
	-webkit-mask-image: radial-gradient(ellipse 98% 106% at 50% 50%, #000 62%, transparent 94%);
	mask-image: radial-gradient(ellipse 98% 106% at 50% 50%, #000 62%, transparent 94%);
}

/* Solange das Skript nicht gelaufen ist, nimmt die Karte keinen Platz ein. */
.ld-umgebung:not(.is-bereit) .ld-umgebung__karte {
	display: none;
}

.ld-umgebung__raum {
	position: absolute;
	inset: 0;
	perspective: 1300px;
	perspective-origin: 50% 34%;
}

/*
 * Die Bodenfläche trägt den Stadtplan und liegt gekippt im Raum. Ihre Größe in
 * Pixeln setzt das Skript, weil die Rechnung in der Schrägsicht Pixel braucht;
 * sie wächst mit der Bühne mit.
 */
.ld-umgebung__boden {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	/* blockGap, siehe die Ebene darüber. */
	margin-block: 0;
	transform-style: preserve-3d;
	transform: rotateX(var(--ld-kipp, 60deg))
		translate3d(var(--ld-vx, 0px), var(--ld-vy, 0px), 0)
		scale(var(--ld-zoom, 1));
	transition: transform 1.1s cubic-bezier(0.645, 0.045, 0.355, 1);
	background-image: url("../../images/karte-haidhausen.svg");
	background-size: cover;
	background-position: center;
}

/* Beim Suchen der Kamerastellung wird gemessen, nicht gefahren. */
.ld-umgebung__boden.is-sofort {
	transition: none;
}

.ld-umgebung__anker {
	position: absolute;
	width: 0;
	height: 0;
}

/* --------------------------------------------------------------- Baukörper */

/*
 * Vorderhaus: heller Putz. Die Fassadenfarbe steht noch nicht fest — bis
 * dahin der Kalkton der Palette.
 */
.ld-umgebung__haus--vorderhaus {
	--ld-haus-hell: color-mix(in srgb, var(--ld-haus-grund) 92%, var(--ld-haus-schatten));
	--ld-haus-dach-hell: color-mix(in srgb, var(--ld-haus-grund) 68%, var(--ld-haus-schatten));
	--ld-haus-mittel: color-mix(in srgb, var(--ld-haus-grund) 52%, var(--ld-haus-schatten));
	--ld-haus-dach-dunkel: color-mix(in srgb, var(--ld-haus-grund) 38%, var(--ld-haus-schatten));
	--ld-haus-dunkel: color-mix(in srgb, var(--ld-haus-grund) 26%, var(--ld-haus-schatten));
}

/*
 * Rückgebäude: Card Room Green, die tatsächliche Fassadenfarbe des Neubaus.
 */
.ld-umgebung__haus--rueckgebaeude {
	--ld-haus-hell: color-mix(in srgb, var(--wp--preset--color--primary) 74%, var(--wp--preset--color--base));
	--ld-haus-dach-hell: color-mix(in srgb, var(--wp--preset--color--primary) 88%, var(--wp--preset--color--base));
	--ld-haus-mittel: var(--wp--preset--color--primary);
	--ld-haus-dach-dunkel: color-mix(in srgb, var(--wp--preset--color--primary) 78%, var(--wp--preset--color--contrast));
	--ld-haus-dunkel: color-mix(in srgb, var(--wp--preset--color--primary) 62%, var(--wp--preset--color--contrast));
}

.ld-umgebung__haus {
	position: absolute;
	transform-style: preserve-3d;
	transform: translate(-50%, -50%) rotate(var(--ld-haus-dreh));
}

.ld-umgebung__haus span {
	position: absolute;
	display: block;
}

.ld-umgebung__wand {
	width: 100%;
	height: var(--ld-haus-wand);
}

.ld-umgebung__wand--vorn {
	inset-inline-start: 0;
	inset-block-end: 0;
	transform-origin: bottom center;
	transform: rotateX(-90deg);
}

.ld-umgebung__wand--hinten {
	inset-inline-start: 0;
	inset-block-start: 0;
	transform-origin: top center;
	transform: rotateX(90deg);
}

.ld-umgebung__wand--links {
	inset-inline-start: 0;
	inset-block-start: 0;
	width: var(--ld-haus-wand);
	height: 100%;
	transform-origin: left center;
	transform: rotateY(-90deg);
}

.ld-umgebung__wand--rechts {
	inset-inline-end: 0;
	inset-block-start: 0;
	width: var(--ld-haus-wand);
	height: 100%;
	transform-origin: right center;
	transform: rotateY(90deg);
}

/*
 * Jede Dachfläche sitzt in einer eigenen Drehebene: Der Rahmen dreht sich in
 * der Grundfläche auf seine Seite, die Fläche darin klappt nur noch um ihre
 * Traufkante hoch. Sonst müsste man drei Drehungen ineinanderrechnen.
 */
.ld-umgebung__rahmen {
	inset-inline-start: 50%;
	inset-block-start: 50%;
	width: 0;
	height: 0;
	transform-style: preserve-3d;
}

.ld-umgebung__dach {
	inset-inline-start: 0;
	inset-block-start: 0;
	transform-origin: top center;
}

.ld-umgebung__knick {
	inset-inline-start: 50%;
	inset-block-start: 50%;
}

/* ------------------------------------------------------------------ Marken */

/*
 * Nadeln, Beschriftungen und Fotos liegen flach vor der Karte, nicht auf ihr.
 * Lägen sie auf der gekippten Fläche, schrumpften sie beim Herauszoomen mit
 * und würden von der Perspektive schief gezogen — je weiter außen, desto mehr.
 * Das Skript setzt nur ihren Ort; Größe und Form bleiben in jeder
 * Kamerastellung gleich.
 */
/*
 * **blockGap, der achte Fall — und er hat jede Beschriftung auf der Karte
 * dreißig Bildpunkte zu tief gesetzt.** Die Ebene ist ein Kind der
 * Karten-Gruppe und bekommt von WordPress einen oberen Rand; mit `inset: 0`
 * zeigt sich das nicht als Verschiebung, sondern als um denselben Betrag
 * kleinere Fläche, die oben tiefer anfängt. `stelle()` rechnet die Marken
 * gegen die **Bühne** aus und setzt sie in die **Ebene** — die Differenz
 * landet also unbesehen in jeder Marke.
 *
 * Aufgefallen ist es, weil „Werksviertel-Mitte" unten rechts angeschnitten
 * stand: Rechnerisch lag die Beschriftung 1,3 Bildpunkte über der Kante,
 * gezeichnet 28,7 darunter. Genau die dreißig.
 */
.ld-umgebung__schicht {
	position: absolute;
	inset: 0;
	margin-block: 0;
	pointer-events: none;
}

.ld-umgebung__marke {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 0;
	height: 0;
	opacity: 0.55;
	transition: opacity 0.35s ease;
}

.ld-umgebung__marke.is-an {
	opacity: 1;
	z-index: 2;
}

.ld-umgebung__marke span,
.ld-umgebung__marke figure {
	position: absolute;
	margin: 0;
}

.ld-umgebung__stiel {
	inset-inline-start: -0.5px;
	inset-block-start: calc(-1 * var(--ld-umgebung-stiel));
	width: 1px;
	height: var(--ld-umgebung-stiel);
	background-color: var(--wp--preset--color--accent);
	transition: background-color 0.35s ease;
}

.ld-umgebung__kopf {
	inset-inline-start: calc(-0.5 * var(--ld-umgebung-kopf));
	inset-block-start: calc(-1 * (var(--ld-umgebung-stiel) + var(--ld-umgebung-kopf) * 0.72));
	width: var(--ld-umgebung-kopf);
	height: var(--ld-umgebung-kopf);
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	transition: background-color 0.35s ease, transform 0.35s ease;
}

.ld-umgebung__marke.is-an .ld-umgebung__kopf {
	background-color: var(--wp--preset--color--primary);
	transform: scale(1.35);
}

.ld-umgebung__marke.is-an .ld-umgebung__stiel {
	background-color: var(--wp--preset--color--primary);
}

/*
 * Der Fangbereich ist größer als die Nadel — sonst müsste man sie treffen.
 * Er bleibt trotzdem klein: In der Übersicht liegen Gasteig und Volksbad nur
 * sechzig Pixel auseinander, und dort muss man die richtige erwischen können.
 *
 * Gehalten wird die Auswahl danach nicht mehr über diese Fläche, sondern über
 * den Abstand zur Nadel — siehe HALTE in assets/js/sections/umgebung.js.
 */
.ld-umgebung__fang {
	inset-inline-start: -1.5rem;
	inset-block-start: calc(-1 * (var(--ld-umgebung-stiel) + 2.2rem));
	width: 3rem;
	height: calc(var(--ld-umgebung-stiel) + 2.6rem);
	pointer-events: auto;
}

.ld-umgebung__schild {
	inset-inline-start: 0;
	inset-block-start: 0.45rem;
	/*
	 * **Mittig unter der Nadel — außer wo das Ensemble im Weg steht.**
	 * `--ld-schild-x` setzt `stelle()` für die wenigen Orte, deren
	 * Beschriftung sonst über den beiden Baukörpern läge; der Bordeauxplatz
	 * ist mit 132 Metern der erste Fall. Es ist ein gemessener Ausweichweg
	 * und kein fester Wert: Wie breit die Häuser auf dem Schirm sind, hängt
	 * am Zoom.
	 */
	transform: translateX(calc(-50% + var(--ld-schild-x, 0px)));
	transition: color 0.35s ease,
		transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
	white-space: nowrap;
	font-size: clamp(0.6875rem, 0.79vw, 0.875rem);
	color: var(--wp--preset--color--muted);
	/* Damit der Name auch über einer Straßenkreuzung lesbar bleibt. */
	text-shadow: 0 0 4px var(--wp--preset--color--surface),
		0 0 8px var(--wp--preset--color--surface);
}

.ld-umgebung__marke.is-an .ld-umgebung__schild {
	color: var(--wp--preset--color--contrast);
}

.ld-umgebung__marke .ld-umgebung__bild {
	display: block;
	inset-inline-start: calc(-0.5 * var(--ld-umgebung-bild-b));
	inset-block-start: calc(-1 * (var(--ld-umgebung-stiel) + var(--ld-umgebung-kopf) + var(--ld-umgebung-luft) + var(--ld-umgebung-bild-h)));
	width: var(--ld-umgebung-bild-b);
	height: var(--ld-umgebung-bild-h);
	border-radius: calc(var(--ld-umgebung-radius) * 0.55);
	overflow: hidden;
	background-color: var(--wp--preset--color--surface-mist);
	opacity: 0;
	transform: translateY(0.6rem) scale(0.94);
	transform-origin: 50% 100%;
	transition: opacity 0.45s cubic-bezier(0.645, 0.045, 0.355, 1),
		transform 0.45s cubic-bezier(0.645, 0.045, 0.355, 1);
	box-shadow: 0 0.75rem 1.9rem rgb(69 45 42 / 22%);
}

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

.ld-umgebung__marke.is-an .ld-umgebung__bild {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* ------------------------------------------------------------ Bildzeichen */

/*
 * Das Zeichen des Objekts steht auf einem Strich über den beiden Häusern —
 * dieselbe Bauart wie die Ortsnadeln, nur größer und ohne Beschriftung. Es
 * bleibt immer voll sichtbar: Es ist der Punkt, von dem aus alle Wege gemessen
 * sind, und tritt deshalb nicht mit zurück, wenn ein Ort gewählt wird.
 */
.ld-umgebung__marke--haus {
	opacity: 1;
	z-index: 3;
}

.ld-umgebung__marke--haus .ld-umgebung__stiel {
	height: var(--ld-umgebung-zeichen-stiel);
	inset-block-start: calc(-1 * var(--ld-umgebung-zeichen-hoehe));
	background-color: var(--wp--preset--color--muted);
}

.ld-umgebung__zeichen {
	display: block;
	inset-inline-start: calc(-0.5 * var(--ld-umgebung-zeichen-b));
	inset-block-start: calc(
		-1 * (
			var(--ld-umgebung-zeichen-hoehe)
			+ var(--ld-umgebung-zeichen-b) / var(--ld-umgebung-zeichen-v)
		)
	);
	width: var(--ld-umgebung-zeichen-b);
	height: calc(var(--ld-umgebung-zeichen-b) / var(--ld-umgebung-zeichen-v));
}

.ld-umgebung__zeichen img {
	display: block;
	width: 100%;
	height: auto;
}

/* Vor dem Aufbau steckt das Zeichen noch im Kartenblock und hätte dort nichts verloren. */
.ld-umgebung:not(.is-bereit) .ld-umgebung__zeichen {
	display: none;
}

/* --------------------------------------------------------------- Auftritt */

/*
 * Beim Hineinscrollen öffnen sich die beiden Hälften auseinander: die Karte
 * rollt von ihrer Oberkante nach unten auf, die Spalte wächst von ihrer
 * Unterkante nach oben. In der Vorlage gemessen — beide gleichzeitig, je 1,2
 * Sekunden, mit An- und Abschwellen. Ausgelöst wird es, sobald die Oberkante
 * des Abschnitts 70 Prozent der Fensterhöhe erreicht; das macht das
 * Abschnitts-Skript.
 *
 * Es läuft einmal ab und fährt beim Zurückscrollen nicht zurück — auch das wie
 * in der Vorlage. Der Vorhang bei „Die Lage" ist eine andere Bewegung: dort
 * 1,7 Sekunden und von links.
 *
 * Die Deckung bleibt daneben stehen. Sie ist die Sicherheit gegen ein Bild,
 * das der Browser malen könnte, bevor das Skript die Karte fertig aufgebaut
 * hat; der Ausschnitt ist der Auftritt.
 */
.ld-umgebung__karte {
	opacity: 0;
	transition: opacity 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.ld-umgebung__karte.is-sichtbar {
	opacity: 1;
}

/*
 * Der Ausgangszustand hängt an `is-bereit` und damit am Skript: Ohne Skript
 * steht der Abschnitt vollständig da, statt hinter einem Ausschnitt zu warten,
 * der nie aufgeht.
 */
.ld-umgebung.is-bereit .ld-umgebung__karte {
	clip-path: inset(0 0 100% 0);
	transition: opacity 0.6s cubic-bezier(0.645, 0.045, 0.355, 1),
		clip-path 1.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.ld-umgebung.is-auftritt .ld-umgebung__karte {
	clip-path: inset(0 0 0 0);
}

/*
 * Die Spalte nur dort, wo sie neben der Karte steht. Auf schmalen Geräten
 * trägt sie die zehn Orte untereinander — also den ganzen Abschnitt —, und
 * die dürfen nicht hinter einem Ausschnitt hängen.
 */
@media (width > 60rem) {
	.ld-umgebung.is-bereit .ld-umgebung__spalte {
		clip-path: inset(100% 0 0 0);
		transition: clip-path 1.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	}

	.ld-umgebung.is-auftritt .ld-umgebung__spalte {
		clip-path: inset(0 0 0 0);
	}
}

/*
 * Die Versalien-Zeile und die sieben Ortsnamen kommen Wort für Wort von unten
 * herein. In der Vorlage steckt das nicht in der Zeitachse des Abschnitts,
 * sondern im Textbauteil selbst — dieselben Werte dort für beide: aus 110
 * Prozent der eigenen Höhe und aus der Unsichtbarkeit, 0,9 Sekunden je Wort,
 * 0,06 Sekunden von Wort zu Wort, weich auslaufend.
 *
 * Jede Zeile löst für sich aus, sobald ihre Oberkante 88 Prozent der
 * Fensterhöhe erreicht. Dadurch läuft die Liste beim Hereinscrollen von oben
 * nach unten durch, statt auf einmal dazustehen — das ist der Aufbau, den die
 * Vorlage zeigt. Ausgelöst wird im Abschnitts-Skript.
 *
 * Kein Ausschnitt um die Wörter: Die Vorlage klippt bei wortweisem Auftritt
 * nicht, die Deckung erledigt das Verbergen.
 */
.ld-umgebung__wort {
	display: inline-block;
	opacity: 0;
	transform: translateY(110%);
	/*
	 * **1,5 Sekunden je Wort statt 0,9, und 0,12 Versatz statt 0,06.** Vom
	 * Kunden so gewünscht: „Das kann ruhig viel langsamer eingeblendet
	 * werden." Der Versatz steht als `--ld-wort-v` am Wort und wird im
	 * Skript gesetzt — wie viele Wörter eine Zeile hat, weiß erst das Skript.
	 *
	 * Eine Zeile aus zwei Wörtern braucht damit 1,62 Sekunden statt 0,96.
	 * Wer weiter daran dreht, dreht an beiden Zahlen: hier und an
	 * `WORT_VERSATZ` in `umgebung.js`.
	 */
	transition: opacity 1.5s cubic-bezier(0.215, 0.61, 0.355, 1),
		transform 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition-delay: var(--ld-wort-v, 0s);
}

.is-worte > .ld-umgebung__wort {
	opacity: 1;
	transform: none;
}

/*
 * Ist der Auftritt vorbei, fällt der Ausschnitt ganz weg. `inset(0 0 0 0)`
 * schneidet zwar nichts sichtbar ab, beschnitte aber alles, was später einmal
 * über den Kasten hinausragt — ein Schild an einer Nadel am Rand etwa.
 */
.ld-umgebung.is-aufgetreten .ld-umgebung__karte,
.ld-umgebung.is-aufgetreten .ld-umgebung__spalte {
	clip-path: none;
}

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

/*
 * Am Ende hängt der Inhalt zurück, während der folgende Abschnitt mit voller
 * Scrollgeschwindigkeit hochkommt und ihn sichtbar überholt. Erklärung und Maß
 * stehen bei --ld-abschied-weg in base.css. Die Fläche selbst bleibt stehen —
 * sie trägt die Farbe, sonst risse oben ein Streifen auf.
 */
.ld-umgebung__spalte,
.ld-umgebung__karte {
	translate: 0 calc(var(--ld-abschied, 0) * var(--ld-abschied-weg));
}

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

/* Karte und Zähler der Telefonfassung baut umgebung.js; am Schreibtisch nicht. */
.ld-umgebung__tkarte,
.ld-umgebung__tzaehler {
	display: none;
}

/*
 * **Auf dem Telefon nach Arbors „What's around"**, aus ihrem Code gelesen am
 * 27.10.2026. Ihre Telefonfassung gilt schon unter 1024 (`max-lg`); unsere
 * Schwelle bleibt 60 rem, wo die Schrägsicht schon immer aufhörte. Ihr
 * Grundmaß ist 15,375 Bildpunkte, unseres 16 — die Werte sind umgerechnet.
 *
 * |                   | Schreibtisch            | Telefon (375)                        |
 * |-------------------|-------------------------|--------------------------------------|
 * | Kennzeile         | links über der Liste    | mittig, 19,2, 38 unter der Kante     |
 * | Karte             | Schrägsicht, 70 vw      | flacher Plan, 346 hoch, Ränder weich |
 * | Nadeln            | Kopf mit Stiel und Foto | 15, die gewählte 29 und dunkel        |
 * | Orte              | Liste in zwei Gruppen   | eine Reihe zum Wischen, je 1/1,1 breit|
 * | Foto              | an der Nadel            | oben in der Karte, 154 hoch, Radius 16|
 * | Name              | Liste, 2,2 vw           | 38,4, Light                          |
 * | Wege, Text        | 16 bei 2056             | 15,4, Zeilenhöhe 1,4                 |
 * | Zähler            | —                       | Balken 134, Zahl 15,4, 31 darunter   |
 *
 * Die Gruppen „Nachbarschaft" und „Mobilität" stehen hier nicht als Zeile da
 * — vom Kunden so gewählt (A, wie Arbor). Die Reihenfolge folgt ihnen
 * trotzdem: erst die Nachbarschaft, dann die Mobilität.
 *
 * Arbors Reihe läuft im Kreis; unsere hält am letzten Ort an. Dafür wischt
 * der Browser selbst, ohne Bibliothek.
 */
@media (width <= 60rem) {
	.ld-umgebung.is-bereit .ld-umgebung__karte,
	.ld-umgebung.is-bereit .ld-umgebung__liste {
		display: none;
	}

	.ld-umgebung {
		display: block;
		min-height: 0;
	}

	.ld-umgebung .ld-umgebung__spalte {
		width: auto;
		padding: 2.4rem 0 2.5rem;
	}

	.ld-umgebung .ld-umgebung__kennung {
		margin: 0;
		font-size: 1.2rem;
		line-height: 1.5;
		letter-spacing: 0.02em;
		text-align: center;
	}

	/* -- Karte -- */

	.ld-umgebung__tkarte {
		position: relative;
		display: block;
		height: 21.6rem;
		margin: 0;
		overflow: clip;
	}

	/*
	 * Der Plan ist dieselbe Datei wie die Schrägsicht, nur flach. Gerückt so,
	 * dass alle elf Nadeln zu sehen sind: Sie reichen von 8,6 bis 75,3 Prozent
	 * der Breite und von 17,4 bis 78,3 der Höhe; deren Mitte steht in der
	 * Mitte des Feldes.
	 */
	.ld-umgebung__tplan {
		position: absolute;
		inset-inline-start: calc(50% - 32.5rem * 0.42);
		inset-block-start: calc(50% - 32.5rem * 0.478);
		width: 32.5rem;
		aspect-ratio: 1;
		background: url("../../images/karte-haidhausen.svg") center / 100% 100% no-repeat;
	}

	/* Oben und unten läuft der Plan in den Grund aus, wie bei Arbor (h-20). */
	.ld-umgebung__tkarte::before,
	.ld-umgebung__tkarte::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		z-index: 2;
		height: 4.8rem;
		pointer-events: none;
	}

	.ld-umgebung__tkarte::before {
		inset-block-start: 0;
		background: linear-gradient(var(--wp--preset--color--surface) 25%, transparent);
	}

	.ld-umgebung__tkarte::after {
		inset-block-end: 0;
		background: linear-gradient(transparent, var(--wp--preset--color--surface) 75%);
	}

	/*
	 * Die Nadeln: ein heller Ring mit Terrakotta-Kern, die gewählte größer
	 * und mit dunklem Kern — Arbors Sand, Gold und Kieferngrün in unserer
	 * Palette. Die Tippfläche ist größer als das Zeichen.
	 */
	.ld-umgebung__tnadel {
		position: absolute;
		z-index: 1;
		display: grid;
		place-items: center;
		width: 0.96rem;
		height: 0.96rem;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background-color: var(--wp--preset--color--base);
		transform: translate(-50%, -50%);
		cursor: pointer;
		transition: width 0.3s ease, height 0.3s ease;
	}

	.ld-umgebung__tnadel::before {
		content: "";
		width: 0.84rem;
		height: 0.84rem;
		border-radius: 999px;
		background-color: var(--wp--preset--color--accent);
		transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
	}

	.ld-umgebung__tnadel::after {
		content: "";
		position: absolute;
		inset: -0.6rem;
	}

	.ld-umgebung__tnadel.is-an {
		z-index: 2;
		width: 1.8rem;
		height: 1.8rem;
	}

	.ld-umgebung__tnadel.is-an::before {
		width: 1.08rem;
		height: 1.08rem;
		background-color: var(--wp--preset--color--contrast);
	}

	.ld-umgebung__tmarke {
		position: absolute;
		inset-inline-start: 50%;
		inset-block-start: 50%;
		width: 3.5rem;
		height: auto;
		transform: translate(-50%, -130%);
		pointer-events: none;
	}

	/* -- Orte als Reihe zum Wischen -- */

	.ld-umgebung .ld-umgebung__orte {
		position: relative;
		display: flex;
		min-height: 0;
		margin: 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.ld-umgebung .ld-umgebung__orte::-webkit-scrollbar {
		display: none;
	}

	/* Je Ort ein Elftel weniger als die Breite, damit der nächste hereinschaut. */
	.ld-umgebung .ld-umgebung__orte .ld-umgebung__ort {
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex: 0 0 calc(100% / 1.1);
		flex-direction: column;
		margin: 0;
		padding-inline: 0.72rem;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		scroll-snap-align: start;
	}

	.ld-umgebung .ld-umgebung__orte .ld-umgebung__ort--gruppe-mobilitaet {
		order: 1;
	}

	/*
	 * Das Foto steht vorn, wie dort. Derselbe Selektor wie die Regel, die es
	 * am Schreibtisch ausblendet — sonst verlöre diese Regel.
	 */
	.ld-umgebung.is-bereit .ld-umgebung__ort .ld-umgebung__bild,
	.ld-umgebung .ld-umgebung__orte .ld-umgebung__bild {
		display: block;
		order: -1;
		margin: 0 0 2.6rem;
	}

	.ld-umgebung .ld-umgebung__orte .ld-umgebung__bild img {
		display: block;
		width: 100%;
		height: 9.6rem;
		object-fit: cover;
		border-radius: 1rem;
	}

	/*
	 * Der Name ist hier die Aussage der Karte, nicht die kleine Zeile unter
	 * der Liste wie am Schreibtisch — deshalb steht die Schrift ausnahmsweise
	 * im Stylesheet: PP Editorial Old, Light, wie die Ortsnamen der großen
	 * Liste. Am Block steht weiter die Schrift der kleinen Zeile.
	 *
	 * **Mit `!important`, und nur hier.** Die Schriftklasse des Blocks
	 * (`has-body-font-family`) bringt selbst eines mit; ohne gewinnt sie,
	 * gleich wie viele Klassen der Selektor zählt.
	 */
	.ld-umgebung.is-bereit .ld-umgebung__orte .ld-umgebung__name,
	.ld-umgebung .ld-umgebung__orte .ld-umgebung__name {
		margin: 0;
		font-family: var(--wp--preset--font-family--heading) !important;
		font-size: 2.4rem;
		font-weight: 300;
		line-height: 1.1;
		letter-spacing: var(--ld-light-lauf);
		text-transform: none;
	}

	.ld-umgebung .ld-umgebung__orte .ld-umgebung__wege {
		margin: 0.72rem 0 0;
	}

	.ld-umgebung .ld-umgebung__orte .ld-umgebung__weg {
		font-size: 0.96rem;
	}

	.ld-umgebung .ld-umgebung__orte .ld-umgebung__text {
		margin: 0.72rem 0 0;
		font-size: 0.96rem;
		line-height: 1.4;
	}

	/* -- Zähler -- */

	.ld-umgebung__tzaehler {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1.2rem;
		margin-block-start: 1.94rem;
		font-size: 0.96rem;
		line-height: 1.2;
	}

	.ld-umgebung__tbalken {
		position: relative;
		width: 8.4rem;
		height: 1px;
		background: color-mix(in srgb, currentColor 20%, transparent);
	}

	.ld-umgebung__tbalken::after {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		width: calc(var(--ld-anteil, 0) * 100%);
		background: currentColor;
		transition: width 0.4s ease;
	}
}