/** defines */
html {
    --colorRed: #e2001a;
}

/** svg */
.st0 { fill: #ffffff; }
.st1 { fill: var( --colorRed ); }

/** fonts */
@font-face {
  font-family: "Arial Black";
  src: url("https://corporate.jobrocks.de/fonts/asmArial-Black.ttf")
    format("truetype");
  src: url("https://corporate.jobrocks.de/fonts/asmArial-Black.eot")
    format("embedded-opentype");
  src: url("https://corporate.jobrocks.de/fonts/asmArial-Black.woff")
    format("woff");
  src: url("https://corporate.jobrocks.de/fonts/asmArial-Black.woff2")
    format("woff2");
  font-weight: normal, bold;
  font-style: normal, bold;
}

@font-face {
  font-family: "Arial Bold";
  src: url("https://corporate.jobrocks.de/fonts/asmArial-Bold.eot")
    format("embedded-opentype");
  src: url("https://corporate.jobrocks.de/fonts/asmArial-Bold.woff")
    format("woff");
  font-weight: normal, bold;
  font-style: normal, bold;
}

/** reset */
html, body, h1, h2, h3, h4, h5, h6, ul, ol, li, p, header, main, footer, a {
    position: relative;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
b, strong {
    font-weight: bold;
}

/** bases */
body {
    font-family: Arial;
    font-size: 15px;
    line-height: 21px;
    color: #020e25;
    background-color: #fff;
}
body > div {
    margin: auto;
    width: 760px;
    max-width: 100%;
    outline: 1px solid #020e25;
}
h1, h2, a {
    color: var( --colorRed );
}
h1 {
    font-size: 1.625rem;
    line-height: 2.06rem;
    margin-bottom: 15px;
    padding-top: 10px;
}
h2 {
    font-size: 1.125rem;
    padding-top: 16px;
    margin-top: 15px;
    margin-bottom: 6px;
}
section > :first-child {
    margin-top: 0;
    padding-top: 0;
}

a {
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
    transition: all ease-in-out 0.1s;
}
a:hover::before {
    content: "";
    width: 100%;
}
a::before {
    content: "";
    transition: all ease-in-out 0.1s;
    bottom: 0px;
    left: 0;
    width: 0;
    height: 1px;
    position: absolute;
    background: #e2001a;
}
a[href^="tel:"] {
    white-space: nowrap;
    color: #020e25;
}
a[href^="tel:"]::before {
    background: #020e25;
}


h2:empty,
h3.empty,
h4.empty,
h5.empty,
h6.empty,
div:empty,
p:empty,
ul.empty,
ol.empty,
section:empty {
    display: none;
}

/** globals */
p {
    margin: 0 0 10px 0;
}
ul, ol {
    padding-left: 14px;
}
ul + p, ol + p {
    margin-top: 10px;
}
li {
    list-style: none;
}
li::before {
    background-color: var( --colorRed );
    font-weight: bold;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 9px;
    margin-left: -12px;
    content: "";
    font-size: 18px;
}

/** paddings */
main {
    padding-top: 0;
    margin-top: -20px;
}
main > section:first-of-type {
    padding-top: 0;
}
main > section, footer {
    padding-left: 6.57894736842%;
    padding-right: 6.57894736842%;
    clear: left;
    margin-bottom: 19px;
    padding-top: 15px;
}

header {
    overflow: hidden;
    height: 460px;
}

/** Headerbilder allgemein - Finger weg! */
header {
    overflow: hidden;
    background-position-y: 0px;
    background-position-x: -38px;
    background-size: 150%;
    text-align: center;
    background-repeat: no-repeat;
    background-image: url( "https://corporate.jobrocks.de/BA/img/Header_Thomas.jpg" );
}

/** Einzelbilder Header - hier die Ausrichtung für 320px mobile machen */
header.thomas {
    background-image: url( "https://corporate.jobrocks.de/BA/img/Header_Thomas.jpg" );
}
header.nina {
    background-image: url( "https://corporate.jobrocks.de/BA/img/Header_Nina.jpg" );
}
header.nicole {
    background-image: url( "https://corporate.jobrocks.de/BA/img/Header_Nicole.jpg" );
    background-position-x: -53px;
}
header.kevin {
    background-image: url( "https://corporate.jobrocks.de/BA/img/Header_Kevin.jpg" );
}
header.thalia {
    background-image: url( "https://corporate.jobrocks.de/BA/img/Header_Thalia.jpg" );
}
header.christian {
    background-image: url( "https://corporate.jobrocks.de/BA/img/Header_Christian.jpg" );
    background-position-x: -38px;
}
header.meriem {
    background-image: url("https://corporate.jobrocks.de/BA/img/Header_Meriem.jpg");
    background-position-x: -200px;
    background-size: 179%;
}
header.undine {
    background-image: url("https://corporate.jobrocks.de/BA/img/Header_Undine.jpg");
    background-position-x: -140px;
}
header.lucas {
    background-image: url("https://corporate.jobrocks.de/BA/img/Header_Lucas.jpg");
    background-position-x: -183px;
    background-size: 173%;
}
header.joerg {
    background-image: url("https://corporate.jobrocks.de/BA/img/Header_Joerg.jpg");
    background-position-x: -88px;
    background-size: 162%;
}
header.ozan {
    background-image: url("https://corporate.jobrocks.de/BA/img/Header_Ozan.jpg");
    background-position-x: -18px;
}
header.alexandra {
    background-image: url("https://corporate.jobrocks.de/BA/img/Header_Alexandra.jpg");
    background-position-x: -129px;
}
header.vilune {
    background-image: url("https://corporate.jobrocks.de/BA/img/Header_Vilune.jpg");
}
header.halimatou {
    background-image: url("https://corporate.jobrocks.de/BA/img/Header_Halimatou.jpg");
}
header.sükriye {
    background-image: url("https://corporate.jobrocks.de/BA/img/Header_Sükriye.jpg");
    background-size: 123%;
    background-position-x: -34px;
    background-position-y: -41px;
}
header.christina {
    background-image: url("https://corporate.jobrocks.de/BA/img/Header_Christina.jpg");
    background-size: 123%;
    background-position-x: -34px;
    background-position-y: -41px;

    background-size: 163%;
    background-position-x: -64px;
    background-position-y: -80px;
}

/** Logo und Schrift im Header - Finger weg! */
header svg,
header .logo {
    max-width: 95px;
    margin: auto;
    margin-top: 10px;
}
header > div {
    color: #ffffff;
    margin-top: 190px;
    font-size: 0.6875rem;
    line-height: 0.8125rem;
}
header > div p:first-child {
    font-family: "Arial Black";
    font-size: 2rem;
    line-height: 1.875rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}
header > div p:nth-child(2) {
    padding: 0 10px;
    padding: 0 50px;
    letter-spacing: -0.33px;
}

/* Stellentitel einleitung in rot */
.introduction p {
    color: var(--colorRed );
}

footer {
    padding-top: 25px;
    padding-bottom: 15px;
}

footer div {
    display: block;
}

#brigitte {
    width: 80px;
    height: 80px;
}

footer div img {
    height: 80px;
}

footer > img {
    height: 78px;
    margin-right: 10px;
    margin-bottom: 22px;
}
img#dqs1 {
    display: block;
    margin-left: 81px;
    margin-bottom: 25px;
}
img#dqs1, img#total, img#dqs2 {
    height:82px;
    margin-top: 1px;
    margin-bottom: 0px;
}

#dsq2 {

}

img#woman {
    margin-right: 0;
}
img#dqs2,
footer svg  {
    display: none;
}

/** */
.btn {
    background: var( --colorRed );
    color: #fff;
    display: inline-block;
    padding: 10px 18px;
    font-family: "Arial";
    font-weight: bold;
    border-radius: 3px;
    margin: 25px 0 0;
    margin-bottom: 25px;
    padding-top: 10px !important;
}

/** responsive */
@media all and ( min-width: 321px ) {
    header > div p:first-child {
        font-size: 40px;
        line-height: 38px;
    }
    main {
        margin-top: 0;
    }
}
@media all and ( min-width: 360px ) {
    main {
        padding-top: 20px;
    }

    header.sükriye {
        background-position-x: -62px;
        background-position-y: 0px;
        background-size: 149%;
    }
    header.nina {
        background-position-x: -142px;
    }
}
@media all and ( min-width: 400px ) {
    footer > img {
        margin-right: 25px;
        margin-bottom: 25px;
    }
    img#dqs1, img#total, img#dqs2 {
        margin-bottom: 23px;
    }
    img#dqs1 {
        margin-left: 96px;
    }
}
@media all and (min-width: 428px) {
    header.meriem {
        background-position-y: -10px;
        background-position-x: -150px;
        background-size: 150%;
    }
    header.undine {
        background-position-y: -58px;
        background-position-x: -198px;
        background-size: 160%;
    }

}
@media all and ( min-width: 450px ) {
    main {
        padding-top: 25px;
    }
}
@media all and ( min-width: 500px ) {
    footer > img {
        margin-right: 20px;
        margin-bottom: 25px;
    }
    img#dqs1 {
        display: none;
    }
    img#woman {
        margin-right: 25px;
    }
    img#dqs2 {
        margin-right: 0;
        display: inline;
    }
    header.sükriye {
        background-size: 123%;
        background-position-x: -34px;
        background-position-y: -41px;
    }
    header.nina {
        background-position-x: -38px;
    }
}
@media all and ( min-width: 600px ) {
    header.meriem {
        background-position-y: -100px;
        background-position-x: -100px;
        background-size: 140%;
    }
    main {
        padding-top: 35px;
    }

    header svg,
    header .logo {
        position: absolute;
        right: 20px;
        bottom: 21px;
        max-width: 105px;
    }
    header > div {
        margin-top: 58px;
        margin-right: 33%;
    }
    header > div p {
        font-size: 0.9375rem;
        line-height: 1.125rem;
    }
    header > div p:first-child {
        font-size: 3.125rem;
        line-height: 3.125rem;
        margin-bottom: 10px;
    }

    header.christian {
        background-position-y: -115px;
        background-position-x: -110px;
    }
    header.nicole {
        background-position-y: -13px;
        background-position-x: -143px;
    }
    header.vilune {
        background-position-y: -13px;
        background-position-x: -73px;
    }
    header.halimatou {
        background-position-y: -13px;
        background-position-x: -73px;
    }
    header.joerg,
    header.thomas {
        background-position-y: -57px;
        background-position-x: -58px;
        background-size: 130%;
    }
    /* header.thomas {
        background-position-y: -57px;
        background-position-x: -58px;
        background-size: 130%;
    } */


    header.nicole div,
    header.kevin div,
    header.thalia div,
    header.ozan div,
    header.vilune div,
    header.halimatou div {
        margin-right: auto;
        margin-left: 33%;
    }

}
@media all and ( min-width: 650px ) {
    footer > svg {
        display: inline;
        max-width: 135px;
        margin-top: -28px;
        float: right;
        margin-right: -4px;
    }
}

@media all and ( min-width: 690px ) {
    /** 2 column display */
    .side {
        display: flex;
        justify-content: space-between;
    }
    .side > div {
        flex: 0 0 calc(100% / 2 - 1%);
        flex-basis: calc(100% / 2 - 1%);
        flex-shrink: 1;
        padding-left: 10px;
    }
    .side > div:first-child {
        padding-right: 20px;
        padding-left: 0;
    }
    header {
        height: 400px;
        background-size: 132%;
        background-position-y: -62px;
        background-position-x: -63px;
    }
    h1 {
        font-size: 2.22rem;
        line-height: 2.75rem;
    }
    main {
        padding-top: 47px;
    }
    header.nicole {
        background-position-y: -45px;
        background-position-x: -119px;
    }
}

header.nicole ~ footer #dqs1,
header.nicole ~ footer #dqs2 {
    display: none;
}

.noWrap {
    white-space: pre;
    word-break: keep-all;
  }