/*
 * Die Fußzeile
 *
 * Nachgebaut nach Arbors Fußzeile — und die ist bei ihnen keine Leiste, sondern
 * **eine ganze Seite**: 1297 Bildpunkte bei 1203 Fensterhöhe, also gut ein
 * Bildschirm. Maße dort bei 2056 Fensterbreite gemessen:
 *
 *   Höhe                       1297 px = 1,08 Bildschirme
 *   Grund                      Verlauf von Creme oben nach Himmelblau unten
 *   Linke Spalte               x = 88 px = 4,3 %
 *   Menü                       x = 848 px = 41,2 %, Zeilenabstand 41 px
 *   Rechtliches                64 px unter dem letzten Menüpunkt
 *   Social                     x = 1144 px = 55,6 %
 *   Disclaimer                 x = 1491 px = 72,5 %, 413 px = 20,1 % breit
 *   Menü- und Sociallinks      Work Sans 16 px; Menü in Versalien, der Rest nicht
 *   Wortmarke unten            100 px = 4,86 vw, 152 px von rechts, 60 px von unten
 *
 * **Am 15.09.2026 an der fertig aufgebauten Seite nachgemessen**, und dabei
 * ist der tragende Befund erst aufgefallen: **Arbors Rendering ist
 * freigestellt.** Es sind drei PNG mit Alphakanal — das Haus (44 Prozent
 * durchsichtig) und zwei Vordergrund-Ausschnitte in den unteren Ecken.
 * **Der Himmel im Bild ist gar kein Bild, sondern der Verlauf der Seite.**
 * Deshalb gibt es dort nirgends eine Kante, die weichgezeichnet werden müsste.
 *
 *   Höhe                       1335 px bei 1147 Fensterhöhe = **1,16 Bildschirme**
 *   Grund                      Verlauf in oklab, **zwei Stufen**:
 *                              Creme #FDFBEF oben, Himmelblau #8AB6D2 unten
 *   Haus                       fensterbreit, 113 % der Fußhöhe, Unterkante auf
 *                              der Fußunterkante, ragt 176 px über die
 *                              Fußoberkante — dort durchsichtig
 *   Ausschnitt links           18,7 vw breit, in der Ecke, **steht fest**
 *   Ausschnitt rechts          65,2 vw breit, in der Ecke, **steht fest**
 *   Wortmarke                  über dem Rendering (z-index 10)
 *
 * **Die Bewegung: nur das Haus hängt zurück.** Über die Strecke, auf der der
 * Fuß hereinkommt, wandert es 0 bis **160 Bildpunkte** nach unten — das sind
 * zehn ihrer Grundmaße, also genau unser `--ld-abschied-weg`. An elf Punkten
 * abgetastet, und es trifft auf ein Zehntel Pixel: **`easeOutQuad`**, zügig
 * anfangen und weich auslaufen. Die beiden Vordergrund-Ausschnitte bewegen
 * sich **gar nicht** — genau daraus entsteht die Tiefe.
 *
 * **Übernehmen lässt sich davon zweierlei, aber nicht alles.** Die
 * zurückhängende Fahrt und der Buchstaben-Auftritt gehen mit einem Foto
 * genauso; das Freistellen nicht — dafür bräuchte es ein eigenes Rendering.
 * **Beides ist noch nicht gebaut** und steht auf der Liste in
 * `PROJEKTSTAND.md`.
 *
 * **Der Verlauf hängt bewusst nicht am Bild.** Er stand einmal unten auf
 * Salbei, abgeleitet aus Arbors Himmelblau. Vom Kunden geändert: Der Fuß soll
 * auch dann noch stimmen, wenn dort später eine andere Aufnahme liegt. Er
 * läuft deshalb durch die **drei neutralen Papiertöne** der Palette und endet
 * in `--ld-f-tief`. **Das ist die eine Stellschraube:** Wer eine Aufnahme mit
 * ausgeprägtem eigenen Himmel einsetzt, setzt dort deren Ton ein — und sonst
 * nirgends.
 *
 * **Links steht kein Newsletter.** Arbor sammelt hier Adressen; wir haben
 * keinen Verteiler. An der Stelle stehen Schlusssatz, Verweis auf die
 * Kontaktseite und die Anschrift — dieselbe Form, anderer Inhalt.
 */

.ld-fusszeile {
	--ld-f-links: 4.3%;
	--ld-f-menue: 41.2%;
	--ld-f-social: 55.6%;
	--ld-f-hinweis: 72.5%;
	/*
	 * Oberkante der Spalten. **Die Kopfzeilen-Pille ist fixiert und schwebt
	 * auch über dem Seitenende** — ohne diesen Wert läge die Überschrift
	 * dahinter. Der größere der beiden gewinnt: auf breiten Fenstern die
	 * 4,3 vw der Vorlage, auf schmalen die Pille samt Luft.
	 */
	--ld-f-oben: max(4.3vw, calc(var(--ld-pille-fuss) + 1.5 * var(--ld-pille-e)));
	--ld-f-grad: clamp(0.7rem, 0.78vw, 0.95rem);
	/*
	 * Die untere Farbe des Verlaufs, und die einzige Stelle dafür.
	 * Neutral voreingestellt, damit jede Aufnahme darüber passt.
	 */
	--ld-f-tief: var(--wp--preset--color--surface-mist);
	/*
	 * Das Wegmaß der zurückhängenden Fahrt: **zehn Grundmaße der Vorlage**,
	 * also 160 Bildpunkte bei 2056 und 125,5 bei 1512. Bewusst nicht
	 * `--ld-abschied-weg` — das rechnet in unserer eigenen Wurzel, die bis 20
	 * Bildpunkte hochgeht, und läge bei 2056 schon bei 171.
	 */
	--ld-f-weg: calc(10 * var(--ld-pille-e));

	position: relative;
	overflow: clip;
	padding: 0;
	/*
	 * Von Kalkweiß oben nach `--ld-f-tief` unten, über die neutralen
	 * Papiertöne der Palette. **Kein Farbton aus einem bestimmten Bild** —
	 * siehe oben.
	 *
	 * **Der Verlauf beginnt gleich oben und geht über fünf Stufen.** Mit nur
	 * drei Farbstopps setzte die Bewegung erst bei 38 Prozent ein, und man sah
	 * die Stelle, an der sie anfängt. Die Zwischenstufen sind Mischungen, damit
	 * nirgends ein Band entsteht.
	 *
	 * **Gerechnet wird in oklab.** Das macht die Vorlage genauso. Im üblichen
	 * sRGB läuft ein Verlauf zwischen zwei ähnlich hellen Tönen durch eine
	 * trübe Mitte; in oklab bleibt er sauber.
	 */
	background: linear-gradient(
		to bottom in oklab,
		var(--wp--preset--color--base) 0%,
		color-mix(in oklab, var(--wp--preset--color--base), var(--wp--preset--color--surface)) 22%,
		var(--wp--preset--color--surface) 48%,
		color-mix(in oklab, var(--wp--preset--color--surface), var(--ld-f-tief)) 74%,
		var(--ld-f-tief) 100%
	);
}

/*
 * **Genau ein Bildschirm — und das ist bewusst nicht Arbors Maß.** Dort ist der
 * Fuß 1335 bei 1147 Fensterhöhe, also 1,16 Bildschirme; wer am Seitenende
 * ankommt, sieht deren Überschrift angeschnitten. Das war hier einen Tag lang
 * übernommen und war ein Fehler: **Bei uns steht in der Fußzeile mehr drin als
 * bei ihnen** — Menü, soziale Netze, Hinweis und Anschrift. Nachgemessen bei
 * 1024 × 768 standen 123 Bildpunkte über dem Bildschirm, die **sozialen Netze
 * waren gar nicht zu sehen**, Überschrift und Hinweis angeschnitten.
 *
 * **Daraus die Regel: Ein Abschnitt, der alles zeigen muss, was er trägt, ist
 * höchstens einen Bildschirm hoch.** Eine gemessene Zahl aus einer Vorlage
 * trägt ihre Bedingung mit — und deren Bedingung war ein leererer Fuß.
 *
 * **Die Höhe allein genügt nicht.** Die Kopfzeilen-Pille ist fixiert und
 * schwebt auch über dem Seitenende; bei genau einem Bildschirm läge die
 * Überschrift dahinter. Das obere Polster rechnet deshalb aus `--ld-pille-fuss`
 * (siehe `base.css`) und nimmt den größeren der beiden Werte.
 */
.ld-fusszeile .ld-fusszeile__buehne {
	position: relative;
	height: 100svh;
	min-height: 42rem;
	margin: 0;
}

/* WordPress verteilt über blockGap Ränder an alle Kinder außer dem ersten. */
.ld-fusszeile__buehne > *,
.ld-fusszeile__spalte > *,
.ld-fusszeile__menue > *,
.ld-fusszeile__social > * {
	margin-block: 0;
}

/* ------------------------------------------------------------- Das Bild */

/*
 * **Die Aufnahme füllt den ganzen Fuß.** Bei Arbor liegen dort drei
 * freigestellte Ebenen übereinander — das Haus und zwei Vordergrund-
 * Ausschnitte —, und deren Himmel *ist* der Verlauf der Seite. Ein Foto kann
 * das nicht; es füllt stattdessen die Fläche, und oben bleibt eine leichte
 * Kante zum Abschnitt darüber. **Vom Kunden so entschieden.**
 *
 * **Vorher stand es auf 48 Prozent, und genau das war das Problem.** Bei
 * `cover` mit Unterkante als Anker war dann nur das untere Drittel der
 * Aufnahme zu sehen — der Ausschnitt fing mitten im Bild an, wo die
 * Helligkeit schon bei 0,55 steht, während der Grund darüber bei 0,9 lag.
 * Diese Stufe musste die Maske über 26 Prozent der Bildhöhe überbrücken, und
 * damit lagen **zwei Verläufe übereinander**: der künstliche der Maske und
 * der echte der Aufnahme, die von grau nach schwarz läuft. Der Kunde las das
 * als „das Bild ist in der Mitte geteilt" — zu Recht.
 *
 * **Über die volle Höhe steht die Aufnahme mit ihrem eigenen hellen Himmel
 * oben** (0,78 bis 0,81, praktisch unser Kalkweiß). Die Kante darf deshalb
 * kurz sein: acht Prozent statt sechsundzwanzig.
 */
.ld-fusszeile__bild {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
	pointer-events: none;
	mask-image: linear-gradient(to bottom, transparent 0%, #000 8%);
}

/*
 * Zwei Klassen im Selektor, sonst greift die Angabe nicht: WordPress gibt dem
 * Bild `width: auto` mit.
 */
/*
 * **Die Aufnahme hängt beim Hereinscrollen zurück.** In der Vorlage an elf
 * Punkten abgetastet: Ihr Rendering wandert über die Einfahrt des Fußes von 0
 * auf **160 Bildpunkte** nach unten, und die Kurve trifft auf ein Zehntel
 * Pixel `easeOutQuad` — zügig anfangen, weich auslaufen.
 *
 * | Fortschritt | 0,1 | 0,3 | 0,5 | 0,7 | 0,9 |
 * |---|---|---|---|---|---|
 * | gemessen | 30,3 | 81,5 | 119,9 | 145,6 | 158,4 |
 * | 160 · (1−(1−p)²) | 30,4 | 81,6 | 120,0 | 145,6 | 158,4 |
 *
 * **Die beiden Vordergrund-Ausschnitte in ihren unteren Ecken bewegen sich
 * dabei gar nicht** — genau daraus entsteht die Tiefe. Wir haben nur eine
 * Ebene, also bewegt sich diese eine.
 *
 * Damit an keinem Ende der Fahrt ein Streifen aufreißt, ist das Bild um den
 * ganzen Weg höher als sein Rahmen und beginnt um genau diesen Weg zu hoch —
 * dieselbe Rechnung wie bei `ld-nachlauf` und in „Die Lage".
 */
.ld-fusszeile__bild {
	overflow: clip;
}

.ld-fusszeile .ld-fusszeile__bild img {
	display: block;
	width: 100%;
	height: calc(100% + var(--ld-f-weg));
	translate: 0 calc((var(--ld-fuss-p, 0) - 1) * var(--ld-f-weg));
	object-fit: cover;
	/*
	 * **Die Oberkante, und das hat sich zweimal geändert.** Bei `cover`
	 * entscheidet dieser Wert, welcher Teil der Aufnahme wegfällt, wenn das
	 * Fenster flacher ist als sie.
	 *
	 * **Ohne die zurückhängende Fahrt war die Mitte richtig.** An der
	 * Unterkante verankert rückte auf 1920 × 1080 das dunkle Laub bis in die
	 * linke Spalte (Anschrift 1,88), an der Oberkante verlor die Wortmarke
	 * ihren schwarzen Grund.
	 *
	 * **Mit der Fahrt kippt das.** Das Bild ist um den Weg höher und steht am
	 * Anfang der Fahrt 160 Bildpunkte weiter oben; dort fiel der Hinweis rechts
	 * auf **1,1 zu 1**. Nachgemessen über sieben Verankerungen, beide Enden der
	 * Fahrt, schlechtester Wert des ganzen Fußes:
	 *
	 *   Verankerung   1280 × 720        1920 × 1080
	 *   oben (0 %)    5,74 / 5,95       9,04 / 6,02
	 *   25 %          2,13 / 6,85       6,88 / 6,93
	 *   Mitte (50 %)  1,10 / 7,62       4,73 / 7,41
	 *   unten (100%)  1,25 / 8,15       1,18 / 8,01
	 *
	 * **Nur die Oberkante trägt an beiden Enden.** Weil der Kasten um den Weg
	 * höher ist, fällt bei `cover` weniger weg — der dunkle Bildfuß bleibt
	 * trotzdem im Bild, und die Wortmarke steht weiter über 10.
	 *
	 * **Daraus die Regel: Wer ein Bild wandern lässt, misst die Lesbarkeit an
	 * beiden Enden der Fahrt.** Ein Wert, der im Ruhezustand stimmt, sagt über
	 * den bewegten Zustand nichts.
	 */
	object-position: 50% 0%;
	/*
	 * **Die Aufnahme steht gespiegelt.** Im Original liegt das dunkle Laub
	 * links — also genau dort, wo die linke Spalte mit Anschrift und
	 * Anfrage-Knopf steht. Gespiegelt liegt es rechts, wo nur Himmel gebraucht
	 * wird. **Vom Kunden so entschieden.** Dieselbe Überlegung wie bei der
	 * Hofhaus-Aufnahme im Abschnitt „Zwei Charaktere".
	 *
	 * Eine Spiegelung ist hier unbedenklich: Das Bild zeigt keinen Ort und
	 * keine Schrift, sondern Dächer und Bäume. **Bei einer Aufnahme des
	 * eigenen Hauses wäre sie es nicht** — dann gehört diese Zeile weg.
	 */
	transform: scaleX(-1);
}

/*
 * Ein Schleier am unteren Rand, damit die Wortmarke trägt. Bei Arbor ist die
 * Aufnahme dort von sich aus dunkel; unsere ist es je nach Bild nicht, und die
 * Lesbarkeit soll nicht an der Bildwahl des Kunden hängen.
 */
.ld-fusszeile__bild::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--wp--preset--color--contrast) 68%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent) 22%,
		transparent 48%
	);
}

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

.ld-fusszeile__spalte {
	position: absolute;
	z-index: 2;
	inset-inline-start: var(--ld-f-links);
	inset-block-start: var(--ld-f-oben);
	width: 31vw;
	margin: 0;
}

.ld-fusszeile__wort {
	margin: 0;
	font-size: clamp(1.8rem, 4.1vw, 5rem);
	/* Ein Aussagesatz in Displaygröße — Light, nicht Regular. */
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: var(--ld-light-lauf);
	text-transform: uppercase;
}

.ld-fusszeile__satz {
	margin-block-start: 1.5vw;
	max-width: 26ch;
	font-size: var(--ld-f-grad);
	line-height: 1.4;
}

/*
 * **Die Linie des Knopfes steht hier in Card Room Green, nicht in Salbei.**
 * `.ld-schalter` ist auf dunkle Gründe eingestellt; im Fuß liegt er auf einem
 * hellen. Nachgemessen bei 1440 × 900: Salbei (0,595) gegen den Grund darunter
 * (0,73) ergibt **1,21 zu 1** — der Rand war schlicht nicht zu sehen, und das
 * schon, bevor die Aufnahme dorthin kam (auf Kalkweiß waren es 1,29). Die
 * einzige Handlungsaufforderung der Fußzeile hatte damit keinen sichtbaren
 * Umriss.
 *
 * Card Room Green (0,155) kommt auf **3,8 zu 1** und liegt damit über der
 * Schwelle von 3, die für die Kante eines Bedienelements gilt. Es ist zugleich
 * die Farbe, die schon am Anfragen-Knopf der Kopfzeile steht — dort in der
 * Vorlage gemessen als `rgb(96, 115, 92)`.
 */
.ld-fusszeile__schalter {
	--ld-schalter-farbe: var(--wp--preset--color--primary);
	margin-block-start: 2.2vw;
}


/* --------------------------------------------------- Menü, Social, Hinweis */

.ld-fusszeile__menue,
.ld-fusszeile__social,
.ld-fusszeile__hinweis {
	position: absolute;
	z-index: 2;
	inset-block-start: var(--ld-f-oben);
	margin: 0;
}

.ld-fusszeile__menue {
	inset-inline-start: var(--ld-f-menue);
}

.ld-fusszeile__social {
	inset-inline-start: var(--ld-f-social);
}

.ld-fusszeile__hinweis {
	inset-inline-start: var(--ld-f-hinweis);
	width: 20.1%;
	font-size: var(--ld-f-grad);
	/* Zeilenhöhe 1,5 wie in der Vorlage — der Absatz ist lang und braucht Luft. */
	line-height: 1.5;
}

/*
 * Die Menüpunkte stehen in Versalien, das Rechtliche darunter nicht. Der
 * Zeilenabstand ist in der Vorlage 41 Bildpunkte.
 */
.ld-fusszeile__menue p,
.ld-fusszeile__social p {
	margin: 0;
	font-size: var(--ld-f-grad);
	line-height: 2;
}

/*
 * **Nur die Menüpunkte selbst, nicht das Rechtliche darunter.** Das stand als
 * Absicht schon im Kommentar darüber, war aber nie gebaut: Der Selektor griff
 * auf jeden Verweis in dieser Spalte, und das Rechtliche steht darin. Beides
 * las sich dadurch als eine Liste.
 *
 * In der Vorlage nachgemessen: Ihre Menüpunkte tragen `uppercase`, ihr
 * „Privacy policy" darunter trägt es nicht — gleicher Grad, gleiche Farbe,
 * gleiche Schrift, nur ohne Versalien. Genau daran erkennt man dort, dass es
 * eine andere Art von Verweis ist.
 *
 * Das Kindzeichen im Selektor macht die Trennung; die zweite Regel sagt es
 * für den Fall, dass jemand die Absätze anders schachtelt, noch einmal
 * ausdrücklich.
 */
.ld-fusszeile__menue > p a {
	text-transform: uppercase;
}

.ld-fusszeile__recht a {
	text-transform: none;
}

.ld-fusszeile__menue a,
.ld-fusszeile__social a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.ld-fusszeile__menue a:hover,
.ld-fusszeile__social a:hover {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* Das Rechtliche rückt ab — 64 Bildpunkte unter dem letzten Menüpunkt. */
.ld-fusszeile__recht {
	margin-block-start: 3.1vw;
}

/* -------------------------------------------------- Wortmarke und Zeile unten */

.ld-fusszeile__marke {
	position: absolute;
	z-index: 3;
	/*
	 * **Rechts derselbe Abstand wie links** — `--ld-f-links`, an dem auch
	 * Copyright-Satz und Spalten hängen. Die beiden unteren Ecken rahmen den
	 * Fuß damit gleichmäßig ein. Hier standen vorher 7,4 Prozent aus der
	 * Vorlage; vom Kunden am 08.10.2026 im Vergleich dreier Lagen geändert.
	 */
	inset-inline-end: var(--ld-f-links);
	inset-block-end: 2.9vw;
	margin: 0;
	/*
	 * **Der Grad ist nicht die Zahl der Vorlage, sondern ihre Proportion** —
	 * dasselbe Vorgehen wie beim Schriftzug im Auftakt. Hier stand einmal
	 * „LES DEUX 28"; seit dem 15.09.2026 steht dort die Wortmarke der
	 * Startseite, und die ist fast doppelt so breit je Schriftgrad: 10,213
	 * gegen 5,497. **Vom Kunden so gewünscht** — die Seite heißt nicht mehr
	 * Les Deux 28, sondern Metz28.
	 *
	 * Bei gleichem Grad nähme das Wort **die halbe Fensterbreite** statt eines
	 * Viertels. Maßgeblich ist deshalb, wie breit die Vorlage ihre Wortmarke an
	 * dieser Stelle setzt: „BELGRADE ARBOR" misst dort 808 von 2056
	 * Bildpunkten, also **39,3 Prozent**. 39,3 ÷ 10,213 = **3,85 vw**.
	 *
	 * Die Buchstaben stehen damit eine Spur kleiner da als vorher, das Wort
	 * greift dafür weiter aus — genau der Tausch, den ein längerer Name
	 * erzwingt. Wer es größer will, ändert diese eine Zahl.
	 *
	 * **Seit dem 08.10.2026 steht sie ein Viertel größer, auf 4,8 vw** — vom
	 * Kunden im Vergleich von vier Größen gewählt (3,85 / 4,8 / 5,7 / 6,5).
	 * Die Obergrenze wächst im selben Verhältnis mit. **Bei rund 6,5 vw ist
	 * Schluss:** Dort bleiben links nur 60 Bildpunkte Luft zum Copyright-Satz
	 * auf derselben Grundlinie; größer ginge nur, wenn der umzieht.
	 */
	font-size: clamp(2rem, 4.8vw, 5.9rem);
	font-weight: 300;
	line-height: 1;
	/* Der Ausgleich für Light, auf „METZ ACHT&ZWANZIG“ abgestimmt — mit dem allgemeinen
	 * Wert (`--ld-light-lauf`) lag die Breite einige Zehntelprozent daneben. */
	letter-spacing: -0.019em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
}

.ld-fusszeile__jahr {
	position: absolute;
	z-index: 3;
	inset-inline-start: var(--ld-f-links);
	inset-block-end: 2.9vw;
	margin: 0;
	font-size: var(--ld-f-grad);
	line-height: 1.4;
}

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

/*
 * Nebeneinander geht auf dem Handy nicht — vier Spalten von Fingerbreite. Alles
 * untereinander, das Bild darunter.
 */
/* --------------------------------------------- Der Auftritt der Texte
 *
 * **Am 15.09.2026 an Arbors Abschlussbildschirm Bild für Bild abgetastet**,
 * fünf Textblöcke einzeln. Der Befund ist eindeutig und in jeder Zeile
 * bestätigt:
 *
 * | | |
 * |---|---|
 * | Zerlegung | **je Buchstabe**, auch beim Fließtext |
 * | Versatz | **32 Bildpunkte fest**, von unten |
 * | Deckung | 0 → 1, exakt derselbe Verlauf wie der Weg |
 * | Dauer | **0,9 s** |
 * | Kurve | **Auslaufen vierter Ordnung**, 1−(1−x)⁴ |
 * | Takt | **25 ms** je Buchstabe |
 * | Auslöser | **je Block einzeln**, sobald seine Oberkante 95 % der Fensterhöhe erreicht |
 * | Fenster | keines — `overflow: visible`, die Buchstaben sind schlicht durchsichtig |
 * | Ablauf | einmal, fährt nicht zurück |
 *
 * **Die Dauer ist auf fünf Wegen gegengeprüft.** Bei einem Sprung ans
 * Seitenende starten alle fünf Blöcke im selben Einzelbild; der letzte
 * Buchstabe erreicht dann volle Deckung nach 12·25 + 582, 28·25 + 582,
 * 40·25 + 582 und 64·25 + 582 Millisekunden — viermal derselbe Eigenlauf von
 * 582 ms, und genau so lange braucht eine Kurve vierter Ordnung bei 900 ms
 * Dauer bis 98,5 Prozent.
 *
 * **Und der Sprung beweist noch etwas:** Es gibt **keine** Verzögerungen
 * zwischen den Blöcken. Beim gewöhnlichen Scrollen kommen sie nacheinander,
 * weil jeder seinen eigenen Auslöser hat — nicht, weil einer auf den anderen
 * wartet.
 *
 * **Der Versatz ist fest und nicht am Schriftgrad.** Ihre Überschrift steht
 * auf 56 Bildpunkten, ihre Wortmarke auf 100 — beide wandern 32. Unsere
 * Vorgabe rechnet in em; hier steht deshalb ausdrücklich ein festes Maß, und
 * zwar in ihrer Wurzelgröße, damit es auf jedem Fenster ihres trifft.
 */
.ld-fusszeile .ld-steigen {
	--ld-steig-weg: calc(2 * var(--ld-pille-e));
	--ld-steig-dauer: 0.9s;
	/* Auslaufen vierter Ordnung — die CSS-Entsprechung zu 1−(1−x)⁴. */
	--ld-steig-kurve: cubic-bezier( 0.165, 0.84, 0.44, 1 );
	--ld-steig-takt: 0.025;
}

/*
 * **Der Hinweis rechts bekommt keinen Auftritt**, und das ist gemessen: Ihr
 * Gegenstück — der Vorbehalt „Napomena: …" — ist zwar in Wörter zerlegt, hat
 * darin aber keine eigenen Elemente und rührt sich nicht. Dasselbe gilt für
 * ihre Menüspalten. Bewegt werden nur Überschrift, Schlusssatz und Wortmarke.
 */


/*
 * ------------------------------------------------- Schmale Geräte
 *
 * **Auf dem Telefon steht dieselbe Aufteilung auf dem Kopf, und das war ein
 * echter Fehler.** Die Bühne stand dort auf `height: auto`, alles wurde
 * `position: relative` — und damit stapelte sich der Fuß in der Reihenfolge
 * des Markups. Das Bild ist dort das **erste** Element, stand also ganz oben,
 * und die Wortmarke stand als letztes in **Kalkweiß auf hellem Grund**:
 * Kontrast rund 1,2, praktisch unsichtbar. Am Schreibtisch fiel das nie auf,
 * weil dort alles absolut liegt und die Reihenfolge nichts bedeutet.
 *
 * **Daraus die Regel: Wo absolute Lagen auf schmalen Geräten in den Fluss
 * zurückfallen, entscheidet plötzlich die Reihenfolge im Markup** — und die
 * ist nach der Sichtbarkeit am Schreibtisch sortiert, nicht nach dem Lesen.
 *
 * Gelöst wie am Schreibtisch, nur flacher: Das Bild bleibt ein absolut
 * liegendes Band **am unteren Rand**, die Texte stehen darüber im Fluss, und
 * Wortmarke und Jahr liegen auf dem Bild. Die Bühne hält sich den Platz dafür
 * mit einem unteren Polster frei.
 */

@media ( max-width: 767px ) {

	.ld-fusszeile {
		/* Höhe des Bildbandes am Fuß. Steht an einer Stelle — die Bühne hält
		   sich genau diesen Platz frei, das Band füllt ihn aus. */
		--ld-f-band: 42svh;
		/*
		 * **Keine zurückhängende Fahrt auf dem Telefon.** Am Schreibtisch
		 * wandert die Aufnahme 160 Bildpunkte — gemessen in der Vorlage. Im
		 * Band von 42 svh wären das fast die Hälfte seiner Höhe, und jede
		 * Vergrößerung des Medienkastens über sein Fenster hinaus ist
		 * Beschnitt. **Arbors Fuß auf dem Telefon ist nicht nachgemessen**;
		 * eine Zahl zu erfinden wäre schlechter als keine Bewegung.
		 */
		--ld-f-weg: 0px;
	}

	.ld-fusszeile .ld-fusszeile__buehne {
		position: relative;
		height: auto;
		min-height: 0;
		padding: 2.5rem 1.5rem calc(var(--ld-f-band) + 2.5rem);
	}

	.ld-fusszeile__spalte,
	.ld-fusszeile__menue,
	.ld-fusszeile__social,
	.ld-fusszeile__hinweis {
		position: relative;
		inset: auto;
		width: auto;
		margin: 0;
		white-space: normal;
	}

	.ld-fusszeile__menue,
	.ld-fusszeile__social,
	.ld-fusszeile__hinweis {
		margin-block-start: 2.5rem;
	}

	.ld-fusszeile__wort {
		font-size: clamp(1.8rem, 9vw, 2.8rem);
	}

	/* Das Bildband. Es blutet über das Polster der Bühne hinaus. */
	.ld-fusszeile__bild {
		inset: auto 0 0 0;
		height: var(--ld-f-band);
		margin: 0;
		/*
		 * **Hier darf die Kante nicht kurz sein.** Am Schreibtisch füllt die
		 * Aufnahme den ganzen Fuß und steht mit ihrem eigenen hellen Himmel
		 * oben; acht Prozent genügen. Ein 42-svh-Band zeigt dagegen wieder nur
		 * einen Streifen aus der Bildmitte, und dessen Oberkante ist dunkel —
		 * genau der Fall, aus dem am Schreibtisch das „in der Mitte geteilt"
		 * entstanden ist. Deshalb hier ein langer Übergang.
		 */
		mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
	}

	/* Wortmarke und Jahr liegen auf dem Band, so wie am Schreibtisch. */
	.ld-fusszeile__marke {
		inset-inline: 1.5rem auto;
		inset-block-end: 3.6rem;
		width: auto;
		margin: 0;
		font-size: clamp(1.8rem, 11vw, 3rem);
		white-space: normal;
	}

	.ld-fusszeile__jahr {
		inset-inline: 1.5rem auto;
		inset-block-end: 1.5rem;
		width: auto;
		margin: 0;
		white-space: normal;
	}

	.ld-fusszeile__schalter,
	.ld-fusszeile__satz,
	.ld-fusszeile__recht {
		margin-block-start: 1.5rem;
	}

	/*
	 * **Der Schleier steht hier dichter, und das ist gemessen.** Am
	 * Schreibtisch füllt die Aufnahme den ganzen Fuß, unten liegt ihre
	 * dunkelste Zone, und die Wortmarke steht dort bei 13,6 zu 1. Im flachen
	 * Band ist die ganze Aufnahme auf 42 svh gestaucht — der dunkle Fuß ist
	 * damit nur noch ein schmaler Streifen, und die Wortmarke fiel auf **3,49**.
	 * Das trägt für große Schrift, aber ohne Spielraum.
	 */
	.ld-fusszeile__bild::after {
		background: linear-gradient(
			to top,
			color-mix(in srgb, var(--wp--preset--color--contrast) 82%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--contrast) 44%, transparent) 26%,
			transparent 56%
		);
	}

	/*
	 * **Aufteilung wie Arbors Fuß auf dem Telefon** (27.10.2026, bei 375
	 * gemessen):
	 *
	 *   Überschrift   links, Oberkante 96 = Pille samt Luft, 38,4 (2,5 Gm.),
	 *                 Versalien, Zeilenhöhe 1,25 → bei uns 1,12 (Umlaute)
	 *   Satz          links, 15,4 (1 Gm.)
	 *   Knopf         mittig — dort „Let's begin" unter dem Formular
	 *   Menü          mittig, 15,4, Versalien, Zeilenabstand 34,6
	 *   Rechtliches   mittig, wie das Menü, ohne Versalien
	 *   Hinweis       links, volle Breite, 13,45, Zeilenhöhe 1,3 → 1,45
	 *   Wortmarke     mittig auf dem Bild, zweizeilig; Jahr mittig darunter
	 *
	 * **Die Oberkante ist dieselbe Rechnung wie am Schreibtisch:** Pille plus
	 * 1,5 rem, sonst läge die Überschrift hinter der fixierten Pille — genau
	 * das stand vorher da (40 Bildpunkte Polster gegen 70 Pille). Ergibt bei
	 * uns 96, genau Arbors Wert.
	 */
	.ld-fusszeile .ld-fusszeile__buehne {
		padding-block-start: calc( var( --ld-pille-fuss ) + 1.5rem );
	}

	.ld-fusszeile__wort {
		font-size: 2.4rem;
		line-height: 1.12;
	}

	.ld-fusszeile__satz {
		font-size: 0.96rem;
		line-height: 1.4;
	}

	.ld-fusszeile__schalter {
		margin-block-start: 2rem;
		text-align: center;
	}

	.ld-fusszeile__menue {
		margin-block-start: 3.5rem;
		text-align: center;
	}

	.ld-fusszeile__menue p {
		font-size: 0.96rem;
		line-height: 2.25;
	}

	.ld-fusszeile__recht {
		margin-block-start: 1.5rem;
	}

	.ld-fusszeile__hinweis {
		margin-block-start: 3.5rem;
		font-size: 0.84rem;
		line-height: 1.45;
	}

	.ld-fusszeile__marke,
	.ld-fusszeile__jahr {
		inset-inline: 1.5rem;
		text-align: center;
	}

	/*
	 * **Größere Tippfläche, gleiches Aussehen.** Die Verweise sind 18
	 * Bildpunkte hoch und stehen 34,5 auseinander; ein Finger braucht 44.
	 * Bei einem Verweis im Fließtext verschiebt senkrechtes Polster keine
	 * Zeile, das waagrechte hebt der negative Rand auf. Die Flächen wachsen
	 * so weit, dass sie einander gerade berühren, nicht überlappen —
	 * sonst träfe ein Tipp den Nachbarn. Vom Kunden so gewünscht.
	 */
	.ld-fusszeile__menue a,
	.ld-fusszeile__recht a {
		padding: 0.5rem 0.75rem;
		margin: -0.5rem -0.75rem;
	}
}