/* Miraki · Filmplayer (die Filme laufen über Vimeo, die Bedienung ist unsere)
   Schwarz wie ein Kinosaal. Der Film steht in einem schwarzen Rahmen, Titel und Bedienung liegen oben und unten
   auf Schwarz, nie auf dem Bild, auch im Vollbild. Im Vollbild blendet die Bedienung aus, solange der Film läuft
   und niemand die Maus bewegt; dann bleibt nur Schwarz um den Film.
   Runde Taste für Abspielen, eine feine Linie für die Zeit, der Punkt der Marke als Abspielkopf,
   oben rechts «Close» mit runder ×-Taste. */
.svp{--m:40px;--g:22px;position:fixed;inset:0;z-index:100;background:#0A0A0A;color:#fff;font-family:"Figtree","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}}
/* Wortmarke am Filmende (data-film-endmark, z. B. Miraki-Film ab 0:55): gross in der Mitte über dem Film, schärft sich wie die grossen Zeilen */
.svp .endwm{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);pointer-events:none;color:#fff;font-family:"Figtree","Helvetica Neue",Arial,sans-serif;font-weight:580;letter-spacing:-.035em;line-height:1;white-space:nowrap;font-size:min(11vw,19vh);opacity:0;filter:blur(16px);transition:opacity 1.6s cubic-bezier(.2,.8,.2,1),filter 1.6s cubic-bezier(.2,.8,.2,1)}
.svp .endwm .wmdot{display:inline-block;width:.181em;height:.181em;border-radius:50%;background:currentColor;margin-left:.07em;vertical-align:.544em}
.svp.end .endwm{opacity:1;filter:none}
@media (prefers-reduced-motion:reduce){.svp .endwm{transition:opacity .4s linear;filter:none}}