.film{position:relative;height:900vh}.film-klebe{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}.film-bild{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.film-teil{position:absolute;z-index:5;opacity:0;visibility:hidden;transition:opacity .6s,transform .8s,visibility 0s .6s}.film-teil.an{opacity:1;visibility:visible;transition:opacity .6s,transform .8s,visibility 0s}.film-vorspann{inset:0;display:grid;place-content:center;text-align:center;gap:22px;padding:0 16px}.film-akt{left:clamp(16px,5vw,72px);top:50%;transform:translateY(-40%);max-width:430px}.film-akt.an{transform:translateY(-50%)}.film-ende{inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(16px,5vw,72px);max-width:640px}.film-hud{left:clamp(16px,5vw,72px);right:clamp(16px,5vw,72px);bottom:22px;display:flex;gap:26px;pointer-events:none;transition:opacity .4s}.film-hud,.film-leiste{position:absolute;z-index:6}.film-leiste{left:0;right:0;bottom:0;height:3px;background:rgba(13,42,82,.08)}.film-leiste i{display:block;height:100%;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#6fa6dc,#1f5fbf,#0d2a52)}.film-weiter{position:absolute;right:clamp(16px,4vw,40px);top:84px;z-index:7}.film-hinweis{animation:film-schweben 2s ease-in-out infinite}@keyframes film-schweben{50%{transform:translateY(8px)}}@media (max-width:760px){.film{height:760vh}.film-akt{top:auto;bottom:64px;left:12px;right:12px;transform:translateY(20px);max-width:none}.film-akt.an{transform:none}.film-ende{justify-content:flex-end;padding-bottom:72px}}:root[data-ruhig] .film{height:auto}:root[data-ruhig] .film-klebe{position:relative;height:auto;overflow:visible}:root[data-ruhig] .film-bild{position:relative;height:72vh}:root[data-ruhig] .film-hud,:root[data-ruhig] .film-leiste,:root[data-ruhig] .film-weiter{display:none}:root[data-ruhig] .film-akte{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;padding:32px clamp(16px,4vw,40px);max-width:1240px;margin:0 auto}:root[data-ruhig] .film-teil{position:static;opacity:1;visibility:visible;transform:none;max-width:none}:root[data-ruhig] .film-ende{padding:0 clamp(16px,4vw,40px) 48px;max-width:1240px;margin:0 auto}.film-vorspann{background:radial-gradient(1200px 700px at 75% 20%,#fff7e8 0,transparent 60%),linear-gradient(180deg,#f7fbff,#eaf4ff);display:block;text-align:left}.film-held{height:100%;max-width:1240px;margin:0 auto;padding:96px clamp(16px,4vw,40px) 48px;display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}.film-faecher{position:relative;height:min(66vh,620px)}.film-karte{position:absolute;top:50%;left:50%;width:min(24vw,300px);box-shadow:0 40px 70px -30px rgba(13,42,82,.55);transition:transform .5s cubic-bezier(.2,.8,.2,1)}.film-karte-0{transform:translate(-112%,-46%) rotate(-7deg)}.film-karte-1{transform:translate(-50%,-54%) rotate(1.5deg);z-index:2}.film-karte-2{transform:translate(12%,-44%) rotate(8deg)}.film-faecher:hover .film-karte-0{transform:translate(-122%,-48%) rotate(-10deg)}.film-faecher:hover .film-karte-2{transform:translate(22%,-46%) rotate(11deg)}.film-hinweis-knopf span{display:inline-block;animation:film-schweben 2s ease-in-out infinite}@media (max-width:900px){.film-held{grid-template-columns:1fr;gap:20px;padding-top:84px;align-content:start;overflow:hidden}.film-faecher{height:38vh;order:-1}.film-karte{width:min(34vw,180px)}}:root[data-ruhig] .film-vorspann{position:relative;display:block;min-height:100vh}