/*
 * Abschnitt: Wohnungsfinder
 *
 * Ein Bildschirm mit einem Standbild des 3D-Modells, unten links Aussage,
 * Text und Schaltfläche. Die Schaltfläche öffnet den Finder über die volle
 * Fläche — mit einer schmalen eigenen Leiste oben, darunter der Finder.
 *
 * **Keine Vorlage für diesen Bildschirm.** Arbor hat ein „Explore in 3D", das
 * aus einem Abschnitt heraus eine eigene 3D-Ansicht öffnet; die Bauart ist
 * dieselbe, die Maße dieses Bildschirms sind aber nicht von dort gemessen,
 * sondern aus dem Wohnungen-Abschnitt darüber übernommen — beide stehen
 * unmittelbar hintereinander und sollen sich als Paar lesen.
 *
 *                                 1512                 375
 *   Rand links                    4,6 % der Breite     1,5 rem
 *   Rand unten                    15 svh               3,5 rem
 *   Textspalte, Breite            46 vw                volle Breite
 *   Aussage                       5,2 vw, Regular,     10 vw
 *                                 Versalien, 2 Zeilen
 *   Bildausschnitt                20 % / 45 %          Mitte, 38 % hoch
 *   X oben rechts                 2,75 rem, 1,25 rem   2,5 rem, 1 rem
 *   Spalte der Wohnung            19,21 vw + 2 × 4 vw  Blatt, 58 svh hoch
 *
 * **Warum nur ein X und nicht die Kopfzeilen-Pille:** Der Finder belegt
 * oben links („Wohnungen filtern"), oben rechts („Zur Übersicht") und oben
 * mittig (die Geschosswahl) schon selbst. Bis zum 09.10.2026 stand hier eine
 * dunkle Leiste über dem Finder; **vom Kunden gestrichen**, ein X genügt.
 * „Zur Übersicht" rückt auf dem Telefon dafür nach links (anpassungen.css).
 *
 * Was hier steht, ist Form. Schriftart und Farbe tragen die Blöcke selbst.
 */

.ld-wfinder {
	position: relative;
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
	min-height: 100svh;
	margin: 0;
	padding: 0;
	overflow: clip;
}

/* blockGap — siehe CLAUDE.md. */
.ld-wfinder > *,
.ld-wfinder__text > * {
	margin-block: 0;
}

/* ------------------------------------------------------------ Standbild */

.ld-wfinder__bild {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* Zwei Klassen im Selektor — WordPress gibt dem Bild `width: auto` mit. */
.ld-wfinder .ld-wfinder__bild img {
	display: block;
	width: 100%;
	object-fit: cover;
	/*
	 * Links vom Mittelpunkt verankert: Der Beschnitt fällt dann rechts weg,
	 * und die beiden Häuser rücken aus der Textspalte heraus nach rechts.
	 */
	object-position: 20% 45%;
}

/*
 * **Eine Vignette, keine Fläche** — dieselbe Regel wie in „Haidhausen". Das
 * Standbild ist oben nebelhell und unten unruhig; nur dort, wo der Text
 * steht, braucht es Ruhe. Der Verlauf läuft in den Abschnittsgrund aus,
 * Kalkgrau.
 *
 * Als `::before` am Abschnitt mit eigener Stufe — der Text darüber bekommt
 * eine höhere. Gleiche Zahlen sind keine Reihenfolge.
 */
.ld-wfinder::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to top in oklab,
		color-mix(in srgb, var(--wp--preset--color--surface-mist) 94%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--surface-mist) 78%, transparent) 26%,
		color-mix(in srgb, var(--wp--preset--color--surface-mist) 0%, transparent) 58%
	);
}

/* ----------------------------------------------------------------- Text */

.ld-wfinder__text {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: calc(46vw + 4.6%);
	padding-inline-start: 4.6%;
	/*
	 * Höher als zuerst (9 svh) — vom Kunden so gewünscht: Der Block rückt
	 * nach oben, damit die Pille unter dem Absatz Luft hat.
	 */
	padding-block-end: 15svh;
}

.ld-wfinder__kicker {
	font-size: clamp(0.62rem, 0.73vw, 0.85rem);
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/*
 * **Eine große Überschrift, also Regular und Versalien** — wie „Zwei Zeiten,
 * eine Adresse" und „Wohnungen" im Abschnitt direkt darüber. Sie stand
 * zuerst als Aussagesatz in Light und gemischter Schreibung da und wirkte
 * neben diesen beiden schwach; vom Kunden im Vergleich von vier Fassungen
 * so gewählt (werkzeuge/wohnungsfinder-varianten.html, Fassung B).
 *
 * Zwei Zeilen, also Zeilenhöhe 1,12 (Umlaute). Die Spalte ist schmaler als
 * die Zeile in einem Stück; `balance` teilt sie in zwei gleich lange.
 */
.ld-wfinder .ld-wfinder__satz {
	margin-block-start: 1.2vw;
	font-size: clamp(2.2rem, 5.2vw, 6.5rem);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: normal;
	text-transform: uppercase;
	text-wrap: balance;
}

.ld-wfinder__absatz {
	margin-block-start: 2vw;
	max-width: 30vw;
	font-size: clamp(0.8rem, 0.95vw, 1.15rem);
	line-height: 1.45;
}

/*
 * Die Pille liegt auf hellem Grund; ihre Kante in Salbei verschwände dort
 * (1,2 zu 1). Card Room Green wie der Anfrage-Knopf in der Fußzeile.
 */
.ld-wfinder__schalter {
	--ld-schalter-farbe: var(--wp--preset--color--primary);
	margin-block-start: 2.2vw;
}

/* --------------------------------------------------- Liste als Rückfall */

/*
 * **Unsichtbar, aber da.** Die Aufklappliste war dem Kunden zu viel; sie ist
 * aber der einzige Weg zu den Wohnungsseiten ohne 3D-Grafik, ohne Skript,
 * für Vorlesegeräte und für Suchmaschinen. Sie bleibt deshalb im Markup und
 * wird nur aus dem Bild genommen — **und kommt zurück, sobald jemand mit der
 * Tastatur hineinwandert.** Ein Fokus, der auf etwas Unsichtbarem landet,
 * wäre schlimmer als die Liste selbst.
 */
.ld-wfinder__liste:not(:focus-within) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ld-wfinder__liste {
	margin-block-start: 1.6vw;
	font-size: clamp(0.72rem, 0.8vw, 0.95rem);
	line-height: 1.45;
}

.ld-wfinder__liste summary {
	display: inline-flex;
	gap: 0.6em;
	align-items: center;
	cursor: pointer;
	list-style: none;
	color: var(--wp--preset--color--primary-deep);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

.ld-wfinder__liste summary::-webkit-details-marker {
	display: none;
}

.ld-wfinder__liste summary::after {
	content: "+";
	text-decoration: none;
}

.ld-wfinder__liste[open] summary::after {
	content: "−";
}

/*
 * Ausgeklappt rollt die Liste in sich, statt den Abschnitt um 23 Zeilen
 * wachsen zu lassen — sonst schöbe sie Aussage und Pille nach oben aus dem
 * Bild.
 */
.ld-wfinder__liste ul {
	max-height: 34svh;
	margin: 0.8em 0 0;
	padding: 0.4em 0.9em;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	border-radius: 0.6rem;
	background: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
}

.ld-wfinder__liste li {
	display: flex;
	gap: 1em;
	align-items: baseline;
	padding-block: 0.35em;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}

.ld-wfinder__liste li:last-child {
	border-block-end: 0;
}

.ld-wfinder__liste a {
	min-width: 2.4em;
	color: var(--wp--preset--color--primary-deep);
	font-weight: 500;
	text-underline-offset: 0.25em;
}

/* ------------------------------------------------------ Die Vollfläche */

/*
 * Über der Kopfzeile (20), unter dem Vorhang der Seitenwechsel (90): Wer aus
 * dem Finder auf eine Wohnung springt, sieht den Vorhang über dem Finder
 * zufahren wie überall sonst.
 *
 * **Keine Leiste mehr, nur ein X oben rechts** — vom Kunden so gewünscht. Der
 * Finder füllt die ganze Fläche.
 */
.ld-wfinder-buehne:not([hidden]) {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: var(--wp--preset--color--surface-mist);
	animation: ld-wfinder-auf 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes ld-wfinder-auf {
	from {
		opacity: 0;
	}
}

/*
 * Der Rahmen zeigt das Standbild, solange der Finder lädt — dann geht er
 * nicht aus dem Nichts auf, sondern aus genau dem Bild, auf das man geklickt
 * hat.
 */
.ld-wfinder-buehne__rahmen {
	position: absolute;
	inset: 0;
	margin: 0;
	background: url("../../images/wohnungsfinder-poster.webp") 20% 45% / cover no-repeat;
}

.ld-wfinder-buehne__rahmen iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * **Beim Zurückkommen von einer Wohnung bleibt der Finder verdeckt, bis die
 * Wohnung steht.** Er lädt zuerst die Übersicht und springt erst dann
 * hinein — rund eine Dreiviertelsekunde, genau während des Wischens. Statt
 * der Übersicht und des Standbilds liegt so lange der Grund der
 * Wohnungsansicht da, Kalkweiß gedämpft, und der Finder blendet darüber auf.
 */
.ld-wfinder-buehne__rahmen.is-zurueck {
	background: var(--wp--preset--color--surface);
}

/*
 * **Und der Grund bleibt, wenn der Finder aufblendet.** Hier stand er an
 * `is-wartet` und fiel mit dem Aufblenden weg — darunter lag das Standbild
 * der Stadtübersicht, und für einen Moment sah man die Stadt, aus der der
 * Finder dann in die Wohnung überblendete. Vom Kunden als „Hakler" gemeldet.
 * `is-zurueck` hält den Grund, `is-wartet` nur den Finder verdeckt.
 *
 * **Und die Vollfläche blendet dann nicht auf** (`is-sofort`): Sie liegt im
 * Wischen schon da, sonst schiene die Startseite eine halbe Sekunde durch.
 */
.ld-wfinder-buehne.is-sofort {
	animation: none;
}

/*
 * Bis das Skript den Finder geöffnet hat, deckt `ld-wfinder-kommt` (aus dem
 * Kopf der Seite, `ld28_scroll_oben()`) die Startseite ab. Läuft das Skript
 * nicht, gibt die Fläche die Seite nach drei Sekunden trotzdem frei.
 */
.ld-wfinder-kommt body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 79;
	background: var(--wp--preset--color--surface);
	animation: ld-wfinder-frei 0s 3s forwards;
}

/*
 * Im Wischen liegt die neue Seite über dem linken Drittel der alten, und dort
 * steht genau die Spalte der Wohnung. Solange der Finder nicht offen ist, hat
 * die neue Seite diese Spalte noch nicht — sie verschwände für ein Bild. Die
 * neue Seite bleibt deshalb unsichtbar, bis sie vollständig ist; das Wischen
 * wartet so lange (`ld28_scroll_oben()`).
 */
.ld-wfinder-kommt::view-transition-new(root) {
	opacity: 0;
}

@keyframes ld-wfinder-frei {
	to {
		visibility: hidden;
	}
}

.ld-wfinder-buehne__rahmen.is-wartet iframe {
	opacity: 0;
}

/*
 * **Das X.** Dieselbe Bauart wie die runden Knöpfe des Finders — Haarlinie,
 * durchscheinender Grund —, damit es zu ihm gehört und nicht aufgeklebt
 * wirkt. Es liegt über der Spalte der Wohnung, deren Inhalt erst bei
 * 13,95 svh beginnt; dort stört es nichts.
 */
.ld-wfinder-buehne__zu {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 3;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
	cursor: pointer;
	transition: background-color 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.ld-wfinder-buehne__zu::before,
.ld-wfinder-buehne__zu::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1rem;
	height: 1px;
	background: var(--wp--preset--color--contrast);
	transform: translate(-50%, -50%) rotate(45deg);
}

.ld-wfinder-buehne__zu::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.ld-wfinder-buehne__zu:hover,
.ld-wfinder-buehne__zu:focus-visible {
	background: var(--wp--preset--color--base);
}

.ld-wfinder-buehne__zu:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* ------------------------------------------- Die Spalte der Wohnung */

/*
 * **Dieselbe Spalte wie auf der Wohnungsseite** — nicht nachgebaut, sondern
 * von dort geholt: `wohnungsfinder.js` ruft die Seite der Wohnung ab und
 * setzt deren `.ld-wohnung__spalte` hier ein. Die Regeln dafür stehen in
 * wohnung.css und gelten hier mit; diese Datei gibt nur den Rahmen.
 *
 * **Maße wie auf der Seite:** 19,21 vw breit, 13,95 svh von oben, Fuß bei
 * 6,97 svh. Nur so ist der Übergang ein reines Verschieben — die Spalte
 * fährt von rechts nach links an ihren Platz, ohne sich zu verändern. Links
 * und rechts je 4 vw Luft; dieselbe Breite hat der Finder für seine Karte
 * reserviert (anpassungen.css), damit das Modell nicht darunter liegt.
 *
 * Die Variablen stehen sonst an `.ld-wohnung`; die Klasse selbst trägt die
 * Spalte nicht, denn an ihr hängen das Skript der Wohnungsseite und ein
 * bildschirmhoher Abschnitt.
 */
.ld-wfinder-tafel {
	--ld-w-rand: 4vw;
	/*
	 * **Links derselbe Abstand wie auf der Wohnungsseite** (7,39 vw, dort
	 * `--ld-w-rand`). Beim Wischen liegt die Wohnungsseite unmittelbar über
	 * dieser Tafel, Spalte auf Spalte; war der Rand hier schmaler, tauchte im
	 * ersten Bild links neben der Tafel ein 52 Bildpunkte breiter Streifen
	 * Papier auf — der Haken, den der Kunde gesehen hat.
	 */
	--ld-w-links: 7.39vw;
	--ld-w-spalte: 19.21vw;
	--ld-w-oben: 13.95svh;
	--ld-w-unten: 6.97svh;
	--ld-w-linie: color-mix(in srgb, var(--wp--preset--color--primary) 42%, transparent);

	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: calc(var(--ld-w-spalte) + var(--ld-w-links) + var(--ld-w-rand));
	padding: var(--ld-w-oben) var(--ld-w-rand) var(--ld-w-unten) var(--ld-w-links);
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.5s;
}

.ld-wfinder-tafel.is-da {
	transform: none;
	visibility: visible;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

.ld-wfinder-tafel.is-sofort {
	transition: none;
}

.ld-wfinder-tafel > .ld-wohnung__spalte {
	flex: 1 0 auto;
	min-height: 0;
}

/*
 * „Mehr Informationen" steht über „Diese Wohnung anfragen" und nimmt dessen
 * Platz am Fuß der Spalte ein — der Anfragen-Knopf rückt direkt darunter.
 */
.ld-wfinder-tafel__mehr {
	margin-block: auto 0;
	padding-block-start: 2vh;
}

.ld-wfinder-tafel .ld-wfinder-tafel__mehr ~ .ld-wohnung__fuss {
	margin-block-start: 0.8vw;
	padding-block-start: 0;
}

.ld-wfinder-tafel__mehr a,
.ld-wfinder-tafel__mehr .ld-schalter__zeile {
	justify-content: center;
}


/* Die Seite darunter steht still, solange der Finder offen ist. */
html.ld-wfinder-offen {
	overflow: hidden;
}

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

/*
 * **Die Schwelle ist 759, nicht 781** — die des Finders. Darunter macht er
 * aus seiner Karte ein Blatt von unten, und die Spalte der Website muss
 * genau dasselbe tun, sonst lägen beide verschieden.
 */
@media (max-width: 759px) {
	.ld-wfinder .ld-wfinder__bild img {
		object-position: 50% 38%;
	}

	.ld-wfinder::before {
		background: linear-gradient(
			to top in oklab,
			color-mix(in srgb, var(--wp--preset--color--surface-mist) 96%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--surface-mist) 86%, transparent) 40%,
			color-mix(in srgb, var(--wp--preset--color--surface-mist) 0%, transparent) 72%
		);
	}

	.ld-wfinder__text {
		width: 100%;
		padding-inline: 1.5rem;
		padding-block-end: 2.4rem;
	}

	/*
	 * Die Versalien-Zeile in Arbors Telefongröße (19,2) wie „UMGEBUNG" und
	 * „WOHNWELTEN" — sie stand mit 9,9 unter unserer Untergrenze von 12.
	 */
	.ld-wfinder .ld-wfinder__kicker {
		font-size: 1.2rem;
	}

	.ld-wfinder .ld-wfinder__satz {
		margin-block-start: 0.6rem;
		font-size: 10vw;
	}

	.ld-wfinder__absatz {
		margin-block-start: 0.9rem;
		max-width: none;
		font-size: 0.9rem;
	}

	/* Der Knopf rückt nach unten (Kunde, 27.10.2026): mehr Luft darüber, weniger darunter. */
	.ld-wfinder__schalter {
		margin-block-start: 2.4rem;
	}

	.ld-wfinder__liste {
		margin-block-start: 1.2rem;
		font-size: 0.85rem;
	}

	.ld-wfinder__liste li {
		flex-wrap: wrap;
		gap: 0.2em 0.8em;
	}

	.ld-wfinder-buehne__zu {
		top: 1rem;
		right: 1rem;
		width: 2.5rem;
		height: 2.5rem;
	}

	/*
	 * Auf dem Telefon ist die Spalte ein Blatt von unten, so hoch, wie der
	 * Finder seine Karte macht (58 svh, anpassungen.css). Beim Übergang zieht
	 * es auf die ganze Wohnungsseite auf — deshalb trägt hier das ganze Blatt
	 * den Namen.
	 */
	.ld-wfinder-tafel {
		--ld-w-spalte: auto;

		top: auto;
		left: 0;
		width: auto;
		height: 58svh;
		padding: 1.75rem 6vw 2rem;
		border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
		transform: translateY(100%);
	}

	.ld-wfinder-tafel__mehr {
		padding-block-start: 1.5rem;
	}

	.ld-wfinder-tafel .ld-wfinder-tafel__mehr ~ .ld-wohnung__fuss {
		margin-block-start: 0.75rem;
	}
}