/* ============================================================================
   film — eigener Videoplayer im Hausstil
   ----------------------------------------------------------------------------
   Single Source of Truth. Quelle: Staging/_ui/film/film.css
   Ausgeliefert unter https://ui.1.ki/film/film.css

   Keine rohen Farbwerte. Alles kommt aus den Tokens von 1ki-theme.css, mit
   neutralen Rueckfallwerten, damit das Modul auch in einer Seite ohne Theme
   nicht auseinanderfaellt (Regel 3 aus UI-Module_Standard.md, Abschnitt 1).
   Der Akzent ist Petrol, im Theme --sky.

   Die drei Darstellungsstufen aus dem Modul a11y wirken automatisch mit, weil
   hier ausschliesslich Tokens verwendet werden. Ein eigener Zweig fuer
   "komfort" oder "strikt" ist deshalb nicht noetig; ergaenzt wird nur, was
   Tokens nicht abdecken (Bewegung, Groesse der Klickflaechen).

   Version: 1.0 (2026-08-14)
   ========================================================================= */

.film {
  --film-akzent: var(--sky, #44A8DE);
  --film-flaeche: var(--surface-1, #02182c);
  --film-linie: var(--line, rgba(255, 255, 255, 0.12));
  --film-text: var(--text-strong, #F2F8FC);
  --film-schrift: var(--font-sans, system-ui, sans-serif);
  --film-radius: var(--radius-lg, 16px);
  --film-leiste: 52px;

  position: relative;
  display: block;
  margin: 0;
  width: 100%;
  max-width: var(--measure-wide, 1120px);
  margin-inline: auto;
  background: var(--film-flaeche);
  border: 1px solid var(--film-linie);
  border-radius: var(--film-radius);
  overflow: hidden;
  box-shadow: var(--shadow, 0 14px 34px rgba(0, 0, 0, 0.5));
  font-family: var(--film-schrift);
  color: var(--film-text);
  isolation: isolate;
}

/* Buehne haelt das Seitenverhaeltnis, damit beim Laden nichts springt
   (Cumulative Layout Shift). Das Verhaeltnis setzt film.js aus den
   width/height-Attributen des <video>, hier steht nur der Rueckfall. */
.film-buehne {
  position: relative;
  aspect-ratio: var(--film-verhaeltnis, 16 / 9);
  background: #000;
  display: block;
}

.film-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Solange film.js nicht gelaufen ist, bleiben die Browser-Bedienelemente
   sichtbar. Erst wenn das Modul montiert hat, uebernimmt die eigene Leiste.
   Ohne JavaScript ist der Film damit vollstaendig bedienbar. */
.film[data-film-bereit] .film-video::-webkit-media-controls { display: none !important; }

/* ---------------------------------------------------------------------------
   Grosse Abspielflaeche ueber dem Posterbild
   ------------------------------------------------------------------------ */

.film-start {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: radial-gradient(60% 60% at 50% 50%,
              rgba(0, 16, 35, 0.15) 0%, rgba(0, 16, 35, 0.55) 100%);
  transition: background var(--t-base, 0.24s) ease, opacity var(--t-base, 0.24s) ease;
  z-index: 2;
}

.film-start:hover,
.film-start:focus-visible { background: rgba(0, 16, 35, 0.28); }

.film-start[hidden] { display: none; }

.film-start-ring {
  width: clamp(64px, 12vw, 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 16, 35, 0.55);
  border: 2px solid var(--film-akzent);
  backdrop-filter: blur(3px);
  transition: transform var(--t-base, 0.24s) ease,
              background var(--t-base, 0.24s) ease;
}

.film-start:hover .film-start-ring,
.film-start:focus-visible .film-start-ring {
  transform: scale(1.06);
  background: rgba(68, 168, 222, 0.22);
}

.film-start-ring svg {
  width: 44%;
  height: 44%;
  fill: var(--film-akzent);
  margin-left: 8%; /* optischer Ausgleich des Dreiecks */
}

.film-start-titel {
  position: absolute;
  left: var(--space-5, 24px);
  right: var(--space-5, 24px);
  bottom: var(--space-5, 24px);
  margin: 0;
  font-size: var(--fs-lg, 19px);
  font-weight: var(--fw-semibold, 600);
  line-height: var(--lh-tight, 1.22);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}

.film-start-dauer {
  display: block;
  margin-top: var(--space-1, 4px);
  font-size: var(--fs-sm, 14.5px);
  font-weight: var(--fw-normal, 400);
  color: var(--text-muted, #93A9BC);
}

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

.film-leiste {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-5, 24px) var(--space-3, 12px) var(--space-2, 8px);
  background: linear-gradient(to top, rgba(0, 8, 18, 0.88) 0%,
                                      rgba(0, 8, 18, 0.55) 55%,
                                      rgba(0, 8, 18, 0) 100%);
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--t-base, 0.24s) ease,
              transform var(--t-base, 0.24s) ease;
}

/* Waehrend der Wiedergabe blendet die Leiste nach kurzer Ruhe aus. Sobald
   ein Bedienelement den Tastaturfokus hat, bleibt sie stehen -- sonst waere
   sie fuer Tastaturnutzer unbenutzbar. */
.film[data-film-leiste="aus"] .film-leiste {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}
.film .film-leiste:focus-within {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

.film-knopf {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--film-text);
  cursor: pointer;
  transition: background var(--t-fast, 0.16s) ease,
              border-color var(--t-fast, 0.16s) ease;
}

.film-knopf:hover,
.film-knopf:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--film-linie);
}

.film-knopf svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.film-knopf svg.voll { fill: currentColor; stroke: none; }

.film-zeit {
  flex: 0 0 auto;
  font-size: var(--fs-xs, 12.5px);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #93A9BC);
  white-space: nowrap;
  padding-inline: var(--space-1, 4px);
}

/* --- Fortschritt --- */

.film-spur {
  flex: 1 1 auto;
  position: relative;
  height: 22px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
  border-radius: var(--radius-sm, 8px);
}

.film-spur-bahn {
  position: relative;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
  transition: height var(--t-fast, 0.16s) ease;
}

.film-spur:hover .film-spur-bahn,
.film-spur:focus-visible .film-spur-bahn { height: 8px; }

.film-spur-puffer,
.film-spur-fuell {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
}

.film-spur-puffer { background: rgba(255, 255, 255, 0.3); }
.film-spur-fuell { background: var(--film-akzent); }

.film-spur-griff {
  position: absolute;
  top: 50%;
  left: 0;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: 50%;
  background: var(--film-akzent);
  transform: translateY(-50%) scale(0);
  transition: transform var(--t-fast, 0.16s) ease;
  pointer-events: none;
}

.film-spur:hover .film-spur-griff,
.film-spur:focus-visible .film-spur-griff,
.film-spur[data-greift] .film-spur-griff { transform: translateY(-50%) scale(1); }

/* --- Lautstaerke --- */

.film-ton { display: flex; align-items: center; flex: 0 0 auto; }

.film-ton-regler {
  width: 0;
  opacity: 0;
  transition: width var(--t-base, 0.24s) ease, opacity var(--t-base, 0.24s) ease;
  accent-color: var(--film-akzent);
  margin: 0;
  cursor: pointer;
}

.film-ton:hover .film-ton-regler,
.film-ton:focus-within .film-ton-regler {
  width: 74px;
  opacity: 1;
  margin-inline: var(--space-2, 8px) var(--space-1, 4px);
}

/* Auf Zeigegeraeten ohne Hover (Touch) waere ein aufklappender Regler nicht
   erreichbar. Dort bleibt nur der Stummschalter -- die Lautstaerke regelt das
   Geraet selbst. */
@media (hover: none) {
  .film-ton-regler { display: none; }
}

/* ---------------------------------------------------------------------------
   Meldungen: Ende, Fehler, Laden
   ------------------------------------------------------------------------ */

.film-schluss {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-4, 16px);
  padding: var(--space-5, 24px);
  text-align: center;
  background: rgba(0, 16, 35, 0.82);
  backdrop-filter: blur(4px);
}

.film-schluss[hidden] { display: none; }

.film-schluss p {
  margin: 0;
  max-width: 40ch;
  font-size: var(--fs-base, 17px);
  color: var(--text, #DCE8F2);
}

.film-schluss-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
  justify-content: center;
}

.film-laedt {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.film-laedt[hidden] { display: none; }

.film-laedt span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: var(--film-akzent);
  animation: film-dreht 0.9s linear infinite;
}

@keyframes film-dreht { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   Bildunterschrift und Rueckfall ohne JavaScript
   ------------------------------------------------------------------------ */

.film-bildunterschrift {
  padding: var(--space-3, 12px) var(--space-4, 16px);
  margin: 0;
  font-size: var(--fs-sm, 14.5px);
  color: var(--text-muted, #93A9BC);
  border-top: 1px solid var(--film-linie);
}

.film-fallback {
  padding: var(--space-4, 16px);
  font-size: var(--fs-sm, 14.5px);
}

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

.film:fullscreen,
.film:-webkit-full-screen {
  max-width: none;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #000;
  display: grid;
  place-items: center;
}

.film:fullscreen .film-buehne,
.film:-webkit-full-screen .film-buehne {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.film:fullscreen .film-bildunterschrift,
.film:-webkit-full-screen .film-bildunterschrift { display: none; }

/* ---------------------------------------------------------------------------
   Schmale Geraete
   ------------------------------------------------------------------------ */

@media (max-width: 520px) {
  .film { border-radius: var(--radius, 12px); }
  .film-leiste { padding-inline: var(--space-2, 8px); gap: var(--space-1, 4px); }
  .film-knopf { width: 38px; height: 38px; }
  .film-zeit { font-size: 11.5px; }
  .film-start-titel { font-size: var(--fs-base, 17px); }
  /* Bild-in-Bild auf kleinen Geraeten weglassen: der Platz in der Leiste
     reicht nicht, und der Nutzen ist auf dem Telefon gering. */
  .film-knopf[data-film-pip] { display: none; }
}

/* ---------------------------------------------------------------------------
   Systemeinstellungen respektieren
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .film *,
  .film *::before,
  .film *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  /* Die Leiste blendet dann nicht mehr aus, sie bleibt einfach stehen. */
  .film[data-film-leiste="aus"] .film-leiste {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* Groessere Klickflaechen in den Zusatzstufen des Moduls a11y.
   Der Schalter dort setzt html[data-a11y] auf standard, komfort oder strikt. */
html[data-a11y="komfort"] .film-knopf,
html[data-a11y="strikt"] .film-knopf { width: 46px; height: 46px; }

html[data-a11y="komfort"] .film-leiste {
  background: linear-gradient(to top, rgba(0, 8, 18, 0.94) 0%,
                                      rgba(0, 8, 18, 0.7) 60%,
                                      rgba(0, 8, 18, 0) 100%);
}

html[data-a11y="strikt"] .film {
  box-shadow: none;
  border-width: 2px;
}
html[data-a11y="strikt"] .film-leiste {
  background: var(--surface-1, #02182c);
  border-top: 2px solid var(--film-linie);
}
html[data-a11y="strikt"] .film-start { background: rgba(0, 0, 0, 0.6); }
html[data-a11y="strikt"] .film-start-ring { backdrop-filter: none; }
html[data-a11y="strikt"] .film-schluss { backdrop-filter: none; background: var(--surface-0, #001023); }