/* =====================================================================
   Videoplayer (Paket S4, public/js/player.js). Wird nur mit funktionen.player geladen.
   Die Leiste liegt auf dem Video, daher feste helle Schrift auf dunklem Verlauf, unabhängig vom Design.
   Keine Inline-Stile nötig (CSP style-src 'self'), die Füllung der Regler kommt über --kp-fuellung.
   ===================================================================== */
.kp {
  container-type: inline-size;
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.kp .kp-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; cursor: pointer; }
.kp .kp-video:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.kp:fullscreen { width: 100vw; height: 100vh; }
.kp:-webkit-full-screen { width: 100vw; height: 100vh; }
.kp:fullscreen .kp-video { width: 100%; height: 100%; }
.kp:-webkit-full-screen .kp-video { width: 100%; height: 100%; }
/* Untertitel bleiben über der Leiste lesbar, solange sie sichtbar ist (Chrome, Safari, Edge, in Firefox nicht möglich) */
.kp .kp-video::-webkit-media-text-track-container { transition: transform 180ms ease; }
.kp:not(.kp-versteckt) .kp-video::-webkit-media-text-track-container { transform: translateY(calc(-1 * var(--kp-leiste-h, 84px))); }
.kp .kp-video::cue { font-size: max(0.875rem, 1.05em); line-height: 1.3; background: rgba(0, 0, 0, 0.72); color: #fff; }

.kp-leiste {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0));
  transition: opacity 180ms ease, visibility 180ms;
  font-size: 0.875rem;
  line-height: 1.2;
}
.kp-versteckt .kp-leiste { opacity: 0; visibility: hidden; pointer-events: none; }
.kp-versteckt .kp-video { cursor: none; }

.kp-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; }
.kp-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 3px; min-width: 0; }
.kp-rechts { justify-content: flex-end; }
.kp-zeit { font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 4px; }

.kp-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.kp-knopf:hover { background: rgba(255, 255, 255, 0.18); }
.kp-knopf[aria-pressed='true'] { background: rgba(255, 255, 255, 0.28); }
.kp-knopf[hidden], .kp-auswahl[hidden] { display: none; }
.kp-symbol { display: block; pointer-events: none; }

.kp .kp-auswahl {
  height: 36px;
  width: 100%;
  min-width: 0;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font: inherit;
  text-overflow: ellipsis;
  cursor: pointer;
}
/* Einstellungen: Fenster über der Leiste, scrollt, wenn der Player zu niedrig ist. Das Menü steht im DOM
   nach seinem Knopf in der Leiste (Tastatur, S4B), die Leiste ist daher der Bezug der Lage. Die Höhe des
   Players setzt player.js als --kp-hoehe. */
.kp-menue {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: calc(100% + 6px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(340px, calc(100% - 16px));
  max-height: calc(var(--kp-hoehe, 240px) - var(--kp-leiste-h, 84px) - 14px);
  overflow-y: auto;
  text-align: start;
  padding: 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.88);
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.25;
}
.kp-menue[hidden] { display: none; }
.kp-menueschalter { display: flex; flex-direction: column; gap: 6px; }
.kp-menuezeile { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; }
.kp-menuezeile[hidden] { display: none; }
/* Beschriftung so breit wie ihr längstes Wort, nie mitten im Wort umbrochen (Befund S7-6) */
.kp-menuename { overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* Schließen im Menü nur im schmalen Player, sonst schließt der Knopf Einstellungen */
.kp-menueschliessen { display: none; }
.kp .kp-haken { justify-self: start; width: 22px; height: 22px; margin: 0; accent-color: #fff; cursor: pointer; }
.kp-versteckt .kp-menue { display: none; }
.kp-knopf.kp-offen { background: rgba(255, 255, 255, 0.28); }
.kp-auswahl option { color: #111; background: #fff; }

.kp-knopf:focus-visible,
.kp-auswahl:focus-visible,
.kp-haken:focus-visible,
.kp-regler:focus-visible,
.kp-hinweisknopf:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #000;
}

/* Regler: Füllung bis zur Stelle, Griff groß genug für Finger */
.kp .kp-regler {
  -webkit-appearance: none;
  appearance: none;
  height: 24px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  --kp-fuellung: 0%;
}
.kp .kp-fortschritt { width: 100%; }
.kp .kp-lautstaerke { width: 84px; }
.kp-regler::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: linear-gradient(to right, #fff var(--kp-fuellung), rgba(255, 255, 255, 0.35) var(--kp-fuellung)); }
.kp-regler::-moz-range-track { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.35); }
.kp-regler::-moz-range-progress { height: 5px; border-radius: 3px; background: #fff; }
.kp-regler::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -5.5px; border-radius: 50%; border: 2px solid #000; background: #fff; }
.kp-regler::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #000; background: #fff; }

/* Hinweis oben links, bleibt auch bei ausgeblendeter Leiste sichtbar */
.kp-hinweis {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  width: fit-content;
  max-width: calc(100% - 16px);
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.3;
}
.kp-hinweis[hidden] { display: none; }
.kp-hinweisknopf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #fff;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.kp-hinweisknopf:hover { background: rgba(255, 255, 255, 0.2); }
.kp-hinweisknopf .kp-symbol { width: 18px; height: 18px; flex: none; }
.kp-hinweisknoepfe { display: flex; flex-wrap: wrap; gap: 6px 8px; }
/* Wahl beim erneuten Öffnen (S20A): Frage in eigener Zeile, darunter „Weiter ab m:ss“ als Hauptknopf und
   „Von vorn“. Bleibt bis zur Wahl oder zum Abspielen, auch bei ausgeblendeter Leiste. */
.kp-hinweis.kp-wahl { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px; background: rgba(0, 0, 0, 0.86); }
.kp-wahl .kp-hinweistext { font-weight: 600; }
.kp-hinweisknopf-haupt { background: #fff; color: #000; font-weight: 600; }
.kp-hinweisknopf-haupt:hover { background: rgba(255, 255, 255, 0.85); }

/* Ladeanzeige */
.kp-laedt::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 4px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: kp-dreh 0.9s linear infinite;
  pointer-events: none;
}
@keyframes kp-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .kp-laedt::after { animation: none; }
  .kp-leiste { transition: none; }
}

/* Schmale Player: Lautstärkeregler weg (das Gerät regelt den Ton), unter 380 Pixel auch Ton und Bild im Bild.
   Zuerst nach der Breite des Players, als Rückfall nach der Breite des Fensters. */
@container (max-width: 520px) {
  .kp .kp-lautstaerke { display: none; }
  .kp .kp-leiste { padding: 22px 6px 4px; }
}
@container (max-width: 380px) {
  .kp .kp-bild, .kp .kp-stumm { display: none; }
}
/* Schmale Player (Handy): Menü als Fläche über dem ganzen Video mit eigenem Schließen oben rechts.
   Geschwindigkeit, Qualität, Datensparmodus und Untertitel passen ohne Wischen (Befund S7-6). */
@container (max-width: 479.98px) {
  .kp .kp-menue {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: var(--kp-hoehe, 100%);
    max-height: none;
    justify-content: flex-start;
    justify-content: safe center;
    gap: 4px;
    padding: 6px 52px 6px 12px;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.96);
  }
  /* Die Schalter liegen unter dem Knopf Schließen und dürfen bis an den Rand, so passen beide in eine Zeile */
  .kp .kp-menueschalter { flex-direction: row; flex-wrap: wrap; gap: 4px 20px; margin-right: -40px; }
  .kp .kp-auswahl { height: 44px; }
  .kp .kp-haken { width: 28px; height: 28px; }
  .kp .kp-menueschliessen { display: inline-flex; position: absolute; top: 4px; right: 4px; }
}
/* Schmale Player (S20A): Die Wahl beim Weiterschauen liegt als Fläche über dem ganzen Video, die Leiste tritt
   zurück, bis jemand wählt. Ein kurzer Hinweis mit Knopf zeigt nur den Knopf, der Text bleibt für Screenreader.
   So überdeckt nichts den Fortschritt und die Knöpfe der Leiste. */
@container (max-width: 479.98px) {
  .kp .kp-hinweis.kp-wahl {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: auto;
    max-width: none;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    border-radius: 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.72);
  }
  .kp .kp-wahl .kp-hinweisknoepfe { justify-content: center; }
  .kp.kp-mit-wahl .kp-leiste { visibility: hidden; }
  .kp .kp-hinweis.kp-mit-knoepfen:not(.kp-wahl) { padding: 4px; }
  .kp .kp-hinweis.kp-mit-knoepfen:not(.kp-wahl) .kp-hinweistext {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (max-width: 560px) {
  .kp .kp-lautstaerke { display: none; }
  .kp .kp-leiste { padding: 22px 6px 4px; }
}
/* Touch: Ziele mindestens 44 Pixel */
@media (pointer: coarse) {
  .kp-knopf { width: 44px; height: 44px; }
  .kp .kp-auswahl { height: 44px; }
  .kp .kp-haken { width: 28px; height: 28px; }
  .kp .kp-regler { height: 32px; }
  .kp-regler::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7.5px; }
  .kp-regler::-moz-range-thumb { width: 16px; height: 16px; }
  .kp-hinweisknopf { min-height: 44px; }
}
@media (forced-colors: active) {
  .kp-knopf, .kp-auswahl { border: 1px solid ButtonText; }
}