/** globale Definitionen **/
:root {
    --fontFamily: SourceSans3, sans-serif;

    --zoneMultiplikator: 1.4;
    --aSize: 31; /*31  */
    --zoneSize: calc( var(--aSize) * var(--zoneMultiplikator) );
    --aSizePx: 31px;
    --zoneSizePx: calc( var(--aSizePx) * var(--zoneMultiplikator) );
   /*--zoneSizeText: min( var(--zoneSizePx), calc( 31vw / 900 * ( 300 - 2 * var( --aSize ) * var(--zoneMultiplikator) ) ) );*/
    --zoneSizeText: min( var(--zoneSizePx), calc( 31vw / 900 * ( 300 - 2 * var( --aSize ) * var(--zoneMultiplikator) ) ) );

    --blue: #19345e;

    /* --textColor: #53565A; */
    --textColor: #000;
    --borderColor: #000;
    --bulletColor: #0057b8;
    --h1Color: #53565A;
    --h1BackColor: transparent;
    --h2Color: #53565A;
    --h2BackColor: transparent;
    --h3Color: var( --bulletColor );

    --aColor: var( --bulletColor );
    --aHoverColor: var( --bulletColor );
    --btnBackColor: var( --bulletColor );
    --btnBackHoverColor: var( --bulletColor );
    --btnTextColor: #fff;
    --btnTextHoverColor: #fff;

    --sideColor: #e5eef8;

    font-size: 17px;
    line-height: 23px; /* 24px */
    color: var(--textColor);
    font-weight: 400;
}

/* #images,
#logo div,
section,
#logo img {
    outline: solid 1px green;
} */

/** Schriften **/
@font-face {
    font-display: swap;
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/source-sans-3-v15-latin-regular.woff2) format("woff2"),url(../fonts/source-sans-3-v15-latin-regular.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/source-sans-3-v15-latin-500.woff2) format("woff2"),url(../fonts/source-sans-3-v15-latin-500.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 600;
    src: url(../fonts/source-sans-3-v15-latin-600.woff2) format("woff2"),url(../fonts/source-sans-3-v15-latin-600.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/source-sans-3-v15-latin-700.woff2) format("woff2"),url(../fonts/source-sans-3-v15-latin-700.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: "icomoon";
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/icomoon.ttf) format("truetype")
}

* {
    padding: 0;
    margin: 0;
    font-family: "Source Sans 3";
}

a {
    font-weight: bold;
    text-decoration: none;
    color: #000;
}
a:hover {
    text-decoration: underline;
}

b, strong {
    font-weight: 700;
}

a.btn {
    background-color: var( --blue );
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    margin: 0 0 var( --zoneSizeText ) 0;
    font-weight: 500;
    display: inline-block;
}
a.btn:hover {
    text-decoration: none;
}
p:has( a.btn) {
    margin-bottom: 0;
}

ul, ol {
    padding-left: 20px;
}

p {
    margin-bottom: calc( var(--aSizePx) / 3 );
}

html,
body,
#wrapper {
    overflow-x: hidden;
    background-color: #fff;
    /* background-image: url('../Autobahn-RGB-900px-4.png'); */
    /* background-repeat: no-repeat; */
}
#wrapper {
    border: solid 1px #666;
    max-width: 900px;
    margin: auto;
}

/** header **/
#logo {
    display: grid;
    /* grid-template-columns: 58.7% 41.3%; */
    grid-template-columns: 99.75%;
    justify-items: end;
}
#logo div {
    /* grid-column-start: 2; */
    /* grid-column-end: 3; */
    padding: var( --zoneSizeText );
    margin-bottom: var( --zoneSizeText );
    min-width: 248px;
    max-width: 248px;
    width: 60%;
}
#logo a > span {
    width: 100%;
    display: blocK;
    display: grid;
    align-items: center;
    justify-items: center;
}
#images {
    padding: 0 var( --zoneSizeText );
}

#imgHeader img {
    max-width: 100%;
}

h1,
#intro h2 {
    font-size: calc( var(--aSizePx) * 1.5 );
    line-height: calc( var(--aSizePx) * 1.75 );
    font-weight: 700;
}

#offer h2 {
    font-size: 22px;
}

#intro h1 {
    margin-bottom: 24px;
     font-size: calc( var(--aSizePx) * 1 );
    line-height: calc( var(--aSizePx) * 1.25 );
}



h2, h3 {
    font-size: 20px;
    line-height: calc( var(--aSizePx) * 1.25 * 1.2);
}

/** content **/
main {
    padding: var( --zoneSizeText );
    padding-bottom: 0;
}
header > section {
    margin: var( --zoneSizeText );
    margin-bottom: 24.85px;
    margin-top: 0;
}
main > section {
    margin-bottom: var( --zoneSizeText );
}
#modalities ul {
    padding-left: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    row-gap: 15px;
}
#modalities b,
#modalities strong {
    display: block;
    width: 123vi
}
#modalities span {
    display: block;
}

main p, main li {
    line-height: 28px;
}

li {
    padding: 5px 0;
}
.icon-arrow-right:after {
    font-family: icomoon !important;
    /* speak: never; */
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e987";
    margin-left: 8px;
    margin-top: 1px;
    float: right;
}
#offer ul {
    padding-left: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 32% 32% 32%;
    column-gap: 2%;
    row-gap: 15px;
    padding: 10px 0 0;
}
#offer li {
    font-size: 18px;
    background-color: #d1d6df;
    padding: 20px;
    border-radius: 20px;
    color: var( --blue );
    position: relative;
}
#offer li p {
    font-size: 18px;
    margin: 10px 0 20px 0;
}
#offer li span:not([data-mce-bogus]) {
    content: ' ';
    display: block;
    height: 50px;
    width: 80px;
    /* outline: solid 1px red; */
    background-image: url(../img/fairness.svg);
    background-size: contain;
    float: right;
    background-repeat: no-repeat;
    background-position: right 0;
}
#offer li strong {
    display: block;
    clear: both;
    padding-top: 20px;
}

#offer li.fairness span:not([data-mce-bogus]) {
    background-image: url(../img/fairness.svg);
}
#offer li.familie span:not([data-mce-bogus]) {
    background-image: url(../img/freizeit.svg);
}
#offer li.mobilitaet span:not([data-mce-bogus]) {
    background-image: url(../img/mobilitaet.svg);
}
#offer li.finanzen span:not([data-mce-bogus]) {
    background-image: url(../img/lohnenswert.svg);
}
#offer li.gesundheit span:not([data-mce-bogus]) {
    background-image: url(../img/gesundheit.svg);
}
#offer li.fuehrerschein span:not([data-mce-bogus]) {
    background-image: url(../img/fuehrerschein.svg);
}
#offer li.gesundheitsfoerderung span:not([data-mce-bogus]) {
    background-image: url(../img/gesundheitsfoerderung.svg);
}
#offer li.psa span:not([data-mce-bogus]) {
    background-image: url(../img/psa.svg);
}
#offer li.rabatte span:not([data-mce-bogus]) {
    background-image: url(../img/rabatte.svg);
}
#offer li.tarifvertrag span:not([data-mce-bogus]) {
    background-image: url(../img/tarifvertrag.svg);
}
#offer li.vwl span:not([data-mce-bogus]) {
    background-image: url(../img/vwl.svg);
}
#offer li.gehalt span:not([data-mce-bogus]) {
    background-image: url(../img/gehalt.svg);
}

footer {
    background-image: url( ../img/footer.jpg );
    background-size: cover;
    aspect-ratio: 1800 / 240;
    border-top: solid 8px #f7995f;
    text-align: right;
}
footer,
footer a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 20px;
    display: block;}
footer a {
    margin-top: calc( var( --zoneSizeText ) / 2 );
    margin-right: var( --zoneSizeText );
}
#social {
    display: inline-block;
    max-width: 160px;
    margin-top: 10px;
    margin-right: var( --zoneSizeText );
    margin-bottom: calc( var( --zoneSizeText ) / 2 );
}
#social a {
    display: inline-block;
    width: 14.5%;
    margin: 0;
    margin-left: 4%;
}
#social img {
    width: 100%;
}
#social a:first-of-type {
    margin-left: 0;
}

@media screen and ( max-width: 750px ) {
    #offer ul {
        grid-template-columns: 49% 49%;
    }
}
@media screen and ( max-width: 650px ) {
    #modalities ul {
        grid-template-columns: 49% 49%;
        row-gap: 0;
    }
    h1,
    #intro h2,
    #offer h2 {
        font-size: calc( var(--aSizePx) * 1.25 );
        line-height: calc( var(--aSizePx) * 1.5 );
    }
}
@media screen and ( max-width: 500px ) {
    #wrapper {
        border: none;
    }
    #offer ul {
        grid-template-columns: 100%;
    }
}
@media screen and ( max-width: 400px ) {
    #modalities ul {
        grid-template-columns: 100%;
        row-gap: 0;
    }
    #modalities li b,
    #modalities li strong,
    #modalities li span {
        display: inline-block;
        width: 51%;
        vertical-align: top;
    }
    #modalities li span {
        width: 47%;
        margin: 0;
    }
    #modalities li {
        padding: 0;
    }
    h1,
    #intro h2,
    #offer h2 {
        font-size: calc( var(--aSizePx) * 1.0 );
        line-height: calc( var(--aSizePx) * 1.25 );
    }
}

@media print {
    @page {
        size: 1280px 1810px;
        margin: 15mm 30mm 25mm 30mm;
    }
    footer {
        margin-top: var( --zoneSizeText );;
    }
}