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

    --blau: #003a79;
    --blau80: #33538d;
    --blau60: #6476a6;
    --blau45: #8093b4;
    --blau30: #b0b5d1;
    --blau15: #d6d8e7;
    --blau7: #ecedf4;

    --black: #000;
    --black80: #585858;
    --black60: #888888;
    --black45: #a8a8a8;
    --black30: #c7c7c7;
    --black15: #e4e4e4;

    --colBlau: #0059ad;

    --textColor: rgb(0, 60, 118);
    --borderColor: #000;

    --bulletColor: #000;

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

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

    --fontSize: 17px;

    --h1Size: 34px;
	--h1LineHeight: 45px;
    --h1Color: var(--textColor);
    --h1BackColor: transparent;

    --h2Size: 20px;
	--h2LineHeight: 22px;
    --h2Color: var(--textColor);
    --h2BackColor: transparent;

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

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

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

p {
    padding: 5px 0;
}

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

/** Standards **/
@font-face {
    font-family: "Inter";
    src: url(../fonts/Inter-Regular.woff2) format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

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

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

#wrapper {
    margin: auto;
    max-width: 900px;
    font-family: var(--fontFamily);
    border: 1px solid var(--colBlau);
    border-radius: 30px;
    border-bottom-left-radius: 0;
}

h2:empty,
h3.empty,
h4.empty,
h5.empty,
h6.empty,
div:empty,
p:empty,
ul.empty,
ol.empty,
section:empty {
    display: none;
}

p, li, strong, a {
    font-size: var(--fontSize);
    line-height: 26px;
}

a[href^="tel:"] {
    white-space: nowrap;
}
a {
    color: var(--aColor);
    text-decoration: underline;
}
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: var(--h1Size);
	line-height: var(--h1LineHeight);
    font-weight: normal;
    margin-top: 12px;

}
h2 {
    color: var(--h2Color);
    background-color: var(--h2BackColor);
    font-size: var(--h2Size);
	line-height: var(--h2LineHeight);
    padding-bottom: 8px;
}
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);
}

.noWrap {
    white-space: nowrap;
}

.noMg {
    margin-bottom: 0;
    padding-bottom: 0;
}

header {
    min-height: 50px;
}

#logoWrapper {
    margin-top: 55px;
    margin-right: 55px;
    margin-bottom: 55px;
    float: right;
}

#logo {
    width: 400px;
}

#imgHeader {
    width: 100%;
    clear: both;
}

section {
    margin-top: 16px;
    margin-left: 30px;
    margin-right: 30px;
}

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

#modalities ul {
    padding-left: 0;
    font-weight: bold;
}

#modalities ul li {
    display: inline-block;
    list-style-type: none;
    width: 18%;
    min-width: 154px;
    text-align: center;
    font-weight: normal;
    font-size: 15px;
    padding-bottom: 6px;
}

#modalities ul li strong {
    width: 100%;
    display: inline-block;
    color: #fff;
    background-color: var(--colBlau);
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 4px;
    font-weight: bold;
    font-size: 17px;
}

#modalities ul li {
    margin-left: .5%;
}
#modalities ul li:first-child {
    margin-left: 0
}

#application {
    margin: 30px 0;
    padding: 0 30px;
}

#application .btn {
    background-color: var(--colBlau);
    color: #fff;
    text-decoration: none;
    padding: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-top: 12px;
    margin-bottom: 12px;
    display: inline-block;
    width: 193px;
    border-radius: 9px;
    border-bottom-left-radius: 0;
    font-weight: bold;
}

#application .btn::after {
    width: 20px;
    content: "\2192";
    color: #fff;
    display: inline;
    padding-left: 12px;
}

main {
    margin-top: 0;
    padding: 25px;
}

footer {
    padding-bottom: 30px;
}

footer section {
    padding-top: 6px;
}

footer section span {
    display: inline-block;
    width: 24%;
    vertical-align: text-top;
}

footer section img {
    width: 120px;
}

@media screen and (max-width: 700px ) {
    main {
        padding: 12px;
    }

    #logo {
        width: 400px;
    }

    section {
        margin-top: 8px;
        margin-left: 15px;
        margin-right: 15px;
    }
}

@media screen and (max-width: 520px ) {
    #logoWrapper {
        margin-top: 35px;
        margin-left: 35px;
        margin-right: 0px;
        margin-bottom: 33px;
    }

    #logo {
        width: 83%;
    }
}

@media screen and (max-width: 420px ) {
    main {
        padding: 0px;
    }

    #logoWrapper {
        margin-top: 35px;
        margin-right: 0px;
        margin-bottom: 33px;
    }

    #logo {
       /* width: 300px;*/
    }

    ul li {
        min-width: 150px;
    }
}

@media screen and (max-width: 340px ) {
    #logo {
        width: 75%;
        width: 245px;
        margin-right: 35px;
    }

    #logoWrapper {
        margin-top: 35px;
        margin-bottom: 35px;
        margin-left: 0;
    }
}
/*
@media screen and (max-width: 380px ) {
    #logo {
        width: 260px;
    }
}
*/