@charset "utf-8";
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}


/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-condensed-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v19-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* Material Icon Font */
@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
        url(../fonts/MaterialIcons-Regular.woff) format('woff'),
        url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}
form {margin-bottom: 20px;}
/**** 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 {width:200px;height:auto}
/***** General Styles *****/

*{outline:none; }
html,body {font-smoothing:antialiased;-moz-font-smoothing:antialiased;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body {margin:0;padding:0;font-family: 'Roboto'; font-size:20px; line-height:28px; color:#000000;font-weight:300}

h1{font-size: 42px; font-family: 'Roboto Condensed'; text-transform: uppercase;font-weight:300; padding-bottom:0;line-height: 50px;margin-bottom:10px;margin-top: 10px;}
h2{font-size: 30px; font-family: 'Roboto Condensed'; text-transform: uppercase; line-height: 40px;font-weight: 300;}
h3{font-size: 25px; color: #000000; line-height: 30px; font-weight: 500;}
h4{font-size: 22px; color: #8cc9ba; line-height: 22px; text-align: center; font-weight: 300;}
h5{text-align: left; font-size: 20px; line-height: 28px; color: #000000; margin-top: 0; font-weight: bold;}
p {}
p a{}
a{text-decoration: none; color: #8cc9ba; font-weight: 300;}
a:hover {text-decoration: underline}
hr {border-bottom: 1px solid #000000}
video {width: 100%;}

/***** Layout Styles *****/
#weiss .ce-border img, .ce-border iframe {border: 1px solid #000;}
#weiss div.csc-textpic .csc-textpic-imagewrap img {width: 100%;height: auto;}

#header{position: fixed; top: 0; background-color: rgba(255,255,255,1); z-index:100; width: 100%; margin: 0 auto; padding: 20px 0 15px 0; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .05), 0 3px 8px 0 rgba(0, 0, 0, 0.07), 0 0 4px 0 rgba(0, 0, 0, .05);}
.logo {padding-left: 30px; width: 30%;float: left;}
.logo img {width: 360px;height:auto}
#navwrapper{width:100%;}
#nav {float: right; text-transform: uppercase;padding: 25px 30px 0 0;}
#nav ul {height: auto; display: block; margin: 0; padding: 0; list-style: none; position: relative;}
#nav ul li {font-size: 22px; font-family: 'Roboto Condensed'; float: left; margin: 0; text-decoration: none; overflow: visible; position: relative; list-style-type: none; text-align: center;}
#nav ul li:last-child {border-right: none;}
#nav ul li a {text-decoration: none; color: #000000; padding: 10px;}
#nav ul li a:hover {color:#8cc9ba;}
#nav ul li a.active {color:#8cc9ba;}
#nav ul li.sub:hover {cursor: hand;}
#nav ul li.sub::after {content: "\e5c5"; font-family: 'Material Icons'; height: 70px;}
#nav ul li.sub {height: 70px;}
#nav ul li.sub:hover a {color: #000;}
#nav ul li ul{display: none;}
#nav ul li:hover ul {display: block; text-align: left; width: 140px; background-color: #1B84CD; margin-top:30px; overflow: hidden; padding: 10px; position: absolute;}
#nav ul li ul li {float: none;}
#nav ul li.sub ul li a {color: #fff !important;}
#nav > ul > li:nth-child(4){height: 70px;}
#nav ul li.active:hover ul li a {color: #fff !important;}
#nav ul li ul li{text-align: left;padding-bottom: 5px;}
#nav ul li ul li.active{}
#nav ul li ul li.active a{}
#nav ul li ul li:hover a{}
#contentwrapper {margin-top: 50px;}
.content {overflow: hidden;}
#menu {display: none;}
.slicknav_menu {display: none;}
#nav ul#ulList {display: none; text-align: left; width: 250px; background-color: #fff; margin-top: 0px; overflow: hidden; padding: 20px; position: absolute; text-transform: none;}
#nav ul#ulList img {width: 75%;}
#nav .first-nav-li-el:hover ul#ulList{
  display: block;
}
.bildVolleBreite {width: 100%;overflow: hidden;}
.bildVolleBreite img {width: 100%; height: auto; display: block;}
#gruen {width: 100%; background: #519b88; overflow: hidden; font-size: 20px; line-height: 28px;padding-top:40px}
#gruen .inhalt ul {width: 30%; margin: 0 auto; text-align: left; list-style-type: none;}
#gruen ul {list-style-type: none;padding: 0 0 10px 0;}
#gruen ul li {list-style: url(../bilder/haken.svg); padding-bottom: 10px; display: list-item; text-align: center}
#gruen h3  {color: #ffffff;font-family: 'Roboto Condensed';font-size: 30px;text-transform:uppercase}
.inhalt {width: 96%; max-width: 1220px; margin: 0 auto; color: #ffffff; text-align: center; padding: 70px 0 20px 0; margin-bottom: 30px;overflow: hidden;}
.inhalt img {}
.inhalt h2 {color: #000000;}
.inhalt ul {width: 80%; margin: 0 auto; text-align: left; list-style-type: none;}
.inhalt ul li {list-style: url(../bilder/haken.svg); padding-bottom: 10px; display: list-item; padding:0 0 10px 0; text-align: left}

#blau {width: 100%; background: #15548a; overflow: hidden; padding-top: 40px;}
#blau h2 {font-size: 30px; font-family: 'Roboto Condensed'; text-transform: uppercase; line-height: 40px; font-weight: 300; color: #ffffff; padding-top: 20px;}
#blau .inhalt p {text-align: center; font-size: 20px; line-height: 28px; }
#weiss {width: 100%; background: #ffffff; overflow: hidden; color:#000000;padding-top: 40px;}
#weiss .inhalt h1 {color: #000000; text-align: left;}
#weiss img {padding: 0;margin-bottom: 20px;width: 280px;}
#weiss .inhalt h2 {font-size: 30px; font-family: 'Roboto Condensed'; text-transform: uppercase; line-height: 40px; font-weight: 300; color: #519b88; padding-top: 0px; margin-top:0; text-align: left;}
#weiss .inhalt a {color: #519b88}
#weiss .inhalt a:hover {color: #519b88;text-decoration:underline}
#weiss .inhalt h3 {text-align:left;color: #000000;font-size: 25px;line-height:33px}
#weiss .inhalt p {text-align: left; font-size: 20px; line-height: 28px;color:#000000;margin-top: 0;}


#weissneu {width: 100%; background: #ffffff; overflow: hidden; color:#000000;padding-top: 0;}
#weissneu .inhaltneu h1 {color: #000000; text-align: left;}
#weissneu img {padding: 0;margin-bottom: 40px;}
#weissneu .inhaltneu h2 {font-size: 30px; font-family: 'Roboto Condensed'; text-transform: uppercase; line-height: 40px; font-weight: 300; color: #519b88; padding-top: 0px; margin-top:0; text-align: left;}
#weissneu .inhaltneu a {color: #519b88}
#weissneu .inhaltneu a:hover {color: #519b88;text-decoration:underline}
#weissneu .inhaltneu h3 {text-align:left;color: #000000;font-size: 25px;line-height:33px}
#weissneu .inhaltneu p {text-align: center; font-size: 20px; line-height: 28px;color:#000000;margin-top: 0;}
#weissneu .inhaltneu {width: 96%; max-width: 1220px; margin: 0 auto; color: #ffffff; text-align: center; padding: 60px 0 20px 0; margin-bottom: 30px;overflow: hidden;}

#grau {width: 100%; background: #f1f1f1; overflow: hidden; padding-top: 40px;}
#grau h1 {color: #000000;}
#kiwuko_logo {background: #fff; width: 100%;}
#kiwuko_logo img {padding-top: 50px; padding-bottom: 25px;}
.rechteck {background: #f1f1f1; min-width: 250px; width: 30%; min-height: 250px; margin: 20px 3% 20px 0; float: left; color: #000000;border-radius:10px}
.rechteck img {width: 80%; height: auto; padding-top: 25%!important;}
.information {background: #ffffff; color: #000000; width: 100%; height: auto; overflow: hidden; margin-bottom: 40px; margin-top: 40px;}
.information img {width: 465px; height: 600px; display: block;}
.infobild {float: left; width: 39%; height: 100%; overflow: hidden;}
.infotext {width: 55%; padding: 2%; float: left;}
.infotext h2 {text-align: left;}
.infotext p {text-align: left; font-size: 22px; line-height: 34px;}
.konsil {display: inline-block; overflow: visible; margin: 5px auto; width: 100%; max-width: 1220px; height: auto; background-color: #fff;}
.konsilLogo {width: 50%; float: left; background: #ffffff; height: 100%;}
.konsilLogo img {padding-top: 30px; width: 58%; height: auto;float: left;padding-left: 30px;}
.textWenig {width: 50%; float: right; background: #519b88; height: 100%; font-size: 12px;}
.textWenig p {margin: 5%; line-height: 26px; text-align: left!important; font-size:18px;}

.textMehr {overflow: hidden; background: #f1f1f1; min-height: 100px; padding: 2%; text-align: left; color: #000000; font-size: 18px; line-height: 26px; padding: 30px; float: left;}

.mehr {border: 1px #ffffff solid; float: left; margin: 3% 0 30px 30px; width: auto; text-transform: uppercase; font-size: 18px; text-align: center; padding: 10px 30px 10px 30px;}
.mehr:hover {border: 1px #ffffff solid; background-color: #ffffff; color: #8cc9ba; transition: all 0.2s; cursor: pointer;}

.linktext a {border: 1px #000000 solid; float: left; margin: 3% 0 0 0; width: auto; text-transform: uppercase; font-size: 18px; text-align: center; padding: 10px 30px 10px 30px; color: #000000;}
.linktext a:hover {border: 1px #000000 solid; background-color: #000000; color: #ffffff; transition: all 0.2s; cursor: pointer; text-decoration: none}

a.videoicon::before {
content: "";
background: url(../bilder/video-solid.svg);
background-position-x: 0%;
background-position-y: 0%;
background-size: 90%;
background-repeat: no-repeat;
background-position: left;
padding-left: 25px;
}
a.videoicon {font-weight: bold;}

.open {display: block;}
.closed {display: none;}
#rectanglewrapper {width: 100%; height: auto; padding: 20px 0; margin-top: 50px;}
.rectangle {float: left; width: 65%; padding-bottom: 20px;}
.dreiblockwrapper {display: block; width: 100%;height:240px}
.dreiblock {width: 28%; margin:0 2%; float: left;}
.capital {text-transform: uppercase; font-size: 17px; line-height: 23px; font-family: 'Roboto'; margin-bottom: 25px; font-weight: 400;}
.weiss_kreis {width: 200px; height: 200px; border: 4px solid #ffffff; border-radius: 100%;}
.gruen_kreis {width: 200px; height: 200px; border-radius: 100%; border: 4px solid #8cc9ba; margin-top: -100%; left: 0;}
.zahl {font-size: 34px; color: #8cc9ba; margin-top: -37%; font-weight:400}
.prozente {width: 200px; height: 200px;}
.dreiblock .capital {margin-top: 33%; margin-bottom: 60px;}
.threeone {width: 100%; overflow: hidden; display: flex; color: #000; text-align:left;}
.left_3col {width: 70%; margin: 0 5% 0 0;}
.left_3col h1, .left_3col h2 {text-align: left !important;}
.right_1col {width: 25%;}
.right_1col form {font-size:14px; text-align:left;}
.left {width: 50%; padding: 0 5%;}
.right {width: 50%; padding: 0 5%;}
.content_left_right {display: flex; width: 100%;}
.text_50left_50right {display: flex; width: 100%; margin-top: 20px;}
.text_50left_50right .left, .text_50left_50right .right {width: 50%; padding: 0}
.text_50left_50right p {font-size: 17px !important;}
.text_50left_50right .left p {margin-bottom:0 !important;}

/*
.circle_chart_green {
  animation: circle-chart-fill 2s reverse; 
  transform: rotate(-90deg);
  transform-origin: center; 
 } 
.circle_chart_info {
  animation: circle-chart-appear 3s forwards;
  opacity: 0;
  transform: translateY(0.3em);
}
@keyframes circle-chart-fill {
  to { stroke-dasharray: 0 70; }
}
@keyframes circle-chart-appear {
  to {
    opacity: 1;
    transform: translateY(0.3em);
  }
}
*/
.rectangle_chart_green {
 /* animation: rect-chart-fill 2s;*/
  }

 @keyframes rect-chart-fill {
  from { transform: translateX(-50px); }
  to { transform: translateX(0); }  
}


/***** Form *****/

/***** Footer *****/

#footerwrapper {background: #519b88; overflow: hidden; padding: 80px 0;}
#footerwrapper .content_klein {width: 80%; margin: 0 auto; text-align: center; line-height: 30px;}
#footerwrapper .content_klein a {color: #ffffff; text-decoration: none;}
#footerwrapper .content_klein a:hover {color: #15548a; text-decoration: none;}
#footerwrapper .content_klein h3 {color: #ffffff; font-family: 'Roboto Condensed'; font-size: 30px;}
#footerwrapper .content_klein p {margin: 0; font-size: 20px; line-height:33px;}

/***** Mobile *****/
@media only screen and (max-width: 1400px) {
.bildVolleBreite img {margin-top: 50px;} 

}
@media only screen and (max-width: 1300px) {

  #gruen .inhalt ul {width: 35%;}
}
@media only screen and (max-width: 1024px) {
 .backgroundimage-c86 {background-attachment: local;min-height: 450px;background-position: left;}
}
@media only screen and (max-width: 1200px) {
  .left_3col{width: 62%;}
  .right_1col{width: 33%;}
}
@media only screen and (max-width: 1045px) {
.partner img {width:160px;height:auto}
  .rechteck {min-width: 200px;min-height: 200px;}
  #weiss img {width: 230px;}
}
@media only screen and (max-width: 1100px) {
  .bildVolleBreite img {margin-top: 80px; width: 100%;}
    #gruen .inhalt ul {width: 39%;}
}

@media only screen and (max-width: 1000px){
  #rectanglewrapper .rectangle p {padding-left: 0;margin: 0 0 20px 0;}
  #rectangle {width: 100%;float: left;}
  .rectangle {width: 100%;float: left;}
    #gruen .inhalt ul {width: 43%;}
}
@media only screen and (max-width: 900px){
  .partner img {width:120px;height:auto}
.partner { width: 18%;}
.zahl {margin-top: -60%;}
.dreiblock .capital {margin-top: 42%}
.ce-textpic, .ce-image, .ce-nowrap .ce-bodytext, .ce-gallery, .ce-row, .ce-uploads li, .ce-uploads div {overflow: hidden;width: 100%;}
.ce-intext.ce-right .ce-gallery {float: left; margin-bottom: 30px;}
.ce-border img, .ce-border iframe {width: 92%; height: auto; }
.bildVolleBreite img {width: 100%; margin-top: 150px;}
.inhalt ul {width: 85%;}
#nav {display: none;}
.js #menu {display: none;}
.js .slicknav_menu {display: block;margin-top:50px}
.js ul li {float: none;}
.rechteck {width: 100%;height:auto}
.rechteck img {padding:80px 0 80px 0!important}
  .information img {width: 100%;height: auto;}
  .infotext {width: 98%;float: left;padding: 0 20px 20px 20px;}
  .infotext p {width: 94%;}
  .infobild {width: 100%;}
  .textWenig {width: 100%;}
  .textMehr {width: 85%;}
  .konsilLogo {width: 100%;}
  .konsilLogo img {width: 85%;padding-bottom: 20px;}
  .threeone {display: block;}
  .left_3col{width: 95%;}
  .right_1col{width: 95%;}
  .inhalt {padding: 40px 0 20px 0;width:93%}
  #weissneu .inhaltneu {padding: 40px 0 20px 0;width:93%}
  #gruen .inhalt ul {width: 46%;}
}
@media only screen and (max-width: 800px){
  .partner img {width:250px;height:auto}
  #partnerwrapper {display: block}
  .partner {width: 90%;height:180px}
  #footerwrapper {padding: 0 0 60px 0;}
  #blau {padding-top: 20px;}
}
@media only screen and (max-width: 768px){
  /*.bildVolleBreite img {width: 1150px; margin-left: -190px;}*/
  .backgroundimage-c86 {background-size: auto;background-attachment: local;min-height: 350px;background-position: left;}
  #gruen .inhalt ul {width: 47%;}
  #grau {padding-top: 30px;}
}

@media only screen and (max-width: 700px){
  /*.bildVolleBreite img {margin-top: 150px; width: 1050px; margin-left: -185px;}*/
  #gruen ul li {text-align: left;}
  #gruen ul {margin-right: 20px;}
  .left {width: 90%; padding-bottom: 7%;}
  .right {width: 90%;}
  .content_left_right {display: block;}
  .text_50left_50right {display: block;}
  .text_50left_50right .left, .text_50left_50right .right {width: 90%;}
  #gruen .inhalt ul {width: 48%;}
}
  
@media only screen and (max-width: 670px){
  .dreiblock {width: 96%;}
  .zahl {margin-top: -20%;}
  .dreiblock .capital {margin-top: 18%; margin-bottom: 5%;}
  #weiss {width: 96%;margin-left: 10px;margin-right: 10px;}
  #weiss img {}
  #weissneu img {width: 400px;height:auto}
  @media only screen and (max-width: 1400px) {
.bildVolleBreite img {margin-top: 150px;} 
  #gruen .inhalt ul {width: 80%;}
}
}
@media only screen and (max-width: 600px){
 /*.bildVolleBreite img {width: 850px;margin-left: -130px;}*/
  .logo {padding-left: 20px;}
}
@media only screen and (max-width: 550px){
 h1 {font-size: 40px;}
}
@media only screen and (max-width: 430px){
  #gruen .inhalt ul {width: 88%;}
  #gruen {padding-top: 30px;}
 /* .bildVolleBreite img {margin-top: 150px; width: 600px; margin-left: -95px;}*/
}
@media only screen and (max-width: 414px){
.dreiblock .capital {margin-top: 30%;}
.zahl {margin-top: -30%;}  
  #weissneu img {width: 380px;height:auto}
}

@media only screen and (max-width: 375px){
/*.bildVolleBreite img {margin-top: 150px;width: 515px;margin-left: -65px;} */
.logo img {width: 325px;height: auto;}
.dreiblock .capital {margin-top: 30%;}
.zahl {margin-top: -35%;}
  h1 {font-size: 30px;line-height:36px}
  #weissneu img {width: 340px;height:auto}
}

@media only screen and (max-width: 320px){
.dreiblock .capital {margin-top: 30%;}
.zahl {margin-top: -40%;}
.logo img {width: 270px;height: auto;}
/*.bildVolleBreite img {margin-top: 140px;width: 480px;margin-left: -80px;} */
.js .slicknav_menu {margin-top: 30px;}
  #weissneu img {width: 280px;height:auto}
}