/* ======================================================================
   SPRUNGMENÜ — die Leiste mit den Sprungmarken einer Seite
   ======================================================================
   ❗️Eine Auszeichnung, sechs Bauarten. Der Renderer gibt immer dieselben
      Zonen aus; was eine Bauart ausmacht, steht allein unter
      `.fw-sprung--<slug>`. Dasselbe Muster wie beim Hero — eine weitere
      Bauart ist ein Eintrag plus ein Abschnitt hier.
   ❗️Farben kommen aus den Design-Werten, immer MIT Rückfall: eine var() ohne
      Rückfallwert macht die ganze Eigenschaft ungültig.
   ====================================================================== */

.fw-sprung{
  --sp-bg:var(--sm-bg, color-mix(in srgb, var(--color-primary,#0a6ebd) 6%, #fff));
  --sp-text:var(--sm-text, var(--color-text,#1f2937));
  --sp-aktiv:var(--sm-accent, var(--color-primary,#0a6ebd));
  --sp-line:color-mix(in srgb, var(--sp-text) 14%, transparent);
  --sp-gr:var(--fw-sprung-groesse, 14px);
  position:relative; z-index:20;
  background:var(--sp-bg); color:var(--sp-text);
  border-bottom:1px solid var(--sp-line);
  font-size:var(--sp-gr);
}
.fw-sprung *{box-sizing:border-box}
.fw-sprung__wrap{
  max-width:1180px; margin:0 auto; padding:0 clamp(18px,4vw,32px);
  display:flex; align-items:center; gap:6px 18px; flex-wrap:wrap; min-height:46px;
}
.fw-sprung__punkt{
  display:inline-flex; align-items:center; gap:.5em; padding:.55em 0;
  color:inherit; text-decoration:none; line-height:1.2; white-space:nowrap;
  border-bottom:2px solid transparent; transition:color .13s linear, border-color .13s linear;
}
.fw-sprung__punkt:hover,
.fw-sprung__punkt[aria-current="true"]{color:var(--sp-aktiv)}
.fw-sprung__titel{
  font-weight:700; letter-spacing:.03em; padding:.55em 0; white-space:nowrap;
  color:color-mix(in srgb, var(--sp-text) 72%, transparent);
}
.fw-sprung__text{padding:.55em 0; color:color-mix(in srgb, var(--sp-text) 62%, transparent)}
.fw-sprung__trenner{width:1px; height:1.3em; background:var(--sp-line); flex:none}
.fw-sprung__hinweis{
  padding:.55em 0; font-style:italic;
  color:color-mix(in srgb, var(--sp-text) 52%, transparent);
}

/* ❗️Klebend nur, wenn es auch etwas bringt: unter einem klebenden Header muss
   die Leiste um dessen Höhe versetzt sein, sonst schiebt sie sich darüber.
   Die Höhe liefert das Gerüst als --fw-kopf-hoehe; ohne den Wert klebt sie
   oben, was ohne klebenden Header genau richtig ist. */
.fw-sprung--klebend{position:sticky; top:var(--fw-kopf-hoehe, 0px)}

/* ======================================================================
   DER ORT — wo die Leiste sitzt
   ======================================================================
   ❗️Getrennt vom Design. „Am Rand" war früher beides zugleich: eine Form UND
      eine Stelle. Deshalb liess sich keine Pille an den Rand legen und kein
      Punkt unter den Header. Jetzt bestimmt der Ort nur die Lage und die
      Richtung; wie ein Eintrag aussieht, sagt das Design.
   ====================================================================== */
.fw-sprung--ort-oben{
  position:sticky; top:calc(var(--fw-kopf-hoehe, 0px) + 10px);
  background:none; border:0; z-index:30;
}
.fw-sprung--ort-oben .fw-sprung__wrap{
  width:fit-content; max-width:calc(100% - 24px); margin:10px auto; min-height:0;
  padding:6px 14px; border-radius:999px;
  background:var(--sp-bg); border:1px solid var(--sp-line);
  box-shadow:0 12px 34px color-mix(in srgb, var(--sp-text) 16%, transparent);
}
.fw-sprung--ort-unten{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  border-bottom:0; border-top:1px solid var(--sp-line);
}
/* Senkrecht am Rand: der Kasten wird zur schmalen Säule auf halber Höhe. */
.fw-sprung--ort-rechts,
.fw-sprung--ort-links,
.fw-sprung--ort-rechts-oben,
.fw-sprung--ort-links-oben{
  position:fixed; z-index:30; background:none; border:0; width:auto;
}
.fw-sprung--ort-rechts,
.fw-sprung--ort-links{top:50%; transform:translateY(-50%)}
/* ❗️Am Header statt auf halber Höhe: dieselbe Säule, nur oben angeschlagen.
   Der Abstand kommt aus der gemessenen Kopfhöhe — ohne sie klebte sie am
   oberen Bildrand und läge hinter dem Header.
   ❗️OHNE LUFT DAZWISCHEN (Ansage 2026-08-20). Vorher standen 12 px zwischen
      Header und Säule, und die Säule war rundherum abgerundet — sie schwebte
      damit unter dem Header wie ein zweites, fremdes Ding. „Rechts am Header"
      heisst aber: sie GEHÖRT zum Header und hängt daran. Deshalb sitzt ihre
      Oberkante jetzt genau auf der Kopfhöhe. */
.fw-sprung--ort-rechts-oben,
.fw-sprung--ort-links-oben{top:var(--fw-kopf-hoehe, 0px)}
.fw-sprung--ort-rechts, .fw-sprung--ort-rechts-oben{right:clamp(10px,2vw,22px)}
.fw-sprung--ort-links,  .fw-sprung--ort-links-oben {left:clamp(10px,2vw,22px)}
.fw-sprung--ort-rechts .fw-sprung__wrap,
.fw-sprung--ort-links  .fw-sprung__wrap,
.fw-sprung--ort-rechts-oben .fw-sprung__wrap,
.fw-sprung--ort-links-oben  .fw-sprung__wrap{
  /* ❗️Die Säule braucht RAUM (Ansage 2026-08-20, mit Skizze). Vorher war sie
     so schmal, dass die Namen abgeschnitten dastanden — „Leistungen" wurde zu
     „Leistu…". Eine Sprungmarke, deren Name man nicht lesen kann, ist keine.
     Mindestbreite, damit kurze Namen nicht flattern; Höchstbreite, damit ein
     langer Name die halbe Seite nicht zudeckt. */
  flex-direction:column; gap:4px; padding:12px 14px; margin:0;
  min-height:0; border-radius:16px;
  width:max-content; min-width:150px; max-width:min(260px, 26vw);
  background:var(--sp-bg); border:1px solid var(--sp-line);
  box-shadow:0 12px 34px color-mix(in srgb, var(--sp-text) 14%, transparent);
}
/* ❗️Oben KEINE runden Ecken, wenn sie am Header hängt (Ansage 2026-08-20):
   eine Rundung an einer Kante, die an etwas anstösst, sieht nach Spalt aus.
   Unten bleibt sie rund — dort ist die Säule frei.
   Die Regel steht NACH der gemeinsamen Wrap-Regel weiter oben: bei gleicher
   Gewichtung gewinnt in CSS die spätere. Andersherum bliebe border-radius:16px
   stehen und hier passierte nichts Sichtbares. */
.fw-sprung--ort-rechts-oben .fw-sprung__wrap,
.fw-sprung--ort-links-oben .fw-sprung__wrap{
  border-top-left-radius:0; border-top-right-radius:0;
}
.fw-sprung--ort-rechts .fw-sprung__wrap,
.fw-sprung--ort-rechts-oben .fw-sprung__wrap{align-items:flex-end}
.fw-sprung--ort-links .fw-sprung__wrap,
.fw-sprung--ort-links-oben .fw-sprung__wrap{align-items:flex-start}
.fw-sprung--ort-rechts .fw-sprung__trenner,
.fw-sprung--ort-links .fw-sprung__trenner,
.fw-sprung--ort-rechts-oben .fw-sprung__trenner,
.fw-sprung--ort-links-oben .fw-sprung__trenner{width:100%; height:1px}
.fw-sprung--ort-rechts .fw-sprung__punkt,
.fw-sprung--ort-links .fw-sprung__punkt,
.fw-sprung--ort-rechts-oben .fw-sprung__punkt,
.fw-sprung--ort-links-oben .fw-sprung__punkt{
  border-bottom:0; padding:.45em .3em; width:100%;
}
/* Der Name darf umbrechen statt abgeschnitten zu werden — senkrecht ist Höhe
   das, wovon genug da ist. */
.fw-sprung--ort-rechts .fw-sprung__punkt > span,
.fw-sprung--ort-links .fw-sprung__punkt > span,
.fw-sprung--ort-rechts-oben .fw-sprung__punkt > span,
.fw-sprung--ort-links-oben .fw-sprung__punkt > span{
  white-space:normal; line-height:1.35; overflow-wrap:anywhere;
}
.fw-sprung--ort-rechts .fw-sprung__eintrag,
.fw-sprung--ort-links .fw-sprung__eintrag,
.fw-sprung--ort-rechts-oben .fw-sprung__eintrag,
.fw-sprung--ort-links-oben .fw-sprung__eintrag{align-items:flex-start}


/* ======================================================================
   DIE BAUARTEN — fünf Antworten, nicht fünf Randstile
   ======================================================================
   ❗️Sprungnavigation beantwortet zwei Fragen: WO BIN ICH (Verzeichnis,
      mitlaufende Markierung) und WIE VIEL NOCH (Fortschritt). Vorher waren
      drei der fünf Bauarten dieselbe Zeile Textlinks mit anderem Rand. Jetzt
      unterscheidet sich jede in dem, was sie zeigt.
   ====================================================================== */

/* ---- 1) Leiste mit Fortschritt --------------------------------------- */
.fw-sprung--leiste .fw-sprung__wrap{gap:6px 26px}
.fw-sprung--leiste .fw-sprung__punkt{padding:.8em 0; font-weight:600}
.fw-sprung--leiste .fw-sprung__punkt[aria-current="true"]{border-bottom-color:var(--sp-aktiv)}
/* Der Balken: wie weit die Seite gelesen ist. Gefüllt aus dem Skript. */
.fw-sprung__lauf{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  transform-origin:0 50%; transform:scaleX(var(--fw-sprung-lauf, 0));
  background:var(--sp-aktiv); transition:transform .1s linear;
}
.fw-sprung:not(.fw-sprung--fortschritt) .fw-sprung__lauf{display:none}

/* ---- 2) Inhaltsverzeichnis -------------------------------------------
   Untereinander an einer Linie, mit einem Zeiger, der zur aktuellen Stelle
   wandert. Beantwortet „wo bin ich" am deutlichsten von allen. */
.fw-sprung--verzeichnis .fw-sprung__wrap{
  flex-direction:column; align-items:stretch; gap:0;
  border-left:2px solid var(--sp-line); padding-left:14px; min-height:0;
}
.fw-sprung--verzeichnis .fw-sprung__eintrag{position:relative; padding:.5em 0}
.fw-sprung--verzeichnis .fw-sprung__punkt{border-bottom:0; width:100%}
.fw-sprung--verzeichnis .fw-sprung__punkt::before{
  content:""; position:absolute; left:-16px; top:50%; width:2px; height:0;
  background:var(--sp-aktiv); transform:translateY(-50%);
  transition:height .18s var(--fw-kurve, ease);
}
.fw-sprung--verzeichnis .fw-sprung__punkt[aria-current="true"]::before{height:1.6em}
.fw-sprung--verzeichnis .fw-sprung__punkt[aria-current="true"]{font-weight:700}
.fw-sprung--verzeichnis .fw-sprung__titel{padding:.2em 0 .6em; font-size:.82em}

/* ---- 3) Schritte ------------------------------------------------------
   Nummeriert und verbunden. Zeigt REIHENFOLGE, nicht nur Ziele — für Seiten,
   die einen Ablauf beschreiben. */
.fw-sprung--schritte .fw-sprung__wrap{gap:0; counter-reset:sp}
.fw-sprung--schritte .fw-sprung__punkt{
  counter-increment:sp; position:relative; border-bottom:0;
  padding:.55em 1.4em .55em 0; font-weight:600;
}
.fw-sprung--schritte .fw-sprung__punkt > span::before{
  content:counter(sp, decimal-leading-zero);
  display:inline-block; margin-right:.5em; font-size:.78em; font-weight:700;
  color:var(--sp-aktiv); font-variant-numeric:tabular-nums;
}
/* Die Verbindung zwischen zwei Schritten. */
.fw-sprung--schritte .fw-sprung__punkt:not(:last-child)::after{
  content:""; position:absolute; right:.5em; top:50%; width:.5em; height:1px;
  background:var(--sp-line);
}
.fw-sprung--schritte .fw-sprung__punkt[aria-current="true"] > span::before{
  color:#fff; background:var(--sp-aktiv); border-radius:999px;
  padding:.15em .45em; margin-right:.45em;
}

/* ---- 5) Zusammengeklappt ---------------------------------------------
   Ein Knopf, der sich öffnet. Für Seiten, auf denen die Navigation nicht
   dauerhaft im Weg stehen soll — die Antwort auf „sitzt komisch". */
/* ❗️Eigene Hülle: der Knopf und seine Liste gehören zusammen, und die Liste
   liegt absolut UNTER ihm. Ohne `position:relative` an der Hülle bezieht sie
   sich auf die Seite und landet am linken Rand — genau so war es zu sehen.
   Und die Hülle braucht eine Höhe, sonst hat ein klebender Bereich nichts,
   woran er kleben kann, und verschwindet beim Scrollen. */
.fw-sprung--knopf{
  background:none; border:0; position:relative;
  padding:10px clamp(18px,4vw,32px); display:flex; justify-content:flex-start;
}
.fw-sprung--knopf.fw-sprung--klebend{position:sticky; top:var(--fw-kopf-hoehe, 0px)}
.fw-sprung__auf{
  display:inline-flex; align-items:center; gap:.5em; padding:.5em 1em;
  border-radius:999px; font:inherit; font-size:var(--sp-gr); font-weight:600;
  background:var(--sp-bg); color:var(--sp-text); border:1px solid var(--sp-line);
  box-shadow:0 6px 20px color-mix(in srgb, var(--sp-text) 12%, transparent);
  cursor:pointer;
}
.fw-sprung--knopf .fw-sprung__wrap{
  position:absolute; z-index:2; min-width:200px; max-width:280px;
  top:100%; left:clamp(18px,4vw,32px); margin-top:2px;
  flex-direction:column; align-items:stretch; gap:2px; padding:10px 12px;
  border-radius:14px; background:var(--sp-bg); border:1px solid var(--sp-line);
  box-shadow:0 16px 40px color-mix(in srgb, var(--sp-text) 18%, transparent);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .14s linear, transform .14s var(--fw-kurve, ease), visibility .14s;
}
.fw-sprung--knopf[data-offen] .fw-sprung__wrap{opacity:1; visibility:visible; transform:none}
.fw-sprung--knopf .fw-sprung__punkt{border-bottom:0; padding:.45em .2em}
/* Im Bau-Modus immer offen — sonst könnte man die Einträge nicht anfassen. */
.fw-sprung--knopf.fw-sprung--bau .fw-sprung__wrap{opacity:1; visibility:visible; transform:none}

/* ---- Erscheint erst später -------------------------------------------
   ❗️„Sitzt komisch, sieht random aus" war berechtigt: die Leiste stand von
      Anfang an da, ohne Bezug zu dem, was man gerade liest. Wer sie erst
      erscheinen lässt, wenn man den Titelbereich verlassen hat, gibt ihr einen
      Grund — sie kommt, wenn man sie braucht. */
.fw-sprung--spaeter{
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .22s ease, transform .22s var(--fw-kurve, ease), visibility .22s;
}
.fw-sprung--spaeter[data-da]{opacity:1; visibility:visible; transform:none}
.fw-sprung--spaeter.fw-sprung--bau{opacity:1; visibility:visible; transform:none}

/* ---- 4) Punkte -------------------------------------------------------- */
.fw-sprung--punkte .fw-sprung__punkt{padding:0; border:0; position:relative}
.fw-sprung--punkte .fw-sprung__punkt > span{
  position:absolute; right:22px; top:50%; transform:translateY(-50%);
  padding:.3em .7em; border-radius:8px; white-space:nowrap; font-size:12.5px;
  background:var(--sp-text); color:var(--sp-bg);
  opacity:0; pointer-events:none; transition:opacity .13s linear;
}
.fw-sprung--punkte .fw-sprung__punkt::before{
  content:""; width:10px; height:10px; border-radius:50%; display:block;
  border:2px solid var(--sp-aktiv); background:transparent;
  transition:background-color .13s linear, transform .13s var(--fw-kurve, ease);
}
.fw-sprung--punkte .fw-sprung__punkt:hover::before,
.fw-sprung--punkte .fw-sprung__punkt[aria-current="true"]::before{
  background:var(--sp-aktiv); transform:scale(1.25);
}
.fw-sprung--punkte .fw-sprung__punkt:hover span{opacity:1}
.fw-sprung--punkte .fw-sprung__titel,
.fw-sprung--punkte .fw-sprung__text{display:none}

/* ---- Handy ------------------------------------------------------------
   ❗️Senkrecht am Rand ist auf einem Telefon nichts, was man treffen kann.
      Beide Randformen werden dort zur waagerechten Wischleiste. */
@media (max-width:820px){
  .fw-sprung--ort-rechts, .fw-sprung--ort-links, .fw-sprung--ort-oben,
  .fw-sprung--ort-rechts-oben, .fw-sprung--ort-links-oben{
    position:static; transform:none; right:auto; left:auto; top:auto;
    background:var(--sp-bg); border-bottom:1px solid var(--sp-line);
  }
  .fw-sprung--ort-rechts .fw-sprung__wrap,
  .fw-sprung--ort-links .fw-sprung__wrap,
  .fw-sprung--ort-oben .fw-sprung__wrap,
  .fw-sprung--ort-rechts-oben .fw-sprung__wrap,
  .fw-sprung--ort-links-oben .fw-sprung__wrap{
    flex-direction:row; align-items:center; border-radius:0; border:0; box-shadow:none;
    width:auto; margin:0;
  }
  .fw-sprung--punkte .fw-sprung__punkt > span{
    position:static; transform:none; opacity:1; background:none; color:inherit; padding:0;
  }
  .fw-sprung--punkte .fw-sprung__punkt::before{display:none}
  .fw-sprung__wrap{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  }
  .fw-sprung__wrap::-webkit-scrollbar{display:none}
}

/* ======================================================================
   BEARBEITEN — nur im Layover
   ====================================================================== */
.fw-sprung--bau [data-fwsp]{
  border-radius:7px; outline:1.5px dashed transparent; outline-offset:3px;
  transition:outline-color .12s linear, background-color .12s linear;
}
.fw-sprung--bau [data-fwsp]:hover{
  outline-color:color-mix(in srgb, var(--sp-aktiv) 60%, transparent);
  background:color-mix(in srgb, var(--sp-aktiv) 8%, transparent);
}
.fw-sprung--bau [data-fwsp][data-fwzieht]{opacity:.4}
/* ---- Griff und Stift an jedem Eintrag --------------------------------
   ❗️Dieselben Werkzeuge wie im Header: ⠿ zum Verschieben, ✎ zum Umbenennen.
      Vorher war der Eintrag SELBST beides — ein Klick benannte um, ein Zug
      sortierte. Damit konnte man das eine nicht tun, wofür ein Sprungpunkt da
      ist: hinspringen. */
.fw-sprung__eintrag{display:inline-flex; align-items:center; gap:5px}
.fw-sprung__griff,
.fw-sprung__stift{
  display:none; flex:none; width:19px; height:19px; align-items:center; justify-content:center;
  border-radius:6px; font-size:11px; line-height:1; padding:0;
  background:color-mix(in srgb, var(--sp-text) 9%, transparent);
  border:1px solid var(--sp-line); color:inherit; opacity:.75;
}
.fw-sprung--bau .fw-sprung__eintrag:hover .fw-sprung__griff,
.fw-sprung--bau .fw-sprung__eintrag:hover .fw-sprung__stift{display:inline-flex}
.fw-sprung__griff{cursor:grab; touch-action:none}
.fw-sprung__griff:hover, .fw-sprung__stift:hover{opacity:1;
  background:color-mix(in srgb, var(--sp-aktiv) 22%, transparent)}
.fw-sprung--bau .fw-sprung__punkt{cursor:pointer}

/* ❗️AUSGEBLENDET: für den Besucher gar nicht erst gerendert, im Layover
   gedämpft und beschriftet. Gedämpft werden die KINDER, nicht der Abschnitt —
   sonst wäre der Hinweis genauso blass wie das, worauf er hinweist, und eine
   Deckkraft über 1 gibt es nicht (dieselbe Falle wie beim Hero). */
.fw-sprung--aus:not(.fw-sprung--bau){display:none}
.fw-sprung--aus > .fw-sprung__wrap{opacity:.35; filter:saturate(.2)}
/* ❗️HIER STAND `position:relative` — und genau das schob die ausgeblendete
   Leiste um ihre eigene Klebe-Höhe nach unten. Gedacht war es als Bezug für
   den Hinweis darunter (`::after`). Gebraucht wird es dafür nicht: `.fw-sprung`
   ist ohnehin `position:relative`, und `--klebend` macht daraus `sticky` — auch
   das ist ein Bezugsrahmen für absolut liegende Kinder.
   Was es dagegen anrichtete: `--klebend` setzt `top:var(--fw-kopf-hoehe)`. Bei
   `sticky` ist das der Halt beim Scrollen, bei `relative` eine VERSCHIEBUNG
   nach unten. Diese Regel steht weiter hinten, gewann also — und die Leiste
   sass um genau diesen Betrag zu tief.
   Gemessen (Kopfzeile endet bei 102): Menü ein 102–149, Menü aus 204–251,
   also 102 px zu tief. Gescrollt rutschte sie ganz weg (−96), weil mit dem
   `sticky` auch das Kleben verloren ging. So gemeldet am 2026-08-20:
   „bei menü ein wieder oben, sobald menü aus wieder unten". */
/* ❗️Ein WORT, beiseite gestellt — kein Schild mitten drauf (Ansage
   2026-08-20: „schreibe da nur leicht, nicht penetrant, ausgeblendet").
   Vorher stand hier ein dunkles Etikett mit vollem Satz genau in der Mitte
   der Leiste, also über dem, worauf es sich bezog. Der Hinweis ist eine
   Randnotiz für den, der gerade baut; er muss lesbar sein, nicht laut.
   Deshalb: kein Hintergrund, kein Schatten, halbe Deckkraft, klein — und
   am Rand statt in der Mitte. Anklickbar muss er nicht sein. */
.fw-sprung--aus.fw-sprung--bau::after{
  content:"ausgeblendet";
  position:absolute; z-index:4; pointer-events:none;
  font-size:.68rem; font-weight:500; letter-spacing:.02em; white-space:nowrap;
  color:var(--sp-text); opacity:.5;
}
/* Quer über die Seite: rechts hinein, auf halber Höhe. */
.fw-sprung--ort-kopf.fw-sprung--aus.fw-sprung--bau::after,
.fw-sprung--ort-oben.fw-sprung--aus.fw-sprung--bau::after,
.fw-sprung--ort-unten.fw-sprung--aus.fw-sprung--bau::after{
  right:clamp(10px,2vw,22px); top:50%; transform:translateY(-50%);
}
/* Senkrecht am Rand: dort ist rechts kein Platz — also darunter, mittig.
   `top:100%` heisst „direkt unterhalb", die Leiste selbst bleibt frei. */
.fw-sprung--ort-rechts.fw-sprung--aus.fw-sprung--bau::after,
.fw-sprung--ort-links.fw-sprung--aus.fw-sprung--bau::after,
.fw-sprung--ort-rechts-oben.fw-sprung--aus.fw-sprung--bau::after,
.fw-sprung--ort-links-oben.fw-sprung--aus.fw-sprung--bau::after{
  left:50%; top:100%; transform:translateX(-50%); margin-top:5px;
}

/* ❗️Eine LEERE Leiste gibt es nur im Bau-Modus. Ausserhalb wäre sie ein
   Streifen ohne Inhalt unter dem Header — die Seite sähe für den Betreiber
   anders aus als für den Besucher, und zwar schlechter. Der Hinweis darin
   richtet sich an den, der gerade baut; wer nur draufschaut, soll ihn nicht
   sehen. */
.fw-sprung--leer:not(.fw-sprung--bau){display:none}

/* Die leere Leiste soll erkennbar ein Angebot sein, kein Fehler. */
.fw-sprung--leer .fw-sprung__wrap{
  outline:1.5px dashed color-mix(in srgb, var(--sp-text) 26%, transparent);
  outline-offset:-6px; border-radius:10px;
}