/*
 * Basis-Ebene
 *
 * Grundraster der Abschnitte, die Kopfzeile und die Bausteine für Bewegung.
 * Alle Farben und Abstände kommen aus theme.json — entweder als Preset
 * (var(--wp--preset--…)) oder als Markenwert (var(--wp--custom--…)).
 */

/* ------------------------------------------------------------- Grundmaßstab */

/*
 * Die Wurzelschriftgröße hängt an der Fensterbreite. Damit skaliert die ganze
 * Seite als ein Block, statt in zwei Hälften auseinanderzulaufen.
 *
 * Warum das nötig war: Die Abschnittsmaße stehen in Prozent der Fensterbreite
 * und wachsen mit; Schriftgrade und Abstände aus theme.json stehen in `clamp()`
 * mit einer Obergrenze in rem — und die war bei 1512 schon erreicht. Gemessen
 * auf einem 14- und einem 16-Zoll-MacBook-Pro: Die Karte wuchs von 1058 auf
 * 1210 Pixel, Schrift und Abstände blieben bei 104 und 56 Pixeln stehen. Auf
 * dem größeren Schirm wurde also das Große größer und das Kleine nicht.
 *
 * 1,058 vw ergibt bei 1512 genau die bisherigen 16 Pixel — auf dem 14-Zöller
 * ändert sich dadurch nichts. Darüber wächst alles gemeinsam: bei 1728 sind es
 * 18,3 Pixel, und weil die Obergrenzen in theme.json selbst in rem stehen,
 * wachsen sie von allein mit. Deshalb bleibt theme.json unangetastet.
 *
 * Die Grenzen: unten 16 Pixel, damit der Fließtext auf einem kleinen Laptop
 * nicht kleiner wird als heute. Oben 20 Pixel, sonst wächst die Seite auf einem
 * großen Monitor ins Plakathafte. Die Vorlage deckelt an derselben Stelle.
 *
 * `rem` bezieht sich an dieser einen Stelle auf die Voreinstellung des
 * Browsers und nicht auf sich selbst. Wer dort größere Schrift eingestellt hat,
 * behält sie also — anders als bei einem reinen vw-Wert.
 *
 * So macht es die Vorlage auch, nur mit ihrer eigenen Zahl: 0,83 vw, gedeckelt
 * bei 16 Pixeln. Gemessen bei 1512, 1728 und 1920 — überall derselbe Anteil.
 */
html {
	font-size: clamp(1rem, 1.058vw, 1.25rem);
}

/*
 * **Die Schrift wird gleichmäßig geglättet, nicht nach Bildschirmpunkten.**
 *
 * Ohne diese Angabe glättet macOS helle Schrift auf dunklem Grund über die
 * einzelnen Farbpunkte des Bildschirms. Das lässt sie **fetter** wirken, als
 * sie ist — bei dünnen Schnitten und auf dunklem Grund deutlich sichtbar.
 * Genau das war der Unterschied, den man zwischen unserer Kopfzeile und der
 * Vorlage sah: gleiche Schrift, gleicher Grad, gleiche Stärke, und trotzdem
 * wirkte unsere schwerer.
 *
 * Die Vorlage stellt es auf `antialiased`, und weil bei uns fünf Abschnitte
 * dunkel sind, gilt es hier für die ganze Seite und nicht nur für die
 * Kopfzeile. Sonst stünde die Schrift in der Kopfzeile anders da als der Text
 * unmittelbar darunter.
 *
 * Auf hellem Grund wird die Schrift dadurch eine Spur zarter. Das ist der
 * Preis, und die Vorlage zahlt ihn genauso.
 */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

:root {
	/* Wie weit sich eine Parallax-Ebene gegenüber dem Scrollen verschiebt. */
	--ld-parallax-range: 8vh;
	/* Wie weit ein Element beim Einblenden von unten kommt. */
	--ld-reveal-shift: 1.5rem;
	--ld-duration: 900ms;
	--ld-ease: cubic-bezier(0.16, 1, 0.3, 1);
	/*
	 * Der Ausgleich für den Schnitt Light (300). Bis zum 28.10.2026 stand an
	 * jeder dieser Stellen Ultralight (200) aus der Probeversion; gekauft ist
	 * Light, und Light läuft rund 4,4 Prozent breiter — gemessen an den Texten
	 * der Seite 0,0185 bis 0,025 em je Zeichen. Ohne Ausgleich brachen Zeilen
	 * anders um (Über uns, Impressum, auf dem Telefon mehr). Mit diesem Wert
	 * steht jede Zeile, jeder Kasten und jede Seitenhöhe wie vorher —
	 * nachgemessen in Chrome und Safari, bei 1512 und 375, mit
	 * `werkzeuge/layout-abdruck.js`. Vom Kunden so verlangt: Beim
	 * Schrifttausch darf sich an der Aufteilung nichts ändern.
	 *
	 * **Jede Stelle mit Light rechnet ihn zu ihrer Laufweite dazu**, auch eine
	 * neue. Wer ihn weglässt, bekommt die breitere Zeile.
	 */
	--ld-light-lauf: -0.021em;
}

/* Mobil: eigene, deutlich ruhigere Variante statt der verkleinerten Desktop-Bewegung. */
@media (max-width: 781px) {
	:root {
		--ld-parallax-range: 3vh;
		--ld-reveal-shift: 1rem;
		--ld-duration: 600ms;
	}
}

/* Wer im System weniger Bewegung eingestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--ld-parallax-range: 0px;
		--ld-reveal-shift: 0px;
		--ld-duration: 1ms;
	}
}

/*
 * Einblenden beim Scrollen. Greift nur, wenn motion.js geladen hat — ohne
 * JavaScript bleibt der Inhalt sichtbar statt unsichtbar liegen zu bleiben.
 */
.ld-motion .ld-reveal {
	opacity: 0;
	transform: translate3d(0, var(--ld-reveal-shift), 0);
	transition:
		opacity var(--ld-duration) var(--ld-ease),
		transform var(--ld-duration) var(--ld-ease);
}

.ld-motion .ld-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/*
 * Gestaffeltes Einblenden mehrerer Elemente in einem Abschnitt.
 * Gesteuert über Klassen, nicht über eigene data-Attribute — Letztere würden
 * die Blockprüfung im Editor scheitern lassen (siehe CLAUDE.md).
 */
.ld-motion .ld-reveal--1 { transition-delay: 90ms; }
.ld-motion .ld-reveal--2 { transition-delay: 180ms; }
.ld-motion .ld-reveal--3 { transition-delay: 270ms; }

/*
 * Parallax-Ebene. motion.js schreibt --ld-parallax als Wert zwischen -1 und 1,
 * je nachdem, wo das Element im Bildschirm steht.
 */
.ld-parallax {
	transform: translate3d(0, calc(var(--ld-parallax, 0) * var(--ld-parallax-range)), 0);
	will-change: transform;
}

/*
 * Bildebene eines Cover-Blocks. Das Bild ist oben und unten größer als sein
 * Rahmen und wandert beim Scrollen gegen die Leserichtung — dadurch wirkt es
 * tiefer als der Text darüber. Die Klasse .ld-media kommt an den Cover-Block;
 * tauscht der Kunde das Bild aus, bleibt der Effekt erhalten.
 */
.ld-media {
	overflow: clip;
}

.ld-media > .wp-block-cover__image-background,
.ld-media > .wp-block-cover__video-background {
	inset-block: calc(var(--ld-parallax-range) * -1) calc(var(--ld-parallax-range) * -1);
	block-size: auto;
	object-fit: cover;
	transform: translate3d(0, calc(var(--ld-parallax, 0) * var(--ld-parallax-range) * -1), 0);
	will-change: transform;
}

/* --------------------------------------------------------------- Kopfzeile */

/*
 * Eine schwebende Pille nach dem Vorbild von belgradearbor.rs: mittig unter der
 * Oberkante, rund 40 rem breit, mit drei Plätzen — links das Menü, in der Mitte
 * der Schriftzug, rechts der Knopf.
 *
 * Die Kopfzeile selbst nimmt die ganze Breite ein, ist aber nicht anklickbar;
 * nur die Pille darin fängt Klicks ab. Sonst läge ein unsichtbarer Streifen
 * über der Seite, der das Scrollen und Klicken am oberen Rand schluckt.
 */
/*
 * **Das Grundmaß der Kopfzeile ist die Wurzelgröße der Vorlage, nicht unsere.**
 * Arbor rechnet die ganze Pille in ihrer eigenen Grundgröße — 0,83 vw, bei 16
 * Pixeln gedeckelt. An zwei Fensterbreiten nachgemessen: 502 × 46 bei 1512 und
 * 640 × 58 bei 2056. Beides sind dieselben 40 × 3,625 Grundmaße; die Pille
 * wächst also mit und hört ab rund 1930 Pixeln Fensterbreite auf zu wachsen.
 *
 * **Unsere eigene Wurzelgröße geht dagegen bis 20 Pixel hoch.** Damit stand die
 * Pille auf einem 2056 breiten Fenster bei 680 × 63 statt 640 × 58 — sechs
 * Prozent breiter, acht höher. Das war der Grund, warum sie neben der Vorlage
 * grob wirkte, und dasselbe galt für alles darin.
 *
 * 0,8 rem sind bei unserer Wurzel genau die 16 Pixel, an denen die Vorlage
 * deckelt. Unterhalb davon gewinnt der vw-Anteil, darüber die Deckelung.
 *
 * **Alles in der Pille rechnet in diesem Maß** — Höhe, Breite, Polster,
 * Schriftgrade, das Bildzeichen und der Eckenradius des Menüfeldes. Wer hier
 * eine Zahl ändert, ändert die Proportion der ganzen Kopfzeile.
 */
/*
 * **Die beiden Maße stehen an der Wurzel, nicht an der Kopfzeile.** Die Pille
 * ist fixiert und schwebt über *jedem* Abschnitt; wer dafür sorgen muss, dass
 * nichts dahinter verschwindet, braucht ihre Höhe — und soll sie nicht ein
 * zweites Mal hinschreiben. Die Fußzeile rechnet ihr oberes Polster daraus.
 */
:root {
	--ld-pille-e: min(0.8rem, 0.83vw);
	/* 3,625 Grundmaße — 58 Pixel bei 2056, 46 bei 1512. */
	--ld-pille-h: calc(3.625 * var(--ld-pille-e));
	/* Unterkante der Pille: 1,5 Grundmaße Abstand von oben plus ihre Höhe. */
	--ld-pille-fuss: calc(5.125 * var(--ld-pille-e));
}

.ld-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 20;
	display: flex;
	justify-content: center;
	/* 1,5 Grundmaße — 24 Pixel bei 2056, 19 bei 1512. */
	padding-block-start: calc(1.5 * var(--ld-pille-e));
	/*
	 * Der seitliche Rand steht als eigene Zahl, weil das Menüfeld ihn
	 * ebenfalls braucht: Es liegt fixiert und rechnet seine Breite aus
	 * `100% - 2 × Rand`. Standen dort zwei Werte, liefen Pille und Feld
	 * beim nächsten Umbau auseinander.
	 */
	--ld-pille-rand: 1rem;
	padding-inline: var(--ld-pille-rand);
	pointer-events: none;
	transition:
		opacity 400ms var(--ld-ease),
		transform 400ms var(--ld-ease);
}

/*
 * Die Kopfzeile liegt fixiert über dem Inhalt. Sie darf deshalb keinen Abstand
 * im normalen Fluss erzeugen, sonst rutscht der Auftakt nach unten.
 */
.wp-site-blocks > .ld-header {
	margin-block: 0;
}

.wp-site-blocks > .ld-header + * {
	margin-block-start: 0;
}

/* Während der Auftakt-Sequenz tritt die Kopfzeile ab. */
.ld-header.is-hidden {
	opacity: 0;
	transform: translateY(-100%);
	pointer-events: none;
}

.ld-header__pille {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/*
	 * 40 Grundmaße breit — 640 Pixel bei 2056, 502 bei 1512. Das Polster ist
	 * ein halbes, also 8 Pixel; damit bleiben innen genau 2,625 Grundmaße für
	 * den Knopf. Alles in der Vorlage nachgemessen.
	 */
	box-sizing: border-box;
	gap: clamp(0.5rem, 1.2vw, 1.25rem);
	width: min(100%, calc(40 * var(--ld-pille-e)));
	min-height: var(--ld-pille-h);
	padding: calc(0.5 * var(--ld-pille-e));
	border-radius: 999px;
	/*
	 * Schriftfarbe und Füllung gehören hier ausnahmsweise ins CSS: Sie wechseln
	 * gemeinsam, je nachdem worüber die Pille gerade schwebt, und müssen
	 * zueinander passen. Änderbar bleibt die Füllung selbst — sie steckt in den
	 * beiden Blöcken darunter.
	 */
	color: var(--wp--preset--color--base);
	pointer-events: auto;
}

/*
 * Zwei Füllungen liegen übereinander, eine dunkle und eine helle. Beide sind
 * eigene Blöcke und damit im Editor in der Farbe änderbar; welche zu sehen ist,
 * entscheidet die Deckung.
 */
.ld-header__grund {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* Ohne das säße die Füllung durch den Blocksatz 24 Pixel zu tief. */
	margin: 0;
	border-radius: inherit;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	/*
	 * **Hier wird nichts überblendet.** Bei offenem Menü tritt diese Füllung ab
	 * und die des Menüfeldes übernimmt — beide liegen exakt an derselben Stelle
	 * und haben dieselbe Farbe. Das ist eine Übergabe, kein Übergang: Jede Dauer
	 * dabei ist eine Zeitspanne, in der entweder **beide** Füllungen liegen
	 * (dann wird die Pille dunkler) oder **keine** (dann ist sie durchsichtig).
	 *
	 * Genau das war das Aufblinken am Ende des Schließens. WordPress blendet
	 * sein Feld in dem Moment aus, in dem die Bewegung fertig ist; die Füllung
	 * der Pille stand da noch auf null und blendete erst danach über 240
	 * Millisekunden ein. Eine knappe Viertelsekunde lang hatte die Pille also
	 * weder Farbe noch Weichzeichner, und über einem hellen Bild ist das ein
	 * helles Aufblitzen.
	 *
	 * Ohne Dauer fällt beides in dasselbe Bild: Die Klasse am Kopf wird
	 * unmittelbar nach WordPress' Umschalten gesetzt, noch vor dem Zeichnen.
	 */
}

/*
 * **Die Pille wechselt ihre Farbe nicht.** Sie ist immer Hofgrün tief zu 80
 * Prozent mit Weichzeichner, die Schrift immer Kalkweiß — so wie in der
 * Vorlage, dort auf den Wert genau nachgemessen.
 *
 * Vorher schaltete sie über dunklen Abschnitten auf eine helle Füllung um. Das
 * war eine Notlösung: Über Hofgrün tief ist eine Füllung aus Hofgrün tief
 * naturgemäß unsichtbar. Bei der Vorlage fällt das nicht auf, weil sie **einen
 * einzigen** dunklen Abschnitt hat — nachgerechnet mischt sich ihre Pille dort
 * zu `#2F3C30` auf einem Grund von `#314759`, das reicht zum Unterscheiden.
 *
 * Wir haben fünf dunkle Abschnitte, und dort steht die Pille jetzt bewusst
 * ohne sichtbare Füllung da: Schrift und Zeichen schweben frei. Das ist die
 * Entscheidung des Kunden und näher an der Vorlage als das Umschalten.
 */
.ld-header__grund--dunkel {
	opacity: 0.8;
}

/*
 * Drei Plätze: Die beiden äußeren teilen sich den Rest zu gleichen Teilen,
 * damit der Schriftzug wirklich in der Mitte steht und nicht nur ungefähr.
 */
.ld-header__menue,
.ld-header__anfrage {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	margin-block: 0;
}

.ld-header__anfrage {
	display: flex;
	justify-content: flex-end;
}

/*
 * Der Blocksatz gibt jedem folgenden Block einen oberen Abstand. In einer
 * waagerechten Zeile schiebt der die Elemente aus der Mitte — der Schriftzug
 * saß dadurch elf Pixel tiefer als das Menü daneben.
 */
.ld-header__pille > * {
	margin-block: 0;
}

/*
 * Das Bildzeichen in der Mitte, 28 Pixel im Quadrat wie in der Vorlage. Es
 * liegt zweimal übereinander — hell und dunkel —, damit es den Farbwechsel der
 * Pille mitmacht und trotzdem als austauschbares Bild im Editor steht.
 */
/*
 * **Die Höhe ist das Maß, nicht die Breite.** Arbors Zeichen ist quadratisch;
 * unsere Marken sind es nicht. Der Platz bekommt deshalb die gewünschte Höhe,
 * und die Breite folgt dem Seitenverhältnis der Datei — sonst schrumpft die
 * Marke in einem quadratischen Kasten auf die Breite zusammen und steht
 * niedriger da als angegeben.
 *
 * **Zwei Zahlen, mehr braucht ein Wechsel der Marke nicht:**
 *
 * | | |
 * |---|---|
 * | `--ld-marke-h` | Höhe in Grundmaßen |
 * | `--ld-marke-v` | Seitenverhältnis der Datei, Breite durch Höhe |
 *
 * Zurzeit steht dort der Schriftzug **metz**, 1,5 Grundmaße hoch — bei 2056
 * Fensterbreite also 24 auf 67 Bildpunkte. Ein Wortzug ist breit und trägt
 * seine Aussage in der Breite; auf voller Zeichenhöhe stünde er quer durch
 * die halbe Pille. Klein und mittig ist er das, was er sein soll: eine Marke,
 * kein Menüpunkt.
 *
 * **Die Ziffer 28 lag hier vorher auf 2,25 und 1,191** — sie liegt weiter im
 * Ordner, ein Wechsel zurück sind diese zwei Zahlen und eine Zeile im Pattern.
 */
.ld-header__zeichen {
	--ld-marke-h: 1.5;
	--ld-marke-v: 3.941;
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: calc(var(--ld-marke-h) * var(--ld-marke-v) * var(--ld-pille-e));
	height: calc(var(--ld-marke-h) * var(--ld-pille-e));
}

/*
 * **Zwei Marken übereinander — und bewegt wird nur die Deckung.**
 *
 * Der erste Anlauf ließ den Kasten beim Öffnen schmaler werden und beide
 * Marken mittig stehen. **Der Kunde sah es sofort: „sehr abgehackt."** Dahinter
 * steckten zwei Fehler, und beide stehen längst als Regel in `CLAUDE.md`:
 *
 * - **Eine wandernde Breite ist ein Umbruch je Einzelbild.** Die Pille
 *   verteilt ihre drei Plätze mit `space-between`; ändert sich die Breite in
 *   der Mitte, rechnet der Browser die ganze Zeile neu — **samt dem
 *   Weichzeichner hinter der Pille**. „Was sich bewegt, wird verschoben,
 *   nicht neu gerechnet" — hier wurde neu gerechnet.
 * - **Und es war ein Doppelbild.** Die Buchstaben „metz" stehen in den beiden
 *   Dateien an verschiedenen Stellen; während der Blende lagen sie 14
 *   Bildpunkte versetzt übereinander. Dasselbe Muster wie beim Wechsel auf die
 *   ausgestanzte Überschrift im Projekt-Abschnitt.
 *
 * **Jetzt deckt die zweite Marke ihre eigenen Buchstaben, auf den Punkt.** Der
 * Kasten behält immer die Maße von „metz28"; die Fassung ohne Ziffern liegt
 * genau dort, wo in „metz28" das Wort steht. Ausgemessen in der Datei: Das
 * Wort endet bei Bildpunkt **697 von 1001**, die Tinte reicht von Zeile 3 bis
 * 251 von 254. Daraus die vier Werte unten — in Prozent, damit sie bei jeder
 * Größe stimmen.
 *
 * **Das Verhältnis weicht dabei um 0,46 Prozent von der Einzeldatei ab**
 * (2,799 gegen 2,787), also um ein Fünftel Bildpunkt bei 24 Höhe. `contain`
 * fängt das ab, sichtbar ist es nicht.
 *
 * **Übrig bleibt eine einzige Eigenschaft, die sich ändert: `opacity`.** Kein
 * Umbruch, kein Neuzeichnen des Weichzeichners, keine zweite Lage Buchstaben.
 * Die „28" blendet aus, und sonst bewegt sich nichts.
 */
/*
 * **Der Ablauf in zwei Schritten, und die Reihenfolge ist der ganze Punkt.**
 *
 * Erst war die kleine Marke mittig gesetzt und blendete über die große ein —
 * das gab das Doppelbild. Dann lag sie genau auf dem Wort und blieb liegen —
 * dann stand sie bei offenem Menü außermittig, und **auch das wollte der
 * Kunde nicht.** Beides zusammen geht nur nacheinander:
 *
 * | | beim Öffnen | beim Schließen |
 * |---|---|---|
 * | 0 – 0,20 s | die „28" blendet aus, die kleine Marke liegt **deckungsgleich** darunter | die Marke gleitet zurück an ihren Platz im Wort |
 * | 0,20 – 0,55 s | die Marke gleitet in die Mitte der Pille | sie blendet aus, die volle Marke kommt zurück |
 *
 * **Während der Blende bewegt sich nichts, während der Bewegung blendet
 * nichts.** Deshalb gibt es zu keinem Zeitpunkt zwei Sätze Buchstaben an
 * verschiedenen Stellen — der Fehler, den der Kunde als „abgehackt" gesehen
 * hat.
 *
 * **Und beides ist billig:** `opacity` und `transform`. Der Kasten behält
 * seine Breite, die Pille rechnet also nichts neu und der Weichzeichner
 * dahinter bleibt unangetastet.
 *
 * Die Verzögerungen stehen zweimal da, einmal je Richtung: Die Regel im
 * Ruhezustand gilt für den Weg **zurück**, die unter `is-menue-kreuz` für den
 * Weg **hin**. Nur so kehrt sich die Reihenfolge beim Schließen um.
 */
.ld-header__mal {
	position: absolute;
	inset: 0;
	margin: 0;
}

.ld-header__mal--metz28 {
	/* Zurück: erst wenn die kleine Marke wieder an ihrem Platz steht. */
	transition: opacity 0.2s ease 0.35s;
}

/*
 * Die Fassung ohne Ziffern liegt im Ruhezustand **auf dem Wort der vollen
 * Marke**: links bündig, 69,63 Prozent breit (697 von 1001), oben 1,18 und
 * unten 0,79 Prozent eingerückt (Tinte von Zeile 3 bis 251 von 254).
 *
 * **Der Weg in die Mitte sind 21,81 Prozent ihrer eigenen Breite.** Gerechnet:
 * Sie misst 69,63 Prozent des Kastens, links und rechts bleiben also zusammen
 * 30,37 — die Hälfte davon ist 15,185 Prozent des Kastens, und auf ihre eigene
 * Breite bezogen 15,185 ÷ 69,63 = 21,81.
 *
 * Sie lässt den Zeiger durch: Der Verweis steckt in der vollen Marke, und die
 * Pille soll in beiden Zuständen an den Seitenanfang führen.
 */
.ld-header__mal--metz {
	inset: 1.18% 30.37% 0.79% 0;
	opacity: 0;
	transform: translateX(0);
	pointer-events: none;
	/* Zurück: erst gleiten, dann ausblenden. */
	transition:
		transform 0.35s cubic-bezier(0.33, 0, 0.2, 1),
		opacity 0.2s ease 0.35s;
}

.ld-header.is-menue-kreuz .ld-header__mal--metz28 {
	opacity: 0;
	/* Hin: sofort ausblenden, bevor sich etwas bewegt. */
	transition: opacity 0.2s ease;
}

.ld-header.is-menue-kreuz .ld-header__mal--metz {
	opacity: 1;
	transform: translateX(21.81%);
	/* Hin: erst einblenden, dann gleiten. */
	transition:
		opacity 0.2s ease,
		transform 0.35s cubic-bezier(0.33, 0, 0.2, 1) 0.2s;
}

/*
 * **Die Marke ist ein Verweis auf den Seitenanfang.** Der Verweis muss die
 * ganze Fläche einnehmen: Als Inline-Element wäre nur die Tinte des Bildes
 * anklickbar, und der Kasten darum wäre tot.
 */
.ld-header__mal a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

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

.ld-header a,
.ld-header .wp-block-site-title a {
	color: inherit;
	text-decoration: none;
}

/* Der Knopf rechts: umrandet, rund, mit dem Pfeil aus dem Text. */
.ld-header__anfrage a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/*
	 * 42 Pixel hoch bei 2056 — das ist genau die Innenhöhe der Pille, also
	 * 2,625 Grundmaße. Der Knopf füllt die Zeile aus, statt darin zu schwimmen.
	 */
	height: calc(2.625 * var(--ld-pille-e));
	gap: calc(0.5 * var(--ld-pille-e));
	/*
	 * **Die Linie steht in Card Room Green, nicht in gedämpftem Kalkweiß.** In
	 * der Vorlage nachgemessen: `rgb(96, 115, 92)` — bis auf drei Stufen unser
	 * Fassadengrün. Auf dem dunklen Grund der Pille ist das eine ruhige Kante
	 * statt eines hellen Rings; die halbdurchsichtige Kalkweiß-Linie davor kam
	 * auf 133 Helligkeitsstufen und war damit deutlich lauter als dort.
	 */
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 999px;
	padding-block: 0;
	padding-inline: calc(1.25 * var(--ld-pille-e));
	/* 0,875 Grundmaße — 14 Pixel bei 2056, 11 bei 1512. */
	font-size: calc(0.875 * var(--ld-pille-e));
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	background-color: transparent;
	/*
	 * 0,65 Sekunden — dieselbe Dauer und dieselbe Kurve wie überall in der
	 * Kopfzeile, und eine Spur länger als das Abrollen der Beschriftung
	 * darüber. So macht es die Vorlage.
	 */
	transition: background-color 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * **Beim Darüberfahren füllt sich der Knopf, die Linie bleibt.** In der
 * Vorlage nachgelesen: `border-green` bleibt unverändert, dazu kommt
 * `hover:bg-green/40` — dieselbe Farbe wie die Linie, zu 40 Prozent. Vorher
 * ging bei uns die Linie auf volle Textfarbe und sonst geschah nichts.
 *
 * Die 40 Prozent sind hier richtig, obwohl bei `.ld-schalter` 20 stehen: Dort
 * ist die Farbe Salbei, und Salbei zu 40 Prozent wäre auf dunklem Grund ein
 * heller Balken. Card Room Green liegt dagegen dicht am Grund der Pille und
 * bleibt auch bei 40 Prozent eine ruhige Fläche — genau wie dort.
 */
.ld-header__anfrage a:hover,
.ld-header__anfrage a:focus-visible {
	background-color: color-mix(
		in srgb,
		var(--wp--preset--color--primary) 40%,
		transparent
	);
}

/* --------------------------------------------------------------- Menü */

/*
 * In der Vorlage steht links das Symbol aus zwei Strichen, daneben das Wort.
 * Das Wort gehört zur Schaltfläche, damit die ganze Fläche anklickbar ist —
 * deshalb ausnahmsweise im CSS und nicht als Block.
 */
/*
 * Der Wrapper steht mit im Selektor: WordPress setzt an dieser Schaltfläche
 * selbst eine Schriftgröße mit gleicher Gewichtung und lädt sein Stylesheet
 * nach unserem — ohne das zusätzliche Glied gewinnt der Erbwert, und die
 * Schrift wäre 18 statt 11 Pixel groß.
 */
.ld-header .ld-header__menue .wp-block-navigation__responsive-container-open {
	display: flex;
	/* Über dem aufgeklappten Feld — sonst deckt dessen Fläche ihn zu. */
	position: relative;
	z-index: 2;
	align-items: center;
	gap: calc(0.5 * var(--ld-pille-e));
	padding-inline-start: calc(0.75 * var(--ld-pille-e));
	color: inherit;
	font-family: var(--wp--preset--font-family--body);
	/*
	 * Aus der Vorlage übernommen: 0,875 Grundmaße — 14 Pixel bei 2056, 11 bei
	 * 1512. Normale Stärke, fast keine Laufweite. Halbfett mit weiter Sperrung
	 * war der Hauptgrund, warum die Kopfzeile wuchtig wirkte.
	 */
	font-size: calc(0.875 * var(--ld-pille-e));
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ld-header .ld-header__menue .wp-block-navigation__responsive-container-open::before {
	content: "Menü";
}

/*
 * Das Symbol sind zwei haarfeine Striche mit fünf Pixeln Abstand, gedämpft
 * statt in voller Textfarbe — genau wie in der Vorlage. Das eigene Symbol von
 * WordPress tritt dafür ab.
 */
.ld-header .ld-header__menue .wp-block-navigation__responsive-container-open svg {
	display: none;
}

/*
 * Das Zeichen sind zwei haarfeine Striche, die beim Öffnen gegenläufig zum
 * Kreuz drehen. Sie stehen als zwei eigene Elemente da, weil zwei Rahmenkanten
 * desselben Kastens immer gemeinsam drehen; setupMenue() in
 * assets/js/motion.js legt sie an.
 *
 * **Alles daran ist in der Vorlage gemessen** — und zwar am geöffneten Menü,
 * denn geschlossen sieht man die halbe Sache nicht:
 *
 *   Kasten geschlossen        2,5 × 0,5 Grundmaße = 40 × 8 Pixel
 *   Kasten geöffnet           2,5 × 1 Grundmaß    = 40 × 16
 *   Striche                   1 Pixel, über die volle Breite
 *   Farbe                     rgb(96, 115, 92) — Card Room Green
 *   Weg beim Öffnen           0,469 Grundmaße = 7,5 Pixel, gegenläufig
 *   Drehung                   22 Grad, gegenläufig
 *   Dauer                     500 ms
 *
 * **Die Drehung ist 22 Grad, nicht 45.** Daher kommt das flache, breite Kreuz
 * der Vorlage — 37,5 Pixel breit bei 15,9 hoch. Ein Kreuz aus 45 Grad ist
 * quadratisch und wirkt daneben schwer. Und weil der Kasten selbst von 8 auf
 * 16 Pixel wächst, treffen sich beide Striche dabei genau in seiner Mitte.
 */
.ld-header__burger {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	justify-content: space-between;
	width: calc(2.5 * var(--ld-pille-e));
	height: calc(0.5 * var(--ld-pille-e));
	order: -1;
	transition: height 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * **Das Kreuz hängt an einer eigenen Klasse, nicht an `is-menue-offen`.**
 * Jene wird gesetzt und genommen, wenn WordPress sein Feld ein- und
 * ausblendet — beim Schließen also erst, wenn die Bewegung schon vorbei ist.
 * Das Kreuz drehte dadurch 650 Millisekunden zu spät zurück: Das Feld war
 * längst zu, dann erst sprang oben das Zeichen um. Genau das war das Haken am
 * Ende.
 *
 * `is-menue-kreuz` setzt setupMenue() dagegen im Moment des Klicks, in beide
 * Richtungen. Zeichen und Feld laufen damit gemeinsam los.
 *
 * Die Füllung der Pille und die Wortmarke bleiben bewusst an `is-menue-offen`:
 * Beide gehören ans Ende. Käme die Füllung beim Schließen sofort zurück, läge
 * sie 240 Millisekunden lang über der noch geschlossenen Feldfläche und die
 * Stelle würde dunkler; und eine Wortmarke, die mitten in der Fahrt aus dem
 * Feld verschwindet, verschöbe alles darunter.
 */
.ld-header.is-menue-kreuz .ld-header__burger {
	height: var(--ld-pille-e);
}

.ld-header__burger-strich {
	display: block;
	width: 100%;
	height: 1px;
	/* Dieselbe gedämpfte Linie wie am Anfragen-Knopf, nicht die Textfarbe. */
	background-color: var(--wp--preset--color--primary);
	/*
	 * Weg und Drehung stehen als eigene Eigenschaften da und nicht in einem
	 * `transform`: So kann jede für sich laufen, ohne dass die eine die andere
	 * überschreibt.
	 */
	transition:
		translate 500ms cubic-bezier(0.4, 0, 0.2, 1),
		rotate 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ld-header.is-menue-kreuz .ld-header__burger-strich--oben {
	translate: 0 calc(0.469 * var(--ld-pille-e));
	rotate: 22deg;
}

.ld-header.is-menue-kreuz .ld-header__burger-strich--unten {
	translate: 0 calc(-0.469 * var(--ld-pille-e));
	rotate: -22deg;
}


/* ------------------------------------------------- Aufgeklapptes Menü */

/*
 * Bei offenem Menü lässt sich weiterscrollen, wie in der Vorlage. WordPress
 * sperrt das Scrollen sonst, indem es die Seite beim Öffnen auf „nichts
 * überstehen lassen" stellt — sinnvoll für ein Fenster, das die ganze Seite
 * verdeckt, hier aber falsch: Unser Menüfeld ist nur eine gewachsene Pille und
 * lässt den größten Teil der Seite frei.
 */
html.has-modal-open {
	overflow: visible;
}

/*
 * Das Menü ist kein zweites Element, das sich über die Seite legt — es ist
 * dieselbe Pille, die nach unten aufwächst. So macht es die Vorlage, und der
 * Unterschied ist deutlich zu sehen: Die Seite bleibt sichtbar und wird nicht
 * abgedunkelt, man schaut unscharf hindurch.
 *
 * Technisch bleibt der Kasten von WordPress, wo er ist — fixiert —, bekommt
 * aber genau die Maße der Pille: dieselbe Breite, derselbe Abstand von oben,
 * dieselbe Mitte. Dadurch stehen beide deckungsgleich übereinander und lesen
 * sich als eine Form. Die Füllung der Pille tritt so lange ab, sonst lägen
 * zwei Flächen aufeinander.
 *
 * Maße aus der Vorlage, umgerechnet auf 1512 Fensterbreite: Eckenradius 22
 * Pixel, Füllung zu 80 Prozent deckend, Weichzeichner 16 Pixel.
 */
.ld-header .ld-header__menue .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	inset: auto;
	inset-block-start: calc(1.5 * var(--ld-pille-e));
	inset-inline-start: 50%;
	z-index: 1;
	/*
	 * Mittig gesetzt über einen negativen Rand und nicht über translateX:
	 * WordPress setzt an diesem Kasten eine eigene Transformation, die eine
	 * hier gesetzte überschriebe — der Kasten stünde dann um seine halbe
	 * Breite nach rechts versetzt. Die Breite steht deshalb einmal als eigene
	 * Angabe da und wird für den Rand halbiert.
	 */
	--ld-menue-b: min(100% - 2 * var(--ld-pille-rand), calc(40 * var(--ld-pille-e)));
	/*
	 * Randmaß: Der Kasten von WordPress rechnet sonst in content-box, und der
	 * Innenabstand käme auf die Breite obendrauf — das Feld stand rechts sechzig
	 * Pixel über die Pille hinaus, während es links bündig saß.
	 */
	box-sizing: border-box;
	width: var(--ld-menue-b);
	height: auto;
	margin-inline-start: calc(-0.5 * var(--ld-menue-b));
	/*
	 * **Kein Polster am Kasten selbst.** Es lag hier und maß oben und unten
	 * zusammen 174 Bildpunkte — kleiner konnte der Kasten damit nicht werden.
	 * Beim Öffnen sprang er deshalb erst von der Pillenhöhe auf 174 und fing
	 * erst dann an zu wachsen; genau das war der Ruck am Anfang. Das Polster
	 * sitzt jetzt an der Inhaltsebene darin, und der Kasten kann bis auf die
	 * Pillenhöhe zusammengehen.
	 */
	padding: 0;
	/* 1,75 Grundmaße — die 28 Pixel der Vorlage bei 2056. */
	border-radius: calc(1.75 * var(--ld-pille-e));
	/*
	 * Farbe und Weichzeichner stehen hier und nicht am Block: WordPress würde
	 * aus einer Farbwahl am Navigationsblock eine Klasse machen, die ihren Wert
	 * mit !important setzt — die Füllung wäre dann deckend, und das Feld soll
	 * durchscheinen wie die Pille. Deckung und Weichzeichner sind die der
	 * Vorlage: 80 Prozent, 16 Pixel.
	 */
	/*
	 * Das !important ist hier nicht Bequemlichkeit: WordPress setzt an diesem
	 * Kasten selbst eine Füllung, und zwar ebenfalls mit !important. Ohne
	 * gleiches Mittel bliebe das Feld deckend — der Weichzeichner dahinter
	 * liefe ins Leere, weil er nichts durchscheinen ließe.
	 */
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 80%, transparent) !important;
	color: var(--wp--preset--color--base);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	/*
	 * **Das Feld wächst nach unten auf.** In der Vorlage gemessen: von 58 auf
	 * 758 Bildpunkte in **0,65 Sekunden** mit `cubic-bezier(0.4, 0, 0.2, 1)`.
	 * Der gemessene Verlauf — nach 111 ms erst 6 Prozent, nach 221 ms schon 42,
	 * nach 386 ms 84 — ist genau diese Kurve: zögernder Start, schneller
	 * Mittelteil, langes weiches Auslaufen.
	 *
	 * Bewegt wird die **Höhe**, nicht die Deckung und nicht die Skalierung.
	 * Die Menüpunkte stehen dabei die ganze Zeit auf voller Deckung; es gibt
	 * dort **keinen Versatz und kein Einblenden** — die wachsende Pille gibt sie
	 * einfach frei. Nachgemessen, nicht vermutet.
	 *
	 * Den Zielwert setzt `setupMenue()` in assets/js/motion.js als
	 * `--ld-menue-h`: In reiner CSS-Rechnung ginge es nicht, weil die Höhe an
	 * der Zahl der Menüpunkte hängt.
	 */
	overflow: hidden;
	/*
	 * **Bewegt wird der Beschnitt, nicht die Höhe.** Das Feld steht von Anfang
	 * an in voller Höhe da und wird nur von unten her freigegeben — optisch
	 * dasselbe Aufwachsen.
	 *
	 * Der Unterschied liegt im Aufwand: Eine Höhenänderung zwingt den Browser,
	 * in **jedem Einzelbild** den ganzen Inhalt neu zu setzen — acht
	 * Menüpunkte, die Wortmarke, und ein Weichzeichner, der für jede neue Höhe
	 * den Hintergrund neu durchrechnet. Genau dort ruckelte es, und am
	 * stärksten in dem Moment, in dem die Wortmarke dazukam. Beim Beschnitt
	 * ändert sich am Aufbau nichts; der Kasten steht still.
	 *
	 * `--ld-menue-schnitt` setzt `setupMenue()` in assets/js/motion.js: erst
	 * auf die geschlossene Höhe, dann auf null. Der Eckenradius wird
	 * mitgeschnitten, sonst wären die Ecken während der Fahrt eckig.
	 */
	clip-path: inset(
		0 0 var(--ld-menue-schnitt, 0px) 0 round calc(1.75 * var(--ld-pille-e))
	);
	transition: clip-path 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ohne Bewegung springt das Feld sofort auf — wie jede andere Bewegung hier. */
@media (prefers-reduced-motion: reduce) {
	.ld-header .ld-header__menue .wp-block-navigation__responsive-container.is-menu-open {
		transition: none;
		clip-path: none;
	}
}

/* Die Pillenzeile bleibt darüber stehen und bedienbar. */
.ld-header.is-menue-offen .ld-header__grund {
	opacity: 0;
}

.ld-header.is-menue-offen .ld-header__pille {
	color: var(--wp--preset--color--base);
	z-index: 2;
}

.ld-header .ld-header__menue .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 0;
	/* Das Polster des Feldes — siehe oben, es darf nicht am Kasten hängen. */
	box-sizing: border-box;
	width: 100%;
	padding-block: calc(var(--ld-pille-h) + clamp(1.1rem, 2vw, 2.2rem)) clamp(2rem, 3.4vw, 3.75rem);
	padding-inline: clamp(1rem, 2vw, 2.2rem);
}

.ld-header .ld-header__menue .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	flex-direction: column;
	/*
	 * WordPress setzt hier `flex-wrap: wrap`. Chrome lässt eine Spalte ohne
	 * feste Höhe einfach wachsen; Safari rechnet sie auf die Höhe der ersten
	 * Zeile und bricht jeden weiteren Punkt in eine neue Spalte um — die
	 * Menüpunkte standen dort nebeneinander und liefen aus dem Feld.
	 */
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 0;
	text-align: center;
}

/*
 * Mit der Maus geöffnet: kein Fokusrahmen um den ersten Punkt. Safari zeigt
 * ihn sonst nach jedem Öffnen; mit der ersten Taste nimmt setupMenue() die
 * Klasse ab, und der Rahmen ist für die Tastatur wieder da.
 */
.ld-header.is-zeiger .wp-block-navigation__responsive-container :focus {
	outline: none;
}

/*
 * Die Wortmarke über den Punkten. Sie steht als Block im Pattern und bleibt
 * damit im Editor austauschbar; setupMenue() in assets/js/motion.js hängt sie
 * beim Öffnen hierher und danach zurück. Der Abstand darunter ist der der
 * Vorlage: 3 rem ihrer Grundgröße, also 38 Pixel bei 1512.
 */
.ld-header__wortmarke {
	display: none;
	margin: 0 0 clamp(1.5rem, 2.5vw, 2.75rem);
}

.ld-header.is-menue-offen .ld-header__wortmarke {
	display: block;
}

/*
 * **Die Marke ist größer als die Menüpunkte, und das ist der Punkt.** In
 * Arbors Menü nachgemessen: Ihre Marke ist zweizeilig, rund 80 Bildpunkte
 * hoch — also 40 je Zeile —, und ihre Menüpunkte stehen auf 32. Das Verhältnis
 * ist 1,25 zu 1, und daran erkennt man, dass es die Marke ist und nicht der
 * erste Punkt der Liste.
 *
 * **Unsere ist seit dem 09.09.2026 ebenfalls zweizeilig** und lässt sich
 * damit unmittelbar mit ihrer vergleichen. Der Wert steht auf **5 Grundmaßen**
 * — 80 Bildpunkte bei 2056 Fensterbreite, genau ihr Maß.
 *
 * **Die vierzeilige Fassung stand auf neun.** Das waren dieselben 36 Bildpunkte
 * je Zeile; bei sieben stand sie kleiner da als die Punkte darunter, bei zehn
 * eine Spur zu wuchtig. Wer zurückwechselt, setzt hier wieder 9 und dort das
 * Seitenverhältnis 0,706.
 *
 * Gerechnet wird in `--ld-pille-e`, dem Grundmaß der Kopfzeile — nicht in
 * unserer eigenen Wurzelgröße. Das Menüfeld ist die gewachsene Pille und
 * gehört damit in dieselbe Rechnung.
 */
/* Der Anfrage-Knopf im Menüfeld gibt es nur auf dem Telefon, siehe dort. */
.ld-header__menue-anfrage {
	display: none;
}

.ld-header__wortmarke img {
	display: block;
	width: auto;
	height: calc(var(--ld-wortmarke-h, 5) * var(--ld-pille-e));
}

/*
 * Die Punkte: gemischte Schreibung, keine Versalien — eine Antiqua verträgt
 * die enge Laufweite nicht, die von der breiten Grotesk stammte. Light, mit
 * dem Ausgleich `--ld-light-lauf`.
 * 2,5 rem der Vorlage entsprechen 31 Pixeln bei 1512.
 */
.ld-header .ld-header__menue .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	position: relative;
	display: block;
	overflow: hidden;
	/*
	 * **Am Fenster selbst liegt kein Polster.** `overflow: hidden` schneidet an
	 * der Polsterkante ab, nicht an der Textkante — ein Polster hier ist also
	 * ein Streifen, in dem die weggerollte Zeile weiter zu sehen ist. Genau
	 * dort hingen die Unterlängen von „g" und „j" noch im Bild, nachdem die
	 * Zeile schon gewechselt hatte. Das Polster sitzt jetzt an den Zeilen.
	 *
	 * So macht es die Vorlage auch: Ihr Fenster hat `padding: 0`, die beiden
	 * Zeilen darin je 4 Pixel oben und unten.
	 */
	padding-block: 0;
	font-family: var(--wp--preset--font-family--heading);
	/*
	 * 2 Grundmaße — 32 Bildpunkte bei 2056, in der Vorlage gemessen; dort
	 * ebenfalls Light. Unsere Punkte standen einmal auf 42,8 und waren damit
	 * ein Drittel zu groß.
	 */
	font-size: calc(2 * var(--ld-pille-e));
	font-weight: 300;
	/*
	 * **Zeilenhöhe 1,25, nicht 1,1** — auch das aus der Vorlage. Der Grund ist
	 * nicht der Rhythmus, sondern der Beschnitt: Bei 1,1 ragen die Unterlängen
	 * einer Antiqua unten aus ihrer eigenen Zeile heraus, und was herausragt,
	 * bleibt beim Wegrollen stehen. Bei 1,25 liegt die Schrift vollständig in
	 * ihrer Zeile, und ein Weg von einer ganzen Zeilenhöhe räumt sie restlos
	 * aus dem Fenster.
	 *
	 * Der Zeilenabstand bleibt derselbe: 1,25 mal 32 sind 40 Bildpunkte, dazu
	 * zweimal 0,125 em Polster ergibt die 48 der Vorlage.
	 */
	line-height: 1.25;
	letter-spacing: var(--ld-light-lauf);
	text-transform: none;
	text-decoration: none;
	color: var(--wp--preset--color--sage);
}

/*
 * Beim Darüberfahren rollt die Zeile nach oben aus dem Fenster heraus, während
 * dieselbe Zeile von unten nachrückt — dieselbe Mechanik wie bei den
 * Schaltflächen. Im Markup steht die Zeile nur einmal; die zweite legt
 * setupMenue() an. Stünde sie zweimal da, müsste der Kunde denselben Text an
 * zwei Stellen ändern.
 */
.ld-header__menue .wp-block-navigation-item__label,
.ld-header__nach {
	display: block;
	/* Das Polster der Vorlage: 4 Bildpunkte bei 32 Grad, also 0,125 em. */
	padding-block: 0.125em;
	line-height: 1.25;
	/*
	 * **0,65 Sekunden mit derselben Kurve wie das aufgehende Feld.** In der
	 * Vorlage gemessen. Vorher standen hier 420 Millisekunden mit unserer
	 * eigenen Kurve — das war ein Drittel schneller und wirkte dadurch
	 * geschäftig statt getragen. Die Vorlage benutzt für alles in der Kopfzeile
	 * dieselbe Dauer und dieselbe Kurve; genau daher kommt ihre Ruhe.
	 */
	transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Die zweite Zeile wartet eine volle Zeilenhöhe tiefer. Ein ganzer Weg statt
 * der früheren 110 Prozent: Die beiden Zeilen liegen damit lückenlos
 * aneinander und schieben einander aus dem Fenster, statt in der Mitte der
 * Fahrt kurz beide zu fehlen.
 */
.ld-header__nach {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	transform: translateY(100%);
	color: var(--wp--preset--color--accent);
}

.ld-header .ld-header__menue .wp-block-navigation-item__content:hover
	.wp-block-navigation-item__label {
	transform: translateY(-100%);
}

.ld-header .ld-header__menue .wp-block-navigation-item__content:hover .ld-header__nach {
	transform: translateY(0);
}

/*
 * Geschlossen wird über dieselbe Schaltfläche, mit der geöffnet wurde: Die
 * beiden Striche drehen sich an Ort und Stelle zum Kreuz. Das eigene Kreuz von
 * WordPress tritt dafür ab — zwei Bedienelemente für dieselbe Sache wären eins
 * zu viel.
 *
 * **Die Beschriftung bleibt dabei „Menü".** Hier stand einmal „Schließen",
 * sobald das Feld offen war. Das Wort ist mehr als doppelt so lang, die
 * Schaltfläche sprang dadurch bei jedem Öffnen und Schließen in der Breite —
 * genau in dem Moment, in dem sich daneben etwas bewegte. Die Vorlage
 * beschriftet ihre Schaltfläche durchgehend mit „Menu"; das gedrehte Kreuz
 * sagt für sich, dass es jetzt schließt.
 *
 * Für Vorlesegeräte wird der Zweck trotzdem gesagt: setupMenue() in
 * assets/js/motion.js führt `aria-label` mit.
 */
.ld-header .wp-block-navigation__responsive-container-close {
	display: none;
}

/* ------------------------------------------------------ Nur für Vorlesegeräte */

/*
 * Wenn eine Überschrift als Grafik läuft, braucht die Seite den Text trotzdem —
 * für Vorlesegeräte und für Suchmaschinen. So ein Block steht im Quelltext,
 * ist aber nicht zu sehen.
 */
.ld-nur-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------- Vorhang zwischen Seiten */

/*
 * **Der Wechsel auf eine eigene Seite läuft hinter einem Vorhang ab.**
 * Kontakt, Datenschutzerklärung und Impressum liegen nicht im Scrollweg der
 * Startseite; man springt dorthin. In der Vorlage schiebt sich dabei eine
 * Fläche über die alte Seite und gibt danach die neue frei.
 *
 * In der Vorlage gemessen — sie setzt die Werte über GSAP Bild für Bild, im
 * CSS steht dort nichts:
 *
 *   Fläche              bildschirmfüllend, `rgb(46, 58, 38)`, ohne Inhalt
 *   Zufahren            0,95 s, von 0 auf volle Höhe, Ursprung **unten**
 *   Pause               0,26 s — dort der Wechsel der Seite
 *   Aufziehen           0,90 s, von voller Höhe auf 0, Ursprung **oben**
 *   Verlauf             ausgeprägtes Anlaufen und Auslaufen; bei 20 Prozent
 *                       der Zeit erst 4 Prozent des Weges, die Hälfte des
 *                       Weges bei der Hälfte der Zeit
 *
 * **Der Ursprung kippt in der Mitte von unten nach oben.** Dadurch wandert
 * erst die Oberkante der Fläche nach oben und deckt zu, danach ihre
 * Unterkante — eine einzige durchgehende Bewegung nach oben, kein Auf und Ab.
 * Das ist der Griff, der es teuer aussehen lässt.
 *
 * Bei uns ist der Wechsel ein echter Seitenaufruf und kein Umschalten im
 * Browser. Die Pause ist deshalb die untere Grenze: Dazu kommt, was das Laden
 * der neuen Seite braucht. Der Vorhang steht so lange still.
 *
 * `rgb(46, 58, 38)` der Vorlage ist bis auf drei Stufen unser Hofgrün tief.
 */
.ld-vorhang {
	position: fixed;
	inset: 0;
	/* Über allem, auch über der Kopfzeile — die liegt auf 20. */
	z-index: 90;
	background-color: var(--wp--preset--color--contrast);
	transform: scaleY(0);
	transform-origin: bottom;
	pointer-events: none;
}

/* Beim Verlassen: von unten herauf, bis alles zu ist. */
html.ld-geht .ld-vorhang {
	transform: scaleY(1);
	transform-origin: bottom;
	transition: transform 0.95s cubic-bezier(0.65, 0, 0.35, 1);
}

/*
 * Beim Ankommen steht die Fläche schon da und zieht nach oben ab.
 *
 * Das ist bewusst eine Animation und kein Übergang: Eine Animation mit
 * `backwards` deckt die Seite **vom ersten Bild an** zu, auch während der
 * Verzögerung, und sie läuft von allein zu Ende. Bliebe sie an einer
 * Kennzeichnung hängen, die ein Skript wieder abnehmen muss, stünde die Seite
 * bei einem Fehler für immer hinter einer grünen Fläche.
 */
html.ld-kommt .ld-vorhang {
	transform-origin: top;
	animation: ld-vorhang-auf 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.26s both;
}

@keyframes ld-vorhang-auf {
	from {
		transform: scaleY(1);
	}

	to {
		transform: scaleY(0);
	}
}

/*
 * Ohne Bewegung entfällt der Vorhang ganz — der Seitenwechsel ist dann der
 * gewöhnliche des Browsers. setupVorhang() fängt den Klick dann gar nicht ab.
 */
@media (prefers-reduced-motion: reduce) {
	html.ld-geht .ld-vorhang,
	html.ld-kommt .ld-vorhang {
		display: none;
		animation: none;
		transition: none;
	}
}

/* ---------------------------------------------------------------- Abschnitt */

/*
 * Abschnitte stoßen aneinander. WordPress setzt zwischen alle Blöcke einen
 * Standardabstand — bei uns 24 Pixel —, und weil der Seitenhintergrund
 * sandfarben ist, blitzte er zwischen zwei Abschnitten als heller Streifen
 * durch. Zwischen zwei ganzseitigen Bildern gehört dort keine Naht hin.
 */
main.wp-block-group > * + * {
	margin-block-start: 0;
}

/*
 * **Und dieselbe Naht liegt eine Ebene höher noch einmal.** Zwischen dem
 * Inhalt und der Fußzeile setzt WordPress denselben Abstand — gemessen 20,5
 * Bildpunkte —, und dort stand der Seitengrund in Kalkgrau als Streifen
 * quer über die Seite. Auf der Startseite fiel er nie auf, weil der letzte
 * Abschnitt dort selbst Kalkgrau ist; unter der Wohnungsseite, die hell in
 * Kalkweiß endet, war er deutlich zu sehen.
 *
 * WordPress schreibt seine Regel mit `:where()` und damit ohne Gewicht —
 * eine einzelne Klasse genügt hier, anders als bei `.has-global-padding`.
 */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.ld-section {
	position: relative;
	padding-block: var(--wp--preset--spacing--70);
}

/* Der Auftakt füllt den Bildschirm und bringt seinen Abstand selbst mit. */
.ld-section.ld-section--full {
	padding-block: 0;
}

/* ------------------------------------------------------------------- Labels */

/*
 * Kleine Versalien-Zeile über einer Überschrift.
 *
 * Hier steht nur die Form — Versalien, Laufweite, Grad. Schriftart und Farbe
 * tragen die Blöcke selbst, damit sie im Editor änderbar bleiben. Eine
 * Festlegung an dieser Stelle würde jede Wahl im Editor überstimmen.
 *
 * **Die Laufweite ist 0,02 em und war einmal 0,22.** Der weite Wert stammt aus
 * der Zeit vor den Messungen an der Vorlage; jeder danach gebaute Abschnitt
 * benutzt 0,02 und eine eigene Klasse — „Architektur", „Umgebung", „Die Idee",
 * „Zwei Häuser, ein Hof". Damit standen im Theme zwei Laufweiten für dieselbe
 * Sache nebeneinander, und die weite fiel als Fremdkörper auf. Sie ist am
 * 31.08.2026 überall herausgenommen worden.
 */
.ld-label {
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.02em;
	line-height: 1.5;
	text-transform: uppercase;
	margin-block: 0;
}

/* --------------------------------------------------------------- Platzhalter */

/*
 * Solange kein Bildmaterial da ist: eine ruhige Fläche mit Beschriftung.
 * Der Kunde ersetzt sie später, indem er dem Block ein Hintergrundbild gibt —
 * die Klasse und damit der Effekt bleiben erhalten.
 */
.ld-placeholder::after {
	content: "";
	position: absolute;
	/* Oben links unter der Kopfzeile, damit die Beschriftung dem Inhalt nicht ins Gehege kommt. */
	inset-block-start: var(--wp--preset--spacing--60);
	inset-inline-start: var(--wp--preset--spacing--40);
	z-index: 5;
	opacity: 0.7;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--custom--on-dark-soft);
	pointer-events: none;
}

/* Die Beschriftung steckt in der jeweiligen Modifier-Klasse. */
.ld-placeholder--vorderhaus::after {
	content: "Platzhalter — Rendering Vorderhaus";
}

.ld-placeholder--lage::after {
	content: "Platzhalter — Luftbild Umgebung";
}

/* Sobald ein echtes Bild hinterlegt ist, verschwindet die Beschriftung. */
.ld-placeholder:has(img)::after,
.ld-placeholder.has-background-image::after {
	content: none;
}

/*
 * Auf schmalen Geräten ist zu wenig Platz für die Platzhalter-Beschriftung
 * neben der Kopfzeile. Sie ist ohnehin nur ein Baugerüst und verschwindet,
 * sobald echtes Bildmaterial da ist.
 */
@media (max-width: 781px) {
	.ld-placeholder::after {
		content: none;
	}
}

/* ------------------------------------------- Fortschritt in klebenden Abschnitten */

/*
 * Wo eine Bühne stehen bleibt, während man weiterscrollt, weiß niemand, ob
 * gleich Schluss ist oder noch fünf Bildschirmhöhen kommen. Der Balken zeigt,
 * wie viel von diesem einen Abschnitt noch aussteht — nicht von der Seite.
 *
 * Das Skript des Abschnitts setzt nur zwei Zahlen: --ld-fortschritt (0 bis 1)
 * und, wo es abzählbare Bilder gibt, --ld-schritt (0, 1, 2 …). Alles Weitere
 * rechnet das CSS.
 */
.ld-fortschritt {
	position: absolute;
	inset-block-end: clamp(1.5rem, 4svh, 3.25rem);
	inset-inline-start: clamp(1.5rem, 4vw, 5rem);
	z-index: 5;
	display: flex;
	align-items: center;
	/* 16 Pixel zwischen Balken und Zahl — gemessen an der Vorlage. */
	gap: 1rem;
	margin: 0;
	pointer-events: none;
}

/*
 * Der Blocksatz gibt der Zählung als zweitem Block einen oberen Abstand von 24
 * Pixeln. Bei mittiger Ausrichtung zählt der Abstand mit — die Zahl saß dadurch
 * genau die Hälfte davon, also 12 Pixel, unter der Balkenmitte.
 */
.ld-fortschritt > * {
	margin-block: 0;
}

/* Die Schiene liegt gedämpft, die Füllung läuft in voller Deckung darüber. */
.ld-fortschritt__schiene {
	position: relative;
	display: block;
	width: clamp(7rem, 14.5vw, 14rem);
	height: 1px;
	/*
	 * Die Schiene ist nur die Strecke und deshalb stark zurückgenommen. Wichtig:
	 * Das darf nicht über opacity laufen — eine Deckung am Elternteil gilt auch
	 * für die Füllung darin, und genau deshalb war vom Fortschritt nichts zu
	 * sehen. Die Durchsichtigkeit steckt jetzt in der Farbe selbst.
	 */
	background: color-mix(in srgb, currentColor 24%, transparent);
}

.ld-fortschritt__schiene::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: calc(var(--ld-fortschritt, 0) * 100%);
	/* Terrakotta ist hier rein dekorativ — als Fläche ist der Kontrast dafür da. */
	background: var(--wp--preset--color--accent);
}

/*
 * Die Ziffern liegen übereinander. Sichtbar ist die, deren Nummer dem
 * aktuellen Schritt entspricht; die vergangene wischt nach oben weg, die
 * kommende wartet unten. Ohne Vergleichsoperator geht das über den Abstand:
 * Das Quadrat der Differenz ist null beim eigenen Schritt und mindestens eins
 * bei jedem anderen.
 */
/*
 * Die Zahl ist eine Orientierungshilfe, kein Inhalt: klein, ungesperrt und in
 * derselben zurückgenommenen Farbe wie der Balken — so hält es die Vorlage.
 * Die Farbe steht ausnahmsweise im CSS, weil sie zum Balken passen muss und
 * mit ihm zusammen den Farbwechsel über hellen und dunklen Abschnitten mitmacht.
 */
.ld-fortschritt__zahlen {
	position: relative;
	display: block;
	min-width: 2ch;
	height: 1em;
	font-size: clamp(0.6rem, 0.73vw, 0.8rem);
	line-height: 1;
	letter-spacing: normal;
	color: color-mix(in srgb, currentColor 60%, transparent);
}

.ld-fortschritt__zahl {
	--ld-d: calc(var(--ld-schritt, 0) - var(--ld-i, 0));
	/*
	 * Die beiden Ziffern kreuzen sich auf halbem Weg bei je 50 Prozent Deckung.
	 * Mit einem steileren Abfall gäbe es einen Moment, in dem keine von beiden
	 * zu sehen ist.
	 */
	--ld-hier: clamp(0, calc(1 - var(--ld-d) * var(--ld-d) * 2), 1);
	position: absolute;
	inset: 0;
	margin: 0;
	font-size: inherit;
	line-height: 1;
	letter-spacing: inherit;
	opacity: var(--ld-hier);
	transform: translateY(calc(var(--ld-d) * -0.9em));
	filter: blur(calc((1 - var(--ld-hier)) * 4px));
}

.ld-fortschritt__zahl--1 { --ld-i: 0; }
.ld-fortschritt__zahl--2 { --ld-i: 1; }
.ld-fortschritt__zahl--3 { --ld-i: 2; }
.ld-fortschritt__zahl--4 { --ld-i: 3; }
.ld-fortschritt__zahl--5 { --ld-i: 4; }

/*
 * Ohne Bewegung gibt es keinen Scrollschacht und damit nichts anzuzeigen.
 * Der Balken verschwindet dann ganz, statt bei null stehen zu bleiben.
 */
@media (prefers-reduced-motion: reduce) {
	.ld-fortschritt {
		display: none;
	}
}

@media (max-width: 781px) {
	.ld-fortschritt {
		gap: 1rem;
	}

	.ld-fortschritt__schiene {
		width: 5rem;
	}
}

/* ------------------------------------------------------------ Schaltfläche */

/*
 * Die Pille nach dem Vorbild von belgradearbor.rs, dort an der Aufschrift
 * „Explore in 3D" gemessen (Fenster 1512 × 767): 43,9 Pixel hoch, mindestens
 * 172,6 breit, 15,7 Pixel Innenabstand, Schriftgrad 11 Pixel, Laufweite
 * 0,02 em, Zeichen 25 Pixel. Die Vorlage rechnet all das aus einer Grundgröße,
 * die mit dem Fenster wächst — deshalb hier durchweg vw-Anteile, die bei 1512
 * genau diese Werte ergeben.
 *
 * Beim Darüberfahren rollt die Beschriftung samt Zeichen nach oben aus der
 * Pille heraus, während dieselbe Zeile von unten nachrückt. Im Block steht sie
 * nur einmal — die zweite Zeile legt assets/js/motion.js an, damit der Text an
 * genau einer Stelle geändert wird.
 */
/*
 * Die Höhe der Pille steht an der Wurzel, nicht an `.ld-schalter`: Wer eine
 * Pille unter etwas setzt, muss mit ihrer Höhe rechnen können, ohne die Zahl
 * ein zweites Mal hinzuschreiben — so die Legende der Badvariationen.
 */
:root {
	--ld-schalter-hoehe: clamp(2.5rem, 2.9vw, 3.4rem);
}

.ld-schalter {
	--ld-schalter-farbe: var(--wp--preset--color--sage);
	/*
	 * **Die Mindestbreite ist auf zwei Drittel zurückgenommen.** Sie stammt
	 * aus der Vorlage — dort messen die Pillen 220 Bildpunkte und hören bei
	 * sehr langen Beschriftungen erst später auf zu wachsen.
	 *
	 * **Der Haken: Die Vorlage setzt nie ein einzelnes Wort auf eine Pille.**
	 * Ihre kürzeste Beschriftung, „Find out more", füllt den Kasten noch zu 44
	 * Prozent. Bei unserem „Anfragen" waren es **29** — das Wort schwamm
	 * sichtbar in der Fläche. Bei „Die Lage" dasselbe.
	 *
	 * 7,55 vw trifft bei 2056 genau Arbors engstes Verhältnis. **Betroffen
	 * sind nur die vier kürzesten Beschriftungen** — die übrigen sieben sind
	 * ohnehin breiter als die neue Untergrenze und bleiben, wie sie waren.
	 */
	--ld-schalter-breite: clamp(6.3rem, 7.55vw, 8.95rem);
	--ld-schalter-luft: clamp(0.85rem, 1.04vw, 1.25rem);
	--ld-schalter-grad: clamp(0.62rem, 0.73vw, 0.85rem);
	--ld-schalter-mass: clamp(1.35rem, 1.66vw, 2rem);
	--ld-schalter-tempo: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

	/* Die Pille hat eine feste Breite, das Fenster füllt sie aus. */
	--ld-rolle-b: 100%;
	--ld-rolle-h: var(--ld-schalter-mass);
}

/*
 * Jede Schaltfläche trägt ihr Zeichen als Modifier. Neue Ziele bekommen eine
 * weitere Zeile hier und eine Datei in assets/images/symbole/ — die Zeichnungen
 * sind einfarbige Masken, die Farbe kommt aus dem Token darüber.
 */
.ld-schalter--architektur { --ld-schalter-bild: url("../images/symbole/architektur.svg"); }
.ld-schalter--lage        { --ld-schalter-bild: url("../images/symbole/lage.svg"); }
.ld-schalter--wohnungen   { --ld-schalter-bild: url("../images/symbole/wohnungen.svg"); }

/*
 * Farbe steht bewusst auf „inherit": Die Textfarbe kommt aus dem Block und
 * bleibt damit im Editor einstellbar. Nur Linie und Zeichen sind hier gesetzt,
 * weil sie zum Entwurf gehören und nicht zum Inhalt.
 *
 * **Ein Verweis oder eine Schaltfläche — beides.** Meistens führt die Pille
 * woandershin und ist ein Verweis. Wo sie etwas auf derselben Seite tut, ist
 * sie ein `button`; das „Mehr anzeigen" unter der Wohnungsliste ist der erste
 * solche Fall. In der Vorlage ist ihr „See more" dieselbe Pille wie „Submit a
 * request", auf den Pixel — 220 × 56 gegen 229 × 56.
 */
.ld-schalter :is( a, button ) {
	box-sizing: border-box;
	display: inline-flex;
	font-family: inherit;
	cursor: pointer;
	align-items: center;
	justify-content: space-between;
	min-width: var(--ld-schalter-breite);
	height: var(--ld-schalter-hoehe);
	padding-inline: var(--ld-schalter-luft);
	border: 1px solid var(--ld-schalter-farbe);
	border-radius: 999px;
	background-color: transparent;
	color: inherit;
	font-size: var(--ld-schalter-grad);
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	/*
	 * Die Vorlage lässt die Füllung eine Spur länger laufen als die Zeilen —
	 * dadurch steht die Schrift schon still, während die Farbe noch ankommt.
	 */
	transition: background-color 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Salbei zu 40 Prozent wie in der Vorlage wäre auf unserem dunklen Braun ein
 * heller Balken — dort liegt dieselbe Farbfamilie auf sich selbst und fällt
 * kaum auf. 20 Prozent ergeben hier denselben zurückhaltenden Eindruck.
 */
.ld-schalter :is( a, button ):hover,
.ld-schalter :is( a, button ):focus-visible {
	background-color: color-mix(in srgb, var(--ld-schalter-farbe) 20%, transparent);
}

.ld-schalter :is( a, button ):focus-visible {
	outline: 2px solid var(--ld-schalter-farbe);
	outline-offset: 3px;
}

/*
 * **Das Fenster ist das gemeinsame Bauteil aller Schaltflächen der Seite** —
 * der Pille in den Abschnitten, dem Knopf in der Kopfzeile und dem Absenden im
 * Kontaktformular. In der Vorlage ist das ebenfalls ein einziges Bauteil: Ihr
 * „Inquire" oben trägt dieselben Klassen wie die Knöpfe in den Abschnitten.
 * Bei uns waren es drei verschiedene Dinge, von denen nur eines abrollte.
 *
 * Zwei Stellschrauben halten es beweglich:
 *
 *   --ld-rolle-b   Breite. `100%` dort, wo die Schaltfläche eine feste Breite
 *                  hat (die Pille), sonst `auto` — dann bestimmt die Zeile
 *                  selbst, wie breit das Fenster wird.
 *   --ld-rolle-h   Höhe des Fensters, also die Zeilenhöhe. Voreinstellung
 *                  1,5 em, das sind die 21 Bildpunkte der Vorlage bei 14 Grad.
 */
.ld-schalter__fenster {
	position: relative;
	display: block;
	width: var(--ld-rolle-b, auto);
	height: var(--ld-rolle-h, 1.5em);
	overflow: hidden;
}

.ld-schalter__zeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ld-schalter-luft, 0.6em);
	width: var(--ld-rolle-b, auto);
	height: 100%;
	/*
	 * 0,6 Sekunden mit `cubic-bezier(0.4, 0, 0.2, 1)` — in der Vorlage als
	 * `duration-600` gemessen. Die Füllung darunter läuft mit 0,65 Sekunden
	 * eine Spur länger: Die Schrift steht schon still, während die Farbe noch
	 * ankommt. Auch das ist dort so.
	 */
	transition: transform var(--ld-schalter-tempo, 0.6s cubic-bezier(0.4, 0, 0.2, 1));
}

/* Die zweite Zeile wartet genau eine Zeilenhöhe tiefer, außerhalb des Fensters. */
.ld-schalter__zeile--klon {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	/* Immer über die volle Fensterbreite, auch wenn die erste Zeile sie setzt. */
	width: 100%;
	transform: translateY(100%);
}

/*
 * **Ausgelöst wird über das Fenster, nicht über eine Liste von Schaltflächen.**
 * `.ld-schalter__zeile` gibt es nur in unseren Schaltflächen; jede weitere
 * bekommt das Abrollen damit von allein, ohne dass hier eine Zeile dazukommt.
 */
:is( a, button ):hover > .ld-schalter__fenster > .ld-schalter__zeile,
:is( a, button ):focus-visible > .ld-schalter__fenster > .ld-schalter__zeile {
	transform: translateY(-100%);
}

:is( a, button ):hover > .ld-schalter__fenster > .ld-schalter__zeile--klon,
:is( a, button ):focus-visible > .ld-schalter__fenster > .ld-schalter__zeile--klon {
	transform: translateY(0);
}

/*
 * Das Zeichen ist eine Maske: Die Zeichnung gibt nur die Form vor, die Farbe
 * kommt aus dem Token. So passt es sich mit, wenn die Schaltfläche einmal auf
 * hellem Grund steht.
 */
.ld-schalter__zeile::after {
	content: none;
	flex: none;
	width: var(--ld-schalter-mass);
	height: var(--ld-schalter-mass);
	background-color: var(--ld-schalter-farbe);
	-webkit-mask: var(--ld-schalter-bild) center / contain no-repeat;
	mask: var(--ld-schalter-bild) center / contain no-repeat;
}

.ld-schalter--architektur .ld-schalter__zeile::after,
.ld-schalter--lage .ld-schalter__zeile::after,
.ld-schalter--wohnungen .ld-schalter__zeile::after {
	content: "";
}

/* Ohne Skript bleibt die Pille — nur ohne Zeichen und ohne Abrollen. */
.ld-schalter:not(.is-bereit) a {
	justify-content: center;
}

/*
 * Ohne Bewegung entfällt das Abrollen ganz. Die Beschriftung steht still, die
 * Füllung kommt sofort — die Schaltfläche bleibt also vollständig bedienbar
 * und zeigt weiterhin an, dass der Zeiger auf ihr liegt.
 */
@media (prefers-reduced-motion: reduce) {
	.ld-schalter__zeile--klon {
		display: none;
	}

	.ld-schalter a,
	.ld-header__anfrage a,
	.ld-schalter__zeile {
		transition: none;
	}

	:is( a, button ):hover > .ld-schalter__fenster > .ld-schalter__zeile,
	:is( a, button ):focus-visible > .ld-schalter__fenster > .ld-schalter__zeile {
		transform: none;
	}
}

/* ----------------------------------------------- Wörter und Buchstaben */

/*
 * Text, der Wort für Wort aus der Unschärfe kommt. Jedes Wort — und wo es
 * buchstabenweise läuft, jedes Zeichen — hat seinen eigenen Verzug. Das
 * Abschnitts-Skript setzt am Textblock nur --ld-p, seinen Fortschritt; wann
 * das einzelne Wort an der Reihe ist, rechnet das CSS aus --ld-wd. Deshalb
 * genügt eine Zuweisung je Textblock statt einer je Wort.
 *
 * Der Baustein steht hier und nicht bei einem Abschnitt, weil ihn inzwischen
 * mehrere benutzen — „Die Idee" und „Die Lage".
 */
.ld-wort,
.ld-zeichen {
	display: inline-block;
	--ld-t: clamp(0, calc((var(--ld-p, 1) - var(--ld-wd, 0)) * var(--ld-tempo, 3.2)), 1);
	opacity: var(--ld-t);
	transform: translateY(calc((1 - var(--ld-t)) * 0.55em));
	filter: blur(calc((1 - var(--ld-t)) * 7px));
	will-change: opacity, filter, transform;
}

/* Buchstaben sitzen in einem Wort-Fenster, damit der Umbruch sauber bleibt. */
.ld-wort--huelle {
	display: inline-block;
	opacity: 1;
	filter: none;
	transform: none;
	will-change: auto;
}

/* Ohne Bewegung steht der Text sofort vollständig da. */
@media (prefers-reduced-motion: reduce) {
	.ld-wort,
	.ld-zeichen {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

/* ------------------------------------ Riesenwörter steigen Buchstabe für Buchstabe */

/*
 * **Der Auftritt der großen Überschriften — in der Vorlage abgetastet.**
 *
 * Jeder Buchstabe steht im Ruhezustand **zwei Grundmaße tiefer und
 * unsichtbar** und steigt an seinen Platz, während er einblendet. Von links
 * nach rechts versetzt. Es gibt **kein Fenster und keine Kante**: Die
 * Buchstaben sind schlicht durchsichtig, abgeschnitten wird nichts. Das ist
 * der Unterschied zum Auftakt, wo die Buchstaben hinter einer unsichtbaren
 * Kante hervorkommen.
 *
 * **Weg und Deckung hängen an einer Kurve.** Aus zwei Momentaufnahmen bei
 * belgradearbor.rs nachgerechnet: Der zurückgelegte Anteil des Weges und die
 * Deckung waren an jedem Buchstaben auf drei Stellen gleich. Die Kurve ist ein
 * weiches Auslaufen dritter Ordnung.
 *
 * **Der Versatz beträgt 3,2 Prozent der Dauer je Buchstabe.**
 *
 * **Die Dauer ist 0,8 Sekunden — nachgemessen, nicht mehr geschätzt.** Hier
 * stand lange eine Sekunde, mit dem Vermerk, dass nur das Verhältnis gemessen
 * sei: In einem Hintergrund-Tab rechnet der Browser keine Einzelbilder, die
 * absolute Dauer war dort nicht zu bekommen.
 *
 * Am Listenbildschirm der Vorlage ist sie jetzt im Vordergrund gemessen, an
 * vier Zeilen einzeln: Ein Buchstabe lief sichtbar 618 Millisekunden von einem
 * auf neunundneunzig Prozent Deckung. Bei dieser Auslaufkurve sind das 78
 * Prozent der Gesamtdauer — macht **790 Millisekunden**.
 *
 * **Das alte Verhältnis bestätigt sich dabei:** Der gemessene Versatz von 26
 * Millisekunden sind 3,3 Prozent von 790. Nur die Sekunde war zu lang.
 *
 * **Der Weg steht in em, nicht in rem.** Die Vorlage nimmt feste 32
 * Bildpunkte, das sind bei ihrem Grad genau 0,32 des Schriftgrades. In em
 * geschrieben stimmt das Verhältnis auch auf dem Telefon, wo dieselbe
 * Überschrift halb so groß ist.
 *
 * **Gesteuert wird über eine Klasse, nicht über eine Zahl je Einzelbild.**
 * Ein Fortschritt, den ein Skript Bild für Bild setzen müsste, bleibt stehen,
 * sobald der Browser die Einzelbilder drosselt — und der Text wäre dann
 * unsichtbar. `setupSteigen()` setzt einmal `is-da`, den Rest macht der
 * Übergang hier.
 */
/*
 * **Die vier Werte stehen als Variablen, damit ein Abschnitt sie setzen kann
 * statt die Regel zu wiederholen.** Die Vorgaben hier sind unverändert die
 * bisherigen; wer nichts setzt, bekommt genau das, was vorher dastand.
 *
 * **Gebraucht wurde das zuerst von der Fußzeile.** Am 15.09.2026 ist Arbors
 * Abschlussbildschirm Bild für Bild abgetastet worden — fünf Textblöcke,
 * jeder einzeln —, und dort misst dasselbe Bauteil andere Zahlen als am
 * Listenbildschirm, wo unsere Vorgaben herkommen. Welche der beiden Messungen
 * für das ganze Theme gilt, ist eine offene Frage; siehe `PROJEKTSTAND.md`.
 * **Bis sie entschieden ist, setzt nur die Fußzeile eigene Werte.**
 *
 * `--ld-steig-takt` liest das Skript aus, nicht der Browser — es ist die
 * Sekundenzahl je Stück und steht hier, damit alle vier Zahlen beieinander
 * liegen. Dieselbe Bauart wie `--ld-bv-knick` in den Badvariationen.
 */
.ld-steigen {
	--ld-steig-weg: 0.32em;
	--ld-steig-dauer: 0.8s;
	--ld-steig-kurve: cubic-bezier( 0.215, 0.61, 0.355, 1 );
	--ld-steig-takt: 0.026;
	/*
	 * Ein gemeinsamer Verzug vor dem ersten Stück — bei Arbor `delay: .5` an
	 * jeder Überschrift. Seit dem 14.10.2026, zuerst für den Galerie-Auftakt;
	 * die Vorgabe bleibt null, alle bisherigen Stellen sind unverändert.
	 */
	--ld-steig-verzug: 0s;
}

/*
 * **Der Wortträger, und warum es ihn braucht.** Jeder Buchstabe ist ein
 * eigenes `inline-block` und damit eine Stelle, an der die Zeile umbrechen
 * darf — als ein Stück Text konnte ein Wort das nie. Auf 375 Bildpunkten hat
 * das in der Fußzeile prompt „Adresse", „bezugsfertig" und „ACHT&ZWANZIG"
 * **mitten durchgetrennt**, und zwar ohne jeden seitlichen Überlauf, der es
 * verraten hätte.
 *
 * **Die Vorlage hat den Träger von Anfang an:** Ihr Markup führt je Wort ein
 * `.word-wrap` und darin je Buchstabe ein Element. Genau das fehlte hier.
 *
 * Der Träger selbst bewegt sich nicht — er hält nur das Wort zusammen.
 */
.ld-steigen__wort {
	display: inline-block;
	white-space: nowrap;
}

.ld-steigen > span:not( .ld-steigen__wort ),
.ld-steigen__wort > span {
	display: inline-block;
	translate: 0 var( --ld-steig-weg );
	opacity: 0;
	transition:
		translate var( --ld-steig-dauer ) var( --ld-steig-kurve ) calc( var( --ld-steig-verzug, 0s ) + var( --ld-steig-d, 0s ) ),
		opacity var( --ld-steig-dauer ) var( --ld-steig-kurve ) calc( var( --ld-steig-verzug, 0s ) + var( --ld-steig-d, 0s ) );
}

.ld-steigen.is-da > span:not( .ld-steigen__wort ),
.ld-steigen.is-da .ld-steigen__wort > span {
	translate: 0 0;
	opacity: 1;
}

/*
 * Die Trennstelle aus dem Block (`­`) wirkt nur, wo ein Abschnitt sie
 * freigibt — dort setzt er den Umbruch auf `block` und hängt den Strich an.
 * Sonst bleibt das Wort auf einer Zeile.
 */
.ld-steigen__wort > .ld-steigen__umbruch {
	display: none;
}

/*
 * Ohne Skript und ohne Bewegung steht die Überschrift sofort vollständig da —
 * sie ist der Titel des Abschnitts und darf nie fehlen.
 */
.ld-steigen:not( .is-bereit ) > span,
.ld-steigen:not( .is-bereit ) .ld-steigen__wort > span,
.ld-steigen:not( .is-bereit ) {
	translate: none;
	opacity: 1;
}

@media ( prefers-reduced-motion: reduce ) {

	.ld-steigen > span,
	.ld-steigen__wort > span {
		translate: none;
		opacity: 1;
		transition: none;
	}
}

/* -------------------------------------------- Abschied klebender Abschnitte */

/*
 * Wenn ein Abschnitt mit klebender Bühne am Ende nach oben weggeht, hängt sein
 * Inhalt zurück: Er wird nach unten gedrückt, während der nächste Abschnitt mit
 * voller Scrollgeschwindigkeit hochkommt. Der neue überholt den alten — und was
 * unten auf der Bühne liegt, allen voran der Fortschrittsbalken, verschwindet
 * als Erstes unter dessen Oberkante.
 *
 * Bei belgradearbor.rs gemessen: 10 rem ihrer Grundgröße, also 125,5 Pixel bei
 * 1512 Fensterbreite, verteilt über die letzte Bildschirmhöhe Scrollweg. Der
 * Inhalt verlässt den Bildschirm dadurch mit rund 84 Prozent der
 * Scrollgeschwindigkeit statt mit 100.
 *
 * Der Schacht trägt die Klasse ld-abschied; assets/js/motion.js setzt daran
 * --ld-abschied zwischen 0 und 1. Welcher Teil zurückhängt, entscheidet der
 * jeweilige Abschnitt in seiner eigenen Datei — meist alles, was auf der Bühne
 * liegt, aber nicht die Bühne selbst: Ihre Fläche bleibt stehen, sonst risse
 * oben ein Streifen auf.
 */
:root {
	--ld-abschied-weg: clamp(4rem, 8.3vw, 10rem);
}

/* ------------------------------------------------- Vermerk an den Renderings */

/*
 * **„Visualisierung, KI-gestützt" an jedem Rendering** — vom Kunden verlangt
 * (Mail vom 19.10.2026), klein und an jedem Bild und Film, der eine
 * Visualisierung zeigt. Echte Fotos bekommen ihn nicht.
 *
 * **Der Vermerk steht nicht im Bild und nicht im Block-Markup.** Der Kunde
 * soll nicht jedes Bild neu ausspielen müssen, und ein Text an fünfzehn
 * Stellen läuft auseinander. `ld28_ki_vermerk()` in functions.php hängt ihn
 * beim Ausgeben an jeden Block mit der Klasse `ld-ki` — als letztes Kind, der
 * Block muss also positioniert sein. Wo kein Block ist (Galerie,
 * Wohnungsansicht, Zoomfilm), ruft das Markup dieselbe Funktion.
 *
 * Gestaltet wie der Hinweis der Galerie, der ihn vorher allein hatte: Work
 * Sans, Kalkweiß mit Schatten, unten rechts. Zwei Abwandlungen:
 * `ld-ki--dunkel` (Hofgrün tief ohne Schatten, für helle Flächen) und
 * `ld-ki--links` (unten links, wo rechts schon etwas steht — der Kompass der
 * Wohnungsansicht).
 *
 * **Unten rechts auch dort, wo ein Riesenwort im Bild steht** (Wohnwelten,
 * Ausstattungs-Liste): Der Vermerk sitzt dann unter dem Wort in dessen
 * Vignette. Oben rechts war erprobt und verworfen — dort steht fast immer
 * Himmel, und Kalkweiß auf hellem Himmel ist nicht zu lesen.
 *
 * **Der Rand steht auf null, mit zwei Klassen im Selektor** — als Kind einer
 * Gruppe bekäme der Vermerk sonst den Abstand von blockGap, siehe dort.
 */
.ld-ki > .ld-ki-vermerk {
	position: absolute;
	z-index: 6;
	inset-inline-end: var( --ld-ki-rand, max( 0.9rem, 1.25vw ) );
	inset-block-end: var( --ld-ki-rand, max( 0.9rem, 1.25vw ) );
	margin: 0;
	font-family: var( --wp--preset--font-family--body );
	font-size: clamp( 0.72rem, 0.66vw, 0.85rem );
	font-style: normal;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: none;
	white-space: nowrap;
	color: var( --wp--preset--color--base );
	/*
	 * Zwei Schatten, wie bei der Marke über dem Luftbild: ein enger für die
	 * Kante und ein weiter für den Grund. Mit dem engen allein verschwand der
	 * Vermerk auf hellem Parkett in der Ausstattungs-Kachel.
	 */
	text-shadow:
		0 1px 2px color-mix( in srgb, var( --wp--preset--color--contrast ) 70%, transparent ),
		0 0 0.8em color-mix( in srgb, var( --wp--preset--color--contrast ) 55%, transparent );
	pointer-events: none;
}

.ld-ki--links > .ld-ki-vermerk {
	inset-inline: var( --ld-ki-rand, max( 0.9rem, 1.25vw ) ) auto;
}

.ld-ki--dunkel > .ld-ki-vermerk {
	color: var( --wp--preset--color--contrast );
	text-shadow: none;
}

/* ------------------------------------------------------------ Zeigerschweif */

/*
 * Die Zeichenfläche für den Schweif, den der Mauszeiger hinter sich herzieht.
 * Sie liegt über der ganzen Seite, fängt aber nichts ab, und bleibt unter der
 * Kopfzeile — sonst liefe der Strich über die Pille hinweg.
 *
 * Erzeugt wird sie von assets/js/motion.js; ohne Maus entsteht sie gar nicht.
 * Alles Weitere — Länge, Farbe, Stärke — steht dort, weil es Bild für Bild
 * gerechnet wird und sich mit CSS nicht ausdrücken lässt.
 */
.ld-schleier {
	position: fixed;
	inset: 0;
	/*
	 * Breite und Höhe müssen ausdrücklich dastehen. Eine Zeichenfläche ist ein
	 * ersetztes Element: „inset: 0" allein dehnt sie nicht, sie behält ihre
	 * eigene Größe — und die ist bei feinen Bildschirmen doppelt so groß wie
	 * das Fenster. Alles wurde dadurch in doppeltem Maßstab gezeichnet und lag
	 * weit neben dem Zeiger, nach rechts unten immer weiter.
	 */
	width: 100%;
	height: 100%;
	z-index: 15;
	pointer-events: none;
	/*
	 * Die Weichheit steckt hier und nicht in der Zeichnung: Ein Weichzeichner
	 * auf der ganzen Fläche ist genügsamer, als jedes Stück einzeln weich zu
	 * rechnen — und er nimmt dem Schweif zuverlässig jede harte Kante.
	 */
	filter: blur(2.5px);
}

/* ==========================================================================
   Der Nachlauf — ein Bild hängt beim Scrollen zurück
   ========================================================================== */

/*
 * **Ein Baustein, damit es nicht jedes Mal neu vergessen wird.** Die Regel
 * „Der neue Abschnitt überholt den alten" gilt für jedes ganzflächige Bild:
 * Es wandert langsamer als die Seite. Bisher stand das in jedem Abschnitt
 * einzeln — und fehlte prompt beim Kopfbild der Wohnungsliste und dem der
 * Rechtstexte, weil niemand daran dachte.
 *
 * **Anwendung:** `ld-nachlauf` an den Rahmen, mehr nicht. `setupNachlauf()`
 * in `assets/js/motion.js` setzt `--ld-nachlauf-p` von 0 auf 1, während der
 * Rahmen durchs Bild wandert.
 *
 * **Das Bild muss um seinen ganzen Weg größer sein als sein Rahmen und um
 * genau diesen Weg zu hoch beginnen** — sonst reißt an einem Ende der Fahrt
 * ein Streifen auf. Das ist dieselbe Rechnung wie im Abschnitt „Die Lage",
 * hier nur einmal statt in jeder Datei.
 */

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

/*
 * **Die Abschnittsdatei darf hier keine Höhe setzen.** Sie käme später im
 * Ladeweg und gewänne bei gleichem Gewicht — das Bild bliebe rahmenhoch, und
 * der Versatz risse oben eine Lücke auf. In den beiden betroffenen Dateien
 * steht deshalb nur noch Breite und Ausschnitt; die Höhe gehört hierher.
 *
 * Der Weg ist mittig gelegt: bei halbem Fortschritt sitzt das Bild genau
 * mittig, an den Enden je ein halbes Wegmaß darüber beziehungsweise darunter.
 * Deshalb genügt **ein** Wegmaß Übermaß statt zweier.
 */
.ld-nachlauf img {
	position: relative;
	inset-block-start: calc(-0.5 * var(--ld-abschied-weg));
	height: calc(100% + var(--ld-abschied-weg));
	translate: 0 calc((var(--ld-nachlauf-p, 0.5) - 0.5) * var(--ld-abschied-weg));
}

@media (prefers-reduced-motion: reduce) {

	.ld-nachlauf img {
		inset-block-start: 0;
		height: 100%;
		translate: none;
	}
}

/* ==========================================================================
   Telefon in der Pille
   ========================================================================== */

/*
 * **Ein runder Knopf mit Hörer rechts neben „Kaufanfrage"** — vom Kunden
 * gewünscht, am 15.10.2026 aus drei gebauten Fassungen gewählt. Gleiche
 * Höhe und Linie wie der Knopf daneben.
 *
 * **Am Rechner wird „Kaufanfrage" zur Nummer:** Ein Klick auf den Hörer
 * rollt die Beschriftung nach oben weg und die Nummer von unten nach — die
 * Rollbewegung aller Knöpfe der Seite. Der Knopf ruft dann an; nach acht
 * Sekunden, mit einem Klick daneben oder mit Escape rollt es zurück
 * (setupTelefon() in motion.js). **Auf dem Telefon ruft ein Tipp sofort an.**
 *
 * Die Nummer steht genau einmal im Markup, im Hörer-Verweis; das Skript
 * liest sie von dort ab.
 */
.ld-header__anfrage {
	align-items: center;
	gap: calc(0.375 * var(--ld-pille-e));
}

.ld-header__anfrage a.ld-header__telefon {
	position: relative;
	gap: 0;
	width: calc(2.625 * var(--ld-pille-e));
	padding-inline: 0;
	flex: 0 0 auto;
}

.ld-header__telefon::before {
	content: "";
	width: calc(1.25 * var(--ld-pille-e));
	height: calc(1.25 * var(--ld-pille-e));
	background-color: currentColor;
	-webkit-mask: url("../images/symbole/telefon.svg") center / contain no-repeat;
	mask: url("../images/symbole/telefon.svg") center / contain no-repeat;
}

/* Die Nummer im Hörer ist nur für Vorlesegeräte da. */
.ld-header__nummer {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ld-header.is-tel-offen .ld-header__anfrage a.ld-header__telefon {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent);
}

.ld-header__anfrage a:not(.ld-header__telefon) {
	position: relative;
	overflow: hidden;
}

.ld-header__anfrage a:not(.ld-header__telefon) .ld-schalter__fenster,
.ld-header__c-nummer {
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.ld-header__c-nummer {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 0.02em;
	text-transform: none;
	transform: translateY(110%);
}

/* Das Fenster ist nur eine Zeile hoch; weg muss es um die ganze Knopfhöhe. */
.ld-header.is-tel-offen .ld-header__anfrage a:not(.ld-header__telefon) .ld-schalter__fenster {
	transform: translateY(calc(-2.2 * var(--ld-pille-e)));
}

.ld-header.is-tel-offen .ld-header__c-nummer {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ld-header__anfrage a:not(.ld-header__telefon) .ld-schalter__fenster,
	.ld-header__c-nummer {
		transition: none;
	}
}

/* ==========================================================================
   Die Kopfzeile auf dem Telefon
   ========================================================================== */

/*
 * **Auf dem Telefon hört die Kopfzeile auf mitzuwachsen.** Ihr Grundmaß war
 * `min(0.8rem, 0.83vw)` — bei 375 Bildpunkten Breite sind das 3,1 Pixel, und
 * damit stand die Pille 11 Pixel hoch als dünner Streifen quer über dem Bild,
 * die Marke darin 5 auf 13. Unbenutzbar, und der einzige Weg ins Menü.
 *
 * **In der Vorlage nachgemessen, bei 375 und bei 430 Breite:**
 *
 * | | 375 | 430 |
 * |---|---|---|
 * | Pille | 329 × 48 | 384 × 48 |
 * | Rand ringsum | 23 | 23 |
 * | Marke | 35 × 35, **links** | 35 × 35, **links** |
 * | „Menu" | **rechts**, Grad 13,5 | **rechts**, Grad 15,4 |
 * | Anfragen-Knopf | **fehlt** | **fehlt** |
 *
 * Höhe und Rand bleiben also gleich, nur die Breite folgt dem Fenster. Das ist
 * die Ausnahme von der Regel „neue Maße in rem oder vw": Hier ist das
 * Nicht-Mitwachsen die Absicht, so wie beim Pillenradius.
 *
 * **0,9375 rem — 15 Pixel — trifft fast alles von allein.** Aus dem einen
 * Grundmaß folgen dann Rand 22,5 (dort 23), Polster 7,5 (dort 8) und der
 * Schriftgrad 13,1 (dort 13,5). Nur die Pillenhöhe fällt heraus: 3,625
 * Grundmaße wären 54, die Vorlage steht auf 48. Sie bekommt deshalb als
 * einzige einen eigenen Wert.
 *
 * **Die Umschaltung liegt bei 768**, nicht bei unseren sonstigen 900: In der
 * Vorlage trägt die Zeile die Klasse `max-md`, und deren Schwelle ist 768.
 */

@media ( max-width: 767px ) {

	:root {
		--ld-pille-e: 0.9375rem;
		--ld-pille-h: 3rem;
		--ld-pille-fuss: calc(1.5rem + 3rem);
	}

	.ld-header {
		--ld-pille-rand: 1.4375rem;
	}

	/*
	 * Die Pille nimmt die volle Breite zwischen den Rändern. Ohne das bliebe
	 * sie bei 40 Grundmaßen stehen — 600 Pixel, auf einem Telefon breiter als
	 * der Bildschirm.
	 */
	.ld-header__pille {
		width: 100%;
		gap: 0.5rem;
	}

	/*
	 * **Hier stand einmal eine zweite Mobilregel, bei 781.** Sie setzte den
	 * seitlichen Rand unmittelbar und stach damit die Variable aus — der Rand
	 * blieb bei 12 statt 23, obwohl die Zahl richtig dastand. Zwei Regeln für
	 * dieselbe Sache laufen früher oder später auseinander; sie ist deshalb
	 * hier aufgegangen.
	 */

	/*
	 * **Auf dem Telefon steht das Wort „Menü" nicht da, nur die zwei Striche.**
	 * In der Vorlage bei 375 nachgemessen: Ihr Knopf ist 50 × 8 Bildpunkte und
	 * enthält allein das Zeichen; das Wort steckt zwar im Markup, ist dort aber
	 * unsichtbar.
	 *
	 * **Diese Regel stand hier schon — und griff nicht.** Sie zählte zwei
	 * Klassen, die Schreibtischregel darüber zählt drei, und bei
	 * Medienabfragen entscheidet nicht die Abfrage, sondern die Gewichtung.
	 * Das Wort stand deshalb monatelang auf jedem Telefon in der Pille und
	 * schob die Striche aus ihrer Lage. **Wer eine Mobilregel schreibt, gibt
	 * ihr denselben Selektor wie der Regel, die sie aufheben soll.**
	 */
	.ld-header .ld-header__menue .wp-block-navigation__responsive-container-open::before {
		content: none;
	}

	/*
	 * Ohne das Wort braucht der Knopf auch keinen Vorlauf mehr — sonst stünden
	 * die Striche 11 Bildpunkte zu weit innen.
	 */
	.ld-header .ld-header__menue .wp-block-navigation__responsive-container-open {
		padding-inline-start: 0;
		position: relative;
	}

	/*
	 * **Das Tippziel ist größer als das Zeichen.** Die zwei Striche sind 38 × 8
	 * Bildpunkte — eine Fingerkuppe braucht 44, und dieser Knopf ist auf dem
	 * Telefon der **einzige** Weg ins Menü.
	 *
	 * Die Vorlage hat hier dasselbe Problem (ihr Knopf misst 50 × 8); das ist
	 * kein Grund, es zu übernehmen. Die Fläche liegt deshalb als unsichtbares
	 * Pseudoelement darüber: **Sie ändert am Aussehen nichts** und nimmt keinen
	 * Platz ein, weil sie absolut liegt — die Striche bleiben auf den Pixel,
	 * wo sie sind.
	 */
	.ld-header .ld-header__menue .wp-block-navigation__responsive-container-open::after {
		content: "";
		position: absolute;
		inset-block: calc((44px - 100%) / -2);
		inset-inline: calc((44px - 100%) / -2);
	}

	/*
	 * **Das Polster der Pille ist auf dem Telefon so breit wie ihr Außenrand.**
	 * In der Vorlage gemessen: Ihre Marke beginnt bei x 46 und die Striche
	 * enden bei 328 — die Pille steht von 23 bis 352, macht **23 Bildpunkte
	 * innen** an beiden Seiten. Am Schreibtisch sind es dagegen nur ein halbes
	 * Grundmaß.
	 *
	 * Senkrecht bleibt genau so viel, dass die 35 Bildpunkte hohe Marke in die
	 * 48 der Pille passen: (48 − 35) ÷ 2 = 6,5.
	 */
	.ld-header__pille {
		padding-block: 0.375rem;
		padding-inline: var(--ld-pille-rand);
	}

	/*
	 * **Marke links, Menü rechts, Anfragen weg.** Genau die Umstellung der
	 * Vorlage. Der Grund ist Platz: Bei 329 Bildpunkten stünden Marke, „Menü"
	 * und ein Knopf zu dritt gedrängt nebeneinander.
	 *
	 * **Der Weg zur Anfrage geht dabei nicht verloren** — „Kontakt" steht als
	 * eigener Punkt im Menü, und das ist auf dem Telefon einen Fingertipp
	 * entfernt.
	 */
	/*
	 * **Bei einem breiten Wortzug wird die Fläche angeglichen, nicht die Höhe.**
	 *
	 * Das ist die Ausnahme zur Regel „Die Höhe ist bei jeder dieser Marken das
	 * Maß" — und sie ist teuer erkauft. Arbors Zeichen misst auf dem Telefon
	 * 35 × 35 und nimmt damit 10,6 Prozent der Pillenbreite ein. Unsere Marke
	 * ist ein Wortzug im Verhältnis 2,79 : 1; auf dieselbe **Höhe** gebracht
	 * wird sie 98 breit und belegt **29,7 Prozent** — die dreifache Fläche.
	 * Genau das sah der Kunde: „zu buchig".
	 *
	 * Gleiche Fläche wie ihr Zeichen ergibt 21 Bildpunkte Höhe, also 1,4
	 * Grundmaße, und 17,8 Prozent der Breite. Das ist die Entsprechung.
	 *
	 * **Die Höhenregel gilt weiter, wo eine Marke ungefähr quadratisch ist.**
	 * Sie bricht, sobald das Seitenverhältnis stark vom Vorbild abweicht —
	 * dann ist nicht die Höhe die Wirkung, sondern der Platz, den die Marke
	 * wegnimmt.
	 *
	 * **Seit dem 01.10.2026 steht hier „metz28" mit 3,941 : 1**, und damit
	 * ist dieselbe Rechnung noch einmal fällig: Dieselbe Fläche wie bisher
	 * ergibt 1,4 × √(2,787 ÷ 3,941) = **1,177 Grundmaße**, also 17,7
	 * Bildpunkte Höhe auf 69,6 Breite — wieder dieselben rund 1230
	 * Quadratpunkte, jetzt auf 21,2 Prozent der Pillenbreite verteilt.
	 * **Vom Kunden so entschieden**, im Wissen, dass die Marke dadurch
	 * flacher dasteht als bisher.
	 *
	 * **Und das gilt für beide Zustände.** Geöffnet steht dort „metz" in
	 * derselben Höhe, also 17,7 statt der früheren 21 — kleiner als heute,
	 * aber die Buchstaben springen beim Wechsel nicht in der Größe, und
	 * genau darum geht es.
	 */
	.ld-header__zeichen {
		order: 1;
		--ld-marke-h: 1.177;
	}

	/*
	 * **Dasselbe Tippziel wie beim Menü-Knopf**, und aus demselben Grund: Die
	 * Marke ist auf dem Telefon nur 17,7 Bildpunkte hoch, eine Fingerkuppe
	 * braucht 44. Die Fläche liegt als unsichtbares Pseudoelement darüber und
	 * ändert am Aussehen nichts.
	 *
	 * Nur in der Höhe — in der Breite misst die Marke 70 Bildpunkte und ist
	 * damit ohnehin über dem Maß. Seitlich zu vergrößern hieße, dem Menü-Knopf
	 * daneben Platz wegzunehmen.
	 */
	.ld-header__mal a::after {
		content: "";
		position: absolute;
		inset-block: calc( ( 44px - 100% ) / -2 );
		inset-inline: 0;
	}

	/*
	 * Der Kasten des Menüs nimmt den ganzen Restplatz (`flex: 1`), und sein
	 * Knopf stünde darin links — also mitten in der Pille statt am Rand.
	 */
	.ld-header__menue {
		order: 2;
		justify-content: flex-end;
	}

	/*
	 * Kaufanfrage fehlt auf dem Telefon, wie in der Vorlage. **Der Hörer
	 * bleibt** und steht direkt links vom Menü; ein Tipp ruft an, ohne
	 * Aufklappen. Sichtbar ist er 36 Bildpunkte groß, die Tippfläche ist
	 * 44 — dieselbe unsichtbare Vergrößerung wie beim Menü-Knopf.
	 */
	.ld-header__anfrage {
		order: 2;
		flex: 1 1 0;
	}

	.ld-header .ld-header__menue {
		order: 3;
		flex: 0 0 auto;
	}

	.ld-header__anfrage a:not(.ld-header__telefon) {
		display: none;
	}

	.ld-header__anfrage a.ld-header__telefon {
		width: 2.25rem;
		height: 2.25rem;
		margin-inline-end: 0.25rem;
	}

	.ld-header__anfrage a.ld-header__telefon::after {
		content: "";
		position: absolute;
		inset: calc( ( 44px - 100% ) / -2 );
	}

	.ld-header__telefon::before {
		width: 1.1rem;
		height: 1.1rem;
	}

	/*
	 * **Die Schaltflächen in Arbors Telefongröße** (27.10.2026, gemessen bei
	 * 375): 46,1 hoch, Schrift 13,45, Polster 19,2 — bei ihrer Wurzel von
	 * 15,4 sind das 3, 0,875 und 1,25 Grundmaße. Hier in unserer Wurzel von
	 * 16 umgerechnet. Vorher standen die `clamp()`-Werte des Schreibtischs
	 * an ihrer Untergrenze: 40 hoch und 9,9 Schrift, also zu klein zum Lesen
	 * und knapp zu klein zum Tippen.
	 */
	:root {
		--ld-schalter-hoehe: 2.88rem;
	}

	.ld-schalter {
		--ld-schalter-grad: 0.84rem;
		--ld-schalter-luft: 1.2rem;
		--ld-schalter-mass: 1.6rem;
	}

	/*
	 * Die Zählung neben dem Fortschrittsbalken in Arbors Telefongröße:
	 * 13,45 Bildpunkte („small"), 19,2 Abstand zum Balken. Die Untergrenze des
	 * Schreibtischs stand hier bei 9,6 — vom Kunden als zu klein bemerkt.
	 */
	.ld-fortschritt {
		gap: 1.2rem;
	}

	.ld-fortschritt__zahlen {
		font-size: 0.84rem;
	}

	/*
	 * **Das Menü auf dem Telefon wie Arbors** — bei 375 nachgemessen: Das
	 * Feld geht vom oberen bis zum unteren Rand (23 Bildpunkte Luft), und
	 * unten steht der Anfrage-Knopf über die volle Breite („Inquire“). Bei
	 * uns heißt er „Kaufanfrage“ und kommt von `setupMenue()`, abgelesen vom
	 * Knopf der Pille — der Text steht so nur einmal im Markup.
	 */
	.ld-header .ld-header__menue .wp-block-navigation__responsive-container.is-menu-open {
		height: calc(100svh - 2 * var(--ld-pille-rand));
	}

	/*
	 * Die Prozenthöhe braucht eine durchgehende Kette: Zwischen Feld und
	 * Inhalt liegen bei WordPress noch zwei Hüllen ohne eigene Höhe.
	 */
	.ld-header .ld-header__menue .wp-block-navigation__responsive-container.is-menu-open
		:is(.wp-block-navigation__responsive-close, .wp-block-navigation__responsive-dialog) {
		height: 100%;
	}

	.ld-header .ld-header__menue .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content {
		min-height: 100%;
		padding-inline: var(--ld-pille-rand);
		padding-block-end: var(--ld-pille-rand);
	}

	/* Die Liste trägt bei WordPress `order: 3`; der Knopf steht danach. */
	.ld-header.is-menue-offen .ld-header__menue-anfrage {
		display: block;
		order: 4;
		align-self: stretch;
		margin-block: auto 0;
	}

	.ld-header__menue-anfrage a {
		width: 100%;
		box-sizing: border-box;
		color: var(--wp--preset--color--sage);
	}

	.ld-header__menue-anfrage .ld-schalter__zeile {
		justify-content: center;
	}

	/*
	 * **Über „ACHT&ZWANZIG“ steht das kleine „metz“** — vom Kunden so
	 * gewünscht, zusammen lesen sie sich als Metz28, wie am Schreibtisch.
	 * Dort steht „metz“ mittig in der Pille; auf dem Telefon sitzt die Marke
	 * links und lag bei offenem Menü unter dem Feld. Sie rückt deshalb beim
	 * Öffnen in die Mitte der Pille und über das Feld. Der Weg ist die halbe
	 * Pillenbreite minus Polster und halbe Kastenbreite; die letzten 21,81
	 * Prozent macht die Marke darin selbst (`translateX`, siehe oben).
	 *
	 * Die Wortmarke wird dafür kleiner: 4 statt 5 Grundmaße.
	 */
	.ld-header {
		--ld-wortmarke-h: 4;
	}

	.ld-header .ld-header__zeichen {
		transition: translate 0.35s cubic-bezier(0.33, 0, 0.2, 1);
	}

	.ld-header.is-menue-kreuz .ld-header__zeichen {
		z-index: 2;
		translate: calc(
			(100vw - 2 * var(--ld-pille-rand)) / 2
			- var(--ld-pille-rand)
			- var(--ld-marke-h) * var(--ld-marke-v) * var(--ld-pille-e) / 2
		) 0;
	}
}

/* ==========================================================================
   Gleitender Übergang zwischen 3D-Finder und Wohnungsseite
   ========================================================================== */

/*
 * **Ein View Transition über den Seitenwechsel hinweg, als Wisch.** Alte und
 * neue Seite schieben nebeneinander zur Seite, so weit, dass die Spalte der
 * Wohnung — im Finder rechts, auf der Wohnungsseite links — dabei an ihrem
 * Platz bleibt. Die Wege rechnet die Weiche im Kopf der Seite
 * (`ld28_scroll_oben()`); hier wird nur die eigene Blende des Browsers
 * abgeschaltet.
 *
 * **Bis zum 09.10.2026 trug nur die Spalte einen Namen** und glitt allein an
 * ihren Platz, während der Rest überblendete. Vom Kunden verworfen: Es sollte
 * wirken, als wische der ganze Bildschirm von rechts nach links.
 *
 * **Eingeschaltet für jeden Wechsel, abgeschaltet für alle bis auf diesen.**
 * Die Weiche steht im Kopf der Seite (`ld28_scroll_oben()` in functions.php);
 * die übrigen Seitenwechsel laufen wie gehabt hinter dem Vorhang.
 *
 * Chrome und Safari können das, Firefox noch nicht — dort wechselt die Seite
 * ohne Bewegung, und `wohnungsfinder.js` nimmt statt dessen den Vorhang.
 */
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation: none;
	mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {

	@view-transition {
		navigation: none;
	}
}