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

    --colorBlau: rgb(0, 42, 86);

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

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

    --btnBackColor: #004F80;
    --btnBackHoverColor: #004F80;
    --btnTextColor: #fff;
    --btnTextHoverColor: #fff;

    --fontSize: 16px;

    --h1Size: 26px;
	--h1LineHeight: 40px;
    --h1Color: var(--colorBlau);
    --h1BackColor: transparent;

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

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

    --globPadding: 5%;
}

/** 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 **/
#wrapper {
    margin: 0 auto;
    max-width: 900px;
    font-family: var(--fontFamily);
    border: 1px solid var(--borderColor);
    line-height: 25.6px;;
}

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

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

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);
    padding: var(--globPadding) 0;
    padding-bottom: 0;
    text-align: center;
}
h2 {
    color: var(--h2Color);
    background-color: var(--h2BackColor);
    font-size: var(--h2Size);
	line-height: var(--h2LineHeight);margin-top: 34px;
}
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 div {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--globPadding);
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 2px;
}

#wortMarke {
    font-size: 13px;
    line-height: 17px;
    margin-top: 11px;
    padding-right: 12px;
    color: var(--colorBlau);
}

header div #logoPEI {
    width: 300px;
    height: 58px;
}

header #imgHeader {
    width: 100%;
}

header #copyright {
    position: absolute;
    display: block;
    top: 247px;
    right: -118px;
    min-height: fit-content;
    min-width: fit-content;
    transform: rotateZ(-90deg);
    z-index: 200;
    font-size: 9px;
    line-height: 11px;
    color: #fff;
}

header #bund {
    display: flex;
    align-items: flex;
    justify-content: flex-start;
    padding-top: 4px;
    padding-right: 0;
    padding-bottom: 0;
    max-width: 90%;
}

header #bund p {
    font-size: 8px;
    line-height: 10px;
    margin-top: 0;
    padding-top: 0;
}

header #sublogo {
    width: 25px;
    height: 25px;
    margin-right: 5px;
    margin-top: -2px;
}

main {
    padding: var(--globPadding);
    padding-top: 32px;
}

#modalities ul {
    list-style: none;
}

#modalities ul li {
    display: inline-block;
    width: 49.5%;
    padding-left: 12px;
    padding-right: 12px;
}

#modalities ul li::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 2px;
    left: -20px;
    background-color: #020e25;
}

.btn {
    display: inline-block;
    background-color: var(--btnBackColor);
    color: var(--btnTextColor);
    padding: 8px 16px;
    margin-top: 14px;
    margin-bottom: 34px;
}

#video iframe {
    margin-top: 36px;
    width: 100%;
    height: 400px;
}

@media screen and (max-width: 890px) {
    header #copyright {
        transform: rotateZ(0);
        top: 82.5%;
        right: 10px;
        /*color: #020e25;*/
    }

    header #copyright {
       /*
        margin-top: 50px;
        */
    }
}
/*
@media screen and (max-width: 890px) {
     header #copyright {
        margin-top: 20px;
    }
}
*/
@media screen and (max-width: 600px) {
    header div {
        flex-direction: column;
    }

    #modalities ul li {
        padding-right: 0;
        width: 100%;
    }

    header #wortMarke {
        margin-bottom: 24px;
    }

    header #copyright {
        /*margin-top: -10px;*/
        font-size: 8px;
    }

    header #bund {
        margin-top: 0px;
        display: block;
        justify-content: space-between;
        width: 100%;
        max-width: 100%;
        font-size: 6px;
    }

    header #bund svg {
         float: left;
    }
}

@media screen and (max-width: 500px) {
     header #copyright {
        /*margin-top: 20px;*/
         top: 80%;
    }
}

@media screen and (max-width: 400px) {
     header #copyright {
        top: 78%;
    }
}