/* DIE SPRUNGLEISTE — CRM-Seite (15.10.2026, Wirt: „vertikale Striche, eine Scroll-Übersicht, mit einem Klick mehrere
   Checkpoints überspringen und gleich irgendwo sein"). Rechts am Rand ein Strich je Station — eine Station ist ein
   Schritt in einer Sektion (die Sätze, die Kreise, die Schritte des Editors). Zwischen den Sektionen mehr Luft, der
   erste Strich einer Sektion etwas länger. Der aktuelle Strich ist lang und satt; Drüberfahren zeigt den Namen.
   Auf dunklen Sektionen werden die Striche hell. Ablauf sprungleiste.js. Präfix sl-. */
.sl{position:fixed;right:28px;top:50%;z-index:30;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;
  --sl-farbe:#101013;--sl-blass:#B9B9C0;--sl-schild:#101013;--sl-schrift:#FFFFFF;transition:opacity .3s}
.sl.dunkel{--sl-farbe:#FFFFFF;--sl-blass:#6A6A72;--sl-schild:#FFFFFF;--sl-schrift:#101013}
.sl-gruppe{display:flex;flex-direction:column;align-items:flex-end}
.sl-gruppe + .sl-gruppe{margin-top:14px}
.sl-punkt{position:relative;width:52px;height:14px;padding:0;border:0;background:none;cursor:pointer;display:block}
.sl-punkt::after{content:"";position:absolute;right:0;top:6px;width:12px;height:2px;border-radius:1px;background:var(--sl-blass);
  transition:width .25s cubic-bezier(.2,.7,.2,1),background .25s}
.sl-punkt.erster::after{width:18px}
.sl-punkt:hover::after,.sl-punkt:focus-visible::after{width:26px;background:var(--sl-farbe)}
.sl-punkt.an::after{width:32px;background:var(--sl-farbe)}
.sl-punkt:focus-visible{outline:none}
.sl-punkt:focus-visible::before{content:"";position:absolute;right:-6px;top:0;width:44px;height:14px;border-radius:4px;box-shadow:0 0 0 2px #B356FF}
/* der Name links neben dem Strich */
.sl-name{position:absolute;right:46px;top:50%;height:28px;margin-top:-14px;padding:0 12px;border-radius:14px;background:var(--sl-schild);color:var(--sl-schrift);
  display:flex;align-items:center;font:500 13px/1 'DM Sans',system-ui,sans-serif;white-space:nowrap;pointer-events:none;
  opacity:0;transform:translateX(6px);transition:opacity .2s,transform .25s}
.sl-name small{margin-right:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.sl-punkt:hover .sl-name,.sl-punkt:focus-visible .sl-name{opacity:1;transform:none}
html.dt-offen .sl{opacity:0;pointer-events:none}
@media (max-width:1279px){ .sl{right:6px} .sl-punkt{width:40px} .sl-name{right:38px} }
@media (max-width:999px){ .sl{display:none} }