/*
 * w/anchor-nav: Leiste auf das Seitenraster der Sektionen bringen.
 * Sektionen rendern als px-[5%] + .container (padding var(--space-page), siehe
 * Build/src/Scss/components/_layout.scss). Die Regeln hier ueberschreiben
 * .anchor-nav__inner aus Build/src/Scss/blocks/_anchor-nav.scss per hoeherer
 * Spezifitaet, ohne Tailwind-Build (WATER-84, Nacharbeit).
 */
nav.anchor-nav {
    padding-left: 5%;
    padding-right: 5%;
}

nav.anchor-nav > .anchor-nav__inner {
    max-width: var(--container-xl, 1680px);
    padding-left: var(--space-page, 4rem);
    padding-right: var(--space-page, 4rem);
}

/* Erstes Label buendig mit der Inhaltskante: Innenabstand des Links (12px) ausgleichen. */
nav.anchor-nav .anchor-nav__list {
    margin-left: -12px;
}

/*
 * Horizontal scrollbare Liste (mobil): Fade-Kanten zeigen, dass weitere Eintraege
 * folgen. Die Klassen setzt frontend.js nur, wenn die Liste tatsaechlich ueberlaeuft;
 * eine Maske statt Farbverlauf funktioniert auf jedem Leistenhintergrund.
 */
nav.anchor-nav .anchor-nav__list.is-fade-end {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
}

nav.anchor-nav .anchor-nav__list.is-fade-start {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 44px);
    mask-image: linear-gradient(to right, transparent, #000 44px);
}

nav.anchor-nav .anchor-nav__list.is-fade-start.is-fade-end {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}

@media (max-width: 640px) {
    /* Liste nutzt die volle Breite bis zur Inhaltskante; min-width:0 erlaubt das Schrumpfen im Flex-Container. */
    nav.anchor-nav .anchor-nav__list {
        min-width: 0;
        flex: 1 1 auto;
    }
}