/* Abschnitt 2 „Wie ist der Stand?“
   Ohne JS oder mit „Bewegung reduzieren“: ruhiger Endzustand (drei Texte untereinander, Übersichtskarte).
   Mit JS (.stand.on): hoher Wrapper, Bühne bleibt per CSS sticky stehen, stand.js setzt nur transform und opacity. */

.stand{position:relative;z-index:3;overflow-x:clip;--gut:clamp(20px,5.2vw,84px)}
.stand.on{height:330vh}
.stand.on[data-v="m"]{height:310vh}
.st-stage{position:relative}
.stand.on .st-stage{position:sticky;top:0;height:100vh;height:100svh}

/* ---------- Text ---------- */
.stand.on .st-copy{position:absolute;z-index:7;left:var(--gut);top:50%;width:min(440px,34vw);transform:translateY(-50%)}
.st-steps{list-style:none;margin:0 0 30px;padding:0;display:flex;gap:18px}
.st-steps li{position:relative;flex:1;padding-top:13px;font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:#a6b1c0;white-space:nowrap;transition:color .45s ease}
.st-steps li::before,.st-steps li i{content:"";position:absolute;left:0;top:0;height:2px;border-radius:2px}
.st-steps li::before{right:0;background:#e8edf3}
.st-steps li i{width:100%;background:var(--blue);transform-origin:0 50%;transform:scaleX(var(--k,0))}
.st-steps li span{margin-right:7px}
.st-steps li.on{color:#16479e}
.st-texts{display:grid}
.st-t{grid-area:1/1}
.st-kick{display:none;margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#16479e}
.st-t h2{margin:0;font-size:clamp(34px,3.3vw,50px);font-weight:600;line-height:1.08;letter-spacing:.002em;text-wrap:balance}
.st-p{margin:18px 0 0;font-size:18px;line-height:1.55;color:#26344a;max-width:24em}
.stand.on .st-t{opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s ease,transform .45s var(--ease)}
.stand.on .st-t.before{transform:translateY(-14px)}
.stand.on .st-t.on{opacity:1;transform:none;pointer-events:auto;transition:opacity .6s ease .2s,transform .8s var(--ease) .2s}

/* ---------- Bühne ---------- */
/* Kein eigener Stapelkontext: Schnipsel liegen hinter der Karte und heben sich beim Flug darüber */
.st-field{position:absolute;inset:0;pointer-events:none}
.st-field .sn{z-index:2}.st-field .sn.fly{z-index:5}.st-field .q{z-index:4}
.st-field>*{position:absolute;left:0;top:0;opacity:0;transform-origin:50% 50%;will-change:transform,opacity}
/* Leuchtpunkt: der Schnipsel wird im Flug zum Punkt seiner Quelle */
.st-field .sp{display:block;width:10px;height:10px;border-radius:50%;background:var(--c);z-index:6;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 24%,transparent),0 0 14px 2px color-mix(in srgb,var(--c) 45%,transparent)}

/* Papier: weiß, feine Körnung (wie im Hero), weicher Schatten; Tiefe über Schatten */
.pp{background-color:#fff;background-image:var(--grain,none);background-size:160px 160px;border-radius:14px;color:var(--ink);
  box-shadow:0 22px 44px -26px rgba(15,27,45,.36),0 6px 14px -8px rgba(15,27,45,.13),0 0 0 1px rgba(15,27,45,.05)}
.pp.z1{box-shadow:0 30px 56px -28px rgba(15,27,45,.42),0 8px 18px -10px rgba(15,27,45,.16),0 0 0 1px rgba(15,27,45,.05)}
.pp.z3{box-shadow:0 14px 30px -20px rgba(15,27,45,.28),0 3px 8px -5px rgba(15,27,45,.1),0 0 0 1px rgba(15,27,45,.045)}

/* Fragekarten (Sprechblasen) */
.q{padding:13px 22px 15px 14px;border-radius:18px}
.q::after{content:"";position:absolute;left:30px;bottom:-7px;width:16px;height:16px;background:inherit;border-radius:0 0 4px 0;
  transform:rotate(45deg);box-shadow:4px 4px 7px -4px rgba(15,27,45,.2)}
.q.r::after{left:auto;right:30px}
.q .who{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#16479e}
.q .av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--ab);color:var(--ac)}
.q .av svg{width:15px;height:15px}
.q .say{display:block;margin:8px 0 0 2px;font-size:23px;font-weight:600;line-height:1.2;white-space:nowrap}
.q .ok{position:absolute;right:-9px;top:-9px;width:26px;height:26px;border-radius:50%;background:var(--g);display:grid;place-items:center;
  box-shadow:0 8px 14px -8px rgba(18,192,142,.9);opacity:0;transform:scale(.4);transition:opacity .3s ease,transform .5s var(--ease)}
.q .ok svg{width:16px;height:16px}
.q.done .ok{opacity:1;transform:none}

/* Schnipsel */
.sn{padding:11px 13px 12px;font-size:13px}
.sn .hd{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8a97a8;white-space:nowrap}
.sn .ic{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;background:var(--c);flex:none}
.sn .ic svg{width:13px;height:13px}
.sn b{font-weight:600}

.sn-wa .bub{display:block;margin-top:9px;padding:8px 11px 6px;width:214px;border-radius:4px 12px 12px 12px;background:#e8f7ed;font-size:14px;line-height:1.35}
.sn-wa .tm{display:block;margin-top:2px;text-align:right;font-size:10.5px;color:#7d8c82}
.sn-wa .tm svg{width:14px;height:9px;margin-left:4px;vertical-align:-1px}

.sn-xl{padding:0;overflow:hidden;border-radius:10px}
.sn-xl .bar{display:flex;align-items:center;gap:7px;padding:7px 11px;font-size:11.5px;font-weight:500;color:#3c4a5e;background:#f3f8f5;border-bottom:1px solid #e1e9e4}
.sn-xl .gr{display:grid;grid-template-columns:20px auto auto auto;font-size:12.5px}
.sn-xl .gr span{padding:6px 10px;border-right:1px solid #e9edf2;border-bottom:1px solid #e9edf2;white-space:nowrap}
.sn-xl .gr span:nth-child(4n){border-right:0}
.sn-xl .gr span:nth-last-child(-n+4){border-bottom:0}
.sn-xl .gr .h{padding:3px 4px;background:#f7f9fb;color:#9ba7b7;font-size:10px;text-align:center}
.sn-xl .gr .th{font-weight:600;color:#3c4a5e}
.sn-xl .gr .cur{box-shadow:inset 0 0 0 2px #1d8a55;font-weight:600}

.sn-note{width:150px;height:134px;padding:24px 14px 12px;border-radius:3px;background-color:#fdeb93;
  background-image:var(--grain,linear-gradient(transparent,transparent)),linear-gradient(170deg,#fff5b5,#fde98c 65%,#f7dc77);background-size:160px 160px,100% 100%;
  box-shadow:0 22px 26px -18px rgba(96,74,0,.42),0 3px 6px -3px rgba(96,74,0,.22)}
.sn-note .tape{position:absolute;left:50%;top:-9px;width:64px;height:20px;margin-left:-32px;background:rgba(255,255,255,.6);
  box-shadow:0 0 0 1px rgba(15,27,45,.04);transform:rotate(-4deg)}
.sn-note .hand{display:block;font-family:Caveat,"Bradley Hand",cursive;font-size:31px;font-weight:600;line-height:1.02;color:#283247;transform:rotate(-2deg)}

.sn-voice .pl{display:flex;align-items:center;gap:9px;margin-top:9px;padding:7px 11px 7px 7px;width:232px;border-radius:4px 12px 12px 12px;background:#e8f7ed}
.sn-voice .play{width:28px;height:28px;border-radius:50%;background:#25b863;display:grid;place-items:center;flex:none}
.sn-voice .play svg{width:11px;height:11px;margin-left:2px}
.sn-voice .wave{display:flex;align-items:center;gap:2px;height:22px;flex:1}
.sn-voice .wave i{display:block;width:2.5px;height:var(--h);border-radius:2px;background:#a6bfae}
.sn-voice .wave i.p{background:#25b863}
.sn-voice .len{font-size:11.5px;color:#6f8076;font-variant-numeric:tabular-nums}

.sn-cal .ev{margin-top:9px;padding:1px 0 1px 10px;border-left:3px solid #1f6dff;min-width:170px}
.sn-cal .ev b{display:block;font-size:14.5px}
.sn-cal .ev span{display:block;margin-top:2px;font-size:12.5px;color:#6b7a90}

.sn-mail{width:244px}
.sn-mail b{display:block;margin-top:9px;font-size:14.5px}
.sn-mail .pv{display:block;margin-top:3px;font-size:12.5px;color:#8a97a8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sn-bank{width:210px}
.sn-bank .ln{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-top:1px solid #eef1f5;font-size:12.5px;font-variant-numeric:tabular-nums}
.sn-bank .hd+.ln{margin-top:7px}
.sn-bank .ln.miss{color:#c4533f;font-weight:600}

.sn-call .cl{display:flex;align-items:flex-end;gap:16px;margin-top:8px}
.sn-call .cl b{display:block;font-size:15px}
.sn-call .cl small{display:block;margin-top:1px;font-size:12px;color:#c4533f}
.sn-call .cl em{margin-left:auto;font-style:normal;font-size:21px;font-weight:600;line-height:1;color:#c4533f}

.sn-pdf{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px}
.sn-pdf .doc{width:30px;height:38px;flex:none}
.sn-pdf b{display:block;font-size:13.5px;font-weight:500}
.sn-pdf small{display:block;margin-top:2px;font-size:11.5px;color:#8a97a8}

.sn-ph{width:204px}
.sn-ph .th{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:9px}
.sn-ph .th i{position:relative;display:block;aspect-ratio:1;border-radius:7px;overflow:hidden}
.sn-ph .th i:nth-child(1){background:linear-gradient(180deg,#d4e3f4 0 36%,transparent 36%),repeating-linear-gradient(162deg,#c97352 0 5px,#b4623f 5px 7px)}
.sn-ph .th i:nth-child(2){background:linear-gradient(135deg,#dfe8f4 0 34%,#8f9db1 34% 39%,#d48a62 39% 100%)}
.sn-ph .th i:nth-child(3){background:linear-gradient(205deg,#e6edf6 0 44%,#bcc6d4 44% 50%,#c57c59 50%)}
.sn-ph .th b{position:absolute;inset:0;display:grid;place-items:center;background:rgba(15,27,45,.32);color:#fff;font-size:14px;font-weight:600}

/* ---------- Übersichtskarte (Design wie die Karten im Hero) ---------- */
.ov{position:absolute;left:0;top:0;z-index:3;width:430px;padding:20px 22px 14px;border-radius:20px;
  background-color:#fff;background-image:var(--grain,none);background-size:160px 160px;
  box-shadow:0 34px 70px -30px rgba(15,27,45,.45),0 10px 22px -14px rgba(15,27,45,.22),0 0 0 1px rgba(15,27,45,.04)}
.stand.on .ov{opacity:0;transform-origin:50% 40%;will-change:transform,opacity}
.ov .kick{margin:2px 0 6px;font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#16479e}
.ov h3{margin:0 0 12px;font-size:19px;font-weight:600;line-height:1.25;letter-spacing:.002em}
.ov-rows{list-style:none;margin:0;padding:0}
.ov-row{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.ov-row::before{content:"";position:absolute;top:0;bottom:0;left:-22px;right:-22px;background:linear-gradient(90deg,rgba(20,160,165,.09),rgba(31,109,255,.05));opacity:0;pointer-events:none}
.ov-row.ping::before{animation:ovping 1.3s ease}
@keyframes ovping{0%{opacity:0}16%{opacity:1}100%{opacity:0}}
.ov-ic{width:40px;height:40px;border-radius:11px;background:#f3f6fa;display:grid;place-items:center}
.ov-ic svg{width:34px;height:34px;display:block}
.ov-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.ov-main b{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-st{position:relative;min-height:18px;font-size:13px;color:var(--slate)}
.ov-txt{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-sk{position:absolute;left:0;top:5px;width:64%;height:8px;border-radius:4px;background:#edf1f6;display:none}
.stand.on .ov-sk{display:block;transition:opacity .35s ease}
.stand.on .ov-txt{opacity:0;transition:opacity .45s ease}
.stand.on .ov-row.has .ov-txt{opacity:1}
.stand.on .ov-row.has .ov-sk{opacity:0}
.ov-row.fresh .ov-txt{animation:fresh 1.6s ease}
.ov-src{display:flex;align-items:center;gap:7px;align-self:start;margin-top:4px;font-size:11px;color:var(--gray);white-space:nowrap}
.dots{display:flex;gap:4px}
.dots i{position:relative;display:block;width:7px;height:7px;border-radius:50%;background:var(--c)}
.stand.on .dots i{background:#fff;box-shadow:inset 0 0 0 1.4px #cfd7e2;transition:background .3s ease,box-shadow .3s ease}
.stand.on .dots i.lit{background:var(--c);box-shadow:none}
.dots i.hit::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--c);animation:dothit 1s ease-out forwards}
@keyframes dothit{0%{transform:scale(.35);opacity:1}100%{transform:scale(1.7);opacity:0}}
.ov-foot{display:flex;align-items:center;gap:8px;margin:0;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--gray)}

/* ---------- Handy ---------- */
.stand.on[data-v="m"] .st-copy{left:20px;right:20px;top:calc(22px + env(safe-area-inset-top,0px));width:auto;transform:none;text-align:center}
.stand[data-v="m"] .st-steps{justify-content:center;gap:12px;margin-bottom:16px}
.stand[data-v="m"] .st-steps li{flex:0 0 auto;padding-top:9px;font-size:10.5px;letter-spacing:.1em}
.stand[data-v="m"] .st-t h2{font-size:clamp(26px,7.4vw,31px)}
.stand[data-v="m"] .st-p{margin:10px auto 0;font-size:15px;line-height:1.45;max-width:23em}
.stand[data-v="m"] .ov{width:min(400px,calc(100vw - 32px));padding:16px 18px 12px}
.stand[data-v="m"] .ov h3{font-size:17.5px;margin-bottom:8px}
.stand[data-v="m"] .ov-row{grid-template-columns:36px minmax(0,1fr) auto;column-gap:11px;padding:9px 0}
.stand[data-v="m"] .ov-row::before{left:-18px;right:-18px}
.stand[data-v="m"] .ov-ic{width:36px;height:36px;border-radius:10px}
.stand[data-v="m"] .ov-ic svg{width:30px;height:30px}
.stand[data-v="m"] .ov-main b{font-size:14.5px}
.stand[data-v="m"] .ov-n{display:none}
.stand[data-v="m"] .ov-foot{padding-top:10px}
@media (max-height:700px){
  .stand[data-v="m"] .st-steps{margin-bottom:12px}
  .stand[data-v="m"] .st-t h2{font-size:26px}
  .stand[data-v="m"] .st-p{font-size:14px;line-height:1.4;margin-top:8px}
  .stand[data-v="m"] .ov{padding:14px 16px 10px}
  .stand[data-v="m"] .ov .kick{margin-bottom:4px}
  .stand[data-v="m"] .ov-row{padding:7px 0}
}

/* ---------- Ruhiger Endzustand (ohne JS oder „Bewegung reduzieren“) ---------- */
.stand:not(.on){padding:clamp(64px,8vw,110px) 0 20px}
.stand:not(.on) .st-stage{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:48px 80px;padding:0 24px}
.stand:not(.on) .st-copy{width:min(460px,100%)}
.stand:not(.on) .st-steps,.stand:not(.on) .st-field{display:none}
.stand:not(.on) .st-texts{display:flex;flex-direction:column;gap:36px}
.stand:not(.on) .st-kick{display:block}
.stand:not(.on) .st-t h2{font-size:clamp(26px,2.6vw,36px)}
.stand:not(.on) .st-p{font-size:17px;margin-top:12px}
.stand:not(.on) .ov{position:relative;width:min(430px,100%)}

@media (max-width:520px){
  .ov-n{display:none}
  .stand:not(.on) .ov{padding:16px 18px 12px}
  .stand:not(.on) .ov-row{grid-template-columns:36px minmax(0,1fr) auto;column-gap:11px}
  .stand:not(.on) .ov-ic{width:36px;height:36px}
}

/* Platzhalter für den nächsten Abschnitt */
.white.next{padding-top:90px}