/* Modul: Slider */

.cype-slider {
	position: relative;
	overflow: hidden;
}

/* Ohne JS: horizontal scrollbare Liste (Progressive Enhancement). */
.cype-slider:not(.is-initialised) .swiper-wrapper {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
}

.cype-slider:not(.is-initialised) .swiper-slide {
	flex: 0 0 min(100%, 480px);
	scroll-snap-align: start;
}

.cype-slider--equal .swiper-slide {
	height: auto;
	display: flex;
	flex-direction: column;
}

/*
 * Navigation und Punkte.
 *
 * Die Selektoren tragen bewusst `.cype-slider` davor: Swipers eigenes
 * Stylesheet setzt dieselben Eigenschaften mit einer Klasse Spezifität und
 * wird je nach Ladereihenfolge sonst stärker — dann erscheinen die Pfeile in
 * Swiper-Blau statt in den Vorlagenfarben.
 *
 * Alle Werte kommen aus Variablen, die die Vorlage setzt (Vorlagen → Module →
 * Slider). Die Fallbacks greifen, solange keine Vorlage gewählt ist.
 */
.cype-slider .swiper-button-prev,
.cype-slider .swiper-button-next {
	width: var(--cype-slider-nav-width, 40px);
	height: var(--cype-slider-nav-height, 40px);
	border: 0;
	border-radius: var(--cype-slider-nav-radius, 50%);
	background: var(--cype-slider-nav-bg, rgba(255, 255, 255, 0.92));
	color: var(--cype-slider-nav-color, var(--cype-color-headline, #111));
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
	/* Swiper zentriert über einen margin-top, der von seiner eigenen
	   Pfeilgröße abhängt — bei freier Höhe stimmt das nicht mehr. */
	top: 50%;
	margin-top: 0;
	transform: translateY(-50%);
}

.cype-slider .swiper-button-prev::after,
.cype-slider .swiper-button-next::after {
	font-size: var(--cype-slider-nav-icon, 15px);
	font-weight: 700;
	color: inherit;
}

.cype-slider .swiper-button-disabled {
	opacity: 0.35;
}

/*
 * Punkte stehen im Fluss unter den Slides statt darüber zu schweben —
 * sonst liegen sie auf dem Bild und „Abstand nach oben“ wäre bedeutungslos.
 */
.cype-slider .swiper-pagination {
	position: static;
	margin-top: var(--cype-slider-dot-gap, 16px);
}

.cype-slider .swiper-pagination-bullet {
	width: var(--cype-slider-dot-size, 8px);
	height: var(--cype-slider-dot-size, 8px);
	background: var(--cype-slider-dot-color, var(--cype-color-border, #d4d4d4));
	opacity: 1;
}

.cype-slider .swiper-pagination-bullet-active {
	background: var(--cype-slider-dot-active, var(--cype-color-accent, #ffdd1c));
}