/* BOFF. · Filmplayer (übernommen von miraki, mk-player.css; Schrift Albert Sans, ohne Wortmarke am Filmende)
   Schwarz wie ein Kinosaal. Titel und Bedienung liegen oben und unten auf Schwarz, nie auf dem Bild.
   Runde Taste für Abspielen, eine feine Linie für die Zeit, oben rechts «Schliessen» mit runder ×-Taste. */
.svp{--m:40px;--g:22px;position:fixed;inset:0;z-index:100;background:#0A0A0A;color:#fff;font-family:"Albert Sans","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .45s cubic-bezier(.22,.61,.36,1),visibility 0s linear .45s}
.svp.open{opacity:1;visibility:visible;transition:opacity .45s cubic-bezier(.22,.61,.36,1),visibility 0s}

/* Bild: füllt den Raum zwischen den Leisten, der Film darin ganz sichtbar (contain) */
.svp .stage{order:1;position:relative;flex:1 1 auto;min-height:0;margin:0 var(--m);background:#0A0A0A}
.svp .stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0A0A0A;display:block}
.svp .stage .vimeo,.svp .stage .vimeo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.svp .stage .vimeo{background:#0A0A0A center/contain no-repeat}
.svp .stage .vimeo iframe{opacity:0}
.svp .stage .vimeo iframe{color-scheme:normal}   /* gleiches Farbschema wie Vimeo: sonst legt Chrome auf dunklen Seiten (color-scheme:dark) eine weisse Fläche hinter den Film */   /* Vimeos eigene Lade- oder Fehlerseite bleibt unsichtbar, bis der Film läuft */
.svp .stage .vimeo.on iframe{opacity:1}
/* fängt Klicks auf den Film ab (auch über dem Vimeo-iframe), damit sie unseren Player steuern */
.svp .hit{position:absolute;inset:0;z-index:2}

/* Leisten auf Schwarz */
.svp .bar{position:relative;inset:auto;z-index:3;display:flex;align-items:center;gap:20px;transition:opacity .5s ease}
.svp .top{order:0;padding:var(--m) var(--m) var(--g);justify-content:space-between;align-items:flex-start}
.svp .bot{order:2;padding:var(--g) var(--m) var(--m)}

/* Vollbild: gleicher Rahmen, die Bedienung blendet bei Ruhe aus (der Film bleibt, wo er ist) */
.svp.fs.idle .bar{opacity:0;pointer-events:none}
.svp.fs.idle{cursor:none}

.svp .ttl{display:grid;gap:4px;line-height:1.2;min-width:0}
.svp .ttl b{font-weight:400;font-size:20px;letter-spacing:-.01em}
.svp .ttl span{font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.svp button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
/* Kapsel mit runder Taste, auf Schwarz weiss */
.svp .cap{display:inline-flex;align-items:center;gap:12px;flex:none;background:#fff;color:#0A0A0A;border-radius:999px;padding:5px 5px 5px 18px;font-size:15px;line-height:1}
.svp .cap i{width:34px;height:34px;border-radius:50%;background:#0A0A0A;display:grid;place-items:center}
.svp .cap i svg{width:12px;height:12px}
.svp .cap i svg path{stroke:#fff;stroke-width:1.6;fill:none;stroke-linecap:round}
/* runde Abspieltaste */
.svp .key{width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.svp .key svg{width:14px;height:14px}
.svp .key svg path{fill:#0A0A0A}
/* Zeitlinie mit dem Punkt als Abspielkopf */
.svp .line{position:relative;flex:1;min-width:80px;height:28px;cursor:pointer;touch-action:none}
.svp .line i{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.28)}
.svp .line .done{right:auto;width:0;background:#fff}
.svp .line .dot{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff}
.svp .time{font-size:13.5px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.75);white-space:nowrap}
.svp .txt{font-size:13.5px;color:rgba(255,255,255,.6);white-space:nowrap}
.svp .txt:hover,.svp .txt[aria-pressed="true"]{color:#fff}
.svp .vers{display:flex;gap:14px}
.svp .vers:empty{display:none}
.svp :focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:999px}

/* Tablet und kleiner */
@media (max-width:900px){
  .svp{--m:24px;--g:18px}
  .svp .bar{gap:16px}
}
/* Handy hochkant: Zeitlinie über die ganze Breite, Bedienung darunter */
@media (max-width:640px){
  .svp{--m:20px;--g:16px}
  .svp .bot{flex-wrap:wrap;gap:12px 16px}
  .svp .line{flex-basis:100%;order:-1}
  .svp .ttl b{font-size:17px}
}
/* niedrige Fenster (Handy quer): Leisten schmal, damit der Film möglichst gross wird */
@media (max-height:520px){
  .svp{--m:10px;--g:8px}
  .svp .bar{gap:14px}
  .svp .key{width:34px;height:34px}
  .svp .key svg{width:11px;height:11px}
  .svp .cap{gap:10px;padding:2px 2px 2px 12px;font-size:13.5px}
  .svp .cap i{width:28px;height:28px}
  .svp .line{height:24px}
  .svp .ttl{grid-auto-flow:column;align-items:baseline;gap:12px}
  .svp .ttl b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.svp,.svp.open,.svp .bar{transition:none}}