/*
	MVD-Lightbox „Fahnentuch“ (10.10.2026, ersetzt EXT:photoswipe) — gehört zu JavaScript/mvd-lightbox.js.
	Nachtblauer Grund mit dem Lichtverlauf des Fahnentuchs, feine Silberkante wie die Stickerei, das Bild liegt
	wie ein Abzug im weißen Rand. Farben nur aus mvd_farben.css. Keine style-Attribute im Skript (CSP).
*/
html:has(.mvd-lb[open]) {
	overflow: hidden;
}

.mvd-lb {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--mvd-nebel);
	background: radial-gradient(120% 100% at 50% 35%, var(--mvd-samt) 0%, var(--mvd-blau) 45%, var(--mvd-blau-tief) 100%);
	color-scheme: dark;
	overflow: hidden;
}
.mvd-lb[open] {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
}
.mvd-lb::backdrop {
	background: var(--mvd-blau-tief);
}
/* Silberkante der Stickerei */
.mvd-lb::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px solid var(--mvd-silber-25);
	outline: 1px solid var(--mvd-silber-12);
	outline-offset: 4px;
	border-radius: 6px;
	pointer-events: none;
}

.mvd-lb__kopf {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: max(18px, env(safe-area-inset-top)) 18px 6px 26px;
}
.mvd-lb__galerie {
	min-width: 0;
	margin: 0;
	font-family: var(--mvd-schrift-titel);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--mvd-papier);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mvd-lb__zaehler {
	flex: none;
	margin: 0;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--mvd-gold);
	color: var(--mvd-blau);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	font-variant-numeric: tabular-nums;
}
.mvd-lb__zaehler:empty {
	display: none;
}
.mvd-lb__zu {
	margin-left: auto;
}

.mvd-lb__buehne {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 0;
	padding: 6px 76px;
	overflow: hidden;
	/* waagerechtes Wischen bekommt das Skript, senkrecht scrollen und Zwei-Finger-Zoom bleiben beim Browser */
	touch-action: pan-y pinch-zoom;
}
.mvd-lb__rahmen {
	display: grid;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	padding: 7px;
	border-radius: 3px;
	background: var(--mvd-papier);
	box-shadow: 0 30px 60px -20px var(--mvd-schwarz-60), 0 0 0 1px var(--mvd-silber-25);
	will-change: transform;
}
.mvd-lb__rahmen[hidden] {
	display: none;
}
.mvd-lb__bild {
	display: block;
	max-width: 100%;
	max-height: calc(100dvh - 230px);
	width: auto;
	height: auto;
	cursor: zoom-in;
	user-select: none;
	-webkit-user-drag: none;
}
.mvd-lb--laedt .mvd-lb__rahmen {
	opacity: 0;
}
.mvd-lb--laedt .mvd-lb__buehne::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 42px;
	height: 42px;
	margin: -21px 0 0 -21px;
	border: 3px solid var(--mvd-silber-25);
	border-top-color: var(--mvd-gold);
	border-radius: 50%;
	animation: mvd-lb-dreh .9s linear infinite;
}
@keyframes mvd-lb-dreh {
	to { transform: rotate(1turn); }
}

/* Originalgröße: Bild in voller Auflösung, Bühne scrollt */
.mvd-lb--gross .mvd-lb__buehne {
	display: block;
	padding: 0;
	overflow: auto;
	touch-action: auto;
}
.mvd-lb--gross .mvd-lb__rahmen {
	display: inline-grid;
	max-width: none;
	max-height: none;
}
.mvd-lb--gross .mvd-lb__bild {
	max-width: none;
	max-height: none;
	cursor: zoom-out;
}

.mvd-lb__fehler {
	margin: 0;
	padding: 0 16px;
	text-align: center;
}
.mvd-lb__fehler a {
	color: var(--mvd-gold);
}

.mvd-lb__fuss {
	position: relative;
	z-index: 2;
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: 8px 18px max(20px, env(safe-area-inset-bottom));
}
.mvd-lb__text {
	max-width: 70ch;
	min-height: 1.4em;
	max-height: 22vh;
	overflow: auto;
	margin: 0;
	text-align: center;
	font-size: .92rem;
	color: var(--mvd-silber);
}
.mvd-lb__text strong {
	display: block;
	font-family: var(--mvd-schrift-titel);
	font-size: 1.2rem;
	color: var(--mvd-papier);
}

/* Filmstreifen */
.mvd-lb__streifen {
	display: flex;
	gap: 8px;
	max-width: 100%;
	padding: 4px 4px 6px;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--mvd-silber-45) transparent;
}
.mvd-lb__streifen:empty {
	display: none;
}
.mvd-lb__mini {
	flex: none;
	width: 58px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	overflow: hidden;
	background: var(--mvd-silber-12);
	cursor: pointer;
	opacity: .55;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: opacity .2s, outline-color .2s, transform .2s;
}
.mvd-lb__mini img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mvd-lb__mini:hover {
	opacity: .9;
}
.mvd-lb__mini[aria-current="true"] {
	opacity: 1;
	outline-color: var(--mvd-gold);
	transform: translateY(-2px);
}
.mvd-lb__mini:focus-visible {
	opacity: 1;
	outline-color: var(--mvd-papier);
}

/* Knöpfe: rund, Silberring, Gold beim Überfahren */
.mvd-lb__knopf {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--mvd-silber-45);
	border-radius: 50%;
	background: var(--mvd-blau-70);
	color: var(--mvd-papier);
	cursor: pointer;
	transition: color .2s, border-color .2s, transform .2s;
}
.mvd-lb__knopf[hidden] {
	display: none;
}
.mvd-lb__knopf svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.mvd-lb__knopf:hover {
	color: var(--mvd-gold);
	border-color: var(--mvd-gold);
}
.mvd-lb__knopf:focus-visible,
.mvd-lb a:focus-visible {
	outline: 3px solid var(--mvd-gold);
	outline-offset: 2px;
}
.mvd-lb__vor,
.mvd-lb__nach {
	position: absolute;
	top: 50%;
	z-index: 2;
	translate: 0 -50%;
}
.mvd-lb__vor {
	left: 16px;
}
.mvd-lb__nach {
	right: 16px;
}
.mvd-lb__vor:hover {
	transform: translateX(-2px);
}
.mvd-lb__nach:hover {
	transform: translateX(2px);
}

/* Handy: Bild fast randlos, Blättern per Wischen und Filmstreifen */
@media (max-width: 640px) {
	.mvd-lb__buehne {
		padding: 4px 12px;
	}
	.mvd-lb__vor,
	.mvd-lb__nach {
		display: none;
	}
	.mvd-lb__bild {
		max-height: calc(100dvh - 210px);
	}
	.mvd-lb__galerie {
		font-size: 1.1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mvd-lb__mini,
	.mvd-lb__knopf {
		transition: none;
	}
	.mvd-lb--laedt .mvd-lb__buehne::after {
		animation-duration: 3s;
	}
}