/* =====================================================================
   Abschnitts-Stile
   ---------------------------------------------------------------------
   Ein Block je Abschnittstyp, in derselben Reihenfolge wie die Registry
   in inc/abschnitte.php. Alle Farben kommen aus der Semantik-Ebene der
   Tokens, alle Abstände aus der 8er-Skala — hier stehen keine rohen
   Werte außer Rasterangaben.

   Kein Abschnitt bringt eigene vertikale Außenabstände mit: Der Rhythmus
   liegt in basis.css bei `.jev-abschnitt`, sonst summieren sich zwei
   Systeme auf.
   ===================================================================== */

/* ---------- Gemeinsames ---------------------------------------------- */

/* Flächenwechsel. Reihenfolge der Seite bestimmt, welche Fläche greift —
   die Wahl trifft das Template, nicht die Redaktion. */
.jev-abschnitt--weiss { background: var(--jev-flaeche-weiss); }
.jev-abschnitt--warm  { background: var(--jev-flaeche-warm); }
.jev-abschnitt--hell  { background: var(--jev-flaeche-hell); }
.jev-abschnitt--kuehl { background: var(--jev-flaeche-kuehl); }
.jev-abschnitt--tief  { background: var(--jev-flaeche-tief); color: var(--jev-text-invers); }
.jev-abschnitt--nacht { background: var(--jev-flaeche-nacht); color: var(--jev-text-invers); }

.jev-abschnitt--tief :where(h1, h2, h3, h4),
.jev-abschnitt--nacht :where(h1, h2, h3, h4) { color: var(--jev-text-invers); }
.jev-abschnitt--tief .jev-fliess,
.jev-abschnitt--nacht .jev-fliess { color: var(--jev-text-invers-leise); }

/* Kleine Zeile über der Überschrift. Trägt die Gliederung, nicht die
   Aussage — deshalb leise und gesperrt statt groß. */
.jev-eyebrow {
	font-family: var(--jev-schrift-titel);
	font-size: var(--jev-t-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--jev-signal);
	margin: 0 0 var(--jev-a-2);
}
.jev-abschnitt--tief .jev-eyebrow,
.jev-abschnitt--nacht .jev-eyebrow { color: var(--jev-duene); }

/* Fließtext bleibt lesbar schmal, auch wenn der Abschnitt breit ist. */
.jev-fliess { max-width: var(--jev-breite-text); color: var(--jev-text-leise); }
/* Mehrere Absätze: Bis zu den Stadttexten kam hier immer nur einer an, deshalb
   gab es keinen Abstand. Der Grundreset setzt Absätze auf margin 0 — ohne diese
   Regel läuft ein Text aus dem Backend als eine Wand zusammen. */
.jev-fliess > p + p { margin-top: var(--jev-a-3); }

/* Kopfgruppe eines Abschnitts: Eyebrow, Überschrift, Einleitung. */
.jev-kopfgruppe { margin-bottom: var(--jev-a-5); }
.jev-kopfgruppe--mitte { text-align: center; margin-inline: auto; }
.jev-kopfgruppe--mitte .jev-fliess { margin-inline: auto; }

/* Knopfzeile unter einem Abschnitt. */
.jev-knopfzeile {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jev-a-3);
	margin-top: var(--jev-a-4);
}

/* Fußnote unter einem Abschnitt — Quellenangabe, Vorbehalt, Hinweis. */
.jev-fussnote {
	font-size: var(--jev-t-s);
	color: var(--jev-text-leise);
	margin-top: var(--jev-a-4);
}

/*
 * Hervorgehobener Kasten innerhalb eines Abschnitts.
 *
 * Auf dunklen Flächen braucht er eine eigene Fassung: Die helle Grundfarbe
 * zusammen mit dem dort geerbten hellen Text ergab 1,1:1 und war unlesbar.
 */
.jev-hinweis {
	border-left: 3px solid var(--jev-signal);
	background: var(--jev-flaeche-warm);
	padding: var(--jev-a-3) var(--jev-a-4);
	border-radius: var(--jev-radius);
	font-size: var(--jev-t-s);
	margin-top: var(--jev-a-4);
}

.jev-abschnitt--tief .jev-hinweis,
.jev-abschnitt--nacht .jev-hinweis {
	background: color-mix(in srgb, var(--jev-grund) 10%, transparent);
	border-left-color: var(--jev-duene);
	color: var(--jev-text-invers);
}

/* ---------- 1 · Bühne ------------------------------------------------- */

/*
 * Die Bühne setzt den globalen Abschnitts-Abstand aus: Die Haarlinien-Zeilen
 * (Brotkrume oben, Beleg unten) und die beiden Flächen sitzen an den Kanten,
 * der Abstand gehört deshalb in die Textfläche.
 */
.jev-abschnitt.jev-buehne { padding-block: 0; }

/*
 * Zwei Flächen stoßen mittig aneinander: links Creme mit dem Text, rechts das
 * Bild bis an den Fensterrand. Kein Weißraum dazwischen, kein Rahmen — die
 * Kante selbst ist die Gestaltung.
 */
/*
 * minmax(0, …) statt 1fr: Sonst wächst die Spalte auf die Mindestbreite ihres
 * Inhalts. Gemessen bei 390px Fenster: „LYMPHDRAINAGE" misst 351px, mit dem
 * Innenabstand 399 — die Spalte sprengte den Abschnitt um neun Pixel.
 */
.jev-buehne__raster { display: grid; grid-template-columns: minmax(0, 1fr); }
/*
 * Erst ab 66rem nebeneinander, nicht schon ab 56.
 *
 * Die Textspalte misst gut die Hälfte des Fensters. „LYMPHDRAINAGE" ist bei
 * voller Titelgröße 485px breit, die Verkleinerung über clamp() greift aber
 * erst unter 820px Fensterbreite — dazwischen lag das Wort breiter als seine
 * Spalte. Mit je 50px Abstand an der Fläche braucht die Hälfte 585px, das
 * Fenster also 1144px; 74rem lassen 21px Luft.
 */
@media (min-width: 74rem) {
	.jev-buehne__raster {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		/*
		 * Feste Untergrenze statt eines Fensteranteils: Mit 80svh wuchs die
		 * Bühne auf hohen Bildschirmen mit und ließ Luft, die der Inhalt nicht
		 * braucht. 640px sind der Boden, darüber bestimmt der Text die Höhe.
		 */
		min-height: 640px;
	}
}

/*
 * Der Abstand hängt an der Fläche, nicht am Textblock. Vorher trug ihn der
 * Block über seine Zentrierung — sobald das Fenster schmaler wurde, füllte er
 * seine Hälfte randlos aus und die Überschrift stieß bei 1088px an die
 * Fensterkante. Mit dem Abstand an der Fläche beginnt der Text auf jeder
 * Breite bei derselben Linie wie die Navigation.
 */
.jev-buehne__text {
	display: flex;
	align-items: center;
	padding-block: var(--jev-a-7);
	padding-inline: var(--jev-band-rand);
}
@media (max-width: 62rem) {
	.jev-buehne__text { padding-inline: var(--jev-a-4); }
}
/*
 * Der Textblock sitzt mittig in seiner Hälfte, nicht bündig zum Seitenraster.
 * Damit steht er nicht auf einer Linie mit den Abschnitten darunter — das ist
 * bewusst so gewählt: Die Bühne ist eine eigene Fläche mit eigener Mitte.
 */
.jev-buehne__inner {
	width: 100%;
	/*
	 * 40rem, nicht enger: Bei 34rem blieben 496px, und „LYMPHDRAINAGE" misst
	 * 485px zuzüglich Sperrung — das Wort brach mitten durch und die beiden
	 * Knöpfe stapelten sich.
	 */
	max-width: 40rem;
}

/*
 * Brotkrume und Belegzeile stehen auf derselben Linie wie die Navigation und
 * die Überschrift, nicht auf dem Seitenraster der Abschnitte darunter.
 *
 * Vorher lagen im Kopfbereich vier verschiedene linke Kanten übereinander:
 * Navigation 50, Brotkrume 120, Überschrift 73, Zahlen 120. Die Bühne läuft
 * über die volle Breite und bekommt deshalb ihre eigene Kante; das Raster der
 * Abschnitte beginnt erst darunter.
 */
.jev-buehne__leiste > .jev-huelle,
.jev-buehne__beleg > .jev-huelle {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: var(--jev-band-rand);
}
@media (max-width: 62rem) {
	.jev-buehne__leiste > .jev-huelle,
	.jev-buehne__beleg > .jev-huelle { padding-inline: var(--jev-a-4); }
}

.jev-buehne__kopf { margin-bottom: var(--jev-a-4); }
.jev-buehne__titel {
	/*
	 * „Lymphdrainage" misst bei 48,8px 485px, ein 390px-Gerät hat 358px
	 * Textbreite. Die Untergrenze ist so gewählt, dass dieses längste Wort
	 * hineinpasst; ab etwa 820px Fensterbreite steht wieder die volle Größe.
	 */
	font-size: clamp(2.05rem, 1.2rem + 3.6vw, var(--jev-t-4xl));
	margin: 0;
}
.jev-buehne__text .jev-fliess { margin: 0; max-width: 44ch; }
.jev-buehne__betont {
	font-size: var(--jev-t-l);
	font-weight: 500;
	color: var(--jev-text-titel);
	margin: var(--jev-a-4) 0 0;
}
.jev-buehne .jev-knopfzeile { margin-top: var(--jev-a-5); }

/*
 * Kein Strich vor dem Eyebrow.
 *
 * Er stand vor jedem Eyebrow der Seite — Bühne, Freie Gebiete,
 * Gegenüberstellung, Bewerbung. Vier Striche auf einer Seite sind kein Akzent
 * mehr, sondern ein Rahmenteil, das überall mitläuft. Die Sperrung und die
 * Signalfarbe reichen, um den Eyebrow vom Fließtext zu unterscheiden.
 */
.jev-abschnitt.jev-buehne .jev-eyebrow { margin-bottom: var(--jev-a-3); }

/*
 * Bild bis an die Kante, ohne Radius. Die Höhe hängt am Behälter und nicht am
 * Bild: Bei einem Video steht dort ein <details>, kein <img>.
 */
.jev-buehne__medium {
	position: relative;
	overflow: hidden;
	min-height: 26rem;
	background: var(--jev-platzhalter);
}
/*
 * Das Bild liegt absolut, nicht im Fluss: Mit height:100% in einer Rasterzeile
 * ohne feste Höhe fällt es auf seine natürliche Höhe zurück und treibt die
 * Zeile auseinander — gemessen 878px statt 668. So bestimmt die Textfläche die
 * Höhe, und das Bild füllt sie.
 */
.jev-buehne__medium > *,
.jev-buehne__medium img,
.jev-buehne__medium video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.jev-buehne__medium img { object-fit: cover; display: block; border-radius: 0; }
/*
 * Ein Video in der Bühne füllt dieselbe Fläche wie ein Bild.
 *
 * Es kommt in einer eigenen Hülle (`.jev-video--datei`), und die trägt sonst
 * Rundung und einen dunklen Grund — richtig für ein Video, das in einer Spalte
 * steht, falsch für eines, das bis an die Fensterkante läuft. Hier wird beides
 * zurückgenommen; die Kante der Bühne ist die Form.
 */
.jev-buehne__medium .jev-video--datei {
	border-radius: 0;
	background: none;
}
.jev-buehne__medium video { object-fit: cover; }

/* Haarlinien-Zeilen oben und unten. */
.jev-buehne__leiste { border-bottom: 1px solid var(--jev-rand); }
.jev-buehne__leiste > .jev-huelle { padding-block: var(--jev-a-3); }
.jev-buehne__leiste .jev-brotkrumen ol { font-size: var(--jev-t-xs); }

/*
 * Die Belegzeile auf Nacht: Sie klemmte als schmales Creme-Band zwischen Foto
 * und nächstem Abschnitt und wirkte wie ein Rest. Dunkel wird sie zum Schluss-
 * strich der Bühne — und die Zahlen bekommen das Gewicht, das ihnen als
 * einzigem Beleg der Seite zusteht.
 */
.jev-buehne__beleg {
	background: var(--jev-flaeche-nacht);
	color: var(--jev-text-invers);
}
.jev-buehne__beleg .jev-buehne__zahl b { color: var(--jev-text-invers); }
.jev-buehne__beleg .jev-buehne__zahl span { color: var(--jev-text-invers-leise); }
.jev-buehne__beleg .jev-buehne__zahl + .jev-buehne__zahl {
	border-left-color: var(--jev-rand-invers);
}
.jev-buehne__beleg > .jev-huelle {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--jev-a-4);
	/* Großzügiger als die üblichen 24px: Das dunkle Band ist der Schlussstrich
	   der Bühne und braucht Luft, sonst wirkt es wie eine gequetschte Leiste. */
	padding-block: var(--jev-a-5);
}
@media (min-width: 48rem) {
	.jev-buehne__beleg > .jev-huelle { grid-template-columns: repeat(4, 1fr); }
}
/*
 * Enger auf dem Telefon.
 *
 * Die 40 Pixel oben und unten geben dem Band als Schlussstrich der Bühne die
 * Luft, die es auf dem Bildschirm braucht. Auf 375 Pixeln stehen die vier
 * Zahlen aber nicht mehr in einer Zeile, sondern in zwei — aus einer Leiste
 * wird ein Block von 298 Pixeln, und derselbe Abstand liest sich dann nicht
 * mehr als Luft, sondern als Leere. 24 statt 40 oben und unten, 16 statt 24
 * zwischen den Zeilen; seitlich bleibt es bei 24, sonst kleben die Zahlen an
 * der Kante.
 */
@media (max-width: 47.999rem) {
	.jev-buehne__beleg > .jev-huelle {
		padding-block: var(--jev-a-4);
		gap: var(--jev-a-3) var(--jev-a-4);
	}
}
.jev-buehne__zahl { display: grid; gap: var(--jev-a-1); margin: 0; max-width: none; }
.jev-buehne__zahl b {
	font-family: var(--jev-schrift-titel);
	font-weight: 400;
	font-size: var(--jev-t-2xl);
	line-height: 1;
	color: var(--jev-text-titel);
}
.jev-buehne__zahl span { font-size: var(--jev-t-s); color: var(--jev-text-leise); }

/*
 * Zähler (14.09.2026): Die Anzahl der Partnerschaften läuft beim Laden schnell
 * von 0 hoch — ohne JavaScript, das Perfmatters bis zur ersten Berührung
 * zurückhielte. Die echte Zahl steht im Text (für Vorleseprogramme,
 * Suchmaschinen und ohne CSS) und hält die Breite; darüber läuft der Zähler
 * als `::before`. Die Glyphen des Textes blendet `text-fill-color` aus statt
 * `color`, damit der Zähler die Farbe seines Ortes erbt — hell auf dem dunklen
 * Band, dunkel auf dem hellen Grund.
 *
 * `/ ""` am Inhalt: Vorleseprogramme lesen den laufenden Zähler nicht mit,
 * sonst hiesse es „0 8". Wer Bewegung abbestellt hat, sieht gleich die Zahl.
 */
@property --jev-n { syntax: "<integer>"; inherits: false; initial-value: 0; }
@keyframes jev-hochzaehlen { from { --jev-n: 0; } to { --jev-n: var(--jev-ziel); } }
.jev-zaehler { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
	.jev-zaehler {
		position: relative;
		-webkit-text-fill-color: transparent;
		counter-reset: jev-n var(--jev-n);
		animation: jev-hochzaehlen 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
	}
	.jev-zaehler::before {
		content: counter(jev-n);
		content: counter(jev-n) / "";
		position: absolute;
		left: 0;
		-webkit-text-fill-color: currentColor;
	}
}
/* Trennstrich nur zwischen den Zahlen einer Zeile, nicht am Zeilenanfang. */
.jev-buehne__zahl + .jev-buehne__zahl {
	border-left: 1px solid var(--jev-rand);
	padding-left: var(--jev-a-4);
}
@media (max-width: 47.999rem) {
	.jev-buehne__beleg > .jev-huelle > .jev-buehne__zahl:nth-child(odd) {
		border-left: 0;
		padding-left: 0;
	}
}


/* ---------- 1a · Kopf und Brotkrume liegen auf der Bühne ---------------

   Nur auf Seiten, deren erster Abschnitt eine Bühne ist: Der Kopf wird
   durchsichtig und fest, die Brotkrume legt sich darüber, und das Bild läuft
   bis an die Oberkante des Fensters.

   Alles steckt in @supports (animation-timeline: scroll()): Der Kopf muss beim
   Scrollen wieder einen Grund bekommen, sonst steht die Navigation später über
   hellem Text. Ohne Unterstützung dafür bleibt es beim bisherigen Aufbau —
   Kopf mit eigener Fläche, Bühne darunter. Beides ist in sich richtig.
   -------------------------------------------------------------------- */

/*
 * Der Kopf auf Bühnenseiten: Nacht über der Bühne, hell darunter.
 *
 * Vorher lag dort ein mattes Glasband aus 62 % Papier. Über einem hellen Foto
 * war das richtig; seit die Bühne selbst Nacht ist, wurde daraus ein fahler
 * Balken, der sie oben abschneidet — die hellste Fläche der Seite lag über der
 * dunkelsten. Auf Nacht verschwindet die Kante: Kopf und Bühne sind eine
 * Fläche, und die Seite beginnt als ein Block. Sobald die Bühne oben
 * hinausgelaufen ist, steht darunter Helles — dann kehrt der Kopf in seine
 * gewohnte Fassung zurück.
 *
 * Nur auf Seiten, deren erster Abschnitt eine Bühne ist. Das ist bewusst
 * inkonsequent: Der Kopf sieht dort anders aus als im Shop. Dafür bleibt der
 * Rest unangetastet, und die Entscheidung lässt sich zurücknehmen, indem
 * dieser Block gelöscht wird.
 *
 * WARUM ÜBER VARIABLEN. Der Wechsel läuft als scrollgesteuerte Animation, und
 * animieren lässt sich nur, was an einem Element steht. Der Kopf hat aber
 * sieben Farben zu wechseln, die an sechs verschiedenen Elementen hängen —
 * Wortmarke, Menü, Symbole, Knopf, leerer Korb, Zahl. Über registrierte
 * Eigenschaften steht die Farbe an einer Stelle, vererbt sich nach unten und
 * lässt sich in einem einzigen Keyframe-Block umlegen.
 */
@property --jev-kopf-grund        { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --jev-kopf-vorder       { syntax: "<color>"; inherits: true; initial-value: #154c59; }
@property --jev-kopf-linie        { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --jev-kopf-leise        { syntax: "<color>"; inherits: true; initial-value: #a1928a; }
@property --jev-kopf-leise-grund  { syntax: "<color>"; inherits: true; initial-value: transparent; }

body:has(.jev-main > .jev-buehne:first-child) .jev-kopf {
	/* Der Zustand über der Bühne. Der helle steht unten in den Keyframes. */
	--jev-kopf-grund:        var(--jev-nacht);
	--jev-kopf-vorder:       var(--jev-weiss);
	--jev-kopf-linie:        color-mix(in srgb, var(--jev-weiss) 12%, transparent);
	--jev-kopf-leise:        var(--jev-text-invers-leise);
	--jev-kopf-leise-grund:  color-mix(in srgb, var(--jev-weiss) 16%, transparent);

	background: var(--jev-kopf-grund);
	/*
	 * Eine leichte Linie, kein Rand: `--jev-rand-invers` ist Düne bei 38 % und
	 * damit ein sichtbarer Strich — zwischen Kopf und Bühne, die dieselbe
	 * Farbe haben, sähe das nach Naht aus.
	 */
	border-bottom: 1px solid var(--jev-kopf-linie);
	color: var(--jev-kopf-vorder);
}

/*
 * Wortmarke und Menü in voller Helligkeit, nicht in Düne. Düne ist der Ton
 * für Fliesstext auf Dunkel — im Fuss richtig, wo viel Kleines steht. Im Kopf
 * stehen sechs Wörter und eine Marke.
 *
 * Die Symbole tragen ihre Farbe nicht vom Behälter, sondern als eigene Regel
 * (`.jev-icon { color: var(--jev-text-titel) }`) — ohne die letzten Zeilen
 * stünde das Kontosymbol in Lagune auf Nacht, 1,22:1, also unsichtbar.
 *
 * NUR DIE SYMBOLE IM BALKEN, nicht alle im Kopf.
 *
 * Vorher stand hier `.jev-kopf .jev-icon`, und der Kopf enthält auch die
 * ausgefahrene Tafel. Deren Grund ist Papier — das Kontosymbol stand dort
 * weiss auf hell, rund 1,1:1. Gemeldet als „schwer zu erkennen", und das war
 * freundlich ausgedrückt.
 *
 * Der erste Versuch war ein Selektor in basis.css, der diesen hier überbieten
 * sollte. Zwei Gründe, warum das nichts wurde: Er kam auf dasselbe Gewicht
 * (0,5,1) und hätte nur über die Reihenfolge gewonnen — und Perfmatters'
 * Minifier hat ihn zerlegt. Ausgeliefert wurde `jev-kopf__nav .jev-icon`, der
 * `body:has(…)`-Teil fehlte ersatzlos. Eine Regel, die im Quelltext richtig
 * ist und auf dem Server anders ankommt, ist keine Regel.
 *
 * Deshalb werden die drei Stellen benannt, an denen weisse Symbole stehen:
 * der Burger links, die Symbole rechts. Die Tafel ist damit draussen, ohne
 * dass irgendwo ein Gewicht gegen ein anderes antritt.
 */
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__logo,
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__symbol,
body:has(.jev-main > .jev-buehne:first-child) .jev-burger .jev-icon,
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__rechts .jev-icon {
	color: var(--jev-kopf-vorder);
}
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__logo:hover,
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__symbol:hover {
	color: var(--jev-signal);
}

/*
 * Die Menüpunkte nur in der Breitansicht.
 *
 * Dort stehen sie im Band und brauchen dessen Farbe. Schmal stehen sie in der
 * ausgefahrenen Tafel, und die bleibt hell wie auf jeder anderen Seite — eine
 * Tafel, die je nach Seite ihre Farbe wechselt, ist keine Navigation mehr,
 * sondern eine Überraschung. Ohne diese Grenze stünden die Punkte weiss auf
 * Papier und wären unsichtbar.
 */
@media (min-width: 62.01rem) {
	body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__nav a {
		color: var(--jev-kopf-vorder);
	}
	body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__nav a:hover,
	body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__nav a:focus-visible {
		color: var(--jev-signal);
	}
	body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__nav .current-menu-item > a {
		color: var(--jev-kopf-vorder);
	}
}

/*
 * Der leere Korb bleibt leise, aber auf der Tonleiter der jeweiligen Fläche:
 * Mondschein auf Nacht, Asche auf Papier. Asche ist der gedämpfte Ton für
 * helle Flächen; neben einem weissen Symbol wirkt sie schmutzig.
 */
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__korb--leer .jev-icon {
	color: var(--jev-kopf-leise);
}
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__korb--leer.jev-kopf__korb .jev-kopf__zahl {
	background: var(--jev-kopf-leise-grund);
	color: var(--jev-kopf-leise);
}

/*
 * Der Aufruf im Kopf trägt auf diesen Seiten durchgehend Blüte und wandert
 * NICHT mit.
 *
 * Er sollte erst mitwechseln — Blüte über der Bühne, Lagune darunter. Dabei
 * lief seine Schrift von Nacht nach Papier, während der Grund von Blüte nach
 * Lagune lief: In der Mitte der Strecke standen beide auf einem mittleren
 * Braunton, rund 1,3:1, und die Beschriftung war für einen Moment nicht mehr
 * da. Zwei Farben, die sich kreuzen, ergeben zwangsläufig einen Punkt, an dem
 * sie gleich sind.
 *
 * Blüte auf Nacht misst 4,79:1, Blüte auf Papier ist die Farbe, die auf der
 * ganzen Seite die eine Handlung markiert — der Knopf steht also in beiden
 * Zuständen richtig und braucht den Wechsel gar nicht.
 */
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__aufruf {
	background: var(--jev-signal);
	border-color: var(--jev-signal);
	color: var(--jev-nacht);
}
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__aufruf:hover,
body:has(.jev-main > .jev-buehne:first-child) .jev-kopf__aufruf:focus-visible {
	background: var(--jev-signal-tief);
	border-color: var(--jev-signal-tief);
	color: var(--jev-nacht);
}

/*
 * Die ausgefahrene Menütafel bleibt hell — auch auf Bühnenseiten.
 *
 * Sie trug zwischenzeitlich die Fläche des Kopfes, weil sie in der
 * Schmalansicht aus ihm herauswächst. Das war falsch gedacht: Der Kopf ist
 * dort ein Band von siebzig Pixeln, die Tafel eine Seitenfläche über die volle
 * Höhe. Wenn dieselbe Navigation auf der Startseite dunkel und im Shop hell
 * ist, muss man sie zweimal lernen.
 *
 * Deshalb steht hier nichts mehr. Die Tafel nimmt ihre Farben aus basis.css,
 * wie auf jeder anderen Seite.
 */

/*
 * Der Wechsel, während die Bühne oben hinausläuft.
 *
 * Die Zeitachse hängt an der Bühne selbst und nicht am Fensterlauf: Die Bühne
 * ist auf der Startseite 752 Pixel hoch und auf der Partnerseite 937 — ein
 * fester Pixelbereich passte auf keiner von beiden. `exit` ist genau die
 * Strecke, auf der ein Element oben aus dem Fenster wandert; bei 75 bis 95
 * Prozent davon ist der Wechsel abgeschlossen, kurz bevor die Bühne ganz weg
 * ist.
 *
 * `timeline-scope` am Körper, weil der Kopf kein Kind der Bühne ist — ohne
 * das findet er ihre Zeitachse nicht.
 *
 * Ohne Unterstützung dafür bleibt der Kopf durchgehend auf Nacht. Das ist in
 * sich richtig: ein dunkles Band über hellem Inhalt, wie es viele Seiten
 * haben — nur eben ohne den Übergang.
 */
@supports (animation-timeline: scroll()) and (timeline-scope: --jev-buehne) {
	body:has(.jev-main > .jev-buehne:first-child) { timeline-scope: --jev-buehne; }
	body:has(.jev-main > .jev-buehne:first-child) .jev-buehne { view-timeline: --jev-buehne block; }

	body:has(.jev-main > .jev-buehne:first-child) .jev-kopf {
		animation: jev-kopf-aufhellen linear both;
		/* Ausdrücklich auto: In der Kurzschreibweise stünde die Dauer auf 0s
		   und die Animation liefe nie. */
		animation-duration: auto;
		animation-timeline: --jev-buehne;
		/*
		 * Bis 91 Prozent, nicht bis 95: Der Kopf ist 77 Pixel hoch und liegt
		 * fest über der Seite. Er hört genau dann auf, die Bühne zu verdecken,
		 * wenn 77 Pixel vor ihrem Ende erreicht sind — auf der Startseite bei
		 * 675 von 752 Pixeln, also bei 90 Prozent. Wäre der Wechsel später
		 * fertig, stünde ein halbheller Kopf auf Nacht.
		 */
		animation-range: exit 76% exit 91%;
	}

	@keyframes jev-kopf-aufhellen {
		to {
			--jev-kopf-grund:        var(--jev-grund);
			--jev-kopf-vorder:       var(--jev-text-titel);
			--jev-kopf-linie:        var(--jev-rand);
			--jev-kopf-leise:        var(--jev-platzhalter);
			--jev-kopf-leise-grund:  var(--jev-rand);
		}
	}
}

@supports (animation-timeline: scroll()) {
	body:has(.jev-main > .jev-buehne:first-child) {
		/*
		 * Gemessene Höhen von Kopf und Brotkrumenzeile. Ändert sich der Kopf,
		 * muss dieser Wert mit — er war zuletzt 77 und damit sechs Pixel zu
		 * gross; auf der Startseite stand deshalb ein sechs Pixel hoher
		 * Streifen Nacht zwischen Kopf und Bildwerk.
		 */
		--jev-kopf-hoehe: 71px;
		--jev-krume-hoehe: 53px;
	}

	/*
	 * Der Kopf steht fest und läuft bis an die Fensterkanten. Seine Farbe
	 * kommt aus dem Block darunter und gilt mit oder ohne Scroll-Animation.
	 */
	body:has(.jev-main > .jev-buehne:first-child) .jev-kopf {
		position: fixed;
		inset-inline: 0;
	}

	/*
	 * Solange das Menü offen ist, kein Weichzeichner am Kopf.
	 *
	 * Ein backdrop-filter macht das Element zum Bezugsrahmen für fest
	 * positionierte Kinder — genau wie transform oder filter. Die Menütafel und
	 * die Verdunklung stehen beide im Kopf und maßen deshalb nicht das Fenster,
	 * sondern den Kopf: 343x76 und 595x76 statt der vollen Höhe. Sichtbar blieb
	 * nur der Schließen-Knopf, die Liste rollte in einem 76px hohen Kasten
	 * davon. Betroffen war allein die Bühnenseite, weil nur dort ein
	 * Weichzeichner am Kopf hängt.
	 *
	 * Nicht die Tafel aus dem Kopf herausgelöst: In der Breitansicht gehört sie
	 * dorthin, sie ist dort die Navigation. Der Weichzeichner dagegen wird nicht
	 * gebraucht, wenn ohnehin eine deckende Tafel und eine Verdunklung davor
	 * liegen.
	 *
	 * Der höhere Stapelwert hält die Tafel über der mitlaufenden Pille, die auf
	 * 40 liegt und sonst darüber stünde.
	 *
	 * Beide :has() im Selektor, obwohl das erste nichts prüft, was das zweite
	 * nicht schon einschließt: Die Regel darüber wiegt (0,4,1), ein Selektor mit
	 * nur dem Menüschalter käme auf (0,3,1) und verlöre. Mit beiden sind es
	 * (0,6,1). Ohne das kostete es mich einen Durchgang.
	 */
	body:has(.jev-main > .jev-buehne:first-child):has(.jev-navschalter:checked) .jev-kopf {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		z-index: 45;
	}

	body:has(.jev-main > .jev-buehne:first-child) .jev-buehne { position: relative; }

	/* Die Brotkrume liegt über dem Bild statt darüber zu stehen. */
	body:has(.jev-main > .jev-buehne:first-child) .jev-buehne__leiste {
		position: absolute;
		inset-inline: 0;
		top: var(--jev-kopf-hoehe);
		z-index: 2;
		border-bottom: 0;
	}

	/* Platz für Kopf und Brotkrume im Textteil — das Bild braucht keinen. */
	body:has(.jev-main > .jev-buehne:first-child) .jev-buehne__text {
		padding-top: calc(var(--jev-a-7) + var(--jev-kopf-hoehe) + var(--jev-krume-hoehe));
	}

	/*
	 * Auf dem Telefon weniger Luft zwischen Brotkrume und Eyebrow.
	 *
	 * Der Wert oben ist eine Summe aus drei Teilen: die beiden Höhen räumen
	 * die überlagerte Kopfzeile und die Brotkrume frei, und nur `--jev-a-7`
	 * ist der eigentliche Abstand darunter. Am Bildschirm stimmen die 96
	 * Pixel; auf 375 Pixern Breite standen zwischen „Partner werden" und
	 * „JETZT STARTEN" 97 Pixel Nacht und sonst nichts.
	 *
	 * Geändert wird deshalb nur der dritte Summand — die beiden Höhen sind
	 * keine Gestaltung, sondern gemessene Maße. Wer hier eine glatte Zahl
	 * einsetzte, schöbe den Text unter die Brotkrume.
	 */
	@media (max-width: 47.999rem) {
		body:has(.jev-main > .jev-buehne:first-child) .jev-buehne__text {
			padding-top: calc(var(--jev-a-5) + var(--jev-kopf-hoehe) + var(--jev-krume-hoehe));
		}
	}

}

/* ---------- 2 · Kennzahlen ------------------------------------------- */

.jev-kennzahlen__raster {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--jev-a-4);
	text-align: center;
}
@media (min-width: 48rem) {
	.jev-kennzahlen__raster { grid-template-columns: repeat(4, 1fr); }
}

.jev-kennzahl__wert {
	display: block;
	font-family: var(--jev-schrift-titel);
	font-size: var(--jev-t-3xl);
	line-height: 1.1;
	color: var(--jev-signal);
	font-variant-numeric: tabular-nums;
}
.jev-kennzahl__text {
	display: block;
	font-size: var(--jev-t-s);
	color: var(--jev-text-leise);
	margin-top: var(--jev-a-1);
}
.jev-abschnitt--tief .jev-kennzahl__text,
.jev-abschnitt--nacht .jev-kennzahl__text { color: var(--jev-text-invers-leise); }
.jev-abschnitt--tief .jev-kennzahl__wert,
.jev-abschnitt--nacht .jev-kennzahl__wert { color: var(--jev-duene); }

/* ---------- 3 · Passt / Passt nicht ---------------------------------- */

.jev-gegenueber__raster {
	display: grid;
	gap: var(--jev-a-4);
	margin-top: var(--jev-a-5);
}
@media (min-width: 52rem) {
	.jev-gegenueber__raster { grid-template-columns: 1fr 1fr; }
}

/*
 * Zwei Karten in derselben Form, aber nicht mit demselben Gewicht: Die Ja-Seite
 * ist geschlossen und weiß, die Nein-Seite bleibt offen — nur ein Haarrahmen
 * auf dem Seitengrund. So wiegt die Seite schwerer, die einlädt, und die andere
 * sortiert nur aus. Der Unterschied liegt allein in der Fläche.
 *
 * Ohne Kante oben: Drei Pixel in Blüte lagen als Balken über beiden Karten und
 * zogen mehr Blick auf sich als das, was darunter steht.
 *
 * Der Rahmen der Nein-Karte liegt als innerer Schatten und nicht als border,
 * damit beide Karten gleich hoch stehen — ein border änderte nur bei einer von
 * beiden die Außenmaße.
 */
.jev-gegenueber__spalte {
	padding: var(--jev-a-5);
	border-radius: var(--jev-radius);
	background: var(--jev-flaeche-weiss);
}
.jev-gegenueber__spalte--nein {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--jev-rand);
}
/*
 * Auf dem Handy engere Karten: 40px Innenabstand liessen von 342px Kartenbreite
 * nur 262px fuer den Text uebrig, und alle sechs Eintraege brachen auf zwei
 * Zeilen. Mit 24px sind es 294px. Der Abstand unter der Spaltenueberschrift
 * waechst dabei mit, sonst stuende sie so eng an der Liste wie die Eintraege
 * untereinander und waere keine Ueberschrift mehr.
 */
@media (max-width: 51.99rem) {
	.jev-gegenueber__spalte { padding: var(--jev-a-4); }
	/* Ueber die Karte adressiert, nicht ueber die Klasse allein: Die Grundregel
	   fuer .jev-gegenueber__marke steht weiter unten in dieser Datei und haette
	   bei gleicher Spezifitaet gewonnen — eine Medienabfrage erhoeht sie nicht. */
	.jev-gegenueber__spalte .jev-gegenueber__marke { margin-bottom: var(--jev-a-4); }
}

.jev-gegenueber__marke {
	margin: 0 0 var(--jev-a-3);
	font-family: var(--jev-schrift-titel);
	font-size: var(--jev-t-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.jev-gegenueber__spalte--ja   .jev-gegenueber__marke { color: var(--jev-text-titel); }
.jev-gegenueber__spalte--nein .jev-gegenueber__marke { color: var(--jev-text-leise); }

.jev-gegenueber__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--jev-a-3);
}

/*
 * Beide Seiten gleich groß. Der Unterschied liegt allein im Zeichen und in
 * der Farbe: Haken in Tanne für das Ja, Kreuz in Asche für das Nein.
 *
 * Vorher stand links ein Strich in Blüte. Ein Strich sagt nichts — er ist ein
 * Aufzählungspunkt, und dieselbe Liste hätte mit ihm auch „das brauchst du
 * nicht" heißen können. Der Haken sagt es selbst, noch bevor man die
 * Spaltenüberschrift gelesen hat. Blüte war zudem dieselbe Farbe, die auf
 * dieser Seite jeden Knopf trägt; das Ja war damit so laut wie der Aufruf.
 */
/* Kleiner als vorher und ohne eigene Zeilenlänge: In der Karte begrenzt schon
   deren Breite das Maß, und zwei Karten nebeneinander vertragen keine
   Auszeichnungsgröße. */
.jev-gegenueber__liste li {
	position: relative;
	padding-left: 1.8rem;
	font-size: var(--jev-t-m);
	line-height: 1.35;
}
.jev-gegenueber__liste li::before {
	position: absolute;
	left: 0;
}

.jev-gegenueber__spalte--ja li { color: var(--jev-text); }
/* Dieselben Masse wie das Kreuz gegenüber, damit beide Spalten auf einer
   Grundlinie liegen — der Haken sitzt in der Schrift nur etwas tiefer. */
.jev-gegenueber__spalte--ja li::before {
	content: "\2713";
	top: 0;
	font-size: 0.95em;
	line-height: 1.5;
	font-weight: 500;
	color: var(--jev-ja);
}

.jev-gegenueber__spalte--nein li { color: var(--jev-text-leise); }

/*
 * Auf dunklem Grund. Ohne diese Regeln stünde die Ja-Liste in Nacht auf Nacht
 * — gemessen 1,00:1, also unsichtbar; die Spaltentitel in Lagune kämen auf
 * 1,36:1. Hier: Düne 10,67:1 und Mondschein 9,14:1. Der Haken wechselt auf
 * Tannenlicht (6,84:1) — Tanne selbst käme auf 2,03:1 —, das Kreuz auf
 * Granatlicht (6,48:1); Granat selbst käme auf 1,97:1.
 */
.jev-abschnitt--nacht .jev-gegenueber__spalte--ja   .jev-gegenueber__marke,
.jev-abschnitt--tief  .jev-gegenueber__spalte--ja   .jev-gegenueber__marke { color: var(--jev-text-invers); }
.jev-abschnitt--nacht .jev-gegenueber__spalte--nein .jev-gegenueber__marke,
.jev-abschnitt--tief  .jev-gegenueber__spalte--nein .jev-gegenueber__marke { color: var(--jev-text-invers-leise); }
.jev-abschnitt--nacht .jev-gegenueber__spalte--ja   li,
.jev-abschnitt--tief  .jev-gegenueber__spalte--ja   li { color: var(--jev-text-invers); }
.jev-abschnitt--nacht .jev-gegenueber__spalte--nein li,
.jev-abschnitt--tief  .jev-gegenueber__spalte--nein li { color: var(--jev-text-invers-leise); }
.jev-abschnitt--nacht .jev-gegenueber__spalte--ja li::before,
.jev-abschnitt--tief  .jev-gegenueber__spalte--ja li::before { color: var(--jev-ja-invers); }
.jev-abschnitt--nacht .jev-gegenueber__spalte--nein li::before,
.jev-abschnitt--tief  .jev-gegenueber__spalte--nein li::before { color: var(--jev-nein-invers); }
/* Auf dunklem Grund kann die Ja-Karte nicht weiß sein — sie risse ein Loch in
   die Fläche. Stattdessen eine Aufhellung derselben Fläche. Über jev_flaeche()
   bekommt dieser Typ heute keinen dunklen Grund; die Regeln stehen hier, damit
   er es könnte, ohne dass jemand nachbessern muss. */
.jev-abschnitt--nacht .jev-gegenueber__spalte,
.jev-abschnitt--tief  .jev-gegenueber__spalte {
	background: color-mix(in srgb, var(--jev-duene) 8%, transparent);
}
.jev-abschnitt--nacht .jev-gegenueber__spalte--nein,
.jev-abschnitt--tief  .jev-gegenueber__spalte--nein {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--jev-rand-invers);
}
/*
 * Das Kreuz in Granat.
 *
 * Vorher stand es in Asche, dem Platzhalterton — es sah damit aus, als sei
 * die rechte Spalte ausgegraut und weniger wichtig. Sie ist aber genauso
 * wichtig: Wer sich hier wiederfindet, soll sich gar nicht erst bewerben.
 *
 * Rot und Grün allein trügen die Aussage nicht — rund jeder zwölfte Mann
 * unterscheidet die beiden schlecht. Sie tun es hier auch nicht: Die Zeichen
 * haben verschiedene Formen, und über jeder Spalte steht in Worten, was sie
 * bedeutet.
 */
.jev-gegenueber__spalte--nein li::before {
	content: "\2715";
	top: 0;
	font-size: 0.8em;
	line-height: 1.7;
	color: var(--jev-nein);
}

/* ---------- 4 · Karten ------------------------------------------------ */

.jev-karten__raster {
	display: grid;
	gap: var(--jev-a-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
/*
 * Sechs Karten: drei und drei, nicht vier und zwei.
 *
 * `auto-fit` füllt die Zeile, so weit sie reicht — bei 1200px sind das vier
 * Spalten, und die letzten beiden Karten stehen als Rest darunter. Das liest
 * sich als Versehen. Die Mengenabfrage greift nur, wenn genau sechs Karten da
 * sind; alle anderen Anzahlen bleiben bei der automatischen Aufteilung.
 */
.jev-karten__raster:has(.jev-karte:nth-child(6):last-child) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 56rem) {
	.jev-karten__raster:has(.jev-karte:nth-child(6):last-child) {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	}
}

.jev-karte {
	background: var(--jev-karte-grund);
	border: 1px solid var(--jev-karte-rand);
	border-radius: var(--jev-radius);
	padding: var(--jev-a-4);
}
.jev-karte h3 { font-size: var(--jev-t-l); margin: 0 0 var(--jev-a-2); }
.jev-karte p  { margin: 0; color: var(--jev-text-leise); font-size: var(--jev-t-s); }

/* ---------- 4a · Angebot: Argumente und Techniken in einem Abschnitt ---

   Die drei Argumente ohne Kästen, damit die Bildkacheln darunter die einzigen
   Flächen im Abschnitt bleiben. Die Musterkachel trägt das Gewicht, das sonst
   ein Rahmen hätte.
   -------------------------------------------------------------------- */

.jev-angebot__argumente {
	list-style: none;
	margin: var(--jev-a-6) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
/*
 * Senkrechte Haarlinien statt Symbolen. Auf schmalen Geräten kippen sie in die
 * Waagerechte, damit die Trennung erhalten bleibt.
 */
@media (min-width: 46rem) {
	.jev-angebot__argumente {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--jev-a-6);
	}
	.jev-angebot__argumente li + li {
		border-left: 1px solid var(--jev-rand-stark);
		padding-left: var(--jev-a-6);
	}
}
@media (max-width: 45.99rem) {
	.jev-angebot__argumente li + li {
		border-top: 1px solid var(--jev-rand-stark);
		margin-top: var(--jev-a-4);
		padding-top: var(--jev-a-4);
	}
}
/*
 * Musterkachel als Anker oben in jeder Spalte, statt des Signalstrichs, der
 * dort zuvor stand. Vier Paarungen des Corporate Designs, dieselbe Folge wie
 * bei den Leistungen.
 */
.jev-angebot__muster {
	width: 3rem;
	aspect-ratio: 1;
	margin-bottom: var(--jev-a-3);
	border-radius: var(--jev-radius);
	--jev-muster-kachel: 16px;
}
.jev-angebot__titel {
	font-size: var(--jev-t-l);
	line-height: 1.2;
	margin: 0 0 var(--jev-a-2);
}
.jev-angebot__text {
	margin: 0;
	font-size: var(--jev-t-s);
	line-height: 1.55;
	color: var(--jev-text-leise);
}

/* Überleitung zu den Techniken — sie ist der Beleg für „Sie kommen wieder". */
.jev-angebot__ueberleitung {
	margin: var(--jev-a-7) 0 var(--jev-a-4);
	font-size: var(--jev-t-xl);
	max-width: 34ch;
}

.jev-angebot__aufruf { margin-top: var(--jev-a-6); }
.jev-angebot .jev-fussnote { margin-top: var(--jev-a-5); }

/* ---------- 5 · Bildkacheln ------------------------------------------ */

/*
 * Drei Spalten, nicht vier: Bei sechs Techniken gehen drei Spalten in zwei
 * volle Reihen auf, vier lassen die zweite Reihe halb leer stehen.
 */
.jev-kacheln__raster {
	display: grid;
	gap: var(--jev-a-4);
	grid-template-columns: repeat(2, 1fr);
}

.jev-kachel { display: flex; flex-direction: column; }
.jev-kachel__bild {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--jev-radius);
	background: var(--jev-platzhalter);
}
.jev-kachel__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Die Musterfläche füllt die Kachel, solange kein Bild hinterlegt ist. */
.jev-kachel__muster { position: absolute; inset: 0; display: block; }
.jev-kachel__name {
	font-family: var(--jev-schrift-titel);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--jev-t-m);
	margin-top: var(--jev-a-3);
}
.jev-kachel__unter { font-size: var(--jev-t-s); color: var(--jev-text-leise); margin-top: var(--jev-a-1); }

/*
 * Mouse-over (Christophers Wunsch, 14.09.2026): Das Bild rückt langsam näher,
 * der Name nimmt die Signalfarbe — dieselbe Geste wie die Ziffer im Ablauf.
 * Gilt für alle Technikkacheln, auch die im Angebot der Partnerseite.
 *
 * Nur mit echter Maus: Auf dem Telefon bliebe der Zustand nach dem Antippen
 * stehen. Wer Bewegung abbestellt hat, bekommt nur die Farbe.
 */
.jev-kachel__bild > :where(img, .jev-kachel__muster) { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.jev-kachel__name { transition: color 0.25s ease-out; }
@media (hover: hover) and (pointer: fine) {
	.jev-kachel:hover .jev-kachel__name { color: var(--jev-signal); }
	@media (prefers-reduced-motion: no-preference) {
		.jev-kachel:hover .jev-kachel__bild > :where(img, .jev-kachel__muster) { transform: scale(1.05); }
	}
}

@media (min-width: 62rem) {
	.jev-kacheln__raster { grid-template-columns: repeat(3, 1fr); }
}

/*
 * Auf schmalen Geräten als Schieber, gleiche Bauweise wie bei den Paketen:
 * scroll-snap ohne JavaScript, weil Perfmatters Skripte bis zur ersten
 * Interaktion zurückhält. Sechs Kacheln untereinander wären sonst eine sehr
 * lange Strecke, durch die man sich nur hindurchscrollt.
 *
 * 72 % statt 85 % wie bei den Paketen: Eine Kachel trägt weniger Text, es
 * passen also mehr ins Bild — und die nächste lugt deutlicher hervor.
 */
@media (max-width: 46rem) {
	.jev-kacheln__raster {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		padding-bottom: var(--jev-a-3);
		/*
		 * Der Schieber läuft über beide Fensterränder hinaus: Die Hülle hält
		 * unter 1200px genau --jev-a-4 Abstand zu jeder Seite, den nimmt der
		 * negative Rand zurück. Die Einrückung wandert dafür in den
		 * Innenabstand der Schiene — sie gilt damit nur für Anfang und Ende
		 * der Strecke. Dazwischen laufen die Kacheln bis an die Kante.
		 */
		margin-inline: calc(var(--jev-a-4) * -1);
		padding-inline: var(--jev-a-4);
	}
	.jev-kacheln__raster .jev-kachel {
		flex: 0 0 72%;
		scroll-snap-align: start;
	}
	/*
	 * Ohne diese Zeile fräst das Einrasten die Einrückung am Anfang weg: Der
	 * Einrastpunkt der ersten Kachel läge bei scrollLeft 24, der Browser
	 * springt beim Laden dorthin und die Kachel klebt am Fensterrand. Der
	 * Einrastrand weitet ihren Einrastbereich nach links und verschiebt den
	 * Punkt auf scrollLeft 0 — der
	 * Innenabstand bleibt sichtbar, alle folgenden Kacheln rasten weiter
	 * bündig an der Kante ein.
	 */
	.jev-kacheln__raster .jev-kachel:first-child {
		scroll-margin-left: var(--jev-a-4);
	}
}

/* ---------- 6a · Leistungen als Zeilen --------------------------------

   Volle Breite statt vier kleiner Kästen. Die Musterkachel trägt das Gewicht,
   das sonst eine Ziffer hätte, und stellt den Bezug zum Musterstreifen im
   Bewerbungsformular her.
   -------------------------------------------------------------------- */

.jev-leistungen__liste { list-style: none; margin: 0; padding: 0; }
.jev-leistungen__punkt {
	display: grid;
	gap: var(--jev-a-3) var(--jev-a-5);
	padding-block: var(--jev-a-4);
	border-top: 1px solid var(--jev-rand-stark);
	align-items: start;
}
.jev-leistungen__punkt:last-child { border-bottom: 1px solid var(--jev-rand-stark); }
@media (min-width: 46rem) { .jev-leistungen__punkt { grid-template-columns: 4.5rem 1fr; } }
@media (min-width: 68rem) { .jev-leistungen__punkt { grid-template-columns: 4.5rem 19rem 1fr; } }

.jev-leistungen__kachel {
	width: 4.5rem;
	aspect-ratio: 1;
	border-radius: var(--jev-radius);
	--jev-muster-kachel: 22px;
}
.jev-leistungen__titel {
	font-size: var(--jev-t-l);
	margin: 0;
	line-height: 1.2;
}
.jev-leistungen__text { margin: 0; color: var(--jev-text-leise); }
/* Der Satz, der über die Stichworte in den Paketkarten hinausgeht. */
.jev-leistungen__zusatz {
	display: block;
	margin-top: var(--jev-a-2);
	font-size: var(--jev-t-s);
	color: var(--jev-text);
}
/* Auf mittleren Breiten steht der Titel über dem Text, nicht daneben. */
@media (min-width: 46rem) and (max-width: 67.99rem) {
	.jev-leistungen__titel { margin-bottom: var(--jev-a-2); }
	.jev-leistungen__text { grid-column: 2; }
}

/* ---------- 6a-2 · Leistungen zweispaltig mit dem Jaguar ---------------

   Links das Jaguar-Muster bis an den Fensterrand, rechts Überschrift und die
   vier Leistungen. Keine Kästen: Das Gewicht tragen die Musterkacheln und die
   Haarlinien, wie in der Gegenüberstellung darüber.
   -------------------------------------------------------------------- */

.jev-abschnitt.jev-leistungen--kacheln { padding-block: 0; }

.jev-leistungen--kacheln .jev-leistungen__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 64rem) {
	.jev-leistungen--kacheln .jev-leistungen__raster {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}
/*
 * Die Zeilenfassung schiebt Titel und Text in Spalte 2 eines dreispaltigen
 * Rasters. Hier gibt es nur eine Spalte — geerbt entstand daraus eine
 * 0px-Spalte, in die der Titel rutschte, während der Text daneben lag:
 * gemessen bei 900px Fenster beide auf gleicher Höhe, 8px versetzt. Deshalb
 * ausdrücklich zurücksetzen.
 */
.jev-leistungen--kacheln .jev-leistungen__titel,
.jev-leistungen--kacheln .jev-leistungen__text {
	grid-column: auto;
}

/*
 * Das Bild liegt absolut: Mit height:100% in einer Rasterzeile ohne feste Höhe
 * fiele es auf seine natürliche Höhe zurück und spannte die Zeile auf. So
 * bestimmt die Textseite die Höhe.
 */
.jev-leistungen__bild {
	position: relative;
	overflow: hidden;
	min-height: 20rem;
	background: var(--jev-flaeche-nacht);
}
.jev-leistungen__bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Der Text schließt rechts bündig ans Seitenraster an, siehe Bühne. */
.jev-leistungen__seite {
	padding-block: var(--jev-a-7);
	padding-inline-start: var(--jev-a-6);
	padding-inline-end: max(var(--jev-a-4), calc((100vw - var(--jev-breite)) / 2));
}
@media (max-width: 63.99rem) {
	.jev-leistungen__seite { padding-inline: var(--jev-a-4); }
}

.jev-leistungen--kacheln .jev-leistungen__liste { margin-top: var(--jev-a-5); }
.jev-leistungen--kacheln .jev-leistungen__punkt {
	display: grid;
	gap: var(--jev-a-2);
	padding-block: var(--jev-a-4);
	border-top: 1px solid var(--jev-rand-stark);
	grid-template-columns: minmax(0, 1fr);
}
.jev-leistungen--kacheln .jev-leistungen__punkt:last-child {
	border-bottom: 1px solid var(--jev-rand-stark);
}
.jev-leistungen--kacheln .jev-leistungen__titel {
	font-size: var(--jev-t-m);
	margin: 0;
}
.jev-leistungen--kacheln .jev-leistungen__text {
	font-size: var(--jev-t-s);
	line-height: 1.55;
}

/* ---------- 6b · Pakete, jedes für sich ------------------------------- */

/*
 * Vier gemeinsame Zeilen für alle Karten: Name, Zielgruppe, Preis, Inhalt.
 *
 * Über `subgrid` liegen sie karteübergreifend auf einer Linie. Eine feste
 * Mindesthöhe an der Zielgruppe reichte nicht — sobald eine davon dreizeilig
 * umbricht, verschieben sich Preis und Liste dieser Karte gegen die anderen.
 * Ältere Browser ohne subgrid bekommen schlicht die natürliche Höhe.
 */
.jev-pakete__raster {
	display: grid;
	gap: var(--jev-a-4);
	align-items: stretch;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	grid-template-rows: auto auto auto auto;
}
/* Mit Knopf eine gemeinsame Zeile mehr. */
.jev-pakete__raster--knopf { grid-template-rows: auto auto auto 1fr auto; }
.jev-pakete__raster--knopf .jev-paket { grid-row: span 5; }

.jev-paket {
	background: var(--jev-karte-grund);
	border: 1px solid var(--jev-karte-rand);
	border-radius: var(--jev-radius);
	padding: var(--jev-a-4);
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;
	align-content: start;
	height: 100%;
}
.jev-paket__name { font-size: var(--jev-t-l); margin: 0; }
.jev-paket__fuer {
	font-size: var(--jev-t-s);
	color: var(--jev-text-leise);
	margin: var(--jev-a-2) 0 0;
}
/*
 * Beide Werte nebeneinander statt untereinander. Als Flexzeile brachen sie
 * um, sobald die Karte schmaler wurde als beide Blöcke zusammen — zwei feste
 * Spalten halten sie in einer Zeile und teilen die Breite gleichmäßig.
 */
.jev-paket__preis {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--jev-a-3);
	margin-top: var(--jev-a-4);
	padding-block: var(--jev-a-3);
	border-block: 1px solid var(--jev-rand);
}
.jev-paket__wert { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
/* Trennlinie zwischen den beiden Werten statt eines bloßen Abstands. */
.jev-paket__wert + .jev-paket__wert {
	padding-left: var(--jev-a-3);
	border-left: 1px solid var(--jev-rand);
}
.jev-paket__wert span:last-child { font-size: var(--jev-t-xs); color: var(--jev-text-leise); }
.jev-paket__zahl {
	font-family: var(--jev-schrift-titel);
	/* Mitwachsend: In zwei Spalten hat „6.500 €" auf schmalen Geräten sonst
	   keinen Platz und läuft über seine Spalte hinaus. */
	font-size: clamp(0.95rem, 0.72rem + 1.05vw, 1.4rem);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--jev-text-titel);
}
.jev-paket__liste {
	list-style: none;
	margin: var(--jev-a-4) 0 0;
	padding: 0;
	font-size: var(--jev-t-s);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.jev-paket__liste li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.5rem; }
.jev-paket__haken { color: var(--jev-lagune); }

/* Der Knopf sitzt unten bündig, damit die drei auf einer Linie stehen. */
.jev-paket__aktion { margin: var(--jev-a-4) 0 0; align-self: end; }
.jev-paket__aktion .jev-knopf { width: 100%; }

/*
 * Auf schmalen Geräten als Schieber statt gestapelt.
 *
 * Ohne JavaScript, über scroll-snap — Perfmatters hält Skripte bis zur ersten
 * Interaktion zurück, ein Karussell wäre beim Laden unbrauchbar. Der Browser
 * bringt Wischen, Schwung und Einrasten selbst mit.
 *
 * Die Karten liegen bei 85 %, damit die nächste hervorlugt: Das ist der
 * Hinweis darauf, dass es weitergeht — eine Zählung oder Pfeile bräuchten
 * wieder Skript.
 */
@media (max-width: 46rem) {
	.jev-pakete__raster,
	.jev-pakete__raster--knopf {
		display: flex;
		grid-template-rows: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scroll-padding-left: 0;
		/* Platz für den Einrastpunkt der letzten Karte. */
		padding-bottom: var(--jev-a-3);
	}
	.jev-pakete__raster .jev-paket,
	.jev-pakete__raster--knopf .jev-paket {
		display: flex;
		flex-direction: column;
		grid-row: auto;
		flex: 0 0 85%;
		scroll-snap-align: start;
		height: auto;
	}
	.jev-paket__aktion { margin-top: auto; padding-top: var(--jev-a-4); }
}

/*
 * Rollbalken der Schieber ausblenden. Der Hinweis, dass es weitergeht, ist die
 * angeschnittene nächste Kachel — dafür braucht es keinen Balken. Rollen mit
 * Finger, Rad und Tastatur bleibt unberührt; nur die Anzeige verschwindet.
 * Bewusst NICHT bei der Vergleichstabelle: Dort gibt es kein Hervorlugen, das
 * die Fortsetzung ankündigt, der Balken ist da der einzige Hinweis.
 */
.jev-kacheln__raster,
.jev-pakete__raster,
.jev-bewegung__klein { scrollbar-width: none; }
.jev-kacheln__raster::-webkit-scrollbar,
.jev-pakete__raster::-webkit-scrollbar,
.jev-bewegung__klein::-webkit-scrollbar { display: none; }

/* ---------- 6 · Preismodelle ----------------------------------------- */

.jev-preise__raster {
	display: grid;
	gap: var(--jev-a-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	/* stretch statt start: Die drei Modelle werden nebeneinander verglichen,
	   unterschiedlich hohe Karten erschweren genau das. */
	align-items: stretch;
}

.jev-preis {
	background: var(--jev-karte-grund);
	border: 1px solid var(--jev-karte-rand);
	border-radius: var(--jev-radius);
	padding: var(--jev-a-4);
	display: flex;
	flex-direction: column;
	height: 100%;
}
.jev-preis__name { font-size: var(--jev-t-l); margin: 0; }
.jev-preis__fuer { font-size: var(--jev-t-s); color: var(--jev-text-leise); margin-top: var(--jev-a-1); }
.jev-preis__betrag {
	font-family: var(--jev-schrift-titel);
	font-size: var(--jev-t-2xl);
	color: var(--jev-lagune);
	font-variant-numeric: tabular-nums;
	margin-top: var(--jev-a-3);
}
.jev-preis__zusatz { font-size: var(--jev-t-s); color: var(--jev-text-leise); }
.jev-preis__punkte {
	list-style: none;
	margin: var(--jev-a-3) 0 0;
	padding: var(--jev-a-3) 0 0;
	border-top: 1px solid var(--jev-rand);
	font-size: var(--jev-t-s);
}
.jev-preis__punkte li { padding-block: var(--jev-a-1); }

/* ---------- 7 · Ablauf ------------------------------------------------

   Einspaltig auf dem Seitengrund. Das Vierer-Raster davor brach auf 4+2 um
   und ließ unten rechts eine tote Fläche.
   -------------------------------------------------------------------- */

.jev-ablauf__kopf { margin-bottom: var(--jev-a-5); }
.jev-ablauf__kopf h2 { margin: 0; }

/*
 * Mittig — nur bei nebeneinanderstehenden Schritten, siehe ablauf.php.
 *
 * Der Fliesstext bekommt eine Lesebreite: Über die vollen 1000 Pixel zentriert
 * wäre jede Zeile eine andere Länge, und das Auge fände die nächste nicht.
 *
 * Die Aufzählung bleibt linksbündig und rückt als Block in die Mitte. Zentrierte
 * Listenpunkte haben keine gemeinsame Kante — man liest dann drei Zeilen, die
 * zufällig untereinander stehen, statt einer Aufzählung.
 */
.jev-ablauf__kopf--mitte {
	text-align: center;
	margin-inline: auto;
}
.jev-ablauf__kopf--mitte .jev-fliess {
	max-width: 68ch;
	margin-inline: auto;
}
.jev-ablauf__kopf--mitte .jev-fliess :where(ul, ol) {
	display: table;
	margin-inline: auto;
	text-align: left;
}

/*
 * Das Bild über den Schritten: breit und flach, damit es zeigt, wovon der
 * Ablauf handelt, ohne ihn nach unten zu drücken.
 */
.jev-ablauf__bild {
	/*
	 * Bezugspunkt für alles, was darin absolut liegt — die Videohülle etwa.
	 * Ohne diese Zeile sucht sie sich den nächsten gesetzten Vorfahren, und
	 * `overflow: hidden` hier hält sie dann auch nicht: Ein Kasten schneidet
	 * nur, was er selbst enthält. Der Film lief einmal über die ganze Seite,
	 * und im Rahmen stand die graue Platzhalterfläche.
	 */
	position: relative;
	margin: 0 0 var(--jev-a-6);
	aspect-ratio: 21 / 7;
	overflow: hidden;
	border-radius: var(--jev-radius);
	background: var(--jev-platzhalter);
}
/* Zwei Klassen wegen `.woocommerce img { height: auto }`. */
.jev-ablauf .jev-ablauf__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/*
 * Ein Video füllt dieselbe Fläche wie ein Bild.
 *
 * Es kommt in einer eigenen Hülle, und die trägt sonst ihre eigene Rundung und
 * einen dunklen Grund — richtig für ein Video, das für sich steht, falsch für
 * eines, das eine Fläche ausfüllt, die schon gerundet ist.
 */
.jev-ablauf__bild .jev-video--datei { border-radius: 0; background: none; }
/* Ohne `display` — die Begründung steht bei der Bühne. */
.jev-ablauf__bild :where(.jev-video__start, .jev-video__standbild, video) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}
.jev-ablauf__bild :where(.jev-video__start, .jev-video__standbild) { display: block; }
.jev-ablauf__bild .jev-video--datei,
.jev-ablauf__bild .jev-video__start { position: absolute; inset: 0; }

/*
 * Hochformat: eine schmale, stehende Fläche statt des Bandes. Warum, steht in
 * abschnitte/ablauf.php — 21:7 zeigt von einem 9:16-Film neunzehn Prozent.
 *
 * 22rem breit: Auf dem Bildschirm ist das ein Gegenstand auf der Seite und
 * keine Wand; darunter füllt es die Breite und braucht keine Sonderregel.
 */
/*
 * Unter 62rem so breit wie der Text darüber.
 *
 * Der Film stand mittig in einer Spalte von 22rem, während Absatz und
 * Aufzählung daneben die volle Lesebreite nutzten — bei 820 Pixeln 352 gegen
 * 714. Zwei verschiedene Breiten übereinander lesen sich als zwei Blöcke, die
 * nichts miteinander zu tun haben.
 *
 * Der Preis ist Höhe: Bei 714 Pixeln Breite wird der stehende Film 1269 hoch.
 * Das ist der Rechnung nach unvermeidlich — 9:16 bleibt 9:16 — und der Grund,
 * warum er ab 62rem neben den Text rückt statt darüber zu stehen.
 */
.jev-ablauf--hochformat .jev-ablauf__bild {
	aspect-ratio: 9 / 16;
	max-width: var(--jev-breite-text);
	margin-inline: 0;
}

/*
 * Ab 62rem steht das Hochformat neben dem Text statt darüber.
 *
 * Untereinander ist ein stehender Film 626 Pixel hoch und schiebt die drei
 * Schritte um eine ganze Bildschirmhöhe nach unten — dazwischen bleibt rechts
 * und links von ihm eine leere Spalte stehen. Nebeneinander füllt derselbe
 * Film genau diese Spalte.
 *
 * Die Schritte stehen in der Textspalte, unter der Aufzählung (Christophers
 * Wunsch, 14.09.2026). Über die volle Breite darunter lag zwischen Text und
 * Schritten die ganze Höhe des Films, und rechts neben dem Text blieb Leere.
 *
 * Die zwei `1fr`-Zeilen oben und unten halten Kopf, Schritte und Fussnote als
 * einen Block mittig neben dem Film — wie vorher der Kopf allein. Ist die
 * Textspalte höher als der Film, fallen sie auf null.
 */
@media (min-width: 62rem) {
	.jev-ablauf--hochformat > .jev-huelle {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 22rem;
		grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
		column-gap: var(--jev-a-6);
		align-items: center;
	}
	.jev-ablauf--hochformat .jev-ablauf__kopf {
		grid-column: 1;
		grid-row: 2;
		margin-bottom: 0;
	}
	.jev-ablauf--hochformat .jev-ablauf__bild {
		grid-column: 2;
		grid-row: 1 / -1;
		/*
		 * `margin-inline: 0` ist hier kein Aufräumen, sondern die Bedingung
		 * dafür, dass die Spalte überhaupt eine Breite bekommt: Der Rahmen
		 * enthält nur absolut gesetzte Kinder, seine eigene Breite ist also
		 * null. In einem Raster füllt er die Spur trotzdem — aber nur, solange
		 * er nicht mit `auto` an beiden Seiten zentriert wird. Mit dem
		 * Aussenabstand aus der Stapelansicht fiel er auf 0 × 0 zusammen.
		 */
		margin: 0;
		max-width: none;
	}
	.jev-ablauf--hochformat .jev-ablauf__liste { grid-column: 1; grid-row: 3; }
	.jev-ablauf--hochformat .jev-ablauf__fussnote { grid-column: 1; grid-row: 4; }
	/* Die Schritte brauchen wieder Luft nach oben, seit sie nicht mehr unter
	   dem Abstand des Bildes stehen. */
	.jev-ablauf--hochformat .jev-ablauf__liste { margin-top: var(--jev-a-6); }
}

/*
 * Neben dem Film ist die Textspalte bis 80rem zu schmal für drei Schritte in
 * einer Reihe (bei 62rem gut 500 Pixel, also drei Spalten à 140). Dort stehen
 * sie untereinander, wie im einspaltigen Ablauf; die Ziffer bleibt in Signal.
 */
@media (min-width: 62rem) and (max-width: 79.99rem) {
	.jev-ablauf--hochformat.jev-ablauf--neben .jev-ablauf__liste { display: block; }
	.jev-ablauf--hochformat.jev-ablauf--neben .jev-ablauf__schritt {
		grid-template-columns: 4rem 1fr;
		gap: var(--jev-a-2) var(--jev-a-4);
		padding-block: var(--jev-a-4);
	}
	.jev-ablauf--hochformat.jev-ablauf--neben .jev-ablauf__schritt:last-child { border-bottom: 1px solid var(--jev-rand); }
	.jev-ablauf--hochformat.jev-ablauf--neben .jev-ablauf__schritt::before { grid-row: span 2; }
	.jev-ablauf--hochformat.jev-ablauf--neben .jev-ablauf__titel { align-self: center; }
}

/* Knopf und Bedienleiste wie in der Bühne: im Ruhezustand nichts, beim
   Überfahren beides. Auf Berührgeräten bleiben sie sichtbar. */
@media (hover: hover) and (pointer: fine) {
	.jev-ablauf__bild .jev-video__knopf {
		opacity: 0;
		transform: scale(0.94);
		transition: opacity 0.18s ease, transform 0.18s ease;
	}
	.jev-ablauf__bild .jev-video__start:hover .jev-video__knopf,
	.jev-ablauf__bild .jev-video__start:focus-visible .jev-video__knopf {
		opacity: 1;
		transform: none;
	}
	.jev-ablauf__bild .jev-video--datei:not(.jev-video--laeuft) video::-webkit-media-controls {
		opacity: 0;
		transition: opacity 0.18s ease;
	}
	.jev-ablauf__bild .jev-video--datei:not(.jev-video--laeuft) video:hover::-webkit-media-controls {
		opacity: 1;
	}
}
/* Die Beschriftung „… abspielen" trägt der Knopf; als Pille läge sie auf dem
   Bild. Für Vorleseprogramme bleibt sie. */
.jev-ablauf__bild .jev-video__text {
	position: absolute;
	left: auto;
	bottom: auto;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
@media (max-width: 44rem) { .jev-ablauf__bild { aspect-ratio: 3 / 2; } }

.jev-ablauf__liste { list-style: none; counter-reset: jev-schritt; margin: 0; padding: 0; }

/*
 * Die Fussnote am Ende des Ablaufs: kleiner und leiser als der Schritt-Text
 * darüber, abgesetzt nur durch Abstand.
 *
 * Keine Haarlinie mehr (Christophers Wunsch, 14.09.2026): Der letzte Schritt
 * schliesst schon mit einer Linie ab, und darunter stand eine zweite — zwei
 * Striche mit Lücke dazwischen sahen aus wie ein leeres Feld. `0` ausdrücklich,
 * damit auch eine Linie aus `.jev-fussnote` nicht durchkommt.
 */
.jev-ablauf__fussnote {
	max-width: 68ch;
	margin-top: var(--jev-a-6);
	padding-top: 0;
	border-top: 0;
	font-size: var(--jev-t-xs);
	line-height: 1.7;
}

/*
 * Nebeneinander: Die Schritte stehen in einer Reihe, jeder mit der Ziffer
 * über dem Titel statt daneben. Die Linie sitzt dann oben an jedem Schritt
 * und bildet quer, was sie einspaltig senkrecht bildet.
 */
@media (min-width: 62rem) {
	.jev-ablauf--neben .jev-ablauf__liste {
		display: grid;
		grid-template-columns: repeat(var(--jev-ablauf-spalten, 3), minmax(0, 1fr));
		gap: var(--jev-a-6);
	}
	.jev-ablauf--neben .jev-ablauf__schritt {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jev-a-2);
		padding-block: var(--jev-a-3) 0;
		border-bottom: 0;
	}
	.jev-ablauf--neben .jev-ablauf__schritt:last-child { border-bottom: 0; }
	.jev-ablauf--neben .jev-ablauf__schritt::before {
		grid-row: auto;
		font-size: var(--jev-t-l);
		color: var(--jev-signal);
	}
	.jev-ablauf--neben .jev-ablauf__titel { align-self: start; }
}
.jev-ablauf__schritt {
	counter-increment: jev-schritt;
	display: grid;
	grid-template-columns: 4rem 1fr;
	gap: var(--jev-a-2) var(--jev-a-4);
	padding-block: var(--jev-a-4);
	border-top: 1px solid var(--jev-rand);
}
.jev-ablauf__schritt:last-child { border-bottom: 1px solid var(--jev-rand); }
.jev-ablauf__schritt::before {
	content: counter(jev-schritt, decimal-leading-zero);
	grid-row: span 2;
	font-family: var(--jev-schrift-titel);
	font-size: var(--jev-t-xl);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	color: var(--jev-platzhalter);
	transition: color 0.25s ease-out;
}
.jev-ablauf__titel { font-size: var(--jev-t-m); margin: 0; align-self: center; transition: color 0.25s ease-out; }
.jev-ablauf__text  { font-size: var(--jev-t-s); color: var(--jev-text-leise); margin: 0; }

/* Zeigt, wo man gerade ist — funktioniert in jedem Browser. */
.jev-ablauf__schritt:hover::before,
.jev-ablauf__schritt:focus-within::before { color: var(--jev-signal); }

/*
 * Beim Scrollen tritt der Schritt in der Fenstermitte hervor, die übrigen
 * treten zurück. Über eine Scroll-Zeitachse, ohne JavaScript — Perfmatters
 * hält Skripte bis zur ersten Interaktion zurück.
 *
 * Nur innerhalb von @supports: Wo die Zeitachse fehlt (derzeit Firefox),
 * bliebe der Text sonst dauerhaft abgeblendet. Ohne Unterstützung stehen
 * alle Schritte gleich kräftig da — die sichere Richtung.
 */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes jev-ablauf-hervor {
			0%, 100% { opacity: 0.4; }
			42%, 58% { opacity: 1; }
		}
		@keyframes jev-ablauf-ziffer {
			0%, 100% { color: var(--jev-platzhalter); }
			42%, 58% { color: var(--jev-signal); }
		}
		.jev-ablauf__titel,
		.jev-ablauf__text {
			animation: jev-ablauf-hervor linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
		.jev-ablauf__schritt::before {
			animation: jev-ablauf-ziffer linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}

		/*
		 * Nebeneinander nicht.
		 *
		 * Das Hervortreten zeigt, wo man beim Rollen gerade ist — untereinander
		 * ist das eine Hilfe, nebeneinander eine Behauptung: Die drei Schritte
		 * stehen in derselben Zeile, es gibt kein „gerade hier". Alle drei
		 * wären gleichzeitig abgeblendet oder gleichzeitig hell, je nachdem wo
		 * die Zeile im Fenster steht — und beim ersten Blick sind sie es
		 * abgeblendet.
		 */
		.jev-ablauf--neben .jev-ablauf__titel,
		.jev-ablauf--neben .jev-ablauf__text,
		.jev-ablauf--neben .jev-ablauf__schritt::before { animation: none; }
	}
}

/* ---------- 8 · Text mit Medium -------------------------------------- */

.jev-textmedien__raster {
	display: grid;
	gap: var(--jev-a-5);
	align-items: center;
}
@media (min-width: 62rem) {
	.jev-textmedien__raster { grid-template-columns: 1fr 1fr; gap: var(--jev-a-6); }
	/* Bild links: nur die visuelle Reihenfolge dreht sich, die Lesereihenfolge
	   im Quelltext bleibt Text zuerst. */
	.jev-textmedien--links .jev-textmedien__medium { order: -1; }
}
.jev-textmedien__medium img { width: 100%; height: auto; border-radius: var(--jev-radius); }

/* Ohne Bild ist es ein Textabschnitt: eine Spalte, auf Lesebreite begrenzt.
   Die Regel steht nach der Zweispalter-Regel und ausserhalb der Abfrage,
   damit sie auch am grossen Bildschirm gewinnt. */
.jev-textmedien--nurtext .jev-textmedien__raster { grid-template-columns: minmax(0, 1fr); }
.jev-textmedien--nurtext .jev-textmedien__text { max-width: 68ch; }

/* ---------- 9 · Stimmen ----------------------------------------------- */

/*
 * Die Stimmen rollen, statt in drei gleichen Kästen zu stehen.
 *
 * Drei gerahmte Karten waren aus einem anderen Baukasten — auf der ganzen
 * Seite tragen sonst Flächen und Haarlinien die Gliederung. Und sie
 * behaupteten, alle Stimmen seien gleich wichtig; ab der vierten wurde der
 * Abschnitt länger statt voller.
 *
 * Aufbau wie beim Produktstreifen: ausserhalb der Hülle, volle Fensterbreite,
 * Innenabstand gleich dem Abstand der Hülle zum Fensterrand. Die erste Karte
 * beginnt damit auf der Rasterlinie der Überschrift, die dritte wird rechts
 * angeschnitten.
 *
 * Zwei Klassen: basis.css setzt `ul[class] { padding: 0 }`, und Element plus
 * Attribut wiegt schwerer als eine Klasse allein.
 */
.jev-stimmen .jev-stimmen__schieber {
	--jev-schieber-rand: max(var(--jev-a-4), calc((100% - var(--jev-breite)) / 2));
	--jev-schieber-luecke: var(--jev-a-4);

	list-style: none;
	margin: 0;
	padding: 0 var(--jev-schieber-rand);

	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--jev-schieber-luecke)) / 3);
	gap: var(--jev-schieber-luecke);

	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scroll-padding-inline: var(--jev-schieber-rand);
	scrollbar-width: none;
}
.jev-stimmen .jev-stimmen__schieber::-webkit-scrollbar { display: none; }

@media (max-width: 62rem) {
	.jev-stimmen .jev-stimmen__schieber { grid-auto-columns: calc((100% - var(--jev-schieber-luecke)) / 2); }
}
@media (max-width: 40rem) {
	.jev-stimmen .jev-stimmen__schieber { grid-auto-columns: 82%; }
}

.jev-stimme {
	scroll-snap-align: start;
	display: grid;
	align-content: start;
	gap: var(--jev-a-3);
	margin: 0;
	/* Kein Rahmen, keine Fläche: Was die Karte zusammenhält, ist der Abstand
	   zur nächsten — dieselbe Ordnung wie im Wegweiser. */
}
.jev-stimme__bild {
	display: block;
	width: 4.5rem;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 50%;
	background: var(--jev-platzhalter);
}
/* Zwei Klassen wegen `.woocommerce img { height: auto }`. */
.jev-stimme .jev-stimme__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.jev-stimme__sterne { font-size: var(--jev-t-xs); letter-spacing: .18em; color: var(--jev-signal); }
.jev-stimme blockquote {
	margin: 0;
	max-width: none;
	font-size: var(--jev-t-m);
	line-height: 1.65;
	color: var(--jev-text);
}
.jev-stimme__wer { display: grid; gap: 1px; margin: 0; max-width: none; }
.jev-stimme__name {
	font-family: var(--jev-schrift-titel);
	font-size: var(--jev-t-s);
	font-weight: 400;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--jev-text-titel);
}
.jev-stimme__ort { font-size: var(--jev-t-xs); color: var(--jev-text-leise); }
.jev-stimmen .jev-fussnote { margin-top: var(--jev-a-5); }

/* ---------- 9b · Bewegung mit Stimmen ---------------------------------

   Links die Markenaussage mit dem Gründerinnen-Video, rechts die Stimmen in
   einer Rangfolge: die erste als volle Karte auf Nacht, die übrigen als
   schmale Zeilen. Die Nacht-Karte ist die Zäsur des Abschnitts, deshalb
   steht der Abschnitt selbst auf dem Seitengrund.
   -------------------------------------------------------------------- */

.jev-bewegung__raster { display: grid; gap: var(--jev-a-5); }
@media (min-width: 62rem) {
	.jev-bewegung__raster { grid-template-columns: 1fr 1fr; gap: var(--jev-a-6); align-items: start; }
}

/*
 * Der Abstand zwischen Bild und Wort steht an der Hülle, nicht am Bild.
 *
 * Vorher trug ihn `.jev-bewegung__gruenderinnen` als unterer Aussenabstand.
 * Das ging so lange gut, wie dort ein einzelnes Medium stand — seit an
 * derselben Stelle auch das Porträtpaar stehen kann, griff die Regel dort
 * nicht, und Eyebrow und Überschrift klebten an der Bildkante.
 *
 * Als Fuge des Rasters gilt der Abstand für beides, egal was oben steht, und
 * er kann nicht mehr doppelt auftreten. Die Zweispaltigkeit weiter unten
 * überschreibt nur den Wert.
 */
.jev-bewegung__marke { display: grid; gap: var(--jev-a-5); align-content: start; }
.jev-bewegung__marke h2 { margin: 0 0 var(--jev-a-3); }

/*
 * Ohne Stimmen: der Abschnitt legt sich selbst auf zwei Spalten.
 *
 * Das äussere Raster hat dann nur noch ein Kind, und das stand als schmale
 * Säule in der linken Hälfte — rechts daneben eine leere Fensterhälfte.
 * `:has()` erkennt den Fall ohne Skript und ohne eine zweite Klasse am
 * Abschnitt: Gibt es den Stimmenteil nicht, wird aus dem Aussenraster eine
 * Spalte und aus der Marke die zwei.
 */
@media (min-width: 62rem) {
	.jev-bewegung__raster:not(:has(.jev-bewegung__stimmen)) { grid-template-columns: minmax(0, 1fr); }
	.jev-bewegung__raster:not(:has(.jev-bewegung__stimmen)) .jev-bewegung__marke {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--jev-a-6);
		align-items: center;
	}
}

/*
 * Seitenverhältnisse der drei Medienplätze.
 *
 * Sie sitzen am Behälter, nicht am Video-Auslöser: Solange keine Vimeo-Adresse
 * hinterlegt ist, rendert an der Stelle ein einfaches <img> und es gäbe keinen
 * Auslöser, an dem das Format hängen könnte — das Bild liefe dann in seiner
 * natürlichen Höhe aus.
 */
.jev-bewegung__gruenderinnen { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--jev-radius); }
.jev-bewegung__haupt .jev-video,
.jev-bewegung__haupt > img { aspect-ratio: 16 / 9; display: block; }
.jev-bewegung__zeile .jev-video,
.jev-bewegung__zeile > img { aspect-ratio: 1 / 1; display: block; }
.jev-bewegung :where(.jev-video__start, .jev-video__standbild, img, video) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Ohne Medium keine leere Spalte davor. */
.jev-bewegung__zeile:not(:has(img)):not(:has(.jev-video)) { grid-template-columns: 1fr; }

.jev-bewegung__haupt {
	margin: 0;
	background: var(--jev-flaeche-nacht);
	color: var(--jev-text-invers-leise);
	border-radius: var(--jev-radius);
	overflow: hidden;
}
.jev-bewegung__haupt .jev-bewegung__text { padding: var(--jev-a-4); }
.jev-bewegung__haupt .jev-bewegung__zitat { color: var(--jev-text-invers); font-size: var(--jev-t-xl); }
.jev-bewegung__haupt .jev-bewegung__wer { color: var(--jev-text-invers-leise); }
.jev-bewegung__haupt .jev-bewegung__wer b { color: var(--jev-text-invers); }
.jev-bewegung__haupt .jev-video__hinweis { padding: 0 var(--jev-a-4) var(--jev-a-3); color: var(--jev-text-invers-leise); }

.jev-bewegung__klein { display: grid; gap: var(--jev-a-4); margin-top: var(--jev-a-4); }
@media (min-width: 46rem) {
	.jev-bewegung__klein { grid-template-columns: 1fr 1fr; }
	/* Die große Karte nimmt die volle Zeile, die kleinen teilen sich darunter. */
	.jev-bewegung__klein > .jev-bewegung__haupt { grid-column: 1 / -1; }
}

/*
 * Auf schmalen Geräten ein Schieber, gleiche Bauweise wie bei den Techniken:
 * scroll-snap ohne JavaScript, Einrückung nur am Anfang und am Ende, dazwischen
 * laufen die Karten bis an die Kante.
 */
@media (max-width: 45.99rem) {
	.jev-bewegung__klein {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		gap: var(--jev-a-3);
		padding-bottom: var(--jev-a-3);
		margin-inline: calc(var(--jev-a-4) * -1);
		padding-inline: var(--jev-a-4);
	}
	.jev-bewegung__klein > * {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}
	.jev-bewegung__klein > :first-child { scroll-margin-left: var(--jev-a-4); }
	/* In der Schiene stehen alle Karten gleich hoch nebeneinander. */
	.jev-bewegung__klein > .jev-bewegung__zeile { grid-template-columns: 1fr; align-content: start; }
}
.jev-bewegung__zeile {
	margin: 0;
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: var(--jev-a-3);
	align-items: start;
}
.jev-bewegung__zeile .jev-video { border-radius: var(--jev-radius); overflow: hidden; }
.jev-bewegung__zeile .jev-bewegung__zitat { font-size: var(--jev-t-s); }

.jev-bewegung__zitat { margin: 0; font-size: var(--jev-t-l); line-height: 1.4; }
.jev-bewegung__wer { font-size: var(--jev-t-s); color: var(--jev-text-leise); margin: var(--jev-a-2) 0 0; }
.jev-bewegung__wer b { display: block; color: var(--jev-text); font-weight: 500; }

/* Der Abspielknopf der kleinen Zeilen darf den Ausschnitt nicht sprengen. */
.jev-bewegung__zeile .jev-video__knopf { width: 2.25rem; height: 2.25rem; }
.jev-bewegung__zeile .jev-video__knopf::after { border-width: 0.4rem 0 0.4rem 0.62rem; }
.jev-bewegung__zeile .jev-video__text { display: none; }

.jev-bewegung__zwischen {
	margin: 0 0 var(--jev-a-5);
	font-size: var(--jev-t-xl);
	max-width: 34ch;
}

/* ---------- 10 · Freie Gebiete --------------------------------------- */

/*
 * Eyebrow in Signalfarbe, ohne Strich. Gilt auch für die Gegenüberstellung.
 * Die höhere Spezifität ist nötig, damit die Regel auch auf dunklen Flächen
 * greift — dort färbt die allgemeine Regel den Eyebrow sonst in Düne. Blüte
 * misst auf Nacht 4,79:1, auf dem Seitengrund 2,51:1; die niedrige Zahl auf
 * hellem Grund betrifft alle Eyebrows der Seite und ist als offener Punkt
 * vermerkt, nicht eine Eigenheit dieses Abschnitts.
 */
/*
 * Der Aufruf steht in derselben Zeile: Er ist die Startseiten-Fassung der
 * freien Gebiete und soll denselben Eyebrow tragen. Blüte auf Nacht misst
 * 4,79:1 und erfüllt damit auch bei dieser kleinen Schrift die Vorgabe von
 * 4,5:1 — auf Nacht ist Blüte tragbar, auf dem hellen Seitengrund wäre sie es
 * nicht.
 */
.jev-abschnitt.jev-territorium .jev-eyebrow,
.jev-abschnitt.jev-gegenueber .jev-eyebrow,
.jev-abschnitt.jev-aufruf .jev-eyebrow {
	color: var(--jev-signal);
	margin-bottom: var(--jev-a-4);
}

/* Zweite Titelzeile in Signalfarbe, wie bei den freien Gebieten. */
/*
 * Breiter als beim Territorium: Dort will die Überschrift zwei Zeilen, hier
 * ist sie eine Frage. Mit 24ch (581px) brach sie zwischen „Jeveaux" und
 * „Company®" um und zerriss den Markennamen; sie braucht 750px am Stück.
 */
.jev-gegenueber__titel { margin: 0; max-width: 34ch; text-wrap: balance; }
.jev-gegenueber__akzent { display: block; color: var(--jev-signal); }

/*
 * Überschrift in der Titelschrift, wie alle anderen Überschriften.
 *
 * Sie steht damit in Versalien, und das ist keine Stilentscheidung, sondern
 * eine Eigenschaft der Schrift: Milk and Clay bildet Kleinbuchstaben auf
 * dieselben Glyphen ab wie Großbuchstaben (a → A, e → E, geprüft an
 * milkclay-regular.woff2). Gemischtschreibung ist damit nicht herstellbar.
 * `text-transform` aus basis.css bleibt zusätzlich nötig, weil die kleinen
 * Umlaute im Kit nur die Punkte zeichnen — ä ohne Buchstabenkörper.
 *
 * Groß, mit etwas gelockerter Zeile, damit zwei Zeilen Versalien nicht
 * mauern.
 */
/* Größe, Zeilenabstand und Sperrung kommen aus der Standardregel für h2 in
   basis.css — hier bleibt nur, was diesen Titel besonders macht: er ist
   zweizeilig und zweifarbig. */
.jev-territorium__titel { margin: 0; max-width: 24ch; }
.jev-territorium__akzent { display: block; color: var(--jev-signal); }

.jev-territorium .jev-fliess { margin-top: var(--jev-a-4); }

.jev-territorium__liste {
	list-style: none;
	margin: var(--jev-a-5) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--jev-a-3);
}
.jev-territorium__ort {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0 var(--jev-a-4);
	border: 1px solid var(--jev-rand-invers);
	border-radius: var(--jev-knopf-radius);
	font-size: var(--jev-t-s);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Der Nachsatz ist hier bewusst kein Hinweiskasten, sondern Fließtext —
   er relativiert die Liste, statt eine eigene Aussage zu machen. */
.jev-territorium__nachsatz {
	margin-top: var(--jev-a-4);
	max-width: 54ch;
	font-size: var(--jev-t-s);
	color: var(--jev-text-invers-leise);
}

.jev-territorium .jev-knopfzeile { margin-top: var(--jev-a-5); }
.jev-territorium__knopf { padding: var(--jev-a-3) var(--jev-a-5); }

/* ---------- 11 · Formular --------------------------------------------- */


/* ---------- 12 · Häufige Fragen --------------------------------------

   Der Abschnitt läuft in die Fußgrafik hinein: Er beginnt auf dem Papier der
   Seite und endet auf Mondschein — genau dem Ton, mit dem der Himmel des
   Landschaftsbandes anfängt. Dadurch gibt es an der Nahtstelle keine Kante
   mehr, das Band wächst aus der Seite heraus.
   -------------------------------------------------------------------- */

.jev-faq {
	background: linear-gradient(to bottom, var(--jev-grund) 0%, var(--jev-mondschein) 100%);
	position: relative;
}
/*
 * Trennlinie zum Formular darüber. Beide Abschnitte beginnen auf Papier,
 * dadurch gab es an der Nahtstelle keine sichtbare Kante.
 *
 * Bewusst nur hier und nicht überall dort, wo zwei gleiche Flächen
 * aneinanderstoßen: Als allgemeine Regel setzte sie auch zwischen Ablauf und
 * Bewegung eine Linie, die dort nicht gewollt ist.
 *
 * Absolut gesetzt statt als border-top, weil die Linie am Abschnittsrand
 * sitzen soll und nicht hinter dessen 96px Polster.
 */
.jev-faq::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: var(--jev-rand);
}


/* <details> statt eigenem Akkordeon-Skript: funktioniert, während
   Perfmatters die Skripte noch zurückhält. */
.jev-faq__liste { max-width: var(--jev-breite-text); }
.jev-faq__punkt { border-bottom: 1px solid var(--jev-rand); }
.jev-faq__frage {
	cursor: pointer;
	list-style: none;
	padding-block: var(--jev-a-3);
	font-weight: 500;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--jev-a-3);
}
.jev-faq__frage::-webkit-details-marker { display: none; }
.jev-faq__frage::after {
	content: "+";
	font-family: var(--jev-schrift-titel);
	font-size: var(--jev-t-l);
	line-height: 1;
	color: var(--jev-signal);
	flex: none;
}
.jev-faq__punkt[open] .jev-faq__frage::after { content: "–"; }
.jev-faq__antwort { padding-bottom: var(--jev-a-3); color: var(--jev-text-leise); }

/* ---------- 13 · Bildband -------------------------------------------- */

.jev-bildband { padding-block: 0; }
.jev-bildband img { width: 100%; height: auto; display: block; }

/* ---------- Video-Komponente ----------------------------------------- */

.jev-video { position: relative; }
.jev-video__start {
	display: block;
	position: relative;
	cursor: pointer;
	list-style: none;
	border-radius: var(--jev-radius);
	overflow: hidden;
}
.jev-video__start::-webkit-details-marker { display: none; }
.jev-video__standbild { width: 100%; height: auto; display: block; }

/* Abspielknopf. Rein dekorativ — die Beschriftung daneben trägt die
   Bedeutung und bleibt für Screenreader sichtbar. */
.jev-video__knopf {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--jev-signal);
	display: block;
}
.jev-video__knopf::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.7rem 0 0.7rem 1.1rem;
	border-color: transparent transparent transparent var(--jev-text-invers);
	transform: translateX(0.15rem);
}
.jev-video__text {
	position: absolute;
	left: var(--jev-a-3);
	bottom: var(--jev-a-3);
	background: var(--jev-flaeche-nacht);
	color: var(--jev-text-invers);
	font-size: var(--jev-t-xs);
	padding: var(--jev-a-1) var(--jev-a-3);
	border-radius: var(--jev-knopf-radius);
}

/* Nach dem Öffnen ersetzt der Rahmen das Standbild. */
.jev-video[open] .jev-video__start { display: none; }
.jev-video__rahmen {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--jev-flaeche-nacht);
	border-radius: var(--jev-radius);
	overflow: hidden;
}
.jev-video__rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.jev-video__hinweis { font-size: var(--jev-t-xs); color: var(--jev-text-leise); margin-top: var(--jev-a-2); }

@media (prefers-reduced-motion: reduce) {
	.jev-video__start { transition: none; }
}

/* ---------- Bewerbungsformular ---------------------------------------

   Drei Schritte, ohne JavaScript. Rechts ein Musterstreifen, der zugleich
   die Fortschrittsanzeige ist: Er liegt von Anfang an da, zunaechst blass
   hinter einem Schleier aus Papier, und wird mit jedem Schritt weiter farbig.
   -------------------------------------------------------------------- */

/*
 * Kein eigener Grund und keine Karte — das Formular steht auf der Seite.
 *
 * Der Abschnitt verzichtet auf .jev-huelle, damit der Musterstreifen den
 * Fensterrand erreicht. Das linke Polster stellt stattdessen selbst die
 * Ausrichtung auf das Raster der übrigen Abschnitte her: derselbe Wert, den
 * die Hülle als Rand ließe, sobald das Fenster breiter als der Satzspiegel
 * ist.
 */
.jev-abschnitt.jev-formularblock {
	/* Kein senkrechtes Polster am Abschnitt: Der Musterstreifen soll oben und
	   unten an die Nachbarabschnitte stoßen. Der Abstand sitzt deshalb am
	   Inhalt, nicht am Abschnitt. */
	padding-block: 0;
	padding-left: max(var(--jev-a-4), calc((100% - var(--jev-breite)) / 2));
	padding-right: 0;
}

.jev-bewerbung__raster { display: grid; grid-template-columns: 1fr; }
@media (min-width: 46rem) {
	.jev-bewerbung__raster {
		/* Schmaler als zuvor (war 12–24rem): Der Streifen ist Begleitung, nicht
		   Hauptsache. */
		grid-template-columns: minmax(0, 1fr) clamp(7rem, 12vw, 12rem);
		gap: var(--jev-a-5);
	}
}

/* Begrenzt, damit die Felder auf breiten Fenstern nicht ausufern — der
   Streifen läuft weiter bis zum Rand. */
.jev-bewerbung__inhalt {
	min-width: 0;
	max-width: 58rem;
	/* Derselbe Wert wie im Partnerbereich darüber (a-7), damit die beiden
	   Abschnitte oben und unten denselben Anlauf haben. */
	padding-block: var(--jev-a-7);
	padding-right: var(--jev-a-4);
}

.jev-abschnitt.jev-formularblock .jev-eyebrow {
	color: var(--jev-signal);
	margin-bottom: var(--jev-a-2);
}

.jev-bewerbung__titel { margin: 0 0 var(--jev-a-4); max-width: 24ch; }
.jev-bewerbung__akzent { display: block; color: var(--jev-signal); }

/* Schrittangabe als Text — der Streifen zeigt den Fortschritt zusaetzlich,
   aber die Auskunft darf nicht allein an einer Flaeche haengen. */
.jev-bewerbung__zaehler {
	font-family: var(--jev-schrift-titel);
	font-size: var(--jev-t-xs);
	letter-spacing: 0.14em; /* wie die Eyebrow-Zeilen */
	text-transform: uppercase;
	color: var(--jev-text-leise);
	margin: 0 0 var(--jev-a-3);
}
.jev-bewerbung__zaehler b { color: var(--jev-text-titel); font-weight: 400; }

.jev-bewerbung__frage {
	font-family: var(--jev-schrift-text);
	text-transform: none;
	font-weight: 500;
	font-size: var(--jev-t-l);
	color: var(--jev-text-titel);
	margin: 0 0 var(--jev-a-5);
}

.jev-bewerbung__block { display: none; }
.jev-bewerbung__felder { display: flex; flex-direction: column; gap: var(--jev-a-4); }

/* Zwei Felder je Zeile. `align-items: start` verhindert, dass eine
   umbrechende Beschriftung die Nachbarspalte nach unten schiebt. */
.jev-bewerbung__paar,
.jev-bewerbung__ort { display: grid; gap: var(--jev-a-3); align-items: start; }
@media (min-width: 40rem) {
	.jev-bewerbung__paar { grid-template-columns: 1fr 1fr; }
	.jev-bewerbung__ort  { grid-template-columns: 8rem 1fr; }
}

.jev-bewerbung__steuer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jev-a-3);
	margin-top: var(--jev-a-5);
	padding-top: var(--jev-a-4);
	border-top: 1px solid var(--jev-rand);
}
.jev-bewerbung__zurueck {
	cursor: pointer;
	font-size: var(--jev-t-s);
	color: var(--jev-text-leise);
	text-decoration: underline;
	text-underline-offset: 3px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.jev-bewerbung__zusage,
.jev-bewerbung__wink-fest {
	font-size: var(--jev-t-xs);
	color: var(--jev-text-leise);
	margin: 0;
	max-width: 40ch;
}
.jev-bewerbung__wink { display: none; font-size: var(--jev-t-xs); color: var(--jev-text-leise); }

/* Die Schaltung liegt in drei Radiobuttons vor dem Raster. */
.jev-bewerbung__schalter { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

#jev-schritt-1:checked ~ .jev-bewerbung__raster .jev-bewerbung__block--1,
#jev-schritt-2:checked ~ .jev-bewerbung__raster .jev-bewerbung__block--2,
#jev-schritt-3:checked ~ .jev-bewerbung__raster .jev-bewerbung__block--3 { display: block; }

/*
 * Gesperrte Weiterschaltung. Die Bedingung muss flach bleiben: :has() darf
 * nicht in :has() verschachtelt werden, sonst ist der ganze Selektor ungueltig
 * und die Regel faellt still weg. Deshalb je Auswahlgruppe eine eigene
 * Bedingung ueber :not(:has(...)).
 */
.jev-bewerbung__block--1:not(:has(input[name="jev_situation"]:checked)) .jev-bewerbung__weiter,
.jev-bewerbung__block--1:not(:has(input[name="jev_modell"]:checked)) .jev-bewerbung__weiter,
.jev-bewerbung__block--2:has(textarea:placeholder-shown) .jev-bewerbung__weiter {
	pointer-events: none;
	opacity: 0.45;
}
.jev-bewerbung__block--1:not(:has(input[name="jev_situation"]:checked)) .jev-bewerbung__wink,
.jev-bewerbung__block--1:not(:has(input[name="jev_modell"]:checked)) .jev-bewerbung__wink,
.jev-bewerbung__block--2:has(textarea:placeholder-shown) .jev-bewerbung__wink { display: inline; }

/*
 * Musterstreifen. Der Schleier ist halbdurchlaessig, damit das Muster von
 * Beginn an sichtbar bleibt — blass, wo es noch nicht erreicht ist, voll
 * farbig darunter.
 */
.jev-bewerbung__streifen { position: relative; min-height: 120px; align-self: stretch; }
.jev-bewerbung__streifen::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	/* Der Schleier hängt unten, damit sich der Streifen von oben nach unten
	   färbt — in derselben Richtung, in der das Formular ausgefüllt wird. */
	bottom: 0;
	background: color-mix(in srgb, var(--jev-grund) 84%, transparent);
	border-top: 2px solid var(--jev-signal);
	transition: height 0.35s ease-out;
}
@media (prefers-reduced-motion: reduce) {
	.jev-bewerbung__streifen::after { transition: none; }
}
#jev-schritt-1:checked ~ .jev-bewerbung__raster .jev-bewerbung__streifen::after { height: 66.7%; }
#jev-schritt-2:checked ~ .jev-bewerbung__raster .jev-bewerbung__streifen::after { height: 33.3%; }
#jev-schritt-3:checked ~ .jev-bewerbung__raster .jev-bewerbung__streifen::after { height: 0; border-top-width: 0; }

/* Auf schmalen Geraeten wird aus dem Streifen ein Band ueber dem Formular. */
@media (max-width: 45.99rem) {
	/*
	 * Über die volle Fensterbreite: Der Abschnitt hält links einen Rand, den
	 * das Band hier zurücknimmt — sonst begänne es eingerückt und liefe nur
	 * rechts aus.
	 */
	.jev-bewerbung__streifen {
		min-height: 84px;
		order: -1;
		margin-left: calc(var(--jev-a-4) * -1);
	}
	.jev-bewerbung__streifen::after {
		left: auto; right: 0; top: 0; bottom: 0; height: auto !important;
		border-bottom: 0; border-left: 2px solid var(--jev-signal);
		transition: width 0.35s ease-out;
	}
	#jev-schritt-1:checked ~ .jev-bewerbung__raster .jev-bewerbung__streifen::after { width: 66.7%; }
	#jev-schritt-2:checked ~ .jev-bewerbung__raster .jev-bewerbung__streifen::after { width: 33.3%; }
	#jev-schritt-3:checked ~ .jev-bewerbung__raster .jev-bewerbung__streifen::after { width: 0; border-left-width: 0; }
}

/* ---------- Felder ---------------------------------------------------- */

/* Formularfelder stecken in <p>. Die Lesebreiten-Regel aus basis.css
   (p { max-width: 68ch }) deckelte sie deshalb auf 714px, wodurch das
   E-Mail-Feld schmaler wurde als die Felder darüber. Für Eingaben gilt die
   Zeilenlänge nicht — sie sollen die Spalte füllen. */
.jev-feld {
	display: flex;
	flex-direction: column;
	gap: var(--jev-a-2);
	margin: 0;
	max-width: none;
}
.jev-feld label,
.jev-feldgruppe legend {
	font-size: var(--jev-t-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jev-text-titel);
}
.jev-feld input,
.jev-feld textarea {
	font: inherit;
	font-size: var(--jev-t-s);
	min-height: 44px; /* Mindestgröße für Tippziele */
	padding: var(--jev-a-2);
	/* Leichte warme Tönung, damit die Felder sich vom Papier abheben, ohne
	   einen zweiten Farbwert einzuführen. */
	background: color-mix(in srgb, var(--jev-flaeche-warm) 28%, transparent);
	color: var(--jev-text);
	border: 1px solid var(--jev-rand-stark);
	border-radius: var(--jev-radius);
	width: 100%;
	/* Ohne diese Zeile bringt ein <input> seine eigene Wunschbreite mit und
	   wird schmaler als die Felder darüber. */
	box-sizing: border-box;
	min-width: 0;
}
.jev-feld textarea { min-height: 5.5rem; }
.jev-feld input:focus-visible,
.jev-feld textarea:focus-visible { outline: 2px solid var(--jev-signal); outline-offset: 1px; }

.jev-feldgruppe { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; }
/* <legend> ist kein gewöhnliches Flex-Kind — `gap` greift daran nicht, der
   Abstand zu den Knöpfen war deshalb null. Er muss als Außenabstand gesetzt
   werden, und zwar auf denselben Wert wie bei den übrigen Beschriftungen. */
.jev-feldgruppe legend { margin-bottom: var(--jev-a-2); }
.jev-wahl { display: flex; flex-wrap: wrap; gap: var(--jev-a-2); }
.jev-wahl label {
	display: inline-flex;
	align-items: center;
	gap: var(--jev-a-2);
	min-height: 44px;
	padding: 0 var(--jev-a-3);
	border: 1px solid var(--jev-rand-stark);
	border-radius: var(--jev-knopf-radius);
	font-size: var(--jev-t-s);
	cursor: pointer;
}
/* Der Radiobutton bleibt sichtbar — er ist die Tastatur- und Screenreader-
   Bedienung. Die Umrandung ist nur die zusätzliche optische Bestätigung. */
.jev-wahl label:has(input:checked) {
	border-color: var(--jev-text-titel);
	box-shadow: inset 0 0 0 1px var(--jev-text-titel);
	background: color-mix(in srgb, var(--jev-lagune) 6%, transparent);
}

/* Zustimmungen als Tippfläche statt nacktem Kästchen. */
.jev-zustimmung { display: grid; gap: var(--jev-a-2); }
/*
 * Zwei Spalten nur, wenn es auch zwei Häkchen gibt. Seit die Zustimmung zu den
 * „Bewerbungsbedingungen" weg ist, steht dort eines — und ein Kästchen über
 * die halbe Breite sah aus, als fehlte daneben etwas.
 */
@media (min-width: 52rem) {
	.jev-zustimmung:has(> label + label) { grid-template-columns: 1fr 1fr; }
}
.jev-zustimmung label {
	display: grid;
	grid-template-columns: 1.25rem 1fr;
	gap: var(--jev-a-3);
	align-items: start;
	min-height: 44px;
	padding: var(--jev-a-2) var(--jev-a-3);
	border: 1px solid var(--jev-rand);
	border-radius: var(--jev-radius);
	font-size: var(--jev-t-s);
	cursor: pointer;
}
.jev-zustimmung label:has(input:checked) { border-color: var(--jev-text-titel); }
.jev-zustimmung input { margin-top: 0.3rem; width: 1.15rem; height: 1.15rem; accent-color: var(--jev-lagune); }

/* Honigtopf. Nicht display:none — manche Bots erkennen das und lassen das
   Feld dann leer. */
.jev-honig { position: absolute; left: -9999px; }

.jev-meldung { padding: var(--jev-a-3); border-radius: var(--jev-radius); font-size: var(--jev-t-s); margin-bottom: var(--jev-a-4); }
.jev-meldung--erfolg { background: color-mix(in srgb, var(--jev-lagune) 12%, transparent); }
.jev-meldung--fehler { background: color-mix(in srgb, var(--jev-bluete) 18%, transparent); }

/* Selbst gehostetes Video: füllt denselben Platz wie die Vimeo-Einbindung. */
.jev-video--datei { border-radius: var(--jev-radius); overflow: hidden; background: var(--jev-flaeche-nacht); }
.jev-video--datei video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Direkt eingebundener Rahmen: gleiche Form wie die Zwei-Klick-Fassung. */
.jev-video--direkt { display: block; }
.jev-video--direkt .jev-video__rahmen { border-radius: var(--jev-radius); }

/* ---------- 14 · Angebot und Konditionen als Karten -------------------- */

/*
 * Drei Karten nach der Vorlage vom 14.08.2026, auf jeder Breite.
 *
 * Vorher stand hier eine Vergleichstabelle: dreizehn Zeilen mit Haken und
 * Strichen, auf schmalen Geräten seitwärts rollend, mit haftender Merkmals-
 * spalte. Sie zeigte mehr — nämlich auch, was ein Modell NICHT hat — brauchte
 * dafür aber Zeilenbeschriftungen und Gruppentitel, die in der Vorlage nicht
 * vorkommen. Die Karten sagen dasselbe über „Alles aus …“.
 */

.jev-vergleich__netto {
	margin: 0 0 var(--jev-a-4);
	font-family: var(--jev-schrift-titel);
	font-size: var(--jev-t-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--jev-text-leise);
}

/*
 * Vier gemeinsame Zeilen für alle Karten: Kopf, Preis, Liste, Knopf.
 *
 * Über `subgrid` liegen sie karteübergreifend auf einer Linie. Ohne das
 * verschieben sich Preis und Liste einer Karte gegen die anderen, sobald ein
 * „für wen“ zweizeilig umbricht — und genau das tut es bei zwei von drei
 * Modellen. Browser ohne subgrid bekommen die natürliche Höhe; die Karten
 * stehen dann ungleich, lesbar bleibt es.
 *
 * Drei feste Stufen, seit es vier Modelle sind (Christophers Wunsch,
 * 14.09.2026):
 *   ab 75rem     vier Spalten, alle Modelle in einer Reihe;
 *   46–75rem     zwei Spalten, zwei Reihen. auto-fit ergab hier drei Karten
 *                und die vierte allein darunter;
 *   unter 46rem  ein Schieber mit Einrasten wie bei den Techniken, ohne
 *                Skript. Untereinander wären vier Karten mit bis zu zehn
 *                Punkten eine sehr lange Strecke.
 */
.jev-vergleich__kacheln {
	display: grid;
	gap: var(--jev-a-4);
	align-items: stretch;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: auto auto auto;
}
.jev-vergleich__kacheln--knopf { grid-template-rows: auto auto 1fr auto; }

@media (max-width: 74.99rem) {
	/* Zwei Reihen brauchen die gemeinsamen Zeilen zweimal — sonst fehlt der
	   zweiten Reihe die Vorlage, und ihre Knöpfe stünden versetzt. */
	.jev-vergleich__kacheln {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(2, auto auto auto);
	}
	.jev-vergleich__kacheln--knopf { grid-template-rows: repeat(2, auto auto 1fr auto); }
}

@media (max-width: 45.99rem) {
	/*
	 * Der Schieber läuft über beide Fensterränder hinaus, die Einrückung
	 * wandert in den Innenabstand — gleiche Bauweise wie die Techniken. Die
	 * nächste Karte lugt rechts hervor und sagt, dass es weitergeht.
	 */
	.jev-vergleich__kacheln {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		margin-inline: calc(var(--jev-a-4) * -1);
		padding: 0 var(--jev-a-4) var(--jev-a-3);
	}
	.jev-vergleich__kacheln::-webkit-scrollbar { display: none; }
	/* Ohne Raster darüber gibt es kein subgrid: Die Karte ordnet ihre Zeilen
	   selbst, die Liste nimmt den Rest, der Knopf bleibt unten. */
	.jev-vergleich__kacheln > .jev-vergleich__kachel {
		flex: 0 0 84%;
		/* Gleiche Höhe: `height: 100%` aus dem Raster findet im Schieber keine
		   Höhe, auf die es sich beziehen kann, und hielte jede Karte auf ihrem
		   Inhalt. Mit `auto` streckt der Schieber alle auf die längste. */
		height: auto;
		scroll-snap-align: start;
		grid-template-rows: auto auto 1fr;
	}
	.jev-vergleich__kacheln--knopf > .jev-vergleich__kachel { grid-template-rows: auto auto 1fr auto; }
	.jev-vergleich__kacheln > .jev-vergleich__kachel:first-child { scroll-margin-left: var(--jev-a-4); }
}

.jev-vergleich__kachel {
	background: var(--jev-grund);
	border: 1px solid var(--jev-rand);
	border-radius: var(--jev-radius);
	/* 24 statt 40 px (Christophers Wunsch, 14.09.2026): Bei vier Spalten
	   blieben für den Text sonst kaum 200 px, und fast jeder Punkt brach um. */
	padding: var(--jev-a-4);
	display: grid;
	grid-template-rows: subgrid;
	/* Ein subgrid erbt den Zeilenabstand des Rasters darüber — die 24 px
	   zwischen den Karten standen so auch zwischen Kopf, Preis, Liste und
	   Knopf jeder Karte. Innen trennen die eigenen Ränder; der Abstand
	   zwischen zwei Kartenreihen im 2×2 bleibt, er liegt ausserhalb. */
	row-gap: 0;
	grid-row: span 3;
	align-content: start;
	height: 100%;
}
.jev-vergleich__kacheln--knopf .jev-vergleich__kachel { grid-row: span 4; }

/*
 * Die Linie der ausgezeichneten Karte liegt innen als Schatten, damit sie nicht
 * zwei Pixel breiter steht als die beiden anderen. Kein zweiter Ton dazu — die
 * Linie allein zeichnet aus.
 */
.jev-vergleich__kachel--hervor {
	border-color: transparent;
	box-shadow: inset 0 0 0 2px var(--jev-signal);
}

.jev-vergleich__marke {
	display: block;
	margin-bottom: var(--jev-a-2);
	font-family: var(--jev-schrift-titel);
	font-size: var(--jev-t-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--jev-signal);
}
/*
 * Titelschrift in Versalien wie die Namen der Technik- und Studiokarten
 * (Christophers Wunsch, 14.09.2026: „die eigenen Fonts übernehmen"). Vorher
 * Outfit in Stärke 600 — die gibt es nicht, geladen sind 400 und 500, und der
 * Browser rechnete die Fettung selbst. Das sah nach fremder Schrift aus.
 */
.jev-vergleich__name {
	margin: 0;
	font-family: var(--jev-schrift-titel);
	font-size: var(--jev-t-m);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--jev-text-titel);
}
.jev-vergleich__fuer {
	margin: var(--jev-a-2) 0 0;
	font-size: var(--jev-t-s);
	line-height: 1.4;
	color: var(--jev-text-leise);
}

/* Nur unten eine Linie: Über dem Preis steht schon „für wen“, darüber muss
   nicht auch noch getrennt werden. */
.jev-vergleich__kachelpreis {
	margin: var(--jev-a-3) 0;
	padding-bottom: var(--jev-a-3);
	border-bottom: 1px solid var(--jev-rand);
}
.jev-vergleich__zahl {
	display: block;
	font-family: var(--jev-schrift-text);
	/* 500 wie die Preistafel der Profile — 700 gibt es von Outfit nicht, der
	   Browser fettete künstlich nach. */
	font-weight: 500;
	font-size: var(--jev-t-xl);
	line-height: 1.1;
	color: var(--jev-text);
	/* Zahlen in gleicher Laufweite, damit die Preise untereinander stehen. */
	font-variant-numeric: tabular-nums;
}
/* Der Aufschlag neben der Gebühr in Signal, wie in der Kundenvorlage vom
   14.09.2026 — er ist der Unterschied zwischen zwei gleichen Gebühren. */
.jev-vergleich__plus { color: var(--jev-signal); white-space: nowrap; }
.jev-vergleich__unter {
	display: block;
	margin-top: var(--jev-a-1);
	font-size: var(--jev-t-xs);
	color: var(--jev-text-leise);
}

.jev-vergleich__punkte {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: calc(var(--jev-a-3) * 0.75);
	align-content: start;
	font-size: var(--jev-t-s);
	line-height: 1.4;
}
/* Zwei Spalten statt eines Einzugs: Bricht die Zeile um, steht die zweite unter
   der ersten und nicht unter dem Haken. */
.jev-vergleich__punkt {
	display: grid;
	grid-template-columns: 1.25rem minmax(0, 1fr);
	gap: var(--jev-a-2);
	color: var(--jev-text);
}
.jev-vergleich__haken {
	color: var(--jev-text-titel);
	line-height: inherit;
}

/* Der Knopf sitzt unten bündig, damit die drei auf einer Linie stehen. */
.jev-vergleich__kachelaktion { margin: var(--jev-a-4) 0 0; align-self: end; }
.jev-vergleich__kachelaktion .jev-knopf { width: 100%; justify-content: center; }
/*
 * Nacht statt Blüte. Auf der Karte in Papier stand Blüte auf einem verwandten
 * Ton, und Weiß auf Blüte lag bei 2,70:1 unter der Richtlinie — Papier auf
 * Nacht liegt bei 12,06:1.
 */
.jev-vergleich__kachelaktion .jev-knopf--signal {
	background: var(--jev-flaeche-nacht);
	color: var(--jev-knopf-text);
}
.jev-vergleich__kachelaktion .jev-knopf--signal:hover,
.jev-vergleich__kachelaktion .jev-knopf--signal:focus-visible {
	background: color-mix(in srgb, var(--jev-nacht) 85%, #000);
}

/*
 * Hinweiskasten unter den Karten. Heller als der Kasten aus Abschnitt 0: Auf
 * dem weißen Grund des Abschnitts wirkte Creme wie eine zweite Fläche. Die
 * Breite ist begrenzt, sonst liefe der Satz über die ganzen 1200px und läse
 * sich als Streifen, nicht als Kasten.
 */
.jev-vergleich__zusatz {
	margin: var(--jev-a-5) 0 0;
	max-width: 46rem;
	padding: var(--jev-a-3) var(--jev-a-4);
	background: var(--jev-grund);
	border: 1px solid var(--jev-rand);
	border-left: 3px solid var(--jev-signal);
	border-radius: var(--jev-radius);
	font-size: var(--jev-t-s);
	line-height: 1.5;
	color: var(--jev-text);
}

.jev-vergleich .jev-fussnote { margin-top: var(--jev-a-4); }


/* =====================================================================
   STUDIO-VERZEICHNIS — Städte und Behandlungen als Linkliste
   =====================================================================

   Links Text, rechts die Listen, dazwischen eine Haarlinie. Die Listen sind
   bewusst keine Pillen und keine Karten: Es sind Links, und sie sollen wie
   Links aussehen — die Zeile mit der Zahl am rechten Rand ist ein
   Inhaltsverzeichnis, kein Bedienelement.
   ===================================================================== */

.jev-verzeichnis__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
	gap: var(--jev-a-5);
}
/* Die Linie in der Mitte ist eine eigene Spalte und kein Rand an einer der
   beiden Hälften: So steht sie mittig zwischen ihnen, egal welche höher ist. */
.jev-verzeichnis__raster::before {
	content: "";
	grid-column: 2;
	grid-row: 1;
	background: var(--jev-rand);
}
.jev-verzeichnis__text { grid-column: 1; }
.jev-verzeichnis__listen { grid-column: 3; }

.jev-verzeichnis__text .jev-fliess { margin-top: var(--jev-a-3); max-width: 46ch; }

.jev-verzeichnis__gruppe + .jev-verzeichnis__gruppe { margin-top: var(--jev-a-4); }

.jev-verzeichnis__marke {
	margin: 0;
	font-family: var(--jev-schrift-text);
	font-size: var(--jev-t-xs);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--jev-text-leise);
}

.jev-verzeichnis__liste {
	list-style: none;
	margin: var(--jev-a-2) 0 0;
	padding: 0;
	columns: 2;
	column-gap: var(--jev-a-4);
}
.jev-verzeichnis__liste li { break-inside: avoid; }
.jev-verzeichnis__liste a,
.jev-verzeichnis__liste span {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--jev-a-2);
	/* 44px hoch: Die Zeilen liegen dicht untereinander und sind Tippziele. */
	min-height: 44px;
	padding-block: var(--jev-a-2);
	border-bottom: 1px solid var(--jev-rand);
	font-size: var(--jev-t-s);
	color: var(--jev-text);
	text-decoration: none;
	transition: color 0.18s ease, border-color 0.18s ease;
}
.jev-verzeichnis__liste a:hover,
.jev-verzeichnis__liste a:focus-visible {
	color: var(--jev-text-titel);
	border-color: var(--jev-text-titel);
}
/* Die Stadt, auf deren Seite man steht: kein Link, aber auch nicht blass —
   sie ist die einzige Zeile, die etwas über den Ort aussagt, an dem man ist. */
.jev-verzeichnis__liste [aria-current] {
	color: var(--jev-text-titel);
	font-weight: 500;
	border-color: var(--jev-text-titel);
}
.jev-verzeichnis__liste b {
	font-weight: 400;
	color: var(--jev-platzhalter);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 53.75rem) {
	.jev-verzeichnis__raster { grid-template-columns: minmax(0, 1fr); gap: var(--jev-a-4); }
	.jev-verzeichnis__raster::before { display: none; }
	.jev-verzeichnis__text,
	.jev-verzeichnis__listen { grid-column: 1; }
	.jev-verzeichnis__listen { grid-row: 2; }
	.jev-verzeichnis__liste { columns: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ANTWORT ZUERST
   Einleitung links, Eckdaten rechts. Das Verhältnis ist 1,4 zu 1 und nicht
   1 zu 1: Der Kasten ist eine Liste kurzer Werte, der Text daneben will
   Zeilenlänge. Gleich breit gesetzt bekäme der Text zu wenig und die Liste
   zu viel.
   ══════════════════════════════════════════════════════════════════════════ */
.jev-eckdaten__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

/*
 * Eigene Größe statt der generischen H1: `--jev-t-4xl` ist ein fester Wert,
 * und „BRASILIANISCHE" darin ist bei 375 Pixeln breiter als das Fenster —
 * ein Wort, das nirgends umbrechen kann, läuft dann aus dem Bild.
 * `overflow-wrap` ist die letzte Sicherung, falls ein Ort noch längere
 * Namen hat.
 */
.jev-eckdaten__wort :is(h1, h2) {
	margin: 0 0 var(--jev-a-3);
	font-size: clamp(1.6rem, 6.2vw, var(--jev-t-4xl));
	overflow-wrap: break-word;
}

.jev-eckdaten__einzug p {
	font-size: var(--jev-t-l);
	line-height: 1.6;
	color: var(--jev-text);
}

.jev-eckdaten__taten {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: var(--jev-a-4) 0 0;
}

.jev-eckdaten__liste {
	display: grid;
	gap: var(--jev-a-3);
	margin: 0;
	padding: var(--jev-a-4);
	border-radius: var(--jev-radius);
	background: var(--jev-flaeche-weiss);
}

/* Bezeichnung und Wert nebeneinander, die Bezeichnung in fester Spalte:
   Untereinander gelesen ergeben die Werte dann eine Kante. */
.jev-eckdaten__paar {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: 0.9rem;
	align-items: start;
}

.jev-eckdaten__paar dt {
	font-size: var(--jev-t-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jev-platzhalter);
	line-height: 1.5;
}

.jev-eckdaten__paar dd {
	margin: 0;
	font-size: var(--jev-t-s);
}

.jev-eckdaten__paar dd b {
	display: block;
	font-weight: 500;
	color: var(--jev-text-titel);
}

.jev-eckdaten__paar dd span {
	display: block;
	margin-top: 2px;
	font-size: var(--jev-t-xs);
	line-height: 1.5;
	color: var(--jev-text-leise);
}

@media (max-width: 56rem) {
	.jev-eckdaten__raster { grid-template-columns: minmax(0, 1fr); }
}

/* Unter 26rem reicht die Breite für zwei Spalten im Paar nicht mehr —
   die Bezeichnung stünde dann über dem Wert statt daneben. */
@media (max-width: 26rem) {
	.jev-eckdaten__paar { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   GEGENÜBERSTELLUNG
   Eine Tabelle, die auf schmalen Geräten in ihrem eigenen Bereich rollt.
   Die Mindestbreite ist nötig: Ohne sie quetscht der Browser drei Spalten
   in 340 Pixel und bricht jedes zweite Wort um.
   ══════════════════════════════════════════════════════════════════════════ */
.jev-gegenstellung__rolle {
	overflow-x: auto;
	border-radius: var(--jev-radius);
	-webkit-overflow-scrolling: touch;
}

.jev-gegenstellung__tabelle {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	background: var(--jev-flaeche-weiss);
}

.jev-gegenstellung__tabelle th,
.jev-gegenstellung__tabelle td {
	padding: 0.8rem 1.1rem;
	border-bottom: 1px solid var(--jev-rand);
	font-size: var(--jev-t-s);
	line-height: 1.6;
	text-align: left;
	vertical-align: top;
}

.jev-gegenstellung__tabelle thead th {
	font-family: var(--jev-schrift-titel);
	font-size: var(--jev-t-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jev-text-titel);
}

/* Das Merkmal ist die Achse, nicht die Aussage — es tritt zurück,
   damit die beiden Seiten daneben gelesen werden. */
.jev-gegenstellung__tabelle tbody th {
	font-weight: 400;
	color: var(--jev-platzhalter);
}

.jev-gegenstellung__tabelle tr:last-child th,
.jev-gegenstellung__tabelle tr:last-child td {
	border-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   BEHANDLUNGSPREISE
   Dieselbe Ordnung wie auf dem Studioprofil: erst ob, dann wie oft. Die
   Klassen sind eigene — das Profil trägt seine in studio.css, und ein
   gemeinsamer Name hieße, dass eine Änderung am einen die andere Seite trifft.
   ══════════════════════════════════════════════════════════════════════════ */
.jev-behandlungspreise__einzel {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--jev-a-3);
}

.jev-behandlungspreis {
	padding: var(--jev-a-4);
	border-radius: var(--jev-radius);
	background: var(--jev-flaeche-weiss);
}

/* Die Kombination ist die Empfehlung, nicht die dritte Möglichkeit —
   sie trägt deshalb die dunkle Fläche. */
.jev-behandlungspreis--betont {
	background: var(--jev-text-titel);
	color: var(--jev-weiss);
}

.jev-behandlungspreis h3 {
	margin: 0 0 var(--jev-a-2);
	font-family: var(--jev-schrift-titel);
	font-size: var(--jev-t-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.jev-behandlungspreis__betrag {
	margin: 0;
	font-size: 1.9rem;
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.jev-behandlungspreis__zusatz {
	margin: var(--jev-a-2) 0 0;
	font-size: var(--jev-t-xs);
	line-height: 1.6;
	color: var(--jev-text-leise);
}

.jev-behandlungspreis--betont .jev-behandlungspreis__zusatz {
	color: color-mix(in srgb, var(--jev-weiss) 78%, transparent);
}

.jev-behandlungspreise__zwischentitel {
	margin: var(--jev-a-4) 0 var(--jev-a-2);
	font-family: var(--jev-schrift-text);
	font-size: var(--jev-t-m);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--jev-text-titel);
}

/* Fest zwei Spalten, nicht auto-fit: Bei vier Paketen ergab auto-fit drei
   Spalten — das vierte stand allein neben zwei Löchern. */
.jev-behandlungspreise__pakete {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.jev-paketzeile {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "name summe" "je je";
	gap: 4px var(--jev-a-3);
	align-items: baseline;
	margin: 0;
	padding: 0.9rem 1.2rem;
	border-radius: var(--jev-radius);
	background: var(--jev-flaeche-weiss);
	font-size: var(--jev-t-s);
}

.jev-paketzeile b { grid-area: name; font-weight: 500; color: var(--jev-text-titel); }

.jev-paketzeile__summe {
	grid-area: summe;
	font-size: var(--jev-t-m);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.jev-paketzeile__je {
	grid-area: je;
	font-variant-numeric: tabular-nums;
	color: var(--jev-text-leise);
}

.jev-paketzeile__spart { color: #3c7a5e; }

@media (max-width: 44rem) {
	.jev-behandlungspreise__pakete { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════
   STUDIOARCHIV: TEXT UND KOSTEN, BILDER, ZWEISPALTIGE BLÖCKE
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- Text mit Kostenkachel --------------------------------------- */

.jev-textpreise__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

/*
 * Kein `max-width` am Absatz: Die Spalte gibt die Zeilenlänge vor. Das
 * Grundblatt deckelt jedes <p> auf 68ch — in dieser Spalte wäre das enger als
 * die Spalte selbst, und rechts bliebe ein Streifen frei, den niemand sieht.
 */
.jev-textpreise__wort .jev-fliess p { max-width: none; }

/* Die einzige Fläche im ganzen Contentbereich. Deshalb trägt sie ihn auch:
   Alles, was zählt, steht darin, und alles andere steht auf dem Grund. */
.jev-kosten {
	padding: var(--jev-a-4);
	border-radius: var(--jev-radius);
	background: var(--jev-flaeche-weiss);
}

.jev-kosten__kopf,
.jev-kosten__gruppe > p {
	margin: 0 0 var(--jev-a-2);
	font-size: var(--jev-t-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jev-platzhalter);
}

.jev-kosten dl { display: grid; margin: 0; }

/* Zwischenzeile je Gruppe (Variante B, 11.09.2026): leiser als der Kopf,
   aber mit Abstand nach oben — sie trennt Körper von Gesicht. */
.jev-kosten__gruppenname {
	margin: var(--jev-a-3) 0 0;
	font-size: var(--jev-t-xs);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jev-text-leise);
}
.jev-kosten__kopf + .jev-kosten__gruppenname { margin-top: 0; }

/* Bezeichnung links, Betrag rechts — die Beträge stehen dadurch auf einer
   Kante und lassen sich untereinander lesen statt einzeln zu suchen. */
.jev-kosten dl > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--jev-rand);
}
.jev-kosten dl > div:last-child { border-bottom: 0; }

.jev-kosten dt { font-size: var(--jev-t-s); color: var(--jev-text-titel); }
.jev-kosten dt small {
	display: block;
	margin-top: 2px;
	font-size: var(--jev-t-xs);
	line-height: 1.5;
	color: var(--jev-text-leise);
}
.jev-kosten dd {
	margin: 0;
	font-size: var(--jev-t-m);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--jev-text-titel);
	white-space: nowrap;
}

/* Die Kombination ist die Empfehlung — der einzige Farbakzent in der Kachel. */
.jev-kosten__betont dt { font-weight: 500; }
.jev-kosten__betont dd { color: var(--jev-signal); }

.jev-kosten__gruppe {
	margin-top: var(--jev-a-4);
	padding-top: var(--jev-a-3);
	border-top: 1px solid var(--jev-rand);
}

.jev-kosten__spar { color: #3c7a5e; }

.jev-kosten__fuss {
	margin: var(--jev-a-3) 0 0;
	max-width: none;
	font-size: var(--jev-t-xs);
	line-height: 1.55;
	color: var(--jev-platzhalter);
}

/* ---------- Bilder der Studios ------------------------------------------ */

.jev-stadtbilder--band img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 24 / 7;
	object-fit: cover;
}

/* Spaltenzahl nach Bilderzahl: Stuttgart hat drei, Erfurt vier. Fest auf vier
   gesetzt bliebe bei dreien rechts eine Lücke. */
.jev-stadtbilder--mosaik {
	display: grid;
	grid-template-columns: repeat(var(--jev-mosaik-spalten, 4), 1fr);
	gap: 6px;
}
.jev-stadtbilder--mosaik img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

/* ---------- Zweispaltig: Kopf links, Inhalt rechts ----------------------- */

/*
 * Die Überschrift steht ÜBER dem Inhalt, nicht daneben.
 *
 * Erster Versuch war „Kopf links, Inhalt rechts" für jeden Block. Gemessen kam
 * dabei heraus: beim Fragenblock 771 Pixel leere Spalte neben einer
 * zweiwortigen Überschrift, beim Vergleich 154, und „Häufige Gründe — und wann
 * du vorher fragen solltest" brach in der 20rem-Spalte über fünf Zeilen.
 *
 * Der Grund: Nur ein Block hat rechts etwas, das eine feste Spalte trägt — die
 * Kostenkachel. Sie ist Nachschlagewerk zum Fließtext daneben. Tabelle, Listen
 * und Fragen sind das nicht; sie wollen Breite, keinen Nachbarn.
 *
 * Der Wechsel entsteht jetzt aus dem Inhalt selbst: ein Zweispalter mit
 * Kachel, eine breite Tabelle, zwei Karten nebeneinander, eine Liste. Vier
 * verschiedene Formen, ohne dass ein Raster sie erzwingt.
 */
.jev-studios .jev-gegenstellung .jev-kopfgruppe,
.jev-studios .jev-gegenueber .jev-kopfgruppe,
.jev-studios .jev-faq .jev-kopfgruppe { margin-bottom: var(--jev-a-4); }

/* Der Einleitungssatz bleibt lesbar schmal, auch wenn der Block breit ist. */
.jev-studios .jev-gegenstellung .jev-kopfgruppe .jev-fliess,
.jev-studios .jev-gegenueber .jev-kopfgruppe .jev-fliess { max-width: 62ch; }

/*
 * Die Überschrift darf über die volle Breite laufen und bricht dort nicht
 * mehr in fünf Zeilen. `balance` verteilt die Wörter gleichmäßig, statt eine
 * lange und eine kurze Zeile zu setzen.
 */
.jev-studios .jev-gegenstellung h2,
.jev-studios .jev-gegenueber h2,
.jev-studios .jev-faq h2 { max-width: 24ch; text-wrap: balance; }

/*
 * Die Haarlinie ersetzt den Farbwechsel. Sie sitzt an der Hülle, nicht am
 * Abschnitt: So läuft sie auf derselben Breite wie der Inhalt und nicht von
 * Fensterkante zu Fensterkante.
 *
 * Und der Abschnitt gibt sein eigenes oberes Polster ab. Sonst stünden beide
 * übereinander — 96 Pixel am Abschnitt plus 58 an der Hülle, dazu 96 unten am
 * vorherigen: zweieinhalb Handbreit zwischen zwei Absätzen. Jetzt trägt die
 * Hülle den Abstand über der Linie, der Abschnitt den darunter.
 */
.jev-studios .jev-abschnitt + .jev-abschnitt { padding-top: 0; }
.jev-studios .jev-abschnitt + .jev-abschnitt > .jev-huelle {
	border-top: 1px solid var(--jev-rand);
	padding-top: clamp(2.5rem, 5vw, 4rem);
}

/*
 * Direkt unter dem Finder weder Linie noch großer Abstand: Die Karte endet mit
 * einer harten Kante über die volle Breite — eine Haarlinie 150 Pixel darunter
 * trennt nichts mehr, sie steht nur im Weg.
 */
.jev-studios .jev-finder + .jev-abschnitt { padding-top: clamp(2.5rem, 5vw, 4rem); }
.jev-studios .jev-finder + .jev-abschnitt > .jev-huelle {
	border-top: 0;
	padding-top: 0;
}

/* Nach einem Bild ebenso — das Bild ist die Zäsur. */
.jev-studios .jev-stadtbilder + .jev-abschnitt { padding-top: clamp(2.5rem, 5vw, 4rem); }
.jev-studios .jev-stadtbilder + .jev-abschnitt > .jev-huelle {
	border-top: 0;
	padding-top: 0;
}

@media (max-width: 56rem) {
	.jev-textpreise__raster { grid-template-columns: minmax(0, 1fr); }
	.jev-stadtbilder--mosaik { grid-template-columns: 1fr 1fr; }
	.jev-stadtbilder--band img { aspect-ratio: 16 / 9; }
}

/* ---------- Feinschliff im Studioarchiv --------------------------------- */

/*
 * Die Trennlinie sitzt an der Karte, nicht 150 Pixel darunter.
 *
 * Sie gehört an den Abschnitt und läuft deshalb von Kante zu Kante — genau
 * wie die Karte darüber. Auf Hüllenbreite wäre sie schmaler als das, was sie
 * abschließt, und das sähe nach Versehen aus.
 */
.jev-studios .jev-finder { border-bottom: 1px solid var(--jev-rand); }

/*
 * Auch hier ohne Strich — die Entscheidung gilt für die ganze Seite, nicht nur
 * für die Partnerseite, auf der sie fiel.
 *
 * Hier trug er allerdings mehr als dort: Ohne Flächen war er das Zeichen, an
 * dem ein neuer Abschnitt beginnt. Diese Aufgabe hat jetzt die Haarlinie über
 * dem Abschnitt, die dort ohnehin steht.
 */
.jev-studios .jev-abschnitt .jev-eyebrow { margin-bottom: var(--jev-a-3); }

/* Hinweis und Fußnote stehen wieder schlicht unter dem Inhalt — ohne Raster
   braucht es dafür keine Regel mehr. */

/*
 * Fünfzehn Fragen in einer Spalte sind 1.100 Pixel — der längste Block der
 * Seite, und das für den Teil, den die wenigsten lesen. Zwei Spalten halbieren
 * ihn.
 *
 * `columns` und nicht Grid: Damit laufen die Fragen von oben nach unten durch
 * die erste Spalte und dann durch die zweite. Im Raster liefen sie
 * links-rechts-links und wären nicht mehr in Reihenfolge zu lesen.
 * `break-inside: avoid` hält Frage und Antwort zusammen.
 */
.jev-studios .jev-faq__liste {
	max-width: none;
	columns: 2;
	column-gap: clamp(2rem, 5vw, 4rem);
}
.jev-studios .jev-faq__punkt {
	break-inside: avoid;
	/* Ohne das kippt die erste Frage in Chrome über die Spaltenkante. */
	-webkit-column-break-inside: avoid;
}

@media (max-width: 56rem) {
	.jev-studios .jev-faq__liste { columns: 1; }
}

/*
 * Das Verzeichnis auf Weiß — über die volle Breite, nicht als Kachel.
 *
 * Als Kachel war der Unterschied nicht zu sehen: Seitengrund ist #fbf6f4,
 * die Kachel #ffffff. Vier Prozent Helligkeit auseinander, dazwischen eine
 * Kante mit vier Pixeln Radius — das las sich als Versehen, nicht als Form.
 * Über die volle Breite ist Weiß eine Aussage: Hier endet der Inhalt, und
 * was kommt, ist das Register.
 *
 * Keine Haarlinie darüber, der Farbwechsel trennt schon.
 *
 * Vier Klassen, nicht drei: Die Haarlinienregel oben trägt
 * `.jev-studios .jev-abschnitt + .jev-abschnitt > .jev-huelle` und gewinnt
 * sonst über Spezifität, egal wie weit unten diese hier steht.
 */
.jev-studios .jev-abschnitt.jev-verzeichnis { background: var(--jev-flaeche-weiss); }
.jev-studios .jev-abschnitt.jev-verzeichnis > .jev-huelle { border-top: 0; }

/*
 * Und darunter der Übergang in den Fuß.
 *
 * Das Fußband trägt den Himmelston `--jev-mondschein`; ohne Verlauf stößt der
 * Seitengrund mit einer harten Kante daran. Der Verlauf beginnt erst bei 40 %
 * — die obere Hälfte bleibt Seitengrund, damit die Kachel darauf steht und
 * nicht mitten in der Farbe schwimmt.
 *
 * Am letzten Abschnitt, welcher es auch ist: Auf einer Stadtseite endet die
 * Seite mit dem Verzeichnis, auf /studios/ mit den Fragen. Den Verlauf ans
 * Verzeichnis zu hängen hätte dort die harte Kante gelassen.
 */
.jev-studios > .jev-abschnitt:last-child {
	background: linear-gradient(
		to bottom,
		var(--jev-grund) 0%,
		var(--jev-grund) 40%,
		var(--jev-mondschein) 100%
	);
}

/* Endet die Seite mit dem Verzeichnis, beginnt der Verlauf auf dessen Weiß —
   sonst schlüge die Fläche kurz vor dem Fuß auf den Seitengrund um. */
.jev-studios > .jev-abschnitt.jev-verzeichnis:last-child {
	background: linear-gradient(
		to bottom,
		var(--jev-flaeche-weiss) 0%,
		var(--jev-flaeche-weiss) 40%,
		var(--jev-mondschein) 100%
	);
}

/*
 * Die Gegenüberstellung im Stil der Kostenkachel.
 *
 * Beide sind Kacheln mit Zeilen und Haarlinien; sie sahen nur nicht so aus.
 * Der Tabelle fehlte das Polster — die erste Spalte klebte an der Kante,
 * während in der Kachel daneben 41 Pixel Luft stehen. Und die Spaltenköpfe
 * waren in Petrol gesetzt wie eine Überschrift, obwohl sie dasselbe tun wie
 * „WAS ES KOSTET": beschriften, nicht behaupten.
 *
 * Das Polster sitzt an den Zellen, nicht am Behälter: Der rollt auf schmalen
 * Geräten, und ein rechtes Polster am Rollbehälter fällt beim Rollen weg.
 */
/* Derselbe Token wie das Polster der Kostenkachel, nicht ein eigener
   clamp-Wert: Der gab bei 1280 Pixeln 38,4 gegen 24 in der Kachel. */
.jev-studios .jev-gegenstellung__tabelle { --jev-tab-luft: var(--jev-a-4); }

.jev-studios .jev-gegenstellung__tabelle th:first-child,
.jev-studios .jev-gegenstellung__tabelle td:first-child { padding-left: var(--jev-tab-luft); }
.jev-studios .jev-gegenstellung__tabelle th:last-child,
.jev-studios .jev-gegenstellung__tabelle td:last-child { padding-right: var(--jev-tab-luft); }
.jev-studios .jev-gegenstellung__tabelle thead th { padding-top: var(--jev-tab-luft); }
.jev-studios .jev-gegenstellung__tabelle tbody tr:last-child th,
.jev-studios .jev-gegenstellung__tabelle tbody tr:last-child td { padding-bottom: var(--jev-tab-luft); }

/* Spaltenkopf wie die Beschriftung der Kachel: leise, gesperrt, grau. */
.jev-studios .jev-gegenstellung__tabelle thead th {
	font-family: var(--jev-schrift-text);
	font-size: var(--jev-t-xs);
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jev-platzhalter);
}

/* Das Merkmal ist die Achse — dieselbe Rolle wie „Einzelbehandlung" unter dem
   Preis, also auch dieselbe Größe. */
.jev-studios .jev-gegenstellung__tabelle tbody th {
	font-size: var(--jev-t-xs);
	color: var(--jev-platzhalter);
}

/* Die eigene Spalte in Petrol, wie der Betrag in der Kachel: Sie ist die
   Antwort, die andere der Vergleich. */
.jev-studios .jev-gegenstellung__tabelle tbody td:last-child { color: var(--jev-text-titel); }

/* Die Fußnote steht außerhalb der Kachel und richtet sich trotzdem an ihrer
   Innenkante aus — sonst begänne sie 40 Pixel weiter links als alles, worauf
   sie sich bezieht. */
.jev-studios .jev-gegenstellung .jev-fussnote {
	padding-left: var(--jev-a-4);
	font-size: var(--jev-t-xs);
	line-height: 1.55;
	color: var(--jev-platzhalter);
}

/*
 * Die Trennlinien der Tabelle enden dort, wo der Text beginnt.
 *
 * In der Kostenkachel hören sie am Polster auf, weil sie an den Zeilen im
 * gepolsterten Kasten hängen. In der Tabelle sass die Linie an den Zellen —
 * und die Zelle umfasst ihr eigenes Polster, also lief die Linie bis an die
 * Kante der Kachel. Zwei gleiche Kacheln mit zwei verschiedenen Linien.
 *
 * Gelöst als Hintergrund an der Zeile, nicht als Rahmen: Ein Rahmen an `tr`
 * wirkt bei `border-collapse` nicht, und ein eingerückter Rahmen an der Zelle
 * geht gar nicht. Der Streifen ist einen Pixel hoch, sitzt unten und ist um
 * das Polster kürzer als die Zeile.
 */
.jev-studios .jev-gegenstellung__tabelle th,
.jev-studios .jev-gegenstellung__tabelle td { border-bottom: 0; }

.jev-studios .jev-gegenstellung__tabelle thead tr,
.jev-studios .jev-gegenstellung__tabelle tbody tr:not(:last-child) {
	background-image: linear-gradient(var(--jev-rand), var(--jev-rand));
	background-repeat: no-repeat;
	background-size: calc(100% - 2 * var(--jev-tab-luft)) 1px;
	background-position: var(--jev-tab-luft) bottom;
}


/* ══════════════════════════════════════════════════════════════════════════
   BÜHNE AUF NACHT, DAS MEDIUM IM BOGEN
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * Die Bühne wirbt um Partnerinnen, nicht um Kundinnen — sie darf ernster
 * auftreten als der Rest der Seite. Die Nachtfläche ist dabei nicht neu: Sie
 * trägt weiter unten schon die freien Gebiete und den Bewerbungsblock. Die
 * Seite hat damit oben und unten dieselbe Farbe und dazwischen das Helle.
 *
 * Der Grundton hängt am Abschnitt und nicht mehr an der linken Hälfte: Vorher
 * stiessen zwei Flächen in der Mitte aneinander, jetzt liegt das Medium als
 * Gegenstand auf einer durchgehenden.
 */
.jev-abschnitt.jev-buehne {
	background: var(--jev-nacht);
	color: var(--jev-text-invers);
	/* Die Kachel ragt über die Kante des Bogens — hier endet ihr Überstand. */
	overflow: hidden;
}

.jev-buehne .jev-buehne__titel,
.jev-buehne .jev-buehne__betont { color: var(--jev-weiss); }
.jev-buehne .jev-fliess { color: var(--jev-text-invers-leise); }

/* Haarlinien und Brotkrume vertragen auf Nacht kein Rand-Grau aus dem Hellen. */
.jev-buehne .jev-buehne__leiste,
.jev-buehne .jev-buehne__beleg { border-color: var(--jev-rand-invers); }
.jev-buehne .jev-brotkrumen,
.jev-buehne .jev-brotkrumen a { color: var(--jev-text-invers-leise); }
.jev-buehne .jev-brotkrumen [aria-current] { color: var(--jev-weiss); }

/*
 * Das Medium im Bogen: oben halbrund, unten gerade — die Form eines Tors.
 *
 * Vorher lief das Bild als Rechteck bis an die Fensterkante. Auf Nacht wäre
 * das ein heller Block, der die Fläche zerschneidet; als Form wird es ein
 * Gegenstand darauf. Der Bogen nimmt nur die oberen Ecken — bei einem Video,
 * das eine Behandlung zeigt, ist jeder weitere Beschnitt genau das, was
 * überzeugen soll.
 *
 * Der Radius ist absichtlich in Prozent der Breite und nicht in Pixeln: Sonst
 * bliebe bei schmalen Fenstern von der Rundung ein Stummel und bei breiten
 * würde sie zur Halbkugel.
 */
/*
 * VOLLE BREITE STATT BOGEN — auf Wunsch, 01.09.2026.
 *
 * Der Bogen darüber ist beschrieben, weil er wiederkommen kann: Er machte aus
 * dem Medium einen Gegenstand auf der Nachtfläche statt eines Blocks, der sie
 * zerschneidet. Dagegen stand ein handfester Grund: Das Video ist 16:9, der
 * Bogen 4:5 — links und rechts fiel fast die Hälfte weg. Volle Breite gibt dem
 * Bild seine Fläche zurück.
 *
 * Zurück zum Bogen: die vier Werte unten wieder auf `center / min(100%, 30rem)`
 * und `aspect-ratio: 4/5` mit dem Radius
 * `50% 50% var(--jev-radius) var(--jev-radius) / 32% 32% var(--jev-radius) var(--jev-radius)`.
 */
.jev-buehne__medienfeld {
	position: relative;
	align-self: stretch;
	justify-self: stretch;
	width: 100%;
}
.jev-buehne__medium {
	/* Ohne Seitenverhältnis bestimmt die Textspalte die Höhe, und das Medium
	   füllt sie — seine Kinder liegen absolut. Die Mindesthöhe trägt den Fall,
	   in dem links wenig Text steht. */
	min-height: 26rem;
	height: 100%;
	background: none;
	width: 100%;
	border-radius: 0;
	overflow: hidden;
}

/*
 * Die Musterkachel an der rechten Kante des Bogens.
 *
 * Sie liegt zur Hälfte auf dem Bild und zur Hälfte daneben und erledigt damit
 * zweierlei: Sie bricht die Kontur des Bogens auf seiner ruhigsten Seite, und
 * die äußere Hälfte füllt den letzten Rest toter Nachtfläche rechts.
 *
 * Im unteren Drittel, nicht in der Rundung: Auf der geraden Seite hat sie eine
 * Kante zum Anlegen, in der Rundung sähe sie angeheftet aus.
 *
 * 96 Pixel sind keine freie Wahl, sondern genau zwei Kacheln der 48er-
 * Rasterung aus muster.css. Jedes andere Maß schneidet die unterste
 * Rautenreihe an.
 */
/* Innen statt überstehend: Am Fensterrand hätte der Überstand eine Querrolle
   gebracht. Ihre zweite Aufgabe — die tote Nachtfläche rechts füllen — hat sie
   ohnehin verloren, seit das Medium bis an die Kante läuft. */
.jev-buehne__kachel {
	position: absolute;
	right: 1.5rem;
	bottom: 2.5rem;
	width: 96px;
	height: 96px;
	border-radius: var(--jev-radius);
}
/*
 * In der Schmalansicht liegt die Kachel innen.
 *
 * Dort füllt der Bogen die volle Fensterbreite, ein Überstand nach rechts
 * ginge also über die Fensterkante hinaus und brächte eine Querrolle. Innen
 * verdeckt sie einen Zipfel des Bildes — auf einem Telefon der kleinere Preis.
 */
@media (max-width: 73.99rem) {
	.jev-buehne__kachel { right: 1rem; bottom: 1rem; }
}

/*
 * Kein Abstand mehr rechts.
 *
 * Er gab dem Bogen Luft, statt ihn an die Kante zu schieben — richtig für eine
 * Form, die als Gegenstand auf der Fläche liegt. Seit das Medium über die
 * volle Breite läuft, waren es 50 Pixel Nacht zwischen Bild und Fensterkante,
 * und die lasen sich als vergessener Rand. Kommt der Bogen zurück, kommt diese
 * Regel mit ihm.
 */
@media (max-width: 73.99rem) {
	.jev-buehne__medienfeld { margin-inline: auto; margin-bottom: var(--jev-a-6); }
}

/*
 * Kein Abstand zwischen Medium und Zahlenband.
 *
 * Der Rand oben trennt das Medium von dem, was darunter folgt — richtig,
 * solange dort ein neuer Abschnitt beginnt, der seinen eigenen Anfang hat.
 * Das Zahlenband gehört aber noch zur Bühne: Es ist ihr Sockel, keine neue
 * Sektion. Dazwischen standen auf dem Telefon 64 Pixel Nacht, und weil Band
 * und Video-Unterkante fast dieselbe Farbe haben, las sich das als Loch.
 *
 * `:has(+ …)` trifft nur den Fall, um den es geht: ein Raster, auf das ein
 * Band folgt. Bühnen ohne Zahlen behalten ihren Abstand — dort trennt er
 * wirklich zwei Dinge.
 *
 * Die Haarlinie am Band bleibt und wird hier erst wichtig: Sie ist jetzt das
 * Einzige, was die beiden Flächen auseinanderhält.
 */
@media (max-width: 47.999rem) {
	.jev-buehne__raster:has(+ .jev-buehne__beleg) > .jev-buehne__medienfeld {
		margin-bottom: 0;
	}
}

/*
 * Luft über dem Bogen.
 *
 * Der Text trägt seinen Abstand zum festen Kopf und zur Brotkrume selbst (die
 * Regel dafür steht oben im @supports-Block), das Medium hatte davon nichts
 * abbekommen: Es stand mittig in der Rasterzeile und begann damit 99px unter
 * der Fensterkante — zweiundzwanzig davon liegen noch unter dem Kopfband. Der
 * Bogen klebte an der Brotkrumenzeile, während unter ihm eine grosse leere
 * Nachtfläche stand.
 *
 * Der Abstand steht als Aussenabstand am Medium, nicht als Innenabstand am
 * Raster: Bei `align-self: center` zählt der Aussenabstand in die Zentrierung,
 * der Bogen rückt also um die Hälfte nach unten, und die Bühne wird dabei
 * nicht höher. Was oben fehlte und unten zu viel war, gleicht dieselbe Zahl
 * aus.
 *
 * Genau um Kopf und Brotkrume verschoben, also um 65px angehoben: Danach hat
 * der Bogen oben und unten dieselbe Luft — 35 und 34 Pixel. Vorher lag er 30px
 * unter der Brotkrumenzeile und damit teilweise dahinter.
 *
 * Nur in der Breitansicht: Darunter liegt das Medium über dem Text und hat
 * seinen eigenen Abstand.
 */
@supports (animation-timeline: scroll()) {
	@media (min-width: 74rem) {
		body:has(.jev-main > .jev-buehne:first-child) .jev-buehne__medienfeld {
			margin-top: calc(var(--jev-kopf-hoehe) + var(--jev-krume-hoehe));
		}
	}
}

/*
 * Der leise Knopf trägt seine Farbe aus `--jev-text-titel` — auf Nacht wäre
 * er Petrol auf Dunkelblau und damit kaum zu sehen. Hier steht er in Weiss,
 * der Signalknopf daneben bleibt, wie er ist.
 */
.jev-buehne .jev-knopf--leise { color: var(--jev-weiss); }
.jev-buehne .jev-knopf--leise:hover,
.jev-buehne .jev-knopf--leise:focus-visible {
	background: color-mix(in srgb, var(--jev-weiss) 12%, transparent);
}

/* Die Belegzeile unter der Bühne: Zahlen weiss, Bezeichnungen leise. */
.jev-buehne__beleg b,
.jev-buehne__beleg strong { color: var(--jev-weiss); }


/* =====================================================================
   14 · Startseite — Wegweiser, Aufruf, Produkte
   ===================================================================== */

/*
 * Die Bühne der Startseite trägt keine Brotkrume: Sie bestünde aus einem
 * einzigen Wort und zeigte auf die Seite, auf der man steht. Damit fällt auch
 * ihre Höhe aus der Rechnung, die dem Text und dem Bogen Platz unter dem
 * festen Kopf verschafft — sonst stünde beides um 52 Pixel zu tief.
 */
@supports (animation-timeline: scroll()) {
	body:has(.jev-main > .jev-buehne--ohnekrume:first-child) { --jev-krume-hoehe: 0px; }
}

/*
 * Bühne ohne Bild: einspaltig.
 *
 * Eine zweite Spalte ohne Inhalt ist keine Gestaltung, sondern ein Loch. Der
 * Text nimmt seine gewohnte Breite (40rem in `__inner`), rechts daneben steht
 * die Nachtfläche — eine Textbühne. Sobald ein Motiv hinterlegt wird, greift
 * wieder das Raster mit dem Bogen.
 */
@media (min-width: 74rem) {
	.jev-buehne--ohnemedium .jev-buehne__raster {
		grid-template-columns: minmax(0, 1fr);
		padding-right: 0;
	}
}

/*
 * Zweispaltig schon auf dem Tablet.
 *
 * Bis hierher standen Text und Medium erst ab 74rem nebeneinander. Darunter
 * lag der Text in einer vollen Spalte, war aber über `__inner` auf 40rem
 * gedeckelt — rechts daneben stand eine leere Hälfte, und das Medium rutschte
 * darunter. Auf jedem Tablet war damit die halbe Fläche leer.
 *
 * Die 74rem hatten einen Grund: „LYMPHDRAINAGE" misst bei voller Titelgrösse
 * 485 Pixel, und die Verkleinerung über clamp() greift erst unter 820 Pixel
 * Fensterbreite — dazwischen wäre das Wort breiter als seine Spalte. Statt
 * die Spalten weiter zu vertagen, wird hier der Titel kleiner: In diesem
 * Bereich folgt er der Spalte statt dem Fenster.
 *
 * Ohne Medium bleibt es einspaltig. Eine zweite Spalte ohne Inhalt ist keine
 * Gestaltung, sondern ein Loch — dieselbe Begründung wie oben.
 */
@media (min-width: 48rem) and (max-width: 73.99rem) {
	.jev-buehne__raster {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		min-height: 28rem;
		padding-right: var(--jev-a-4);
	}
	/*
	 * 3,3vw hält das längste Wort in seiner Spalte: „LYMPHDRAINAGE" misst bei
	 * 48,8px 485 Pixel. Bei 768 Fensterbreite bleiben in der Textspalte 333,
	 * die Schrift steht dort auf 25 und das Wort auf 250. Bei 1180 sind es
	 * 39 und 397 in 518.
	 */
	.jev-buehne__titel { font-size: clamp(1.75rem, 3.3vw, 2.5rem); }
	.jev-buehne__inner { max-width: none; }
	/* Links bleibt die Linie der Navigation, rechts nur die Fuge zur Spalte. */
	.jev-buehne__text { padding-right: var(--jev-a-4); }
	/* Gestapelt war es mittig und mit Abstand nach unten — nebeneinander nicht. */
	.jev-buehne__medienfeld { margin-inline: 0; margin-bottom: 0; }

	.jev-buehne--ohnemedium .jev-buehne__raster {
		grid-template-columns: minmax(0, 1fr);
		padding-right: 0;
	}
	.jev-buehne--ohnemedium .jev-buehne__inner { max-width: 40rem; }
}

/* ---------- Wegweiser ------------------------------------------------- */

/*
 * Drei Wege nebeneinander, getrennt von einer Haarlinie statt von Weissraum.
 *
 * Drei Kästen mit Rahmen und Abstand dazwischen sähen aus wie drei Angebote
 * gleichen Rangs — hier stossen die Flächen aneinander, wie Text und Bild in
 * der Bühne. Der Abschnitt bringt seinen Abstand selbst mit; deshalb steht am
 * Abschnitt keiner.
 */
.jev-abschnitt.jev-weiche { padding-block: 0; }
.jev-weiche__kopf {
	padding-block: var(--jev-a-6) var(--jev-a-4);
	text-align: center;
}
.jev-weiche__kopf > :last-child { margin-bottom: 0; }
.jev-weiche__kopf .jev-fliess { margin-inline: auto; }

.jev-weiche__band {
	display: grid;
	border-block: 1px solid var(--jev-rand);
}
@media (min-width: 62rem) {
	.jev-weiche__band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.jev-weiche__weg {
	display: grid;
	align-content: start;
	gap: var(--jev-a-3);
	padding: var(--jev-a-6) var(--jev-band-rand);
}
@media (min-width: 62rem) {
	.jev-weiche__weg + .jev-weiche__weg { border-left: 1px solid var(--jev-rand); }
}
@media (max-width: 61.99rem) {
	.jev-weiche__weg + .jev-weiche__weg { border-top: 1px solid var(--jev-rand); }
	.jev-weiche__weg { padding: var(--jev-a-5) var(--jev-a-4); }
}
/*
 * Ohne Kopfzeile beginnt das Band direkt unter dem Abschnitt darüber. Dann
 * trägt es seinen eigenen Abstand nach oben — sonst klebte die Haarlinie an
 * der Kante der Fläche davor.
 */
.jev-weiche:not(:has(.jev-weiche__kopf)) .jev-weiche__band { border-top: 0; }
/* Der empfohlene Weg trägt eine eigene Fläche — das reicht als Auszeichnung,
   ohne dass jemand „empfohlen" danebenschreiben muss. */
.jev-weiche__weg--haupt { background: var(--jev-flaeche-weiss); }

.jev-weiche__titel {
	margin: 0;
	font-family: var(--jev-schrift-titel);
	font-size: var(--jev-t-l);
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--jev-text-titel);
}
.jev-weiche__text { margin: 0; font-size: var(--jev-t-s); color: var(--jev-text-leise); }
.jev-weiche .jev-knopfzeile { margin-top: var(--jev-a-2); }

/*
 * Derselbe Wegweiser am Seitenende, dort nur die Knöpfe: Ohne Titel im Weg
 * stehen sie mittig, und die Zeile wird flacher.
 */
.jev-weiche__weg:not(:has(.jev-weiche__titel)) {
	justify-items: center;
	padding-block: var(--jev-a-5);
}

/* ---------- Aufruf ---------------------------------------------------- */

.jev-aufruf__text > :last-child { margin-bottom: 0; }
.jev-aufruf .jev-fliess { max-width: 62ch; }
.jev-aufruf .jev-knopfzeile { margin-top: var(--jev-a-5); }

/*
 * Die freien Gebiete stehen unter dem Text, nicht daneben.
 *
 * Gesetzt wie auf der Partnerseite: grosse Pillen mit Sperrung, umrandet und
 * nicht gefüllt — gefüllt sähen sechs Städte aus wie sechs Knöpfe, und der
 * eine Knopf darunter verlöre seinen Rang. Es sind Angaben, keine Ziele.
 */
.jev-aufruf__liste {
	list-style: none;
	margin: var(--jev-a-5) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--jev-a-3);
}
.jev-aufruf__ort {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0 var(--jev-a-4);
	border: 1px solid var(--jev-rand-invers);
	border-radius: var(--jev-knopf-radius);
	font-size: var(--jev-t-s);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jev-text-invers);
}
.jev-aufruf__nachsatz {
	margin: var(--jev-a-4) 0 0;
	max-width: 54ch;
	font-size: var(--jev-t-s);
	color: var(--jev-text-invers-leise);
}
.jev-aufruf__knopf { padding: var(--jev-a-3) var(--jev-a-5); }

/* ---------- Marken- und Warenzeichen in Überschriften ----------------- */

/*
 * Die Titelschrift ist eine Versalschrift, und das ® steht darin auf
 * Versalhöhe — in „Jeveauxeffect®" wird es fast so gross wie ein Buchstabe
 * und liest sich wie ein weiteres Zeichen des Namens. Hochgestellt und halb
 * so gross ist es das, was es ist: eine Fussnote am Namen.
 *
 * `line-height: 0` und `position: relative` statt `vertical-align: super`:
 * Der Standardwert schiebt die Zeile auseinander, und in einer Überschrift
 * mit 1,1 Zeilenabstand sieht man das sofort.
 */
.jev-marke {
	position: relative;
	top: -0.42em;
	font-size: 0.5em;
	line-height: 0;
	letter-spacing: 0;
	vertical-align: baseline;
}

/* ---------- Produkte -------------------------------------------------- */

.jev-produkte .jev-kopfgruppe { max-width: 62ch; }
/*
 * Dieselbe Regel wie im Shop, nur anders adressiert: Dort hängt sie an
 * `.jev-shop` am <main>, das es hier nicht gibt. Zwei Klassen sind nötig,
 * weil WooCommerce `.woocommerce img { height: auto }` mitbringt — Klasse
 * plus Element, und damit schwerer als eine Klasse allein.
 */
.jev-produkte .jev-shop__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/*
 * Mouse-over wie bei den Technikkacheln (Christophers Wunsch, 14.09.2026):
 * Das Foto rückt näher, der Name nimmt die Signalfarbe. Die Karten sind Links,
 * darum auch bei Tastaturfokus. Der Shop behält seine eigene Geste mit der
 * Nahaufnahme; diese Regel hängt an `.jev-produkte` und erreicht ihn nicht.
 */
/* Mit Abstand stehen die Karten einzeln — dann mit denselben runden Ecken wie
   die Technik- und Studiokarten. `overflow` hält das gezoomte Foto darin. */
.jev-produkte .jev-shop__bild { border-radius: var(--jev-radius); overflow: hidden; }
.jev-produkte .jev-shop__name { transition: color 0.25s ease-out; }
.jev-produkte .jev-shop__bild:focus-visible .jev-shop__name { color: var(--jev-signal); }
@media (hover: hover) and (pointer: fine) {
	.jev-produkte .jev-shop__bild:hover .jev-shop__name { color: var(--jev-signal); }
}
@media (prefers-reduced-motion: no-preference) {
	.jev-produkte .jev-shop__bild:focus-visible .jev-shop__foto { transform: scale(1.05); }
	@media (hover: hover) and (pointer: fine) {
		.jev-produkte .jev-shop__bild:hover .jev-shop__foto { transform: scale(1.05); }
	}
}
@media (prefers-reduced-motion: reduce) {
	/* Sonst griffe der Zoom aus shop.css (`.jev-shop__bild:hover`) weiter. */
	.jev-produkte .jev-shop__bild:is(:hover, :focus-visible) .jev-shop__foto { transform: none; }
}
/*
 * Drei Spalten statt vier: zwei Produkte und die Kachel in den Shop. Das
 * Raster des Shops füllt vier — hier stehen weniger Stücke, und eine
 * Fünferreihe mit Lücke sähe nach Rest aus.
 */
/*
 * Der Produktstreifen ist ein Schieber, wie die übrigen im Theme: rollen mit
 * Einrasten, ohne Rollbalken, ohne Skript. Perfmatters verzögert jedes Skript
 * bis zur ersten Berührung — ein Schieber, der ein Skript braucht, stünde bis
 * dahin still.
 *
 * Er steht ausserhalb der Hülle und nimmt die volle Fensterbreite. Sein
 * Innenabstand ist genau der Abstand, den die Hülle zum Fensterrand hält:
 * Damit beginnt die erste Karte auf der Rasterlinie der Überschrift darüber,
 * und die Karte am rechten Rand wird angeschnitten — es ist zu sehen, dass es
 * weitergeht. Am Ende der Bahn kehrt sich das um: rechts der Abstand, links
 * der Anschnitt.
 *
 * Drei Karten sind sichtbar, weil die Spaltenbreite ein Drittel des
 * Innenbereichs ist — und der Innenbereich ist die Hüllenbreite.
 */
/*
 * Zwei Klassen: basis.css setzt `ul[class] { padding: 0 }` — Element plus
 * Attribut wiegt (0,1,1) und schlug eine einzelne Klasse. Der Innenabstand
 * fiel damit weg, der Streifen begann an der Fensterkante und die Karten
 * wurden ein Drittel des Fensters statt ein Drittel der Hülle breit.
 */
.jev-produkte .jev-produkte__schieber {
	--jev-schieber-rand: max(var(--jev-a-4), calc((100% - var(--jev-breite)) / 2));
	/* Derselbe Abstand wie bei Techniken und Standorten (Christophers Wunsch,
	   14.09.2026) — vorher die 3-px-Fuge des Shops. Auf der Startseite stehen
	   die Bänder untereinander, und drei verschiedene Fugen sähen nach Zufall
	   aus. */
	--jev-schieber-luecke: var(--jev-a-4);

	list-style: none;
	margin: 0;
	padding: 0 var(--jev-schieber-rand);

	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--jev-schieber-luecke)) / 3);
	gap: var(--jev-schieber-luecke);

	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	/* Ohne das rastet der Streifen am Polster vorbei und die erste Karte klebt
	   am Fensterrand. */
	scroll-padding-inline: var(--jev-schieber-rand);
	scrollbar-width: none;
}
.jev-produkte .jev-produkte__schieber::-webkit-scrollbar { display: none; }
.jev-produkte .jev-produkte__schieber > * { scroll-snap-align: start; }

@media (max-width: 62rem) {
	.jev-produkte .jev-produkte__schieber { grid-auto-columns: calc((100% - var(--jev-schieber-luecke)) / 2); }
}
@media (max-width: 40rem) {
	/* Eine Karte plus ein Streifen der nächsten — der Anschnitt ist hier das
	   Einzige, was sagt, dass es weitergeht. */
	.jev-produkte .jev-produkte__schieber { grid-auto-columns: 78%; }
}

/*
 * Die letzte Kachel: kein Bild, sondern der Weg weiter. Sie hat dasselbe
 * Format wie die Produktkarten und liegt auf Creme — auf dem Seitengrund wäre
 * sie eine Lücke im Streifen.
 */
.jev-produkte__weiter {
	display: grid;
	align-content: center;
	gap: var(--jev-a-3);
	margin: 0;
	padding: var(--jev-a-5);
	aspect-ratio: 3 / 4;
	background: var(--jev-flaeche-warm);
}
.jev-produkte__weiter h3 {
	margin: 0;
	font-family: var(--jev-schrift-titel);
	font-size: var(--jev-t-l);
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--jev-text-titel);
}
.jev-produkte__weiter p { margin: 0; font-size: var(--jev-t-s); color: var(--jev-text-leise); }
.jev-produkte__weiter .jev-knopfzeile { margin-top: var(--jev-a-2); }

/* ---------- Studio-Auswahl ------------------------------------------- */

/*
 * Eine Handvoll Studios mit Bild, statt des Verzeichnisses aller Städte.
 *
 * Auf der Startseite ist die Frage nicht „welche Stadt", sondern „gibt es das
 * wirklich". Darauf antwortet ein Foto besser als eine Liste. Der Weg zur
 * vollständigen Liste steht als Knopf darunter.
 */
.jev-studioauswahl__raster {
	list-style: none;
	margin: 0 0 var(--jev-a-5);
	padding: 0;
	display: grid;
	gap: var(--jev-a-4);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 56rem) { .jev-studioauswahl__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .jev-studioauswahl__raster { grid-template-columns: minmax(0, 1fr); } }

.jev-studioauswahl__karte { margin: 0; }
.jev-studioauswahl__karte a {
	display: grid;
	gap: 5px;
	text-decoration: none;
	color: inherit;
}
.jev-studioauswahl__bild {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--jev-a-3);
	border-radius: var(--jev-radius);
	background: var(--jev-platzhalter);
}
/*
 * Zwei Klassen, damit die Regel schwerer wiegt als das `height: auto`, das
 * WooCommerce für jedes Bild mitbringt — sonst steht das Foto in seiner
 * eigenen Höhe und das Format zerfällt.
 */
.jev-studioauswahl__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.jev-studioauswahl__art {
	justify-self: start;
	font-size: var(--jev-t-xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--jev-signal);
}
.jev-studioauswahl__name {
	font-family: var(--jev-schrift-titel);
	font-size: var(--jev-t-m);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--jev-text-titel);
}
.jev-studioauswahl__ort { font-size: var(--jev-t-s); color: var(--jev-text-leise); }
.jev-studioauswahl__karte a:hover .jev-studioauswahl__name,
.jev-studioauswahl__karte a:focus-visible .jev-studioauswahl__name { color: var(--jev-signal); }

/*
 * Mouse-over „Näherkommen" (Idee 1, 14.09.2026): dieselbe Geste wie Techniken
 * und Produkte — das Foto rückt näher, der Name nimmt die Signalfarbe —, dazu
 * gleitet „Profil ansehen →" herein und sagt, wohin der Klick führt.
 *
 * Die Zeile steht immer im Fluss und wird nur sichtbar, damit die Karte beim
 * Überfahren nicht wächst. Auf Berührgeräten gibt es kein Überfahren — dort
 * steht sie von Anfang an da.
 */
.jev-studioauswahl__bild img { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.jev-studioauswahl__name { transition: color 0.25s ease-out; }
.jev-studioauswahl__weiter {
	justify-self: start;
	margin-top: var(--jev-a-1);
	font-size: var(--jev-t-s);
	color: var(--jev-signal);
	opacity: 0;
	transform: translateX(-0.5rem);
	transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.jev-studioauswahl__weiter::after { content: " \2192"; content: " \2192" / ""; }
.jev-studioauswahl__karte a:focus-visible .jev-studioauswahl__weiter { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
	.jev-studioauswahl__karte a:hover .jev-studioauswahl__weiter { opacity: 1; transform: none; }
}
@media (hover: none) {
	.jev-studioauswahl__weiter { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
	.jev-studioauswahl__karte a:focus-visible .jev-studioauswahl__bild img { transform: scale(1.05); }
	@media (hover: hover) and (pointer: fine) {
		.jev-studioauswahl__karte a:hover .jev-studioauswahl__bild img { transform: scale(1.05); }
	}
}
@media (prefers-reduced-motion: reduce) {
	.jev-studioauswahl__weiter { transform: none; }
}

/* ---------- Bildpaar im Zweispalter ---------------------------------- */

/*
 * Zwei Bilder statt eines: die Gründerinnen nebeneinander, zwei Aufnahmen
 * einer Behandlung. Die Spaltenzahl kommt aus der Vorlage, damit ein einzelnes
 * Bild nicht auf halber Breite steht und drei sich nicht drängen.
 */
/*
 * Die Porträts der Bewegung sehen aus wie die in „Text mit Bild oder Video" —
 * es sind dieselben zwei Personen im selben Zuschnitt. Statt die Werte zu
 * verdoppeln, teilen sich beide Bauteile die Regeln.
 */
.jev-textmedien__paar,
.jev-bewegung__paar {
	display: grid;
	gap: var(--jev-a-4);
	grid-template-columns: repeat(var(--jev-paar-spalten, 2), minmax(0, 1fr));
	align-items: start;
}
@media (max-width: 40rem) {
	.jev-textmedien__paar,
	.jev-bewegung__paar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--jev-a-3); }
}
.jev-textmedien__portraet,
.jev-bewegung__portraet { display: grid; gap: 6px; margin: 0; }
/*
 * `height: auto` ist Pflicht: Perfmatters schreibt in jedes <img> die
 * gemessene Höhe, und die schlägt sonst das Seitenverhältnis — das Bild
 * stünde in seinem Originalformat statt im Hochformat.
 */
.jev-textmedien__portraet img,
.jev-bewegung__portraet img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	/*
	 * Der Anschnitt sitzt oben, nicht in der Mitte.
	 *
	 * Die Porträts sind 2:3, der Rahmen ist 3:4 — der Rahmen nimmt sich die
	 * Differenz sonst zur Hälfte oben und zur Hälfte unten, und beide Bilder
	 * werden an einer beliebigen Linie beschnitten. Bei 22 % von oben sitzen
	 * die Augen beider Porträts auf einer Höhe, und keine Hand wird an der
	 * Unterkante abgeschnitten.
	 */
	object-position: 50% 22%;
	border-radius: var(--jev-radius);
}
.jev-textmedien__portraet figcaption,
.jev-bewegung__portraet figcaption { display: grid; gap: 2px; }
.jev-textmedien__name,
.jev-bewegung__name {
	font-family: var(--jev-schrift-titel);
	font-size: var(--jev-t-s);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--jev-text-titel);
}
.jev-textmedien__rolle,
.jev-bewegung__rolle { font-size: var(--jev-t-xs); color: var(--jev-text-leise); }

/* ---------- Zweispalter als Band ------------------------------------- */

/*
 * Bilder ohne Fuge an der Fensterkante, Text daneben auf der Rasterlinie.
 *
 * Der linke Innenabstand ist genau der Abstand, den die Hülle zum Fensterrand
 * hält — der Text beginnt damit auf derselben Linie wie jeder andere
 * Abschnitt, obwohl er nicht in der Hülle steht. Rechts gibt es keinen: Dort
 * gehören die Bilder an die Kante.
 */
.jev-textmedien--band { padding-block: 0; overflow: hidden; }
.jev-textmedien--band .jev-textmedien__raster {
	width: 100%;
	max-width: none;
	margin: 0;
	padding-left: max(var(--jev-a-4), calc((100% - var(--jev-breite)) / 2));
	gap: 0;
}
@media (min-width: 62rem) {
	.jev-textmedien--band .jev-textmedien__raster {
		display: grid;
		/*
		 * Das Bild bekommt mehr als die Hälfte. Bei 1:1 stand der Text auf
		 * derselben Breite wie das Bild und beide sahen aus, als hätten sie
		 * denselben Rang — das Bild ist hier aber das Argument, der Text die
		 * Erklärung dazu. Bei 1400px sind es 586 zu 714 Pixeln.
		 */
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
		align-items: center;
	}
}
.jev-textmedien--band .jev-textmedien__text {
	padding-block: var(--jev-a-7);
	padding-right: var(--jev-a-6);
}
/*
 * Auf Tablet und Telefon laufen die Bilder über die volle Breite (Christophers
 * Wunsch, 14.09.2026). Der Innenabstand wandert dafür vom Raster in die
 * Textspalte: Der Text bleibt auf der Rasterlinie, das Porträtpaar darunter
 * stösst an beide Fensterkanten — wie das Band am Desktop an die rechte.
 */
@media (max-width: 61.99rem) {
	.jev-textmedien--band .jev-textmedien__raster { padding-inline: 0; }
	.jev-textmedien--band .jev-textmedien__text { padding-inline: var(--jev-a-4); padding-bottom: var(--jev-a-5); }
}

/*
 * Die beiden Porträts stossen aneinander: keine Lücke, kein Radius. Zwei
 * Bilder mit Fuge und runden Ecken sind zwei Bilder — ohne beides ist es ein
 * Doppelporträt.
 */
.jev-textmedien--band .jev-textmedien__paar {
	gap: 0;
	align-self: stretch;
	align-items: stretch;
}
.jev-textmedien--band .jev-textmedien__portraet { gap: 0; position: relative; overflow: hidden; }
/*
 * Ein Hauch Leben beim Überfahren (Weg 2, 14.09.2026): Das Foto rückt kaum
 * merklich näher — 103 % statt 105 %, langsamer als bei den Karten. Kein
 * Farbwechsel, kein Pfeil: Die Porträts sind keine Links, und alles, was nach
 * Klick aussieht, verspräche einen, der nicht kommt. `overflow` oben hält das
 * vergrösserte Bild in seiner Hälfte.
 */
.jev-textmedien--band .jev-textmedien__portraet img { transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.jev-textmedien--band .jev-textmedien__portraet:hover img { transform: scale(1.03); }
}
/*
 * Im Band füllt das Bild die ganze Höhe seiner Hälfte, statt ein festes
 * Seitenverhältnis zu halten.
 *
 * Sonst hört das Foto vor der Unterkante des Abschnitts auf und der Name, der
 * an der Unterkante klebt, steht sechzig Pixel darunter auf Creme. Die Höhe
 * gibt die Textspalte vor — das ist der Sinn eines Bandes: zwei Hälften,
 * gleich hoch, ohne Rest.
 */
.jev-textmedien--band .jev-textmedien__portraet img {
	border-radius: 0;
	height: 100%;
	aspect-ratio: auto;
}

/*
 * Der Name steht im Bild, nicht darunter.
 *
 * Unter dem Bild lag er auf Creme und riss einen hellen Streifen zwischen
 * Foto und Abschnittskante — aus einem Doppelporträt wurden zwei Bilder mit
 * Bildunterschrift. Im Bild gehört der Name zur Person.
 *
 * Der Verlauf ist derselbe wie auf den Produktkarten im Shop: nach oben hin
 * durchsichtig, damit er nichts verdeckt, unten kräftig genug für Weiss. Er
 * hält die Lesbarkeit unabhängig davon, wie hell die Aufnahme unten ist —
 * bei 78 % Nacht bleibt selbst über Weiss ein Kontrast von rund 7:1.
 */
.jev-textmedien--band .jev-textmedien__portraet figcaption,
.jev-bewegung__portraet figcaption {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: var(--jev-a-6) var(--jev-a-4) var(--jev-a-4);
	background: linear-gradient(
		180deg,
		transparent,
		color-mix(in srgb, var(--jev-nacht) 16%, transparent) 28%,
		color-mix(in srgb, var(--jev-nacht) 58%, transparent) 66%,
		color-mix(in srgb, var(--jev-nacht) 78%, transparent)
	);
}
.jev-textmedien--band .jev-textmedien__name,
.jev-bewegung__portraet .jev-bewegung__name { color: var(--jev-weiss); }
.jev-textmedien--band .jev-textmedien__rolle,
.jev-bewegung__portraet .jev-bewegung__rolle { color: var(--jev-text-invers-leise); }

/* ---------- Aufzählung und Randbemerkung im Fliesstext ---------------- */

/*
 * Aufzählungen tragen einen Strich in Blüte, keinen Browserpunkt.
 *
 * Die Punkte des Browsers waren die einzige Stelle der Seite, an der etwas
 * nicht aus dem Baukasten kam. Der Strich ist dasselbe Zeichen, das den
 * Eyebrow der Bühne einleitet — die Seite hat damit ein Zeichen für „hier
 * kommt eine Aufzählung" statt eines geerbten.
 *
 * Als Raster und nicht über `list-style-position`: So steht die zweite Zeile
 * eines langen Punktes unter der ersten und nicht unter dem Strich.
 */
.jev-fliess ul {
	list-style: none;
	margin-block: var(--jev-a-3);
	padding-left: 0;
	display: grid;
	gap: var(--jev-a-2);
}
.jev-fliess ul li {
	display: grid;
	grid-template-columns: 1.75rem 1fr;
	align-items: baseline;
}
/*
 * Eine Raute aus dem Musterblatt statt eines Strichs.
 *
 * Der Strich war das Zeichen „hier kommt eine Aufzählung" und kam wenigstens
 * nicht vom Browser. Eine Kachel der Marke sagt dasselbe und stammt aus dem
 * eigenen Bestand — es ist dieselbe Raute, die in der Bühne als Musterkachel
 * liegt, nur auf 14 Pixel.
 *
 * Der Versatz um eine halbe Kachel ist der Trick: Die Kachel füllt ihre vier
 * Ecken, in der Mitte bleibt ein rautenförmiges Loch. Um eine halbe Kachel
 * verschoben wandern die vier Eckdreiecke zusammen und ergeben eine
 * geschlossene Raute.
 *
 * Grund durchsichtig, nicht Nacht: Als Kachel liegt das Muster auf einer
 * Fläche, hier ist es ein Zeichen im Text.
 */
.jev-fliess ul li::before {
	content: "";
	align-self: center;
	width: 14px;
	height: 14px;
	--jev-muster-grund: transparent;
	--jev-muster-kachel: 14px;
	background-color: transparent;
	background-size: 14px 14px;
	background-position: 7px 7px;
}

/*
 * `<small>` im Fliesstext ist die Randbemerkung — beim Jeveauxeffect der
 * Rechtshinweis. Er stand bisher in derselben Grösse und Farbe wie das
 * Argument darüber, und die drei Sätze, die das Beste an dem Abschnitt sind,
 * gingen darin unter. Kleiner, leiser und hinter einer Haarlinie ist er das,
 * was er ist: eine Fussnote, die gelesen werden kann, aber nicht muss.
 */
.jev-fliess small {
	display: block;
	max-width: 62ch;
	margin-top: var(--jev-a-4);
	padding-top: var(--jev-a-3);
	border-top: 1px solid var(--jev-rand);
	font-size: var(--jev-t-xs);
	line-height: 1.7;
	color: var(--jev-text-leise);
}
.jev-abschnitt--tief .jev-fliess small,
.jev-abschnitt--nacht .jev-fliess small {
	border-top-color: var(--jev-rand-invers);
	color: var(--jev-text-invers-leise);
}

/* ---------- Bühne: Medium als randloses Band ------------------------- */

/*
 * Das Medium füllt seine Hälfte von Kante zu Kante, in voller Höhe der Bühne.
 *
 * Der Bogen ist für Hochformate gemacht. Ein Querformat verliert darin an
 * beiden Seiten das, worauf es ankommt — beim Jaguar-Muster das Gesicht. Und
 * ein Bildwerk, das selbst schon eine Form hat, braucht keine zweite.
 */
@media (min-width: 74rem) {
	.jev-buehne--medienband .jev-buehne__raster { padding-right: 0; }
}
/*
 * Abstand zwischen Text und Bild im Medienband (Christophers Vorgabe,
 * 14.09.2026): auf dem Telefon 40 px (erst null, das stand zu dicht), auf
 * Tablet und Desktop 60 px.
 *
 * Gemessen vorher: Telefon 136 px (96 Innenabstand unten plus 40 über einer
 * leeren Knopfzeile), Tablet 24, Desktop 50. Die Textspalte reicht bis ans
 * Bild, darum trägt ihr rechter Innenabstand den Abstand allein.
 *
 * Die Knopfzeile fällt weg, wenn die Bühne keinen Knopf hat — sonst hielte
 * ihr oberer Rand die Lücke offen, auch bei null Innenabstand.
 */
.jev-buehne--medienband .jev-knopfzeile:not(:has(*)) { display: none; }
@media (max-width: 47.999rem) {
	.jev-buehne--medienband .jev-buehne__text { padding-bottom: 40px; }
}
@media (min-width: 48rem) {
	.jev-buehne--medienband .jev-buehne__text { padding-right: 60px; }
}

.jev-buehne--medienband .jev-buehne__medienfeld {
	width: 100%;
	max-width: none;
	margin: 0;
	align-self: stretch;
}
.jev-buehne--medienband .jev-buehne__medium {
	width: 100%;
	height: 100%;
	min-height: 22rem;
	aspect-ratio: auto;
	border-radius: 0;
}
@media (max-width: 73.99rem) {
	.jev-buehne--medienband .jev-buehne__medium { aspect-ratio: 3 / 2; height: auto; }
}

/*
 * Im Bildband hängt das Medium nicht am gemessenen Kopfmass.
 *
 * Es läuft bis an die Oberkante und damit unter den Kopf, der dort ohnehin
 * deckend auf Nacht steht. Damit kann zwischen beiden kein Streifen stehen,
 * auch wenn der Kopf einmal eine andere Höhe bekommt und niemand daran denkt,
 * die Zahl oben nachzuziehen. Beim Bogen bleibt der Abstand: Dort ist die Form
 * der Gegenstand und darf nicht angeschnitten werden.
 */
@supports (animation-timeline: scroll()) {
	@media (min-width: 74rem) {
		body:has(.jev-main > .jev-buehne--medienband:first-child) .jev-buehne__medienfeld {
			margin-top: 0;
		}
	}
}

/*
 * Das Bildband auf dem Tablet: bis an die Kante und über die volle Höhe.
 *
 * Steht hier am Ende und nicht oben beim übrigen Tablet-Raster, weil die
 * Regel für schmale Fenster (`aspect-ratio: 3 / 2; height: auto`) weiter oben
 * in dieser Datei steht. Bei gleichem Gewicht gewinnt die spätere — oben
 * hätte diese hier nichts ausgerichtet.
 *
 * Ohne die beiden Zeilen sass das Band als 3:2-Kachel in der oberen Hälfte
 * seiner Spalte, darunter stand eine Bildschirmhöhe leere Nachtfläche, und
 * rechts blieb die Fuge des Rasters stehen. Der Bogen behält seine Fuge: Dort
 * ist die Form der Gegenstand und braucht Luft, das Band ist eine Fläche und
 * will an die Kante.
 */
@media (min-width: 48rem) and (max-width: 73.99rem) {
	.jev-buehne--medienband .jev-buehne__raster { padding-right: 0; }
	.jev-buehne--medienband .jev-buehne__medium {
		height: 100%;
		aspect-ratio: auto;
	}
}

/*
 * VOLLFLÄCHIG — die Bühne, wenn ein Video darin steht.
 *
 * Ausgelöst über `:has()` am Medium, nicht über eine Klasse am Abschnitt:
 * Ein Bild bleibt eine Spalte neben dem Text, ein Video nimmt die Fläche. Das
 * ist keine Willkür — ein Standbild neben dem Text ist eine Illustration, ein
 * Video hinter dem Text ist der Raum, in dem der Text steht. Und die Regel
 * greift von selbst, sobald jemand im Editor ein Video einträgt.
 *
 * DIE BEDIENLEISTE BLEIBT. Naheliegend wäre der übliche Hintergrundfilm:
 * stumm, in Schleife, ohne Bedienung. Das verbietet sich hier zweimal. Erstens
 * spricht in diesem Film jemand — stumm ist das eine Person, die hinter der
 * Überschrift lautlos gestikuliert. Zweitens verlangt WCAG 2.2.2 für bewegte
 * Inhalte über fünf Sekunden eine Möglichkeit anzuhalten; ohne Bedienleiste
 * und ohne Skript gibt es die nicht. Im Ruhezustand steht also das Standbild,
 * und wer will, startet mit Ton.
 *
 * DER SCHLEIER liegt am Medium und nicht am Text: So deckt er auch die Ränder,
 * und `pointer-events: none` lässt Klicks zur Bedienleiste durch.
 */
/*
 * Ab 48rem, nicht erst ab 74.
 *
 * Die 74rem gelten für den Zweispalter: „LYMPHDRAINAGE" ist in voller
 * Titelgrösse 485 Pixel breit und braucht mit dem Aussenabstand eine Hälfte
 * von 585 — also ein Fenster von 1144. Vollflächig gibt es diese Hälften
 * nicht: Der Text liegt über dem Bild und ist auf 46rem begrenzt, die
 * Titelgrösse schrumpft darunter ohnehin über clamp(). Damit trägt die
 * Aufteilung schon auf dem Tablett, und dort ist ein Video, das die Fläche
 * füllt, mehr wert als eine halbe Spalte.
 */
@media (min-width: 48rem) {
	.jev-buehne__raster:has(.jev-buehne__medium .jev-video--datei) {
		grid-template-columns: minmax(0, 1fr);
		/* Unter 74rem fehlt die Mindesthöhe des Zweispalters — ohne sie fiele
		   die Bühne auf die Höhe ihres Textes zusammen. */
		min-height: 32rem;
		/* Und im mittleren Bereich steht rechts ein Innenabstand von 24px, der
		   dem Bild in seiner Spalte Luft gab. Vollflächig sind es 24 Pixel
		   Nacht an der Fensterkante. */
		padding-right: 0;
	}
	.jev-buehne__raster:has(.jev-buehne__medium .jev-video--datei) > .jev-buehne__text,
	.jev-buehne__raster:has(.jev-buehne__medium .jev-video--datei) > .jev-buehne__medienfeld {
		grid-column: 1;
		grid-row: 1;
	}
	.jev-buehne__raster:has(.jev-buehne__medium .jev-video--datei) > .jev-buehne__medienfeld {
		z-index: 0;
		align-self: stretch;
		/* Die Schmalansicht stellt das Medium über den Text und gibt ihm Rand
		   und Abstand darunter. Beides gilt hier nicht mehr. */
		margin-inline: 0;
		margin-bottom: 0;
	}
	.jev-buehne__raster:has(.jev-buehne__medium .jev-video--datei) > .jev-buehne__text {
		position: relative;
		z-index: 1;
		/* Der Text hört über der Bedienleiste auf — sie ist rund 48 Pixel hoch
		   und läuft über die ganze Breite. Läge ein Knopf darauf, träfe der
		   Klick den falschen. */
		padding-bottom: var(--jev-a-6);
		/*
		 * 38 statt 46rem: Auf dem Tablett nahm der Textblock 736 von 768 Pixeln
		 * und liess dem Bild nichts. Schmaler bricht die Überschrift eine Zeile
		 * mehr um — dafür ist zu sehen, wovon die Seite handelt.
		 */
		max-width: 38rem;
		/*
		 * Der Textblock nimmt keine Klicks an — seine Knöpfe und Verweise
		 * schon.
		 *
		 * Er liegt über dem Video und ist 736 Pixel breit; der Abspielknopf
		 * sitzt mittig bei 690 bis 750. Seine linke Hälfte lag also unter dem
		 * Textblock, und ein Klick dorthin traf nichts — gemeldet als „das
		 * Video läuft nicht". Mit `pointer-events: none` fällt der Klick durch
		 * auf das Video, und nebenbei startet ein Klick irgendwo in die Fläche
		 * das Video, was bei einer Bühne mit Film das erwartete Verhalten ist.
		 */
		pointer-events: none;
	}
	.jev-buehne__raster:has(.jev-buehne__medium .jev-video--datei) > .jev-buehne__text :where(a, button, summary, input, label) {
		pointer-events: auto;
	}
	.jev-buehne__raster:has(.jev-buehne__medium .jev-video--datei) > .jev-buehne__medienfeld::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		/*
		 * Leichter als zuerst gebaut. Vorher lag links volle Nacht bis 20 %
		 * der Breite und 78 % noch bei 42 % — das Bild war dahinter kaum zu
		 * erkennen, und ein Video, das man nicht sieht, ist keins.
		 *
		 * Jetzt sind es 88 % ganz links (auch dort bleibt das Bild sichtbar),
		 * 70 % auf dem letzten Drittel des Textes, und ab 72 % der Breite gar
		 * nichts mehr. Der Kopf der Sprecherin liegt damit frei.
		 *
		 * Der Text bleibt lesbar, weil die Kamera steht und die linke Bildseite
		 * durchgehend dunkel ist — dunkle Wand, Pflanze. Bei einer anderen
		 * Aufnahme mit hellem Hintergrund links müsste der Schleier zurück.
		 */
		background: linear-gradient(
			to right,
			color-mix(in srgb, var(--jev-nacht) 88%, transparent) 0,
			color-mix(in srgb, var(--jev-nacht) 70%, transparent) 26%,
			color-mix(in srgb, var(--jev-nacht) 24%, transparent) 52%,
			transparent 72%
		);
	}
}

/*
 * Kein Vorsprung über dem vollflächigen Video.
 *
 * Die Regel darüber schiebt das Medium um Kopfhöhe plus Brotkrume nach unten —
 * richtig für den Bogen, der als Gegenstand mittig in der Zeile liegt und
 * sonst an der Brotkrumenzeile klebte. Füllt das Video die Fläche, wird aus
 * demselben Abstand ein Streifen Nacht zwischen Brotkrume und Bild: gemessen
 * 64 Pixel, die aussehen wie ein vergessener Rand.
 *
 * Fünf Klassen, weil die Regel darüber mit `body:has(…)` vier Klassen und ein
 * Element mitbringt — mit weniger käme diese hier nicht dagegen an.
 */
@media (min-width: 48rem) {
	.jev-buehne .jev-buehne__raster:has(.jev-buehne__medium .jev-video--datei) > .jev-buehne__medienfeld {
		margin-top: 0;
	}
}

/*
 * Das Standbild und das Video in der Bühne decken dieselbe Fläche.
 *
 * `.jev-video__standbild` steht sonst auf `height: auto` — richtig für ein
 * Video in einer Spalte, falsch für eines, das eine Fläche füllt: Das Bild
 * liefe dort in seiner natürlichen Höhe aus und liesse unten Nacht stehen.
 */
/*
 * `display` steht hier bewusst nicht dabei.
 *
 * Es stand einmal drin und war ein stiller Fehler: Ein `<video>` in einem
 * geschlossenen `<details>` wird vom Browser auf `display: none` gesetzt —
 * daran hängt, dass es nichts lädt. Ein `display: block` an dieser Stelle hebt
 * das auf, und zwar auf jedem Gerät. Aufgefallen ist es erst, als das Video
 * `autoplay` bekam und plötzlich auch auf dem Telefon 2,8 MB zog; vorher zeigte
 * es nur dasselbe Standbild wie die Hülle darüber und fiel nicht auf.
 *
 * Wer das Video sichtbar machen will, tut das dort, wo die Entscheidung
 * hingehört — in der Regel für Zeigegeräte weiter unten.
 */
.jev-buehne__medium :where(.jev-video__start, .jev-video__standbild, video) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}
.jev-buehne__medium :where(.jev-video__start, .jev-video__standbild) { display: block; }
/*
 * Die Beschriftung „… abspielen" bleibt, wird aber unsichtbar: Der gezeichnete
 * Knopf sagt es hier schon, und die Pille sässe unten links genau dort, wo die
 * Knöpfe der Bühne stehen. Für Vorleseprogramme steht sie weiter da — sie ist
 * das, was den Verweis benennt.
 */
.jev-buehne__medium .jev-video__text {
	position: absolute;
	left: auto;
	bottom: auto;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * DER KNOPF ERST BEIM ÜBERFAHREN, UND KEINE BEDIENLEISTE IM RUHEZUSTAND.
 *
 * Beides nur in der Bühne: Bei einem Video, das in einer Spalte steht, bleibt
 * der Knopf sichtbar — dort ist er das Einzige, woran man erkennt, dass es ein
 * Video ist. Über einem Bildschirm füllenden Standbild war er ein Fleck auf
 * einem Gesicht.
 *
 * `@media (hover: hover)`: Auf dem Telefon gibt es kein Überfahren. Dort
 * bleiben Knopf und Bedienleiste sichtbar, sonst wäre das Video weder als
 * solches zu erkennen noch anzuhalten.
 *
 * `::-webkit-media-controls` ist kein Standard, sondern ein Teil des
 * Schattenbaums von Chrome und Safari. Firefox kennt es nicht und zeigt seine
 * Leiste weiter — das ist der Preis, und er ist tragbar: Sichtbare Bedienung
 * ist nie ein Fehler, nur weniger schön.
 */
@media (hover: hover) and (pointer: fine) {
	.jev-buehne__medium .jev-video__knopf {
		opacity: 0;
		transform: scale(0.94);
		transition: opacity 0.18s ease, transform 0.18s ease;
	}
	.jev-buehne__medium .jev-video__start:hover .jev-video__knopf,
	.jev-buehne__medium .jev-video__start:focus-visible .jev-video__knopf {
		opacity: 1;
		transform: none;
	}
	/*
	 * Die Leiste des Browsers — aber nur, solange nichts läuft.
	 *
	 * Im Ruhezustand ist sie weg und kommt beim Überfahren zurück; nicht
	 * `display: none`, sonst käme man nicht mehr an Pause und Ton.
	 *
	 * Läuft das Video, lassen wir sie los. Chrome blendet sie dann von selbst
	 * aus, sobald die Maus ein paar Sekunden stillsteht — unsere Regel
	 * überstimmte genau das, und die Leiste blieb stehen, solange der Zeiger
	 * auf dem Video lag. Die Klasse setzen `onplay` und `onpause` am Element,
	 * siehe inc/medien.php.
	 */
	.jev-buehne__medium .jev-video--datei:not(.jev-video--laeuft) video::-webkit-media-controls {
		opacity: 0;
		transition: opacity 0.18s ease;
	}
	.jev-buehne__medium .jev-video--datei:not(.jev-video--laeuft) video:hover::-webkit-media-controls,
	.jev-buehne__medium .jev-video--datei:not(.jev-video--laeuft) video:focus-within::-webkit-media-controls {
		opacity: 1;
	}
}
@media (prefers-reduced-motion: reduce) {
	.jev-buehne__medium .jev-video__knopf,
	.jev-buehne__medium .jev-video--datei:not(.jev-video--laeuft) video::-webkit-media-controls { transition: none; }
}

/*
 * DIE NAMEN INS BILD — nur in der Bewegung.
 *
 * Unter dem Bild stehend brauchen Name und Rolle eine eigene Zeile, und die
 * Porträts wachsen um sie herum; im Bild sind sie Teil des Porträts.
 *
 * Der Verlauf ist nicht neu erfunden: Auf der Startseite stehen dieselben
 * beiden Namen längst im Bild, und die Regel dafür steht weiter unten am
 * Bandzweispalter. Sie ist hier nur um diesen Fall erweitert — 78 Prozent
 * Nacht unten, nach oben durchsichtig, rund 7:1 für Weiss selbst über einer
 * hellen Aufnahme. Zwei Verläufe für dieselbe Sache wären zwei Werte, die
 * auseinanderlaufen.
 */
.jev-bewegung__portraet { position: relative; }
/* Die Rundung des Bildes gilt auch für den Verlauf darauf, sonst stünden seine
   Ecken über der Bildkante. */
.jev-bewegung__portraet figcaption {
	gap: 0;
	border-radius: 0 0 var(--jev-radius) var(--jev-radius);
}

/*
 * Keine Linie zwischen Video und Zahlenband.
 *
 * Sie stand hier, solange zwischen beiden ein Abstand klaffte: Video und Band
 * sind fast dieselbe Nacht, ohne Linie war nicht zu erkennen, wo das eine
 * aufhört. Seit der Abstand null ist, trennt sie nichts mehr, sondern zieht
 * einen Strich mitten durch eine Fläche, die als eine gelesen werden soll.
 * Der Grund für die Linie ist mit dem Abstand weggefallen.
 */

/*
 * DER BÜHNENFILM LÄUFT VON SELBST — aber nur am Bildschirm.
 *
 * Hier steht dafür nichts mehr, und das ist die Regel selbst.
 *
 * Vorher entschied das CSS: Am Bildschirm wurde der Inhalt des geschlossenen
 * `<details>` gezeigt und das Standbild ausgeblendet. Das Video war danach
 * unsichtbar. Ein geschlossenes `<details>` versteckt seinen Inhalt nämlich
 * nicht über `display`, sondern über `content-visibility: hidden` an
 * `::details-content` — das Kind bekommt weiter eine Box, wird aber nicht
 * gezeichnet, und keine Regel am Kind kommt dagegen an.
 *
 * Die Entscheidung liegt deshalb im PHP: `abschnitte/buehne.php` übergibt
 * `! wp_is_mobile()`, und `inc/medien.php` gibt für den Bildschirm gar kein
 * `<details>` aus, sondern das Video allein in `.jev-video--selbst`. Auf dem
 * Telefon bleibt es beim Standbild mit Knopf, das nichts lädt.
 *
 * ACHTUNG BEI EINEM SEITENCACHE: Diese Weiche steht auf dem Server. Ein Cache
 * müsste getrennt nach Telefon und Bildschirm ablegen, sonst bekommt die eine
 * Hälfte die Fassung der anderen.
 *
 * Anhalten und Ton gehen über die Bedienleiste beim Überfahren (WCAG 2.2.2
 * verlangt für Bewegung über fünf Sekunden genau das); wer Bewegung
 * abbestellt hat, bekommt den Film stehend — das nimmt `onloadstart` am
 * Element zurück, siehe inc/medien.php.
 */