/* Desktop*/
header {
    background-color: var(--primary-color) !important;
    padding: 0 !important;
}

header .navbar-brand-image img {
    top: 180% !important;
    max-height: 164px!important;
    position: absolute;
    z-index: 999;
    filter: drop-shadow(0px 4px 17px rgba(0, 0, 0, 0.25));
}

header nav > .navbar-nav {
    justify-content: flex-end;
    gap: 0 !important;
}

.header-top-nav-container-wrap .top-navigation {
    background-color: var(--grey-dark-super);
}

.header-top-nav-container-wrap .top-navigation-toggler-responsive {
    display: none;
}

.header-top-nav-container-wrap .top-navigation .top-nav-container {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin: auto;
    justify-content: flex-end;
    --bs-gutter-x: 40px;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

.header-top-nav-container-wrap .top-navigation .top-nav-container li {
    margin-left: 1rem;
}

.header-top-nav-container-wrap .top-navigation .top-nav-container li a {
    color: var(--white-color);
    opacity: var(--opacity-standard);
    cursor: pointer;
}

.header-top-nav-container-wrap .top-navigation .top-nav-container li a:hover {
    opacity: var(--opacity-hover);
}

.header-top-nav-container-wrap .top-navigation .top-nav-container img {
    margin-bottom: 2px;
    margin-right: 2px;
}

.header-top-nav-container-wrap .top-navigation .accessibility-trigger {
    cursor: pointer;
}

.header-top-nav-container-wrap .top-navigation .accessibility-trigger img {
    width: 24px;
}

header nav a.nav-link:not(.nav-link-toggle):before,
header nav > .navbar-nav > .nav-item > .nav-link:not(.nav-link-toggle):hover:before,
header nav .nav-link:not(.nav-link-toggle).active:before {
    opacity: 0 !important;
}

@media (min-width: 992px) {
    .header-top-nav-container-wrap .top-navigation .top-nav-container {
        max-width: 960px;
    }

    header > .container.container-mainnavigation {
        max-width: 960px;
        padding-left: 0;
    }

    header nav#mainnavigation-responsive {
        display: none;
    }

    header nav > .special-mega-menu .item-level-fuer-dich,
    header nav > .special-mega-menu .item-level-fuer-betriebe,
    header nav > .special-mega-menu .item-level-gastromobil {
        display: none;
    }

    header nav > .special-mega-menu .is-active {
        display: block;
        z-index: 999999;
    }

    header nav > .special-mega-menu > div {
        position: fixed;
        left: 0;
        width: 100vw;
        background-color: white;
        padding: 50px;
        padding-top: 25px;
        top: 108px;
        background-color: var(--primary-color-hover);
        -webkit-box-shadow: 0 0 12px 0 rgb(0 0 0 / 20%);
        box-shadow: 0 12px 12px 0 rgb(0 0 0 / 20%);
        z-index: 1000;
    }
    
    header nav > .special-mega-menu > div {
        display: none;
    }

    header nav > .special-mega-menu .bottom-nav-inner .subnav-link {
        border: unset;
        color: var(--black-color) !important;
        opacity: var(--opacity-standard);
    }

    header nav > .special-mega-menu .bottom-nav-inner .subnav-link:hover {
        background-color: unset;
        opacity: var(--opacity-hover);
    }

    header nav > .special-mega-menu .bottom-nav-inner .subnav-link-2 {
        color: var(--black-color) !important;
        opacity: var(--opacity-standard);
    }

    header nav > .special-mega-menu .bottom-nav-inner .subnav-link-2:hover {
        opacity: var(--opacity-hover);
    }

    header nav > .special-mega-menu .bottom-nav-inner .subnav-item-2 {
        margin-bottom: 12px;
    }

    header nav > .navbar-nav {
        height: 60px;
    }

    header nav > .navbar-nav > li {
        padding: 0 2rem 0 2rem;
        border-left: 1px solid var(--black-color);
    }
    
    header nav > .navbar-nav > li:last-child {
        padding-right: 2rem;
        border-right: 1px solid var(--black-color);
    }

    header nav > .navbar-nav > .nav-item.is-hovered {
        background-color: var(--primary-color-hover);
    }
    
    header nav .navbar-nav > .nav-item > .nav-link > .nav-link-text {
        color: var(--black-color);
    }
    
    header nav > .navbar-nav > .nav-item > .dropdown-menu > .dropdown-nav {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    
    header nav .dropdown-nav[data-level="2"] a {
        color: var(--white-color) !important;
    }
    
    header nav .dropdown-nav[data-level="2"] > .nav-item > .nav-link > .nav-link-text:hover {
        border-bottom: 2px solid var(--white-color);
        display: inline-block;
    }

    header nav .dropdown-nav[data-level="2"] > .nav-item:not(:last-child) > .nav-link.nav-link-dropdown.current > .nav-link-text {
        border-bottom: 2px solid var(--white-color);
    }
    
    header nav .dropdown-nav[data-level="2"] > .nav-item > .nav-link > .nav-link-text.has-dropdown-arrow::after {
        display: inline-block;
        position: relative;
        content: "";
        background-image: url(/fileadmin/images/WirGastfreunde/Header/pulldown-white.svg);
        background-repeat: no-repeat;
        left: 2px;
        width: 18px;
        height: 20px;
        top: 5px;
    }
    
    header nav .dropdown-nav[data-level="3"] {
        display: none;
        z-index: 2;
        margin-top: -9px;
    }
    
    header nav .nav-item:hover > .dropdown-nav[data-level="3"] {
        display: block;
        position: absolute;
        top: 60px;
        background-color: var(--white-color);
        max-width: 260px;
        border-radius: var(--border-radius-20);
        padding: 10px;
    }
    
    header nav .dropdown-nav[data-level="3"] li {
        position: relative;
        padding-left: 10px;
        margin-bottom: 12px;
        justify-self: flex-start;
    }
    
    header nav .dropdown-nav[data-level="3"] li:before {
        content: '';
        position: absolute;
        width: 5px;
        height: 5px;
        background-color: var(--black-color);
        border-radius: 100%;
        top: 10px;
        left: 6px;
    }

    header nav .dropdown-nav[data-level="3"] > .nav-item:nth-child(1) {
        margin-top: 1.5rem;
    }

    header nav .nav-item:hover > .dropdown-nav[data-level="3"] a span {
        color: var(--black-color);
        opacity: var(--opacity-standard);
    }

    header nav .nav-item:hover > .dropdown-nav[data-level="3"] a span:hover {
        opacity: var(--opacity-hover);
    }
    
    header nav > .navbar-nav > .nav-item {
        cursor: pointer;
        flex-wrap: nowrap;
    }
    
    header nav .dropdown-menu.dropdown-menu-simple.show .nav-item {
        padding: 0 0.25rem;
    }

    header nav > .navbar-nav > .nav-item .return-to-page {
        display: none;
    }
    
    header nav > .navbar-nav > .nav-item.show .return-to-page {
        display: block;
    }
    
    header nav > .navbar-nav > .nav-item .return-to-page a::after {
        display: inline-block;
        position: relative;
        content: "";
        background-image: url(/fileadmin/images/WirGastfreunde/Header/pulldown.svg) !important;
        background-repeat: no-repeat;
        right: 5px;
        width: 9px;
        height: 20px;
        top: 28%;
    }
    
    header nav > .navbar-nav > .nav-item.hover-active {
        background-color: var(--primary-color-hover);
    }
    
    header nav > .navbar-nav > .nav-item.no-show {
        display: none;
    }
    
    header nav > .navbar-nav > .nav-item.show > button.nav-link {
        display: none;
    }
    
    header nav > .navbar-nav > .nav-item.show:not(:last-child) {
        border-right: 1px solid var(--black-color);
    }
    
    header nav > .navbar-nav > .nav-item > button.nav-link.nav-link-toggle {
        pointer-events: none;
    }
    
    header nav > .navbar-nav > .nav-item > button.nav-link > .nav-link-indicator:before {
        display: inline-block;
        position: relative;
        content: "";
        background-image: url(/fileadmin/images/WirGastfreunde//Header/pulldown.svg) !important;
        background-repeat: no-repeat;
        left: 0;
        width: 9px;
        height: 20px;
        top: 6px;
        border-top: unset;
        border-left: unset;
        padding-top: 0;
        padding-left: 0;
        transform: rotate(-91deg);
        transition: transform 0.3s ease;
    }
    
    header nav > .navbar-nav > .nav-item > a.nav-link.hidden {
        display: none;
    }
    
    header nav .navbar-nav > .nav-item > a.nav-link:not(.nav-link-toggle):before {
        content: none;
    }

    header nav .dropdown-nav[data-level="2"] > .nav-item:last-child > .nav-link {
        padding-right: 0;
    }
    
    header nav .dropdown-nav[data-level="2"] > .nav-item:last-child > .nav-link > .nav-link-text {
        background-color: var(--primary-color);
        padding: 10px 26px;
        border-radius: var(--border-radius-10);
        color: var(--black-color);
        position: relative;
        margin-top: -10px;
    }

    header nav .dropdown-nav[data-level="2"] > .nav-item:last-child > .nav-link > .nav-link-text:hover {
        border-bottom: unset;
        background-color: var(--primary-color-hover) !important;
    }
    
    header nav .dropdown-menu.dropdown-menu-mega.show,
    header nav .dropdown-menu.dropdown-menu-simple.show {
        background-color: transparent;
        right: 0;
        box-shadow: none;
        border: none;
        margin: 8px 0 0 0;
        padding: 16px 0 16px 0;
        --bs-gutter-x: 40px;
        --bs-gutter-y: 0;
        width: 100%;
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
        margin-right: auto;
        margin-left: auto;
        max-width: 960px;
    }
    
    header nav .nav-style-simple {
        position: inherit !important; /* initial */
    }
}

@media (max-width: 1199.98px) {
    header nav .dropdown-nav[data-level="2"] {
        display: flex;
        /*flex-wrap: wrap;*/
    } 
    header nav .dropdown-nav[data-level="2"] .nav-item:last-child {
        flex: 0 0 100%;
    }

    header nav .dropdown-nav[data-level="2"] .nav-item:last-child > a {
        justify-content: end;
    }
}

@media (min-width: 1200px) {
    header > .container.container-mainnavigation {
        max-width: 1140px;
    }

    .header-top-nav-container-wrap .top-navigation .top-nav-container {
        max-width: 1140px;
    }

    header nav .dropdown-menu.dropdown-menu-mega.show,
    header nav .dropdown-menu.dropdown-menu-simple.show {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    header > .container.container-mainnavigation {
        max-width: 1320px;
    }

    .header-top-nav-container-wrap .top-navigation .top-nav-container {
        max-width: 1320px;
    }

    header nav .dropdown-menu.dropdown-menu-mega.show,
    header nav .dropdown-menu.dropdown-menu-simple.show {
        max-width: 1320px;
    }
}

@media (max-width: 991.98px) {
    body.fixed-header {
        overflow-y: hidden;
        overflow-x: hidden;
    }

    .header-top-nav-container-wrap .top-navigation .top-nav-container {
        max-width: 100%;
    }

    .header-top-nav-container-wrap .top-navigation-toggler-responsive {
        background-color: var(--grey-dark-super);
        padding: 18px 15px 37px 15px;
    }

    header nav > .navbar-nav > .nav-item > .dropdown-menu-responsive-background.fixed-background {
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        background-color: var(--black-dark-super);
        opacity: 0.3;
        z-index: 999;
        margin-right: -20px;
    }

    header nav > .navbar-nav > .nav-item > .dropdown-menu {
        width: calc(100% - 10%) !important;
        border-radius: var(--border-radius-15);
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.40);
    }

    header > .nav-toggler-container {
        display: none;
        justify-content: flex-end;
        width: 100%;
        height: 0;
        z-index: 10001;
    }

    header > .nav-toggler-container.show {
        display: flex !important;
    }

    header nav > .navbar-nav > .nav-item.no-show {
        display: none;
    }
    
    header nav > .navbar-nav > .nav-item.show {
        display: flex;
        border-bottom: unset;
    }

    header nav > .navbar-nav > .nav-item.show a.nav-link {
        padding: 8px 12px;
    }

    header nav > .navbar-nav > .nav-item.show .return-to-page a::after {
        margin-right: 5px;
    }

    header nav > .navbar-nav > .nav-item .return-to-page {
        display: none;
    }
    
    header nav > .navbar-nav > .nav-item.show .return-to-page {
        display: block;
    }

    header nav > .navbar-nav > .nav-item .return-to-page a::after {
        content: "";
        display: inline-block;
        border-top: 2px solid var(--grey-dark-super);
        border-left: 2px solid var(--grey-dark-super);
        padding-top: 0.45em;
        padding-left: 0.45em;
        transform: rotate(-135deg);
        margin-top: 15px;
        margin-right: 15px;
    }

    header > .container-mainnavigation {
        padding: 0;
        max-width: 100%;
    } 

    header nav#mainnavigation {
        display: none;
    }

    header nav#mainnavigation-responsive {
        display: block;
    }

    header .navbar-brand-image {
        position: absolute !important;
    }

    header .navbar-brand-image img {
        top: 180% !important;
        max-height: 165px !important;
    }

    header .navbar-toggler {
        height: unset;
        top: 1.5rem;
        z-index: 100;
        width: 0 !important;
    }

    header #mainnavigation-responsive-navbar-toggler {
        box-shadow: none;
    }

    header #mainnavigation-responsive-navbar-toggler,
    header #mainnavigation-responsive-navbar-toggler:not(.collapsed) > .navbar-toggler-icon {
        padding: 0 40px;
        height: 40px;
        background-color: transparent;
        margin-top: 1rem;
    }

    header .navbar-toggler:not(#mainnavigation-responsive-navbar-toggler) {
        display: none;
    }

    header .navbar-toggler .navbar-toggler-icon:after,
    header .navbar-toggler .navbar-toggler-icon,
    header .navbar-toggler .navbar-toggler-icon:before {
        background-color: var(--white-color);
    }

    header .navbar-toggler.collapsed .navbar-toggler-icon:after,
    header .navbar-toggler.collapsed .navbar-toggler-icon,
    header .navbar-toggler.collapsed .navbar-toggler-icon:before {
        height: 3px !important;
        width: 36px !important;
        top: 2rem;
    }

    header .navbar-toggler.collapsed .navbar-toggler-icon:before {
        top: -10px !important;
    }

    header .navbar-toggler.collapsed .navbar-toggler-icon:after {
        top: 10px !important;
    }

    header .navbar-toggler:not(.collapsed) .navbar-toggler-icon:after,
    header .navbar-toggler:not(.collapsed) .navbar-toggler-icon:before {
        width: 35px;
    }

    header nav > .navbar-nav::before {
        height: 0 !important;
    }

    header nav > .navbar-nav > .nav-item {
        justify-content: end;
        border-bottom: 1px solid var(--black-color);
        --bs-gutter-x: 40px;
        --bs-gutter-y: 0;
        width: 100%;
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
        margin-right: auto;
        margin-left: auto;
    }

    header nav > .navbar-nav > .nav-item:last-child {
        border-bottom: unset;
    }

    header nav > .navbar-nav > .nav-item > a.nav-link {
        flex-shrink: unset;
        flex-grow: unset;
        padding: 8px 0;
    }

    header nav > .navbar-nav > .nav-item > a.nav-link > .nav-link-text {
        color: var(--black-color);
    }

    header nav > .navbar-nav > .nav-item > button.nav-link {
        display: none;
    }

    header nav > .navbar-nav > .nav-item > .dropdown-menu.modal-box {
        display: flex;
        position: absolute;
        top: 7rem;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        max-height: 500px;
        overflow-x: auto;
    }

    header nav > .navbar-nav > .nav-item > .dropdown-menu.no-modal-box {
        display: none;
    }

    header nav .dropdown-nav[data-level="2"] .nav-item:last-child {
        flex: unset;
    }

    header nav .dropdown-nav[data-level="2"] .nav-item:last-child > a {
        justify-content: unset;
    }

    header nav .dropdown-nav[data-level="2"] .nav-item.accordion {
        display: unset;
        flex: 1 1 100%;
    }

    header nav .dropdown-nav[data-level="2"] .nav-item.accordion .accordion-button {
        background-color: unset !important;
        box-shadow: unset !important;
        padding: 0;
    }

    header nav .dropdown-nav[data-level="2"] .nav-item.accordion .accordion-button:not(.collapsed)::after {
        background-image: url(/fileadmin/images/WirGastfreunde/Header/icon-minus.svg);
        align-self: center;
        top: -15px;
        right: 5px;
    }

    header nav .dropdown-nav[data-level="2"] .nav-item.accordion .accordion-button.collapsed::after {
        background-image: url(/fileadmin/images/WirGastfreunde/Header/icon-plus.svg);
        align-self: anchor-center;
        top: 0;
    }

    header nav .dropdown-nav[data-level="2"] .nav-item.accordion .accordion-collapse > .accordion-body {
        padding: 0;
    }

    header nav > .navbar-nav > .nav-item > .dropdown-menu > .dropdown-nav > .nav-item > a.nav-link > .nav-link-text,
    header nav .dropdown-nav[data-level="2"] .accordion-button .nav-link-text {
        color: var(--black-color);
    }

    header nav .dropdown-nav[data-level="2"] {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    header nav .dropdown-nav[data-level="2"] > li {
        flex: 1 1 100%;
    }

    header nav .dropdown-nav[data-level="3"] {
        display: flex;
        flex-direction: column;
    }

    header nav .dropdown-nav[data-level="3"] > .nav-item {
        padding-left: 30px;
    }

    header nav .dropdown-nav[data-level="3"] > .nav-item > a.nav-link > .nav-link-text {
        display: list-item;
        color: var(--black-color);
    }
}

@media (max-width: 350px) {
    header .navbar-brand-image img {
        top: 110% !important;
        max-height: 100px !important;
    }
}