/* ==========================================================================
   WRR – IMAGE CAROUSEL
   --------------------------------------------------------------------------
   Shortcode:
   [wrr_bild_slider]

   ACF:
   bild-slider → slidebild

   Desktop / Tablet:
   - mehrere Bilder nebeneinander
   - Original-Seitenverhältnis
   - 1.25rem Abstand
   - horizontales Drag / Swipe

   Mobile:
   - immer genau 1 Bild sichtbar
   - Original-Seitenverhältnis
   ========================================================================== */


/* ==========================================================================
   1) ÄUSSERER CAROUSEL-CONTAINER
   ========================================================================== */

.wrr-image-carousel {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}


/* ==========================================================================
   2) VIEWPORT
   --------------------------------------------------------------------------
   Das ist der sichtbare Ausschnitt des Carousels.
   Alles, was rechts weitergeht, wird horizontal gescrollt.
   ========================================================================== */

.wrr-image-carousel__viewport {
	width: 100%;
	max-width: 100%;

	overflow-x: auto;
	overflow-y: hidden;

	-webkit-overflow-scrolling: touch;

	scrollbar-width: none;

	scroll-snap-type: x proximity;

	cursor: grab;
}


/* Scrollbar in Chrome / Safari verstecken */
.wrr-image-carousel__viewport::-webkit-scrollbar {
	display: none;
}


/* Beim Ziehen */
.wrr-image-carousel__viewport.is-dragging {
	cursor: grabbing;
	user-select: none;
}


/* ==========================================================================
   3) TRACK
   --------------------------------------------------------------------------
   Alle Bilder müssen zwingend horizontal nebeneinander liegen.
   ========================================================================== */

.wrr-image-carousel__track {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;

	align-items: flex-start;

	gap: 1.25rem;

	width: max-content !important;
	min-width: 100%;

	margin: 0;
	padding: 0;
}


/* ==========================================================================
   4) EINZELNER SLIDE – DESKTOP / TABLET
   --------------------------------------------------------------------------
   Alle Slides bekommen dieselbe Höhe.
   Die Breite ergibt sich automatisch aus dem Original-Seitenverhältnis.
   ========================================================================== */

.wrr-image-carousel__slide {
	display: block;

	flex: 0 0 auto !important;

	width: auto !important;
	max-width: none !important;

	/*
	 * Responsive Bildhöhe.
	 * Kann später angepasst werden.
	 */
	height: clamp(18rem, 28vw, 30rem);

	margin: 0;
	padding: 0;

	overflow: hidden;

	scroll-snap-align: start;

	/* Gewünschter Radius */
	border-radius: 1.5625rem !important;
}


/* ==========================================================================
   5) BILD – DESKTOP / TABLET
   --------------------------------------------------------------------------
   Kein quadratischer Crop.
   Original-Seitenverhältnis bleibt erhalten.
   ========================================================================== */

.wrr-image-carousel__image {
	display: block !important;

	width: auto !important;
	height: 100% !important;

	max-width: none !important;

	margin: 0;
	padding: 0;

	object-fit: contain;

	border-radius: 1.5625rem !important;

	user-select: none;

	/* Verhindert Browser-Bild-Drag */
	pointer-events: none;
}


/* ==========================================================================
   6) MOBILE
   --------------------------------------------------------------------------
   Unter 767px:
   - immer exakt ein Bild pro Ansicht
   - volle Carousel-Breite
   - Original-Seitenverhältnis
   ========================================================================== */

@media (max-width: 47.9375rem) {

	.wrr-image-carousel__viewport {
		scroll-snap-type: x mandatory;
	}


	.wrr-image-carousel__track {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;

		gap: 1.25rem;

		width: max-content !important;
		min-width: 100%;
	}


	.wrr-image-carousel__slide {
		/*
		 * Genau ein Bild pro sichtbarer Breite.
		 */
		flex: 0 0 100vw !important;

		width: 100vw !important;
		max-width: 100vw !important;

		height: auto;

		scroll-snap-align: start;

		border-radius: 1.5625rem !important;
	}


	.wrr-image-carousel__image {
		display: block !important;

		width: 100% !important;
		height: auto !important;

		max-width: 100% !important;

		border-radius: 1.5625rem !important;
	}

}





.wrr-image-carousel__track {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 1.25rem !important;
}

.wrr-image-carousel__slide {
	flex: 0 0 auto !important;
	width: auto !important;
	height: 30rem !important;
	overflow: hidden !important;
	border-radius: 1.5625rem !important;
}

.wrr-image-carousel__image {
	display: block !important;
	width: auto !important;
	height: 100% !important;
	max-width: none !important;
	border-radius: 1.5625rem !important;
}