/* ── Overlay ────────────────────────────────────────────────────────── */

.quoi-lb {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	inset: 0;
	background: var(--quoi-lb-overlay-bg, rgba(0, 0, 0, 0.85));
	backdrop-filter: blur(var(--quoi-lb-blur, 0px));
	z-index: 99999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.quoi-lb.is-open {
	opacity: 1;
	visibility: visible;
}

/* ── Bühne (Galerie-Bild oder Inhalt) ───────────────────────────────── */

.quoi-lb-stage {
	max-width: 88vw;
	max-height: 88vh;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Horizontale Wischgesten ans JS, vertikales Scrollen (Inhalt) und Zoom bleiben nativ */
	touch-action: pan-y pinch-zoom;
}

.quoi-lb-img {
	max-width: 100%;
	max-height: 88vh;
	object-fit: contain;
	display: block;
	/* Kein natives Bild-Ziehen – sonst startet der Browser beim Wischen einen Drag */
	-webkit-user-drag: none;
	user-select: none;
}

.quoi-lb-content-wrap {
	max-width: 88vw;
	max-height: 88vh;
	overflow-y: auto;
	background: #fff;
	color: #1a1a1a;
	padding: 40px;
	border-radius: 8px;
}

/* ── Steuerelemente ─────────────────────────────────────────────────── */

.quoi-lb-close,
.quoi-lb-prev,
.quoi-lb-next {
	position: absolute;
	/*
	 * Eigene helle Fläche mit dunklem Symbol: Die Overlay-Farbe ist in den
	 * QUOI-Einstellungen frei wählbar (auch hell) – weiße Symbole wären dann
	 * unsichtbar. !important gegen das Button-Styling des Themes (Astra).
	 */
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	background: rgba(255, 255, 255, 0.92) !important;
	border: 1px solid rgba(17, 17, 17, 0.15) !important;
	border-radius: 50% !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
	color: #111 !important;
	font-family: system-ui, -apple-system, sans-serif;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	-webkit-tap-highlight-color: transparent;
}

.quoi-lb-close:hover,
.quoi-lb-close:focus-visible,
.quoi-lb-prev:hover,
.quoi-lb-prev:focus-visible,
.quoi-lb-next:hover,
.quoi-lb-next:focus-visible {
	background: #111 !important;
	color: #fff !important;
}

.quoi-lb-close {
	top: 20px;
	right: 24px;
	z-index: 2;
}

.quoi-lb-prev,
.quoi-lb-next {
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.quoi-lb-prev { left: 16px; }
.quoi-lb-next { right: 16px; }

.quoi-lb-prev[hidden],
.quoi-lb-next[hidden] {
	display: none;
}

.quoi-lb-counter {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 20px;
	color: #111;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	line-height: 1;
}

.quoi-lb-counter:empty {
	display: none;
}

/* ── Mobile ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.quoi-lb {
		/* Kein Scroll-Durchgriff auf die Seite dahinter */
		overscroll-behavior: contain;
	}

	/* Bühne füllt den Schirm, damit Wischen überall greift */
	.quoi-lb-stage {
		width: 100%;
		height: 100%;
		max-width: 100vw;
		max-height: 100dvh;
	}

	.quoi-lb-img {
		max-width: 100vw;
		max-height: 78dvh;
	}

	.quoi-lb-content-wrap {
		box-sizing: border-box;
		max-width: calc(100vw - 32px);
		max-height: 84dvh;
		padding: 24px 20px;
	}

	.quoi-lb-close {
		top: calc(12px + env(safe-area-inset-top, 0px));
		right: 12px;
	}

	/* Pfeile aus der Bildmitte in die unteren Ecken – daumenfreundlich */
	.quoi-lb-prev,
	.quoi-lb-next {
		top: auto;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		transform: none;
	}

	.quoi-lb-prev { left: 16px; }
	.quoi-lb-next { right: 16px; }

	.quoi-lb-counter {
		bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	}
}

/* ── Reduced Motion ─────────────────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	.quoi-lb,
	.quoi-lb-close,
	.quoi-lb-prev,
	.quoi-lb-next {
		transition: none;
	}
}