nav.is-style-nav-studierendenwerk  {
    --header-margin-top: var(--wp--custom--header-height);
    --wp--preset--color--contrast: #333;
    
    /* Burger-Button */
    button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open, button.wp-block-navigation__responsive-container-close {
        padding: 10px 15px;
        background-color: var(--wp--preset--color--contrast);
        color: var(--wp--preset--color--base);
        border-radius: 10px;
        border: 2px solid var(--wp--preset--color--contrast);
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: .5em;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }


    @media (min-width: 48rem) {

        button.wp-block-navigation__responsive-container-open::after {
            content: "MENÜ" / "MENU";
            font-weight: bold;
            -ms-flex-item-align: center;
                align-self: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
        }
    }


    /* Main Layout */
    .wp-block-navigation__responsive-container {
        margin-top: var(--header-margin-top);
        padding-top: 2rem;
        padding-bottom: 2rem;
        overflow-x: clip;


        @media (min-width: 64rem) {
            bottom: auto;        
            padding-top: 3rem;
            padding-bottom: 3rem;
        }
    }
    

    button.wp-block-navigation__responsive-container-open {
        svg {
            scale: 1.1;
            -webkit-transform: scaleX(1.4);
                -ms-transform: scaleX(1.4);
                    transform: scaleX(1.4);
        }
    }


    /* Submenü-Container */
    .wp-block-navigation__responsive-container.is-menu-open {
        width: 100%;

        ul.wp-block-navigation__container {
            width: 100%;

            > li.has-child > a:first-child {
                width: 100%;
                padding-right: 1rem;
                font-size: 1.3rem;
                    
                @media (min-width: 48rem) {
                    border-bottom: 1px solid var(--wp--preset--color--base);
                }
            }

            > li {
                width: 100%;
                min-height: 280px;
                /*
                > button.wp-block-navigation-submenu__toggle {
                    width: 100%;
                    padding-right: 1rem;
                    font-size: 1.3rem;
                    
                    @media (min-width: 48rem) {
                        cursor: auto;
                        border-bottom: 1px solid var(--wp--preset--color--base);
                    }
                }*/
    
                > .wp-block-navigation__submenu-icon {
    
                    @media (max-width: 48rem) {
                        display: inline-block;
                        position: absolute;
                        right: 0; 
                        top: .8em;

                        svg {
                            scale: 1.5;
                            -webkit-transition: all 0.2s ease-in-out;
                            -o-transition: all 0.2s ease-in-out;
                            transition: all 0.2s ease-in-out;
                        }
                    }
                }
            }
        }


        .wp-block-navigation .has-child > ul.wp-block-navigation__submenu-container {
            width: 100%;
            padding-left: 0;
            padding-right: 0;
            padding-top: 1rem;
            
            /* Submenü-Items */
            li.wp-block-navigation-item {
                /* Submenü-Links */
                a.wp-block-navigation-item__content {
    
                    /* Submenü-Padding */
                    padding: 0.1em 0.1em 0.1em 0;
    
                    /* Submenü-Pfeil 
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.461' height='10.117' viewBox='0 0 13.461 10.117'%3E%3Cpath id='arrow_right_alt_80dp_5F6368_FILL0_wght400_GRAD0_opsz48' d='M8.413,10.117l-.9-.883L11.042,5.7H0V4.438H11.042L7.487.883,8.392,0l5.069,5.069Z' fill='%23fff'/%3E%3C/svg%3E%0A");
                    background-repeat: no-repeat;
                    background-position: left center;
                    background-size: 10px;
                    padding-right: 10px;
                    */
                }
            }
        }
    }

    
    /* Navigation Mobile with arrow */
    .wp-block-navigation li.has-child {
        
        > ul.wp-block-navigation__submenu-container {
            @media (max-width: 48rem) {
                display: none;
            }
        }

        
        &:has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"]) {
            > ul.wp-block-navigation__submenu-container {
                display: block;
            }
        }
    }

    
    /* Überschrift "Wir machen Campus möglich */
    .wp-block-navigation__responsive-dialog {
        margin-top: 0 !important;
    
        &::before {
            content: "Wir machen Campus möglich";
            display: block;
            width: 100%;
            text-align: left;
            font-size: var(--wp--preset--font-size--large);
            font-weight: bold;
            margin-bottom: 1rem;
            

            @media (min-width: 48rem) {
                font-size: var(--wp--preset--font-size--x-large);
                margin-bottom: 0;
            }
        }
    }


    /* spacer */
    .wp-block-navigation__responsive-container-content {
        > .wp-block-spacer {

            @media (max-width: 48rem) {
                -ms-flex-preferred-size: 20px !important;
                    flex-basis: 0px !important;
            }
        }
    }


    /* second color background */
    ul.wp-block-navigation__container:nth-of-type(2) {
        
        &:before {
            content: "";
            position: absolute;
            top: -30px;
            left: -500px;
            width: 10000px;
            pointer-events: none;
            height: 200%;
            height: calc(100% + 30px + 2rem);
            background-color: var(--wp--preset--color--contrast) !important;
        }
    }


    /* tablet layout */
    @media (min-width: 48rem) {
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
            > .wp-block-navigation__container {
                &:first-of-type {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 4rem;
                }
            }
        }
    }

    /* desktop layout */
    @media (min-width: 64rem) {
        .wp-block-navigation__responsive-container {
            --background-color: var(--wp--preset--color--contrast, #000);
            --background-calc: linear-gradient(90deg,rgba(42, 123, 155, 0) 72%, var(--background-color) 72%);

              background-image: var(--background-calc);


              @media (min-width: 1440px) {
                --background-calc: linear-gradient(
                    90deg,
                    rgba(42, 123, 155, 0) calc(max((100vw - 1440px), 0px) / 2 + 1008px),
                    var(--background-color) calc(max((100vw - 1440px), 0px) / 2 + 1008px)
                  );
              }
        }

        
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;


            > .wp-block-navigation__container {
                width: auto;

                &:first-of-type {
                    width: 66%;
                    -ms-flex-wrap: wrap;
                        flex-wrap: wrap;
                    -webkit-box-orient: horizontal;
                    -webkit-box-direction: normal;
                        -ms-flex-direction: row;
                            flex-direction: row;
                    -webkit-box-pack: justify;
                        -ms-flex-pack: justify;
                            justify-content: space-between;

                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 2rem 3rem;

                    > li {
                        width: auto;
                        min-height: 280px;
                    }
                }
            }
        }
    
        ul.wp-block-navigation__container:nth-of-type(2) {
            &:before {
                display: none;
            }
        }
    }
}



/* adjust menu height for admin */
body.admin-bar {
    nav.is-style-nav-studierendenwerk {
        --header-margin-top: calc(var(--wp--custom--header-height) + 32px);
    }
}