/*
 * GOLFSTUN.DE Video-Dienst -- Player auf den Websites (0.2.0).
 * Leiste nach Design-Fundament 3.20 / CSS-Startpaket 18 und Klickdummy
 * video-player-klickdummy.html (Website), Untertitel unter dem Bild (Z-VP3).
 * Konzept: golfstunde-video-player-2026-10-09.txt (E-VP1-E-VP9, A-VP13-A-VP16).
 *
 * Läuft in zwei Themes (Akademie, Magazin): alles hängt an .gsvd-player, Knöpfe
 * mit 0,3,0, damit Theme-Regeln für button (bis 0,2,1) nicht durchschlagen;
 * Resets per :where() (Spezifität 0), damit sie die Bauteilregeln nicht schlagen.
 * Schmal (< 600 px) wie die App: 17 px Untertitel, Knöpfe ohne Beschriftung.
 */
.gsvd-player {
	--gsvd-grund: #0b1520;
	--gsvd-cta: #d81e5b;
	--gsvd-dunkel: #173753;
	position: relative;
	width: 100%;
	background: var(--gsvd-grund);
	color: #fff;
	font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
	line-height: 1.4;
	container-type: inline-size;
	container-name: gsvd;
	-webkit-tap-highlight-color: transparent;
}
.gsvd-player :where(button) {
	margin: 0; box-shadow: none; text-transform: none; letter-spacing: normal; text-decoration: none;
	min-height: 0; width: auto; line-height: 1; -webkit-appearance: none; appearance: none;
}
.gsvd-player [hidden] { display: none !important; }

/* Bildfläche 16:9 -- auch für das alte Markup (Video direkt in .gsvd-player, Admin-Vorschau 0.1.x) */
.gsvd-player .pl-video { --gsvd-bar-h: 84px; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--gsvd-grund); cursor: pointer; user-select: none; -webkit-user-select: none; }
.gsvd-player .gsvd-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: var(--gsvd-grund); }

/* Tippfläche über dem Bild (Safari iPhone gibt Tipps auf ein laufendes Video nicht weiter) */
.gsvd-player .pl-tipp { position: absolute; inset: 0; z-index: 1; background: transparent; }

/* Großer Abspielknopf, mittig über der Leiste (Fundament 3.20) */
.gsvd-player .pl-video .pl-center {
	position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 10px; padding: 0 0 var(--gsvd-bar-h);
	background: rgba(8, 18, 28, .22); border: 0; border-radius: 0; color: #fff; cursor: pointer; font: inherit;
	width: auto; height: auto; min-height: 0; margin: 0; box-shadow: none; text-transform: none; letter-spacing: normal; text-decoration: none; text-shadow: none; 
}
.gsvd-player .pl-center svg { width: 64px; height: 64px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35)); }
.gsvd-player .pl-hint { font-size: 14px; background: rgba(23, 55, 83, .78); padding: 5px 12px; border-radius: 999px; white-space: nowrap; }

/* Bedienleiste */
.gsvd-player .pl-bar {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 20px 6px 4px; cursor: default;
	background: linear-gradient(to top, rgba(8, 18, 28, .82), rgba(8, 18, 28, .55) 60%, rgba(8, 18, 28, 0));
	display: flex; flex-direction: column; transition: opacity .3s;
}
.gsvd-player.bar-weg .pl-bar { opacity: 0; pointer-events: none; }
.gsvd-player.bar-weg .pl-video { cursor: none; }
.gsvd-player .pl-prog { display: flex; align-items: center; gap: 10px; padding: 0 10px; }
.gsvd-player .pl-track { flex: 1; height: 24px; display: flex; align-items: center; cursor: pointer; outline: none; }
.gsvd-player .pl-track:focus-visible .pl-line { outline: 3px solid #fff; outline-offset: 6px; }
.gsvd-player .pl-line { position: relative; width: 100%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.gsvd-player .pl-puffer { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, .25); border-radius: 2px; }
.gsvd-player .pl-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #fff; border-radius: 2px; }
.gsvd-player .pl-fill::after { content: ""; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; }
.gsvd-player .pl-zeit { font-size: 14px; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gsvd-player .pl-row { display: flex; align-items: center; gap: 2px; }
.gsvd-player .pl-spacer { flex: 1; }
.gsvd-player .pl-row .pl-btn {
	min-width: 44px; height: 44px; min-height: 0; padding: 0 10px; border: 0; border-radius: 22px; background: transparent; color: #fff;
	margin: 0; box-shadow: none; text-transform: none; letter-spacing: normal; text-decoration: none; text-shadow: none; width: auto; line-height: 1;
	flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 500; white-space: nowrap;
}
.gsvd-player .pl-row .pl-btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.gsvd-player .pl-row .pl-btn:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.gsvd-player .pl-btn svg { width: 24px; height: 24px; flex: none; }
.gsvd-player .pl-btn .pl-txt { display: none; }

/* Untertitel-Knopf „UT“ -- aus: Umriss; an: weiß gefüllt + pinker Strich */
.gsvd-player .ut-ico {
	position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
	min-width: 32px; height: 24px; padding: 0 4px; border: 2px solid #fff; border-radius: 5px;
	font: 700 14px/1 Roboto, system-ui, sans-serif; letter-spacing: .03em; color: #fff;
}
.gsvd-player .pl-ut.an .ut-ico { background: #fff; color: var(--gsvd-dunkel); }
.gsvd-player .pl-ut.an .ut-ico::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: -8px; height: 3px; border-radius: 2px; background: var(--gsvd-cta); }

/* Untertitel UNTER dem Bild (Regelfall): eigener Streifen, feste Höhe für zwei Zeilen */
.gsvd-player .pl-ut-unter {
	display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box;
	height: 70px; padding: 6px 16px; background: var(--gsvd-grund); color: #fff;
	font-size: 17px; font-weight: 500; line-height: 1.4; text-align: center; white-space: pre-line;
}
/* LearnDash-Kursseiten (0.8.1): LearnDashs „responsive“ Videobox (body.learndash-embed-responsive .ld-video, Höhe 0 +
   padding-bottom 56,25 % + overflow hidden) schnitt den Streifen unter dem Bild ab -- Untertitel liefen unsichtbar mit
   (Untertitel-Nachlauf M-UN14, 19.10.2026). Mit unserem Player wächst die Box mit ihm. */
body.learndash-cpt.learndash-embed-responsive .ld-video:has(.gsvd-player) { height: auto; padding-bottom: 0; overflow: visible; }
/* Untertitel IM Bild (Vollbild ohne Platz darunter): rückt über die sichtbare Leiste */
.gsvd-player .pl-ut-in {
	position: absolute; left: 0; right: 0; bottom: var(--gsvd-bar-h); z-index: 2; display: flex; justify-content: center;
	padding: 0 5%; pointer-events: none; transition: bottom .3s; font-size: 19px;
}
.gsvd-player.bar-weg .pl-ut-in { bottom: 12px; }
.gsvd-player .pl-ut-in p { margin: 0; max-width: 100%; text-align: center; line-height: 1.38; font-weight: 500; white-space: pre-line; }
.gsvd-player .pl-ut-in span {
	background: rgba(8, 18, 28, .80); color: #fff; padding: 3px 10px; border-radius: 6px;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Kurze Hinweise */
.gsvd-player .pl-flash {
	position: absolute; left: 14%; top: 45%; transform: translate(-50%, -50%); z-index: 2;
	background: rgba(8, 18, 28, .75); color: #fff; font-size: 16px; font-weight: 500; padding: 10px 16px; border-radius: 999px;
	opacity: 0; transition: opacity .25s; pointer-events: none; white-space: nowrap;
}
.gsvd-player .pl-flash.zeigen { opacity: 1; }
.gsvd-player .pl-toast {
	position: absolute; left: 16px; right: 16px; bottom: calc(var(--gsvd-bar-h) + 8px); z-index: 4; margin: 0 auto; max-width: 460px;
	background: rgba(23, 55, 83, .96); color: #fff; font-size: 15px; line-height: 1.4; padding: 11px 14px; border-radius: 12px;
	text-align: center; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; pointer-events: none;
}
.gsvd-player .pl-toast.zeigen { opacity: 1; transform: none; }

/* Fehler / Hinweis beim Laden */
.gsvd-player .gsvd-hinweis {
	position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 5; margin: 0; padding: 16px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
	background: var(--gsvd-grund); color: #fff; font-size: 17px; font-weight: 500; line-height: 1.4; cursor: default;
}
.gsvd-player .gsvd-hinweis .pl-nochmal {
	min-height: 44px; height: auto; padding: 0 20px; border: 0; border-radius: 10px; background: var(--gsvd-cta); color: #fff; margin: 0; box-shadow: none; text-transform: none; letter-spacing: normal; text-decoration: none; text-shadow: none; width: auto; line-height: 1.2;
	font: 500 16px Roboto, system-ui, sans-serif; cursor: pointer;
}

/* Breit (Website am Rechner): Knöpfe 48 px mit Beschriftung, Untertitel 22 px (Z-VP4, A-VP15) */
@container gsvd (min-width: 600px) {
	.gsvd-player .pl-video { --gsvd-bar-h: 98px; }
	.gsvd-player .pl-bar { padding: 28px 12px 8px; }
	.gsvd-player .pl-line { height: 5px; }
	.gsvd-player .pl-zeit { font-size: 16px; }
	.gsvd-player .pl-row .pl-btn { height: 48px; min-width: 48px; border-radius: 24px; padding: 0 12px; }
	.gsvd-player .pl-btn .pl-txt { display: inline; }
	.gsvd-player .pl-center svg { width: 84px; height: 84px; }
	.gsvd-player .pl-hint { font-size: 16px; }
	.gsvd-player .pl-ut-unter { height: 88px; padding: 8px 24px; font-size: 22px; }
	.gsvd-player .pl-ut-in { font-size: 22px; }
}

/* Vollbild (Rechner, Android): Bild mittig, Streifen darunter, wenn Platz ist -- sonst im Bild (JS: ut-im-bild) */
.gsvd-player:fullscreen { display: flex; flex-direction: column; justify-content: center; background: #000; }
.gsvd-player:-webkit-full-screen { display: flex; flex-direction: column; justify-content: center; background: #000; width: 100%; height: 100%; }
.gsvd-player.ist-voll .pl-video { flex: none; width: 100%; max-width: calc(100vh * 16 / 9); margin: 0 auto; background: #000; }
.gsvd-player.ist-voll .gsvd-video { background: #000; }
.gsvd-player.ist-voll .pl-ut-unter { flex: none; background: #000; height: 6.25cqw; min-height: 48px; padding: 0 4cqw; font-size: max(14px, 2cqw); line-height: 1.35; }
.gsvd-player.ist-voll .pl-ut-in { font-size: max(18px, 2.4cqw); }

/* Vorspann (Werbespot), vorläufige Darstellung bis W-VP4; liegt über der Leiste */
.gsvd-player .gsvd-spot { position: absolute; inset: 0; background: #000; z-index: 6; }
.gsvd-player .gsvd-spot video { width: 100%; height: 100%; display: block; }
.gsvd-player .gsvd-spot-marke { position: absolute; left: 12px; top: 12px; background: #b45309; color: #fff; padding: 4px 10px; border-radius: 6px; font-weight: 600; font-size: 15px; }
.gsvd-player .gsvd-spot-rest { position: absolute; left: 12px; bottom: 12px; background: rgba(0, 0, 0, .7); color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 15px; }
.gsvd-player .gsvd-spot .gsvd-spot-weiter { position: absolute; right: 12px; bottom: 12px; margin: 0; box-shadow: none; text-transform: none; letter-spacing: normal; text-decoration: none; text-shadow: none; width: auto; min-height: 44px; padding: 8px 16px; background: rgba(0, 0, 0, .8); color: #fff; border: 1px solid #fff; border-radius: 8px; font-size: 16px; cursor: pointer; }
.gsvd-player .gsvd-spot .gsvd-spot-weiter[disabled] { opacity: .7; cursor: default; }

@media (prefers-reduced-motion: reduce) {
	.gsvd-player .pl-bar, .gsvd-player .pl-ut-in, .gsvd-player .pl-flash, .gsvd-player .pl-toast { transition: none; }
}