/*
 * SIGN-EFL Video Player
 * Dunkle, schlanke Leiste unter dem Video als bewusster Kontrast zur hellen Seite.
 * Grundregel: Nichts liegt während der Wiedergabe über dem Bild – die Leiste sitzt
 * unter dem Video, damit keine Gebärde verdeckt wird.
 */

/* Runde Ecken für alle Videos – ersetzt das bisherige Custom CSS in den Theme Options und
   gilt auch für den Browser-Player ohne JavaScript. Im Player selbst rundet der Rahmen. */
video {
	border-radius: var(--site-border-radius);
}

.sefl-player {
	--sefl-bg: #314856;
	--sefl-text: #fff;
	--sefl-text-soft: rgba(255, 255, 255, 0.8);
	--sefl-accent: var(--color-custom-pink, #ec5f81);
	--sefl-start: var(--color-content-primary, #b9435e);
	--sefl-hover: rgba(255, 255, 255, 0.14);
	--sefl-active: rgba(255, 255, 255, 0.2);
	--sefl-track: rgba(255, 255, 255, 0.24);
	--sefl-buffer: rgba(255, 255, 255, 0.42);
	--sefl-radius: var(--site-border-radius, 1rem);
	--sefl-btn: 2.25rem;

	container-type: inline-size;
	position: relative;
	display: block;
	width: 100%;
	color: var(--sefl-text);
	font-size: 1rem;
	line-height: 1;
	text-align: left;
}

/* ---------- Bildfläche ---------- */

.sefl-stage {
	position: relative;
	overflow: hidden;
	border-radius: var(--sefl-radius) var(--sefl-radius) 0 0;
	background: var(--sefl-bg);
	cursor: pointer;
}

.sefl-player .sefl-stage video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--sefl-ratio, auto);
	object-fit: contain;
	border-radius: 0;
	background: transparent;
}

/* Große Starttaste: nur vor dem ersten Start und am Ende sichtbar, nie bei Pause
   mitten im Video (dort würde sie die Gebärde verdecken). */
.sefl-player button.sefl-bigplay {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3.75rem;
	height: 3.75rem;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--sefl-start);
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0.2s, transform 0.3s;
}

.sefl-player .sefl-bigplay svg {
	width: 1.6rem;
	height: 1.6rem;
}

.sefl-player.is-initial .sefl-bigplay,
.sefl-player.is-ended .sefl-bigplay {
	opacity: 1;
	visibility: visible;
}

.sefl-stage:hover .sefl-bigplay,
.sefl-player button.sefl-bigplay:focus-visible {
	transform: translate(-50%, -50%) scale(1.08);
}

.sefl-player.is-waiting .sefl-bigplay,
.sefl-player.is-error .sefl-bigplay {
	opacity: 0;
	visibility: hidden;
}

.sefl-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2.75rem;
	height: 2.75rem;
	margin: -1.375rem 0 0 -1.375rem;
	border: 3px solid rgba(255, 255, 255, 0.55);
	border-top-color: var(--sefl-bg);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s 0.15s;
	animation: sefl-spin 0.9s linear infinite;
	animation-play-state: paused;
}

.sefl-player.is-waiting .sefl-spinner {
	opacity: 1;
	animation-play-state: running;
}

@keyframes sefl-spin {
	to {
		transform: rotate(360deg);
	}
}

.sefl-error {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: rgba(37, 53, 64, 0.85);
	color: #fff;
	line-height: 1.4;
	text-align: center;
	cursor: default;
}

.sefl-player.is-error .sefl-error {
	display: flex;
}

/* ---------- Leiste ---------- */

.sefl-bar {
	position: relative;
	display: flow-root;
	border-radius: 0 0 var(--sefl-radius) var(--sefl-radius);
	background: var(--sefl-bg);
}

/* Die Tastenzeile rückt 3px in die (unsichtbare) Greiffläche der Zeitleiste hinein: so bleiben
   über dem Hover-Kreis 4px und darunter 3px Luft, ohne dass die Leiste höher wird. */
.sefl-controls {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.125rem;
	margin-top: -3px;
	padding: 0 0.5rem 3px;
}

.sefl-spacer {
	flex: 1 1 auto;
}

/* Reset gegen die globalen Button-/Input-Stile des Themes (inkl. .color_alternate-Zeilen) */
.sefl-player button {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.sefl-player button:focus-visible,
.sefl-player .sefl-bar input.sefl-seek:focus-visible {
	outline: var(--focus-outline-width, 2px) solid #fff;
	outline-offset: -2px;
}

.sefl-player button.sefl-bigplay:focus-visible {
	outline-offset: 2px;
}

.sefl-player svg {
	display: block;
	width: 1.3rem;
	height: 1.3rem;
	pointer-events: none;
}

.sefl-player button.sefl-btn,
.sefl-player button.sefl-speed-btn {
	min-width: var(--sefl-btn);
	height: var(--sefl-btn);
	border-radius: var(--sefl-btn);
	transition: background-color 0.3s;
}

.sefl-player button.sefl-btn:hover,
.sefl-player button.sefl-speed-btn:hover,
.sefl-player button.sefl-speed-btn[aria-expanded="true"] {
	background: var(--sefl-hover);
}

/* Wiederholen aktiv: zarte Fläche plus Punkt, damit der Zustand nicht nur an der Helligkeit hängt */
.sefl-player button.sefl-loop[aria-pressed="true"] {
	background: var(--sefl-active);
}

.sefl-player button.sefl-loop[aria-pressed="true"]::after {
	content: "";
	position: absolute;
	bottom: 4px;
	left: 50%;
	width: 3px;
	height: 3px;
	margin-left: -1.5px;
	border-radius: 50%;
	background: currentColor;
}

.sefl-player .sefl-icon-pause,
.sefl-player .sefl-icon-replay,
.sefl-player .sefl-icon-fs-exit,
.sefl-player.is-playing .sefl-icon-play,
.sefl-player.is-ended .sefl-icon-play,
.sefl-player.is-fullscreen .sefl-icon-fs-enter {
	display: none;
}

.sefl-player.is-playing .sefl-icon-pause,
.sefl-player.is-ended .sefl-icon-replay,
.sefl-player.is-fullscreen .sefl-icon-fs-exit {
	display: block;
}

.sefl-time {
	margin: 0 0.4rem;
	color: var(--sefl-text);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sefl-duration {
	color: var(--sefl-text-soft);
}

/* ---------- Zeitleiste: feine Linie direkt an der Bildkante ---------- */

.sefl-player .sefl-bar input.sefl-seek {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 17px;
	min-height: 0;
	margin: -7px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}

.sefl-seek::-webkit-slider-runnable-track {
	height: 3px;
	background: linear-gradient(
		to right,
		var(--sefl-accent) 0 var(--sefl-played, 0%),
		var(--sefl-buffer) var(--sefl-played, 0%) var(--sefl-buffered, 0%),
		var(--sefl-track) var(--sefl-buffered, 0%) 100%
	);
}

.sefl-seek::-moz-range-track {
	height: 3px;
	background: linear-gradient(
		to right,
		var(--sefl-accent) 0 var(--sefl-played, 0%),
		var(--sefl-buffer) var(--sefl-played, 0%) var(--sefl-buffered, 0%),
		var(--sefl-track) var(--sefl-buffered, 0%) 100%
	);
}

.sefl-seek::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 11px;
	height: 11px;
	margin-top: -4px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.2s;
}

.sefl-seek::-moz-range-thumb {
	width: 11px;
	height: 11px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.2s;
}

.sefl-seek:hover::-webkit-slider-thumb,
.sefl-seek:active::-webkit-slider-thumb {
	transform: scale(1.3);
}

.sefl-seek:hover::-moz-range-thumb,
.sefl-seek:active::-moz-range-thumb {
	transform: scale(1.3);
}

.sefl-player .sefl-bar input.sefl-seek:disabled {
	cursor: default;
}

.sefl-seek:disabled::-webkit-slider-thumb {
	opacity: 0;
}

.sefl-seek:disabled::-moz-range-thumb {
	opacity: 0;
}

/* ---------- Geschwindigkeit ---------- */

.sefl-player button.sefl-speed-btn {
	padding: 0 0.45rem;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sefl-speed-menu {
	position: absolute;
	right: 0.5rem;
	bottom: calc(100% + 0.5rem);
	z-index: 3;
	display: flex;
	gap: 0.125rem;
	padding: 0.2rem;
	border-radius: 1.2rem;
	background: var(--sefl-bg);
}

.sefl-speed-menu[hidden] {
	display: none;
}

.sefl-player .sefl-speed-menu button {
	flex: 1 0 auto;
	min-width: 2.6rem;
	height: 2rem;
	padding: 0 0.4rem;
	border-radius: 1rem;
	color: var(--sefl-text-soft);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	transition: background-color 0.2s, color 0.2s;
}

.sefl-player .sefl-speed-menu button:hover {
	background: var(--sefl-hover);
	color: var(--sefl-text);
}

.sefl-player .sefl-speed-menu button[aria-checked="true"] {
	background: var(--sefl-active);
	color: var(--sefl-text);
	font-weight: 700;
}

/* ---------- Schmale Breiten (Smartphone, schmale Spalten) ---------- */

@container (max-width: 21rem) {
	.sefl-controls {
		padding-right: 0.25rem;
		padding-left: 0.25rem;
	}

	.sefl-speed-menu {
		right: 0.25rem;
		left: 0.25rem;
	}

	.sefl-player .sefl-speed-menu button {
		min-width: 0;
		padding: 0;
	}
}

@container (max-width: 18rem) {
	.sefl-duration {
		display: none;
	}
}

/* ---------- Vollbild ---------- */

.sefl-player.is-fullscreen {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: #000;
}

.sefl-player.is-fullscreen .sefl-stage {
	flex: 1 1 auto;
	min-height: 0;
	border-radius: 0;
	background: #000;
}

.sefl-player.is-fullscreen .sefl-stage video {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

.sefl-player.is-fullscreen .sefl-bar {
	flex: none;
	border-radius: 0;
}

.sefl-player.is-fullscreen .sefl-controls {
	padding: 0.15rem max(0.75rem, calc((100% - 60rem) / 2)) 0.5rem;
}

.sefl-player.is-fullscreen .sefl-speed-menu {
	right: max(0.75rem, calc((100% - 60rem) / 2));
}

/* ---------- Barrierefreiheit ---------- */

@media (prefers-reduced-motion: reduce) {
	.sefl-player *,
	.sefl-seek::-webkit-slider-thumb {
		transition: none !important;
	}

	.sefl-spinner {
		animation-duration: 2.5s;
	}
}

@media (forced-colors: active) {
	.sefl-player button {
		border: 1px solid ButtonText;
	}

	.sefl-seek::-webkit-slider-runnable-track {
		background: ButtonText;
	}

	.sefl-seek::-moz-range-track {
		background: ButtonText;
	}
}