/* Divi Carousel Slider – Frontend
   Alle Selektoren sind mit .dcs- gescoped, um Konflikte mit Divi/Themes zu vermeiden. */

.dcs-carousel {
	position: relative;
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 100%;
}
.dcs-carousel *,
.dcs-carousel *::before,
.dcs-carousel *::after {
	box-sizing: border-box;
}

/* Breitenmodi */
.dcs-width-container { max-width: var(--dcs-max-width, 1200px); }
.dcs-width-custom    { max-width: var(--dcs-max-width, 1200px); }

/* Echte Full-Width-Darstellung, auch innerhalb begrenzter Divi-Container.
   Bricht per Viewport-Einheiten aus dem Container aus, ohne horizontale Scrollbars. */
.dcs-width-fullwidth {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* Viewport / Track */
.dcs-viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
	border-radius: var(--dcs-radius, 8px);
}
.dcs-track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--dcs-gap, 16px);
	will-change: transform;
	transition: transform var(--dcs-anim-speed, 500ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.dcs-carousel.dcs-dragging .dcs-track { transition: none; }

/* Slide */
.dcs-slide {
	position: relative;
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: var(--dcs-radius, 8px);
	border: var(--dcs-border, 0 solid transparent);
	box-shadow: var(--dcs-shadow, none);
	background: #111;
}

/* Höhenmodi */
.dcs-height-ratio .dcs-slide { aspect-ratio: var(--dcs-ratio, 16 / 9); }
.dcs-height-fixed .dcs-slide { height: var(--dcs-fixed-height, 500px); }
.dcs-height-auto  .dcs-slide { height: auto; }

.dcs-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--dcs-fit, cover);
}
.dcs-height-auto .dcs-img { height: auto; }

.dcs-link { display: block; width: 100%; height: 100%; }

/* Captions */
.dcs-caption {
	color: var(--dcs-cap-color, #fff);
	font-size: var(--dcs-cap-size, 16px);
	font-weight: var(--dcs-cap-weight, 600);
	line-height: 1.35;
}
.dcs-caption--overlay {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 1.5em 1.25em 1em;
	background: linear-gradient(to top, var(--dcs-overlay, rgba(0,0,0,0.4)), transparent);
}
.dcs-caption--below {
	position: static;
	padding: 0.75em 0.25em 0;
	background: none;
	color: inherit;
}
.dcs-caption--hover {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 1.25em;
	background: var(--dcs-overlay, rgba(0,0,0,0.4));
	opacity: 0;
	transition: opacity 0.35s ease;
}
.dcs-slide:hover .dcs-caption--hover,
.dcs-slide:focus-within .dcs-caption--hover { opacity: 1; }

/* Pfeile */
.dcs-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--dcs-arrow-size, 44px);
	height: var(--dcs-arrow-size, 44px);
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--dcs-arrow-bg, rgba(0,0,0,0.45));
	color: var(--dcs-arrow-color, #fff);
	cursor: pointer;
	transition: background 0.25s ease, opacity 0.25s ease;
}
.dcs-arrow:hover { filter: brightness(1.15); }
.dcs-arrow svg { width: 60%; height: 60%; }
.dcs-prev { left: 12px; }
.dcs-next { right: 12px; }
.dcs-arrow:focus-visible {
	outline: 3px solid var(--dcs-dot-active, #fff);
	outline-offset: 2px;
}
.dcs-arrow[disabled] { opacity: 0.35; cursor: default; }

/* Dots */
.dcs-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}
.dcs-dot {
	width: 10px; height: 10px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--dcs-dot, rgba(255,255,255,0.5));
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
}
.dcs-dot.is-active {
	background: var(--dcs-dot-active, #fff);
	transform: scale(1.3);
}
.dcs-dot:focus-visible {
	outline: 3px solid var(--dcs-dot-active, #fff);
	outline-offset: 2px;
}

/* Übergänge: fade / zoom (Single-Slide-Modi) */
.dcs-trans-fade .dcs-track,
.dcs-trans-zoom .dcs-track {
	display: block;
	position: relative;
}
.dcs-trans-fade .dcs-slide,
.dcs-trans-zoom .dcs-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	opacity: 0;
	transition: opacity var(--dcs-anim-speed, 500ms) ease;
}
.dcs-trans-fade .dcs-slide.is-active,
.dcs-trans-zoom .dcs-slide.is-active { opacity: 1; }
.dcs-trans-zoom .dcs-slide { transform: scale(1.05); transition: opacity var(--dcs-anim-speed,500ms) ease, transform var(--dcs-anim-speed,500ms) ease; }
.dcs-trans-zoom .dcs-slide.is-active { transform: scale(1); }
/* Wrapper-Höhe bei Fade/Zoom absichern */
.dcs-trans-fade.dcs-height-ratio .dcs-viewport,
.dcs-trans-zoom.dcs-height-ratio .dcs-viewport { aspect-ratio: var(--dcs-ratio, 16 / 9); }
.dcs-trans-fade.dcs-height-fixed .dcs-viewport,
.dcs-trans-zoom.dcs-height-fixed .dcs-viewport { height: var(--dcs-fixed-height, 500px); }

/* Coverflow – zentrierter aktiver Slide mit Tiefenskalierung */
.dcs-trans-coverflow .dcs-slide {
	transition: transform var(--dcs-anim-speed,500ms) ease, opacity var(--dcs-anim-speed,500ms) ease;
	opacity: 0.55;
	transform: scale(0.82);
}
.dcs-trans-coverflow .dcs-slide.is-center {
	opacity: 1;
	transform: scale(1);
	z-index: 2;
}

/* Lightbox */
.dcs-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.92);
	touch-action: pan-y;
}
.dcs-lightbox.is-open { display: flex; }
.dcs-lightbox img {
	max-width: 92vw;
	max-height: 82vh;
	object-fit: contain;
	border-radius: 4px;
}
.dcs-lb-caption {
	position: absolute;
	bottom: 4vh;
	left: 0; right: 0;
	text-align: center;
	color: #fff;
	font-size: 15px;
	padding: 0 5vw;
}
.dcs-lb-btn {
	position: absolute;
	background: rgba(255,255,255,0.12);
	border: none;
	color: #fff;
	width: 52px; height: 52px;
	border-radius: 50%;
	font-size: 26px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.dcs-lb-btn:hover { background: rgba(255,255,255,0.25); }
.dcs-lb-prev  { left: 3vw; top: 50%; transform: translateY(-50%); }
.dcs-lb-next  { right: 3vw; top: 50%; transform: translateY(-50%); }
.dcs-lb-close { top: 3vh; right: 3vw; }
.dcs-lb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.dcs-slide[data-full] { cursor: zoom-in; }
.dcs-carousel.dcs-has-lightbox .dcs-slide { cursor: zoom-in; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.dcs-track,
	.dcs-slide,
	.dcs-arrow,
	.dcs-dot { transition: none !important; }
}

/* Verhindert Layout-Shift, bevor JS lädt */
.dcs-carousel:not(.dcs-ready) .dcs-track { overflow: hidden; }