/**
 * VenoBox – projektübergreifende Custom Styles
 * =============================================================================
 *
 * Diese Datei ergänzt die originale venobox.min.css.
 *
 * Nicht verändern:
 * - venobox.min.css
 *
 * Projektspezifische Abweichungen können bei Bedarf später
 * in der normalen Theme-/Projekt-CSS überschrieben werden.
 */


/* ==========================================================================
   OVERLAY
   ========================================================================== */

/**
 * Weicher Blur auf der Website hinter der geöffneten Lightbox.
 *
 * Die eigentliche Overlay-Farbe und Transparenz wird über
 * venobox-customer-settings.js gesteuert.
 */
.vbox-overlay {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}


/* ==========================================================================
   DOWNLOAD-BUTTON
   ========================================================================== */

/**
 * Der Download-Button wird nur erzeugt, wenn in
 * venobox-customer-settings.js:
 *
 * download.enabled = true
 *
 * gesetzt wurde.
 */
.vbox-download {
	position: fixed;
	top: 0;
	right: 52px;
	z-index: 99;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 52px;
	height: 52px;

	padding: 0;

	color: #fff;
	font-size: 20px;
	line-height: 1;

	text-decoration: none;

	opacity: 0.8;

	transition:
		opacity 0.2s ease,
		background-color 0.2s ease;
}


/**
 * SVG im Download-Button.
 */
.vbox-download svg {
	display: block;
	width: 20px;
	height: 20px;
}


/**
 * Hover- und Tastaturfokus.
 */
.vbox-download:hover,
.vbox-download:focus {
	color: #fff;
	text-decoration: none;
	opacity: 1;
}


/* ==========================================================================
   VIDEO-THUMBNAILS
   ========================================================================== */

/**
 * Container für klickbare Video-Vorschaubilder.
 */
.video-thumb {
	position: relative;
}


/**
 * Link dient als Positionierungsbasis für den Play-Button.
 */
.video-thumb a {
	position: relative;
	display: block;
}


/**
 * Vorschaubild vollständig auf die Kachelbreite skalieren.
 */
.video-thumb img {
	display: block;
	width: 100%;
	height: auto;
}


/* ==========================================================================
   VIDEO PLAY BUTTON
   ========================================================================== */

/**
 * Zentraler Play-Button auf Video-Thumbnails.
 */
.video-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 72px;
	height: 72px;

	border-radius: 50%;

	background: rgba(0, 0, 0, 0.55);
	color: #fff;

	font-size: 26px;
	line-height: 1;

	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);

	transform: translate(-50%, -50%);

	pointer-events: none;

	transition:
		background-color 0.2s ease,
		box-shadow 0.2s ease;
}


/**
 * Kleine optische Korrektur:
 * Ein Play-Dreieck wirkt geometrisch mittig oft leicht zu weit links.
 */
.video-play-icon i {
	display: block;
	margin-left: 3px;
	line-height: 1;
}


/**
 * Hover- und Tastaturfokus.
 */
.video-thumb a:hover .video-play-icon,
.video-thumb a:focus .video-play-icon {
	background: rgba(0, 0, 0, 0.7);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

	transform: translate(-50%, -50%);
}


/* ==========================================================================
   VIDEO / IFRAME RATIO FIX
   ========================================================================== */

/*
 * Moderne Browser verwenden für VenoBox-Videos ein echtes CSS-Seitenverhältnis.
 * Dadurch besitzen Ratio-Container und iframe exakt dieselbe Geometrie und
 * Subpixel-Artefakte an den Außenkanten werden vermieden.
 */

@supports (aspect-ratio: 16 / 9) {

	.venoratio.vbox-child::before {
		display: none;
	}

	.venoratio-1x1.vbox-child {
		aspect-ratio: 1 / 1;
	}

	.venoratio-4x3.vbox-child {
		aspect-ratio: 4 / 3;
	}

	.venoratio-16x9.vbox-child {
		aspect-ratio: 16 / 9;
	}

	.venoratio-21x9.vbox-child {
		aspect-ratio: 21 / 9;
	}

	.venoratio.vbox-child {
		overflow: hidden;
	}

	.venoratio.vbox-child > iframe,
	.venoratio.vbox-child > video {
		position: absolute;
		inset: 0;

		display: block;

		width: 100%;
		height: 100%;

		margin: 0;
		padding: 0;

		border: 0;
		outline: 0;
	}
}