
nav#site-navigation {
    border-bottom: 1px solid var(--lightgrey);
}

.site-header .inside-header {
    align-items: flex-start;
    flex-direction: column-reverse;
}

.main-navigation .inside-navigation {
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.main-navigation .main-nav ul li > a,
.main-navigation .menu-bar-items a{
    padding-bottom: 25px;
    padding-top: 25px;
}

@media screen and (min-width: 1024px) {
    #primary-menu.main-nav {
        margin-left: 180px;
    }

    .main-navigation .main-nav ul li > a,
    .main-navigation .menu-bar-items a{
        padding-top: 0;
    }

    .main-navigation .inside-navigation {
        align-items: flex-start;
        justify-content: space-between;
    }
}

/*Mobile Menu*/
#mobile-header {
    border-bottom: 1px solid var(--lightgrey);
}
#mobile-header .navigation-branding img, .site-logo.mobile-header-logo img {
    height: auto!important;
    width: 150px;
}
#mobile-header .inside-navigation {
    flex-direction: row;
}

.mobile-menu {
    z-index: 999;
}

@media screen and (max-width: 1024px) { /*Mobile Breakpoint*/
    .main-navigation .inside-navigation {
        justify-content: end;
        flex-direction: row-reverse;
    }
}



/*Suche*/

.navigation-search input[type="search"] {
    height: 100%;
}

.navigation-search input[type="search"], .navigation-search input[type="search"], .navigation-search input[type="search"], .main-navigation .main-nav ul li.search-item.active > a, .main-navigation .menu-bar-items .search-item.active > a,  .main-navigation .menu-bar-items .search-item > a {
    transition: all 0.2s ease-out;
}

.navigation-search input[type="search"], .navigation-search input[type="search"]:active, .navigation-search input[type="search"]:focus, .main-navigation .main-nav ul li.search-item.active > a, .main-navigation .menu-bar-items .search-item.active > a {
   padding-top: 15px;
    padding-bottom: 15px;
}

.close-search > a {
    background-color: transparent!important;
    transform: translateY(100%);
}

.navigation-search input[type="search"], .navigation-search input[type="search"]:active, .navigation-search input[type="search"]:focus{
    border: 1px solid var(--lightgrey);
}

/*.main-navigation .main-nav ul li.search-item.active > a, .main-navigation .menu-bar-items .search-item.active > a {
    border-right: 1px solid var(--lightgrey);
    border-top: 1px solid var(--lightgrey);;
}*/


.navigation-search {
    transition: all 0.2s ease-out;
    transform: scaleX(0);
    margin-left: auto;
    max-width: 1050px;
    opacity: 0;
}

.navigation-search.nav-search-active {
    opacity: 1;
    transform: scaleX(1);
    top: 100%;
}

.navigation-search.nav-search-active {
    left: 0;
    right: 0;
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    top: 100%;
}



@media screen and (max-width: 1040px) { /*Mobile Breakpoint*/
    /*.navigation-search input[type="search"], .navigation-search input[type="search"]:active, .navigation-search input[type="search"]:focus, .main-navigation .main-nav ul li.search-item.active > a, .main-navigation .menu-bar-items .search-item.active > a {
        padding-top: 25px;
        padding-bottom: 25px;
    }*/

    .close-search > a {
        transform: translateY(calc(100% + 40px));
    }
}

/*Topbar*/

.secondary-navigation .main-nav ul li.menu-svg a svg {
    height: 20px;
    width: 20px;
    fill: currentColor;
}

.menu-svg > a {
    padding-right: 0!important;
    padding-top: 3px;
}

@media screen and (max-width: 450px){
    .secondary-navigation .main-nav ul li a, .secondary-navigation .menu-toggle, .secondary-menu-bar-items .menu-bar-item > a {
        font-size: 14px!important;
        padding-left: 7px!important;
        padding-right: 7px!important;
    }

    .secondary-navigation {
        margin-bottom: 20px;
    }
}

/*Topbar Mobil*/
#secondary-navigation-mobile {
    display: none;
}
#mobile-header.toggled ~ #secondary-navigation-mobile {
    display: block;
}

#secondary-navigation-mobile .menu{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 5px 30px 3px 20px;
    background-color: var(--lightgrey);
}
