/**
 * MaxiCommerce — Widget „Produktgalerie".
 *
 * AUFBAU
 *
 * 1. **Variablen-Vertrag (wie Warenkorb und Menü, CLAUDE.md).** Jedes
 *    Stil-Steuerelement im Elementor-Bedienfeld setzt eine `--mc-pg-*`-
 *    Variable, diese Datei liest sie. Kein Steuerelement schreibt je eine
 *    gepanzerte Eigenschaft direkt — Gruppen (Rahmen, Schatten, Typografie)
 *    laufen über `fields_options`.
 *
 * 2. **Theme-Panzer nur dort, wo Themes wirklich hinlangen.** Pfeile,
 *    Vorschaubilder und Punkte sind echte `<button>`; fremde Themes und
 *    Kit-Stile geben Buttons Hintergrund, Rahmen, Innenabstand und Rundung,
 *    oft spezifischer als eine einfache Klasse. Genau diese Eigenschaften
 *    stehen hier mit `!important` und lesen ihren Wert IMMER aus einer
 *    Variablen. Alles andere (Bild, Bühne, Labels) kommt ohne `!important`
 *    aus — dort kann ein Steuerelement gar nicht tot laufen.
 *
 * 3. **Formen sind Voreinstellungen, kein Zwang.** Die Formen der Pfeile
 *    (`.mc-pg--nav-*`) und der Labels (`.mc-pg--badge-*`) belegen dieselben
 *    Variablen wie die Steuerelemente — nur mit geringerer Spezifität und
 *    AM SELBEN ELEMENT. Das ist der Kern: Eine direkt gesetzte Variable
 *    schlägt jede geerbte, egal wie spezifisch die Erbregel ist. Deshalb
 *    schreiben die Steuerelemente für Pfeile/Vorschaubilder/Punkte ebenfalls
 *    auf das Element selbst (`{{WRAPPER}} .mc-pg .mc-pg-arrow`), nicht auf
 *    die Wurzel — dann entscheidet die Spezifität und das Bedienfeld
 *    gewinnt. Ein geleertes Feld fällt auf die Form zurück; „gar kein
 *    Hintergrund" ist die Form „Ohne Fläche".
 *
 *    Umgekehrt gilt: reine ANORDNUNGS-Variablen (Spalten, Abstände,
 *    Pfeil-Ort, Seitenanzeige-Art) setzt das Bedienfeld an der WURZEL und
 *    keine Formregel fasst sie an — sie werden geerbt und bleiben dadurch
 *    je Endgerät sauber überschreibbar.
 *
 * 4. **Anordnung ist Grid, nicht Markup.** Vorschaubilder unten, oben,
 *    links, rechts oder gar nicht — vier Grid-Bündel plus ein
 *    `display: none`, je Endgerät über `selectors_dictionary` gesetzt. Nur
 *    so lässt sich pro Desktop/Tablet/Handy etwas anderes einstellen:
 *    Elementor gibt je Endgerät CSS aus, nie anderes Markup.
 *
 * 5. **Bühne und Überlagerungen liegen in DERSELBEN Grid-Zelle.** Bild,
 *    Labels, Pfeile, Lupen-Hinweis und (auf Wunsch) die Seitenanzeige
 *    stehen auf `grid-area: 1 / 1` — sie decken damit exakt das Bild ab,
 *    ohne eine einzige absolute Positionierung. Die Seitenanzeige wechselt
 *    zwischen „auf dem Bild" und „darunter" allein über ihre Grid-Zelle.
 *
 * 6. **Wischen kann der Browser selbst.** Die Bühne ist ein Scroll-Bereich
 *    mit `scroll-snap` — Touch-Wischen, Schwung, Gummiband und Barriere-
 *    freiheit kommen vom Browser, nicht aus einer Bibliothek. JavaScript
 *    verschiebt nur `scrollLeft` und hört zu, welches Bild gerade sichtbar
 *    ist. Der Überblend-Modus (`--fx-fade`) ist der einzige, der eigene
 *    Zeiger-Gesten braucht.
 *
 * 7. **Bewegung nur über `transform` und `opacity`** — beides läuft auf der
 *    Grafikkarte. Keine Animation von width/height/margin.
 *
 * @package MaxiCommerce
 * @author Sven Schöning
 */

/* ==========================================================================
   Wurzel + Anordnung
   ========================================================================== */

.mc-pg {
	/* Tempo: „leer" heißt Standardtempo, nicht „keine Bewegung" — deshalb
	   dürfen diese beiden als Token in der Wurzel stehen (Ausnahme wie beim
	   Menü-Widget). */
	--mc-pg-dur: 0.45s;
	--mc-pg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Die Lupe ist ab Werk so gross wie die Pfeile (seit 1.49.0). Sie hatte
	   einen eigenen Rueckfall von 52 px gegen 44 px bei den Pfeilen — auf
	   demselben Bild sassen damit zwei verschieden grosse runde Knoepfe.
	   Jetzt LEITET sie ab: ohne eigene Einstellung folgt sie der
	   Pfeilgroesse, auch wenn der Betreiber die aendert, und auf JEDEM
	   Endgeraet (die Ableitung haengt an keiner Media Query). Ein eigener
	   Wert im Bedienfeld schlaegt die Ableitung weiterhin.
	   ACHTUNG: `--mc-pg-arrow-size` wird hier an der WURZEL gelesen. Die
	   Form „Kante" setzt 60 px am Pfeil-Element selbst — das erbt die Lupe
	   bewusst nicht, dort sind die Pfeile hohe Balken statt Kreise. */
	--mc-pg-hint-s: var(--mc-pg-hint-size, var(--mc-pg-arrow-size, 44px));

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: var(--mc-pg-rows, auto auto);
	gap: var(--mc-pg-gap, 12px);
	min-width: 0;
	position: relative;
}

.mc-pg *,
.mc-pg *::before,
.mc-pg *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Bühne — eine Grid-Zelle für Bild und alle Überlagerungen
   ========================================================================== */

.mc-pg-stage {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto;
	position: relative;
	min-width: 0;
	min-height: 0;

	/* Platz für Pfeile „außerhalb des Bildes". Die Überlagerungen liegen im
	   Inhaltsbereich, die Pfeile holen sich den Rand per negativem Rand
	   zurück — dadurch schrumpft das Bild und nichts überlappt Nachbarn. */
	padding-inline: var(--mc-pg-stage-pad, 0px);
}

.mc-pg-viewport {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	flex-direction: row;
	min-width: 0;
	aspect-ratio: var(--mc-pg-ratio, 1);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	background-color: var(--mc-pg-bg, transparent);
	border-radius: var(--mc-pg-radius, 0px);
	border-style: var(--mc-pg-border-style, none);
	border-width: var(--mc-pg-border-w, 0);
	border-color: var(--mc-pg-border-color, currentColor);
	box-shadow: var(--mc-pg-shadow, none);

	/* Balken ausblenden — die Position zeigen Punkte/Zähler an. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.mc-pg-viewport::-webkit-scrollbar {
	width: 0;
	height: 0;
}

/* MERKE, damit es niemand „repariert": Ein waagerechter Scroll-Bereich ist
   zwangsläufig auch ein SENKRECHTER. `overflow-y: clip` wäre der Ausweg —
   den gibt es hier aber nicht: Steht auf einer Achse `auto` und auf der
   anderen `clip`, rechnet der Browser das `clip` nach Spezifikation zu
   `hidden` zurück (im Browser nachgemessen: `auto clip` → `auto hidden`).
   Die Bühne bleibt also senkrecht ein Scroll-Bereich, und der einzige
   wirksame Schutz gegen verschluckte Radschritte ist deshalb doppelt:
   (1) auf der Quer-Achse NIE `overscroll-behavior: contain` — sonst kann
   der Bereich einen Schritt weder verwenden noch weitergeben (genau der
   Fehler, der bis 1.33.0 über der Vorschauleiste jedes Scrollen
   blockierte), und (2) senkrecht darf nichts überstehen. Punkt 2 hält der
   Prüflauf `check-gallery-widget-js.cjs` fest: Er misst `scrollHeight`
   gegen `clientHeight` in jedem Seitenverhältnis. */

/* Tastatur-Fokus: eigener Ring, weil der Bereich fokussierbar ist. Erhöhte
   Spezifität mit Grund — den Umriss räumen Themes regelmäßig selbst mit
   `!important` ab, und gegen `!important` entscheidet allein die
   Spezifität (dieselbe Lehre wie beim Menü-Widget). */
.mc-pg .mc-pg-viewport.mc-pg-viewport:focus-visible {
	outline: var(--mc-pg-focus-w, 2px) solid var(--mc-pg-focus-color, currentColor) !important;
	outline-offset: var(--mc-pg-focus-off, 3px) !important;
}

.mc-pg-slide {
	position: relative;
	flex: 0 0 100%;
	max-width: 100%;
	min-width: 0;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.mc-pg-media {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: none;
	-webkit-tap-highlight-color: transparent;
}

/* Auch das Bild braucht einen Panzer: `img { width: auto }`,
   `max-width: none` oder eine Rundung im Theme zerlegen sonst die
   Bühne. Die Rundung wird hier fest auf 0 gesetzt — gerundet wird über
   den Beschnitt der Bühne, dafür gibt es das Steuerelement. */
.mc-pg-media img,
.mc-pg-media video {
	display: block;
	width: 100% !important;
	height: var(--mc-pg-img-h, 100%) !important;
	max-width: 100% !important;
	min-width: 0 !important;
	border-radius: 0 !important;
	object-fit: var(--mc-pg-fit, cover);
	object-position: var(--mc-pg-img-pos, center center);
}

/* Anklickbar? Dann sagt es auch der Zeiger. */
/* Der Zeiger sagt die Wahrheit: Nur wenn das Bild SELBST öffnet, rendert
   PHP ein `<a>` — dann gilt die Einstellung. Öffnet ausschließlich das
   Lupensymbol, steht dort ein `<div>` und der Zeiger bleibt der normale
   Pfeil, ohne dass der Betreiber daran denken müsste. */
.mc-pg-media {
	cursor: default;
}

a.mc-pg-media {
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Überblenden statt Schieben
   -------------------------------------------------------------------------- */

/* Gestapelt statt gescrollt — die Grundlage für Überblenden UND Bogen.
   Die Klasse `mc-pg--stacked` setzt PHP für jeden Effekt, der nicht
   schiebt; sie trennt die MECHANIK (kein Scroll-Bereich) von der
   BEWEGUNG (`--fx-*`). */
.mc-pg--stacked .mc-pg-viewport {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	scroll-snap-type: none;
	touch-action: pan-y;
}

.mc-pg--stacked .mc-pg-slide {
	grid-area: 1 / 1;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--mc-pg-dur) var(--mc-pg-ease);
}

.mc-pg--stacked .mc-pg-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* Bogen: Die neue Folie zieht auf einer gekrümmten Bahn herein. Der Knick
   in der Mitte (senkrechter Versatz quer zur Laufrichtung) macht den
   Halbkreis; die Richtung kommt aus `data-dir` am Wurzelelement. */
.mc-pg--fx-arc .mc-pg-slide.is-active {
	animation: mc-pg-arc-in var(--mc-pg-dur) var(--mc-pg-ease) both;
}

.mc-pg[data-dir="prev"] {
	--mc-pg-sx: -1;
}

@keyframes mc-pg-arc-in {
	0% {
		transform: translate3d(calc(var(--mc-pg-sx, 1) * 62%), 0, 0)
			rotate(calc(var(--mc-pg-sx, 1) * 9deg)) scale(0.86);
		opacity: 0;
	}
	50% {
		transform: translate3d(calc(var(--mc-pg-sx, 1) * 22%), 11%, 0)
			rotate(calc(var(--mc-pg-sx, 1) * 4deg)) scale(0.94);
		opacity: 1;
	}
	100% {
		transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
   Lupe
   --------------------------------------------------------------------------
   BEWUSST OHNE `@media (hover: hover)`. Die Entscheidung „Zeiger oder
   Finger" trifft das Skript am Ereignis selbst (`pointerType === 'mouse'`)
   — und das ist die genauere Stelle: Ein Notebook mit Touchscreen meldet je
   nach Browser einmal `hover: hover` und einmal `hover: none`, benutzt aber
   in beiden Fällen mal Maus, mal Finger. Wo die Bedingung in der CSS stand,
   war die Lupe auf solchen Geräten stumm, ohne dass man es je gesehen
   hätte. Die Klasse `is-zooming` setzt ohnehin nur das Skript, und nur bei
   einer echten Maus. */

.mc-pg--zoom .mc-pg-media img {
	transition: transform 0.35s var(--mc-pg-ease);
}

.mc-pg--zoom .mc-pg-media.is-zooming img {
	transform: scale(var(--mc-pg-zoom, 1.8));
	transition: transform 0.12s linear;
	will-change: transform;
}

/* --------------------------------------------------------------------------
   Video-Folien
   -------------------------------------------------------------------------- */

.mc-pg-media--video video {
	background: #000;
}

.mc-pg-videoplay {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	border: 0;
	background: none;
	cursor: pointer;
	color: #fff;
	transition: opacity 0.25s var(--mc-pg-ease);
}

.mc-pg-videoplay svg {
	width: 56px;
	height: 56px;
	filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45));
}

.mc-pg-media--video.is-playing .mc-pg-videoplay {
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   Pfeile
   ========================================================================== */

.mc-pg-nav {
	grid-area: 1 / 1;
	z-index: 4;
	display: var(--mc-pg-arrow-d, flex);
	align-items: var(--mc-pg-nav-ai, center);
	justify-content: var(--mc-pg-nav-ji, space-between);
	gap: var(--mc-pg-nav-gap, 8px);
	padding: var(--mc-pg-arrow-off, 12px);
	margin-inline: var(--mc-pg-nav-mx, 0px);
	pointer-events: none;
}

.mc-pg-arrow {
	pointer-events: auto;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;

	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	font: inherit;
	line-height: 1;

	opacity: var(--mc-pg-arrow-op, 1);
	transform: var(--mc-pg-arrow-tf, none);
	transition: opacity 0.25s var(--mc-pg-ease), transform 0.25s var(--mc-pg-ease),
		background-color 0.25s var(--mc-pg-ease), color 0.25s var(--mc-pg-ease),
		border-color 0.25s var(--mc-pg-ease);

	/* --- Theme-Panzer: Eigenschaft gepinnt, Wert aus Variable --- */
	width: var(--mc-pg-arrow-size, 44px) !important;
	height: var(--mc-pg-arrow-h, var(--mc-pg-arrow-size, 44px)) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	color: var(--mc-pg-arrow-color, currentColor) !important;
	background-color: var(--mc-pg-arrow-bg, transparent) !important;
	background-image: var(--mc-pg-arrow-bg-image, none) !important;
	backdrop-filter: var(--mc-pg-arrow-blur, none) !important;
	border-style: var(--mc-pg-arrow-border-style, none) !important;
	border-width: var(--mc-pg-arrow-border-w, 0) !important;
	border-color: var(--mc-pg-arrow-border-color, currentColor) !important;
	border-radius: var(--mc-pg-arrow-radius, 0px) !important;
	box-shadow: var(--mc-pg-arrow-shadow, none) !important;
}

/* Eigenes Zeichen — als Strich gezeichnet, damit es in jeder Größe
   gleich stark bleibt. */
.mc-pg-arrow .mc-pg-chevron {
	width: var(--mc-pg-arrow-icon, 18px);
	height: var(--mc-pg-arrow-icon, 18px);
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

/* Symbol aus Elementors Bibliothek. Es steht in einer eigenen Hülle, weil
   `Icons_Manager::render_icon()` bei hochgeladenen SVG die übergebenen
   Attribute NICHT anwendet — eine Regel auf `svg` allgemein würde deshalb
   fremde Zeichnungen umfärben. Die Hülle trägt die Größe, das Symbol erbt
   sie über `1em`. */
.mc-pg-arrow .mc-pg-usericon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--mc-pg-arrow-icon, 18px);
	line-height: 1;
	pointer-events: none;
}

.mc-pg-arrow .mc-pg-usericon svg {
	width: 1em;
	height: 1em;
	display: block;
	fill: currentColor;
}

.mc-pg-arrow .mc-pg-usericon i {
	font-size: 1em;
	line-height: 1;
}

/* Am Ende angekommen (und Endlos aus) — nicht wegblenden, sondern sichtbar
   stummschalten: Die Trefferfläche bleibt, nichts springt. */
.mc-pg-arrow[disabled] {
	opacity: calc(var(--mc-pg-arrow-op, 1) * 0.35);
	cursor: default;
	pointer-events: none;
}

/* „Nur beim Überfahren" — das Steuerelement setzt --mc-pg-arrow-op auf 0. */
.mc-pg-stage:hover .mc-pg-arrow,
.mc-pg-arrow:focus-visible {
	opacity: 1;
}

.mc-pg-stage:hover .mc-pg-arrow[disabled] {
	opacity: 0.35;
}

/* Ohne Zeiger gibt es kein „Überfahren". Auf Touch-Geräten wären die Pfeile
   in dieser Betriebsart also für immer unsichtbar — deshalb hier eine eigene
   Variable statt eines festen Wertes: Die Regel ist spezifischer als die
   Basisregel, das Bedienfeld schreibt `opacity` nie direkt, und wer die
   Pfeile auf dem Handy wirklich nicht will, stellt sie dort auf „Aus"
   (die Betriebsart ist je Endgerät einstellbar). */
@media (hover: none) {
	.mc-pg .mc-pg-arrow {
		opacity: var(--mc-pg-arrow-op-touch, 1);
	}
}

/* --- Formen (Voreinstellung, vom Bedienfeld überschreibbar) --------------- */

.mc-pg--nav-solid .mc-pg-arrow {
	--mc-pg-arrow-bg: #ffffff;
	--mc-pg-arrow-color: #111111;
	--mc-pg-arrow-radius: 999px;
	--mc-pg-arrow-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
}

.mc-pg--nav-solid .mc-pg-arrow:hover {
	--mc-pg-arrow-bg: #111111;
	--mc-pg-arrow-color: #ffffff;
}

.mc-pg--nav-soft .mc-pg-arrow {
	--mc-pg-arrow-bg: rgba(255, 255, 255, 0.68);
	--mc-pg-arrow-color: #111111;
	--mc-pg-arrow-radius: 999px;
	--mc-pg-arrow-blur: saturate(180%) blur(14px);
	--mc-pg-arrow-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.mc-pg--nav-soft .mc-pg-arrow:hover {
	--mc-pg-arrow-bg: rgba(255, 255, 255, 0.95);
}

.mc-pg--nav-outline .mc-pg-arrow {
	--mc-pg-arrow-bg: transparent;
	--mc-pg-arrow-color: #111111;
	--mc-pg-arrow-radius: 999px;
	--mc-pg-arrow-border-style: solid;
	--mc-pg-arrow-border-w: 1px;
	--mc-pg-arrow-border-color: currentColor;
}

.mc-pg--nav-outline .mc-pg-arrow:hover {
	--mc-pg-arrow-bg: #111111;
	--mc-pg-arrow-color: #ffffff;
}

.mc-pg--nav-minimal .mc-pg-arrow {
	--mc-pg-arrow-bg: transparent;
	--mc-pg-arrow-color: #111111;
	--mc-pg-arrow-icon: 26px;
}

.mc-pg--nav-minimal .mc-pg-arrow:hover {
	--mc-pg-arrow-tf: scale(1.14);
}

/* Kante: volle Höhe mit weichem Verlauf — die ruhigste Variante, und auf
   dem Handy die größte Trefferfläche. Sie fasst KEINE Ortsvariablen an
   (die gehören dem Steuerelement „Ort der Pfeile"). */
.mc-pg--nav-edge .mc-pg-arrow {
	--mc-pg-arrow-bg: transparent;
	--mc-pg-arrow-color: #ffffff;
	--mc-pg-arrow-size: 60px;
	--mc-pg-arrow-h: 100%;
	--mc-pg-arrow-radius: 0px;
	align-self: stretch;
}

.mc-pg--nav-edge .mc-pg-arrow--prev {
	--mc-pg-arrow-bg-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}

.mc-pg--nav-edge .mc-pg-arrow--next {
	--mc-pg-arrow-bg-image: linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}

/* ==========================================================================
   Labels (Aktion, eigenes Label, ausverkauft)
   ========================================================================== */

.mc-pg-badges {
	grid-area: 1 / 1;
	z-index: 5;
	display: grid;
	place-content: var(--mc-pg-badge-y, start) var(--mc-pg-badge-x, start);
	padding: var(--mc-pg-badge-inset, 14px);
	pointer-events: none;
}

.mc-pg-badgestack {
	display: flex;
	flex-direction: var(--mc-pg-badge-dir, column);
	align-items: var(--mc-pg-badge-x, start);
	gap: var(--mc-pg-badge-gap, 8px);
}

/* `.onsale` steht bewusst mit drin — und mit Theme-Panzer.
   Im WooCommerce-Modus kommt das Aktions-Label aus `loop/sale-flash.php`
   bzw. dem Filter `woocommerce_sale_flash`, also mit FREMDEM Markup, aber
   immer mit dieser Klasse. Und `.onsale` ist die eine Klasse, die
   praktisch jedes Shop-Theme selbst gestaltet — regelmäßig mit
   `position: absolute`, eigenem `top/left` und `border-radius: 100%`, oft
   spezifischer als eine einfache Klasse (`.woocommerce span.onsale`,
   `.woocommerce ul.products li.product .onsale`). Ohne Panzer säße das
   Aktions-Label deshalb in der Bildecke statt im Label-Stapel — im
   Browser nachgestellt und genau so eingetreten.

   Also dieselbe Regel wie bei den Schaltflächen: Eigenschaft gepinnt,
   Wert aus der Variablen; was kein Steuerelement hat (Position, Ränder,
   Maße), steht als fester neutraler Wert. */
.mc-pg .mc-pg-badge,
.mc-pg .mc-pg-badges .onsale {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	pointer-events: none;

	/* --- Theme-Panzer ohne Steuerelement --- */
	position: static !important;
	inset: auto !important;
	transform: none !important;
	margin: 0 !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	line-height: 1 !important;
	background-image: none !important;

	/* --- Theme-Panzer mit Steuerelement: Wert IMMER aus der Variablen --- */
	font-size: var(--mc-pg-badge-size, 13px) !important;
	font-weight: var(--mc-pg-badge-weight, 600) !important;
	letter-spacing: var(--mc-pg-badge-ls, 0.02em) !important;
	text-transform: var(--mc-pg-badge-tt, none) !important;
	padding: var(--mc-pg-badge-pad, 8px 12px) !important;
	border-radius: var(--mc-pg-badge-radius, 999px) !important;
	box-shadow: var(--mc-pg-badge-shadow, none) !important;
	border-style: var(--mc-pg-badge-border-style, none) !important;
	border-width: var(--mc-pg-badge-border-w, 0) !important;
	border-color: var(--mc-pg-badge-border-color, currentColor) !important;
	background-color: var(--mc-pg-badge-bg, #111111) !important;
	color: var(--mc-pg-badge-color, #ffffff) !important;
}

/* Je Label eine eigene Farbe. Diese Regeln stehen NACH der gemeinsamen und
   sind gleich spezifisch — sie gewinnen also durch ihre Stellung; ihre
   Werte kommen wieder aus Variablen, damit die Steuerelemente greifen. */
.mc-pg .mc-pg-badge--sale,
.mc-pg .mc-pg-badges .onsale {
	background-color: var(--mc-pg-sale-bg, #e11d48) !important;
	color: var(--mc-pg-sale-color, #ffffff) !important;
}

.mc-pg .mc-pg-badge--custom {
	background-color: var(--mc-pg-badge2-bg, #c9f24d) !important;
	color: var(--mc-pg-badge2-color, #111111) !important;
}

.mc-pg .mc-pg-badge--oos {
	background-color: var(--mc-pg-oos-bg, rgba(17, 17, 17, 0.86)) !important;
	color: var(--mc-pg-oos-color, #ffffff) !important;
}

/* --- Formen der Labels --------------------------------------------------- */

.mc-pg--badge-square .mc-pg-badge,
.mc-pg--badge-square .mc-pg-badges .onsale {
	--mc-pg-badge-radius: 0px;
}

.mc-pg--badge-soft .mc-pg-badge,
.mc-pg--badge-soft .mc-pg-badges .onsale {
	--mc-pg-badge-radius: 8px;
}

.mc-pg--badge-outline .mc-pg-badge,
.mc-pg--badge-outline .mc-pg-badges .onsale {
	--mc-pg-badge-bg: transparent;
	--mc-pg-badge-color: #111111;
	--mc-pg-sale-bg: transparent;
	--mc-pg-sale-color: #e11d48;
	--mc-pg-badge2-bg: transparent;
	--mc-pg-badge2-color: #111111;
	--mc-pg-oos-bg: transparent;
	--mc-pg-oos-color: #111111;
	--mc-pg-badge-border-style: solid;
	--mc-pg-badge-border-w: 1px;
	--mc-pg-badge-border-color: currentColor;
}

/* ==========================================================================
   Hinweis „größer ansehen"
   ========================================================================== */

.mc-pg-zoomhint {
	/* In derselben Grid-Zelle wie das Bild — die Ecke ist damit nur eine
	   Frage von `justify-self`/`align-self`, ohne eine einzige absolute
	   Positionierung und ohne dass der Abstands-Regler etwas davon merkt. */
	grid-area: 1 / 1;
	z-index: 4;
	justify-self: var(--mc-pg-hint-js, end);
	align-self: var(--mc-pg-hint-as, end);
	margin: var(--mc-pg-hint-off, 24px);
	display: var(--mc-pg-hint-d, inline-flex);
	align-items: center;
	justify-content: center;
	width: var(--mc-pg-hint-s, 44px);
	height: var(--mc-pg-hint-s, 44px);
	border-radius: var(--mc-pg-hint-radius, 999px);
	background-color: var(--mc-pg-hint-bg, #ffffff);
	color: var(--mc-pg-hint-color, #111111);
	box-shadow: var(--mc-pg-hint-shadow, 0 4px 16px rgba(0, 0, 0, 0.1));
	pointer-events: none;
	opacity: var(--mc-pg-hint-op, 1);
	transform: scale(var(--mc-pg-hint-scale, 1));
	transition: opacity 0.25s var(--mc-pg-ease), transform 0.25s var(--mc-pg-ease),
		background-color 0.25s var(--mc-pg-ease), color 0.25s var(--mc-pg-ease);
}

.mc-pg-zoomhint:hover {
	background-color: var(--mc-pg-hint-bg-h, var(--mc-pg-hint-bg, #ffffff));
	color: var(--mc-pg-hint-color-h, var(--mc-pg-hint-color, #111111));
	transform: scale(var(--mc-pg-hint-scale-h, 1));
}

/* Die Zeichnung leitet sich aus der Fläche ab — ein Maß trägt beides,
   dieselbe Regel wie beim Menü-Widget. */
.mc-pg-zoomhint .mc-pg-chevron {
	width: calc(var(--mc-pg-hint-s, 44px) * 0.4);
	height: calc(var(--mc-pg-hint-s, 44px) * 0.4);
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Symbol aus Elementors Bibliothek — eigene Hülle, weil
   `Icons_Manager::render_icon()` bei hochgeladenen SVG die Attribute nicht
   anwendet (siehe Pfeile). */
.mc-pg-zoomhint .mc-pg-usericon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--mc-pg-hint-s, 44px) * 0.4);
	line-height: 1;
}

.mc-pg-zoomhint .mc-pg-usericon svg {
	width: 1em;
	height: 1em;
	display: block;
	fill: currentColor;
}

.mc-pg-zoomhint .mc-pg-usericon i {
	font-size: 1em;
	line-height: 1;
}

/* ==========================================================================
   Seitenanzeige — Punkte, Zähler, Fortschritt
   ========================================================================== */

.mc-pg-pager {
	/* Zelle 2/1 = unter dem Bild, Zelle 1/1 = auf dem Bild. Mehr braucht der
	   Wechsel nicht — keine absolute Positionierung, kein zweites Markup. */
	grid-area: var(--mc-pg-pager-area, 2 / 1);
	align-self: var(--mc-pg-pager-as, center);
	justify-self: center;
	margin-block-start: var(--mc-pg-pager-mt, 12px);
	margin-block-end: var(--mc-pg-pager-mb, 0px);
	z-index: 4;
	display: var(--mc-pg-pager-d, flex);
	align-items: center;
	gap: 10px;
	pointer-events: none;
}

.mc-pg-pager > * {
	pointer-events: auto;
}

/* --- Punkte -------------------------------------------------------------- */

.mc-pg-dots {
	display: var(--mc-pg-dots-d, flex);
	align-items: center;
	gap: var(--mc-pg-dot-gap, 8px);
	padding: var(--mc-pg-dots-pad, 0px);
	border-radius: 999px;
	background-color: var(--mc-pg-dots-bg, transparent);
}

.mc-pg-dot {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	font: inherit;
	display: block;
	flex: 0 0 auto;
	transition: width 0.35s var(--mc-pg-ease), background-color 0.25s var(--mc-pg-ease),
		transform 0.25s var(--mc-pg-ease);

	/* --- Theme-Panzer --- */
	width: var(--mc-pg-dot-w, 8px) !important;
	height: var(--mc-pg-dot-h, 8px) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: var(--mc-pg-dot-radius, 999px) !important;
	background-color: var(--mc-pg-dot-bg, rgba(17, 17, 17, 0.22)) !important;
	background-image: none !important;
	box-shadow: var(--mc-pg-dot-shadow, none) !important;
	color: inherit !important;
}

.mc-pg-dot:hover {
	background-color: var(--mc-pg-dot-bg-h, var(--mc-pg-dot-bg, rgba(17, 17, 17, 0.22))) !important;
}

.mc-pg-dot.is-active {
	width: var(--mc-pg-dot-wa, 26px) !important;
	background-color: var(--mc-pg-dot-bg-a, #111111) !important;
}

/* --- Zähler (3 / 7) ------------------------------------------------------ */

.mc-pg-fraction {
	display: var(--mc-pg-frac-d, none);
	align-items: center;
	gap: 3px;
	line-height: 1;
	font-size: var(--mc-pg-frac-size, 13px);
	font-weight: var(--mc-pg-frac-weight, 600);
	padding: var(--mc-pg-frac-pad, 7px 12px);
	border-radius: var(--mc-pg-frac-radius, 999px);
	background-color: var(--mc-pg-frac-bg, rgba(255, 255, 255, 0.86));
	color: var(--mc-pg-frac-color, #111111);
	box-shadow: var(--mc-pg-frac-shadow, none);
	backdrop-filter: saturate(180%) blur(10px);
	font-variant-numeric: tabular-nums;
}

/* --- Fortschritt --------------------------------------------------------- */

.mc-pg-progress {
	display: var(--mc-pg-prog-d, none);
	width: var(--mc-pg-prog-w, 120px);
	height: var(--mc-pg-prog-h, 3px);
	border-radius: 999px;
	overflow: hidden;
	background-color: var(--mc-pg-prog-bg, rgba(17, 17, 17, 0.16));
}

.mc-pg-progress span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background-color: var(--mc-pg-prog-fill, #111111);
	transition: width 0.35s var(--mc-pg-ease);
}

/* ==========================================================================
   Vorschaubilder
   ========================================================================== */

.mc-pg-thumbs {
	grid-area: 2 / 1;
	display: var(--mc-pg-thumbs-d, flex);
	flex-direction: row;
	align-items: center;
	gap: 8px;
	min-width: 0;
	min-height: 0;
}

/* KEIN `overscroll-behavior: contain` hier — im Browser nachgemessen:
   Die Leiste ist durch `overflow-y: hidden` auch SENKRECHT ein
   Scroll-Bereich (nur eben ohne Balken), hat dort aber nichts zu scrollen.
   Ein Radschritt mit dem Zeiger über der Leiste ging damit an die Leiste,
   die konnte ihn nicht verwenden, und `contain` verbot ihr, ihn an die
   Seite weiterzureichen: Die Seite bewegte sich um 0 statt 500 px. Genau
   das war das „Stocken beim Scrollen über den Bildern". Mit dem
   Standardwert `auto` reicht die Leiste weiter, sobald sie selbst nichts
   mehr tun kann — das ist auch das Verhalten, das man von einer Seite
   erwartet. (Dasselbe Muster wie beim Tab-Leisten-Fehler in 1.30.8, nur
   dass `contain` es von einem verschluckten Schritt auf alle ausweitete.) */
.mc-pg-strip {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--mc-pg-thumb-gap, 10px);
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: both proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Zwei Pixel Luft, damit Rahmen und Fokus-Ring des ersten und letzten
	   Vorschaubilds nicht am Rand des Scroll-Bereichs abgeschnitten werden. */
	padding: 2px;
}

.mc-pg-strip::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.mc-pg-thumb {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	font: inherit;

	/* Die ANZAHL sichtbarer Bilder trägt die Größe — ein Steuerelement,
	   eine Rechnung. */
	flex: 0 0 calc((100% - (var(--mc-pg-thumb-n, 5) - 1) * var(--mc-pg-thumb-gap, 10px)) / var(--mc-pg-thumb-n, 5));
	aspect-ratio: var(--mc-pg-thumb-ratio, 1);
	scroll-snap-align: center;
	opacity: var(--mc-pg-thumb-op, 1);
	transition: opacity 0.25s var(--mc-pg-ease), transform 0.25s var(--mc-pg-ease),
		border-color 0.25s var(--mc-pg-ease), box-shadow 0.25s var(--mc-pg-ease);

	/* --- Theme-Panzer --- */
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	background-color: transparent !important;
	background-image: none !important;
	border-style: solid !important;
	border-width: var(--mc-pg-thumb-border-w, 2px) !important;
	border-color: var(--mc-pg-thumb-border-color, transparent) !important;
	border-radius: var(--mc-pg-thumb-radius, 10px) !important;
	box-shadow: none !important;
	color: inherit !important;
}

.mc-pg-thumb img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	border-radius: inherit !important;
	object-fit: var(--mc-pg-thumb-fit, cover);
}

.mc-pg-thumb:hover {
	/* Beim Überfahren wird nur die Deckkraft voll — kein eigener Regler:
	   Vorschaubilder sind Bedienelemente, keine Gestaltungsfläche. */
	opacity: 1;
	border-color: var(--mc-pg-thumb-border-color, transparent) !important;
}

.mc-pg-thumb.is-active {
	opacity: var(--mc-pg-thumb-op-a, 1);
	border-color: var(--mc-pg-thumb-border-color-a, #111111) !important;
}

/* Kleines Video-Zeichen auf Video-Vorschaubildern. */
.mc-pg-thumb--video::after {
	content: "";
	position: absolute;
	inset-block-end: 6px;
	inset-inline-end: 6px;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}

/* --- Pfeile der Leiste --------------------------------------------------- */

.mc-pg-tnav {
	flex: 0 0 auto;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	transition: opacity 0.2s var(--mc-pg-ease);

	/* --- Theme-Panzer --- */
	width: var(--mc-pg-tnav-size, 28px) !important;
	height: var(--mc-pg-tnav-size, 28px) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	color: var(--mc-pg-tnav-color, #111111) !important;
	background-color: var(--mc-pg-tnav-bg, transparent) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
}

.mc-pg-thumbs.is-scrollable .mc-pg-tnav {
	display: var(--mc-pg-tnav-d, inline-flex);
}

.mc-pg-tnav[disabled] {
	opacity: 0.3;
	pointer-events: none;
}

.mc-pg-tnav svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ==========================================================================
   Lightbox — eigenes, voll gestaltbares Vollbild
   ==========================================================================
   WARUM EIN `<dialog>` UND KEIN `<div>`
   Ein modal geöffnetes `<dialog>` rendert im TOP LAYER. Damit ist es per
   Spezifikation immun gegen alles, woran Overlays in dieser Codebasis schon
   dreimal gescheitert sind: ein Sticky-Header mit `transform` (der zum
   Bezugsrahmen für `position: fixed` wird), `overflow: hidden` an einem
   Vorfahren und jeden `z-index`-Streit. Deshalb muss es AUCH NICHT ins
   `wp_footer` verschoben werden wie der Slide-in-Warenkorb — es bleibt im
   Widget stehen, und genau deshalb greifen die Elementor-Selektoren mit
   `{{WRAPPER}}` weiter. Wer das auf ein `<div>` zurückbaut, holt sich beide
   Probleme auf einmal zurück.
   Dazu gibt es geschenkt: Esc schließt, der Fokus bleibt drin, der Rest der
   Seite wird inert, und beim Schließen kehrt der Fokus dorthin zurück, wo
   er herkam. Geschlossen ist ein `<dialog>` `display: none` — es kann also
   keinen Klick schlucken (die Overlay-Regel aus CLAUDE.md ist damit
   strenger erfüllt als mit `pointer-events: none`).
   ========================================================================== */

/* Die Galerie tritt zurück, solange das Fenster ihr Bild zeigt.
   --------------------------------------------------------------------------
   Gesetzt vom Skript, sobald die Bild-Bewegung startet. Es reicht NICHT,
   nur das Bild zu verstecken: Übrig blieben sonst die Bedienelemente —
   allen voran das runde Lupensymbol, dazu Pfeile, Punkte, Labels und die
   Vorschauleiste. Während der Schleier erst einblendet, schweben die als
   Kreise in einem leeren Loch.

   `visibility` statt `display`: Der Platz bleibt erhalten — die Seite darf
   sich nicht bewegen, und die Schließen-Bewegung misst genau dieses
   Rechteck. Das `<dialog>` ist ein GESCHWISTER von Bühne und Leiste und
   deshalb nicht betroffen. */
.mc-pg--lifted .mc-pg-stage,
.mc-pg--lifted .mc-pg-thumbs {
	visibility: hidden;
}

.mc-pg-lb {
	--mc-pg-lb-dur: 0.5s;
	--mc-pg-lb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Öffnen und Schließen sind DIESELBE Bewegung, nur andersherum:
	   gleiche Dauer, gleiche Kurve. Vorher war beides verschieden — das
	   Öffnen lief auf einer Expo-Out-Kurve, und die schiebt fast die
	   ganze Änderung in den Anfang: Im Browser gemessen stand der
	   Hintergrund nach einem Viertel der Zeit schon bei 82 %, nach der
	   Hälfte bei 97 %. Von „einblenden" war da nichts zu sehen, während
	   das Schließen sichtbar ausblendete.

	   Die Kurve ist deshalb SYMMETRISCH (weicher Start, weiches Ende,
	   Mitte gleichmäßig): dieselben 0,13 / 0,48 / 0,88 beim Öffnen wie
	   0,87 / 0,52 / 0,12 beim Schließen. Wer sie ändert, ändert sie für
	   beide Richtungen — genau darin liegt der Punkt. */
	--mc-pg-lb-open-dur: 0.48s;
	--mc-pg-lb-motion-ease: cubic-bezier(0.45, 0.05, 0.55, 0.95);

	/* Was gerade gilt. Bleibt als eigener Name bestehen, weil ihn jede
	   Bewegungs-Regel liest — der Wert ist in beiden Richtungen gleich. */
	--mc-pg-lb-motion-dur: var(--mc-pg-lb-open-dur, 0.48s);


	/* --- Die Bedienleiste: EINE Kapsel ---------------------------------
	   Zurück · Zähler · weiter in einem Element — die einzige Form, die es
	   gibt (seit 1.65.0; „Runde Knöpfe" und „Ohne" sind ersatzlos
	   entfernt). Sie ist bewusst durchgezeichnet und nicht nur ein weißer
	   Kasten: getönte Fläche mit Weichzeichner statt Deckweiß (über einem
	   Foto bleibt das Bild sichtbar), eine Haarlinie als Kante, ein sehr
	   flacher Schatten fürs Abheben — und Pfeile OHNE eigene Fläche, damit
	   die Kapsel als EIN Bedienelement gelesen wird und nicht als drei.

	   Die Maße hängen zusammen: 42 px Pfeilfläche + 2 x 5 px Innenabstand
	   ergeben eine 52 px hohe Kapsel; der seitliche Abstand des Zählers
	   (16 px) plus die 2 px Lücke setzen die Ziffern optisch mittig
	   zwischen die Pfeile. Wer die Pfeilfläche ändert, ändert die Höhe der
	   Kapsel — der Innenabstand ist der einzige Zuschlag.

	   WARUM HIER und nicht in der Regel, die die Eigenschaften ausgibt:
	   Ein Token in derselben Regel hieße „leer geht nicht" — ein im
	   Bedienfeld geleertes Farbfeld gibt gar kein CSS aus, der Token
	   bliebe stehen. Hier steht er eine Ebene höher und wird VERERBT;
	   jedes Steuerelement schreibt direkt am Element und schlägt damit
	   den geerbten Wert, egal wie spezifisch dessen Regel ist. */
	--mc-pg-lb-bar-bg: rgba(255, 255, 255, 0.92);
	--mc-pg-lb-bar-blur: saturate(180%) blur(16px);
	--mc-pg-lb-bar-border-style: solid;
	--mc-pg-lb-bar-border-w: 1px;
	--mc-pg-lb-bar-border-color: rgba(17, 17, 17, 0.07);
	--mc-pg-lb-bar-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 10px 30px rgba(17, 17, 17, 0.07);
	--mc-pg-lb-bar-gap: 2px;
	--mc-pg-lb-bar-pad: 5px 6px;

	/* Pfeile: nur Fläche zum Treffen, keine eigene Farbe. Der Hover tönt
	   bloß an — ein weißer Kreis in einer weißen Kapsel wäre genau das,
	   was diese Form vermeiden soll. */
	--mc-pg-lb-arrow-size: 42px;
	--mc-pg-lb-arrow-icon: 18px;
	--mc-pg-lb-arrow-bg-h: rgba(17, 17, 17, 0.06);

	/* Der Zähler ist reine Anzeige — keine zweite Pille in der Pille. */
	--mc-pg-lb-count-pad: 16px;
	--mc-pg-lb-count-size: 15px;
	--mc-pg-lb-count-weight: 500;

	/* Die Vorgaben eines `<dialog>` vollständig zurücknehmen. */
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	background-color: transparent;
	color: inherit;
}

/* Der Backdrop des Dialogs MUSS durchsichtig sein — er ist der Grund für
   die abgedunkelten Safari-Leisten (Betreiber-Befund, pixelgenau belegt).
   ------------------------------------------------------------------
   Der Browser legt hinter jeden modalen <dialog> von sich aus
   `::backdrop { background: rgba(0, 0, 0, 0.1) }` — zehn Prozent
   Schwarz. Im Fenster sieht man davon nichts (der Schleier deckt alles
   ab), aber iOS Safari tintet Status- und Adressleiste von der SEITE
   hinter dem Top Layer — und die liegt unter dieser Schwarz-Schicht:
   Creme (242, 238, 226) x 0,9 = (218, 214, 203) — exakt das Grau auf dem
   iPhone-Screenshot. Jeder theme-color-Anlauf hat an der falschen
   Schicht gearbeitet.

   Moderne Shop-Fenster haben das Problem nicht, weil sie KEINEN modalen
   Dialog benutzen — ihr Fenster ist ein gewöhnliches Seitenelement, der
   Browser sieht es direkt. Durchsichtiger Backdrop + die Seite in
   Fensterfarbe (mc-product-gallery.js, `faerbeSeite()`) stellt genau
   diesen Zustand her, ohne die Dialog-Vorteile aufzugeben. */
.mc-pg-lb::backdrop {
	background: transparent;
}

/* Der Schleier — Hintergrund und Weichzeichner des Fensters.
   ------------------------------------------------------------------
   Er ist eine EIGENE Ebene und nicht das `<dialog>` selbst, damit der
   Hintergrund mit-animieren kann. Vorher stand die Farbe am `<dialog>`:
   Die Seite sprang in EINEM Bild auf die volle Fläche um, und erst danach
   blendete der Inhalt ein — genau das Billige, das ein gutes Shop-Theme
   nicht tut. Kein `::backdrop`-Stil: Der Schleier deckt ohnehin alles ab.
   `pointer-events: none`, damit die Klick-ins-Leere-Regel weiter die Hülle
   darunter sieht. */
.mc-pg-lb-veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-color: var(--mc-pg-lb-bg, #f3f1ec);
	backdrop-filter: var(--mc-pg-lb-blur, none);
	opacity: 0;
	transition: opacity var(--mc-pg-lb-motion-dur) var(--mc-pg-lb-motion-ease);
}

.mc-pg-lb.is-in .mc-pg-lb-veil {
	opacity: 1;
}

/* Öffnen-Bewegung. Sie läuft an der Hülle, nicht am `<dialog>` selbst:
   Ein Element im Top Layer sauber ein- und auszublenden verlangt sonst
   `@starting-style` und `transition-behavior: allow-discrete` — beides sehr
   neu. Eine Klasse auf der Hülle tut dasselbe und läuft überall. */
.mc-pg-lb-inner {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	opacity: var(--mc-pg-lb-open-o, 0);
	transform: translate3d(0, var(--mc-pg-lb-open-y, 0px), 0) scale(var(--mc-pg-lb-open-s, 1));
	transition: opacity var(--mc-pg-lb-motion-dur) var(--mc-pg-lb-motion-ease),
		transform var(--mc-pg-lb-motion-dur) var(--mc-pg-lb-motion-ease);
}

.mc-pg-lb.is-in .mc-pg-lb-inner {
	opacity: 1;
	transform: none;
}

/* Die Bedienung blendet IMMER für sich ein, zusätzlich zur Hülle und ein
   Stück später. Bei „Aus dem Bild heraus" ist sie das Einzige, was sich
   überhaupt einblendet, während das Bild wächst — ohne diese Regel wäre
   der Schließen-Knopf dort sofort in voller Deckkraft da, noch bevor das
   Bild angekommen ist. Die Verzögerung entfällt beim Schließen: Beim
   Weggehen soll zuerst die Bedienung verschwinden, nicht zuletzt. */
.mc-pg-lb-bar,
.mc-pg-lb-close,
.mc-pg-lb-thumbs {
	opacity: 0;
	/* 65 % der Bewegungsdauer — beim Öffnen um 35 % versetzt, beim
	   Schließen ohne Versatz. Beides zusammen füllt genau das Fenster der
	   Bewegung aus: Die Bedienung kommt als Letztes und geht als Erstes,
	   und trotzdem dauern Öffnen und Schließen exakt gleich lang. */
	transition: opacity calc(var(--mc-pg-lb-motion-dur) * 0.65) var(--mc-pg-lb-motion-ease)
		var(--mc-pg-lb-chrome-delay, 0s);
}

.mc-pg-lb.is-in .mc-pg-lb-bar,
.mc-pg-lb.is-in .mc-pg-lb-close,
.mc-pg-lb.is-in .mc-pg-lb-thumbs {
	opacity: 1;
	--mc-pg-lb-chrome-delay: calc(var(--mc-pg-lb-motion-dur) * 0.35);
}

/* Öffnen-Varianten — jede setzt nur den Startpunkt der Bewegung. */
.mc-pg-lb--open-zoom {
	--mc-pg-lb-open-s: 0.92;
}

.mc-pg-lb--open-up {
	--mc-pg-lb-open-y: 40px;
	--mc-pg-lb-open-s: 0.985;
}

/* „Aus dem Bild heraus": Das Bild selbst bewegt sich (die Rechnung dazu
   macht das Skript mit der Web-Animations-API), die Hülle darf deshalb
   NICHT zusätzlich einblenden — sonst blitzt das wachsende Bild durch ein
   halbdurchsichtiges Fenster. Nur Schleier und Bedienung blenden ein.

   ABER nur, wenn die Bewegung auch wirklich läuft: Das Skript setzt
   `is-flip`, sobald es sie startet. Fehlt sie (Bild noch nicht geladen,
   weggescrollt, „weniger Bewegung"), stünde das Bild sonst schlagartig in
   voller Größe da — dann verhält sich die Form wie „weich aufziehen". */
.mc-pg-lb--open-grow.is-flip {
	--mc-pg-lb-open-o: 1;
}

.mc-pg-lb--open-grow:not(.is-flip) {
	--mc-pg-lb-open-s: 0.92;
}

.mc-pg-lb--open-none {
	--mc-pg-lb-open-dur: 0.001s;
}

/* --------------------------------------------------------------------------
   Tastatur-Fokus im Fenster
   --------------------------------------------------------------------------
   `showModal()` setzt den Fokus auf das erste bedienbare Element — das war
   der Schließen-Knopf, und Chrome zeichnet dort seinen blauen Ring, auch
   wenn mit der Maus geöffnet wurde. Zwei Maßnahmen: Die Bildfläche ist
   selbst das Fokus-Ziel (`tabindex="-1" autofocus` im Markup) und zeigt
   nie einen Ring, und die Knöpfe zeigen einen Ring NUR bei echter
   Tastatur-Bedienung — dann aber einen eigenen, passenden. */

.mc-pg-lb-viewport:focus,
.mc-pg-lb-viewport:focus-visible {
	outline: none !important;
}

.mc-pg-lb button:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: var(--mc-pg-lb-close-shadow, 0 2px 12px rgba(0, 0, 0, 0.1)) !important;
}

.mc-pg-lb button:focus-visible {
	outline: var(--mc-pg-lb-focus-w, 2px) solid var(--mc-pg-lb-focus-color, currentColor) !important;
	outline-offset: var(--mc-pg-lb-focus-off, 3px) !important;
}

/* --------------------------------------------------------------------------
   Bildfläche
   -------------------------------------------------------------------------- */

.mc-pg-lb-viewport {
	grid-area: 1 / 1;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	/* Rückfall gleich der Vorgabe des Steuerelements — siehe dort, warum
	   so wenig: Mehr Rand macht das Bild im Fenster kleiner als auf der
	   Seite. */
	padding: var(--mc-pg-lb-pad, 24px 24px 96px);
	overflow: hidden;
	touch-action: pan-y;
}

/* Seitlicher Mindestabstand auf dem Handy.
   ------------------------------------------------------------------
   Bis 1.47.0 stand die Handy-Vorgabe seitlich auf 0 — das Bild klebte an
   den Bildschirmkanten. 5 px sind der BODEN, nicht die Vorgabe: `max()`
   nimmt den eingestellten Wert, sobald er größer ist, und fängt jeden
   kleineren ab. Deshalb reicht ein neuer Vorgabewert allein nicht — wer
   0 einträgt, bekäme sonst wieder 0.
   Die Regel steht später als die Kurzschreibweise oben und gewinnt damit
   bei gleicher Spezifität; oben und unten bleiben unangetastet. */
@media (max-width: 767px) {
	.mc-pg-lb-viewport {
		padding-inline-start: max(5px, var(--mc-pg-lb-pad-l, 0px));
		padding-inline-end: max(5px, var(--mc-pg-lb-pad-r, 0px));
	}
}

.mc-pg-lb-slide {
	grid-area: 1 / 1;
	display: grid;
	place-items: center;
	margin: 0;
	min-width: 0;
	min-height: 0;
	opacity: 0;
	pointer-events: none;
	z-index: 0;
}

.mc-pg-lb-slide.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 2;
	animation: mc-pg-lb-in var(--mc-pg-lb-dur) var(--mc-pg-lb-ease) both;
}

/* Die abgehende Folie bleibt genau so lange stehen, wie die Bewegung
   dauert — beim „Überdecken" ist sie es ja, die überdeckt wird. */
.mc-pg-lb-slide.is-leaving {
	opacity: 1;
	z-index: 1;
	animation: mc-pg-lb-out var(--mc-pg-lb-dur) var(--mc-pg-lb-ease) both;
}

/* Beim ersten Öffnen gibt es nichts zu wechseln — sonst liefe die
   Eingangs-Bewegung der Folie gegen die des ganzen Fensters. */
.mc-pg-lb.is-fresh .mc-pg-lb-slide.is-active {
	animation: none;
}

.mc-pg-lb-slide img {
	display: block;
	cursor: default;
	transition: transform 0.35s var(--mc-pg-lb-ease);

	/* --- Theme-Panzer: im Browser nachgestellt hat ein Theme mit
	   `img { border-radius: … }` die Rundung des Fensters überschrieben,
	   und `img { width: 100% }` hätte das Bild verzerrt. --- */
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: var(--mc-pg-lb-radius, 0px) !important;
	box-shadow: var(--mc-pg-lb-shadow, none) !important;
}

/* Vergrößern.
   ------------------------------------------------------------------
   DREI Klassen, und jede beantwortet eine andere Frage:
   `--zoomable` — „der Betreiber hat es eingeschaltet" (vom Server).
   `can-zoom`   — „bei DIESEM Bild ist Vergrößern möglich, JETZT" (vom
                  Skript: nach der eingestellten Grenze — bis zum
                  Höchstwert oder höchstens bis zur echten Auflösung —
                  UND erst, wenn das Fenster fertig aufgegangen ist.
                  Während der Öffnen- und Schließen-Bewegung fehlt die
                  Klasse: Ein Plus im Kreis über einem Bild, das noch
                  wächst, gehört zu einem Zustand, den es da noch nicht
                  gibt).
   `is-zoom-max` — „weiter geht es nicht, der nächste Klick führt heraus".
   Der Zeiger hängt an den letzten beiden: Plus, solange ein Schritt
   ansteht, Minus erst danach. Ein Zeiger, der etwas verspricht, was der
   Klick nicht einlöst, ist genau der Fall, über den der Betreiber
   gestolpert ist — deshalb entscheidet hier immer der Zustand, nie die
   Einstellung allein. */
.mc-pg-lb.can-zoom .mc-pg-lb-slide.is-active img {
	cursor: var(--mc-pg-lb-cur-in, zoom-in);
}

.mc-pg-lb.can-zoom.is-zoom-max .mc-pg-lb-slide.is-active img {
	cursor: var(--mc-pg-lb-cur-out, zoom-out);
}

/* Während des Ziehens die geschlossene Hand — die eine Stelle, an der der
   Kreis-Zeiger dem Standard weicht.
   ------------------------------------------------------------------
   Sie steht auf ALLEN Ebenen des Fensters, nicht nur auf dem Bild, und
   mit `!important`. Der Grund ist das Flackern beim Ziehen: Das Bild
   bekommt in jedem Bild eine neue Verformung, der Browser prüft dabei neu,
   welches Element unter dem Zeiger liegt — und beantwortet die Frage in
   Zwischenschritten schon mal mit dem Elternelement. Trägt jede Ebene
   dieselbe Antwort, kann diese Prüfung nichts mehr umschalten. Die
   Zustandsklasse steht an der Wurzel des Fensters, damit hier eine einzige
   Regel reicht. */
.mc-pg-lb.is-panning,
.mc-pg-lb.is-panning .mc-pg-lb-inner,
.mc-pg-lb.is-panning .mc-pg-lb-viewport,
.mc-pg-lb.is-panning .mc-pg-lb-slide,
.mc-pg-lb.is-panning .mc-pg-lb-slide img {
	cursor: grabbing !important;
}

/* Solange vergrößert ist, gehört jede Geste dem Bild: `touch-action: none`
   schaltet die Browser-Gesten ab, damit Zwei-Finger-Zoom und Verschieben
   bei UNS ankommen. Das ist auch der Grund, warum es nur im vergrößerten
   Zustand steht — ohne Vergrößerung soll das Wischen normal funktionieren. */
.mc-pg-lb.is-zoomed .mc-pg-lb-viewport {
	touch-action: none;
}

.mc-pg-lb--zoomable .mc-pg-lb-viewport {
	touch-action: none;
}

/* Während einer Geste darf nichts nachfedern. */
.mc-pg-lb.is-pinching .mc-pg-lb-slide img {
	transition: none !important;
}

/* --------------------------------------------------------------------------
   Bewegungen — ein Satz Keyframes, die Richtung kommt aus einer Variablen
   -------------------------------------------------------------------------- */

@keyframes mc-pg-lb-in {
	from {
		transform: translate3d(calc(var(--mc-pg-lb-sx, 1) * var(--mc-pg-lb-dx, 0px)), 0, 0)
			scale(var(--mc-pg-lb-s-in, 1));
		opacity: var(--mc-pg-lb-o-in, 1);
	}
	to {
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 1;
	}
}

@keyframes mc-pg-lb-out {
	from {
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 1;
	}
	to {
		transform: translate3d(calc(var(--mc-pg-lb-sx, 1) * var(--mc-pg-lb-dx-out, 0px) * -1), 0, 0)
			scale(var(--mc-pg-lb-s-out, 1));
		opacity: var(--mc-pg-lb-o-out, 1);
	}
}

/* Richtung: „weiter" schiebt von rechts herein, „zurück" von links. */
.mc-pg-lb[data-dir="prev"] {
	--mc-pg-lb-sx: -1;
}

/* Überdecken (Vorgabe): Die neue Folie schiebt sich über die alte, die
   alte bleibt liegen. */
.mc-pg-lb--fx-cover {
	--mc-pg-lb-dx: 100%;
	--mc-pg-lb-dx-out: 0px;
}

/* Schieben: beide bewegen sich zusammen. */
.mc-pg-lb--fx-slide {
	--mc-pg-lb-dx: 100%;
	--mc-pg-lb-dx-out: 100%;
	--mc-pg-lb-o-out: 1;
}

.mc-pg-lb--fx-fade {
	--mc-pg-lb-o-in: 0;
	--mc-pg-lb-o-out: 0;
}

.mc-pg-lb--fx-zoom {
	--mc-pg-lb-s-in: 0.92;
	--mc-pg-lb-o-in: 0;
	--mc-pg-lb-s-out: 1.04;
	--mc-pg-lb-o-out: 0;
}

/* Bogen: Die Folie zieht auf einer gekrümmten Bahn herein und heraus —
   der Knick in der Mitte (senkrechter Versatz quer zur Laufrichtung) ist
   das, was den Halbkreis ausmacht. */
.mc-pg-lb--fx-arc .mc-pg-lb-slide.is-active {
	animation: mc-pg-lb-arc-in var(--mc-pg-lb-dur) var(--mc-pg-lb-ease) both;
}

.mc-pg-lb--fx-arc .mc-pg-lb-slide.is-leaving {
	animation: mc-pg-lb-arc-out var(--mc-pg-lb-dur) var(--mc-pg-lb-ease) both;
}

@keyframes mc-pg-lb-arc-in {
	0% {
		transform: translate3d(calc(var(--mc-pg-lb-sx, 1) * 70%), 0, 0)
			rotate(calc(var(--mc-pg-lb-sx, 1) * 10deg)) scale(0.84);
		opacity: 0;
	}
	50% {
		transform: translate3d(calc(var(--mc-pg-lb-sx, 1) * 26%), 13%, 0)
			rotate(calc(var(--mc-pg-lb-sx, 1) * 5deg)) scale(0.93);
		opacity: 1;
	}
	100% {
		transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
		opacity: 1;
	}
}

@keyframes mc-pg-lb-arc-out {
	0% {
		transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
		opacity: 1;
	}
	50% {
		transform: translate3d(calc(var(--mc-pg-lb-sx, 1) * -26%), 13%, 0)
			rotate(calc(var(--mc-pg-lb-sx, 1) * -5deg)) scale(0.93);
		opacity: 1;
	}
	100% {
		transform: translate3d(calc(var(--mc-pg-lb-sx, 1) * -70%), 0, 0)
			rotate(calc(var(--mc-pg-lb-sx, 1) * -10deg)) scale(0.84);
		opacity: 0;
	}
}

.mc-pg-lb--fx-none .mc-pg-lb-slide.is-active,
.mc-pg-lb--fx-none .mc-pg-lb-slide.is-leaving {
	animation: none;
}

.mc-pg-lb--fx-none .mc-pg-lb-slide.is-leaving {
	opacity: 0;
}

/* --------------------------------------------------------------------------
   Schließen
   -------------------------------------------------------------------------- */

/* EIN Schließen-Knopf, und er sitzt immer oben rechts.
   Er stand bis 1.46.0 bei der Form „Runde Knöpfe" MITTEN IN DER
   PFEILREIHE — zurück · schließen · zähler · weiter. Das ergibt keinen
   Sinn: Die Leiste ist Navigation, Schließen ist das Gegenteil davon,
   und wer weiterblättern will, trifft den Ausgang. Schließen gehört
   deshalb NIE in die Leiste; ein zweiter Knopf im Markup dafür ist
   ersatzlos entfallen. */
.mc-pg-lb-close {
	grid-area: 1 / 1;
	/* Oben rechts — dort sucht ihn jeder. */
	justify-self: end;
	align-self: start;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	/* Die Deckkraft MUSS hier mit stehen: Die Einblend-Regel weiter oben
	   hat dieselbe Spezifität, steht aber früher — diese Zeile würde sie
	   sonst vollständig überschreiben und der Schließen-Knopf erschiene
	   schlagartig. (Genau die Falle aus CLAUDE.md: „Der Vertrag gilt auch
	   für SPÄTERE Regeln gleicher Spezifität".) */
	transition: background-color 0.25s var(--mc-pg-lb-ease), color 0.25s var(--mc-pg-lb-ease),
		transform 0.25s var(--mc-pg-lb-ease),
		opacity calc(var(--mc-pg-lb-motion-dur) * 0.65) var(--mc-pg-lb-motion-ease) var(--mc-pg-lb-chrome-delay, 0s);

	/* --- Theme-Panzer --- */
	width: var(--mc-pg-lb-close-size, 52px) !important;
	height: var(--mc-pg-lb-close-size, 52px) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	/* Der Abstand zum Rand gehört IN den Theme-Panzer, nicht davor: Ein
	   `margin: 0 !important` weiter unten in derselben Regel hätte ihn
	   sonst wieder eingesammelt (spätere Deklaration gewinnt). */
	margin: var(--mc-pg-lb-close-off, 24px) !important;
	color: var(--mc-pg-lb-close-color, #111111) !important;
	background-color: var(--mc-pg-lb-close-bg, #ffffff) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: var(--mc-pg-lb-close-radius, 999px) !important;
	box-shadow: var(--mc-pg-lb-close-shadow, 0 2px 12px rgba(0, 0, 0, 0.1)) !important;
}

.mc-pg-lb-close:hover {
	color: var(--mc-pg-lb-close-color-h, var(--mc-pg-lb-close-color, #111111)) !important;
	background-color: var(--mc-pg-lb-close-bg-h, var(--mc-pg-lb-close-bg, #ffffff)) !important;
}

.mc-pg-lb-close svg {
	width: var(--mc-pg-lb-close-icon, 18px);
	height: var(--mc-pg-lb-close-icon, 18px);
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Bedienleiste unten (Pille)
   -------------------------------------------------------------------------- */

.mc-pg-lb-bar {
	position: absolute;
	inset-block-end: var(--mc-pg-lb-bar-off, 32px);
	inset-inline: 0;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.mc-pg-lb-barinner {
	display: inline-flex;
	align-items: center;
	gap: var(--mc-pg-lb-bar-gap, 6px);
	padding: var(--mc-pg-lb-bar-pad, 6px 10px);
	border-radius: var(--mc-pg-lb-bar-radius, 999px);
	background-color: var(--mc-pg-lb-bar-bg, transparent);
	box-shadow: var(--mc-pg-lb-bar-shadow, none);
	pointer-events: auto;

	/* Haarlinie und Weichzeichner. Beide Rückfälle sind NEUTRAL — die
	   Form „Runde Knöpfe" darf nichts davon abbekommen. Der Weichzeichner
	   ist der Grund, warum die Leiste über einem Foto weiß bleibt, ohne
	   es zuzudecken: Sie liegt auf dem Bild, nicht davor. */
	border-style: var(--mc-pg-lb-bar-border-style, none);
	border-width: var(--mc-pg-lb-bar-border-w, 0);
	border-color: var(--mc-pg-lb-bar-border-color, currentColor);
	-webkit-backdrop-filter: var(--mc-pg-lb-bar-blur, none);
	backdrop-filter: var(--mc-pg-lb-bar-blur, none);
}

.mc-pg-lb-arrow {
	display: var(--mc-pg-lb-arrow-d, inline-flex);
	align-items: center;
	justify-content: center;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	transition: color 0.2s var(--mc-pg-lb-ease), background-color 0.2s var(--mc-pg-lb-ease);

	/* --- Theme-Panzer --- */
	width: var(--mc-pg-lb-arrow-size, 34px) !important;
	height: var(--mc-pg-lb-arrow-size, 34px) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	color: var(--mc-pg-lb-arrow-color, #111111) !important;
	background-color: var(--mc-pg-lb-arrow-bg, transparent) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: var(--mc-pg-lb-arrow-radius, 999px) !important;
	box-shadow: var(--mc-pg-lb-arrow-shadow, none) !important;
}

.mc-pg-lb-arrow:hover {
	color: var(--mc-pg-lb-arrow-color-h, var(--mc-pg-lb-arrow-color, #111111)) !important;
	background-color: var(--mc-pg-lb-arrow-bg-h, var(--mc-pg-lb-arrow-bg, transparent)) !important;
}

.mc-pg-lb-arrow[disabled] {
	opacity: 0.3;
	pointer-events: none;
}

.mc-pg-lb-arrow svg {
	width: var(--mc-pg-lb-arrow-icon, 17px);
	height: var(--mc-pg-lb-arrow-icon, 17px);
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

.mc-pg-lb-count {
	display: var(--mc-pg-lb-count-d, inline-flex);
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 0 var(--mc-pg-lb-count-pad, 8px);
	line-height: 1;
	/* Keine eigene Fläche: Der Zähler liegt in der Kapsel der Leiste, eine
	   zweite Pille darin wäre eine Pille in der Pille. Die vier Variablen
	   dafür (`-count-h/-bg/-radius/-shadow`) sind mit der Form „Runde
	   Knöpfe" entfallen — nicht wieder einführen. */
	font-size: var(--mc-pg-lb-count-size, 13px);
	font-weight: var(--mc-pg-lb-count-weight, 500);
	letter-spacing: var(--mc-pg-lb-count-ls, normal);
	color: var(--mc-pg-lb-count-color, #111111);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Vorschaubilder in der Lightbox (optional)
   -------------------------------------------------------------------------- */

.mc-pg-lb-thumbs {
	position: absolute;
	inset-block-end: var(--mc-pg-lb-thumbs-off, 96px);
	inset-inline: 0;
	z-index: 5;
	display: var(--mc-pg-lb-thumbs-d, none);
	align-items: center;
	justify-content: center;
	gap: var(--mc-pg-lb-thumb-gap, 8px);
	padding-inline: 24px;
	overflow-x: auto;
	scrollbar-width: none;
}

.mc-pg-lb-thumbs::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.mc-pg-lb-thumb {
	flex: 0 0 auto;
	overflow: hidden;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	opacity: var(--mc-pg-lb-thumb-op, 0.5);
	transition: opacity 0.2s var(--mc-pg-lb-ease), border-color 0.2s var(--mc-pg-lb-ease);

	/* --- Theme-Panzer --- */
	width: var(--mc-pg-lb-thumb-size, 56px) !important;
	height: var(--mc-pg-lb-thumb-size, 56px) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background-color: transparent !important;
	background-image: none !important;
	border-style: solid !important;
	border-width: 2px !important;
	border-color: transparent !important;
	border-radius: var(--mc-pg-lb-thumb-radius, 8px) !important;
	box-shadow: none !important;
}

.mc-pg-lb-thumb img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	border-radius: inherit !important;
	object-fit: cover;
}

.mc-pg-lb-thumb.is-active {
	opacity: 1;
	border-color: var(--mc-pg-lb-thumb-border-color-a, #111111) !important;
}

/* --------------------------------------------------------------------------
   Auslöser am Bild + Scroll-Sperre
   -------------------------------------------------------------------------- */

/* Das Lupensymbol ist im Modus „nur das Symbol öffnet" eine echte
   Schaltfläche — deshalb hier derselbe Theme-Panzer wie überall. */
button.mc-pg-zoomhint {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	pointer-events: auto;

	/* --- Theme-Panzer: dieselben Variablen wie beim Zeichen-Zustand --- */
	width: var(--mc-pg-hint-s, 44px) !important;
	height: var(--mc-pg-hint-s, 44px) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: var(--mc-pg-hint-off, 24px) !important;
	border: 0 !important;
	background-image: none !important;
	background-color: var(--mc-pg-hint-bg, #ffffff) !important;
	color: var(--mc-pg-hint-color, #111111) !important;
	border-radius: var(--mc-pg-hint-radius, 999px) !important;
	box-shadow: var(--mc-pg-hint-shadow, 0 4px 16px rgba(0, 0, 0, 0.1)) !important;
}

button.mc-pg-zoomhint:hover {
	background-color: var(--mc-pg-hint-bg-h, var(--mc-pg-hint-bg, #ffffff)) !important;
	color: var(--mc-pg-hint-color-h, var(--mc-pg-hint-color, #111111)) !important;
}

/* „Erst beim Überfahren": Das Steuerelement setzt --mc-pg-hint-op auf 0. */
.mc-pg-stage:hover .mc-pg-zoomhint,
.mc-pg-zoomhint:focus-visible {
	opacity: 1;
}

/* Ohne Zeiger gäbe es kein „Überfahren" — dieselbe Absicherung wie bei den
   Pfeilen: Auf Touch-Geräten bleibt das Symbol sichtbar, wer es dort nicht
   will, stellt es je Endgerät ab. */
@media (hover: none) {
	.mc-pg .mc-pg-zoomhint {
		opacity: var(--mc-pg-hint-op-touch, 1);
	}
}

/* Scroll-Sperre der Seite. `clip` statt `hidden` — dasselbe Muster wie beim
   Slide-in und beim Menü: `hidden` erzeugt auf iOS einen Scroll-Container
   und springt beim Schließen an den Anfang zurück. Die Breite des
   Scrollbalkens wird ausgeglichen, damit die Seite darunter nicht springt. */
html.mc-pg-lock {
	overflow: clip;
	padding-inline-end: var(--mc-pg-lock-pad, 0px);
}

/* ==========================================================================
   Nur für Screenreader — meldet den Bildwechsel
   ========================================================================== */

.mc-pg-live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Leerer Zustand (nur im Editor sichtbar)
   ========================================================================== */

.mc-pg-empty {
	display: grid;
	place-items: center;
	gap: 8px;
	padding: 48px 24px;
	text-align: center;
	border: 1px dashed rgba(17, 17, 17, 0.22);
	border-radius: 12px;
	color: rgba(17, 17, 17, 0.62);
	font-size: 14px;
	line-height: 1.5;
}

/* ==========================================================================
   Weniger Bewegung
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.mc-pg-viewport,
	.mc-pg-strip {
		scroll-behavior: auto;
	}

	.mc-pg *,
	.mc-pg *::before,
	.mc-pg *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}