/** globale Definitionen **/
:root {
    --fontFamily: "bundessansweb regular";

    --textColor: #000;
    --borderColor: #000;
    --bulletColor: #000;
    --h1Color: #000;
    --h1BackColor: transparent;
    --h2Color: #000;
    --h2BackColor: transparent;
    --h3Color: #000;
    --h3BackColor: transparent;
    --headerPath: "../img/Header_main.jpg";
    --aColor: #004b76;
    --aHoverColor: #c0003c;
    --btnBackColor: #004b76;
    --btnBackHoverColor: #c0003c;
    --btnTextColor: #fff;
    --btnTextHoverColor: #fff;

    --fontSize: 18px;
    --lineHeight: 26px;
    --h1Size: 28px;
    --h2Size: 24px;
    --h3Size: 20px;
    --h1LineHeight: 36px;
    --h2LineHeight: 30px;
    --h3LineHeight: 26px;
}

/** Schriften **/
@font-face {
    font-family: "bundessansweb regular";
    src: url("https://corporate.jobrocks.de/BMI/BDBOS/fonts/bundessansweb-regular-woff-data.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "bundessansweb bold";
    src: url("https://corporate.jobrocks.de/BMI/BDBOS/fonts/bundessansweb-bold-woff-data.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "bundessansweb italic";
    src: url("https://corporate.jobrocks.de/BMI/BDBOS/fonts/bundesserifweb-italic-woff-data.woff") format("woff");
    font-weight: bolder;
    font-style: italic;
    font-display: swap
}



/** Reset **/
* {
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
}

html,
body {
    background-color: #fdfdfd;
    font-size: var(--fontSize);
    line-height: var( --lineHeight );
}

p {
    padding: 5px 0;
}

ul,
ol {
    padding: 5px 0 0 25px;
    line-height: var( --lineHeight );
}

/** Standards **/
#wrapper {
    margin: auto;
    max-width: 900px;
    font-family: var(--fontFamily);
    border: solid 1px;
    padding: 0;
    overflow: hidden;
}

h2:empty,
div:empty,
p:empty,
section:empty {
    display: none;
}

main {
    padding: 10px 5%
}

a[href^="tel:"] {
    white-space: nowrap;
}

a {
    color: var(--aColor);
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: var(--aHoverColor);
    background: linear-gradient(90deg, #004b76 0%, #443162 30%, #a40b44 60%, #c0003c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
}

ul li::marker {
    color: var(--bulletColor);
}

ul li:last-child {
    padding-bottom: 0.7rem;
}

body {
    color: var(--textColor);
}


header {
    display: flex;
}

header img {
    width: 100%;
    padding: 0;
    margin-top: -10%;
}

h1 {
    color: var(--h1Color);
    background-color: var(--h1BackColor);
    font-size: var(--h1Size);
    line-height: var(--h1LineHeight);
    padding: 30px 0 10px;
}

h2 {
    color: var(--h2Color);
    background-color: var(--h2BackColor);
    font-size: var(--h2Size);
    line-height: var(--h2LineHeight);
}

h3 {
    color: var(--h3Color);
    background-color: var(--h3BackColor);
    font-size: var(--h3Size);
    line-height: var(--h3LineHeight);
}

p {
    margin: 5px 0;
}

section {
    padding-bottom: 30px;
}

section p + ul:last-of-type {
    padding-bottom: 0;
}

a.btn {
    background-color: var(--btnBackColor);
    color: var(--btnTextColor);
    padding: 10px 25px 15px;
    border-radius: 5px;
    display: inline-block;
    margin-top: 20px;
    margin-bottom: -50px;
    text-decoration: none;
}

a.btn:hover {
    background-color: var(--btnBackHoverColor);
    color: var(--btnTextHoverColor);
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial
}

.noWrap {
    white-space: nowrap;
}

#title {
    text-align: center;
}
#title div:first-of-type p:first-of-type {
    font-weight: bold;
    font-size: var(--h3Size);
}
#application div:first-of-type p:first-of-type {
    font-weight: bold;
}
#offer h2 {
    font-size: var(--h3Size);
}
main {
    z-index: 2;
}
footer {
    aspect-ratio: 16 / 8;
    margin-top: -30%;
    z-index: 1;
    overflow: hidden;
    background-image: url("background.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 80%;
}