/* ==================================================================
   STODA · Trailer: Spieler, Kinosaal (Startseite), Trailer-Regal (/trailer)
   ================================================================== */
/* ---------- Spieler ---------- */
.tp{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;isolation:isolate;container-type:inline-size;outline:none;user-select:none;-webkit-user-select:none}
.tp-poster{position:absolute;inset:0;transition:opacity .6s,transform 1.2s var(--soft)}
.tp-poster::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.55))}
.tp.started .tp-poster{opacity:0;pointer-events:none}
.tp video,.tp iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;display:block}
.tp video{cursor:pointer}
.tp-big{position:absolute;left:50%;top:50%;z-index:4;width:clamp(56px,11cqw,88px);height:clamp(56px,11cqw,88px);transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(255,210,156,.7);background:radial-gradient(circle at 40% 35%,#f0a25a,#b4521f);color:#1a0f08;display:grid;place-items:center;cursor:pointer;animation:tpPulse 2.6s ease-out infinite;transition:opacity .35s,transform .5s var(--soft)}
.tp-big svg{width:38%;height:38%;margin-left:8%;fill:currentColor}
.tp-big:hover{transform:translate(-50%,-50%) scale(1.08)}
@keyframes tpPulse{0%{box-shadow:0 0 0 0 rgba(227,139,61,.55),0 10px 30px rgba(0,0,0,.5)}70%,100%{box-shadow:0 0 0 22px rgba(227,139,61,0),0 10px 30px rgba(0,0,0,.5)}}
.tp.playing .tp-big,.tp.yt-on .tp-big{opacity:0;transform:translate(-50%,-50%) scale(1.35);pointer-events:none}
.tp.started:not(.playing):not(.yt-on) .tp-big{opacity:.92;transform:translate(-50%,-50%) scale(.8)}
.tp-soon{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;padding:16px;color:var(--dim)}
.tp-soon b{font-family:var(--f-display);font-size:calc(clamp(1.4rem,4cqw,2.4rem) * var(--hs,1));color:var(--parchment);text-shadow:0 2px 16px rgba(0,0,0,.7)}
.tp-soon span:not(.tp-soon-i){font-size:clamp(.85rem,2cqw,1rem);max-width:44ch;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.tp-soon-i{width:44px;height:44px;border-radius:50%;border:1px dashed rgba(255,210,156,.6);animation:tpSpin 12s linear infinite}
@keyframes tpSpin{to{transform:rotate(360deg)}}
/* Steuerung */
.tp-ui{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:34px 12px 8px;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.4) 60%,transparent);transition:opacity .4s,transform .4s var(--soft)}
.tp.idle .tp-ui{opacity:0;transform:translateY(10px);pointer-events:none}
.tp.idle,.tp.idle video{cursor:none}
.tp-bar{position:relative;height:18px;cursor:pointer;touch-action:none}
.tp-bar::before{content:"";position:absolute;left:0;right:0;top:7px;height:4px;border-radius:4px;background:rgba(235,225,203,.22);transition:top .2s,height .2s}
.tp-buf{position:absolute;left:0;top:7px;height:4px;width:var(--b,0%);border-radius:4px;background:rgba(235,225,203,.25);transition:top .2s,height .2s}
.tp-fill{position:absolute;left:0;top:7px;height:4px;width:var(--p,0%);border-radius:4px;background:linear-gradient(90deg,var(--ember-deep),var(--ember),var(--ember-hot));box-shadow:0 0 10px rgba(227,139,61,.7);transition:top .2s,height .2s}
.tp-bar:hover::before,.tp-bar:hover .tp-fill,.tp-bar:hover .tp-buf,.tp-bar.drag::before,.tp-bar.drag .tp-fill,.tp-bar.drag .tp-buf{top:6px;height:6px}
.tp-knob{position:absolute;top:3px;left:var(--p,0%);width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--ember-hot);box-shadow:0 0 10px var(--ember);transform:scale(0);transition:transform .2s var(--soft)}
.tp-bar:hover .tp-knob,.tp-bar:focus-visible .tp-knob,.tp-bar.drag .tp-knob{transform:scale(1)}
.tp-hov{position:absolute;bottom:22px;left:0;transform:translateX(-50%);padding:.1rem .45rem;border-radius:4px;background:rgba(0,0,0,.85);font-family:var(--f-label);font-size:.68rem;letter-spacing:.06em;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s}
.tp-bar:hover .tp-hov,.tp-bar.drag .tp-hov{opacity:1}
.tp-row{display:flex;align-items:center;gap:2px;margin-top:2px}
.tp-btn{width:36px;height:36px;border:0;border-radius:var(--r-s);background:none;color:var(--parchment);display:grid;place-items:center;cursor:pointer;flex:none;transition:background .2s,color .2s}
.tp-btn:hover{background:rgba(235,225,203,.12)}
.tp-btn[aria-pressed="true"]{color:var(--ember-hot)}
.tp-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tp-btn svg.fill{fill:currentColor;stroke:none}
.tp-time{font-family:var(--f-label);font-size:.76rem;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--dim);padding:0 6px;white-space:nowrap;margin-right:auto}
.tp-vol{width:72px;accent-color:var(--ember);flex:none}
.tp-rate{width:auto;padding:0 8px;font-family:var(--f-label);font-size:.74rem;font-variant-numeric:tabular-nums}
.tp-flash{position:absolute;left:50%;top:50%;z-index:3;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center;opacity:0;pointer-events:none;color:var(--parchment)}
.tp-flash svg{width:28px;height:28px;fill:currentColor}
.tp-flash.go{animation:tpFlash .6s var(--soft)}
@keyframes tpFlash{0%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.4)}}
.tp video::cue{background:rgba(0,0,0,.65);color:#ebe1cb;font-family:"Alegreya",Georgia,serif}
@container (max-width:560px){.tp-vol,.tp-rate{display:none}}
@container (max-width:320px){.tp-ui{padding:20px 6px 4px}.tp-btn{width:30px;height:30px}.tp-cc{display:none}}
/* YouTube erst nach Zustimmung */
.tp-gate{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:12px;background:rgba(8,7,6,.62);backdrop-filter:blur(8px) saturate(.7);-webkit-backdrop-filter:blur(8px) saturate(.7);animation:gPop .35s var(--soft)}
.tp-card{width:min(500px,100%);max-height:100%;overflow:auto;display:grid;gap:10px;padding:clamp(14px,3cqw,24px);border:1px solid rgba(227,139,61,.45);border-radius:var(--r-l);background:rgba(22,16,11,.94);box-shadow:0 20px 40px rgba(0,0,0,.55)}
.tp-card h3{margin:0;font-family:var(--f-display);font-size:calc(clamp(1.2rem,3.4cqw,1.7rem) * var(--hs,1));line-height:1.05}
.tp-card p{margin:0;color:var(--dim);font-size:clamp(.82rem,2cqw,.94rem)}
.tp-card label{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--dim);cursor:pointer}
.tp-card input{accent-color:var(--ember);width:18px;height:18px;margin-top:.15em;flex:none}
.tp-card .row{display:flex;flex-wrap:wrap;gap:8px}
@container (max-width:460px){.tp-gate{position:absolute}.tp-card p{display:none}}

/* ---------- Kinosaal ---------- */
.band.bg-cine{--bg:radial-gradient(ellipse 60% 70% at 50% 60%,rgba(227,139,61,.1),transparent 70%),linear-gradient(180deg,#0c0f15,#120f0d)}
#trailer{transition:z-index 0s .9s}
body.cine-on #trailer{z-index:211;transition:none}
.cine-shade{position:absolute;inset:0;background:#020203;opacity:0;transition:opacity .9s var(--ease);pointer-events:none}
body.cine-on .cine-shade{opacity:.9}
.cine-dim{transition:opacity .9s var(--ease)}
body.cine-on .cine-dim{opacity:.12}
.cine{position:relative}
.cine-amb{position:absolute;inset:8% 6%;border-radius:40px;filter:blur(70px);opacity:0;background:var(--amb,#e38b3d);transition:background-color 1.4s,opacity 1s;pointer-events:none}
.cine.playing .cine-amb{opacity:.5}
.cine-frame{position:relative;z-index:1;border-radius:var(--r-l);overflow:clip;transition:box-shadow .8s}
body.cine-on .cine-frame{box-shadow:0 40px 90px rgba(0,0,0,.8)}
.cine-info{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin-top:16px;position:relative;z-index:1}
.cine-info .meta{font-family:var(--f-label);letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;color:var(--stone)}
.cine-r{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.lights{position:fixed;inset:0;z-index:210;background:#020203;opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility 0s .9s}
.lights.on{opacity:.9;visibility:visible;transition:opacity .9s var(--ease)}
body.cine-on .bote-l,body.cine-on .bote-peek{opacity:0;pointer-events:none}

/* ---------- Trailer-Regal ---------- */
.pls{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);border-radius:var(--r-l);overflow:clip;background:linear-gradient(180deg,rgba(28,22,17,.92),rgba(14,12,10,.95))}
.pls-main{min-width:0;border-right:1px solid rgba(227,139,61,.25)}
.pls-stage{position:relative}
.pls-meta{padding:16px 20px 20px;display:grid;gap:4px}
.pls-meta .meta{font-family:var(--f-label);letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;color:var(--stone)}
.pls-meta h2{margin:0;font-family:var(--f-display);font-size:calc(clamp(1.5rem,2.6vw,2rem) * var(--hs,1));line-height:1.05}
.pls-meta p{margin:0;color:var(--dim);font-size:.95rem}
.pls-meta.swap > *{animation:gPop .5s var(--soft) both;animation-delay:calc(var(--i,0) * 60ms)}
.pls-list{list-style:none;margin:0;padding:8px;display:grid;gap:6px;align-content:start;max-height:640px;overflow-y:auto}
.pls-item{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;width:100%;padding:8px;border:1px solid transparent;border-radius:var(--r-m);background:none;cursor:pointer;text-align:left;color:var(--dim);font:inherit;transition:background .25s,border-color .25s}
.pls-item:hover{background:rgba(227,139,61,.07)}
.pls-item[aria-current="true"]{background:rgba(227,139,61,.12);border-color:rgba(227,139,61,.45);color:var(--parchment)}
.pls-th{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:16/9;background:#000}
.pls-th .pic{position:absolute;inset:0}
.pls-th .dur{position:absolute;right:5px;bottom:5px;padding:0 .35rem;border-radius:3px;background:rgba(0,0,0,.8);font-family:var(--f-label);font-size:.62rem;letter-spacing:.06em;color:var(--parchment)}
.pls-th .seen{position:absolute;left:0;bottom:0;height:3px;width:var(--s,0%);background:var(--ember);box-shadow:0 0 6px var(--ember)}
.pls-th .now{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45);opacity:0;transition:opacity .3s}
.pls-item[aria-current="true"] .now{opacity:1}
.eq{display:flex;gap:3px;align-items:flex-end;height:18px}
.eq i{width:3px;background:var(--ember-hot);animation:eqB .9s ease-in-out infinite;height:40%}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}
.eq.paused i{animation-play-state:paused}
@keyframes eqB{50%{height:100%}}
.pls-item strong{display:block;font-weight:500;line-height:1.25;color:var(--parchment)}
.pls-item .meta{font-family:var(--f-label);letter-spacing:.1em;text-transform:uppercase;font-size:.62rem;color:var(--stone)}
.pls-next{position:absolute;inset:0;z-index:9;display:grid;place-items:center;align-content:center;gap:10px;padding:16px;text-align:center;background:rgba(6,5,4,.78);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.pls-next.on{opacity:1;visibility:visible;transition:opacity .4s}
.pls-next .meta{font-family:var(--f-label);letter-spacing:.14em;text-transform:uppercase;font-size:.66rem;color:var(--stone)}
.pls-next h4{margin:0;font-family:var(--f-display);font-size:calc(clamp(1.3rem,3vw,2rem) * var(--hs,1))}
.ring{position:relative;width:64px;height:64px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4}
.ring .bg{stroke:rgba(235,225,203,.15)}
.ring .fg{stroke:var(--ember);stroke-linecap:round;stroke-dasharray:163.4;stroke-dashoffset:163.4;filter:drop-shadow(0 0 4px var(--ember))}
.pls-next.on .ring .fg{animation:ringFill 5s linear forwards}
@keyframes ringFill{to{stroke-dashoffset:0}}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-size:calc(1.5rem * var(--hs,1))}
@media (max-width:900px){.pls{grid-template-columns:minmax(0,1fr)}.pls-main{border-right:0;border-bottom:1px solid rgba(227,139,61,.25)}.pls-list{max-height:none}}
@media (prefers-reduced-motion: reduce){.tp-big,.tp-soon-i,.eq i,.pls-next.on .ring .fg{animation:none!important}.lights,.cine-shade,.cine-dim,.cine-amb{transition:none!important}}