@import url('https://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css');
@import url("https://use.typekit.net/ztu1ipv.css");

body {
    font-family: heebo, sans-serif;
    font-weight: 300;
    font-style: normal;
    background-repeat: no-repeat;
    background: url(img/GettyImages-116780916_72dpi.jpg) no-repeat right center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 0px;
    transition: 1s;
}

a {
    color: #ffffff;
    text-decoration: none;
}

#wrapper {
    width: calc(100% - 280px);
    margin: auto;
    position: relative;
    width: 85.55%;
}

/* header */

#header {
    background-color: #fff;
    height: auto;
    width: 674px;
}

#Ebene_1 {
    width: 379px;
    padding: 41px 30px;
    max-width: calc(85vw - 60px);
}

/* footer */
#footer {
    position: fixed;
    bottom: 0px;
    right: 7.225vw;
    background-color: #fff;
    width: 100px;
    height: 100px;
    z-index: 999;
}

#footer svg {
    width: 60px;
    height: 60px;
    margin: 20px;
}

/* pure css toggle test */

.togglebox {
    width: 674px;
    margin-top: 90px;
    position: relative;
}

.togglebox > div {
    background-color: #2e2e2d;
    margin-bottom: 20px;
}

input[type="radio"] {
    position: absolute;
    opacity: 0;
}

label,
label h2 {
    position: relative;
    display: block;
    padding: 0 50px;
    font-size: 50px;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
    text-transform: uppercase;
    height: 78px;
    line-height: 78px;
}

label:before {
    content: '\f04b';
    top: -7px;
    right: 18px;
    font-family: fontawesome;
    color: #e03464;
    font-size: 29px;
    position: relative;
}

label:after {
    content: '\f04d';
    top: 0px;
    right: 20px;
    font-family: fontawesome;
    color: #e03464;
    font-size: 12px;
}

.content {
    overflow: hidden;
    position: relative;
    max-height: 0px;
    transition: 1s;
    transition-delay: 0ms;
    transition: 1.25s;
    transition-delay: -0.25s;
}

label.open:before {
    display: inline-block;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

p {
    margin: 32px 55px;
    padding: 0 20px;
    font-size: 25px;
    line-height: 33px;
    color: #ffffff;
}

.togglebox > div {
    background-color: #2e2e2d;
    margin-bottom: 30px;
    width: 674px;
}

/* googlemaps iframe */
iframe {
    margin: 30px 30px 28px 30px;
}

/* Anfahrt */
.anfahrt {
    bottom: 30px;
    position: absolute;
    color: #fff;
    font-size: 15px;
    line-height: 22px;
    width: 110px;
}

/* STELLENGESUCH */

label.open ~ #c1,
label.open ~ #c2,
label.open ~ #c3,
label.open ~ #c4,
label.open ~ #c5 {
    max-height: 1500px;
    transition: 1s;
}

label.open ~ #c3,
label.open ~ #c4{
    max-height: 11500px;
}

.s1_closed {
    max-height: 75px;
    transition: 1s;
    transition: 1.25s;
    transition-delay: -0.25s;
}

.s2_closed {
    max-height: 75px;
    transition: 1s;
    transition: 1.25s;
    transition-delay: -0.25s;
}

.s3_closed {
    max-height: 75px;
    transition: 1s;
    transition: 1.25s;
    transition-delay: -0.25s;
}

.s4_closed {
    max-height: 38px;
    transition: 1s;
    transition: 1.25s;
    transition-delay: -0.25s;
}

.s5_closed {
    max-height: 75px;
    transition: 1s;
    transition: 1.25s;
    transition-delay: -0.25s;
}

.s6_closed {
    max-height: 38px;
    transition: 1s;
    transition: 1.25s;
    transition-delay: -0.25s;
}

.s7_closed {
    max-height: 100px;
    transition: 1s;
    transition: 1.25s;
    transition-delay: -0.25s;
}

.s8_closed {
    max-height: 75px;
    transition: 1s;
    transition: 1.25s;
    transition-delay: -0.25s;
}

.s1_open,
.s2_open,
.s3_open,
.s4_open,
.s5_open,
.s6_open,
.s7_open,
.s8_open {
    max-height: 1350px;
    transition: 1s;
    transition-delay: 250ms;
}

.stelle {
    margin: 20px 30px 20px 45px;
    color: #fff;
    font-size: 15px;
    line-height: 22px;
    transition: 1s;
    overflow: hidden;
}

.stelle:not(:first-child) {
    border-top: 1px solid #fff;
    padding-top: 20px;
}

.Titel {
    display: block;
    background-color: #e03463;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 30px;
    line-height: 20px;
    margin-bottom: 15px;
    width: 100%;
    padding-top: 2px;
    padding-right: 1px;
    cursor: pointer;
}

.Titel:first-letter {
    margin-left: -0.03em
}

.unterTitel {
    font-weight: 700;
    line-height: 22px;
}

.stelle ul {
    margin: 0px;
    padding-left: 10px;
}

.stelle li {
    padding-left: 5px;
}

.stelle li::marker {
    content: '•';
}

.stelle a {
    color: #e03463;
}

img.ul_c_us {
    position: relative;
    top: 4px;
    height: 16px;
    width: auto;
    margin: 0px;
}

.clickVisible {
    display: block;
    height: 0px;
    transition: 1s;
    margin-bottom: 2px;
    overflow: hidden;
}

.s1_open .clickVisible,
.s2_open .clickVisible,
.s3_open .clickVisible,
.s4_open .clickVisible,
.s5_open .clickVisible,
.s6_open .clickVisible,
.s7_open .clickVisible,
.s8_open .clickVisible {
    height: 23px;
}

/* Impressum */
table {
    margin: 20px 30px 45px 45px;
    font-size: 15px;
    color: #fff;
}

td {
    width: 290px;
}

#impressum_small {
    display: none;
    margin: 20px 30px 45px 45px;
    font-size: 15px;
    color: #fff;
}

#impressum {
    margin: 20px 30px 45px 45px;
    font-size: 15px;
    color: #fff;
}

#impressum a {
    text-decoration: underline;
}

/* Datenschutz */
.datenschutz p {
    font-size: 15px;
    line-height: 22px;
    margin: 15px 25px 35px 25px;
}

.datenschutz > div {
    font-size: 15px;
    line-height: 22px;
    margin: 15px 25px 35px 25px;
    color: #ffffff;
    padding: 0 20px;
}

.datenschutz a {
    text-decoration: underline;
}

/* image */
img {
    width: 100%;
    margin: 0;
}

#footer_img {
    background-color: transparent;
    position: relative;
    right: 0px;
    top: 0px;
    margin: 25px 0 66px 0;
}

#top_left_border {
    width: 19vw;
    height: 7.5vw;
    border-top: 2.5px solid #ca2053;
    border-left: 2.5px solid #ca2053;
    position: absolute;
    top: 0px;
    left: 0px;
}

#bottom_right_border {
    width: 19vw;
    height: 7.5vw;
    border-bottom: 2.5px solid #ca2053;
    border-right: 2.5px solid #ca2053;
    position: absolute;
    bottom: 0px;
    right: 0px;
}

/* main Text right */
#text-right {
    position: absolute;
    right: 0px;
    width: calc(100% - 674px - 120px);
}

#text-right p {
    margin: 30px 0px;
    padding: 0px;
    font-weight: 500;
    background-color: rgba(0, 0, 0, 0.75);
    width: 832px;
}

h1 {
    font-size: 71px;
    line-height: 71px;
    color: #ffffff;
    text-transform: uppercase;
    margin: 90px 0px 80px 0px;
}

h1 > span {
    background-color: #e03463;
    line-height: 2;
    display: inline;
    height: 51px;
    display: block;
    line-height: 57px;
    margin-bottom: 30px;
    width: 832px;
}

h1 > span:last-child {
    width: 713px;
}

h1 > span.wide {
    width: 1286px;
    display: none;
}

h1 > span.wide:last-child {
    width: 259px;
}

h1 > span.extra_wide {
    width: 100%;
    display: none;
}


h1 > span:first-letter {
    margin-left: -0.06em;
}

span.nobr {
    white-space: nowrap;
}

/* responsive increments */

.mobile {
    display: none;
}

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

    h1 > span.extra_wide,
    h1 > span.regular {
        display: none;
    }

    h1 > span.wide {
        display: block;
    }

    #text-right p {
        width: 1286px;
    }

}

@media only screen and (max-width: 1903px) {

    #header,
    #text-right {
        width: 100%;
        position: relative;
    }

    h1 > span.extra_wide {
        display: block;
    }

    h1 > span.wide,
    h1 > span.regular {
        display: none;
    }

    #text-right p {
        width: 100%;
    }

    /* 
    
    #footer{
        position: relative;
        width: 100%;
        height: 52px;
        right: 0px;
    }
    
    #footer svg {
        height: 40px;
        width: 40px;
        margin: 6px;
        position: absolute;
        right: 0px;
    }
    
    */

    .togglebox {
        width: 100%;
    }

    label {
        font-size: 26px;
        height: 52px;
        line-height: 52px;
    }

    label::before {
        top: 0px;
        font-size: 26px;
    }

    label::after {
        font-size: 6px;
    }

    img {
        right: 0px;
        top: 0px;
        margin: 0px;
        width: 35.5vw;
    }

    #footer_img {
        position: absolute;
        margin: 0px;
        width: 35.5vw;
    }
}

@media only screen and (max-width: 1832px) {

    h1 > span.extra_wide,
    h1 > span.regular {
        display: none;
    }

    h1 > span.wide,
    h1 > span.wide:last-child {
        display: block;
        width: 100%;
    }
}

@media only screen and (max-width: 1503px) {

    h1 > span.extra_wide,
    h1 > span.wide,
    h1 > span.wide:last-child {
        display: none;
    }

    h1 > span.regular {
        display: block;
        width: 100%;
    }
}

@media only screen and (max-width: 1353px) {

    label.open ~ #c5.s1o {
        height: calc(1023px - 2vw);
        height: calc(910px - 2vw);
        height: calc(1100px - 2vw);
        height: calc(((1353px - 100vw) * 0.24) + 1036px);
        height: calc(((1353px - 100vw) * 0.24) + 1110px);
        height: calc(((1353px - 100vw) * 0.24) + 1225px);
    }

    label.open ~ #c5.s2o {
        height: calc(910px - 2vw);
    }

    label.open ~ #c5.s3o {
        height: calc(870px - 2vw);
        height: calc(755px - 2vw);
        height: calc(945px - 2vw);
        height: calc(((1353px - 100vw) * 0.2) + 925px);
        height: calc(((1353px - 100vw) * 0.2) + 999px);
        height: calc(((1353px - 100vw) * 0.2) + 1114px);
    }

    label.open ~ #c5.s4o {
        height: calc(985px - 2vw);
        height: calc(((1353px - 100vw) * 0.2) + 866px);
        height: calc(((1353px - 100vw) * 0.2) + 982px);
        height: calc(((1353px - 100vw) * 0.2) + 1097px);
    }

    label.open ~ #c5.s5o {
        height: calc(755px - 2vw);
        height: calc(((1353px - 100vw) * 0.28) + 1013px);
        height: calc(((1353px - 100vw) * 0.28) + 1087px);
        height: calc(((1353px - 100vw) * 0.28) + 1202px);
    }

    label.open ~ #c5.s6o {
        height: calc(755px - 2vw);
        height: calc(((1353px - 100vw) * 0.28) + 1013px);
        height: calc(((1353px - 100vw) * 0.13) + 1060px);
        height: calc(((1353px - 100vw) * 0.13) + 1175px);
    }

    label.open ~ #c5.s8o {
        height: calc(755px - 2vw);
        height: calc(((1353px - 100vw) * 0.28) + 1013px);
        height: calc(((1353px - 100vw) * 0.13) + 1325px);
    }

    .s1_open {
        height: calc(748px - 2vw);
        height: calc(820px - 2vw);
        height: calc(((1353px - 100vw) * 0.24) + 684px);
    }

    .s2_open {
        height: calc(650px - 2vw);
    }

    .s3_open {
        height: calc(595px - 2vw);
        height: calc(((1353px - 100vw) * 0.2) + 573px);
    }

    .s4_open {
        height: calc(595px - 2vw);
        height: calc(((1353px - 100vw) * 0.2) + 514px);
    }

    .s5_open {
        height: calc(595px - 2vw);
        height: calc(((1353px - 100vw) * 0.28) + 661px);
    }

    .s6_open {
        height: calc(595px - 2vw);
        height: calc(((1353px - 100vw) * 0.28) + 661px);
        height: calc(((1353px - 100vw) * 0.13) + 595px);
    }

    .s8_open {
        height: calc(595px - 2vw);
        height: calc(((1353px - 100vw) * 0.28) + 661px);
        height: calc(((1353px - 100vw) * 0.13) + 661px);
    }

    img {
        position: relative;
        right: 0px;
        top: 0px;
        margin: 0px;
        width: 100%;
    }

    .togglebox {
        margin-top: 30px;
    }

    .togglebox > div {
        width: 100%;
    }

    iframe {
        width: calc(100% - 190px);
        width: calc(100% - 60px);
        height: 85%;
    }

    #img_small {
        display: none;
    }

    #footer_img {
        display: block;
    }

    h1 {
        margin: 5vw 0px;
    }

    p {
        font-size: 15px;
        line-height: 22px;
    }

    label.open ~ #c1 {
        height: 210px;
    }

    #footer_img {
        position: relative;
        margin: 0 0 130px 0;
        width: 100%;
    }

    #top_left_border {
        width: 26.3vw;
        height: 10.1vw;
    }

    #bottom_right_border {
        width: 26.3vw;
        height: 10.1vw;
    }

    label.open ~ #c3 {
        height: calc(2900px - 65vw);
    }

    label.open ~ #c4 {
        height: calc(15300px - 560vw);
    }
}


@media only screen and (max-width: 973px) {
    h1 > span.regular {
        font-size: 7.3vw;
        line-height: 6.3vw;
        height: 5.5vw;
        margin-bottom: 3vw;
    }

    #text-right p {
        font-size: 2.57vw;
        line-height: 3.4vw;
    }
}



@media only screen and (max-width: 800px) {
    
    .stelle {
      margin: 20px 30px 20px 18px;
    }

    label.open ~ #c5 {
        max-height: 2000px;
    }

    .s1_open .clickVisible,
    .s2_open .clickVisible,
    .s3_open .clickVisible,
    .s4_open .clickVisible,
    .s5_open .clickVisible,
    .s6_open .clickVisible,
    .s7_open .clickVisible,
    .s8_open .clickVisible {
        height: 46px;
    }

    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }

    .s1_closed {
        height: 15vw;
        max-height: 113px;
    }

    .s1_open {
        height: calc(2055px - 150vw);
        height: calc(((800px - 100vw) * 1.33) + 905px);
    }

    label.open ~ #c5.s1o {
        height: calc(2175px - 124.25vw);
        height: calc(2075px - 124.25vw);
        height: calc(((800px - 100vw) * 1.33) + 1315px);
        height: calc(((800px - 100vw) * 1.05) + 1315px);
        height: calc(((800px - 100vw) * 1.05) + 1380px);
        height: calc(((800px - 100vw) * 1.05) + 1535px);
        height: calc(((800px - 100vw) * 1.05) + 1690px);
    }

    .s2_closed {
        height: 15vw;
        max-height: 113px;
    }

    .s2_open {
        height: calc(1650px - 114vw);
    }

    label.open ~ #c5.s2o {
        height: calc(1770px - 88.25vw);
    }

    .s3_closed {
        height: 10.5vw;
    }

    .s3_open {
        height: calc(1440px - 90vw);
        height: calc(((800px - 100vw) * 0.75) + 710px);
    }

    label.open ~ #c5.s3o {
        height: calc(1560px - 64.25vw);
        height: calc(1475px - 64.25vw);
        height: calc(((800px - 100vw) * 0.45) + 1143px);
        height: calc(((800px - 100vw) * 0.45) + 1215px);
        height: calc(((800px - 100vw) * 0.45) + 1370px);
        height: calc(((800px - 100vw) * 0.45) + 1525px);
    }

    .s4_closed {
        height: 4.75vw;
    }

    .s4_open {
        height: calc(1440px - 90vw);
        height: calc(((800px - 100vw) * 0.9) + 630px);
    }

    label.open ~ #c5.s4o {
        height: calc(1560px - 64.25vw);
        height: calc(1475px - 64.25vw);
        height: calc(((800px - 100vw) * 0.6) + 1120px);
        height: calc(((800px - 100vw) * 0.6) + 1185px);
        height: calc(((800px - 100vw) * 0.6) + 1340px);
        height: calc(((800px - 100vw) * 0.6) + 1495px);
    }

    .s5_closed {
        height: 15vw;
        max-height: 113px;
    }

    .s5_open {
        height: calc(1440px - 90vw);
        height: calc(((800px - 100vw) * 1.48) + 882px);
    }

    label.open ~ #c5.s5o {
        height: calc(1560px - 64.25vw);
        height: calc(1475px - 64.25vw);
        height: calc(((800px - 100vw) * 1) + 1290px);
        height: calc(((800px - 100vw) * 1) + 1355px);
        height: calc(((800px - 100vw) * 1) + 1510px);
        height: calc(((800px - 100vw) * 1) + 1665px);
    }

    label.open ~ #c5 {
        height: calc(120px + 40.75vw);
        height: calc(25px + 40.75vw);
        height: calc(523px - ((800px - 100vw) * 0.45));
        height: calc(606px - ((800px - 100vw) * 0.5));
        height: calc(900px - ((800px - 100vw) * 0.5));
        height: calc(290px + 80vw);
    }

    .s6_closed {
        height: 4.75vw;
    }

    .s6_open {
        height: calc(1440px - 90vw);
        height: calc(((800px - 100vw) * 1.48) + 882px);
        height: calc(((800px - 100vw) * 1) + 612px);
    }

    label.open ~ #c5.s6o {
        height: calc(1560px - 64.25vw);
        height: calc(1475px - 64.25vw);
        height: calc(((800px - 100vw) * 1) + 1290px);
        height: calc(((800px - 100vw) * 0.6) + 1270px);
        height: calc(((800px - 100vw) * 0.6) + 1425px);
        height: calc(((800px - 100vw) * 0.6) + 1580px);
    }

    .s7_closed {
        height: 15vw;
        max-height: 113px;
    }

    .s7_open {
        height: calc(1440px - 90vw);
        height: calc(((800px - 100vw) * 1.48) + 882px);
        height: calc(((800px - 100vw) * 1) + 950px);
    }

    label.open ~ #c5.s7o {
        height: calc(1560px - 64.25vw);
        height: calc(1475px - 64.25vw);
        height: calc(((800px - 100vw) * 1) + 1290px);
        height: calc(((800px - 100vw) * 0.6) + 1270px);
        height: calc(((800px - 100vw) * 0.6) + 1425px);
        height: calc(((800px - 100vw) * 0.6) + 1700px);
    }

    .s8_closed {
        height: 15vw;
        max-height: 113px;
    }

    .s8_open {
        height: calc(1440px - 90vw);
        height: calc(((800px - 100vw) * 1.48) + 882px);
        height: calc(((800px - 100vw) * 1) + 800px);
    }

    label.open ~ #c5.s8o {
        height: calc(1560px - 64.25vw);
        height: calc(1475px - 64.25vw);
        height: calc(((800px - 100vw) * 1) + 1290px);
        height: calc(((800px - 100vw) * 0.6) + 1270px);
        height: calc(((800px - 100vw) * 0.6) + 1580px);
    }

    .Titel {
        font-size: 4.25vw;
        line-height: 2.7vw;
        margin-bottom: 2vw;
    }

    img {
        position: relative;
        right: 0px;
        top: 0px;
        margin: 0px;
    }

    .togglebox {
        margin-top: 30px;
    }

    .togglebox > div {
        width: 100%;
    }

    iframe {
        /*width: calc(100% - 190px);        
        width: calc(100% - 60px);*/
        width: calc(100% - 8vw);
        height: 85%;
        margin: 4vw;
    }

    img {
        width: 100%;
        margin: 0 0 calc(30px + 21vw) 0;
    }

    #img_small {
        display: none;
    }

    #img_large {
        display: block;
    }

    h1 {
        margin: 5vw 0px;
    }

    #footer {
        /*width: 150px;
        height: 150px;*/
        width: 21vw;
        height: 21vw;
    }

    #footer svg {
        /*height: 100px;
        width: 100px;
        margin: 25px;*/
        height: 14vw;
        width: 14vw;
        margin: 3.5vw;
    }

    label,
    label h2 {
        /*line-height: 117px;
        height: 117px;
        font-size: 75px;*/
        line-height: 12vw;
        font-size: 6vw;
        height: 11vw;
        padding: 0 7vw;
    }

    label::before {
        /* top: -10.5px;
        font-size: 43.5px;*/
        font-size: 5vw;
        top: -1.5vw;
        right: 2.5vw;
    }

    label::after {
        /*font-size: 18px;*/
        font-size: 2vw;
    }

    p {
        /*font-size: 37.5px;
        line-height: 49.5px;*/
        font-size: 4.9vw;
        line-height: 6.5vw;
        margin: 5vw 0;
        padding: 0px 4vw;
    }

    label.open ~ #c1 {
        height: 375px;
        height: 60vw;
    }

    label.open ~ #c2 {
        height: 500px;
        height: 52vw;
    }

    label.open ~ #c3 {
        height: 1160px;
        height: 189vw;
        height: 1200vw;
    }

    label.open ~ #c4 {
        height: 1050px;
        height: 290vw;
        height: 6415vw;
    }

    .datenschutz > div {
        font-size: 4.9vw;
        line-height: 6.5vw;
        margin: 5vw 0;
        padding: 0px 4vw;
    }

    .anfahrt {
        display: none;
    }

    #impressum_small,
    .datenschutz p {
        display: block;
        /*font-size: 37.5px;
        line-height: 49.5px;*/
        font-size: 4.9vw;
        line-height: 6.5vw;
        margin: 5vw 0;
        padding: 0px 4vw;
    }

    #impressum {
        font-size: 4.9vw;
        line-height: 6.5vw;
        margin: 5vw 0;
        padding: 0px 4vw;
    }

    table {
        display: none;
    }

    #Ebene_1 {
        width: 455px;
    }

    #text-right p {
        font-size: 4.57vw;
        line-height: 5.4vw;
    }
}

/*
@media only screen and (max-width: 793px) {
    #text-right p {
        font-size: 2.57vw;
        line-height: 3.4vw;
    }

    #img_small{
        display: block;
    }

    #img_large{
        display: none;
    }
    
    #c1 p {
        font-size: 15px;
        line-height: 20px;
    }

    label.open ~ #c1 {
        height: auto;
    }

    label.open ~ #c2 {
        height: auto;
    }

    label.open ~ #c3 {
        height: auto;
    }

    label.open ~ #c4 {        height: 380px;
        height: auto;
    }
}

@media only screen and (max-width: 563px) {
    #text-right p {
        font-size: 14.5px;
        line-height: 19px;
    }
    
    .anfahrt{
        position: relative;
        margin: 0px 30px;
        width: calc(100% - 60px);
        display: block;
    }
    
    iframe {
        width: calc(100% - 60px);
    }
    
    label.open ~ #c2 {
        height: 410px;
    }    

    #impressum_small{
        display: block;
    }
    
    table{
        display: none;
    }
}
*/