.wp-site-blocks > header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    -webkit-transition: top 0.6s ease-in-out;
    -o-transition: top 0.6s ease-in-out;
    transition: top 0.6s ease-in-out; /* Sanfte Bewegung */
}

body.admin-bar .wp-site-blocks >header {
    top: 32px;
}



body {
    --header-admin-bar: 0px;

    &.admin-bar {
        --header-admin-bar: 32px;
    }
}


/* make logo white */
.wp-block-site-logo {
    svg {
        .st0 { fill: #fff; }
    }
}

.hauptmenu {
    /* burger menu svg icon animation */
    .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close {

        svg {
            width: 38px;
            height: 38px;
        }

        .point {
            transition: all .2s ease-in-out;

            &:nth-of-type(1) { transition-delay: 0s; }
            &:nth-of-type(2) { transition-delay: .05s; }
            &:nth-of-type(3) { transition-delay: .1s; }
            &:nth-of-type(4) { transition-delay: .15s; }
            &:nth-of-type(5) { transition-delay: .15s; }
            &:nth-of-type(6) { transition-delay: .2s; }
            &:nth-of-type(7) { transition-delay: .25s; }
            &:nth-of-type(8) { transition-delay: .3s; }
            &:nth-of-type(9) { transition-delay: .35s; }
            &:nth-of-type(10) { transition-delay: .4s; }
        }

                
        &:hover, 
        &:focus {
            svg .point {
                fill: var(--wp--preset--color--accent-1, #000);
            }
        }
    }


    /* navigation style */


    /* submenu style */
    .wp-block-navigation__responsive-container {

        bottom: auto;
        top: var(--header-height, 0px);

        top: calc(var(--header-height, 0px) + var(--header-admin-bar, 0px));

        padding-top: calc(2rem + 24px);
        padding-bottom: calc(2rem + 24px);

        display: none;
        opacity: 0;
        translate: 0 -10vh;
        transition-property: opacity, display, translate;
        transition-duration: .3s;
        transition-timing-function: ease;
        transition-behavior: allow-discrete;

        &.is-menu-open {
            animation: none;
            opacity: 1;
            display: block;
            translate: 0 0;
            transition-property: opacity, display, translate;
        
            @starting-style {
                opacity: 0;
                display: block;
                translate: 0 -10vh;
            }
        }

        /* links */
        a {
            text-decoration: none;
        }
    }        
}


/* set submenu on top of the menu */
.hauptmenu .wp-block-navigation__responsive-container {
    top:  calc(0px + var(--header-admin-bar, 0px));
    padding-top: calc(1rem + 18px);

    &:not(.is-menu-open.is-menu-open) {
        background-color: var(--wp--preset--color--accent-2) !important;
        color: var(--wp--preset--color--base) !important;
    }

    .wp-block-navigation__responsive-dialog {
        margin-top: 0 !important;
    }

    .wp-block-navigation__responsive-close {
        margin-left: auto;
        margin-right: auto;
        max-width: var(--wp--style--global--wide-size, 100%);
    }

    .wp-block-navigation__responsive-container-content {
        padding-top: calc(8rem);
        padding-bottom: calc(1rem);
    }
}

.ontop {
    position: relative;
    z-index: 500000;
}