/** globale Definitionen **/
:root {
    --fontFamily: "FrutigerRoman", Arial, Verdana, Helvetica, sans-serif;

    --textColor: #000;
    --borderColor: #000;
    --bulletColor: #000;

    --aColor: #00f;
    --aHoverColor: #00f;

    --btnBackColor: #00f;
    --btnBackHoverColor: #00f;
    --btnTextColor: #fff;
    --btnTextHoverColor: #fff;

    --fontSize: 13px;
    --lineHight: 16px;

    --h1Size: 36px;
	--h1LineHeight: 46px;
    --h1Color: var(--black);
    --h1BackColor: transparent;

    --h2Size: 20px;
	--h2LineHeight: 40px;
    --h2Color: var(--blue);
    --h2BackColor: transparent;

    --h3Size: 16px;
	--h3LineHeight: 40px;
    --h3Color: var(--black);
    --h3BackColor: transparent;
}

/** Schriften **/
@font-face {
    font-family: "FrutigerBold";
    src: url("../../fonts/bold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "FrutigerLight";
    src: url("../../fonts/light.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "FrutigerRoman";
    src: url("../../fonts/roman.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap
}

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

html,
body {
    background-color: #fff;
}

p {
    padding: 0;
    padding-bottom: 10px;
}

ul,
ol {
    padding: 5px 0 5px 25px;
    padding-top: 0;
}

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

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

a[href^="tel:"] {
    white-space: nowrap;
}
a {
    color: var(--aColor);
    text-decoration: none;
}
a:hover {
    color: var(--aHoverColor);
}

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

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

h1 {
    font-family: "FrutigerLight";
    color: var(--h1Color);
    background-color: var(--h1BackColor);
    font-size: var(--h1Size);
	line-height: var(--h1LineHeight);
}

h2, h3 {
    font-family: "FrutigerBold";
    font-size: var(--fontSize);
	line-height: var(--lineHight);
    margin-top: 10px;
}

p, li, span, td {
    font-family: "FrutigerLight";
    font-size: var(--fontSize);
    line-height: var(--lineHight);
}

strong, a {
    font-family: "FrutigerBold";
    font-size: var(--fontSize);
    line-height: var(--lineHight);
}

.btn {
    background-color: var(--btnBackColor);
    color: var(--btnTextColor);
}

.btn:hover {
    background-color: var(--btnBackHoverColor);
    color: var(--btnTextHoverColor);
}

.noWrap {
    white-space: nowrap;
}

header {
    overflow: hidden;
    aspect-ratio: 4.5 / 2;
}

header img {
    width: 100%;
    margin-top: -25%;
    overflow: hidden;
}

#claim {
    z-index: 200;
    position: absolute;
    top: 35px;
    width: 100%;
    font-size: 28px;
    color: #fff;
    font-family: "FrutigerRoman";
    left: 36%;
}

#claim span {
    margin-top: 10px;
    display: block;
    font-size: 14px;
}

.copyright {
    z-index: 500;
    position: absolute;
    top: 130px;
    left: -40px;
    transform: rotate(-90deg);
    font-size: 10px;
    color: #fff;
    font-family: "FrutigerLight";
}

.mobile {
    display: none;
}

.desktop {
    display: block;
}

a {
    font-family: "FrutigerBold";
    text-decoration: none;
    color: #000;
}

a:hover {
    color: #000;
}

a[href^="tel:"] {
	white-space: nowrap;
    font-family: "FrutigerLight";
    font-weight: normal;
}

main {
    margin-top: -83px;
    background: rgba(147,212,236,1);
    padding-bottom: 80px;
}

section {
    margin: 0 9%;
}

#title {
    margin-top: 80px;
}

#modalities {
    border-bottom: 1px solid #000;
    margin-top: 16px;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

#modalities table td:first-child {
    vertical-align: top;
    font-family: "FrutigerBold";
    font-weight: bold;
    padding-right: 10px;
    white-space: nowrap;
}

#modalities table td:last-child {
    vertical-align: top;
}

#logoDlrProjektträger, #logoDlr {
    position: absolute;
    right: 9%;
    bottom: 50px;
}

#logoDlr svg {
    width: 120px;
}

#logoDlrProjektträger svg {
    width: 180px;
}


@media screen and ( max-width: 650px ) {
    main {
        padding-bottom: 160px;
    }

    .copyright {
        left: -50px;   
    }
}

@media screen and ( max-width: 600px ) {
    .desktop {
        display: none;
    }
    
    .mobile {
        display: block;
    }

    .copyright {
        top: auto;
        color: #000;
        left: -110px;
        bottom: 93px;
    }
}

@media screen and ( max-width: 550px ) {
    #claim {
        top: 155px;
        left: 28%;
    }

    .copyright {
        left: -108px;
        bottom: 93px;
    }

    #modalities table td:first-child {
        white-space: normal;
    }
}

@media screen and ( max-width: 510px ) {
    #claim {
        top: 140px;
        left: 26%;
        font-size: 22px;
    }
}

@media screen and ( max-width: 480px ) {
    #claim {
        top: 140px;
        left: 26%;
        font-size: 22px;
    }

    .copyright {
        left: -106px;
        bottom: 93px;
    }
}

@media screen and ( max-width: 430px ) {
    #claim {
        top: 115px;
        left: 26%;
        font-size: 22px;
    }

    .copyright {
        left: -104px;
        bottom: 90px;
    }
}

@media screen and ( max-width: 360px ) {
    #claim {
        top: 105px;
        left: 20%;
        font-size: 22px;
    }

    .copyright {
        left: -101px;
        bottom: 93px;
    }
}

@media screen and ( max-width: 320px ) {
    #claim {
        top: 80px;
        left: 20%;
        font-size: 22px;
    }

    .copyright {
        left: -100px;
        bottom: 91px;
    }
}
/*
@media print {
    main {
        background-color: #fff;
    }
}
    */