/* =========================================================
   GW Core Gallery Slider – Frontend
   ========================================================= */

/* ---- Slider-Track (scoped unter .gw-slider für Spezifität) ---- */
.gw-slider {
	position: relative;
}

.gw-slider .gw-gallery-slider {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--gw-gap, 16px);
	width: 100%;
	max-width: none;
	margin: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
}

.gw-slider .gw-gallery-slider::-webkit-scrollbar {
	display: none; /* WebKit */
}

.gw-slider .gw-gallery-slider > figure {
	flex: 0 0 calc(
		(100% - (var(--gw-columns, 3) - 1) * var(--gw-gap, 16px)) / var(--gw-columns, 3)
	);
	margin: 0;
	scroll-snap-align: start;
}

.gw-slider .gw-gallery-slider > figure img {
	display: block;
	width: 100%;
	height: auto; /* respektiert das per-Bild aspect-ratio der Core-Galerie */
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* Nur Pfeile/Punkte sind fokussierbar; Bild-Links sind aus dem Tab-Fluss
   genommen (tabindex=-1 via JS) und zeigen keinen Fokusring. */
.gw-slider .gw-gallery-slider > figure a:focus,
.gw-slider .gw-gallery-slider > figure a:focus-visible {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.gw-slider .gw-gallery-slider {
		scroll-behavior: auto;
	}
}

/* ---- Pfeile ---- */
.gw-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	color: var(--gw-arrow-color, #fff);
	cursor: pointer;
	display: grid;
	place-items: center;
}

.gw-arrow svg {
	display: block;
	width: 24px;
	height: 24px;
}

.gw-arrow:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.gw-arrow--prev { left: 8px; }
.gw-arrow--next { right: 8px; }

.gw-arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* Form-Presets (Hintergrund) */
.gw-arrow--shape-round  { background: var(--gw-arrow-bg, rgba(0, 0, 0, 0.55)); border-radius: 50%; }
.gw-arrow--shape-radius { background: var(--gw-arrow-bg, rgba(0, 0, 0, 0.55)); border-radius: 4px; }
.gw-arrow--shape-square { background: var(--gw-arrow-bg, rgba(0, 0, 0, 0.55)); border-radius: 0; }

.gw-arrow--shape-round:hover,  .gw-arrow--shape-round:focus-visible,
.gw-arrow--shape-radius:hover, .gw-arrow--shape-radius:focus-visible,
.gw-arrow--shape-square:hover, .gw-arrow--shape-square:focus-visible {
	background: var(--gw-arrow-bg-hover, rgba(0, 0, 0, 0.78));
	color: var(--gw-arrow-color-hover, var(--gw-arrow-color, #fff));
}

.gw-arrow--shape-bare {
	background: none;
	color: var(--gw-arrow-color, currentColor);
}

.gw-arrow--shape-bare:hover,
.gw-arrow--shape-bare:focus-visible {
	color: var(--gw-arrow-color-hover, var(--gw-arrow-color, currentColor));
}

.gw-arrow--shape-bare svg {
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* ---- Pagination ---- */
.gw-dots {
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;
	margin-top: 12px;
}

.gw-dot {
	padding: 0;
	border: 0;
	background: none;
	color: currentColor;
	cursor: pointer;
}

.gw-dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Punkte / abgerundet / eckig */
.gw-dots--dots .gw-dot,
.gw-dots--rounded .gw-dot,
.gw-dots--square .gw-dot {
	width: 10px;
	height: 10px;
	background: var(--gw-dot-color, currentColor);
	opacity: 0.3;
}

.gw-dots--dots .gw-dot    { border-radius: 50%; }
.gw-dots--rounded .gw-dot { border-radius: 3px; }
.gw-dots--square .gw-dot  { border-radius: 0; }

.gw-dots--dots .gw-dot:hover,    .gw-dots--dots .gw-dot:focus-visible,
.gw-dots--rounded .gw-dot:hover, .gw-dots--rounded .gw-dot:focus-visible,
.gw-dots--square .gw-dot:hover,  .gw-dots--square .gw-dot:focus-visible {
	background: var(--gw-dot-color-active, var(--gw-dot-color, currentColor));
	opacity: 0.6;
}

.gw-dots--dots .gw-dot[aria-current="true"],
.gw-dots--rounded .gw-dot[aria-current="true"],
.gw-dots--square .gw-dot[aria-current="true"] {
	background: var(--gw-dot-color-active, var(--gw-dot-color, currentColor));
	opacity: 1;
}

/* Zahlen */
.gw-dots--numbers .gw-dot {
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	color: var(--gw-dot-color, currentColor);
	background: var(--gw-dot-bg, transparent);
	border: 1px solid var(--gw-dot-color, currentColor);
	border-radius: 4px;
	font-size: 13px;
	line-height: 1;
	display: grid;
	place-items: center;
	opacity: 0.4;
}

.gw-dots--numbers .gw-dot:hover,
.gw-dots--numbers .gw-dot:focus-visible {
	color: var(--gw-dot-color-active, var(--gw-dot-color, currentColor));
	background: var(--gw-dot-bg-active, var(--gw-dot-bg, transparent));
	border-color: var(--gw-dot-color-active, var(--gw-dot-color, currentColor));
	opacity: 0.8;
}

.gw-dots--numbers .gw-dot[aria-current="true"] {
	color: var(--gw-dot-color-active, var(--gw-dot-color, currentColor));
	background: var(--gw-dot-bg-active, var(--gw-dot-bg, transparent));
	border-color: var(--gw-dot-color-active, var(--gw-dot-color, currentColor));
	opacity: 1;
	font-weight: 700;
}

/* ---- Lightbox ---- */
.gw-lightbox {
	border: 0;
	padding: 0;
	max-width: 100vw;
	max-height: 100vh;
	background: transparent;
	overflow: hidden;
}

.gw-lightbox::backdrop {
	background: rgba(0, 0, 0, 0.9);
}

.gw-lb-figure {
	margin: 0;
	display: grid;
	place-items: center;
	min-width: 80vw;
	min-height: 80vh;
}

.gw-lb-img {
	max-width: 92vw;
	max-height: 88vh;
	width: auto;
	height: auto;
	display: block;
}

.gw-lightbox button {
	position: fixed;
	z-index: 2;
	border: 0;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	cursor: pointer;
	line-height: 1;
}

.gw-lightbox button:hover {
	background: rgba(0, 0, 0, 0.8);
}

.gw-lightbox button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.gw-lb-close {
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 26px;
}

.gw-lb-prev,
.gw-lb-next {
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	font-size: 28px;
}

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