/* 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;
}

.slide-image {
	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; }