/* CS Slider – Frontend Core Layout */

.cs-slider {
	position: relative;
	overflow: hidden;
	width: 100%;
	--cs-ease: cubic-bezier( 0.22, 1, 0.36, 1 );   /* kräftiges Abbremsen; überschreibbar */
}



.slide-item {
	position: relative;
	width: 100%;
	overflow: hidden;

}

.slide-item picture,
.slide-item picture source {
	display: block;
}

/* Wrapper um <picture> bzw. <video> — UA-Stylesheet gibt figure einen Rand mit,
   den wir hier zurücksetzen, sonst verschiebt sich das Slide-Layout. */
.slide-figure {
	display: block;
	margin: 0;
	width: 100%;
}

.slide-image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.slide-video {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.slide-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1.5rem;
	background: linear-gradient( transparent, rgba( 0, 0, 0, 0.55 ) );
	color: #fff;
	/* Content-Fade: unsichtbar bis .is-active gesetzt wird */
	opacity: 0;
	transition: opacity var( --cs-content-fade-duration, .5s ) ease 0s;
}

/* Aktiver Slide: Content fadet verzögert ein (nach Slide-Settle); beim Verlassen sofort aus (delay=0) */
.slide-item.is-active .slide-content {
	opacity: 1;
	transition-delay: var( --cs-content-fade-delay, .6s );
}

.slide-content h1,
.slide-content h2,
.slide-content h3,
.slide-content h4,
.slide-content h5,
.slide-content h6 {
	margin: 0 0 0.25em;
	color: inherit;
	line-height: 1.2;
}

.slide-content .subline {
	margin: 0 0 0.5em;
	font-style: italic;
	opacity: 0.9;
}

.slide-content .slide-text {
	margin: 0;
	font-size: 0.95em;
	opacity: 0.85;
}



/* ── Navigation Buttons ── */
.cs-slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 10;                 /* über slide-content (kein z-index) und den Slides */
	width: 3rem; height: 3rem;
	display: flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%;
	background: rgba( 0,0,0,0.4 ); color: #fff;
	font-size: 1.75rem; line-height: 1; cursor: pointer;
	transition: background .2s ease;
}
.cs-slider-btn:hover { background: rgba( 0,0,0,0.65 ); }
.cs-slider-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cs-slider-btn--prev { left: 1rem; }
.cs-slider-btn--next { right: 1rem; }

/* ── Ton-Button ── */
/* Oben rechts, damit er der figcaption am unteren Rand nicht ins Gehege kommt.
   [hidden] via JS gesetzt: kein Video mit Ton auf dem aktiven Slide, oder
   Reduced Motion (dann läuft ohnehin kein Video). */
.cs-slider-sound {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 10;
	width: 2.5rem; height: 2.5rem;
	display: flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%;
	background: rgba( 0,0,0,0.4 ); color: #fff;
	cursor: pointer;
	transition: background .2s ease;
}
.cs-slider-sound:hover { background: rgba( 0,0,0,0.65 ); }
.cs-slider-sound:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cs-slider-sound[hidden] { display: none; }

.cs-slider-sound__icon {
	width: 1.25rem;
	height: 1.25rem;
}

/* Default (aria-pressed="false"): Lautsprecher ohne Schallwellen */
.cs-slider-sound__icon--on { display: none; }

.cs-slider-sound[aria-pressed="true"] .cs-slider-sound__icon--off { display: none; }
.cs-slider-sound[aria-pressed="true"] .cs-slider-sound__icon--on  { display: block; }