.mainNavBar{
    position: fixed; /* oder sticky, je nach Bedarf */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* Höher als image-container */
    border-bottom: 2px solid var(--beigegelb);
    padding: var(--s);
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(30px);
    .navList{
        display: flex;
        align-items: center;
        list-style: none;
        a{
            position: relative;
            font-size: var(--m);
            text-decoration: none;
            z-index: 1000;
            color: var(--complBeigegelb);
        }
        a::after{
            content: '';
            position: absolute;
            left: 0;
            bottom: -2px; /* Abstand der Linie vom Text */
            width: 0;
            height: 2px; /* Dicke der Linie */
            background-color: var(--beigegelb); /* Farbe der Linie */
            transition: width 0.3s ease; /* Geschwindigkeit der Linie */
        }
        a:hover::after{
            width: 100%;
        }
        li{
            margin-right: var(--l);
        }
        
        li:last-child{
            margin-left: auto;
        }
    }
    .inputSearchField{
        padding-left: var(--s);
    }
}

.searchSymbol{
    padding: var(--m);
    z-index: 1000;
    color: var(--complBeigegelb);
}

#inputSearchField{
    padding: var(--s);
    font-size: var(--m);
    color: var(--beigegelb);
    border: none;
    border-color: var(--beigegelb);
    &:focus{
        outline: none;
        background: transparent;
        border-bottom: 1px solid var(--beigegelb);
    }
}


aside{
    display: none;
}



@media screen and (max-width: 768px){
    .mainNavBar {
        width: 100%;
        .navList {
            /* Reset display for the list itself */
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            
            /* Hide all list items */
            li {
                display: none;
            }
            
            /* Show only the first list item */
            li:first-child {
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    max-height: 100%;
                    width: auto;
                }
            }
        }
    }
    aside{
        display: block;
        position: fixed;
        top: var(--xxl);
        right: -181px;
        .placeholder{
            height: 100%;
            width: 100%;
            right: 0px;
            position: relative;
            a{
                color: white;
                text-decoration: none;
                padding: var(--s);
            }
            .burger{
                position: absolute;
                top: 0;
                right: 100%;
                z-index: 3;
                font-size: var(--l);
                padding: var(--s);
                border: 1px solid var(--beigegelb);
                border-right: none;
                border-top-left-radius: var(--m);
                border-bottom-left-radius: var(--m);
                color: var(--beigegelb);
                background-color: rgba(0, 0, 0, 0.15);
                backdrop-filter: blur(30px);
            }
            .mobileViewHeaderContent{
                background-color: rgba(0, 0, 0, 0.15);
                backdrop-filter: blur(40px);
                border: 1px solid var(--beigegelb);
                border-bottom-left-radius: var(--m);
                ul{
                    list-style-type: none;
                    li{
                        padding: var(--s);
                        font-size: var(--m);
                        a{
                            color: var(--beigegelb);
                            text-decoration: none;
                        }
                        span{
                            color: var(--beigegelb);
                        }
                    }
                }
            }
        }
    }
}