/* Scroll-Film „So läuft der Gründungs-Check“ auf der Startseite.
   Sechs Szenen, die von selbst ablaufen, sobald der Film im Bild ist (assets/film.js). Ohne JavaScript oder mit reduzierter Bewegung:
   alle Szenen untereinander im Endzustand. Stand 13.11.2026 */
.film{padding:0;background:var(--surface)}
.film-raum{position:relative}
.film-buehne{max-width:1120px;margin:0 auto;padding:72px 24px;display:grid;gap:32px}
.film-kopf{text-align:center;max-width:720px;margin:0 auto}
.film-kopf .h2{font-size:clamp(30px,4.6vw,56px)}
.film-texte{display:grid;gap:14px}
.film-text{background:#fff;border-radius:20px;padding:18px 20px}
.film-text .nr{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;font-weight:600;margin-right:10px}
.film-text strong{font-size:19px;letter-spacing:-.02em}
.film-text p{margin:8px 0 0;color:var(--ink-2);line-height:1.5}
.film-geraet{position:relative;background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:30px;box-shadow:0 2px 6px rgba(0,0,0,.04),0 50px 100px -40px rgba(0,0,0,.35);padding:20px;overflow:hidden}
.film-leiste{display:flex;align-items:center;gap:12px;padding:0 4px 14px}
.film-leiste .punkte{display:flex;gap:6px}
.film-leiste .punkte i{width:9px;height:9px;border-radius:50%;background:var(--line-2,#D2D2D7)}
.film-leiste b{font-family:var(--display,inherit);font-size:17px;font-weight:600;letter-spacing:-.03em}
.film-leiste .zaehler{margin-left:auto;font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.film-schiene{height:4px;background:var(--line,#E5E5EA);border-radius:99px;overflow:hidden;margin:0 4px 18px}
.film-schiene i{display:block;height:100%;background:var(--accent);border-radius:99px;transform-origin:left;transform:scaleX(var(--film,1))}
.film-szene{display:grid;gap:12px;align-content:start}
.film-szene+.film-szene{margin-top:28px;padding-top:28px;border-top:1px solid var(--line,#E5E5EA)}
.fs-kicker{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#0058B0;margin:0}
.fs-frage{font-family:var(--display,inherit);font-size:21px;line-height:1.2;font-weight:600;letter-spacing:-.03em;margin:0}

/* Szene 1: Idee eintippen */
.fs-feld{display:flex;align-items:center;min-height:54px;padding:0 16px;border-radius:14px;background:var(--surface);border:1.5px solid var(--accent);font-size:17px}
.fs-feld .caret{width:2px;height:22px;background:var(--accent);margin-left:2px;animation:film-caret 1s steps(1) infinite}
@keyframes film-caret{50%{opacity:0}}
.fs-weiter{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 22px;border-radius:980px;background:var(--accent);color:#fff;font-weight:500}

/* Szene 2: Fragenstapel */
.fs-stapel{position:relative;height:190px}
.fs-karte{position:absolute;inset:0;border-radius:18px;background:var(--surface);padding:18px;display:grid;gap:10px;align-content:start}
.fs-karte .opt{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:10px 14px;font-size:15px}
.fs-karte .opt::before{content:"";width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-2,#D2D2D7);flex:none}
.fs-karte .opt.an{outline:1.5px solid var(--accent)}
.fs-karte .opt.an::before{border-color:var(--accent);box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 9px var(--accent)}

/* Szene 3: Ampeln */
.fs-ampeln{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fs-ampel{display:flex;flex-direction:column;gap:10px;background:var(--surface);border-radius:16px;padding:14px;font-size:13px;font-weight:600;overflow-wrap:anywhere}
.fs-ampel i{width:14px;height:14px;border-radius:50%;background:var(--line-2,#D2D2D7);transition:background .35s ease,box-shadow .35s ease,transform .5s var(--weich,ease)}
.fs-ampel.an[data-f="g"] i{background:#30A46C;box-shadow:0 0 0 5px rgba(48,164,108,.16);transform:scale(1.15)}
.fs-ampel.an[data-f="a"] i{background:#F5A524;box-shadow:0 0 0 5px rgba(245,165,36,.18);transform:scale(1.15)}
.fs-ampel.an[data-f="r"] i{background:#E5484D;box-shadow:0 0 0 5px rgba(229,72,77,.16);transform:scale(1.15)}
.fs-legende{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted);margin:2px 0 0}
.fs-legende span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:currentColor}
.fs-legende .g{color:#1A7F54}.fs-legende .a{color:#8A5A00}.fs-legende .r{color:#B3261E}

/* Szene 4: Lücken */
.fs-luecke{border:1px solid var(--line,#E5E5EA);border-left:4px solid #F5A524;border-radius:14px;padding:12px 14px}
.fs-luecke.rot{border-left-color:#E5484D}
.fs-luecke span{display:block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.fs-luecke p{margin:6px 0 0;font-size:14px;line-height:1.4;color:var(--ink)}

/* Szene 5: E-Mail und Start */
.fs-mail{border-radius:16px;background:var(--surface);padding:16px;display:grid;gap:8px}
.fs-mail .von{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.fs-mail .von i{font-style:normal;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#1D1D1F;color:#fff;font-size:11px;font-weight:700}
.fs-mail b{font-size:16px;letter-spacing:-.02em}
.fs-mail .zeilen{display:grid;gap:6px}
.fs-mail .zeilen i{display:block;height:8px;border-radius:99px;background:var(--line,#E5E5EA)}
.fs-mail .zeilen i:nth-child(2){width:82%}.fs-mail .zeilen i:nth-child(3){width:64%}
.fs-chips{display:flex;flex-wrap:wrap;gap:8px}
.fs-chips span{font-size:13px;font-weight:600;color:#0058B0;background:#EFF5FE;border-radius:980px;padding:7px 12px}
.film-start{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;margin:8px 0 0}
.film-start span{font-size:14px;color:var(--muted)}
.film-fuss{font-size:13px;line-height:1.5;color:var(--muted);text-align:center;margin:0}
.film-punkte{display:none}


.fs-karte:nth-child(1){z-index:4}.fs-karte:nth-child(2){z-index:3}.fs-karte:nth-child(3){z-index:2}.fs-karte:nth-child(4){z-index:1}
.film:not(.film-an) .fs-karte:not(:first-child){display:none}
.film:not(.film-an) .fs-feld .caret{display:none}
.film-leiste b,.film-leiste .zaehler{white-space:nowrap}
.fs-ampel{hyphens:auto}
.film-player{display:grid;gap:32px}
.film-steuer,.film-balken{display:none}
/* Szene 6: das klare Bild */
.fs-klar{display:grid;gap:10px}
.fs-klar li{list-style:none;display:flex;gap:12px;align-items:flex-start;background:var(--surface);border-radius:14px;padding:12px 14px;font-size:15px;line-height:1.4}
.fs-klar ul{margin:0;padding:0;display:grid;gap:8px}
.fs-klar li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.6'/%3E%3C/svg%3E") center/14px no-repeat}

/* ================= Mit Bewegung: läuft wie ein kurzes Video von selbst ================= */
.film-an{background:#fff}
.film-an .film-buehne{padding:clamp(72px,9vw,128px) 24px;gap:28px}
.film-an .film-player{position:relative;isolation:isolate;overflow:hidden;max-width:1040px;width:100%;margin:0 auto;border-radius:40px;background:#08080B;color:#fff;
  padding:clamp(24px,4vw,56px);display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(24px,4vw,64px);align-items:center;min-height:clamp(520px,58vw,620px);
  box-shadow:0 60px 120px -60px rgba(0,0,0,.55)}
.film-an .film-player::before,.film-an .film-player::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(10px);transition:transform 1.2s var(--weich,ease),background 1s ease,opacity 1s ease}
.film-an .film-player::before{width:70%;aspect-ratio:1;left:-18%;top:-30%;background:radial-gradient(circle,rgba(0,113,227,.55),transparent 65%);transform:translate(calc(var(--sz,0) * 9%),calc(var(--sz,0) * 6%))}
.film-an .film-player::after{width:60%;aspect-ratio:1;right:-16%;bottom:-34%;background:radial-gradient(circle,rgba(142,92,247,.42),transparent 65%);transform:translate(calc(var(--sz,0) * -7%),calc(var(--sz,0) * -5%))}
.film-an .film-player[data-szene="2"]::after{background:radial-gradient(circle,rgba(245,165,36,.36),transparent 65%)}
.film-an .film-player[data-szene="3"]::after{background:radial-gradient(circle,rgba(229,72,77,.34),transparent 65%)}
.film-an .film-player[data-szene="5"]::before{background:radial-gradient(circle,rgba(48,164,108,.5),transparent 65%)}
/* Bildunterschriften: große Schrift, Wort für Wort */
.film-an .film-texte{position:relative;min-height:230px;display:block}
.film-an .film-text{position:absolute;inset:0;background:none;padding:0;border-radius:0;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
.film-an .film-text.an{opacity:1;visibility:visible;transition:opacity .3s ease}
.film-an .film-text .nr{width:auto;height:auto;padding:6px 12px;border-radius:980px;background:rgba(255,255,255,.12);color:#fff;font-size:13px;letter-spacing:.04em;margin:0 0 18px;display:inline-block}
.film-an .film-text .nr::before{content:"Schritt "}
.film-an .film-text.schluss .nr::before{content:""}
.film-an .film-text strong{display:block;font-family:var(--display,inherit);font-size:clamp(30px,4.2vw,54px);line-height:1.04;font-weight:600;letter-spacing:-.045em;text-wrap:balance}
.film-an .film-text strong .w{display:inline-block;opacity:0;transform:translateY(.5em) rotate(4deg);filter:blur(8px)}
.film-an .film-text.an strong .w{animation:film-wort .55s var(--weich,cubic-bezier(.2,.8,.2,1)) both;animation-delay:calc(var(--w) * 70ms + 80ms)}
@keyframes film-wort{to{opacity:1;transform:none;filter:none}}
.film-an .film-text p{margin:16px 0 0;color:#B8B8C0;font-size:18px;line-height:1.45;max-width:26em;opacity:0;transform:translateY(10px)}
.film-an .film-text.an p{animation:film-wort .6s var(--weich,ease) .45s both}
/* Gerät */
.film-an .film-spalte{display:grid;gap:16px;align-content:center;perspective:1400px}
.film-an .film-geraet{color:var(--ink,#1D1D1F);transform:rotateY(calc(var(--kipp,0) * 1deg)) rotateX(calc(var(--kipp,0) * -.35deg)) scale(var(--gr,1));transition:transform .9s var(--weich,ease);will-change:transform}
.film-an .film-inhalt{position:relative;height:clamp(290px,30vw,340px)}
.film-an .film-szene{position:absolute;inset:0;margin:0;padding:0;border:0;opacity:0;visibility:hidden;transform:translateX(46px) scale(.96);filter:blur(8px);transition:opacity .35s ease,transform .5s var(--weich,ease),filter .35s ease,visibility 0s .35s}
.film-an .film-szene.an{opacity:1;visibility:visible;transform:none;filter:none;transition:opacity .35s ease,transform .5s var(--weich,ease),filter .35s ease}
.film-an .film-szene.vorbei{transform:translateX(-46px) scale(.96)}
.film-an .fs-weiter{opacity:calc((var(--t,0) - .72) * 6);transform:scale(calc(.9 + min(1,max(0,(var(--t,0) - .72) * 6)) * .1))}
.film-an .fs-karte{transition:transform .42s var(--weich,ease),opacity .3s ease,background .3s ease}
.film-an .fs-karte>*{transition:opacity .25s ease}
.film-an .fs-karte.weg{transform:translateX(-118%) rotate(-9deg);opacity:0}
.film-an .fs-karte.hinten{transform:translateY(12px) scale(.95);background:#E9E9EE}
.film-an .fs-karte.hinten2{transform:translateY(24px) scale(.9);background:#DFDFE5}
.film-an .fs-karte.hinten>*,.film-an .fs-karte.hinten2>*{opacity:0}
.film-an .fs-ampel{transform:scale(.9);opacity:.55;transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .3s ease}
.film-an .fs-ampel.an{transform:none;opacity:1}
.film-an .fs-luecke{opacity:0;transform:translateX(60px) scale(.96);transition:opacity .35s ease,transform .5s cubic-bezier(.2,1.2,.3,1)}
.film-an .fs-luecke.an{opacity:1;transform:none}
.film-an .fs-mail{transform:translateY(calc((1 - min(1,var(--t,0) * 3)) * 60px)) rotate(calc((1 - min(1,var(--t,0) * 3)) * -5deg));opacity:min(1,calc(var(--t,0) * 4))}
.film-an .fs-chips span{opacity:0;transform:translateY(10px) scale(.9);transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.5,.5,1)}
.film-an .fs-chips.an span{opacity:1;transform:none}
.film-an .fs-chips.an span:nth-child(2){transition-delay:.1s}.film-an .fs-chips.an span:nth-child(3){transition-delay:.2s}
.film-an .fs-klar li{opacity:0;transform:translateY(14px);transition:opacity .35s ease,transform .5s var(--weich,ease)}
.film-an .fs-klar.an li{opacity:1;transform:none}
.film-an .fs-klar.an li:nth-child(2){transition-delay:.14s}.film-an .fs-klar.an li:nth-child(3){transition-delay:.28s}
/* Abschluss-Knopf, Steuerung, Fortschritt */
.film-an .film-start{justify-content:flex-start;margin:0;opacity:0;transform:translateY(14px) scale(.94);transition:opacity .4s ease,transform .6s cubic-bezier(.3,1.4,.5,1);pointer-events:none}
.film-an .film-start.an{opacity:1;transform:none;pointer-events:auto}
.film-an .film-start span{color:#B8B8C0}
.film-an .film-start.an .btn{animation:film-puls 2.2s ease-in-out infinite}
@keyframes film-puls{50%{box-shadow:0 0 0 12px rgba(0,113,227,.22)}}
.film-an .film-fuss{display:block;max-width:640px;margin:0 auto}
.film-an .film-balken{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;align-self:end}
.film-an .film-balken i{display:block;height:3px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}
.film-an .film-balken i::after{content:"";display:block;height:100%;background:#fff;border-radius:99px;transform-origin:left;transform:scaleX(var(--b,0))}
.film-an .film-steuer{position:absolute;right:18px;top:18px;display:flex;gap:8px;z-index:2}
.film-an .film-steuer button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:0;border-radius:980px;background:rgba(255,255,255,.14);color:#fff;font:600 13px/1 inherit;font-family:inherit;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.film-an .film-steuer button:hover{background:rgba(255,255,255,.24)}
.film-an .film-steuer button:focus-visible{outline:3px solid #6CB4FF;outline-offset:2px}
@media (max-width:899px){
  .film-an .film-buehne{padding:64px 16px}
  .film-an .film-player{grid-template-columns:1fr;border-radius:28px;padding:64px 18px 18px;gap:14px;min-height:0;align-items:start}
  .film-an .film-texte{min-height:128px}
  .film-an .film-text .nr{margin-bottom:10px;font-size:12px;padding:5px 10px}
  .film-an .film-text strong{font-size:clamp(26px,7.4vw,34px)}
  .film-an .film-text p{font-size:15px;margin-top:8px}
  .film-an .film-geraet{padding:16px;border-radius:24px}
  .film-an .film-inhalt{height:250px}
  .film-an .film-start{justify-content:center}
  .film-an .film-start .btn{width:100%}
  .film-an .film-start span{display:none}
  .film-leiste b{font-size:15px}.film-leiste .zaehler{font-size:12px}
  .fs-frage{font-size:17px}
  .fs-stapel{height:170px}
  .fs-karte{padding:14px}
  .fs-karte .opt{font-size:14px;padding:8px 12px}
  .fs-luecke{padding:9px 12px}
  .fs-luecke span{font-size:11px}
  .fs-luecke p{font-size:12.5px;margin-top:3px}
  .fs-ampel{font-size:11.5px;padding:12px 9px;gap:8px}
  .fs-mail{padding:13px}.fs-mail b{font-size:15px}
  .fs-chips span{font-size:12px;padding:6px 10px}
  .fs-klar li{font-size:14px;padding:10px 12px}
}
@media (max-width:380px){.fs-ampel{padding:10px 8px;font-size:11px}}
.film-kopf .lead{margin-top:14px}
.film-an .film-kopf{text-align:center;max-width:720px;margin:0 auto}
.film-steuer button[hidden]{display:none!important}
@media (max-width:899px){.film-an .film-texte{min-height:158px}.film-an .film-text p{font-size:14.5px;line-height:1.4}}