/* OneQrew v7 — Sprungmarken, Element 34.

   Echter neuer Block (oneqrew/sprungmarken), kein v6-Pendant. Umsetzung von
   "taifun-element-34-sprungmarken.html", Varianten A (Leiste) und C
   (Kasten) — Variante B (seitliche Leiste) braucht ein zweispaltiges
   Raster um den gesamten nachfolgenden Seiteninhalt und ist damit Seiten-,
   nicht Blocksache, siehe sprungmarken.v7.twig. Globale [id]-Regel ganz
   unten ist bewusst ungefaehrlich: --oq-sprungmarken-versatz steht auf 0,
   solange dist/js/v7-sprungmarken.js sie nicht setzt — nur Seiten mit
   diesem Block bekommen den Versatz. Aenderungen immer auch in
   sprungmarken.min.css. */

.oq-v7 .oq-sprungmarken {
  --oq-sprungmarken-text-leise: color-mix(in oklab, var(--oq-farbe-text) 74%, var(--oq-farbe-flaeche));
  --oq-sprungmarken-linie-stark: color-mix(in oklab, var(--oq-farbe-text) 30%, var(--oq-farbe-flaeche));
  --oq-sprungmarken-box: color-mix(in oklab, var(--oq-farbe-flaeche) 94%, var(--oq-farbe-text));

  position: relative;
  container-type: inline-size;
}

.oq-v7 .oq-sprungmarken.variant-dark,
.oq-v7 .oq-sprungmarken.variant-dark-alt {
  --oq-farbe-flaeche: var(--oq-farbe-dunkel);
  --oq-farbe-text: var(--oq-farbe-dunkel-text);
  --oq-sprungmarken-box: var(--oq-farbe-dunkel-kachel);
}

.oq-v7 .oq-sprungmarken.variant-dark-alt {
  --oq-farbe-flaeche: var(--oq-farbe-dunkel-alt);
}

.oq-v7 .oq-sprungmarken.variant-neutral,
.oq-v7 .oq-sprungmarken.variant-neutral-alt {
  --oq-farbe-flaeche: var(--oq-farbe-flaeche-alt);
  --oq-sprungmarken-box: var(--oq-farbe-flaeche-hell, #fff);
}

/* --- Darstellung Leiste: klebend unter der Kopfleiste ----------------------- */
.oq-v7 .oq-sprungmarken--leiste {
  position: sticky;
  top: var(--oq-sprungmarken-top, 64px);
  z-index: 120;
  background: var(--oq-farbe-flaeche, var(--white, #fff));
  border-bottom: 1px solid var(--oq-farbe-linie, #e5e5e5);
}

.oq-v7 .oq-sprungmarken__leiste-in {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

.oq-v7 .oq-sprungmarken--leiste nav {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
}

.oq-v7 .oq-sprungmarken__leiste-titel {
  flex: none;
  font-size: .82rem;
  font-weight: 650;
  color: var(--oq-sprungmarken-text-leise);
  white-space: nowrap;
}

.oq-v7 .oq-sprungmarken__huelle {
  position: relative;
  flex: 1;
  min-width: 0;
}

.oq-v7 .oq-sprungmarken__huelle::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 0;
  bottom: 0;
  width: 36px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--oq-farbe-flaeche, var(--white, #fff)));
}

.oq-v7 .oq-sprungmarken--leiste ol {
  position: relative;
  display: flex;
  gap: 4px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 8px;
}

.oq-v7 .oq-sprungmarken--leiste ol::-webkit-scrollbar {
  display: none;
}

.oq-v7 .oq-sprungmarken--leiste a {
  display: inline-flex;
  align-items: center;
  position: relative;
  white-space: nowrap;
  scroll-snap-align: start;
  min-height: 44px;
  padding: 9px 14px;
  border-radius: var(--oq-radius-klein);
  font-size: .95rem;
  font-weight: 600;
  color: var(--oq-sprungmarken-text-leise);
  text-decoration: none;
  transition: color var(--oq-transition), background var(--oq-transition);
}

.oq-v7 .oq-sprungmarken--leiste a:hover {
  color: var(--oq-farbe-text);
  background: var(--oq-sprungmarken-box);
}

.oq-v7 .oq-sprungmarken--leiste a[aria-current="true"] {
  color: var(--oq-farbe-marke);
}

.oq-v7 .oq-sprungmarken--leiste a[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  border-radius: var(--oq-radius-klein);
  background: var(--oq-farbe-marke);
}

/* Gleitender Indikator: von v7-sprungmarken.js einmalig ins <ol> gesetzt
   und per transform positioniert/skaliert (nie width/left -- reines
   Transform bleibt interrupt-/GPU-freundlich). Sobald das Attribut steht,
   uebernimmt er die Pro-Eintrag-Linie oben, damit nicht zwei Striche
   gleichzeitig sichtbar sind. Ohne JS bleibt die statische Linie aktiv. */
.oq-v7 .oq-sprungmarken--leiste[data-oq-sprungmarken-indikator] a[aria-current="true"]::after {
  display: none;
}

.oq-v7 .oq-sprungmarken__indikator {
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 1px;
  height: 2px;
  border-radius: var(--oq-radius-klein);
  background: var(--oq-farbe-marke);
  transform-origin: left center;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .oq-v7 .oq-sprungmarken__indikator {
    transition: transform 220ms cubic-bezier(0.65, 0, 0.35, 1);
  }
}

/* --- Darstellung Kasten: ohne Kleben, ohne aktiven Zustand ------------------ */
.oq-v7 .oq-sprungmarken--kasten {
  background: var(--oq-farbe-flaeche);
  color: var(--oq-farbe-text);
  padding-block: clamp(34px, 4vw, 56px);
}

.oq-v7 .oq-sprungmarken--kasten .oq-sprungmarken__in {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

.oq-v7 .oq-sprungmarken__kasten {
  max-width: 46rem;
  padding: clamp(20px, 2.4vw, 26px);
  background: var(--oq-sprungmarken-box);
  border: 1px solid var(--oq-farbe-linie);
  border-radius: var(--oq-radius-gross);
}

.oq-v7 .oq-sprungmarken__kasten-titel {
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 1.04rem;
  color: var(--oq-farbe-text);
}

.oq-v7 .oq-sprungmarken__kasten ol {
  display: grid;
  gap: 2px;
  list-style: none;
  counter-reset: oq-sprungmarken;
}

.oq-v7 .oq-sprungmarken__kasten li {
  counter-increment: oq-sprungmarken;
}

.oq-v7 .oq-sprungmarken__kasten a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 12px;
  min-height: 44px;
  padding: 9px 10px;
  margin-inline: -10px;
  border-radius: var(--oq-radius-klein);
  font-size: .99rem;
  color: var(--oq-sprungmarken-text-leise);
  text-decoration: none;
  transition: background var(--oq-transition), color var(--oq-transition);
}

.oq-v7 .oq-sprungmarken__kasten a::before {
  content: counter(oq-sprungmarken);
  min-width: 1.4ch;
  font-size: .82rem;
  font-weight: 650;
  color: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
  font-variant-numeric: tabular-nums;
}

.oq-v7 .oq-sprungmarken__kasten a:hover {
  background: var(--oq-farbe-flaeche);
  color: var(--oq-farbe-text);
}

/* --- Versatz gegen die klebende Kopfleiste, siehe v7-sprungmarken.js ------- */
.oq-v7 [id] {
  scroll-margin-top: var(--oq-sprungmarken-versatz, 0px);
}