/*
Theme Name: KaaTai Shop
Theme URI: https://gastromarketing.kaatai.de
Author: KaaTai
Author URI: https://kaatai.de
Description: Block-Theme fuer WooCommerce-Shops der Gastronomie. Eigenbau ohne Page Builder, ohne Fremd-Parent-Theme und ohne kommerzielle Lizenz. Das Grundgeruest ist fuer alle Shops gleich, die Handschrift steckt in den Stil-Varianten unter styles/ - je Branche eine helle und eine dunkle.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.59.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kaatai-shop
Tags: e-commerce, block-styles, full-site-editing, wide-blocks, style-variations
*/

/*
 * Block-Themes brauchen hier keine Regeln - das Aussehen steht in theme.json.
 * Was hier steht, steht hier, weil es sich in theme.json nicht ausdruecken laesst.
 */

/* Fokus sichtbar halten, auch wo WooCommerce eigene Elemente ausgibt. */
:where(a, button, input, select, textarea, .wc-block-components-button):focus-visible {
	outline: 2px solid var(--wp--preset--color--akzent);
	outline-offset: 2px;
}

/* Produktbilder im Katalog auf ein gemeinsames Format bringen, damit die
   Kachelreihe ruhig bleibt - Gastro-Fotos kommen in jedem Seitenverhaeltnis. */
.wc-block-grid__product-image img,
.wp-block-woocommerce-product-image img,
.woocommerce-loop-product__link img {
	aspect-ratio: var(--wp--custom--bild--verhaeltnis, 4 / 3);
	object-fit: cover;
	width: 100%;
	border-radius: var(--wp--custom--radius--bild, 0);
}

/* ------------------------------------------------------------------
   Produktkarten im Katalog

   WooCommerce legt die Kacheln als Flex-Liste an, in der jede Karte nur so
   hoch ist wie ihr Inhalt. Bei Speisekarten schwanken die Beschreibungen
   stark - ohne diese Regeln steht der Preis mal auf halber Hoehe, mal ganz
   unten, und die Reihe franst aus.
   ------------------------------------------------------------------ */
/*
 * Der Selektor traegt bewusst KEIN .is-flex-container: WooCommerce 11.1 gibt
 * die Liste als .wc-block-product-template__responsive.columns-3 aus, die
 * aeltere Flex-Klasse erscheint nicht mehr. Gemessen am 10.09.2026 - mit der
 * alten Klasse blieben die Karten "list-item" und wurden bis zu 102 px
 * unterschiedlich hoch.
 *
 * Das :has(> .karte) ist ebenso wenig Zierde: dieselbe Liste traegt auch der
 * Abschnitt "Aehnliche Produkte", dessen Kacheln Bild, Titel, Preis und Knopf
 * als direkte Geschwister fuehren. Ohne die Einschraenkung legt display:flex
 * sie nebeneinander - die Titel brechen dann Buchstabe fuer Buchstabe um.
 * Gesehen am gerenderten Bild der Produktseite, nicht im Katalog.
 */
.wc-block-product-template > li:has(> .karte) {
	display: flex;
	align-items: stretch;
}

.karte {
	/* Rahmenstaerke aus theme.json: die Referenz fuehrt Kacheln ganz ohne
	   Rahmen, nur durch Weissraum getrennt. */
	border-width: var(--wp--custom--karte--rahmen, 1px) !important;
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 100%;
	overflow: hidden;
	/*
	 * Die Karte nimmt die Rolle "flaeche", nicht eine feste Farbe aus dem
	 * Template. Sonst muesste jede Stil-Variante das Template anfassen - und
	 * im Dunkeln stuende eine dunkle Karte auf dunklem Grund. Gesehen am
	 * gerenderten Bild, nicht in der Kontrastrechnung: dort war alles gruen.
	 */
	background-color: var(--wp--preset--color--flaeche);
}

.karte__text {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/*
 * Preis und Knopf sitzen in jeder Karte auf derselben Grundlinie.
 *
 * DAS TRAEGT - NACHGEMESSEN AM 14.09.2026 (Befund #108).
 *
 * #108 behauptete "die Karten einer Reihe sind bis zu 34 px ungleich hoch" und
 * schlug genau diese zwei Regeln als Loesung vor. Sie standen zu diesem
 * Zeitpunkt schon da, und sie wirken: Die Spanne INNERHALB einer Rasterreihe
 * ist 0 px, in 18 Reihen bei 1440 px und in 26 bei 390 px, und die Fusskanten
 * fluchten auf 0 px. Die 34 px lagen ZWISCHEN den Reihen (420/441/454/482 px) -
 * die Messung im Pruefskript hatte ueber ALLE Karten der Seite gerechnet.
 *
 * Zwischen den Reihen bleibt der Unterschied, und das ist Absicht: Ein Raster
 * mit unterschiedlich langen Titeln und verschieden vielen Preiszusaetzen hat
 * verschieden hohe Reihen. `grid-auto-rows: 1fr` wuerde jede Reihe auf die
 * hoechste ziehen und den Katalog um rund 600 px verlaengern - gegen das, was
 * #116 gerade abgebaut hat.
 *
 * Gegen einen Rueckfall steht jetzt ein Pruefpunkt statt einer Berichtszeile:
 * `tools/pruefung/grundpreis-abnahme.js` misst die Spanne je Reihe und meldet
 * ROT, sobald sie nicht 0 ist.
 */
.karte__fuss {
	margin-top: auto !important;
}

/*
 * Bei variablen Produkten gibt WooCommerce statt eines Knopfes ein nacktes
 * <a data-block-name="woocommerce/product-button"> aus - ohne den
 * wp-block-button-Rahmen, den einfache Produkte bekommen. Ohne diese Regel
 * steht in derselben Reihe einmal "In den Warenkorb" als Knopf und daneben
 * "Optionen waehlen" als Textlink. Gemessen am 10.09.2026 mit WooCommerce 11.1.
 */
a.wp-block-woocommerce-product-button,
a[data-block-name="woocommerce/product-button"] {
	display: inline-block;
	background-color: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent-kontrast) !important;
	border-radius: var(--wp--custom--radius--knopf);
	padding: 0.7em 1.4em;
	font-weight: 600;
	text-decoration: none !important;
	line-height: 1.2;
}

a.wp-block-woocommerce-product-button:hover,
a[data-block-name="woocommerce/product-button"]:hover {
	background-color: var(--wp--preset--color--text);
	color: var(--wp--preset--color--grund) !important;
}


/* ------------------------------------------------------------------
   Formularelemente

   Block-Themes faerben Auswahlfelder und Eingaben nicht mit. In der hellen
   Variante faellt das kaum auf, im Dunkeln steht dunkler Text auf dunklem
   Grund - gesehen an der Variantenauswahl der Produktseite. Die Rolle
   "linie-stark" ist genau dafuer da und mit 3:1 geprueft.
   ------------------------------------------------------------------ */
select,
textarea,
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="number"], input[type="password"], input[type="url"], input[type="date"] {
	background-color: var(--wp--preset--color--grund);
	color: var(--wp--preset--color--text);
	border: 1px solid var(--wp--preset--color--linie-stark);
	border-radius: var(--wp--custom--radius--knopf);
	padding: 0.55em 0.8em;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--normal);
	max-width: 100%;
}

select {
	/* Der Pfeil des Systems bleibt, nur die Flaeche gehoert uns. */
	min-height: 2.6em;
}

::placeholder {
	color: var(--wp--preset--color--text-leise);
	opacity: 1;
}

/* ------------------------------------------------------------------
   Auswahlknoepfe der Extras (Plugin "WC Simple CSV")

   HIER STANDEN VIER REGELN, DIE JETZT VIER ZUWEISUNGEN SIND.

   Bis wc-simple-csv 1.3.0 gab das Plugin feste Werte aus - background #fff,
   Rahmen #ddd, ausgewaehlt #000 auf #fff, und KEINE Textfarbe im Normalfall.
   Im dunklen Theme erbte der Text die helle Schriftfarbe und stand weiss auf
   weiss; die Pflichtfelder "Sosse" und "Beilage" waren unlesbar. Das Theme
   musste dagegen anschreiben, und weil das Plugin sein CSS inline im Kopf
   ausgab, also NACH dem Theme-Stylesheet, brauchte es dafuer laengere
   Selektoren als das Plugin selbst.

   Seit 1.4.0 laedt das Plugin sein CSS als Datei und fuehrt Stellschrauben.
   Das Theme sagt nur noch, welche seiner Farbrollen gemeint sind - der Rest
   steht dort, wo er hingehoert. Aus einem Selektor-Wettrennen sind vier
   Zeilen geworden.
   ------------------------------------------------------------------ */
:root {
	--wcsc-knopf-grund: var(--wp--preset--color--grund);
	--wcsc-knopf-text: var(--wp--preset--color--text);
	--wcsc-knopf-linie: var(--wp--preset--color--linie-stark);
	--wcsc-knopf-akzent: var(--wp--preset--color--akzent);
	--wcsc-knopf-akzent-text: var(--wp--preset--color--akzent-kontrast);
	--wcsc-knopf-radius: var(--wp--custom--radius--knopf);
	--wcsc-notiz: var(--wp--preset--color--text-leise);
	--wcsc-pflicht: var(--wp--preset--color--signal);
}

/*
 * Der gewaehlte Zustand, der Ueberfahr-Zustand, der Aufpreis darin und die
 * Notiz darunter standen hier als vier eigene Regeln - mit `.single-product`
 * davor, um das Plugin zu ueberbieten, und einem begruendeten `!important`.
 * Sie sind seit wc-simple-csv 1.4.0 alle in den Stellschrauben oben
 * aufgegangen.
 *
 * Was bleibt, ist die Deckkraft des Aufpreises: Die ist Geschmack des Themes,
 * keine Farbfrage, und hat im Plugin nichts zu suchen.
 */
.wcsc-addon-option input:checked + .wcsc-addon-button .wcsc-extra-plus,
.wcsc-addon-option input:checked + .wcsc-addon-button .wcsc-extra-plus * {
	opacity: .75;
}


/* ------------------------------------------------------------------
   Speisegruppen-Abzeichen

   Immer derselbe dunkle Traeger, immer helle Schrift - der Farbpunkt traegt
   die Zuordnung, nicht die Lesbarkeit. Grund: die Kachel liegt ueber einem
   Produktfoto, und die reichen von fast weiss (Ayran) bis fast schwarz
   (Getraenk auf Schiefer). Eine eingefaerbte Flaeche traegt ueber dem einen
   und faellt ueber dem anderen durch.
   ------------------------------------------------------------------ */
.karte .wp-block-woocommerce-product-image,
.wp-block-woocommerce-product-image {
	position: relative;
}

.kaatai-badge {
	position: absolute;
	top: 0.7rem;
	left: 0.7rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.32em 0.7em 0.32em 0.55em;
	border-radius: 999px;
	background: rgba(12, 11, 16, 0.78);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-decoration: none;
	pointer-events: none;
}

.kaatai-badge__punkt {
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	flex: none;
}

/* ------------------------------------------------------------------
   Reiter Zutaten, Naehrwerte, Allergene
   ------------------------------------------------------------------ */
.kaatai-zutaten,
.kaatai-allergene {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.kaatai-zutaten li,
.kaatai-allergene li {
	padding: 0.3em 0.75em;
	border: 1px solid var(--wp--preset--color--linie-stark);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--klein);
}

.kaatai-allergene li {
	border-color: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--signal);
	font-weight: 600;
}

.kaatai-hinweis {
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--text-leise);
}

/* Breite Tabellen scrollen in ihrem eigenen Rahmen, nie die Seite. */
.kaatai-tabelle-scroll {
	overflow-x: auto;
	max-width: 100%;
}

.kaatai-naehrwerte {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 0.75rem;
}

.kaatai-naehrwerte th,
.kaatai-naehrwerte td {
	padding: 0.55em 0.8em;
	border-bottom: 1px solid var(--wp--preset--color--linie);
	text-align: left;
}

.kaatai-naehrwerte thead th {
	border-bottom-color: var(--wp--preset--color--linie-stark);
	font-weight: 700;
}

.kaatai-naehrwerte tbody th {
	font-weight: 400;
	color: var(--wp--preset--color--text-leise);
}

.kaatai-naehrwerte td {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
   Filter-Seitenleiste im Katalog
   ------------------------------------------------------------------ */
.shop-filter h2 {
	font-size: var(--wp--preset--font-size--gross);
	margin-bottom: 0.6rem;
	/*
	 * Die Referenz unterscheidet hier: Kategorietitel 600, die Rubriken der
	 * Filterspalte 700 - sie sind kurz, klein und muessen sich gegen die
	 * Eintraege darunter behaupten (gemessen 11.09.2026: "PRICE", "COLOR",
	 * "MATERIAL" mit 12px/700). In `sachlich-dunkel` tragen alle Ueberschriften
	 * 600, deshalb faellt es dort auf; die Grundfassung in theme.json steht
	 * ohnehin auf 700.
	 *
	 * Als Stellschraube und nicht als fester Wert: Eine Variante, die leichtere
	 * Rubriken will, kaeme sonst nur mit !important daran vorbei.
	 */
	font-weight: var(--wp--custom--filter--gewicht, 700);
}

/*
 * HIER STAND EINE REGEL FUER DEN ABSTAND UEBER EINER RUBRIK - SIE IST WEG.
 *
 * `.shop-filter > * + h2 { margin-top: spacing--40 }` traf seit #116 nichts
 * mehr: Die Ueberschriften stehen nicht mehr direkt in der Spalte, sondern im
 * Overlay-Inhalt des Filter-Blocks. Der naheliegende Schluss - den Selektor auf
 * die zweite Ebene erweitern - war falsch und am 14.09.2026 gemessen:
 *
 *   mit der Regel:  Schublade 1128 px hoch, 48 px ueber jeder Rubrik
 *   ohne die Regel: Schublade  984 px hoch
 *
 * Also **144 px mehr** - genau die Richtung, gegen die #116 gearbeitet hat.
 * Der Grund: WooCommerce gibt dem Overlay-Inhalt `display: flex` mit
 * `gap: 28px`, und in einem Flex-Container kollabieren Raender NICHT. Zwischen
 * zwei Rubriken stehen dort ohnehin 56 px (gap plus `margin-bottom` des
 * Vorgaengers); die Regel legte 48 obendrauf.
 *
 * Der Abstand kommt aus dem `gap` des Blocks. Eine eigene Regel braucht es
 * nicht - und wo sie doch einmal noetig wird, gehoert sie in dieselbe Messung.
 */

/*
 * Kategorieliste: Name links, Anzahl rechts - wie eine Speisekarte.
 *
 * Das Flex liegt auf dem <li>, NICHT auf dem <a>: WooCommerce stellt den
 * Zaehler als Geschwister des Links aus, nicht als sein Kind. Auf dem <a>
 * blieb die Zahl deshalb unter dem Namen stehen.
 */
.shop-filter .wc-block-product-categories-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.shop-filter .wc-block-product-categories-list-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0;
	padding: 0.45em 0;
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

.shop-filter .wc-block-product-categories-list-item > a {
	text-decoration: none;
	color: var(--wp--preset--color--text);
	/* Eine Filterliste ist eine Liste, kein Menue: Die Referenz setzt ihre
	   Eintraege mit 400. Die 600, die hier stand, liess jeden Eintrag wie eine
	   eigene Ueberschrift wirken - und die Rubrik darueber verlor ihren
	   Vorrang. */
	font-weight: 400;
	flex: 1;
}

.shop-filter .wc-block-product-categories-list-item > a:hover {
	color: var(--wp--preset--color--akzent);
}

.shop-filter .wc-block-product-categories-list-item-count {
	color: var(--wp--preset--color--text-leise);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--klein);
	font-variant-numeric: tabular-nums;
	flex: none;
}

/* ------------------------------------------------------------------
   Ausschlussfilter "Ohne ..." (Theme 0.27.0)

   Dieselbe Zeilenform wie die Kategorienliste darueber - Name links, Zahl
   rechts, duenne Linie dazwischen. Sie ist keine Zierde, sondern die Regel
   des Filterbereichs: Zwei Listen mit verschiedener Form lesen sich wie zwei
   verschiedene Dinge, obwohl beide dasselbe tun.

   Der Unterschied ist das Kaestchen: Diese Zeilen sind ein AN/AUS, die
   Kategorien ein Sprung. Deshalb tragen sie `aria-pressed` und ein sichtbares
   Kaestchen, das die Wahl auch ohne Farbe zeigt.
   ------------------------------------------------------------------ */
.filter-ohne {
	list-style: none;
	margin: 0;
	padding: 0;
}

.filter-ohne__zeile {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

.filter-ohne__wert {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.45em 0;
	text-decoration: none;
	color: var(--wp--preset--color--text);
	font-weight: 400;
}

.filter-ohne__wert:hover {
	color: var(--wp--preset--color--akzent);
}

/*
 * EINE ZEILE JE EINTRAG - Kahramans Vorgabe vom 14.09.2026.
 *
 * Die Namen sind schon gekuerzt (`kaatai_shop_ohne_kurzname()`), das hier ist
 * das Netz darunter: Kommt ein langer Name dazu oder wird die Spalte schmaler,
 * bricht die Zeile trotzdem nicht um, sondern endet mit Auslassungspunkten. Ein
 * zweizeiliger Eintrag verdoppelt die Hoehe der Gruppe, und in der Schublade
 * schiebt jede zusaetzliche Zeile die Gerichte weiter nach unten.
 */
.filter-ohne__name {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.filter-ohne__zahl {
	color: var(--wp--preset--color--text-leise);
	font-size: var(--wp--preset--font-size--klein);
	font-variant-numeric: tabular-nums;
	flex: none;
}

/*
 * Das Kaestchen ist gezeichnet, nicht als `input` gesetzt: Die Zeile ist ein
 * Link (sie fuehrt auf eine Adresse mit dem Filter), und ein echtes
 * Auswahlfeld in einem Link waere fuer die Vorlesehilfe ein Widerspruch.
 * `aria-pressed` am Link sagt denselben Zustand richtig an.
 */
.filter-ohne__kasten {
	flex: none;
	width: 1em;
	height: 1em;
	border: 1px solid var(--wp--preset--color--linie-stark);
	border-radius: 3px;
	position: relative;
	top: 0.15em;
}

.filter-ohne__wert.is-gewaehlt .filter-ohne__kasten {
	background: var(--wp--preset--color--akzent);
	border-color: var(--wp--preset--color--akzent);
}

/* Der Haken als Zeichnung - ohne Bilddatei und ohne Schriftzeichen, das in
   einer anderen Schrift fehlen koennte. */
.filter-ohne__wert.is-gewaehlt .filter-ohne__kasten::after {
	content: "";
	position: absolute;
	left: 0.3em;
	top: 0.05em;
	width: 0.25em;
	height: 0.55em;
	border: solid var(--wp--preset--color--akzent-kontrast);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.filter-ohne__wert.is-gewaehlt .filter-ohne__name {
	font-weight: 600;
}

/*
 * Der Umschalter "Produkte filtern" gehoert auf schmale Bildschirme. In der
 * Seitenleiste stehen die Filter ohnehin offen da; auf dem Desktop war der
 * Knopf nur ein Fremdkoerper mitten in der Liste.
 *
 * SEIT 0.26.0 TRAEGT ER WIRKLICH ETWAS (Issue #116). Vorher stand er da und tat
 * nichts: WooCommerce setzt beim Klick `is-overlay-opened`, aber sein gesamtes
 * Overlay-CSS haengt an `:where(.wc-block-product-filters)` - einer Klasse, die
 * der Wrapper nicht trug. `ProductFilters.php:106` uebernimmt sie aus dem
 * INNEREN Markup, und unser Template hatte dort kein solches Element. Die Klasse
 * steht deshalb jetzt im Template am Block selbst; gemessen bei 390 px ist der
 * Filterblock danach 21 px hoch statt 453, und das erste Gericht steht bei
 * 1237 px statt 1670.
 */
/*
 * WOOCOMMERCE SCHALTET DIE SCHUBLADE SCHON BEI 601 PX AB - WIR ERST BEI 782.
 *
 * `product-filters-style.css` traegt `@media(min-width:601px)`: Dort wird das
 * Overlay auf `position: relative` gesetzt und der Umschalter ausgeblendet.
 * Gemessen am 13.09.2026: bei 600 px Filterblock 21 px und erstes Gericht bei
 * 1198, bei 700 und 781 px dagegen 437 px und 1604 - also genau das Problem aus
 * #116, im Band dazwischen. Das trifft Tablets im Hochformat (768 px) und
 * Telefone im Querformat.
 *
 * 782 px ist die Schranke, an der in diesem Theme die Seitenleiste beginnt
 * (Kurzbeschreibung, Legende, Spaltenaufteilung). Bis dorthin gilt die
 * Schublade, danach die Spalte - eine Grenze statt zweier.
 */
@media (min-width: 601px) and (max-width: 781.98px) {
	.shop-filter .wc-block-product-filters,
	.shop-filter .wc-block-product-filters.is-overlay-opened {
		display: block;
	}

	.shop-filter .wc-block-product-filters .wc-block-product-filters__open-overlay,
	.shop-filter .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-header,
	.shop-filter .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-footer {
		display: flex;
	}

	.shop-filter .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__open-overlay {
		display: none;
	}

	/* Zu: aus dem Fluss und unsichtbar. Offen: ueber der Seite. */
	.shop-filter .wc-block-product-filters__overlay {
		position: fixed;
		inset: 0;
		pointer-events: none;
		background-color: transparent;
	}

	.shop-filter .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
		background-color: rgba(95, 95, 95, .35);
		pointer-events: auto;
		z-index: 9999;
	}

	/*
	 * `100vh`, NICHT `100%` - und dazu `visibility`.
	 *
	 * `translateY(100%)` schiebt um die DIALOGHOEHE, nicht aus dem Fenster.
	 * Gemessen: bei 390 px ist der Dialog 900 px hoch (Vollbild) und damit
	 * wirklich weg; bei 700 px nur 437 px - er stand dann bei `top: 437` mitten
	 * im Bild, und die Filterkaestchen waren sichtbar, obwohl die Schublade zu
	 * war. Unter 601 px gibt WooCommerce dem Dialog die Vollhoehe, in unserem
	 * Band nicht.
	 *
	 * `visibility` macht es unabhaengig von jeder Hoehe - und nimmt die
	 * Kaestchen zugleich aus der Tabulator-Reihenfolge und aus dem, was eine
	 * Vorlesehilfe findet. Verzoegert geschaltet, damit die Bewegung noch zu
	 * sehen ist.
	 */
	.shop-filter .wc-block-product-filters__overlay-dialog {
		transform: translateY(100vh);
		visibility: hidden;
		transition: transform .5s, visibility 0s .5s;
	}

	.shop-filter .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
		transform: translateY(0);
		visibility: visible;
		transition: transform .5s, visibility 0s;
	}
}

@media (min-width: 782px) {
	.shop-filter .wc-block-product-filters__open-overlay,
	.shop-filter .wc-block-product-filters__close-overlay {
		display: none;
	}
}

/*
 * Der Preisregler bringt eigene Breiten mit (gemessen: 604 px Regler und
 * 290 px Eingabefelder in einer 250 px breiten Spalte) und ragte damit ueber
 * die Produktkacheln.
 */
.shop-filter .wp-block-woocommerce-product-filter-price,
.shop-filter .wc-block-product-filter-price-slider {
	max-width: 100%;
	overflow: hidden;
}

.shop-filter .wp-block-woocommerce-product-filter-price input {
	max-width: 100%;
	box-sizing: border-box;
}

.shop-filter .wc-block-product-filter-price-slider__content input[type="text"] {
	width: 6.5em;
	padding: 0.35em 0.5em;
	font-size: var(--wp--preset--font-size--klein);
}

/* Die Kaestchenliste der Speisegruppen: Zeile fuer Zeile, Zahl rechts. */
.shop-filter .wc-block-product-filter-checkbox-list__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.2em 0;
}

/*
 * Kein space-between auf dem Label: Name und Anzahl sind EIN Textknoten
 * ("Vegetarisch (22)"), die Verteilung schob deshalb die ganze Beschriftung
 * an den rechten Rand, weg von ihrem Kaestchen.
 */
.shop-filter .wc-block-product-filter-checkbox-list__label {
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.4;
}

.shop-filter .wc-block-product-filter-checkbox-list__text {
	color: var(--wp--preset--color--text);
}

.shop-filter .wc-block-product-filter-checkbox-list__text-count {
	color: var(--wp--preset--color--text-leise);
	font-variant-numeric: tabular-nums;
}

/* Auf schmalen Bildschirmen steht die Seitenleiste ueber dem Raster und
   darf nicht die halbe erste Bildschirmseite fuellen. */
@media (max-width: 781px) {
	.shop-filter {
		border-bottom: 1px solid var(--wp--preset--color--linie);
		padding-bottom: var(--wp--preset--spacing--30);
		margin-bottom: var(--wp--preset--spacing--30);
	}
}

/* ------------------------------------------------------------------
   Variantenauswahl als Karten

   Das Auswahlfeld bleibt im Markup und traegt weiterhin die gesamte
   WooCommerce-Logik; sichtbar sind die Karten. Faellt JavaScript aus, wird das
   Feld wieder eingeblendet - dann ist die Seite altmodisch, aber bedienbar.
   ------------------------------------------------------------------ */
/*
 * Das Auswahlfeld wird NUR versteckt, wenn das Skript die Karten uebernommen
 * hat - erkennbar an der Klasse, die es setzt.
 *
 * Vorher hing der Rueckfall an einer .no-js-Klasse, die weder WordPress noch
 * dieses Theme jemals setzt (genau ein Treffer im ganzen Verzeichnis: die
 * Regel selbst). Ohne JavaScript war das Feld damit unsichtbar UND die Karten
 * tot - jedes variable Produkt, also jede Pizza, waere unverkaeuflich gewesen.
 */
.wahlkarten-aktiv .variations select {
	/*
	 * Durchgesetzt wie WordPress' eigenes .screen-reader-text: WooCommerce
	 * gibt dem Feld ueber einen spezifischeren Selektor Breite und Hoehe
	 * zurueck - gemessen stand das "versteckte" Feld mit 1008 x 39 px weiter
	 * mitten auf der Seite, obwohl position:absolute schon griff.
	 */
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	/* min-height muss ausdruecklich zurueckgesetzt werden: die
	   Formularregel weiter unten gibt jedem select 2.6em Mindesthoehe, und
	   die schlaegt height:1px. Gemessen stand das "versteckte" Feld mit
	   1008 x 39 px weiter mitten auf der Seite. */
	min-height: 0 !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap;
	border: 0;
}

/* Bis das Skript uebernimmt, bleiben die Karten weg - sonst staende beides da. */
.wahlkarten {
	display: none;
}

.wahlkarten-aktiv .wahlkarten {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.35rem;
}

.wahlkarte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.1em;
	min-width: 5.5rem;
	padding: 0.55em 0.9em;
	border: 1px solid var(--wp--preset--color--linie-stark);
	border-radius: var(--wp--custom--radius--knopf);
	background: var(--wp--preset--color--grund);
	color: var(--wp--preset--color--text);
	font: inherit;
	line-height: 1.25;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.wahlkarte:hover {
	border-color: var(--wp--preset--color--akzent);
}

.wahlkarte.is-gewaehlt {
	background: var(--wp--preset--color--akzent);
	border-color: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent-kontrast);
}

/*
 * HIER STAND EIN `-webkit-line-clamp` FUER DIE SWATCH-BESCHRIFTUNG - ES WAR
 * WIRKUNGSLOS UND IST DESHALB WEG.
 *
 * Gemessen am 14.09.2026: Der Swatch ist ein Flex-Container, und ein Flex-
 * Eintrag wird blockifiziert. `getComputedStyle(span).display` meldete
 * `flow-root` statt `-webkit-box`, obwohl `-webkit-line-clamp: 2` danebenstand
 * und in den Entwicklerwerkzeugen gueltig aussah. Dieselbe Falle wie bei der
 * Kurzbeschreibung in der Listenansicht (Kommentar bei `.katalog--liste`), nur
 * andersherum: dort war die HUELLE schuld, hier der Flex-Kontext.
 *
 * Die Begrenzung uebernimmt jetzt die feste Zeilenhoehe des Rasters plus das
 * `overflow: hidden` am Swatch. Was nicht in zwei Zeilen passt, faellt in der
 * Abnahme als ÜBERSTAND auf - gemessen, nicht gehofft.
 */

.wahlkarte__name {
	font-weight: 600;
}

.wahlkarte__preis {
	font-size: var(--wp--preset--font-size--klein);
	opacity: .85;
}

.wahlkarte__preis .amount {
	font-weight: 400;
}

/* ------------------------------------------------------------------
   Zusatzprodukte: Getraenk dazu, Extra Beilage
   ------------------------------------------------------------------ */
.zusatz {
	/*
	 * DIESELBE FUGE WIE JEDE ANDERE GRUPPE. Hier stand `spacing--30` (28 px),
	 * waehrend die Pflichtgruppen `optionen.abstand` benutzen - gemessen am
	 * 14.09.2026 ergab das die Folge 10 / 20 / 20 / 28 / 28: zwei Abstaende aus
	 * zwei Quellen in einem Block, den man als einen lesen soll.
	 */
	margin-top: var(--wp--custom--optionen--abstand, 20px);
}

.zusatz__titel {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 700;
}

/*
 * Eine Reihe, die seitwaerts scrollt - nie die Seite.
 *
 * Das min-width: 0 ist der entscheidende Teil: Flex- und Grid-Kinder haben von
 * Haus aus min-width:auto und werden so breit wie ihr Inhalt. Ohne die Angabe
 * schob die Reihe den ganzen Bestellkasten auf - gemessen 898 px Inhalt in
 * einem 499 px breiten Kasten, 426 px davon standen ausserhalb.
 */
.zusatz {
	min-width: 0;
	max-width: 100%;
	/*
	 * Die Gruppe steht in derselben Zeile wie Menge und Kaufknopf und bekam
	 * dort nur 239 der 443 px ab. Sie gehoert ueber die ganze Breite - der
	 * Kaufknopf schliesst darunter ab.
	 */
	grid-column: 1 / -1;
	flex-basis: 100%;
	width: 0;
	min-width: 100%;
}

.zusatz__reihe {
	display: flex;
	gap: 0.6rem;
	/*
	 * width:0 mit min-width:100% ist der Kniff: Ein Element mit Breite 0 traegt
	 * nichts zur Inhaltsbreite seines Containers bei - die Grid-Spalte waechst
	 * also nicht mehr an den Karten. Das min-width laesst es danach den
	 * verfuegbaren Platz fuellen. Ein blosses max-width:100% half nicht, weil
	 * es sich auf die bereits zu breite Spalte bezog.
	 */
	width: 0;
	min-width: 100%;
	overflow-x: auto;
	padding-bottom: 0.4rem;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

/*
 * Auch das Formular und seine Zwischenebenen duerfen nicht an ihrem Inhalt
 * wachsen. Gemessen war der Uebeltaeter `.single_variation_wrap`: ein
 * Grid-Element mit min-width:auto, das mit 898 px in einem 443 px breiten
 * Formular stand. Ein max-width auf der Reihe half nichts, weil schon zwei
 * Ebenen darueber zu breit waren.
 */
form.cart,
form.variations_form,
.single_variation_wrap,
.woocommerce-variation-add-to-cart {
	min-width: 0;
	max-width: 100%;
}

/*
 * Der eigentliche Hebel: Beide Formulare sind Grids, und eine Spalte mit der
 * Vorgabe `auto` waechst mit ihrem Inhalt - auch ueber den Container hinaus.
 * max-width:100% am Kind greift dann ins Leere, weil es sich auf die zu breite
 * Spalte bezieht. minmax(0, 1fr) deckelt die Spalte selbst.
 */
/*
 * KEIN Eingriff in grid-template-columns des Formulars. Der Versuch, es auf
 * eine Spalte zu zwingen, hat Menge und Kaufknopf mitten in die Auswahl
 * geschoben - gesehen am gerenderten Bild. Das Wachstum wird stattdessen dort
 * gebremst, wo es entsteht: an der Reihe selbst (siehe .zusatz__reihe).
 */

/*
 * FLACHER STREIFEN STATT HOHER KACHELN (Variante C). Das quadratische Bild
 * machte jede Reihe 243 px hoch - zwei davon waren 486 px, fast die Haelfte
 * des Bestellblocks. Mit 16:9 und schmalerer Kachel bleibt das Bild als
 * Verkaufsargument, die Reihe kostet aber rund die Haelfte.
 */
.zusatzkarte {
	/*
	 * DASSELBE SPALTENMASS WIE DIE SWATCHES darueber (0.30.0) - die Bildreihe
	 * fluchtet dadurch mit den Wahlleisten statt um vier Pixel versetzt zu
	 * stehen. Hoeher darf sie sein, das Bild ist ihr Zweck; breiter nicht.
	 */
	flex: 0 0 var(--wp--custom--swatch--breite, 5.5rem);
	scroll-snap-align: start;
	cursor: pointer;
	/*
	 * Pflicht, seit der Rahmen um die Reihe steht: Das Eingabefeld darunter ist
	 * `position: absolute` und sucht sich den naechsten positionierten Vorfahren.
	 * Ohne diese Zeile war das der neue `.zusatz__rahmen` - die sieben
	 * versteckten Felder wurden dann AUSSERHALB des scrollenden Containers
	 * platziert und zaehlten als Ueberlauf. Gemessen am 11.09.2026 auf 390 px:
	 * Die Seite war 839 px breit und liess sich quer schieben, waehrend der
	 * Katalog bei 390 blieb.
	 *
	 * Die Lehre: Ein `position: relative` an einer neuen Zwischenebene aendert
	 * den Bezugspunkt JEDES absolut positionierten Nachkommen, auch weit
	 * darunter.
	 */
	position: relative;
}

.zusatzkarte input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.zusatzkarte__inhalt {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--wp--custom--radius--karte);
	overflow: hidden;
	background: var(--wp--preset--color--grund);
	transition: border-color .15s ease;
}

.zusatzkarte:hover .zusatzkarte__inhalt {
	border-color: var(--wp--preset--color--akzent);
}

.zusatzkarte input:checked + .zusatzkarte__inhalt {
	border-color: var(--wp--preset--color--akzent);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--akzent);
}

.zusatzkarte input:focus-visible + .zusatzkarte__inhalt {
	outline: 2px solid var(--wp--preset--color--akzent);
	outline-offset: 2px;
}

.zusatzkarte__bild {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

/*
 * NAME UND PREIS IN EINER ZEILE. Untereinander war die Kachel 145 px hoch,
 * obwohl das Bild nur 56 px davon ausmachte - der Text kostete mehr als das
 * Bild. Jetzt teilen sie sich eine Zeile, der Preis rechts.
 */
.zusatzkarte__inhalt {
	padding-bottom: 0.35em;
}

.zusatzkarte__name {
	padding: 0.35em 0.45em 0;
	/* 0.75rem fest: Das Theme fuehrt kein Preset unter `klein`
	   (0.875rem), und eine erfundene Variable waere eine Behauptung. */
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	/* Zwei Zeilen sind genug - was laenger ist, endet mit Auslassungspunkten.
	   Sonst bestimmt der laengste Produktname die Hoehe der ganzen Reihe. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.zusatzkarte__preis {
	margin-top: auto;
	padding: 0.1em 0.45em 0;
	/* 0.75rem fest: Das Theme fuehrt kein Preset unter `klein`
	   (0.875rem), und eine erfundene Variable waere eine Behauptung. */
	font-size: 0.75rem;
	color: var(--wp--preset--color--akzent);
	font-weight: 700;
}

/* ------------------------------------------------------------------
   Oeffnungszeiten-Leiste
   ------------------------------------------------------------------ */
.oeffnungsleiste {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.45em 1rem;
	background: var(--wp--preset--color--flaeche);
	border-bottom: 1px solid var(--wp--preset--color--linie);
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--text);
}

.oeffnungsleiste__punkt {
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--wp--preset--color--text-leise);
	flex: none;
}

.oeffnungsleiste--offen .oeffnungsleiste__punkt {
	background: var(--wp--preset--color--akzent);
}

.oeffnungsleiste--zu .oeffnungsleiste__punkt {
	background: var(--wp--preset--color--signal);
}

/* ==================================================================
   Gestaltungsdurchgang nach den Referenzen (magesuite.io, athlete2.com)

   Drei Dinge, die beide Vorbilder gemeinsam haben und die uns fehlten:
   das Bild dominiert die Kachel, in der Kachel steht kein Fliesstext, und
   der Preis ist ein eigenstaendiges Element statt einer Zeile unter vielen.
   Nicht uebernommen: die Helligkeit (der Shop bleibt dunkel), Sterne,
   Farbpunkte und Wunschlisten - dafuer gibt es bei einer Speisekarte
   keinen Anlass -, und die Dichte von vier Reihen ohne Luft: Essensfotos
   brauchen Raum, Turnschuhe nicht.
   ================================================================== */

/* --- Kachel: Bild gross, Text knapp, Preis laut --- */
.karte__text {
	gap: 0.5rem;
}

/*
 * LUFT ZWISCHEN FOTO UND NAMEN - aber nur, wo das Foto ueber dem Namen steht.
 *
 * Im Raster klebte der Titel sonst am Bildrand. In der Listenansicht liegt das
 * Bild daneben, und derselbe Wert waere dort nur Leerraum: er machte jede
 * Zeile 12 px hoeher, ohne etwas zu trennen.
 *
 * Das `!important` steht hier, weil das Karten-Template `padding-top` als
 * INLINE-Stil ausgibt - dagegen kommt eine gewoehnliche Regel nicht an. Genau
 * deshalb darf der Selektor die Liste nicht mitnehmen: Ein `!important` laesst
 * sich nicht mit einer spaeteren Regel zuruecknehmen, nur mit einem zweiten.
 * Verneint statt `.katalog--raster`, damit Seiten ohne Katalogklasse (Suche,
 * verwandte Produkte) den Abstand behalten.
 */
body:not(.katalog--liste) .karte__text {
	padding-top: var(--wp--preset--spacing--30) !important;
}

.karte .wp-block-post-title {
	margin: 0;
	/*
	 * Das Gewicht des Produktnamens ist Handschrift, kein Detail: Die Referenz
	 * (demo.magesuite.io, gemessen 11.09.2026) setzt ihn mit 400, also leicht -
	 * der Preis daneben traegt mit 700 die Betonung. Bei uns stand er auf 700
	 * und nahm dem Preis damit den Vorrang. Fuer eine Speisekarte kann das
	 * anders richtig sein (ein Burger-Shop darf den Namen laut setzen), deshalb
	 * eine Stellschraube statt eines festen Werts.
	 */
	font-weight: var(--wp--custom--produkt--gewicht, 700);
	/* Zwei Zeilen genuegen; laengere Namen brechen sauber ab, statt die
	   Kachelhoehen auseinanderzuziehen. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.karte__fuss {
	gap: 0.5rem;
	padding-top: 0.35rem;
	border-top: 1px solid var(--wp--preset--color--linie);
}

/*
 * Der Preis traegt Textfarbe, nicht den Akzent: In der Kachel ist er
 * Information, der Knopf ist die Handlung. Beide im Markenton nebeneinander
 * ergaben eine Reihe aus lauter Gruen, in der nichts mehr fuehrte - gesehen am
 * gerenderten Katalog, nicht in der Kontrastrechnung.
 */
/*
 * Die Preisfarbe ist eine Stellschraube, keine Festlegung.
 *
 * Standard ist Textfarbe: dann ist der Knopf die einzige Akzentflaeche und
 * fuehrt. Wo der Knopf nur ein Zeichen ist - wie in der sachlichen Variante
 * nach dem Vorbild magesuite.io -, traegt der Preis den Akzent, sonst fehlt
 * der Zeile jeder Halt.
 */
.karte__preis .woocommerce-Price-amount,
.karte__preis {
	font-weight: var(--wp--custom--preis--gewicht, 800);
	color: var(--wp--custom--preis--farbe, var(--wp--preset--color--text));
	/* Auch die Laufweite ist Handschrift. Die Referenz laesst Preise ohne jede
	   Verengung stehen; eine engere Zahl wirkt technischer, eine normale
	   ruhiger. Vorgabe bleibt die bisherige Verengung. */
	letter-spacing: var(--wp--custom--preis--abstand, -0.01em);
}

/* Angebotspreise duerfen laut sein - da ist die Farbe die Botschaft. */
.karte__preis del .woocommerce-Price-amount {
	color: var(--wp--preset--color--text-leise);
	font-weight: 400;
}

.karte__preis ins .woocommerce-Price-amount {
	color: var(--wp--preset--color--signal);
	text-decoration: none;
}

/* Der Kaufknopf traegt die Aktion, nicht die halbe Kachelbreite.
   Groesse und Polsterung stehen in der Knopf-Skala weiter unten. */
.karte__fuss a[data-block-name="woocommerce/product-button"],
.karte__fuss a.wp-block-woocommerce-product-button,
.karte__fuss .wp-block-button__link {
	white-space: nowrap;
}

/* Das Bild fuellt die Kachelbreite bis an den Rand - die Rundung sitzt an der
   Karte, nicht am Bild. */
.karte .wp-block-woocommerce-product-image img {
	border-radius: 0;
}

/* Ein ruhiger Grund unter dem Foto: Gastro-Fotos haben unterschiedliche
   Hintergruende, die Kachelreihe soll trotzdem gleichmaessig wirken. */
.karte .wp-block-woocommerce-product-image {
	background: color-mix(in srgb, var(--wp--preset--color--text) 6%, transparent);
}

.karte:hover .wp-block-woocommerce-product-image img {
	transform: scale(1.03);
}

.karte .wp-block-woocommerce-product-image img {
	transition: transform .35s ease;
}

.karte {
	transition: border-color .2s ease;
}

.karte:hover {
	border-color: var(--wp--preset--color--akzent);
}

/* --- Abschnittskopf mit Kicker, wie in beiden Referenzen --- */
.abschnitt-kopf {
	text-align: center;
	margin-bottom: var(--wp--preset--spacing--30);
}

.abschnitt-kopf__kicker {
	display: block;
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-leise);
	margin-bottom: 0.25rem;
}

/* --- Produktseite: das Bild bleibt beim Scrollen stehen --- */
@media (min-width: 992px) {
	.wp-block-woocommerce-product-image-gallery {
		position: sticky;
		top: var(--wp--preset--spacing--30);
	}
}

/* Preis auf der Produktseite: das lauteste Element nach dem Namen. */
.wp-block-woocommerce-product-price {
	/*
	 * BEIDE Werte aus derselben Stellschraube wie in der Kachel. Die feste 800,
	 * die hier stand, schlug `preis.gewicht` auf dem Wrapper - sichtbar wurde
	 * das nur an Textteilen, die direkte Kinder des Wrappers sind: das „–"
	 * einer Preisspanne, ein „Ab: "-Prefix, ein von einem Plugin gefilterter
	 * Preistext. Die Zahl selbst liegt eine Ebene tiefer und trug die
	 * Stellschraube, also sah es meistens richtig aus.
	 */
	font-weight: var(--wp--custom--preis--gewicht, 800);
	letter-spacing: var(--wp--custom--preis--abstand, -0.01em);
}

/* Reiterzeile ruhiger: der aktive traegt die Marke, die anderen treten zurueck. */
.wc-tabs li a,
.woocommerce-tabs .tabs li a {
	color: var(--wp--preset--color--text-leise);
	font-weight: 600;
}

.wc-tabs li.active a,
.woocommerce-tabs .tabs li.active a {
	color: var(--wp--preset--color--text);
}

/*
 * Das Produktfoto fuellt seine Spalte.
 *
 * WooCommerce deckelt es auf die Einzelbildbreite (Standard 600 px) - gemessen
 * standen 512 px Bild in einer 669 px breiten Spalte, und daneben lief der
 * Bestellkasten weiter nach unten. Bei Essen ist das Foto das Verkaufsargument;
 * es darf die Spalte fuellen.
 */
.wp-block-woocommerce-product-image-gallery,
.woocommerce div.product div.images,
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image img,
.wp-block-woocommerce-product-image-gallery img {
	/* Der Selektor nennt auch `.woocommerce div.product div.images`: dort
	   steht die Breitenvorgabe des Plugins, und ein blosses width:100% auf der
	   Galerie blieb wirkungslos (gemessen 512 px in 669 px Spalte). */
	width: 100% !important;
	/* Auch die Maximalbreite muss durchgesetzt werden: WooCommerce schreibt
	   .woocommerce-product-gallery{max-width:512px} als eigene Regel in den
	   Kopf - gemessen als computed max-width, waehrend width bereits 100 %
	   war. Ein durchgesetztes width allein bringt darum nichts. */
	max-width: 100% !important;
	float: none;
}

.woocommerce-product-gallery__image img {
	aspect-ratio: var(--wp--custom--bild--verhaeltnis, 1 / 1);
	object-fit: cover;
	border-radius: var(--wp--custom--radius--bild);
}

/* ==================================================================
   Knopf-Skala und Zeichen

   Vorher gab es keine Skala: der Kachel-Kaufknopf war 36 px hoch mit 14 px
   Schrift, der Suchknopf 54 px mit 18 px - und beide waren gefuellt. Wo alles
   gefuellt ist, fuehrt nichts.

   Drei Stufen, zwei Staerken:
   - gefuellt  = die eine Handlung, die zaehlt (kaufen, suchen)
   - Umriss    = alles Begleitende (anwenden, zuruecksetzen, blaettern)
   ================================================================== */
:root {
	/*
	 * Die Werte kommen aus theme.json (settings.custom.knopf) und lassen sich
	 * damit je Stil-Variante umlegen - eine Handschrift ist nicht nur Farbe,
	 * sondern auch Knopfhoehe, Schriftgrad und ob Versalien gesetzt werden.
	 * Die Angaben hinter dem Komma sind der Rueckfall, falls eine Variante die
	 * Stellschraube nicht kennt.
	 */
	--knopf-hoehe: var(--wp--custom--knopf--hoehe, 2.5rem);
	--knopf-hoehe-klein: calc(var(--knopf-hoehe) - 0.4rem);
	--knopf-hoehe-gross: calc(var(--knopf-hoehe) + 0.4rem);
	--knopf-schrift: var(--wp--custom--knopf--schrift, 0.875rem);
	--knopf-gewicht: var(--wp--custom--knopf--gewicht, 600);
	--knopf-versal: var(--wp--custom--knopf--versal, none);
	--knopf-abstand: var(--wp--custom--knopf--abstand, 0.005em);
}

/* --- Zeichen --- */
.zeichen {
	display: inline-block;
	vertical-align: -0.16em;
	flex: none;
}

button .zeichen,
a .zeichen,
.wp-element-button .zeichen {
	margin-right: 0.45em;
}

/* --- Grundform aller Knoepfe --- */
.wp-element-button,
.wp-block-button__link,
.wp-block-search__button,
a[data-block-name="woocommerce/product-button"],
a.wp-block-woocommerce-product-button,
button.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--knopf-hoehe);
	padding: 0 1.1em;
	font-size: var(--knopf-schrift);
	font-weight: var(--knopf-gewicht);
	letter-spacing: var(--knopf-abstand);
	text-transform: var(--knopf-versal);
	line-height: 1.2;
	border-radius: var(--wp--custom--radius--knopf);
	border: 1px solid transparent;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/*
 * Kachelknopf: Groesse und Schriftgrad kommen aus derselben Stellschraube wie
 * ueberall. Er war vorher eine Stufe kleiner - in der Referenz ist genau er
 * aber der grosse (gemessen 51 px), weil er die Handlung der Kachel traegt.
 * Wer ihn kleiner will, legt knopf.hoehe in seiner Variante um.
 */
.karte__fuss a[data-block-name="woocommerce/product-button"],
.karte__fuss a.wp-block-woocommerce-product-button,
.karte__fuss .wp-block-button__link {
	min-height: var(--knopf-hoehe);
	/* 14 px Polsterung seitlich wie in der Referenz gemessen. */
	padding: 0 var(--wp--custom--knopf--polster, 1em);
	font-size: var(--knopf-schrift);
}

/* --- Kaufen auf der Produktseite: die eine Handlung, also gross --- */
button.single_add_to_cart_button {
	min-height: var(--knopf-hoehe-gross);
	padding: 0 1.5em;
}

/* --- Umriss-Stil fuer alles Begleitende --- */
/*
 * Die Ausnahmen sind noetig: ein display:inline-flex in dieser Regel hat die
 * Ausblendung der Overlay-Knoepfe weiter oben ueberschrieben, und "Produkte
 * filtern / Schliessen" stand wieder mitten in der Seitenleiste.
 */
.shop-filter .wc-block-product-filter-price button,
.shop-filter button:not(.wp-block-search__button):not([class*="overlay"]),
.wc-block-product-filter-clear-button button,
.woocommerce-pagination a,
.wp-block-query-pagination a {
	background: transparent;
	border-color: var(--wp--preset--color--linie-stark);
	color: var(--wp--preset--color--text);
	min-height: var(--knopf-hoehe-klein);
	padding: 0 0.9em;
	font-size: var(--knopf-schrift);
	font-weight: 600;
	border-radius: var(--wp--custom--radius--knopf);
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.shop-filter button:not(.wp-block-search__button):not([class*="overlay"]):hover,
.wc-block-product-filter-clear-button button:hover,
.woocommerce-pagination a:hover,
.wp-block-query-pagination a:hover {
	border-color: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent);
	background: transparent;
}

/* --- Suche: Feld und Knopf als ein Element --- */
.shop-filter .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--linie-stark);
	border-radius: var(--wp--custom--radius--knopf);
	overflow: hidden;
	padding: 0;
}

.shop-filter .wp-block-search__input {
	border: 0;
	border-radius: 0;
	min-height: var(--knopf-hoehe);
	font-size: var(--knopf-schrift);
	background: transparent;
}

.shop-filter .wp-block-search__button {
	min-height: var(--knopf-hoehe);
	padding: 0 0.9em;
	border-radius: 0;
	border: 0;
	font-size: 0;
}

.shop-filter .wp-block-search__button .zeichen {
	margin: 0;
}

/* --- Zeichen im Abzeichen --- */
.kaatai-badge__zeichen {
	display: inline-flex;
	align-items: center;
	flex: none;
}

.kaatai-badge__zeichen .zeichen {
	margin: 0;
}

.oeffnungsleiste .zeichen {
	margin-right: 0;
	opacity: .75;
}

.oeffnungsleiste__punkt {
	margin-left: 0.15em;
}

/* --- Mengenfeld passend zur Knopfhoehe --- */
.quantity input.qty {
	min-height: var(--knopf-hoehe-gross);
	width: 4.2em;
	text-align: center;
	font-size: var(--knopf-schrift);
	font-weight: 600;
}


/* --- Titelbehandlung als Stellschraube --- */
.abschnitt-kopf h1,
.abschnitt-kopf h2,
.wp-block-query-title {
	text-transform: var(--wp--custom--titel--versal, none);
	letter-spacing: var(--wp--custom--titel--abstand, -0.01em);
}

/* ==================================================================
   Direkter Kauf als Zeichenknopf

   In der Referenz (magesuite.io) ist der Kaufknopf ein Quadrat mit nur dem
   Einkaufswagen - gemessen 51 x 51. Deshalb passen dort Preis und Knopf
   nebeneinander in eine Zeile; bei uns schob der Text sie untereinander.

   BIS ZUM 11.09.2026 GALT DAS NUR FUER DEN DIREKTEN KAUF. Hier stand, ein
   blosses Zeichen an "Optionen waehlen" wuerde ein Sofort-Kaufen versprechen,
   das nicht stattfindet. Kahraman hat entschieden, dass beide Knoepfe gleich
   aussehen: In einer Reihe standen sonst ein 40 px breites Quadrat und ein
   200 px breiter Balken nebeneinander, und die Kacheln wirkten ungleich
   gebaut - gemessen auf der Kategorieseite Getraenke.

   Der Einwand von damals ist damit nicht weg, sondern anders geloest: Die
   beiden Faelle tragen VERSCHIEDENE Zeichen - Einkaufswagen fuer den direkten
   Kauf, Regler fuer die Auswahl (siehe render_block_woocommerce/product-button
   in gastro-bestellung.php). Dazu kommt der Text, der im Markup stehen bleibt,
   als `title` an den Knopf: Wer mit der Maus darauf wartet, liest "Optionen
   waehlen", und Vorlesewerkzeuge bekommen ihn ohnehin ueber das aria-label.

   Ob es so kommt, entscheidet die Stil-Variante ueber die Stellschraube
   knopf.zeichenknopf; das Theme setzt daraufhin eine Klasse am body.
   ================================================================== */
.zeichenknopf .karte__fuss .knopf--kauf,
.zeichenknopf .karte__fuss .knopf--auswahl {
	width: var(--knopf-hoehe);
	min-width: var(--knopf-hoehe);
	padding: 0;
	/* Der Text bleibt im Markup - fuer Vorlesewerkzeuge und Suchmaschinen -,
	   wird aber nicht gezeigt. */
	font-size: 0;
	gap: 0;
	/* Ein <a> ohne diese Angabe ist inline-block und zentriert sein Zeichen
	   nicht; der Kaufknopf ist ein <button> und bekam das ueber die
	   Grundform. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/*
	 * Ohne diese Zeile stehen in derselben Reihe 40 und 42 Pixel nebeneinander:
	 * Der <button> rechnet in `border-box`, der <a> in `content-box`, und der
	 * 1px-Rahmen der Knopf-Grundform kommt bei ihm aussen drauf. Gemessen am
	 * 11.09.2026 - genau der Unterschied, der die Kacheln ungleich gebaut
	 * aussehen liess.
	 */
	box-sizing: border-box;
}

.zeichenknopf .karte__fuss .knopf--kauf .zeichen,
.zeichenknopf .karte__fuss .knopf--auswahl .zeichen {
	margin: 0;
}

/* ==================================================================
   Suche im Kopf

   Die Referenz fuehrt die Suche mittig im Kopf, nicht in der Filterspalte -
   dort steht nur, was die Auswahl einschraenkt. Feld und Knopf bilden ein
   Element mit aussen gerundeten Ecken; gemessen sind es zusammengesetzte
   Radien (3px 0 0 3px und 0 3px 3px 0).
   ================================================================== */
.kopf-suche {
	flex: 1 1 18rem;
	max-width: 26rem;
	margin: 0 var(--wp--preset--spacing--30);
}

.kopf-suche .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--linie-stark);
	border-radius: var(--wp--custom--radius--knopf);
	overflow: hidden;
	padding: 0;
	/*
	 * Der Suchblock bringt in der Bauform "Knopf innen" einen weissen Grund
	 * mit - gemessen rgb(255,255,255) am Wrapper, waehrend das Feld selbst
	 * schon durchsichtig war. Im dunklen Kopf stand die Suche damit als
	 * hellgrauer Balken.
	 */
	background: var(--wp--preset--color--grund);
}

.kopf-suche .wp-block-search__input {
	border: 0;
	border-radius: 0;
	min-height: var(--knopf-hoehe);
	font-size: var(--knopf-schrift);
	background: transparent;
	padding-left: 0.8em;
}

.kopf-suche .wp-block-search__button {
	min-height: var(--knopf-hoehe);
	padding: 0 0.9em;
	border: 0;
	border-radius: 0;
	font-size: 0;
}

.kopf-suche .wp-block-search__button .zeichen {
	margin: 0;
}

/* Auf schmalen Bildschirmen steht sie unter dem Namen, nicht daneben. */
@media (max-width: 781px) {
	.kopf-suche {
		flex-basis: 100%;
		max-width: none;
		margin: var(--wp--preset--spacing--20) 0 0;
	}
}

/* ==================================================================
   Sortierleiste, Zaehler, Trennlinien
   ================================================================== */
.sortierleiste {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

/* ------------------------------------------------------------------
   AUF DEM HANDY STEHT DIE WARE VOR DEM WERKZEUG

   Gemessen am 29.09.2026 auf iPhone 14 Pro (393x660): Zwischen dem
   Seitentitel und der ersten Produktkachel lagen 181px Sortier- und
   Ansichtswerkzeug - Beschriftung "SORTIEREN NACH" auf einer eigenen
   Zeile, darunter das Auswahlfeld, darunter "ZEIGEN 12 24 48" und
   "Raster | Liste". Drei Zeilen, bevor der Gast das erste Gericht sieht.

   Auf einem 393px-Schirm ist das die falsche Reihenfolge: Wer einen
   Lieferdienst oeffnet, will die Karte sehen, nicht sie sortieren.

   Weggenommen wird nichts - nur gestapelt statt untereinander:

   - Die Beschriftungen entfallen. Ein Auswahlfeld, in dem
     "Standardsortierung" steht, erklaert sich selbst; die Zahlenreihe
     12/24/48 ebenso. Auf dem grossen Schirm bleiben beide stehen, dort
     kostet die Zeile nichts.
   - "Zeigen" und "Ansicht" ruecken neben das Auswahlfeld statt darunter.

   Die Bedienung bleibt vollstaendig: dieselben Knoepfe, dieselben Werte,
   nur in einer Zeile. Umgekehrt waere es ein Funktionsverlust, und ein
   verstecktes Werkzeug ist kein kompaktes Werkzeug.
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
	.sortierleiste {
		gap: 0.4rem 0.5rem;
		row-gap: 0.4rem;
	}

	.sortierleiste__beschriftung,
	.je-seite__beschriftung {
		/* Nur die Beschriftung, nicht das Bedienelement. */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.je-seite {
		margin-left: 0;
	}
}

.sortierleiste__beschriftung,
.je-seite__beschriftung {
	font-size: var(--wp--preset--font-size--klein);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-leise);
}

.je-seite {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-left: 0.6rem;
}

/* Die Zahlen als Knopfgruppe - in der Referenz sind es 12 / 24 / 36. */
.je-seite__wert {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2rem;
	min-height: 2.2rem;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--wp--custom--radius--knopf);
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--text-leise);
	text-decoration: none;
}

.je-seite__wert:hover {
	border-color: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent);
}

.je-seite__wert.is-gewaehlt {
	background: var(--wp--preset--color--flaeche);
	border-color: var(--wp--preset--color--linie-stark);
	color: var(--wp--preset--color--text);
	font-weight: 700;
}

/* --- Umschalter Raster / Liste --- */
.ansicht {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-left: 0.6rem;
}

.ansicht__wert {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.2rem;
	padding: 0 0.7em;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--wp--custom--radius--knopf);
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--text-leise);
	text-decoration: none;
}

.ansicht__wert:hover {
	border-color: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent);
}

.ansicht__wert.is-gewaehlt {
	background: var(--wp--preset--color--flaeche);
	border-color: var(--wp--preset--color--linie-stark);
	color: var(--wp--preset--color--text);
	font-weight: 700;
}

/*
 * Auf schmalen Geraeten bleibt das Zeichen, das Wort geht.
 * Bei 390 px steht die Leiste ohnehin zweizeilig; zwei Knoepfe mit je einem
 * Wort daneben draengen die Sortierung in eine dritte Zeile.
 */
@media (max-width: 600px) {
	.ansicht__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.ansicht__wert {
		padding: 0 0.55em;
	}
}

/* ==================================================================
   LISTENANSICHT DES KATALOGS

   Das Markup ist in beiden Ansichten dasselbe. Das Raster ist bereits ein
   Grid mit drei Spalten und die Karte ein `flex-direction: column` mit genau
   zwei Kindern - Bild und Textgruppe. Eine Spalte plus `row` genuegt also,
   ein zweites Template braucht es nicht.

   Die Klasse steht serverseitig am Rumpf (`body_class`), nicht per
   JavaScript: So ist schon die erste gerenderte Fassung die richtige.
   ================================================================== */

/* Die Kurzbeschreibung gehoert NUR in die Liste - im Raster ist kein Platz. */
.karte__kurztext {
	display: none;
}

.katalog--liste .wc-block-product-template {
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--20);
}

/*
 * Das `!important` ist nicht Bequemlichkeit: Das Karten-Template gibt
 * `padding-bottom` als INLINE-Stil aus (archive-product.html), und dagegen
 * kommt keine gewoehnliche Regel an. Ohne es trug jede Listenzeile 16 px
 * tote Hoehe - genau gegen den Zweck der Ansicht. Dieselbe Stelle, dieselbe
 * Loesung wie bei `.karte { border-width … !important }` weiter oben.
 */
.katalog--liste .karte {
	flex-direction: row;
	align-items: stretch;
	padding-bottom: 0 !important;
}

/*
 * KEIN BILD IN DER LISTE - Kahramans Entscheidung vom 12.09.2026 (#88).
 *
 * Bis 0.13.2 stand hier ein quadratisches Vorschaubild mit
 * `flex: 0 0 clamp(5rem, 12%, 7.5rem)`, also rund 110 px. Es war der
 * Hoehenanker der Zeile. Gemessen nach dem Weglassen:
 *
 *   1440 px   Kartenhoehe 110 -> 84 px (-24 %), Seitenhoehe -9 %
 *    390 px   Kartenhoehe 113 -> 105 px, und der Kurztext passt
 *
 * Der zweite Wert ist der wichtigere. Der Kommentar weiter unten begruendete
 * das Ausblenden der Kurzbeschreibung auf schmalen Geraeten damit, dass "nach
 * Bild, Polster, Preis und Kaufknopf rund 111 px fuer Text" bleiben. Ohne Bild
 * sind es 229 px - die Einschraenkung hat ihren Anlass verloren, und die
 * Kurzbeschreibung ist der Grund, warum es die Liste ueberhaupt gibt.
 *
 * Das Bild bleibt im Markup und auf der Produktseite. Verborgen ist es nur
 * hier: Der Titel ist ohnehin verlinkt, es entfaellt allein der Klickweg
 * ueber das Bild. Die Rasteransicht ist unberuehrt.
 *
 * WER DAS ZURUECKDREHT, MUSS AUCH DAS ABZEICHEN ZURUECKHOLEN:
 * Es lag im Bildrahmen und haengt seit 0.14.0 am Titel
 * (inc/gastro-produktdaten.php). Zwei Stellen, eine Entscheidung.
 */
.katalog--liste .karte .wc-block-components-product-image,
.katalog--liste .karte .wp-block-woocommerce-product-image {
	display: none;
}

/*
 * Das Abzeichen steht in der Liste VOR dem Titel, in derselben Zeile.
 *
 * Im Raster liegt es im Bildrahmen und traegt dort seinen Namen nicht, weil
 * "Vegetarisch" bei 110 px Bildbreite mitten im Wort umbrach. Hier ist Platz -
 * aber der Name wuerde jede Zeile um seine Laenge verschieben, und die Titel
 * stuenden nicht mehr auf einer Linie. Er bleibt deshalb auch hier fuer die
 * Vorlesehilfe erhalten: Ein Blatt allein sagt nicht, dass ein Gericht
 * vegetarisch ist.
 */
.katalog--liste .kaatai-badge__text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * DIE ARTIKELNUMMER TRITT ZURUECK, sie fuehrt nicht.
 *
 * Robin Cook setzt sie im selben Grad wie den Namen ("01 Pizza Margherita") -
 * dort sind es aber zwei Zeichen. Unsere heissen `GET-005` und `DO-009`, und
 * in voller Staerke lesen sich die Zeilen wie eine Lagerliste: Das Auge faengt
 * bei der Nummer an statt beim Gericht.
 *
 * Leiser und in Ziffern gleicher Breite: Der Name verkauft, die Nummer dient
 * dem Abtippen an der Kasse - und dafuer genuegt, dass sie am linken Rand
 * steht und untereinander fluchtet.
 */
.karte__nummer {
	color: var(--wp--preset--color--text-leise);
	font-weight: 400;
	font-size: 0.82em;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

/*
 * Titel und Abzeichen in einer Zeile, das Abzeichen darf nicht schrumpfen.
 * `align-items: baseline` statt `center`: Das Zeichen sitzt sonst bei
 * zweizeiligen Titeln in der Mitte des Blocks statt neben der ersten Zeile.
 */
.karte__kopfzeile {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
}

/*
 * DAS ABZEICHEN MUSS HIER SEINE POSITIONIERUNG ABLEGEN - und das ist der
 * Fehler, den nur der Browser gezeigt hat.
 *
 * Die Grundregel weiter oben setzt `position: absolute; top: .7rem;
 * left: .7rem`, weil das Abzeichen im Raster im Bildrahmen liegt. In der
 * Kopfzeile nimmt es damit keinen Platz ein und legt sich UEBER den Titel:
 * Aus "Baklava (2 Stueck)" wurde "aklava (2 Stueck)", aus "Caesar Salad"
 * "esar Salad" - bei jedem Gericht mit Speisegruppe die ersten ein bis zwei
 * Buchstaben verdeckt. Jede Messung meldete gruen: Das Abzeichen war
 * sichtbar, der Titel war da, die Hoehe stimmte. Gesehen hat es erst der
 * Bildausschnitt.
 *
 * Hintergrund, Blur und Polster fallen mit: Sie gab es fuer den Kontrast
 * gegen ein Foto. Im Textfluss auf dem Kartengrund ist die dunkle Pille nur
 * ein Fleck - hier traegt die Farbe des Zeichens allein.
 */
.karte__kopfzeile .kaatai-badge {
	position: static;
	flex: none;
	gap: 0;
	padding: 0;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/*
 * Das Angebots-Abzeichen von WooCommerce zieht mit um und braucht dieselbe
 * Ruecknahme: Es lag ebenfalls im Bildrahmen und ist dort absolut
 * positioniert. Hier steht es im Textfluss neben dem Speisegruppen-Zeichen.
 */
.karte__kopfzeile .wc-block-components-product-sale-badge,
.karte__kopfzeile .wp-block-woocommerce-product-sale-badge {
	position: static;
	flex: none;
	margin: 0;
}

.karte__kopfzeile > .wp-block-post-title {
	margin: 0;
}

/*
 * AUCH AUF SCHMALEN GERAETEN EIN RASTER, nur anders aufgeteilt.
 *
 * Untereinander gestapelt - Titel, Kurztext, Preis mit Knopf - kam die Liste
 * auf 390 px auf 214 px je Produkt, das zweispaltige Raster dagegen auf 177.
 * Sie war also lockerer als das, was sie ersetzen soll.
 *
 * Deshalb steht der Preis auch hier neben dem Titel; der Kurztext laeuft
 * darunter ueber beide Spalten, wo er die ganze Breite hat.
 *
 *   [Bild]  Titel ............ Preis + Knopf
 *   [Bild]  Kurzbeschreibung ...............
 */
.katalog--liste .karte__text {
	flex: 1 1 auto;
	display: grid;
	/*
	 * DIE ERSTE SPALTE BRAUCHT EIN MINIMUM (#143) - keine Obergrenze fuer die
	 * zweite.
	 *
	 * Mit blossem `1fr auto` nimmt die zweite Spur ihre `max-content`-Breite.
	 * Ein Pflichthinweis im Preisblock ("zzgl. 0,25 € Pfand", 120 px) liess
	 * dem Titel damit 51 von 334 px; er brach auf sechs Zeilen, die Karte
	 * wurde 104 px hoeher als ihre Nachbarn.
	 *
	 * Der erste Versuch war eine Obergrenze fuer Spur 2 (`minmax(0, 45%)`).
	 * Er reparierte die zwei Ausreisser und machte dafuer die anderen 22
	 * hoeher: Vorher standen 9 Karten bei 105 px, danach keine mehr - Spur 1
	 * verlor 40 px, und mehr Titel brachen zweizeilig. Gemessen und
	 * verworfen.
	 *
	 * `minmax(50%, 1fr)` sichert dem Namen die Haelfte, laesst der zweiten
	 * Spur aber ihren Inhalt, solange er passt: Bei einer Karte ohne
	 * Pflichtangabe bekommt der Titel dadurch sogar mehr Platz als vorher.
	 *
	 * `minmax(0, auto)` fuer Spur 2 ist kein Zierrat: Ohne die Null als
	 * Minimum traegt die Spur ihre `min-content`-Breite als Untergrenze, und
	 * bei einem laengeren Knopf-Text oder unter 390 px liefen beide Spuren
	 * gemeinsam ueber den Container hinaus statt zu schrumpfen. Dasselbe
	 * Muster wie in der Kachelregel weiter oben.
	 */
	grid-template-columns: minmax(50%, 1fr) minmax(0, auto);
	align-items: center;
	column-gap: var(--wp--preset--spacing--20);
	row-gap: 0.35rem;
	/* Oben gilt das Polster aus dem Karten-Template (16 px). Die 28-px-Regel
	   fuer das Raster nimmt die Liste ausdruecklich aus - siehe dort. */
	padding-bottom: var(--wp--preset--spacing--20);
	margin-top: 0;
}

/*
 * AUCH AUF SCHMALEN GERAETEN MIT KURZBESCHREIBUNG - seit 0.14.0, und der
 * Grund ist der Wegfall des Bildes.
 *
 * Bis 0.13.2 stand hier `display: none` mit dieser Begruendung: "Bei 390 px
 * bleiben nach Bild, Polster, Preis und Kaufknopf rund 111 px fuer Text", und
 * ein Halbsatz wie "Baklava: Blaetterteig..." sage nichts, koste aber Hoehe.
 * Das war richtig gemessen - solange das Bild da war.
 *
 * Ohne Bild sind es 229 px, und der Text passt vollstaendig. Gemessen auf
 * 390 px, vier Lagen:
 *
 *   Bild, Kurztext aus (alter Stand)   113 px Karte, Seite 4672 px
 *   ohne Bild, Kurztext aus            105 px Karte, Seite 4626 px
 *   ohne Bild, Kurztext AN             105 px Karte, Seite 4663 px
 *   Bild UND Kurztext (verworfen)      125 px Karte, Seite 4782 px
 *
 * Die dritte Zeile ist der Punkt: Der Kurztext kostet ohne Bild KEINE Hoehe
 * mehr und die Seite bleibt sogar kuerzer als im alten Stand. Mit Bild kostete
 * er 110 px - deshalb war die damalige Entscheidung richtig und ist es jetzt
 * nicht mehr. Kein Titel bricht auf mehr als zwei Zeilen, kein Kurztext wird
 * abgeschnitten, kein Querscroll.
 */
.katalog--liste .karte__kurztext {
	display: block;
	/* Spalte 1 in JEDER Breite, nicht erst ab Tablet. Solange der Kurztext
	   unter 782 px verborgen war, spielte seine Platzierung keine Rolle;
	   sichtbar und ohne Angabe wuerde ihn die automatische Platzierung des
	   Grids setzen, und der Fuss belegt mit `grid-row: 1 / span 2` bereits
	   beide Reihen der zweiten Spalte. */
	grid-column: 1;
}

/*
 * Das Grid-Kind ist die KOPFZEILE, nicht der Titel. Seit 0.14.0 steckt der
 * Titel in `.karte__kopfzeile` zusammen mit dem Abzeichen
 * (inc/gastro-produktdaten.php) - er ist also kein direktes Kind von
 * `.karte__text` mehr, und `grid-column` am Titel waere wirkungslos. Beide
 * Selektoren stehen hier, weil das Markup im Raster ohne Kopfzeile auskommt.
 */
.katalog--liste .karte__text > .karte__kopfzeile,
.katalog--liste .karte__text > .wp-block-post-title {
	grid-column: 1;
}

/*
 * Auf schmalen Geraeten stehen Preis und Knopf UEBEReinander - hier zaehlt
 * die Breite, nicht die Hoehe. Nebeneinander belegten sie 91 der 222 px, die
 * neben dem Bild bleiben; dem Namen blieben 115 px, und "Caesar Salad mit
 * Haehnchen" stand auf drei Zeilen. Gestapelt braucht der Preis 45 px, der
 * Name bekommt 161 - und die Karte wird trotzdem niedriger, weil kein
 * dreizeiliger Titel mehr die Hoehe treibt.
 */
/*
 * `span 2` statt `1 / -1` - und das ist kein Geschmack, sondern die Regel:
 * `-1` zaehlt vom EXPLIZITEN Raster zurueck. Die Textgruppe deklariert nur
 * `grid-template-columns`, hat also null erklaerte Reihen; Anfangs- und
 * Endlinie fielen beide auf Linie 1, der Endwert wurde verworfen, und der
 * Fuss stand in genau einer Reihe. Gemessen: er endete auf der Reihengrenze
 * statt mittig.
 *
 * `margin-top` braucht hier ein `!important`, weil die Kachelregel weiter
 * oben `margin-top: auto !important` setzt - dort drueckt sie den Fuss an die
 * Unterkante der Kachel, was im Raster richtig ist. Im Grid der Liste drueckte
 * sie ihn an die Unterkante seiner Flaeche: Der Abstand vom Preis zur
 * Kartenoberkante schwankte ueber sechs Karten zwischen 16 und 53 px, statt
 * dass die Preise auf einer Linie stehen.
 */
/*
 * DIE PFLICHTANGABEN DUERFEN UMBRECHEN - SONST QUETSCHEN SIE DEN TITEL (#143).
 *
 * `.wcsc-pfand--klein` und `.wcsc-grundpreis--klein` tragen weiter unten in
 * DIESER Datei `display: inline` und `white-space: nowrap` (siehe die beiden
 * Regeln im Plugin-Abschnitt). Das Plugin haengt nur den `span` an das
 * Preis-HTML an - die zwei Deklarationen stammen von hier, und wer sie im
 * Plugin sucht, sucht im falschen Repo.
 *
 * Mit `nowrap` stand "2,50 € zzgl. 0,25 € Pfand 7,58 €/l" in EINER Zeile:
 * gemessen 57 + 120 + 49 px, macht 235 px `max-content`. Zusammen mit
 * `grid-template-columns: 1fr auto` blieben dem Titel 51 von 334 px; er brach
 * auf sechs Zeilen, und die Karte wurde 209 statt 105 px hoch. Zwei von 24
 * Karten, beide Getraenke, beide mit Pfand.
 *
 * Verschieben ist keine Option: § 7 PAngV verlangt den Pfandhinweis NEBEN dem
 * Gesamtpreis, § 4 den Grundpreis in unmittelbarer Naehe. Sie bleiben also am
 * Preis und duerfen nur umbrechen.
 *
 * NUR IN DER LISTE. Im Raster ist die Karte schmal und der Preis steht allein
 * in seiner Zeile - dort kostet `nowrap` nichts und verhindert einen Umbruch
 * mitten in der Angabe.
 *
 * Die Karte wird durch den Umbruch um die zusaetzlichen Zeilen hoeher als eine
 * ohne Pflichtangaben. Das ist gewollt: Mehr Angabe braucht mehr Platz. Der
 * Pruefpunkt vergleicht deshalb Karten mit GLEICH VIELEN Pflichtangaben
 * miteinander und rechnet die Mehrhoehe der anderen Gruppen nach, statt eine
 * feste Spanne ueber alle zu verlangen.
 */
.katalog--liste .karte__fuss .wcsc-pfand--klein,
.katalog--liste .karte__fuss .wcsc-grundpreis--klein {
	white-space: normal;
}

/*
 * DIE AUSRICHTUNG GEHOERT AN DEN BLOCK, NICHT AN DIE SPANS.
 *
 * Hier stand `text-align: right` an den beiden `inline`-Spans - wirkungslos:
 * `text-align` richtet die Zeilenboxen eines BLOCK-Containers aus, und das ist
 * der Preisblock. Gemessen nach der Umstellung: `textAlign: start` am
 * Preisblock, der Text stand links bei x = 211, waehrend der Kaufknopf durch
 * `align-items: flex-end` rechts bei x = 306 sass.
 *
 * Vorher fiel es nicht auf, weil die Spalte `max-content`-breit war: Der Block
 * war genau so breit wie sein Text, links und rechts waren dasselbe. Erst die
 * 50-%-Untergrenze der ersten Spur macht den Block breiter als seinen Inhalt -
 * und damit die Ausrichtung sichtbar.
 */
.katalog--liste .karte__fuss > .has-gross-font-size {
	text-align: right;
}

.katalog--liste .karte__fuss {
	grid-column: 2;
	grid-row: 1 / span 2;
	margin-top: 0 !important;
	padding-top: 0;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-end;
	justify-content: center;
	gap: 0.4rem;
}

/*
 * ZWEI ZEILEN, NICHT MEHR - und das ist wieder eine Dichte-Entscheidung.
 *
 * Der Kurztext laeuft ungebremst ueber drei Zeilen und trieb die Zeilenhoehe
 * auf 200 px; die Liste kam damit auf 226 px je Produkt und blieb hinter dem
 * Raster (174 px) zurueck. Auf zwei Zeilen gekuerzt bestimmt wieder das Bild
 * die Hoehe, und die Liste ist dichter als das Raster.
 *
 * Zwei Zeilen sind auch inhaltlich die richtige Menge: Sie tragen den ersten
 * Satz, also worum es sich handelt - der Rest steht auf der Produktseite.
 */
/* Nur der Abstand. Ueber `display` entscheidet die Regel weiter oben, und zwar
   NUR dort: Zwei Regeln mit demselben Selektor sind eine Falle - hier stand
   einmal ein `display: block`, das das `none` fuer schmale Geraete lautlos
   wirkungslos machte. Seit 0.14.0 ist `block` die einzige Aussage und steht an
   genau einer Stelle; der Media Query unten setzt deshalb kein `display` mehr. */
.katalog--liste .karte__kurztext {
	margin: 0.35rem 0 0;
}

/*
 * MINDESTHOEHE, DAMIT DIE ZEILEN NICHT TANZEN.
 *
 * Das Bild war der Hoehenanker: Mit ihm waren alle Karten exakt 110 px hoch.
 * Ohne es bestimmt der Textinhalt die Hoehe, und sieben der 53 Produkte haben
 * keine Kurzbeschreibung - gemessen schwankte die Hoehe danach zwischen 76 und
 * 105 px, was in der Liste als Unruhe auffaellt.
 *
 * Der Wert ist nicht gewaehlt, sondern abgelesen: 105 px ist die Hoehe einer
 * Zeile mit zweizeiliger Kurzbeschreibung, also der Regelfall bei 46 von 53
 * Produkten. `min-height` statt `height` - ein langer Titel darf die Zeile
 * weiterhin wachsen lassen.
 */
.katalog--liste .karte {
	min-height: 105px;
}

/*
 * Die Begrenzung sitzt am inneren Absatz, nicht an der Huelle: WordPress
 * gibt der Huelle `display: flow-root`, und `-webkit-line-clamp` braucht
 * `-webkit-box`. An der Huelle stand die Zeilenzahl gesetzt und wirkte
 * trotzdem nicht - gemessen, nicht vermutet.
 */
.katalog--liste .karte__kurztext .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}

/*
 * Ab Tablet-Breite hat der Kurztext neben dem Preis Platz und muss nicht
 * unter ihm durchlaufen. Der Fuss nimmt dann beide Zeilen.
 *
 * Preis und Knopf stehen in beiden Faellen NEBENeinander, nicht uebereinander:
 * Gestapelt war der Fuss 81 px hoch und damit hoeher als Titel und Kurztext
 * zusammen (68 px) - er, nicht das Bild, bestimmte die Zeilenhoehe, und die
 * Liste brauchte 226 px je Produkt statt 176.
 */
/* Ab Tablet-Breite steht mehr Luft zwischen Text und Preis. Die
   Kurzbeschreibung selbst wird hier NICHT mehr eingeschaltet - sie ist seit
   0.14.0 in jeder Breite sichtbar, und ein zweites `display` an derselben
   Stelle waere genau die Falle, vor der der Kommentar oben warnt. */
@media (min-width: 782px) {
	.katalog--liste .karte__text {
		column-gap: var(--wp--preset--spacing--30);
	}


	/* Breit genug: Preis und Knopf nebeneinander auf einer Linie. */
	.katalog--liste .karte__fuss {
		flex-direction: row;
		align-items: center;
		gap: 0.75rem;
	}
}

/* Trefferzahl im Titel, wie "JACKETS (11)" */
.titel-zaehler {
	color: var(--wp--preset--color--text-leise);
	/* 300, nicht 400: In der Referenz steht die Zahl im selben Grad wie der
	   Titel (26 px) und nimmt sich allein ueber das Gewicht zurueck. Bei 400
	   gegen 600 ist der Abstand zu klein, die Zahl drängt sich neben den
	   Namen. Libre Franklin ist variabel und traegt 300. */
	font-weight: 300;
}

/*
   Trennlinie unter jeder Kachelreihe.

   Sie sitzt als Pseudo-Element am Listeneintrag und ragt in die Luecken
   hinein - sonst waere die Linie an jedem Kachelabstand unterbrochen, waehrend
   sie in der Referenz durchlaeuft. Die halbe Luecke links und rechts ergibt
   zusammen mit der Nachbarkachel eine geschlossene Linie.
*/
.wc-block-product-template > li:has(> .karte) {
	position: relative;
	padding-bottom: var(--wp--preset--spacing--30);
}

.wc-block-product-template > li:has(> .karte)::after {
	content: "";
	position: absolute;
	left: calc(-0.5 * var(--reihen-luecke, 1.25rem));
	right: calc(-0.5 * var(--reihen-luecke, 1.25rem));
	bottom: 0;
	border-bottom: 1px solid var(--wp--custom--reihen--linie, transparent);
}

/* --- Ausklappbare Filtergruppen --- */
.filtergruppe__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	cursor: pointer;
	user-select: none;
}

/*
 * DAS ZEICHEN GEHOERT IN DEN KNOPF, NICHT NEBEN IHN.
 *
 * Es hing bis 0.26.0 am `h2` und war damit dessen Flex-Kind - der Knopf
 * daneben nahm 229 von 250 px ein, das Zeichen lag in den restlichen 22.
 * Gemessen am 13.09.2026: Ein Klick auf das Plus traf `H2.wp-block-heading`
 * und verpuffte, waehrend derselbe Klick auf den Text die Gruppe zuklappte.
 *
 * Das einzige Element, das AUSSIEHT wie ein Schalter, war das einzige, an dem
 * der Klick nicht wirkte - und damit sah die ganze Funktion kaputt aus, obwohl
 * sie arbeitete. Gemeldet von Kahraman.
 *
 * Der Knopf ist selbst `display: flex` mit `space-between`, das Zeichen sitzt
 * darin also an derselben Stelle wie vorher - nur eben klickbar.
 */
.filtergruppe__schalter::after {
	content: "";
	width: 0.75em;
	height: 0.75em;
	flex: none;
	background: currentColor;
	opacity: .55;
	/* Minus-Zeichen, aufgeklappt */
	clip-path: polygon(0 42%, 100% 42%, 100% 58%, 0 58%);
	transition: opacity .15s ease;
}

.filtergruppe__kopf.is-zu .filtergruppe__schalter::after {
	/* Plus-Zeichen, zugeklappt */
	clip-path: polygon(42% 0, 58% 0, 58% 42%, 100% 42%, 100% 58%, 58% 58%, 58% 100%, 42% 100%, 42% 58%, 0 58%, 0 42%, 42% 42%);
}

.filtergruppe__schalter:hover::after,
.filtergruppe__schalter:focus-visible::after {
	opacity: 1;
}

.filtergruppe__koerper {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Der Schalter fuellt die Ueberschriftzeile, sieht aber nicht wie ein Knopf aus. */
.filtergruppe__schalter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	min-height: 0;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: left;
	cursor: pointer;
}

/* ==================================================================
   Produktseite

   Nach der Referenz vermessen (demo.magesuite.io, 11.09.2026):
   Produktname 24 px / 700, Preis 15 px / 700 in Markenfarbe - also derselbe
   Grad wie im Katalog, nicht groesser. Menge und Kaufknopf stehen in EINER
   Zeile, darunter drei Statuszeilen mit Zeichen. Galerie und Infospalte
   trennt eine senkrechte Linie.
   ================================================================== */

/* --- Ruecksprung ueber der Galerie --- */
.ruecksprung {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-leise);
	text-decoration: none;
}

.ruecksprung:hover {
	color: var(--wp--preset--color--akzent);
}

.ruecksprung__pfeil {
	transform: scaleX(-1);
	margin: 0;
}

/* --- Senkrechte Linie zwischen Galerie und Infospalte --- */
@media (min-width: 782px) {
	.single-product .wp-block-columns > .wp-block-column + .wp-block-column {
		border-left: 1px solid var(--wp--preset--color--linie);
		padding-left: var(--wp--preset--spacing--40);
	}
}

/* --- Typografie der Infospalte --- */
.single-product .wp-block-post-title {
	font-size: var(--wp--custom--produkt--titel, 1.5rem);
	/* Dieselbe Stellschraube wie in der Kachel. Stand hier eine feste 700,
	   trug dasselbe Gericht im Katalog 400 und auf seiner eigenen Seite 700 -
	   eine Drift, die niemand bemerkt, weil man beide Seiten nie nebeneinander
	   sieht. */
	font-weight: var(--wp--custom--produkt--gewicht, 700);
	line-height: 1.2;
	margin-bottom: 0.4rem;
}

/*
 * Die Groesse wird durchgesetzt: der Preis-Block bringt seine eigene mit und
 * stand mit rund 24 px da, waehrend die Variante 15 px vorgibt - in der
 * Referenz ist er genauso gross wie im Katalog, nicht groesser.
 */
/*
 * Nur der Preis in der Infospalte, nicht jeder Preis auf der Seite: die Regel
 * traf auch die Karten unter "Aehnliche Produkte", die dieselben Bloecke
 * rendern - dieselbe Kachel zeigte im Katalog einen anderen Grad als auf der
 * Produktseite. Die Eingrenzung laeuft ueber den Bestellbereich, in dem der
 * Preis-Block der Infospalte steht.
 */
.single-product .wp-block-columns > .wp-block-column > .wp-block-woocommerce-product-price,
.single-product .wp-block-columns > .wp-block-column > .wp-block-woocommerce-product-price .woocommerce-Price-amount,
.single-product .wp-block-columns > .wp-block-column > .wp-block-woocommerce-product-price .price {
	font-size: var(--wp--custom--produkt--preis, 1.25rem) !important;
	color: var(--wp--custom--preis--farbe, var(--wp--preset--color--text));
	line-height: 1.3;
}

/* --- Menge und Kaufknopf in einer Zeile --- */
.single-product form.cart .quantity,
.single-product .woocommerce-variation-add-to-cart .quantity {
	display: inline-flex;
	margin-right: 0.6rem;
}

.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

.single-product button.single_add_to_cart_button {
	flex: 1 1 12rem;
}

/* --- Statuszeilen --- */
.statuszeilen {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: var(--wp--preset--spacing--30) 0 0;
	border-top: 1px solid var(--wp--preset--color--linie);
	display: grid;
	gap: 0.6rem;
}

.statuszeile {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--text-leise);
}

.statuszeile .zeichen {
	margin: 0;
	color: var(--wp--preset--color--text-leise);
}

.statuszeile strong {
	color: var(--wp--preset--color--text);
	font-weight: 700;
}

.statuszeile--gut .zeichen {
	color: var(--wp--preset--color--akzent);
}

.statuszeile--warnung .zeichen,
.statuszeile--warnung strong {
	color: var(--wp--preset--color--signal);
}

/* --- Reiterbereich abgesetzt, Ueberschrift zentriert --- */
.single-product .wp-block-woocommerce-product-details {
	margin-top: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--flaeche);
}

.single-product .woocommerce-Tabs-panel > h2:first-child,
.single-product .beschreibung-spalten h2 {
	font-size: var(--wp--preset--font-size--gross);
	text-transform: var(--wp--custom--titel--versal, none);
	letter-spacing: var(--wp--custom--titel--abstand, -0.01em);
	margin-bottom: 0.8rem;
}

/* --- Beschreibung und Eckdaten nebeneinander --- */
.beschreibung-spalten {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
}

@media (max-width: 781px) {
	.beschreibung-spalten {
		grid-template-columns: minmax(0, 1fr);
	}
}

.kaatai-eckdaten {
	width: 100%;
	border-collapse: collapse;
}

.kaatai-eckdaten th,
.kaatai-eckdaten td {
	padding: 0.55em 0;
	border-bottom: 1px solid var(--wp--preset--color--linie);
	text-align: left;
	vertical-align: top;
	font-size: var(--wp--preset--font-size--klein);
}

.kaatai-eckdaten th {
	width: 40%;
	font-weight: 700;
	padding-right: 1em;
}

.kaatai-eckdaten td {
	color: var(--wp--preset--color--text-leise);
}

/* ==================================================================
   Produktseite: Summe, Steuerhinweis, blaetterbare Zusatzreihen
   ================================================================== */

/* --- Der Umsatzsteuer-Hinweis am Preis --- */
/*
 * Leise gesetzt, aber vorhanden: die Angabe ist Pflicht, nicht Gestaltung.
 * Sie gehoert direkt unter den Preis, damit erkennbar bleibt, worauf sie
 * sich bezieht.
 */
/*
 * Der Preishinweis ist jetzt ein Sternchen am Preis, aufgeloest in den
 * Statuszeilen. Kahraman am 11.09.2026: „inkl. MwSt. haette ich gerne ein *
 * und eine zentrale Stelle". Der volle Satz unter jedem Preis las sich wie
 * eine Einschraenkung des einzelnen Gerichts.
 */
.preis-stern {
	margin-left: 0.15em;
	font-size: 0.6em;
	vertical-align: super;
	color: var(--wp--preset--color--text-leise);
	font-weight: 400;
}

/*
 * Der Preis steht in einem eigenen <div> im Block, und der Stern haengt
 * dahinter - also in der naechsten Zeile. Gemessen am 11.09.2026: Er stand als
 * einzelnes Zeichen unter dem Betrag statt daneben. `display: inline` am
 * inneren Element bringt beide in denselben Textfluss; nur auf der
 * Produktseite, damit die Kachelpreise im Katalog unberuehrt bleiben.
 */
.single-product .wp-block-columns > .wp-block-column > .wp-block-woocommerce-product-price > .wc-block-components-product-price {
	display: inline;
}

.statuszeile--fussnote {
	color: var(--wp--preset--color--text-leise);
}

.statuszeile__stern {
	color: var(--wp--preset--color--text-leise);
}

/*
 * --- Die Pflichtangaben unter dem Katalog, Warenkorb und der Kasse ---
 *
 * Leise, aber nicht versteckt: § 6 PAngV verlangt die Angabe „klar erkennbar
 * und gut lesbar". Der Grad `klein` ist derselbe, den die Kurzbeschreibung der
 * Karten traegt - also nicht kleiner als der uebrige Beitext der Seite.
 *
 * Kein `text-align: center`: Die Fussnote gehoert an den linken Rand des
 * Inhalts, wo das Auge nach der letzten Karte ohnehin zurueckkommt.
 */
.preisfussnote {
	margin: var(--wp--preset--spacing--30, 1rem) 0 0;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--text-leise);
}

/*
 * HIER STAND EINE ZWEITE PREISREGEL mit demselben Selektor und einem zweiten
 * !important - sie machte die Stellschraube `produkt.preis` (Zeile 1412) tot.
 * Folgen, alle ungewollt: Die Variante sachlich-dunkel konnte ihre 15 px nicht
 * mehr setzen, die drei anderen Varianten SCHRUMPFTEN von 28 auf 24 px, und die
 * laufende Summe blieb an der alten Schraube haengen - der Gesamtbetrag waere
 * kleiner gewesen als der Einzelpreis darueber.
 *
 * Richtig ist, den WERT in der Variante anzuheben statt eine zweite Regel
 * danebenzustellen: sachlich-dunkel fuehrt `produkt.preis` jetzt auf 1.5rem.
 */

/* --- Die laufende Summe --- */
/*
 * Sie steht zwischen Zusatzangebot und Kaufknopf, weil das die Stelle ist, an
 * der die Entscheidung faellt. Abgesetzt durch eine Linie, damit sie nicht als
 * weiterer Aufpreis missverstanden wird.
 */
.gesamtpreis {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	flex-basis: 100%;
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--linie);
}

/*
 * Ohne diese Zeile bliebe die Summe trotz `hidden` stehen: Das `display: flex`
 * oben ist spezifischer als das `display: none`, das der Browser einem
 * [hidden]-Element gibt. Eine Klassenregel schlaegt die Elementregel des
 * Browser-Stylesheets immer.
 */
.gesamtpreis[hidden] {
	display: none;
}

.gesamtpreis__text {
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--text-leise);
	text-transform: var(--wp--custom--titel--versal, none);
}

.gesamtpreis__wert {
	font-size: var(--wp--custom--produkt--preis, 1.5rem);
	font-weight: var(--wp--custom--preis--gewicht, 800);
	color: var(--wp--custom--preis--farbe, var(--wp--preset--color--text));
	line-height: 1.2;
	/*
	 * Feste Ziffernbreite: ohne sie springt die ganze Zeile bei jedem Klick auf
	 * eine Zusatzkarte, weil "1" schmaler ist als "8".
	 */
	font-variant-numeric: tabular-nums;
}

/* --- Zusatzreihe: Rahmen, Kanten, Blaetterknoepfe --- */
.zusatz__rahmen {
	position: relative;
	/* Dieselbe Deckelung wie an der Reihe selbst - ohne sie waechst der
	   Rahmen an seinem Inhalt und schiebt den Bestellkasten auf. */
	width: 0;
	min-width: 100%;
	max-width: 100%;
}

/*
 * Die Verlaufskante ist der eigentliche Hinweis: Ein Knopf laesst sich
 * uebersehen, eine Karte, die unter einer weichen Kante verschwindet, nicht.
 * Sie liegt ueber der Reihe und darf deshalb keine Klicks abfangen.
 */
.zusatz__rahmen::before,
.zusatz__rahmen::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0.4rem;
	width: 3rem;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s ease;
	z-index: 1;
}

.zusatz__rahmen::before {
	left: 0;
	background: linear-gradient(to right, var(--wp--preset--color--flaeche), transparent);
}

.zusatz__rahmen::after {
	right: 0;
	background: linear-gradient(to left, var(--wp--preset--color--flaeche), transparent);
}

.zusatz__rahmen--links::before,
.zusatz__rahmen--rechts::after {
	opacity: 1;
}

.zusatz__blaettern {
	position: absolute;
	top: calc(50% - 0.2rem);
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	min-height: 0;
	padding: 0;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--linie-stark);
	background: var(--wp--preset--color--grund);
	color: var(--wp--preset--color--text);
	cursor: pointer;
}

.zusatz__blaettern:hover {
	border-color: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent);
}

.zusatz__blaettern[hidden] {
	display: none;
}

.zusatz__blaettern--zurueck {
	left: 0.25rem;
}

.zusatz__blaettern--vor {
	right: 0.25rem;
}

/*
 * Das Zeichen "pfeil" zeigt nach RECHTS (gastro-icons.php: Spitze bei x=18.5).
 * Gedreht wird deshalb der Zurueck-Knopf, nicht der Vor-Knopf - derselbe Griff
 * wie beim Ruecksprung ueber der Galerie.
 */
.zusatz__blaettern--zurueck .zeichen {
	transform: rotate(180deg);
}

/*
 * Ohne JavaScript bleiben die Knoepfe verborgen (sie stehen mit `hidden` im
 * Markup) - die Reihe scrollt dann wie bisher mit Finger, Rad oder Tastatur.
 * Deshalb bekommt sie einen sichtbaren Fokusring: sie ist fokussierbar.
 */
.zusatz__reihe:focus-visible {
	outline: 2px solid var(--wp--preset--color--akzent);
	outline-offset: 2px;
}

/* --- Bildspalte mitlaufen lassen --- */
/*
 * Gemessen am 11.09.2026: Bildspalte 697 px, Infospalte 1381 px - darunter
 * standen 684 px leere Flaeche, weil ein Gericht in der Regel ein Foto hat.
 * Statt das Loch zu fuellen, bleibt das Bild stehen, waehrend rechts gewaehlt
 * wird: Wer eine Soße anhakt, sieht weiter, wozu.
 *
 * `align-self: start` ist Pflicht - ein Flex-Kind wird sonst auf volle Hoehe
 * gestreckt, und `position: sticky` hat nichts, woran es kleben koennte.
 */
@media (min-width: 782px) {
	.single-product .wp-block-columns > .wp-block-column:first-child {
		position: sticky;
		top: var(--wp--preset--spacing--30);
		align-self: start;
	}
}

@media (max-width: 781px) {
	.gesamtpreis {
		margin-top: var(--wp--preset--spacing--20);
		padding-top: var(--wp--preset--spacing--20);
	}

	/* Auf schmalen Geraeten scrollt der Finger - Knoepfe waeren dort nur
	   Verdeckung. Die Verlaufskante bleibt als Hinweis. */
	.zusatz__blaettern {
		display: none;
	}
}

/* ==================================================================
   Lesbarkeit: wo WooCommerce in em weiterverkleinert

   Kahraman am 11.09.2026: „0.875 ist zu klein, das kann man kaum lesen."
   Der Befund war groesser als die Zahl. Gemessen auf der Kategorieseite:

     Filter-Container              14 px
       -> label (:where, .785em)   11 px
         -> span  (:where, .875em)  9,6 px   <- die Speisegruppen-Auswahl
     Footer-Navigation                       11 px

   Die Schriftskala selbst ist in `styles/sachlich-dunkel.json` angehoben
   (klein 11 -> 14, normal 14 -> 16, gross 15 -> 18). Das allein reicht nicht:
   WooCommerce staffelt INNERHALB der Filterliste noch zweimal in `em`, und
   relative Werte multiplizieren sich. Aus 14 px werden so wieder 9,6.

   Deshalb hier feste Werte statt `em` - sie beenden die Kette, statt sie
   weiterzureichen. Die WooCommerce-Regeln stehen in `:where()` und haben damit
   Spezifitaet 0; eine einfache Klassenregel genuegt, kein `!important`.
   ================================================================== */
/*
 * Die Klassennamen sind gegen das Plugin geprueft, nicht geraten: Der
 * Preisfilter heisst `…-price-slider__left/__right`, NICHT
 * `…-price__range-text` - den Namen gibt es in WooCommerce gar nicht, und die
 * Regel waere ins Leere gelaufen.
 */
.wc-block-product-filter-checkbox-list__label,
.wc-block-product-filter-checkbox-list__text-wrapper,
.wc-block-product-filter-checkbox-list__text,
.wc-block-product-filter-chips__item,
.wc-block-product-filter-price-slider__left,
.wc-block-product-filter-price-slider__right,
.wc-block-product-filter-removable-chips__label {
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.45;
}

/* Die Zahl in Klammern bleibt eine Stufe leiser, aber lesbar. */
.wc-block-product-filter-checkbox-list__count {
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--text-leise);
}

/*
 * Zwei Reste, die beim Nachmessen uebrig blieben - beide unter 14 px, beide
 * Bedienelemente und keine Randangaben:
 *
 *   select.orderby ("Standardsortierung")   13 px
 *   "Produkte filtern" / "Schliessen"       13,33 px  (nur auf schmalen Geraeten)
 *
 * Die allgemeine Formularregel weiter oben erreicht das Sortierfeld nicht,
 * weil WooCommerce ihm einen eigenen Grad gibt; die beiden Umschalter tragen
 * gar keinen und fallen auf den Browser-Standard fuer <button> zurueck.
 * `option` muss mitgenannt werden: die aufgeklappte Liste erbt den Grad des
 * Feldes nicht.
 */
/*
 * Das Sortierfeld wird ueber SEINEN CONTAINER gesetzt, nicht direkt: WooCommerce
 * gibt ihm `.woocommerce.wc-block-catalog-sorting select.orderby {font-size:
 * inherit}` mit - Spezifitaet 0,3,1. Ein `select.orderby` (0,1,1) verliert
 * dagegen, und `inherit` heisst ohnehin "nimm den Wert des Elternteils". Wer
 * das Feld erwischen will, setzt also den Container. Genau das tut die erste
 * Zeile; die zweite gilt der aufgeklappten Liste, die den Grad nicht erbt.
 */
.wc-block-catalog-sorting,
.woocommerce-ordering,
select.orderby option,
.shop-filter .wc-block-product-filters__open-overlay,
.shop-filter .wc-block-product-filters__close-overlay {
	font-size: var(--wp--preset--font-size--klein);
}

/*
 * HIER STAND EINE TOTE REGEL. Der Versuch, den Fuss ueber
 * `.wp-block-template-part footer .wp-block-navigation` anzuheben, konnte nicht
 * wirken: WordPress gibt Preset-Klassen mit `!important` aus
 * (`.has-klein-font-size{font-size:var(…)!important}`), und der
 * Navigations-Block traegt genau diese Klasse. Nur der Verweis darin - ein
 * <a> ohne Preset-Klasse - liess sich so erreichen; der Container blieb bei
 * 14 px, und wer die Regel las, hielt beides fuer erledigt.
 *
 * Richtig ist, den Grad im MARKUP zu setzen (`parts/footer.html`:
 * fontSize "klein" -> "normal") statt ein `!important` mit einem zweiten zu
 * ueberbieten. Deshalb steht hier nichts mehr.
 */

/* ==================================================================
   Symbole in den Optionskarten

   Die Referenz (shop.mor3.de) stellt Groessen, Extras und Wuensche als
   Karten mit einem Symbol ueber dem Namen dar. Das Symbol traegt keine
   Information, die der Text nicht auch traegt - es macht die Reihe
   ueberfliegbar: Wer "Pommes" sucht, findet die Fritten schneller als das
   Wort.

   Zwei Quellen, ein Aussehen: Die Variantenkarten des Themes UND die Knoepfe
   des Plugins bekommen ihr Symbol in PHP (gastro-bestellung.php), seit
   wc-simple-csv 1.4.0 die Filter dafuer anbietet. Bis Theme 0.12.1 lief der
   zweite Weg ueber ein Browser-Skript. Beide landen in derselben Huelle
   `.wahlkarte__zeichen`.
   ================================================================== */
.wahlkarte__zeichen {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Die Hoehe steht fest, damit Karten mit und ohne Symbol in einer Reihe
	   nicht unterschiedlich hoch werden - das Zeichen ist 30 px, der Rest ist
	   Luft. */
	min-height: 2rem;
	color: var(--wp--preset--color--text-leise);
}

.wahlkarte__zeichen .zeichen {
	margin: 0;
}

/*
 * Mit Symbol wird die Karte mittig gesetzt: Ein Zeichen am linken Rand ueber
 * einem kurzen Wort sieht aus, als waere es verrutscht. Ohne Symbol bleibt es
 * beim linksbuendigen Satz - dort traegt die Kante die Ordnung.
 */
.wahlkarte--mit-zeichen {
	align-items: center;
	text-align: center;
}

/*
 * Das VERHAELTNIS macht den Swatch aus, nicht die Groesse allein: In der
 * Vorlage traegt das Symbol die Erkennung und der Name bestaetigt sie nur.
 * Stand der Name in derselben Groesse und in 600 daneben, blieb das Zeichen
 * ein Beiwerk - Kahraman am 11.09.2026: „MiniIcons und immer noch gross die
 * Bezeichnung". Deshalb der Name leicht statt halbfett.
 *
 * DIE GROESSE STEHT HIER NICHT MEHR. Sie war `--wp--preset--font-size--klein`
 * (14 px) - aus der Zeit vor den Swatches, als der Name in einer breiten Karte
 * stand. Im Swatch schlug sie die Stellschraube `swatch.schrift` am Elternteil,
 * und die Variantenkacheln standen als EINZIGE in 14 px, waehrend Sossen,
 * Zutaten und Beschriftungen bei 11 lagen. Gemessen am 15.09.2026, nachdem
 * Kahraman es im Bild gesehen hatte: "die Schriftgroessen auch in den Swatches
 * kleiner".
 *
 * Ohne eigene Groesse erbt der Name die des Swatches - eine Stellschraube,
 * nicht zwei.
 */
.wahlkarte--mit-zeichen .wahlkarte__name,
.wcsc-addon-button.wahlkarte--mit-zeichen {
	font-weight: 400;
}

/*
 * Der Aufpreis bleibt eine Stufe unter dem Namen - auch nachdem der Name selbst
 * auf „klein" gerueckt ist. Sonst stehen beide auf 14 px, und die Karte hat
 * zwei gleich laute Zeilen unter dem Symbol: In dem Moment liest man erst den
 * Betrag und dann erst, wofuer er gilt.
 */
.wahlkarte--mit-zeichen .wahlkarte__preis,
.wcsc-addon-button.wahlkarte--mit-zeichen .wcsc-extra-plus {
	font-size: 0.8125rem;
	opacity: .8;
}

.wahlkarte.is-gewaehlt .wahlkarte__zeichen {
	color: inherit;
}

/* --- Dieselbe Karte fuer die Knoepfe des Plugins --- */
/*
 * Das Plugin setzt seine Knoepfe als einzeilige Flaechen mit Text. Sobald ein
 * Symbol darin steht, wird daraus dieselbe Karte wie bei den Varianten -
 * sonst stuenden in derselben Spalte zwei Bauarten untereinander.
 */
/*
 * ZWEI KLASSEN IM SELEKTOR, und zwar weiterhin. Bis wc-simple-csv 1.3.0
 * druckte das Plugin sein CSS inline im Kopf, also NACH dem Theme-Stylesheet -
 * bei gleicher Spezifitaet gewann darum immer das Plugin. Seit 1.4.0 laedt es
 * eine Datei und die Reihenfolge stimmt; die zweite Klasse bleibt trotzdem,
 * weil `.wahlkarte` daneben ebenfalls zwei Klassen fuehrt und beide Bauarten
 * in derselben Spalte stehen. Ein Selektor, der nur noch die Haelfte der
 * Karten trifft, waere der schlechtere Tausch.
 *
 * Gemessen am 11.09.2026, als Polsterung und Mindestbreite noch an der
 * einfachen Klasse hingen: Variantenkarte 11,2 / 14,4 px, Plugin-Knopf
 * daneben 8 / 16 px - genau die zwei Bauarten in einer Spalte, die der
 * Abschnitt darueber ausschliessen soll.
 */
.wahlkarte.wahlkarte--mit-zeichen,
.wcsc-addon-button.wahlkarte--mit-zeichen {
	/*
	 * Mehr Luft um das groessere Zeichen - eine 30-px-Form in einer Karte mit
	 * 0,55em Polsterung sitzt sonst an der Kante.
	 *
	 * In `rem`, nicht in `em`: Die beiden Kartenarten tragen verschiedene
	 * Schriftgroessen (die Plugin-Karte setzt „klein"), und `em` rechnet gegen
	 * die eigene. Mit 0,7em kamen dabei 11,2 px bei der einen und 9,8 px bei
	 * der anderen heraus - wieder zwei Bauarten in einer Spalte, nur subtiler
	 * als vorher. Gemessen am 11.09.2026.
	 */
	padding: 0.7rem 0.9rem;
	min-width: 6.5rem;
}

.wcsc-addon-button.wahlkarte--mit-zeichen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15em;
	text-align: center;
	line-height: 1.25;
}

.wcsc-addon-button .wahlkarte__zeichen {
	color: inherit;
}

/*
 * Der Aufpreis ist eine Stufe leiser als der Name.
 *
 * Hier stand ein `order: 3` mit der Begruendung, der Aufpreis komme im Markup
 * VOR dem Text und muesse nach unten geschoben werden. Das Gegenteil stimmt:
 * `class-extras.php:88` gibt `esc_html($name) . $suffix` aus, der Preis steht
 * also ohnehin hinten, und die Regel tat nichts. Entfernt - eine Regel, die
 * nichts bewirkt, aber etwas Falsches erklaert, kostet beim naechsten Umbau
 * mehr als sie je genuetzt hat.
 */
.wcsc-addon-button.wahlkarte--mit-zeichen .wcsc-extra-plus {
	font-size: var(--wp--preset--font-size--klein);
}

/*
 * Der leere Platz in Karten ohne Symbol. Er traegt nichts vor - deshalb
 * `aria-hidden` im Markup - und haelt nur die Namen einer Reihe auf einer
 * Linie.
 */
.wahlkarte__zeichen--leer {
	visibility: hidden;
}

/* ==================================================================
   Optionsreihen: eine Bauart fuer alle drei Quellen

   Auf der Produktseite treffen drei verschiedene Herkuenfte aufeinander, und
   jede bringt ihr eigenes Layout mit:

     Speisegruppe   WooCommerce, <table class="variations"> - Beschriftung
                    LINKS in einer eigenen Zelle
     Sosse/Beilage  Plugin "WC Simple CSV" - Beschriftung DARUEBER
     Getraenk/Extra Theme selbst - Beschriftung darueber, Reihe scrollt

   Gemessen am 11.09.2026: Die Zelle der Variationstabelle war 124 x 226 px
   gross - fuer ein einziges Wort -, und ihre Karten begannen 124 px weiter
   rechts als die des Plugins. Dazu drei verschiedene Kartenbreiten (104, 135,
   120 px) und zwei Reihen, die nach drei Karten umbrachen, waehrend die dritte
   seitwaerts scrollte.

   Kahraman am 11.09.2026: „die Breite der Swatches sollte einheitlich gross
   sein … es sollten alle Varianten in eine Zeile passen - aehnlich wie Getraenk
   dazu?"
   ================================================================== */

/* --- Die Variationstabelle ist keine Tabelle mehr --- */
/*
 * `display: block` an tbody, tr, th und td loest das Tabellenlayout auf, ohne
 * das Markup anzufassen - es gehoert WooCommerce, und die Variantenlogik haengt
 * daran. Die Beschriftung sitzt danach ueber den Karten wie ueberall sonst.
 */
.single-product .variations,
.single-product .variations tbody,
.single-product .variations tr,
.single-product .variations th,
.single-product .variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
}

.single-product .variations tr + tr {
	margin-top: var(--wp--preset--spacing--30);
}

.single-product .variations th label,
.single-product .variations .label label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--klein);
}

/* --- Eine Breite fuer alle Karten --- */
/*
 * Dieselbe Breite wie die Zusatzkarten (7,5rem = 120 px), damit die vier
 * Reihen untereinander wie ein Raster wirken. `flex: 0 0 <breite>` statt einer
 * Mindestbreite: In einer scrollenden Reihe soll keine Karte mitwachsen, sonst
 * hat jede Gruppe wieder ihr eigenes Mass.
 */
/*
 * DAS ZEICHEN STEHT WIEDER UEBER DEM NAMEN (0.30.0) - und das kostet jetzt
 * NICHTS mehr.
 *
 * In 0.29.0 stand hier `flex-direction: row`, weil die Segmenthoehe damals vom
 * Inhalt kam: Eine zweite Zeile machte das Segment hoeher, bei sechs Sossen
 * summierte sich das. Seit 0.30.0 gibt `grid-auto-rows` die Hoehe vor - 44 px,
 * ob eine Zeile darin steht oder zwei. Das Symbol UEBER dem Namen ist damit
 * gratis, und es nimmt ihm keine Breite mehr weg.
 *
 * Die Breite war der Grund fuer den Wechsel: Gemessen am 14.09.2026 im 88 px
 * breiten Swatch war "Vegetarisch" 78 px breit, daneben 11 px Symbol und 3 px
 * Abstand - zusammen 92 px in einer 86 px breiten Flaeche. Beide, "Vegetarisch"
 * und "Joghurtsoße", meldeten ÜBERSTAND und waren angeschnitten. Uebereinander
 * hat der Name die ganze Breite und das Symbol seine eigene Zeile: 11 + 17 von
 * 36 verfuegbaren Pixeln.
 */
.wahlkarten .wahlkarte.wahlkarte--mit-zeichen,
.single-product .wcsc-addon-field .wcsc-addon-options .wcsc-addon-button.wahlkarte--mit-zeichen {
	flex-direction: column;
	gap: 0.1em;
}

/* Das Symbol ist Beiwerk und darf dem Namen keinen Platz nehmen: In einer
   91 px breiten Zelle kostete es bei "Joghurtsoße" genau die zwei Zeichen,
   die dann fehlten. */
/*
 * DAS SVG SELBST, nicht nur seine Huelle: Das Markup schreibt `width="30"`
 * und `height="30"` in den Baum (gastro-icons.php). Eine Regel am `span`
 * liess es unberuehrt - "Joghurtsoße" blieb um vier Pixel zu breit und war
 * abgeschnitten.
 */
.wahlkarten .wahlkarte .wahlkarte__zeichen,
.single-product .wcsc-addon-field .wcsc-addon-options .wcsc-addon-button .wahlkarte__zeichen,
.wahlkarten .wahlkarte .wahlkarte__zeichen svg,
.single-product .wcsc-addon-field .wcsc-addon-options .wcsc-addon-button .wahlkarte__zeichen svg {
	flex: none;
	width: 0.95em;
	height: 0.95em;
	/*
	 * `min-height: 0` IST DER WIRKSAME TEIL DIESER REGEL. Die Grundregel oben
	 * gibt der Huelle `min-height: 2rem` - aus der Zeit, als Karten mit und
	 * ohne Symbol in einer Reihe gleich hoch bleiben mussten. Eine Mindesthoehe
	 * schlaegt jede `height`: Das Symbol blieb 32 px hoch, und mit dem Namen
	 * darunter ragte der Inhalt 50 px weit in einen 42 px hohen Swatch.
	 * Gemessen am 14.09.2026 - ALLE zehn Swatches meldeten ÜBERSTAND, und in
	 * der Zahl `0.95em` daneben war der Grund nicht zu sehen.
	 */
	min-height: 0;
	opacity: .75;
}

/* ==================================================================
   VARIANTE C: DIE PFLICHTWAHL IST EINE SEGMENTLEISTE (Theme 0.29.0)

   Kahraman am 14.09.2026: "alles in einem Designstyle ... die Kacheln
   kleiner". Bis 0.28.2 hatte der Bestellblock DREI Bedienformen
   nebeneinander - Wahlkarten (Doener), Textknoepfe (Bowl) und Bildkacheln
   (Zusaetze) -, und jede Pflichtreihe war ein seitwaerts scrollender
   Streifen mit 7,5rem breiten Karten. Gemessen an der Bowl bei 390 px:
   1227 px Bestellblock, davon 486 px allein die zwei Bildreihen.

   Jetzt: Speisegruppe und Sosse sind EINE Leiste aus gleich breiten
   Segmenten, die umbricht statt zu scrollen. Alles ist auf einen Blick da -
   bei sechs Sossen zwei Zeilen statt eines Streifens, in dem drei von sechs
   unsichtbar waren.

   DIE TRENNLINIEN ENTSTEHEN AUS DEM `gap`, NICHT AUS RAENDERN: Ein `gap`
   von 1px auf einem dunklen Grund zeichnet genau eine Linie zwischen zwei
   Segmenten - auch beim Umbruch, wo aneinanderstossende Raender doppelt so
   dick waeren und an den Zeilenenden fehlten.
   ================================================================== */
/*
 * Die Variantenwahl steht im selben Flex-Container wie Menge und Kaufknopf und
 * bekam dort nur 150 von 278 px - mit 88er Spalten ergab das EINE Spalte und
 * vier Zeilen (193 px fuer vier Knoepfe). Dieselbe Zeile wie bei
 * `.wcsc-addons-wrapper` und `.bitte-ohne`.
 */
.variations,
.woocommerce-variation-add-to-cart .wahlkarten {
	grid-column: 1 / -1;
	flex-basis: 100%;
	width: 0;
	min-width: 100%;
	max-width: 100%;
}

/*
 * `.wahlkarten-aktiv` IM SELEKTOR IST PFLICHT, KEINE ZIERDE.
 *
 * Weiter oben steht `.wahlkarten-aktiv .wahlkarten { display: flex }` (0,2,0),
 * und die schlaegt ein blosses `.wahlkarten` (0,1,0). Gemessen am 14.09.2026:
 * Das Grid galt nicht, die vier Speisegruppen des Doeners standen als Flexbox
 * UNTEREINANDER - 193 px fuer vier Knoepfe. Dieselbe Falle hatte die alte
 * Scroll-Regel schon einmal, ihr Kommentar steht ein Stueck weiter unten.
 */
/*
 * NUR DIE PFLICHTGRUPPEN (`.wcsc-addon-field`), NICHT DIE EXTRAS.
 *
 * `.wcsc-extra-field` traegt bis zu 28 Optionen, kuerzt sie auf sechs und
 * haengt den Rest in einen Aufklapper (Theme 0.18.0). In Segmente gezwungen
 * fielen dort drei Pruefpunkte: Die Silbentrennung, die lange Namen wie
 * "Vegetarische extras" umbricht, war abgeschaltet, und ein Eintrag stand
 * 11 px ausserhalb seiner Reihe. Gemessen am 14.09.2026.
 *
 * Die Extras bleiben damit, wie sie waren - optisch sind es dieselben Knoepfe,
 * nur ohne den gemeinsamen Rahmen.
 */
/*
 * EIN MASS FUER ALLE WAHL-SWATCHES (Theme 0.30.0).
 *
 * Kahraman am 14.09.2026 zum Bild von 17:40: "die Kacheln sind alle ungleich
 * gross ... eigentlich sind das Swatches". Beide Befunde hatten dieselbe
 * Ursache - die Trennlinien entstanden bis 0.29.9 aus einem grauen
 * CONTAINER-Hintergrund plus 1px `gap`:
 *
 *   1. Leere Rasterzellen zeigten diesen Hintergrund als graue Bloecke
 *      (sechs Sossen bei fuenf Spalten, vier Zutaten bei drei).
 *   2. Dagegen half nur `auto-fit`, das leere Spuren zusammenfallen laesst -
 *      und genau dadurch wurde die EINZIGE Speisegruppe "Geflügel" so breit
 *      wie die ganze Leiste, waehrend die Sossen daneben 91 px hatten.
 *
 * Jetzt traegt jeder Swatch seinen eigenen Rahmen, der Container ist
 * durchsichtig. Damit ist eine leere Zelle unsichtbar - und weil kein grauer
 * Rest mehr durchscheinen kann, darf `auto-fill` stehen: Die Spuren bleiben
 * erhalten, eine einzelne Option ist so breit wie jede andere.
 *
 * `grid-auto-rows` mit fester Hoehe ist der zweite Teil der Gleichheit: Ohne
 * sie war eine Zeile mit zweizeiligem Namen ("Hähnchen-Drehspieß") hoeher als
 * die Zeile darueber. Der Name wird deshalb auf zwei Zeilen begrenzt (siehe
 * `.wahlkarte__name` weiter unten).
 *
 * Die drei Masse stehen in theme.json unter `custom.swatch` und gelten fuer
 * ALLE DREI Gruppen - Speisegruppe, Sosse und "Bitte ohne" teilen sich diese
 * eine Regel, statt wie bis 0.29.9 zwei verschiedene Mindestbreiten zu fuehren
 * (5,5rem gegen 7,5rem).
 */
/*
 * DIE DRITTE ZEILE IST KEIN VERSEHEN. `bestellung.js` haengt jeder Gruppe ab
 * neun Optionen die Klasse `wcsc-addon-options--raster` an
 * (`gastro-bestellung.php:877`), und deren Regel weiter unten ist mit
 * `.reihe-bedienbar .single-product …--raster` (0,4,0) staerker als diese hier
 * (0,3,0). Eine Pflichtgruppe mit zehn Sossen waere damit ausgerechnet dort
 * auf die alten 7,5rem-Karten zurueckgefallen, wo die Gruppe am groessten ist -
 * 120 px breite Karten direkt neben 88 px breiten Swatches.
 *
 * Das Raster bleibt fuer die EXTRAS richtig (bis 28 Optionen mit Aufklapper);
 * fuer die Pflichtgruppen gewinnt der Swatch.
 */
.wahlkarten-aktiv .wahlkarten,
.single-product .wcsc-addon-field .wcsc-addon-options,
.reihe-bedienbar .single-product .wcsc-addon-field .wcsc-addon-options.wcsc-addon-options--raster,
.bitte-ohne__reihe {
	display: grid;
	/*
	 * Die 5,5rem sind an der Breite des Bestellkastens gemessen: Auf einem
	 * 390-px-Geraet ist `form.cart` nur **278 px** breit, das ergibt drei
	 * Spalten a 88 px. Schmaler wuerde "Joghurtsoße" umbrechen.
	 */
	/*
	 * FESTE SPALTENBREITE, NICHT `1fr`. Mit `minmax(..., 1fr)` fuellen die
	 * Swatches ihre Zeile - und richten sich damit nach dem Container statt
	 * nach einem Mass: Gemessen am 14.09.2026 bei 1440 px war ein Swatch auf
	 * der Bowl-Seite 91 px breit, auf der Doener-Seite 99, weil die
	 * Variantenwahl in einem schmaleren Kasten steht. Innerhalb einer Seite
	 * faellt das nicht auf, ueber vier Demoshops hinweg schon.
	 *
	 * Ein Swatch ist eine Probe, kein Streifen: Er hat ein Mass. Was rechts
	 * uebrig bleibt, ist Rand und keine Luecke - gemessen am 14.09.2026:
	 * bei 390 px 1 px von 278, bei 1440 px 43 px von 414.
	 */
	grid-template-columns: repeat(auto-fill, var(--wp--custom--swatch--breite, 5.5rem));
	justify-content: start;
	/*
	 * FESTE ZEILENHOEHE - und zwar bewusst, nachdem `minmax(…, auto)` einen Tag
	 * lang drinstand und GEMESSEN schlechter war.
	 *
	 * Mit `auto` waechst die Zeile am laengsten Namen. Gemessen am 14.09.2026
	 * am Doener: Die Zeile mit "Hähnchen-Drehspieß" wurde 47,5 px hoch, die
	 * Zeile darunter blieb bei 44 - vier Pixel Unterschied in DERSELBEN Gruppe,
	 * also genau der Befund, gegen den diese Fassung gebaut ist. Der Aufschlag
	 * ist auch nicht die zweite Textzeile (die passt in 44 px), sondern
	 * Rechenluft der Rastersortierung.
	 *
	 * Was in 44 px nicht passt, wird deshalb GEKUERZT UND ALS GEKUERZT
	 * ANGEZEIGT, nicht stumm beschnitten - siehe `.bitte-ohne__wahl > span`
	 * weiter unten. Erhebung ueber alle 24 Produkte mit Bestellblock: genau
	 * EIN Name im Shop ist zu lang ("Iskender-Tomatensauce").
	 *
	 * GRENZE, DIE EIN KUNDENSHOP KENNEN MUSS: Eine Variantenkarte MIT Aufpreis
	 * bringt eine dritte Zeile mit (`wahlkarte__preis`,
	 * `gastro-bestellung.php:109`). Im Labor hat das kein Produkt; wo es eins
	 * gibt, ist `custom.swatch.hoehe` in theme.json die eine Stelle, an der man
	 * das Mass anhebt (3,5rem traegt drei Zeilen).
	 */
	grid-auto-rows: var(--wp--custom--swatch--hoehe, 2.75rem);
	gap: var(--wp--custom--swatch--abstand, 0.4rem);
	background: none;
	border: 0;
	margin-top: 0.35rem;
}

/*
 * EINE ZEILE MEHR - ABER NUR FUER DIE GRUPPE, DIE AUFPREISE FUEHRT.
 *
 * `gastro-bestellung.php` haengt an eine Variantenkarte mit Preisunterschied
 * ein `<span class="wahlkarte__preis">` als dritte Zeile. In 44 px passt das
 * nicht: Gemessen am 14.09.2026 an der Buehne "Prüfpizza mit 28 Extras" ragte
 * "Groß +3,00 €" **6,3 px** aus seinem Swatch - der Betrag war angeschnitten,
 * waehrend er im Markup vollstaendig stand. Im Laborshop hat kein Produkt
 * Aufpreise je Variante, deshalb war es nur an der Buehne zu sehen.
 *
 * `:has()` STATT EINES GROESSEREN GRUNDMASSES: Alle Swatches auf 3,75rem zu
 * heben, machte jede Sossenleiste 25 % hoeher, damit eine Groessenwahl irgendwo
 * einen Betrag tragen kann. So waechst genau die Gruppe, die ihn fuehrt - und
 * INNERHALB der Gruppe bleiben alle gleich, worauf es Kahraman am 14.09.2026
 * ankam.
 */
/*
 * NUR `grid-auto-rows` - alles andere steht in der Basisregel darueber.
 *
 * Beim ersten Anlauf am 14.09.2026 sind `gap`, `background`, `border` und
 * `margin-top` beim Einfuegen MIT hier hereingerutscht und damit aus der
 * Basisregel verschwunden. Folge: Jede Gruppe OHNE Aufpreis verlor ihren
 * Abstand und fiel auf die 8 px des Plugins zurueck - bei 390 px passten dann
 * nur noch ZWEI 88-px-Spalten in die 278 px des Formulars statt drei
 * (3 x 88 + 2 x 8 = 280). Die Abnahme sah es nicht, weil sie Breiten und
 * Zeilenhoehen misst, nie den Abstand oder die Spaltenzahl.
 *
 * `.wcsc-extra-plus` stand hier ebenfalls im Selektor und konnte nie greifen:
 * Das Element gibt `class-extras.php` aus, also immer in `.wcsc-extra-field` -
 * nie in `.wcsc-addon-field`. Und fuer die Extras waere `grid-auto-rows`
 * ohnehin wirkungslos, weil sie ueber `--raster` auf `flex` laufen.
 */
.wahlkarten-aktiv .wahlkarten:has(.wahlkarte__preis) {
	grid-auto-rows: calc(var(--wp--custom--swatch--hoehe, 2.75rem) + 1rem);
}

/*
 * JEDES ELEMENT FUELLT SEINE SPUR. Im Bild vom 14.09.2026 stand "Geflügel"
 * als halbbreiter Knopf, und daneben lag der Hintergrund der Leiste als
 * grauer Balken: Das Grid-Item war das LABEL, der Knopf darin blieb so breit
 * wie sein Text. Beide brauchen die volle Breite, sonst zeichnet die
 * Trennlinien-Flaeche Luecken, die niemand bestellt hat.
 */
.wahlkarten .wahlkarte,
.single-product .wcsc-addon-field .wcsc-addon-options .wcsc-addon-option,
.single-product .wcsc-addon-field .wcsc-addon-options .wcsc-addon-button {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin: 0;
	/*
	 * HOEHE VOM RASTER, NICHT VOM INHALT. `grid-auto-rows` gibt die Zeilenhoehe
	 * vor; ohne diese Zeile blieb der sichtbare Knopf so hoch wie sein Text und
	 * sass mit Luft darunter in einer hoeheren Zelle - im Bild vom 14.09.2026
	 * an jeder einzeiligen Sosse neben "Scharfe Soße" zu sehen.
	 */
	height: 100%;
}

/*
 * DER RAHMEN SITZT AM SWATCH, NICHT AM CONTAINER. Er ersetzt die
 * Trennlinien-Flaeche von 0.29.9 - deshalb gibt es keine grauen Reste mehr,
 * wo kein Swatch steht.
 */
.wahlkarten .wahlkarte,
.single-product .wcsc-addon-field .wcsc-addon-options .wcsc-addon-button,
.bitte-ohne__wahl {
	border: 1px solid var(--wp--preset--color--linie-stark);
	border-radius: var(--wp--custom--radius--knopf);
	overflow: hidden;
}

/*
 * DIESE REGEL MUSS HIER STEHEN, NICHT WEITER OBEN.
 *
 * `.wahlkarte:hover` (0,2,0) steht bei Zeile 735 - und die Kurzform `border:`
 * darueber hat dieselbe Spezifitaet und kommt SPAETER, setzt die Farbe also
 * zurueck. Gemessen am 14.09.2026: Rahmenfarbe vor und nach dem Ueberfahren
 * identisch rgb(102, 108, 122), waehrend "Bitte ohne" weiter reagierte - drei
 * optisch gleiche Gruppen mit zwei verschiedenen Rueckmeldungen.
 */
.wahlkarten .wahlkarte:hover,
.single-product .wcsc-addon-field .wcsc-addon-options .wcsc-addon-option:hover .wcsc-addon-button {
	border-color: var(--wp--preset--color--akzent);
}

/*
 * Das Label ist nur die Huelle - Rahmen und Flaeche traegt der Knopf darin.
 * Ein Rahmen an beiden ergaebe zwei Linien uebereinander.
 */
.single-product .wcsc-addon-field .wcsc-addon-options .wcsc-addon-option {
	display: flex;
	border: 0;
	border-radius: 0;
}

/*
 * DIE GEWAEHLTE OPTION MUSS GEWAEHLT AUSSEHEN.
 *
 * Mein `background: var(--grund)` am Knopf hat vier Klassen Spezifitaet und
 * schlug damit die Stellschraube des Plugins: Im Bild vom 14.09.2026 stand
 * "Geflügel" als dunkelgraue Flaeche auf dunklem Grund - die einzige gewaehlte
 * Option war die am schlechtesten sichtbare. Der Zustand wird deshalb auf
 * derselben Ebene wieder gesetzt.
 */
.single-product .wcsc-addon-field .wcsc-addon-options .wcsc-addon-option input:checked + .wcsc-addon-button,
.wahlkarten .wahlkarte.is-gewaehlt {
	background: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent-kontrast);
	/* Seit 0.30.0 traegt jeder Swatch einen Rahmen - bliebe er grau, saesse um
	   die gewaehlte Flaeche eine fremde Linie. */
	border-color: var(--wp--preset--color--akzent);
}

.single-product .wcsc-addon-field .wcsc-addon-options .wcsc-addon-option input:checked + .wcsc-addon-button .wahlkarte__zeichen,
.wahlkarten .wahlkarte.is-gewaehlt .wahlkarte__zeichen {
	opacity: 1;
}

.wahlkarten .wahlkarte,
.single-product .wcsc-addon-field .wcsc-addon-options .wcsc-addon-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.1em;
	/*
	 * Flach: 0.5em Polsterung plus `min-height: 2.6rem` ergaben 63 px je
	 * Segment - bei drei Zeilen fast 200 px fuer eine Sossenwahl. Die Schrift
	 * ist klein, das Zeichen sitzt daneben statt darueber (siehe unten).
	 */
	padding: 0.35em 0.3em;
	/*
	 * 0,75rem, NICHT das Preset "klein" (0,875rem) und auch nicht mehr die
	 * 0,8rem von 0.29.9: Bei 0,8rem ragten "Vegetarisch" und "Joghurtsoße" im
	 * 88 px breiten Swatch ueber ihre Flaeche hinaus und wurden vom
	 * `overflow: hidden` abgeschnitten - gemessen am 14.09.2026, beide mit
	 * ÜBERSTAND in der Swatch-Abnahme. Der Unterschied in der Schrift ist kaum
	 * zu sehen, der abgeschnittene Name sehr wohl.
	 */
	font-size: var(--wp--custom--swatch--schrift, 0.75rem);
	/*
	 * KEINE SILBENTRENNUNG IM SEGMENT. Das Theme setzt `hyphens: auto` fuer
	 * Fliesstext; in einem 91 px breiten Segment machte das aus "Geflügel" ein
	 * "Geflü-gel" und aus "Joghurtsoße" drei Zeilen. Ein Wort, das nicht
	 * passt, bricht lieber um - oder die Leiste bekommt eine Spalte weniger.
	 */
	hyphens: manual;
	background: var(--wp--preset--color--grund);
	text-align: center;
	line-height: 1.2;
}

/* --- Eine Reihe statt Umbruch, seitwaerts scrollend --- */
/*
 * Dieselbe Mechanik wie bei den Zusatzreihen: nicht umbrechen, seitwaerts
 * scrollen, und das Skript haengt Blaetterknopf und Verlaufskante an (siehe
 * bestellung.js). Ohne `min-width: 0` waechst eine Flex- oder Grid-Zelle an
 * ihrem Inhalt und schiebt den ganzen Bestellkasten auf - derselbe Kniff wie
 * bei `.zusatz__reihe`.
 */
/*
 * BEIDE SELEKTOREN BRAUCHEN EINE ZWEITE KLASSE - aus zwei verschiedenen
 * Gruenden, die zufaellig dieselbe Loesung haben:
 *
 *   .wahlkarten          konkurriert mit `.wahlkarten-aktiv .wahlkarten`
 *                        weiter oben in dieser Datei (0,2,0 schlaegt 0,1,0)
 *   .wcsc-addon-options  konkurrierte bis wc-simple-csv 1.3.0 mit dessen
 *                        Inline-CSS im Kopf; seit 1.4.0 laedt das Plugin eine
 *                        Datei, die zweite Klasse schadet aber nicht
 *
 * Beide setzen dort `flex-wrap: wrap`. Ohne die zweite Klasse blieb es beim
 * Umbruch - gemessen am 11.09.2026: die Sossenreihe stand in SECHS Zeilen
 * untereinander statt in einer.
 */
/*
 * `nowrap` haengt an einer Klasse, die das SKRIPT setzt - nicht unbedingt.
 * Ohne JavaScript gaebe es sonst eine Reihe, die nicht umbricht, seitwaerts
 * scrollt und weder Blaetterknopf noch Verlaufskante hat: Von sechs Sossen
 * waeren drei unsichtbar, ohne jeden Hinweis. Bei `.wahlkarten` war das schon
 * abgesichert (sie sind ohne `wahlkarten-aktiv` gar nicht sichtbar), bei den
 * Plugin-Reihen nicht.
 */
/*
 * HIER STAND DIE SCROLL-REIHE FUER DIE PFLICHTWAHL - sie ist mit Variante C
 * weg. Die Segmentleiste oben bricht um, statt zu scrollen: Bei sechs Sossen
 * standen in der scrollenden Reihe drei ausserhalb des Bildes, und wer nicht
 * wischte, sah sie nie. Der Blaetterknopf und die Verlaufskante entfallen
 * damit ebenfalls (siehe bestellung.js).
 *
 * Die ZUSATZREIHEN scrollen weiter: Dort sind es sieben und mehr Produkte,
 * die Reihe ist Verkaufsflaeche und kein Pflichtfeld - und wer nichts dazu
 * will, soll nicht an ihnen vorbeiscrollen muessen.
 */

/*
 * Die Optionsgruppen des Plugins stehen im selben Flex-Container wie Menge und
 * Kaufknopf und bekamen dort nur ihren Anteil: 182 von 472 px, gemessen am
 * 11.09.2026 - in einer Reihe, die nicht mehr umbricht, waren das anderthalb
 * sichtbare Karten. Sie gehoeren ueber die ganze Breite, genau wie die
 * Zusatzreihen weiter oben (siehe `.zusatz`).
 */
.wcsc-addons-wrapper,
.wcsc-extras-wrapper {
	grid-column: 1 / -1;
	flex-basis: 100%;
	width: 0;
	min-width: 100%;
	max-width: 100%;
}

/* Auch die Zwischenebenen duerfen nicht an ihrem Inhalt wachsen. */
.single-product .variations td,
.single-product .variations .value,
.wcsc-addon-field {
	min-width: 0;
	max-width: 100%;
}

/* Die Plugin-Option ist der Flex-Eintrag, nicht ihr Knopf. */
.single-product .wcsc-addon-options .wcsc-addon-option {
	flex: 0 0 var(--wp--custom--swatch--karte, 7.5rem);
	min-width: 0;
	display: flex;
}

/* --- Keine Artikelnummer auf der Seite --- */
/*
 * Kahraman am 11.09.2026: „die SKU kann ausgeblendet werden". Sie steht im
 * Markup und wird nur nicht gezeigt - Suchmaschinen und Vorlesewerkzeuge
 * behalten sie, und wer sie fuer den Betrieb braucht, findet sie im Backend.
 */
.single-product .wp-block-woocommerce-product-sku,
.single-product .product_meta .sku_wrapper {
	display: none;
}

/* ==================================================================
   Optionsgruppen ohne eigene Beschriftung

   Kahraman am 11.09.2026: „nimm die Bezeichnungen komplett raus und schreib
   ueber alle drei einfach 'Bitte auswaehlen' … und mach den Abstand zwischen
   den horizontalen Bloecken gleich gross."

   Vorher stand ueber jeder Gruppe ihr Name - erst waagerecht in einer eigenen
   Tabellenzelle (124 px breit), dann senkrecht gesetzt (24 px breit, aber
   171 px hoch, weil "Speisegruppe" zwoelf Buchstaben hat). Beides kostete mehr
   Platz, als es erklaerte: Was zur Wahl steht, sagen die Karten selbst -
   "Cocktail" und "Joghurtsosse" sind erkennbar Sossen, "Pommes" und "Reis"
   erkennbar Beilagen.

   VERSTECKT, NICHT ENTFERNT. Die Beschriftung bleibt fuer Vorlesewerkzeuge im
   Markup - ohne sie waeren drei gleich aussehende Kartenreihen fuer jemanden,
   der die Seite hoert, nicht auseinanderzuhalten. Sie ist nur nicht mehr zu
   sehen.
   ================================================================== */
/*
 * BEIDE Feldklassen. Das Plugin baut Optionen als `.wcsc-addon-field`
 * (class-frontend-addons.php:116), Extras aber als `.wcsc-extra-field`
 * (class-extras.php:79) - wer nur die erste nennt, laesst die Extras-
 * Beschriftung stehen, waehrend die anderen verschwinden. Im Labor betrifft
 * das elf Produkte.
 */
.single-product .variations th,
.single-product .variations .label,
.wcsc-addon-field > .wcsc-addon-label,
.wcsc-extra-field > .wcsc-addon-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.single-product .variations tr,
.single-product .variations tbody,
.single-product .variations th,
.single-product .variations td,
.wcsc-addon-field,
.wcsc-extra-field {
	display: block;
}

/*
 * WooCommerce gibt der Wertzelle ein `padding-bottom` von 1,75em - 28 px, die
 * INNERHALB der Zelle unter den Karten liegen und sich zum Abstand zwischen den
 * Bloecken addieren. Gemessen am 11.09.2026: Der Rahmen der Karten endete bei
 * y659, die Zelle erst bei y719.
 *
 * Der Selektor muss so lang sein wie der von WooCommerce (0,4,2), sonst
 * verliert er - dieselbe Stelle, an der schon das `margin-bottom` der Tabelle
 * haengt.
 */
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	padding: 0;
	border: 0;
	vertical-align: top;
	/*
	 * WooCommerce setzt hier `line-height: 2em` - doppelte Zeilenhoehe fuer
	 * eine Zelle, in der laengst keine Textzeile mehr steht, sondern eine
	 * Kartenreihe. Die Hoehe schlaegt auf jedes Kind durch, das sie nicht
	 * selbst ueberschreibt, und macht die Gruppe hoeher als noetig.
	 * Kahraman am 11.09.2026: „von line-height 2em auf 1em".
	 */
	line-height: 1em;
}

/*
 * EIN Abstand fuer alle drei Bloecke. Die drei Quellen bringen ihre eigenen
 * Raender mit - die Variationstabelle 16 px ueber
 * `.woocommerce div.product form.cart .variations` (Spezifitaet 0,4,2), Wrapper
 * und Feld je 9,6 px. Sie werden hier auf null gesetzt und der Abstand genau
 * einmal vergeben, damit er sich nicht mehr addiert.
 */
.woocommerce div.product form.cart .variations,
.single-product .wcsc-addon-field,
.single-product .wcsc-extra-field,
.single-product .wcsc-addons-wrapper,
.single-product .wcsc-extras-wrapper {
	margin-top: 0;
	margin-bottom: 0;
}

/*
 * Auch hier beide Feldklassen: Das Plugin gibt `.wcsc-extra-field` ein
 * `margin-bottom: 15px` (class-extras.php:190). Ohne die zweite Nennung
 * staenden zwei Extras-Zeilen 15 px auseinander, waehrend alle anderen
 * Bloecke 28 px Abstand haben - genau die Ungleichheit, die weg sollte.
 */
.single-product .variations tr + tr,
.single-product .wcsc-addon-field + .wcsc-addon-field,
.single-product .wcsc-extra-field + .wcsc-extra-field {
	margin-top: var(--wp--custom--optionen--abstand, 20px);
}

.single-product .wcsc-addons-wrapper,
.single-product .wcsc-extras-wrapper {
	margin-top: var(--wp--custom--optionen--abstand, 20px);
}

/*
 * DER ZEILENABSTAND DES FORMULARS MUSS WEG, sonst addiert er sich zu jedem
 * Rand, den die Gruppen selbst tragen - aber nur bei denen, die im selben
 * Container liegen. Gemessen am 11.09.2026: zwischen zwei Plugin-Wrappern
 * 37,6 px (28 + gap), zwischen Variationstabelle und erstem Wrapper 28, weil
 * beide in verschiedenen Containern stehen. Den gap herauszurechnen machte
 * deshalb den einen Abstand richtig und den anderen zu klein.
 *
 * `column-gap` bleibt: Menge und Kaufknopf stehen nebeneinander und brauchen
 * ihn. Die senkrechten Abstaende vergibt jetzt jede Gruppe selbst.
 */
.single-product form.cart,
.single-product .woocommerce-variation-add-to-cart {
	row-gap: 0;
}

/*
 * EINE SPALTE FUER DAS VARIANTENFORMULAR - und damit die 65 px, die Kahraman
 * am 14.09.2026 im Rastergitter als "vierten Bereich" gesehen hat.
 *
 * `form.cart` ist ein GRID, und seine Spalten sind IMPLIZIT: Vier Kinder
 * landeten nebeneinander, gemessen `88px 130,4 130,4 130,5`. Jede Gruppe
 * bekam dadurch 414 von 479 px, und rechts blieb ein Streifen frei.
 *
 * `grid-column: 1 / -1` an den Kindern hilft dagegen NICHT - das war mein
 * erster Versuch am selben Tag, und er machte es schlimmer (349 px statt 414).
 * Die Zahl `-1` meint die letzte Linie des EXPLIZITEN Grids; gibt es keine
 * Vorgabe, ist das Linie 1, und `1 / -1` wird zu `1 / 1` - einer einzigen,
 * schmalen Spur. Dieselbe Regel steht seit dem 11.09. an `.optionen-kopf` und
 * `.zusatz` und hat dort nie das getan, was ihr Kommentar behauptet.
 *
 * NUR DAS VARIANTENFORMULAR. Bei einem einfachen Produkt (die Getraenke) sind
 * Menge und Kaufknopf DIREKTE Kinder von `form.cart` und stuenden in einer
 * Spalte untereinander - genau der Schaden, vor dem der Kommentar weiter oben
 * warnt. Beim Variantenformular liegen beide in
 * `.woocommerce-variation-add-to-cart` und bleiben unberuehrt nebeneinander.
 */
.single-product form.variations_form.cart {
	grid-template-columns: minmax(0, 1fr);
}

/* --- Die eine Ueberschrift ueber allen Gruppen --- */
.optionen-kopf {
	/*
	 * Etwas Luft nach unten: Zwischen der Ueberschrift und der ersten Gruppe
	 * standen 0 px, waehrend zwischen allen anderen Gruppen 20 liegen - die
	 * Ueberschrift klebte auf der Speisegruppe. Halb so viel wie eine Fuge
	 * genuegt, sie gehoert ja zu dem, was folgt.
	 */
	margin: 0 0 calc(var(--wp--custom--optionen--abstand, 20px) / 2);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 700;
	color: var(--wp--preset--color--text);
	/*
	 * Dieselbe Vollbreiten-Behandlung wie `.zusatz` und die Plugin-Wrapper.
	 * Das Formular ist ein Grid beziehungsweise ein Flex-Container, und ein
	 * schlichtes <p> waere dort ein Element, das nur so breit wird wie sein
	 * Text - es koennte NEBEN der Variationstabelle landen statt darueber.
	 * Derselbe Fall wie bei `.zusatz`, das seinerzeit nur 239 von 443 px bekam.
	 */
	grid-column: 1 / -1;
	flex-basis: 100%;
	width: 0;
	min-width: 100%;
}

/*
 * Die Ueberschrift gehoert NAEHER an ihre erste Gruppe als die Gruppen
 * zueinander - sonst benennt sie optisch nichts. Ohne diese Regel kamen
 * 9,6 px Rand plus 9,6 px Formular-Abstand plus 28 px Gruppenabstand
 * zusammen: 47 px, mehr als die 28 zwischen den Gruppen.
 */
.optionen-kopf + .wcsc-addons-wrapper,
.optionen-kopf + .wcsc-extras-wrapper,
.optionen-kopf + .variations,
.optionen-kopf + * {
	margin-top: 0.6rem;
}

/* ==================================================================
   WARENKORB UND KASSE

   Beide Seiten laufen als Block-Version (`woocommerce/cart`,
   `woocommerce/checkout`). Ihr Markup entsteht erst im Browser, ihre Stile
   kommen aus `checkout.css` und `packages-style.css` des Plugins - beide
   mit langen Selektoren und mit festen Farben, die kein Theme kennen.

   Gemessen am 11.09.2026 mit gefuelltem Korb (Issue #70): die Eingabefelder
   standen weiss auf dunklem Grund, das Ankreuzfeld blieb weiss auch im
   gewaehlten Zustand, und vier Textrollen lagen bei 11,4 px.

   Hier wird nirgends `!important` gestapelt, sondern mit derselben
   Spezifitaet gleichgezogen. Der Kniff dabei ist `input[type]` ohne Wert:
   WooCommerce schreibt `input[type="email"]` und kommt damit auf 0,3,1 -
   ein Attributselektor ohne Wert zaehlt genauso und deckt alle Typen ab.
   ================================================================== */

/*
 * EINGABEFELDER TRAGEN DIE FARBROLLEN DES THEMES - AUSSER IM FEHLERFALL.
 *
 * `:not(.has-error)` ist keine Vorsichtsmassnahme, sondern die Reparatur eines
 * gemessenen Fehlers: WooCommerce faerbt ein unausgefuelltes Pflichtfeld rot
 * (`#cc1818`) mit derselben Spezifitaet 0,3,1 - und das Theme-Blatt laedt
 * zuletzt, gewinnt also jeden Gleichstand. Ohne den Ausschluss blieb der
 * Rahmen grau, und nur die Meldung unter dem Feld zeigte den Fehler an.
 *
 * Der Fehler war beim ersten Nachmessen fast durchgerutscht: nach einem Klick
 * auf "Bestellung aufgeben" springt der Fokus ins erste fehlerhafte Feld, und
 * fuer den Fokus hat WooCommerce eine eigene Regel mit 0,4,1. Dieses eine Feld
 * war rot, die fuenf anderen nicht.
 */
.wc-block-components-form .wc-block-components-text-input:not(.has-error) input[type],
.wc-block-components-text-input:not(.has-error) input[type],
.wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__select,
.wc-block-components-textarea:not(.has-error) {
	background-color: var(--wp--preset--color--grund);
	color: var(--wp--preset--color--text);
	border-color: var(--wp--preset--color--linie-stark);
	border-radius: var(--wp--custom--radius--knopf);
}

/* Die Flaeche gehoert auch im Fehlerfall dem Theme - nur der Rahmen bleibt rot. */
.wc-block-components-text-input.has-error input[type],
.wc-blocks-components-select.has-error .wc-blocks-components-select__select {
	background-color: var(--wp--preset--color--grund);
	color: var(--wp--preset--color--text);
	border-radius: var(--wp--custom--radius--knopf);
}

/*
 * DAS SCHWEBENDE LABEL UEBER DEM AUSWAHLFELD.
 *
 * Bei einem Auswahlfeld gibt es keinen leeren Zustand, das Label steht also
 * immer oben: 13 px hoch, 6 px unter der Feldkante, endet bei 24 px.
 * WooCommerce laesst dafuer `padding-top: 16px` und rechnet mit der
 * Zeilenhoehe des Browsers. Das Theme vererbt aber 1,55 vom Rumpf - der Wert
 * wuchs auf 25 px und rutschte unter das Label. Gemessen: rund 4 px Ueberlapp
 * an "Land/Region" und "Bundesland/Landkreis".
 *
 * Mit `line-height: 1` ist es ausrechenbar: 50 px Feld minus 2 px Rahmen
 * minus 16 px Polster ergibt 32 px Innenraum, eine 16-px-Zeile mittig darin
 * beginnt bei 24 px - genau dort, wo das Label endet.
 */
.wc-blocks-components-select .wc-blocks-components-select__select {
	line-height: 1;
}

/* --- Ankreuz- und Auswahlfelder in der Markenfarbe statt Weiss --- */
.wc-block-components-checkbox:not(.has-error) .wc-block-components-checkbox__input[type] {
	background: var(--wp--preset--color--grund);
	border-color: var(--wp--preset--color--linie-stark);
}

.wc-block-components-checkbox:not(.has-error) .wc-block-components-checkbox__input[type]:checked {
	background: var(--wp--preset--color--akzent);
	border-color: var(--wp--preset--color--akzent);
}

/* Ein nicht angehaktes Pflichtfeld bleibt rot - nur die Flaeche ist unsere. */
.wc-block-components-checkbox.has-error .wc-block-components-checkbox__input[type] {
	background: var(--wp--preset--color--grund);
}

.wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--wp--preset--color--akzent-kontrast);
}

/*
 * DER PUNKT IM AUSWAHLKNOPF MUSS MITGEFAERBT WERDEN.
 *
 * WooCommerce zeichnet ihn als `::before` mit festem `background: #000` und
 * haelt ihn nur deshalb sichtbar, weil das Feld darunter weiss bleibt. Wer
 * also nur die Flaeche einfaerbt, macht aus einem schwarzen Punkt auf Weiss
 * einen schwarzen Punkt auf Schwarz - in drei der vier Stil-Varianten.
 *
 * Der Selektor ist derselbe wie in `checkout.css` (0,2,0); die kuerzere
 * Fassung ohne den Eltern-Teil blieb wirkungslos, das Feld war weiterhin
 * weiss. Gewaehlt wird in der Markenfarbe, wie auf der Produktseite auch.
 */
.wc-block-components-radio-control .wc-block-components-radio-control__input {
	background: var(--wp--preset--color--grund);
	border-color: var(--wp--preset--color--linie-stark);
}

.wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
	border-color: var(--wp--preset--color--akzent);
}

.wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
	background: var(--wp--preset--color--akzent);
}

/*
 * Die zweite Zeile der Adresskarte kam mit `rgba(18,18,18,0.7)` - ein fester
 * Grauton, der nur ueber hellem Grund funktioniert. Das Theme hat fuer
 * "leiser Text" eine eigene Rolle.
 */
.wc-block-components-address-card address .wc-block-components-address-card__address-section--secondary {
	color: var(--wp--preset--color--text-leise);
}

/*
 * VIER ROLLEN LAGEN BEI 11,4 px.
 *
 * Das sind die gewaehlte Sosse, die Speisegruppe und der Steuerhinweis -
 * also genau die Angaben, wegen derer jemand den Korb noch einmal liest.
 * Die kleinste Groesse des Themes ist 14 px und damit die Untergrenze.
 */
.wc-block-components-product-details__name,
.wc-block-components-product-details__value,
.wc-block-components-product-metadata__description,
.wc-block-components-totals-footer-item-tax {
	font-size: var(--wp--preset--font-size--klein);
}

/*
 * DER STEUERHINWEIS LIEF AUF 390 px AUS DER SUMMENKARTE HERAUS.
 *
 * "Einschliesslich 0,56 EUR MwSt 7% (Speisen), 0,24 EUR MwSt 19% (Getraenke)"
 * braucht bei 14 px rund 430 px - die Karte ist 334 px breit. WooCommerce
 * setzt dort `white-space: pre` UND `display: flex; flex-direction: row`,
 * beides verhindert den Umbruch; die Zeile lief einfach weiter.
 *
 * Der Selektor ist derselbe wie in `cart.css` und `checkout.css` (0,2,0) -
 * mit einer kuerzeren Regel bleibt es beim Ueberlauf.
 */
.wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax {
	white-space: normal;
	flex-wrap: wrap;
	overflow-wrap: anywhere;
}

/*
 * Der Produktname stand als 13-px-Link: unterstrichen, in der Akzentfarbe,
 * kleiner als die Zusatzangaben darunter. Im Korb ist er die Hauptsache.
 */
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
.wc-block-components-product-name {
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 600;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.wc-block-components-product-name:hover,
.wc-block-components-product-name:focus-visible {
	color: var(--wp--preset--color--akzent);
}

/* Die Mengenknoepfe standen in Arial - WooCommerce setzt dort keine Familie. */
.wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector__input {
	font-family: inherit;
}

/*
 * Die Knoepfe beider Seiten folgen der Form aus theme.json. WooCommerce
 * setzt 3 px Radius; das Theme fuehrt seine eigene Stellschraube.
 * `.is-link` bleibt aussen vor - das sind Textlinks, keine Knoepfe.
 */
.wc-block-components-button:not(.is-link) {
	border-radius: var(--wp--custom--radius--knopf);
	font-weight: var(--wp--custom--knopf--gewicht);
	text-transform: var(--wp--custom--knopf--versal);
	letter-spacing: var(--wp--custom--knopf--abstand);
}

/* --- Der eigene Kopf und Fuss der Kasse --- */
.kasse-fuss .wp-block-navigation {
	gap: 1.5rem;
}

.kasse-fuss a {
	color: var(--wp--preset--color--text-leise);
}

.kasse-fuss a:hover,
.kasse-fuss a:focus-visible {
	color: var(--wp--preset--color--text);
}

/* ==================================================================
   SIDEBAR-WARENKORB (Mini-Cart)

   Der Drawer war der letzte Ort im Shop mit fremden Schriftgraden.
   Gemessen am 11.09.2026 bei 481 px Drawerbreite (Issue #76).
   ================================================================== */

/*
 * DIE UEBERSCHRIFT STAND IN DREI ZEILEN.
 *
 * WooCommerce setzt `h2.wc-block-mini-cart__title { font-size: 2em }` - das
 * ergab 32 px, und mit den Versalien der Stil-Variante brauchte
 * "Dein Warenkorb (Artikel: 2)" drei Zeilen und rund 110 px Hoehe fuer eine
 * Ueberschrift.
 *
 * Der Zaehler stand dabei scheinbar am rechten Rand. Nicht, weil WooCommerce
 * ihn dorthin schiebt - dessen Regel setzt KEIN `justify-content`, das wurde
 * nachgemessen. Der Grund war schlichter: In einer Flex-Zeile ohne Umbruch
 * schrumpfte der 32-px-Titel auf die verfuegbare Breite und fuellte die
 * Zeile, der Zaehler stand hinter ihm am Rand. `flex-wrap: wrap` und der
 * kleinere Grad loesen es, nicht eine Ausrichtung.
 *
 * Derselbe Selektor wie WooCommerce (0,1,1), denn das Theme-Blatt laedt
 * zuletzt und gewinnt den Gleichstand. `gross` ist die Rolle, die das Theme
 * fuer Abschnittsueberschriften fuehrt - in jeder Stil-Variante eigens
 * gesetzt, damit die Handschrift auch hier greift.
 *
 * Das Element bleibt ein `h2`: Es ist die einzige Ueberschrift im Drawer, und
 * der Drawer traegt keinen eigenen Namen (gemessen: weder `aria-label` noch
 * `aria-labelledby`). Fuer die Ueberschriften-Navigation von Vorlesehilfen ist
 * sie der einzige Einstieg. Der Umbruch kam vom Grad, nicht vom Element.
 */
h2.wc-block-mini-cart__title {
	font-size: var(--wp--preset--font-size--gross);
	flex-wrap: wrap;
	gap: 0 0.4em;
	line-height: 1.2;
}

/*
 * Der Abstand kommt aus EINER Quelle. WooCommerce gibt dem ersten Kind
 * `margin-right: 8px`; zusammen mit dem `gap` oben standen 15 px zwischen
 * Titel und Zaehler statt der gemeinten 7. Zwei Werte fuer denselben Abstand
 * sind dieselbe Falle wie zwei Regeln fuer denselben Selektor.
 */
h2.wc-block-mini-cart__title span:first-child {
	margin-right: 0;
}

/* Der Zaehler gehoert zum Titel, nicht an den Rand - und er ist die
   Nebenangabe, also leiser. */
h2.wc-block-mini-cart__title .wp-block-woocommerce-mini-cart-title-items-counter-block {
	color: var(--wp--preset--color--text-leise);
	font-weight: 400;
}

/*
 * Der Hinweis unter der Zwischensumme stand auf 11,4 px.
 *
 * WooCommerce rechnet ihn aus `--wp--preset--font-size--x-small` mit Rueckfall
 * auf `small * 0.875` - beide Rollen fuehrt dieses Theme nicht, es heisst hier
 * `klein`. Herausgekommen ist ein Grad, den das Theme nirgends vergibt.
 *
 * Der Selektor ist so lang wie der von WooCommerce (0,4,0); eine kuerzere
 * Regel bliebe wirkungslos.
 */
.wc-block-mini-cart__footer .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description {
	font-size: var(--wp--preset--font-size--klein);
}

/*
 * Der Zeilenpreis lag bei 13 px - unter der kleinsten Rolle des Themes.
 *
 * Ein Selektor genuegt fuer beide Orte: Die Tabelle des Sidebar-Warenkorbs
 * traegt `class="wc-block-cart-items wc-block-mini-cart-items"`, ist also
 * schon mitgemeint. Keine Textrolle im Shop steht unter 14 px.
 */
.wc-block-cart-items .wc-block-components-product-price {
	font-size: var(--wp--preset--font-size--klein);
}

/* ==================================================================
   RUECKFALL FUER wc-simple-csv VOR 1.4.0

   Hier stehen die Regeln, die bis Theme 0.12.1 unbedingt galten. Sie sind
   nicht ueberfluessig geworden, sondern nur fuer neue Plugin-Fassungen: Ab
   1.4.0 liest das Plugin die `--wcsc-*`-Variablen selbst, davor braucht es
   die Kompensation.

   Die Klasse setzt `inc/gastro-bestellung.php` per `body_class`, wenn
   `WCSC_VERSION` kleiner als 1.4.0 ist. In den vier mor3-Shops laeuft
   1.3.0, und `sync-theme.sh` liefert das Theme ALLEIN aus - ohne diesen
   Abschnitt stuenden dort die Pflichtfelder wieder weiss auf weiss.

   Die Selektoren sind so lang wie frueher: Das aeltere Plugin gibt sein CSS
   inline im Kopf aus, also NACH dem Theme-Stylesheet, und gewinnt jeden
   Gleichstand. `.single-product` bringt 0,4,0 gegen 0,3,0.
   ================================================================== */

.wcsc-vor-1-4 .wcsc-addon-option .wcsc-addon-button {
	background: var(--wp--preset--color--grund);
	color: var(--wp--preset--color--text);
	border-color: var(--wp--preset--color--linie-stark);
	border-radius: var(--wp--custom--radius--knopf);
}

.wcsc-vor-1-4 .wcsc-addon-option:hover .wcsc-addon-button {
	border-color: var(--wp--preset--color--akzent);
}

.wcsc-vor-1-4.single-product .wcsc-addon-option.active .wcsc-addon-button,
.wcsc-vor-1-4.single-product .wcsc-addon-option input:checked + .wcsc-addon-button {
	background: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent-kontrast);
	border-color: var(--wp--preset--color--akzent);
}

/* Das Plugin faerbt den Aufpreis vor 1.4.0 mit `color:#fff !important` -
   dagegen hilft nur ein eigenes. Weiss auf dem hellen Marken-Akzent waere
   in den hellen Varianten unlesbar. */
.wcsc-vor-1-4.single-product .wcsc-addon-option.active .wcsc-addon-button .wcsc-extra-plus,
.wcsc-vor-1-4.single-product .wcsc-addon-option input:checked + .wcsc-addon-button .wcsc-extra-plus,
.wcsc-vor-1-4.single-product .wcsc-addon-option.active .wcsc-addon-button .wcsc-extra-plus *,
.wcsc-vor-1-4.single-product .wcsc-addon-option input:checked + .wcsc-addon-button .wcsc-extra-plus * {
	color: var(--wp--preset--color--akzent-kontrast) !important;
}

.wcsc-vor-1-4 .wcsc-addon-notice {
	color: var(--wp--preset--color--text-leise);
}

/* ==================================================================
   "BITTE OHNE" - ZUTATEN ABWAEHLEN (Issue #87)

   Steht zwischen der Groessenwahl und den Zusatzprodukten, wie in der
   Referenz. Die Form ist die der Optionsknoepfe daneben: Pillen, die sich
   beim Anklicken fuellen - damit die drei Auswahlarten eines Gerichts
   (Groesse, Weglassen, Dazu) nicht drei verschiedene Bedienlogiken haben.

   Der Kasten selbst wird verborgen und nicht durch einen Knopf ersetzt:
   Er traegt Zustand und Tastaturbedienung, und `:checked` an der Huelle
   genuegt fuer die Gestaltung. Dieselbe Entscheidung wie beim
   Varianten-Auswahlfeld weiter oben.
   ================================================================== */

.bitte-ohne {
	/*
	 * DERSELBE ABSTAND WIE JEDE ANDERE GRUPPE - vorher war er der einzige
	 * Ausreisser.
	 *
	 * Hier stand `var(--wp--preset--spacing--20) 0`, also 16 px oben UND unten.
	 * Die Nachbarn tragen ihren Abstand nur oben, und Raender kollabieren in
	 * einem Grid-Container nicht: Zwischen "Bitte ohne" und "Getränk dazu?"
	 * standen dadurch 16 + 20 = 36 px, waehrend die uebrigen Fugen 20 hatten.
	 * Gemessen am 14.09.2026 - die Folge der Reihe war 0 / 28 / 16 / 44 / 28,
	 * fuenf Fugen und vier verschiedene Werte.
	 */
	margin: var(--wp--custom--optionen--abstand, 20px) 0 0;
	/*
	 * UEBER DIE GANZE BREITE - derselbe Fall wie bei den Plugin-Gruppen
	 * (`.wcsc-addons-wrapper` weiter oben).
	 *
	 * Der Block steht im selben Flex-Container wie Menge und Kaufknopf und
	 * bekam dort nur seinen Anteil: **150 von 278 px**, gemessen am
	 * 14.09.2026. Mit der Chip-Reihe fiel das nicht auf (Chips brechen um), in
	 * der Segmentleiste ergab es EINE Spalte und fuenf Zeilen - der Block
	 * wuchs von 212 auf 308 px, obwohl die Namen kuerzer geworden waren.
	 */
	grid-column: 1 / -1;
	flex-basis: 100%;
	width: 0;
	min-width: 100%;
	max-width: 100%;
}

.bitte-ohne__kopf {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	color: var(--wp--preset--color--text-leise);
}

/*
 * DIESELBE SEGMENTLEISTE WIE SPEISEGRUPPE UND SOSSE (Variante C, 0.29.0).
 *
 * Bis 0.28.2 waren das runde Chips in einer umbrechenden Reihe - der VIERTE
 * Bedienstil im selben Formular, und mit 161 bis 208 px der zweitgroesste
 * Block. Kahramans Vorgabe war "alles in einem Designstyle"; die Zutatenwahl
 * ist dieselbe Art Entscheidung wie die Sosse und sieht jetzt auch so aus.
 */
/*
 * DAS RASTER STEHT NICHT MEHR HIER, sondern in der gemeinsamen Regel bei
 * `.wahlkarten-aktiv .wahlkarten` weiter oben - Speisegruppe, Sosse und
 * "Bitte ohne" teilen sich seit 0.30.0 ein Mass.
 *
 * Bis 0.29.9 fuehrte dieser Block eine EIGENE Mindestbreite (7,5rem gegen
 * 5,5rem oben). Genau das hat Kahraman im Bild vom 14.09.2026 gesehen: Die
 * Zutaten-Kaestchen waren breiter als die Sossen daneben. Wer hier wieder ein
 * `grid-template-columns` einsetzt, stellt den Unterschied wieder her.
 */

.bitte-ohne__wahl {
	/*
	 * `border-box` IST DER UNTERSCHIED ZWISCHEN 44 UND 55 PIXELN. Ohne diese
	 * Zeile zaehlte `height: 100%` nur den Inhalt, und Polsterung (9 px) und
	 * Rahmen (2 px) kamen obendrauf: Die Zutaten-Swatches standen 55 px hoch in
	 * einer 44-px-Zeile und ragten in die naechste. Die anderen Swatches haben
	 * das aus der gemeinsamen Regel weiter oben, dieser hier stand nicht darin.
	 * Gemessen am 14.09.2026.
	 */
	box-sizing: border-box;
	/*
	 * `position: relative` ist Pflicht, nicht Zierde: Der Kasten darunter ist
	 * absolut positioniert und suchte sich sonst den naechsten positionierten
	 * Vorfahren. Genau das passierte am 11.09. bei `.zusatzkarte` - die
	 * versteckten Felder landeten ausserhalb ihres Containers und machten die
	 * Seite auf einem 390-px-Geraet 839 px breit.
	 */
	position: relative;
	gap: 0.3em;
	padding: 0.35em 0.3em;
	/*
	 * `block` STATT `flex` - der einzige Weg, einen langen Namen SICHTBAR zu
	 * kuerzen statt ihn stumm abzuschneiden.
	 *
	 * `-webkit-line-clamp` braucht `display: -webkit-box` am Textelement. In
	 * einem Flex-Container wird jeder Eintrag blockifiziert, `-webkit-box` wird
	 * zu `flow-root`, und die Begrenzung ist wirkungslos - am 14.09.2026
	 * gemessen, nachdem die Regel eine Weile wirkungslos danebenstand.
	 *
	 * `align-content: center` zentriert die Zeilen im Blockcontainer senkrecht
	 * (Chrome 123, Safari 17.6, Firefox 125 - alle 2024). Wo es fehlt, sitzt
	 * der Name oben statt mittig: ein Schoenheitsfehler, kein Defekt.
	 */
	display: block;
	align-content: center;
	/*
	 * `margin: 0` ausdruecklich: Die Kaestchen erben sonst 9,8 px unten aus der
	 * Absatz-Grundregel des Themes - im Raster ergaebe das eine Reihe, die
	 * tiefer sitzt als ihre Nachbarn.
	 */
	margin: 0;
	/* Rahmen und Radius stehen in der gemeinsamen Swatch-Regel weiter oben. */
	height: 100%;
	background: var(--wp--preset--color--grund);
	/* Dieselbe Stellschraube wie bei Speisegruppe und Sosse - ein Swatch, eine
	   Schriftgroesse. */
	font-size: var(--wp--custom--swatch--schrift, 0.75rem);
	line-height: 1.2;
	text-align: center;
	hyphens: manual;
	cursor: pointer;
	/* Die Auswahl faerbt, nicht die Schrift - sonst wandert die Zeilenbreite
	   beim Anklicken und die Reihe springt um. */
	transition: border-color 0.15s, background-color 0.15s;
}

.bitte-ohne__wahl input {
	/* Verborgen, aber bedienbar: Tab und Leertaste greifen weiter, und
	   `:focus-visible` unten zeigt, wo man steht. Ein `display: none` haette
	   beides genommen. */
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.bitte-ohne__wahl:hover {
	border-color: var(--wp--preset--color--text-leise);
}

.bitte-ohne__wahl:has(input:checked) {
	border-color: var(--wp--preset--color--akzent);
	background: var(--wp--preset--color--akzent);
	/* `akzent-kontrast` ist der Slug, den theme.json und alle vier Varianten
	   fuehren. Hier stand eine Weile `auf-akzent` - den gibt es nirgends, also
	   griff immer der Rueckfall auf Weiss. In "dunkel" (helles Mint) und
	   "burger-dunkel" (Orange) waere die durchgestrichene Zutat damit kaum
	   lesbar gewesen. */
	color: var(--wp--preset--color--akzent-kontrast);
}

/*
 * ZWEI ZEILEN, DANN AUSLASSUNGSPUNKTE.
 *
 * Erhebung am 14.09.2026 ueber alle 24 Produkte mit Bestellblock: genau EIN
 * Name braucht mehr als zwei Zeilen - "Iskender-Tomatensauce". Mit fester
 * Zeilenhoehe und `overflow: hidden` stand er als "Iskender-/Tomatensauc/e"
 * da, die dritte Zeile weggeschnitten, ohne dass man es dem Swatch ansieht.
 *
 * Jetzt endet er sichtbar mit "…" - und der volle Wortlaut steht im
 * `title`-Attribut (`gastro-bestellung.php`), fuer Maus und Vorlesewerkzeug.
 * Ein gekuerzter Name, den man als gekuerzt erkennt, ist kein Fehler; ein
 * abgeschnittener ist einer.
 */
.bitte-ohne__wahl > span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * Durchgestrichen, sobald es weggelassen wird - das Zeichen sagt dasselbe
 * wie der Block: Diese Zutat kommt NICHT drauf. Ohne das ist eine gefuellte
 * Pille zweideutig; sie koennte genauso "extra" heissen.
 */
.bitte-ohne__wahl:has(input:checked) span {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* `:focus-visible` am Kasten, nicht `:focus-within` an der Pille: Das Label
   fokussiert beim Mausklick die verborgene Checkbox, und mit `:focus-within`
   bliebe nach jedem Klick ein Rahmen stehen. Dieselbe Entscheidung wie bei
   `.zusatzkarte` weiter oben. */
.bitte-ohne__wahl:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--akzent);
	outline-offset: 2px;
}

/* ==================================================================
   LIEFERGEBIET: "Liefern wir zu dir?" (Issue #87 / Betriebsfaehigkeit)

   Steht ueber dem Warenkorb, weil die Frage dorthin gehoert - vor die
   Kasse, nicht hinein. Wer erst beim Bezahlen erfaehrt, dass nicht
   geliefert wird, hat umsonst gewaehlt.

   Die Antwort faerbt nicht rot: "Wir liefern dorthin nicht" ist keine
   Stoerung, sondern eine Auskunft - und die Abholung bleibt ja.
   ================================================================== */

.liefercheck {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--wp--custom--radius--karte);
	background: var(--wp--preset--color--flaeche, transparent);
}

/*
 * DER "PRUEFEN"-KNOPF WAR 55 x 21 px - und das ist unser eigener, nicht der von
 * WooCommerce. Gefunden am 15.09.2026 vom neuen `breiten-abnahme.js`, nachdem
 * die fuenf fremden Stellen behoben waren; er blieb als einziger uebrig.
 *
 * `knopf.hoehe` ist die Stellschraube des Themes (2,5rem = 40 px) - sie stand
 * hier nur nicht. Ein Knopf, der sich seine Hoehe aus dem Text holt, ist genau
 * so hoch wie das Wort darin.
 */
.liefercheck__form .button {
	min-height: var(--wp--custom--knopf--hoehe, 2.5rem);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.liefercheck__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.liefercheck__label {
	font-weight: 600;
	margin-right: 0.25rem;
}

.liefercheck__form input {
	/* Fuenf Ziffern brauchen keine halbe Zeile. `width` statt `max-width`,
	   damit das Feld auch im Flex-Kontext nicht auf die Inhaltsbreite
	   zusammenfaellt. */
	width: 7rem;
	font-variant-numeric: tabular-nums;
}

.liefercheck__antwort {
	margin: 0.6rem 0 0;
	font-size: var(--wp--preset--font-size--klein);
}

.liefercheck__antwort--ja {
	color: var(--wp--preset--color--akzent);
	font-weight: 600;
}

.liefercheck__antwort--nein,
.liefercheck__ausserhalb {
	color: var(--wp--preset--color--text-leise);
}

@media (max-width: 600px) {
	.liefercheck__label {
		/* Auf schmalen Geraeten ueber das Feld, nicht daneben: Nebeneinander
		   blieben dem Feld rund 90 px, und die Schaltflaeche rutschte in eine
		   dritte Zeile. */
		flex: 1 0 100%;
		margin-right: 0;
	}
}

/* ==================================================================
   GEKUERZTE EXTRA-GRUPPEN (Theme 0.18.0, gastromarketing#87 Punkt 3)

   Ab acht Eintraegen bricht eine Extra-Gruppe um, statt seitwaerts zu
   scrollen: Gemessen am 13.09.2026 waren von vierzehn Eintraegen bei
   1440 px nur DREI sichtbar, bei 390 px zwei - der Rest hinter fuenf bis
   sieben Blaetterschritten. Sechs stehen jetzt offen, der Rest liegt einen
   Klick tief.

   DIE SPEZIFITAET IST ABSICHT. Die Karussell-Regel weiter oben lautet
   `.reihe-bedienbar .wcsc-addon-options` (0,2,0) und steht VOR dieser hier.
   Bei Gleichstand gewaenne die spaetere - aber nur, solange niemand die
   Reihenfolge in dieser Datei aendert. Mit der zweiten Klasse (0,3,0)
   gewinnt diese Regel unabhaengig von ihrer Position. Genau die Falle,
   die am 11.09. dreimal zugeschnappt ist: zwei Regeln, ein Selektor.
   ================================================================== */
.reihe-bedienbar .single-product .wcsc-addon-options.wcsc-addon-options--raster,
.reihe-bedienbar .wcsc-addon-options.wcsc-addon-options--raster,
.wcsc-addon-options--raster {
	display: flex;
	flex-wrap: wrap;
	/*
	 * 0,4rem statt 0,6: Seit die Kopfspalte 96 px nimmt, bleiben der Reihe
	 * 377 px. Drei Karten a 120 px brauchen mit 9,6er Abstand 379,2 - **zwei
	 * Pixel zu viel**, und das Raster fiel auf ZWEI Karten je Zeile zurueck,
	 * die sich dann auf je 184 px dehnten. Gemessen am 14.09.2026 an der
	 * Buehne mit 28 Extras: sechs Karten in drei Reihen statt in zweien.
	 *
	 * Mit 6,4 px passen 372,8 - und es ist derselbe Abstand wie zwischen den
	 * Swatches darueber.
	 */
	gap: var(--wp--custom--swatch--abstand, 0.4rem);
	width: auto;
	min-width: 0;
	max-width: 100%;
	overflow-x: visible;
	padding-bottom: 0;
}

/* Der Eintrag darf im Raster mitwachsen: Bei drei Karten je Zeile bleibt
   sonst rechts ein Rest stehen, waehrend die Karten schmal sind. */
.single-product .wcsc-addon-options--raster .wcsc-addon-option {
	flex: 1 1 var(--wp--custom--swatch--karte, 7.5rem);
	max-width: 100%;
}

/*
 * DER KNOPF MUSS MITWACHSEN, SONST WANDERT DIE LUECKE NACH INNEN.
 *
 * Gemessen am 13.09.2026: Die Karte (`label`) war 132 px breit, der sichtbare
 * Knopf blieb bei 120 px - `.single-product .wcsc-addon-options
 * .wcsc-addon-button` weiter oben setzt `flex: 0 0 7.5rem` UND `width`. Der
 * uebrige Streifen verschwindet dadurch nicht, er liegt nur INNERHALB des
 * Labels: zwoelf Pixel neben jeder Karte, die aussehen wie Zwischenraum und
 * beim Klick das Extra anhaken. Bei drei Karten je Zeile sind das 36 px
 * unsichtbare Schaltflaeche.
 *
 * Die Abnahme konnte das nicht sehen - sie misst Ueberlauf und Sichtbarkeit,
 * nicht, wo ein Klick landet.
 *
 * Spezifitaet: Die Regel weiter oben ist (0,3,0), diese ebenfalls - und sie
 * steht spaeter. Damit sie das nicht nur zufaellig tut, traegt sie die
 * Raster-Klasse ZUSAETZLICH zur Optionsklasse (0,4,0).
 */
.single-product .wcsc-addon-options.wcsc-addon-options--raster .wcsc-addon-button {
	flex: 1 1 auto;
	width: 100%;
	/*
	 * `border-box` IST DER WIRKSAME TEIL. `width: 100%` allein meint bei
	 * `content-box` die INHALTSflaeche - Polsterung und Rahmen kommen obendrauf.
	 * Gemessen am 14.09.2026: Karte 121 px, Knopf **135** - vierzehn Pixel
	 * Klickflaeche ausserhalb der Karte, und `extra-gruppen-abnahme.js` meldete
	 * "13px Ueberlauf" am Raster.
	 *
	 * Solange die Karten 184 px breit waren, fiel es nicht auf: Der Knopf war
	 * dann 198 und lag immer noch innerhalb der Reihe. Erst mit der Kopfspalte
	 * und drei Karten je Zeile wurde daraus ein Ueberlauf. Dieselbe Falle wie
	 * bei `.bitte-ohne__wahl` - dort waren es 44 gegen 55 px.
	 */
	box-sizing: border-box;
}

.extra-gruppe__rest {
	margin-top: 0.6rem;
}

.extra-gruppe__mehr {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--wp--preset--color--linie-stark);
	border-radius: var(--wp--custom--radius--knopf);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--klein);
	cursor: pointer;
	list-style: none;
}

/* Safari zeigt sonst zusaetzlich sein eigenes Dreieck. */
.extra-gruppe__mehr::-webkit-details-marker {
	display: none;
}

/* Das Zeichen gehoert zum Zustand, nicht zum Text: Zugeklappt zeigt es nach
   unten ("da kommt noch was"), aufgeklappt nach oben. */
.extra-gruppe__mehr::after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
}

.extra-gruppe__rest[open] > .extra-gruppe__mehr::after {
	transform: translateY(0.1em) rotate(-135deg);
}

.extra-gruppe__mehr:hover,
.extra-gruppe__mehr:focus-visible {
	border-color: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent);
}

.extra-gruppe__rest > .wcsc-addon-options--raster {
	margin-top: 0.6rem;
}

/*
 * SILBENTRENNUNG STATT HARTER SCHNITT IN DEN OPTIONSKNOEPFEN.
 *
 * Gemessen am 13.09.2026: "Hähnchenbrust" braucht bei 14 px rund 97 px, der
 * Knopf ist 120 px breit - es passt, bis der Innenabstand dazukommt. Mit dem
 * geerbten `word-break: break-word` stand dort "Hähnchenbru / st", daneben
 * "Champignon / s" und "Cherrytomat / en": abgeschnittene Woerter ohne
 * Trennstrich, die man erst beim zweiten Hinsehen wiedererkennt.
 *
 * `hyphens: auto` schafft echte Trennstellen ("Hähn-chen-brust"), und das
 * Dokument traegt `lang="de"`, also trennt der Browser nach deutschen Regeln.
 * `word-break: normal` muss dazu: Sonst schneidet die geerbte Regel weiter
 * mitten im Wort, bevor die Trennung ueberhaupt zum Zug kommt. Der harte
 * Umbruch bleibt als letzter Ausweg fuer Woerter ohne jede Trennstelle.
 *
 * Das betrifft alle Optionsknoepfe, nicht nur die gekuerzten Gruppen - in der
 * blaetternden Reihe stand derselbe Schnitt, nur seltener im Blick.
 */
.wcsc-addon-button {
	word-break: normal;
	overflow-wrap: break-word;
	/* Safari und iOS unter 17 kennen nur die praefigierte Schreibweise. Ohne
	   sie bliebe dort genau der Schnitt mitten im Wort, gegen den diese Regel
	   gebaut ist - und zwar lautlos, denn die Abnahme laeuft in Chromium und
	   prueft `getComputedStyle().hyphens`. */
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* ==================================================================
   DIE BELIEBTE ZUSAMMENSTELLUNG (Theme 0.19.0, gastromarketing#87 Punkt 2)

   Ein Knopf ueber den Gruppen, der genau die gepflegten Kaestchen setzt -
   kein zweiter Satz Kaestchen wie bei der Referenz. Deshalb sieht er aus
   wie ein Vorschlag, nicht wie eine Auswahl: Er soll neben den Wahlkarten
   nicht um Aufmerksamkeit ringen, sondern einen Klick anbieten.
   ================================================================== */
.beliebt {
	grid-column: 1 / -1;
	flex-basis: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.7rem;
	margin-bottom: 0.9rem;
}

/*
 * DIESELBE FALLE WIE BEI `.gesamtpreis` WEITER OBEN, und sie steht dort seit
 * Wochen mit derselben Begruendung: Das `display: flex` der Klassenregel ist
 * spezifischer als das `display: none`, das der Browser einem
 * [hidden]-Element gibt. `bestellung.js` versteckt den Vorschlag, wenn er
 * weniger als zwei markierte Kaestchen findet - und bindet dann auch keinen
 * Klick. Ohne diese Zeile bliebe genau der Knopf stehen, den die Regel im
 * Skript beseitigen will: sichtbar, und ohne jede Wirkung.
 */
.beliebt[hidden] {
	display: none;
}

.beliebt__knopf {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--wp--preset--color--akzent);
	border-radius: var(--wp--custom--radius--knopf);
	background: transparent;
	color: var(--wp--preset--color--akzent);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	cursor: pointer;
}

.beliebt__knopf:hover,
.beliebt__knopf:focus-visible {
	background: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent-kontrast);
}

/* Im gedrueckten Zustand traegt der Knopf die Markenfarbe - dieselbe
   Sprache wie eine ausgewaehlte Wahlkarte, damit "uebernommen" ohne
   Lesen erkennbar ist. */
.beliebt--an .beliebt__knopf {
	background: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent-kontrast);
}

.beliebt__liste {
	color: var(--wp--preset--color--text-leise);
	font-size: var(--wp--preset--font-size--klein);
}

/* Die Kaestchen der Zusammenstellung bekommen KEINE eigene Auszeichnung.
   Sie sehen aus wie alle anderen - und genau das ist der Punkt: Nach dem
   Druck sind sie angehakt wie von Hand gesetzt, und wer eines wieder
   loest, hat einfach eines weniger. Ein Sonderzustand waere eine zweite
   Wahrheit neben dem Haken. */

/* ==================================================================
   "MEHR ANZEIGEN" STATT SEITENZAHLEN (Theme 0.20.0)

   Der Knopf steht allein unter der Liste und traegt die Markenfarbe -
   er ist der einzige Weg weiter, anders als eine Zahlenreihe, bei der
   die Wahl beim Gast liegt. Darunter der Stand ("24 von 53"), damit
   sichtbar bleibt, wie weit die Liste noch reicht.
   ================================================================== */
.mehr-laden {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	margin: 2rem 0 1rem;
}

.mehr-laden__knopf {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.75rem;
	border: 1px solid var(--wp--preset--color--akzent);
	border-radius: var(--wp--custom--radius--knopf);
	background: transparent;
	color: var(--wp--preset--color--akzent);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.mehr-laden__knopf:hover,
.mehr-laden__knopf:focus-visible {
	background: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent-kontrast);
}

/* Waehrend des Nachladens: sichtbar beschaeftigt, aber nicht verschwunden -
   ein Knopf, der wegspringt, laesst den Daumen ins Leere tippen. */
.mehr-laden--laeuft .mehr-laden__knopf {
	opacity: 0.6;
	pointer-events: none;
}

.mehr-laden__stand {
	margin: 0;
	color: var(--wp--preset--color--text-leise);
	font-size: var(--wp--preset--font-size--klein);
	font-variant-numeric: tabular-nums;
}

/* ==================================================================
   PFAND — GETRENNT AUSGEWIESEN (Theme 0.20.0, Plugin 1.7.0)

   § 7 PAngV verlangt, dass ein Pfandbetrag NEBEN dem Gesamtpreis steht
   und nicht in ihn eingerechnet wird. Deshalb ist er hier bewusst
   leiser gesetzt als der Preis, aber nicht versteckt: Er soll als
   Zusatz erkennbar sein, ohne mit dem Preis um die Aufmerksamkeit zu
   ringen.
   ================================================================== */
.wcsc-pfand {
	color: var(--wp--preset--color--text-leise);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 400;
}

.single-product .wcsc-pfand {
	margin: -0.4rem 0 0.8rem;
}

/* In der Liste steht er direkt hinter dem Preis - dort entscheidet sich
   der Vergleich.

   HIER STAND AUCH: "eine eigene Zeile wuerde die Karten ungleich hoch
   machen". Das hat sich am 16.09.2026 als Irrtum erwiesen: Genau das
   `nowrap` machte die Karten ungleich hoch, weil der Hinweis die
   Gridspalte auf 235 px trieb und dem Titel 51 px liess (#143). In der
   Listenansicht ist der Umbruch deshalb erlaubt - die Regel dafuer steht
   im Listen-Abschnitt weiter oben. */
.wcsc-pfand--klein {
	display: inline;
	white-space: nowrap;
}

/* ==================================================================
   ALLERGEN-KUERZEL UND LEGENDE (Theme 0.24.0)

   § 4 Abs. 2 und 5 LMIDV verlangt bei nicht vorverpackten Lebensmitteln
   im Fernabsatz die Angabe der Allergene, "deutlich sichtbar, klar und
   gut lesbar". Kuerzel mit Legende sind eine zulaessige Form - deshalb
   ist das Zeichen hier NICHT leise gesetzt wie ein Beiwerk, sondern
   als eigene Marke erkennbar.
   ================================================================== */
.kaatai-allergen {
	margin-left: 0.4em;
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-leise);
	white-space: nowrap;
	/* Kein `vertical-align: super`: Hochgestellt wird das Zeichen kleiner
	   als 12 px, und "gut lesbar" ist eine Anforderung, keine Geschmacksfrage. */
}

/* VIER LAGEN, VIER ZEICHEN - und drei davon sind keine Angabe, sondern ein
   Hinweis. Sie tragen deshalb mehr Gewicht als ein Buchstabe und den
   Hilfe-Zeiger, damit der Titel-Text sie erklaert.

   Dass die freie Lage ueberhaupt ein Zeichen hat, ist der Punkt: Eine
   Leerstelle neben Karten mit Buchstaben liest sich wie "enthaelt keine" -
   die Aussage, die nur dastehen darf, wo sie gepflegt ist. */
.kaatai-allergen--offen,
.kaatai-allergen--unbekannt {
	color: var(--wp--preset--color--signal, var(--wp--preset--color--text-leise));
	font-weight: 700;
	cursor: help;
}

/* Der Strich bleibt leise: Er sagt "hier steht nichts an", nicht "Achtung". */
.kaatai-allergen--frei {
	cursor: help;
}

/* Das Kuerzel in Reiter und Legende: quadratischer Traeger, damit die
   Spalte der Buchstaben unabhaengig von der Zeichenbreite ausgerichtet
   bleibt. Dieselbe Ueberlegung wie beim Abzeichen - ein Traeger statt
   nur Farbe. */
.kaatai-allergen__kuerzel {
	display: inline-block;
	min-width: 1.6em;
	margin-right: 0.6em;
	padding: 0.05em 0.3em;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 0.2em;
	font-size: 0.85em;
	font-weight: 600;
	text-align: center;
	color: var(--wp--preset--color--text);
}

.allergen-legende {
	margin: var(--wp--preset--spacing--30, 1.5rem) 0 0;
	font-size: var(--wp--preset--font-size--klein);
}

.allergen-legende > summary {
	cursor: pointer;
	color: var(--wp--preset--color--text-leise);
}

/* Aufgeklappt zweispaltig, wo Platz ist: 14 Zeilen untereinander schieben
   den Seitenfuss weit nach unten. */
.allergen-legende .kaatai-allergene {
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 2rem;
}

@media (max-width: 782px) {
	.allergen-legende .kaatai-allergene {
		columns: 1;
	}
}

/* ==================================================================
   ZUSATZSTOFF-ZIFFERN (Theme 0.25.0)

   Die LMZDV verlangt die Angabe "in gleicher Art und Weise und ueber
   das identische Medium" wie die Allergene. Deshalb erbt die Ziffer
   das Aussehen des Buchstabens - sie steht nur hinter ihm.
   ================================================================== */
.kaatai-zusatz {
	margin-left: 0.35em;
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-leise);
	white-space: nowrap;
}

/* Die beiden Hinweis-Lagen tragen mehr Gewicht als eine Ziffer - sie sind
   keine Angabe, sondern der Hinweis, dass eine fehlt. */
/* Nur `--unbekannt`: Ein `--offen` gibt es nicht mehr, seit ungepflegte Karten
   gar kein Zeichen tragen (Begruendung bei kaatai_shop_zusatzstoff_marke()). */
.kaatai-zusatz--unbekannt {
	color: var(--wp--preset--color--signal, var(--wp--preset--color--text-leise));
	font-weight: 700;
	cursor: help;
}

/* ==================================================================
   GRUNDPREIS JE LITER (Theme 0.23.0, Plugin 1.8.0)

   § 4 Abs. 1 PAngV verlangt bei Fertigpackungen nach Volumen oder
   Gewicht den Grundpreis NEBEN dem Gesamtpreis, "unmissverstaendlich,
   klar erkennbar und gut lesbar". Dieselbe Setzung wie beim Pfand:
   leiser als der Preis, aber im selben Grad wie der uebrige Beitext -
   die Angabe ist Pflicht, nicht Kleingedrucktes.
   ================================================================== */
.wcsc-grundpreis {
	color: var(--wp--preset--color--text-leise);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 400;
}

.single-product .wcsc-grundpreis {
	margin: -0.4rem 0 0.8rem;
}

/*
 * In der Karte hinter dem Preis, hinter dem Pfand. Beide tragen
 * `white-space: nowrap`, damit kein Umbruch mitten in "7,58 EUR/l"
 * entsteht - auf 390 px steht dann eher die ganze Angabe in der
 * naechsten Zeile als ein Rest davon.
 *
 * IN DER LISTENANSICHT IST DAS SEIT #143 AUFGEHOBEN: Dort trieb `nowrap`
 * die Gridspalte auf ihre `max-content`-Breite und quetschte den Titel auf
 * 51 von 334 px. Die Kurzform ohne Leerzeichen ("7,58 €/l") bricht ohnehin
 * nicht; bei der Variante mit Vorsatz ("ab 7,58 €/l") kann ein einzelnes
 * "ab" am Zeilenende stehen bleiben - das ist der Preis dafuer, dass der
 * Name des Gerichts lesbar bleibt.
 */
.wcsc-grundpreis--klein {
	display: inline;
	white-space: nowrap;
}

/*
 * WARUM HIER KEINE HOEHE RESERVIERT WIRD.
 *
 * Preis, Pfand und Grundpreis passen im Raster bei 1440 px nicht in eine Zeile;
 * die dritte Angabe bricht um, und die Getraenkekarte wird 13 px hoeher als ihre
 * Nachbarn (454 gegen 441 px Inhalt, gemessen 13.09.2026). Zwei Versuche, das
 * hier zu loesen, sind gescheitert und wieder herausgenommen: eine `min-height`
 * am Preis-Block reservierte 5 px bei ALLEN 53 Karten, ohne den Umbruch zu
 * verhindern, und die Kurzform in der Karte ("7,58 EUR/l") reichte allein nicht.
 *
 * Die Karten sind im Raster schon OHNE diese Angabe 21 px ungleich hoch - das
 * kommt von zweizeiligen Titeln, nicht von den Preiszusaetzen. Wer die Reihe
 * gleich hoch haben will, muss das Raster angehen (`align-items`, Preis am
 * Kartenfuss verankert); das behebt beide Ursachen und ist eine
 * Gestaltungsentscheidung, keine Pflichtangabe. Als Befund notiert, statt sie
 * hier mit einem Wert zu ueberdecken, der nur an dieser Schriftgroesse stimmt.
 */

/* ==================================================================
   VORBESTELLEN — HINWEIS UND ZEITWAHL (Theme 0.21.0)

   Der Hinweis steht ueber dem Katalog, nicht auf der Kasse: Dort ist
   die Auswahl selbst zu sehen, und ein Hinweis auf etwas, das
   danebensteht, ist Laerm. Er ist eine Zeile hoch und traegt keine
   Farbe ausser der Linie - er soll informieren, nicht werben.
   ================================================================== */
.vorbestellung {
	padding: 0.5rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--linie);
	background: var(--wp--preset--color--grund-leicht, var(--wp--preset--color--grund));
	text-align: center;
}

.vorbestellung__text {
	margin: 0;
	color: var(--wp--preset--color--text-leise);
	font-size: var(--wp--preset--font-size--klein);
}

/*
 * Der Hinweis fuer Besucher ohne JavaScript (gastromarketing#120).
 *
 * Er steht in einem <noscript> und ist damit fuer jeden anderen Besucher gar
 * nicht im Dokument. Deutlicher als das Vorbestell-Band darueber: Es ist kein
 * Beiwerk, sondern der Grund, warum die Speisekarte fehlt - deshalb die volle
 * Textfarbe statt der leisen.
 */
.js-hinweis {
	padding: 0.7rem 1rem;
	border-bottom: 2px solid var(--wp--preset--color--akzent);
	background: var(--wp--preset--color--flaeche);
	text-align: center;
}

.js-hinweis p {
	margin: 0;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--klein);
}

/* Die beiden Auswahlfelder an der Kasse nebeneinander, solange Platz ist -
   Wunschtag und Wunschzeit gehoeren zusammen und werden zusammen gelesen. */
.wc-block-checkout__additional-fields .wc-block-components-select:has(select[id*="wunschtag" i]),
.wc-block-checkout__additional-fields .wc-block-components-select:has(select[id*="wunschzeit" i]) {
	display: inline-block;
	width: calc(50% - 0.5rem);
	vertical-align: top;
}

@media (max-width: 600px) {
	.wc-block-checkout__additional-fields .wc-block-components-select:has(select[id*="wunschtag" i]),
	.wc-block-checkout__additional-fields .wc-block-components-select:has(select[id*="wunschzeit" i]) {
		width: 100%;
	}
}

/* ------------------------------------------------------------------
   Schärfe-Abzeichen (Theme 0.28.0)

   Drei Stufen, drei Dreiecke - kein Emoji: Emoji sehen je nach Gerät anders
   aus, fehlen in manchen Schriften und werden von Vorlesehilfen verschieden
   benannt. Der Klartext steht im `title` und für die Vorlesehilfe im
   `screen-reader-text`, das Zeichen ist `aria-hidden`.

   Die Farbe kommt aus der Rolle "akzent", nicht aus einem festen Rot: Eine
   Stil-Variante mit rotem Grund hätte sonst ein unsichtbares Abzeichen.
   ------------------------------------------------------------------ */
.kaatai-schaerfe {
	display: inline-flex;
	align-items: center;
	margin-left: 0.35em;
	vertical-align: baseline;
}

.kaatai-schaerfe__zeichen {
	font-size: 0.7em;
	letter-spacing: -0.08em;
	color: var(--wp--preset--color--akzent);
	/* Die Dreiecke stehen dicht beieinander; ohne diese Zeile sitzt das
	   Abzeichen bei drei Stufen sichtbar tiefer als der Titel daneben. */
	line-height: 1;
}

/* ==================================================================
   DIE BESCHRIFTUNG STEHT LINKS, NICHT DARUEBER (Theme 0.31.0)

   Kahraman am 14.09.2026 zum Rastergitter: „das ist noch ein vierter
   Bereich, im Moment rechts aussen, kannst du den nicht nach vorne
   bringen? … einfach vorne vor die Reihen noch was jetzt ueber den
   Bereichen steht".

   Jede Gruppe im Bestellblock hat genau ZWEI Kinder - eine Beschriftung
   und eine Reihe. Bis 0.30.0 standen sie uebereinander, und jede
   Beschriftung kostete eine eigene Zeile:

     p.wcsc-addon-notice   19 px
     p.bitte-ohne__kopf    20 px
     span.zusatz__titel    23 px  (zweimal)
     ------------------------------
                           85 px

   Nebeneinander kosten sie NICHTS: Die Kopfspalte liegt in dem Streifen,
   der rechts neben den Swatches ohnehin frei blieb.

   UND DIE NAMEN KOMMEN ZURUECK. „Speisegruppe" und „Sosse" waren seit dem
   11.09.2026 verborgen (nur fuer Vorlesewerkzeuge) - damals Kahramans
   Ansage „schreib ueber alle drei einfach 'Bitte auswaehlen'", weil jeder
   Name eine Zeile kostete. Der Grund ist weg, also ist auch die
   Verborgenheit weg.

   ERST AB 782 px. Auf einem 390-px-Geraet ist `form.cart` 278 px breit;
   eine 96-px-Spalte liesse 176 px fuer die Swatches - zwei statt drei je
   Zeile. Dort bleibt die Beschriftung, wo sie ist.
   ================================================================== */
@media (min-width: 782px) {
	/*
	 * KEIN AUSSENRAND MEHR AN DER REIHE - er stammt aus der Zeit, als die
	 * Beschriftung DARUEBER stand.
	 *
	 * `margin-top: 0.35rem` (5,6 px) hielt damals Abstand zur Zeile darueber.
	 * Neben einer Kopfspalte wird daraus ein Versatz: Gemessen am 14.09.2026
	 * sassen die Kaesten von Speisegruppe, Sosse und "Bitte ohne" **6 px
	 * hoeher** als die Kacheln daneben, waehrend die Zusatzreihen (ohne diesen
	 * Rand) genau fluchteten. Kahraman: "die Kacheln … sind einige Pixel zu
	 * hoch".
	 */
	.wahlkarten-aktiv .wahlkarten,
	.single-product .wcsc-addon-field .wcsc-addon-options,
	/*
	 * DIE RASTER-FASSUNG BRAUCHT IHREN EIGENEN SELEKTOR - sonst bleibt genau
	 * die groesste Gruppe versetzt.
	 *
	 * Ab neun Optionen haengt `bestellung.js` der Gruppe
	 * `wcsc-addon-options--raster` an, und die Basisregel trifft sie ueber
	 * einen Selektor mit FUENF Klassen. Ein `margin-top: 0` mit dreien verliert
	 * dagegen. Gemessen am 14.09.2026 an der Buehne mit zehn Sossen:
	 * "Sosse pflicht *" stand als einzige noch 6 px zu hoch, im Laborshop war
	 * nichts zu sehen - dort hat keine Pflichtgruppe neun Optionen.
	 */
	.reihe-bedienbar .single-product .wcsc-addon-field .wcsc-addon-options.wcsc-addon-options--raster,
	.single-product .bitte-ohne__reihe {
		/*
		 * OHNE `.single-product` DAVOR. Der erste Anlauf schrieb
		 * `.single-product .wahlkarten-aktiv .wahlkarten` - und das verlangt
		 * zwei verschachtelte Elemente. Beide Klassen sitzen aber am SELBEN
		 * Element (dem `<body>`), also matchte der Selektor nirgends: Die
		 * Speisegruppe blieb als einzige um 6 px versetzt, waehrend Sosse und
		 * "Bitte ohne" schon fluchteten.
		 */
		margin-top: 0;
	}

	.single-product .variations tr,
	.single-product .wcsc-addon-field,
	/*
	 * DIE EXTRAS GEHOEREN IN DIESELBE ORDNUNG - auch wenn ihre Karten anders
	 * aussehen duerfen.
	 *
	 * Ohne diese Zeile standen "Fleisch extras" und "Vegetarische extras" als
	 * einzige Bloecke ganz links an der Kante, waehrend alles darueber und
	 * darunter um die Kopfspalte eingerueckt war - gesehen an der Buehne
	 * "Prüfpizza mit 28 Extras" am 14.09.2026. Dazu kam, dass ihr Name
	 * ("Fleisch extras") verborgen blieb und die Reihe damit gar keine
	 * Beschriftung hatte.
	 *
	 * Ihre Bauart traegt es: `.wcsc-extra-field` hat genau zwei Kinder, Label
	 * und `.extra-gruppe` - dieselbe Form wie jede andere Gruppe. Die KARTEN
	 * darin bleiben unberuehrt (7,5rem mit Aufklapper); die Segmentform hat
	 * dort am 14.09.2026 drei Pruefpunkte gekostet.
	 */
	.single-product .wcsc-extra-field,
	.bitte-ohne,
	.zusatz {
		display: grid;
		grid-template-columns: var(--wp--custom--swatch--kopf, 6rem) minmax(0, 1fr);
		/*
		 * Nur waagerecht: Die Gruppen vergeben ihren senkrechten Abstand
		 * selbst (siehe `row-gap: 0` am Formular weiter oben).
		 */
		column-gap: var(--wp--custom--swatch--abstand, 0.4rem);
		align-items: start;
	}

	/*
	 * DIE BESCHRIFTUNG WIRD WIEDER SICHTBAR - und diese Regel muss in der
	 * Datei NACH der Versteck-Regel stehen, nicht davor.
	 *
	 * Dort steht `.single-product .variations th` (0,2,1) und
	 * `.wcsc-addon-field > .wcsc-addon-label` (0,2,0) mit `position: absolute`
	 * und `clip-path`. Bei gleicher Spezifitaet gewinnt die spaetere Regel -
	 * genau die Falle, die am 14.09.2026 schon `.wahlkarte:hover` still
	 * ausgeschaltet hat.
	 */
	.single-product .variations th.label,
	.single-product .wcsc-addon-field > .wcsc-addon-label,
	.single-product .wcsc-extra-field > .wcsc-addon-label {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}

	/*
	 * DIE POLSTERUNG NUR AN DER AEUSSEREN EBENE.
	 *
	 * WooCommerce rendert `<th class="label"><label>Größe</label></th>`. Stand
	 * `padding-top` an beiden, zaehlte es doppelt: 17,6 statt 8,8 px, und
	 * "Speisegruppe" sass neun Pixel tiefer als "Bitte ohne" und
	 * "Getränk dazu?" daneben. Genau die Grundlinie, um die es hier geht.
	 *
	 * `padding-top` statt `align-items: center`: Die Beschriftung sitzt auf der
	 * Hoehe der ERSTEN Swatch-Zeile, nicht in der Mitte der Gruppe - bei zwei
	 * Zeilen stuende sie sonst zwischen ihnen und gehoerte optisch zu keiner.
	 */
	.single-product .variations th.label,
	.single-product .wcsc-addon-field > .wcsc-addon-label,
	.single-product .wcsc-extra-field > .wcsc-addon-label,
	.bitte-ohne__kopf,
	.zusatz__titel {
		padding-top: 0.5rem;
	}

	/*
	 * DIE SCHRIFT AN ALLEN - UND FUER DAS VARIANTEN-LABEL MIT WOOCOMMERCE-MASS.
	 *
	 * `.woocommerce div.product form.cart .variations label` steht in
	 * `woocommerce.css` mit `font-weight: 700` und hat vier Klassen (0,4,2);
	 * meine `.single-product .variations th.label label` hatte drei (0,3,2) und
	 * verlor. Gemessen am 14.09.2026: "Speisegruppe" stand in 700, waehrend
	 * alle anderen Beschriftungen in 500 danebenstanden - in der Datei sah die
	 * Regel richtig aus.
	 */
	.single-product .variations th.label,
	.woocommerce div.product form.cart .variations th.label label,
	.single-product .wcsc-addon-field > .wcsc-addon-label,
	.single-product .wcsc-extra-field > .wcsc-addon-label {
		margin: 0;
	}

	/* Die Reihe der Zusatzprodukte ist hoeher als eine Swatch-Zeile - ihr
	   Titel sitzt trotzdem oben, gleiche Linie wie ueberall. */
	.zusatz__titel {
		display: block;
	}

	/*
	 * Die beliebte Zusammenstellung steht in der Spalte der Reihen, nicht an
	 * der Kante: Sie ist eine Abkuerzung durch die Extras darunter und gehoert
	 * optisch zu ihnen. An der Kante sah sie aus wie eine eigene Ebene.
	 */
	.beliebt {
		padding-left: calc(var(--wp--custom--swatch--kopf, 6rem) + var(--wp--custom--swatch--abstand, 0.4rem));
	}

}

/*
 * Der Pflichthinweis steht in derselben Zeile wie „Bitte auswaehlen" - eine
 * Stufe leiser und im Warnton, damit die Ueberschrift die Zeile fuehrt. Er
 * traegt die Klasse `wcsc-addon-notice`, weil das Plugin-Skript ihn ausblendet,
 * sobald alles gewaehlt ist (siehe `gastro-bestellung.php`).
 *
 * `inline` ausdruecklich: Das Skript setzt beim Einblenden `display: block`
 * inline (jQuery `.show()` stellt den urspruenglichen Wert wieder her, und der
 * kommt aus diesem Stilblatt). Stuende hier `block`, ruecke der Satz nach dem
 * ersten Ein- und Ausblenden in eine eigene Zeile - genau das, was er nicht
 * soll.
 */
/*
 * ZWEI KLASSEN, WEIL EINE NICHT REICHT: `.wcsc-vor-1-4 .wcsc-addon-notice`
 * weiter oben ist (0,2,0) und schlaegt ein blosses `.optionen-kopf__pflicht`
 * (0,1,0) - der Rueckfall fuer die mor3-Shops haette die Gestaltung hier
 * stillschweigend uebernommen.
 */
.optionen-kopf .optionen-kopf__pflicht {
	display: inline;
	margin-left: 0.4em;
	font-weight: 400;
	/*
	 * Dieselbe Groesse wie die Beschriftungen darunter. Das Preset "klein"
	 * (0,875rem) stand hier und war groesser als jeder Swatch-Text daneben -
	 * Kahraman am 14.09.2026: "die Schriften immer noch zu wuchtig".
	 */
	font-size: var(--wp--custom--swatch--schrift, 0.75rem);
	/*
	 * `signal`, nicht `marke`: Hier stand `--wp--preset--color--marke`, und
	 * diesen Slug gibt es weder in theme.json noch in einer der vier
	 * Stilvarianten. Der Rueckfall griff also immer, und der Hinweis war
	 * derselbe Grauton wie jede Beschriftung - waehrend der Kommentar
	 * "im Warnton" behauptete.
	 */
	color: var(--wp--preset--color--signal, var(--wp--preset--color--text-leise));
}

/* ==================================================================
   DIE BESCHRIFTUNG IST NICHT GROESSER ALS DAS, WAS SIE BESCHRIFTET

   Kahraman am 14.09.2026: „die Schriften immer noch zu wuchtig, die
   koennen kleiner nicht groesser oder breiter als die Kacheln - im
   Zweifelsfall die Reihenueberschriften zweizeilig".

   Gemessen war es dreifach ungleich: „Getränk dazu?" stand in 16 px / 700,
   „Bitte ohne" in 14 px / 600, die Swatches darunter in 12 px / 400. Eine
   Beschriftung, die lauter ist als ihr Inhalt, dreht die Ordnung um.

   DIESE REGEL STEHT AUSSERHALB DES MEDIENBLOCKS - und das ist der Punkt.
   Bis zum ersten Anlauf stand sie in `@media (min-width: 782px)`, weil dort
   die Kopfspalte gebaut wird. Auf dem Handy, wo der Block ohnehin am engsten
   ist, galten dadurch weiter 16 px in 700. Gemessen bei 390 px: drei
   Beschriftungen, alle groesser als der Regelfall.

   Die eine Ueberschrift, die fuehren darf, ist „Bitte auswaehlen" ueber dem
   ganzen Block.
   ================================================================== */
.single-product .variations th.label,
.woocommerce div.product form.cart .variations th.label label,
.single-product .wcsc-addon-field > .wcsc-addon-label,
.single-product .wcsc-extra-field > .wcsc-addon-label,
.single-product .bitte-ohne__kopf,
.single-product .zusatz__titel {
	/*
	 * Eigene Stellschraube, auch wenn sie heute denselben Wert traegt wie die
	 * Swatch-Schrift: Die Beschriftung darf spaeter einmal kleiner werden als
	 * der Inhalt, nie groesser. Ein gemeinsamer Wert haette diese Richtung
	 * verwischt.
	 */
	font-size: var(--wp--custom--swatch--kopfschrift, 0.6875rem);
	font-weight: 500;
	line-height: 1.25;
	color: var(--wp--preset--color--text-leise);
	/*
	 * `normal`, NICHT `break-word` - und der Unterschied war eine Zeile mit
	 * VIER PIXELN.
	 *
	 * Beides zusammen - `hyphens: auto` trennt nach Silben, `break-word`
	 * bricht notfalls mitten im Wort - ergab bei "Speisegruppe" drei Zeilen:
	 * 35 px, **4 px**, 37 px. Die mittlere trug nur den Trennstrich. Gemessen
	 * am 15.09.2026, nachdem Kahraman es im Bild gesehen hatte: "Speise-
	 * gruppe - in zwei Zeilen - 1. Zeile Speise- und zweite Zeile gruppe".
	 *
	 * Mit `normal` trennt allein `hyphens: auto`, und zwar sauber: "Speise-" /
	 * "gruppe". Was auch damit nicht passt, faengt das `overflow: hidden` am
	 * Kasten ab - und die Abnahme meldet es als Ueberstand, statt es zu
	 * verstecken.
	 */
	overflow-wrap: normal;
	/*
	 * `manual`, NICHT `auto` - die Trennstelle gehoert nicht dem Browser.
	 *
	 * Mit `auto` trennt jede Maschine nach ihrem eigenen Woerterbuch: Auf dem
	 * Pruefrechner stand "Speise-/gruppe", auf Kahramans Bildschirm
	 * "Speisegrup-/pe". Gemeldet am 15.09.2026 mit Bild - und vorher zweimal,
	 * ohne dass ich die Ursache gesucht haette.
	 *
	 * Die Stelle setzt jetzt das Theme mit einem weichen Trennstrich
	 * (`kaatai_shop_trennhilfe` in gastro-bestellung.php). `manual` sorgt
	 * dafuer, dass NUR dort getrennt wird.
	 */
	hyphens: manual;
}

/* ==================================================================
   DIE BESCHRIFTUNG IST SELBST EIN KASTEN (Theme 0.32.0)

   Kahraman am 14.09.2026: „mach doch um die Woerter Speisegruppe und
   Soße * usw. auch so einen Kasten wie um Geflügel - werde zweispaltig
   und kuerze zur Not einfach ab, und gib der ersten Kasten einen
   Highlight oder so etwas mit".

   Der Beschriftungskasten hat GENAU DAS MASS EINES SWATCHES - dieselbe
   Breite, dieselbe Hoehe, derselbe Radius. Die Reihe beginnt damit nicht
   neben einem Textstueck, sondern neben einem Kasten, und die ganze Zeile
   liegt auf einem Raster.

   ER SIEHT ABER NICHT AUS WIE EINE WAHL. Das ist der Zweck des
   Highlights: gefuellte Flaeche statt leerem Grund, kraeftigerer Rahmen.
   Waere er gleich gestaltet, saehe „Bitte ohne" aus wie eine Zutat, die
   man abwaehlen kann - der Kasten muss zeigen, dass er beschriftet und
   nicht angeboten wird.

   NUR AB 782 px. Darunter gibt es keine Kopfspalte; ein Kasten ueber die
   ganze Formularbreite waere kein Etikett, sondern ein Balken.
   ================================================================== */
@media (min-width: 782px) {
	.single-product .variations th.label,
	.single-product .wcsc-addon-field > .wcsc-addon-label,
	.single-product .wcsc-extra-field > .wcsc-addon-label,
	.single-product .bitte-ohne__kopf,
	.single-product .zusatz__titel {
		/*
		 * `display: block` mit `align-content: center` statt Flex - so bleibt
		 * der Text ein normaler Blockinhalt und laesst sich begrenzen. In einem
		 * Flex-Container wird jeder Eintrag blockifiziert, und
		 * `-webkit-line-clamp` ist dort wirkungslos; das hat am 14.09.2026
		 * schon eine halbe Stunde gekostet (siehe `.bitte-ohne__wahl`).
		 */
		display: block;
		align-content: center;
		box-sizing: border-box;
		/* Dasselbe Mass wie ein Swatch - nicht "ungefaehr". */
		width: var(--wp--custom--swatch--breite, 5.5rem);
		height: var(--wp--custom--swatch--hoehe, 2.75rem);
		/*
		 * SEITLICH GROSSZUEGIG, UND DAS IST DER GANZE TRICK.
		 *
		 * Gemessen am 15.09.2026: Am `th.label` kam von `padding: 0.35em 0.4em`
		 * NICHTS an - WooCommerce setzt dort `padding: 0` mit vier Klassen. Der
		 * Text hatte die vollen 86 px, und "Speisegruppe" (78,7 px bei 12 px
		 * Schrift) stand randfuellend in einer Zeile.
		 *
		 * Mit 0,9em seitlich (je 9,9 px) bleiben rund 66 px Textbreite. Damit
		 * bricht ein langes Wort um - Kahraman am 15.09.2026: "Speisegruppe
		 * kannst du zweizeilig schreiben, also Speise- gruppe" - und
		 * `hyphens: auto` setzt den Trennstrich, weil das Dokument `lang="de"`
		 * fuehrt. Zwei kurze Zeilen mit Luft sind ruhiger als eine randvolle.
		 *
		 * WARUM 0,9em UND NICHT 0,75: Bei 0,75em blieben 70 px, und
		 * "Speisegruppe" misst 72,1 px - **2,6 px** Abstand zum Umbruch. Auf
		 * einem Geraet mit anderer Schriftglaettung oder einer Stilvariante mit
		 * schmalerer Schrift kippt das lautlos ins Einzeilige. Mit 66 px sind
		 * es 6 px, und "Bitte ohne" (53,8 px) bleibt weiterhin sicher in einer
		 * Zeile.
		 */
		padding: 0.3em 0.9em;
		border: 1px solid var(--wp--preset--color--linie-stark);
		border-radius: var(--wp--custom--radius--knopf);
		/*
		 * DAS HIGHLIGHT IST UMGEKEHRT: Flaeche in der Textfarbe, Schrift in der
		 * Grundfarbe.
		 *
		 * Hier stand `flaeche` - und das war DIE FARBE DES CONTAINERS, in dem
		 * der ganze Bestellblock liegt (`has-flaeche-background-color` am
		 * `wp-block-group`). Gemessen am 15.09.2026: Beschriftungskasten
		 * rgb(28,30,35), Container rgb(28,30,35). Identisch. Das "Highlight"
		 * war vier Fassungen lang unsichtbar, und Kahraman hat es viermal
		 * gemeldet - zuletzt mit dem Quelltext und den Worten "wie oft muss ich
		 * das noch sagen".
		 *
		 * Zuerst standen hier `text` auf `grund` - Kahramans eigener Vorschlag
		 * `#ffffff` auf `#000000`, in Theme-Sprache. Das war sichtbar, aber die
		 * HAERTESTE Kombination, die das System hat: der maximale Kontrast
		 * ueberhaupt, und damit lauter als jeder Inhalt daneben. Kahraman am
		 * 15.09.2026: "das schwarz weiß der Beschriftungskacheln gefaellt mir
		 * nicht".
		 *
		 * `akzent` ist die richtige Rolle. Sie ist in jeder der fuenf Paletten
		 * eigens gestimmt - Tannengruen (hell), Mintgruen (dunkel), Orange
		 * (burger), Ziegelrot (pizza), Blau (sachlich) - und traegt die
		 * Bedeutung "hier ist die Ordnung", ohne zu schreien. `akzent-kontrast`
		 * ist die dazu gepruefte Schriftfarbe; beide gehoeren zusammen und
		 * werden nie einzeln getauscht.
		 *
		 * NICHT `signal`: Die Farbe ist fuer Stoerungen und Fristen da (neun
		 * Fundstellen im ganzen Blatt). Eine Beschriftung ist keine Warnung.
		 *
		 * ABER NICHT DER VOLLE AKZENT - der ist schon vergeben.
		 *
		 * Die GEWAEHLTE Wahlkachel traegt `akzent` (siehe `.is-gewaehlt` weiter
		 * oben). Mit voller Akzentflaeche sah die Beschriftung der Bowl exakt
		 * aus wie die vorausgewaehlte Speisegruppe daneben - die Abnahme
		 * meldete es im ersten Lauf: "Abstand 0". Ein Etikett, das aussieht wie
		 * eine Auswahl, ist schlimmer als ein blasses.
		 *
		 * Deshalb der Akzent GEDAEMPFT: 40 % auf dem Grund. Damit gehoert der
		 * Kasten sichtbar zur Familie, bleibt aber von jeder Kachel
		 * unterscheidbar - der gewaehlten wie der ungewaehlten.
		 *
		 * DIE 40 % SIND GERECHNET, NICHT GEWAEHLT. Der erste Anlauf nahm 18 %,
		 * und die Abnahme hat es sofort zurueckgewiesen: Abstand 16 zum
		 * Container, 26 zur Kachel, bei einer Schwelle von 40. Ueber alle fuenf
		 * Paletten durchgerechnet (15.09.2026):
		 *
		 *   30 %  vier von fuenf Varianten zu schwach (30 bis 43)
		 *   40 %  alle fuenf ueber der Schwelle (44 bis 74)
		 *
		 * DIE SCHRIFT IST `text`, NICHT `akzent`. Auf der gedaempften Flaeche
		 * traegt der volle Akzent nur 3,42:1 bis 3,98:1 - unter den 4,5:1, die
		 * WCAG AA fuer Fliesstext verlangt. `text` liegt bei 6,91:1 bis 9,17:1.
		 * Die Zugehoerigkeit zur Familie stellt der Rahmen her, nicht die
		 * Schrift.
		 */
		/* Rueckfall fuer Browser ohne `color-mix` (vor 2023): der schlichte
		   Grund. Die Regel darunter ueberschreibt ihn, wo es geht. */
		background: var(--wp--preset--color--grund);
		background: color-mix(in srgb, var(--wp--preset--color--akzent) 40%, var(--wp--preset--color--grund));
		color: var(--wp--preset--color--text);
		border-color: var(--wp--preset--color--akzent);
		text-align: center;
		/*
		 * Zweizeilig ist erwuenscht ("Vegetarische extras"), drei Zeilen passen
		 * nicht in 44 px. Was darueber hinausgeht, endet sichtbar mit "…" -
		 * Kahramans "kuerze zur Not einfach ab".
		 */
		overflow: hidden;
	}

	/*
	 * DER RAHMEN AM VARIANTEN-LABEL BRAUCHT WOOCOMMERCE-SPEZIFITAET.
	 *
	 * `.woocommerce div.product form.cart .variations th` (0,4,2) setzt dort
	 * `border: 0` - meine Regel oben hat (0,2,1) und verlor. Gemessen am
	 * 14.09.2026: "Speisegruppe" stand als EINZIGE Beschriftung ohne Kasten,
	 * waehrend ihr Hintergrund schon griff (den setzt WooCommerce nicht). Ein
	 * halber Kasten faellt mehr auf als gar keiner.
	 */
	.woocommerce div.product form.cart .variations th.label {
		/* Der Rahmen in derselben Farbe wie die Flaeche - ein Etikett hat keine
		   Kontur, es IST die Flaeche. */
		border: 1px solid var(--wp--preset--color--akzent);
		border-radius: var(--wp--custom--radius--knopf);
		/*
		 * Die Polsterung braucht dieselbe Spezifitaet wie der Rahmen:
		 * `.woocommerce div.product form.cart .variations td, … th` (0,4,2)
		 * setzt `padding: 0`. Ohne diese Zeile hatte ausgerechnet der Kasten,
		 * um den es Kahraman ging, als einziger keine Luft zum Rand.
		 */
		padding: 0.3em 0.9em;
	}

	/*
	 * Das Varianten-Label traegt seinen Text in einem inneren `<label>`
	 * (`<th class="label"><label>Größe</label></th>`). Der Kasten sitzt am
	 * `th`, die Begrenzung am `label` - sonst begrenzte sich der Kasten selbst
	 * und der Text liefe weiter.
	 */
	/*
	 * DIE FARBE ERBT - sie wird hier NICHT ein zweites Mal gesetzt.
	 *
	 * Der Kasten am `th.label` traegt `color: text`; das innere `<label>` holte
	 * sich aber `text-leise` aus der allgemeinen Beschriftungsregel weiter oben
	 * und stand dadurch heller als "Soße" und "Bitte ohne" daneben. Gemessen am
	 * 14.09.2026: rgb(167,172,184) gegen rgb(236,238,242) - Kahraman hat es im
	 * Bild gesehen, bevor es eine Zahl dazu gab.
	 */
	.woocommerce div.product form.cart .variations th.label label {
		color: inherit;
		/*
		 * `text-align` ERBT HIER NICHT, es wird gesetzt.
		 *
		 * `.woocommerce div.product form.cart .variations label` (0,4,2) steht
		 * in woocommerce.css mit `text-align: left` - dieselbe Regel, die schon
		 * das Schriftgewicht erzwungen hat. Der Kasten am `th` war zentriert,
		 * der Text darin blieb linksbuendig: "Speise-/gruppe" stand als einzige
		 * Beschriftung an der linken Kante, alle anderen mittig. Gemessen am
		 * 15.09.2026, nachdem Kahraman es im Bild gesehen hatte.
		 *
		 * `center` statt `inherit`: Der Wert muss hier wirken, auch wenn am
		 * Elternteil spaeter einmal etwas anderes stuende - ein Etikett ist
		 * zentriert, das ist die Entscheidung, nicht eine Folge.
		 */
		text-align: center;
	}

	.woocommerce div.product form.cart .variations th.label label,
	.single-product .bitte-ohne__kopf,
	.single-product .zusatz__titel {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin: 0;
	}

	/*
	 * Die Plugin-Beschriftung traegt ihren Text als blossen Textknoten - dort
	 * ist keine Begrenzung moeglich, der Kasten haelt ihn mit `overflow`
	 * zurueck. Die Abnahme meldet einen Ueberstand, falls je einer auftritt.
	 */
	.single-product .wcsc-addon-field > .wcsc-addon-label,
	.single-product .wcsc-extra-field > .wcsc-addon-label {
		align-content: center;
	}
}

/* ==================================================================
   DAS STILBAND: Farbwelten vorführen, ohne einen zweiten Shop

   Kahraman am 15.09.2026: „wir werden zum Vorfuehren eine helle und
   eine dunkle Version benoetigen".

   Es erscheint NUR, wenn gerade eine Variante vorgefuehrt wird
   (`?stil=…`) - der Laborshop ist auch die Vorlage fuer Kundenshops,
   und ein Umschalter, den jeder Gast sieht, gehoert in keinen Betrieb.

   DIE FARBEN KOMMEN NICHT AUS DER PALETTE. Das Band muss in JEDER
   vorgefuehrten Variante lesbar bleiben - auch in der, die gerade
   gezeigt wird. Mit `grund` und `text` waere es Teil dessen, was es
   umschaltet, und in einer hellen Variante unsichtbar. Feste Werte
   sind hier richtig: Das Band ist Werkzeug, nicht Gestaltung.
   ================================================================== */
.stilband {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: #1b1d22;
	color: #f2f4f7;
	font-size: 0.8125rem;
	line-height: 1.3;
	/* Ueber allem, was der Shop sonst aufbaut - auch ueber der
	   Consent-Schublade, die sich einen hohen Wert nimmt. */
	position: relative;
	z-index: 100000;
}

.stilband__kopf {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.7;
}

.stilband__wahl,
.stilband__aus {
	padding: 0.3em 0.7em;
	border: 1px solid #454a55;
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
}

.stilband__wahl:hover,
.stilband__aus:hover {
	border-color: #f2f4f7;
}

.stilband__wahl.is-aktiv {
	background: #f2f4f7;
	border-color: #f2f4f7;
	color: #1b1d22;
	font-weight: 600;
}

.stilband__aus {
	margin-left: auto;
	border-style: dashed;
	opacity: 0.75;
}

/*
 * UND AUS DEM WEG, SOLANGE EIN MODALER BEREICH OFFEN IST.
 *
 * Gemessen am 16.09.2026 bei 390 px: Die Filter-Schublade legt ihren
 * Schliessen-Knopf auf y = 28. Das Band steht als direktes Kind von
 * `body` bei 0,0 und ist in dieser Breite 77 px hoch, weil es umbricht -
 * es deckt den Knopf also zu. Und weil es sich mit `z-index: 100000`
 * bewusst ueber alles legt (Absatz oben), gewinnt es gegen die 9999 der
 * Schublade. Ein Gast auf dem Handy kam aus den Filtern nur noch ueber
 * den Zurueck-Knopf des Browsers heraus (#137).
 *
 * `visibility: hidden` statt `display: none`: Der Platz bleibt stehen,
 * sonst springt der Inhalt beim Oeffnen nach oben und beim Schliessen
 * zurueck. Nebenbei nimmt `visibility` die Trefflaeche mit weg - genau
 * darum geht es hier.
 *
 * DER AUSLOESER IST DER ZUSTAND, NICHT DAS ELEMENT. `[aria-modal="true"]`
 * waere falsch: Das traegt das Consent-Banner (`div.kccm-modal`), und
 * ueber dem soll das Band ausdruecklich liegen. `[role="dialog"]` waere
 * genauso falsch - das traegt die Schublade von WooCommerce auch
 * zugeklappt. Die beiden Zustaende unten kommen und gehen mit dem
 * Oeffnen; sie haengen tief im Block, nicht am `body`, deshalb `:has()`.
 *
 * ZWEI SCHUBLADEN, NICHT EINE. Der Warenkorb hat dasselbe Leiden, und
 * zwar SCHLIMMER: Sein Schliesser steht bei y = -2 bis 50 und liegt
 * damit in JEDER Breite unter dem Band (bei 1440 px ist es 43 px hoch,
 * bei 390 px 77). Gemessen am 16.09.2026 - `elementFromPoint` auf die
 * Mitte des Knopfes liefert `div.stilband`, der Klick laeuft in die
 * Zeitgrenze, der Korb bleibt offen. Vom Review zu #137 gefunden.
 *
 * Der Warenkorb-Zustand steht nicht in einer eigenen Klasse, sondern in
 * der ABWESENHEIT von `--is-hidden`: WooCommerce laesst das Overlay
 * immer im Baum und schaltet zwischen `--is-hidden` und
 * `--with-slide-in` um. `--is-hidden` steht bereits im
 * servergerenderten HTML (geprueft), das Band blitzt beim Laden also
 * nicht auf.
 */
body:has(.is-overlay-opened) .stilband,
body:has(.wc-block-components-drawer__screen-overlay:not(.wc-block-components-drawer__screen-overlay--is-hidden)) .stilband {
	visibility: hidden;
}

/* Beim Drucken hat das Werkzeug nichts verloren. */
@media print {
	.stilband {
		display: none;
	}
}

/* ------------------------------------------------------------------
   AUF DEM HANDY EINE ZEILE STATT ZWEI - UND MIT DEM FINGER TREFFBAR

   Gemessen am 29.09.2026 auf iPhone 14 Pro (393x660), vor einem
   Kundentermin, bei dem der Shop vom Handy und vom iPad vorgefuehrt
   wird:

   - Das Band brach bei fuenf Schaltern auf ZWEI Zeilen und wurde 77px
     hoch. Es steht ganz oben, die Hoehe geht also unmittelbar von dem
     ab, was der Gast von der Ware sieht.
   - Die Schalter waren 27px hoch. Apple nennt 44px als kleinstes
     sicher treffbares Ziel; 27px trifft man mit dem Daumen daneben -
     ausgerechnet beim Werkzeug, mit dem das Aussehen VORGEFUEHRT wird.

   `nowrap` plus seitliches Scrollen haelt das Band einzeilig, ohne einen
   Schalter zu verstecken: Was nicht ins Bild passt, wischt man heran.
   `flex: 0 0 auto` ist dabei nicht schmueckend, sondern noetig - sonst
   quetscht Flexbox die Schalter, statt sie ueberlaufen zu lassen.

   Das Band selbst bleibt sichtbar. Es ist kein Ueberbleibsel, sondern
   das Vorfuehrwerkzeug: ein Tipp, und der Shop hat ein anderes Gesicht.
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
	.stilband {
		flex-wrap: nowrap;
		overflow-x: auto;
		/* Kein Umbruch heisst: der Text darf nicht mitten im Namen brechen. */
		white-space: nowrap;
		padding: 0.25rem 0.75rem;
		gap: 0.375rem;
		/* Die Bildlaufleiste wuerde das Band optisch wieder hoeher machen. */
		scrollbar-width: none;
	}

	.stilband::-webkit-scrollbar {
		display: none;
	}

	.stilband__kopf,
	.stilband__wahl,
	.stilband__aus {
		flex: 0 0 auto;
	}

	/*
	 * 44px Trefferflaeche, ohne das Band auf 44px aufzublasen: Die
	 * Schalter behalten ihre sichtbare Groesse, bekommen die fehlende
	 * Hoehe aber als unsichtbares Vorher-Element dazu. So bleibt die
	 * Leiste flach UND der Daumen trifft.
	 */
	.stilband__wahl,
	.stilband__aus {
		position: relative;
		padding: 0.4em 0.85em;
	}

	.stilband__wahl::before,
	.stilband__aus::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: 44px;
		transform: translateY(-50%);
	}
}

/* ==================================================================
   DIE UMSCHALTUNG "VERSENDEN | ABHOLUNG"

   Kahraman am 15.09.2026: „helle Schrift auf hellem Hintergrund wenn
   ausgewaehlt".

   Gemessen: Die gewaehlte Seite trug `background: #ffffff` - einen
   FESTEN Wert aus dem Block-Stilblatt von WooCommerce - und darauf die
   Schriftfarbe des Themes (`#eceef2`). Kontrast **1,16:1**, gefordert
   sind 4,5:1 nach WCAG AA. In einer hellen Stilvariante faellt das nicht
   auf, in den drei dunklen ist der Text unsichtbar.

   Der feste Wert ist der Grund, warum es niemandem auffiel, der den Shop
   hell gebaut hat: Er passt zu genau einer der fuenf Farbwelten.

   GEWAEHLT = AKZENT, wie ueberall sonst im Shop. Die gewaehlte Wahlkachel
   im Bestellblock traegt denselben Zustand in derselben Farbe; eine
   zweite Sprache fuer dieselbe Aussage waere Willkuer.
   ================================================================== */
.wc-block-checkout__shipping-method-container {
	/* Der Rahmen der Gruppe kommt aus der Palette, nicht aus dem Block. */
	border: 1px solid var(--wp--preset--color--linie-stark);
	border-radius: var(--wp--custom--radius--knopf);
	overflow: hidden;
}

.wc-block-checkout__shipping-method-option {
	background: var(--wp--preset--color--grund);
	color: var(--wp--preset--color--text);
	border: 0;
}

/*
 * `.wc-block-checkout__shipping-method-option--selected` ist (0,2,0) - eine
 * einzelne Klasse wuerde dagegen verlieren. Beide Klassen zusammen sind
 * gleichstark und stehen SPAETER; bei Gleichstand gewinnt die spaetere Regel.
 * Dieselbe Falle wie bei `.wahlkarte:hover` am 14.09.2026.
 */
.wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected {
	background: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent-kontrast);
}

/*
 * Das Symbol traegt `fill="currentColor"` nicht immer - der Pfad im Markup
 * kommt ohne `fill`-Angabe, und dann faerbt ihn der Browser schwarz. Auf einer
 * Akzentflaeche ist das in "dunkel" und "burger-dunkel" kaum zu sehen.
 */
.wc-block-checkout__shipping-method-option .wc-block-checkout__shipping-method-option-icon,
.wc-block-checkout__shipping-method-option .wc-block-checkout__shipping-method-option-icon path {
	fill: currentColor;
}

.wc-block-checkout__shipping-method-option-title {
	color: inherit;
}

/* ==================================================================
   BEDIENFLAECHEN IN DEN WOOCOMMERCE-BLOECKEN: 24 px MINDESTHOEHE

   Kahraman am 15.09.2026: „haben wir responsive schon durchgetestet auf
   allen Seiten?" Die Antwort war teilweise - und der neue Lauf
   `breiten-abnahme.js` fand sofort fuenf Stellen, alle im Markup von
   WooCommerce und alle nach demselben Muster: breit genug, aber
   **18 bis 21 px hoch**.

     wc-block-product-filters__open-overlay          334 x 21
     wc-block-product-filter-checkbox-list__input     ~ x 20
     wc-block-components-address-form__…_2-toggle    334 x 18
     wc-block-components-panel__button               332 x 18
     wc-block-components-checkbox__input             289 x 20

   WCAG 2.5.8 (Stufe AA) verlangt 24 x 24 px. Ein Finger deckt rund
   26 px ab; wer mit 18 px trifft, trifft daneben - und zwar auf dem
   Handy, wo die Halbe Speisekarte bestellt wird.

   MINDESTHOEHE, NICHT FESTE HOEHE: Diese Elemente wachsen mit ihrem
   Text (ein zweizeiliges Filterkaestchen ist hoeher). `min-height`
   hebt den Boden an, ohne die Zeile zu sprengen.
   ================================================================== */
.wc-block-product-filters__open-overlay,
.wc-block-components-panel__button,
.wc-block-components-address-form__address_2-toggle {
	min-height: 24px;
	/* Ohne `inline-flex` bliebe der Text oben kleben und die gewonnene
	   Hoehe waere Luft darunter - getroffen wird dann weiterhin daneben. */
	display: inline-flex;
	align-items: center;
}

/*
 * Die Kaestchen der Filter und der Kasse: Das `input` selbst traegt die
 * Trefferflaeche, nicht sein Label - anders als bei unseren eigenen Swatches,
 * wo das Label die ganze Kachel ist.
 */
.wc-block-product-filter-checkbox-list__input,
.wc-block-components-checkbox__input {
	min-width: 24px;
	min-height: 24px;
}

/*
 * Und die Beschriftung daneben bekommt dieselbe Hoehe, damit Kaestchen und
 * Text auf einer Linie bleiben - sonst sitzt das groessere Kaestchen ueber dem
 * Text statt neben ihm.
 */
.wc-block-product-filter-checkbox-list__label,
.wc-block-components-checkbox__label {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* ==================================================================
   DIE FILTER-SCHUBLADE: weiss auf weiss

   Kahraman am 15.09.2026 mit drei Handy-Bildern: „die Filter haben
   einen weissen Hintergrund mit weisser Schrift".

   Gemessen bei 390 px, Schublade GEOEFFNET:
   `wc-block-product-filters__overlay-dialog` traegt `#ffffff` - wieder
   ein FESTER Wert aus dem Block-Stilblatt von WooCommerce - und darauf
   die Schriftfarbe des Themes (`#eceef2`). Kontrast **1,16:1**, genau
   derselbe Wert wie bei der Umschaltung "Versenden | Abholung" zwei
   Stunden vorher. Drittes Mal dasselbe Muster an diesem Tag.

   WARUM DER BREITEN-LAUF DAS NICHT FAND: Er misst die Seite, wie sie
   geladen wird - und die Schublade ist dann ZU. Was hinter einem Klick
   liegt, sieht eine Messung nur, wenn sie klickt
   (`breiten-abnahme.js` oeffnet sie jetzt).
   ================================================================== */
.wc-block-product-filters__overlay-dialog,
.wc-block-components-drawer,
.wc-block-components-drawer__content {
	background: var(--wp--preset--color--grund);
	color: var(--wp--preset--color--text);
}

/*
 * Kopf und Fuss der Schublade liegen auf derselben Flaeche und erben - aber
 * ihre Knoepfe ("Schliessen", "Anwenden", "Zuruecksetzen") tragen im
 * Block-Stilblatt eigene Farben.
 */
.wc-block-product-filters__overlay-header button,
.wc-block-product-filters__overlay-footer button,
.wc-block-product-filters__overlay-dialog a,
.wc-block-product-filters__overlay-dialog label {
	color: var(--wp--preset--color--text);
}

/*
 * Der "Anwenden"-Knopf ist die Hauptsache in der Schublade - er bekommt den
 * Akzent, wie jeder andere fuehrende Knopf im Shop.
 */
.wc-block-product-filters__overlay-footer .wc-block-product-filters__apply-button,
.wc-block-product-filters__overlay-footer button[class*="apply"] {
	background: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent-kontrast);
	border-color: var(--wp--preset--color--akzent);
}

/* Die Trennlinien der Liste kommen aus der Palette, nicht aus dem Block. */
.wc-block-product-filters__overlay-dialog hr,
.wc-block-product-filters__overlay-dialog [class*="__item"] {
	border-color: var(--wp--preset--color--linie);
}

/* ==================================================================
   AUSWAHLFELDER AN DER KASSE: weiss auf weiss, viertes Mal

   Gefunden am 16.09.2026 - und zwar von der MESSUNG, nicht von
   Kahraman. Das ist der Unterschied, um den es ging.

   `wc-blocks-components-select` traegt `background: #ffffff` aus dem
   Block-Stilblatt von WooCommerce, die Beschriftung erbt die
   Schriftfarbe des Themes. Kontrast **1,16:1** an „Wunschtag",
   „Wunschzeit" und „Land/Region" - derselbe Wert wie bei der
   Umschaltung und der Filter-Schublade tags zuvor.

   Ein fester Farbwert passt zu genau EINER der fuenf Farbwelten. Das
   ist jetzt viermal dieselbe Ursache; der Pruefpunkt „Text hebt sich
   vom Grund ab" in `breiten-abnahme.js` findet sie kuenftig auf allen
   neun Seiten in vier Breiten.
   ================================================================== */
/*
 * NUR DER CONTAINER - das Feld selbst ist weiter oben schon versorgt.
 *
 * Hier standen zusaetzlich `.wc-blocks-components-select` und
 * `.wc-blocks-components-select__select`. Beide waren wirkungslos: Die Regel bei
 * `.wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__select`
 * (0,3,0) setzt Flaeche, Schrift und Rahmen des Feldes laengst und schlaegt einen
 * Einzelklassen-Selektor. Wer spaeter hier die Feldfarbe aendert, saehe keine
 * Wirkung und suchte den Fehler an der falschen Stelle. Vom Review am
 * 16.09.2026 gefunden.
 *
 * Auch `border-color` ist raus: ohne `border-style` tut es nichts.
 *
 * ZWEI KLASSEN AM CONTAINER SIND DAGEGEN PFLICHT. Mit einer (0,1,0) blieb er
 * weiss - WooCommerce setzt ihn staerker -, und der Kontrast stieg nur von
 * 1,16:1 auf 2,27:1: die Schrift wurde leiser, der Grund blieb. Das sah nach
 * "halb behoben" aus.
 */
.wc-blocks-components-select .wc-blocks-components-select__container,
.wc-block-components-select-input .wc-blocks-components-select__container {
	background: var(--wp--preset--color--grund);
	color: var(--wp--preset--color--text);
}

.wc-blocks-components-select__label,
.wc-block-components-text-input label,
.wc-block-components-combobox label {
	color: var(--wp--preset--color--text-leise);
}

/*
 * DIE AUFGEKLAPPTE LISTE FOLGT DER FARBWELT, NICHT DEM BETRIEBSSYSTEM.
 *
 * Die Liste eines `<select>` zeichnet das Betriebssystem; ihre Farben kommen
 * aus `color-scheme`, nicht aus dem Stilblatt. Hier stand `light dark` - und
 * das loest nach der Vorliebe des GERAETS auf. Die dunklen Varianten dieses
 * Themes sind aber reine Palettentausche; `prefers-color-scheme` kommt im
 * ganzen Blatt nicht vor. Auf einem hell eingestellten Geraet blieb die Liste
 * im dunklen Shop also hell, waehrend die Optionsschrift `--text` (fast weiss)
 * ist - genau der Fehler, den die Zeile beheben sollte. Und umgekehrt wurde die
 * Liste im hellen Standardshop dunkel, sobald das Geraet dunkel eingestellt
 * war. Vom Review am 16.09.2026 gefunden.
 *
 * GEBUNDEN WIRD AN DIE HELLIGKEIT DER PALETTE, und die kennt nur das Theme:
 * Jede Stilvariante setzt `color-scheme` selbst (siehe `styles/*.json`), die
 * Grundfassung in `theme.json`. Hier steht deshalb nur noch die Vererbung -
 * `<select>` und `<input>` erben `color-scheme` nicht von selbst.
 */
.wc-blocks-components-select__select,
.wc-block-components-form select,
.wc-block-components-text-input input,
select,
input,
textarea {
	color-scheme: inherit;
}

/* ==================================================================
   DIE VORWAHL - Abholung oder Lieferung, dann die Uhrzeit

   Kahraman am 29.09.2026 nach dem Blick auf family-pizzeria.net:
   "erst sagen ob Abholung oder Lieferung und dann Uhrzeit auswaehlen,
   bei uns ist das der letzte Schritt".

   Die Gestaltung nimmt die Theme-Variablen, keine eigenen Farbwerte.
   Ein fester Wert wuerde in genau einer der fuenf Stilvarianten passen -
   dieselbe Falle, die die Umschaltung "Versenden | Abholung" schon
   einmal unlesbar gemacht hat.
   ================================================================== */

.vorwahl[hidden] {
	display: none;
}

.vorwahl {
	position: fixed;
	inset: 0;
	/* Ueber dem Consent-Banner waere falsch: Die Einwilligung kommt zuerst,
	   sonst steht die Vorwahl vor einer Entscheidung, die der Gast noch gar
	   nicht treffen konnte. Darum bewusst DARUNTER. */
	z-index: 99000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.vorwahl__schatten {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.62);
}

.vorwahl__blatt {
	position: relative;
	width: min(34rem, 100%);
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	padding: 1.75rem 1.5rem 1.25rem;
	border-radius: var(--wp--custom--radius--karte, 12px);
	background: var(--wp--preset--color--flaeche, #16181d);
	color: var(--wp--preset--color--text, #eceef2);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.vorwahl__x {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.vorwahl__titel {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--gross, 1.5rem);
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.vorwahl__zeile {
	margin: 0 0 0.25rem;
	font-weight: 600;
}

.vorwahl__leise {
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--text-leise, #9aa3b2);
	font-size: var(--wp--preset--font-size--klein, 0.875rem);
}

/* Die Wippe: zwei Haelften, die gewaehlte traegt den Akzent - wie jeder
   andere gewaehlte Zustand im Shop auch. */
.vorwahl__wippe {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.35rem;
	padding: 0.35rem;
	margin-bottom: 1.25rem;
	border: 1px solid var(--wp--preset--color--linie, #2b303a);
	border-radius: 999px;
}

.vorwahl__wahl {
	/* 44px, damit der Daumen trifft - die Vorwahl ist der erste Kontakt. */
	min-height: 44px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.vorwahl__wahl.is-aktiv {
	background: var(--wp--preset--color--akzent, #c8102e);
	color: var(--wp--preset--color--auf-akzent, #ffffff);
	font-weight: 600;
}

.vorwahl__beschriftung {
	display: block;
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--klein, 0.875rem);
	color: var(--wp--preset--color--text-leise, #9aa3b2);
}

.vorwahl__eingabe,
.vorwahl__auswahl {
	width: 100%;
	/*
	 * OHNE DIESE ZEILE LAEUFT DAS FELD AUS DEM DIALOG. `width: 100%` plus
	 * seitliches Padding ergibt ohne `border-box` mehr als 100% - auf dem
	 * iPhone war der Beispieltext rechts abgeschnitten. Gemessen am
	 * 29.09.2026 am Screenshot, nicht am Stylesheet: Im CSS sieht die Zeile
	 * richtig aus, erst das Bild zeigt den Ueberlauf.
	 */
	box-sizing: border-box;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--linie, #2b303a);
	border-radius: var(--wp--custom--radius--knopf, 8px);
	background: var(--wp--preset--color--grund, #0f1115);
	color: inherit;
	font: inherit;
}

.vorwahl__standort {
	margin: 0;
	line-height: 1.5;
}

.vorwahl__feld {
	margin-bottom: 1.25rem;
}

.vorwahl__tage {
	margin-bottom: 1rem;
}

/* Die Uhrzeiten als Kachelfeld. Auf dem Handy zwei Spalten, darueber vier -
   eine einzelne Spalte waere eine Liste zum Scrollen statt eine Wahl auf
   einen Blick. */
.vorwahl__zeiten {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
	margin-bottom: 1rem;
}

@media (min-width: 30rem) {
	.vorwahl__zeiten {
		grid-template-columns: repeat(4, 1fr);
	}
}

.vorwahl__zeit {
	min-height: 44px;
	border: 1px solid var(--wp--preset--color--linie, #2b303a);
	border-radius: var(--wp--custom--radius--knopf, 8px);
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.vorwahl__zeit.is-aktiv {
	border-color: var(--wp--preset--color--akzent, #c8102e);
	background: var(--wp--preset--color--akzent, #c8102e);
	color: var(--wp--preset--color--auf-akzent, #ffffff);
	font-weight: 600;
}

.vorwahl__mehr {
	width: 100%;
	min-height: 44px;
	margin-bottom: 1rem;
	border: 1px solid var(--wp--preset--color--linie, #2b303a);
	border-radius: var(--wp--custom--radius--knopf, 8px);
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.vorwahl__weiter {
	width: 100%;
	min-height: 48px;
	border: 0;
	border-radius: var(--wp--custom--radius--knopf, 8px);
	background: var(--wp--preset--color--akzent, #c8102e);
	color: var(--wp--preset--color--auf-akzent, #ffffff);
	font: inherit;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
}

/* Der Ausstieg ist bewusst leise, aber vorhanden - wer nur stoebern will,
   darf nicht an einer Pflichtabfrage haengen bleiben. */
.vorwahl__aus {
	display: block;
	width: 100%;
	min-height: 44px;
	margin-top: 0.5rem;
	border: 0;
	background: none;
	color: var(--wp--preset--color--text-leise, #9aa3b2);
	font: inherit;
	font-size: var(--wp--preset--font-size--klein, 0.875rem);
	cursor: pointer;
}

/* Solange der Dialog offen ist, scrollt die Seite dahinter nicht mit. */
body.hat-vorwahl {
	overflow: hidden;
}

/* Die getroffene Wahl, dort wo vorher die Ankuendigung stand. */
.vorwahl-stand[hidden] {
	display: none;
}

.vorwahl-stand {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: var(--wp--preset--color--flaeche, #16181d);
	border-bottom: 1px solid var(--wp--preset--color--linie, #2b303a);
	font-size: var(--wp--preset--font-size--klein, 0.875rem);
}

.vorwahl-stand__text {
	font-weight: 600;
}

.vorwahl-stand__aendern {
	min-height: 32px;
	padding: 0 0.6rem;
	border: 1px solid var(--wp--preset--color--linie, #2b303a);
	border-radius: 999px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: inherit;
	cursor: pointer;
}

/* ==================================================================
   AUF DEM HANDY STEHT DIE WARE FRÜHER IM BILD

   Kahraman am 29.09.2026 („ja, mach"), nachdem gemessen war, dass die
   erste Produktkachel auf `/shop/` bei **y=763px** beginnt — 103px
   unter dem Fensterrand eines iPhone 14 Pro (660px). Der Gast sah
   ohne Scrollen kein einziges Gericht.

   GEMESSEN STATT VERMUTET. Die Stil-Wechsel-Leiste, auf die der
   Verdacht zuerst fiel, ist mit 37px der KLEINSTE Posten. Die
   Aufschlüsselung über der Ware:

     37px  Stil-Wechsel-Leiste        ← bleibt, ist das Vorführwerkzeug
     49px  Zeile mit der Vorwahl
    197px  Kopf: Titel, Suche, Warenkorb, Menü   ← der große Posten
     34px  Öffnungszeiten
     57px  „FRISCH ZUBEREITET" + „SHOP (53)"
     53px  Filterspalte
     80px  Sortieren / Zeigen / Ansicht
    ~280px Zwischenräume

   Der Kopf trug dabei nur 108px INHALT — die übrigen 89px waren
   Abstände und Polster.

   Ergebnis dieser Regeln: **763px → 661px**, Kopf 197px → 138px.
   Das Ziel „erste Kachel im ersten Fenster" ist damit NICHT erreicht;
   es fehlt ein Pixel, und darauf zu optimieren wäre Selbstbetrug: Bei
   661px sähe man von der Kachel nur einen Rand, und auf dem nächsten
   Gerät kippt es wieder. Der Gewinn ist ein kurzer Wisch statt eines
   langen.

   NICHTS DAVON NIMMT EINE FUNKTION WEG. Suche, Menü, Konto, Warenkorb,
   Filter und Sortierung bleiben vollständig; auf dem großen Schirm
   ändert sich gar nichts.
   ================================================================== */
@media (max-width: 600px) {
	/* Der Kopf bricht bei 393px auf drei Zeilen, weil Titel (162px) und
	   Suchfeld (337px) nicht nebeneinander passen. Die Suche wandert ans
	   Ende und über die volle Breite — dadurch rücken Titel und Werkzeuge
	   in dieselbe Zeile, und eine Zeile samt ihrer Lücke entfällt. */
	header.wp-block-template-part .wp-block-group.alignwide {
		row-gap: 0.45rem;
		column-gap: 0.5rem;
	}

	header.wp-block-template-part form.kopf-suche {
		order: 3;
		flex: 1 0 100%;
		margin: 0;
	}

	header.wp-block-template-part form.kopf-suche > div {
		margin: 0;
	}

	header.wp-block-template-part form.kopf-suche input {
		min-height: 38px;
	}

	header.wp-block-template-part {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

	/* Titel und Werkzeuge brauchten zusammen 376px bei 337px Platz. Zwei
	   Stellschrauben bringen sie in eine Zeile, ohne etwas zu entfernen. */
	header.wp-block-template-part .wp-block-group.alignwide > div:first-child p {
		font-size: 1.05rem;
		line-height: 1.2;
	}

	/*
	 * Der Betrag neben dem Warenkorbsymbol entfällt auf dem Handy. Das
	 * Symbol sagt, dass es einen Warenkorb gibt; was drin ist, sieht man
	 * beim Antippen. Ein „0,00 €" kostet hier mehr Platz, als es sagt —
	 * und sobald etwas drin ist, trägt die Kachelzahl am Symbol die
	 * Auskunft.
	 */
	header.wp-block-template-part .wc-block-mini-cart__amount {
		display: none;
	}

	header.wp-block-template-part .wc-block-mini-cart__button {
		padding: 0.2rem 0.4rem;
	}

	/* Die Zwischenräume der obersten Ebene: WordPress verteilt sie über
	   `block-gap`. Der Desktop-Wert soll Abschnitte trennen, schiebt auf
	   393px aber die Ware aus dem Bild. Halbiert bleibt die Gliederung
	   erkennbar. */
	.wp-site-blocks > * + *,
	.wp-site-blocks .wp-block-group.is-layout-flow > * + * {
		margin-block-start: 0.85rem;
	}

	.wp-site-blocks .wp-block-query-title {
		margin-block: 0.3rem;
	}

	.shop-filter {
		margin-block: 0.4rem;
	}

	/* Die beiden größten Lücken sitzen als `margin-top` an genau zwei
	   Elementen — 28px vor der Öffnungsleiste, 48px vor dem Hauptteil.
	   Der Selektor darüber traf den Hauptteil nicht; deshalb einzeln. */
	.wp-site-blocks > .oeffnungsleiste {
		margin-top: 0.6rem;
	}

	.wp-site-blocks > main {
		margin-top: 0.7rem;
	}

	/*
	 * „Ergebnisse 1 – 24 von 53 werden angezeigt" sagt auf dem Handy
	 * nichts, was nicht zwei Zeilen darüber schon steht: Die Überschrift
	 * lautet „SHOP (53)", und dass die ersten 24 kommen, sieht man beim
	 * Scrollen. Auf dem großen Schirm bleibt die Zeile stehen.
	 */
	.woocommerce-result-count {
		display: none;
	}
}

/* ==================================================================
   DIE FILTER AUF DEM HANDY: EIN KNOPF, DER WIE EINER AUSSIEHT

   Kahraman am 30.09.2026: „die responsive Filter müssen wir sowieso
   noch einmal ran, weil die im Moment sehr ‚verstreut' wirken,
   seeeeehr weit auseinander und der Filter ist sehr unauffällig, der
   Filterknopf sollte viel deutlicher und größer und die Auswahl bei
   den Filtern viel kompakter und optisch ‚feiner'" — mit
   `shop.mor3.de` als Vorbild.

   GEMESSEN, an beiden Shops nebeneinander:

     unser Knopf     337x24px · transparent · ohne Rand · 14px/400
     mor3            volle Breite · gefüllt · mit Symbol · fett

   Eine Textzeile ohne Fläche hält niemand für bedienbar. Dazu drei
   weitere Messwerte, die das „verstreut" erklären:

     84px   Lücke zwischen Filterzeile und Sortierleiste
     52px   Abstand zwischen JEDER der fünf Filtergruppen im Overlay
     345px  Höhe des Overlay-Inhalts für fünf zugeklappte Titel

   DIE GRUPPENABSTÄNDE SIND EIN EIGENER FEHLER, und zwar von wenigen
   Stunden vorher: Seit die Gruppen auf schmalen Schirmen zugeklappt
   starten (assets/js/filtergruppen.js), steht zwischen den Titeln nur
   noch Luft. Die 52px waren für AUFGEKLAPPTE Gruppen gedacht und
   sahen dort richtig aus. Wer eine Vorgabe umdreht, muss die
   Abstände mitdenken, die auf ihr beruhten.

   Ergebnis: Knopf 24px → 52px und gefüllt · Gruppenabstände 52px → 0
   · Overlay-Inhalt 345px → 208px.
   ================================================================== */
@media (max-width: 600px) {
	/* Der Knopf bekommt eine Fläche, eine Farbe und ein Gewicht. */
	.wc-block-product-filters__open-overlay {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		width: 100%;
		min-height: 52px;
		padding: 0.75rem 1rem;
		border: 1px solid var(--wp--preset--color--akzent);
		border-radius: var(--wp--custom--radius--knopf, 8px);
		background: var(--wp--preset--color--akzent);
		/*
		 * GERECHNETE GEGENFARBE, keine geerbte. `--wp--preset--color--auf-akzent`
		 * stand hier bis zum 30.09.2026 - und zeigte ins Leere, weil die Palette
		 * gar kein `auf-akzent` kennt (theme.json hat grund, flaeche, text,
		 * akzent). Der Text behielt deshalb die geerbte Farbe, und auf einer
		 * eingefaerbten Flaeche ist das Zufall: In ALLEN FUENF Varianten lag der
		 * Kontrast zwischen 1.87 und 2.31 statt der geforderten 3:1.
		 * `--kaatai-auf-akzent` wird in inc/gastro-stilvarianten.php aus der
		 * Helligkeit der Akzentfarbe berechnet.
		 */
		color: var(--kaatai-auf-akzent, #ffffff) !important;
		/* Gemessen: ohne !important blieb die Schrift bei 14px/400 - die
		   Block-Regeln von WooCommerce sind spezifischer als eine
		   Klassenregel. Der Knopf soll deutlich sein, das ist sein Zweck. */
		font-size: 1rem !important;
		font-weight: 700 !important;
		letter-spacing: 0.01em;
	}

	.wc-block-product-filters__open-overlay svg,
	.wc-block-product-filters__open-overlay path {
		fill: currentColor;
		stroke: currentColor;
	}

	.wc-block-product-filters__open-overlay svg {
		width: 20px;
		height: 20px;
	}

	/*
	 * Die Lücke zur Sortierleiste stammt aus dem Zwei-Spalten-Layout
	 * (row-gap 28px plus Spaltenpolster). Auf 393px stehen Filter und
	 * Ware ohnehin untereinander — der Spaltenabstand hat dort keine
	 * Aufgabe mehr.
	 *
	 * `!important` ist hier kein Holzhammer, sondern nötig: WordPress
	 * schreibt `--wp--style--block-gap` als INLINE-Style an das Element,
	 * und ein Inline-Style schlägt jede Regel aus einem Stylesheet. Ohne
	 * das blieb die Lücke bei 64px stehen — in der Browser-Probe wirkte
	 * sie, weil dort `!important` stand und beim Einbau ins Theme fehlte.
	 */
	main .wp-block-columns {
		row-gap: 0.5rem !important;
		--wp--style--block-gap: 0.5rem;
	}

	main .wp-block-columns > .wp-block-column {
		margin-block: 0 !important;
	}

	/*
	 * Und noch eine Ebene tiefer. Der erste Anlauf setzte nur den
	 * Spaltenabstand — gemessen blieb die Lücke trotzdem bei 64px, weil
	 * die Gruppe INNERHALB der Produktspalte ihren eigenen `margin-top:
	 * 28px` und `gap: 28px` mitbringt. Zwei Abstände übereinander, von
	 * denen man nur einen sieht.
	 *
	 * `:has()` trifft gezielt die Gruppe mit der Sortierleiste, statt
	 * jede Gruppe im Katalog flachzudrücken.
	 */
	main .wp-block-column > .wp-block-group:has(.sortierleiste) {
		margin-top: 0.5rem !important;
		gap: 0.5rem !important;
		--wp--style--block-gap: 0.5rem;
	}

	.shop-filter {
		margin-block: 0;
		padding-block: 0;
	}

	/* Das Overlay wird eine Liste statt einer Streuung. */
	.wc-block-product-filters__overlay-dialog .wc-block-product-filters,
	.wc-block-product-filters__overlay-content {
		gap: 0;
	}

	.wc-block-product-filters__overlay-content > *,
	.wc-block-product-filters__overlay-content .wp-block-group {
		margin-block: 0;
	}

	.shop-filter__gruppe {
		margin: 0 !important;
	}

	/* Jede Gruppe eine Zeile mit Trennlinie, 52px hoch — groß genug für
	   den Daumen, ohne Fläche zu verschwenden. */
	.filtergruppe__schalter {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 52px;
		margin: 0;
		padding: 0.5rem 0;
		border: 0;
		border-bottom: 1px solid var(--wp--preset--color--linie);
		background: none;
		color: inherit;
		font-size: 0.95rem;
		font-weight: 600;
		text-align: left;
	}

	/* Die Einträge einer aufgeklappten Gruppe: kompakter, aber mit 40px
	   Trefferfläche — feiner heißt nicht schwerer zu treffen. */
	.filtergruppe__koerper {
		margin: 0;
		padding: 0.35rem 0 0.6rem;
	}

	.wc-block-product-filter-checkbox-list__item,
	.wc-block-product-filter-checkbox-list li {
		margin: 0;
	}

	/*
	 * DIE EINTRAEGE EINER AUFGEKLAPPTEN GRUPPE.
	 *
	 * Kahraman am 30.09.2026, am iPhone fotografiert: „eine Auswahl aus vier
	 * Speisegruppen nimmt fast den kompletten Bildschirm ein."
	 *
	 * Die Zeilen trugen je rund 115px - nicht durch ihre Hoehe, sondern durch
	 * den Abstand darunter. Vier Haken fuellten damit die halbe Seite, waehrend
	 * die Kategorien daneben (eine andere Filterart) schon kompakt standen. Der
	 * erste Anlauf setzte nur `min-height` auf dem Label und liess die
	 * Abstaende der Liste unberuehrt: eine Zeile zu kuerzen hilft nicht, wenn
	 * die Luecke darunter bleibt.
	 *
	 * ZUR HOEHE, ZWEITE FASSUNG (Kahraman am 30.09.2026): „das macht das an
	 * der Stelle unnoetig hoch und die Elemente voneinander weit entfernt, wir
	 * brauchen das an der Stelle kompakt."
	 *
	 * Hier stand vorher 44px mit der Begruendung, das sei die Untergrenze fuer
	 * den Daumen. Die Regel stimmt - aber sie gilt fuer KLEINE, ISOLIERTE
	 * Ziele, und die Begruendung war doppelt schief:
	 *
	 *   1. Die Gruppentitel daneben sind 34px hoch und niemand hat Muehe, sie
	 *      zu treffen.
	 *   2. Gemessen waren die Labels nur 103-143px BREIT - also gar nicht die
	 *      breite Zeile, mit der ich die Hoehe gerechtfertigt haette.
	 *
	 * Deshalb jetzt beides: 32px Hoehe UND volle Breite. Die Trefferflaeche
	 * wird dadurch groesser als vorher (393x32 statt 143x44), und die Liste
	 * wird kompakt. Kein Tausch, sondern beides.
	 */
	.wc-block-product-filter-checkbox-list {
		gap: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.wc-block-product-filter-checkbox-list__item {
		margin: 0 !important;
		padding: 0 !important;
	}

	.wc-block-product-filter-checkbox-list__label {
		display: flex;
		align-items: center;
		/* Volle Breite: die Trefferflaeche liegt in der Zeile, nicht in der
		   Hoehe. Ohne das ist nur der Text selbst anklickbar. */
		width: 100%;
		min-height: 32px !important;
		margin: 0 !important;
		padding: 0 !important;
		font-size: 0.9rem;
		line-height: 1.25;
	}

	/* Auch die Listen der anderen Filterart (Kategorien) ziehen gleich. */
	.filtergruppe__koerper li,
	.filtergruppe__koerper .wc-block-product-filter-checkbox-list li {
		margin-block: 0 !important;
	}

	/* ----------------------------------------------------------------
	   EINE SCHRIFTGROESSE IM GANZEN FILTER

	   Kahraman am 30.09.2026: „da sind noch unterschiedliche
	   Schriftgroessen bei den Filtern ... bitte alles innerhalb der
	   Filter auf eine Schriftgroesse bringen, insb. Speisegruppen und
	   Kategorienamen."

	   Gemessen im geoeffneten Overlay - drei Groessen, zwei Familien:

	     14.00px  600  Fraunces  "Speisegruppen", "Kategorien"
	     16.16px  400  Inter     "Beilagen", "Doener", "Getraenke"
	     14.00px  400  Inter     die Zahlen "6", "12"
	     14.00px  400  Arial     "Schliessen"

	   Die Kategorienamen waren der Ausreisser: Sie kommen aus einem
	   anderen Filterblock als die Speisegruppen und erbten dessen
	   Standardgroesse. Nebeneinander in einer Liste liest sich das wie
	   zwei Ranghoehen, obwohl beides dieselbe Art Auswahl ist.

	   Vereinheitlicht wird die GROESSE, nicht die Schriftfamilie: Die
	   Fraunces der Gruppentitel unterscheidet Ueberschrift von Eintrag
	   und traegt dieselbe Handschrift wie der uebrige Shop.
	   ---------------------------------------------------------------- */
	.wc-block-product-filters__overlay-dialog,
	.wc-block-product-filters__overlay-dialog a,
	.wc-block-product-filters__overlay-dialog button,
	.wc-block-product-filters__overlay-dialog label,
	.wc-block-product-filters__overlay-dialog span,
	.wc-block-product-filters__overlay-dialog li,
	.wc-block-product-filters__overlay-dialog p,
	.wc-block-product-filters__overlay-dialog h2,
	.wc-block-product-filters__overlay-dialog h3 {
		font-size: 0.875rem !important;
	}

	/*
	 * Und die Zeilenhoehe zieht mit: Die Kategorien kommen aus einem eigenen
	 * Block (`wc-block-product-categories-list-item`) und trugen 6,3px Polster
	 * oben und unten - 36px gegen 32px bei den Speisegruppen. Vier Pixel sind
	 * wenig, aber zwei Listen direkt untereinander zeigen jeden Unterschied.
	 *
	 * Was im Bild luftiger wirkt, sind uebrigens die Trennlinien, nicht die
	 * Hoehe. Die bleiben - sie gliedern eine Liste ohne Haken.
	 */
	.wc-block-product-filters__overlay-dialog .wc-block-product-categories-list-item {
		padding-block: 0.3rem !important;
	}

	/* Die Zahl bleibt leiser als der Name - gleiche Groesse, weniger
	   Gewicht. Sie beantwortet eine Frage, die niemand zuerst stellt. */
	.wc-block-product-filters__overlay-dialog .wc-block-product-filter-checkbox-list__count,
	.wc-block-product-filters__overlay-dialog .count {
		opacity: 0.7;
	}
}