/**
 * EMEU Produktseite (Layout) 0.4.3
 *
 * Geruest der Produkt-Einzelseite auf dem HAUS-FUNDAMENT (Lumina-Setzung 2026-09-16):
 * dieselbe Leinwand und derselbe Rand wie auf der Startseite — dort per Elementor-Klassen,
 * hier aus den Design-System-Werten, damit die Produktseite ohne Elementor auskommt.
 *
 *   Rand   2rem, unter 600px 1.5rem      (--edge-padding)
 *   Leinwand max. 1700px                 (Haus-Canvas, gemessen an der Startseite)
 *
 * Zwei Spalten nach der Setzung vom 2026-09-16: Medienblock hoechstens 768, Rinne
 * mindestens 64, col2 nimmt den Rest und traegt den Produktdaten-Block mit hoechstens
 * 420, waagerecht mittig. Medienblock klebt beim Rollen. Farbe und Schrift kommen aus
 * der Kontext-Schicht (on-light/on-dark plus Worker-Klassen) — hier steht nur Geruest.
 */

.single-product {
	--emeu-ps-leinwand: 1700px;
	--emeu-ps-rand: var(--edge-padding, 2rem);

	/* Zwei Spalten (Lumina-Setzung 2026-09-16):
	   col1 ist der Medienblock und wird hoechstens 768 breit.
	   col2 nimmt den Rest und ist nur Behaelter — darin steht der Produktdaten-Block
	   mit hoechstens 420 Breite, waagerecht mittig.
	   Zwischen beiden liegen mindestens 64. */
	--emeu-ps-medien: 768px;
	--emeu-ps-daten: 420px;
	--emeu-ps-rinne: 64px;
	--emeu-ps-spalten: minmax(0, var(--emeu-ps-medien)) minmax(0, 1fr);

	--emeu-ps-kopf: 64px; /* Hoehe des klebenden Kopfes */
	--emeu-ps-luft: 24px;

	/* Schrift-Leiter der Kaesten (Lumina-Setzung 2026-09-16): die Werte kommen aus
	   der Schrift-Schicht des Hauses (emeu-design-system/schrift/emeu-schrift.css).
	   Diese sechs Zeilen sind der Schalter DIESER Seite: wer nur die Produktseite
	   anders will, aendert sie HIER. Der Preisblock traegt seine eigene Groesse. */
	--emeu-kasten-titel-groesse: var(--w-schrift-label-groesse, 13px);
	--emeu-kasten-titel-zeile: var(--w-schrift-label-zeile, 16px);
	--emeu-kasten-titel-gewicht: var(--w-schrift-betont, 600);
	--emeu-kasten-text-groesse: var(--w-schrift-text-groesse, 14px);
	--emeu-kasten-text-zeile: var(--w-schrift-text-zeile, 20px);
	--emeu-kasten-text-gewicht: var(--w-schrift-regulaer, 300);
	--emeu-kasten-neben-groesse: var(--w-schrift-neben-groesse, 13px);
	--emeu-kasten-neben-zeile: var(--w-schrift-neben-zeile, 18px);
	--emeu-kasten-neben-gewicht: var(--w-schrift-regulaer, 300);
}

/* --- Geruest ------------------------------------------------------------- */

.single-product div.product {
	display: grid;
	grid-template-columns: var(--emeu-ps-spalten);
	column-gap: var(--emeu-ps-rinne);
	row-gap: 3rem;
	box-sizing: border-box;
	width: 100%;
	/* Inhalt bis 1700, der Rand liegt aussen davor — wie die Haus-Huelle auf der Startseite */
	max-width: calc(var(--emeu-ps-leinwand) + 2 * var(--emeu-ps-rand));
	margin-inline: auto;
	padding-inline: var(--emeu-ps-rand);
}

/* Alles, was nicht Galerie oder Kaufspalte ist, laeuft ueber beide Spalten */
.single-product div.product > * {
	grid-column: 1 / -1;
	min-width: 0;
}

/* v0.7.0 (Lumina 2026-09-18 16:3x, E9-a): der Medienblock — Galerie und Kaufspalte in einem eigenen Rahmen.
   Das Zweispalten-Raster liegt jetzt in diesem Rahmen; die klebende Galerie ist an ihn gebunden und endet
   mit der Kaufspalte, statt sich ueber die folgenden Abschnitte zu schieben. Der Rahmen selbst laeuft im
   Produkt-Raster ueber beide Spalten (Regel darueber). */
.single-product div.product > .emeu-produktseite__medienblock {
	display: grid;
	grid-template-columns: var(--emeu-ps-spalten);
	column-gap: var(--emeu-ps-rinne);
	align-items: start;
	min-width: 0;
}

/* WooCommerce gibt Galerie und Kaufspalte von Haus aus 48 Prozent Breite, laesst sie
   schwimmen und setzt die Galerie auf position relative. Im Raster ergaebe das halbe
   Spalten und einen um top verschobenen Medienblock. Der Selektor traegt darum eine
   Klasse mehr als Woos eigener. */
.single-product.woocommerce div.product > .emeu-produktseite__medienblock > div.woocommerce-product-gallery,
.single-product.woocommerce div.product > .emeu-produktseite__medienblock > div.summary {
	width: 100%;
	float: none;
	margin: 0;
	min-width: 0;
}

/* Die beiden Maasse der Setzung */
.single-product.woocommerce div.product > .emeu-produktseite__medienblock > div.woocommerce-product-gallery {
	max-width: var(--emeu-ps-medien);
}

/* Der Produktdaten-Block steht mittig in seinem Behaelter (col2), nicht am Rand */
.single-product.woocommerce div.product > .emeu-produktseite__medienblock > div.summary {
	max-width: var(--emeu-ps-daten);
	justify-self: center;
}

/* Der Medienblock klebt beim Rollen (Lumina-Setzung 2026-09-16, wie in der Vorlage).
   WooCommerce setzt die Galerie selbst auf position relative; gegen diese Regel hilft
   hier nur Nachdruck — sonst schiebt unser top-Wert den Block nach unten, statt ihn
   kleben zu lassen (gemessen: relative plus top 88px ergab 88px Versatz). */
.single-product.woocommerce div.product > .emeu-produktseite__medienblock > div.woocommerce-product-gallery {
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	position: sticky !important;
	top: calc(var(--emeu-ps-kopf) + var(--emeu-ps-luft)) !important;
}

.single-product.woocommerce div.product > .emeu-produktseite__medienblock > div.summary {
	grid-column: 2;
	grid-row: 1;
}

/* Das Angebot-Abzeichen liegt still (Preis-Logik); falls es doch kommt, nicht das Raster stoeren */
.single-product div.product > .onsale {
	grid-row: 1;
	grid-column: 1;
	justify-self: start;
	align-self: start;
}

/* --- Galerie ------------------------------------------------------------- */

.single-product div.product > .woocommerce-product-gallery img {
	width: 100%;
	height: auto;
}

/* Mehrere Bilder: grosses Bild rechts, senkrechter Streifen links — die Form der
   Vorlage. WooCommerce bringt den Streifen als eigene Liste bereits mit (FlexSlider
   traegt Klick und Wischen); wir ordnen ihn nur neben das Bild statt darunter. */
.single-product .woocommerce-product-gallery.emeu-galerie--streifen {
	display: grid;
	grid-template-columns: var(--emeu-ps-streifen, 85px) minmax(0, 1fr);
	/* v0.6.3 (Lumina 14:3x "die Abstaende passen nicht"): die Luft zwischen Streifen und
	   Hauptbild rechnet den Ring der aktiven Kachel ein — zwischen Ring und Hauptbild
	   bleibt die Haus-Luft (12 px), nicht 12 minus Ring. */
	gap: calc(var(--emeu-ps-streifen-luft, 12px) + var(--emeu-ps-ring-raum, 5px));
	align-items: stretch;
}

.single-product .emeu-galerie--streifen > .flex-viewport,
.single-product .emeu-galerie--streifen > .woocommerce-product-gallery__wrapper {
	grid-column: 2;
	grid-row: 1;
}

/* Die Kachel-Liste. WooCommerce adressiert sie mit .woocommerce div.product div.images
   .flex-control-thumbs — unsere Regeln tragen darum dieselbe Kette plus eine Klasse. */
.single-product.woocommerce div.product div.images.emeu-galerie--streifen .flex-control-thumbs {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	/* v0.6.3: Luft zwischen den Kacheln = Haus-Luft plus Ring-Raum, damit zwischen dem
	   Ring der aktiven Kachel und der naechsten wieder 12 px liegen. */
	gap: calc(var(--emeu-ps-streifen-luft, 12px) + var(--emeu-ps-ring-raum, 5px));
	/* v0.6.3 (Lumina 14:3x "die Raender sind abgeschnitten"): der Rollbereich schnitt
	   den Ring an seinen vier Kanten ab. Innen so viel Platz wie der Ring braucht, aussen
	   um denselben Betrag zurueck, damit die Kacheln buendig mit dem Hauptbild bleiben. */
	margin: calc(-1 * var(--emeu-ps-ring-raum, 5px));
	padding: var(--emeu-ps-ring-raum, 5px);
	list-style: none;
	/* Durchscrollen, wenn mehr Bilder da sind als Platz (Lumina-Setzung) */
	max-height: calc(100% + 2 * var(--emeu-ps-ring-raum, 5px));
	overflow-y: auto;
	scrollbar-width: thin;
	overscroll-behavior: contain;
}

/* FlexSlider legt die Kacheln als Viertel-Spalten nebeneinander (width 25%, float left).
   Im senkrechten Streifen nimmt jede Kachel die volle Breite. */
.single-product.woocommerce div.product div.images.emeu-galerie--streifen .flex-control-thumbs li {
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 0 0 auto;
	width: 100%;
	float: none;
}

/* v0.6.2 GALERIE NACH VORBILD (Lumina 2026-09-18, 14:1x, Vorbild Zalando):
   (a) Hover ueber eine Kachel wechselt das Bild und (b) ein Klick oeffnet die Lightbox
   (Skript emeu-produktseite.js), (c) die aktive Kachel traegt den ACTIVE BORDER = das
   Select-Border-System des Hauses (2 px Linie mit 3 px durchsichtigem Abstand, dieselben
   Werte wie in der Varianten-Auswahl; die Schalter stehen hier ein zweites Mal, weil
   jeder Baustein seine Schalter selbst traegt), (d) Kacheln und Hauptbild tragen den
   Rand der Haus-Karte: 1 px in --color-border wie emeu-modal__karte, Radius 14 px wie
   dort (Radius = ANNAHME, Lumina hat ihn nicht genannt). Das fruehere Abdunkeln der
   inaktiven Kacheln (opacity 0.78) entfaellt: der Active Border kennzeichnet. */
.single-product .woocommerce-product-gallery {
	--emeu-auswahl-rand-staerke: 2px;
	--emeu-auswahl-rand-abstand: 3px;
	/* Raum, den der Ring ausserhalb der Kachel braucht: Linie plus Abstand */
	--emeu-ps-ring-raum: calc(var(--emeu-auswahl-rand-staerke) + var(--emeu-auswahl-rand-abstand));
	--emeu-ps-bild-rand: 1px solid var(--color-border, var(--neutral-d-19, #3d3d3d));
	--emeu-ps-bild-radius: 14px;
}

.single-product.woocommerce div.product div.images.emeu-galerie--streifen .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	aspect-ratio: var(--emeu-ps-bildformat, 2 / 3);
	object-fit: var(--emeu-ps-bildfuellung, cover);
	cursor: pointer;
	/* v0.6.3 (Lumina 14:3x "ein aktives Element macht die anderen muted"): WooCommerce
	   daempft inaktive Kacheln auf 0,5 — hier mit Nachdruck voll sichtbar, der Ring
	   kennzeichnet allein. */
	opacity: 1 !important;
	border: var(--emeu-ps-bild-rand);
	border-radius: var(--emeu-ps-bild-radius);
	outline: var(--emeu-auswahl-rand-staerke, 2px) solid transparent;
	outline-offset: var(--emeu-auswahl-rand-abstand, 3px);
	transition: outline-color 0.15s ease;
}

.single-product.woocommerce div.product div.images.emeu-galerie--streifen .flex-control-thumbs img:focus-visible,
.single-product.woocommerce div.product div.images.emeu-galerie--streifen .flex-control-thumbs img.flex-active {
	outline-color: var(--emeu-swatch-ring, var(--color-headline, currentColor));
}

/* Hauptbild mit demselben Rand; overflow hidden, damit Bild und Zoom-Ebene dem Radius
   folgen. Die Lupe liegt ausserhalb dieses Rahmens (absolut ueber der Galerie).
   v0.6.4 (Lumina 14:4x "rechts und unten abgeschnitten"): FlexSlider misst die Folie
   ohne Rand (jQuery width und height = Inhalt) und setzt Fenster und Folienbreite
   danach — ein echter Rand von 1 px lag also rechts und unten ausserhalb des Fensters.
   Der Rand des Hauptbilds ist deshalb eine Kontur INNERHALB der Kante (outline mit
   Abstand -1 px): sie kostet keinen Platz, folgt dem Radius und liegt ueber der
   Zoom-Ebene. */
.single-product .emeu-galerie--streifen .flex-viewport .woocommerce-product-gallery__image {
	box-sizing: border-box;
	border: 0;
	outline: var(--emeu-ps-bild-rand);
	outline-offset: -1px;
	border-radius: var(--emeu-ps-bild-radius);
	overflow: hidden;
}

/* v0.9.4 LB-1 (Lumina-GO 2026-09-24 17:5x): ueber dem Hauptbild zeigt der Zeiger die Lupe mit Plus — der Klick
   oeffnet die Lightbox. Auch am Bild-Element und an der Zoom-Ebene: img.zoomImg liegt ueber dem Link und zeigte
   bisher den Pfeil (gemessen mit elementFromPoint). */
.single-product .emeu-galerie--streifen .flex-viewport .woocommerce-product-gallery__image,
.single-product .emeu-galerie--streifen .flex-viewport .woocommerce-product-gallery__image a,
.single-product .emeu-galerie--streifen .flex-viewport .woocommerce-product-gallery__image .zoomImg {
	cursor: zoom-in;
}

/* Der Zoom-Knopf sitzt ueber dem grossen Bild, nicht im Raster */
.single-product .emeu-galerie--streifen > .woocommerce-product-gallery__trigger {
	position: absolute;
	z-index: 2;
}

.single-product .woocommerce-product-gallery {
	position: relative;
}

/* Rueckfall ohne FlexSlider: das Skript ordnet die Bilder selbst (eigene Klasse,
   damit sich beide Wege nicht in die Quere kommen) */
.single-product .woocommerce-product-gallery__wrapper.emeu-galerie--eigen {
	display: grid;
	grid-template-columns: var(--emeu-ps-streifen, 85px) minmax(0, 1fr);
	grid-auto-rows: min-content;
	gap: var(--emeu-ps-streifen-luft, 12px);
	align-items: start;
}

.single-product .emeu-galerie--eigen > .woocommerce-product-gallery__image.is-buehne {
	grid-column: 2;
	grid-row: 1 / -1;
}

.single-product .emeu-galerie--eigen > .woocommerce-product-gallery__image:not(.is-buehne) {
	grid-column: 1;
	cursor: pointer;
	opacity: 0.78;
	outline: 1px solid transparent;
	outline-offset: 2px;
	transition: opacity 0.15s ease, outline-color 0.15s ease;
}

.single-product .emeu-galerie--eigen > .woocommerce-product-gallery__image:not(.is-buehne):hover,
.single-product .emeu-galerie--eigen > .woocommerce-product-gallery__image:not(.is-buehne):focus-visible {
	opacity: 1;
	outline-color: var(--color-rule, currentColor);
}

/* Bildformat: 2:3 als Haus-Vorgabe, mit Wahlfreiheit (Lumina-Setzung).
   Der Schalter ist die Variable — eine Site oder ein Produkt kann sie umstellen. */
.single-product .woocommerce-product-gallery__image img {
	aspect-ratio: var(--emeu-ps-bildformat, 2 / 3);
	object-fit: var(--emeu-ps-bildfuellung, cover);
	display: block;
}

/* Die Kacheln des Streifens tragen dasselbe Format, nur klein */
.single-product .emeu-galerie--streifen > .woocommerce-product-gallery__image:not(.is-buehne) img {
	width: 100%;
}

.single-product .woocommerce-product-gallery.emeu-bildformat-frei {
	--emeu-ps-bildformat: auto;
	--emeu-ps-bildfuellung: contain;
}

/* --- Angaben und Fussbereich --------------------------------------------- */

/* Vorgabe-Ort ist die Kaufspalte: die Bloecke stehen unter dem Warenkorb-Knopf und
   rollen am klebenden Medienblock vorbei (wie in der Vorlage). */
/* v0.6.6 (Lumina 2026-09-18 14:5x): der Zug steht in zwei Teilen — Klappen (60) und, nach der
   Beschreibung (70), die Produktsicherheit als letzter Kasten (80, Zusatzklasse --sicherheit).
   Beide Teile tragen dasselbe Mass; der Kasten zieht seine Linien aus dem Angaben-Baustein. */
.single-product div.summary > .emeu-produktseite__angaben {
	margin-top: 0; /* v0.7.3 (Lumina 2026-09-18 18:0x): ohne die 48 px der Setzung 2026-09-17, sie zerrissen das Layout */
	margin-bottom: 0;
	min-width: 0;
}

/* v0.7.2 (Lumina 2026-09-18 17:5x): steht das Accordion direkt ueber dem Kasten Produktsicherheit,
   entfaellt dessen obere Linie — die letzte Klappe schliesst bereits mit einer Linie unten. Greift nur
   bei direkter Nachbarschaft (Anordnung 0.7.1: Beschreibung 55, Klappen 60, Sicherheit 80); steht
   etwas dazwischen oder fehlen die Klappen, bleibt die Linie. */
.single-product div.summary > .emeu-produktseite__angaben + .emeu-produktseite__angaben--sicherheit .emeu-angaben__block:first-child {
	border-top: 0;
}

/* Zweiter Ort (Option emeu_produktseite_angaben_ort = unter): quer unter beiden
   Spalten, dort wo frueher die Reiter standen. */
.single-product div.product > .emeu-produktseite__angaben,
.single-product .emeu-produktseite__fuss {
	grid-column: 1 / -1;
	min-width: 0;
}

/* --- Kaufspalte: Marke --------------------------------------------------- */

.single-product .emeu-marke {
	margin: 0 0 0.35em;
	font-size: 0.9em;
	letter-spacing: 0.02em;
}

.single-product .emeu-marke__link {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Kaufspalte: Preisblock ---------------------------------------------- */

/* Lumina-Setzung 2026-09-17: zwischen Preiszeile und Ankerzeile KEIN
 * zusaetzlicher Abstand. Den Abstand macht allein die Zeilenhoehe der beiden
 * Zeilen — ein gap daneben waere Luft, die niemand bestellt hat. */
/* FESTE HOEHE DES PREISBLOCKS (Lumina 2026-09-17, Versuchswert zuerst 260, dann auf 180 gesetzt).
 *
 * Der Preisblock ist verschieden hoch, je nachdem was ein Produkt zu sagen hat:
 * nur der Preis, oder Preis plus Hinweiszeile, oder zusaetzlich die Ankerzeile
 * mit Streichpreis und Ersparnis. Bei variablen Produkten kann das sogar von
 * Variante zu Variante wechseln — und alles darunter, auch der Warenkorb-Knopf,
 * wandert mit. Eine feste Hoehe nimmt dem Block diese Bewegung.
 *
 * MINDEST-Hoehe statt starrer Hoehe: bei 180 ist das Ergebnis heute dasselbe,
 * aber ein Inhalt, der einmal groesser wird, wird nicht abgeschnitten. Eine
 * starre Hoehe waere eine Falle, die erst beim laengsten Produkt zuschnappt.
 *
 * Die Zahl liegt auf einem eigenen Schalter — ein Griff, andere Hoehe. */
.single-product div.summary {
	--emeu-preis-hoehe: 180px;
}

.single-product .emeu-preis {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0.6em 0 0.4em;
	min-height: var(--emeu-preis-hoehe, 180px);
}

/* Der Abstand steht bewusst getrennt: zwischen den Stuecken EINER Zeile ja,
 * zwischen umgebrochenen Zeilen nein. Sonst brachte der Umbruch unten Luft
 * mit, die niemand bestellt hat. */
.single-product .emeu-preis__zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.4em;
	margin: 0;
}

.single-product .emeu-preis__jetzt {
	font-size: 1.45em;
	font-weight: 700;
	line-height: 1.2;
}

/* Die Preishinweise stehen IN der Preiszeile (Lumina-Setzung 2026-09-17).
 * Germanized liefert sie in eigenen Bloecken — div und p. Wir aendern ihre
 * Markierung nicht, wir legen sie nur in die Zeile: aus Block wird Zeilenfluss.
 * Ein Umbruch bleibt erlaubt; auf schmalen Spalten rutschen die Hinweise unter
 * den Preis, statt ihn zu quetschen. */
/* Lumina-Setzung 2026-09-17: die Hinweise stehen fest auf 14px. Das Haus hat
 * diese Groesse bereits als Stufe der Schrift-Leiter (Text, 14/20) — wir nehmen
 * sie, statt eine achte Definition danebenzustellen. Wer die Stufe spaeter
 * verschiebt, verschiebt den Preis mit; genau dafuer ist die Leiter da.
 * Das frueher hier stehende display:inline ist entfallen: als Flex-Kind wurde es
 * ohnehin zu block gerechnet — eine Regel, die nichts tat. */
/* Lumina 2026-09-17: nach dem Preis wird GESETZT umbrochen, nicht zufaellig.
 * Bei einem teuren Artikel wird der Grundpreis lang (2.799,00 EUR / kg und
 * mehr) und riss die Zeile an irgendeiner Stelle auf. Ein voller Grundanteil
 * schickt die Hinweise deshalb immer geschlossen in die naechste Zeile —
 * die Gruppe bleibt beisammen, nur der Platz ist ein eigener. */
.single-product .emeu-preis__hinweise {
	flex: 0 0 100%;
	font-size: var(--w-schrift-text-groesse, 14px);
	line-height: var(--w-schrift-text-zeile, 20px);
}

/* Germanized legt fuer Grundpreis und Pfand auch dann leere Platzhalter an,
 * wenn das Produkt sie nicht hat — bei variablen Produkten fuellt ihr Skript
 * sie nach der Variantenwahl. Sie muessen also STEHEN BLEIBEN, duerfen aber
 * nichts einnehmen. Ein frueher hier stehender Trennpunkt stand deshalb auch
 * um die leeren herum: Lumina sah zwei Punkte vor "inkl. MwSt.". Statt eines
 * Zeichens trennt jetzt ein Abstand — den bringt ein unsichtbarer Platzhalter
 * nicht mit. Wird er spaeter gefuellt, erscheint er samt Abstand von selbst. */
.single-product .emeu-preis__hinweis:has(> :empty) {
	display: none;
}

.single-product .emeu-preis__hinweis {
	margin-right: 0.45em;
}

.single-product .emeu-preis__hinweis:last-child {
	margin-right: 0;
}

.single-product .emeu-preis__hinweise .legal-price-info,
.single-product .emeu-preis__hinweise .wc-gzd-additional-info,
.single-product .emeu-preis__hinweise p {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

/* Der Grundpreis traegt bei Germanized zusaetzlich die Klasse .price — und
 * damit greift eine Regel aus dem WooCommerce-Kern:
 *
 *   .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price
 *     { color: #958e09; font-size: 1.25em }
 *
 * Die 17,5px waren also 14 mal 1,25, und das Oliv rgb(149,142,9) ist ihr #958e09.
 * Beides gefunden, nicht geraten (assets/css/woocommerce.css).
 *
 * Wir nehmen die Regel auf ihrem eigenen Feld auf: derselbe Aufbau, eine Klasse
 * mehr. Die Farbe lassen wir bewusst stehen, solange darueber nicht entschieden
 * ist — geaendert wird nur, was beauftragt war. */
.woocommerce div.product .emeu-preis__hinweise p.price,
.woocommerce div.product .emeu-preis__hinweise .price-unit,
.single-product .emeu-preis__hinweise p.price,
.single-product .emeu-preis__hinweise .price-unit {
	font-size: var(--w-schrift-text-groesse, 14px);
	line-height: var(--w-schrift-text-zeile, 20px);
}

/* Germanized trennt inkl. MwSt. und zzgl. Versandkosten mit einem festen
 * Leerzeichen — das genuegt im Fluss, ein zweiter Abstand von uns waere doppelt. */
.single-product .emeu-preis__hinweise a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Die zweite Zeile — "Letzter niedrigster Preis: 32,00 EUR  -13 %" — traegt
 * dieselbe feste Stufe wie die Hinweise (Lumina-Setzung 2026-09-17). Die Groesse
 * sitzt an der ZEILE, nicht an ihren drei Teilen: so koennen Titel, Anker und
 * Ersparnis nicht auseinanderlaufen. */
.single-product .emeu-preis__zeile--anker {
	font-size: var(--w-schrift-text-groesse, 14px);
	line-height: var(--w-schrift-text-zeile, 20px);
}

/* Der Anker ist der Preis von vorher — er wird durchgestrichen gezeigt */
.single-product .emeu-preis__anker .emeu-pf__val {
	text-decoration: line-through;
}

/* Die Ersparnis erbt die Groesse ihrer Zeile — nur das Gewicht hebt sie heraus. */
.single-product .emeu-preis__sparen {
	font-weight: 700;
}

/* --- Kaufspalte: Lieferkarte --------------------------------------------- */

/* Lumina-Setzung 2026-09-17: Knopf, Karte und Angaben stehen mit GENAU 48
   Pixeln Abstand untereinander. Die Zahl steht in Pixeln, weil sie eine
   gesetzte Groesse ist und keine mitwachsende — em haetten je nach Schriftgrad
   mal 44 und mal 52 ergeben.
   Der Abstand sitzt jeweils OBEN am unteren Nachbarn, und die Nachbarn tragen
   unten nichts: so kann nichts kollabieren und nichts sich addieren. */
.single-product .emeu-lieferkarte {
	display: flex;
	flex-direction: column;
	gap: 0.45em;
	margin: 48px 0 0;
	padding: 1em 1.1em;
	border: 1px solid var(--color-rule, currentColor);
	border-radius: 8px; /* Mass aus der Vorlage */
}

/* Der Knopf-Block traegt unten nichts. Gemessen kam er mit 34px eigenem Rand:
   die Luecke war dann zwar auch 48 — aber nur, weil der groessere von beiden
   Raendern gewinnt. Das ist ein Zufall, der bei der naechsten Aenderung kippt.
   Mit Nachdruck, weil eine Regel im Gewicht von drei Klassen hier nicht durchkam. */
.single-product div.summary > form.cart {
	margin-bottom: 0 !important;
}

/* Schrift wie im Routenplaner-Kasten: Name als Nebenzeile, Wert als Kasten-Text */
.single-product .emeu-lieferkarte__zeile {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em 0.6em;
	font-size: var(--emeu-kasten-text-groesse);
	line-height: var(--emeu-kasten-text-zeile);
	font-weight: var(--emeu-kasten-text-gewicht);
	color: var(--color-body, #3d3d3d);
}

.single-product .emeu-lieferkarte__name {
	flex: 0 0 auto;
	min-width: 7.5em;
	font-size: var(--emeu-kasten-neben-groesse);
	line-height: var(--emeu-kasten-neben-zeile);
	font-weight: var(--emeu-kasten-neben-gewicht);
	color: var(--color-muted, #666666);
}

.single-product .emeu-lieferkarte__wert p {
	margin: 0;
}

/* v0.6.7 (Lumina 2026-09-18 15:0x, Vorbild Zalando): die Karte als Raster —
   links das Lieferwagen-Zeichen ueber beide Zeilen, daneben die Lieferspanne
   (Datum, Kasten-Text) und darunter die Lieferart (Nebenzeile), rechts auf der
   Hoehe der Spanne der Lieferpreis. Weitere Zeilen (Rueckgabe) laufen darunter
   ueber die volle Breite. */
.single-product .emeu-lieferkarte--spanne {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	/* v0.6.8 (Lumina 2026-09-18 15:2x): das Zeichen steht UEBER der Zeile mit
	   Lieferdatum und Kosten, nicht links daneben. */
	grid-template-areas:
		"zeichen zeichen"
		"spanne  preis"
		"art     art";
	column-gap: 0.8em;
	row-gap: 0.15em;
	align-items: start;
}

/* Das Zeichen (v0.6.8, Lumina 2026-09-18 15:2x): "box-taped" im Stil Light aus dem
   Font-Awesome-Pro-Paket des Hauses (7.3.0, X:/Webkonzepte/Fontawesome, Pfad
   uebernommen), als Maske in der Textfarbe. Steht ueber der Datum-Zeile. */
.single-product .emeu-lieferkarte__zeichen {
	grid-area: zeichen;
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin: 0 0 0.45em;
	background: currentColor;
	color: var(--color-body, #3d3d3d);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 416l0-256-112 0 0 64c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-64-112 0 0 256c0 17.7 14.3 32 32 32l320 0c17.7 0 32-14.3 32-32zM176 160l0 64c0 8.8 7.2 16 16 16l64 0c8.8 0 16-7.2 16-16l0-64-96 0zm90.8-32l-22.9-80-39.9 0-22.9 80 85.6 0zm33.3 0l108.6 0-47.6-66.6c-6-8.4-15.7-13.4-26-13.4l-57.9 0 22.9 80zm-32-112l67 0c20.7 0 40.1 10 52.1 26.8l48.9 68.5c7.8 10.9 11.9 23.9 11.9 37.2L448 416c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 148.5c0-13.3 4.2-26.3 11.9-37.2L60.9 42.8C72.9 26 92.3 16 112.9 16l155.1 0zM170.8 48l-57.9 0c-10.3 0-20 5-26 13.4l-47.6 66.6 108.6 0 22.9-80z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 416l0-256-112 0 0 64c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-64-112 0 0 256c0 17.7 14.3 32 32 32l320 0c17.7 0 32-14.3 32-32zM176 160l0 64c0 8.8 7.2 16 16 16l64 0c8.8 0 16-7.2 16-16l0-64-96 0zm90.8-32l-22.9-80-39.9 0-22.9 80 85.6 0zm33.3 0l108.6 0-47.6-66.6c-6-8.4-15.7-13.4-26-13.4l-57.9 0 22.9 80zm-32-112l67 0c20.7 0 40.1 10 52.1 26.8l48.9 68.5c7.8 10.9 11.9 23.9 11.9 37.2L448 416c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 148.5c0-13.3 4.2-26.3 11.9-37.2L60.9 42.8C72.9 26 92.3 16 112.9 16l155.1 0zM170.8 48l-57.9 0c-10.3 0-20 5-26 13.4l-47.6 66.6 108.6 0 22.9-80z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* v0.6.9 (Lumina 2026-09-18 15:2x): Lieferdatum und Lieferpreis betont — die
   600-Stufe der Haus-Schriftleiter (--w-schrift-betont), nicht das Kasten-Gewicht. */
.single-product .emeu-lieferkarte__spanne {
	grid-area: spanne;
	font-size: var(--emeu-kasten-text-groesse);
	line-height: var(--emeu-kasten-text-zeile);
	font-weight: var(--w-schrift-betont, 600);
	color: var(--color-body, #3d3d3d);
}

.single-product .emeu-lieferkarte__art {
	grid-area: art;
	font-size: var(--emeu-kasten-neben-groesse);
	line-height: var(--emeu-kasten-neben-zeile);
	font-weight: var(--emeu-kasten-neben-gewicht);
	color: var(--color-muted, #666666);
}

.single-product .emeu-lieferkarte__preis {
	grid-area: preis;
	align-self: start;
	text-align: right;
	white-space: nowrap;
	font-size: var(--emeu-kasten-text-groesse);
	line-height: var(--emeu-kasten-text-zeile);
	font-weight: var(--w-schrift-betont, 600); /* v0.6.9 */
	color: var(--color-body, #3d3d3d);
}

.single-product .emeu-lieferkarte--spanne > .emeu-lieferkarte__zeile {
	grid-column: 1 / -1;
	margin-top: 0.45em;
}

/* --- Kaufspalte: Bestand aus 0.1.0 --------------------------------------- */

/* Mengen-Schalter am In-den-Warenkorb dauerhaft entfernen (Menge bleibt 1). */
.single-product form.cart .quantity {
	display: none !important;
}

/* In-den-Warenkorb-Button volle Breite, flexibel am Eltern-Element:
   width 100% fuellt den Eltern-DIV; flex 1 1 auto laesst den Button in einer Flex-Zeile
   (z.B. neben dem Merkliste-Herz) den freien Platz einnehmen. */
.single-product form.cart button.single_add_to_cart_button {
	width: 100%;
	flex: 1 1 auto;
	box-sizing: border-box;
	justify-content: center;
}

/* --- Kaufspalte: Knopf-Zeile mit Merk-Herz ------------------------------- */

/* Der Warenkorb-Knopf und das Herz stehen nebeneinander in einer Zeile.
   Das Herz ist rund und so hoch wie der Knopf — Mass aus der Vorlage (48). */
/* Kein gap am Formular: es enthaelt versteckte Kinder (Mengen-Schalter, PayPal-Spinner),
   deren Zwischenraum den Knopf sonst um eine Luecke nach rechts schiebt. Der Abstand
   sitzt darum am Herz selbst. */
.single-product form.cart:has(.emeu-merken) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
}

/* Mit Herz daneben darf der Knopf nicht mehr die volle Breite beanspruchen —
   sonst schiebt er das Herz in die naechste Zeile. Er nimmt, was uebrig bleibt. */
.single-product form.cart:has(.emeu-merken) button.single_add_to_cart_button {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
}

/* VARIABLE PRODUKTE (Lumina 2026-09-17): dort steht der Knopf nicht direkt im
   Formular, sondern zwei Ebenen tiefer — form > .single_variation_wrap >
   .variations_button. Die Flex-Zeile oben griff deshalb ins Leere: der Knopf
   bekam "width: auto" ohne einen Flex-Elternteil, der ihm Platz zuteilt, und
   fasste nur noch um seinen Text (gemessen 176 statt 372). Also bekommt die
   echte Knopf-Zeile dieselbe Rolle wie sonst das Formular. */
.single-product form.cart:has(.emeu-merken) .single_variation_wrap {
	flex: 1 1 100%;
	width: 100%;
}

.single-product form.cart:has(.emeu-merken) .variations_button {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	width: 100%;
}

.single-product .emeu-merken {
	flex: 0 0 auto;
	display: flex;
	align-items: stretch;
	margin-inline-start: var(--emeu-ps-knopf-luft, 12px);
}

.single-product .emeu-merken .jet-data-store-link-wrapper {
	display: flex;
	align-items: stretch;
}

.single-product .emeu-merken .jet-data-store-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--emeu-ps-herz, 48px);
	min-height: var(--emeu-ps-herz, 48px);
	padding: 0;
	border: 1px solid var(--color-rule, currentColor);
	border-radius: 999px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.single-product .emeu-merken .jet-data-store-link:hover,
.single-product .emeu-merken .jet-data-store-link:focus-visible {
	border-color: currentColor;
}

.single-product .emeu-merken .jet-data-store-link:active {
	transform: scale(0.96);
}

.single-product .emeu-merken .jet-data-store-link__icon svg {
	display: block;
	width: 1.35em;
	height: 1.35em;
}

/* Die Varianten-Auswahl steht ueber der Knopf-Zeile, nicht daneben */
.single-product form.cart:has(.emeu-merken) > .variations,
.single-product form.cart:has(.emeu-merken) > .woocommerce-variation {
	flex: 1 0 100%;
}

/* --- Nichts laeuft waagerecht ueber ------------------------------------- */

.single-product div.product img,
.single-product div.product table,
.single-product div.product iframe {
	max-width: 100%;
}

/* --- Umbruchpunkte des Hauses -------------------------------------------- */

/* compact — die Rinne bleibt bei 64: das ist der Mindestabstand der Setzung */

/* tablet_portrait — ab hier eine Spalte, der Medienblock klebt nicht mehr.
   Die beiden Maasse bleiben; beide Bloecke stehen mittig untereinander.
   2026-09-24 01:3x (Lumina: auf dem Telefon legt sich das Bild ueber den Text): die Klebe-Regel oben traegt !important
   (gegen WooCommerce' position relative), darum braucht auch die Ruecknahme hier Nachdruck — ohne ihn blieb die Galerie
   bei 504 px sticky (top 88 px) und lag nach dem Rollen ueber dem Produkttext (gemessen). */
@media (max-width: 1024px) {
	.single-product div.product {
		--emeu-ps-spalten: minmax(0, 1fr);
		grid-template-columns: var(--emeu-ps-spalten);
		row-gap: 2rem;
	}

	.single-product.woocommerce div.product > .emeu-produktseite__medienblock > div.woocommerce-product-gallery,
	.single-product.woocommerce div.product > .emeu-produktseite__medienblock > div.summary {
		grid-column: 1;
		grid-row: auto;
		position: static !important;
		top: auto !important;
		justify-self: center;
	}
}

/* mobile_portrait */
@media (max-width: 600px) {
	.single-product {
		--emeu-ps-rand: var(--edge-padding__bp-f, 1.5rem);
	}
}


/* --- v0.6.0: Texte des Produkts (Kurzbeschreibung, Beschreibung) ----------- */

/* Kurzbeschreibung in der Kaufspalte: unter dem Preisblock, vor dem Knopf.
   Textmass des Hauses (regulaer 300), kein eigener Kasten.
   v0.6.5 (Lumina 2026-09-18 14:4x): Abschnitt mit Ueberschrift "Auf einen Blick";
   das Textmass sitzt am Text, damit der Titel dasselbe Mass wie der Titel der
   Beschreibung bekommt (Annahme: beide Titel gleich gross und gleich betont). */
.single-product div.summary > .emeu-produktseite__kurz {
	margin: 16px 0 48px; /* v0.7.5 (Lumina 2026-09-18 18:1x, Dev-Tools): unten 48 statt 24 px */
	min-width: 0;
}

.single-product .emeu-produktseite__kurz-text {
	font-size: var(--w-schrift-text-groesse, 14px);
	line-height: var(--w-schrift-text-zeile, 20px);
	font-weight: var(--w-schrift-regulaer, 300);
	max-width: 60ch;
}

.single-product .emeu-produktseite__kurz-text p {
	margin: 0 0 0.6em;
}

.single-product .emeu-produktseite__kurz-text p:last-child {
	margin-bottom: 0;
}

/* Beschreibung in der Kaufspalte unter den Angaben-Bloecken: die Spalte rollt am
   klebenden Medienblock vorbei (Lumina-Setzung 2026-09-16). Ein Abschnitt unter
   beiden Spalten laege hinter der klebenden Galerie (gemessen 2026-09-18). */
.single-product div.summary > .emeu-produktseite__beschreibung {
	margin-top: 48px;
	padding-bottom: 48px; /* v0.7.4 (Lumina 2026-09-18 18:1x): 48 px Luft nach unten zum Accordion */
	min-width: 0;
}

/* v0.6.5: ein Mass fuer beide Titel ("Auf einen Blick" und "Unser Produkt im Detail"). */
.single-product .emeu-produktseite__kurz-titel,
.single-product .emeu-produktseite__beschreibung-titel {
	margin: 0 0 16px;
	font-size: 1.15em;
	line-height: 1.3;
	font-weight: var(--w-schrift-betont, 600);
}

.single-product .emeu-produktseite__beschreibung-text {
	font-size: var(--w-schrift-text-groesse, 14px);
	line-height: var(--w-schrift-text-zeile, 20px);
	font-weight: var(--w-schrift-regulaer, 300);
	max-width: 72ch;
}

.single-product .emeu-produktseite__beschreibung-text p,
.single-product .emeu-produktseite__beschreibung-text ul,
.single-product .emeu-produktseite__beschreibung-text ol {
	margin: 0 0 1em;
}

.single-product .emeu-produktseite__beschreibung-text ul,
.single-product .emeu-produktseite__beschreibung-text ol {
	padding-left: 1.2em;
}

.single-product .emeu-produktseite__beschreibung-text li {
	margin: 0 0 0.35em;
}

.single-product .emeu-produktseite__beschreibung-text > :last-child {
	margin-bottom: 0;
}

/* --- v0.6.1: Produkttitel (Lumina 2026-09-18 13:3x): '.woocommerce div.product .product_title braucht
   Line-Height 1.2' -- die Ueberschrift lief mit der Zeilenhoehe 1, dreizeilige Titel klebten. */
.woocommerce div.product .product_title,
.single-product.woocommerce div.product .product_title {
	line-height: 1.2;
}

/* ---------------------------------------------------------------------- */
/* v0.7.6 (Lumina 2026-09-18 22:2x): Brotkrumen-Pfad in der Haus-Huelle —    */
/* das Rand-Polster kommt aus der Worker-Klasse edge-padding, die Leinwand    */
/* ist dieselbe wie beim Produkt (1700 plus Rand, mittig).                     */
/* ---------------------------------------------------------------------- */
.single-product .emeu-produktseite__brotkrumen {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--emeu-ps-leinwand) + 2 * var(--emeu-ps-rand));
	margin-inline: auto;
}
.single-product .emeu-produktseite__brotkrumen .woocommerce-breadcrumb {
	margin: 0 0 1rem;
}

/* ---------------------------------------------------------------------- */
/* v0.9.0 (Lumina 2026-09-24, Etappe 2): Kategorie-Pfad ueber dem Titel,    */
/* an der Stelle der frueheren Herstellerzeile und in ihrem Mass.            */
/* ---------------------------------------------------------------------- */
.single-product .emeu-kategoriepfad {
	margin: 0 0 0.35em;
	font-size: 0.9em;
	letter-spacing: 0.02em;
}
.single-product .emeu-kategoriepfad__link {
	color: inherit;
	text-decoration: none;
}
.single-product .emeu-kategoriepfad__link:hover,
.single-product .emeu-kategoriepfad__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.single-product .emeu-kategoriepfad__trenner {
	margin: 0 0.4em;
}

/* ---------------------------------------------------------------------- */
/* v0.9.3 (Lumina 2026-09-24 17:3x): Luft unter dem Kopf, Herz, ohne Lupe  */
/* ---------------------------------------------------------------------- */

/* Das Produkt klebte am Kopf (gemessen: 0 px). Oben steht jetzt derselbe Rand wie links
   und rechts (2rem, unter 600 px 1,5rem) — am Inhaltsbereich, damit auch Hinweise
   ("in den Warenkorb gelegt") nicht am Kopf kleben. */
.single-product main.site-main {
	padding-top: var(--emeu-ps-rand);
}

/* Das Herz im Kreis: dieselben Symbole wie im Raster — umrandet, gefuellt, sobald das
   Produkt gemerkt ist (JetEngine setzt in-store bzw. jet-remove-from-store am Link);
   gemerkt in der Akzentfarbe wie auf der Karte. */
.single-product .emeu-merken .emeu-merken__symbol {
	display: inline-flex;
}

.single-product .emeu-merken .emeu-svg {
	display: block;
	width: 1.35em;
	height: 1.35em;
	fill: currentColor;
}

/* gleiches Gewicht wie die Regel darueber, spaeter — das gefuellte Herz ruht */
.single-product .emeu-merken .emeu-svg--heart-solid,
.single-product .emeu-merken .jet-data-store-link.in-store .emeu-svg--heart,
.single-product .emeu-merken .jet-data-store-link.jet-remove-from-store .emeu-svg--heart {
	display: none;
}

.single-product .emeu-merken .jet-data-store-link.in-store .emeu-svg--heart-solid,
.single-product .emeu-merken .jet-data-store-link.jet-remove-from-store .emeu-svg--heart-solid {
	display: block;
}

.single-product .emeu-merken .jet-data-store-link.in-store,
.single-product .emeu-merken .jet-data-store-link.jet-remove-from-store {
	color: var(--color-primary-accent, currentColor);
}

/* Die Lupe ueber dem Bild entfaellt: oben rechts sitzt die KI-Kennzeichnung. Die Lightbox
   oeffnet der Klick aufs Bild (emeu-produktseite.js seit 0.6.2, er loest die unsichtbare
   Lupe aus). */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	display: none !important;
}

/* ---------------------------------------------------------------------- */
/* v0.9.5 KI-1 (Lumina-GO 2026-09-24 18:0x): die KI-Pille am Bild in der   */
/* Lightbox                                                                 */
/* ---------------------------------------------------------------------- */

/* Der Rahmen liegt deckungsgleich ueber dem Bild in der Zoom-Ebene der Lightbox (Groesse setzt
   das Skript); die Pille sitzt darin wie auf der Seite oben rechts (Regeln des Bausteins
   .emeu-ai-frame). Klicks und Ziehen gehen durch zum Bild. */
.single-product .pswp .pswp__zoom-wrap > .emeu-lb-ki.emeu-ai-frame {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
}

/* Beim Heranzoomen haelt die Pille ihre Groesse (Gegen-Skalierung im Skript), die Ecke bleibt am Bild */
.single-product .pswp .emeu-lb-ki .emeu-ai-label {
	transform-origin: top right;
}

/* ---------------------------------------------------------------------- */
/* v0.9.6 Lightbox nach Vorbild (Lumina 2026-09-24 18:2x): ohne Zoom und   */
/* Vollbild, mit Bildleiste unter dem Bild                                  */
/* ---------------------------------------------------------------------- */

/* Die Lightbox liegt ueber allem, was schwebt. Gemessen 18:3x mit elementFromPoint: die Rueckruf-Lasche
   (#emeu-rueckruf-fenster, z-index 100000) lag ueber dem Weiter-Pfeil, die Werkzeugleiste der Angemeldeten
   (z-index 99999) ueber Zaehler und Schliessen. PhotoSwipe selbst steht auf 1500. */
.single-product .pswp {
	z-index: 100001;
}

/* (a) Ohne Zoom zeigt der Zeiger ueber dem Bild keine Lupe mehr (PhotoSwipe setzt zoom-in, solange das
   Bild kleiner als in voller Groesse steht) */
.single-product .pswp.pswp--zoom-allowed .pswp__img {
	cursor: default;
}

/* (c) Die Bildleiste ganz unten, die Beschriftung (d) darueber. Die Hoehe der Leiste setzt das Skript als
   --emeu-lb-leiste an die Lightbox und haelt dem Bild genau so viel Platz frei. */
.single-product .pswp.emeu-lb--leiste .pswp__caption {
	bottom: var(--emeu-lb-leiste, 96px);
}

.single-product .pswp .emeu-lb-leiste {
	--emeu-lb-kachel-breite: 48px;
	--emeu-lb-ring: var(--emeu-auswahl-rand-staerke, 2px);
	--emeu-lb-ring-abstand: var(--emeu-auswahl-rand-abstand, 3px);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	box-sizing: border-box;
	padding: 12px 16px;
	padding-bottom: max(12px, env(safe-area-inset-bottom));
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	touch-action: pan-x;
	transition: opacity 0.333s cubic-bezier(0.4, 0, 0.22, 1);
}

.single-product .pswp .emeu-lb-leiste::-webkit-scrollbar {
	display: none;
}

/* Waehrend PhotoSwipe seine Bedienung versteckt (Oeffnen, Schliessen), geht die Leiste mit */
.single-product .pswp .pswp__ui--hidden .emeu-lb-leiste {
	opacity: 0.001;
}

/* Die Reihe steht mittig, solange sie ins Fenster passt; ist sie breiter, beginnt sie links und rollt */
.single-product .pswp .emeu-lb-leiste__reihe {
	display: flex;
	gap: 12px;
	width: max-content;
	margin: 0 auto;
}

/* Kacheln im Hochformat 2:3 wie die Produktbilder. Vier Klassen und volles Zuruecksetzen, damit die
   Haus-Knopfregel nicht greift (body[class*="elementor-kit-"] button, Gewicht 0,1,2) — auch nicht ihr
   Fokus-Zweig :focus:not(:focus-visible) mit outline none (Gewicht 0,3,2): der nahm nach einem Mausklick
   den Ring der aktiven Kachel weg (gemessen 18:5x mit echter Maus). */
.single-product .pswp .emeu-lb-leiste .emeu-lb-leiste__bild {
	box-sizing: content-box;
	flex: 0 0 auto;
	display: block;
	width: var(--emeu-lb-kachel-breite);
	height: calc(var(--emeu-lb-kachel-breite) * 1.5);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	gap: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	line-height: 0;
	font-size: 0;
	color: inherit;
	cursor: pointer;
	opacity: 1;
	outline: var(--emeu-lb-ring) solid transparent;
	outline-offset: var(--emeu-lb-ring-abstand);
	transition: outline-color 0.15s ease;
}

.single-product .pswp .emeu-lb-leiste__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* Das aktive Bild traegt den Haus-Ring (Linie mit Abstand wie die Kacheln der Seite), hier hell auf dem
   dunklen Grund; die uebrigen bleiben voll sichtbar, der Ring kennzeichnet allein (Linie seit 0.6.3). */
.single-product .pswp .emeu-lb-leiste .emeu-lb-leiste__bild.is-aktiv,
.single-product .pswp .emeu-lb-leiste .emeu-lb-leiste__bild:focus-visible {
	outline-color: #fff;
}

.single-product .pswp .emeu-lb-leiste .emeu-lb-leiste__bild:hover:not(.is-aktiv) {
	background: transparent;
	outline-color: rgba(255, 255, 255, 0.45);
}