@import url("reset.css");

.clear {
    clear: both;
}
/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/source-sans-pro-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
       url('../fonts/source-sans-pro-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-sans-pro-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-sans-pro-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-sans-pro-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-sans-pro-v13-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

/* source-sans-pro-600 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-display: swap;
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/source-sans-pro-v13-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'),
       url('../fonts/source-sans-pro-v13-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-sans-pro-v13-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-sans-pro-v13-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-sans-pro-v13-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-sans-pro-v13-latin-600.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

/* courgette-regular - latin */
@font-face {
  font-family: 'Courgette';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/courgette-v7-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Courgette Regular'), local('Courgette-Regular'),
       url('../fonts/courgette-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/courgette-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/courgette-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/courgette-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/courgette-v7-latin-regular.svg#Courgette') 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: 'Source Sans Pro',  sans-serif; color: #2c2c2c; font-size: 14px; line-height: 22px;}
header {background: url(../images/gymnastik-min.webp) no-repeat center left / cover; height: 750px; margin-top: 100px; position: relative;}


nav {font-family: 'Source Sans Pro',  sans-serif;background: #1d7aaf; width: 100%; position: fixed; top: 0; left: 0; padding: 50px 5%; text-align: right; z-index: 104; border-bottom: 1px solid #1d7aaf}
nav ul li {display: inline-block; margin: 0 10px;}
nav ul li:after {content: '|'; margin-left: 25px; color: #f9ac17;}
nav ul li:last-of-type:after {content: none;}
nav ul li a{text-decoration: none; color: #fff; 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: #f9ac17; }
.logo img{position: fixed; top: 8px; left: 5%; z-index: 105; display: block;}
h1, h2 {font-family: 'Courgette'; font-weight: 900; color: #f9ac17; font-size: 40px; line-height: 40px; margin-bottom: 10px; }
h1 {
    color: #1d7aaf;
}
h1 span, h2 span {font-size: 25px; font-weight: 300; font-style: normal;font-family: 'Source Sans Pro',  sans-serif; }
h1 span {color: #cd0f3a}
#dazugehoeren h2 span{color: #1d7aaf}
h3 {font-family: 'Courgette';  color: #f9ac17; text-transform: uppercase; font-size: 18px;  line-height: 30px; margin-bottom: 25px;}
h4 {font-family: 'Source Sans Pro',  sans-serif; font-weight: 900; color: #1d7aaf; text-transform: uppercase; font-size: 18px;  line-height: 30px; margin-bottom: 5px;}
h5 {
    font-weight: 900;
    margin-top: 20px;
}
p {
    margin-bottom: 14px;
}
#unternehmen {padding: 180px 10% 200px;} 
#unternehmen  div{ column-count: 2;}
#unternehmen a {color: #f9ac17; text-decoration: none;transition: ease .8s; -o-transition: ease .8s; -webkit-transition: ease .8s; -moz-transition: ease .8s;}

.btn {padding: 8px 15px; background: #1d7aaf; 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: #f9ac17; color: #FFF!important;}

#siesuchen {padding: 150px 10%; background: #f9ac17; position: relative; text-align: left!important; color: #FFF;}
#siesuchen h2{color: #fff; }

#wirbieten {padding: 150px 10%; background: #1d7aaf; position: relative; color: #FFF;}
#wirbieten .accordion h3 {text-align: left; color: #FFF;}
#wirbieten h2 {
    color: #FFF;
}
#wirbieten .accordion, #siesuchen .accordion{
  width: 100%;
  height: 500px;
  overflow: hidden;
  margin: 50px auto;
}
#wirbieten .accordion ul, #siesuchen .accordion ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}
#wirbieten .accordion ul li, #siesuchen .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;
}
#wirbieten .accordion ul li div, #siesuchen .accordion ul li div {
  display: block;
  overflow: hidden;
  width: 100%;
}
#wirbieten .accordion ul li div, #siesuchen .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;
}
#wirbieten .accordion ul li div *, #siesuchen .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;
}
#wirbieten .accordion ul li div h3, #siesuchen .accordion ul li div h3 {
    text-overflow: clip;
    text-transform: none;
    margin-bottom: 2px;
    top: 350px;
    left: 20px;
    opacity: 1;
    text-overflow: ellipsis;
    text-shadow: 2px 0 2px rgba(0, 0, 0, 0.9);
    font-size: 25px; color: #fff; text-align: left;
}

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

/*.accordion ul:hover li { width: 15%; }*/
#wirbieten .accordion ul:hover li:hover, #siesuchen .accordion ul:hover li:hover { width: 75%; }
#wirbieten .accordion ul:hover li:hover div, #siesuchen .accordion ul:hover li:hover div { background: rgba(0, 0, 0, 0.4); }
#wirbieten .accordion ul:hover li:hover div *, #siesuchen .accordion ul:hover li:hover div * {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
#wirbieten .accordion ul:hover li:hover div h3, #siesuchen .accordion ul:hover li:hover div h3 {
  top: 200px;
    left: 0;
  -webkit-transform: translateY(0);
  transform: translateY(0); text-align: left!important;
}
#siesuchen .accordion ul li:nth-child(1) { background-image: url(../images/menschen-helfen-min.webp); background-position: top center;}
#siesuchen .accordion ul li:nth-child(4) { background-image: url(../images/work-life-min.webp); background-position: top center;}
#siesuchen .accordion ul li:nth-child(3) { background-image: url(../images/sicherheit-min.webp); background-position: top center;}
#siesuchen .accordion ul li:nth-child(2) { background-image: url(../images/team-min.webp); background-position: center;}


#wirbieten .accordion ul li:nth-child(1) { background-image: url(../images/weiterentwicklung-min.webp); background-position: center ;}
#wirbieten .accordion ul li:nth-child(2) { background-image: url(../images/dienstwagen-min.webp); background-position: center center;}
#wirbieten .accordion ul li:nth-child(3) { background-image: url(../images/gesundheitsfoerderung-min.webp); background-position: center; }
#wirbieten .accordion ul li:nth-child(4) { background-image: url(../images/events-min.webp); background-position: center center;}
#wirbieten h3 {
    
}


#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: #f9ac17; text-align: left}
#sichbewerben h4 {margin-bottom: 0; font-weight: 900; font-style: normal !important; }
#sichbewerben strong { color: rgb(122, 30, 28); text-decoration: underline;}
.sich-bewerben-wrapper {
    background: #f9ac17;
    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 "Lato",sans-serif;
    padding: 15px 0;
    cursor: pointer; 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/krankengymnastik-schomberg-min.webp) no-repeat top center / cover; height: 750px; }

#dazugehoeren {padding: 100px 10%;}


footer { text-align: left;background:#1d7aaf; display: flex; flex-wrap: wrap;min-height: 350px; color: #FFF;  }
.info { padding: 50px ; width: 40%;}
.info h2 {font-size: 25px; font-weight: 500; color: #FFF;}
.info a {color: #FFF; text-decoration: none;transition: ease .5s; -o-transition: ease .5s; -moz-transition: ease .5s; -webkit-transition: ease .5s;}
footer a:hover {color: #fff;}
footer h2{text-align: left; margin-bottom: 0;}
.dsa-secure-plugin iframe {height: 100%;}

.data {position: fixed; right: 0; bottom: 0; background:#f9ac17;  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: #1d7aaf; color: #FFF}
.data:hover > .data a{color: #FFF!important;}
.data a{color: #fff; text-decoration: none;}



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

.menu {
  position: fixed;
  top: 0px;
  left: 0;
  background: #fff;
  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:0;
  width: 40px;
  height: 40px;
  line-height: 0px;
  display: block;
  padding: 0;
  text-indent: -9999px;
  background: #fff url(../images/menu-min.webp) 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: #1d7aaf;
  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: #f9ac17;
}

/* 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%;}
    #unternehmen {padding: 80px 5% 180px; }
    #unternehmen div {column-count: 1;}
    #wirbieten, #sichbewerben, #siesuchen {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% - 95px); width: 220px;}
    .auswahl, .job-beschreibung {float: none;width: 100%; border: none;}
    header {background-position: center right -105px}

    .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%;}
    #wirbieten .accordion, #siesuchen .accordion { height: auto; }

    
    /*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;
    }
    #wirbieten .accordion ul li div *, 
    #siesuchen .accordion ul li div * {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    #wirbieten .accordion ul li div h3, 
    #siesuchen .accordion ul li div h3 {
        text-overflow: clip;
        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;
    }
    #wirbieten .accordion ul li div, 
    #siesuchen .accordion ul li div {
        background: rgba(0, 0, 0, 0.4);
        padding: 40px 25px;
    }
    #wirbieten .accordion ul li div,
    #siesuchen .accordion ul li div,
    #wirbieten .accordion ul li,
    #siesuchen .accordion ul li {
        height: 300px;
        background-position: center center;
    } 
    #wirbieten .accordion ul:hover li:hover div h3, 
    #siesuchen .accordion ul:hover li:hover div h3,
    #wirbieten .accordion ul li div p, 
    #siesuchen .accordion ul li div p {
        top: inherit;
        position: relative;
    }
    #wirbieten .accordion ul li, 
    #siesuchen .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;
    }
    
    /*GGF die Bild-Position für die mobile Ansicht anpassen*/
/*
    #siesuchen .accordion ul li:nth-child(1) { background-image: url(../images/AdobeStock_169234248_Preview.jpeg);}
    #siesuchen .accordion ul li:nth-child(2) { background-image: url(../images/AdobeStock_144967209_Preview.jpeg);}
    #siesuchen .accordion ul li:nth-child(3) { background-image: url(../images/AdobeStock_153060113_Preview.jpeg);}
    #siesuchen .accordion ul li:nth-child(4) { background-image: url(../images/AdobeStock_220296564_Preview.jpeg);}
    
    #wirbieten .accordion ul li:nth-child(1) { background-image: url(../images/AdobeStock_175406360_Preview.jpeg); background-position: left center;}
    #wirbieten .accordion ul li:nth-child(2) { background-image: url(../images/AdobeStock_220466430_Preview.jpeg); background-position: center center;}
    #wirbieten .accordion ul li:nth-child(3) { background-image: url(../images/AdobeStock_47232987_Preview.jpeg); background-position: left center; }
    #wirbieten .accordion ul li:nth-child(4) { background-image: url(../images/AdobeStock_217093939_Preview.jpeg);}
*/

    
}