/** 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;
    overflow-x: hidden;
}
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;
}
section:has(> div:last-child:empty) {
    /* display: none; */
    padding-top: 0;
    margin-bottom: 0;
}
section:has(> div:last-child:empty) + .introduction {
    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;
}
header.christina2 {
    background-image: url("https://corporate.jobrocks.de/BA/img/Header_Christina2.jpg");
    background-size: 145%;
    background-position-x: -83px;
    background-position-y: -3px;
}

/** 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;
} */
header > div p:nth-child(2) {
    padding: 0 50px;
    letter-spacing: -0.33px;
}

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

footer {
    padding-top: 25px;
    padding-bottom: 15px;
    display: grid;
    /* grid-template-columns: 20% 20% 20% 40%; */
    grid-template-columns: 18% 18% 18% 18% 28%;
    /* justify-items: center; */
}
/* #totale {
    grid-column: 1 / span 1;
    justify-self: start;
} */
#footerlogo {
    justify-self: end;
}
#trendence {
    grid-column: 2 / span 5;
    justify-self: start;
}
#trendence:has( + #br2024 ) {
    grid-column: 2 / span 2;
}
#trendence + #br2024 {
    grid-column: 4 / span 4;
}
#trendence + #br2024 ~ #footerlogo {
    grid-column: 5 / span 1;
    justify-self: end;
}
#br2024 {
    grid-column: 2 / span 1;
    justify-self: start;
}
#br2024 ~ #footerlogo {
    grid-column: 5 / span 1;
    justify-self: end;
}

footer > img {
    height: 78px;
    margin-bottom: 22px;
    max-width: 90%;
}
#most {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
    height: auto;
    max-width: 60%;
}
/* img#dqs1 {
    display: block;
    margin-left: 81px;
    margin-bottom: 25px;
} */
/* img#dqs1, img#total, img#dqs2 {
    height:82px;
    margin-top: 1px;
    margin-bottom: 20px;
}
img#woman {
    margin-right: 0;
} */
img#dqs2 {
    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;
}

header.christina2 > div p:nth-child(1) {
    display: none;
}
header.christina2 > div p:nth-child(2) {
    font-size: 1.25rem;
    line-height: 1.625rem;
    padding: 0 10px;
    /* padding: 40px 40px 0 40px !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: 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 ) {
    header.sükriye {
        background-size: 123%;
        background-position-x: -34px;
        background-position-y: -41px;
    }
    header.nina {
        background-position-x: -38px;
    }
    header.christina2 {
        background-position-y: -31px;
    }
    header.christina2 {
        background-size: 123%;
        background-position-x: -34px;
        background-position-y: -41px;
    }
}
@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.christina2 > div p:nth-child(1) {
        display: none;
    }
    header.christina2 > div p:nth-child(2) {
        font-size: 1.25rem;
        line-height: 1.625rem;
        padding: 100px 40px 0 40px !important;
    }

    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: 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;
  }

  @media all and ( max-width: 460px ) {
    footer {
        /* grid-template-columns: 33.3% 33.3% 33.3%; */
        grid-template-columns: 25% 25% 25% 25%;
    }
    footer #footerlogo {
        display: none;
    }
  }