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

    --colorRwthBlau: rgb(0, 84, 159);
    --colorRwthBlau75: rgb(64, 127, 183);
    --colorRwthBlau50: rgb(142, 186, 229);
    --colorRwthBlau25: rgb(199, 221, 242);
    --colorRwthBlau10: rgb(232, 241, 250);

    --colorSchwarz: rgb(0, 0, 0);
    --colorSchwarz75: rgb(100, 101, 103);
    --colorSchwarz50: rgb(156, 158, 159);
    --colorSchwarz25: rgb(207, 209, 209);
    --colorSchwarz10: rgb(236, 237, 237);

    --colorPetrol: rgb(0, 97, 101);
    --colorPetrol75: rgb(45, 121, 131);
    --colorPetrol50: rgb(125, 164, 167);
    --colorPetrol25: rgb(191, 208, 209);
    --colorPetrol10: rgb(230, 236, 236);

    --colorTürkis: rgb(0, 152, 161);
    --colorTürkis75: rgb(0, 177, 183);
    --colorTürkis50: rgb(137, 204, 207);
    --colorTürkis25: rgb(202, 231, 231);
    --colorTürkis10: rgb(235, 246, 246);

    --colorGrün: rgb(87, 171, 39);
    --colorGrün75: rgb(141, 192, 96);
    --colorGrün50: rgb(184, 214, 152);
    --colorGrün25: rgb(221, 237, 206);
    --colorGrün10: rgb(242, 247, 236);

    --colorMaigrün: rgb(189, 205, 0);
    --colorMaigrün75: rgb(255, 240, 85);
    --colorMaigrün50: rgb(255, 245, 155);
    --colorMaigrün25: rgb(255, 250, 209);
    --colorMaigrün10: rgb(255, 253, 238);

    --colorGelb: rgb(255, 237, 0);
    --colorGelb75: rgb(255, 240, 85);
    --colorGelb50: rgb(255, 245, 155);
    --colorGelb25: rgb(255, 250, 209);
    --colorGelb10: rgb(255, 253, 238);

    --colorRot: rgb(204, 7, 30);
    --colorRot75: rgb(216, 92, 65);
    --colorRot50: rgb(230, 150, 121);
    --colorRot25: rgb(243, 205, 187);
    --colorRot10: rgb(250, 235, 227);

    --colorMagenta: rgb(227, 0, 102);
    --colorMagenta75: rgb(233, 96, 136);
    --colorMagenta50: rgb(241, 158, 177);
    --colorMagenta25: rgb(240, 210, 218);
    --colorMaigenta10: rgb(253, 238, 240);

    --colorBordewaux: rgb(161, 16, 53);
    --colorBordewaux75: rgb(182, 82, 86);
    --colorBordewaux50: rgb(205, 139, 135);
    --colorBordewaux25: rgb(229, 192, 205);
    --colorBordewaux10: rgb(245, 232, 229);

    --colorViolett: rgb(97, 33, 88);
    --colorViolett75: rgb(131, 78, 117);
    --colorViolett50: rgb(168, 133, 158);
    --colorViolett25: rgb(210, 192, 205);
    --colorViolett10: rgb(237, 229, 234);

    --colorLila: rgb(122, 111, 172);
    --colorLila75: rgb(154, 145, 193);
    --colorLila50: rgb(188, 181, 215);
    --colorLila25: rgb(221, 218, 235);
    --colorLila10: rgb(242, 240, 247);

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

    --aColor: var(--colorRwthBlau);;
    --aHoverColor: var(--colorRwthBlau);;

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

    --fontSize: 16px;

    --h1Size: 24px;
	--h1LineHeight: 34px;
    --h1Color: var(--colorSchwarz);
    --h1BackColor: transparent;

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

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

@font-face {
	font-family: "Roboto";
	src: url("../fonts/roboto-v20-latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: "RobotoItalic";
	src: url("../fonts/roboto-v20-latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300italic.woff2") format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap
}

@font-face {
	font-family: "RobotoBold";
	src: url("../fonts/roboto-v20-latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: "RobotoBoldItalic";
	src: url("../fonts/roboto-v20-latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700italic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap
}

/** Reset **/
* {
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    font-family: Helvetica, Arial, Verdana sans-serif;
}

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

p {
    padding: 5px 0;
    padding-bottom: 15px;
}

ul,
ol {
    padding: 5px 0 17px 16px;
}

/** Standards **/
#wrapper {
    display: grid;
    grid-template-columns: 35.7% auto;
    grid-template-rows: auto 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;

    margin: auto;
    max-width: 902px;
    padding-top: 50px;

    border: 1px solid #cecece;

    overflow:hidden;
    font-family: var(--fontFamily);
}

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

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

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

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

h1 {
    color: var(--h1Color);
    background-color: var(--h1BackColor);
    font-size: 25px;
	line-height: 30px;
}

h1 small {
    display: block;
    line-height: 28px;
}

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

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

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

h1, h2, strong {
    font-family: Helvetica, Arial, Verdana sans-serif;
    font-weight: bold;;
}

h2 {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: -6px;;
}

#title h2 {
    margin-top: 8px;
    font-size: 22px;
    line-height: 30px;
}

#title small {
    display: block;
    margin-top: 2px;
    font-size: 25px;
    line-height: 30px;
    font-weight: normal;
}

#title div {
    border-bottom: solid 2px #000;
    padding-bottom: 18px;
}

p, li {
    font-size: 18px;
    line-height: 21.6px;
}

#contact h2 {
    font-family: Helvetica, Arial, Verdana sans-serif;
    font-weight: normal;
    margin-bottom: 14px;
}

section div h2 {
    margin-top: 7px;
}

#claim img { 
    width: 100%;
    margin-left: -21px;
}

#claimBottom {
    display: none;
    width: fit-content;
    margin-top: 0;
}

#claimBottom img {
    width: 59%;
    max-width: 250px;
    margin-left: 32px;
    margin-top: 50px;
    margin-bottom: 0;
}

#logoWrapper {
    display: flex;
    justify-content: end;
    padding-right: 32px;
}

#logoWrapper a  {
    display: block;
    width: 70.33%;
    max-width: 385px;
    margin-bottom: 41px;
}

#content { 
    margin-top: 2px;
    padding-bottom: 30px;
}

#content section {
    padding-left: 12px;
    padding-right: 32px;
}

#contactUs section {
    padding-right: 22px;
    padding-left: 32px;
    padding-bottom: 0;
    margin-top: 2px;
}

section {
    padding-bottom: 7px;
}

section#title {
    padding-bottom: 17px;
}

#equality,
#introduction {
/* padding-bottom: 12.5px;*/
    padding-bottom: 25px;
}

#application a,
#contact a {
    font-family: Helvetica, Arial, Verdana sans-serif;
    font-weight: bold;
}

.noWrap {
    white-space: nowrap;
}

.noMg {
    margin-bottom: 0;
}

#contactUs {
    /*margin-top: 50px;*/
}

#contactUs p {
    font-size: 17px;
    line-height: 20.4px;
}

#contactUs h2 {
    margin-top: 6px;
   /* margin-bottom: -8px;*/
}

#contact h2 {
    margin-top: 0px;
}

#equality h2 {
    margin-bottom: -8px;
}

@media screen and (max-width: 770px) {
    #wrapper {
        grid-template-columns: 1fr;
        border: none;
        padding-top: 0;
    }

    #claim {
        display: none;
    }

    #claimBottom {
        width: 100%;
        display: block;
    }

    #contactUs {
        grid-row: 4 / 4;
        margin-top: 0;
    }

    #content {
        grid-row: 4 / 3;
        padding-bottom: 16px;
        padding-left: 22px;
    }

    #logoWrapper {
        width: 100%;
        padding-top: 50px;
        padding-left: 32px;
        justify-content: flex-end;
    }

    #logoWrapper a {
        margin-bottom: 36px;
    }

    #introduction,
    #dgsvo {
        padding-bottom: 0;
    }

    #contactUs section {
        padding-right: 32px;
    }
}

@media screen and (max-width: 500px) {
    p, li {
        font-size: 16px;
        line-height: 21.6px;
    }

    #content section,
    #contactUs section {
        padding-left: 26px;
        padding-right: 26px;
    }

    #claimBottom img {
        margin-left: 26px;
    }
}

@media print {
    #wrapper {
        width: 100%;
    }
}