/* Snapjam Motion-Film · 1600 × 900 Design-Leinwand, skaliert auf den Rahmen */
.film{position:relative;aspect-ratio:16/9;width:100%;border-radius:calc(var(--r-core,24px) - 2px);overflow:hidden;background:#F7F8FA;isolation:isolate;container-type:inline-size;user-select:none;-webkit-user-select:none}
.film-cv{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0;font-family:var(--font,"Geist",system-ui,sans-serif);color:#0D0E12}
.film-cv *{box-sizing:border-box}
.film-cv img{display:block;max-width:none}
.fl{position:absolute;will-change:transform,opacity}
.f-bg{inset:0;background:radial-gradient(70% 70% at 50% 45%,#fff 0%,#F2F3F5 70%)}
.f-blob{width:900px;height:900px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,74,43,.16),rgba(255,74,43,0));left:350px;top:0}

/* Szene 1 · Typo */
.f-t1{left:0;right:0;top:300px;text-align:center;font-size:124px;font-weight:600;letter-spacing:-.065em;line-height:1}
.f-t1 .w,.f-t2 .w{display:inline-block;margin:0 .12em;will-change:transform,opacity,filter}
.f-t2{left:0;right:0;top:450px;text-align:center;font-size:124px;font-weight:600;letter-spacing:-.065em;line-height:1;color:#9BA0AB}

/* Box */
.f-boothpos{left:670px;top:250px}
.f-booth{position:relative;width:260px;height:370px;border-radius:40px;background:linear-gradient(160deg,#fff 0%,#F5F6F8 50%,#E4E6EB 100%);box-shadow:inset 0 2px 0 #fff,inset 0 -14px 30px rgba(13,14,18,.05),0 0 0 1px rgba(13,14,18,.06),0 70px 110px -50px rgba(13,14,18,.55),0 24px 40px -30px rgba(13,14,18,.3)}
.f-booth .ring{position:absolute;left:130px;top:46px;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:radial-gradient(circle,transparent 44%,rgba(255,236,200,1) 49%,rgba(255,214,150,.55) 56%,rgba(255,214,150,0) 72%);mix-blend-mode:multiply;opacity:.25}
.f-booth .lens{position:absolute;left:130px;top:46px;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:radial-gradient(circle at 36% 34%,#5A6272 0,#16181E 42%,#000 72%);box-shadow:0 0 0 6px #1C1E25,0 0 0 12px #ECEEF2,0 0 0 13px rgba(13,14,18,.08)}
.f-booth .lens::after{content:"";position:absolute;left:12px;top:11px;width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.75)}
.f-booth .scr{position:absolute;left:26px;right:26px;top:98px;height:130px;border-radius:13px;background:#0D0E12;overflow:hidden;display:grid;place-items:center;box-shadow:inset 0 0 0 3px #23252C}
.f-booth .scr .cd{color:#fff;font-size:86px;font-weight:600;letter-spacing:-.06em;line-height:1}
.f-booth .scr .tap{display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;font-size:17px;font-weight:500}
.f-booth .scr .tap i{width:38px;height:38px;border-radius:50%;background:#FF4A2B;box-shadow:0 0 0 7px rgba(255,74,43,.25)}
.f-booth .scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.f-booth .slot{position:absolute;left:62px;right:62px;top:292px;height:9px;border-radius:9px;background:#1C1E25;box-shadow:inset 0 2px 3px rgba(0,0,0,.6),0 1px 0 #fff}
.f-booth .wm{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-weight:600;letter-spacing:-.05em;font-size:20px;color:#B7BBC5}
.f-booth .pw{position:absolute;left:75px;right:75px;top:297px;height:330px;overflow:hidden;z-index:2}
.f-booth .strip{background:#fff;padding:6px 6px 4px;border-radius:2px;box-shadow:0 18px 30px -16px rgba(13,14,18,.45);transform:translateY(-101%)}
.f-booth .strip img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:5px}
.f-booth .strip b{display:block;text-align:center;font-size:10px;letter-spacing:-.02em;padding:2px 0}

/* Callouts */
.f-call{display:flex;align-items:center;gap:14px;font-size:22px;font-weight:500;letter-spacing:-.025em;white-space:nowrap}
.f-call i{position:relative;display:block;height:2px;width:150px;background:linear-gradient(90deg,rgba(13,14,18,.5),rgba(13,14,18,.15));transform-origin:left}
.f-call i::before{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#0D0E12;margin:-4px 0 0 -5px;box-shadow:0 0 0 5px rgba(13,14,18,.08)}
.f-call span{background:#fff;padding:10px 18px;border-radius:999px;box-shadow:0 0 0 1px rgba(13,14,18,.06),0 14px 30px -18px rgba(13,14,18,.35)}

/* Captions links */
.f-cap{left:110px;top:330px;width:500px}
.f-cap .e{display:block;font-family:var(--mono,"Geist Mono",monospace);font-size:17px;letter-spacing:.16em;text-transform:uppercase;color:#FF4A2B;margin-bottom:20px}
.f-cap b{display:block;font-size:72px;line-height:.98;letter-spacing:-.06em;font-weight:600}
.f-big{left:0;right:0;top:40px;text-align:center;font-size:820px;font-weight:700;letter-spacing:-.08em;line-height:.9;color:rgba(13,14,18,.06)}
.f-flash{inset:0;background:#fff;opacity:0;z-index:20}

/* Galerie-Mosaik */
.f-mos{left:-40px;top:0;width:1680px;height:900px;display:flex;gap:22px;justify-content:center}
.f-mos .col{display:flex;flex-direction:column;gap:22px;will-change:transform}
.f-mos img{width:380px;height:380px;object-fit:cover;border-radius:34px;box-shadow:0 30px 60px -36px rgba(13,14,18,.5)}
.f-mcard{left:50%;top:50%;width:760px;margin-left:-380px;margin-top:-120px;padding:46px 50px;border-radius:44px;background:rgba(255,255,255,.82);backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);box-shadow:0 0 0 1px rgba(255,255,255,.7),0 40px 90px -40px rgba(13,14,18,.5);text-align:center;z-index:5}
.f-mcard b{display:block;font-size:66px;letter-spacing:-.06em;line-height:1;font-weight:600}
.f-mcard span{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:12px 22px;border-radius:999px;background:#0D0E12;color:#fff;font-size:20px;font-weight:500}

/* Anlässe */
.f-for{left:110px;top:270px;font-size:118px;font-weight:600;letter-spacing:-.07em;line-height:1}
.f-slot{left:110px;top:392px;height:150px;width:840px;overflow:hidden}
.f-slot div{position:absolute;left:0;top:0;font-size:118px;font-weight:600;letter-spacing:-.07em;line-height:1.15;color:#FF4A2B;white-space:nowrap;will-change:transform}
.f-pic{left:990px;top:150px;width:500px;height:600px;border-radius:48px;overflow:hidden;box-shadow:0 50px 100px -50px rgba(13,14,18,.6);background:#E4E6EB}
.f-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0)}
.f-price{left:110px;top:590px;display:flex;align-items:center;gap:14px;font-size:30px;font-weight:500;letter-spacing:-.03em;color:#5C6170}
.f-price b{color:#0D0E12;font-weight:600}

/* Endkarte */
.f-mark{left:740px;top:170px;width:120px;height:120px;border-radius:34px;background:#0D0E12;display:grid;place-items:center;box-shadow:0 30px 60px -30px rgba(13,14,18,.6)}
.f-mark::after{content:"";position:absolute;top:22px;right:22px;width:16px;height:16px;border-radius:50%;background:#FF4A2B}
.f-end{left:0;right:0;top:340px;text-align:center;font-size:150px;font-weight:600;letter-spacing:-.07em;line-height:1}
.f-end .w{display:inline-block;margin:0 .1em}
.f-end .acc{color:#FF4A2B}
.f-sub{left:0;right:0;top:530px;text-align:center;font-size:30px;color:#5C6170;letter-spacing:-.02em}
.f-cta{left:50%;top:620px;display:flex;align-items:center;gap:16px;padding:12px 12px 12px 34px;border-radius:999px;background:#FF4A2B;color:#fff;font-size:28px;font-weight:500;white-space:nowrap}
.f-cta i{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center}
.f-fade{inset:0;background:#F7F8FA;opacity:0;z-index:21}

/* Bedienleiste */
.film-ui{position:absolute;left:14px;right:14px;bottom:14px;z-index:30;display:flex;align-items:center;gap:12px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);box-shadow:0 0 0 1px rgba(13,14,18,.06),0 10px 30px -18px rgba(13,14,18,.4);font-family:var(--font,"Geist",system-ui,sans-serif);transition:opacity .25s cubic-bezier(.23,1,.32,1),transform .25s cubic-bezier(.23,1,.32,1)}
.film.playing:not(:hover):not(:focus-within) .film-ui{opacity:0;transform:translateY(8px)}
@media (hover:none){.film.playing .film-ui{opacity:1!important;transform:none!important}}
.film-ui button{width:38px;height:38px;flex-shrink:0;border-radius:50%;border:0;background:#0D0E12;color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.film-ui button:active{transform:scale(.92)}
.film-ui .lbl{font-family:var(--mono,"Geist Mono",monospace);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5C6170;min-width:88px}
.film-ui .trk{flex:1;height:22px;position:relative;cursor:pointer;touch-action:none}
.film-ui .trk::before{content:"";position:absolute;left:0;right:0;top:9px;height:4px;border-radius:4px;background:rgba(13,14,18,.1)}
.film-ui .trk .fillp{position:absolute;left:0;right:0;top:9px;height:4px;border-radius:4px;background:#0D0E12;transform-origin:left;transform:scaleX(0)}
.film-ui .trk .tick{position:absolute;top:7px;width:2px;height:8px;border-radius:2px;background:rgba(13,14,18,.25);margin-left:-1px}
.film-ui .tm{font-family:var(--mono,"Geist Mono",monospace);font-size:11px;color:#5C6170;font-variant-numeric:tabular-nums}
@container (max-width:520px){.film-ui .lbl{display:none}.film-ui{left:8px;right:8px;bottom:8px}}