/* ---------------------------------------------------------------------------
   Bilanzo Videoabspieler: Bedienleiste im Hausdesign.
   Fibonacci: 5 / 8 / 13 / 21 / 34 / 55. Ecken abgeschnitten (bilanzo-clipped.css
   setzt corner-shape:bevel auf jeden border-radius).

   Kontraste, gerechnet auf die DECKENDE Endfarbe, Deckkraft eingerechnet, und
   zwar im ungünstigsten Fall (weisses Bild unter der Leiste):
     Leiste  rgba(12,45,86,.88) über Weiss  -> #29466A
       weisse Schrift und Symbole                       9,64:1
       Cyan #7DE3F7 (Fortschritt, Fokus)                6,52:1
     Knopffläche rgba(255,255,255,.16) über Leiste -> #4B6482
       weisse Schrift                                   6,10:1
     Spur rgba(255,255,255,.22) über Leiste -> #586F8B
       Cyan #7DE3F7 als gefüllter Teil                  3,50:1  (Bedienteil, ab 3:1)
   Über einem schwarzen Bild sind alle Werte höher (14,77 / 9,99 / 5,01).
   Die Spur ist absichtlich heller als die Leiste, sonst ist die Rinne nicht zu sehen.

   UNTERTITEL: gerechnet gegen den WIRKLICH GEMESSENEN Bildinhalt, nicht gegen eine
   angenommene Farbe. Gemessen am 24.09.2026 mit ffmpeg signalstats im Band, in dem
   die Zeilen stehen (crop=1024:144:128:504, also die mittleren 80 Prozent der Breite
   zwischen 70 und 90 Prozent der Höhe), über alle neun Cue-Zeiten:

     Cue 1 bis 4 (Büroszene)      Bildmittel 89 bis 92, hellster Punkt 255
     Cue 5 bis 9 (ab Sekunde 26)  Bildmittel 217 bis 234, FLÄCHIG 234
     hellster Punkt im ganzen Band über den ganzen Spot: 255 (reines Weiss)

   Fünf der neun Zeilen stehen also auf einer fast weissen Fläche. Weisse Schrift
   ohne Hinterlegung wäre dort unlesbar, und genau das ist der Grund für den Kasten.

     Zeile rgba(12,45,86,.92), weisse Schrift:
       über Weiss 255 (der gemessene hellste Punkt)   10,90:1
       über der Fläche 234 (Cue 5 bis 9)              11,18:1
       über Schwarz                                   14,48:1
     Der Kasten selbst gegen das Bild: 10,90:1 über Weiss, 9,29:1 über 234. Über einem
     schwarzen Bild sind es nur 1,45:1, der Kasten ist dort also kaum zu sehen. Das ist
     kein Mangel: die Schrift steht dort bei 14,48:1, und darauf kommt es an.

     CC-Knopf eingeschaltet, Fläche rgba(125,227,247,.24) auf der Leiste:
       weisses Symbol darauf                           5,65:1
     Der Zustand hängt zusätzlich an einem Querstrich, nicht nur an der Farbe.
   --------------------------------------------------------------------------- */

.blz-vp {
  position: relative;
  /* Damit die Schriftgrösse der Untertitel an der BILDBREITE hängt und nicht an der
     Fensterbreite: im Vollbild ist beides dasselbe, in der Seite nicht. */
  container-type: inline-size;
  --blz-vp-leiste: rgba(12, 45, 86, .88);
  --blz-vp-ut: rgba(12, 45, 86, .92);
  --blz-vp-knopf: rgba(255, 255, 255, .16);
  --blz-vp-knopf-hover: rgba(255, 255, 255, .28);
  --blz-vp-spur: rgba(255, 255, 255, .22);
  --blz-vp-cyan: #7DE3F7;
}

.blz-vp video {
  display: block;
  width: 100%;
  height: auto;
}

/* Der alte Einzelknopf verschwindet, sobald die volle Leiste steht. Er bleibt im
   Dokument, damit nichts bricht, wenn dieses Skript einmal nicht laedt. */
.blz-vp .blz-tp-hero-video-btn { display: none; }

/* --------------------------------------------------------------- Bedienleiste */
/* Befund KAPUTT 3 von Boris, 24.09.2026: die Leiste hatte gemessen padding 0. Gewinner war
   .blz-tp-wrap * { margin:0; padding:0 } aus section-treuhand.php, gleiche Spezifitaet (0,1,0),
   nur spaeter im Dokument. Jede Regel, die Abstand setzt, traegt darum jetzt .blz-vp davor
   und steht damit bei (0,2,0). Die Fibonacci-Abstaende sind erst dadurch wirklich da. */
.blz-vp .blz-vp__leiste {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  background: var(--blz-vp-leiste);
  color: #FFFFFF;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  line-height: 21px;
}

.blz-vp .blz-vp__knopf {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: var(--blz-vp-knopf);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s;
}
.blz-vp .blz-vp__knopf:hover { background: var(--blz-vp-knopf-hover); }
.blz-vp .blz-vp__knopf svg { width: 18px; height: 18px; fill: currentColor; }
.blz-vp .blz-vp__knopf:focus-visible {
  outline: 3px solid var(--blz-vp-cyan);
  outline-offset: 2px;
}
/* Befund HALBFERTIG 2 von Boris: der Ring an den Reglern war blau #2563EB aus
   bilanzo-kontrast.css Zeile 51 (body input[type=range]:focus-visible, also (0,2,2)) und
   lag ueber der Leiste bei 1,84:1, unter den geforderten 3:1. Mit der Leiste im Waehler
   steht diese Regel bei (0,3,1) und gewinnt; Cyan #7DE3F7 liegt bei 6,52:1. */
.blz-vp .blz-vp__leiste input.blz-vp__regler:focus-visible {
  outline: 3px solid var(--blz-vp-cyan);
  outline-offset: 2px;
}

.blz-vp .blz-vp__zeit {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: .02em;
  white-space: nowrap;
  color: #FFFFFF;
}

/* ------------------------------------------------------------------- Regler
   Ein echtes input[type=range]: damit ist der Abspieler ohne Zusatzarbeit mit
   der Tastatur bedienbar und der Screenreader liest Wert und Bereich vor. */
.blz-vp .blz-vp__regler {
  -webkit-appearance: none;
  appearance: none;
  height: 21px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.blz-vp .blz-vp__regler--zeit { flex: 1 1 auto; min-width: 55px; }
.blz-vp .blz-vp__regler--ton { flex: 0 0 55px; width: 55px; }

.blz-vp__regler::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--blz-vp-cyan) 0%, var(--blz-vp-cyan) var(--blz-vp-anteil, 0%), var(--blz-vp-spur) var(--blz-vp-anteil, 0%), var(--blz-vp-spur) 100%);
}
.blz-vp__regler::-moz-range-track {
  height: 5px;
  border-radius: 3px;
  background: var(--blz-vp-spur);
}
.blz-vp__regler::-moz-range-progress {
  height: 5px;
  border-radius: 3px;
  background: var(--blz-vp-cyan);
}
.blz-vp__regler::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -4px;
  border: 0;
  /* Kein 50-Prozent-Radius: die Hausregel corner-shape:bevel macht daraus eine Raute.
     3 px Radius ergibt mit derselben Regel eine saubere kleine Fase. */
  border-radius: 3px;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.blz-vp__regler::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 3px;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* -------------------------------------------------- Grosser Knopf in der Mitte */
.blz-vp__mitte {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.blz-vp__mitte[hidden] { display: none; }
.blz-vp .blz-vp__mitte span {
  width: 55px;
  height: 55px;
  border-radius: 8px;
  background: var(--blz-vp-leiste);
  color: #FFFFFF;
  display: grid;
  place-items: center;
}
.blz-vp .blz-vp__mitte svg { width: 21px; height: 21px; fill: currentColor; }
.blz-vp__mitte:focus-visible { outline: 3px solid var(--blz-vp-cyan); outline-offset: -3px; }

/* ----------------------------------------------------------------- Untertitel
   Gezeichnet wird selbst, nicht vom Browser. Die beiden Regeln hier sind nur der
   Gurt: sollte eine Spur je auf "showing" stehen, bleibt die Vorgabe des Browsers
   trotzdem unsichtbar und es steht nichts doppelt im Bild. */
.blz-vp video::-webkit-media-text-track-container { display: none; }
.blz-vp video::cue { opacity: 0; }

.blz-vp .blz-vp__ut-kasten {
  position: absolute;
  /* --blz-vp-unten ist die GEMESSENE Höhe der Bedienleiste (siehe abspieler.js).
     Der Wert dahinter gilt, solange noch nichts gemessen wurde. */
  bottom: calc(var(--blz-vp-unten, 50px) + 13px);
  left: 34px;
  right: 34px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Ein Klick soll den Film anhalten, nicht auf einem Untertitel hängen bleiben. */
  pointer-events: none;
  text-align: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* 13 px ist die Untergrenze: bei 400 Pixeln Bildbreite greift sie und die Zeile
     bleibt lesbar. Nach oben bis 34 px, damit das Vollbild nicht winzig schreibt. */
  font-size: clamp(13px, 2.6cqw, 34px);
  line-height: 1.34;
}
.blz-vp .blz-vp__ut-kasten[hidden] { display: none; }

.blz-vp .blz-vp__ut-zeile {
  margin: 0 0 5px;
  padding: 5px 13px;
  max-width: 100%;
  background: var(--blz-vp-ut);
  color: #FFFFFF;
  border-radius: 5px;
  font-weight: 500;
  /* Kein Schatten und kein Rand: die Fläche trägt den Kontrast, gerechnet im Kopf
     dieser Datei. Ein Schatten wäre Zierde und würde die Kante nur verwischen. */
  text-shadow: none;
}
.blz-vp .blz-vp__ut-zeile:last-child { margin-bottom: 0; }

/* Der CC-Knopf im eingeschalteten Zustand. Farbe UND Form, nie Farbe allein. */
.blz-vp .blz-vp__knopf--an {
  background: rgba(125, 227, 247, .24);
}
.blz-vp .blz-vp__knopf--an:hover { background: rgba(125, 227, 247, .34); }
/* Ausgeschaltet: ein Querstrich über dem Symbol. */
.blz-vp .blz-vp__ut { position: relative; }
.blz-vp .blz-vp__ut::after {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  top: 50%;
  height: 2px;
  background: #FFFFFF;
  transform: rotate(-21deg);
  border-radius: 1px;
}
.blz-vp .blz-vp__knopf--an::after { display: none; }

/* ------------------------------------------------------------------- Vollbild */
/* Befund UNSCHOEN 1 von Boris: im Vollbild blieben der 1-px-Rand und die 13-px-Fase der
   Figur stehen, die Bildschirmecken waren abgeschnitten. (0,2,0) schlaegt beide Quellen. */
.blz-vp:fullscreen {
  border: 0;
  clip-path: none;
  border-radius: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blz-vp:fullscreen video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Die Figur wird im Vollbild zum Flex-Container (siehe Regel darüber). Kasten und
   Leiste sind absolut gesetzt und bleiben davon unberührt; diese Zeile hält den
   Kasten nur davon ab, sich als Flex-Kind auf die Breite des Films zu ziehen. */
.blz-vp:fullscreen .blz-vp__ut-kasten { left: 55px; right: 55px; }

/* Hinweis zur Tastatur: nur fuer Screenreader, nicht im Bild. */
.blz-vp__nurlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------------------- Mobil */
@media (max-width: 480px) {
  .blz-vp .blz-vp__leiste { gap: 5px; padding: 5px 8px; }
  .blz-vp .blz-vp__knopf { flex-basis: 34px; width: 34px; height: 34px; }
  .blz-vp .blz-vp__regler--ton { display: none; }
  .blz-vp .blz-vp__regler--zeit { min-width: 21px; }
  .blz-vp .blz-vp__zeit { font-size: 13px; }
  .blz-vp .blz-vp__ut-kasten { left: 13px; right: 13px; bottom: calc(var(--blz-vp-unten, 44px) + 8px); }
  .blz-vp .blz-vp__ut-zeile { padding: 5px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .blz-vp .blz-vp__knopf { transition: none; }
}