@charset "UTF-8";

#kopfbereich {width:100%; background-color:#fff; padding:12px 0;}
.nav-wrapper {display:flex; width:100%; flex-direction:row; flex-wrap:wrap; justify-content:space-between;}
.logo {flex-basis:50%; background-color:#fff; text-align:left; display:flex; align-items:center; justify-content:flex-start; transition:all ease 1s;}
.logo a {display:flex;}
.logo img {width:100%;}
/*.nav-visible .logo {width:calc(100% - 80px);}*/
.info {background-color:#141715; border-bottom:solid 1px #fff; border-top:solid 6px #9E9E9E; color:#fff;}



header {width:100%; position:fixed; z-index:9; border-bottom:solid 1px #fff; top:0;}
#header-placeholder {height:60px; position:relative; width:100%;}
.header-wrapper {display: flex; flex-direction: column; position: relative; background-color:var(--color1);}
#nav-btn-c {display:flex; justify-content:right; align-items:center; width:40px; height:40px; margin-right:20px;}
#nav-btn {display:flex; justify-content:center; align-items:center; top:15px; right:20px;}
#nav-btn span {text-transform:uppercase; color:#fff; font-weight:bold; display:none; transition:all ease .5s;}
.nav-btn-c {display:flex; flex-direction:column; margin-left:20px; margin-top:3px;}
.nav-btn-bar {width:42px; height:6px; margin-bottom:5px; display:block; background-color:var(--color1); transition:all ease .3s; opacity:1; transform:rotate(0) translateY(0); -webkit-transform: rotate(0) translateY(0);}
.nav-visible .nav-btn-bar {background-color:var(--color1);}
.nav-visible .nav-btn-bar:nth-of-type(1) {transform:translateY(11px) rotate(45deg); -webkit-transform: translateY(11px) rotate(45deg);}
.nav-visible .nav-btn-bar:nth-of-type(2) {opacity:0;}
.nav-visible .nav-btn-bar:nth-of-type(3) {transform:translateY(-11px) rotate(-45deg); -webkit-transform:translateY(-11px) rotate(-45deg);}
.nav-visible #nav-btn span {display:none;}
#menu {position:absolute; top:150px; left:0; width:100%; z-index:100;transition:height ease .3s;}
#menu.container {text-align:left; padding-top:0; padding-bottom:0;}
#menu ul {padding-top:10px; padding-bottom:10px; margin-top:0;}
#menu > ul {left:0;}
.nav-minimized #menu ul li {margin-left:10px; margin-right:10px;}

/* Aktive Menüpunkte - nicht ausgearbeitet
#menu ul li.active a {font-weight:bold; border-left: solid 10px var(--color1);}
#menu ul li.active li a {font-weight:normal; border-left:none}
*/

#nav-c {z-index:999; border-top: solid 4px #c2c2c2; background-color:#fff; position:fixed; top:105px; left:0; width:100%; height:0; overflow:hidden; transition: height ease .4s, top ease .4s;}
#menu {position:absolute; width:100%; transition:height ease .4s; top:0; left:0;}
#menu ul {position:absolute; top:85px; width:100%; z-index:1; overflow:hidden;}
#menu ul li {padding: 0 0 0 0; margin-bottom:7px; position:relative;}
#menu ul li a {padding:10px 10px 8px 37px; height:100%; background-color:#f3f3f3; border:solid 1px #c2c2c2; border-width:1px 0; font-size:18px; font-weight:normal; display:inline-block; width:100%; padding-right:0; color:var(--color1); text-decoration:none; background-position:left -200px center; background-repeat:no-repeat;}
#menu ul li .arrow {position:absolute; display:inline-block; text-align:right; font-size:0; cursor:pointer; top:0px; width:96px; right:-20px; height:41px; background-image:url(/assets/img/arrow.svg); background-position:center center; background-size:24px; background-repeat: no-repeat; background-color:#919191;}
#menu ul ul li {}
#menu ul ul li a {color:#00355d;}
#menu ul ul li:hover .arrow::before {border-color:transparent transparent transparent #fff;}
#menu ul li.nav-zurueck {cursor:pointer; position:relative; padding-left:40px; list-style-type:none; padding-top:4px; margin-left:20px; padding-bottom:3px; color:var(--color1); background-image:url(/assets/img/arrows-back.svg); background-position:left 20px center; background-size:14px; background-repeat:no-repeat;}
#menu ul ul {top:160px; background-color:#fff; width:100%; position:fixed; left:0; transform:translateX(100vw); -webkit-transform:translateX(100vw); transition:transform ease .4s; z-index:2;}
#menu ul ul.nav-ul-active {transform:translateX(0px); -webkit-transform: translateX(0px);}
#menu ul ul ul.nav-ul-active {transform:translateX(0px); -webkit-transform:translateX(0px);}
#menu ul ul ul {color:#fff; z-index:3; top:0; left:0;}
#menu ul ul ul ul {background-color:#c0c7df; z-index:4;}
#menu ul ul li.nav-preview-container {display:none;}

/*--- Karriere Mobil ---*/
.nav-bottom {flex-direction:column; padding:20px 0; background-color:var(--color5); width:100%; position:fixed; bottom:0; display:none;}
.nav-visible .nav-bottom {display:flex;}
.nav-job {display:flex; padding-top:64px; position:relative; flex-direction:column; min-height:100px; color:#fff; align-items:center;}
.nav-job::before {content:""; position:absolute; width:50px; height:50px; background-color:var(--color1); top:0; z-index:2; border:solid 2px #fff; left:calc(50% - 25px); background-image:url(/assets/img/icons/rakete.svg); background-size:36px; background-repeat:no-repeat; background-position:center center;}
.nav-job::after {content:""; position:absolute; width:100%; height:2px; background-color:#fff; top:25px; z-index:1;}
.nav-job-headline {font-size:20px; font-weight:bold; width:100%; text-align:center; font-family:'Libre Franklin', sans-serif;}
.nav-job p {max-width:400px; line-height:21px; text-align:center; margin-top:10px; font-size:16px;}
.nav-job a {font-size:17px; font-weight:bold; background-color:var(--color1); padding:6px 40px; margin-top:20px; border:solid 2px #fff;}
.nav-social {background-color:var(--color5); display:flex; flex-direction:row; position:fixed; bottom:0; width:100%; justify-content:flex-end; border-top:solid 1px #c2c2c2;}
.social-list {display:flex; flex-direction:row; width:100%; justify-content:flex-end;}
.nav-social a {padding:7px 13px 0px 13px; border-right:solid 1px #7f7f7f;}
.nav-social img {width:25px;}
.navm-headline {width:100%; text-transform:uppercase; color:#00355d; font-size:20px; font-weight:bold; text-align:center; padding:20px 0; transition:all ease 1s; opacity:0;}
.nav-visible .navm-headline {opacity:1;}
.nav-overlay {position:fixed; top:0; left:0; width:100vw; height:100vh; background-color: var(--color5); z-index:8; opacity:0; visibility:hidden; transition:opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;}
.nav-overlay.active {opacity:1; visibility:visible;}



/* FOR MOBILE LANDSCAPE VIEWPORT */
@media screen and (max-height: 500px) {
    #nav-c {top:142px;}  
    #menu ul, #menu ul li {padding-top:0; padding-bottom:0;}
    #menu ul li a {padding-bottom:5px; padding-top:5px;}
    #menu ul li.nav-zurueck {padding-bottom:5px; padding-top:7px;}  
}

@media screen and (min-width: 390px){
    .logo img {max-width:200px;}
    #nav-btn {top:20px;}
    #nav-btn span {display:block;}
}

@media screen and (min-width: 500px) {
    #nav-btn span {display:block;}
}

@media screen and (min-width: 900px){
    .logo {width:260px;}
    #nav-btn {top:15px;}
}


@media screen and (min-width: 1200px) {
    .nav-wrapper {align-items: flex-end;}
    #kopfbereich {padding: 50px 0 20px 0; border-bottom:solid 2px var(--color1);}
    .social-list {flex-direction:column}
    #header-placeholder {height:120px;}
    #nav-btn span {display:none;}
    .nav-bottom, .nav-social, .navm-headline {display:none;}
    .blender {background-color:var(--color1); height:120px; width:200px; position:fixed; top:0; left:0;}
    .header-wrapper {width: 1200px; margin-left: calc(50% - 600px); background-color: transparent;}
    .logo {padding:0; height:60px; flex-basis:300px;}
    .logo a {display:flex; width:100%;}
    .logo img {width:100%; max-width:none;}
    .info {display: none;}
    .arrow {display:none !important;}
    header {background-color:#fff; -webkit-box-shadow: 0px 1px 15px 1px #000000; box-shadow: 0px 1px 15px 1px #000000; height:120px;}
    #nav-btn-c {display:none;}
    #nav-c, #menu {left:0; top:8px; overflow:visible; background:transparent;}
    #nav-c {position:relative; flex-basis:calc(100% - 320px); height:60px; background-color:transparent; text-align:left; border-top:none;}
    .nav-c-content {display:none;}
    #menu ul {text-align:right; position:static; height:100%; transform:none; -webkit-transform:none; overflow:visible; background-color:transparent;}
    #menu ul ul {display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start; transition:all ease 1s; border-bottom:none;}
    #menu ul ul li:hover { background-color:#e2e2e2; border-color:transparent;}
    #menu ul ul, #menu ul ul ul {width:auto; height:auto; position:absolute; transform:none; -webkit-transform:none; display:none; text-align:left;}
    #menu ul li.nav-zurueck {display:none;}
    #menu ul li {display:inline-block; transition:all ease 0.4s; border-bottom:solid 4px #fff; position:relative; padding:0 10px 0 10px; height:100%; padding-right:10px; }
    #menu ul li:last-child {margin-right:0;}
    #menu ul li .arrow, #menu ul li .arrow::before {display:none;}
    #menu ul li ul .arrow {display:inline-block; position:absolute; left:-41px; top:calc(50% + 6px);}
    #menu ul li ul .arrow:before {display:block;}
    #menu ul li a {color:#000; font-size:18px; background-color:transparent; width:auto; padding:10px 4px; border:none; font-weight:normal; }
    #menu ul li:hover {border-color:#3a7fc9;}  
    #menu ul li.active a {/*border-bottom:2px solid #fff;*/ text-decoration:none !important;}
    #menu ul li:hover ul a, #menu ul li.active ul a {background-color:transparent;}
    header .container {display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start; position:static; height:100%;}
    #menu ul li:hover ul {display:flex;}
    #menu ul li:hover ul ul {display:none;}
    #menu ul ul {position:absolute; width:220px; transition:all ease .3s; right:auto; background-color:#fff; left:0px; top:44px; height:auto !important; flex-direction:column; flex-wrap:wrap; justify-content:flex-start; padding:10px 0; align-items:flex-start; z-index:9;}
    #menu .level1 .first .level2 {width:300px !important;}
    #menu ul ul li {display:inline-block; width:100%; order:2; padding:0; margin:0; margin-bottom:0px;}
    #menu .level1 .first .level2 li {margin-bottom:10px;}
    .nav-icon {padding-left:60px !important;}
    #menu ul ul li a {padding-left:20px; padding-right:20px; border-bottom:1px solid transparent; width:100%; font-weight:normal; font-size:16px; transition:all ease .3s; border-right:solid 5px transparent;
        background-size:30px; background-position:left 12px center;  background-repeat:no-repeat;}
    #menu ul li:hover ul li a, #menu ul li.active ul li a, #menu ul li ul li a {border-bottom:1px solid transparent;}
    #menu ul li ul li:hover > a, #menu ul li:hover ul li:hover > a {background-color:var(--color4); color:var(--color5);}  
    #menu ul ul li:hover ul {display:flex;}
    #menu ul ul li:hover ul ul {display:none;}
    #menu ul ul ul {position:absolute; top:-10px; right:auto; left:100%; width:auto; height:auto; flex-direction:column; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start;}
    #menu ul ul ul li {padding-right:0;}
    #menu ul ul ul li a {width:auto;}
    #menu ul li ul li ul li a {border-bottom:1px solid transparent;}
    #menu ul li:hover ul li ul li a, #menu ul li.active ul li ul li a {border-bottom:1px solid transparent;}
    #menu ul ul ul li:hover ul {display:flex;}
    #menu ul ul ul li:hover ul ul {display:none;}  
    #menu ul ul ul ul {position:absolute; top:0; left:auto; right:0; width:50%; height:100%; flex-direction:column; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start;}  
    #menu ul ul ul ul li {width:100%;}
    #menu ul li ul li ul li ul li a {border-bottom:1px solid #658bbd;}
    #menu ul li:hover ul li ul li ul li a, #menu ul li.active ul li ul li ul li a {border-bottom:1px solid #658bbd;}
    #menu ul ul ul ul li:hover a, #menu ul ul ul ul li.active a {background-color:#193679;}
    #menu ul ul ul ul li a, #menu ul ul ul li a {width:100%}  
    #nav-preview {position:absolute; left:0; width:34.33%; height:400px; display:none; background-color:#F7F7F7; padding:20px; flex-direction:row; justify-content:space-between; align-items:flex-start; text-align:left; border-bottom:1px solid #ccc;}
    #nav-preview-c {display:flex; flex-direction:row; justify-content:space-between; align-items: flex-start; width:100%; height:100%; padding-right:40px;}
    #nav-preview-title {font-size:18px;}
    #nav-preview-img, #nav-preview-title, #nav-preview-text {opacity:1; -webkit-transition:opacity ease .2s; -moz-transition:opacity ease .2s; -ms-transition:opacity ease .2s; -o-transition:opacity ease .2s; transition:opacity ease .2s;}
    #nav-preview-img {display:block; position:relative; width:calc(50% - 20px); padding-top:calc(50% - 20px); flex-basis:calc(50% - 20px); height:auto; min-height:20px; background-color:#fff; border:1px solid #e8e8e8; max-height:370px;}  
    #nav-preview-img img {max-width:calc(100% - 30px); max-height:350px; position:absolute; top:50%; left:0%; transform:translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}
    #nav-preview-content {flex-basis:calc(50% - 20px);}
    #nav-preview-text {font-size:14px;}  

}

@media screen and (min-width: 1400px) {
    .logo {flex-basis:400px;}
    #nav-c {flex-basis:calc(100% - 420px);}
}