.video-container {
	height: 100vh;
	height: 100dvh;
	left: 0;
	position: fixed;
	top: 0;
	transition: opacity .5s;
	width: 100%;
	z-index: 1;
}

.video-container.loading {
	background-color: white;
	z-index: 3;
}

.video-container.loading::before {
	animation: loading-rotate 3s infinite linear;
	border: 4px solid black;
	border-radius: 50%;
	border-left: none;
	border-top: none;
	box-sizing: border-box;
	content: '';
	display: block;
	height: 50px;
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 50%;
	width: 50px;
}

@keyframes loading-rotate {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

.video-container.loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* Zentriere das Pseudo-Element im Container */
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 32px 0 32px 54px; /* Größe des Dreiecks anpassen */
	border-color: transparent transparent transparent #000; /* Farbe des Dreiecks */
	cursor: pointer;
	background-color: #fff; /* Hintergrundfarbe des Play-Buttons */
	opacity: 0; /* Starte mit einer Opazität von 0 (unsichtbar) */
	animation: fadeIn 1s 4s forwards; /* Keyframe Animation: fadeIn mit 1s Dauer und 3s Verzögerung */
	pointer-events: none;
}

@keyframes fadeIn {
	to {
		opacity: 1;
	}
}

.video {
	height: 100%;
	object-fit: cover;
	transition: opacity .5s;
	width: 100%;
}

.video-container.loading .video {
	opacity: 0;
}

.video-container.hide {
	opacity: 0;
	pointer-events: none;
}