/**
 * Gemeinsamer Slider (assets/js/slider.js). Grundlage: CSS-Scroll-Snap.
 *
 * Anzahl sichtbarer Folien über --zel-slider-per-view (Standard 1), Abstand über --zel-slider-gap.
 */

.zel-slider {
	--zel-slider-per-view: 1;
	--zel-slider-gap: 0px;
	position: relative;
}

.zel-slider__track {
	display: flex;
	gap: var(--zel-slider-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.zel-slider__track::-webkit-scrollbar {
	display: none;
}

.zel-slider__track:focus-visible {
	outline: 3px solid var(--zel-schwarz, #000);
	outline-offset: 4px;
}

.zel-slider__slide {
	flex: 0 0 calc((100% - (var(--zel-slider-per-view) - 1) * var(--zel-slider-gap)) / var(--zel-slider-per-view));
	min-width: 0;
	scroll-snap-align: start;
}

.zel-slider__slide > img,
.zel-slider__slide picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Punkte als Waben, unten mittig über dem Bild */
.zel-slider__dots {
	position: absolute;
	left: 50%;
	bottom: 0.5rem;
	transform: translateX(-50%);
	display: flex;
	gap: 0;
	z-index: 2;
}

.zel-slider__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Klickfläche 44 px (Bauvertrag), die Wabe selbst bleibt klein. */
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.zel-slider__dot svg path {
	fill: transparent;
	stroke: currentColor;
	stroke-width: 1.4;
	transition: fill 0.2s ease;
}

.zel-slider__dot.is-active svg path,
.zel-slider__dot:hover svg path {
	fill: currentColor;
}

.zel-slider__dot:focus-visible {
	outline: 2px solid var(--zel-schwarz, #000);
	outline-offset: 1px;
	border-radius: 4px;
	box-shadow: 0 0 0 4px #fff;
}

/* Punkte unter dem Slider statt darüber (für Karussells mit Karten) */
.zel-slider--dots-below .zel-slider__dots {
	position: static;
	transform: none;
	justify-content: center;
	margin-top: 1rem;
	color: var(--zel-schwarz, #000);
}

.zel-slider--dots-below .zel-slider__dot {
	color: var(--zel-schwarz, #000);
}

/* Pfeile: schlicht (weiße Winkel am Rand) */
.zel-slider__prev,
.zel-slider__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.zel-slider__prev {
	left: -0.5rem;
}

.zel-slider__next {
	right: -0.5rem;
}

.zel-slider__prev svg,
.zel-slider__next svg {
	width: 2.25rem;
	height: 2.25rem;
	stroke-width: 1.5;
}

.zel-slider__prev:disabled,
.zel-slider__next:disabled {
	opacity: 0.3;
	cursor: default;
}

.zel-slider__prev:focus-visible,
.zel-slider__next:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* Pfeile als schwarze Kreise (Zeitreise) */
.zel-slider--round-arrows .zel-slider__prev,
.zel-slider--round-arrows .zel-slider__next {
	background: #000;
	color: #fff;
	width: 3.125rem;
	height: 3.125rem;
}

.zel-slider.is-single .zel-slider__dots,
.zel-slider.is-single .zel-slider__prev,
.zel-slider.is-single .zel-slider__next {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.zel-slider__track {
		scroll-behavior: auto;
	}
}