/* settings */
html {
    /* --sliderHeight: 300px; */
    --sliderWidth: 110%;
    --sliderAnimation: inOut;
    --sliderCount: 3;
    --sliderTime: 3s;

    --colorDarkGreen: #006455;
    --colorRed: #eb4155;
    --colorLightGreen: #5fb469;
    --colorGray: #d2cdc3;
    --colorGray25: #f4f3f0;
}

@font-face {
    font-family: "Roboto";
    src: url("https://corporate.jobrocks.de/HdkF/fonts/RobotoRegular.eot");
    src: url("https://corporate.jobrocks.de/HdkF/fonts/RobotoRegular.eot?#iefix") format("embedded-opentype"),
        url("https://corporate.jobrocks.de/HdkF/fonts/RobotoRegular.woff") format("woff"),
        url("https://corporate.jobrocks.de/HdkF/fonts/RobotoRegular.woff2") format("woff2"),
        /* url("https://corporate.jobrocks.de/HdkF/fonts/Robotoregular.ttf") format("truetype") */
        ;
    font-weight: 400;
    font-style: normal
}

/* @font-face {
    font-family: "Open Sans";
    src: url("https://corporate.jobrocks.de/HdkF/fonts/OpenSans-Italic-webfont.eot");
    src: url("https://corporate.jobrocks.de/HdkF/fonts/OpenSans-Italic-webfont.eot?#iefix") format("embedded-opentype"),
        url("https://corporate.jobrocks.de/HdkF/fonts/OpenSans-Italic-webfont.woff") format("woff"),
        url("https://corporate.jobrocks.de/HdkF/fonts/OpenSans-Italic-webfont.ttf") format("truetype");
    font-weight: 400;
    font-style: italic
} */

@font-face {
    font-family: "Roboto";
    src: url("https://corporate.jobrocks.de/HdkF/fonts/RobotoBold.eot");
    src: url("https://corporate.jobrocks.de/HdkF/fonts/RobotoBold.eot?#iefix") format("embedded-opentype"),
        url("https://corporate.jobrocks.de/HdkF/fonts/RobotoBold.woff") format("woff"),
        url("https://corporate.jobrocks.de/HdkF/fonts/RobotoBold.woff2") format("woff2"),
        /* url("https://corporate.jobrocks.de/HdkF/fonts/RobotoBold.ttf") format("truetype") */
        ;
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: "RobotoCondensed";
    src: url("https://corporate.jobrocks.de/HdkF/fonts/RobotoCondensedBold.eot");
    src: url("https://corporate.jobrocks.de/HdkF/fonts/RobotoCondensedBold.eot?#iefix") format("embedded-opentype"),
        url("https://corporate.jobrocks.de/HdkF/fonts/RobotoCondensedBold.woff") format("woff"),
        url("https://corporate.jobrocks.de/HdkF/fonts/RobotoCondensedBold.woff2") format("woff2"),
        /* url("https://corporate.jobrocks.de/HdkF/fonts/RobotoBold.ttf") format("truetype") */
        ;
    font-weight: 700;
    font-style: normal
}

/* @font-face {
    font-family: "Open Sans";
    src: url("https://corporate.jobrocks.de/HdkF/fonts/OpenSans-BoldItalic-webfont.eot");
    src: url("https://corporate.jobrocks.de/HdkF/fonts/OpenSans-BoldItalic-webfont.eot?#iefix") format("embedded-opentype"),
        url("https://corporate.jobrocks.de/HdkF/fonts/OpenSans-BoldItalic-webfont.woff") format("woff"),
        url("https://corporate.jobrocks.de/HdkF/fonts/OpenSans-BoldItalic-webfont.ttf") format("truetype");
    font-weight: 700;
    font-style: italic
} */

/* @font-face {
    font-family: "Meta Office";
    src: url("https://corporate.jobrocks.de/HdkF/fonts/Meta-Office-Regular.eot");
    src: url("https://corporate.jobrocks.de/HdkF/fonts/Meta-Office-Regular.eot?#iefix") format("embedded-opentype"),
        url("https://corporate.jobrocks.de/HdkF/fonts/Meta-Office-Regular.woff") format("woff"),
        url("https://corporate.jobrocks.de/HdkF/fonts/Meta-Office-Regular.ttf") format("truetype")
        ;
}

@font-face {
    font-family: "MetaCompPro";
    src: url("https://corporate.jobrocks.de/HdkF/fonts/MetaComp-Pro-Regular.eot");
    src: url("https://corporate.jobrocks.de/HdkF/fonts/MetaComp-Pro-Regular.eot?#iefix") format("embedded-opentype"),
        url("https://corporate.jobrocks.de/HdkF/fonts/MetaComp-Pro-Regular.woff") format("woff"),
        url("https://corporate.jobrocks.de/HdkF/fonts/MetaComp-Pro-Regular.ttf") format("truetype")
        ;
} */

/** slider animation */
@keyframes inOut {
    /* 0% { visibility: visible }
    33.33% { visibility: hidden } */
    0% { opacity: 1; }
    33.33% { opacity: 1; }
    37.33% { opacity: 0; }
    96% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes rightLeft {
    0% { left: 100%; visibility: visible; }
    4% { left: 0%; visibility: visible; }
    33.33% { left: 0%; visibility: visible; }
    37.33% { left: -100%; visibility: hidden; }
    100% { left: -100%; visibility: hidden; }
}
@keyframes leftRight {
    0% { left: 100%; }
    4% { left: 0%; }
    33.33% { left: 0%; }
    37.33% { left: -100%; }
    100% { left: -100%; }
}
@keyframes bottomTop {
    0% {top: 100%}
    4% {top: 0%}
    33.33% {top: 0%}
    37.33% {top: -100%}
    100% {top: -100%}
}

body {
    background-color: #fff;
}
/*SCREEN STUFF*/
@media screen and (max-width: 480px) {
    header > a  {
        position: absolute;
        display: block;
        width: 100px;
        /* height: 120px; */
        max-width: 47.32% !important;
        /* float: right; */
        top: 11% !important;
        right: 7% !important;
    }
    header {
        aspect-ratio: 706/650 !important;

    }
    header section {
        margin: 46.5% 0px 0px 0px !important;
        width: var( --sliderWidth );
        aspect-ratio: 900/300 !important ;
        position: relative;
        overflow: hidden;
    }
    header section > *:nth-child(1) {
        top: -60px !important;
    }
    header section > *:nth-child(2) {
        top: -20px !important;
    }
    header section > *:nth-child(3) {
        top: -10px !important;
    }
    footer img {
        max-width: 170px !important;
    }

  }

@media screen and (max-width: 360px) {
    header > a  {
        position: absolute;
        width: 90px;
        /* height: 120px; */
        max-width: 47.32% !important;
        /* float: right; */
        top: 11% !important;
        right: 7.5% !important;
    }
    header {
        aspect-ratio: 670/650 !important;

    }
    header section {
        margin: 48% 0px 0px 0px !important;
        width: var( --sliderWidth );
        aspect-ratio: 700/260 !important ;
        position: relative;
        overflow: hidden;
    }
    /* header section > *:nth-child(3) {
        top: -45px !important;
    } */
    footer img {
        max-width: 160px !important;
    }

  }



header section {
    /* height: var( --sliderHeight ); */
    width: var( --sliderWidth );
    aspect-ratio: 900/260 ;
    position: relative;
    overflow: hidden;
    /* border: solid 1px gray; */
}

header section > * {
    /* visibility: hidden; */
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    animation: calc( var(--sliderCount) * var(--sliderTime) ) var( --sliderAnimation ) infinite ease-in-out
}
header section > *:nth-child(1) { opacity: 1; }
header section > *:nth-child(1) { animation-delay: calc( 1 * var(--sliderTime) ); top: -150px; }
header section > *:nth-child(2) { animation-delay: calc( 2 * var(--sliderTime) ); top: -70px; }
header section > *:nth-child(3) { animation-delay: calc( 3 * var(--sliderTime) ); top: -80px; }



/** Reset */
* {
    border-collapse: collapse;
    box-sizing: border-box;
}
html, body, p, ul, ol, li, h1, h2, h3, h4, h5, h6, h7, img {
    margin: 0; padding: 0;
    font-family: "Roboto", sans-serif;
    font-weight: normal;
}

/** Defintionen */
body {
    text-align: center;
    /* font-family: "Open Sans", sans-serif; */
    font-size: 16px;
    line-height: 22px;
}
ul {
    list-style: disc;
    padding-left: 20px;
}
li {
    position: relative;
    padding-bottom: 5px;
}
a {
    text-decoration: none;
    color: var( --colorDarkGreen );
}

#wrapper {
    max-width: 900px;
    min-height: 100px;
    text-align: left;
    margin: auto;
    border: solid 1px #000;
}

header {
    overflow: hidden;
    position: relative;
    padding-bottom: 60px;
    aspect-ratio: 900/660;
}
header > a {
    position: absolute;
    /* width: 122px; */
    width: 18.0263%;
    display: block;
    /* height: 120px; */
    /* max-width: 26.32%; */
    /* float: right; */
    top: 5.2%;
    right: 10.1%;
}
header > div {
    /* background-color: red; */
    position: absolute;
    /* width: 760px; */
    left: 0;
    /* max-width: 480px; */
    width: 63.1578%;
    /* right: 0; */
    /* top: -90px; */
    height: 150px;
    /* transform: rotate(-8.5deg); */
    /* clip-path: polygon( 0 0, 0 62px, 412px 91px, 477px 43px, 480px 0 ); */
    /* -webkit-clip-path: polygon( 0 0, 0 62px, 412px 91px, 477px 43px, 480px 0 ); */
    /* shape-inside: polygon( 0 0, 0 62px, 412px 91px, 477px 43px, 480px 0 ); */
}
header section {
    margin-top: 33.5%;
    transform: rotate(-8.5deg);
    left: -5%;
}

.teaser {
    color: #006455;
}
h1 {
    font-family: "RobotoCondensed", Arial, sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 48px;
    color: #006455;
    padding: 0 0 10px 0;
    /* text-transform: uppercase; */
    margin-top: 30px;
}
h1 + p + strong {
    margin-bottom: 30px;
    display: block;
}
h2 {
    /* font-family: "MetaCompPro", Arial, sans-serif; */
    font-weight: bold;
    font-size: 20px;
    line-height: 26px;
    color: var( --colorDarkGreen );
    padding: 10px 0 10px 0;
}
p {
    margin-bottom: 10px;
}
ul {
    margin-bottom: 10px;
}
ul + p {
    margin-top: 5px;
}
main {
    padding: 20px 5% 0;
    overflow: hidden;
}
p:has( + h2 ) .bewerbungslink {
    background-color: var( --colorDarkGreen );
    border: 1px solid var( --colorDarkGreen );
    display: inline-block;
    font-family: "MetaCompPro", Arial, sans-serif;
    padding: 13px 30px;
    color: #fff;
    white-space: nowrap;
    margin: 30px 0 20px 0;
}
p:has( + h2 ) .bewerbungslink:hover {
    background-color: var(--colorRed);
    border-color: var(--colorRed);
}
main section div {
    background-color: var( --colorGray25 );
    margin: -35px -6%;
    padding: 30px 6% 25px;
}
main section div:first-child,
main section div:last-child {
    margin: 20px -10% 20px;
    height: 30px;
    padding: 0;
    transform: rotate(-2deg);
}
main section div:last-child {
    border-bottom: solid 2px var( --colorDarkGreen );
}
footer {
    padding: 30px 5% 0;
    overflow: hidden;
    min-height: 50px;
    font-size: 12px;
    font-weight: bold;
    position: relative;
}
footer div {
    float: left;
    display: block;
    width: 200px;
    margin-bottom: 20px;
}
footer div:first-child:not(.gefoerdert) {
    margin-right: 50px;
}
footer div:nth-child(1),
footer div:nth-child(2) {
    color: #666;
    text-transform: uppercase;
    font-weight: normal;
}
footer div:has( img ) {
    margin-right: 50px;
    clear: left;
}
footer img {
    /*max-width: 150px;*/
}

footer .gefoerdert {
    margin-left: 48px;
    margin-right: 50px;
    width: 152px;
    overflow: visible;
}

footer .stiftungen {
    margin-top: -2px;
    line-height: 16px;
}

@-moz-document url-prefix() {

    footer div.gefoerdert {
        width: 190px;
        margin-right: 22px;
    }

    footer div.imageContainer {
        margin-right: 60px;
    }
}

@media screen and (max-width: 725px) {
    footer .imageContainer {
        /*padding-bottom: 120px;*/
    }
}

@media screen and (max-width: 502px) {
    footer div {
        width: 150px;
    }

    footer .gefoerdert {
        margin-left: 35px;
        margin-right: 44px;
        width: 122px;
    }

    footer .imageContainer {
        /*padding-bottom: 140px;*/
    }
}

@media screen and (max-width: 420px) {
    footer div {
        width: 140px;
    }

    footer .gefoerdert {
        margin-right: 52px;
        margin-left: 34px;
        width: 104px;
    }
}


@media screen and (max-width: 400px) {
    footer div {
        width: 140px;
    }

    footer .gefoerdert {
        margin-right: 52px;
        margin-left: 34px;
        width: 104px;
    }
}

@media screen and (max-width: 370px) {
    footer div {
        width: 130px;
    }

    footer .gefoerdert {
        margin-right: 23px;
        margin-left: 30px;
        width: 108px;
    }

    footer div:has( img ) {
        margin-right: 31px;
    }
}

@media screen and (max-width: 324px) {
    footer .gefoerdert {
        margin-right: 12px;
    }

    footer div:has( img ) {
        margin-right: 20px;
    }
}

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