/* Schichtplanung-Showcase (/schichtplanung).
   Baut auf css/landing.css und css/apps-showcase.css auf (Buehne, Geraete-
   rahmen, Akte, FAQ). Hier nur Wochenplan, Team-Leiste, Schicht-App und die
   Karten der Akte. */

/* --sp-ok #0d9488 -> #0f766e: als Text nur 3,74:1 auf Weiss (axe, 06.10.2026), jetzt 5,5:1 */
.sp{--sp-under:#e11d48;--sp-ok:#0f766e;font-size:1.05rem}
.sp-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Alle neuen Bedienelemente: mindestens 48 px hoch, sichtbarer Fokusring. */
.sp-btn{min-height:48px}
.sp-btn:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* ── Tour-Leiste ueber der Buehne ─────────────────────────────── */
.sp .ax-hero{overflow:clip}
.sp-tour{position:sticky;top:80px;z-index:20;margin-top:2.2rem;background:#fff;color:var(--ink);border-radius:var(--r-card);padding:.9rem 1.1rem;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.5rem 1.2rem;align-items:center;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.sp-tour-n{margin:0;font-size:.95rem;font-weight:700;color:var(--ink-3);white-space:nowrap}
.sp-tour-t{margin:0;font:600 1.15rem/1.45 var(--ff-h);color:var(--ink);max-width:60ch}
.sp-tour-act{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.sp-tour-act:empty{display:none}
.sp-tour .sp-btn:focus-visible{outline-color:var(--navy)}
.sp-tour-btn{appearance:none;display:inline-flex;align-items:center;gap:.4rem;padding:0 1rem;border-radius:99px;border:1px solid var(--border);background:#fff;color:var(--navy);font:600 .95rem var(--ff-b);cursor:pointer}
.sp-tour-link{appearance:none;border:0;background:none;padding:0 .4rem;color:var(--navy);font:600 1rem var(--ff-b);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sp-controls .btn{font-size:1rem}
.sp-controls .ax-demo-btn{font-size:1rem}
.ax-demo-btn.run{background:rgba(255,255,255,.12);border-color:#fff}

/* Spotlight: alles ausser dem Ziel abgedunkelt, das Ziel mit Ring und Puls. */
.sp-dim{position:absolute;inset:0;z-index:2;background:rgba(15,23,41,.45);pointer-events:none;opacity:0;transition:opacity .3s}
.sp-screen .sp-dim{z-index:3}
.sp-touring .sp-dim{opacity:1}
.sp .sp-spot{position:relative;z-index:3;box-shadow:0 0 0 4px var(--amber),0 0 0 9px rgba(232,160,32,.3);animation:spSpot 1.6s ease-in-out infinite}
.sp-screen .sp-spot{z-index:6}
@keyframes spSpot{50%{box-shadow:0 0 0 4px var(--amber),0 0 0 14px rgba(232,160,32,.12)}}
.sp-finger{position:absolute;left:0;top:0;z-index:6;pointer-events:none;font-size:2.1rem;line-height:1;color:#fff;transform:translate(-30%,-8%);filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));transition:left .6s cubic-bezier(.4,0,.2,1),top .6s cubic-bezier(.4,0,.2,1)}
.sp-finger[hidden]{display:none}
.sp-finger::after{content:'';position:absolute;left:18%;top:-6px;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:3px solid var(--amber);opacity:0}
.sp-finger.tap::after{animation:spTap .6s ease-out}
@keyframes spTap{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.8)}}

/* ── Rollen: wer plant, wer bestaetigt ────────────────────────── */
/* Schilder stehen ausserhalb der Geraete, zentriert darueber. Die Buehne
   bekommt dafuer oben Platz. */
.sp-stage{margin-top:5rem}
.sp-role{position:absolute;top:-4.1rem;z-index:3;margin:0;display:inline-flex;align-items:center;gap:.55rem;background:#fff;color:var(--ink);border-radius:99px;padding:.35rem 1rem .35rem .35rem;box-shadow:0 10px 26px rgba(0,0,0,.25);line-height:1.2;white-space:nowrap}
.sp-role .sp-av{width:36px;height:36px;font-size:.95rem}
.sp-role b{display:block;font:700 .95rem var(--ff-h)}
.sp-role small{display:block;font-size:.8rem;color:var(--ink-3)}
.sp-role-b{left:33%;transform:translateX(-50%)}
.sp-role-b .sp-av{--c:var(--amber);color:var(--navy)}
.sp-role-p{right:131px;transform:translateX(50%)}
.sp-role-p .sp-av{--c:#7c3aed}
.sp-as{font-weight:500;font-size:.85rem;color:var(--ink-3)}
.sp-legend-roles{margin:1.2rem 0 0;color:#fff;font-size:1.05rem;font-weight:600}
.sp-flow{position:absolute;z-index:5;transform:translate(-50%,-50%);background:var(--amber);color:var(--navy);font:700 .9rem var(--ff-b);padding:.4rem .8rem;border-radius:99px;white-space:nowrap;box-shadow:0 8px 22px rgba(0,0,0,.35);pointer-events:none;animation:tbIn .3s cubic-bezier(.16,1,.3,1)}
.sp-flow[hidden]{display:none}

/* ── Browser: Team-Leiste und Wochenplan ──────────────────────── */
.sp-stage .ax-browser{width:66%}
.sp-app{display:grid;grid-template-columns:150px minmax(0,1fr);flex:1;min-height:0}
.sp-pool{min-width:0;background:var(--navy);color:#c9d2e3;padding:.9rem .7rem;display:flex;flex-direction:column;gap:.5rem;min-height:0}
.sp-pool-h{margin:0;color:#fff;font:700 .95rem var(--ff-h)}
.sp-people{display:flex;flex-direction:column;gap:.3rem;overflow-y:auto;scrollbar-width:none}
.sp-people::-webkit-scrollbar{display:none}
.sp-pp{appearance:none;display:flex;align-items:center;gap:.45rem;width:100%;min-height:44px;padding:.25rem .45rem;border-radius:9px;border:1px solid transparent;background:rgba(255,255,255,.05);color:#e2e8f0;font:600 .76rem var(--ff-b);text-align:left;cursor:grab;transition:background .2s,border-color .2s}
.sp-pp:hover{background:rgba(255,255,255,.1)}
.sp-pp[aria-pressed="true"]{background:rgba(232,160,32,.18);border-color:var(--amber);color:#fff}
.sp-pp:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.sp-pp small{display:block;font-weight:500;font-size:.62rem;color:#93a0b6}
.sp-pp.away small{color:#fda4af}
.sp-plane{margin-left:auto;color:#fda4af;font-size:.9rem}
.sp-av{width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font:800 .66rem var(--ff-b);color:#fff;background:var(--c,#64748b)}
.sp-pool-tip{margin:auto 0 0;font-size:.64rem;line-height:1.4;color:#93a0b6}

.sp-main{padding:1rem 1rem .8rem;display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.sp-main .ax-main-head{margin-bottom:.6rem}
.sp-week{flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.45rem;overflow:hidden;align-content:start}
.sp-day{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.sp-dh{font-size:.8rem;font-weight:700;color:var(--ink-2);text-align:center;padding:.2rem 0 .3rem;border-bottom:1px solid var(--border)}
.sp-dh small{display:block;font-weight:500;color:var(--ink-3);font-size:.68rem}
.sp-off{font-size:.7rem;font-weight:600;color:#be185d;background:#fdf2f8;border-radius:6px;padding:.15rem .3rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-sh{appearance:none;position:relative;display:block;width:100%;text-align:left;font-family:inherit;border:1px solid color-mix(in srgb,var(--c) 35%,#fff);border-left:3px solid var(--c);background:color-mix(in srgb,var(--c) 8%,#fff);border-radius:8px;padding:.3rem .35rem .35rem;cursor:pointer;transition:box-shadow .2s,transform .15s,background .2s}
.sp-sh:hover{background:color-mix(in srgb,var(--c) 14%,#fff)}
.sp-sh:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
.sp-sh.drop{box-shadow:0 0 0 2px var(--amber);transform:scale(1.02)}
.sp-sh.armed{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--amber) 70%,#fff)}
.sp-sh.under{border-color:#fecdd3;border-left-color:var(--sp-under);background:#fff1f2}
.sp-none{font-size:.72rem;font-weight:700;color:#be123c}
.sp-sh.no{animation:spNo .5s ease}
@keyframes spNo{20%{transform:translateX(-5px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.sp-sh.yes{animation:spYes .6s cubic-bezier(.16,1,.3,1)}
@keyframes spYes{40%{transform:scale(1.05);box-shadow:0 0 0 3px var(--sp-ok)}}
.sp-sh-t{display:flex;justify-content:space-between;gap:.2rem;align-items:baseline}
.sp-sh-t b{font-size:.82rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-sh-t em{font-style:normal;font-size:.68rem;font-weight:800;border-radius:5px;padding:0 .25rem;background:#e7f5f3;color:#0b6b62;flex:0 0 auto;white-space:nowrap}
.sp-sh.under .sp-sh-t em{background:#ffe4e6;color:#be123c}
.sp-sh-time{display:block;font-size:.7rem;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-bottom:.25rem}
.sp-sh-p{display:flex;flex-wrap:wrap;gap:2px}
.sp-sh-p .sp-av{width:22px;height:22px;font-size:.62rem;position:relative}
.sp-sh-p .sp-av.new{animation:tbPopIn .5s cubic-bezier(.16,1,.3,1)}
.sp-sh-p .sp-av.ok::after{content:'';position:absolute;right:-2px;bottom:-2px;width:8px;height:8px;border-radius:50%;background:#22c55e;border:1.5px solid #fff}
.sp-sh-p .sp-av.dec{opacity:.35;text-decoration:line-through}
@keyframes tbPopIn{0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:none}}

.sp-toast{position:absolute;right:12px;bottom:12px;z-index:5;max-width:260px;background:var(--navy);color:#fff;border-radius:12px;padding:.6rem .75rem;font-size:.74rem;line-height:1.35;box-shadow:0 12px 30px rgba(15,23,41,.3);display:flex;gap:.5rem;align-items:flex-start;animation:axSheetUp .3s cubic-bezier(.16,1,.3,1)}
.sp-toast[hidden]{display:none}
.sp-toast i{font-size:.95rem;color:var(--amber)}
.sp-toast.bad i{color:#fb7185}

/* ── Handy: Schichten von Lea ─────────────────────────────────── */
.sp-screen{background:#f2f2f7}
.sp-who{display:flex;align-items:center;gap:.45rem;margin:0 16px .5rem;font-size:.74rem;font-weight:600;color:#4b5563}
.sp-who .sp-av{--c:#7c3aed;width:22px;height:22px;font-size:.6rem}
.sp-my{flex:1;min-height:0;overflow-y:auto;padding:0 12px 12px;display:grid;gap:.45rem;align-content:start;scrollbar-width:none}
.sp-my::-webkit-scrollbar{display:none}
.sp-m{background:#fff;border-radius:14px;padding:.6rem .7rem;border-left:4px solid var(--c);box-shadow:0 1px 2px rgba(15,23,41,.05);animation:tbPopIn .45s cubic-bezier(.16,1,.3,1) backwards}
.sp-m.old{animation:none}
.sp-m-t{display:flex;justify-content:space-between;gap:.4rem;font-size:.8rem}
.sp-m-t b{color:#111827}
.sp-m-t span{color:#6b7280;font-size:.72rem;font-variant-numeric:tabular-nums}
.sp-m small{display:block;color:#6b7280;font-size:.68rem;margin-top:.1rem}
.sp-m-a{display:flex;gap:.35rem;margin-top:.5rem}
.sp-m-a button{appearance:none;flex:1;min-height:40px;border-radius:9px;border:1px solid #d7dbe2;background:#fff;color:#374151;font:700 .74rem var(--ff-b);cursor:pointer}
.sp-m-a button.prim{background:var(--sp-ok);border-color:var(--sp-ok);color:#fff}
.sp-m-a button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.sp-m-s{margin-top:.4rem;font-size:.7rem;font-weight:700;color:var(--sp-ok);display:flex;gap:.3rem;align-items:center}
.sp-m-s.dec{color:#9ca3af}
.sp-m.open{background:#fff5f6;border-left-color:var(--sp-under)}
.sp-m.open small{color:#be123c}
.sp-sec{font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#4b5563;margin:.3rem 2px 0}
.sp-push{position:absolute;left:8px;right:8px;top:40px;z-index:4;display:flex;gap:.55rem;align-items:center;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:16px;padding:.55rem .7rem;box-shadow:0 10px 30px rgba(0,0,0,.18);animation:spPush .5s cubic-bezier(.16,1,.3,1)}
.sp-push[hidden]{display:none}
@keyframes spPush{from{transform:translateY(-40px);opacity:0}to{transform:none;opacity:1}}
.sp-push b{display:block;font-size:.72rem;color:#111827}
.sp-push small{display:block;font-size:.72rem;color:#374151}
.sp-push em{font-style:normal;margin-left:auto;font-size:.62rem;color:#6b7280;align-self:flex-start}
.sp-push-ico{width:30px;height:30px;border-radius:8px;background:var(--navy);color:var(--amber);display:inline-flex;align-items:center;justify-content:center;font:800 .8rem var(--ff-h);flex:0 0 auto}

/* ── Karten der Akte ──────────────────────────────────────────── */
.sp-act-cream{background:var(--cream)}
.sp-card{background:#fff;border-radius:var(--r-mock);border:1px solid var(--border);padding:1.5rem;box-shadow:var(--sh-2);width:100%;max-width:460px}
.sp-card-h{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-bottom:1rem;flex-wrap:wrap}
.sp-card-h strong{font-family:var(--ff-h);font-size:1.15rem}
.sp-badge{font-size:.76rem;font-weight:700;padding:.3rem .7rem;border-radius:99px;background:#e7f5f3;color:#0b6b62;font-variant-numeric:tabular-nums}
.sp-lbl{display:block;font-size:.84rem;font-weight:600;color:var(--ink-2);margin:0 0 .35rem}
.sp-card input[type=text],.sp-card select{width:100%;font:inherit;font-size:16px;border:1px solid var(--border);border-radius:11px;padding:.5rem .65rem;min-height:44px;background:#fff;color:var(--ink);margin-bottom:.9rem}
.sp-card input[type=text]:focus-visible,.sp-card select:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
.sp-swatches{display:flex;gap:.55rem;margin-bottom:1rem;flex-wrap:wrap}
.sp-swatches button{appearance:none;width:44px;height:44px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--border);background:var(--c,#ccc);cursor:pointer;transition:transform .2s,box-shadow .2s}
.sp-swatches button[aria-checked="true"]{box-shadow:0 0 0 2px var(--navy);transform:scale(1.08)}
.sp-swatches button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.sp-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.sp-step{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.sp-step .sp-lbl{margin:0}
.sp-stepper{display:inline-flex;align-items:center;gap:.2rem;background:var(--cream);border-radius:12px;padding:3px}
.sp-stepper button{appearance:none;width:44px;height:44px;border-radius:10px;border:0;background:#fff;font:700 1.2rem var(--ff-b);color:var(--navy);cursor:pointer;box-shadow:0 1px 2px rgba(15,23,41,.08)}
.sp-stepper button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.sp-stepper b{min-width:2.2rem;text-align:center;font-size:1.15rem}
.sp-hint{font-size:.76rem;font-weight:700;padding:.3rem .7rem;border-radius:99px;background:var(--amber-l);color:#8a5a00}
.sp-tpl-prev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin-bottom:.5rem}
.sp-tpl-note{margin:0 0 1.2rem;font-size:.9rem;color:var(--ink-2);line-height:1.45}
.sp-tpl-st{display:block;font-size:.68rem;font-weight:800;line-height:1.3;border-radius:5px;padding:.1rem .25rem;background:#e7f5f3;color:#0b6b62}
.sp-sh.under .sp-tpl-st{background:#ffe4e6;color:#be123c}
.sp-tpl-prev .sp-sh{cursor:default}
.sp-tpl-prev .sp-sh b{font-size:.78rem}
.sp-tpl-prev .sp-sh-time{font-size:.68rem}

.sp-days{display:flex;gap:.35rem;margin-bottom:1rem}
.sp-days button{appearance:none;flex:1;min-height:44px;border-radius:12px;border:1px solid var(--border);background:#fff;color:var(--ink-2);font:700 .88rem var(--ff-b);cursor:pointer}
.sp-days button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.sp-days button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.sp-ser-grid{display:grid;grid-template-columns:3.2rem repeat(5,1fr);gap:4px;font-size:.7rem}
.sp-ser-grid span{height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;font-variant-numeric:tabular-nums}
.sp-ser-grid .kw{justify-content:flex-start;color:var(--ink-3);font-weight:600}
.sp-ser-grid .hd{color:var(--ink-3);height:18px}
.sp-ser-grid .c{background:#f3f1ec}
.sp-ser-grid .c.on{background:var(--sp-ok);color:#fff}
/* Zeilenweises Einblenden nach einer Aenderung (Takt in js/schichtplanung.js) */
.sp-ser-grid span{transition:opacity .25s ease}
.sp-ser-grid span.pend{opacity:0}
.sp-ser-grid .c.skip{background:repeating-linear-gradient(135deg,#fecdd3 0 4px,#fff1f2 4px 8px);color:#be123c}
.sp-ser-legend{list-style:none;padding:0;margin:.8rem 0 0;display:grid;gap:.4rem;font-size:.92rem;color:var(--ink-2);line-height:1.4}
.sp-ser-legend li{display:flex;gap:.5rem;align-items:center}
.sp-ser-out{margin:.7rem 0 0;font-size:1rem;color:var(--ink-2);line-height:1.5;max-width:60ch}
.sp-ser-out b{color:var(--ink)}

/* Akt 3: Versuche */
.sp-try{width:100%;max-width:440px;display:grid;gap:.6rem}
.sp-try button{appearance:none;display:flex;gap:.8rem;align-items:center;text-align:left;width:100%;min-height:64px;padding:.8rem 1rem;border-radius:16px;border:1px solid var(--ax-line);background:var(--ax-night-2);color:#fff;font-family:inherit;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.sp-try button:hover{background:#1a2844}
.sp-try button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.sp-try button i{font-size:1.3rem;color:var(--amber)}
.sp-try button b{display:block;font-size:.98rem}
.sp-try button small{display:block;color:var(--ax-text-dim);font-size:.84rem}
.sp-try button.no{border-color:#fb7185;animation:spNo .5s ease}
.sp-try button.yes{border-color:#34d399}
.sp-try-out{margin:.4rem 0 0;min-height:3em;color:#cfd8e8;font-size:.95rem;line-height:1.5}
.sp-try-out b{color:#fff}

/* Akt 4: Sperrbildschirm als Mini-Szene in drei Schritten */
.sp-scene-dev{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.sp-scene-tag{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.sp-scene-dev.plan .sp-scene-tag{opacity:0;transition:opacity .5s}
.sp-scene[data-step="3"] .sp-scene-dev.plan .sp-scene-tag,.sp-scene.static .sp-scene-dev.plan .sp-scene-tag{opacity:1}
.sp-scene.static .sp-scene-dev{width:100%}
.sp-scene{width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem}
.sp-scene-row{display:flex;align-items:center;justify-content:center;gap:1.4rem;flex-wrap:wrap}
.sp-lock{position:relative;width:min(280px,80vw);aspect-ratio:9/15;border-radius:44px;padding:2.2rem 1rem 1.2rem;background:linear-gradient(160deg,#1c2b4a 0%,#0b1322 55%,#3b2a12 100%);box-shadow:0 30px 70px rgba(15,23,41,.35),inset 0 0 0 10px #1a1d24;display:flex;flex-direction:column;align-items:center;color:#fff}
.sp-lock-time{font-size:3.4rem;font-weight:700;letter-spacing:-.03em;line-height:1;margin-top:.8rem}
.sp-lock-date{font-size:.9rem;color:#cfd8e8;margin:.35rem 0 auto}
.sp-lock-n{width:100%;transition:opacity .45s,transform .6s cubic-bezier(.16,1,.3,1)}
.sp-lock-n-in{display:flex;gap:.55rem;align-items:center;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:16px;padding:.6rem .7rem}
.sp-lock-n b{display:block;font-size:.8rem}
.sp-lock-n small{display:block;font-size:.8rem;color:#e2e8f0}
.sp-lock-n em{font-style:normal;margin-left:auto;font-size:.66rem;color:#cbd5e1;align-self:flex-start}
.sp-lock[data-step="0"] .sp-lock-n{opacity:0;transform:translateY(-40px)}
.sp-lock-acts{display:none;gap:5px;margin-top:6px}
.sp-lock-acts>span{position:relative;display:block;text-align:center;padding:.6rem;border-radius:13px;background:rgba(255,255,255,.16);font-size:.88rem;font-weight:600}
.sp-lock-acts .yes{color:#fff;background:rgba(13,148,136,.55)}
.sp-lock[data-step="2"] .sp-lock-acts{display:grid;animation:tbIn .4s cubic-bezier(.16,1,.3,1)}
.sp-lock-finger{display:none;position:absolute;right:18%;top:45%;font-size:1.9rem;line-height:1;color:#fff;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.sp-lock[data-step="2"] .sp-lock-finger{display:block;animation:spFingerIn 1s cubic-bezier(.16,1,.3,1) .5s backwards}
@keyframes spFingerIn{from{opacity:0;transform:translate(30px,40px)}to{opacity:1;transform:none}}
.sp-lock[data-step="2"] .sp-lock-acts .yes::after{content:'';position:absolute;inset:-3px;border-radius:15px;border:3px solid var(--amber);opacity:0;animation:spRing 1.1s ease-out 1.4s 2}
@keyframes spRing{0%{opacity:1;transform:scale(.92)}100%{opacity:0;transform:scale(1.08)}}
.sp-lock[data-step="3"] .sp-lock-n{display:none}
.sp-lock-app{display:none;width:100%;background:#fff;color:#111827;border-radius:16px;border-left:5px solid #d97706;padding:.8rem .9rem;font-size:.92rem;line-height:1.4}
.sp-lock-app span{color:var(--sp-ok);font-weight:700;white-space:nowrap}
.sp-lock[data-step="3"] .sp-lock-app{display:block;animation:tbIn .45s cubic-bezier(.16,1,.3,1)}
.sp-tile{width:190px;background:#fff;border:1px solid var(--border);border-left:4px solid #d97706;border-radius:16px;padding:.9rem 1rem;box-shadow:0 18px 40px rgba(15,23,41,.1);display:grid;gap:.15rem;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s cubic-bezier(.16,1,.3,1)}
.sp-tile-h{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.sp-tile b{font-size:1.05rem}
.sp-tile small{color:var(--ink-3);font-size:.85rem}
.sp-tile-p{display:flex;align-items:center;gap:.4rem;margin-top:.4rem;font-weight:600}
.sp-tile-p .sp-av{--c:#7c3aed}
.sp-tile-p i{color:#22c55e;font-size:1.2rem}
.sp-scene[data-step="3"] .sp-tile,.sp-scene.static .sp-tile{opacity:1;transform:none}
.sp-lock-cap{margin:0;min-height:1.6em;font:600 1.15rem/1.45 var(--ff-h);color:var(--ink);text-align:center;max-width:60ch}
.sp-again{appearance:none;display:inline-flex;align-items:center;gap:.4rem;padding:0 1.1rem;border-radius:99px;border:1px solid var(--border);background:#fff;color:var(--navy);font:600 .95rem var(--ff-b);cursor:pointer}
.sp-again[hidden]{display:none}
/* Reduzierte Bewegung: drei Handys statisch nebeneinander */
.sp-scene.static .sp-scene-row{flex-wrap:nowrap;align-items:flex-start;gap:.7rem;width:100%}
.sp-fig{margin:0;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.sp-scene.static .sp-lock{width:100%;max-width:175px;border-radius:28px;padding:1.3rem .5rem .7rem;box-shadow:0 18px 40px rgba(15,23,41,.3),inset 0 0 0 6px #1a1d24}
.sp-scene.static .sp-lock-time{font-size:1.9rem;margin-top:.4rem}
.sp-scene.static .sp-lock-date{font-size:.66rem}
.sp-scene.static .sp-lock-n-in{padding:.4rem .45rem;gap:.35rem;border-radius:12px}
.sp-scene.static .sp-push-ico{width:22px;height:22px;font-size:.62rem;border-radius:6px}
.sp-scene.static .sp-lock-n b,.sp-scene.static .sp-lock-n small{font-size:.62rem}
.sp-scene.static .sp-lock-n em{display:none}
.sp-scene.static .sp-lock-acts>span{font-size:.7rem;padding:.4rem}
.sp-scene.static .sp-lock-finger{font-size:1.3rem}
.sp-scene.static .sp-lock-app{font-size:.72rem;padding:.5rem .55rem}
.sp-scene.static .sp-tile{width:100%;max-width:175px}
.sp-scene.static .sp-lock-cap{font-size:1rem}
.sp-link{display:inline-flex;gap:.4rem;align-items:center;min-height:44px;font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:3px;margin-top:.4rem}

/* Akt 5: Kalender-Abo */
.sp-cal{width:100%;max-width:470px;background:#fff;border:1px solid var(--border);border-radius:var(--r-mock);box-shadow:var(--sh-2);padding:1.3rem}
.sp-seg-light{display:flex;background:var(--cream);border-color:var(--border);margin-bottom:1rem}
.sp-seg-light button{flex:1;color:var(--ink-2);padding:.5rem .6rem}
.sp-seg-light button[aria-pressed="true"]{background:var(--navy);color:#fff}
.sp-url{display:flex;gap:.5rem;align-items:center;background:var(--cream);border-radius:12px;padding:.45rem .45rem .45rem .7rem}
.sp-url code{flex:1;min-width:0;font:.72rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-url code.fresh{animation:spFresh 1s ease}
@keyframes spFresh{0%{background:#fde68a}100%{background:transparent}}
.sp-url-btn{appearance:none;flex:0 0 auto;min-height:44px;border-radius:9px;border:1px solid var(--border);background:#fff;font:600 .78rem var(--ff-b);color:var(--ink-2);cursor:pointer;padding:0 .65rem;display:inline-flex;gap:.3rem;align-items:center}
.sp-url-btn:focus-visible,.sp-sub:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.sp-old{margin:.45rem 0 0;font:.7rem ui-monospace,SFMono-Regular,Menlo,monospace;color:#be123c;text-decoration:line-through;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-old[hidden]{display:none}
.sp-howto{margin:1rem 0;padding-left:1.3rem;display:grid;gap:.3rem;font-size:.9rem;color:var(--ink-2);line-height:1.5}
.sp-howto li{animation:tbIn .4s cubic-bezier(.16,1,.3,1) backwards}
.sp-sub{appearance:none;width:100%;min-height:52px;border:0;border-radius:12px;background:var(--navy);color:#fff;font:700 1.05rem var(--ff-b);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.45rem}
.sp-sub.done{background:var(--sp-ok);cursor:default}
.sp-calapp{margin-top:1rem;border-radius:16px;border:1px solid var(--border);overflow:hidden}
.sp-ca-h{display:flex;justify-content:space-between;align-items:center;padding:.55rem .8rem;font-size:.8rem;font-weight:700;background:#f8fafc;border-bottom:1px solid var(--border)}
.sp-ca-h span{font-weight:500;color:var(--ink-3);font-size:.72rem}
.sp-ca-d{display:grid;grid-template-columns:4.2rem 1fr;border-bottom:1px solid #f1f5f9;min-height:40px}
.sp-ca-d:last-child{border-bottom:0}
.sp-ca-d>span{font-size:.7rem;color:var(--ink-3);padding:.5rem .6rem;font-weight:600}
.sp-ca-d>div{padding:.3rem .4rem;display:grid;gap:.25rem}
.sp-ca-e{display:flex;align-items:center;gap:.4rem;border-radius:7px;padding:.25rem .5rem;font-size:.78rem;line-height:1.3;animation:tbIn .45s cubic-bezier(.16,1,.3,1) backwards}
.sp-ca-e[hidden]{display:none}
.sp-ca-e.own{background:#f1f5f9;color:#475569;animation:none}
.sp-ca-e.sh{background:color-mix(in srgb,var(--c) 16%,#fff);border-left:3px solid var(--c);color:var(--ink)}
.sp-ca-e.ab{background:repeating-linear-gradient(135deg,#e2e8f0 0 4px,#f8fafc 4px 8px);color:var(--ink-2)}
.sp-ca-e b{font-weight:700}
/* Herkunft: SL-UP-Eintraege tragen das S-Chip, private Termine nicht. */
.sp-src{display:inline-block;flex:0 0 18px;width:18px;height:18px;border-radius:5px;background:var(--navy);color:var(--amber);font:800 .62rem/18px var(--ff-h);text-align:center}
.sp-cal-legend{list-style:none;padding:0;margin:.9rem 0 0;display:grid;gap:.45rem;font-size:.9rem;color:var(--ink-2)}
.sp-cal-legend li{display:flex;align-items:center;gap:.55rem}
.sp-lg{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:flex-start;width:34px;height:22px;border-radius:6px;padding-left:2px}
.sp-lg.own{background:#f1f5f9;border:1px solid #e2e8f0}
.sp-lg.sh{background:color-mix(in srgb,#0d9488 16%,#fff);border-left:3px solid #0d9488}
.sp-lg.ab{background:repeating-linear-gradient(135deg,#e2e8f0 0 4px,#f8fafc 4px 8px)}
.sp-lg.on{width:22px;background:var(--sp-ok);padding:0}
.sp-lg.skip{width:22px;padding:0;background:repeating-linear-gradient(135deg,#fecdd3 0 4px,#fff1f2 4px 8px)}
.sp-lg.off{width:22px;padding:0;background:#f3f1ec;border:1px solid #e7e3da}
.sp-steps3{list-style:none;counter-reset:sp3;padding:0;margin:1.4rem 0 1.4rem;display:grid;gap:1.1rem;max-width:60ch}
.sp-steps3 li{counter-increment:sp3;display:flex;align-items:flex-start;gap:.8rem;font-size:1.15rem;line-height:1.45;color:var(--ink)}
.sp-steps3 li::before{content:counter(sp3);flex:0 0 2.2rem;height:2.2rem;border-radius:50%;background:var(--navy);color:#fff;font:700 1rem/2.2rem var(--ff-h);text-align:center}
.sp-steps3 i{color:var(--amber);font-size:1.35rem;margin-top:.2rem}
.sp-tech{margin-top:.6rem;border-top:1px solid var(--border);padding-top:.3rem;max-width:60ch}
.sp-tech summary{cursor:pointer;min-height:48px;padding:.75rem 0;font-weight:600;color:var(--navy)}
.sp-tech summary:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:6px}
.sp-tech .ax-list{margin-top:.4rem}
.sp-tech .sp-url{margin-top:1.1rem}
@keyframes tbIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Akt 6: Export */
.sp-exp{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.sp-exp article{border:1px solid var(--border);border-radius:var(--r-card);padding:1.4rem;background:#fff}
.sp-exp i{font-size:1.7rem;color:var(--navy)}
.sp-exp h3{font-size:1.1rem;margin:.6rem 0 .3rem}
.sp-exp p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.6}
#spAct6{font-size:clamp(1.9rem,3.6vw,3rem);letter-spacing:-.025em;line-height:1.1;max-width:20ch;margin:0}

.sp-more{margin:2rem 0 0;color:var(--ink-2);font-size:.95rem}
.sp-more a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ── Responsiv ────────────────────────────────────────────────── */
@media(max-width:1100px){
  .sp-stage .ax-browser{width:calc(100% - 285px)}
  .sp-role-b{left:calc((100% - 285px) / 2)}
  .sp-app{grid-template-columns:128px 1fr}
}
@media(max-width:900px){
  /* Bis 900 px stehen Browser und Handy untereinander (apps-showcase.css
     stapelt erst ab 860 px; hier fuer die Schichtplanung vorgezogen). */
  .sp-stage{height:auto;margin-top:2rem}
  .sp-stage .ax-devices{position:static;display:flex;flex-direction:column;align-items:center;gap:1.75rem}
  .sp-stage .ax-browser,.sp-stage .ax-phone{position:relative;left:auto;right:auto;top:auto}
  .sp-stage .ax-browser{width:100%;max-width:640px;height:min(470px,74vh)}
  .sp-stage .ax-phone{width:min(262px,82vw);height:auto;aspect-ratio:262/520}
  /* Rollen-Schilder direkt ueber dem jeweiligen Geraet, im Fluss. */
  .sp-role{position:static;transform:none;margin-bottom:-.9rem;white-space:normal}
  .sp-role-b{order:0}
  .sp-stage .ax-browser{order:1}
  .sp-role-p{order:2}
  .sp-stage .ax-phone{order:3}
  .sp-flow{display:none}
  /* Tour-Satz bleibt beim Scrollen sichtbar. overflow:clip statt hidden,
     sonst greift sticky im Hero nicht. */
  .sp .ax-hero{overflow:clip}
  .sp-tour{position:sticky;top:76px;z-index:20}
  .sp-exp{grid-template-columns:1fr}
}
@media(max-width:560px){
  .sp-scene.static .sp-scene-row{flex-direction:column;align-items:center}
  .sp-fig{width:100%}
}
@media(max-width:640px){
  /* Schmal: Team als waagerechte Leiste ueber dem Plan */
  .sp-app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .sp-pool{padding:.55rem .6rem;gap:.35rem}
  .sp-pool-h,.sp-pool-tip{display:none}
  .sp-people{flex-direction:row;overflow-x:auto}
  .sp-pp{width:auto;flex:0 0 auto;min-height:40px}
  .sp-pp small{display:none}
  .sp-main{padding:.6rem .45rem .5rem}
  /* Sieben lesbare Tage statt sieben Striche: der Plan scrollt waagerecht. */
  .sp-week{gap:.3rem;grid-template-columns:repeat(5,minmax(68px,1fr));overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:4px}
  .sp-tour{grid-template-columns:1fr;gap:.35rem;padding:.75rem .9rem}
  .sp-sh{padding:.2rem .2rem .25rem;border-left-width:2px}
  .sp-sh-t em{font-size:.52rem;padding:0 .15rem}
  .sp-sh-p .sp-av{width:15px;height:15px;font-size:.46rem}
  .sp-row3{grid-template-columns:1fr 1fr}
  .sp-row3>div:last-child{grid-column:1/-1}
  .sp-card,.sp-cal{padding:1.1rem}
  .sp-toast{left:8px;right:8px;max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .sp *,.sp *::before,.sp *::after{animation:none!important;transition:none!important}
}