/* ===== SLIDER ===== */
.kenburns-slider {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 500px;
	overflow: hidden;
}

/* Mobile Höhen */
@media (max-width: 768px) {
	.kenburns-slider {
		height: 75vh;
	}
}

@media (max-width: 576px) {
	.kenburns-slider {
		height: 65vh;
	}
}

/* ===== BILDER ===== */
/* für 4 Bilder */
/* wenn mehr Bilder, muss die Gesamtzeit bei .slider img verändert werden und die weiteren Delay-Zeiten bei .slides img:nth-child(X) { animation-delay: Ys; } */
.slides img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	animation: kenburns 40s infinite; /* 40s - Gesamtzeit aller Bilder */
}

.slides img:nth-child(1) { animation-delay: 0s; }   /* 1. Bild */
.slides img:nth-child(2) { animation-delay: 10s; }  /* 2. Bild */
.slides img:nth-child(3) { animation-delay: 20s; }  /* 3. Bild */
.slides img:nth-child(4) { animation-delay: 30s; }  /* 4. Bild */

/* Animation */
@keyframes kenburns {
	0% { opacity: 0; transform: scale(1); }
	5% { opacity: 1; }
	25% { opacity: 1; transform: scale(1.15); }
	30% { opacity: 0; transform: scale(1.2); }
	100% { opacity: 0; }
}

/* ===== OVERLAY ===== */
.overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.55);
	z-index: 1;
}

/* ===== TEXT ===== */
.slider-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	width: 90%;
	max-width: 900px;

	text-align: center;
	z-index: 2;
	color: white;
}

/* Desktop */
.slider-text h1 {
	font-size: clamp(2rem, 5vw, 3.2rem);
	color: red;
}

.slider-text h2 {
	font-size: clamp(1.2rem, 3vw, 1.8rem);
	margin-top: 10px;
	color: red;
}

.slider-text p {
	font-size: clamp(1rem, 2vw, 1.3rem);
	margin-top: 25px;
	line-height: 1.6;
	letter-spacing: 1px;
}

/* Link */
.slider-text a {
	color: yellow;
	text-decoration: underline;
}

.slider-text p {
	color: rgb(220,220,220);
}

.blink {
	animation: fadeBlink 2.2s infinite;
}

@keyframes fadeBlink {
	0% {
		opacity: 1;
	}
	20% {
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

p {
	/*color: #00008b !important;*/
}




/* ===== AUDIO BUTTON ===== */
.sound-wrapper {

}

.sound-button {
	z-index: 3;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	border: none;
	background: rgba(0,0,255,0.6);
	color: white;
	font-size: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.1s, box-shadow 0.1s;
}

/* Hover */
.sound-button:hover {
	transform: scale(1.1);
}

/* Puls nur bei aktiv */
.sound-button.active {
	animation: pulse 1.5s infinite;
}

@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
	70% { box-shadow: 0 0 0 20px rgba(255,255,255,0); }
	100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}


/* ============================= */
/* 📝 TICKER                     */
/* ============================= */

.ticker-wrapper {
	position: absolute;
	top: calc(50% - 250px);
	left: 50%;
	transform: translateX(-50%);

	width: 100%;
	overflow: hidden;

	text-align: center;
	z-index: 3;
}

.ticker {
	display: inline-block;
	white-space: nowrap;
}

.ticker span {
	display: inline-block;
	padding-left: 100%;

	font-size: 22px;
	color: yellow;
	letter-spacing: 2px;

	animation: tickerMove 18s linear infinite;
}

@keyframes tickerMove {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-100%);
	}
}

/* video */
.media-controls {
	position: relative;
	z-index: 50;
	width: 100%;
	text-align: center;
}

#videoButton {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 20px auto;
	background: rgba(0,0,255,0.6);
	color: white;
	border: 0;
	cursor: pointer;
}

#videoButton:hover {
	transform: scale(1.1);
	animation: none !important;
}

#videoContainer {
	position: relative;
	width: 100%;
	max-width: 640px;
	margin: 20px auto;
}

#videoPlayer {
	display: block;
	width: 100%;
	height: auto;
	background: #000;
}

#closeVideo {
	display: none;
	margin: 12px auto 0;
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 26px;
	font-weight: bold;
	cursor: pointer;
}

#closeVideo:hover {
	background: rgba(220,0,0,.85);
	transform: scale(1.1);
}

.video-caption {
	margin-top: 15px;
	text-align: center;

	font-size: clamp(2.2rem, 2vw, 2.8rem);
	font-weight: bold;

	color: red;
	/*text-shadow: 0 2px 8px rgba(0,0,0,.8);*/
	display: none;
}
.video-caption h1 {
	display: inline-block;

	font-size: clamp(2rem, 5vw, 3.2rem);
	color: red;

	background: #7ca4be;
	border: 1px solid blue;
	padding: 8px 20px;
	margin: 50px 0;

	border-radius: 8px;
}

/* Mobile Anpassung */
@media (max-width: 768px) {
	.sound-button,
	#videoButton {
		width: 42px;
		height: 42px;
		padding: 0;
		font-size: 18px;
	}
	.ticker {
		top: 80px;
	}
}

.button-row {
	position: absolute;
	top: calc(50% - 240px);
	left: 50%;
	transform: translate(-50%, 30px);
	display: flex;
	align-items: center;
	gap: 20px;
	z-index: 5;
}

.button-row button {
	cursor: pointer;
}

.sound-button,
#videoButton {
	position: static;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	font-size: 36px;
}

@media (max-width: 768px) {
	.sound-button,
	#videoButton {
		width: 40px;
		height: 40px;
		font-size: 18px;
		padding: 0;
	}
}
@media (max-width: 768px) {
	.button-row {
		top: calc(50% - 210px);
	}
}

.termine {
	display: inline-block;
	color: yellow;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.termine:hover {
	transform: scale(1.1);
}

.total {
	
}

@media (max-width: 768px) {
	.ticker-wrapper {
	    top: calc(50% - 170px);
	}
	
	.button-row {
	    top: calc(50% - 170px);
	}
	
	.slider-text {
	    top: 62%;
	}
}