/* ersterkunde.de · eigener VSL-Player. Spielt HLS vom eigenen Server. */
.ekv{position:relative;aspect-ratio:16/9;width:100%;border-radius:22px;overflow:hidden;background:#0f0f0d;isolation:isolate;box-shadow:inset 0 0 0 1px #ffffff1f,0 30px 60px -28px #000000a6;-webkit-tap-highlight-color:transparent}
.ekv video,.ekv iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.ekv-start{position:absolute;inset:0;z-index:3;width:100%;height:100%;padding:0 clamp(12px,3cqw,20px) clamp(10px,2.6cqw,18px) 0;border:0;background:none;color:inherit;cursor:pointer;display:grid;place-items:end}
.ekv-start img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ekv-start::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 55%,#00000059)}
.ekv-play{position:relative;z-index:1;width:clamp(62px,12cqw,84px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#d9f26b;box-shadow:0 0 0 10px #d9f26b29,0 14px 44px #d9f26b59;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.ekv{container-type:inline-size}
.ekv-play svg{width:42%;height:42%;margin-left:6%;fill:#141412}
.ekv-start:hover .ekv-play{transform:scale(1.07)}.ekv-start:active .ekv-play{transform:scale(.96)}
.ekv-start:focus-visible .ekv-play{outline:3px solid #fff;outline-offset:4px}
.ekv-len{position:absolute;z-index:1;left:14px;bottom:12px;padding:5px 10px;border-radius:999px;background:#14141299;color:#fff;font:600 12px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.02em;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ekv-big{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .2s}
.ekv.pausiert .ekv-big{opacity:1}
.ekv-ui{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:26px 12px 10px;background:linear-gradient(180deg,#0000,#00000080);opacity:0;transition:opacity .25s}
.ekv.spielt.aktiv .ekv-ui,.ekv.pausiert .ekv-ui{opacity:1}
.ekv-ui button{flex:none;width:34px;height:34px;padding:7px;border:0;border-radius:50%;background:#ffffff26;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ekv-ui svg{display:block;width:100%;height:100%;fill:currentColor}
.ekv-seek{flex:1;min-width:0;height:22px;margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.ekv-seek::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,#d9f26b var(--p,0%),#ffffff4d var(--p,0%))}
.ekv-seek::-moz-range-track{height:4px;border-radius:2px;background:#ffffff4d}
.ekv-seek::-moz-range-progress{height:4px;border-radius:2px;background:#d9f26b}
.ekv-seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:#d9f26b}
.ekv-seek::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#d9f26b}
.ekv-zeit{flex:none;color:#fff;font:600 12px/1 "JetBrains Mono",ui-monospace,monospace}
@media (prefers-reduced-motion:reduce){.ekv-play,.ekv-big,.ekv-ui{transition:none}}
