/*
 * Fehlerseite (404)
 * =================
 *
 * Nachgebaut nach Arbors Fehlerseite, am 27.10.2026 bei 2056 × 1147 und 375
 * gemessen; alle Maße in Arbors Grundmaß `--ld-pille-e` (bei 2056 16 px):
 *
 * | | 2056 (Grundmaße) | 375 |
 * |---|---|---|
 * | Abschnitt | genau ein Bildschirm, Polster 10 oben, 3,75 unten | Polster 7,2 rem oben |
 * | Seitenrand | 7,39 vw (152 px) | 1,4375 rem |
 * | Überschrift | 10, Regular, Versalien, Zeilenhöhe 1, oben links | 2,88 rem |
 * | „404“ | wie die Überschrift, oben rechts | darunter, links |
 * | Satz | 3,5, Light, Zeilenhöhe 1,1, unten links | 2,4 rem |
 * | Hinweis | 1,25, Versalien, Akzentfarbe, 35,5 vw breit, 2 unter dem Satz | 1,2 rem, volle Breite |
 * | Knopf | gefüllt (Sand, dunkle Schrift), 236 × 56, unten rechts | unter dem Text |
 *
 * **Farben übersetzt wie im Galerie-Auftakt:** Arbors Sand ist bei uns
 * Terrakotta hell, ihr Gelb der Hinweiszeile Salbei — Signalgelb bleibt dem
 * Abschnitt „Architektur“ vorbehalten.
 *
 * **Das Bild ist die Lichtfläche der Badvariationen.** Arbor legt ein
 * goldenes Video mit Licht im Vorhang darunter; unsere Fläche ist dieselbe
 * Stimmung. Sie ist in der Mitte hell, darum liegt ein Schleier aus Hofgrün
 * tief darüber.
 */

.ld-fehler {
	--ld-fe-e: var( --ld-pille-e );
	position: relative;
	box-sizing: border-box;
	display: flex;
	min-height: 100svh;
	margin-block: 0;
	padding: calc( 10 * var( --ld-fe-e ) ) 7.39vw calc( 3.75 * var( --ld-fe-e ) );
	overflow: clip;
	background-color: var( --wp--preset--color--contrast );
}

/* blockGap: Die Kinder liegen absolut oder sind das einzige im Fluss. */
.ld-fehler > *,
.ld-fehler__inhalt > *,
.ld-fehler__oben > *,
.ld-fehler__unten > *,
.ld-fehler__text > * {
	margin-block: 0;
}

.ld-fehler__bild {
	position: absolute;
	z-index: 0;
	inset: 0;
	margin: 0;
}

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

.ld-fehler__bild::after {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix( in srgb, var( --wp--preset--color--contrast ) 45%, transparent );
}

.ld-fehler__inhalt {
	position: relative;
	z-index: 2;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	gap: calc( 4 * var( --ld-fe-e ) );
}

.ld-fehler__oben,
.ld-fehler__unten {
	display: flex;
	justify-content: space-between;
	gap: calc( 4 * var( --ld-fe-e ) );
}

.ld-fehler__oben {
	align-items: flex-start;
}

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

.ld-fehler__titel,
.ld-fehler__zahl {
	font-size: calc( 10 * var( --ld-fe-e ) );
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-transform: uppercase;
}

.ld-fehler__titel {
	max-width: 56.8vw;
}

.ld-fehler__zahl {
	flex: none;
}

.ld-fehler__text {
	max-width: 56.8vw;
}

.ld-fehler__satz {
	font-size: calc( 3.5 * var( --ld-fe-e ) );
	font-weight: 300;
	line-height: 1.1;
	/* Der Ausgleich für Light, auf „Diese Seite gibt es nicht“ abgestimmt — mit dem allgemeinen
	 * Wert (`--ld-light-lauf`) lag die Breite einige Zehntelprozent daneben. */
	letter-spacing: calc(0.02em - 0.018em);
}

.ld-fehler .ld-fehler__hinweis {
	max-width: 35.5vw;
	margin-block-start: calc( 2 * var( --ld-fe-e ) );
	font-size: calc( 1.25 * var( --ld-fe-e ) );
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Der Knopf wie im Galerie-Auftakt: gefüllt, dunkle Schrift, Pfeil. */
.ld-fehler__knopf {
	flex: none;
	--ld-schalter-farbe: var( --wp--preset--color--contrast );
}

.ld-fehler__knopf :is( a, button ) {
	border-color: var( --wp--preset--color--terrakotta-hell );
	background-color: var( --wp--preset--color--terrakotta-hell );
	color: var( --wp--preset--color--contrast );
}

.ld-fehler__knopf :is( a, button ):hover,
.ld-fehler__knopf :is( a, button ):focus-visible {
	background-color: var( --wp--preset--color--base );
}

/* Adresse unmittelbar, nicht über `--ld-schalter-bild` — siehe Galerie-Auftakt. */
.ld-fehler__knopf .ld-schalter__zeile::after {
	content: "";
	-webkit-mask: url( "../../images/symbole/pfeil.svg" ) center / contain no-repeat;
	mask: url( "../../images/symbole/pfeil.svg" ) center / contain no-repeat;
}

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

@media ( max-width: 767px ) {

	.ld-fehler {
		padding: 7.2rem 1.4375rem 3.6rem;
	}

	.ld-fehler__oben,
	.ld-fehler__unten {
		flex-direction: column;
		align-items: flex-start;
		gap: 2rem;
	}

	.ld-fehler__inhalt {
		justify-content: flex-start;
		gap: 2.4rem;
	}

	.ld-fehler__titel,
	.ld-fehler__zahl {
		font-size: 2.88rem;
	}

	.ld-fehler__titel,
	.ld-fehler__text,
	.ld-fehler .ld-fehler__hinweis {
		max-width: none;
	}

	.ld-fehler__satz {
		font-size: 2.4rem;
	}

	.ld-fehler .ld-fehler__hinweis {
		margin-block-start: 1.6rem;
		font-size: 1.2rem;
	}
}