/* player.css — Der Videoplayer. EIN Aussehen für jeden Einbauort.
 *
 * ALLES, WAS EIN PRESET EINSTELLT, IST EINE CSS-VARIABLE (vpFields()['css']).
 * Sie stehen auf der Preset-Klasse .ck-vp-<key>, die vpCss() über ckStyle() in
 * den <style>-Block des Kopfes schreibt — kein style-Attribut (Regel 3, CSP).
 * Die Rückfälle hier sind der Auslieferungszustand; wer sie ändert, ändert
 * nur, was ein Player OHNE Preset zeigt.
 *
 * DIE GRÖSSE KOMMT VON AUSSEN. Der Player füllt seine Zelle bzw. seine
 * Kachel; --vp-size ist die Knopfgröße, nicht die Playergröße. Das ist die
 * Vorgabe aus Videoplayer-Plan.txt: „Die letztliche Größe des Videos/Players
 * wird durch die Einbindung als Objekt auf den jeweiligen Seiten bestimmt."
 *
 * KEIN JavaScript ZEICHNET HIER ETWAS. player.js setzt Klassen (.is-play,
 * .is-mute, .is-full, .is-hidden) und zwei Custom Properties für den
 * Fortschritt; alles Sichtbare steht in dieser Datei. */

.vp {
  --vp-accent: var(--ci-1);
  --vp-ink:    var(--ci-white);
  --vp-bar:    var(--ci-black);
  --vp-barop:  55%;
  --vp-size:   34px;
  --vp-r:      6px;
  --vp-seekh:  4px;

  /* Fortschritt und Puffer als Anteil. player.js schreibt sie per
     setProperty() — CSSOM und damit CSP-konform (settings-ui.js macht es
     genauso). */
  --vp-pos: 0%;
  --vp-buf: 0%;

  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;                 /* Grid-/Flex-Kind, sonst sprengt es die Zelle */
  border-radius: var(--vp-r);
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

/* ── Bühne ─────────────────────────────────────────────────────────────── */
.vp__stage {
  position: relative;
  display: flex;
  width: 100%;
  background: #000;
}

.vp__v {
  display: block;
  width: 100%;
  height: auto;
  /* Der Player steht in einer Zelle beliebiger Höhe. object-fit: contain
     lässt das Bild vollständig, statt es zuzuschneiden — ein beschnittener
     Demofilm wäre das Gegenteil von dem, wofür der Player da ist. */
  object-fit: contain;
  background: #000;
}

/* Im Bildcontainer füllt der Player die Kachel: dort gibt das Raster die Höhe
   vor (--tile-ratio), und ein Video, das sie nicht ausfüllt, ließe schwarze
   Ränder in einer Kachel stehen, die neben Bildern liegt. */
.vp--tile,
.vp--tile .vp__stage { height: 100%; }
.vp--tile .vp__v { height: 100%; object-fit: cover; }

/* Untertitel: der Browser zeichnet sie selbst. Etwas Luft nach unten, damit
   sie nicht unter der Leiste liegen. */
.vp__v::cue { background: rgb(0 0 0 / 0.72); }
.vp--over .vp__v::-webkit-media-text-track-container { padding-bottom: 3em; }

/* ── Großer Abspielknopf ───────────────────────────────────────────────── */
.vp__big {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--vp-ink);
  cursor: pointer;
  /* Die Fläche ist der ganze Bühnenbereich — ein Klick irgendwohin startet.
     Sichtbar ist nur der Kreis in der Mitte. */
  padding: 0;
}
.vp__big::before {
  content: "";
  position: absolute;
  width:  calc(var(--vp-size) * 2);
  height: calc(var(--vp-size) * 2);
  border-radius: 50%;
  background: var(--vp-accent);
  opacity: 0.88;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.vp__big .vp__i {
  position: relative;
  width:  calc(var(--vp-size) * 0.85);
  height: calc(var(--vp-size) * 0.85);
  /* Der Keil sitzt optisch links, wenn er geometrisch mittig steht. */
  margin-left: calc(var(--vp-size) * 0.1);
}
.vp__big:hover::before { transform: scale(1.06); opacity: 1; }
.vp:not(.is-play) .vp__big { opacity: 1; }
.vp.is-play .vp__big { opacity: 0; pointer-events: none; }

/* ── Leiste ────────────────────────────────────────────────────────────── */
.vp__bar {
  display: flex;
  align-items: center;
  gap: calc(var(--vp-size) * 0.12);
  padding: calc(var(--vp-size) * 0.18) calc(var(--vp-size) * 0.28);
  color: var(--vp-ink);
  /* color-mix statt einer zweiten Variablen für „Farbe mit Deckkraft": der
     Token bleibt ein Token (Regel 2), die Deckkraft ist eine Zahl daneben. */
  background: color-mix(in srgb, var(--vp-bar) var(--vp-barop), transparent);
  min-width: 0;
}

/* Über dem Bild: die Leiste liegt in der unteren Kante und verdeckt nichts,
   solange sie ausgeblendet ist. */
.vp--over .vp__bar {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
}
.vp--over { display: block; }

/* Ausblenden während der Wiedergabe. Nur .vp--hide (Preset-Schalter) und nur
   über dem Bild — unter dem Bild würde ein Verschwinden das Layout springen
   lassen. */
.vp--hide.is-play.is-idle .vp__bar { opacity: 0; transform: translateY(100%); }
.vp--hide .vp__bar { transition: opacity 0.25s ease, transform 0.25s ease; }
.vp--hide.is-play.is-idle { cursor: none; }

@media (prefers-reduced-motion: reduce) {
  .vp--hide .vp__bar,
  .vp__big::before { transition: none; }
}

/* ── Knöpfe ────────────────────────────────────────────────────────────── */
.vp__btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width:  var(--vp-size);
  height: var(--vp-size);
  padding: 0;
  border: 0;
  border-radius: calc(var(--vp-r) * 0.7);
  background: none;
  color: inherit;
  cursor: pointer;
  line-height: 1;
}
.vp__btn:hover  { background: color-mix(in srgb, var(--vp-ink) 16%, transparent); }
.vp__btn:focus-visible,
.vp__range:focus-visible,
.vp__volr:focus-visible {
  outline: 2px solid var(--vp-accent);
  outline-offset: 2px;
}

.vp__i {
  width:  calc(var(--vp-size) * 0.5);
  height: calc(var(--vp-size) * 0.5);
  /* Beide Zustände liegen übereinander im selben Knopf; umgeschaltet wird per
     Klasse. Ein Icon-Nachbau im JavaScript entfiele sonst nicht (Regel 1). */
  grid-area: 1 / 1;
}

/* Zweiter Zustand: Pause, Ton aus, Vollbild verlassen. Sie stehen als zweites
   <svg> im Knopf und sind zunächst weg. */
.vp__btn > .vp__i:nth-child(2) { display: none; }
.vp.is-play  [data-vp-c="play"] > .vp__i:nth-child(1),
.vp.is-mute  [data-vp-c="mute"] > .vp__i:nth-child(1),
.vp.is-full  [data-vp-c="full"] > .vp__i:nth-child(1) { display: none; }
.vp.is-play  [data-vp-c="play"] > .vp__i:nth-child(2),
.vp.is-mute  [data-vp-c="mute"] > .vp__i:nth-child(2),
.vp.is-full  [data-vp-c="full"] > .vp__i:nth-child(2) { display: block; }

/* Textknöpfe (UT, HD/SD) — gleiche Höhe wie die Icon-Knöpfe, aber breiter. */
.vp__btn--txt {
  width: auto;
  min-width: var(--vp-size);
  padding-inline: calc(var(--vp-size) * 0.22);
  font: 600 calc(var(--vp-size) * 0.34) / 1 var(--font-2, inherit);
  letter-spacing: 0.04em;
}
/* Zustand „an": beim Untertitelknopf über aria-pressed (er schaltet etwas
   ein und aus), beim Qualitätsknopf über .is-lq (er schaltet zwischen zwei
   Fassungen um — da gibt es kein „aus"). */
.vp__btn--txt[aria-pressed="true"],
.vp__btn--txt.is-lq {
  background: var(--vp-accent);
  color: var(--ci-white);
}

/* ── Zeit ──────────────────────────────────────────────────────────────── */
.vp__time {
  flex: 0 0 auto;
  padding-inline: calc(var(--vp-size) * 0.16);
  font: 500 calc(var(--vp-size) * 0.33) / 1 var(--font-2, inherit);
  font-variant-numeric: tabular-nums;   /* sonst wackelt die Leiste im Sekundentakt */
  white-space: nowrap;
  opacity: 0.9;
}

/* ── Fortschritt ───────────────────────────────────────────────────────── */
.vp__seek {
  position: relative;
  flex: 1 1 auto;
  min-width: 40px;
  height: var(--vp-size);
  display: flex;
  align-items: center;
  margin-inline: calc(var(--vp-size) * 0.16);
}

.vp__track {
  position: relative;
  width: 100%;
  height: var(--vp-seekh);
  border-radius: 999px;
  background: color-mix(in srgb, var(--vp-ink) 26%, transparent);
  overflow: hidden;
}
.vp__buf,
.vp__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
}
.vp__buf  { width: var(--vp-buf); background: color-mix(in srgb, var(--vp-ink) 30%, transparent); }
.vp__fill { width: var(--vp-pos); background: var(--vp-accent); }

/* Der Griff. Er hängt am Fortschritt und braucht deshalb keine zweite Zahl. */
.vp__seek::after {
  content: "";
  position: absolute;
  left: var(--vp-pos);
  top: 50%;
  width:  calc(var(--vp-seekh) * 2.6);
  height: calc(var(--vp-seekh) * 2.6);
  margin-left: calc(var(--vp-seekh) * -1.3);
  border-radius: 50%;
  background: var(--vp-accent);
  transform: translateY(-50%) scale(0);
  transition: transform 0.15s ease;
  pointer-events: none;
}
.vp__seek:hover::after,
.vp__seek:focus-within::after { transform: translateY(-50%) scale(1); }

/* Das echte <input type=range> liegt unsichtbar darüber: es bringt Tastatur,
   Touch und Screenreader mit, ohne dass davon eine Zeile im JavaScript stünde.
   Gezeichnet wird die Spur darunter. */
.vp__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: none;
}
.vp__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--vp-size);
  height: var(--vp-size);
}
.vp__range::-moz-range-thumb { width: var(--vp-size); height: var(--vp-size); border: 0; }

/* ── Scrubbing-Vorschau ────────────────────────────────────────────────── */
/* Position: absolute genügt hier — .vp hat kein overflow: auto, sondern
   overflow: hidden mit einer Bühne darüber. Das Kästchen liegt INNERHALB des
   Players und wird deshalb bewusst nach oben aus der Leiste geschoben. */
.vp__scrub {
  position: absolute;
  bottom: calc(100% + 6px);
  left: var(--vp-scrub-x, 50%);
  transform: translateX(-50%);
  padding: 3px;
  border-radius: calc(var(--vp-r) * 0.8);
  background: color-mix(in srgb, var(--vp-bar) 88%, transparent);
  pointer-events: none;
  z-index: 3;
}
.vp__scrub[hidden] { display: none; }

.vp__scrubimg {
  display: block;
  width:  var(--vp-scrub-w, 160px);
  height: var(--vp-scrub-h, 90px);
  border-radius: calc(var(--vp-r) * 0.5);
  /* Bild und Kachelposition setzt player.js per setProperty(). */
  background-image: var(--vp-scrub-src);
  background-position: var(--vp-scrub-pos, 0 0);
  background-size: var(--vp-scrub-size, auto);
  background-repeat: no-repeat;
}
.vp__scrubt {
  display: block;
  padding-top: 2px;
  text-align: center;
  font: 500 11px / 1.4 var(--font-2, inherit);
  font-variant-numeric: tabular-nums;
  color: var(--vp-ink);
}

/* ── Lautstärke ────────────────────────────────────────────────────────── */
/* Der Regler klappt beim Überfahren des Ton-Knopfes auf. Auf Touchgeräten
   gibt es kein :hover — dort bleibt er weg, und der Ton-Knopf genügt
   (@media hover: none unten). */
.vp__vol {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  width: 0;
  overflow: hidden;
  transition: width 0.2s ease;
}
.vp__bar:hover .vp__vol,
.vp__vol:focus-within { width: calc(var(--vp-size) * 2.2); }

.vp__volr {
  width: calc(var(--vp-size) * 2);
  height: var(--vp-seekh);
  margin: 0 calc(var(--vp-size) * 0.1);
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background: linear-gradient(to right,
              var(--vp-accent) var(--vp-volpos, 100%),
              color-mix(in srgb, var(--vp-ink) 26%, transparent) var(--vp-volpos, 100%));
}
.vp__volr::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:  calc(var(--vp-seekh) * 2.6);
  height: calc(var(--vp-seekh) * 2.6);
  border-radius: 50%;
  background: var(--vp-ink);
  border: 0;
}
.vp__volr::-moz-range-thumb {
  width:  calc(var(--vp-seekh) * 2.6);
  height: calc(var(--vp-seekh) * 2.6);
  border-radius: 50%;
  background: var(--vp-ink);
  border: 0;
}

/* ── Bildunterschrift des Moduls ───────────────────────────────────────── */
.vp-cap {
  margin: 0.7em 0 0;
  opacity: 0.8;
}

/* ── Platzhalter im Adminmodus ─────────────────────────────────────────── */
.vp-empty {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border: 2px dashed color-mix(in srgb, var(--sec-fg) 35%, transparent);
  border-radius: 6px;
  color: var(--sec-fg);
  opacity: 0.65;
  font-size: 0.85em;
}

/* ── Mobil und Touch ───────────────────────────────────────────────────── */
/* 44 px ist die kleinste Fläche, die auf einem Handy zuverlässig getroffen
   wird. Ein Preset darf kleiner eingestellt sein — auf Touchgeräten wird
   trotzdem aufgerundet, statt eine unbedienbare Leiste auszuliefern. */
@media (hover: none) {
  .vp { --vp-size: max(44px, var(--vp-size)); }
  .vp__vol { display: none; }
  /* Ohne Maus gibt es kein Überfahren — die Vorschau beim Ziehen bliebe
     unter dem Daumen und wäre ohnehin verdeckt. */
  .vp__scrub { display: none; }
}

@media (max-width: 560px) {
  /* Auf schmalen Geräten hat die Leiste keinen Platz für alles. Was zuerst
     geht, ist die Zeitanzeige: sie steht redundant zur Fortschrittsleiste. */
  .vp__time { display: none; }
}