@charset "UTF-8";
/* CSS Document */

#body_header {
    
    color: #000;
	font-family: arial, verdana, sans-serif;
	margin: 0px;
	padding: 0px;
	line-height: 1;
	/*font-size:16px;*/
	font-size:10px;/*62.5%; 10px*/
	letter-spacing: 0.4px;
	word-spacing: 2px;
    

}

#body_header * {
        -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
}

#body_header a:visited {
    color:#000;
    
}

#container_main {margin-top: 90px;}
#container_right, #container_right_start {margin-top: 90px;}

.wrapper {
	position:relative;
	margin:0 auto;
	display:block;
	max-width:1200px;
	width:100%;
	/*background-color:aliceblue;*/
	padding: 0;
}

.wrapper_outer {
	padding: 0 2%;
    width: 100%;
}




.flexbox { 
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-flex-flow: wrap;
      -ms-flex-flow: wrap;
          flex-flow: wrap;
	  	  
	  }

.flex-center {
    -webkit-box-pack:center;
    -ms-flex-pack:center;
		-webkit-justify-content:center;
          justify-content:center;
}

.nowrap { 
  -webkit-flex-flow: nowrap;
      -ms-flex-flow: nowrap;
          flex-flow: nowrap;
	/*breite flexibel passt sich ein - standard*/ 
	  }	

.wrap { 
  -webkit-flex-flow: wrap;
      -ms-flex-flow: wrap;
          flex-flow: wrap;
	/*breite fix passt sich nicht ein*/
	  }
	  
.space-between { 	    
-webkit-box-pack:justify;
      -ms-flex-pack:justify;
		-webkit-justify-content:space-between;
          justify-content:space-between;
}

.horizontal-mitte {
-webkit-box-flex:1;
      -ms-flex:1 auto;
          flex:1 auto; 
		  display:flex;  
		  -webkit-box-align:center;  
		  -ms-flex-align:center;  
		  align-items:center; 
		  
		  /*-webkit-box-pack:center; 
		  -ms-flex-pack:center; 
		  justify-content:center;*/
		   
		  -ms-flex-item-align:stretch; 
		  align-self:stretch; 
}


/* ### HEADER  ###################################################################### */
header {min-height: 80px; position: fixed; width: 100%; display: block; z-index: 500; font-size: 1.850em; /*font-size: 1.850em; font-size:2.050em;*/ line-height: 1.2em; background-color: #fff;}
#header_flex {}
.header_li {width: 74.584%; font-family:'FreightTextProMedium-Regular';  }
.header_re {width: 23.75%;}

#logoblock {
    position: absolute;
    width: auto;
    height: 40px;
    top: 20px;
    top: 13px;
    left: 0;
    z-index: 1;
    display: block !important;
    visibility: visible !important;
}


/* ### NAVI ###################################################################### */

.subthemen {margin-bottom: 30px;}
.subthemen a {text-decoration: none;}
.subthemen ul, .subthemen li {list-style: none; padding: 0; margin: 0; font-size: 0.98em;}
.subthemen ul {padding-top: 15px;}
.subthemen li {margin-bottom: 8px;}

@media (max-width:1120px) {
    .subthemen {display: none;}
}

.subthemen_inhalt { margin-top: -3.2%; margin-bottom: 3.2%;}
.subthemen_inhalt ul, .subthemen_inhalt li {list-style: none; padding: 0; margin: 0; font-size: 0.98em;}
.subthemen_inhalt li {display: inline-block; margin-bottom: 5px;}
.subthemen_inhalt a {margin-bottom: 0; text-decoration: none;}

@media (min-width:1121px) {
    .subthemen_inhalt {display: none;}
}

nav {display: block; width: 100%; padding-top: 28px;  padding-left: 8%;}
nav ul {width: 100%; position: relative;}
nav ul, nav li {list-style: none; padding: 0; margin: 0;}
nav li {display: block; position: relative;}
nav ul li a, nav ul li.active ul li a {text-decoration: none; color:#000;}
nav ul li a:hover, nav ul li.active a, nav ul ul li a:hover, nav ul ul li.active a, nav ul li.active ul li a:hover, nav ul li.active ul li.active a {color:#666 !important;} 
nav ul ul {position: absolute; left: 0; top:30px; width: 100%; min-width:185px;  background-color: #fff; padding: 10px 20px 15px 20px; border-bottom:1px solid #efefef; border-left:1px solid #efefef; border-right:1px solid #efefef;}
nav ul ul li {display: inline-block; margin-right: 3%; padding-bottom: 5px; margin-bottom: 3px;}
nav ul ul li a:after {content:''; width: 20px; height: 2px; background-color: #999999; position: absolute; left: 0px; bottom: 0px;}

.umwelt_gruen, nav ul li.active a.umwelt_gruen {background-color:#307531; display: inline-block; color:#fff; padding: 6px 6px; margin-top: -6px;}
.klickbar span {cursor: pointer;}

nav ul li.klickbar ul {display: none;}
nav ul li.klickbar ul.show {display: block;}

.fontsize_re {position: relative;  font-size: 0.75em; padding-top: 39px;}
.fontsize_re a {display:inline-block; color:#666; text-decoration: none;}
.fontsize_re a.aktiv, .fontsize_re a:hover {color:#000;}
#font_normal {font-size:1.300em; }
#font_mittel {font-size:1.650em; }
#font_gross {font-size:1.900em; }

#logoheadline {display: none;}

@media (max-width:1260px) {
    
    nav {display: none;}
    
}

.lines-box {margin-top: 12px; text-align: right;}

.lines-button {display:none; position: absolute; top:28px; left: 298px;/*height:44px;*/ width:26px; z-index:3; background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border:none; padding:0px; text-align:left; margin-right:0px; padding-top: 8px; cursor: pointer;}


.lines-button:hover {
    opacity: 1;
    filter:alpha(opacity=100);
}
.lines-button:active {
}
.lines {
    background: #464646 none repeat scroll 0 0;
    border-radius: 0.28571rem;
    display: inline-block;
    height:5px;
    height: 0.16rem;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
    width:26px;
    /*width: 2rem;*/
	top:-0.5em;
}
.lines:before, .lines:after {
    background: #464646 none repeat scroll 0 0;
    border-radius: 0.28571rem;
    content: "";
    display: inline-block;
    height:5px;
    height: 0.17rem;
    left: 0;
    position: absolute;
    -webkit-transform-origin: 0.28571rem center 0;
        -ms-transform-origin: 0.28571rem center 0;
            transform-origin: 0.28571rem center 0;
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
    width:26px;
    /*width: 2rem;*/
}
.lines:before {
    top:11px;
    top: 0.40rem;
}
.lines:after {
    top:-11px;
    top: -0.45rem;
}


.lines-button.arrow.close .lines:before, .lines-button.arrow.close .lines:after {
    top: 0;
    width:35px;
    width: 2.22222rem;
}
.lines-button.arrow.close .lines:before {
    -webkit-transform: rotate3d(0, 0, 1, 40deg);
            transform: rotate3d(0, 0, 1, 40deg);
}
.lines-button.arrow.close .lines:after {
    -webkit-transform: rotate3d(0, 0, 1, -40deg);
            transform: rotate3d(0, 0, 1, -40deg);
}
.lines-button.arrow-up.close {
    -webkit-transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, 90deg);
            transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, 90deg);
}
.lines-button.minus.close .lines:before, .lines-button.minus.close .lines:after {
    top: 0;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    width:48px;
    width: 3rem;
}
.lines-button.x.close .lines {
    background: transparent none repeat scroll 0 0;
}
.lines-button.x.close .lines:before, .lines-button.x.close .lines:after {
    top: 0;
    -webkit-transform-origin: 50% 50% 0;
        -ms-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    /*width:48px;
    width: 3rem;*/
}
.lines-button.x.close .lines:before {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
}
.lines-button.x.close .lines:after {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
}

@media (max-width:1260px) {
    header {background-color: #fff; /*border-bottom: 1px solid #c8c8c8;*/}
	.lines-button {display:block;}
    #logoheadline {display: block; position: absolute; left: 90px; top:21px; line-height: 1;}
    nav {padding-left:90px; padding-top: 70px;}
    .umwelt_gruen {margin-top: auto;}
    .fontsize_re {text-align: right; padding-top: 33px;}
    
    nav ul {display: block !important;}
    .header_li {width: 80%;}
    .header_re {width: 20%;}
    nav ul li {padding-bottom: 10px;}
     nav ul ul {position: relative; top: inherit; left: inherit; padding-left: 12px; background-color: transparent; border: none;}
    nav ul ul li {padding-bottom: 4px; display: block;}
    
    span.umwelt_gruen {cursor:auto;}
	
}

@media (max-width:451px) {
    #logoheadline {left:72px;}
    nav {padding-left:72px;}
    .lines-button {left: 280px;}

}

@media (max-width:440px) {
    #logoheadline {left:64px;}
    nav {padding-left:64px;}
    .lines-button {left: 266px;}

}

@media (min-width:1261px) {
    nav {display: block !important;}   
}