/* Willkommens-Film (28.10.) */
.kpfm{--a:var(--acc,#7f7d4c);position:fixed;inset:0;z-index:400;display:grid;grid-template-rows:auto 1fr auto;padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(18px + env(safe-area-inset-bottom,0px));background:radial-gradient(120% 80% at 50% 30%,color-mix(in srgb,var(--a) 34%,#1c1a17),#141210 70%);color:#f6f1e8;font-family:var(--sans,system-ui,sans-serif);opacity:0;transition:opacity .35s;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.kpfm.in{opacity:1}
html.kpfm-on,html.kpfm-on body{overflow:hidden}
.kpfm-bar{display:flex;gap:5px;max-width:560px;width:100%;margin:0 auto}
.kpfm-bar i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.22);overflow:hidden}
.kpfm-bar b{display:block;height:100%;width:0;background:#fff;border-radius:2px}
.kpfm-bar i.done b{width:100%}
.kpfm-bar i.now b{animation:kpfmBar var(--t,3.6s) linear forwards}
.kpfm.paused .kpfm-bar i.now b{animation-play-state:paused}
@keyframes kpfmBar{to{width:100%}}
.kpfm-skip{position:absolute;z-index:3;right:14px;top:calc(26px + env(safe-area-inset-top,0px));padding:9px 14px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(0,0,0,.25);color:#fff;font:600 13px var(--sans,system-ui);cursor:pointer}
.kpfm-stage{position:relative;display:grid;place-items:center;min-height:0;cursor:pointer}
.kpfm-s{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:6px;text-align:center;padding:30px 4px 0;opacity:0;transform:translateY(-10px);transition:opacity .16s,transform .2s;pointer-events:none}
.kpfm-s.on{opacity:1;transform:none;transition:opacity .42s .18s,transform .55s .18s cubic-bezier(.2,.8,.2,1)}
.kpfm:focus{outline:none}
.kpfm-s svg{width:min(88vw,440px);height:auto;max-height:42vh;overflow:visible;margin-bottom:8px}
.kpfm-k{margin:0;font:700 12px var(--sans,system-ui);letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--a) 55%,#fff)}
.kpfm-s h2{margin:0;font:400 clamp(30px,8vw,52px)/1.05 var(--serif,Georgia,serif);max-width:16ch}
.kpfm-p{margin:4px 0 0;max-width:34ch;font-size:clamp(15.5px,4.2vw,18px);line-height:1.45;color:rgba(246,241,232,.82)}
.kpfm-nav{display:flex;justify-content:center;align-items:center;gap:10px}
.kpfm-nav button{min-width:46px;height:46px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:none;color:#fff;font:600 22px/1 var(--sans,system-ui);cursor:pointer}
.kpfm-nav .kpfm-go{min-width:170px;padding:0 22px;border:0;background:#fff;color:#1c1a17;font:700 15px var(--sans,system-ui)}
.kpfm.end .kpfm-go{background:var(--a);color:#fff;box-shadow:0 0 0 0 color-mix(in srgb,var(--a) 60%,transparent);animation:kpfmPulse 1.6s infinite}
@keyframes kpfmPulse{70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:0 0 0 0 transparent}}
.kpfm button:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Szenen-Grafik */
.kpfm svg *{vector-effect:non-scaling-stroke}
.kpfm .pop{fill:#efe8dc;stroke:#2a2622;stroke-width:1.2;opacity:0}
.kpfm .pop.top{fill:#c39a6b}.kpfm .pop.hood{fill:#9aa0a4}
.kpfm .spark{fill:#fff;opacity:0}
.kpfm-s.on .pop{animation:kpfmPop .5s cubic-bezier(.2,1.4,.4,1) var(--d,0s) both}
.kpfm-s.on .spark{animation:kpfmSpark 1.2s ease-out var(--d,0s) both}
@keyframes kpfmPop{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes kpfmSpark{0%{opacity:0;transform:scale(.3)}40%{opacity:1}100%{opacity:0;transform:scale(2.2)}}
.kpfm .draw{fill:none;stroke:#fff;stroke-width:2.4;stroke-dasharray:1;stroke-dashoffset:1}
.kpfm-s.on .draw{animation:kpfmDraw 1.1s ease-in-out .1s forwards}
@keyframes kpfmDraw{to{stroke-dashoffset:0}}
.kpfm .fillin{fill:color-mix(in srgb,var(--a) 70%,#fff);opacity:0}
.kpfm .win{fill:#9fd0f0;opacity:0}
.kpfm .dim{opacity:0;stroke:rgba(255,255,255,.7);fill:none;stroke-width:1.2}.kpfm .dim text{fill:#fff;stroke:none;font:600 13px var(--sans,system-ui);text-anchor:middle}
.kpfm-s.on .fillin,.kpfm-s.on .win,.kpfm-s.on .dim,.kpfm-s.on .ctr{animation:kpfmFade .5s ease-out var(--d,0s) both}
@keyframes kpfmFade{from{opacity:0}to{opacity:1}}
.kpfm .wall{stroke:rgba(255,255,255,.5);stroke-width:2}
.kpfm .ctr{fill:#c39a6b}
.kpfm .drop{fill:#efe8dc;stroke:#2a2622;stroke-width:1;opacity:0}
.kpfm-s.on .drop{animation:kpfmDrop .55s cubic-bezier(.2,1.3,.4,1) var(--d,0s) both}
@keyframes kpfmDrop{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
.kpfm-s.on .drop.up{animation-name:kpfmDropUp}
@keyframes kpfmDropUp{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:none}}
.kpfm .hand circle{fill:rgba(255,255,255,.9)}.kpfm .hand .ring{fill:none;stroke:#fff;stroke-width:2;opacity:.6}
.kpfm .hand{opacity:0;transform:translate(260px,210px)}
.kpfm-s.on .hand{animation:kpfmHand 2.6s ease-in-out .5s both}
@keyframes kpfmHand{0%{opacity:0;transform:translate(300px,215px)}15%{opacity:1;transform:translate(260px,205px)}55%{transform:translate(160px,160px)}70%{transform:translate(160px,160px)}100%{opacity:0;transform:translate(160px,160px)}}
.kpfm .tint{fill:#f1eee8;stroke:#2a2622;stroke-width:1}
.kpfm-s.on .tint{animation:kpfmTint 3.2s linear .2s forwards}
@keyframes kpfmTint{0%{fill:#f1eee8}25%{fill:#7f8e77}50%{fill:#e7a6bb}75%{fill:#22304a}100%{fill:#22304a}}
.kpfm-s.on .tint2{animation:kpfmTop 3.2s linear .2s forwards}
@keyframes kpfmTop{0%,40%{fill:#c39a6b}60%,100%{fill:#e7e4de}}
.kpfm .hdl{fill:#c9a24a;opacity:0}
.kpfm-s.on .hdl{animation:kpfmFade .4s ease-out var(--d,0s) both}
.kpfm .sw circle{stroke:#fff;stroke-width:2;transform-box:fill-box;transform-origin:center}
.kpfm-s.on .sw circle{animation:kpfmSw .6s ease-out var(--d,0s) both}
@keyframes kpfmSw{0%{transform:scale(1)}50%{transform:scale(1.45)}100%{transform:scale(1)}}
.kpfm .sheet{transform:translate(140px,110px)}
.kpfm .sheet rect{fill:#fff;stroke:#d8d0c3}.kpfm .sheet path{fill:none;stroke:#7d7366;stroke-width:1.4}.kpfm .sheet text{fill:#1c1a17;font:700 11px var(--sans,system-ui);text-anchor:middle}
.kpfm-s.on .sheet{animation:kpfmFan .8s cubic-bezier(.2,1.2,.4,1) var(--d,0s) both}
@keyframes kpfmFan{from{transform:translate(140px,150px) rotate(0) scale(.7);opacity:0}to{transform:translate(calc(140px + var(--x)),110px) rotate(var(--r));opacity:1}}
.kpfm .dl circle{fill:var(--a)}.kpfm .dl path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.kpfm-s.on .dl{animation:kpfmBob 1s ease-in-out 1s infinite}
@keyframes kpfmBob{50%{transform:translateY(6px)}}
.kpfm .trail{fill:none;stroke:rgba(255,255,255,.45);stroke-width:2;stroke-dasharray:.02 .03;stroke-dashoffset:1}
.kpfm-s.on .trail{animation:kpfmDraw 1.6s ease-in-out .2s forwards}
.kpfm .plane path{fill:#fff}
.kpfm .plane{offset-path:path("M40 170C110 60 190 200 250 92");offset-distance:0%;offset-rotate:auto;opacity:0}
.kpfm-s.on .plane{animation:kpfmFly 1.7s ease-in-out .2s forwards}
@keyframes kpfmFly{0%{opacity:1;offset-distance:0%}90%{opacity:1}100%{offset-distance:100%;opacity:0}}
.kpfm .studio path,.kpfm .studio rect{fill:#efe8dc;stroke:#2a2622;stroke-width:1}
.kpfm .ok{opacity:0;transform-box:fill-box;transform-origin:center}.kpfm .ok circle{fill:#5fae6e}.kpfm .ok path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.kpfm-s.on .ok{animation:kpfmPop .5s cubic-bezier(.2,1.6,.4,1) 1.9s both}
/* Knopf im Planer-Kopf */
.kp-film-b{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper,#fff);color:var(--ink);font:600 13px var(--sans);cursor:pointer}
.kp-film-b svg{width:18px;height:18px;color:var(--acc,#7f7d4c)}
@media (max-width:999px){.kp-film-b{width:40px;height:40px;padding:0;justify-content:center}.kp-film-b span{display:none}.kp-film-b svg{width:22px;height:22px}}
@media (prefers-reduced-motion:reduce){.kpfm,.kpfm-s{transition:none}.kpfm *{animation:none!important}.kpfm .pop,.kpfm .drop,.kpfm .fillin,.kpfm .win,.kpfm .dim,.kpfm .hdl,.kpfm .ok,.kpfm .sheet{opacity:1}.kpfm .draw{stroke-dashoffset:0}.kpfm .sheet{transform:translate(calc(140px + var(--x)),110px) rotate(var(--r))}.kpfm .tint{fill:#7f8e77}}