/* pxvideo 1.0.0 — Stile des Haus-Video-Spielers (js/pxvideo.js), marken-neutral. 23.10.2026. Herkunft: eyeris regal.css Block .sp*.
   Corporate Design NUR über Tokens (Rückfälle neutral): --pxv-akzent, --pxv-akzent-tief, --pxv-akzent-glanz, --pxv-dock, --pxv-text, --pxv-schrift,
   --pxv-radius, --pxv-radius-pille, --pxv-untertitel-grund, --pxv-fokus, --pxv-kurve. */
.pxv{position:relative;--pxv-dock-h:4.6rem;--pxv-rand:.9rem;overflow:hidden;border-radius:var(--pxv-radius,14px);background:#000;aspect-ratio:16/9;isolation:isolate}
.pxv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.pxv__start{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:.8rem;width:100%;padding:0;border:0;cursor:pointer;
  background:linear-gradient(to top,rgba(8,8,12,.55),rgba(8,8,12,.05) 55%);color:var(--pxv-text,#fff);font:600 1rem/1.2 var(--pxv-schrift,system-ui,sans-serif)}
.pxv__startknopf{position:relative;width:clamp(64px,8vw,88px);aspect-ratio:1;border-radius:50%;background:var(--pxv-akzent,#fff);
  box-shadow:0 0 0 8px color-mix(in srgb,var(--pxv-akzent,#fff) 22%,transparent),0 14px 40px rgba(0,0,0,.5);transition:transform .25s var(--pxv-kurve,cubic-bezier(.2,.8,.2,1)),background .2s}
.pxv__startknopf::after{content:"";position:absolute;left:55%;top:50%;translate:-50% -50%;border-block:clamp(11px,1.4vw,15px) solid transparent;border-left:clamp(18px,2.2vw,24px) solid #fff}
.pxv__start:hover .pxv__startknopf,.pxv__start:focus-visible .pxv__startknopf{transform:scale(1.07);background:var(--pxv-akzent-tief,var(--pxv-akzent,#ddd))}
.pxv__startwort{padding:.42rem .95rem;border-radius:var(--pxv-radius-pille,999px);background:rgba(8,8,12,.72);font-size:.95rem;letter-spacing:.01em}
.pxv__leiste{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:3.2rem var(--pxv-rand) var(--pxv-rand);background:linear-gradient(to top,rgba(8,8,12,.82),rgba(8,8,12,.35) 55%,transparent);transition:opacity .25s var(--pxv-kurve,ease),transform .25s var(--pxv-kurve,ease)}
.pxv__dock{display:flex;align-items:center;gap:.3rem;padding:.4rem .55rem;border:1px solid rgba(255,255,255,.12);border-radius:var(--pxv-radius-pille,999px);background:var(--pxv-dock,rgba(14,14,20,.8));box-shadow:0 10px 30px rgba(0,0,0,.45);color:var(--pxv-text,#fff);font-family:var(--pxv-schrift,system-ui,sans-serif)}
@supports (backdrop-filter:blur(10px)){.pxv__dock{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}}
.pxv--ruhig .pxv__leiste,.pxv:not(.pxv--gestartet) .pxv__leiste{opacity:0;transform:translateY(8px);pointer-events:none}
.pxv__knopf{display:inline-grid;place-items:center;flex:0 0 auto;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;transition:background .2s,transform .25s var(--pxv-kurve,ease)}
.pxv__knopf svg{width:26px;height:26px}
.pxv__knopf:hover{background:rgba(255,255,255,.14)}
.pxv__play{background:var(--pxv-akzent,#fff);color:var(--pxv-akzent-text,#0A0A0F);box-shadow:0 6px 18px color-mix(in srgb,var(--pxv-akzent,#fff) 35%,transparent)}
.pxv__play:hover{background:var(--pxv-akzent-tief,var(--pxv-akzent,#ddd));transform:scale(1.06)}
.pxv__play svg{width:28px;height:28px;margin-left:2px}.pxv__play[aria-pressed="true"] svg{margin-left:0}
.pxv__knopf:focus-visible,.pxv__lauf:focus-visible,.pxv__laut:focus-visible,.pxv__start:focus-visible,.pxv:focus-visible{outline:2px solid var(--pxv-fokus,#fff);outline-offset:3px}
.pxv__cc[aria-pressed="true"]{color:var(--pxv-akzent-glanz,var(--pxv-akzent,#fff));background:rgba(255,255,255,.1)}
.pxv__zeit{flex:0 0 auto;min-width:2.9em;font-size:.84rem;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.02em;text-align:center}
.pxv__lauf-huelle{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0;height:48px;margin:0 .2rem}
.pxv__lauf{position:relative;z-index:1;width:100%;height:48px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.pxv__lauf::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:rgba(255,255,255,.22)}
.pxv__lauf::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-5.5px;border-radius:50%;background:var(--pxv-akzent,#fff)}
.pxv__lauf::-moz-range-track{height:5px;border-radius:3px;background:rgba(255,255,255,.22)}
.pxv__lauf::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--pxv-akzent,#fff)}
.pxv__lauf-fuellung{position:absolute;left:0;top:50%;width:0;height:5px;margin-top:-2.5px;border-radius:3px;background:var(--pxv-akzent,#fff);pointer-events:none}
.pxv__laut{flex:0 0 auto;width:76px;height:48px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.pxv__laut::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:rgba(255,255,255,.35)}
.pxv__laut::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;margin-top:-5px;border-radius:50%;background:#fff}
.pxv__laut::-moz-range-track{height:3px;border-radius:2px;background:rgba(255,255,255,.35)}
.pxv__laut::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#fff}
.pxv__untertitel{position:absolute;left:50%;bottom:1rem;z-index:2;max-width:82%;transform:translateX(-50%);text-align:center;pointer-events:none;transition:bottom .25s var(--pxv-kurve,ease)}
.pxv--gestartet:not(.pxv--ruhig) .pxv__untertitel{bottom:calc(var(--pxv-dock-h) + var(--pxv-rand) + .4rem)}
.pxv__untertitel-text{display:inline-block;padding:.38em .9em;border-radius:12px;background:var(--pxv-untertitel-grund,rgba(8,8,12,.82));color:#fff;font-family:var(--pxv-schrift,system-ui,sans-serif);font-weight:500;font-size:clamp(1rem,1.9vw,1.35rem);line-height:1.35}
.pxv:fullscreen{width:100%;height:100%;border-radius:0}.pxv:fullscreen video{object-fit:contain}.pxv:fullscreen .pxv__untertitel-text{font-size:clamp(1.2rem,2.2vw,1.9rem)}
.pxv video::cue{color:#fff;background:rgba(8,8,12,.82)}
@media (hover:none),(max-width:599px){.pxv{--pxv-dock-h:4.1rem;--pxv-rand:.6rem}.pxv__laut,.pxv__zeit--gesamt{display:none}.pxv__knopf{width:44px;height:44px}.pxv__knopf svg{width:24px;height:24px}
  .pxv__lauf-huelle,.pxv__lauf{height:44px}.pxv__dock{padding:.3rem .4rem;gap:.15rem}.pxv__untertitel{max-width:92%}}
@media (prefers-reduced-motion:reduce){.pxv__leiste,.pxv__untertitel,.pxv__knopf,.pxv__startknopf{transition:none}}
