/* ==========================================================================
   EZS Beitragskarussell
   Baut das Raster des Blocks "ezs/beitraege" auf der Startseite zu einem
   horizontalen Karussell um. Farben und Radien stammen aus ezs-8.
   ========================================================================== */

.ezs-karussell {
	/* Sichtbare Karten – hier anpassen */
	--ezs-karussell-karten: 3;
	--ezs-karussell-abstand: clamp(1rem, 2vw, 1.75rem);
}

/* --- Spur ----------------------------------------------------------------- */

.ezs-karussell .ezs-grid {
	display: flex !important;
	grid-template-columns: none !important;
	flex-wrap: nowrap;
	gap: var(--ezs-karussell-abstand);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-block: 4px;
}

.ezs-karussell .ezs-grid::-webkit-scrollbar {
	display: none;
}

.ezs-karussell .ezs-grid:focus-visible {
	outline: 2px solid var(--ezs-blue, #3C6E9F);
	outline-offset: 6px;
	border-radius: var(--ezs-radius, 12px);
}

.ezs-karussell .ezs-grid > .ezs-card {
	flex: 0 0 calc(
		(100% - (var(--ezs-karussell-karten) - 1) * var(--ezs-karussell-abstand))
		/ var(--ezs-karussell-karten)
	);
	scroll-snap-align: start;
}

/* --- Steuerung ------------------------------------------------------------ */

.ezs-karussell__steuerung {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-block-start: 1.75rem;
}

.ezs-karussell__knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	padding: 0;
	border: 1px solid var(--ezs-blue, #3C6E9F);
	border-radius: 999px;
	background: transparent;
	color: var(--ezs-blue, #3C6E9F);
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.ezs-karussell__knopf:hover:not([disabled]),
.ezs-karussell__knopf:focus-visible {
	background: var(--ezs-blue, #3C6E9F);
	color: #fff;
}

.ezs-karussell__knopf:focus-visible {
	outline: 2px solid var(--ezs-blue, #3C6E9F);
	outline-offset: 3px;
}

.ezs-karussell__knopf[disabled] {
	opacity: 0.3;
	cursor: default;
}

.ezs-karussell__knopf svg {
	inline-size: 0.9rem;
	block-size: 0.9rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- Punkte --------------------------------------------------------------- */

.ezs-karussell__punkte {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ezs-karussell__punkt {
	inline-size: 0.5rem;
	block-size: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--ezs-line, #C9D8E6);
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.ezs-karussell__punkt[aria-current="true"] {
	background: var(--ezs-blue, #3C6E9F);
	transform: scale(1.3);
}

.ezs-karussell__punkt:focus-visible {
	outline: 2px solid var(--ezs-blue, #3C6E9F);
	outline-offset: 3px;
}

/* --- Responsiv ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.ezs-karussell {
		--ezs-karussell-karten: 2;
	}
}

@media (max-width: 680px) {
	.ezs-karussell {
		--ezs-karussell-karten: 1;
	}

	.ezs-karussell__knopf {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ezs-karussell .ezs-grid {
		scroll-behavior: auto;
	}
}