/* Block «jumplinks» — the table of contents of a long page. A horizontal chip row
   that wraps on narrow screens; no grid, because the number of entries varies
   widely and uneven columns would read worse than a flow. */
.jumplinks { list-style:none; margin:0; padding:0;
    display:flex; flex-wrap:wrap; gap:var(--size-2); }
.jumplinks a { display:inline-block; padding:.45rem .85rem;
    border:1px solid var(--border); border-radius:var(--radius-2);
    text-decoration:none; line-height:1.3; }
/* Hover AND focus carry the same marking: the list is a keyboard shortcut through
   the page — whoever tabs it must see where they are. The focus ring stays
   visible on top of that (site.css). */
.jumplinks a:hover, .jumplinks a:focus-visible {
    border-color:var(--accent-fg); color:var(--accent-fg); }

/* «Anheften»: the bar sticks to the top of the window — below the site header
   where that header sticks (`--header-h`, 0 otherwise) — and the section in
   view is marked (jumplinks.js sets `aria-current` and `.is-active`). Sticky,
   not fixed: `main` is a query container and would pin a fixed bar to itself.
   The nav sticks, `.jumplinks-bar` inside it is what you see. The row scrolls
   sideways instead of wrapping, so the bar keeps one height. */
.jumplinks--sticky { position:sticky; top:var(--header-h, 0px); z-index:5;
    margin-inline:calc(-1 * var(--gutter, 0px)); }
.jumplinks-bar { padding:var(--size-2) var(--gutter, 0px);
    background:var(--bg); border-bottom:1px solid var(--border); }
.jumplinks--sticky .jumplinks { flex-wrap:nowrap; overflow-x:auto; justify-content:center; }
.jumplinks--sticky .jumplinks a { white-space:nowrap; }
.jumplinks--sticky .jumplinks a.is-active { border-color:var(--accent-fg); color:var(--accent-fg); font-weight:var(--font-weight-6); }
@container (max-width:760px) { .jumplinks--sticky .jumplinks { justify-content:flex-start; } }

/* «Erst einblenden, wenn die Leiste oben ankommt»: the nav keeps no height and
   no margin of its own, so the page below the hero closes up as if the bar were
   not there; the bar hangs below the nav, above what follows. It stays hidden
   until the nav is pinned (`.is-pinned`, jumplinks.js). `visibility`, not
   `opacity` alone: a hidden bar's links leave the tab order. A focused link keeps
   the bar open (`:focus-within`), so focus is never on something unseen.
   Only with scripting — without it the bar is the plain pinned one. */
@media (scripting: enabled) {
    .block-jumplinks.jumplinks--reveal { height:0; margin-bottom:0; }
    .jumplinks--reveal:not(.is-pinned):not(:focus-within) .jumplinks-bar { visibility:hidden; opacity:0; }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .jumplinks--reveal .jumplinks-bar { transition:opacity .2s ease, visibility .2s; }
}