/* ==============================================================
   sprungleiste.css  ·  Besitzer: P1 Kopf & Fuss  ·  v4 (25.09.2026)
   K11 Sprungleiste "Auf dieser Seite" (nur unter 62rem): Chips im
   Etikett-Stil, mobil wischbar. Die Sprungziele landen unter dem
   Sticky-Kopf, nicht dahinter: html{scroll-padding-top} in kopf.css
   (= Kopfhoehe + 0,75rem) gilt fuer jeden Anker.
   Altregeln aus v3 zurueckgebaut; Sicherung:
   _backups-vor-aenderung-2026-09-25-p1/.
   ============================================================== */

.sprungleiste{background-color:var(--flaeche-wash)}
.sl-innen{display:flex;align-items:center;gap:.5rem .9rem;padding-block:.6rem;min-width:0}

/* Beschriftung wie Kicker (Saira-Versalien, 14 px), nicht Mono (Plan 6) */
.sl-k{
  margin:0;flex:none;
  font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;
  font-size:.875rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);
}

/* Wischreihe: die Kante rechts blendet aus, damit man sieht, dass es
   weitergeht (Maske, keine Farbe; nur solange die Reihe ueberlaeuft
   waere schoener, geht aber nicht ohne JS - die Ausblendung ist 1,5rem). */
.sl-liste{
  list-style:none;margin:0;padding:.15rem .1rem;min-width:0;
  display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;
  overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg, black calc(100% - 1.5rem), transparent);
          mask-image:linear-gradient(90deg, black calc(100% - 1.5rem), transparent);
}
.sl-liste::-webkit-scrollbar{display:none}
.sl-liste li{flex:none;scroll-snap-align:start}
.sl-liste li:last-child{padding-right:1.25rem}   /* letzter Chip nicht unter der Ausblendung */

.sl-liste a{
  display:inline-flex;align-items:center;min-height:44px;padding:.35rem .8rem;white-space:nowrap;
  border:1px solid var(--line-2);border-radius:var(--r-chip);background-color:var(--flaeche-licht);
  font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;
  font-size:.875rem;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text);text-decoration:none;
  transition:border-color var(--t-kurz) var(--ease),box-shadow var(--t-kurz) var(--ease);
}
.sl-liste a:hover,.sl-liste a:focus-visible{border-color:var(--accent-text);color:var(--accent-text);box-shadow:2px 2px 0 var(--platte)}

/* Link zu einem Bereich, der gerade nicht gewaehlt ist, ausblenden */
body:has(#zg-privat:checked)  .sl-liste [data-zg="gewerbe"],
body:has(#zg-gewerbe:checked) .sl-liste [data-zg="privat"]{display:none}

@media (min-width:62rem){
  .sprungleiste{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sl-liste a{transition:none}
}