/* Storyleiste (seit 28.10.2026), Baustein inc/storyleiste.php, Ansicht assets/storyleiste.js */
.storyleiste{background:#fff;border-bottom:1px solid var(--line,#e2e8de)}
.sl-innen{max-width:var(--maxw,1300px);margin:0 auto;padding:14px 24px 10px}
.sl-reihe{display:flex;gap:22px;justify-content:center;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 2px 4px}
.sl-reihe::-webkit-scrollbar{display:none}
.sl-kreis{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--ink,#26332b);width:84px}
.sl-ring{display:block;width:76px;height:76px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,#3e5a4c,#7fa36b,#d8b25a,#3e5a4c);transition:transform .18s}
.sl-symbol{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;border:3px solid #fff;background:var(--gruen,#3e5a4c);color:#fff}
.sl-symbol svg{width:46%;height:46%}
.sl-kreis.gesehen .sl-ring{background:#cfd8d0}
.sl-kreis:hover .sl-ring,.sl-kreis:focus-visible .sl-ring{transform:scale(1.06)}
.sl-kreis:focus-visible{outline:none}
.sl-kreis:focus-visible .sl-name{text-decoration:underline}
.sl-name{font-size:.78rem;font-weight:600;line-height:1.2;text-align:center;max-width:84px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){
  .sl-innen{padding:10px 12px 8px}
  .sl-reihe{justify-content:flex-start;gap:14px}
  .sl-kreis{width:72px}
  .sl-ring{width:66px;height:66px}
  .sl-name{font-size:.74rem;max-width:72px}
}

/* Ansicht */
.sl-offen{overflow:hidden}
.sl-ansicht{position:fixed;inset:0;z-index:1000;background:rgba(18,24,20,.96);display:flex;align-items:center;justify-content:center;touch-action:none}
.sl-buehne{position:relative;height:min(92vh,92svh);aspect-ratio:9/16;max-width:100vw;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 20px 60px rgba(0,0,0,.5);user-select:none;-webkit-user-select:none}
.sl-medium{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.sl-oben{position:absolute;left:0;right:0;top:0;padding:10px 10px 30px;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0));z-index:3;pointer-events:none}
.sl-balken{display:flex;gap:4px}
.sl-balken i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden;display:block}
.sl-balken i b{display:block;height:100%;width:0;background:#fff}
.sl-kopf{display:flex;align-items:center;gap:8px;margin-top:9px;color:#fff;font-size:.85rem;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.sl-kopf .sl-ksym{width:30px;height:30px;border-radius:50%;background:#3e5a4c;color:#fff;border:2px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center}
.sl-kopf .sl-ksym svg{width:16px;height:16px}
.sl-kopf .sl-zeit{font-weight:400;opacity:.85}
.sl-kopf .sl-luecke{flex:1}
.sl-knopf{pointer-events:auto;background:rgba(0,0,0,.25);border:0;color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sl-knopf:hover{background:rgba(0,0,0,.45)}
.sl-knopf svg{width:20px;height:20px}
.sl-unten{position:absolute;left:0;right:0;bottom:0;padding:40px 12px 14px;background:linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,0));z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.sl-link{pointer-events:auto;background:#fff;color:#26332b;font-weight:700;font-size:.92rem;padding:10px 20px;border-radius:999px;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.sl-link:hover{background:#eef2ef}
.sl-hinweise{display:flex;gap:8px;align-items:center;justify-content:space-between;width:100%;color:#fff;font-size:.72rem;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.sl-marke{background:rgba(255,255,255,.92);color:#26332b;font-weight:700;padding:2px 8px;border-radius:4px;text-shadow:none}
.sl-ki{opacity:.92;margin-left:auto;transition:opacity .6s}
.sl-ki.weg{opacity:0}
.sl-tippen{position:absolute;top:70px;bottom:90px;z-index:2;background:none;border:0;cursor:pointer;padding:0}
.sl-tippen.zurueck{left:0;width:32%}
.sl-tippen.weiter{right:0;width:68%}
.sl-pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#26332b;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.sl-pfeil svg{width:22px;height:22px}
.sl-pfeil.links{left:calc(50% - min(92vh,92svh) * 9 / 32 - 64px)}
.sl-pfeil.rechts{right:calc(50% - min(92vh,92svh) * 9 / 32 - 64px)}
.sl-pfeil[hidden]{display:none}
.sl-schliessen{position:absolute;top:16px;right:18px;z-index:5;width:44px;height:44px;border-radius:50%;border:0;background:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sl-schliessen svg{width:28px;height:28px}
.sl-laden{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none}
.sl-laden::after{content:"";width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;animation:sl-dreh .9s linear infinite}
.sl-laden[hidden]{display:none}
@keyframes sl-dreh{to{transform:rotate(360deg)}}
@media (max-width:760px),(max-aspect-ratio:3/4){
  .sl-ansicht{background:#000}
  .sl-buehne{height:100%;height:100svh;width:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}
  .sl-pfeil,.sl-schliessen{display:none}
}
@media (prefers-reduced-motion:reduce){.sl-ring{transition:none}.sl-laden::after{animation-duration:2.5s}}
.sl-ansicht[hidden],.sl-knopf[hidden]{display:none}