/* ═══════════════════════════════════════════════════════════════════════════
   VSK Beiträge – Galerie-Raster + Lightbox
   Viele Regeln brauchen !important, weil die WordPress-Galerie (Flexbox mit
   ID-Selektoren) und Theme-Regeln wie „img { height: auto }" sonst gewinnen.
   ═══════════════════════════════════════════════════════════════════════════ */

.vsk-galerie {
	--vsk-gal-abstand: 10px;
	--vsk-gal-radius: 14px;
	--vsk-gal-akzent: #f2a33a;
}

/* ── Raster ───────────────────────────────────────────────────────────────── */
.vsk-galerie .vsk-galerie__raster,
.vsk-galerie.vsk-galerie__raster {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	grid-auto-flow: row dense;
	gap: var(--vsk-gal-abstand) !important;
	padding: 0 !important;
	list-style: none !important;
}
.vsk-galerie .vsk-galerie__raster {
	margin: 0 !important;
}
figure.vsk-galerie.vsk-galerie {
	margin: 2rem 0 !important;
}

/* ── Kachel ───────────────────────────────────────────────────────────────── */
.vsk-galerie .vsk-galerie__kachel.vsk-galerie__kachel {
	grid-column: span 2;
	aspect-ratio: 1 / 1;
	position: relative !important;
	display: block !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border-radius: var(--vsk-gal-radius) !important;
	background: #e9eef4;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 10px 24px -14px rgba(15, 23, 42, .45);
	cursor: zoom-in;
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
}
.vsk-galerie .vsk-galerie__kachel > figure,
.vsk-galerie .vsk-galerie__kachel a {
	position: absolute !important;
	inset: 0;
	display: block !important;
	margin: 0 !important;
	height: auto !important;
	width: auto !important;
}
.vsk-galerie .vsk-galerie__kachel.vsk-galerie__kachel img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	border-radius: 0 !important;
	object-fit: cover !important;
	object-position: 50% 30%;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .3s;
}
.vsk-galerie .vsk-galerie__kachel:hover img {
	transform: scale(1.045);
}
.vsk-galerie .vsk-galerie__kachel:focus-visible {
	outline: 3px solid var(--vsk-gal-akzent);
	outline-offset: 3px;
}

/* Bildunterschrift einzelner Fotos */
.vsk-galerie .vsk-galerie__kachel figcaption {
	position: absolute !important;
	left: 0; right: 0; bottom: 0;
	z-index: 1;
	margin: 0 !important;
	padding: 2.2em .8em .65em !important;
	max-height: 60%;
	overflow: hidden;
	background: linear-gradient(to top, rgba(15, 23, 42, .72), rgba(15, 23, 42, 0)) !important;
	color: #fff !important;
	font-size: .82rem;
	line-height: 1.35;
	text-align: left;
	pointer-events: none;
}

/* Bildunterschrift der ganzen Galerie */
.vsk-galerie .vsk-galerie__raster > figcaption,
.vsk-galerie.vsk-galerie__raster > figcaption,
figure.vsk-galerie > figcaption {
	grid-column: 1 / -1;
	margin: .35rem 0 0 !important;
	text-align: center;
	font-size: .9rem;
	color: #64748b;
}

/* ── Layout-Varianten (Klassen kommen aus inc/galerie.php) ───────────────── */
.vsk-galerie .vsk-galerie__kachel--voll.vsk-galerie__kachel--voll {
	grid-column: 1 / -1;
	aspect-ratio: 3 / 2;
}
.vsk-galerie .vsk-galerie__kachel--halb.vsk-galerie__kachel--halb {
	grid-column: span 3;
	aspect-ratio: 4 / 5;
}
.vsk-galerie .vsk-galerie__kachel--halb-quadrat.vsk-galerie__kachel--halb-quadrat {
	grid-column: span 3;
	aspect-ratio: 1 / 1;
}
.vsk-galerie .vsk-galerie__kachel--halb-quer.vsk-galerie__kachel--halb-quer {
	grid-column: span 3;
	aspect-ratio: 4 / 3;
}
.vsk-galerie .vsk-galerie__kachel--gross-3.vsk-galerie__kachel--gross-3 {
	grid-column: span 4;
	grid-row: span 2;
	aspect-ratio: auto;
}
.vsk-galerie .vsk-galerie__kachel--gross-4.vsk-galerie__kachel--gross-4 {
	grid-column: span 4;
	grid-row: span 3;
	aspect-ratio: auto;
}
.vsk-galerie .vsk-galerie__kachel--versteckt.vsk-galerie__kachel--versteckt {
	display: none !important;
}

/* „+5"-Hinweis auf der letzten sichtbaren Kachel */
.vsk-galerie .vsk-galerie__kachel[data-mehr]::after {
	content: attr(data-mehr);
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	background: rgba(15, 23, 42, .5);
	color: #fff;
	font-size: clamp(1.5rem, 4.5vw, 2.4rem);
	font-weight: 700;
	letter-spacing: .02em;
	-webkit-backdrop-filter: blur(1.5px);
	backdrop-filter: blur(1.5px);
	transition: background .3s;
}
.vsk-galerie .vsk-galerie__kachel[data-mehr]:hover::after {
	background: rgba(15, 23, 42, .62);
}

/* WordPress' eigenes „Vergrößern"-Symbol ausblenden (wir haben eine eigene Lightbox) */
.vsk-galerie .lightbox-trigger,
.vsk-einzelbild .lightbox-trigger {
	display: none !important;
}
.vsk-einzelbild img {
	cursor: zoom-in;
}

@media (max-width: 600px) {
	.vsk-galerie {
		--vsk-gal-abstand: 6px;
		--vsk-gal-radius: 10px;
	}
	figure.vsk-galerie.vsk-galerie {
		margin: 1.5rem 0 !important;
	}
}

/* ═══ Lightbox ═══════════════════════════════════════════════════════════ */
html.vsk-lb-offen,
html.vsk-lb-offen body {
	overflow: hidden !important;
}

.vsk-lb {
	--vsk-lb-akzent: #f2a33a;
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	opacity: 0;
	transition: opacity .25s ease;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.vsk-lb[hidden] {
	display: none !important;
}
.vsk-lb.ist-offen {
	opacity: 1;
}
.vsk-lb__hintergrund {
	position: absolute;
	inset: 0;
	background: #0b0f19;
	z-index: -1;
}
.vsk-lb *,
.vsk-lb *::before,
.vsk-lb *::after {
	box-sizing: border-box;
}

/* Kopfzeile */
.vsk-lb__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .75rem .75rem .5rem 1.25rem;
	transition: opacity .2s;
}
.vsk-lb__zaehler {
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
	opacity: .85;
}
.vsk-lb button {
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	color: #fff !important;
	cursor: pointer;
	text-shadow: none !important;
	box-shadow: none !important;
	border: 0 !important;
	min-height: 0 !important;
	line-height: 1 !important;
	-webkit-tap-highlight-color: transparent;
}
.vsk-lb .vsk-lb__schliessen,
.vsk-lb .vsk-lb__schliessen:focus,
.vsk-lb .vsk-lb__pfeil,
.vsk-lb .vsk-lb__pfeil:focus {
	background: rgba(255, 255, 255, .12) !important;
}
.vsk-lb .vsk-lb__schliessen:hover,
.vsk-lb .vsk-lb__pfeil:hover {
	background: rgba(255, 255, 255, .24) !important;
}
.vsk-lb .vsk-lb__mini,
.vsk-lb .vsk-lb__mini:focus,
.vsk-lb .vsk-lb__mini:hover {
	background: rgba(255, 255, 255, .08) !important;
	padding: 0 !important;
}
.vsk-lb button:focus:not(:focus-visible) {
	outline: none !important;
}
.vsk-lb__schliessen {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	transition: background .2s, transform .2s;
}
.vsk-lb__schliessen:hover {
	background: rgba(255, 255, 255, .2);
	transform: rotate(90deg);
}
.vsk-lb svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Bühne mit Fotoband */
.vsk-lb__buehne {
	position: relative;
	overflow: hidden;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
.vsk-lb__band {
	display: flex;
	height: 100%;
	will-change: transform;
}
.vsk-lb__band.mit-animation {
	transition: transform .38s cubic-bezier(.22, .8, .24, 1);
}
.vsk-lb__folie {
	flex: 0 0 100%;
	height: 100%;
	display: grid;
	place-items: center;
	padding: 0 clamp(.5rem, 6vw, 5.5rem);
	position: relative;
	transition: transform .3s ease;
}
.vsk-lb__folie.ist-ziehend {
	transition: none;
}
.vsk-lb.ohne-leisten .vsk-lb__kopf,
.vsk-lb.ohne-leisten .vsk-lb__fuss,
.vsk-lb.ohne-leisten .vsk-lb__pfeil {
	opacity: 0;
	pointer-events: none;
}
.vsk-lb .vsk-lb__folie img {
	display: block !important;
	max-width: 100% !important;
	max-height: var(--vsk-lb-hoehe, calc(100vh - 210px)) !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
	opacity: 0;
	transform: scale(.985);
	transition: opacity .3s ease, transform .3s ease;
	-webkit-user-drag: none;
	pointer-events: none;
}
.vsk-lb__folie.ist-geladen img {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
.vsk-lb__folie.ist-ziehend img {
	transition: none;
}
.vsk-lb__folie::after {
	content: "";
	position: absolute;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, .18);
	border-top-color: rgba(255, 255, 255, .8);
	animation: vsk-lb-dreh .8s linear infinite;
}
.vsk-lb__folie.ist-geladen::after {
	display: none;
}
@keyframes vsk-lb-dreh {
	to { transform: rotate(360deg); }
}

/* Pfeile */
.vsk-lb__pfeil {
	position: absolute;
	top: 50%;
	width: 54px;
	height: 54px;
	margin-top: -27px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background .2s, opacity .2s, transform .2s;
	z-index: 2;
}
.vsk-lb__pfeil:hover {
	background: rgba(255, 255, 255, .24);
}
.vsk-lb__pfeil--zurueck { left: clamp(.5rem, 2vw, 1.5rem); }
.vsk-lb__pfeil--weiter { right: clamp(.5rem, 2vw, 1.5rem); }
.vsk-lb__pfeil--zurueck:hover { transform: translateX(-2px); }
.vsk-lb__pfeil--weiter:hover { transform: translateX(2px); }
.vsk-lb__pfeil:disabled {
	opacity: 0;
	pointer-events: none;
}
.vsk-lb__pfeil svg {
	width: 26px;
	height: 26px;
}

/* Fußzeile: Bildunterschrift + Vorschaubilder */
.vsk-lb__fuss {
	padding: .6rem 0 1rem;
	text-align: center;
	transition: opacity .2s;
}
.vsk-lb__text {
	margin: 0 auto .7rem;
	padding: 0 1.25rem;
	max-width: 46rem;
	font-size: .95rem;
	line-height: 1.45;
	opacity: .9;
}
.vsk-lb__text:empty {
	display: none;
}
.vsk-lb__vorschau {
	display: flex;
	gap: 8px;
	justify-content: safe center;
	overflow-x: auto;
	padding: 4px 1rem;
	scrollbar-width: none;
	scroll-behavior: smooth;
}
.vsk-lb__vorschau::-webkit-scrollbar {
	display: none;
}
.vsk-lb__mini {
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	overflow: hidden;
	opacity: .45;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: opacity .2s, outline-color .2s, transform .2s;
	background: rgba(255, 255, 255, .08);
}
.vsk-lb__mini img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.vsk-lb__mini:hover {
	opacity: .8;
}
.vsk-lb__mini.ist-aktiv {
	opacity: 1;
	outline-color: var(--vsk-lb-akzent);
}
.vsk-lb__mini:focus-visible,
.vsk-lb__pfeil:focus-visible,
.vsk-lb__schliessen:focus-visible {
	outline: 3px solid var(--vsk-lb-akzent);
	outline-offset: 2px;
}

/* Hinweis „Wischen zum Blättern" (einmalig auf Touch-Geräten) */
.vsk-lb__hinweis {
	position: absolute;
	left: 50%;
	bottom: 1.25rem;
	transform: translateX(-50%);
	padding: .5rem 1rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-size: .85rem;
	white-space: nowrap;
	pointer-events: none;
	animation: vsk-lb-hinweis 2.8s ease forwards;
	z-index: 3;
}
@keyframes vsk-lb-hinweis {
	0%   { opacity: 0; transform: translate(-50%, 8px); }
	12%  { opacity: 1; transform: translate(-50%, 0); }
	75%  { opacity: 1; }
	100% { opacity: 0; }
}

/* Nur ein Foto: keine Navigation */
.vsk-lb.ist-einzeln .vsk-lb__pfeil,
.vsk-lb.ist-einzeln .vsk-lb__vorschau,
.vsk-lb.ist-einzeln .vsk-lb__zaehler {
	display: none;
}

/* Touch-Geräte: Pfeile weg (gewischt wird), etwas mehr Platz fürs Foto */
@media (hover: none) and (pointer: coarse) {
	.vsk-lb__pfeil {
		display: none;
	}
	.vsk-lb__folie {
		padding: 0 .35rem;
	}
	.vsk-lb__folie img {
		border-radius: 4px;
	}
}
@media (max-width: 600px) {
	.vsk-lb__mini {
		width: 46px;
		height: 46px;
		border-radius: 7px;
	}
	.vsk-lb__kopf {
		padding: .5rem .5rem .35rem 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vsk-lb,
	.vsk-lb__band.mit-animation,
	.vsk-lb__folie img,
	.vsk-galerie .vsk-galerie__kachel img {
		transition: none !important;
	}
	.vsk-lb__hinweis {
		animation: none;
		display: none;
	}
}

.vsk-lb:focus {
	outline: none;
}