/*
 * Abschnitt: Badvariationen
 * =========================
 *
 * Die sechs Ausstattungslinien der Bäder zur Wahl. Rechts steht das gewählte
 * Bad groß in einer Form, links liegen die übrigen fünf als Mosaik — darin
 * aber nicht die Räume, sondern die **Bemusterung**: links die echte Marazzi-
 * Fliese, rechts der Wandton, der laut Gestaltungsblatt dazugehört. Unter dem
 * Mosaik steht der Name der gewählten Linie.
 *
 * **Der Abschnitt ist der dritte seiner Bauart im Theme**, und das ist der
 * Grund, warum er wenig eigenen Code braucht: Das Skript setzt genau eine Zahl
 * (`--ld-bv-p`, 0 bis 1), das Aussehen macht ausschließlich dieses Stylesheet.
 * So sind der Auftakt und die Galerie gebaut, und dort steht auch die
 * Begründung.
 *
 * **Die große Kachel trägt `form-1.svg` aus „Architektur", und das ist
 * gemessen.** Alle elf Masken des Themes wurden gerendert und ihr
 * Flächenanteil gezählt:
 *
 *   form-3           87,7 %   Verhältnis 1,78
 *   form-2           84,4 %              1,32
 *   form-1           84,3 %              0,76
 *   beste Galerieform 69,9 %             1,12
 *   übrige Galerie   48 bis 62 %
 *
 * Die Keile aus „Architektur" lassen also rund ein Drittel mehr Bild stehen
 * als die Galerie-Scherben. Rechnet man den Zuschnitt dazu — unsere Bad-Bilder
 * sind quadratisch —, kommen `form-1` und `form-2` beide auf **64 Prozent
 * sichtbare Fläche**, `form-3` nur auf 49. Gewählt ist `form-1`, die hochkante:
 * Ihr Verhältnis von 0,757 ist praktisch dasselbe wie das der beiden
 * Bildformen in „Die Idee" (0,745), und sie passt zu einer Kachel, die rechts
 * über die Bildschirmhöhe steht.
 *
 * **Die fünf kleinen Kacheln tragen dagegen fünf verschiedene Galerieformen.**
 * Dort geht es nicht um Bildfläche — sie zeigen eine Fliese und eine Farbe,
 * und davon ist jeder Ausschnitt gleich gut. Es geht um Unregelmäßigkeit:
 * Fünfmal dieselbe Form ergibt ein Raster, kein Mosaik.
 *
 * **Die Überschrift steht in Card Room Green tief, nicht in Hofgrün tief.**
 * So macht es „GALERIE", und der Grund steht beim Riesenwort in „Zwei Häuser,
 * ein Hof": Hofgrün tief ist bei dieser Größe fast schwarz und dominiert den
 * Bildschirm, statt ihn zu überschreiben.
 *
 * **Das Mosaik rechnet in einheitenlosen Anteilen eines festen Bezugskastens**,
 * nicht in Prozent der Bühne — dieselbe Regel wie in der Galerie. Stünde es in
 * Prozent, zöge es sich auf einem breiten Bildschirm über die ganze Fläche und
 * wirkte sofort grob.
 *
 * Maße:
 *
 * | | |
 * |---|---|
 * | Schacht | 320 svh |
 * | Knick der Fahrt | 45 % — davor wächst sie, danach wandert sie |
 * | Auftritt der Kachel | Vorhang von links, 1,2 s |
 * | Wechsel | von unten herauf, 1,3 s, Bild zieht 16 % mit |
 * | Zoom im Bild | 1,10 auf 1,00 gegen den wachsenden Rahmen |
 * | Riesenwort | 4,86 vw, Versalien, Light, **Card Room Green tief** |
 * | Mosaik | sechs Galerieformen, verzahnt, gleiche deckende Fläche |
 * | Bezugskasten Mosaik | min( 27 vw, 40 svh ), Verhältnis 0,9924, links bei 4,15 vw, senkrecht mittig |
 * | große Kachel, Anfang | 22 vw breit, mittig |
 * | große Kachel, Ende | min( 44 vw, 60,6 svh ), rechts im Randmaß 4,15 vw, 10 bis 90 svh |
 * | Legende | unten links, 0,78 vw, Versalien 0,02 em — wie die Ausstattungsliste |
 * | Grund | Hofgrün tief, Bild auf 46 % abgedunkelt, Schleier 55 % |
 */

.ld-badvar {
	--ld-bv-p: 0;

	/*
	 * Bezugskasten des Mosaiks — fest, nicht mitwachsend. Er beginnt erst bei
	 * 24 svh: Darüber steht das Riesenwort, und das braucht Luft, sonst
	 * drängen sich Wort und Kacheln.
	 */
	--ld-bv-kasten-b: min( 27vw, 40svh );
	--ld-bv-kasten-h: calc( var( --ld-bv-kasten-b ) / 0.9924 );
	--ld-bv-kasten-x: 4.15vw;
	/*
	 * **Mitte bei 47 svh, nicht mehr bei 51,5** — seit unter der Legende die
	 * Schaltfläche steht, ist die Legende um eine Pillenhöhe hochgerückt. Auf
	 * 1280 × 720 blieben zwischen Mosaik und Legende sonst acht Bildpunkte;
	 * jetzt ist der Abstand über und unter dem Mosaik etwa gleich.
	 */
	--ld-bv-kasten-y: calc( 47svh - var( --ld-bv-kasten-h ) / 2 );

	/*
	 * **Die große Kachel: Anfang und Ende der Fahrt.**
	 *
	 * Am Ende ist sie so groß, wie der Bildschirm sie zulässt — vom Kunden so
	 * gewollt: „Wichtig ist, dass in der großen Kachel das Bild wirklich
	 * maximal groß zu sehen ist." Begrenzt wird sie von **zwei** Seiten, und
	 * beide werden gebraucht:
	 *
	 * - `60.6svh` ist die Höhe: 80 svh mal dem Formverhältnis 0,757. Damit
	 *   steht die Kachel von 10 svh bis 90 svh, oben und unten gleich viel Luft.
	 * - `44vw` fängt den umgekehrten Fall ab. Auf einem hohen, schmalen Fenster
	 *   würde die Höhenrechnung die Kachel breiter machen als das halbe Fenster,
	 *   und sie stieße ins Mosaik.
	 *
	 * **Ohne die zweite Grenze läuft es über.** Bei 1920 × 1080 ergäben 44 vw
	 * allein 845 Bildpunkte Breite und damit 1116 Höhe — mehr als der
	 * Bildschirm hoch ist. Nachgerechnet bei 1024 × 768, 1440 × 900,
	 * 1512 × 982 und 1920 × 1080: überall zwischen 73 und 80 svh.
	 */
	--ld-bv-gross-b1: 22vw;
	--ld-bv-gross-b2: min( 44vw, 60.6svh );
	--ld-bv-gross-x1: calc( ( 100% - var( --ld-bv-gross-b1 ) ) / 2 );
	--ld-bv-gross-x2: calc( 100% - var( --ld-bv-kasten-x ) - var( --ld-bv-gross-b2 ) );
	--ld-bv-gross-y1: 22svh;
	--ld-bv-gross-y2: 10svh;

	/*
	 * Der Zoom im Bild. **Er läuft über die ganze Fahrt**, nicht nur über die
	 * erste Hälfte: Während die Kachel erst wächst und dann wandert, fährt das
	 * Bild darin durchgehend von 1,10 auf 1,00 zurück. Dadurch bewegen sich
	 * Rahmen und Inhalt die ganze Zeit verschieden schnell — das ist alles,
	 * was Parallax ist. Hinge er am Wachsen, stünde das Bild still, sobald die
	 * Kachel zu wandern beginnt.
	 */
	--ld-bv-zoom1: 1.10;
	--ld-bv-zoom2: 1.00;

	/*
	 * **Die Fahrt hat zwei Abschnitte, und sie überlappen nicht.** Zuerst baut
	 * sich die Kachel in der Bildmitte auf — bis 45 Prozent der Strecke. Erst
	 * wenn sie fertig ist, wandert sie nach rechts. Wüchse sie unterwegs,
	 * bekäme man zwei Bewegungen gleichzeitig und sähe keine davon richtig.
	 *
	 * Beide Werte leiten sich aus der einen Zahl ab, die das Skript setzt.
	 * `clamp()` schneidet sie an den Enden ab: `--ld-bv-wachs` ist ab 0,45
	 * fertig, `--ld-bv-wandert` fängt dort erst an.
	 */
	--ld-bv-knick: 0.45;
	--ld-bv-wachs: clamp( 0, calc( var( --ld-bv-p ) / var( --ld-bv-knick ) ), 1 );
	--ld-bv-wandert: clamp(
		0,
		calc( ( var( --ld-bv-p ) - var( --ld-bv-knick ) ) / ( 1 - var( --ld-bv-knick ) ) ),
		1
	);

	--ld-bv-form: 0.757;

	position: relative;
	background-color: var( --wp--preset--color--contrast );
}

/*
 * Der Schacht gibt die Scrollstrecke, die Bühne klebt darin. Dieselbe Bauart
 * wie in der Galerie und im Abschnitt „Die Idee".
 */
.ld-badvar__schacht {
	position: relative;
	height: 320svh;
	margin-block: 0;
}

.ld-badvar__buehne {
	position: sticky;
	inset-block-start: 0;
	height: 100svh;
	margin-block: 0;
	overflow: clip;
	isolation: isolate;
}

/* ------------------------------------------------------------ Hintergrund */

/*
 * Ganzflächig, mit `ld-nachlauf` am Rahmen — die Klasse allein genügt, den
 * Rest macht der Baustein in `base.css`. **Die Höhe gehört deshalb nicht
 * hierher:** Diese Datei kommt später im Ladeweg und gewänne bei gleichem
 * Gewicht; das Bild bliebe rahmenhoch und der Versatz risse oben eine Lücke.
 */
.ld-badvar__grund {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin-block: 0;
}

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

/*
 * Ein Schleier über dem Grund. **Das Bild ist schon in der Datei abgedunkelt**
 * — jeder Kanal auf 46 Prozent, mittlere Helligkeit von 28 auf 12,7. Der
 * Schleier legt darüber noch Hofgrün tief zu 55 Prozent.
 *
 * **Beides zusammen, und das hat einen Grund:** Ein Schleier kann eine Fläche
 * nie dunkler machen als den Ton, den er aufträgt — das steht als Regel beim
 * Auftakt. Wer sehr tief will, dunkelt das Bild selbst ab; der Schleier legt
 * dann nur noch die Farbe darüber.
 */
.ld-badvar__buehne::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: color-mix( in srgb, var( --wp--preset--color--contrast ) 54%, transparent );
	pointer-events: none;
}

/* ------------------------------------------------------------ Riesenwort */

/*
 * **Die Überschrift beginnt unter der Kopfzeilen-Pille, nicht hinter ihr.**
 * Die Pille rechnet in Arbors Grundmaß: 1,5 Maße Abstand von oben plus 3,625
 * Maße Höhe. Bei 1512 × 900 endet sie damit bei rund 64 Bildpunkten, also
 * 7,1 svh. Bei 5,5 svh lief das Wort dahinter — sie ist breit genug, um bis
 * in die Bildmitte zu reichen, und die Überschrift ist es auch.
 *
 * 11 svh lässt knapp vier svh Luft. **Das ist kein Schätzwert, sondern
 * gerechnet** — wer den Grad des Wortes ändert, prüft es neu.
 */
.ld-badvar__wort {
	position: absolute;
	z-index: 3;
	inset-block-start: 11svh;
	inset-inline-start: 5.5vw;
	margin-block: 0;
	font-size: 4.86vw;
	font-weight: 300;
	line-height: 1;
	/* Der Ausgleich für Light, auf „Badvariationen“ abgestimmt — mit dem allgemeinen
	 * Wert (`--ld-light-lauf`) lag die Breite einige Zehntelprozent daneben. */
	letter-spacing: -0.024em;
	text-transform: uppercase;
}

/* ------------------------------------------------------- die große Kachel */

/*
 * Lage und Größe interpolieren über `--ld-bv-p`. Die Höhe folgt der Breite
 * über das Seitenverhältnis der Form — wer sie frei setzt, verzieht sie.
 */
.ld-badvar__gross {
	position: absolute;
	z-index: 2;
	margin-block: 0;
	inset-inline-start: calc(
		var( --ld-bv-gross-x1 ) +
		( var( --ld-bv-gross-x2 ) - var( --ld-bv-gross-x1 ) ) * var( --ld-bv-wandert )
	);
	inset-block-start: calc(
		var( --ld-bv-gross-y1 ) +
		( var( --ld-bv-gross-y2 ) - var( --ld-bv-gross-y1 ) ) * var( --ld-bv-wandert )
	);
	width: calc(
		var( --ld-bv-gross-b1 ) +
		( var( --ld-bv-gross-b2 ) - var( --ld-bv-gross-b1 ) ) * var( --ld-bv-wachs )
	);
	aspect-ratio: var( --ld-bv-form );

	mask-image: url( "../../images/formen/form-1.svg" );
	mask-size: 100% 100%;
	mask-repeat: no-repeat;

	/*
	 * **Der Auftritt ist derselbe Vorhang wie in „Die Lage“.** Die Kachel wird
	 * von links nach rechts aufgedeckt, sobald der Abschnitt ins Bild kommt.
	 * `clip-path` und `mask` schneiden dabei unabhängig voneinander: Die Maske
	 * gibt die Form, der Beschnitt die Fahrt.
	 */
	clip-path: inset( 0% 100% 0% 0% );
	transition: clip-path 1.2s cubic-bezier( 0.76, 0, 0.24, 1 );
}

.ld-badvar.is-da .ld-badvar__gross {
	clip-path: inset( 0% 0% 0% 0% );
}

/*
 * Die sechs Bäder liegen übereinander und wechseln über die Deckung — dieselbe
 * Mechanik wie die Bilder der Ausstattungsliste. Ein Wipe wäre hier falsch:
 * Die sechs zeigen denselben Raum, nur anders bemustert; eine Bewegung
 * behauptete einen Ortswechsel, den es nicht gibt.
 */
/*
 * **Das neue Bad kommt von unten herauf und deckt das alte zu.** Es ist der
 * Wipe der Galerie, nur senkrecht statt waagrecht — und mit demselben Griff,
 * der ihn teuer aussehen lässt: **Das Bild darin läuft gegenläufig, aber nur
 * den halben Weg.** Dadurch fliegt die Aufnahme nicht herein, sondern driftet.
 *
 * **Das alte Bild bewegt sich überhaupt nicht**, es wird nur zugedeckt. Wer
 * beide bewegt, bekommt ein Karussell.
 *
 * Das Mitziehen läuft über `transform`, der Parallax über `translate` und
 * `scale` — drei Eigenschaften, die einander nicht stören. Dieselbe
 * Aufteilung wie beim Abschied klebender Abschnitte.
 */
.ld-badvar__bad {
	position: absolute;
	inset: 0;
	margin-block: 0;
	clip-path: inset( 100% 0% 0% 0% );
	transition: clip-path 1.3s cubic-bezier( 0.76, 0, 0.24, 1 );
}

.ld-badvar__bad.is-vorn {
	clip-path: inset( 0% 0% 0% 0% );
}

/*
 * **Der Mitzieh-Weg stand zuerst auf 8 Prozent und war damit unsichtbar.**
 * Gemessen lief die Bewegung korrekt — 37,8 Bildpunkte auf null —, nur merkt
 * das bei dieser Dauer niemand. 16 Prozent sind deutlich genug, um als
 * eigene Bewegung gelesen zu werden, und bleiben weit unter dem halben Weg,
 * den die Galerie nimmt: Dort schiebt sich ein ganzes Fenster über den
 * Bildschirm, hier wird nur aufgedeckt, und da wirkt die Hälfte übertrieben.
 *
 * Die Dauer ist jetzt 1,3 s — der Takt des Galerie-Wipes.
 */
.ld-badvar__bad img {
	transform: translateY( 16% );
	transition: transform 1.3s cubic-bezier( 0.76, 0, 0.24, 1 );
}

.ld-badvar__bad.is-vorn img {
	transform: translateY( 0 );
}

/*
 * Ohne Übergang an seinen Platz: beim Laden, und bei jedem Bild, das im Ring
 * ein zweites Mal an die Reihe kommt. Sonst führe es beim ersten Anzeigen von
 * unten herein. Dieselbe Vorsichtsmaßnahme wie beim ersten Bild der Galerie.
 */
.ld-badvar__bad.is-sofort,
.ld-badvar__bad.is-sofort img {
	transition: none;
}

/*
 * **Der Zoom ist der Parallax.** Das Bild fährt gegen den wachsenden Rahmen
 * zurück; Rahmen und Inhalt bewegen sich dadurch verschieden schnell. Der Weg
 * ist bewusst klein — zehn Prozent Maßstab und zwei Prozent Versatz. Was die
 * Maske überragt, schneidet sie ab.
 */
.ld-badvar__gross .ld-badvar__bad img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: 50% 40%;
	scale: calc(
		var( --ld-bv-zoom1 ) +
		( var( --ld-bv-zoom2 ) - var( --ld-bv-zoom1 ) ) * var( --ld-bv-p )
	);
	translate: 0 calc( 2% - 2% * var( --ld-bv-p ) );
}

/* ------------------------------------------------------------ das Mosaik */

.ld-badvar__mosaik {
	position: absolute;
	z-index: 2;
	inset-inline-start: var( --ld-bv-kasten-x );
	inset-block-start: var( --ld-bv-kasten-y );
	width: var( --ld-bv-kasten-b );
	height: var( --ld-bv-kasten-h );
	margin-block: 0;
	list-style: none;
	padding: 0;
}

/*
 * Jeder Platz ist ein Anteil des Bezugskastens. Die Höhe rechnet sich aus der
 * Breite über das Formverhältnis — dadurch bleiben alle fünf formgleich, egal
 * wie der Kasten gerade steht.
 */
.ld-badvar__platz {
	position: absolute;
	margin-block: 0;
	inset-inline-start: calc( var( --ld-bv-x ) * var( --ld-bv-kasten-b ) );
	inset-block-start: calc( var( --ld-bv-y ) * var( --ld-bv-kasten-h ) );
	width: calc( var( --ld-bv-b ) * var( --ld-bv-kasten-b ) );
	aspect-ratio: var( --ld-bv-form );
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	overflow: hidden;
	min-height: 0;

	/*
	 * **Die Form steht als `clip-path`, nicht als Maske — und das ist kein
	 * Geschmack, sondern der Unterschied zwischen benutzbar und kaputt.**
	 *
	 * `mask-image` färbt nur, was man sieht. Für den Zeiger bleibt die Kachel
	 * ihr **Rechteck**, und die sechs Rechtecke überschneiden sich hier
	 * zwangsläufig: Das Mosaik ist ja gerade so gerechnet, dass die schrägen
	 * Kanten ineinandergreifen. Nachgemessen waren es **acht überlappende
	 * Paare**, das größte mit 73 × 75 Bildpunkten.
	 *
	 * Die Folgen waren genau die, die der Kunde gemeldet hat: In der Mitte der
	 * weißen Kachel bekam **Green** den Zeiger — die gewählte Kachel liegt auf
	 * `z-index: 2` und deckte mit ihrem Rechteck fremde Scherben zu. Zwei
	 * Kacheln ließen sich gar nicht mehr überfahren.
	 *
	 * **`clip-path` schneidet die Trefferfläche mit.** Damit ist die Scherbe
	 * auch für den Zeiger eine Scherbe, und in den Lücken dazwischen liegt
	 * nichts.
	 *
	 * **Die Vielecke sind von den Maskendateien abgetastet**, nicht neu
	 * gezeichnet: `getPointAtLength()` über 900 Punkte je Umriss, danach auf
	 * 27 bis 30 Stützpunkte eingedampft (Douglas-Peucker, Toleranz 0,14
	 * Prozent). Bei einer 100 Bildpunkte breiten Kachel ist das ein Siebtel
	 * Bildpunkt Abweichung — die runden Ecken bleiben rund. Wer eine Form
	 * ändert, tastet sie neu ab; die SVG-Dateien bleiben die Quelle.
	 */

	/*
	 * **Der Auftritt hängt an einer Klasse, nicht an `--ld-bv-p`.** Ein Wert,
	 * den ein Skript Bild für Bild setzen müsste, bleibt stehen, sobald der
	 * Browser die Einzelbilder drosselt — die fünf Kacheln wären dann
	 * unsichtbar. Genau das ist beim Wortauftritt in „Zwei Charaktere" schon
	 * einmal passiert.
	 */
	opacity: 0;
	scale: 1;
	translate: -2vw 0;
	transition:
		opacity 0.8s cubic-bezier( 0.215, 0.61, 0.355, 1 ) var( --ld-bv-verzug, 0s ),
		translate 0.8s cubic-bezier( 0.215, 0.61, 0.355, 1 ) var( --ld-bv-verzug, 0s ),
		scale 0.55s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.ld-badvar.is-offen .ld-badvar__platz {
	translate: 0 0;
}

/*
 * **Die gewählte Kachel zeigt sich selbst an.** Sie wird eine Spur größer und
 * bleibt voll deckend, die übrigen fünf treten zurück. Vom Kunden so gewollt:
 * „dass wirklich man sofort sieht, welche Kachel ausgewählt ist."
 *
 * **Gedämpft wird über die Deckkraft, nicht über die Farbe.** Die sechs
 * Fliesentöne *sind* der Inhalt dieser Reihe; grau gewordene Farbmuster sagen
 * weniger, als sie sollen. Entsättigen wäre deutlicher und wäre falsch.
 *
 * **Größe über `scale`, Auftritt über `translate`** — zwei Eigenschaften, die
 * einander nicht stören. Dieselbe Aufteilung wie beim Abschied klebender
 * Abschnitte. Die gewählte Kachel bekommt dazu eine eigene Stapelzahl: Sie
 * wächst über ihre Nachbarn hinaus, und „steht später im Markup" ist keine
 * Reihenfolge.
 */
.ld-badvar.is-offen .ld-badvar__platz {
	/*
	 * **Der Wert ist zweimal gewandert, und beide Male vom Kunden.** Bei 0,42
	 * verschwanden die hellen Töne — White bei 0,605 und Turquoise bei 0,372
	 * Leuchtdichte — auf dem dunklen Grund fast ganz; bei 0,6 stand die
	 * gewählte Kachel zu wenig heraus. 0,32 ist der Ausgleich: Die Reihe
	 * bleibt vollzählig zu sehen, aber die Gewählte ist dreimal so deckend.
	 *
	 * Beim Darüberfahren geht es auf 0,6 hinauf — halber Weg zur Auswahl. Das
	 * zeigt, was unter dem Zeiger liegt, ohne zu behaupten, es sei gewählt.
	 * Dieselbe Trennung wie beim Strich in „Die zwei Wohnwelten".
	 */
	opacity: 0.32;
}

.ld-badvar.is-offen .ld-badvar__platz:hover,
.ld-badvar.is-offen .ld-badvar__platz:focus-visible {
	opacity: 0.6;
}

.ld-badvar.is-offen .ld-badvar__platz.is-vorn {
	z-index: 2;
	opacity: 1;
	scale: 1.12;
}


/*
 * **Das Bild liegt absolut, sonst bestimmt es die Höhe.** `aspect-ratio` gilt
 * nur, solange der Inhalt nicht größer ist; ein Bild mit `height: 100%` in
 * einem Kasten mit Seitenverhältnis ist zirkulär, und der Browser nimmt dann
 * dessen eigene Höhe. Bei den hochkanten Formen fiel das nicht auf, bei den
 * querformatigen sofort: Statt 1,372 stand die Kachel bei 0,863.
 *
 * Nachgemessen, nachdem das Bild absolut liegt: alle fünf treffen ihr
 * Verhältnis auf drei Stellen.
 */
.ld-badvar__platz img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 0.65s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.ld-badvar__platz:hover img,
.ld-badvar__platz:focus-visible img {
	scale: 1.04;
}

/*
 * **Die sechs Plätze tragen sechs verschiedene Formen.** Der Satz aus der
 * Galerie ist genau dafür gemacht: gebrochene Scherben mit Verhältnissen von
 * 0,56 bis 1,37, aufeinander abgestimmt. Sechsmal dieselbe Form ergäbe ein
 * Raster, kein Mosaik — und genau so sah es im ersten Anlauf aus.
 *
 * **Die Anordnung ist gerechnet, nicht nach Augenmaß gesetzt**, und der Weg
 * dahin hat einen Irrweg gekostet, der als Regel bleibt:
 *
 * **Ein Mosaik verzahnt sich, es streut nicht.** Der erste Ansatz optimierte
 * auf *gleichmäßige Verteilung* über einen großen Kasten. Das Ergebnis sah aus
 * wie Konfetti: sechs Scherben, die nichts miteinander zu tun haben. Gesucht
 * ist das Gegenteil — der **kleinstmögliche** gemeinsame Umriss bei festem
 * Mindestabstand. Gerechnet wurde deshalb auf den echten Masken und nicht auf
 * ihren Rechtecken: Nur so können die schrägen Kanten ineinandergreifen.
 * 1400 Durchläufe, bewertet nach Fläche des Umrisses und dessen Verhältnis.
 *
 * **Gleich ist die deckende Fläche, nicht die Breite.** Die sechs Formen füllen
 * ihr Rechteck sehr verschieden aus — 0,48 bei der flachen, 0,70 bei der
 * gedrungenen. Gleiche Breite hieße deshalb sehr verschiedenes Gewicht. Die
 * Breite jeder Kachel ist `√( Verhältnis ÷ Füllgrad )`; damit trägt jede
 * Ausstattungslinie gleich viel, und keine drängt sich vor.
 *
 * **Welche Fliese auf welcher Scherbe liegt, ist ebenfalls gerechnet.** Die
 * sechs Töne reichen von 0,069 (China) bis 0,605 (White) Leuchtdichte. Die
 * Zuordnung ist die von 720 möglichen, bei der nah beieinanderliegende
 * Scherben möglichst verschieden hell sind — sonst verschmölzen Green und
 * China zu einem dunklen Fleck.
 *
 * Der Kasten ist der Umriss selbst, Verhältnis 0,9924. Er steht damit fest und
 * verzieht sich nicht mit dem Fenster — dieselbe Regel wie beim Mosaik der
 * Galerie.
 */
.ld-badvar__platz--pink {
	--ld-bv-x: 0.0382; --ld-bv-y: 0.0000; --ld-bv-b: 0.2901; --ld-bv-form: 0.561;
	--ld-bv-verzug: 0.00s;
	clip-path: polygon( 0.00% 59.30%, 0.00% 6.25%, 0.13% 4.91%, 0.49% 3.85%, 1.37% 2.60%, 2.80% 1.53%, 4.73% 0.74%, 7.44% 0.20%, 10.78% 0.00%, 29.99% 0.04%, 33.28% 0.40%, 36.34% 1.18%, 38.95% 2.36%, 41.28% 4.07%, 96.03% 60.02%, 97.54% 62.29%, 97.96% 64.42%, 97.53% 66.29%, 96.23% 68.31%, 73.31% 94.10%, 71.38% 95.64%, 69.60% 96.54%, 67.41% 97.07%, 65.50% 97.13%, 62.33% 96.54%, 58.85% 95.11%, 5.35% 66.87%, 2.96% 65.18%, 1.41% 63.51%, 0.34% 61.45% );
}

.ld-badvar__platz--china {
	--ld-bv-x: 0.2366; --ld-bv-y: 0.0152; --ld-bv-b: 0.5191; --ld-bv-form: 1.372;
	--ld-bv-verzug: 0.07s;
	clip-path: polygon( 15.47% 0.23%, 83.42% 1.34%, 86.68% 1.88%, 89.32% 2.91%, 91.19% 4.44%, 92.31% 6.55%, 92.57% 9.13%, 91.97% 12.40%, 90.54% 16.03%, 88.25% 20.25%, 46.97% 86.11%, 45.22% 88.49%, 43.70% 90.11%, 42.27% 91.22%, 40.72% 91.93%, 39.63% 92.10%, 38.54% 91.97%, 36.51% 90.87%, 34.62% 88.71%, 32.65% 85.11%, 7.23% 18.90%, 5.86% 14.80%, 5.09% 11.20%, 4.92% 8.20%, 5.33% 5.65%, 6.21% 3.75%, 7.73% 2.15%, 9.76% 1.05%, 12.46% 0.40% );
}

.ld-badvar__platz--turquoise {
	--ld-bv-x: 0.6107; --ld-bv-y: 0.2273; --ld-bv-b: 0.3893; --ld-bv-form: 1.116;
	--ld-bv-verzug: 0.14s;
	clip-path: polygon( 9.05% 0.00%, 92.16% 0.00%, 95.34% 0.53%, 96.65% 1.16%, 97.81% 2.09%, 98.73% 3.31%, 99.50% 5.11%, 99.89% 7.06%, 100.00% 9.05%, 99.99% 88.59%, 99.49% 92.53%, 98.93% 94.00%, 98.04% 95.25%, 96.81% 96.04%, 95.04% 96.30%, 92.93% 95.87%, 90.60% 94.86%, 14.67% 53.37%, 12.82% 52.16%, 11.17% 50.64%, 9.21% 47.79%, 7.90% 44.09%, 1.50% 7.62%, 1.56% 5.62%, 1.89% 4.07%, 2.57% 2.67%, 3.30% 1.80%, 4.51% 0.94%, 5.86% 0.40% );
}

.ld-badvar__platz--white {
	--ld-bv-x: 0.2977; --ld-bv-y: 0.3864; --ld-bv-b: 0.4275; --ld-bv-form: 0.974;
	--ld-bv-verzug: 0.21s;
	clip-path: polygon( 4.55% 34.89%, 22.46% 6.60%, 24.14% 4.85%, 25.91% 3.67%, 27.95% 3.01%, 30.09% 2.92%, 32.49% 3.43%, 34.74% 4.39%, 91.38% 34.59%, 93.61% 36.19%, 95.03% 37.75%, 95.95% 39.64%, 96.16% 41.72%, 95.48% 44.32%, 93.79% 47.16%, 59.09% 91.82%, 57.20% 93.79%, 55.46% 95.02%, 53.76% 95.69%, 51.93% 95.84%, 50.42% 95.55%, 49.02% 94.94%, 47.50% 93.92%, 45.92% 92.50%, 4.93% 47.45%, 3.25% 44.60%, 2.73% 42.88%, 2.55% 41.39%, 3.01% 38.15% );
}

.ld-badvar__platz--greige {
	--ld-bv-x: 0.0000; --ld-bv-y: 0.5682; --ld-bv-b: 0.3435; --ld-bv-form: 0.783;
	--ld-bv-verzug: 0.28s;
	clip-path: polygon( 59.05% 100.00%, 92.85% 99.92%, 94.87% 99.59%, 96.73% 98.90%, 98.25% 97.82%, 99.27% 96.43%, 99.81% 94.87%, 100.00% 92.95%, 100.00% 30.00%, 99.84% 28.07%, 99.19% 26.21%, 98.20% 24.80%, 96.81% 23.61%, 94.76% 22.54%, 92.46% 21.82%, 13.11% 3.10%, 8.65% 2.52%, 7.01% 2.62%, 5.48% 3.07%, 4.38% 4.02%, 3.93% 5.58%, 4.19% 7.50%, 5.14% 9.97%, 48.70% 94.72%, 50.35% 96.95%, 52.76% 98.69%, 55.78% 99.70% );
}

.ld-badvar__platz--green {
	--ld-bv-x: 0.4885; --ld-bv-y: 0.5758; --ld-bv-b: 0.4809; --ld-bv-form: 1.217;
	--ld-bv-verzug: 0.35s;
	clip-path: polygon( 30.84% 100.00%, 13.63% 99.99%, 11.17% 99.79%, 9.06% 99.30%, 7.11% 98.22%, 6.46% 97.44%, 6.06% 96.43%, 6.16% 94.22%, 7.09% 91.87%, 9.99% 87.52%, 72.43% 9.55%, 74.30% 7.61%, 76.16% 6.31%, 77.65% 5.87%, 79.15% 6.18%, 80.38% 7.27%, 81.29% 8.78%, 82.07% 10.81%, 82.79% 13.67%, 97.93% 89.66%, 98.23% 93.74%, 97.93% 95.57%, 97.40% 96.92%, 96.35% 98.28%, 95.02% 99.19%, 93.24% 99.78%, 91.41% 99.99% );
}

/* ------------------------------------------------------------ die Legende */

/*
 * Name und Satz je Linie. **Alle sechs liegen in derselben Rasterzelle** —
 * dadurch ist das Feld immer so hoch wie der längste Eintrag und wackelt beim
 * Wechseln nicht. Dieselbe Bauart wie das Faktenfeld der Ausstattungsliste.
 */
.ld-badvar__legende {
	position: absolute;
	z-index: 3;
	display: grid;

	/*
	 * **Unten links im Eck, im Randmaß der Ausstattungsliste** (4,15 vw). Der
	 * Block hängt an der Unterkante, nicht am Mosaik darüber: Dadurch steht er
	 * immer an derselben Stelle, egal wie hoch das Mosaik gerade ist.
	 */
	inset-inline-start: var( --ld-bv-kasten-x );

	/*
	 * **Darunter steht die Schaltfläche**, im Abstand der Ausstattungsliste
	 * (2,12 vw zwischen Fakten und Knopf). Die Legende rückt deshalb um die
	 * Höhe der Pille und diesen Abstand nach oben; der Wert der Pille kommt
	 * aus base.css, damit beide nicht auseinanderlaufen.
	 */
	inset-block-end: calc( 4.15vw + var( --ld-schalter-hoehe ) + 2.12vw );

	/* Der Strich reicht über gut ein Viertel der Breite, nicht über alles. */
	width: 27vw;
	box-sizing: border-box;
	margin-block: 0;
	padding-block-start: 1.2vw;

	/*
	 * Dieselbe Haarlinie wie über den Fakten der Ausstattungsliste — ein
	 * Pixel, zu 26 Prozent. Auf dunklem Grund in Kalkweiß.
	 */
	border-block-start: 1px solid
		color-mix( in srgb, var( --wp--preset--color--base ) 26%, transparent );

	opacity: 0;
	transition: opacity 0.3s ease;
}

.ld-badvar.is-offen .ld-badvar__legende {
	opacity: 1;
}

/*
 * Beide Fassungen liegen übereinander. Gewechselt wird **nacheinander, nicht
 * überblendend** — erst tritt die alte ab, dann kommt die neue. Gleichzeitig
 * lägen zwei Texte einen Moment übereinander und ergäben eine Verschmierung;
 * bei Bildern ist ein Überblenden richtig, bei Text nicht.
 */
.ld-badvar__eintrag {
	grid-area: 1 / 1;
	margin-block: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.ld-badvar__eintrag.is-vorn {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease 0.3s, visibility 0s;
}

/*
 * **Name und Satz haben dieselbe Größe**, und das ist nicht nachlässig,
 * sondern die Bauart der Ausstattungsliste: Dort unterscheidet der Titel sich
 * vom Fließtext allein durch Versalien und 0,02 em Sperrung, nicht durch den
 * Grad. Die Werte sind von dort übernommen, Zeichen für Zeichen.
 */
.ld-badvar__name,
.ld-badvar__satz {
	margin: 0;
	font-size: clamp( 0.7rem, 0.78vw, 0.95rem );
	line-height: 1.4;
}

/*
 * **Der Name steht fett.** Vom Kunden so gewünscht — er ist die Überschrift
 * des Textes darunter und soll auch so gelesen werden.
 *
 * **700 ist dafür eigens angemeldet worden.** `WorkSans-Bold.ttf` lag längst
 * im Theme, war in `theme.json` aber nicht eingetragen; ohne den Eintrag
 * hätte der Browser den Schnitt selbst errechnet, und eine so verbreiterte
 * Schrift sieht man bei Versalien mit Sperrung sofort. Dieselbe Prüfung wie
 * beim kursiven Zweitzug in „Die zwei Wohnwelten".
 */
.ld-badvar__name {
	margin-block-end: 0.83vw;

	/*
	 * Eine Stufe über dem Satz darunter (0,78 vw) — genug, dass man die
	 * Rangfolge sieht, wenig genug, dass es eine Beschriftung bleibt und keine
	 * zweite Überschrift neben dem Riesenwort.
	 */
	font-size: clamp( 0.8rem, 0.92vw, 1.1rem );
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

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

/*
 * **Dieselbe Pille wie überall**, `.ld-schalter` mit dem Zeichen der Wohnungen
 * — Linie in Salbei, Schrift in Kalkweiß, wie in „Die Idee". Sie steht im Eck
 * unten links, wo vorher die Legende stand, und kommt mit ihr: Solange die
 * Kachel noch wächst, gibt es keine Auswahl, also auch keinen Weg weiter.
 */
.ld-badvar__schalter {
	position: absolute;
	z-index: 3;
	inset-inline-start: var( --ld-bv-kasten-x );
	inset-block-end: 4.15vw;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.ld-badvar.is-offen .ld-badvar__schalter {
	opacity: 1;
	pointer-events: auto;
}

/* ------------------------------------------------------------ ohne Skript */

/*
 * Ohne JavaScript steht die große Kachel gleich am Ziel und alle fünf Plätze
 * sind sichtbar. Der Abschnitt zeigt dann alles, was er zu sagen hat — nur
 * ohne Fahrt und ohne Wechsel. Das ist der richtige Rückfall für eine
 * Auswahl, so wie die vollständige Liste bei der Wohnungsliste.
 */
.ld-badvar:not( .is-bereit ) {
	--ld-bv-p: 1;
}

.ld-badvar:not( .is-bereit ) .ld-badvar__platz {
	opacity: 1;
	translate: 0 0;
}

.ld-badvar:not( .is-bereit ) .ld-badvar__gross,
.ld-badvar:not( .is-bereit ) .ld-badvar__bad:first-of-type {
	clip-path: inset( 0% 0% 0% 0% );
}

.ld-badvar:not( .is-bereit ) .ld-badvar__legende,
.ld-badvar:not( .is-bereit ) .ld-badvar__schalter {
	opacity: 1;
	pointer-events: auto;
}

.ld-badvar:not( .is-bereit ) .ld-badvar__eintrag:first-of-type {
	opacity: 1;
	visibility: visible;
}

@media ( prefers-reduced-motion: reduce ) {
	.ld-badvar {
		--ld-bv-p: 1;
	}

	.ld-badvar__platz,
	.ld-badvar__platz img,
	.ld-badvar__bad,
	.ld-badvar__eintrag {
		transition-duration: 0.01ms;
	}
}

/* ------------------------------------------------------------ schmale Geräte
 *
 * **Je Datei genau ein Block für schmale Geräte, und der steht ganz am
 * Schluss.** Wer einen zweiten anlegt, hat den ersten übersehen.
 *
 * Große Kachel rechts und fünf kleine links gehen auf 375 Bildpunkten nicht.
 * Hier steht die gewählte Variante oben über die volle Breite, darunter die
 * fünf übrigen als Reihe, darunter der Name. **Die Scrollfahrt entfällt** —
 * die Kachel steht gleich groß da. Das ist derselbe Weg, den die Galerie auf
 * dem Telefon geht: eine andere Aufteilung statt derselben verkleinert.
 */
@media ( max-width: 781px ) {
	.ld-badvar__schacht {
		height: auto;
	}

	.ld-badvar__buehne {
		position: relative;
		height: auto;
		padding: 11svh 1.5rem 6svh;
		box-sizing: border-box;
	}

	/*
	 * **Das Wort muss auf eine Zeile passen, und 13,33 vw tun das nicht.**
	 * „BADVARIATIONEN" hat vierzehn Buchstaben; bei 375 Bildpunkten brach es
	 * mitten im Wort um — jeder Buchstabe ist ein eigenes Element und damit
	 * eine Stelle, an der die Zeile brechen darf. Am Schreibtisch fällt das
	 * nicht auf, weil dort `white-space: nowrap` steht.
	 *
	 * **Auf 375 und auf 320 nachgemessen**, wie es die Regel verlangt. Bei 8,2 vw
	 * füllte das Wort auf 320 exakt 272 von 272 verfügbaren Punkten — kein
	 * Überlauf, aber auch kein Spielraum. 7,8 vw lassen rund fünf Prozent Luft.
	 *
	 * Der Abstand nach oben hält die Kopfzeilen-Pille frei: Sie ist dort 48
	 * hoch bei 23 Rand, endet also bei 71 Bildpunkten.
	 */
	/*
	 * **Seit dem 29.10.2026 zweizeilig:** „Mögliche Badvariationen“ (Freigabe
	 * durch den Anwalt) ist auf einer Zeile breiter als das Telefon. Der Grad
	 * bleibt, die Zeile bricht zwischen den Wörtern um; Zeilenhöhe 1,12 wie
	 * bei allen mehrzeiligen Versalien. Vom Kunden so entschieden.
	 */
	.ld-badvar__wort {
		position: relative;
		inset: auto;
		font-size: 7.8vw;
		line-height: 1.12;
		margin-block: 4svh 4svh;
		white-space: normal;
	}

	/*
	 * **Die hochkante Form taugt auf dem Telefon nicht.** Über die volle
	 * Breite gerechnet wäre die Kachel 432 Bildpunkte hoch und stünde als
	 * schmaler Streifen da. Fast quadratisch zeigt sie vom Bad so viel wie
	 * möglich — die Aufnahmen sind selbst quadratisch, es fällt also nichts
	 * weg.
	 */
	.ld-badvar__gross {
		position: relative;
		inset: auto;
		width: 100%;
		aspect-ratio: 0.98;
		margin-block-end: 3svh;
	}

	/*
	 * **Sechs nebeneinander gehen auf 375 Bildpunkten nicht.** Abzüglich der
	 * Ränder bleiben 327; sechs Kacheln mit Lücken wären je 48 breit, und eine
	 * Fliese ist darin nicht mehr zu erkennen. Zwei Reihen zu dritt geben rund
	 * 100 — dieselbe Größe wie am Schreibtisch.
	 *
	 * **Das Mosaik wird dabei zum Raster, und das ist Absicht.** Die verzahnte
	 * Streuung lebt von der Fläche; auf einer Spalte von 327 Punkten ergäbe sie
	 * nur Gedränge. Die Formen bleiben, ihre Anordnung nicht — dieselbe
	 * Entscheidung wie beim Mosaik der Galerie, das auf dem Telefon ebenfalls
	 * anders liegt.
	 */
	.ld-badvar__mosaik {
		position: relative;
		inset: auto;
		display: grid;
		grid-template-columns: repeat( 3, 1fr );
		align-items: center;
		justify-items: center;
		gap: 3vw 2.5vw;
		width: 100%;
		height: auto;
	}

	/*
	 * **Gleiche Breite wäre hier falsch.** Auf volle Zellenbreite gestellt
	 * wurde die hochkante Form 183 Bildpunkte hoch und die flache 75 — die
	 * Reihen liefen auseinander, und die schmale Kachel wog dreimal so schwer
	 * wie die flache. Es gilt dieselbe Rechnung wie am Schreibtisch: Die
	 * Breite jeder Kachel ist ihr eigener Anteil, damit alle sechs **gleich
	 * viel Fläche** decken. Nachgemessen sind die Höhen danach 71 bis 105
	 * statt 75 bis 183.
	 *
	 * 50 vw als Bezug hält die breiteste Kachel auf 320 Bildpunkten innerhalb
	 * ihrer Zelle — dort ist die Zelle 85 breit, die Kachel 83.
	 */
	.ld-badvar__platz {
		position: relative;
		inset: auto;
		width: calc( var( --ld-bv-b ) * 50vw );
		max-width: 100%;
		min-width: 0;
	}

	/*
	 * Die gewählte Kachel wächst auch hier, aber weniger: Im Raster schiebt
	 * eine zu große Kachel ihre Nachbarn optisch zur Seite.
	 */
	.ld-badvar.is-offen .ld-badvar__platz.is-vorn {
		scale: 1.08;
	}

	.ld-badvar__legende {
		position: relative;
		inset: auto;
		width: 100%;
		margin-block-start: 2.5svh;
	}

	/* Im Fluss unter der Legende, im selben Abstand wie am Schreibtisch. */
	.ld-badvar__schalter {
		position: relative;
		inset: auto;
		margin-block-start: 2.5svh;
	}

	.ld-badvar__name,
	.ld-badvar__satz {
		font-size: 0.85rem;
	}
}