/**
* layout.css
*
* Copyright 2022, Alex Stroh
* Comvation AG
* https://www.comvation.com
*
* Released on: November 2, 2022
*/

/* ==========================================================================
   Toolbar
   ========================================================================== */
#toolbar {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: all;
    z-index: 1250;
}

#toolbar #open-navigation,
#toolbar #close-navigation {
    display: none;
    width: clamp(3.75rem, 3.5337rem + 0.9615vw, 4.6875rem);
    height: clamp(3.75rem, 3.5337rem + 0.9615vw, 4.6875rem);
}

#toolbar #open-navigation.active,
#toolbar #close-navigation.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

#toolbar #open-navigation line {
    stroke: var(--color-1);
}

#toolbar #close-navigation line {
    stroke: var(--color-2);
}

#toolbar #open-navigation.active {
    background-color: var(--color-2);
}

#toolbar #open-navigation.active:hover line {
    opacity: 0.7;
}

#toolbar #open-navigation.active:hover,
#toolbar #close-navigation.active:hover {
    cursor: pointer;
}

#toolbar #close-navigation.active:hover line {
    opacity: 0.7;
}

#toolbar #close-navigation.active {
    background-color: var(--body-bg);
}

#download-center, #online-anfrage {
    width: clamp(3.75rem, 3.5337rem + 0.9615vw, 4.6875rem);
    height: clamp(3.125rem, 2.9808rem + 0.641vw, 3.75rem);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-11);
    font-family: 'Roboto', arial, sans-serif;
    font-size: clamp(0.6rem, 0.5423rem + 0.2564vw, 0.85rem);
    text-align: center;
}

#download-center:hover, #online-anfrage:hover {
    cursor: pointer;
    opacity: 0.8;
}

#download-center a, #online-anfrage a {
    text-decoration: none;
}

@media only screen and (min-width: 360px) and (orientation: portrait) {}

@media only screen and (min-width: 360px) and (orientation: landscape) {}

@media only screen and (min-width: 390px) and (orientation: portrait) {}

@media only screen and (min-width: 390px) and (orientation: landscape) {}

@media only screen and (min-width: 576px) and (orientation: portrait) {}

@media only screen and (min-width: 576px) and (orientation: landscape) {}

@media only screen and (min-width: 768px) and (orientation: portrait) {}

@media only screen and (min-width: 768px) and (orientation: landscape) {}

@media only screen and (min-width: 834px) and (orientation: portrait) {}

@media only screen and (min-width: 834px) and (orientation: landscape) {}

@media only screen and (min-width: 992px) and (orientation: portrait) {}

@media only screen and (min-width: 992px) and (orientation: landscape) {}

@media only screen and (min-width: 1024px) and (orientation: portrait) {}

@media only screen and (min-width: 1024px) and (orientation: landscape) {}

@media only screen and (min-width: 1112px) and (orientation: portrait) {}

@media only screen and (min-width: 1112px) and (orientation: landscape) {}

@media only screen and (min-width: 1200px) {}

@media only screen and (min-width: 1400px) {}

@media only screen and (min-width: 1600px) {}

@media only screen and (min-width: 1920px) {}

/* ==========================================================================
   Top-Navigation
   ========================================================================== */
#top__navigation ul {
    padding: 0;
    margin: 0;
}

.top__navigation {
    display: none;
}

.home .top__navigation {
    position: relative;
    padding: 0;
    display: none;
}

.top__navigation__lvl1 ul {
    padding: 0;
}

a.top__navigation__lvl1 {
    display: none;
}

a.top__navigation__lvl2 {
    display: none;
}

a.top__navigation__lvl2.meta {
    width: 100%;
    display: flex;
    justify-content: center;
}


#top__navigation > ul > li.top__navigation__lvl1 > ul > li:nth-child(1) {
    background-color: var(--color-4);
}

#top__navigation > ul > li.top__navigation__lvl1 > ul > li:nth-child(2) {
    background-color: var(--color-5);
}

#top__navigation > ul > li.top__navigation__lvl1 > ul > li:nth-child(3) {
    background-color: var(--color-6);
}

#top__navigation > ul > li.top__navigation__lvl1 > ul > li:nth-child(4) {
    background-color: var(--color-7);
}


/* #top__navigation>ul>li:nth-child(2)>ul>div:nth-child(1) { */
/*     background-color: var(--color-4); */
/* } */

/* #top__navigation>ul>li:nth-child(2)>ul>div:nth-child(2) { */
/*     background-color: var(--color-5); */
/* } */

/* #top__navigation>ul>li:nth-child(2)>ul>div:nth-child(3) { */
/*     background-color: var(--color-6); */
/* } */

/* #top__navigation>ul>li:nth-child(2)>ul>div:nth-child(4) { */
/*     background-color: var(--color-7); */
/* } */

.top__navigation .meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    flex-direction: column;
    /* -webkit-transition: all .25s ease-in-out; */
    /* transition: all .25s ease-in-out; */
}

.top__navigation__lvl2.meta {
    width: 100%;
    min-height: 120px;
}

li.top__navigation__lvl2.meta {
    padding: clamp(0.5rem, 0.2451rem + 1.0458vw, 1.5rem);
}


.top__navigation .meta:hover {
    opacity: 0.9;
}

a.top__navigation__lvl2.meta {
    font-family: 'Roboto', arial, sans-serif;
    line-height: normal;
    letter-spacing: 0.8px;
    /* color: var(--color-1); */
    color: var(--navi-color);
    text-transform: uppercase;
}

.nav_title-bold {
    font-family: 'Roboto', arial, sans-serif;
    line-height: normal;
    letter-spacing: 0.5px;
}

@media only screen and (min-width: 360px) and (orientation: portrait) {}

@media only screen and (min-width: 360px) and (orientation: landscape) {}

@media only screen and (min-width: 390px) and (orientation: portrait) {}

@media only screen and (min-width: 390px) and (orientation: landscape) {}

@media only screen and (min-width: 576px) and (orientation: portrait) {}

@media only screen and (min-width: 576px) and (orientation: landscape) {}

@media only screen and (min-width: 768px) and (orientation: portrait) {
    .home .top__navigation {
        display: none;
    }
}

@media only screen and (min-width: 768px) and (orientation: landscape) {
    .home .top__navigation {
        display: none;
    }
}


@media only screen and (min-width: 834px) and (orientation: portrait) {
    .home .top__navigation {
        display: none;
    }
}

@media only screen and (min-width: 834px) and (orientation: landscape) {
    .home .top__navigation {
        display: block;
    }

    #top__navigation,
    .top__navigation,
    .top__navigation .meta {
        height: calc(var(--navi-header) - 70px);
    }
}

@media only screen and (min-width: 992px) and (orientation: portrait) {
    .home .top__navigation {
        display: none;
    }
}

@media only screen and (min-width: 992px) and (orientation: landscape) {
    .home .top__navigation {
        display: none;
    }
}

@media only screen and (min-width: 1024px) and (orientation: portrait) {
    .home .top__navigation {
        display: block;
    }

    #top__navigation,
    .top__navigation,
    .top__navigation .meta {
        height: calc(var(--navi-header) - 60px);
    }

    a.top__navigation__lvl2.meta {
        font-size: clamp(0.875rem, 0.1436rem + 1.1429vw, 1rem);
    }

    .nav_title-bold {
        font-size: clamp(1.125rem, 0.3936rem + 1.1429vw, 1.25rem);
    }
}

@media only screen and (min-width: 1024px) and (orientation: landscape) {
    .home .top__navigation {
        display: block;
    }

    #top__navigation,
    .top__navigation,
    .top__navigation .meta {
        height: calc(var(--navi-header) - 70px);
    }

    a.top__navigation__lvl2.meta {
        font-size: clamp(0.9375rem, 0.5718rem + 0.5714vw, 1rem);
    }

    .nav_title-bold {
        font-size: clamp(1.125rem, 0.3936rem + 1.1429vw, 1.25rem);
    }
}

@media only screen and (min-width: 1112px) and (orientation: portrait) {}

@media only screen and (min-width: 1112px) and (orientation: landscape) {
    .home .top__navigation {
        display: block;
    }

    #top__navigation,
    .top__navigation,
    .top__navigation .meta {
        height: calc(var(--navi-header) - 60px);
    }
}

@media only screen and (min-width: 1200px) {

    #top__navigation,
    .top__navigation,
    .top__navigation .meta {
        height: calc(var(--navi-header) - 40px);
    }

    a.top__navigation__lvl2.meta {
        font-size: clamp(0.9375rem, 0.8651rem + 0.297vw, 1.125rem);
    }

    .nav_title-bold {
        font-size: clamp(1.375rem, 1.2785rem + 0.396vw, 1.625rem);
    }
}

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

    #top__navigation,
    .top__navigation,
    .top__navigation .meta {
        height: calc(var(--navi-header) - 40px);
    }
}

@media only screen and (min-width: 1600px) {

    #top__navigation,
    .top__navigation,
    .top__navigation .meta {
        height: calc(var(--navi-header) - 20px);
    }

    a.top__navigation__lvl2.meta {
        font-size: clamp(1rem, 0.9363rem + 0.2614vw, 1.25rem);
        /* text-shadow: 1px 1px 1px #000000; */
        /* text-shadow: 0px 0px 5px #000000; */
    }

    .nav_title-bold {
        font-size: clamp(1.75rem, 1.6863rem + 0.2614vw, 2rem);
        font-weight: 700;
    }
}

@media only screen and (min-width: 1920px) {

    #top__navigation,
    .top__navigation,
    .top__navigation .meta {
        height: var(--navi-header);
    }
}

/* ==========================================================================
   Search
   ========================================================================== */
#search {
    margin-bottom: 1rem;
    padding: 1rem;
}

.searchterm input {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 0;
    padding: 0 0.5rem;
    position: relative;
    z-index: 1;
}

.searchbutton svg {
    width: 30px;
    height: 40px;
}

.navigation-header #search {
    display: none;
}

.navigation-footer #search {
    display: block;
}

.navigation-header {
    height: 20vh;
}

.navigation-footer {
    height: 20vh;
}

#main-navigation hr {
    display: none;
    background-color: var(--body-bg);
    opacity: 1;
}

.navigation-content ul {
    padding: 1rem;
}

.navigation-footer ul {
    padding: 0 1.25rem;
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.navigation-footer-left {
    display: none;
}

.navigation-content ul.level_2.menu {
    padding: 0 0 1rem 0;
}

.navigation-content .accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease;
}

.navigation-content .accordion-button:focus {
    z-index: 3;
    outline: 0;
    box-shadow: none;
}

.navigation-content .accordion-button:not(.collapsed) {
    background-color: transparent;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
    box-shadow: none;
}

.navigation-content #home {
    display: none;
}

.navigation-content a.level-2.menu_node {
    display: none;
}

.mobile-navi.mobile-navi-header {
    border-top: 1px solid var(--color-2);
}

.mobile-navi.mobile-navi-header.navi-id-2 {
    border: none;
}

.accordion-button:after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23004C9B'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}

.navigation-content button.accordion-button {
    font-family: 'Roboto', arial, sans-serif;
    font-size: 1.125rem;
    line-height: 35px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--navi-headline);
}

.navigation-content a.level-2 {
    font-family: 'Roboto', arial, sans-serif;
    font-size: 1rem;
    line-height: 35px;
    letter-spacing: 0.5px;
    color: var(--navi-color);
    pointer-events: all;
}

/* ==========================================================================
   Navigation allgemein
   ========================================================================== */
.desktop-navi {
    display: none;
}

.navigation-logo {
    position: absolute;
}

#main-navigation {
    position: fixed;
    width: 100%;
    min-height: calc(var(--vh, 1vh) * 100);
    top: 0;
    left: 0;
    bottom: 0;
    align-items: center;
    opacity: 0;
    -webkit-transition: all .125s ease-in-out;
    transition: all .125s ease-in-out;
    pointer-events: none;
}

#main-navigation.active {
    position: fixed;
    overflow-y: auto;
    top: 0;
    left: 0;
    pointer-events: all;
    opacity: 1;
    background-color: var(--navi-bg);
}

#navigation[aria-hidden="true"] {
    position: relative;
    width: 100%;
    top: 0;
    display: flex;
    /* transition: opacity .25s, z-index 0s .25s; */
    opacity: 0;
    z-index: 1;
}

#navigation[aria-hidden="false"] {
    position: relative;
    width: 100%;
    top: 0;
    display: flex;
    /* transition: opacity .25s; */
    background-color: var(--navi-bg);
    opacity: 1;
    z-index: 1200;
}

header[aria-hidden="true"] {
    /* transition: opacity .25s, z-index 0s .25s; */
    opacity: 0;
    z-index: 1;
}

header[aria-hidden="false"] {
    /* transition: opacity .25s; */
    opacity: 1;
    z-index: 900;
}

main[aria-hidden="true"] {
    /* transition: opacity .25s, z-index 0s .25s; */
    opacity: 0;
    z-index: 1;
}

main[aria-hidden="false"] {
    /* transition: opacity .25s; */
    opacity: 1;
    z-index: 850;
}

footer[aria-hidden="true"] {
    /* transition: opacity .125s, z-index 0s .125s; */
    opacity: 0;
    z-index: 1;
}

footer[aria-hidden="false"] {
    position: relative;
    /* transition: opacity .25s; */
    opacity: 1;
    z-index: 900;
}

.navigation-footer-right svg.bi.bi-linkedin {
    color: var(--navi-links);
}

/* ==========================================================================
   Navigation Mobile / Portrait
   ========================================================================== */
@media only screen and (min-device-width: 390px) and (max-device-width: 926px) and (orientation: portrait) {
    .mobile-navi {
        display: block;
    }

    .desktop-navi {
        display: none;
    }

    .navigation-content button.accordion-button {
        font-size: 1.125rem;
    }

    .navigation-content a.level-2 {
        font-size: 1.125rem;
    }

    .navigation-header {
        height: 20vh;
    }

    .navigation-footer {
        height: 20vh;
    }
}

@media only screen and (min-device-width: 390px) and (max-device-width: 926px) and (orientation: landscape) {
    .mobile-navi {
        display: block;
    }

    .desktop-navi {
        display: none;
    }

    .navigation-content button.accordion-button {
        font-size: 1.25rem;
    }

    .navigation-content a.level-2 {
        font-size: 1.125rem;
    }

    .navigation-header {
        height: 30vh;
    }

    .navigation-footer {
        height: 100%;
        margin-bottom: 3rem;
    }
}

/* ==========================================================================
   Navigation Tablet / Portrait
   ========================================================================== */
@media only screen and (min-device-width: 768px) and (orientation: portrait) {
    .mobile-navi {
        display: none;
    }

    .desktop-navi {
        display: block;
    }

    #toolbar {
        position: fixed;
        top: calc(50vh - 30px);
        right: 0;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        pointer-events: all;
        z-index: 1250;
    }

    #download-center, #online-anfrage {
        display: flex;
    }

    #navigation hr {
        display: block;
        width: 100%;
    }

    #search {
        margin-bottom: 0;
        padding: 0 1rem;
    }

    .navigation-header #search {
        display: block;
    }

    .navigation-footer #search {
        display: none;
    }

    .navigation-header {
        height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .navigation-footer {
        height: 14vh;
    }

    #main-navigation li.desktop-navi.home {
        display: none;
    }

    #main-navigation li.level-1>a {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--navi-headline);
        pointer-events: none;
    }

    #main-navigation li.level-2>a {
        font-size: 1rem;
    }

    .navigation-content ul.level_2.menu {
        padding: 0;
    }

    .navigation-content ul {
        padding: 0;
        margin: 0;
    }

    nav ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    nav#navigation ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    nav#navigation ul.level_2 {
        display: flex;
        flex-direction: column;
    }

    li.desktop-navi {
        padding: 1rem 0;
    }

    li.level-2 {
        width: 100%;
    }

    .navigation-footer ul {
        list-style: none;
        padding: 0 1rem;
    }

    .navigation-footer-left ul:first-child li:first-child {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--navi-headline);
        pointer-events: none;
    }

    .navigation-footer a,
    .navigation-footer a {
        color: var(--navi-links);
    }

    .navigation-footer-left {
        display: flex;
    }

    .navigation-footer-left ul,
    .navigation-footer-right ul {
        flex-wrap: wrap;
    }

    .navigation-footer-left ul {
        display: block;
        padding: 0;
        margin-right: 2rem;
    }

    .navigation-footer-left ul:nth-child(2) {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-around;
    }

    .navigation-footer-left li {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        color: var(--navi-links);
        pointer-events: all;
    }

    .navigation-footer-right {
        display: flex;
    }

    .navigation-footer-right ul {
        display: flex;
        line-height: 35px;
        justify-content: flex-start;
        padding: 0;
    }

    .navigation-footer-right li {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        height: 35px;
        line-height: 35px;
        letter-spacing: 0.5px;
        color: var(--navi-links);
        pointer-events: all;
        margin-right: 2rem;
    }
}

@media only screen and (min-device-width: 834px) and (orientation: portrait) {
    .mobile-navi {
        display: none;
    }

    .desktop-navi {
        display: block;
    }

    #toolbar {
        position: fixed;
        top: calc(50vh - 30px);
        right: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        pointer-events: all;
        z-index: 1250;
    }

    #download-center, #online-anfrage {
        display: flex;
    }

    #navigation hr {
        display: block;
        width: 100%;
    }

    #search {
        margin-bottom: 0;
        padding: 0 1rem;
    }

    .navigation-header #search {
        display: block;
    }

    .navigation-footer #search {
        display: none;
    }

    .navigation-header {
        height: 12vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .navigation-footer {
        height: 14vh;
    }

    #main-navigation li.desktop-navi.home {
        display: none;
    }

    #main-navigation li.level-1>a {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1.125rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--navi-headline);
        pointer-events: none;
    }

    #main-navigation li.level-2>a {
        font-size: 1.125rem;
    }

    .navigation-content ul.level_2.menu {
        padding: 0;
    }

    .navigation-content ul {
        padding: 0;
        margin: 0;
    }

    nav ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    nav#navigation ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    nav#navigation ul.level_2 {
        display: flex;
        flex-direction: column;
    }

    li.desktop-navi {
        padding: 1.5rem 0;
    }

    li.level-2 {
        width: 100%;
    }

    .navigation-footer ul {
        list-style: none;
        padding: 0;
    }

    .navigation-footer-left ul:first-child li:first-child {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--navi-headline);
        pointer-events: none;
    }

    .navigation-footer a,
    .navigation-footer a {
        color: var(--navi-links);
    }

    .navigation-footer-left {
        display: flex;
    }

    .navigation-footer-left ul,
    .navigation-footer-right ul {
        flex-wrap: wrap;
    }

    .navigation-footer-left ul {
        display: block;
        padding: 0;
        margin-right: 2rem;
    }

    .navigation-footer-left ul:nth-child(2) {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-around;
    }

    .navigation-footer-left li {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        color: var(--navi-links);
        pointer-events: all;
    }

    .navigation-footer-right {
        display: flex;
    }

    .navigation-footer-right ul {
        display: flex;
        line-height: 35px;
        justify-content: flex-start;
    }

    .navigation-footer-right li {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        height: 35px;
        line-height: 35px;
        letter-spacing: 0.5px;
        color: var(--navi-links);
        pointer-events: all;
        margin-right: 2rem;
    }
}

@media (min-width: 992px) {
    nav ul {
        display: flex;
        /* flex-wrap: wrap; */
        /* flex-direction: row; */
    }
}

@media only screen and (min-device-width: 1024px) and (orientation: portrait) {
    .mobile-navi {
        display: none;
    }

    .desktop-navi {
        display: block;
    }

    #toolbar {
        position: fixed;
        top: calc(50vh - 30px);
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: all;
        z-index: 1250;
    }

    #download-center, #online-anfrage {
        display: flex;
    }

    #navigation hr {
        display: block;
        width: 100%;
        padding: 0;
    }

    #search {
        margin-bottom: 0;
        padding: 0;
    }

    .navigation-header #search {
        display: block;
    }

    .navigation-footer #search {
        display: none;
    }

    .navigation-header {
        height: 14vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .navigation-footer {
        height: 14vh;
    }

    #main-navigation li.desktop-navi.home {
        display: none;
    }

    #main-navigation li.level-1>a {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1.125rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--navi-headline);
        pointer-events: none;
    }

    #main-navigation li.level-2>a {
        font-size: 1.125rem;
    }

    .navigation-content ul.level_2.menu {
        padding: 0;
    }

    .navigation-content {
        min-height: 55vh;
    }

    .navigation-content ul {
        padding: 0;
        margin: 0;
    }

    nav ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    nav#navigation ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    nav#navigation ul.level_2 {
        display: flex;
        flex-direction: column;
    }

    li.desktop-navi {
        padding: 2rem 0;
    }

    li.level-2 {
        width: 100%;
    }

    .navigation-footer ul {
        list-style: none;
        padding: 0 1rem;
    }

    .navigation-footer-left ul:first-child li:first-child {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--navi-headline);
        pointer-events: none;
    }

    .navigation-footer a,
    .navigation-footer a {
        color: var(--navi-links);
    }

    .navigation-footer-left {
        display: flex;
    }

    .navigation-footer-left ul,
    .navigation-footer-right ul {
        flex-wrap: wrap;
    }

    .navigation-footer-left ul {
        display: block;
        padding: 0;
        margin-right: 2rem;
    }

    .navigation-footer-left ul:nth-child(2) {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-around;
    }

    .navigation-footer-left li {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        color: var(--navi-links);
        pointer-events: all;
    }

    .navigation-footer-right {
        display: flex;
    }

    .navigation-footer-right ul {
        display: flex;
        line-height: 35px;
        justify-content: flex-start;
        padding: 0;
    }

    .navigation-footer-right li {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        height: 35px;
        line-height: 35px;
        letter-spacing: 0.5px;
        color: var(--navi-links);
        pointer-events: all;
        margin-right: 2rem;
    }
}

/* ==========================================================================
   Navigation Tablet / Landscape
   ========================================================================== */
@media only screen and (min-device-width: 1024px) and (orientation: landscape) {
    .mobile-navi {
        display: none;
    }

    .desktop-navi {
        display: block;
    }

    #toolbar {
        position: fixed;
        top: calc(50vh - 30px);
        right: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        pointer-events: all;
        z-index: 1250;
    }

    #download-center, #online-anfrage {
        display: flex;
    }

    #navigation hr {
        display: block;
        width: 100%;
    }

    #search {
        margin-bottom: 0;
        padding: 0 1rem;
    }

    .navigation-header #search {
        display: block;
    }

    .navigation-footer #search {
        display: none;
    }

    .navigation-header {
        height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .navigation-footer {
        height: 14vh;
    }

    #main-navigation li.desktop-navi.home {
        display: none;
    }

    #main-navigation li.level-1>a {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--navi-headline);
        pointer-events: none;
    }

    #main-navigation li.level-2>a {
        font-size: 1rem;
    }

    .navigation-content ul.level_2.menu {
        padding: 0;
    }

    .navigation-content ul {
        padding: 0;
        margin: 0;
    }

    nav ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    nav#navigation ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    nav#navigation ul.level_2 {
        display: flex;
        flex-direction: column;
    }

    li.desktop-navi {
        padding: 0.5rem 0;
    }

    li.level-2 {
        width: 100%;
    }

    .navigation-footer ul {
        list-style: none;
        padding: 0 1rem;
    }

    .navigation-footer-left ul:first-child li:first-child {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--navi-headline);
        pointer-events: none;
    }

    .navigation-footer a,
    .navigation-footer a {
        color: var(--navi-links);
    }

    .navigation-footer-left {
        display: flex;
    }

    .navigation-footer-left ul,
    .navigation-footer-right ul {
        flex-wrap: wrap;
    }

    .navigation-footer-left ul {
        display: block;
        padding: 0;
        margin-right: 2rem;
    }

    .navigation-footer-left ul:nth-child(2) {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-around;
    }

    .navigation-footer-left li {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        color: var(--navi-links);
        pointer-events: all;
    }

    .navigation-footer-right {
        display: flex;
    }

    .navigation-footer-right ul {
        display: flex;
        line-height: 35px;
        justify-content: flex-start;
        padding: 0;
        margin: 0;
    }

    .navigation-footer-right li {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        height: 35px;
        line-height: 35px;
        letter-spacing: 0.5px;
        color: var(--navi-links);
        pointer-events: all;
        margin-right: 2rem;
    }
}

@media only screen and (min-device-width: 1112px) and (orientation: landscape) {
    .mobile-navi {
        display: none;
    }

    .desktop-navi {
        display: block;
    }

    #toolbar {
        position: fixed;
        top: calc(50vh - 30px);
        right: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        pointer-events: all;
        z-index: 1250;
    }

    #download-center, #online-anfrage {
        display: flex;
    }

    #navigation hr {
        display: block;
        width: 100%;
    }

    #search {
        margin-bottom: 0;
        padding: 0;
    }

    .navigation-header #search {
        display: block;
    }

    .navigation-footer #search {
        display: none;
    }

    .navigation-header {
        height: 14vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .navigation-footer {
        height: 14vh;
    }

    #main-navigation li.desktop-navi.home {
        display: none;
    }

    #main-navigation li.level-1>a {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1.125rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--navi-headline);
        pointer-events: none;
    }

    #main-navigation li.level-2>a {
        font-size: 1.125rem;
    }

    .navigation-content ul.level_2.menu {
        padding: 0;
    }

    .navigation-content {
        min-height: 60vh;
    }

    .navigation-content ul {
        padding: 0;
        margin: 0;
    }

    nav ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    nav#navigation ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    nav#navigation ul.level_2 {
        display: flex;
        flex-direction: column;
    }

    li.desktop-navi {
        padding: 1.25rem 0;
    }

    li.level-2 {
        width: 100%;
    }

    .navigation-footer ul {
        list-style: none;
        padding: 0 1rem;
    }

    .navigation-footer-left ul:first-child li:first-child {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--navi-headline);
        pointer-events: none;
    }

    .navigation-footer a,
    .navigation-footer a {
        color: var(--navi-links);
    }

    .navigation-footer-left {
        display: flex;
    }

    .navigation-footer-left ul,
    .navigation-footer-right ul {
        flex-wrap: wrap;
    }

    .navigation-footer-left ul {
        display: block;
        padding: 0;
        margin-right: 2rem;
    }

    .navigation-footer-left ul:nth-child(2) {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-around;
    }

    .navigation-footer-left li {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        color: var(--navi-links);
        pointer-events: all;
    }

    .navigation-footer-right {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .navigation-footer-right ul {
        display: flex;
        line-height: 35px;
        justify-content: flex-start;
        padding: 0;
    }

    .navigation-footer-right li {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        height: 35px;
        line-height: 35px;
        letter-spacing: 0.5px;
        color: var(--navi-links);
        pointer-events: all;
        margin-left: 0;
        margin-right: 2rem;
    }
}

/* ==========================================================================
   Navigation Desktop
   ========================================================================== */
@media screen and (min-device-width: 1200px) and (orientation: landscape) {
    .mobile-navi {
        display: none;
    }

    .desktop-navi {
        display: block;
    }

    #toolbar {
        position: fixed;
        top: calc(50vh - 30px);
        right: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        pointer-events: all;
        z-index: 1250;
    }

    #download-center, #online-anfrage {
        display: flex;
    }

    #navigation hr {
        display: block;
        width: 100%;
    }

    #search {
        margin-bottom: 0;
        padding: 0;
    }

    .navigation-header #search {
        display: block;
    }

    .navigation-footer #search {
        display: none;
    }

    .navigation-header {
        height: 14vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .navigation-footer {
        height: 14vh;
    }

    #main-navigation li.desktop-navi.home {
        display: none;
    }

    #main-navigation li.level-1>a {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1.125rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--navi-headline);
        pointer-events: none;
    }

    #main-navigation li.level-2>a {
        font-size: 1.125rem;
    }

    .navigation-content ul.level_2.menu {
        padding: 0;
    }

    .navigation-content {
        min-height: 60vh;
    }

    .navigation-content ul {
        padding: 0;
        margin: 0;
    }

    nav ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    nav#navigation ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    nav#navigation ul.level_2 {
        display: flex;
        flex-direction: column;
    }

    li.desktop-navi {
        padding: 1.25rem 0;
    }

    li.level-2 {
        width: 100%;
    }

    .navigation-footer ul {
        list-style: none;
        padding: 0 1rem;
    }

    .navigation-footer-left ul:first-child li:first-child {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--navi-headline);
        pointer-events: none;
    }

    .navigation-footer a,
    .navigation-footer a {
        color: var(--navi-links);
    }

    .navigation-footer-left {
        display: flex;
    }

    .navigation-footer-left ul,
    .navigation-footer-right ul {
        flex-wrap: wrap;
    }

    .navigation-footer-left ul {
        display: block;
        padding: 0;
        margin-right: 3rem;
    }

    .navigation-footer-left ul:nth-child(2) {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-around;
    }

    .navigation-footer-left li {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        color: var(--navi-links);
        pointer-events: all;
    }

    .navigation-footer-right {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .navigation-footer-right ul {
        display: flex;
        line-height: 35px;
        justify-content: flex-start;
        padding: 0;
    }

    .navigation-footer-right li {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        height: 35px;
        line-height: 35px;
        letter-spacing: 0.5px;
        color: var(--navi-links);
        pointer-events: all;
        margin-left: 2rem;
        margin-right: 0;
    }
}

@media screen and (min-device-width: 1400px) and (orientation: landscape) {
    .mobile-navi {
        display: none;
    }

    .desktop-navi {
        display: block;
    }

    #toolbar {
        position: fixed;
        top: calc(50vh - 30px);
        right: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        pointer-events: all;
        z-index: 1250;
    }

    #download-center, #online-anfrage {
        display: flex;
    }

    #navigation hr {
        display: block;
        width: 100%;
    }

    #search {
        margin-bottom: 0;
        padding: 0;
    }

    .navigation-header #search {
        display: block;
    }

    .navigation-footer #search {
        display: none;
    }

    .navigation-header {
        height: 14vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .navigation-footer {
        height: 14vh;
    }

    #main-navigation li.desktop-navi.home {
        display: none;
    }

    #main-navigation li.level-1>a {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1.25rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--navi-headline);
        pointer-events: none;
    }

    #main-navigation li.level-2>a {
        font-size: 1.25rem;
    }

    .navigation-content ul.level_2.menu {
        padding: 0;
    }

    .navigation-content {
        min-height: 60vh;
    }

    .navigation-content ul {
        padding: 0;
        margin: 0;
    }

    nav ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    nav#navigation ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    nav#navigation ul.level_2 {
        display: flex;
        flex-direction: column;
    }

    li.desktop-navi {
        padding: 1.25rem 0;
    }

    li.level-2 {
        width: 100%;
    }

    .navigation-footer ul {
        list-style: none;
        padding: 0 1rem;
    }

    .navigation-footer-left ul:first-child li:first-child {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--navi-headline);
        pointer-events: none;
    }

    .navigation-footer a,
    .navigation-footer a {
        color: var(--navi-links);
    }

    .navigation-footer-left {
        display: flex;
    }

    .navigation-footer-left ul,
    .navigation-footer-right ul {
        flex-wrap: wrap;
    }

    .navigation-footer-left ul {
        display: block;
        padding: 0;
        margin-right: 3rem;
    }

    .navigation-footer-left ul:nth-child(2) {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-around;
    }

    .navigation-footer-left li {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        color: var(--navi-links);
        pointer-events: all;
    }

    .navigation-footer-right {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .navigation-footer-right ul {
        display: flex;
        line-height: 35px;
        justify-content: flex-start;
        padding: 0;
    }

    .navigation-footer-right li {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        height: 35px;
        line-height: 35px;
        letter-spacing: 0.5px;
        color: var(--navi-links);
        pointer-events: all;
        margin-left: 2rem;
        margin-right: 0;
    }
}

@media screen and (min-device-width: 1600px) and (orientation: landscape) {
    .mobile-navi {
        display: none;
    }

    .desktop-navi {
        display: block;
    }

    #toolbar {
        position: fixed;
        top: calc(50vh - 30px);
        right: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        pointer-events: all;
        z-index: 1250;
    }

    #download-center, #online-anfrage {
        display: flex;
    }

    #navigation hr {
        display: block;
        width: 100%;
    }

    #search {
        margin-bottom: 0;
        padding: 0;
    }

    .navigation-header #search {
        display: block;
    }

    .navigation-footer #search {
        display: none;
    }

    .navigation-header {
        height: 14vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .navigation-footer {
        height: 14vh;
    }

    #main-navigation li.desktop-navi.home {
        display: none;
    }

    #main-navigation li.level-1>a {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1.375rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--navi-headline);
        pointer-events: none;
        font-weight: 700;
    }

    #main-navigation li.level-2>a {
        font-size: 1.375rem;
    }

    .navigation-content ul.level_2.menu {
        padding: 0;
    }

    .navigation-content {
        min-height: 64vh;
    }

    .navigation-content ul {
        padding: 0;
        margin: 0;
    }

    nav ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    nav#navigation ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    nav#navigation ul.level_2 {
        display: flex;
        flex-direction: column;
    }

    li.desktop-navi {
        padding: 1.375rem 0;
    }

    li.level-2 {
        width: 100%;
    }

    .navigation-footer ul {
        list-style: none;
        padding: 0 1rem;
    }

    .navigation-footer-left ul:first-child li:first-child {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--navi-headline);
        pointer-events: none;
    }

    .navigation-footer a,
    .navigation-footer a {
        color: var(--navi-links);
    }

    .navigation-footer-left {
        display: flex;
    }

    .navigation-footer-left ul,
    .navigation-footer-right ul {
        flex-wrap: wrap;
    }

    .navigation-footer-left ul {
        display: block;
        padding: 0;
        margin-right: 3rem;
    }

    .navigation-footer-left ul:nth-child(2) {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-around;
    }

    .navigation-footer-left li {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        line-height: 35px;
        letter-spacing: 0.5px;
        color: var(--navi-links);
        pointer-events: all;
    }

    .navigation-footer-right {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .navigation-footer-right ul {
        display: flex;
        line-height: 35px;
        justify-content: flex-start;
        padding: 0;
    }

    .navigation-footer-right li {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        height: 35px;
        line-height: 35px;
        letter-spacing: 0.5px;
        color: var(--navi-links);
        pointer-events: all;
        margin-left: 2rem;
        margin-right: 0;
    }

    .navigation-content a.level-2 {
        font-family: 'Roboto', arial, sans-serif;
        font-size: 1rem;
        line-height: 2.5rem;
        letter-spacing: 0.5px;
        color: var(--navi-color);
        pointer-events: all;
    }

    .navigation-content a.level-2:hover {
        color: var(--navi-links-hover);
        text-decoration: none;
        cursor: pointer;
    }
}

@media screen and (min-device-width: 1920px) {}

/* ==========================================================================
   Mobile Content Navigation
   ========================================================================== */
#mobile-content-navigation ul.level_2.menu {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

#mobile-content-navigation .col-3 {
    flex: 0 0 auto;
    width: 50%;
}

#mobile-content-navigation .col-3.meta {
    display: flex;
    align-items: center;
}

#mobile-content-navigation a.top__navigation__lvl2.inactive.meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#mobile-content-navigation li.top__navigation__lvl2.meta {
    height: 100px;
    display: flex;
    align-items: center;
}

@media only screen and (min-width: 1024px) and (orientation: portrait) {
    #mobile-content-navigation {
        display: none;
    }
}

@media only screen and (min-width: 1024px) and (orientation: landscape) {
    #mobile-content-navigation {
        display: none;
    }
}

/* ==========================================================================
   End
   ========================================================================== */