/* ------------------------------ */
/* --------- Navigation --------- */
/* ------------------------------ */

/* Main */
.site_nav__main > li > a {
    position: relative;
}

/* Support & Reseller */
.site_meta__reseller svg {
    position: relative;
    top: 6px;
}

header.header--no-cover .site_meta__reseller svg {
    fill: var(--brand-black);
}

header.header--cover .site_meta__reseller svg {
    fill: var(--brand-cold-grey);
}



/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 1240px) {

    /* General */
    .site_nav {
        position: relative;
    }

    .macos .site_nav, .ios .site_nav {
        margin-top: -2px;
    }

    .site_nav li {
        display: inline-block;
    }

    .site_nav li a {
        display: inline-block;
        -webkit-transition: opacity var(--transition-2);
        -o-transition: opacity var(--transition-2);
        transition: opacity var(--transition-2);
    }

    .no-touchevents .site_nav li:not(.nav__item--support) a:hover {
        opacity: var(--opacity);
    }


    /* Main */
    .site_nav__main li:not(.nav__item--support) a {
        font-size: var(--font-size-2);
    }

    header.header--no-cover .site_nav__main li:not(.nav__item--support) a {
        color: var(--brand-blue-shade);
    }
    
    header.header--cover .site_nav__main li:not(.nav__item--support) a {
        color: var(--brand-cold-grey);
    }

    .site_nav__main > li.nav__item--active > a, .site_nav__main > li.nav__item--current_ancestor > a,
    .single-loesung .site_nav__main > li.nav__item--what-we-do > a, .single-erfolgsgeschichte .site_nav__main > li.nav__item--what-we-do > a,
    .single-job .site_nav__main > li.nav__item--career > a, .single-post .site_nav__main > li.nav__item--blog > a {
        font-weight: bold;
    }

    .site_nav__main > li {
        position: relative;
        z-index: 2;
    }

    .site_nav__main > li:last-child {
        margin-right: 0;
    }

    .site_nav__main > li:not(.nav__item--support) > a {
        padding: var(--spacing-2);
    }

    .site_nav__main > li:last-child > a {
        padding-right: 0;
    }

    .site_nav__main li.nav__item--has-children > a > svg {
        position: absolute;
        top: 48%;
        right: 0;
        -webkit-transform: translateY(-50%) rotate(90deg);
            -ms-transform: translateY(-50%) rotate(90deg);
                transform: translateY(-50%) rotate(90deg);
    }

    .macos .site_nav__main li.nav__item--has-children > a > svg, .ios .site_nav__main li.nav__item--has-children > a > svg {
        top: 50%;
    }

    header.header--no-cover .site_nav__main li.nav__item--has-children > a > svg {
        fill: var(--brand-blue-shade);
    }
    
    header.header--cover .site_nav__main li.nav__item--has-children > a > svg {
        fill: var(--brand-cold-grey);
    }


    /* Search & Reseller */
    .nav__item--search svg, .nav__item--reseller svg {
        position: relative;
    }

    header.header--no-cover .nav__item--search svg,  header.header--no-cover .nav__item--reseller svg {
        fill: var(--brand-blue-shade);
    }
    
    header.header--cover .nav__item--search svg, header.header--cover .nav__item--reseller svg {
        fill: var(--brand-cold-grey);
    }

    .nav__item--search svg {
        top: 9px;
    }

    .nav__item--reseller svg {
        top: 8px;
    }


    /* Sub */
    .nav__sub {
        position: absolute;
        top: 34px;
        min-width: 260px;
        -webkit-transition: .4s;
        -o-transition: .4s;
        transition: .4s;

        visibility: hidden;
        opacity: 0;
    }

    .site_nav__main li.nav__item--has-children.is-active > .nav__sub {
        top: 39px;

        visibility: visible;
        opacity: 1;
        -webkit-transition: var(--transition-2);
        -o-transition: var(--transition-2);
        transition: var(--transition-2);
        -webkit-transition-delay: .25s;
             -o-transition-delay: .25s;
                transition-delay: .25s;
    }

    .admin-bar .nav__sub::after {
        top: 127px;
    }

    .nav__sub__navigation {
        position: relative;
        z-index: 2;
    }

    .nav__sub li, .nav__sub li > a {
        display: block;
    }

    .nav__sub li > a {
        padding: var(--spacing-1) var(--spacing-2);
    }

    .nav__sub li.nav__item--active > a span, .single-loesung .nav__sub li.nav__item--solutions > a span, .single-erfolgsgeschichte .nav__sub li.nav__item--success-stories > a span {
        border-bottom: 1px solid;
    }

    .macos .site_meta__support, .ios .site_meta__support,
    .macos .site_meta__reseller, .ios .site_meta__reseller {
        position: relative;
        top: -2px;
    }

}


@media all and (min-width: 1400px) {

    .site_nav {
        top: 1px;
    }

    .site_nav__main li.nav__item--has-children:not(.nav__item--support) > a {
        padding-right: var(--spacing-5);
    }

}


@media all and (min-width: 2100px) {

    .site_nav__main > li:not(.nav__item--contact):not(.nav__item--search):not(.nav__item--support):not(.nav__item--reseller) {
        margin-right: var(--spacing-8);
    }

    .site_meta > div + div {
        margin-left: calc(var(--spacing-10) / 2);
    }

}


@media all and (max-width: 2099.98px) and (min-width: 1700px) {

    .site_nav__main > li:not(.nav__item--contact):not(.nav__item--search):not(.nav__item--support):not(.nav__item--reseller) {
        margin-right: var(--spacing-7);
    }

    .site_meta > div + div {
        margin-left: calc(var(--spacing-9) / 2);
    }

}


@media all and (max-width: 1699.98px) and (min-width: 1536px) {

    .site_nav__main > li:not(.nav__item--contact):not(.nav__item--search):not(.nav__item--support):not(.nav__item--reseller) {
        margin-right: var(--spacing-6);
    }

    .site_meta > div + div {
        margin-left: calc(var(--spacing-7) / 2);
    }

}


@media all and (max-width: 1535.98px) and (min-width: 1400px) {

    .site_nav__main > li:not(.nav__item--contact):not(.nav__item--search):not(.nav__item--support):not(.nav__item--reseller) {
        margin-right: var(--spacing-4);
    }

    .site_meta > div + div {
        margin-left: calc(var(--spacing-5) / 2);
    }

}


@media all and (max-width: 1399.98px) and (min-width: 1240px) {

    .site_nav {
        top: 3px;
    } 

    .site_nav__main > li:not(.nav__item--reseller) {
        margin-right: var(--spacing-4)
    }

    .site_meta > div + div {
        margin-left: calc(var(--spacing-9) / 2);
    }

    .site_nav__main li.nav__item--has-children:not(.nav__item--support) > a {
        padding-right: var(--spacing-4);
    }

    .site_nav__main > li:not(.nav__item--has-children) > a {
        padding-right: 0;
    }

}


@media all and (max-width: 1239.98px) {

    /* General */
    body.menu-open {
        overflow: hidden
    }
    

    /* Icon */
    .site_nav__icon {
        cursor: pointer;
        position: absolute;
        right: 0;
        width: var(--height-header);
        height: var(--height-header);
    }

    .site_nav__icon__hamburger {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transition: opacity var(--transition-2);
        -o-transition: opacity var(--transition-2);
        transition: opacity var(--transition-2);
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }

    .no-touchevents .site_nav__icon:hover .site_nav__icon__hamburger {
        opacity: var(--opacity);
    }

    .site_nav__icon__hamburger .line {
        width: 23px;
        height: 2px;
        display: block;
        margin: 5px auto;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    header.header--no-cover .site_nav__icon__hamburger .line {
        background-color: var(--brand-black);
    }
    
    header.header--cover .site_nav__icon__hamburger .line {
        background-color: var(--brand-cold-grey);
    }

    .menu-open .site_nav__icon .line:nth-child(1) {
        -webkit-transform: translateY(7px) rotate(45deg);
            -ms-transform: translateY(7px) rotate(45deg);
                transform: translateY(7px) rotate(45deg);
    }

    .menu-open .site_nav__icon .line:nth-child(2) {
        opacity: 0;
    }

    .menu-open .site_nav__icon .line:nth-child(3) {
        -webkit-transform: translateY(-7px) rotate(-45deg);
            -ms-transform: translateY(-7px) rotate(-45deg);
                transform: translateY(-7px) rotate(-45deg);
    }

    .menu-open.close-animation .site_nav__icon .line:nth-child(1), .menu-open.close-animation .site_nav__icon .line:nth-child(3) {
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
    }

    .menu-open.close-animation .site_nav__icon .line:nth-child(2) {
        opacity: 1;
    }

    
    /* Main */
    .site_nav__container {
        position: fixed;
        top: calc(var(--height-header) - 1px);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--height-header) + 1px);
        height: calc(var(--app-height) - var(--height-header) + 1px);
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
    }

    header.header--cover .site_nav__container {
        background-color: var(--brand-black);
    }

    header.header--no-cover .site_nav__container {
        background-color: var(--brand-white);
    }

    .site_nav__container {
        display: none;
        z-index: -1;
        opacity: 0;
        visibility: hidden;
    }
    
    body.menu-open .site_nav__container {
        display: block;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }

    body.open-animation .site_nav__container {
        z-index: 101;
        opacity: 1;
        visibility: visible;
    }

    body.open-animation.close-animation .site_nav__container {
        opacity: 0;
        -webkit-transition-delay: .25s;
             -o-transition-delay: .25s;
                transition-delay: .25s;
    }

    .site_nav__container__inside {
        overflow: hidden;
    }

    .site_nav ul {
        position: relative;
    }

    .site_nav ul::after, .site_nav .nav__sub ul::after {
        content: "";
        position: absolute;
        left: 0;
        width: 1px;
        
        -webkit-transition: opacity var(--transition-1);
        
        -o-transition: opacity var(--transition-1);
        
        transition: opacity var(--transition-1);
        -webkit-transition-delay: .5s;
             -o-transition-delay: .5s;
                transition-delay: .5s;
    }

    header.header--cover .site_nav ul::after, header.header--cover .site_nav .nav__sub ul::after {
        background-color: var(--brand-blue-screen);
    }

    header.header--no-cover .site_nav ul::after, header.header--no-cover .site_nav .nav__sub ul::after {
        background-color: var(--brand-blue-shade);
    }

    .site_nav__main.sub-is-active::after {
        opacity: 0;
    }

    .site_nav__main.sub-is-active.sub-close-animation::after {
        -webkit-transition-delay: .25s;
             -o-transition-delay: .25s;
                transition-delay: .25s;
        opacity: 1;
    }
    
    .site_nav li a {
        display: block;
        line-height: var(--line-height-3);
    }

    header.header--cover .site_nav li a {
        color: var(--brand-cold-grey);
        background-color: var(--brand-black);
    }

    header.header--no-cover .site_nav li a {
        color: var(--brand-blue-shade);
        background-color: var(--brand-white);
    }

    .site_nav .site_nav__main > li.nav__item--active > a, .site_nav .site_nav__main > li.nav__item--current_ancestor > a,
    .single-loesung .site_nav__main > li.nav__item--what-we-do > a, .single-erfolgsgeschichte .site_nav__main > li.nav__item--what-we-do > a,
    .single-job .site_nav__main > li.nav__item--career > a, .single-post .site_nav__main > li.nav__item--blog > a {
        font-weight: bold;
    }

    .site_nav li > a > span {
        -webkit-transition: opacity var(--transition-2);
        -o-transition: opacity var(--transition-2);
        transition: opacity var(--transition-2);
    }

    .no-touchevents .site_nav li > a:hover > span {
        opacity: var(--opacity);
    }

    .site_nav li > a > svg {
        display: none !important;
    }

    .site_nav .nav__sub li a span {
        position: relative;
    }

    .site_nav .nav__sub li.nav__item--active a span::after,
    .single-loesung .nav__sub li.nav__item--solutions > a span::after, .single-erfolgsgeschichte .nav__sub li.nav__item--success-stories > a span::after {
        content: "";
        position: absolute;
        left: 0;
        height: 2px;
        width: 100%;
    }

    header.header--cover .site_nav .nav__sub li.nav__item--active a span::after,
    .single-loesung header.header--cover .nav__sub li.nav__item--solutions > a span::after, .single-erfolgsgeschichte header.header--cover .nav__sub li.nav__item--success-stories > a span::after {
        background-color: var(--brand-cold-grey);
    }

    header.header--no-cover .site_nav .nav__sub li.nav__item--active a span::after,
    .single-loesung header.header--no-cover .nav__sub li.nav__item--solutions > a span::after, .single-erfolgsgeschichte header.header--no-cover .nav__sub li.nav__item--success-stories > a span::after {
        background-color: var(--brand-blue-shade);
    }

    
    /* Sub */
    .site_nav__container {
        opacity: 0;
        -webkit-transition: opacity var(--transition-1);
        -o-transition: opacity var(--transition-1);
        transition: opacity var(--transition-1);
        -webkit-transition-delay: .25s;
             -o-transition-delay: .25s;
                transition-delay: .25s;
    }

    .open-animation .site_nav__container {
        opacity: 1;
    }

    .open-animation.menu-open.close-animation .site_nav__container {
        -webkit-transition: opacity var(--transition-2);
        -o-transition: opacity var(--transition-2);
        transition: opacity var(--transition-2);
        opacity: 0;
    }

    .site_nav .nav__sub {
        position: absolute;
        z-index: -10;
        top: 0;
        left: 0;
        width: 100%;
        -webkit-transition-delay: .75s;
             -o-transition-delay: .75s;
                transition-delay: .75s;
        -webkit-transition: opacity var(--transition-2);
        -o-transition: opacity var(--transition-2);
        transition: opacity var(--transition-2);

        opacity: 0;
        visibility: hidden;
    }

    .site_nav__main.sub-is-active .nav__item--has-children.is-active .nav__sub {
        z-index: 10;

        opacity: 1;
        visibility: visible;
    }

    .nav__sub__back {
        position: absolute;
        margin-top: 0;
        
        -webkit-transition: var(--transition-2);
        
        -o-transition: var(--transition-2);
        
        transition: var(--transition-2);
        -webkit-transition-delay: .25s;
             -o-transition-delay: .25s;
                transition-delay: .25s;

        opacity: 0;
    }

    header.header--cover .nav__sub__back  {
        color: var(--brand-cold-grey);
    }

    header.header--no-cover .nav__sub__back  {
        color: var(--brand-black);
    }

    .site_nav__main.sub-is-active:not(.sub-animate) .nav__item--has-children.is-active .nav__sub .nav__sub__back {
        opacity: 1;
    }

    .site_nav__main.sub-is-active.sub-close-animation .nav__item--has-children.is-active .nav__sub .nav__sub__back,
    .menu-open.menu-open.close-animation .site_nav__main.sub-is-active:not(.sub-animate) .nav__item--has-children.is-active .nav__sub .nav__sub__back {
        pointer-events: none;
        -webkit-transition-delay: unset;
             -o-transition-delay: unset;
                transition-delay: unset;
        opacity: 0;
    }

    header.header--cover .nav__sub__back svg {
        fill: var(--brand-cold-grey);
    }

    header.header--no-cover .nav__sub__back svg {
        fill: var(--brand-black);
    }


    /* Animation */
    body.open-animation .site_nav__main > li > a, .site_nav__main.sub-is-active:not(.sub-animate) .nav__item--has-children.is-active .nav__sub li > a {
        opacity: 1;
        -webkit-transition: transform .75s cubic-bezier(0,.55,.45,1), opacity .75s;
        -o-transition: transform .75s cubic-bezier(0, .55, .45, 1), opacity .75s;
        -webkit-transition: opacity .75s, -webkit-transform .75s cubic-bezier(0,.55,.45,1);
        transition: opacity .75s, -webkit-transform .75s cubic-bezier(0,.55,.45,1);
        -o-transition: transform .75s cubic-bezier(0,.55,.45,1), opacity .75s;
        transition: transform .75s cubic-bezier(0,.55,.45,1), opacity .75s;
        transition: transform .75s cubic-bezier(0,.55,.45,1), opacity .75s, -webkit-transform .75s cubic-bezier(0,.55,.45,1);
        -webkit-transition-delay: .5s;
             -o-transition-delay: .5s;
                transition-delay: .5s;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: opacity, transform;
    }

    body.open-animation .site_nav__main.sub-is-inactive > li > a {
        -webkit-transition-delay: unset;
             -o-transition-delay: unset;
                transition-delay: unset;
    }

    body.open-animation .site_nav__main.sub-is-active > li > a, 
    .site_nav__main.sub-is-active.sub-close-animation .nav__item--has-children.is-active .nav__sub li > a,
    .menu-open.close-animation .site_nav__main.sub-is-active:not(.sub-animate) .nav__item--has-children.is-active .nav__sub li > a {
        -webkit-transition: transform .5s cubic-bezier(0,.55,.45,1), opacity .5s;
        -o-transition: transform .5s cubic-bezier(0, .55, .45, 1), opacity .5s;
        -webkit-transition: opacity .5s, -webkit-transform .5s cubic-bezier(0,.55,.45,1);
        transition: opacity .5s, -webkit-transform .5s cubic-bezier(0,.55,.45,1);
        -o-transition: transform .5s cubic-bezier(0,.55,.45,1), opacity .5s;
        transition: transform .5s cubic-bezier(0,.55,.45,1), opacity .5s;
        transition: transform .5s cubic-bezier(0,.55,.45,1), opacity .5s, -webkit-transform .5s cubic-bezier(0,.55,.45,1);
        -webkit-transition-delay: unset;
             -o-transition-delay: unset;
                transition-delay: unset;
    }

    .site_nav li > a, body.open-animation .site_nav__main.sub-is-active > li > a,
    .site_nav__main.sub-is-active.sub-close-animation .nav__item--has-children.is-active .nav__sub li > a,
    .menu-open.close-animation .site_nav__main.sub-is-active:not(.sub-animate) .nav__item--has-children.is-active .nav__sub li > a {
        opacity: 0;
        -webkit-transform: translate3d(calc(-1* var(--spacing-7)), 0, 0);
        transform: translate3d(calc(-1* var(--spacing-7)), 0, 0);
    }

    .menu-open.close-animation .site_nav__main.sub-is-active:not(.sub-animate) .nav__item--has-children.is-active .nav__sub li > a {
        -webkit-transition-delay: unset;
             -o-transition-delay: unset;
                transition-delay: unset;
    }

    body.open-animation .site_nav__main.sub-is-active > li > a {
        visibility: hidden;
    }

    .site_nav__main.sub-is-active.sub-close-animation .nav__item--has-children.is-active .nav__sub li > a {
        -webkit-transition-delay: .5s;
             -o-transition-delay: .5s;
                transition-delay: .5s;
        opacity: 0;
        visibility: hidden;
    }

}


@media all and (max-width: 1239.98px) and (min-width: 576px) {

    .site_nav .nav__sub li.nav__item--active a span::after, .single-loesung .nav__sub li.nav__item--solutions > a span::after, .single-erfolgsgeschichte .nav__sub li.nav__item--success-stories > a span::after {
        bottom: -7px;
    }

    .macos .site_nav .nav__sub li.nav__item--active a span::after, .macos .single-loesung .nav__sub li.nav__item--solutions > a span::after, .macos .single-erfolgsgeschichte .nav__sub li.nav__item--success-stories > a span::after,
    .ios .site_nav .nav__sub li.nav__item--active a span::after, .ios .single-loesung .nav__sub li.nav__item--solutions > a span::after, .ios .single-erfolgsgeschichte .nav__sub li.nav__item--success-stories > a span::after {
        bottom: -2px;
    }

    .site_nav ul::after, .site_nav .nav__sub ul::after {
        top: 16px;
        height: calc(100% - 41px);
    }

    .nav__sub__back {
        top: -42px;
    }

    .site_nav li a {
        font-size: var(--font-size-7);
        padding: var(--spacing-3) 0 var(--spacing-3) var(--spacing-7);
    }

}



@media all and (max-width: 1239.98px) and (min-width: 992px) {

    .site_nav__container__inside {
        padding: var(--spacing-10) var(--spacing-8);
    }

    .site_meta {
        min-height: 36px;
        margin-right: 53px;
    }

    .site_nav__icon {
        top: -28px;
    }

    .site_nav__icon__hamburger {
        margin-top: -1px;
    }

    .site_meta__reseller {
        position: relative;
        top: -2px;
        margin-left: var(--spacing-7);
    }

    .site_meta__reseller svg {
        width: 26px;
        height: 26px;
    }

    .macos .site_logo, .ios .site_logo,
    .macos .site_meta__support, .ios .site_meta__support {
        position: relative;
        top: -1px;
    }

}


@media all and (max-width: 991.98px) and (min-width: 576px) {

    .site_nav__container__inside {
        padding: var(--spacing-10) var(--spacing-7);
    }

    .site_meta {
        min-height: 33px;
        margin-right: 53px;
    }

    .site_nav__icon {
        top: -22px;
    }

    .site_meta__reseller {
        position: relative;
        top: -1px;
        margin-left: var(--spacing-7);
    }

    .site_meta__reseller svg {
        width: 24px;
        height: 24px;
    }

}


@media all and (max-width: 575.98px) {

    .site_nav .nav__sub li.nav__item--active a span::after,
    .single-loesung .nav__sub li.nav__item--solutions > a span::after, .single-erfolgsgeschichte .nav__sub li.nav__item--success-stories > a span::after {
        bottom: -6px;
    }

    .macos .site_nav .nav__sub li.nav__item--active a span::after, .macos .single-loesung .nav__sub li.nav__item--solutions > a span::after, .macos .single-erfolgsgeschichte .nav__sub li.nav__item--success-stories > a span::after,
    .ios .site_nav .nav__sub li.nav__item--active a span::after, .ios .single-loesung .nav__sub li.nav__item--solutions > a span::after, .ios .single-erfolgsgeschichte .nav__sub li.nav__item--success-stories > a span::after {
        bottom: -1px;
    }

    .site_nav__container__inside {
        padding: var(--spacing-10) var(--spacing-7);
    }

    .site_nav ul::after, .site_nav .nav__sub ul::after {
        top: 13px;
        height: calc(100% - 34px);
    }

    .site_nav li a {
        padding: var(--spacing-3) 0 var(--spacing-3) var(--spacing-5);
    }

    .site_nav__main > li > a {
        font-size: 34px;
    }

    .site_nav__main .nav__sub li > a {
        font-size: var(--font-size-6);
    }

    .site_meta {
        min-height: 30px;
        margin-right: 41px;
    }

    .site_nav__icon {
        top: -16px;
    }

    .nav__sub__back {
        top: -34px;
    }

    .site_meta__reseller {
        position: relative;
        margin-left: 21px;
    }

    .site_meta__reseller svg {
        width: 22px;
        height: 22px;
    }

}