/* Der Spieler ueber dem Erklaervideo (anleitung/player.js): Leiste wie
   bei YouTube — sichtbar, solange die Maus ueber dem Video ist; im
   Vollbild nur bei Bewegung; bleibt, solange das Video steht. Alle
   Klassen heissen spl-…, damit nichts aus der App dazwischenfunkt.     */
.spl-box{position:relative;outline:none;-webkit-tap-highlight-color:transparent;cursor:default}
.spl-box:focus-visible{box-shadow:0 0 0 3px rgba(73,139,255,.55)}
.spl-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#050607}
.spl-deck{position:absolute;inset:0;cursor:pointer}
.spl-mitte{all:unset;position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;opacity:0;transform:scale(.85);transition:opacity .18s,transform .18s;pointer-events:none}
.spl-mitte svg{width:44px;height:44px;margin-left:3px}
.spl-box.spl-pausiert .spl-mitte{opacity:1;transform:none;pointer-events:auto}
.spl-mitte:hover{background:rgba(0,0,0,.78)}
.spl{position:absolute;left:0;right:0;top:auto;bottom:0;width:auto;height:auto;margin:0;padding:34px 12px 4px;border-radius:0;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.3) 60%,transparent);display:flex;flex-direction:column;gap:0;opacity:0;transition:opacity .2s;font-family:"Geist",system-ui,-apple-system,sans-serif;color:#fff;-webkit-font-smoothing:antialiased;z-index:2}
/* Sichtbar bei Bewegung (2 s), beim Ziehen, solange das Video steht und
   bei Tastaturbedienung — nicht bloss, weil ein Knopf zuletzt geklickt
   wurde (Raphael: „wenn der Balken nicht nach 2 Sekunden verschwindet,
   stoert es beim Anschauen“).                                          */
.spl-box.spl-aktiv .spl,.spl-box.spl-pausiert .spl,.spl-box.spl-zieht .spl,.spl:has(:focus-visible){opacity:1}
.spl-box:not(.spl-aktiv):not(.spl-pausiert):not(.spl-zieht) .spl:not(:has(:focus-visible)){pointer-events:none}
.spl-box.spl-gross:not(.spl-aktiv):not(.spl-pausiert) .spl-deck{cursor:none}
.spl-bar{position:relative;height:16px;margin:0 2px;display:flex;align-items:center;cursor:pointer;touch-action:none;outline:none}
.spl-bar::before{content:"";position:absolute;left:0;right:0;height:3px;background:rgba(255,255,255,.3);transition:height .1s}
.spl-fill{position:absolute;left:0;height:3px;background:#3778F5;width:0;transition:height .1s;pointer-events:none}
.spl-knob{position:absolute;left:0;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:#3778F5;transform:scale(0);transition:transform .1s;pointer-events:none}
.spl-bar:hover::before,.spl-bar:hover .spl-fill,.spl-box.spl-zieht .spl-bar::before,.spl-box.spl-zieht .spl-fill{height:5px}
.spl-bar:hover .spl-knob,.spl-box.spl-zieht .spl-knob,.spl-bar:focus-visible .spl-knob{transform:scale(1)}
.spl-bar:focus-visible::before{box-shadow:0 0 0 2px rgba(73,139,255,.6)}
.spl-row{display:flex;align-items:center;gap:0;height:44px}
.spl button{all:unset;box-sizing:border-box;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;opacity:.92;transition:opacity .12s}
.spl button:hover{opacity:1}
.spl button:focus-visible{box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);border-radius:4px}
.spl button svg{width:26px;height:26px;display:block}
.spl-zeit{margin-left:6px;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap;color:#fff}
.spl-zeit span{color:rgba(255,255,255,.72)}
.spl .spl-voll{margin-left:auto}
.spl-box:fullscreen,.spl-box:-webkit-full-screen{aspect-ratio:auto;border-radius:0;box-shadow:none;margin:0;width:100%;height:100%;background:#050607}
/* Der Ersatz fuers Vollbild: der Rahmen fuellt als Popover die Seite. */
.spl-box.spl-ersatz{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;aspect-ratio:auto;border-radius:0;box-shadow:none;background:#050607;z-index:2147483000;display:block}
.spl-box.spl-ersatz:popover-open{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#050607;overflow:hidden}
.spl-ersatz-seite{overflow:hidden!important}
.spl-box.spl-gross .spl{padding:40px 20px 8px}
.spl-box.spl-gross .spl-bar{margin:0 6px}
@media (max-width:600px){.spl{padding:26px 6px 2px}.spl-row{height:40px}.spl button{width:40px;height:40px}.spl button svg{width:24px;height:24px}.spl-zeit{font-size:12px}}