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

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

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

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

    --fontSize: 16px;

    --h1Size: 20px;
	--h1LineHeight: 34px;
    --h1Color: #006c66;
    --h1BackColor: transparent;

    --h2Size: 18px;
	--h2LineHeight: 36px;
    --h2Color: #006c66;
    --h2BackColor: transparent;

    --h3Size: 16px;
	--h3LineHeight: 40px;
    --h3Color: #006c66;
    --h3BackColor: transparent;
}

/** Schriften **/
@font-face {
	font-family: "MerriweatherSerif";
	src: url("https://corporate.jobrocks.de/MPG/fonts/merriweather-v22-latin-ext_latin-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: "Roboto";
	src: url("https://corporate.jobrocks.de/MPG/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("https://corporate.jobrocks.de/MPG/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("https://corporate.jobrocks.de/MPG/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("https://corporate.jobrocks.de/MPG/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
}

@font-face {
	font-family: "mpg_iconsregular";
	src: url("https://corporate.jobrocks.de/MPG/fonts/mpg_icons-webfont.woff") format("woff");
	font-weight: 700;
	font-style: italic;
	font-display: swap
}


/** 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 **/
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 {
    color: rgb(70, 70, 70);
    line-height: 34px;
}

#title h1 {
    color: var(--h1Color);
    background-color: var(--h1BackColor);
    font-size: var(--h1Size);
	line-height: var(--h1LineHeight);
    text-transform: uppercase;
    background-color: #006c66;
    color: #fff;
    width: 55%;
    padding: 12px;
    top: -40px;
    left: 20px;
    z-index: 190;
    min-height: 70px;
    line-height: 34px;
}

h2 {
    color: var(--h2Color);
    background-color: var(--h2BackColor);
    font-size: var(--h2Size);
	line-height: var(--h2LineHeight);
    text-transform: uppercase;
    margin-bottom: 0px;
}

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

p, a, li {
    font-family: "Roboto";
    font-size: 14px;
    line-height: 20px;
}

strong {
	font-family: "RobotoBold";
	color: var(--textColorBold);
}

section p a,
section li a {
	text-decoration-color: rgb(0, 33, 31);
	text-underline-offset: -1.6px;
	text-underline-position: under;
	text-decoration-thickness: 1px;

	transition-delay: 0;
	transition-duration: 0.4s;
	transition-property: color;
	transition-timing-function: ease;
}

section p a:hover,
section li a:hover {
	text-decoration-thickness: 2px;
	text-decoration-style: solid;
	transition: color .25s ease;
}

#wrapper {
	margin: 0 auto;
	margin-bottom: 65px;
	max-width: 900px;
	overflow: hidden;

	border: 1px solid #cecece;

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

section {
    padding-bottom: 15px;
}

section h2:not(:first-child) {
    padding-top: 15px;
}
 
#boxGray {
    position: absolute;
    display: block;
    background-color: #eeeeee;;
    height: 55px;
    width: 86.6%;
    top: -3px;
    left: 100px;
}

#title {
    margin-bottom: 0px;
}

#imgHeader {
    width: 100%;
}

#logoMPIMET {
	display: block;
	position: absolute;
	top: 15px;
    right: -125px;
	z-index: 800;
}

#logoMPIMET  img {
    height: 90px;
}

#content {
    display: grid;
    grid-template-columns: 68% 30%;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

#left {
    padding: 2.5%;
    margin: 2.5%;
    margin-top: 0;
    margin-right: 0;
    background-color: #eeeeee;
}

#left #box {
    background-color: #eeeeee;
    padding: 2.5%;
}

#right {
    /*padding-top: 15px;*/
    margin-left: 15px;
    /*border:  solid 1px #eeeeee;*/
    text-align: justify;
}

#introduction {
    padding: 6.5%;
    border:  solid 1px #eeeeee;
}

#rightBottom {
   /* position: absolute; */
    bottom: 1.25%;
    padding: 6.5%;
    border:  solid 1px #eeeeee;
}

#contact {
    padding-top: 12px;
    border-bottom: solid 1px #eeeeee;
}

#deadline {
    padding-top: 12px;
    border-bottom: solid 1px #eeeeee;
}

#equality {
    padding-bottom: 12px;
    border-bottom: solid 1px #eeeeee;
}



#rangeLocation {
    margin-top: 15px;
    padding-top: 12px;
    text-align: left;
    border-bottom:  solid 1px #eeeeee;
}



#logos {
    margin-top: 30px;;
    display: flex;
    justify-content: space-between;
}

#logos img {
    height: 45px;
}

.noWrap {
    white-space: nowrap;
}

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

#title2 {
    margin-top: 6px;
}

#title2 ul li {
    font-size: 14px;
    font-weight: bold;
}

@media screen and (max-width: 850px ) {
    #logos img {
        height: 35px;
    }
}

@media screen and (max-width: 620px ) {
    #wrapper {
        margin-bottom: 20px;
    }

    #title {
        margin-bottom: 0;
    }

    #title h1 {
        width: 80%;
    }

    #content {
        grid-template-columns: 1fr;
    }

    #left, #right {
        width: 100%;
        margin: 0;
    }

    #right {
        padding: 2.5%;
    }

    #rightBottom {
        position: relative;
        bottom: auto;
        padding: 0;
        border: none;
    }

    #introduction {
        border: none;
        padding: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 20px;
        border-bottom:  solid 1px #eeeeee;
    }

    #logos img {
        height: 65px;
    }

    #logoMPIMET img {
        height: 65px;
        right: 40px;
    }
}

@media screen and (max-width: 550px ) {

    #wrapper {
        margin-bottom: 0;
    }

    #logoMPIMET { 
        top: 10px;
        right: -110px;
    }

    #logoMPIMET img {
        height: 55px;
    }

    section {
        padding-left: 15px;
        padding-right: 15px;
    }

    section#title {
        padding-left: 0;
        padding-right: 0;
    }
}

@media screen and (max-width: 450px ) {
    #logos img {
        height: 45px;
    }
}