/* FinanzPinguin Trailer-Player (24.10.2026). Selbst gehostet, keine Cookies. */
.fpv-trigger-link{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:8px 14px 8px 8px;border:0;border-radius:999px;background:transparent;color:var(--penguin-black,#1B1D21);font:inherit;font-weight:800;font-size:15px;cursor:pointer}
.fpv-trigger-link:hover{background:rgba(200,90,43,.08)}
.fpv-trigger-link .fpv-dot{width:36px;height:36px;border-radius:50%;background:var(--orange,#C85A2B);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 0 rgba(200,90,43,.45);animation:fpvPulse 2.4s ease-out 1.2s 3}
.fpv-trigger-link .fpv-dur{color:var(--soft-gray-text,#5B6270);font-weight:700}
@keyframes fpvPulse{0%{box-shadow:0 0 0 0 rgba(200,90,43,.45)}80%,100%{box-shadow:0 0 0 14px rgba(200,90,43,0)}}

.fpv-card-wrap{display:flex;justify-content:center;margin:0 auto 40px}
.fpv-card{position:relative;display:block;width:min(300px,72vw);border:0;padding:0;border-radius:22px;overflow:hidden;cursor:pointer;background:#0b0c0e;box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.12);transition:transform .25s ease,box-shadow .25s ease}
.fpv-card img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;display:block}
.fpv-card:hover{transform:translateY(-4px) scale(1.015);box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 2px var(--orange,#C85A2B)}
.fpv-card .fpv-play{position:absolute;left:50%;top:39%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--orange,#C85A2B);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:transform .2s ease}
.fpv-card:hover .fpv-play{transform:scale(1.08)}
.fpv-card .fpv-label{display:block;padding:12px 14px 14px;background:#15171A;color:#fff;font-weight:800;font-size:14px;text-align:center}
.fpv-card .fpv-label small{display:block;font-weight:700;color:rgba(255,255,255,.7);font-size:12px;margin-top:2px}

/* Overlay */
.fpv{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}
.fpv-bg{position:absolute;inset:0;background:#0b0c0e;opacity:0;transition:opacity .28s ease}
.fpv.is-in .fpv-bg{opacity:.94}
.fpv-bar{position:absolute;left:0;right:0;height:9vh;background:#000;transition:transform .42s cubic-bezier(.2,.8,.2,1) .12s;z-index:2}
.fpv-bar.top{top:0;transform:translateY(-100%)}
.fpv-bar.bot{bottom:0;transform:translateY(100%)}
.fpv.is-in .fpv-bar{transform:none}
.fpv.is-play .fpv-bar{transform:translateY(-100%);transition-delay:0s}
.fpv.is-play .fpv-bar.bot{transform:translateY(100%)}
.fpv-fx{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.fpv-stage{position:relative;z-index:3;height:min(88vh,880px);aspect-ratio:9/16;max-width:94vw;border-radius:18px;overflow:hidden;background:#000;opacity:0;transform:scale(.9);transition:opacity .3s ease,transform .4s cubic-bezier(.2,.8,.2,1);box-shadow:0 30px 90px rgba(0,0,0,.6)}
.fpv.is-play .fpv-stage{opacity:1;transform:none}
.fpv-stage video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.fpv-close{position:absolute;z-index:5;top:max(14px,env(safe-area-inset-top));right:14px;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer;opacity:0;transition:opacity .3s ease .2s}
.fpv.is-in .fpv-close{opacity:1}
.fpv-close:hover{background:rgba(255,255,255,.26)}
.fpv-end{position:absolute;inset:0;z-index:4;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;background:rgba(11,12,14,.86);text-align:center;color:#fff}
.fpv-end.show{display:flex;animation:fpvFade .35s ease}
.fpv-end img{width:72px;height:72px;border-radius:18px}
.fpv-end h3{margin:4px 0 0;font-size:22px;color:#fff}
.fpv-end p{margin:0;color:var(--orange,#C85A2B);font-weight:800}
.fpv-end .btn{min-width:230px}
.fpv-end .fpv-again{background:transparent;border:0;color:rgba(255,255,255,.75);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:8px}
@keyframes fpvFade{from{opacity:0}to{opacity:1}}

/* Übergang „Kino“: Balken + Scheinwerfer (Nic 24.10.) */
.fpv-fx .spot{position:absolute;left:50%;top:-10vh;width:120vh;height:130vh;margin-left:-60vh;background:conic-gradient(from 180deg at 50% 0%,transparent 160deg,rgba(255,244,214,.28) 172deg,rgba(255,244,214,.38) 180deg,rgba(255,244,214,.28) 188deg,transparent 200deg);opacity:0;transform:rotate(-14deg);transform-origin:50% 0;transition:opacity .3s ease .15s,transform .7s cubic-bezier(.2,.8,.2,1) .15s}
.fpv.is-in .fpv-fx .spot{opacity:1;transform:rotate(0)}
.fpv.is-play .fpv-fx .spot{opacity:.5}

@media (max-width:600px){
  .fpv-stage{height:100dvh;max-width:100vw;border-radius:0;aspect-ratio:auto;width:100vw}
  .fpv-bar{height:6vh}
}
@media (prefers-reduced-motion: reduce){
  .fpv-trigger-link .fpv-dot{animation:none}
  .fpv-fx{display:none}
  .fpv-bar{display:none}
  .fpv-stage{transform:none!important;transition:opacity .15s linear}
  .fpv-card,.fpv-card:hover{transform:none;transition:none}
}
