/* =========================================================================
   GLX Video - Vorschaubild, Popup und Abspieler
   =========================================================================

   Drei Teile, bewusst getrennt:

     .glx-video      die Karte im Beitrag (Bild + Titel)
     .glx-vp         das Popup ueber der Seite
     .glx-vp-steuer  die Bedienleiste des Abspielers

   Warum ein eigener Abspieler statt <video controls>:
   Die eingebauten Bedienelemente sehen in jedem Browser anders aus - unter
   Windows grau, auf dem Mac silbern, auf dem Handy wieder anders. Auf einer
   dunklen Seite wirkt das wie ein Fremdkoerper. Eigene Bedienelemente sehen
   ueberall gleich aus und nehmen die Akzentfarbe der Seite an.

   Die Farben kommen aus Variablen. Wer sein Design aendert, aendert eine
   Zeile - nicht dreissig.
   ========================================================================= */

.glx-video,
.glx-vp {
	--glx-v-akzent: #22a1c4;
	--glx-v-grund:  #14161a;
	--glx-v-rand:   #2c3038;
	--glx-v-text:   #e8ebf0;
	--glx-v-blass:  #9aa2ac;
}

/* ---------- Die Karte im Beitrag ---------------------------------------- */

.glx-video {
	margin: 22px 0;
	max-width: 100%;
}
.glx-video.is-mitte  { margin-left: auto; margin-right: auto; }
.glx-video.is-rechts { margin-left: auto; }

/* Ein <button>, kein <a href="#">: Die Ueberschrift fuehrt nirgendwohin, sie
   oeffnet etwas. Screenreader sagen dann "Schaltflaeche" statt "Link", und die
   Tastatur bedient sie von selbst richtig. Die Knopf-Optik wird abgeraeumt,
   damit sie aussieht wie eine Ueberschrift. */
.glx-video-titel {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	padding: 0;
	text-align: inherit;
	font-family: inherit;
	cursor: pointer;
	margin: 0 0 10px;
	font-size: 19px;
	line-height: 1.35;
	font-weight: 600;
	color: var(--glx-v-text);
	text-decoration: none;
}
.glx-video-titel:hover { color: var(--glx-v-akzent); }

/* Der anklickbare Bereich. Ein <button>, kein <a href="#">: Es fuehrt
   nirgendwohin, es oeffnet etwas. Screenreader sagen dann "Schaltflaeche"
   statt "Link", und die Tastatur bedient ihn ohne Zutun richtig. */
.glx-video-oeffner {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	border: 1px solid var(--glx-v-rand);
	border-radius: 14px;
	overflow: hidden;
	background: var(--glx-v-grund);
	cursor: pointer;
	transition: transform .28s cubic-bezier(.2,.7,.3,1),
	            box-shadow .28s ease, border-color .28s ease;
}
.glx-video-oeffner:hover {
	transform: translateY(-4px);
	border-color: rgba(34,161,196,.55);
	box-shadow: 0 18px 40px -12px rgba(0,0,0,.75);
}
.glx-video-oeffner:focus-visible {
	outline: 3px solid var(--glx-v-akzent);
	outline-offset: 3px;
}

.glx-video-bild {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 16 / 9;
	margin: 0;
}
.glx-video.is-4-3 .glx-video-bild { aspect-ratio: 4 / 3; }
.glx-video.is-1-1 .glx-video-bild { aspect-ratio: 1 / 1; }

/* Ohne Bild: ein ruhiger Platzhalter statt eines Lochs im Layout. */
.glx-video-leer {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	color: var(--glx-v-blass);
	font-size: 14px;
	background: linear-gradient(135deg, #1a1d22, #14161a);
}

/* Der Abspielknopf. Liegt ueber dem Bild und waechst beim Zeigen mit. */
.glx-video-play {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 74px; height: 74px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(20, 22, 26, .62);
	border: 2px solid rgba(255,255,255,.9);
	backdrop-filter: blur(3px);
	transition: transform .28s cubic-bezier(.2,.7,.3,1), background .28s ease;
	pointer-events: none;
}
.glx-video-oeffner:hover .glx-video-play {
	transform: translate(-50%, -50%) scale(1.12);
	background: var(--glx-v-akzent);
}
.glx-video-play svg { width: 28px; height: 28px; fill: #fff; margin-left: 4px; }

/* Laufzeit unten rechts - sagt vor dem Klick, worauf man sich einlaesst. */
.glx-video-dauer {
	position: absolute;
	right: 12px; bottom: 12px;
	padding: 3px 8px;
	border-radius: 6px;
	background: rgba(0,0,0,.72);
	color: #fff;
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.glx-video-unter {
	margin: 9px 2px 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--glx-v-blass);
}

/* ---------- Das Popup --------------------------------------------------- */

.glx-vp {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vmin;
	background: rgba(6, 8, 11, .88);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity .22s ease;
}
.glx-vp.is-auf { opacity: 1; }

.glx-vp-buehne {
	position: relative;
	width: min(1180px, 100%);
	max-height: 92vh;
	border-radius: 16px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 40px 90px -20px rgba(0,0,0,.9);
	transform: scale(.965);
	transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.glx-vp.is-auf .glx-vp-buehne { transform: scale(1); }

.glx-vp-buehne video,
.glx-vp-buehne iframe {
	display: block;
	width: 100%;
	height: auto;
	max-height: 92vh;
	aspect-ratio: 16 / 9;
	border: 0;
	background: #000;
}

.glx-vp-zu {
	position: absolute;
	top: 12px; right: 12px;
	width: 42px; height: 42px;
	display: flex; align-items: center; justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(20,22,26,.72);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 3;
	transition: background .18s ease, transform .18s ease;
}
.glx-vp-zu:hover { background: #d63638; transform: rotate(90deg); }
.glx-vp-zu:focus-visible { outline: 3px solid var(--glx-v-akzent); outline-offset: 2px; }

.glx-vp-titel {
	position: absolute;
	left: 0; right: 64px; top: 0;
	padding: 16px 20px 34px;
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	background: linear-gradient(to bottom, rgba(0,0,0,.72), transparent);
	pointer-events: none;
	z-index: 2;
	transition: opacity .3s ease;
}
.glx-vp.is-ruhig .glx-vp-titel { opacity: 0; }

/* ---------- Bedienleiste ------------------------------------------------ */

.glx-vp-steuer {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 30px 14px 12px;
	background: linear-gradient(to top, rgba(0,0,0,.88), transparent);
	z-index: 2;
	transition: opacity .3s ease;
}
.glx-vp.is-ruhig .glx-vp-steuer { opacity: 0; }

/* Der Fortschritt. Ein groesseres unsichtbares Feld darum herum, damit man
   ihn auch trifft, ohne genau zu zielen - 4 Pixel sind mit der Maus knapp
   und mit dem Finger unmoeglich. */
.glx-vp-leiste {
	position: relative;
	height: 18px;
	display: flex;
	align-items: center;
	cursor: pointer;
	margin-bottom: 4px;
}
.glx-vp-schiene {
	position: relative;
	width: 100%;
	height: 5px;
	border-radius: 3px;
	background: rgba(255,255,255,.26);
	overflow: hidden;
	transition: height .15s ease;
}
.glx-vp-leiste:hover .glx-vp-schiene { height: 8px; }
.glx-vp-geladen,
.glx-vp-gespielt {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	border-radius: 3px;
}
.glx-vp-geladen  { background: rgba(255,255,255,.28); }
.glx-vp-gespielt { background: var(--glx-v-akzent); }

.glx-vp-knoepfe {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #fff;
}
.glx-vp-knopf {
	width: 38px; height: 38px;
	display: flex; align-items: center; justify-content: center;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background .16s ease;
}
.glx-vp-knopf:hover { background: rgba(255,255,255,.16); }
.glx-vp-knopf:focus-visible { outline: 2px solid var(--glx-v-akzent); outline-offset: 1px; }
.glx-vp-knopf svg { width: 20px; height: 20px; fill: currentColor; }

.glx-vp-zeit {
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: #e8ebf0;
	margin: 0 4px;
	white-space: nowrap;
}
.glx-vp-fueller { flex: 1 1 auto; }

.glx-vp-laut {
	width: 0;
	opacity: 0;
	transition: width .2s ease, opacity .2s ease;
	accent-color: var(--glx-v-akzent);
}
.glx-vp-tongruppe:hover .glx-vp-laut,
.glx-vp-laut:focus-visible { width: 84px; opacity: 1; }
.glx-vp-tongruppe { display: flex; align-items: center; gap: 4px; }

/* Ladeanzeige, solange nichts kommt. */
.glx-vp-laedt {
	position: absolute;
	left: 50%; top: 50%;
	width: 54px; height: 54px;
	margin: -27px 0 0 -27px;
	border: 3px solid rgba(255,255,255,.25);
	border-top-color: var(--glx-v-akzent);
	border-radius: 50%;
	animation: glx-vp-dreh .8s linear infinite;
	z-index: 1;
}
@keyframes glx-vp-dreh { to { transform: rotate(360deg); } }

/* Wenn die Seite gescrollt ist und das Popup offen: Der Hintergrund darf
   nicht mitscrollen, sonst verliert man beim Schliessen seine Stelle. */
body.glx-vp-offen { overflow: hidden; }

@media (max-width: 640px) {
	.glx-vp { padding: 0; }
	.glx-vp-buehne { border-radius: 0; width: 100%; }
	.glx-video-play { width: 58px; height: 58px; }
	.glx-video-play svg { width: 22px; height: 22px; }
}

/* Wer Bewegung abgestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
	.glx-video-oeffner,
	.glx-video-play,
	.glx-vp,
	.glx-vp-buehne,
	.glx-vp-zu { transition: none !important; }
	.glx-video-oeffner:hover { transform: none; }
	.glx-vp-laedt { animation-duration: 2s; }
}

/* Der Abspieler steht statt des Vorschaubilds in der Seite.
   Dieselben Seitenverhaeltnisse wie beim Bild - sonst springt das
   Seitenlayout, sobald das Video geladen ist. */
.glx-video-sofort {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: inherit;
	overflow: hidden;
}
.glx-video.is-4-3 .glx-video-sofort { aspect-ratio: 4 / 3; }
.glx-video.is-1-1 .glx-video-sofort { aspect-ratio: 1 / 1; }
.glx-video-sofort > iframe,
.glx-video-sofort > video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
}