/* ====================================================================
 * Produktgalerie (PDP) — eigene Implementierung, ersetzt die
 * WooCommerce-Standardgalerie (FlexSlider/Zoom/PhotoSwipe) vollständig.
 * Markup: woocommerce/single-product/product-image.php
 * Logik:  assets/js/product-gallery.js
 * Nur auf Produktseiten geladen (siehe functions.php).
 * ==================================================================== */

.mb-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--mb-space-3);
}

/* ---------- Bühne / Hauptbild ---------- */

.mb-gallery__stage {
	position: relative;
}

.mb-gallery__viewport {
	overflow: hidden;
	clip-path: var(--mb-slope-lg);
}

.mb-gallery__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Scrollbar der Hauptbühne optisch ausblenden — Navigation läuft über
	   Pfeile/Tastatur/Wisch-Geste, die Leiste selbst ist nur der Antrieb. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.mb-gallery__track::-webkit-scrollbar {
	display: none;
}

.mb-gallery__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	aspect-ratio: 4 / 3;
	background-color: var(--mb-ink-900);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Kein Beschnitt im Hauptbild — auch falls ein einzelnes Bild einmal nicht
   exakt 4:3 ist, bleibt es vollständig sichtbar (object-fit: contain). */
.mb-gallery__slide img,
.mb-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mb-gallery--empty .mb-gallery__placeholder-img {
	aspect-ratio: 4 / 3;
	width: 100%;
	object-fit: contain;
	background-color: var(--mb-ink-900);
	clip-path: var(--mb-slope-lg);
}

/* Barrierefreier Status-Text (Slide-Wechsel), visuell ausgeblendet */
.mb-gallery__status {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Pfeile (Hauptbild + Lightbox) ----------
   Maße, Position, Pfeilzeichen. Farben und Zustände: Block „Bedienelemente“ unten. */

.mb-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.mb-gallery__nav--prev { left: var(--mb-space-3); }
.mb-gallery__nav--next { right: var(--mb-space-3); }

/* ---------- Zoom-Auslöser ---------- */

.mb-gallery__zoom-trigger {
	position: absolute;
	right: var(--mb-space-3);
	bottom: var(--mb-space-3);
	z-index: 2;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.mb-gallery__zoom-trigger .mb-icon {
	width: 20px;
	height: 20px;
	background-color: currentColor;
}

/* ---------- Zähler "2 / 7" ---------- */

.mb-gallery__counter {
	position: absolute;
	left: var(--mb-space-3);
	bottom: var(--mb-space-3);
	z-index: 2;
	background: rgba(255, 255, 255, 0.94);
	color: var(--mb-ink-900);
	border: 1px solid var(--mb-rule-strong);
	border-radius: 0;
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 7px var(--mb-space-2);
}

/* ---------- Thumbnail-Leiste ---------- */

.mb-gallery__thumbs {
	display: flex;
	align-items: center;
	gap: var(--mb-space-2);
}

.mb-gallery__thumbs-viewport {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.mb-gallery__thumbs-track {
	display: flex;
	gap: var(--mb-space-2);
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 4px; /* Platz für den Fokus-Ring (2 px Linie + 2 px Abstand) */
}

.mb-gallery__thumbs-track::-webkit-scrollbar {
	display: none;
}

.mb-gallery__thumb {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	padding: 0;
	overflow: hidden;
}

.mb-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mb-gallery__thumbs-nav {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.mb-gallery__thumbs-nav[hidden] {
	display: none;
}

/* Bei wenigen Bildern (Track passt vollständig ins Fenster) blendet JS die
   Pfeile per [hidden] aus — kein Leerlauf-Klick auf inaktive Buttons. */

@media (min-width: 640px) {
	.mb-gallery__nav {
		width: 52px;
		height: 52px;
	}
}

/* Touch und schmale Fenster: Trefferfläche mindestens 44 × 44 px */
@media (pointer: coarse), (max-width: 767px) {
	.mb-gallery__thumbs-nav {
		width: 44px;
		height: 44px;
	}
}

/* ---------- Vollbild-Ansicht / Lightbox ---------- */

.mb-gallery__lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(2, 10, 10, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
}

.mb-gallery__lightbox[hidden] {
	display: none;
}

.mb-gallery__lightbox-panel {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.mb-gallery__lightbox-stage {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	touch-action: none;
	cursor: zoom-in;
}

.mb-gallery__lightbox-stage.is-zoomed {
	cursor: grab;
}

.mb-gallery__lightbox-stage.is-panning {
	cursor: grabbing;
}

.mb-gallery__lightbox-img {
	max-width: 92vw;
	max-height: 82vh;
	width: auto;
	height: auto;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
	will-change: transform;
}

.mb-gallery__lightbox-img.is-animatable {
	transition: transform var(--mb-dur-base) var(--mb-ease-cut);
}

.mb-gallery__lightbox-close {
	position: absolute;
	top: var(--mb-space-4);
	right: var(--mb-space-4);
	z-index: 3;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75rem;
	line-height: 1;
	padding: 0;
}

.mb-gallery__lightbox-caption {
	position: absolute;
	left: 50%;
	bottom: var(--mb-space-4);
	transform: translateX(-50%);
	margin: 0;
	max-width: min(90vw, 640px);
	text-align: center;
	color: var(--mb-card);
	font-family: var(--mb-font-body);
	font-size: var(--mb-fs-small);
	background: rgba(2, 10, 10, 0.6);
	padding: var(--mb-space-1) var(--mb-space-3);
}

.mb-gallery__lightbox-caption:empty {
	display: none;
}

/* Zähler links oben — rechts oben sitzt der Schließen-Knopf (vorher überdeckt) */
.mb-gallery__counter--lightbox {
	left: var(--mb-space-4);
	right: auto;
	top: var(--mb-space-4);
	bottom: auto;
	position: absolute;
}

/* ---------- Reduzierte Bewegung respektieren ---------- */

@media (prefers-reduced-motion: reduce) {
	.mb-gallery__track,
	.mb-gallery__thumbs-track {
		scroll-behavior: auto;
	}

	.mb-gallery__lightbox-img.is-animatable {
		transition: none;
	}
}

/* ---------- Bedienelemente der Galerie: hell, eckig, ohne Rot- und Magentafläche ----------
   Designkonzept (Stand 01.10.2026):
   1. Fläche: fast weiß (94 %), eine feine Linie in --mb-rule-strong und die
      Haarlinie --mb-shadow-rule — dieselbe Sprache wie die übrigen Karten der Seite.
   2. Form: eckig, Radius 0 — wie CTA-Kanten und Karten. Das Zeichen (Pfeil, Lupe,
      Kreuz) sitzt in --mb-ink-900, Kontrast gegen die Fläche über 15 : 1.
   3. Hover: Linie wird Tinte, Zeichen wechselt auf --mb-red-hover (5,4 : 1 auf Weiß).
      Die Fläche bleibt hell, nichts füllt sich rot.
   4. Gedrückt: Fläche --mb-neutral-100, Zeichen Tinte, Linie Tinte — kein Farbwechsel.
   5. Tastaturfokus (:focus-visible): 2 px Tintenrahmen mit 2 px weißem Abstand,
      auf hellen wie dunklen Bildern erkennbar. Der Fokus nach einem Mausklick
      (:focus ohne :focus-visible) sieht aus wie die Ruhe.
   6. Vorschaubilder: Rahmen 2 px; Ruhe hell, Hover mittelgrau, aktiv Tinte —
      keine Füllfarbe. Zähler und Schaltflächen teilen dieselbe helle Fläche.
   7. Trefferflächen mindestens 44 × 44 px (Vorschau-Pfeile ab Tablet-Breite
      oder bei Touch), Deaktiviert: 45 % Deckkraft, keine Reaktion.
   Quelle von Magenta und Rundung:
   Hello-Elementor `assets/css/reset.css` Zeile 1 — `button:hover/:focus` setzt
   background #CC3366, `button` border-radius 3px, `a` color #CC3366, `a:hover` #333366;
   das Elementor-Kit (`uploads/elementor/css/post-7.css`, Zeile 1:
   `.elementor-kit-7 button`) setzt background #FF0434.
   Deshalb `:root body` (0,2,1): schlägt beide, ohne `button` global umzufärben. */
:root body :is(.mb-gallery__nav, .mb-gallery__zoom-trigger, .mb-gallery__thumbs-nav, .mb-gallery__lightbox-close),
:root body :is(.mb-gallery__nav, .mb-gallery__zoom-trigger, .mb-gallery__thumbs-nav, .mb-gallery__lightbox-close):focus {
	background-color: rgba(255, 255, 255, 0.94);
	color: var(--mb-ink-900);
	border: 1px solid var(--mb-rule-strong);
	border-radius: 0;
	box-shadow: var(--mb-shadow-rule);
	outline: 0;
	text-decoration: none;
	transition: border-color var(--mb-dur-fast) var(--mb-ease-cut),
		color var(--mb-dur-fast) var(--mb-ease-cut),
		background-color var(--mb-dur-fast) var(--mb-ease-cut);
}
@media (hover: hover) {
	:root body :is(.mb-gallery__nav, .mb-gallery__zoom-trigger, .mb-gallery__thumbs-nav, .mb-gallery__lightbox-close):hover {
		background-color: var(--mb-card);
		color: var(--mb-red-hover);
		border-color: var(--mb-ink-900);
	}
}
:root body :is(.mb-gallery__nav, .mb-gallery__zoom-trigger, .mb-gallery__thumbs-nav, .mb-gallery__lightbox-close):active {
	background-color: var(--mb-neutral-100);
	color: var(--mb-ink-900);
	border-color: var(--mb-ink-900);
}
:root body :is(.mb-gallery__nav, .mb-gallery__zoom-trigger, .mb-gallery__thumbs-nav, .mb-gallery__lightbox-close):focus-visible {
	outline: 2px solid var(--mb-ink-900);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--mb-card);
	border-color: var(--mb-ink-900);
}
:root body :is(.mb-gallery__nav, .mb-gallery__zoom-trigger, .mb-gallery__thumbs-nav, .mb-gallery__lightbox-close):disabled {
	opacity: 0.45;
	pointer-events: none;
}

/* Pfeilzeichen: schlanker Winkel aus zwei Linien statt Schriftzeichen */
.mb-gallery__nav > span,
.mb-gallery__thumbs-nav > span {
	display: block;
	font-size: 0;
	line-height: 0;
}
.mb-gallery__nav > span::before,
.mb-gallery__thumbs-nav > span::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}
.mb-gallery__nav--next > span::before,
.mb-gallery__thumbs-nav--next > span::before {
	transform: translateX(-2px) rotate(45deg);
}
.mb-gallery__nav--prev > span::before,
.mb-gallery__thumbs-nav--prev > span::before {
	transform: translateX(2px) rotate(-135deg);
}
.mb-gallery__thumbs-nav > span::before {
	width: 8px;
	height: 8px;
}

/* Vorschaubilder: Rahmenwechsel, keine Füllung, kein Magenta */
:root body .mb-gallery__thumb,
:root body .mb-gallery__thumb:focus {
	background-color: var(--mb-card);
	color: var(--mb-ink-900);
	border: 2px solid var(--mb-rule);
	border-radius: 0;
	outline: 0;
	box-shadow: none;
	transition: border-color var(--mb-dur-fast) var(--mb-ease-cut);
}
@media (hover: hover) {
	:root body .mb-gallery__thumb:hover {
		background-color: var(--mb-card);
		color: var(--mb-ink-900);
		border-color: var(--mb-ink-500);
	}
}
:root body .mb-gallery__thumb:active {
	background-color: var(--mb-card);
	border-color: var(--mb-ink-700);
}
:root body .mb-gallery__thumb.is-active,
:root body .mb-gallery__thumb.is-active:is(:hover, :focus, :active) {
	border-color: var(--mb-ink-900);
}
:root body .mb-gallery__thumb:focus-visible {
	outline: 2px solid var(--mb-ink-900);
	outline-offset: 2px;
}

/* ---------- KI-Kennzeichnung in der Galerie ---------- */
/* Zeile mittig am unteren Rand des Bildes: links sitzt der Zähler, rechts der Zoom-Knopf. */
.mb-gallery__slide > .mb-ki-hinweis--bild {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}
.mb-gallery__lightbox-stage { flex-direction: column; gap: var(--mb-space-2); }
/* Unter dem Bild, in der Lightbox auf dunklem Grund (Kontrast > 12 : 1) */
.mb-gallery__lightbox-ki {
	position: static;
	padding: 0;
	background: none;
	color: var(--mb-neutral-300);
}