/* Kino-Player Fassung 3 (01.11.2026, Pause bleibt im Kino-Modus). Nie eine Kopie ändern, nur im Skill. Beim Abspielen liegt nichts mitten auf dem Film. Herkunft 42 Takes / ArmTri case.css v30. Farben je Webseite über die drei Variablen setzen. */
.kino-frame{--kino-accent:#FF6B45;--kino-on-accent:#0A2A2A;--kino-ink:#F3F3EE;position:relative;background:#000;aspect-ratio:16/9;overflow:hidden}
.kino-frame video{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000;object-fit:contain}
html.kp-lock{overflow:hidden}
.kp{position:absolute;inset:0;background:#000;overflow:hidden}
.kp video{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000;object-fit:contain}
.kp-play{position:absolute;left:50%;top:50%;width:clamp(76px,9vw,124px);aspect-ratio:1;transform:translate(-50%,-50%);border:0;border-radius:50%;background:var(--kino-accent);color:var(--kino-on-accent);cursor:pointer;display:grid;place-items:center;box-shadow:0 12px 44px rgba(0,0,0,.5);transition:transform .35s ease,background-color .3s ease}
.kp-play svg{width:40%;height:40%;margin-left:7%}
.kp-play:hover,.kp-play:focus-visible{transform:translate(-50%,-50%) scale(1.08);outline:none}
.kp-ui{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .25s ease}
.kp.on{position:fixed;inset:0;z-index:2147483000;cursor:none}
.kp.on video{background:transparent;object-fit:contain}
.kp.on .kp-play{display:none}
.kp.on.show{cursor:pointer}
.kp.on.show .kp-ui{opacity:1;pointer-events:auto}
.kp-pause{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--kino-ink);cursor:pointer;display:grid;place-items:center;padding:0}
.kp-pause svg{width:60%;height:60%}
.kp-pause:hover,.kp-pause:focus-visible{background:var(--kino-accent);color:var(--kino-on-accent);outline:none}
.kp-bar{position:absolute;left:clamp(12px,3vw,40px);right:clamp(12px,3vw,40px);bottom:calc(14px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:14px;padding:6px 18px 6px 8px;border-radius:999px;background:rgba(7,8,10,.82);cursor:default}
.kp-track{flex:1;height:22px;display:flex;align-items:center;cursor:pointer;touch-action:none;outline:none}
.kp-track i{display:block;position:relative;width:100%;height:3px;background:rgba(243,243,238,.28);overflow:hidden;transition:height .2s ease}
.kp-track:hover i,.kp-track:focus-visible i{height:6px}
.kp-track b{position:absolute;inset:0;background:var(--kino-accent);transform-origin:0 50%;transform:scaleX(0)}
.kp-time{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.08em;color:var(--kino-ink);min-width:7.5em;text-align:right;font-variant-numeric:tabular-nums}
.kp-close{display:none}
.kp.on .kp-close{display:block;opacity:0;pointer-events:none;transition:opacity .25s ease;position:absolute;top:calc(18px + env(safe-area-inset-top));right:clamp(14px,3vw,40px);z-index:5;border:0;border-radius:999px;padding:12px 18px;background:rgba(7,8,10,.72);color:var(--kino-ink);font-family:ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:.08em;cursor:pointer;box-shadow:inset 0 0 0 1.5px rgba(243,243,238,.5);}
.kp.on.show .kp-close{opacity:1;pointer-events:auto}
.kp.on .kp-close:hover,.kp.on .kp-close:focus-visible{background:var(--kino-accent);color:var(--kino-on-accent);box-shadow:none;outline:none}
@media (max-width:900px){.kp-time{min-width:0}}