/*
* Videoplayer CSS
* Author: RE / NB
* Version 1.5.3
*/

/* ================= VIDEO PLAYER WRAPPER ================= */
.video-player-wrapper {
	margin: 20px 0;
	position: relative;
}

/* ================= THUMBNAIL ================= */
.video-thumbnail {
	position: relative;
	cursor: pointer;
	overflow: hidden;
	max-width: calc(300px + 33vw) !important;
}

.video-thumbnail video {
	display: block;
	width: 100%;
	background: #000;
}

/* ================= PLAY BUTTON ================= */
.video-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
}

.play-icon {
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* ================= MODAL BASE ================= */
.video-modal {
	position: fixed;
	inset: 0;
	display: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
	z-index: 999999;
}

.video-modal.show {
	display: block;
	opacity: 1;
	pointer-events: auto;
}

/* ================= OVERLAY ================= */
.video-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .75);
	backdrop-filter: blur(4px);
	z-index: 999998;
}

/* ================= MODAL CONTENT ================= */
.video-modal-content {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 90%;
	max-width: 900px;
	max-height: calc(100vh - 120px);
	/*! padding: 10px; */
	overflow-y: auto;
	opacity: 0;
	transform: translate(-50%, -50%) scale(.92);
	transition: opacity .35s ease, transform .35s ease;
	transform-style: preserve-3d;
	z-index: 9999999999;
	box-shadow: 0px 20px 10px rgba(255, 255, 255, 0);
	overflow: visible !important;
}

.video-modal.show .video-modal-content {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* ================= CLOSE BUTTON ================= */
.video-modal-close {
	position: absolute;
	background: transparent;
	top: 4px;
	right: 7px;
	color: #fff;
	border: none;
	font-size: 30px;
	width: 36px;
	height: 36px;
	cursor: pointer;
	z-index: 2147483647;
	display: flex;
	align-items: center;
	padding: 12px 7px !important;
	justify-content: center;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, .8) !important;
}

/* ================= VIDEO ================= */
.video-container {
	overflow: hidden;
	border-radius: 6px;
}

.video-container video {
	width: 100%;
	min-height: 400px;
	display: block;
	background: #000;
}

/* ================= TIMELINE ================= */
.video-timeline {
	margin-top: 0;
	padding: 1vmin 0vmin 0 2vmin;
	max-height: 400px;
	position: relative;
	background: transparent;
	background: linear-gradient(100deg, #000 0%, rgba(26, 35, 46, .57) 50%, #283f57 100%);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	/*! padding: 10px 0; */
	display: flex;
	gap: 16px;
}

@media (min-width: 768px) {
	.video-timeline img {
		height: calc(40px + 2vw);
	}
}

/* ================= TIMELINE BUTTONS ================= */
.timeline-btn {
	display: inline-block;
	background: var(--greyblue);
	color: #fff;
	cursor: pointer;
	position: relative;
	outline: none;
	border: none;
	padding: 4px 3px 0px 3px !important;
	border-radius: 2px;
}

.active-timeline {
	background: var(--yellow) !important;
	font-weight: 600;
}

.active-timeline::before {
	content: "↺";
	position: absolute;
	left: 50%;
	top: 31%;
	transform: translate(-50%);
	font-size: 22px;
}

/* ================= TIMELINE HOVER PREVIEW ================= */
.vm-smart-preview {
	pointer-events: auto !important;
}

.vm-hover-popup {
	position: absolute !important;
	top: 2%;
	left: 1%;
	min-width: 360px !important;
	width: calc(100px + 28vw) !important;
	padding: 3px;
	display: none;
	pointer-events: none;
	z-index: 2147483647;
	opacity: .9;
}

.vm-hover-popup img {
	box-shadow: 0px 0px 5px rgba(80, 80, 80, .6) !important;
	border-radius: 3px !important;
}

.timeline-btn:hover .vm-hover-popup {
	display: block;
}

.vm-hover-popup img {
	/*! width: 70vmin; */
	
	/*! max-width: 280px; */
	height: auto;
	display: block;
}

/* ================= BODY LOCK ================= */
body.video-modal-open {
	overflow: hidden !important;
}

body.video-modal-open header, body.video-modal-open .site-header, body.video-modal-open .header, body.video-modal-open nav.navbar, body.video-modal-open .sticky-header, body.video-modal-open #wpadminbar {
	z-index: 999 !important;
}

/* ================= SCROLLBAR ================= */
.video-timeline::-webkit-scrollbar {
	width: 8px;
}

.video-timeline::-webkit-scrollbar-thumb {
	background: #3498db;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
	.video-modal-content {
		left: 50%;
		width: 95%;
		padding: 15px;
	}
	
	.video-container video {
		min-height: 250px;
	}
	
	.video-play-btn {
		width: 60px;
		height: 60px;
	}
	
	.video-timeline {
		display: grid !important;
		width: 100%;
		height: 38vh;
		grid-column: initial;
		min-height: 189px;
		overflow-y: scroll;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 4px !important;
		padding-right: 7px !important;
	}
}

@media (max-width: 480px) {
	.video-modal-content {
		width: 96%;
		padding: 12px;
	}
	
	.video-container video {
		min-height: 200px;
	}
	
	.video-modal-close {
		width: 40px;
		height: 40px;
		font-size: 24px;
	}
}

/* ================= LOADING STATE ================= */
.video-container video:not([src]) {
	background: #000 url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"><circle cx=\"20\" cy=\"20\" r=\"18\" fill=\"none\" stroke=\"%23fff\" stroke-width=\"2\"/></svg>") center no-repeat;
}

.video-container video:not([src]).nitro-lazy {
	background: none !important;
}

.video-timeline-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	margin-top: 15px;
}

.video-timeline {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	padding: 7px 0 7px 7px;
	scrollbar-width: none;
}

.video-timeline::-webkit-scrollbar {
	display: none;
}

.timeline-btn {
	flex: 0 0 auto;
	border: none;
	background: transparent;
	cursor: pointer;
}

.timeline-btn img {
	border-radius: 2px;
}

/* Arrows */
.timeline-arrow {
	background: #a1382f;
	color: #fff;
	border: none;
	width: 32px;
	height: 70px;
	font-size: 20px;
	cursor: pointer;
	display: none;
}

.timeline-arrow:hover {
	background: #7f2b24;
}

/* ================= VIDEO TRIGGER (standalone link) ================= */
.video-trigger {
	cursor: pointer;
	position: relative;
	display: inline-block;
	cursor: pointer;
	overflow: hidden;
	width: 100%;
}

.theor_grundlagen-default .video-trigger {
	width: 100%;
	height: 100% !important;
}

/* ---------- SHORTCODE LOADER (overlay on poster while waiting for modal) ---------- */
.video-player-wrapper.vm-loading .video-thumbnail {
	filter: blur(2px);
	opacity: .55;
}

.video-player-wrapper .vm-loader {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .35);
	z-index: 30;
	pointer-events: none;
}

.video-player-wrapper .vm-loader-spinner {
	width: 42px;
	height: 42px;
	border: 4px solid rgba(255, 255, 255, .25);
	border-top-color: #fff;
	border-radius: 50%;
	animation: vm-spinner .8s linear infinite;
}

@keyframes vm-spinner {
	to {
		transform: rotate(360deg);
	}
}

.video-trigger img {
	display: block;
	width: 100%;
	height: auto;
}

.video-trigger .play-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.video-trigger .play-overlay .play-icon {
	width: 70px;
	height: 70px;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
	transition: transform .2s ease;
}

.video-trigger:hover .play-overlay .play-icon {
	transform: scale(1.1);
}