/* Ein Player fuer beide Filme (05.10.2026, js/player.js). Einzige Quelle wie css/glas.css. Rot wie YouTube (E1 A): Play Knopf und
   Spur #FF0033, eigene Zeichnung. Bildschirm 1 der Startseite ist eine Haltestelle: keine Unschaerfe, keine weiten Schatten, der
   Verlauf unter der Leiste nur so hoch wie die Leiste. Seiten setzen hoechstens --sp-ecke (Rundung im Standard). Eine Schrift: alles
   erbt Schibsted Grotesk, Knoepfe mit font:inherit. */
.spieler{--sp-hl:58px;position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000000;color:#FFFFFF;
  border-radius:var(--sp-ecke,0);isolation:isolate;container-type:inline-size;font-size:14px;font-weight:500;line-height:1.2;text-align:left;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;outline:none}
.spieler.sp-ruht{cursor:pointer}
.spieler button{font:inherit;color:inherit}
.sp-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:#000000}
.sp-poster{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;object-fit:cover;transition:opacity .25s ease}
.spieler.sp-bild .sp-poster{opacity:0;pointer-events:none}

/* Untertitel wie die Vorschau heute: weiss auf dunklem Band je Zeile, Groesse mit der Breite des Players */
.sp-ut{position:absolute;left:5%;right:5%;bottom:6.5%;z-index:2;text-align:center;font-size:clamp(13px,3.3cqw,18px);font-weight:600;line-height:1.36;
  opacity:0;transition:opacity .15s ease,bottom .15s ease;pointer-events:none;text-wrap:balance}
.sp-ut span{padding:.1em .4em;background:rgba(8,8,8,.78);color:#FFFFFF;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sp-ut.sp-da{opacity:1}
.spieler.sp-zeigt .sp-ut{bottom:calc(var(--sp-hl) + 6px)}

/* Ruhe: Standbild, Play Knopf (E1 A), Dauer */
.sp-gross{position:absolute;left:50%;top:50%;z-index:3;width:68px;height:48px;margin:-24px 0 0 -34px;padding:0;border:0;background:none;cursor:pointer;
  transition:transform .15s ease,opacity .2s ease}
.sp-gross svg{display:block;width:100%;height:100%}
.sp-gross:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px;border-radius:14px}
.sp-dauer{position:absolute;right:10px;bottom:10px;z-index:3;padding:3px 6px;border-radius:5px;background:rgba(0,0,0,.8);color:#FFFFFF;font-size:12.5px;font-weight:600;
  line-height:1.2;font-variant-numeric:tabular-nums;pointer-events:none;transition:opacity .2s ease}
.spieler.sp-ton .sp-gross,.spieler.sp-vorschau .sp-gross{opacity:0;pointer-events:none}
.spieler.sp-ton .sp-dauer,.spieler.sp-vorschau .sp-dauer{opacity:0}

/* Leiste wie YouTube: Spur mit Kapitelluecken, darunter die Reihe der Knoepfe */
.sp-leiste{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:0 12px;box-sizing:border-box;
  background:linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.28) 60%,rgba(0,0,0,0) 100%);opacity:0;transition:opacity .25s ease;pointer-events:none}
.spieler.sp-zeigt .sp-leiste{opacity:1;pointer-events:auto}
.sp-spur{position:relative;height:18px;cursor:pointer;touch-action:none;outline:none}
.sp-segs{position:absolute;left:0;right:0;bottom:6px;display:flex;gap:2px;height:3px;transition:height .1s ease}
.sp-spur:hover .sp-segs,.spieler.sp-zieht .sp-segs{height:5px}
.sp-spur:focus-visible .sp-segs{outline:2px solid #FFFFFF;outline-offset:3px}
.sp-seg{position:relative;flex:1 1 0;min-width:0;height:100%;background:rgba(255,255,255,.22);overflow:hidden}
.sp-seg i{position:absolute;left:0;top:0;bottom:0;width:100%;transform-origin:0 50%;transform:scaleX(0)}
.sp-puf{background:rgba(255,255,255,.42)}
.sp-hov{background:rgba(255,255,255,.5)}
.sp-lauf{background:#FF0033}
.sp-knopf{position:absolute;left:0;bottom:1.5px;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:#FF0033;scale:0;transition:scale .1s ease;pointer-events:none}
.sp-spur:hover .sp-knopf,.spieler.sp-zieht .sp-knopf,.sp-spur:focus-visible .sp-knopf{scale:1}
.sp-tip{position:absolute;left:0;bottom:24px;transform:translateX(-50%);padding:4px 8px;border-radius:4px;background:rgba(28,28,28,.92);color:#FFFFFF;
  font-size:12.5px;font-weight:600;line-height:1.35;white-space:nowrap;text-align:center;opacity:0;pointer-events:none;transition:opacity .1s ease}
.sp-tip span{display:block;max-width:260px;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.sp-tip span:empty{display:none}
.sp-tip b{display:block;font-weight:600;font-variant-numeric:tabular-nums}
.sp-spur:hover .sp-tip,.spieler.sp-zieht .sp-tip{opacity:1}
.sp-reihe{display:flex;align-items:center;gap:2px;height:40px;padding-bottom:2px}
.sp-k{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:8px;
  background:none;color:#FFFFFF;cursor:pointer}
.sp-k svg{width:24px;height:24px;filter:drop-shadow(0 0 1px rgba(0,0,0,.6))}
.sp-k:focus-visible,.sp-kap:focus-visible{outline:2px solid #FFFFFF;outline-offset:-2px}
.sp-i-pause,.sp-i-wieder,.sp-i-leise,.sp-i-stumm,.sp-i-an{display:none}
.spieler.sp-ton:not(.sp-pause):not(.sp-ende) .sp-i-play{display:none}
.spieler.sp-ton:not(.sp-pause):not(.sp-ende) .sp-i-pause{display:block}
.spieler.sp-ende .sp-i-play{display:none}
.spieler.sp-ende .sp-i-wieder{display:block}
.spieler.sp-leise .sp-i-laut,.spieler.sp-stumm .sp-i-laut{display:none}
.spieler.sp-leise .sp-i-leise,.spieler.sp-stumm .sp-i-stumm{display:block}
.spieler.sp-kino .sp-kinok .sp-i-aus,.spieler.sp-max .sp-maxk .sp-i-aus{display:none}
.spieler.sp-kino .sp-kinok .sp-i-an,.spieler.sp-max .sp-maxk .sp-i-an{display:block}
.sp-tonbox{display:flex;align-items:center}
.sp-regler{position:relative;flex:none;width:0;height:40px;overflow:hidden;cursor:pointer;touch-action:none;outline:none;transition:width .15s ease,margin .15s ease}
.sp-tonbox:hover .sp-regler,.sp-regler:focus-visible,.spieler.sp-regelt .sp-regler{width:56px;margin:0 6px 0 2px}
.sp-regler::before{content:'';position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:rgba(255,255,255,.3)}
.sp-regler i{position:absolute;left:0;top:50%;width:100%;height:3px;margin-top:-1.5px;border-radius:2px;background:#FFFFFF;transform-origin:0 50%}
.sp-regler b{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#FFFFFF}
.sp-zeit{flex:0 1 auto;min-width:0;overflow:hidden;padding:0 8px;font-size:13.5px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 0 2px rgba(0,0,0,.5)}
.sp-kap{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;height:32px;padding:0 6px;border:0;border-radius:8px;background:none;color:#FFFFFF;
  font-size:13.5px;white-space:nowrap;cursor:pointer;text-shadow:0 0 2px rgba(0,0,0,.5)}
.sp-kap[hidden]{display:none}
.sp-kap::before{content:'·';margin-right:7px}
.sp-kap::after{content:'›';margin-left:7px;font-size:1.25em;line-height:1}
.sp-kap-n{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sp-luft{flex:1 1 0;min-width:4px}
.sp-cck .sp-strich{position:absolute;left:10px;right:10px;bottom:6px;height:2.5px;border-radius:2px;background:#FF0033;transform:scaleX(0);transition:transform .15s ease}
.spieler.sp-cc .sp-cck .sp-strich{transform:scaleX(1)}
.sp-kinok{display:none}
@media (min-width:701px){.sp-kinok{display:inline-flex}}

/* Kurzbeschriftung beim Zeigen nur mit Maus (am Handy bleibt nie ein Schild im Bild stehen) */
@media (hover:hover) and (pointer:fine){
  .spieler:not(.sp-finger) .sp-k::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);padding:5px 9px;
    border-radius:4px;background:rgba(28,28,28,.92);color:#FFFFFF;font-size:12.5px;font-weight:600;line-height:1.3;white-space:nowrap;opacity:0;
    transition:opacity .1s ease;pointer-events:none}
  .spieler:not(.sp-finger) .sp-k:hover::after{opacity:1}
  .sp-reihe>.sp-k:first-child::after{left:0;transform:none}
  .sp-reihe>.sp-k:last-child::after{left:auto;right:0;transform:none}
  .spieler:not(.sp-finger) .sp-zu::after{top:calc(100% + 8px);bottom:auto;left:0;right:auto;transform:none}
  .spieler.sp-menue-auf .sp-k::after{display:none}
  .spieler.sp-ruht:hover .sp-gross{transform:scale(1.06)}
}

/* Menue: Zahnrad (Untertitel, Tempo) und Kapitel */
.sp-menue{position:absolute;right:12px;bottom:calc(var(--sp-hl) + 4px);z-index:6;min-width:220px;max-width:calc(100% - 24px);max-height:calc(100% - var(--sp-hl) - 20px);
  overflow:auto;overscroll-behavior:contain;padding:6px 0;box-sizing:border-box;border-radius:12px;background:rgba(28,28,28,.94);color:#FFFFFF;font-size:14px}
.sp-menue[hidden]{display:none}
.sp-menue.sp-menue-kap{left:12px;right:auto;min-width:260px}
.sp-mz{padding:8px 14px}
.sp-mz>span{display:block;margin-bottom:7px;font-size:12.5px;opacity:.72}
.sp-wahl{display:flex;flex-wrap:wrap;gap:6px}
.sp-wahl button{min-width:44px;height:32px;padding:0 10px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:none;color:#FFFFFF;cursor:pointer;font-size:13.5px}
.sp-wahl button:hover{background:rgba(255,255,255,.14)}
.sp-wahl button[aria-pressed="true"]{background:#FFFFFF;border-color:#FFFFFF;color:#0A0A0A}
.sp-kz{display:flex;gap:12px;width:100%;padding:9px 14px;border:0;background:none;color:#FFFFFF;text-align:left;cursor:pointer;font-size:14px}
.sp-kz:hover,.sp-kz:focus-visible{background:rgba(255,255,255,.12);outline:none}
.sp-kz[aria-current="true"]{background:rgba(255,255,255,.18)}
.sp-kz b{flex:none;width:38px;font-weight:600;font-variant-numeric:tabular-nums;opacity:.75}

/* Mitte: am Handy Abspielen und Pause, am Ende ueberall das Wiederholen Zeichen */
.sp-mitte{position:absolute;left:50%;top:50%;z-index:5;display:none;align-items:center;justify-content:center;width:64px;height:64px;margin:-32px 0 0 -32px;
  padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.5);color:#FFFFFF;cursor:pointer}
.sp-mitte svg{width:36px;height:36px}
.spieler.sp-finger.sp-ton.sp-zeigt .sp-mitte,.spieler.sp-ende .sp-mitte{display:flex}
.spieler.sp-ende .sp-mitte{width:76px;height:76px;margin:-38px 0 0 -38px}
.spieler.sp-ende .sp-mitte svg{width:42px;height:42px}
.sp-mitte:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
.sp-warte{position:absolute;left:50%;top:50%;z-index:3;width:44px;height:44px;margin:-22px 0 0 -22px;box-sizing:border-box;border-radius:50%;
  border:3px solid rgba(255,255,255,.25);border-top-color:#FFFFFF;opacity:0;pointer-events:none;animation:sp-dreh .8s linear infinite paused}
.spieler.sp-warten .sp-warte{opacity:1;animation-play-state:running;transition:opacity .2s ease .4s}
@keyframes sp-dreh{to{transform:rotate(360deg)}}
.sp-sprung{position:absolute;top:50%;z-index:5;margin-top:-22px;padding:12px 16px;border-radius:24px;background:rgba(0,0,0,.5);color:#FFFFFF;font-size:15px;font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease}
.sp-sprung-l{left:10%}
.sp-sprung-r{right:10%}
.sp-sprung.sp-da,.sp-hinweis.sp-da{opacity:1}
.sp-hinweis{position:absolute;left:50%;top:9%;z-index:5;transform:translateX(-50%);padding:8px 14px;border-radius:8px;background:rgba(0,0,0,.6);color:#FFFFFF;
  font-size:14px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease}
/* Kreuz oben links in Kino und Max: kommt mit der Leiste, geht in der Ruhe, ein Klick zurueck in Standard (Unterseiten: Film zu) */
.sp-zu{position:absolute;top:12px;left:12px;z-index:6;display:none;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.5)}
.spieler.sp-kino .sp-zu,.spieler.sp-max .sp-zu{display:inline-flex;opacity:0;pointer-events:none;transition:opacity .25s ease}
.spieler.sp-kino.sp-zeigt .sp-zu,.spieler.sp-kino.sp-ruht .sp-zu,.spieler.sp-max.sp-zeigt .sp-zu,.spieler.sp-max.sp-ruht .sp-zu{opacity:1;pointer-events:auto}
.spieler.sp-ruhe,.spieler.sp-ruhe *{cursor:none}

/* Vorschau (nur Startseite): nur Bild, Untertitel und die duenne Spur an der Unterkante, wie heute; danach bleibt der Gesehen Balken */
.spieler.sp-vorschau .sp-leiste,.spieler.sp-gesehen .sp-leiste{opacity:1;padding:0;background:none}
.spieler.sp-vorschau .sp-reihe,.spieler.sp-gesehen .sp-reihe{display:none}
.spieler.sp-vorschau .sp-segs,.spieler.sp-gesehen .sp-segs{bottom:0}
.spieler.sp-vorschau .sp-spur{pointer-events:auto}
.spieler.sp-gesehen .sp-knopf,.spieler.sp-gesehen .sp-tip{display:none}

/* Kino (E3 a): ein Rahmen unter dem Kopf auf Schwarz, Kopf bleibt oben, die Seite dahinter steht */
.spieler-saal{position:fixed;inset:0;z-index:45;display:none;align-items:center;justify-content:center;box-sizing:border-box;padding-top:var(--sp-oben,0px);background:#000000}
html.spieler-kino .spieler-saal{display:flex}
.spieler-saal .spieler{flex:none;width:min(100vw,calc((100vh - var(--sp-oben,0px)) * 16 / 9));border-radius:0}
@supports (height:100dvh){.spieler-saal .spieler{width:min(100vw,calc((100dvh - var(--sp-oben,0px)) * 16 / 9))}}
.spieler-platz{display:block;width:100%;aspect-ratio:16/9;background:#000000;border-radius:var(--sp-ecke,0)}

/* Kino am Platz (Nutzer 08.10.2026: das Fenster nur erweitern, die Schrift bleibt zu sehen): wo die Seite --sp-kino:platz setzt,
   bleibt der Film in seiner Karte und waechst dort, ohne Schwarz, der Kopf wie in Standard (player.js setzt html.spieler-kino-platz).
   Startseite Bildschirm 1: Desktop Filmspalte 62 vw, nie hoeher als die Buehne, die Frage links kleiner und ganz im Bild; Handy
   randlos ueber die volle Breite, Kino Knopf auch am Finger */
.lp-b1 .lp-film .spieler{--sp-kino:platz}
.lp-b1 .lp-film .spieler .sp-kinok{display:inline-flex}
@media (min-width:701px){
  html.spieler-kino-platz .lp-b1 .beat-in{grid-template-columns:minmax(0,1fr) min(62vw,calc((100svh - var(--kopf) - 8.6svh - 18px) * 16 / 9 + 18px));
    column-gap:3.5vw;padding-right:2.5vw}
  html.spieler-kino-platz .lp-b1 .beat-in .lp-links .lp-frage{font-size:clamp(24px,3.4vw,64px)}
}
@media (max-width:700px){
  html.spieler-kino-platz .lp-b1 .beat-in .lp-film{margin:0 -16px;padding:0;border:0;border-radius:0;box-shadow:none;background:#000000;--sp-ecke:0px}
}

/* Max: Vollbild auf dem Player */
.spieler:fullscreen{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.spieler:-webkit-full-screen{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.spieler.sp-kino,.spieler.sp-max{--sp-hl:66px}
.spieler.sp-kino .sp-leiste,.spieler.sp-max .sp-leiste{padding:0 18px}
.spieler.sp-kino .sp-reihe,.spieler.sp-max .sp-reihe{height:48px}
.spieler.sp-kino .sp-k,.spieler.sp-max .sp-k{width:48px;height:48px}
.spieler.sp-kino .sp-k svg,.spieler.sp-max .sp-k svg{width:27px;height:27px}
.spieler.sp-kino .sp-zeit,.spieler.sp-max .sp-zeit,.spieler.sp-kino .sp-kap,.spieler.sp-max .sp-kap{font-size:15px}
.spieler.sp-kino .sp-ut,.spieler.sp-max .sp-ut{font-size:clamp(16px,2.3cqw,40px)}
.spieler.sp-kino .sp-cck .sp-strich,.spieler.sp-max .sp-cck .sp-strich{left:12px;right:12px;bottom:8px}
@media (max-width:700px){   /* Kino am Platz am Handy: Leiste wie in Standard, nur die Untertitel groesser */
  .spieler.sp-kino-platz{--sp-hl:58px}
  .spieler.sp-kino-platz .sp-leiste{padding:0 6px}
  .spieler.sp-kino-platz .sp-reihe{height:40px}
  .spieler.sp-kino-platz .sp-k{width:36px;height:40px}
  .spieler.sp-kino-platz .sp-k svg{width:24px;height:24px}
  .spieler.sp-kino-platz .sp-zeit,.spieler.sp-kino-platz .sp-kap{font-size:12.5px}
  .spieler.sp-kino-platz .sp-cck .sp-strich{left:10px;right:10px;bottom:6px}
}

/* Handy und Finger: groessere Spur, kein Regler (Lautstaerke hat das Geraet), kein Kino ausser am Platz (sonst ist Max das grosse Bild) */
.spieler.sp-finger .sp-regler,.spieler.sp-finger .sp-kinok{display:none}
.spieler.sp-finger .sp-spur{height:24px}
.spieler.sp-finger .sp-segs{bottom:9px}
.spieler.sp-finger.sp-vorschau .sp-segs,.spieler.sp-finger.sp-gesehen .sp-segs{bottom:0}
.spieler.sp-finger .sp-knopf{bottom:4.5px}
@container (max-width:560px){.sp-kap{display:none}}
@container (max-width:420px){
  .sp-leiste{padding:0 6px}
  .sp-k{width:36px}
  .sp-zeit{padding:0 4px;font-size:12.5px}
  .spieler.sp-finger .sp-tonbox{display:none}
}
@container (max-width:340px){.sp-strich,.sp-ganz{display:none}}
@media (prefers-reduced-motion:reduce){
  .sp-poster,.sp-ut,.sp-gross,.sp-dauer,.sp-leiste,.sp-segs,.sp-knopf,.sp-regler,.sp-sprung,.sp-hinweis,.sp-zu{transition:none}
}

/* Kino hell (Bahn T, 08.10.2026, SPIELER.neu({hell:true}) fuer die App Seiten): statt Rahmen auf Schwarz ein heller Schleier unter
   dem Kopf, der Film in der Glaskarte der Startseite (Material aus css/glas.css, Masse wie karte.css). Bis 700 px bleibt es beim
   Max, die Karte traegt dort keine Flaeche. Ohne Option entsteht weder Karte noch Klasse, alles bleibt wie bisher. */
.spieler-karte{display:contents}
@media (min-width:701px){
  .spieler-saal.spieler-saal-hell{background:rgba(250,250,250,.92);padding:calc(var(--sp-oben,0px) + 24px) 3vw 24px}
  .spieler-saal-hell .spieler-karte{display:block;flex:none;box-sizing:border-box;--sp-ecke:17px;padding:9px;border-radius:26px;
    width:min(94vw,calc((100vh - var(--sp-oben,0px) - 68px) * 16 / 9 + 20px));background:var(--glas-hell);
    border:1px solid var(--glas-rand-hell);box-shadow:var(--glas-kante-hell),var(--glas-kontur),var(--glas-wurf)}
  .spieler-saal-hell .spieler-karte .spieler{width:100%;border-radius:var(--sp-ecke)}
}
@supports (height:100dvh){@media (min-width:701px){
  .spieler-saal-hell .spieler-karte{width:min(94vw,calc((100dvh - var(--sp-oben,0px) - 68px) * 16 / 9 + 20px))}
}}