@charset "utf-8";
/* ubuntu-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/ubuntu-v20-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* prompt-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/prompt-v10-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* prompt-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/prompt-v10-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* prompt-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/prompt-v10-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ubuntu-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ubuntu-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ubuntu-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/ubuntu-v20-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ubuntu-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/ubuntu-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ubuntu-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/ubuntu-v20-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/**** Standard ****/
body {margin: 0;}
h1 {font-size: 40px; line-height: 45px; font-family: 'Prompt'; margin-bottom: 15px; margin-top: 0;color:#000000;font-weight:500}
h2 {font-size: 31px; line-height: 36px; font-family: 'Prompt'; margin-top: 0; margin-bottom: 15px;color:#000000;font-weight:500}
h3 {font-family: 'Prompt';color:#000000;line-height:30px;font-size:23px;text-transform:uppercase;font-weight:500;margin-bottom: 10px;margin-top:40px}
p {font-size: 20px; font-family: 'Ubuntu'; font-weight: 300; color: #000000; line-height: 30px;margin-top:20px; margin-bottom:20px}
ul li {font-size: 20px; font-family: 'Ubuntu'; font-weight: 300;line-height: 30px;color:#000000;padding-bottom: 6px;}
ol li {font-size: 20px; font-family: 'Ubuntu'; font-weight: 300;line-height: 30px;color:#000000;padding-bottom:10px}

/**** Links ****/
.link_blue {color:#004F9F;text-decoration:none}
.link_blue:hover {color:#004F9F;text-decoration:underline}
.link_blue:focus-within {color:#004F9F;text-decoration:underline;outline:none}
.link_weiss {color:#ffffff;text-decoration:none}
.link_weiss:hover {text-decoration:underline}
.link_weiss:focus-within {text-decoration:underline;outline:none}
.link_lightblue {color:#ffffff;text-decoration:none}
.link_lightblue:hover {color:#21A2E6;text-decoration:none}
.link_lightblue:focus-within {color:#21A2E6;outline:none}

/**** Header ****/
#headerwrapper{background-color: #fff; width: 100%; position: fixed; box-shadow: 0 0 15px #00000029; height: 90px;z-index:100}
#header{width: 95%; margin: 0 auto;height: 90px;}
#headerlogo img {width: 610px;height:auto;padding-top: 26px;}
#headerlogo {float: left;}
#headerlogomob {display:none}
#headerlogomob img {width: 100%;height:auto;padding-top: 20px;}

/**** Navi ****/
#navi {position: relative;padding-top: 4px;float:right}
#navi ul {overflow: hidden;float: right;}
#navi ul li {display: block; float: left; padding: 13px 0 0px 18px;margin-left: 0;font-family: 'Prompt';}
#nav ul li:last-child {padding-right: 0;}
#navi ul li a {font-family: 'Prompt'; font-size: 20px; color: #000; text-decoration: none;padding-left:0;}
#navi ul li a:hover {color: #004F9F;}
#navi ul li a:focus-within {color: #004F9F;outline:none}
#navi ul li a.active {color: #004F9F;}
#navi ul li ul li {width:350px;margin-left:0}
#navi ul>li>ul {display: none; background: #004F9F;margin-top: 30px}
#navi ul>li:hover>ul {display: block; width: 350px; height: auto; position: absolute; overflow: visible; padding: 0;}
#navi ul>li:focus-within>ul {display: block; width: 350px; height: auto; position: absolute; overflow: visible; padding: 0;outline:none}
#navi ul>li>ul>li {float: none;padding:15px 0 15px 0}
#navi ul>li>ul>li:hover {background: #a0cfa7;}
#navi ul>li>ul>li:focus-within {background: #a0cfa7;outline:none}
#navi ul>li>ul>li>a {color: #fff; padding-left: 20px;}
#navi ul>li>ul>li>a:hover {color: #ffffff;}
#navi ul>li>ul>li>a:focus-within {color: #ffffff;outline:none}
#navi ul>li>ul>li>ul {display: none !important; background: #a0cfa7;}
#navi ul>li>ul>li:hover>ul {display: block !important; width: 100%; height: auto;  margin-left: 100%; background: #a0cfa7; margin-top: -13%;}
#navi ul>li>ul>li:focus-within>ul {display: block !important; width: 100%; height: auto;  margin-left: 100%; background: #a0cfa7; margin-top: -13%;outline:none}
#navi ul>li>ul>li a.active{color: #ffffff;}
#navi ul>li>ul>li.active {background: #a0cfa7;}
#navi ul>li>ul>li>ul>li:hover {background: #004F9F;}
#navi ul>li>ul>li>ul>li:focus-within {background: #004F9F;outline:none}
.slicknav_menu {display: none;}

.button_anleitung {padding:20px 30px 20px 30px;background: linear-gradient(90deg, rgba(33,162,230,1) 0%, rgba(0,79,159,1) 100%);border-radius: 5px;color:#ffffff;text-decoration:none;font-weight:500}

/**** Headerimage und Headertext ****/
#headerimagewrapper {background: rgb(33,162,230);background: linear-gradient(90deg, rgba(33,162,230,1) 0%, rgba(0,79,159,1) 100%);padding-top: 160px;z-index: 90;padding-bottom:50px;overflow: hidden;}
#headerimage {margin: 0 auto;height:auto;width:70%;padding: 0;position: relative}
#headerimage p {color:#ffffff;text-align:right;margin-right:20px;margin-top:0; margin-bottom:20px;}
#headerimage h1 {color:#ffffff;text-align:right;margin-right:20px;}
#headerimage img {width:560px;height: auto;margin-top: -20px;}

/**** DCE-Start ****/
.start_text {width:48%;height:auto;float:left;border-right:2px solid #fff;}
.start_bild {width:48%;height:auto;float:right}

/**** Content ****/
#contentwrapper{width: 100%;height:auto}
.content {width: 100%;margin: 0 auto;}

/**** DCE-rund ****/
#bildtextwrapper {width: 70%;height:auto;margin: 0 auto;display: flex;}
.bildrund {width:45%;height:auto;float:left;margin-bottom: 30px; margin-right: 3%;}
.bildrund img {width:500px; height:auto;float:right;margin-top:-40px;z-index: 95;position: relative;}
.textrechts {width:52%;height:auto;float:right;padding-top: 40px;}

/**** Gridelement Überschrift ****/
.ueberschrift {height:auto;margin:0 auto}
.ueberschrift p {font-size: 40px!important; line-height: 45px!important; font-family: 'Prompt'; margin-bottom: 20px!important; margin-top: 0!important;color:#ffffff;font-weight:500;text-align:center!important}

/**** Gridelement Grau ****/
#grauwrapper {background-color:#ECEBE8;width:100%;height:auto;overflow:hidden;padding: 100px 0 85px 0}
.grau {width:70%;height:auto;margin:0 auto;}
.grau p {font-style:italic;font-size:22px;line-height:32px;padding: 0 0 0 10px;margin: 0 0 0 30px;border-left: 2px solid; color:#000000;font-weight:300}
.grau img {}    

/**** GridelementWeiss ****/
#weisswrapper {background-color:#ffffff;width:100%;height:auto;overflow:hidden;padding: 60px 0 60px 0}
.weiss {width:70%;height:auto;margin:0 auto;}
.weiss h2 {font-size: 40px; line-height: 45px; font-family: 'Prompt'; margin-top: 0; margin-bottom: 15px;color:#000000;font-weight:500;text-align:center;margin-top: 20px;}
.weiss p {text-align: center;}

/**** GridelementWeiss Unterseite ****/
#weissunterwrapper {background-color:#ffffff;width:100%;height:auto;overflow:hidden;padding: 60px 0 60px 0}
.weissunter {width:70%;height:auto;margin:0 auto;}
.weissunter h2 {text-align:left;padding-top:10px;color:#004F9F}
.weissunter p {}
.weissunter img {}

/**** Gridelement Teinahme ****/
#teilnahmewrapperhellblau {display: flex;background-color:#21A2E6;height:auto;overflow:hidden;padding: 40px 20px 40px 20px;margin:0 auto;margin-bottom:20px;margin-top:20px;border-radius:5px}
#teilnahmewrapperhellblau:hover {background-color:#1995D6;cursor: pointer;}
#teilnahmewrapperhellblau p {font-size:40px;line-height:48px;padding-top:10px}
.textteilnahme h3 {font-size:33px;line-height:48px;padding-top:10px;margin-top: 0;text-transform: none;font-weight:400;color:#ffffff}
.textteilnahme h3:hover {text-decoration:underline;color:#ffffff}
.textteilnahme h3:focus-within {text-decoration:underline;outline:none;color:#ffffff}
#teilnahmewrapper {display: flex;background-color:#004F9F;height:auto;overflow:hidden;padding: 40px 20px 40px 20px;margin:0 auto;margin-bottom:20px;margin-top:20px;border-radius:5px}
#teilnahmewrapper:hover {background-color:#004790;cursor:pointer;}
#teilnahmewrapper:focus-within {background-color:#004790;cursor:pointer;outline:none;}
.icon {width:10%;height:auto;}
.textteilnahme {width:80%;height:auto;}
.textteilnahme p {color:#ffffff;padding: 0;margin:0 15px 0 15px;text-align: left;}
.edit {width:10%;height:auto;}

/**** Gridelement Projketpartner ****/
#partnerwrapper {display: flex;width:100%;height:auto;justify-content: space-between;}

.partner{width: 20%;height:auto;background-color:#ffffff;border-radius:5px;align-content: center;padding:50px 20px 40px 20px;margin-bottom: 20px;}
.partner img {}

/**** Footer ****/
#footerwrapper {width:100%;height:auto;background-color:#000000;padding:50px 0 50px 0}
.footer {width:70%;height:auto;margin:0 auto;display: flex;justify-content: space-between;}
.footerinhalt {width: 30%;height:auto;} 
.footer p {color:#ffffff;line-height:36px;font-size:18px}
.footer h3 {color:#ffffff;line-height:30px;font-size:23px;text-transform:uppercase;font-weight:500;margin-bottom: 10px;margin-top: 0;}
.footer  ul {padding-left: 0;list-style-type: none;}
.footer ul li {color:#ffffff;line-height:28px;font-size:18px;padding-bottom: 10px;}
.footer img {width:100%;height:auto;margin-top: 5px;}

/**** Mobile ****/
@media only screen and (max-width: 1480px){
 #headerimage img {padding-top: 30px;} 

.partner {width: 20%;padding:50px 20px 40px 20px;margin-bottom: 10px;}
.partner img {width: 180px;height:auto}
}

@media only screen and (max-width: 1300px){
#headerimage img {width:100%;padding-top: 0;}
#headerimage p {font-size:18px;line-height:28px}
#headerimage {width:90%;}
#bildtextwrapper {width: 90%;}
.textrechts p {font-size:18px;line-height:28px}
.bildrund img {width: 400px;}
.grau {width: 90%;}
.weiss {width: 90%;}
.weissunter {width: 90%;}
.textteilnahme p {font-size:18px;line-height:28px}
.weiss p {font-size:18px;line-height:28px}
#teilnahmewrapperhellblau p {font-size: 30px;line-height: 40px;padding-top: 13px;}
.footer {width: 90%;}
}

@media only screen and (max-width: 1167px){
#headerimage img {padding-top: 40px;}
}

@media only screen and (max-width: 1024px){
.ueberschrift p {margin-bottom:0!important;padding-top:25px!important}
 #headerimage img {padding-top: 60px;}
.js .slicknav_menu {display: block;}
.js #menu {display: none;}
.partner {width: 16%;height:auto}
.partner img {width: 140px;height:auto}
}

@media only screen and (max-width: 950px){
.partner {width: 13%;height:auto}
}

@media only screen and (max-width: 800px){
  .textteilnahme h3 {font-size: 24px;line-height:30px}
.ueberschrift p {margin-bottom:0!important;padding-top:25px!important}
.footer img {margin-top:0;margin-bottom:20px}
#weissunterwrapper {padding: 40px 0 40px 0}
#weisswrapper {padding: 40px 0 40px 0}
#headerimagewrapper {padding-top: 170px;}
.start_text {width: 100%;float:left;border-right:none;order:2}
.start_bild {width: 100%;float:left;order:1;margin-bottom: 30px;}
#headerimage img {width: 100%;height:auto;padding-top: 40px;}
.bildrund {width: 100%;margin-right: 0;}
.textrechts {width: 100%;float:left;padding-top: 0;}
#bildtextwrapper {display:block}
#teilnahmewrapper {display: block;padding: 30px 20px 30px 20px;}
#teilnahmewrapperhellblau {display: block;padding: 30px 20px 30px 20px;}
.icon {width: 100%;}
.textteilnahme {width: 100%;float:left}
.edit {width: 100%;float:left}
.textteilnahme p {text-align:center;padding: 20px 0 20px 0;}
#partnerwrapper {display: block;}
.partner {width:90%;margin: 0 auto;margin-bottom:20px;height: 180px;}
#grauwrapper {padding: 40px 0 40px 0;}
#weisswrapper {padding: 40px 0 40px 0;}
.footerinhalt {width: 100%;margin-bottom:20px;margin-top:20px;display: flex;justify-content: center;}
.footer{display:block}
#headerimage p {text-align:center;margin-right: 0;}
#headerimage h1 {text-align: center;margin-right: 0;}
#headerimage {display: flex;flex-flow: column;}
.textrechts h2 {text-align:center}
.grau img {width: 72px;height:auto}
.grau p {margin: 0 0 0 7px;font-size: 20px;line-height: 30px;padding: 0 0 0 10px}
.weiss img {}
.partner img {width: 280px;height:auto}
.footer ul li {text-align:center}
.footer h3 {text-align:center}
.bildrund img {width: 100%;}
#teilnahmewrapper img {width: 60px;height:auto}  
}

@media only screen and (max-width: 700px){
#headerlogo img {width: 520px;}
}

@media only screen and (max-width:560px){ 
.partner img {width:100%;height:auto}
#headerimagewrapper {padding-top: 230px;}
#headerlogo {display:none}
#headerlogomob {display:block}
#headerwrapper {height: 160px;}
#header {height: 160px;width: 85%;margin: 0;margin-left: 20px;}
}
  
@media only screen and (max-width:480px){ 
#headerimagewrapper {padding-top: 200px;}
#headerwrapper {height: 140px;position:absolute}
#header {height: 140px;}
}

@media only screen and (max-width:420px){ 
#headerimagewrapper {padding-top: 195px;}
#headerwrapper {height: 130px;}
#header {height: 130px;}
}

@media only screen and (max-width:375px){ 
#headerwrapper {height: 120px;}
#header {height: 120px;}
}

@media only screen and (max-width:340px){ 
#headerimagewrapper {padding-top: 170px;}
#headerwrapper {height: 110px;}
#header {height: 110px;}
}