/* ═ Masiar-Film: kompakte Videokarte mit Poster, Play-Knopf und Zeile darunter. Laedt erst beim Klick. ═ */
.mfilm{position:relative;border-radius:18px;overflow:hidden;background:#06141A;box-shadow:0 30px 70px -30px rgba(6,20,26,.55),0 0 0 1px rgba(255,255,255,.08);isolation:isolate}
.mfilm video{display:block;width:100%;aspect-ratio:16/9;background:#06141A;object-fit:cover}
.mfilm .mf-play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(6,20,26,.05),rgba(6,20,26,.55));border:0;cursor:pointer;color:#fff;font:inherit;padding:0;transition:background .25s}
.mfilm .mf-play:hover{background:linear-gradient(180deg,rgba(6,20,26,.1),rgba(6,20,26,.65))}
.mfilm .mf-play i{width:72px;height:72px;border-radius:50%;background:#29BFDE;display:grid;place-items:center;box-shadow:0 20px 50px -14px rgba(41,191,222,.9);transition:transform .25s}
.mfilm .mf-play:hover i{transform:scale(1.06)}
.mfilm .mf-play i::before{content:"";margin-left:5px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #06141A}
.mfilm .mf-play span{position:absolute;left:16px;bottom:14px;right:16px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:#fff;text-align:left}
.mfilm .mf-play span b{font-weight:700}
.mfilm .mf-play span em{font-style:normal;font-family:'DejaVu Sans Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8FE4F6;flex:none}
.mfilm.on .mf-play{display:none}
.mf-cap{margin-top:10px;font-size:13.5px;color:#55707C;line-height:1.5}
.mf-cap b{color:#06141A}
/* ═ Mitlaufen, andocken, ausfahren ═ */
.mf-ghost{display:block}
.mfilm.mf-float{position:fixed;right:20px;bottom:calc(20px + 100px);width:min(380px,calc(100vw - 32px));z-index:2147483000;border-radius:14px;box-shadow:0 30px 70px -20px rgba(6,20,26,.75),0 0 0 1px rgba(255,255,255,.14);animation:mfIn .35s cubic-bezier(.16,1,.3,1)}
@keyframes mfIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:640px){.mfilm.mf-float{right:12px;left:12px;bottom:104px;width:auto}}
.mfilm.mf-big{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1100px,94vw);max-height:92vh;z-index:2147483002;border-radius:18px;box-shadow:0 60px 120px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.14);animation:mfIn .3s cubic-bezier(.16,1,.3,1)}
.mfilm.mf-big video{max-height:92vh;object-fit:contain}
.mf-dim{position:fixed;inset:0;z-index:2147483001;background:rgba(3,10,14,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:mfDim .3s ease}
@keyframes mfDim{from{opacity:0}to{opacity:1}}
body.mf-lock{overflow:hidden}
.mf-bar{display:none;position:absolute;top:8px;right:8px;z-index:3;gap:6px}
.mfilm.on:hover .mf-bar,.mfilm.on:focus-within .mf-bar,.mfilm.mf-float .mf-bar,.mfilm.mf-big .mf-bar{display:flex}
.mf-bar button{width:34px;height:34px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(6,20,26,.72);color:#fff;cursor:pointer;display:grid;place-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:inherit;transition:background .2s,color .2s,border-color .2s}
.mf-bar button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mf-bar button:hover{background:#29BFDE;color:#06141A;border-color:#29BFDE}
.mfilm:not(.mf-float):not(.mf-big) .mf-x{display:none}
@media(prefers-reduced-motion:reduce){.mfilm.mf-float,.mfilm.mf-big,.mf-dim{animation:none}}