@import url("reset.css");

.clear {
    clear: both;
}
/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v40-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/open-sans-v40-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/open-sans-v40-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/open-sans-v40-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/open-sans-v40-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v40-latin-600.eot'); /* IE9 Compat Modes */
  src: url('../fonts/open-sans-v40-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v40-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/open-sans-v40-latin-600.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/open-sans-v40-latin-600.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/open-sans-v40-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}


html {scroll-behavior: smooth;}
*{hyphens: auto; -o-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; box-sizing: border-box; -o-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}

strong, b {font-weight: 700;}
body { font-family: 'Open Sans'; color: #2c2c2c; font-size: 15px; line-height: 22px;}
header {background: url(../images/header.jpg) no-repeat center top / cover; height: 750px; margin-top: 100px; position: relative;}
.blau {color: #55677a!important; text-decoration: underline!important;}
.blau:hover {color: #8b999d!important;}

nav {font-family: 'Open Sans';background: #FFF; width: 100%; position: fixed; top: 0; left: 0; padding: 50px 5%; text-align: right; z-index: 104; border-bottom: 1px solid #55677a}
nav ul li {display: inline-block; margin: 0 10px;}
nav ul li:after {content: '|'; margin-left: 25px; color: #ccc;}
nav ul li:last-of-type:after {content: none;}
nav ul li a{text-decoration: none; color: #55677a; position: relative;transition: ease .8s; -o-transition: ease .8s; -webkit-transition: ease .8s; -moz-transition: ease .8s; text-transform: uppercase; font-style: 900;}
nav ul li a:hover,
nav ul li a.active{color: #8b999d; }
.logo img{position: fixed; top: 45px; left: 5%; z-index: 105; display: block; width: auto; width: 180px;}
h1, h2 {font-family: 'Open Sans'; font-weight: 900; color: #eee; font-size: 30px; line-height: 35px; margin-bottom: 10px; text-transform: uppercase;}
h1 {color: #8b999d;}
h1 span, h2 span {font-size: 25px; font-weight: 300; font-style: normal; text-transform: none!important;}
h1 span {color: #37485b}
#dazugehoeren h2 {color: #8b999d;}
#dazugehoeren h2 span{color: #37485b}
h3 {font-family: 'Open Sans';  color: #eee; text-transform: uppercase; font-size: 18px;  line-height: 30px; margin-bottom: 25px;}
h4 {font-family: 'Open Sans'; font-style: normal; font-weight: 900; color: #55677a; text-transform: uppercase; font-size: 18px;  line-height: 30px; margin-bottom: 5px;}
h5 {
    font-weight: 900;
    margin-top: 20px;
}
p {
    margin-bottom: 14px;
}
span{ font-size: 12px;}
#unternehmen {padding: 180px 10% 200px;} 
#unternehmen  div{ column-count: 2;}
#unternehmen a {color: #8b999d; text-decoration: none;transition: ease .8s; -o-transition: ease .8s; -webkit-transition: ease .8s; -moz-transition: ease .8s;}
.color {color:#8b999d;text-decoration: none;}

.btn {padding: 8px 15px; background: #8b999d; color: #fff!important; display: inline-block;-o-transition: ease .8s; -webkit-transition: ease .8s; -moz-transition: ease .8s; text-decoration: none; margin-top: 15px;}
.btn:hover {background: #55677a; color: #8b999d!important;}

#wirbieten {padding: 150px 10%; background: #eee; position: relative; text-align: left!important; color: #FFF;}
#wirbieten h2{color: #8b999d; }
#wirbieten h2 span{color: #37485b; }

#sieerwartet {padding: 150px 10%; background: #8b999d; position: relative; color: #FFF;}
#sieerwartet .accordion h3 {text-align: left; color: #FFF;}
#sieerwartet h2 {color: #FFF;}
#sieerwartet h2 span{color: #37485b;}
#sieerwartet .accordion, #wirbieten .accordion{
  width: 100%;
  height: 500px;
  overflow: hidden;
  margin: 50px auto;
}
#sieerwartet .accordion ul, #wirbieten .accordion ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}
#sieerwartet .accordion ul li, #wirbieten .accordion ul li {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  width: 25%;
  height: 500px;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 500ms ease;
}
#sieerwartet .accordion ul li div, #wirbieten .accordion ul li div {
  display: block;
  overflow: hidden;
  width: 100%;
}
#sieerwartet .accordion ul li div, #wirbieten .accordion ul li div {
  display: block;
  height: 500px;
  width: 100%;
  position: relative;
  z-index: 3;
  vertical-align: bottom;
  padding: 15px 20px;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
  transition: all 200ms ease;
    background: rgba(17, 60, 96, 0.1);
}
#sieerwartet .accordion ul li div *, #wirbieten .accordion ul li div * {
  opacity: 0;
  margin: 0;
  width: 100%;
  text-overflow: ellipsis;
  position: relative;
  z-index: 5;
  overflow: hidden;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease;
}
#sieerwartet .accordion ul li div h3, #wirbieten .accordion ul li div h3 {
    text-overflow: clip;
    text-transform: uppercase;
    margin-bottom: 2px;
    top: 350px;
    left: 20px;
    opacity: 1;
    text-overflow: ellipsis;
    text-shadow: 2px 0 2px rgba(0, 0, 0, 0.95);
    font-size: 25px; color: #fff; text-align: left;
}

#sieerwartet .accordion ul li div p, #wirbieten .accordion ul li div p {
  top: 220px;
}

/*.accordion ul:hover li { width: 15%; }*/
#sieerwartet .accordion ul:hover li:hover, #wirbieten .accordion ul:hover li:hover { width: 75%; }
#sieerwartet .accordion ul:hover li:hover div, #wirbieten .accordion ul:hover li:hover div { background: rgba(55, 72, 91, 0.75); }
#sieerwartet .accordion ul:hover li:hover div *, #wirbieten .accordion ul:hover li:hover div * {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
#sieerwartet .accordion ul:hover li:hover div h3, #wirbieten .accordion ul:hover li:hover div h3 {
  top: 200px;
    left: 0;
  -webkit-transform: translateY(0);
  transform: translateY(0); text-align: left!important;
}
#wirbieten .accordion ul li:nth-child(1) { background-image: url(../images/frau_mit_geld.jpeg); background-position: top center; background-size: cover;}
#wirbieten .accordion ul li:nth-child(2) { background-image: url(../images/notizbuch.jpeg); background-position: center; background-size: cover;}
#wirbieten .accordion ul li:nth-child(3) { background-image: url(../images/postit.jpeg); background-position: center; background-size: cover;}
#wirbieten .accordion ul li:nth-child(4) { background-image: url(../images/modern_office.jpeg); background-position: center; background-size: cover;}


#sieerwartet .accordion ul li:nth-child(1) { background-image: url(../images/flexibilität.jpg); background-position: center left;}
#sieerwartet .accordion ul li:nth-child(2) { background-image: url(../images/team_laptop.jpeg); background-position: center; background-size: cover;}
#sieerwartet .accordion ul li:nth-child(3) { background-image: url(../images/fortbildung.jpg); background-position:  center; }
#sieerwartet .accordion ul li:nth-child(4) { background-image: url(../images/geburtstag.jpeg); background-position: center; background-size: cover;}


#sichbewerben h2 {text-align: left; margin: 0;}
#sichbewerben h3 {margin-bottom: 0;  text-align: left}
#tabs-1 h3, #tabs-2 h3, #tabs-3 h3 {margin-bottom: 0; color: #8b999d; text-align: left}
#sichbewerben h4 {margin-bottom: 0; font-weight: 900; font-style: normal !important; }
#sichbewerben strong { color: #fff; text-decoration: underline;}
.sich-bewerben-wrapper {
    background: #8b999d;
    border-width: 0 10px;
}
#sich-bewerben h2 {color: #fff;}
#sich-bewerben ul li{list-style: disc;}

.auswahl {
    width: 35%;
    float: left;
}

.auswahl-inner {
    padding: 30px 5%;
}

.verweis {
    display: block;
    font: 400 18px/22px ;
    padding: 15px 0;
    cursor: pointer; text-transform: uppercase; color: #fff;
}

.zielverweis a{color: #fff;}

.zielverweis > ul {
    margin-left: 20px;
}

.job-beschreibung {
    border: solid white;
    border-width: 0 0 0 10px;
    float: left;
    width: 65%;
}
.col1 {
    width: 100%;
    background: white;
    padding: 30px;
    border: 1px solid #515050;
}


.jobs {background: url(../images/AdobeStock_281902446.jpg) no-repeat center / cover; height: 550px; }

#dazugehoeren {padding: 100px 10%;}


footer { text-align: left;background:#55677a; background-image: url(../images/bildmarke-blue.svg); background-position: right -25px bottom 50px; background-repeat: no-repeat; display: flex; background-size: 300px; flex-wrap: wrap;min-height: 350px; color: #fff;  }
.info { padding: 50px ; width: 40%;}
.info h2 {font-size: 25px; font-weight: 500; color: #8b999d;}
.info a {color: #fff; text-decoration: underline;transition: ease .5s; -o-transition: ease .5s; -moz-transition: ease .5s; -webkit-transition: ease .5s;}
footer h2{text-align: left; margin-bottom: 0;}
.dsa-secure-plugin iframe {height: 100%;}

.data {position: fixed; right: 0; bottom: 0; background:#8b999d;  padding: 5px 10px; color: #fff; z-index: 108;transition: ease .5s; -o-transition: ease .5s; -moz-transition: ease .5s; -webkit-transition: ease .5s; }
.data:hover{background: #55677a; }
.data:hover > a{color: #8b999d!important;}
.data a{color: #fff; text-decoration: none;}



label {
  cursor: pointer;
}
label:focus {
  outline: none;
}

.menu {
  position: fixed;
  top: 0px;
  left: 0;
  background: #8b999d;
  width: 240px;
  height: 100%;
  transform: translate3d(-240px, 0, 0);
  transition: transform 0.35s;
    z-index: 109;
}
.menu label.menu-toggle {
  position: fixed;
  right: -40px;top:10px;
  width: 40px;
  height: 40px;
  line-height: 0px;
  display: block;
  padding: 0;
  text-indent: -9999px;
  background: #8b999d url(../images/menu.jpg) 50% 50%/30px 30px no-repeat;
}

.menu ul li a, .menu ul li label {
  display: block;
  text-align: center;
  padding: 0 20px;
  line-height: 60px;
  text-decoration: none;
  color: #fff;
  transition: ease .8s; -o-transition: ease .8s; -webkit-transition: ease .8s; -noz-transition: ease .8s;
}
.menu ul li a:hover, .menu ul li label:hover {
  color: #eee;
}

/* hide inputs */
.menu-checkbox {
  display: none;
}

/* hide navigation icon for sublabels */
.menu .menu label.menu-toggle {
  background: none;
}

/* fade in checked menu */
.menu-checkbox:checked + .menu {
  transform: translate3d(0, 0, 0);
}

.menu ul {padding-top: 50px;}
.resp-nav {display: none;}
.small {font-size: 12px;}



/*---------------------------------------
MEDIA Queries | Tablet | Phone
---------------------------------------*/

@media screen and (max-width: 1065px) {
  /*CSS*/
    header {height: 450px;}
    nav {padding: 40px 2%;}
    nav ul li {margin: 0 5px; }
    nav ul li::after {margin-left: 15px;}
    nav {font-size: 12px;}
    .logo img{left: 2%; width: 180px; top: 35px;}
    #unternehmen {padding: 80px 5% 180px; }
    #unternehmen div {column-count: 1;}
    #sieerwartet, #sichbewerben, #wirbieten {padding: 100px 5%;}
    .jobs {height: 350px}
    .dsa-secure-plugin {height: 250px!important; width: 100%!important;}
    .info {width: 100%; padding: 50px 5%}
    
}
@media screen and (max-width: 850px) {
    .logo img {left:calc(50% - 90px); width: 180px; top: 30px;}
    .auswahl, .job-beschreibung {float: none;width: 100%; border: none;}
    header {    background-position: center top 90px;}

    .ui-tabs-vertical .ui-tabs-nav, .ui-tabs-vertical .ui-tabs-panel{float: none; width: 100%;}
    #sichbewerben {background-position: left -100px top -100px;}
    nav {padding: 50px 0;}
    nav ul{display: none;}
    .resp-nav {display: block;}
    header {margin-top: 0; }
    #dazugehoeren {padding: 50px 5%;}
    #sieerwartet .accordion, #wirbieten .accordion { height: auto; }
    #sieerwartet .accordion ul li:nth-child(3) {background-position: top;}

    
    /*Responsive FIX*/
    .accordion ul {
        width: 100%;
        display: table;
        table-layout: fixed;
        margin: 0;
        padding: 0;
    }
    .accordion ul li, .accordion ul li:hover, .accordion ul:hover li, .accordion ul:hover li:hover {
        display: block !important;
        width: 100% !important;
        -webkit-transition: none;
        transition: none;
    }
    #sieerwartet .accordion ul li div *, 
    #wirbieten .accordion ul li div * {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    #sieerwartet .accordion ul li div h3, 
    #wirbieten .accordion ul li div h3 {
        text-overflow: clip;
        text-transform: uppercase;
        margin-bottom: 2px;
        top: inherit;
        left: inherit;
        opacity: 1;
        text-overflow: ellipsis;
        text-shadow: 2px 0 2px rgba(0, 0, 0, 0.4);
        font-size: 25px;
        color: #fff;
        text-align: left;
    }
    .accordion ul li {
        display: block !important;
        width: 100% !important;
        -webkit-transition: none;
        transition: none;
    }
    #sieerwartet .accordion ul li div, 
    #wirbieten .accordion ul li div {
        background: rgba(0, 0, 0, 0.4);
        padding: 40px 25px;
    }
    #sieerwartet .accordion ul li div,
    #wirbieten .accordion ul li div,
    #sieerwartet .accordion ul li,
    #wirbieten .accordion ul li {
        height: 300px;
        background-position: center center;
    } 
    #sieerwartet .accordion ul:hover li:hover div h3, 
    #wirbieten .accordion ul:hover li:hover div h3,
    #sieerwartet .accordion ul li div p, 
    #wirbieten .accordion ul li div p {
        top: inherit;
        position: relative;
    }
    #sieerwartet .accordion ul li, 
    #wirbieten .accordion ul li {
        
    }
    .accordion ul li div {
        display: block;
        height: 500px;
        width: 100%;
        position: relative;
        z-index: 3;
        vertical-align: bottom;
        padding: 15px 20px;
        box-sizing: border-box;
        color: #fff;
        text-decoration: none;
        transition: all 200ms ease;
    }
    

    
}

@media screen and (max-width: 550px) {
    header {background-position: left -185px top 90px;}
}
@media screen and (max-width: 350px) {
    header {background-position: left -225px top 90px;}
}