/* ================= Film ================= */
.film{position:relative;padding:clamp(90px,15vh,170px) clamp(14px,4vw,56px) 70px;overflow:hidden;isolation:isolate}
.film::before{content:"";position:absolute;left:50%;top:0;width:min(1300px,120%);height:100%;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%,rgba(124,92,255,.22),transparent 60%),radial-gradient(ellipse at 75% 70%,rgba(255,92,168,.16),transparent 55%)}
.film-head{text-align:center;margin-bottom:46px}
.film-head .section-title{margin-bottom:14px}
.film-sub{max-width:52ch;margin:0 auto;color:#cfd2e8;font-size:clamp(1rem,2vw,1.2rem)}
.film-grid{display:grid;grid-template-columns:repeat(2,minmax(0,360px));gap:clamp(24px,5vw,70px);justify-content:center;align-items:start}
.film-card{display:flex;flex-direction:column;align-items:center;text-align:center}
.phone{position:relative;width:100%;border-radius:40px;padding:11px;background:linear-gradient(160deg,#2a2c46,#0d0e1c);
  box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.16) inset,0 0 80px rgba(124,92,255,.22);transform:perspective(1200px) rotateY(var(--ry,0deg));transition:transform .6s var(--ease),box-shadow .4s}
.film-card:nth-child(1) .phone{--ry:5deg}.film-card:nth-child(2) .phone{--ry:-5deg}
.phone:hover{--ry:0deg;box-shadow:0 50px 120px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.2) inset,0 0 110px rgba(255,92,168,.32)}
.phone video{display:block;width:100%;aspect-ratio:9/16;height:auto;border-radius:30px;background:#05050b;object-fit:contain}
.play-big{position:absolute;left:50%;top:50%;z-index:2;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:#0b0c18;box-shadow:0 14px 50px rgba(0,0,0,.5),0 0 0 10px rgba(255,255,255,.18);transition:transform .3s var(--ease),opacity .3s}
.play-big::before{content:"";position:absolute;inset:-16px;border-radius:50%;border:2px solid rgba(255,255,255,.5);animation:ping 2.4s ease-out infinite}
.play-big:hover{transform:scale(1.1)}
.play-big svg{width:34px;height:34px;margin-left:4px}
.phone.playing .play-big,.monitor.playing .play-big{opacity:0;pointer-events:none}
.monitor.playing .badge-len{opacity:0}

/* Bildschirm 16:9 */
.cinema{padding-top:clamp(70px,12vh,130px);padding-bottom:110px}
.monitor-wrap{width:min(1040px,100%);margin:0 auto;display:flex;flex-direction:column;align-items:center}
.monitor{position:relative;width:100%;padding:14px 14px 22px;border-radius:22px 22px 14px 14px;background:linear-gradient(165deg,#2c2e4a,#0c0d1b);
  box-shadow:0 50px 120px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.14) inset,0 0 120px rgba(124,92,255,.25);transition:box-shadow .4s}
.monitor:hover{box-shadow:0 60px 140px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.2) inset,0 0 140px rgba(255,92,168,.32)}
.monitor::after{content:"";position:absolute;left:50%;bottom:7px;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:#3b3e63;box-shadow:0 0 6px rgba(124,92,255,.7)}
.monitor video{display:block;width:100%;aspect-ratio:16/9;height:auto;border-radius:10px;background:#05050b;object-fit:contain}
.monitor .badge-len{left:30px;top:30px;transform:none}
.monitor-neck{width:clamp(70px,12%,130px);height:clamp(36px,6vw,64px);background:linear-gradient(90deg,#14152a,#2c2e4a 45%,#14152a);clip-path:polygon(12% 0,88% 0,100% 100%,0 100%)}
.monitor-base{width:clamp(180px,34%,360px);height:14px;border-radius:99px;background:linear-gradient(180deg,#34365a,#101123);box-shadow:0 16px 40px rgba(0,0,0,.6)}
.film-actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:40px;text-align:center}
.film-actions small{color:var(--mute)}
.badge-len{position:absolute;left:50%;transform:translateX(-50%);top:22px;white-space:nowrap;z-index:2;padding:5px 12px;border-radius:99px;background:rgba(5,5,14,.62);backdrop-filter:blur(8px);font-weight:700;font-size:.82rem;border:1px solid rgba(255,255,255,.18)}
.phone.playing .badge-len{opacity:0}
.film-card h3{margin-top:24px;font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.film-card p{margin-top:6px;color:var(--mute);font-size:.95rem;max-width:30ch}
.film-card .btn{margin-top:16px}
.film-tip{max-width:820px;margin:54px auto 0;padding:24px clamp(18px,4vw,34px);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid var(--line);backdrop-filter:blur(10px)}
.film-tip h4{font-size:1.15rem;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.film-tip ol{margin:0 0 0 1.2em;color:#d9dbee;line-height:1.7}
.film-tip li::marker{color:var(--a2);font-weight:800}
.film-tip small{display:block;margin-top:12px;color:var(--mute)}
@media (max-width:820px){.film-grid{grid-template-columns:minmax(0,340px)}.phone{--ry:0deg!important}}