*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg { max-width: 100%; display: block; }

body {
	font-family: var(--jev-schrift-text);
	font-size: var(--jev-t-m);
	line-height: 1.6;
	color: var(--jev-text);
	background: var(--jev-grund);
	-webkit-font-smoothing: antialiased;
}

/*
 * Überschriften in Versalien — zwei Gründe, beide zwingend:
 *
 * 1. Markenführung: Das CD setzt Display-Typografie durchgehend in Versalien.
 * 2. Milk and Clay ist eine Versalschrift, und ihre KLEINEN Umlaute sind im
 *    Webfont-Kit defekt: ä, ö, ü rendern nur die Punkte, der Grundbuchstabe
 *    fehlt („Farbflächen" wurde zu „FARBFL¨CHEN"). Die großen Umlaute Ä, Ö, Ü
 *    sind einwandfrei. `text-transform: uppercase` wandelt das Zeichen VOR der
 *    Glyphensuche um und umgeht den Fehler damit vollständig.
 *
 * Diese Regel deshalb nicht ohne Ersatz entfernen. Wenn ein korrigiertes
 * Schriftpaket vorliegt, hier vermerken und neu prüfen.
 */
h1, h2, h3, h4 {
	font-family: var(--jev-schrift-titel);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.02em;
	color: var(--jev-text-titel);
	text-wrap: balance;
	text-transform: uppercase;
	hyphens: none;
}
h1 { font-size: var(--jev-t-4xl); }
h2 { font-size: var(--jev-t-2xl); }
h3 { font-size: var(--jev-t-xl); }

p { max-width: var(--jev-breite-text); }
a { color: inherit; text-underline-offset: 0.2em; }

.jev-huelle {
	width: min(100% - 2 * var(--jev-a-4), var(--jev-breite));
	margin-inline: auto;
}

/*
 * Vertikaler Rhythmus.
 *
 * Gehört in die Basis und nicht in die Abschnitts-Stile: Ohne diese Regeln
 * stehen Überschriften und Absätze bündig aufeinander, sobald ein Template
 * gerendert wird, für das es noch keine eigenen Abschnitts-Stile gibt.
 * `:where()` hält die Spezifität bei null, damit spätere Regeln mühelos
 * überschreiben können.
 */
/* Nach einer Überschrift folgt der Inhalt eng. */
:where(h1, h2, h3, h4) + * { margin-top: var(--jev-a-3); }

/* Vor einer Überschrift steht Luft — gleich welches Element vorausgeht.
   Nur auf „Absatz + Überschrift" zu prüfen greift zu kurz: Bild-, Muster- und
   Rasterblöcke sind Container, und dann klebt die Überschrift an ihnen. */
* + :where(h2, h3, h4) { margin-top: var(--jev-a-6); }

/* Überschrift auf Überschrift bleibt dicht — sie bilden eine Einheit. */
:where(h1, h2, h3) + :where(h2, h3, h4) { margin-top: var(--jev-a-2); }

:where(p, ul, ol) + :where(p, ul, ol) { margin-top: var(--jev-a-3); }

/* Blockelemente untereinander bekommen Grundluft. */
* + :where(figure, blockquote, table) { margin-top: var(--jev-a-4); }

/*
 * Abschnitts-Abstand. Steht bewusst hier und nicht in abschnitte.css, damit
 * jedes Template sofort atmet — auch bevor die Abschnitts-Templates existieren.
 */
.jev-abschnitt { padding-block: var(--jev-a-7); }
.jev-abschnitt:first-child { padding-top: var(--jev-a-4); }

/*
 * Luft für Seiten ohne Abschnitte.
 *
 * Seiten aus dem Baukasten bringen ihren Abstand über `.jev-abschnitt` mit.
 * Was über `index.php` läuft — der Warenkorb, jede einfache Seite — hat nur
 * die Hülle, und deren Inhalt klebte oben an der Kopfzeile und unten am
 * Landschaftsband. Der direkte Nachfahre trifft genau diese Hülle; die in den
 * Abschnitten liegen tiefer und bleiben unberührt.
 */
.jev-main > .jev-huelle { padding-block: var(--jev-a-5) var(--jev-a-7); }

/*
 * Buttons in Pillenform, Versalien, gesperrt — nach Vorgabe des Auftraggebers
 * und passend zur Display-Typografie des CD.
 *
 * Lagune ist die Grundform für Handlungsaufrufe, Blüte das Signal für den
 * jeweils wichtigsten Aufruf einer Seite. Blüte bleibt damit sparsam.
 *
 * Die Farben kommen aus der Komponenten-Ebene (--jev-knopf-*), nicht aus der
 * Semantik — so lässt sich das Button-Aussehen ändern, ohne Überschriften
 * oder Flächen mitzuziehen.
 */
.jev-knopf {
	/* inline-flex statt inline-block, damit min-height greift: Mit 0.85em
	   Polster auf 0.9rem Schrift kam der Knopf auf 42px und lag damit unter
	   der Mindestgröße für Tippziele. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.85em 2em;
	background: var(--jev-knopf-grund);
	color: var(--jev-knopf-text);
	border: 0;
	border-radius: var(--jev-knopf-radius);
	font: inherit;
	font-weight: 500;
	font-size: var(--jev-t-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.jev-knopf:hover,
.jev-knopf:focus-visible { background: var(--jev-knopf-grund-hover); }

.jev-knopf--signal { background: var(--jev-knopf-signal-grund); color: var(--jev-knopf-signal-text); }
.jev-knopf--signal:hover,
.jev-knopf--signal:focus-visible { background: var(--jev-knopf-signal-hover); }

.jev-knopf--leise {
	background: transparent;
	color: var(--jev-text-titel);
	border: 1px solid currentColor;
	padding: calc(0.85em - 1px) calc(2em - 1px);
}
.jev-knopf--leise:hover,
.jev-knopf--leise:focus-visible { background: color-mix(in srgb, var(--jev-text-titel) 8%, transparent); }

.jev-icon { width: 2rem; height: 2rem; color: var(--jev-text-titel); }

/*
 * Höhe der WordPress-Adminleiste, damit die klebende Kopfzeile nicht darunter
 * verschwindet — angemeldet lagen ihre Knöpfe sonst hinter der Leiste und
 * ließen sich nicht anklicken.
 *
 * Die Leiste ist 32px hoch, unter 782px 46px, und unter 600px scrollt sie mit
 * statt zu kleben — dort darf kein Versatz stehen.
 */
body.admin-bar { --jev-adminleiste: 32px; }
@media screen and (max-width: 782px) { body.admin-bar { --jev-adminleiste: 46px; } }
@media screen and (max-width: 600px) { body.admin-bar { --jev-adminleiste: 0px; } }

/* Kopf — nachgebaut nach der Live-Seite: Navigation links, Wortmarke mittig,
   Aufruf und Symbole rechts. Bleibt beim Scrollen stehen. */
.jev-kopf {
	position: sticky;
	top: var(--jev-adminleiste, 0px);
	z-index: 30;
	background: var(--jev-grund);
	border-bottom: 1px solid var(--jev-rand);
}
/* Drei Spalten mit gleich breiten Außenspalten, damit die Wortmarke
   tatsächlich mittig sitzt und nicht nur zwischen den Nachbarn. */
/*
 * Der Kopf läuft breiter als der Seiteninhalt, wie auf der Live-Seite:
 * Dort steht die Navigation in einem 1340px breiten Band bei 50px Rand,
 * gemessen in einem 1440px-Fenster. Die Hülle des Inhalts hält dagegen
 * 1200px bei 120px Rand — der Kopf würde damit deutlich enger stehen als
 * gewohnt.
 */
.jev-kopf__raster {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--jev-a-4);
	/*
	 * 70px hoch wie der Kopf von Minimog — dort gemessen bei 1440px Fenster.
	 * Vorher ergaben sich 77px aus Polster plus Inhalt; der Wechsel zwischen
	 * einer Minimog-Seite und einer aus diesem Theme sprang dadurch um sieben
	 * Pixel. Die Hoehe steht jetzt fest, das Polster kommt an die Menuepunkte,
	 * damit deren Klickflaeche gross genug ist.
	 */
	min-height: 70px;
	padding-block: 0;
	padding-inline: var(--jev-band-rand);
	max-width: var(--jev-kopf-breite, none);
	margin-inline: auto;
}
@media (max-width: 62rem) {
	.jev-kopf__raster { padding-inline: var(--jev-a-4); }
}
/* `align-self: stretch`, damit die Navigation darin die volle Kopfhoehe
   bekommt — im Raster steht sonst alles zentriert und schrumpft auf die
   Hoehe der Schrift. Die Kinder bleiben durch `align-items: center` mittig. */
.jev-kopf__links  { display: flex; align-items: center; align-self: stretch; gap: var(--jev-a-3); }
.jev-kopf__rechts { display: flex; align-items: center; justify-content: flex-end; gap: var(--jev-a-3); }

/*
 * Groesse und Rhythmus wie bei Minimog, an dessen Kopf gemessen: 16px statt
 * 14,4px, und zwischen zwei Beschriftungen rund 45 Pixel Luft statt 24.
 * Der Abstand steckt dabei im Menuepunkt selbst, nicht in der Luecke — so
 * ist die Klickflaeche 70 Pixel hoch statt 29 und reicht bis an den
 * Nachbarn heran, wie man es von einer Kopfzeile kennt.
 */
/* Die Navigation nimmt die ganze Kopfhoehe ein — sonst bleibt die
   Klickflaeche so hoch wie die Schrift, egal was die Liste sagt. */
.jev-kopf__nav { align-self: stretch; display: flex; align-items: stretch; }
.jev-kopf__nav ul {
	display: flex;
	align-items: stretch;
	gap: 0;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: var(--jev-t-m);
}
.jev-kopf__nav li { display: flex; }
.jev-kopf__nav a {
	display: flex;
	align-items: center;
	padding: 0 1.4rem;
	text-decoration: none;
}
/*
 * Der erste Punkt rückt aus — aber nur im Kopf, nicht in der Tafel.
 *
 * In der Zeile oben soll „Start" auf der Linie der Wortmarke beginnen. In der
 * ausgefahrenen Tafel stehen die Punkte untereinander, und dort stand „Start"
 * dadurch als einziger weiter links als der Rest. Die Tafel setzt es weiter
 * unten zurück.
 */
.jev-kopf__nav li:first-child a { padding-left: 0; }

/*
 * Zwei Listen, eine sichtbar.
 *
 * Oben die des Kopfes, in der Tafel die eigene mit „Partner werden". Welche
 * gilt, entscheidet die Fensterbreite an genau der Stelle, an der auch der
 * Burger erscheint — sonst stünde für einen Moment beides oder nichts.
 *
 * Der Selektor nennt die Hülle mit, weil `.jev-kopf__nav ul` weiter oben
 * `display: flex` setzt und mit (0,1,1) sonst gewönne.
 */
.jev-kopf__nav .jev-kopf__liste--tafel { display: none; }

/*
 * Zwischen Burger und voller Breite wird das Polster kleiner.
 *
 * Bei 1024px stand die Kopfzeile mit fuenf Menuepunkten, Wortmarke, Knopf und
 * zwei Symbolen so eng, dass „Ueber Uns" und „Partner werden" jeweils auf zwei
 * Zeilen umbrachen — die Kopfzeile sah aus, als waere sie kaputt. Die Live-
 * Seite umgeht das, indem sie das Menue schon unter rund 1280px ganz
 * versteckt; das kostet aber die Navigation auf jedem Tablet.
 *
 * Mit halbem Polster passt alles nebeneinander: gemessen bei 1024px 366 statt
 * 469 Pixeln Menuebreite, und damit rund neunzig Pixel Luft bis zur Wortmarke.
 * Der Umbruch ist zusaetzlich verboten — ein Menuepunkt, der umbricht, ist
 * immer ein Fehler, nie eine Rettung.
 */
@media (min-width: 62.01rem) {
	.jev-kopf__nav a,
	.jev-kopf__aufruf { white-space: nowrap; }
}
@media (min-width: 62.01rem) and (max-width: 78rem) {
	.jev-kopf__nav a { padding-inline: 0.7rem; }
	.jev-kopf__nav ul { font-size: var(--jev-t-s); }
}
/*
 * Der Unterstrich, wie ihn Minimog zeichnet — dort ausgelesen:
 * 2px stark, 0,6s mit cubic-bezier(.25,.8,.25,1), und er waechst beim
 * Darueberfahren von links herein und zieht sich beim Verlassen nach rechts
 * hinaus. Vorher war er 1px, 0,2s und lief in beide Richtungen von links.
 *
 * Der Richtungswechsel entsteht durch die Position: Sie wird nicht
 * mitanimiert, springt also sofort von rechts nach links. Nur die Breite
 * laeuft — beim Betreten von links auf volle Breite, beim Verlassen von
 * rechts auf null.
 *
 * `background-clip: content-box` haelt die Linie auf der Breite der Schrift.
 * Ohne das liefe sie durch das seitliche Polster des Menuepunkts und waere
 * je Seite 1,4rem zu lang.
 *
 * Senkrecht sitzt sie auf der Grundlinie, nicht am unteren Rand des
 * Menuepunkts — der ist seit der vollen Kopfhoehe zwei Zentimeter tiefer.
 *
 * NUR AN MENUEPUNKTEN, also an Verweisen in einem <li>.
 *
 * Vorher stand die Regel an jedem <a> der Navigation. Seit unten in der Tafel
 * Knoepfe stehen, traf sie auch die: `background-clip: content-box` beschneidet
 * nicht nur die Linie, sondern die ganze Flaeche eines Elements — und damit die
 * Fuellung des Knopfes. Uebrig blieb ein Rechteck im Inneren eines Knopfes, der
 * laut `border-radius` rund war. Gemessen: 999px Radius, gezeichnet eine Kante.
 * Der umrandete Knopf daneben fiel nicht auf, weil dessen Form vom Rahmen kommt
 * und nicht vom Hintergrund.
 */
.jev-kopf__nav li a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-origin: content-box;
	background-clip: content-box;
	background-size: 0 2px;
	background-position: right calc(50% + 0.72em);
	transition: background-size 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.jev-kopf__nav li a:hover,
.jev-kopf__nav li a:focus-visible,
.jev-kopf__nav .current-menu-item > a {
	background-size: 100% 2px;
	background-position: left calc(50% + 0.72em);
}
@media (prefers-reduced-motion: reduce) {
	.jev-kopf__nav li a { transition: none; }
}

/* Mindestgröße für Tippziele — das Symbol selbst misst nur 24px. */
.jev-kopf__symbol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	min-width: 44px;
	min-height: 44px;
	color: var(--jev-text-titel);
}
/* Alle Symbole der Kopfzeile gleich groß, auch der Burger. */
.jev-kopf .jev-icon { width: 1.5rem; height: 1.5rem; }
/*
 * Der leere Warenkorb ist kein Link (siehe jev_korb() in inc/setup.php). Damit
 * er trotzdem an derselben Stelle in derselben Größe steht, trägt er dieselbe
 * Symbolklasse — nur der Zeiger sagt, dass es hier nichts zu holen gibt.
 */
.jev-kopf__korb--leer { cursor: default; }
/*
 * Bei null wird die Zahl grau.
 *
 * In Signalfarbe sah eine 0 aus wie eine Meldung — die Farbe ist auf der
 * ganzen Seite das Zeichen fuer „hier ist etwas". Grau sagt dasselbe wie der
 * Zeiger darueber: Der Korb ist da, aber er hat nichts.
 */
/*
 * Zwei Klassen am Korb selbst, nicht eine: Die Regel für die gefüllte Zahl
 * steht weiter unten und wog gleich schwer — bei Gleichstand gewinnt die
 * spätere. Die 0 stand deshalb doch in Signalfarbe, genau das, was der Absatz
 * darüber verhindern wollte. Gefunden auf der Startseite, betraf aber jede
 * Seite mit leerem Korb.
 */
.jev-kopf__korb--leer.jev-kopf__korb .jev-kopf__zahl {
	background: var(--jev-rand);
	color: var(--jev-platzhalter);
}
.jev-kopf__korb--leer .jev-icon { color: var(--jev-platzhalter); }

.jev-kopf__korb .jev-kopf__zahl {
	position: absolute;
	top: 0.35rem;
	right: 0.3rem;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.25rem;
	border-radius: 999px;
	background: var(--jev-signal);
	/* Nacht statt einer hellen Farbe: 4,79:1 gegen Blüte statt 2,22 — und die
	   Zahl steht nirgends sonst, sie muss also lesbar sein. */
	color: var(--jev-text);
	font-size: 0.7rem;
	line-height: 1.15rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.jev-kopf__aufruf { font-size: var(--jev-t-xs); padding: 0.6em 1.4em; min-height: 40px; }

.jev-icon { width: 2rem; height: 2rem; color: var(--jev-text-titel); }

/*
 * Wortmarke als CSS-Maske, nicht als eingebettetes SVG.
 *
 * Die Datei hat 56 KB (viele Kurvenpunkte der ausgezeichneten Buchstaben,
 * nicht zu viele Nachkommastellen — auch ganzzahlig gerundet bleiben 49 KB).
 * Auf jeder Seite eingebettet wäre das zu viel; als externe Datei wird sie
 * einmal geladen, zwischengespeichert und komprimiert nur ~15 KB übertragen.
 *
 * Die Maske hat gegenüber <img> den Vorteil, dass die Marke die Textfarbe
 * annimmt: Lagune auf hellem Grund, Düne auf dunklem — eine Datei für beides.
 */
.jev-kopf__logo { display: block; text-decoration: none; color: var(--jev-text-titel); }
.jev-kopf__logo:hover { color: var(--jev-signal); }

.jev-wortmarke {
	display: block;
	width: clamp(140px, 15vw, 190px);
	aspect-ratio: 980.717 / 131.163;
	background: currentColor;
	-webkit-mask: url("../logo/wortmarke.svg") no-repeat center / contain;
	mask: url("../logo/wortmarke.svg") no-repeat center / contain;
	transition: background-color 0.15s ease;
}

/* Nur für Screenreader — der Link braucht einen Namen, die Maske liefert keinen. */
.jev-nur-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.jev-navschalter { position: absolute; opacity: 0; pointer-events: none; }
.jev-kopf__zu, .jev-kopf__konto, .jev-kopf__schatten { display: none; }
.jev-burger {
	display: none;
	cursor: pointer;
	align-items: center;
	/*
	 * Das Zeichen sitzt links im Tippziel, nicht in dessen Mitte.
	 *
	 * Der Kasten ist 44 Pixel breit, damit man ihn sicher trifft; das Zeichen
	 * misst 24. Mittig gestellt begann es damit 10 Pixel weiter rechts als
	 * alles darunter — die Brotkrume, die Überschrift, der Fliesstext stehen
	 * alle auf der Linie der Hülle. Zehn Pixel Versatz sieht man nicht sofort,
	 * aber man sieht, dass etwas nicht stimmt.
	 *
	 * Das Tippziel bleibt 44 Pixel breit, es wächst jetzt nur nach rechts.
	 */
	justify-content: flex-start;
	min-width: 44px;
	min-height: 44px;
}

@media (max-width: 62rem) {
	.jev-burger { display: inline-flex; }
	.jev-kopf__zu { display: inline-flex; align-self: flex-end; cursor: pointer;
		min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
		color: var(--jev-text-titel); }
	/* Die Konto-Zeile sitzt unten, wie auf der Live-Seite. */
	.jev-kopf__konto {
		margin-top: auto;
		padding-top: var(--jev-a-4);
		border-top: 1px solid var(--jev-rand);
		display: flex;
		flex-direction: column;
		gap: var(--jev-a-3);
	}
	.jev-kopf__kontozeile { display: flex; align-items: center; gap: var(--jev-a-3);
		min-height: 44px; text-decoration: none; font-size: var(--jev-t-s); }
	/*
	 * JEDES SYMBOL IN DER TAFEL NIMMT DIE FARBE SEINER ZEILE.
	 *
	 * `.jev-icon` bringt seine Farbe als eigene Regel mit, statt sie zu erben —
	 * und auf Bühnenseiten setzt eine zweite Regel alle Symbole im Kopf auf
	 * Weiss (siehe abschnitte.css, „Wortmarke und Menü in voller Helligkeit").
	 * Im dunklen Balken oben ist das richtig. Die Tafel darunter ist aber eine
	 * helle Fläche, und dort stand das Kontosymbol weiss auf Papier: 1,1:1,
	 * praktisch unsichtbar. Auf Seiten ohne Bühne war es Lagune neben einer
	 * Beschriftung in Nacht — zwei Töne für eine Aussage.
	 *
	 * Die Bühnenregel benennt inzwischen selbst, welche Symbole weiss werden —
	 * Burger und die Symbole rechts, nicht mehr „alle im Kopf". Hier bleibt
	 * deshalb nur der einfache Fall: Ein Symbol in der Tafel nimmt die Farbe
	 * seiner Zeile, statt die Titelfarbe mitzubringen.
	 *
	 * Der Schliesser bleibt hell: Er steht auf der verdunkelten Fläche und
	 * setzt seine Farbe selbst, `currentColor` nimmt sie auf.
	 */
	.jev-kopf__nav .jev-icon { color: currentColor; }
	.jev-kopf__konto .jev-knopf { width: 100%; }
	/* Verdunkelte Fläche daneben; ein Klick darauf schließt. */
	body:has(.jev-navschalter:checked) .jev-kopf__schatten {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 35;
		/*
		 * 62 Prozent, nicht 45.
		 *
		 * Das Kreuz steht seit dem Umbau auf dieser Fläche und ist weiss. Bei
		 * 45 Prozent über einer hellen Seite ergibt das rund #8A8C96 und damit
		 * 2,9:1 — unter den 3:1, die ein Bedienelement braucht. Bei 62 Prozent
		 * sind es #7B7C84 und 4,0:1. Über einer dunklen Seite war es ohnehin nie
		 * knapp.
		 *
		 * Eine Scheibe hinter dem Kreuz hätte dasselbe gelöst, wäre aber ein
		 * Element, das die Live-Seite nicht hat.
		 */
		background: color-mix(in srgb, var(--jev-nacht) 62%, transparent);
		cursor: pointer;
	}
	/* Der Aufruf weicht auf schmalen Geräten — dafür gibt es den
	   mitlaufenden Balken am Fuß. */
	.jev-kopf__aufruf { display: none; }
	/*
	 * Tafel, die von links einfährt — wie auf der Live-Seite. Ohne Skript:
	 * Der Schalter ist ein Kontrollkästchen, der Burger seine Beschriftung.
	 */
	.jev-kopf__nav {
		display: none;
		flex-direction: column;
		position: fixed;
		inset: 0 auto 0 0;
		/* Als Variable, weil der Schliesser daneben sie braucht. 84 statt 88
		   Prozent: Erst dadurch bleibt rechts ein Streifen, in den ein
		   Tippziel von 44 Pixeln mit Abstand passt — bei 88 waeren es 45
		   Pixel gewesen, das Kreuz haette die Tafel beruehrt. */
		--jev-tafel-breite: min(84vw, 22rem);
		width: var(--jev-tafel-breite);
		background: var(--jev-grund);
		/*
		 * Eigene Textfarbe, nicht die geerbte des Kopfes.
		 *
		 * Die Tafel steckt im <header>, und auf Bühnenseiten steht der auf
		 * Nacht mit weisser Schrift. Ohne diese Zeile erbt die Tafel das Weiss
		 * und die Menüpunkte stehen weiss auf Papier — da war nichts mehr zu
		 * lesen. Die Tafel ist eine eigene Fläche und bringt ihre Farben selbst
		 * mit.
		 */
		color: var(--jev-text);
		padding: var(--jev-a-4);
		box-shadow: 0 0 40px color-mix(in srgb, var(--jev-nacht) 18%, transparent);
		z-index: 40;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	body:has(.jev-navschalter:checked) .jev-kopf__nav { display: flex; }
	/*
	 * DIE PUNKTE STEHEN UNTEREINANDER, OHNE TRENNSTRICHE.
	 *
	 * Vorher trug jeder Punkt eine Haarlinie. Sechs Striche auf einer sonst
	 * leeren Fläche ordnen nichts, was der Zeilenabstand nicht schon ordnet —
	 * sie machen aus einer Liste eine Tabelle. Die Live-Seite kommt ohne aus,
	 * und der Vergleich gibt ihr recht.
	 *
	 * `padding-left: 0` am ersten Punkt wird zurückgenommen: Es gehört in die
	 * Zeile oben, wo „Start" auf der Linie der Wortmarke beginnt. Hier stand
	 * dadurch ein Punkt weiter links als die fünf darunter.
	 */
	.jev-kopf__nav .jev-kopf__liste--breit { display: none; }
	.jev-kopf__nav .jev-kopf__liste--tafel { display: flex; }
	.jev-kopf__nav ul { flex-direction: column; gap: 0; font-size: var(--jev-t-m); }
	.jev-kopf__nav li { border-bottom: 0; }
	.jev-kopf__nav li a,
	.jev-kopf__nav li:first-child a {
		display: block;
		padding-block: var(--jev-a-3);
		padding-left: var(--jev-a-3);
	}

	/*
	 * DER SCHLIESSER STEHT NEBEN DER TAFEL, NICHT DARIN.
	 *
	 * Auf der Live-Seite liegt das Kreuz auf der verdunkelten Fläche rechts
	 * oben — es gehört zur Geste „zurück zur Seite" und nicht zum Inhalt der
	 * Tafel. Innen war es der erste Punkt, den man las.
	 *
	 * `position: fixed` funktioniert hier, obwohl das Kreuz im <header> steckt:
	 * Ein backdrop-filter am Kopf würde ihn zum Bezugsrahmen machen, aber genau
	 * dieser Filter wird abgeschaltet, solange die Tafel offen ist (siehe
	 * abschnitte.css). Ohne das säße das Kreuz in der Kopfzeile fest.
	 *
	 * Der Streifen neben der Tafel ist 12vw breit — auf 375 Pixern sind das 45,
	 * gerade genug für ein Tippziel von 44. Deshalb steht das Kreuz bündig und
	 * nicht mittig darin.
	 */
	body:has(.jev-navschalter:checked) .jev-kopf__zu {
		position: fixed;
		top: 4px;
		/*
		 * Acht Pixel neben der Tafel, nicht an der Fensterkante.
		 *
		 * Das Kreuz gehoert sichtbar zu dieser Tafel; klebte es in der Ecke,
		 * laege es genauso gut am Warenkorb. Das `min()` faengt sehr schmale
		 * Geraete ab: Reicht der Streifen nicht, rueckt es so weit nach links,
		 * dass es im Fenster bleibt.
		 */
		left: min(calc(var(--jev-tafel-breite) + 8px), calc(100dvw - 52px));
		right: auto;
		z-index: 41;
		color: var(--jev-text-invers);
	}
}

/* Brotkrumen */
/* Brotkrume als eigene Zeile — nur, wenn der erste Abschnitt sie nicht selbst
   trägt (siehe jev_krume_im_abschnitt()). */
.jev-krumenzeile { padding-block: var(--jev-a-3); }

.jev-brotkrumen ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jev-a-2);
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: var(--jev-t-s);
	color: color-mix(in srgb, var(--jev-text) 70%, transparent);
}
.jev-brotkrumen li + li::before { content: "›"; margin-right: var(--jev-a-2); }

/* Fuß */
.jev-fuss {
	background: var(--jev-flaeche-nacht);
	color: var(--jev-text-invers-leise);
	padding-bottom: var(--jev-a-6);
	font-size: var(--jev-t-s);
}

/*
 * Die Naht zum Fuß — nur dort, wo das Landschaftsband fehlt.
 *
 * Auf der Startseite endet die Seite mit dem Partnerschaftsband auf Nacht.
 * Ohne Linie stiessen dort zwei gleiche Flächen aneinander, und niemand sähe,
 * wo die Seite aufhört und der Fuss beginnt. Weiss bei zwölf Prozent, dieselbe
 * Linie wie unter dem Kopf auf den Bühnenseiten: Sie trennt gerade so viel,
 * wie nötig ist, und verschwindet, sobald man nicht darauf achtet.
 *
 * Wo das Band steht, braucht es sie nicht — dort trennt das Bild.
 */
.jev-fuss--ohneband { border-top: 1px solid color-mix(in srgb, var(--jev-weiss) 12%, transparent); }

/*
 * Der Übergang von der Seite in das Landschaftsband.
 *
 * Der Himmel der Grafik ist Mondschein; darüber lag der Seitengrund, und
 * dazwischen stand eine gerade Kante quer über den Bildschirm. Der Verlauf
 * nimmt sie heraus. Er endet exakt auf #d8dad0 — dieselbe Farbe, mit der die
 * Grafik oben anfängt, sonst wäre die Kante nur ein paar Pixel tiefer.
 */
.jev-fuss__uebergang {
	height: clamp(3rem, 7vw, 6rem);
	background: linear-gradient(to bottom, var(--jev-uebergang-von, var(--jev-grund)), var(--jev-flaeche-kuehl));
}

.jev-fuss__band {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}
/* Der Innenabstand sitzt am Inhalt, nicht am Bild — sonst hätte das Band
   wieder einen Rand nach unten. */
.jev-fuss > .jev-huelle { padding-top: var(--jev-a-6); }

.jev-fuss__vision { max-width: 78ch; }
.jev-fuss__vision strong { color: var(--jev-text-invers); font-weight: 500; }

.jev-fuss__spalten { display: grid; gap: var(--jev-a-5); margin-top: var(--jev-a-5); }
@media (min-width: 44rem) { .jev-fuss__spalten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .jev-fuss__spalten { grid-template-columns: repeat(4, 1fr); } }



.jev-fuss__titel {
	font-family: var(--jev-schrift-titel);
	font-size: var(--jev-t-xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--jev-signal);
	margin-bottom: var(--jev-a-3);
}
.jev-fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--jev-a-2); }
.jev-fuss a { color: var(--jev-text-invers-leise); text-decoration: none; }
.jev-fuss a:hover, .jev-fuss a:focus-visible { color: var(--jev-signal); text-decoration: underline; }

/*
 * Auf dem Handy zwei Spalten statt einer und Verweise mit echter Tippfläche.
 *
 * Gemessen bei 390px: Der Fuß war 1531px hoch — ein Zehntel der ganzen Seite —
 * und alle 18 Verweise waren 18px hoch, also weit unter den 44px, die ein
 * Finger braucht. Die zwei Spalten holen die Höhe wieder herein, die die
 * größeren Tippflächen kosten.
 *
 * Die Studio-Liste bleibt einspaltig: Ihre Einträge heißen „Brasilianische
 * Lymphdrainage in München" und zerfielen in einer halben Spalte in drei
 * Zeilen.
 */
@media (max-width: 43.99rem) {
	.jev-fuss__spalten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--jev-a-4) var(--jev-a-4);
	}
	.jev-fuss__spalten > nav:last-child { grid-column: 1 / -1; }
	/* Muss nach der Grundregel stehen: Beide haben dieselbe Spezifität, und
	   eine Medienabfrage erhöht sie nicht — sonst gewinnt die spätere
	   Grundregel mit ihren 8px und die Zeilen messen 44 statt 36. */
	.jev-fuss ul { gap: 0; }
	/*
	 * 36px, nicht 44: Die Richtlinie verlangt 24x24 (WCAG 2.2, Stufe AA), 44
	 * ist die Empfehlung von Apple und die höhere Stufe. Bei 18px Schrift sahen
	 * 44px Zeilen leer aus — 36 lassen die Liste als Liste lesen und liegen
	 * immer noch ein Drittel über der Anforderung.
	 */
	.jev-fuss ul a {
		display: flex;
		align-items: center;
		min-height: 36px;
	}
	/* Untereinander statt nebeneinander: Auf 390px standen Zeile und Anschrift
	   sonst gequetscht in einer Reihe. */
	.jev-fuss__schluss { flex-direction: column; align-items: flex-start; }
}

.jev-fuss__zahlarten { margin-top: var(--jev-a-5); }
.jev-fuss__zahlarten img { width: min(100%, 320px); height: auto; }

.jev-fuss__schluss {
	margin-top: var(--jev-a-5);
	padding-top: var(--jev-a-3);
	border-top: 1px solid var(--jev-rand-invers);
	display: flex;
	flex-wrap: wrap;
	gap: var(--jev-a-2) var(--jev-a-4);
	justify-content: space-between;
	font-size: var(--jev-t-xs);
}

/*
 * Mitlaufender Aufruf, nur auf schmalen Geräten. Über der sicheren Zone,
 * damit ihn die Gestensteuerung des Systems nicht verdeckt.
 *
 * Eine kompakte Pille rechts unten statt eines Balkens über die volle Breite:
 * Sie nimmt am wenigsten Fläche und lässt die Seite ganz. Der Preis dafür ist,
 * dass der Text weiter unter ihr durchläuft — die Pille bringt keinen eigenen
 * Grund mit. Der Schatten trennt sie stattdessen vom Untergrund, damit die
 * Kante lesbar bleibt.
 */
.jev-mobilruf__huelle { display: none; }

@media (max-width: 47.99rem) {
	.jev-mobilruf__huelle {
		display: block;
		position: fixed;
		/* left bleibt ungesetzt: Die Pille ist so breit wie ihre Schrift. */
		right: var(--jev-a-3);
		bottom: calc(var(--jev-a-3) + env(safe-area-inset-bottom, 0px));
		z-index: 40;
	}
	.jev-mobilruf {
		display: inline-flex;
		align-items: center;
		gap: var(--jev-a-2);
		/* Enger als der Grundknopf, sonst wirkt die kurze Beschriftung verloren.
		   Die 44px Mindesthöhe des Grundknopfs bleiben unangetastet. */
		padding-inline: var(--jev-a-4);
		box-shadow: 0 6px 20px color-mix(in srgb, var(--jev-nacht) 30%, transparent);
	}
	.jev-mobilruf svg {
		width: 0.875rem;
		height: 0.875rem;
		flex: 0 0 auto;
	}
	/* Platz, damit die Pille den Fußabschluss nicht überdeckt. Weniger als beim
	   Balken, weil sie niedriger ist und nur die rechte Hälfte einnimmt. */
	.jev-hat-mobilruf .jev-fuss { padding-bottom: calc(var(--jev-a-5) + 3.5rem); }
}

/*
 * Die Pille tritt erst auf, wenn die Bühne fortgerollt ist, verschwindet wieder,
 * solange die Konditionen im Bild sind, und tritt endgültig ab, sobald das
 * Formular kommt. An allen drei Stellen steht ein Aufruf schon auf der Seite —
 * die Pille wiederholte ihn nur und verdeckte dabei Text.
 *
 * Ohne JavaScript, weil Perfmatters alle Skripte bis zur ersten Berührung
 * verzögert: Zwei Zeitleisten aus dem Rollstand, eine an der Bühne und eine am
 * Formular. Weil beide Abschnitte im <main> stehen und die Pille am Ende des
 * <body>, macht timeline-scope am Wurzelelement die Namen dort bekannt.
 *
 * Auf drei Elemente verteilt und nicht auf eines: Drei Animationen an demselben
 * Element schreiben alle auf opacity, und die späteste gewinnt — dann zeigte
 * das Formular die Pille wieder, während die Bühne sie noch verstecken will.
 * Hülle, Zone und Pille wirken dagegen nacheinander, und verstecken heißt
 * verstecken.
 *
 * Kann der Browser das nicht, bleibt die Pille durchgehend sichtbar. Das ist
 * der Zustand von vorher und damit ein sicherer Rückfall.
 */
@supports (animation-timeline: view()) and (timeline-scope: --jev-x) {
	:root { timeline-scope: --jev-buehne, --jev-vergleich, --jev-bewerbung; }
	.jev-buehne        { view-timeline: --jev-buehne block; }
	.jev-vergleich     { view-timeline: --jev-vergleich block; }
	.jev-formularblock { view-timeline: --jev-bewerbung block; }

	@media (max-width: 47.99rem) {
		/* Auftritt auf den letzten 200px, bevor die Bühne oben verschwindet.
		   Nicht über den ganzen Austritt: Der ist so hoch wie die Bühne, und die
		   Pille stünde schon auf halber Höhe halb sichtbar im Bild. */
		.jev-mobilruf__huelle {
			animation-name: jev-ruf-auftritt;
			animation-timeline: --jev-buehne;
			animation-range: exit calc(100% - 200px) exit 100%;
			animation-duration: auto;
			animation-timing-function: linear;
			animation-fill-mode: both;
		}
		/*
		 * Pause, solange die Konditionen im Bild sind: Dort stehen drei Knöpfe
		 * „Modell wählen“, die aufs selbe Ziel zeigen. Über den ganzen Durchlauf
		 * des Abschnitts, mit einem kurzen Ein- und Ausblenden an den Rändern —
		 * anders als beim Formular kommt die Pille danach wieder.
		 */
		.jev-mobilruf__zone {
			animation-name: jev-ruf-pause;
			animation-timeline: --jev-vergleich;
			animation-range: cover;
			animation-duration: auto;
			animation-timing-function: linear;
			animation-fill-mode: both;
		}
		/* Abtritt auf den ersten 200px, in denen das Formular hereinkommt.
		   In Pixeln und nicht in Prozent, weil der Eintrittsbereich so hoch ist
		   wie der Abschnitt: Bei Prozent hinge die Dauer an der Formularlänge.
		   Danach hält der Endzustand — die Pille bleibt auch im Fuß fort. */
		.jev-mobilruf {
			animation-name: jev-ruf-abtritt;
			animation-timeline: --jev-bewerbung;
			animation-range: entry 0px entry 200px;
			animation-duration: auto;
			animation-timing-function: linear;
			animation-fill-mode: both;
		}
	}
}
@keyframes jev-ruf-auftritt {
	from { opacity: 0; visibility: hidden; }
	to   { opacity: 1; visibility: visible; }
}
@keyframes jev-ruf-abtritt {
	from { opacity: 1; visibility: visible; }
	to   { opacity: 0; visibility: hidden; }
}
@keyframes jev-ruf-pause {
	0%        { opacity: 1; visibility: visible; }
	6%,  94%  { opacity: 0; visibility: hidden; }
	100%      { opacity: 1; visibility: visible; }
}

/* Sprungmarke für Tastaturnutzung */
.jev-skip { position: absolute; left: -9999px; }
.jev-skip:focus {
	left: var(--jev-a-3);
	top: var(--jev-a-3);
	background: var(--jev-grund);
	padding: var(--jev-a-2);
	z-index: 100;
}

/* ---------- Warenkorb-Schublade -------------------------------------- */

/*
 * Dieselbe Tafel wie das mobile Menü, nur von rechts und auf jeder Breite.
 * Ohne Skript: Das Kontrollkästchen ist der Schalter, Korbsymbol und
 * Verdunklung sind seine Beschriftungen. Sie funktioniert damit sofort, auch
 * bevor Perfmatters die Skripte freigibt.
 */
.jev-korbschalter { position: absolute; opacity: 0; pointer-events: none; }

.jev-korb {
	position: fixed;
	inset: 0 0 0 auto;
	z-index: 60;
	width: min(92vw, 26rem);
	display: flex;
	flex-direction: column;
	background: var(--jev-grund);
	box-shadow: 0 0 40px color-mix(in srgb, var(--jev-nacht) 18%, transparent);
	/*
	 * Geschlossen wird sie hinausgeschoben, nicht ausgeblendet: `display: none`
	 * kann nicht überblenden, und eine Schublade, die springt, wirkt wie ein
	 * Fehler. `visibility` nimmt sie trotzdem aus der Tastaturreihenfolge.
	 */
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0s linear 0.28s;
}
body:has(.jev-korbschalter:checked) .jev-korb {
	transform: none;
	visibility: visible;
	transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@media (prefers-reduced-motion: reduce) {
	.jev-korb { transition: visibility 0s linear 0.28s; }
	body:has(.jev-korbschalter:checked) .jev-korb { transition: none; }
}

.jev-korb__schatten { display: none; }
body:has(.jev-korbschalter:checked) .jev-korb__schatten {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 55;
	background: color-mix(in srgb, var(--jev-nacht) 45%, transparent);
	cursor: pointer;
}

.jev-korb__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jev-a-3);
	padding: var(--jev-a-4);
	border-bottom: 1px solid var(--jev-rand);
}
.jev-korb__titel {
	font-family: var(--jev-schrift-titel);
	font-size: var(--jev-t-m);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--jev-text-titel);
}
.jev-korb__zu {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin-right: calc(var(--jev-a-3) * -1);
	cursor: pointer;
	color: var(--jev-text-titel);
}

/*
 * Der Weg zum kostenlosen Versand.
 *
 * Er steht über der Liste, nicht darunter: Er ist der Grund, noch etwas
 * dazuzulegen, und der gehört gelesen, bevor der Blick auf „Zur Kasse" fällt.
 *
 * NACHGEBAUT nach Minimogs Fassung, Masse und Farben aus der Live-Fassung
 * gemessen: Text 18/28, Spur und Füllung 6 Pixel hoch mit 10 Pixel Rundung,
 * Knopf 26 Pixel, Stern 12 Pixel.
 *
 * ZUR FARBE. Das Gelb #ffbc11 steht nicht im Brand Book — es ist Minimogs
 * Akzent. Es bleibt hier, weil genau diese Fassung nachgebaut werden sollte.
 * Beide Werte stehen als eigene Eigenschaften oben im Block: Wer auf die
 * Palette wechseln will, setzt `--jev-ziel-farbe: var(--jev-signal)` und
 * `--jev-ziel-spur: var(--jev-creme)` — mehr ist es nicht.
 *
 * ZUM ÜBERHANG. Spur und Füllung ragen über `inset: 0 -13px` je 13 Pixel nach
 * beiden Seiten hinaus, und der Balken selbst steht um dieselben 13 Pixel
 * eingerückt. Das ist Minimogs Kniff und er ist der Grund, warum der Knopf am
 * Ende sauber sitzt: Sein Mittelpunkt liegt auf dem Ende der Füllung, seine
 * rechte Kante auf dem Ende des Überhangs. Ohne das ragte er bei 100 Prozent
 * aus dem Balken heraus.
 */
.jev-korb__ziel {
	--jev-ziel-farbe: #ffbc11;
	--jev-ziel-spur:  #e9e9e9;

	padding: var(--jev-a-4);
	border-bottom: 1px solid var(--jev-rand);
}
.jev-korb__zieltext {
	margin: 0 0 15px;
	max-width: none;
	font-size: 1.125rem;
	line-height: 1.56;
	font-weight: 400;
	color: var(--jev-text-titel);
}
.jev-korb__zieltext strong { font-weight: 700; }
/* WooCommerce packt den Preis in eigene Elemente — die dürfen nichts mitbringen. */
.jev-korb__zieltext .amount { font-weight: inherit; color: inherit; white-space: nowrap; }

.jev-korb__balken {
	position: relative;
	height: 6px;
	margin-inline: 13px;
}
.jev-korb__balken::before {
	content: "";
	position: absolute;
	inset: 0 -13px;
	border-radius: 10px;
	background: var(--jev-ziel-spur);
}
.jev-korb__balkenwert {
	position: relative;
	height: 6px;
	width: 0;
	transition: width 0.3s ease;
}
.jev-korb__balkenwert::before {
	content: "";
	position: absolute;
	inset: 0 -13px;
	border-radius: 10px;
	background: var(--jev-ziel-farbe);
}
.jev-korb__stern {
	position: absolute;
	right: 0;
	top: 3px;
	transform: translate(13px, -13px);
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--jev-weiss);
	border: 1px solid var(--jev-ziel-farbe);
	color: var(--jev-ziel-farbe);
}
.jev-korb__stern svg { width: 12px; height: 12px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) {
	.jev-korb__balkenwert { transition: none; }
}

/* Der Inhalt rollt, Kopf und Fuss bleiben stehen. */
.jev-korb__inhalt {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}
/*
 * Zwei Klassen: basis.css setzt `ul[class] { padding: 0 }` — Element plus
 * Attribut wiegt schwerer als eine einzelne Klasse, und der Innenabstand fiel
 * weg. Die Posten klebten dadurch an beiden Kanten der Schublade.
 */
.jev-korb .jev-korb__liste {
	list-style: none;
	margin: 0;
	padding: var(--jev-a-4);
	display: grid;
	gap: var(--jev-a-4);
	overflow-y: auto;
	overscroll-behavior: contain;
}
/*
 * Die Zeile eines Postens — nachgebaut nach Minimogs Schublade, Masse aus der
 * Live-Fassung gemessen: Bild 112 Quadrat, 16 Pixel Abstand, Name in Milk and
 * Clay 16/28 in Versalien, Preis 16 in Lagune, Mengenfeld 100 × 36 mit 5 Pixel
 * Rundung, „Entfernen" 14 unterstrichen.
 *
 * Das Grau #f1f1f1 des Mengenfeldes steht nicht im Brand Book — es ist
 * Minimogs. Es hängt an `--jev-menge-grund`, der Wechsel auf eine Palettenfarbe
 * ist eine Zeile. Dasselbe Muster wie beim Versandbalken darüber.
 *
 * Der Name steht in Versalien, weil Milk and Clay nur Grossbuchstaben hat:
 * Ohne `text-transform` wird aus „ö" ein nacktes Trema. Die Regel darf hier nie
 * verschwinden.
 */
.jev-korb__posten {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
.jev-korb__bild {
	flex: 0 0 auto;
	display: block;
	width: 112px;
	height: 112px;
	overflow: hidden;
	background: var(--jev-flaeche-warm);
}
/* Zwei Klassen wegen `.woocommerce img { height: auto }`. */
.jev-korb .jev-korb__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.jev-korb__wort { flex: 1 1 auto; min-width: 0; }

.jev-korb__name {
	margin: 0;
	font-family: var(--jev-schrift-titel);
	font-size: 1rem;
	line-height: 1.75;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: uppercase;
	color: var(--jev-text);
}
.jev-korb__name a { color: inherit; text-decoration: none; }
.jev-korb__name a:hover { color: var(--jev-signal); }

.jev-korb__preis {
	margin: 0;
	max-width: none;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--jev-text-titel);
}

.jev-korb__zeile {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
}

.jev-korb__menge {
	--jev-menge-grund: #f1f1f1;

	display: grid;
	grid-template-columns: 33px minmax(0, 1fr) 33px;
	align-items: center;
	width: 100px;
	height: 36px;
	border-radius: 5px;
	background: var(--jev-menge-grund);
}
.jev-korb__mengenknopf {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 1rem;
	line-height: 1;
	color: var(--jev-text-titel);
	text-decoration: none;
}
.jev-korb__mengenknopf:hover { color: var(--jev-signal); }
/* Bei eins zeigt „Entfernen" daneben, was gemeint ist — der Knopf muss es nicht. */
.jev-korb__mengenknopf--aus { opacity: 0.3; pointer-events: none; }
.jev-korb__mengenwert {
	text-align: center;
	font-size: 1rem;
	line-height: 1;
	color: var(--jev-text-titel);
	font-variant-numeric: tabular-nums;
}

.jev-korb__weg {
	font-size: 0.875rem;
	color: var(--jev-text);
	text-decoration: underline;
	white-space: nowrap;
}
.jev-korb__weg:hover { color: var(--jev-signal); }

.jev-korb__fuss {
	margin-top: auto;
	padding: var(--jev-a-4);
	border-top: 1px solid var(--jev-rand);
	display: grid;
	gap: var(--jev-a-3);
	background: var(--jev-flaeche-weiss);
}

/*
 * „Versand" und „Gutschein" — die beiden Tafeln, wie in der Live-Fassung: zwei
 * gleich breite Felder mit Symbol über der Beschriftung, dazwischen ein
 * Haarstrich.
 *
 * Es sind Beschriftungen von Optionsfeldern, keine Knöpfe: Damit öffnen und
 * schliessen die Tafeln ohne Skript, und es kann immer nur eine offen sein.
 */
.jev-korb__aktionen {
	display: grid;
	grid-template-columns: 1fr 1px 1fr;
	align-items: center;
	margin: calc(var(--jev-a-2) * -1) 0 var(--jev-a-1);
}
.jev-korb__aktionen::before {
	content: "";
	grid-column: 2;
	align-self: stretch;
	margin-block: var(--jev-a-2);
	background: var(--jev-rand);
}
.jev-korb__aktion {
	grid-row: 1;
	display: grid;
	justify-items: center;
	gap: 6px;
	padding: var(--jev-a-2);
	cursor: pointer;
	color: var(--jev-text-titel);
	font-size: var(--jev-t-s);
	font-weight: 500;
}
.jev-korb__aktion:first-of-type { grid-column: 1; }
.jev-korb__aktion:last-of-type { grid-column: 3; }
.jev-korb__aktion:hover { color: var(--jev-signal); }
.jev-korb__aktion .jev-icon { width: 22px; height: 22px; color: inherit; }

.jev-korb__meldung {
	margin: 0;
	max-width: none;
	padding: var(--jev-a-2) var(--jev-a-3);
	border-radius: var(--jev-radius);
	font-size: var(--jev-t-s);
}
.jev-korb__meldung--gut { background: color-mix(in srgb, var(--jev-lagune) 8%, transparent); color: var(--jev-text-titel); }
.jev-korb__meldung--fehler { background: color-mix(in srgb, var(--jev-signal) 14%, transparent); color: var(--jev-text); }

/*
 * Die Summen sind eine Tabelle, weil Germanized seine Pflichthinweise als
 * fertige `<tr>` an WooCommerces Haken hängt. Sie soll aber nicht wie eine
 * aussehen: keine Rahmen, keine Kopfzeile, zwei Spalten, rechts bündig.
 */
.jev-korb__summen {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--jev-t-s);
}
.jev-korb__summen tr > * {
	padding: 3px 0;
	border: 0;
	font-weight: 400;
	text-align: left;
	vertical-align: baseline;
}
.jev-korb__summen th { color: var(--jev-text); }
.jev-korb__summen td {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--jev-text-titel);
}
.jev-korb__summen th small { display: block; font-size: var(--jev-t-xs); color: var(--jev-text-leise); }
.jev-korb__summen .cart-discount th a { margin-left: 0.5em; font-size: var(--jev-t-xs); color: var(--jev-text-leise); }
.jev-korb__summen .order-total > * {
	padding-top: var(--jev-a-2);
	border-top: 1px solid var(--jev-rand);
	font-size: var(--jev-t-m);
}
.jev-korb__summen .order-total td { font-family: var(--jev-schrift-titel); }
/* Was Plugins darunter hängen — „inkl. MwSt., zzgl. Versandkosten". */
.jev-korb__summen .order-total ~ tr > * {
	padding-top: 4px;
	font-size: var(--jev-t-xs);
	color: var(--jev-text-leise);
}

.jev-korb__knoepfe { display: grid; gap: var(--jev-a-2); }
.jev-korb__knoepfe .jev-knopf { width: 100%; }

/*
 * Die Tafeln selbst.
 *
 * Sie fahren von unten über die Schublade, wie in der Vorlage, und liegen als
 * Kinder von `.jev-korb__inhalt` trotzdem über allem: Bezugsrahmen ist die
 * fest positionierte `.jev-korb`, nicht der Inhalt.
 */
.jev-tafelschalter { position: absolute; opacity: 0; pointer-events: none; }

.jev-korb__tafel {
	position: absolute;
	inset: auto 0 0;
	z-index: 2;
	max-height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--jev-a-4);
	background: var(--jev-flaeche-weiss);
	box-shadow: 0 -12px 30px color-mix(in srgb, var(--jev-nacht) 12%, transparent);
	transform: translateY(100%);
	visibility: hidden;
	transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0s linear 0.28s;
}
body:has(#jev-tafel-versand:checked) .jev-korb__tafel--versand,
body:has(#jev-tafel-gutschein:checked) .jev-korb__tafel--gutschein {
	transform: none;
	visibility: visible;
	transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* Was darunter liegt, tritt zurück, solange eine Tafel offen ist. */
body:has(.jev-tafelschalter:checked:not(#jev-tafel-keine)) .jev-korb__liste,
body:has(.jev-tafelschalter:checked:not(#jev-tafel-keine)) .jev-korb__ziel,
body:has(.jev-tafelschalter:checked:not(#jev-tafel-keine)) .jev-korb__fuss { opacity: 0.25; }
@media (prefers-reduced-motion: reduce) {
	.jev-korb__tafel { transition: visibility 0s linear 0.28s; }
	body:has(#jev-tafel-versand:checked) .jev-korb__tafel--versand,
	body:has(#jev-tafel-gutschein:checked) .jev-korb__tafel--gutschein { transition: none; }
}

.jev-korb__tafel form { display: grid; gap: var(--jev-a-3); }
.jev-korb__tafeltitel {
	margin: 0;
	font-family: inherit;
	font-size: var(--jev-t-l);
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--jev-text-titel);
}
.jev-korb__tafeltext { margin: 0; max-width: none; font-size: var(--jev-t-s); color: var(--jev-text); }
.jev-korb__feld { margin: 0; max-width: none; }
.jev-korb__feld select,
.jev-korb__feld input {
	width: 100%;
	min-height: 48px;
	padding: 0 var(--jev-a-3);
	border: 1px solid var(--jev-rand-stark);
	border-radius: 6px;
	background: var(--jev-grund);
	font: inherit;
	font-size: var(--jev-t-m);
	color: var(--jev-text-titel);
}
.jev-korb__feld input::placeholder { color: var(--jev-platzhalter); }
.jev-korb__tafel .jev-knopf { width: 100%; }
.jev-knopf--nacht { background: var(--jev-flaeche-nacht); color: var(--jev-text-invers); }
.jev-knopf--nacht:hover,
.jev-knopf--nacht:focus-visible { background: color-mix(in srgb, var(--jev-nacht) 88%, var(--jev-weiss)); }
.jev-korb__abbrechen {
	justify-self: center;
	padding: var(--jev-a-2);
	cursor: pointer;
	font-size: var(--jev-t-s);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jev-text-titel);
}
.jev-korb__abbrechen:hover { color: var(--jev-signal); }

.jev-korb .jev-korb__gutscheine { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jev-a-2); }
.jev-korb__gutschein {
	display: grid;
	gap: 2px;
	padding: var(--jev-a-3);
	border-radius: var(--jev-radius);
	background: var(--jev-grund);
}
.jev-korb__gutschein b { font-size: var(--jev-t-m); font-weight: 500; color: var(--jev-text-titel); }
.jev-korb__gutschein span { font-size: var(--jev-t-s); color: var(--jev-text-leise); }
.jev-korb__gutschein code {
	margin-right: 0.5em;
	font-family: inherit;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--jev-signal);
}
.jev-korb__gutschein small { font-size: var(--jev-t-xs); color: var(--jev-text-leise); }
.jev-korb__gutschein em { font-size: var(--jev-t-xs); font-style: normal; color: var(--jev-text-titel); }
.jev-korb__gutschein--drin { outline: 1px solid var(--jev-rand-stark); }

.jev-korb__leer {
	display: grid;
	gap: var(--jev-a-4);
	justify-items: start;
	padding: var(--jev-a-5) var(--jev-a-4);
}
.jev-korb__leer p { margin: 0; color: var(--jev-text-leise); }

/* Das Korbsymbol ist jetzt eine Beschriftung, kein Link — der Zeiger muss das
   trotzdem sagen. */
label.jev-kopf__korb { cursor: pointer; }

/* ---------- Warenkorbseite ------------------------------------------- */

/*
 * Zwei Spalten: links die Positionen, rechts die Zusammenfassung, die beim
 * Rollen stehen bleibt. Unter 62rem stapelt es — die Zusammenfassung wandert
 * dann unter die Waren, wo sie hingehört: erst sehen, was drin ist, dann was
 * es kostet.
 */
.jev-wk {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 21rem;
	gap: var(--jev-a-5);
	align-items: start;
	margin-top: var(--jev-a-4);
}
@media (max-width: 62rem) {
	.jev-wk { grid-template-columns: minmax(0, 1fr); gap: var(--jev-a-4); }
}

/* Der Versandbalken sitzt hier über der Liste, nicht in einem eigenen Kasten. */
.jev-wk .jev-korb__ziel { padding: 0 0 var(--jev-a-4); }

.jev-wk .jev-wk__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	border-top: 1px solid var(--jev-rand);
}
.jev-wk__posten {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--jev-a-3) var(--jev-a-4);
	padding-block: var(--jev-a-3);
	border-bottom: 1px solid var(--jev-rand);
}
.jev-wk__bild {
	display: block;
	width: 88px;
	height: 88px;
	overflow: hidden;
	background: var(--jev-flaeche-warm);
}
.jev-wk .jev-wk__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.jev-wk__wort { min-width: 0; }
.jev-wk__name {
	margin: 0;
	font-family: var(--jev-schrift-titel);
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--jev-text);
}
.jev-wk__name a { color: inherit; text-decoration: none; }
.jev-wk__name a:hover { color: var(--jev-signal); }
.jev-wk__daten,
.jev-wk__einzeln { margin: 0; max-width: none; font-size: var(--jev-t-xs); color: var(--jev-text-leise); }
.jev-wk__einzeln span { margin-left: 0.35em; }

.jev-wk__menge {
	--jev-menge-grund: #f1f1f1;

	display: grid;
	grid-template-columns: 33px minmax(0, 1fr) 33px;
	align-items: center;
	width: 100px;
	height: 36px;
	border-radius: 5px;
	background: var(--jev-menge-grund);
}
.jev-wk__rechts { display: grid; gap: 2px; justify-items: end; text-align: right; }
.jev-wk__zeilensumme {
	font-size: var(--jev-t-m);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--jev-text-titel);
}

/*
 * Schmal reicht die Breite für vier Spalten nicht. Bild links, alles andere
 * rechts daneben untereinander — und die Zeilensumme neben die Menge, damit
 * die Zeile nicht in die Höhe wächst.
 */
@media (max-width: 40rem) {
	.jev-wk__posten {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: var(--jev-a-2) var(--jev-a-3);
	}
	.jev-wk__bild { width: 72px; height: 72px; grid-row: span 2; }
	.jev-wk__menge { grid-column: 2; }
	.jev-wk__rechts { grid-column: 2; grid-row: 2; justify-items: end; align-self: center; }
	.jev-wk__menge { grid-row: 2; justify-self: start; }
}

.jev-wk__weiter { margin: var(--jev-a-3) 0 0; max-width: none; font-size: var(--jev-t-s); }

.jev-wk__kasse {
	position: sticky;
	top: calc(var(--jev-adminleiste, 0px) + 70px + var(--jev-a-3));
	display: grid;
	gap: var(--jev-a-3);
	padding: var(--jev-a-4);
	background: var(--jev-flaeche-weiss);
	border: 1px solid var(--jev-rand);
	border-radius: var(--jev-radius);
}
@media (max-width: 62rem) {
	.jev-wk__kasse { position: static; }
}
.jev-wk__kassentitel {
	margin: 0;
	font-size: var(--jev-t-m);
	letter-spacing: 0.04em;
}

/*
 * Gutschein und Versandschätzung als `<details>`: zu eine Zeile, offen das
 * Formular. Ohne Skript, und ohne die drei Reiter der alten Fassung, die auf
 * schmalen Geräten ohnehin umbrachen.
 */
.jev-wk__klappe { border-top: 1px solid var(--jev-rand); padding-top: var(--jev-a-3); }
.jev-wk__klappe > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jev-a-2);
	font-size: var(--jev-t-s);
	font-weight: 500;
	color: var(--jev-text-titel);
}
.jev-wk__klappe > summary::-webkit-details-marker { display: none; }
.jev-wk__klappe > summary::after {
	content: "+";
	font-size: var(--jev-t-m);
	line-height: 1;
	color: var(--jev-text-leise);
}
.jev-wk__klappe[open] > summary::after { content: "\2212"; }
.jev-wk__klappe > form { display: grid; gap: var(--jev-a-3); margin-top: var(--jev-a-3); }
.jev-wk__klappe .jev-knopf { width: 100%; }

/*
 * „Zur Kasse" kommt von WooCommerce, nicht aus diesem Theme — es hängt am
 * Haken `woocommerce_proceed_to_checkout`, an dem auch PayPal und Klarna ihre
 * Express-Schaltflächen einhängen. Ein selbst geschriebener Knopf ließe die
 * verschwinden. Also bekommt WooCommerces Knopf hier das Aussehen des
 * eigenen — dieselben Werte wie `.jev-knopf--signal`.
 *
 * Der lange Selektor ist nötig, kein Übermut: WooCommerce setzt sein Violett
 * über `.woocommerce:where(…) a.button.alt`. Das `:where()` wiegt nichts, die
 * drei Klassen und das Element aber schon — eine kürzere Regel verliert und
 * der Knopf bliebe violett.
 */
.jev-wk__kasse .wc-proceed-to-checkout { display: grid; gap: var(--jev-a-2); }
.jev-wk__kasse a.checkout-button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding: 0.85em 2em;
	background: var(--jev-knopf-signal-grund);
	color: var(--jev-knopf-signal-text);
	border: 0;
	border-radius: var(--jev-knopf-radius);
	font: inherit;
	font-weight: 500;
	font-size: var(--jev-t-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.jev-wk__kasse a.checkout-button.button.alt:hover,
.jev-wk__kasse a.checkout-button.button.alt:focus-visible { background: var(--jev-knopf-signal-hover); }

.jev-wk__leer {
	display: grid;
	gap: var(--jev-a-4);
	justify-items: start;
	margin-top: var(--jev-a-4);
}
.jev-wk__leer p { margin: 0; color: var(--jev-text-leise); }

/* ---------- Kasse ----------------------------------------------------- */

/*
 * Der Zuschnitt, den Shopify seit Jahren fährt — und der Grund dafür ist kein
 * gestalterischer: Wer in der Kasse steht, hat sich entschieden. Jeder Weg von
 * dieser Seite herunter ist ein Weg, der nicht zur Bestellung führt.
 *
 * Also: kein Menü, kein Warenkorbsymbol, kein „Partner werden", kein grosser
 * Fuss mit Studios und Sitemap. Oben Wortmarke und der Weg zurück in den
 * Warenkorb, unten das Rechtliche in einer Zeile. Dazwischen die Fläche
 * senkrecht geteilt: links das Formular auf Papier, rechts die Bestellung auf
 * Creme, bis an die Fensterkante.
 *
 * DIE TEILUNG MACHT DAS FORMULAR SELBST — siehe inc/kasse.php. WooCommerce
 * legt seine beiden Blöcke `#customer_details` und `#order_review` bereits so
 * ab, wie wir sie brauchen; das Raster liegt deshalb am `<form>` und nicht an
 * einer Hülle darum. Eine Hülle könnte die beiden gar nicht trennen: Sie
 * stecken im Formular, und das Formular ist ein Element.
 *
 * Gebaut ohne eine überschriebene WooCommerce-Vorlage. Was hier steht, ist
 * Fläche und Ausrichtung; Felder, Schritte und Zahlwege bleiben, wie
 * WooCommerce und Germanized sie liefern.
 */

/*
 * Wortmarke und Rückweg stehen oben in der linken Spalte, nicht in einem
 * Balken darüber. Ein Balken wäre wieder eine Kopfzeile, nur eine schmalere.
 */
.jev-kasse__marke {
	display: grid;
	justify-items: start;
	gap: var(--jev-a-2);
	/*
	 * Oben 10 statt 64.
	 *
	 * Über der Wortmarke stand eine ganze Handbreit leerer Grund, bevor die
	 * Seite anfing — auf einer Kasse, die man erreicht, weil man etwas kaufen
	 * will, ist das die teuerste Fläche der ganzen Seite. Erst auf 20, dann auf
	 * 10; die Marke steht damit fast an der Fensterkante.
	 *
	 * 10px steht nicht auf der Skala; sie kennt 8 und 16. Vorgabe des
	 * Auftraggebers, wie an der Karte der Bestellung.
	 *
	 * Das Tippziel des Pfeils daneben ist 44 Pixel hoch und beginnt damit zehn
	 * Pixel unter der Fensterkante — knapp, aber es liegt vollständig auf der
	 * Seite.
	 */
	padding: 10px var(--jev-band-rand) 0;
}
/*
 * DREI SPALTEN, DAMIT DIE MARKE WIRKLICH MITTIG STEHT.
 *
 * Die äussere Spalte rechts ist leer und trägt nichts als ihr Gewicht: Ohne
 * sie stünde die Marke in der Mitte des Rests, also um die Breite des Pfeils
 * nach rechts versetzt. Deshalb auch das Polster links und rechts auf
 * demselben Wert — sonst säße die Mitte fünf Pixel daneben.
 */
.jev-kasse__marke {
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	justify-items: center;
	gap: 0;
}
/*
 * Nur der Pfeil. Die Beschriftung steht als unsichtbarer Text daneben (siehe
 * inc/kasse.php) — das Ziel ist auf einer Kasse eindeutig, und die Zeile
 * „← Zurück zum Warenkorb" nahm der Marke die Mitte.
 *
 * 44 Pixel Tippziel, obwohl das Zeichen kleiner ist. Der Pfeil sitzt links
 * darin, auf der Linie der Spalte darunter — dieselbe Regel wie beim Burger
 * im Kopf.
 */
.jev-kasse__zurueckzumkorb {
	grid-column: 1;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	min-width: 44px;
	min-height: 44px;
	font-size: var(--jev-t-l);
	line-height: 1;
	color: var(--jev-text-leise);
	text-decoration: none;
}
.jev-kasse__zurueckzumkorb:hover,
.jev-kasse__zurueckzumkorb:focus-visible { color: var(--jev-signal); }
.jev-kasse__marke .jev-kopf__logo { grid-column: 2; }

.jev-kassenfuss {
	background: var(--jev-grund);
	border-top: 1px solid var(--jev-rand);
}
.jev-kassenfuss__raster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--jev-a-2) var(--jev-a-4);
	padding: var(--jev-a-3) var(--jev-band-rand);
	font-size: var(--jev-t-xs);
	color: var(--jev-text-leise);
}
.jev-kassenfuss ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jev-a-2) var(--jev-a-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.jev-kassenfuss__marke { margin: 0; max-width: none; }

/*
 * Die Hülle der Seite wird aufgehoben: Die geteilte Fläche muss bis an beide
 * Fensterkanten reichen, sonst schwebt die Creme-Hälfte in der Mitte.
 */
body.jev-kasse-seite .jev-main > .jev-huelle {
	width: 100%;
	max-width: none;
	padding: 0;
}
/*
 * „Kasse" als Überschrift bleibt für Vorleseprogramme stehen, verschwindet
 * aber aus dem Bild: Die Seite ist unverwechselbar, und eine Plakatzeile über
 * dem Formular kostet nur die erste Bildschirmhöhe.
 */
body.jev-kasse-seite .jev-main > .jev-huelle > h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
/*
 * Der helle Streifen über der geteilten Fläche.
 *
 * Über der Creme-Hälfte stand ein 16 Pixel hoher heller Balken quer über den
 * Bildschirm. Gemessen: Der Körper der Seite begann bei 16 statt bei 0.
 *
 * Ursache ist eine Randregel des Themes — auf eine Überschrift folgt der
 * Inhalt mit Abstand. Die Überschrift „Kasse" steht hier nur noch für
 * Vorleseprogramme, als Geschwister zählt sie aber weiter, und den Abstand
 * bekam WooCommerces eigene Hülle `.woocommerce` dahinter. Weil darüber weder
 * Polster noch Rahmen liegen, fiel er nicht zwischen die beiden Elemente,
 * sondern nach oben aus der Seite heraus.
 */
body.jev-kasse-seite .jev-main > .jev-huelle > .woocommerce { margin-top: 0; }

/*
 * Die Seite ist ein einfacher Stapel: Wortmarke, Vorspann, Formular. Geteilt
 * wird erst im Formular.
 */
.jev-kasse { display: block; }
/*
 * Der Vorspann — Gutschein-Zeile, Anmeldung, Meldungen. Über die halbe Breite,
 * damit „Du hast einen Gutschein?" nicht als Zeile über den ganzen Bildschirm
 * läuft, sondern über der Spalte steht, zu der sie gehört.
 */
.jev-kasse__vorspann {
	max-width: 50%;
	padding: 0 var(--jev-a-5) 0 var(--jev-band-rand);
}

/*
 * DAS RASTER: links Felder, rechts Bestellung.
 *
 * Zwei Zeilen sind nötig, weil links zwei Blöcke stehen (die Express-Knöpfe
 * von Apple und Google und darunter die Felder), rechts aber nur einer, der
 * neben beiden stehen soll. `1 / -1` funktioniert hier — anders als früher an
 * der Übersicht —, weil die Zeilen mit `grid-template-rows` benannt sind;
 * ohne sie zeigt `-1` auf dieselbe Linie wie `1`.
 */
body.jev-kasse-seite .jev-kasse form.checkout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
	align-items: start;
}
body.jev-kasse-seite .jev-kasse form.checkout > .wcpay-express-checkout-wrapper {
	grid-column: 1;
	grid-row: 1;
	padding: var(--jev-a-4) var(--jev-a-5) 0 var(--jev-band-rand);
}
body.jev-kasse-seite .jev-kasse form.checkout > #customer_details {
	grid-column: 1;
	grid-row: 2;
	padding: var(--jev-a-4) var(--jev-a-5) var(--jev-a-7) var(--jev-band-rand);
}
/* Steht nur für Vorleseprogramme — sichtbar trägt die Karte ihre Abschnitte. */
body.jev-kasse-seite .jev-kasse form.checkout > #order_review_heading {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
/*
 * Die Bestellung als ein weisses Blatt auf der Creme-Fläche — nicht als
 * zweite Hälfte, die selbst bis an die Kante läuft. Das ist der Unterschied
 * zwischen „zwei Flächen" und „ein Blatt, das auf einer Fläche liegt".
 */
body.jev-kasse-seite .jev-kasse form.checkout > #order_review {
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: start;
	position: sticky;
	top: calc(var(--jev-adminleiste, 0px) + var(--jev-a-4));
	margin: var(--jev-a-4) var(--jev-band-rand) var(--jev-a-7) var(--jev-a-5);
	/*
	 * Oben weniger als an den anderen drei Seiten: 20 statt 40.
	 *
	 * Über „Zahlungsart auswählen" stand dieselbe Polsterung wie unten und an
	 * den Seiten, und die Karte begann damit sichtbar später als die Spalte
	 * daneben. Eine Zwischenüberschrift braucht über sich weniger Luft als eine
	 * Karte unter ihrem letzten Element.
	 *
	 * 20px steht bewusst nicht auf der Skala — die kennt 16 und 24. Es ist eine
	 * Vorgabe des Auftraggebers; wer die Skala geradezieht, nimmt `--jev-a-4`.
	 */
	padding: 20px var(--jev-a-5) var(--jev-a-5);
	background: var(--jev-flaeche-weiss);
	border-radius: calc(var(--jev-radius) * 3);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--jev-nacht) 6%, transparent),
	            0 8px 24px color-mix(in srgb, var(--jev-nacht) 5%, transparent);
}

/*
 * Die zweifarbige Fläche liegt am Hauptbereich, nicht an einer Spalte: Nur so
 * läuft sie über die ganze Höhe der Seite und nicht bloss so weit, wie die
 * Bestellung gerade reicht. Die Haarlinie auf der Naht ist die zweite
 * Farbebene darüber.
 */
@media (min-width: 62.01rem) {
	body.jev-kasse-seite .jev-main {
		background:
			linear-gradient(to right, transparent 0 calc(50% - 1px), var(--jev-rand) calc(50% - 1px) 50%, transparent 50%),
			linear-gradient(to right, var(--jev-grund) 0 50%, var(--jev-flaeche-warm) 50% 100%);
	}

	/*
	 * DER KOPF LIEGT ÜBER DER TEILUNG, NICHT DARIN.
	 *
	 * Geteilt wird erst im Formular: Links die Felder, rechts die Bestellung.
	 * Wortmarke, Rückweg und Gutschein-Zeile stehen darüber und nur in der
	 * linken Hälfte — rechts daneben lief die Creme-Fläche als leeres Feld bis
	 * an den Seitenanfang. 200 Pixer Farbe, in denen nichts steht.
	 *
	 * Beide Blöcke bekommen deshalb den Seitengrund als eigene Fläche und
	 * decken den Verlauf dahinter zu. Die Naht mit ihrer Haarlinie verschwindet
	 * damit oben mit — richtig, denn dort gibt es keine zwei Spalten, die eine
	 * Naht bräuchten.
	 *
	 * WARUM ZUDECKEN UND NICHT DEN VERLAUF KÜRZEN. Er läge sonst nicht mehr am
	 * Hauptbereich, sondern am Formular — und endete dort, wo die Bestellung
	 * endet, statt am Seitenende. Genau davor warnt der Kommentar darüber. Die
	 * Höhe des Kopfes ist ausserdem nicht fest: Die Gutschein-Zeile klappt auf.
	 * Eine Fläche, die mitwächst, ist stabiler als eine gerechnete Zahl.
	 */
	body.jev-kasse-seite .jev-kasse__marke,
	body.jev-kasse-seite .jev-kasse__vorspann {
		background: var(--jev-grund);
	}
	/*
	 * Der Vorspann wird über die volle Breite gezogen, damit er die rechte
	 * Hälfte mit abdeckt; sein Inhalt bleibt durch das Polster rechts genau so
	 * breit wie vorher — gemessen 630 Pixel bei 1440 Fensterbreite.
	 */
	body.jev-kasse-seite .jev-kasse__vorspann {
		max-width: none;
		padding-right: calc(50% + var(--jev-a-5));
	}
}

/* Schmal: eine Spalte, das Blatt liegt unter den Feldern. */
@media (max-width: 62rem) {
	.jev-kasse__marke { padding: var(--jev-a-4) var(--jev-a-4) 0; }
	.jev-kasse__vorspann {
		max-width: none;
		padding: 0 var(--jev-a-4);
	}
	body.jev-kasse-seite .jev-kasse form.checkout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
	}
	body.jev-kasse-seite .jev-kasse form.checkout > .wcpay-express-checkout-wrapper,
	body.jev-kasse-seite .jev-kasse form.checkout > #customer_details,
	body.jev-kasse-seite .jev-kasse form.checkout > #order_review {
		grid-column: 1;
		grid-row: auto;
	}
	body.jev-kasse-seite .jev-kasse form.checkout > .wcpay-express-checkout-wrapper {
		padding: var(--jev-a-4) var(--jev-a-4) 0;
	}
	body.jev-kasse-seite .jev-kasse form.checkout > #customer_details {
		padding: var(--jev-a-4) var(--jev-a-4) var(--jev-a-4);
	}
	body.jev-kasse-seite .jev-kasse form.checkout > #order_review {
		position: static;
		margin: 0 var(--jev-a-4) var(--jev-a-6);
		padding: var(--jev-a-4);
	}
}

/*
 * Führt Germanized Pro die Kasse wieder über Schritte, steht im letzten
 * Schritt ohnehin nur noch die Bestellung — dann eine Spalte, mittig.
 */
body.woocommerce-multistep-checkout-active-order .jev-kasse form.checkout {
	grid-template-columns: minmax(0, 1fr);
	max-width: 46rem;
	margin-inline: auto;
}
@media (min-width: 62.01rem) {
	body.woocommerce-multistep-checkout-active-order.jev-kasse-seite .jev-main { background: var(--jev-grund); }
}

/* Der Trenner der Express-Knöpfe: „— ODER —" als leise Zeile, nicht als Ruf. */
body.jev-kasse-seite .wcpay-express-checkout-wrapper p {
	margin: var(--jev-a-3) 0 0;
	max-width: none;
	text-align: center;
	font-size: var(--jev-t-xs);
	letter-spacing: 0.08em;
	color: var(--jev-text-leise);
}

/*
 * Knöpfe und Überschriften im Kassenformular.
 *
 * Die Knöpfe standen als graue Systemkästen da: Am Körper hängt
 * `woocommerce-block-theme-has-button-styles`, damit hält WooCommerce seine
 * eigenen Knopfstile zurück und überlässt sie dem Theme. Minimog hatte welche,
 * dieses Theme hatte für `.button` noch keine.
 */
.jev-kasse form.checkout .button,
.jev-kasse form.checkout button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.85em 2em;
	background: var(--jev-knopf-grund);
	color: var(--jev-knopf-text);
	border: 0;
	border-radius: var(--jev-knopf-radius);
	font: inherit;
	font-weight: 500;
	font-size: var(--jev-t-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.jev-kasse form.checkout .button:hover,
.jev-kasse form.checkout button[type="submit"]:hover { background: var(--jev-knopf-grund-hover); }
/* Der eine Knopf, der die Bestellung auslöst, trägt Blüte — wie „Zur Kasse". */
.jev-kasse form.checkout #place_order {
	width: 100%;
	background: var(--jev-knopf-signal-grund);
	color: var(--jev-knopf-signal-text);
}
.jev-kasse form.checkout #place_order:hover { background: var(--jev-knopf-signal-hover); }

/*
 * Die Zwischenüberschriften stehen in Milk and Clay wie überall, aber nicht in
 * Plakatgrösse: „Lieferung an eine andere Adresse?" nahm auf dem Telefon zwei
 * Zeilen zu 30 Pixeln ein und wog schwerer als die Felder darunter.
 */
.jev-kasse form.checkout h3 { font-size: var(--jev-t-m); }

/* =====================================================================
   DIE FELDER
   ===================================================================== */

/*
 * Die Felder gefüllt statt umrandet.
 *
 * Weiss mit Haarlinie, nicht Seitengrund: Gefüllt in `--jev-grund` waren sie
 * unsichtbar, weil die linke Spalte genau diese Farbe trägt — von einem
 * Eingabefeld blieb nichts als eine Lücke zwischen zwei Beschriftungen.
 *
 * 44 statt 48 Pixel Höhe und engere Polsterung. Gemessen waren es 50 Pixel
 * Feldhöhe, darüber eine 29 Pixel hohe Beschriftung — 97 Pixel Schrittweite je
 * Zeile. Bei zwölf Feldern ist das ein Formular, das man scrollt statt
 * ausfüllt. 44 Pixel bleiben die Untergrenze für einen sicheren Fingertipp.
 */
body.jev-kasse-seite .jev-kasse form.checkout input[type="text"],
body.jev-kasse-seite .jev-kasse form.checkout input[type="tel"],
body.jev-kasse-seite .jev-kasse form.checkout input[type="email"],
body.jev-kasse-seite .jev-kasse form.checkout input[type="password"],
body.jev-kasse-seite .jev-kasse form.checkout select,
body.jev-kasse-seite .jev-kasse form.checkout textarea {
	width: 100%;
	min-height: 44px;
	padding: 0.55rem 0.85rem;
	background: var(--jev-flaeche-weiss);
	border: 1px solid var(--jev-rand);
	border-radius: calc(var(--jev-radius) * 2);
	font: inherit;
	font-size: var(--jev-t-m);
	color: var(--jev-text-titel);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
body.jev-kasse-seite .jev-kasse form.checkout textarea { min-height: 6rem; }
body.jev-kasse-seite .jev-kasse form.checkout input:focus,
body.jev-kasse-seite .jev-kasse form.checkout select:focus,
body.jev-kasse-seite .jev-kasse form.checkout textarea:focus {
	outline: none;
	background: var(--jev-flaeche-weiss);
	border-color: var(--jev-text-titel);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--jev-lagune) 16%, transparent);
}

/*
 * Beschriftung links, Pflichtzeichen direkt dahinter — nicht am anderen Ende
 * der Spalte. Bei 600 Pixel Feldbreite stand der Stern sonst einsam am rechten
 * Rand und gehörte optisch zu nichts mehr. Der Stern bleibt ein Stern:
 * „Pflicht" per CSS hineinzuschreiben hiesse, sichtbaren Text zu erfinden, den
 * kein Vorleseprogramm so kennt.
 */
body.jev-kasse-seite .jev-kasse form.checkout .form-row > label {
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	gap: 0.35em;
	margin-bottom: 4px;
	/* Ohne eigene Zeilenhöhe erbt die Beschriftung die des Fliesstexts und ist
	 * 29 Pixel hoch — doppelt so hoch wie ihre Schrift. */
	line-height: 1.25;
	font-size: var(--jev-t-s);
	color: var(--jev-text);
}
body.jev-kasse-seite .jev-kasse form.checkout .form-row > label .required {
	color: var(--jev-text-leise);
	text-decoration: none;
}

/*
 * WAS ZUSAMMENGEHÖRT, STEHT NEBENEINANDER: Vorname und Nachname,
 * Postleitzahl und Ort.
 *
 * Warum ein Raster und nicht WooCommerces eigene Spalten: `form-row-first`
 * und `form-row-last` sind dort Prozentbreiten mit Umfluss, und Germanized
 * vergibt sie nicht überall — Postleitzahl und Ort kommen als
 * `form-row-wide` herein. Im Raster ist „volle Breite" die Voreinstellung,
 * und die Paare stehen namentlich darunter. Was ein Plugin dazwischen
 * einhängt, bleibt damit von selbst breit.
 */
body.jev-kasse-seite .jev-kasse .woocommerce-billing-fields__field-wrapper,
body.jev-kasse-seite .jev-kasse .woocommerce-shipping-fields__field-wrapper,
body.jev-kasse-seite .jev-kasse .woocommerce-account-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--jev-a-3);
	row-gap: 14px;
}
body.jev-kasse-seite .jev-kasse .woocommerce-billing-fields__field-wrapper > *,
body.jev-kasse-seite .jev-kasse .woocommerce-shipping-fields__field-wrapper > *,
body.jev-kasse-seite .jev-kasse .woocommerce-account-fields > * { grid-column: 1 / -1; }
/* WooCommerces Umfluss-Stopper hat im Raster keine Aufgabe mehr. */
body.jev-kasse-seite .jev-kasse .woocommerce-billing-fields__field-wrapper > .clear,
body.jev-kasse-seite .jev-kasse .woocommerce-shipping-fields__field-wrapper > .clear,
body.jev-kasse-seite .jev-kasse .woocommerce-account-fields > .clear { display: none; }
body.jev-kasse-seite .jev-kasse form.checkout .form-row {
	margin: 0;
	padding: 0;
	/*
	 * Eine Formularzeile ist ein <p> und erbte damit die Lesebreite aus der
	 * Grundschrift: 714 statt 781 Pixel. Der Hinweis zur Abholstation ist ein
	 * <div>, blieb also volle Breite — und stand als einziges Element 67 Pixel
	 * weiter rechts als alles darüber und darunter.
	 */
	max-width: none;
}
/*
 * WooCommerce legt jedes Feld in einen <span>, und ein Zeilenelement trägt die
 * Höhe eines Blocks darin nicht: Die Zeile mit dem Land war 56 statt 66 Pixel
 * hoch, das Auswahlfeld ragte unten heraus.
 */
body.jev-kasse-seite .jev-kasse form.checkout .woocommerce-input-wrapper { display: block; }
body.jev-kasse-seite .jev-kasse form.checkout .form-row-first { grid-column: 1; }
body.jev-kasse-seite .jev-kasse form.checkout .form-row-last { grid-column: 2; }
body.jev-kasse-seite .jev-kasse form.checkout #billing_postcode_field,
body.jev-kasse-seite .jev-kasse form.checkout #shipping_postcode_field { grid-column: 1; }
body.jev-kasse-seite .jev-kasse form.checkout #billing_city_field,
body.jev-kasse-seite .jev-kasse form.checkout #shipping_city_field { grid-column: 2; }
/*
 * „Nicht zu Hause? Wähle eine Abholstation aus" gehört zum Strassenfeld
 * darüber und rückt deshalb dicht daran — sonst schwebt der Satz zwischen
 * zwei Feldern und sieht aus, als gehörte er zum nächsten.
 */
body.jev-kasse-seite .jev-kasse form.checkout .pickup_location_notice {
	margin-top: -10px;
	font-size: var(--jev-t-s);
}

/*
 * DAS LÄNDERFELD.
 *
 * WooCommerce ersetzt die Auswahlliste durch Select2: Das echte Feld liegt
 * abgeschnitten daneben, sichtbar ist ein nachgebauter Kasten. Der trug seine
 * eigene Höhe von 34 Pixeln und war damit zehn Pixel flacher als jedes andere
 * Feld — in einer Spalte gleich hoher Felder fällt genau das auf.
 */
body.jev-kasse-seite .jev-kasse form.checkout .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	height: 44px;
	padding: 0 0.85rem;
	background: var(--jev-flaeche-weiss);
	border: 1px solid var(--jev-rand);
	border-radius: calc(var(--jev-radius) * 2);
}
body.jev-kasse-seite .jev-kasse form.checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.3;
	font-size: var(--jev-t-m);
	color: var(--jev-text-titel);
}
body.jev-kasse-seite .jev-kasse form.checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 10px;
	height: 42px;
}
body.jev-kasse-seite .jev-kasse form.checkout .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--jev-text-titel);
}

/* Auf dem Telefon ist für zwei Spalten kein Platz. */
@media (max-width: 34rem) {
	body.jev-kasse-seite .jev-kasse .woocommerce-billing-fields__field-wrapper,
	body.jev-kasse-seite .jev-kasse .woocommerce-shipping-fields__field-wrapper,
	body.jev-kasse-seite .jev-kasse .woocommerce-account-fields { grid-template-columns: minmax(0, 1fr); }
	body.jev-kasse-seite .jev-kasse form.checkout .form-row-first,
	body.jev-kasse-seite .jev-kasse form.checkout .form-row-last,
	body.jev-kasse-seite .jev-kasse form.checkout #billing_postcode_field,
	body.jev-kasse-seite .jev-kasse form.checkout #shipping_postcode_field,
	body.jev-kasse-seite .jev-kasse form.checkout #billing_city_field,
	body.jev-kasse-seite .jev-kasse form.checkout #shipping_city_field { grid-column: 1 / -1; }
}

/* =====================================================================
   DAS BLATT RECHTS: ZAHLUNG, ZUSTELLUNG, AUFSTELLUNG, KAUFEN
   =====================================================================

   Alles darin liefern WooCommerce, Germanized, PayPal und DHL mit ihrer
   eigenen Gestaltung: ein lila hinterlegter Kasten für die Zahlungsart, eine
   graue Tabelle mit Rahmen für die Aufstellung, dazwischen Hinweise in
   Systemgrau. Hier steht nur Fläche, Linie und Schriftgrösse — kein Feld,
   kein Text, keine Reihenfolge.

   WARUM ÜBERALL `body.jev-kasse-seite` DAVORSTEHT. Die Plugins schreiben ihre
   Regeln mit `#payment` und `#order_review`, also mit einer ID — das wiegt
   schwerer als jede Kette aus Klassen. Ein erster Versuch ohne diesen Zusatz
   hat die Hälfte der Regeln verloren: Der lila Kasten war weg, die graue
   Tabelle blieb. Die Körperklasse hebt das Gewicht gerade so weit, dass es
   reicht, und begrenzt zugleich alles auf diese eine Seite.

   DIE ABSCHNITTE TRENNT WEISSRAUM UND EINE HAARLINIE, keine zweite
   Kartenebene: Karten auf einer Karte wären ein Blatt mit Zetteln darauf.
   ===================================================================== */

/* Die Abschnittsüberschrift ist eine Beschriftung, kein Aufruf. */
body.jev-kasse-seite #order_review > h3 {
	margin: 0 0 var(--jev-a-3);
	font-size: var(--jev-t-xs);
	letter-spacing: 0.1em;
	color: var(--jev-text-leise);
}
/* PayPals Ratenhinweis über den Kacheln: eine Fussnote, keine Zeile Werbung. */
body.jev-kasse-seite #order_review .ppcp-messages {
	margin-bottom: var(--jev-a-3);
	font-size: var(--jev-t-xs);
	color: var(--jev-text-leise);
}

/*
 * ZAHLARTEN ALS KACHELN.
 *
 * WooCommerce liefert eine Liste mit Optionsfeldern; die Kachel entsteht
 * daraus allein über Fläche und Rand. Das Optionsfeld bleibt sichtbar — es ist
 * das, was Tastatur und Vorleseprogramm bedienen, und ohne es wäre nicht zu
 * erkennen, welche Zahlart gewählt ist.
 *
 * Auf dem weissen Blatt sind die Kacheln getönt statt weiss: Weiss auf Weiss
 * bräuchte einen Rahmen, um überhaupt eine Kachel zu sein. Die gewählte kehrt
 * das um — sie wird weiss und bekommt einen kräftigen Ring.
 */
body.jev-kasse-seite #payment {
	background: none;
	border: 0;
	border-radius: 0;
}
body.jev-kasse-seite #payment .wc_payment_methods {
	display: grid;
	gap: var(--jev-a-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
/*
 * Optionsfeld und Name in einer Zeile — das Raster liegt an der Kachel.
 *
 * WooCommerce stellt das Optionsfeld als Geschwister VOR die Beschriftung.
 * Solange die Kachel ein gewöhnlicher Block ist, macht ein `display: flex` an
 * der Beschriftung daraus einen eigenen Absatz: Das Optionsfeld stand darüber,
 * der Name 45 Pixel darunter. Bei PayPal war genau das zu sehen.
 *
 * Bei „Karte" und „Klarna" fiel es nicht auf — aus dem entgegengesetzten
 * Grund. WooCommerce Payments bringt eine eigene Regel mit
 * (`#payment .payment_methods li[class*="payment_method_woocommerce_payments"] label`),
 * die dasselbe Gewicht hat wie unsere, später geladen wird und damit gewinnt:
 * `display: inline`. Zwei Kacheln sahen also anders aus als die dritte, und
 * keine von beiden sah aus wie gedacht.
 *
 * Am Raster der Kachel ist beides erledigt, unabhängig davon, was ein Plugin
 * an die Beschriftung schreibt.
 */
body.jev-kasse-seite #payment .wc_payment_method {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: var(--jev-a-2);
	padding: var(--jev-a-3);
	background: var(--jev-grund);
	border: 1px solid transparent;
	border-radius: calc(var(--jev-radius) * 2);
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
/* Voreinstellung für alles, was ein Plugin sonst noch in die Kachel legt. */
body.jev-kasse-seite #payment .wc_payment_method > * { grid-column: 1 / -1; }
body.jev-kasse-seite #payment .wc_payment_method > input[type="radio"] {
	grid-column: 1;
	grid-row: 1;
	width: 18px;
	height: 18px;
	margin: 0;
	/* Das Systemblau des Browsers war die einzige Fremdfarbe auf der Seite. */
	accent-color: var(--jev-text-titel);
}
/*
 * Eine Klasse mehr als die Regel von WooCommerce Payments — nur so bleibt die
 * Beschriftung eine Zeile, und nur dann rückt das Zahlartenlogo mit
 * `margin-left: auto` an den rechten Rand statt hinter den Namen.
 */
body.jev-kasse-seite #payment .wc_payment_methods li.wc_payment_method > label {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: var(--jev-a-2);
	margin: 0;
	font-size: var(--jev-t-m);
	color: var(--jev-text-titel);
	cursor: pointer;
}
body.jev-kasse-seite #payment .wc_payment_methods li.wc_payment_method > label > img,
body.jev-kasse-seite #payment .wc_payment_methods li.wc_payment_method > label > .payment-methods--logos {
	margin-left: auto;
}
/* Die gewählte Kachel kehrt sich um — Farbe allein sagt es nicht. */
body.jev-kasse-seite #payment .wc_payment_method:has(input:checked) {
	background: var(--jev-flaeche-weiss);
	box-shadow: inset 0 0 0 2px var(--jev-text-titel);
}
body.jev-kasse-seite #payment .wc_payment_method:hover:not(:has(input:checked)) {
	background: color-mix(in srgb, var(--jev-mondschein) 30%, var(--jev-grund));
}
/*
 * Die Beschreibung unter einer Zahlungsart bleibt — bei „Karte" steht darin
 * das Kartenformular. Nur ruhiger: kein eigener Kasten mehr, kleine Schrift.
 */
body.jev-kasse-seite #payment .payment_box {
	grid-row: 2;
	margin: var(--jev-a-3) 0 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: var(--jev-t-s);
	color: var(--jev-text-leise);
}
body.jev-kasse-seite #payment .payment_box::before { content: none; }
/*
 * Klarnas Kasten war keiner: Das ist ein <fieldset>, und der Rillenrahmen
 * darum ist die Voreinstellung des Browsers aus den Neunzigern.
 */
body.jev-kasse-seite #payment .payment_box fieldset {
	margin: 0;
	border: 0;
}
/*
 * PAYPALS ENGLISCHER WERBESATZ steht bewusst NICHT hier drin.
 *
 * In seinem Kasten steht „Our all-in-one checkout solution lets you offer
 * PayPal, Venmo, Pay Later options …" — englische Werbung an der
 * empfindlichsten Stelle einer deutschen Kasse. Ihn per CSS auszublenden geht
 * nicht sauber: WooCommerces eigenes Skript setzt beim Umschalten der Zahlart
 * `style="display: block"` direkt an das Element, und dagegen käme nur
 * `!important` an — das würde WooCommerces Auf- und Zuklappen aushebeln.
 *
 * Der Text kommt aus dem Feld „Beschreibung" der Zahlungsart und gehört dort
 * geleert: WooCommerce → Einstellungen → Zahlungen → PayPal. Eine Zeile am
 * richtigen Ort statt einer Regel am falschen.
 */

/*
 * Keine Linie unter der Liste der Zahlungsarten.
 *
 * WooCommerce zieht dort von sich aus eine Haarlinie. Direkt darunter beginnt
 * die Einwilligung mit ihrer eigenen Linie (unten) — zwei Linien mit Abstand
 * dazwischen, die nichts voneinander trennen. Die der Einwilligung bleibt, weil
 * sie Zahlungsart und Zustimmung trennt. Über `#payment` höher gewichtet als die
 * Regel von WooCommerce, ohne !important.
 */
body.jev-kasse-seite #payment ul.payment_methods { border-bottom: 0; }

/*
 * Die Einwilligung zu AGB und Widerruf.
 *
 * `:not(:empty)`: Germanized legt sechs solcher Platzhalter an und füllt nur
 * den, in dem die Kästchen landen. Ohne die Einschränkung stünden fünf leere
 * Abschnitte untereinander.
 */
body.jev-kasse-seite .wc-gzd-checkbox-placeholder:not(:empty) {
	margin-top: var(--jev-a-4);
	padding-top: var(--jev-a-4);
	border-top: 1px solid var(--jev-rand);
	font-size: var(--jev-t-s);
	color: var(--jev-text);
}
body.jev-kasse-seite .wc-gzd-checkbox-placeholder:not(:empty) p { max-width: none; }

/*
 * DHLs Wunschzustellung.
 *
 * Sie kommt mit dem Markenlogo in voller Grösse und einer fetten Zeile
 * daneben — auf einem Blatt, auf dem sonst nichts schreit, ist das ein
 * Werbeblock mitten im Bestellvorgang. Das Logo bleibt (es ist die Marke, die
 * liefert), aber in der Grösse einer Angabe.
 */
body.jev-kasse-seite .dhl-preferred-service-content {
	margin-top: var(--jev-a-4);
	padding-top: var(--jev-a-4);
	border-top: 1px solid var(--jev-rand);
	font-size: var(--jev-t-s);
}
body.jev-kasse-seite .dhl-preferred-service-content img { width: 52px; height: auto; }
/*
 * Die Überschrift ist eine Zwischenzeile, kein Aufruf. Sie ist weder <strong>
 * noch <h3>, sondern ein <div> mit eigener Klasse — ein erster Versuch über
 * die Elemente traf deshalb nichts und liess die Zeile fett und in 17,6 Pixeln
 * stehen. Die volle Kette braucht es, weil DHL selbst mit vier Klassen
 * schreibt; `body` davor gibt den Ausschlag.
 */
body.jev-kasse-seite .dhl-preferred-service-content .dhl-preferred-service-item .dhl-preferred-service-title,
body.jev-kasse-seite [class*="dhl"] > h3,
body.jev-kasse-seite [class*="dhl"] > h4 {
	display: block;
	margin-bottom: var(--jev-a-2);
	font-size: var(--jev-t-s);
	font-weight: 500;
	color: var(--jev-text-titel);
}
body.jev-kasse-seite .dhl-preferred-service-content input[type="radio"] { accent-color: var(--jev-text-titel); }

/* =====================================================================
   DIE VERBINDLICHE AUFSTELLUNG
   ===================================================================== */

body.jev-kasse-seite #order_review .shop_table {
	width: 100%;
	margin-top: var(--jev-a-4);
	padding-top: var(--jev-a-2);
	background: none;
	border: 0;
	border-radius: 0;
	border-top: 1px solid var(--jev-rand);
	border-collapse: collapse;
	font-size: var(--jev-t-s);
}
body.jev-kasse-seite #order_review .shop_table th,
body.jev-kasse-seite #order_review .shop_table td {
	padding: var(--jev-a-2) 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--jev-rand);
	text-align: left;
	font-weight: 400;
	vertical-align: top;
}
/*
 * Rechts gehört nur, was eine Zahl ist. Die pauschale Regel „jede Zelle
 * rechts" traf auch die Warenspalte: Name, Lieferzeit und Inhalt standen
 * rechtsbündig und damit optisch mittig zwischen den Spalten.
 */
body.jev-kasse-seite #order_review .shop_table td {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--jev-text-titel);
}
body.jev-kasse-seite #order_review .shop_table td.product-name {
	text-align: left;
	white-space: normal;
}
body.jev-kasse-seite #order_review .shop_table th.product-total { text-align: right; }
/* Die Kopfzeile ist eine Beschriftung, kein Inhalt. */
body.jev-kasse-seite #order_review .shop_table thead th {
	padding-bottom: 6px;
	font-size: var(--jev-t-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jev-text-leise);
}
/*
 * Das Vorschaubild — gesetzt in inc/kasse.php, siehe dort, warum es schwebt
 * und keine eigene Spalte bekommt. Die Zelle einer Tabelle bildet einen
 * eigenen Formatierungskontext und trägt den Umfluss deshalb von selbst.
 */
body.jev-kasse-seite #order_review .shop_table td.product-name .jev-kasse__mini {
	float: left;
	display: block;
	width: 56px;
	height: 56px;
	margin: 2px var(--jev-a-3) var(--jev-a-2) 0;
	overflow: hidden;
	border-radius: var(--jev-radius);
	background: var(--jev-weiss);
}
body.jev-kasse-seite #order_review .shop_table td.product-name .jev-kasse__mini img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
body.jev-kasse-seite #order_review .shop_table td.product-name .product-quantity {
	font-weight: 500;
	color: var(--jev-text-titel);
}
body.jev-kasse-seite #order_review .shop_table td.product-name dl,
body.jev-kasse-seite #order_review .shop_table td.product-name p {
	margin: 2px 0 0;
	max-width: none;
	font-size: var(--jev-t-xs);
	color: var(--jev-text-leise);
}
/*
 * „Bestellung bearbeiten" stand rechts über die volle Breite und sah aus wie
 * der Abschluss der Tabelle. Es ist ein Rückweg und gehört an den Anfang der
 * Zeile, wo man liest.
 */
body.jev-kasse-seite #order_review .shop_table td.actions,
body.jev-kasse-seite #order_review .shop_table tr:has(> td:only-child) td { text-align: left; }
/*
 * Die Gesamtsumme ist der Ankerpunkt vor dem Kaufen — sie darf sich vom Rest
 * abheben.
 */
body.jev-kasse-seite #order_review .shop_table .order-total th,
body.jev-kasse-seite #order_review .shop_table .order-total td {
	padding-top: var(--jev-a-3);
	border-top: 1px solid var(--jev-rand-stark);
	border-bottom: 0;
	font-size: var(--jev-t-l);
	color: var(--jev-text-titel);
}
body.jev-kasse-seite #order_review .shop_table .order-total td { font-family: var(--jev-schrift-titel); }
/* Was Germanized darunter hängt, ist Kleingedrucktes und keine Summe mehr. */
body.jev-kasse-seite #order_review .shop_table .order-total ~ tr th,
body.jev-kasse-seite #order_review .shop_table .order-total ~ tr td {
	border-bottom: 0;
	padding-block: 2px;
	font-size: var(--jev-t-xs);
	color: var(--jev-text-leise);
}
/* Der Gutschein ist ein Gewinn und wird auch so gelesen. */
body.jev-kasse-seite #order_review .shop_table .cart-discount td { color: var(--jev-signal); }

/*
 * „Bestellung bearbeiten" ist ein Rückweg, kein Aufruf — als volle Pille
 * mitten in der Aufstellung wog er schwerer als das Bestellen selbst.
 */
body.jev-kasse-seite #order_review .button,
body.jev-kasse-seite .jev-kasse .wc-gzd-edit-data-notice .button {
	min-height: 0;
	padding: 0.4em 1.2em;
	background: transparent;
	color: var(--jev-text-titel);
	border: 1px solid currentColor;
	font-size: var(--jev-t-xs);
	letter-spacing: 0.04em;
}
body.jev-kasse-seite #order_review .button:hover,
body.jev-kasse-seite .jev-kasse .wc-gzd-edit-data-notice .button:hover {
	background: color-mix(in srgb, var(--jev-text-titel) 8%, transparent);
}

/* Der Bezahlknopf bleibt, was er ist: der eine Aufruf der Seite. */
body.jev-kasse-seite .wc-gzd-order-submit { margin-top: var(--jev-a-4); }
body.jev-kasse-seite #order_review #place_order {
	min-height: 48px;
	padding: 0.85em 2em;
	background: var(--jev-knopf-signal-grund);
	color: var(--jev-knopf-signal-text);
	border: 0;
	font-size: var(--jev-t-s);
	letter-spacing: 0.08em;
	width: 100%;
}
/*
 * PayPal und SEPA bringen ihre eigenen Knöpfe mit und bestehen auf ihren
 * Farben — das ist Vorschrift der Anbieter und nicht verhandelbar. Was hier
 * steht, ist nur Breite und Abstand, damit sie als Stapel unter dem eigenen
 * Knopf stehen und nicht als zweite Reihe daneben.
 */
body.jev-kasse-seite #order_review .ppc-button-wrapper,
body.jev-kasse-seite #order_review [id^="ppc-button"] { margin-top: var(--jev-a-2); }

/* Hinweise ohne Systemgrau. */
body.jev-kasse-seite .jev-kasse .woocommerce-info,
body.jev-kasse-seite .jev-kasse .wc-gzd-edit-data-notice {
	margin: var(--jev-a-3) 0;
	padding: var(--jev-a-3);
	background: var(--jev-grund);
	border: 0;
	border-left: 2px solid var(--jev-rand-stark);
	border-radius: 0;
	color: var(--jev-text-leise);
	font-size: var(--jev-t-s);
}
body.jev-kasse-seite .jev-kasse .woocommerce-info::before,
body.jev-kasse-seite .jev-kasse .wc-gzd-edit-data-notice::before { content: none; }

/*
 * Die Gutschein-Zeile kommt von WooCommerce und trug dessen Standardton:
 * blaugrauer Kasten mit blauem Balken oben und einem Symbol, das mit der
 * Seite nichts zu tun hat. Hier reicht eine Zeile.
 *
 * DERZEIT OHNE WIRKUNG: `inc/kasse.php` hängt das Formular aus, eingelöst wird
 * im Warenkorb. Die Regeln bleiben stehen, damit die Zeile beim Zurückholen
 * nicht wieder als blauer Kasten erscheint — wer sie zurückholt, ändert eine
 * Zeile PHP und nicht auch noch das Aussehen.
 */
body.jev-kasse-seite .woocommerce-form-coupon-toggle .woocommerce-info {
	margin: 0;
	padding: var(--jev-a-3) 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--jev-rand);
	color: var(--jev-text-leise);
	font-size: var(--jev-t-s);
	list-style: none;
}
body.jev-kasse-seite .woocommerce-form-coupon-toggle .woocommerce-info::before { content: none; }
body.jev-kasse-seite .woocommerce-form-coupon-toggle a { color: var(--jev-text-titel); }