/**
 * Globale Sticky-Seitennavigation
 * Die Seitennavigation bleibt beim Scrollen direkt unterhalb der Hauptnavigation.
 */

:root {
    --main-navigation-height: 72px;
    --side-navigation-gap: 0px;
}

/* Unterstützte Seitennavigations-Klassen */
:is(
    .hc-page-nav,
    .page-section-nav,
    .section-navigation,
    .page-navigation,
    .hc-section-nav,
    .ag-section-nav
) {
    position: sticky;
    top: calc(var(--main-navigation-height) + var(--side-navigation-gap));
    z-index: 900;
    width: 100%;
}

/*
 * Verhindert, dass Sprungmarken unter Haupt- und Seitennavigation verschwinden.
 * Der Wert für --side-navigation-height wird durch sticky-side-navigation.js gesetzt.
 */
:is(
    .ag-section,
    .pt-section,
    section[id],
    [data-scroll-section]
) {
    scroll-margin-top: calc(
        var(--main-navigation-height) +
        var(--side-navigation-height, 64px) +
        20px
    );
}

/* Mobile Navigation: weiterhin sticky, aber mit kleinerem Standardwert */
@media (max-width: 900px) {
    :root {
        --main-navigation-height: 64px;
    }

    :is(
        .hc-page-nav,
        .page-section-nav,
        .section-navigation,
        .page-navigation,
        .hc-section-nav,
        .ag-section-nav
    ) {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }
}