/* Offcanvas-Header für mobile Ansicht */

@media (max-width: 991.98px) {

    nav .header-switches .dropdown,
    #topBar {
        display: none !important;
    }

    body.header-overlay-active main.container {
        margin-top: 0px !important;
    }

    body.header-overlay-active nav .header-switches .dropdown {
        display: inherit !important;
    }

    body.header-overlay-active #topBar {
        display: inline-flex !important;
        justify-content: space-between;
        width: 100%;
        transition: transform 0.3s cubic-bezier(.4, .2, .2, 1);
        transform: translateY(0);
    }

    #headerOverlayToggle {
        display: block !important;
    }
}

@media (max-width: 776.98px) {

    body.header-overlay-active #topBar {
        display: block !important;
    }
}

@media (min-width: 992px) {
    #headerOverlayToggle {
        display: none !important;
    }
}

/* =========================
   Layout: Topbar / Sticky / Footer / Nav
   ========================= */

.topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "range meta nav";
    align-items: center;
    gap: .75rem;
}

.topbar .btn.disabled,
.topbar .btn:disabled,
.topbar fieldset:disabled .btn {
    opacity: .3;
}

#tbRange {
    grid-area: range;
    justify-self: start;
}

#tbRange [data-range].active,
#tbRange [data-range].active:hover,
#tbRange [data-range]:focus,
#tbRange [data-range]:focus-visible,
#btnGaps.active,
#btnGaps.active:hover,
#btnGaps:focus,
#btnGaps:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(108, 117, 125, .45);
    /* Rand immer */
}

#tbMeta {
    grid-area: meta;
    justify-self: center;
    text-align: center;
}

#tbNav {
    grid-area: nav;
    justify-self: end;
}

@media (min-width:768px) and (max-width:991.98px) {
    #tbNav {
        grid-area: range;
    }
}

@media (max-width:991.98px) {
    .topbar {
        grid-template-areas: "range" "nav" "meta";
        grid-template-columns: 1fr;
        gap: .5rem;
    }
}

@media (max-width:767.98px) {

    #tbRange,
    #tbNav {
        width: 100%;
        justify-self: stretch;
    }

    #tbRange .btn-group,
    #tbNav {
        display: flex;
        width: 100%;
    }

    #tbRange .btn-group .btn,
    #tbNav .btn {
        flex: 1 1 0;
    }
}

/* Top-Bar „dockt“ unter dem Header an */
#topBar.sticky {
    position: sticky;
    top: var(--header-offset, 0px);
    z-index: 1020;
    transition: padding 0.3s ease;
}

#topBar.sticky.is-stuck {
    border-bottom: 1px solid var(--bs-border-color-translucent);
    backdrop-filter: blur(8px);
    padding-right: 1rem;
    padding-left: 1rem;
}

#topBar.sticky.is-stuck>.btn-group {
    background: var(--bs-body-bg, #fff);
}

#tbNav .btn.btn-sm {
    font-size: 1rem;
    padding: .375rem .75rem;
    line-height: 1.5;
    border-radius: .375rem;
}

footer.sticky-footer {
    position: sticky;
    bottom: 0;
    z-index: 1010;
    background: var(--bs-body-bg);
}

/* Scroll-to-top: erst nach Scroll zeigen */
#scrollTopBtn {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(.4, .2, .2, 1), transform 0.4s cubic-bezier(.4, .2, .2, 1);
}

#scrollTopBtn.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.navbar.sticky-top {
    z-index: 1050;
}

.navbar .dropdown-menu {
    z-index: 1060;
}

.navbar .dropdown-menu .dropdown-menu {
    z-index: 1061;
}

.navbar,
.topbar,
.dropdown,
.btn-group {
    overflow: visible;
}