@font-face {
font-family: 'Segoe UI';
font-style: normal;
font-weight: normal;
src: local('Segoe UI'), url('/webfonts/Segoe UI.woff2') format('woff2'), url('/webfonts/Segoe UI.woff') format('woff'), url('/webfonts/Segoe UI.ttf') format('truetype');
font-display:swap;}
@font-face {
font-family: 'Segoe UI';
font-style: italic;
font-weight: normal;
src: local('Segoe UI Italic'), url('/webfonts/Segoe UI Italic.woff2') format('woff2'), url('/webfonts/Segoe UI Italic.woff') format('woff'), url('/webfonts/Segoe UI Italic.ttf') format('truetype');
font-display:swap;}
@font-face {
font-family: 'Segoe UI';
font-style: normal;
font-weight: bold;
src: local('Segoe UI Bold'), url('/webfonts/Segoe UI Bold.woff2') format('woff2'), url('/webfonts/Segoe UI Bold.woff') format('woff'), url('/webfonts/Segoe UI Bold.ttf') format('truetype');
font-display:swap;}
@font-face {
font-family: 'Segoe UI';
font-style: italic;
font-weight: bold;
src: local('Segoe UI Bold Italic'), url('/webfonts/Segoe UI Bold Italic.woff2') format('woff2'), url('/webfonts/Segoe UI Bold Italic.woff') format('woff'), url('/webfonts/Segoe UI Bold Italic.ttf') format('truetype');
font-display:swap;}

@font-face{font-family:'WaSoWi';src:url(/webfonts/wasowi.eot?v=20170511);src:url(/wasowi.eot?v=20170511#iefix) format("embedded-opentype"),url(/webfonts/wasowi.woff2) format("woff2"),url(/webfonts/wasowi.woff) format("woff"),url(/webfonts/wasowi.ttf) format("truetype");
font-weight:400;
font-style:normal;
font-display:swap;}


body {
  padding: 0; margin: 3em auto 0 auto;
  text-align: center;
  font-family : Segoe UI, Arial, Switzerland, Helvetica, sans-serif;
  font-size: 100.01%;
  background-image: url('/grafik/background-hell.svg'); 
  background-repeat: x-repeat; 
  height:100%; 
  background-size: cover;
  background-attachment: fixed;
}

#wka2 {position: absolute; top: 0; right: 0; z-index: -1; display:none;}

#raum_1000 {
  margin: 1em 0 0 0;
}

#bgweiss {
}

#zentrum {
  position: relative; z-index: 1;
  padding: 0em 0 0em 0; margin: 0 auto 0 auto;
  text-align: center;
  width: 77.25em;
}

.seite_schatten {
  text-align: center;
  width: 77.25em;
  background-position: 13.5em;
  background-repeat: repeat-y;
}

.seite_rahmen {
  padding: 0.5em 0 0.5em 0;
  text-align: center;
  width: 77.25em;
  background-position: 13.5em;
  background-repeat: repeat-y;
  background-color: #fff;
  background-color: rgba(255,255,255,0.4);
}

.seite {
  padding: 0 0 0 0; margin: 0 auto 0 auto;
  text-align: center;
  width: 77.25em;
  background-color: #fff;
  background-color: rgba(255,255,255,1);
}

.content {
  padding: 0em 0 0em 0; margin: 0 auto 0 auto;
  text-align: center;
  float: left;
  width: 77.25em;
  position: relative;
  background-color: #fff;
  background-color: rgba(255,255,255,1);
}


a {
  color: #0074C5;
}

/* Seitenkopf mit Bild */

#seitenkopf {
  float: left;
  position: relative;
  margin: 0; padding: 0; border: 0;
  width: 77.25em;
  height: 4.5em;
}

#seitenkopf img{
  margin: 0; padding: 0; border: 0;
  text-align: center;
  font-size: 1.5em;
}

#logo {
  float: left;
  margin: 0; padding: 0;
  position: relative;
  left: 1.25em; top: -1.5em;
}

#logo img, #logo picture{
  margin: 0; padding: 0;  
  width:650px;
}

#groesse {
  float: right;
  position: relative;
  margin: 1em; padding: 0;
  width: 10em;
  height: 3em;
  font-size: 0.8em;
  color: #000;
}

#groesse a{
  margin: 0 0 0 0.25em; padding: 0.15em;
  width: 1em;
  height: 1em;
  background-color: #fff;
  border: 1px dotted #000;
  color: #000;
  text-decoration: none;
}

#groesse a:hover{
  border: 1px solid #DDDFDF;
  color: #000;
  text-decoration: none;
}

/* metanavigation oben */

#metanavline {
  margin: 0.5em 0 0.5em 0; 
  border-top: 1px solid #9CA4A4;
  border-bottom: 1px solid #9CA4A4;
}

#metanavi {
  float: left;
  position: relative;
  margin: 0 0 0 0; padding: 0;
  width: 77.25em;
  text-align: center;
  background-repeat: repeat-x;
}

#metanavi ul{
  float: right;
  position: relative;
  margin: 0 0 0 0em; padding: 0 0 0 0em;
  text-align: left;
  list-style-type: square;
  list-style-position: outside;
}

#metanavi ul li{
  float: left;
  position: relative;
  font-size: 0.9em;
  display: block;
  margin: 0; padding: 0;
  text-align: left;
  color: #fff;
}

#metanavi ul li a{
  float: left;
  position: relative;
  margin: 0; padding: 0em 2em 0 2em;
  font-weight: normal;
  line-height: 1.5em;
  color: #616767;
  text-decoration: none;
}

#metanavi ul li a:hover{
  color: #000;
  text-decoration: underline;
}

/* Spalte Links fuer Navigation */

#spalte_links {
  float: left;
  width: 13.5em;
  margin: 1.35em 0 0.5em 0;
}

#topic_links {
  float: left;
  margin-top: 0.5em;
  border: 1px dotted #9CA4A4; 
  width: 13.35em;
}

/* Navigation Ebene 1*/

#navi {
  float: left;
  width: 13.5em;
}

#spalte_links ul {
  float: left;
  position: relative;
  margin: 0 0 0 0; padding: 0 0 1em 0;
  text-align: left;
  list-style-type: square;
  list-style-position: inside;
}

#spalte_links ul li {
  float: left;
  width: 12.5em;
  display: block;
}

#spalte_links ul li a{
  padding: 1em 0 0.25em 1em;
  height: 100%;
  font-weight: normal;
  font-size: 1em;
  text-decoration: none;
  display: block;
  border-bottom: 1px dotted #B1B7B7;
}

#spalte_links ul li a:hover{
  color: #F48038; 
}
#navi a.aktiv{
  font-weight: bold;
}


.aktiv_e1{
  background-image: url(/grafik/m1.gif);
  background-position: left 1em ;
  background-repeat: no-repeat;
}

/* Navigation Ebene 2 */

#spalte_links ul li ul{
  float: left;
  width: 12.5em;
  margin: 0; padding: 0; border: 0;
  display: block;
}

#spalte_links ul li ul li{
  float: left;
  width: 12.5em;
  margin: 0; padding: 0; border: 0;
  display: block;
}

#spalte_links ul li ul li a{
  padding: 0.3em 0 0.3em 3em; margin: 0 0 0 0;
  height: 100%;
  font-weight: normal;
  font-size: 1em;
  text-decoration: none;
  XXcolor: #fff;
  display: block;
}

#spalte_links ul li ul li a:hover{
  color: #F48000;
}

.aktiv_e2{
  background-position: 0.7em center;
  color: #60BFF3;
  background-repeat: no-repeat;
}

/* Navigation Ebene 3 */

#spalte_links ul li ul li ul{
  float: left;
  width: 13.5em;
  margin: 0; padding: 0; border: 0;
  display: block;
}

#spalte_links ul li ul li ul li{
  float: left;
  width: 13.5em;
  margin: 0; padding: 0; border: 0;
  display: block;
}

#spalte_links ul li ul li ul li a{
  padding: 0.3em 0 0.3em 2.25em;
  height: 100%;
  font-weight: normal;
  font-size: 1em;
  text-decoration: none;
  color: #266BD0;
  display: block;
}

/* Spalte Mitte & Rechts */

#spalte_mitte_rechts {
  position: relative;
  float: left;
  width: 63.75em;
  margin: 0; padding: 0;
}

#spalte_mitte {
position:relative;
  float: left;
  text-align: left;
  width: 48.44em;
  margin: 0 0.5em 0 0.5em; padding: 0;
  z-index:101;
}

/* Spalte Mitte & Rechts [ Bestimmung Format Seitentext ] */

#spalte_mitte h1{
  color: #F48000;
  padding: 0;
  margin: 2em 2.1em 1.25em 1.5em;
  font-family : Segoe UI, Arial, Switzerland, Helvetica, sans-serif;
  font-size: 1.5em; font-weight: normal;
  font-weight: bold;
}

#spalte_mitte p, #spalte_mitte li, #spalte_mitte td {
  color: #000;
  padding: 0;
  margin: 0 2.25em 1.25em 2.25em;
  font-size: 1em;
  font-family : Segoe UI, Arial, Switzerland, Helvetica, sans-serif;
  line-height: 1.75em;
}

#spalte_mitte p img {
  padding: 0;
  margin: 0;
}

#spalte_mitte ul {
  position: relative;
}
#spalte_mitte li {
  line-height: 1em;
  line-height: 1.75em;
}

#spalte_mitte hr {
  margin: 0 10em 1em 1.65em;
  width: 10em;
  border: 0;
  border-top: 1px solid #E7E7E7;
  color: #E7E7E7;
}

/* Spalte Mitte & Rechts [ Bestimmung Format Rechte Spalte mit Bildern & Topics ] */

#spalte_rechts {
  position: relative;
  float: right;
  margin: 3.7em 0 0 0;
  padding: 0 1em 0 0.75em;
  width: 12.45em;
  text-align: left;
  border-left: 1px dotted #9CA4A4;
  z-index:101;
}

#spalte_rechts img {
  background-color: #ffffff;
}

#spalte_rechts h1 {
  padding: 0;
  font-size: 1em;
  color: #0060B4;
  font-weight: normal;
}

#spalte_rechts p, #spalte_rechts li {
  color: #616767;
  padding: 0;
  font-size: 1em;
  font-family : Segoe UI, Arial, Switzerland, Helvetica, sans-serif;
  line-height: 1.75em;
}


/* Inhalt */

#spalte_mitte table{
  color: #000;
  line-height: 1.75em;
  border: 0;
  border-collapse:collapse;
  padding: 0;
  margin: 0 2.25em 1.25em 2.25em;
}

#spalte_mitte table table {
  font-size: 1em;
}

#spalte_mitte tr{
 border: 0;
}

#spalte_mitte td{
 border: 0;
 padding: 0.35em;
 border: 1px dotted #758792;
 vertical-align: top;
 line-height: 1.75em;
 font-size: 0.69em; 
  font-size:1em;
}

#spalte_mitte th{
 border: 0;
 padding: 0.15em 0.35em 0.15em 0;
 font-size: 0.69em;
 font-weight: normal;
 color: #000;
 border-bottom: 1px solid #F48000;
}

#spalte_mitte table tr td a, #spalte_mitte p a, #spalte_mitte ul li a{
  color: #0074C5;
  text-decoration: none;
  font-weight: normal;
}

#spalte_mitte p img a{
  border: 0; margin: 0; padding: 0;
}

#spalte_mitte p img{
  maxrgin: 0 0 1em 0;
  padxding: 0 0 2em 0;
  borxder: 1px solid red;
  margin: 0; padding: 0;
}
form input, form textarea {border: 1px dotted #758792;}
form input:hover, form textarea:hover, 
form input:focus, form textarea:focus,
form .formElement:focus,
form .formElement:hover,
form .formElement:active{ backgroxund-color: #E5E7E7; border: 1px solid #F48000;}
#button { background-color: #E5E7E7; }

/* Fußzeile Banner */

.addrem_energie {
 float: left;
 clear: both;
 position: relative;
 width: 77.25em;
 margin: 0; padding: 0;
 border-top: 1px solid #9CA4A4;
 text-align: left;
  background-color: #fff;
  background-color: rgba(255,255,255,0.8);
  z-index:101;
}

.addrem_energie2 {margin-top: 0.5em;}
.addrem_energie3 {border-top: 1px dotted #9CA4A4;}

.addrem_energie span{
 float: left;
 font-size: 1em;
 margin: 0; padding: 0.35em 1em 0.35em 20px;
 color: #616767;
}

.addrem_energie span a{
 font-size: 1em;
 margin: 0 1em 0 0em; padding: 0em;
 color: #F48000;
 float: left;
}
.addrem_energie:hover {
 color: #F48000;
}

#anlage_wasser, #anlage_sonne, #anlage_wind {
  display: none;
}

.anlage_text {
  float: left;
  position: relative;
  top: -1em;
  width: 63.25em;
  margin: 0 0 0 14em;
  text-align: left;
  background-color: #fff;
  background-color: rgba(255,255,255,0.8);
}

.anlage_text p {
  font-size: 1em;
  padding: 1em 1em 1em 2em;
  line-height: 1.75em;
}

#foot_menue {
  clear: both;
  position: relative;
  top: 0.5em;
  height: 4em;
  margin: 0.5em 0 0.5em 0; 
  border-top: 1px solid #9CA4A4;
  borxder-top: 1px solid #fff;
  text-align: left;
}

#topic_allgemein {
  float: left;
  position: relative;
  width: 13.5em;
  height: 6em;
  margin: 0.5em 0.5em 0.5em 0;
  background-color: #EFF1F1;
}

#topics_wasowi {
  float: left;
  width: 43.25em;
  height: 6em;
  margin: 0.5em 0 0.5em 0;
  background-color: #B1B7B7;
}

#topic_wasser {
  float: left;
  position: relative;
  width: 13.75em;
  height: 5em;
  font-size: 1em;
  margin: 0.5em 0.5em 0.5em 0.5em;
  background-color: #E5E7E7;
}

#topic_sonne {
  float: left;
  position: relative;
  width: 13.75em;
  height: 5em;
  margin: 0.5em 0.5em 0.5em 0;
  background-color: #E5E7E7;
}

#topic_wind {
  float: left;
  position: relative;
  width: 13.75em;
  height: 5em;
  margin: 0.5em 0 0.5em 0;
  background-color: #E5E7E7;
}
  

/* Fußzeile */

#footer {
  clear: both;
  width: 57.25em;
  margin: 0 0 100px 0; padding: 0;
  border-top: 1px solid #9CA4A4;
  text-align: left;
}

#footer p{
  font-size: 0.85em;
  margin: 0; padding: 1em 0 0 2em;
  color: #616767;
  z-index:2;
}
#footer p a{
  z-index:2;
}

#footer img {
  position: relative;
  top: 0.85em;
  border-bottom: 0.116em solid #DCDCDC;
}

form #honigtopf {display: none;}


#sonne, #wka {z-index:100;}
#wasser {z-index:102;}
#sonne {position:fixed; top:20px; left:5px; width:200px;}
#sonne img {width:200px;}
#wka {position:fixed; bottom:145px; right:1%; width:400px; height:600px;}
#wka1 {position: absolute; float:left; bottom:0px; left:173px; height:417px;}
#wka3 {position: absolute; float:left; top:0px; left:0; width:400px;}

#wasser {position:fixed; width:100%; bottom:0px;}

#metanavi ul li a {z-index:101;}

	.wellen_svg{position:relative; display:block; margin-bottom:-12px; widthx:100%; transform:translateY(-98%); pointer-events:none; z-index:800; height:100px;}
	@media screen and (min-width:1280px){
		.wellen_svg{margin-bottom:-160px}
	}
	.wellen0 {animation:wellen 30s linear; animation-iteration-count:infinite; fill:#2382c8;}
	.wellen1 {}
	.wellen2 {animation-duration:50s; animation-direction:reverse; opacity:.6;}
	.wellen3 {animation-duration:60s; opacity:.3;}
	@keyframes wellen{
		0% { transform:translateX(-25%) translateY(100px); }
		4% { transform:translateX(-24%) translateY(40px); }
		8% { transform:translateX(-23%) translateY(100px); }
		12% { transform:translateX(-22%) translateY(40px); }
		16% { transform:translateX(-21%) translateY(100px); }
		20% { transform:translateX(-20%) translateY(40px); }
		24% { transform:translateX(-19%) translateY(100px); }
		28% { transform:translateX(-18%) translateY(40px); }
		32% { transform:translateX(-17%) translateY(100px); }
		36% { transform:translateX(-16%) translateY(40px); }
		40% { transform:translateX(-15%) translateY(100px); }
		44% { transform:translateX(-14%) translateY(40px); }
		48% { transform:translateX(-13%) translateY(100px); }
		50% { transform:translateX(-12.5%) translateY(70px);}
		52% { transform:translateX(-12%) translateY(40px); }
		56% { transform:translateX(-11%) translateY(100px); }
		60% { transform:translateX(-10%) translateY(40px); }
		64% { transform:translateX(-9%) translateY(100px); }
		68% { transform:translateX(-8%) translateY(40px); }
		72% { transform:translateX(-7%) translateY(100px); }
		76% { transform:translateX(-6%) translateY(40px); }
		80% { transform:translateX(-5%) translateY(100px); }
		84% { transform:translateX(-4%) translateY(40px); }
		88% { transform:translateX(-3%) translateY(100px); }
		92% { transform:translateX(-2%) translateY(40px); }
		96% { transform:translateX(-1%) translateY(100px); }
		100%{ transform:translateX(-0%) translateY(100px);}
	}
   .mobile {display:none;}
   .desktop {display:inline;}
   .icon2 {font-family:'WaSoWi';font-size:1.5em; line-height:1em; vertical-align:middle; padding:0;}
   .wa {color: #2382c8 !important;}
   .so {color: #F39F25 !important;}
   .wi {color: #96A7B1 !important;}


@media only screen and (max-width:1480px) {
   #sonne {left:420px; top:10px; width:100px;}
   #sonne img {width:100px;}
}

@media only screen and (max-width:1280px) {
   #wka {position:fixed; bottom:10px; right:1%; width:400px; height:600px; z-index:100;}
   #sonne {left:320px; top:10px; width:100px;}
   #sonne img {width:100px;}
}

@media only screen and (max-width:1280px) and (max-height:600px)  {
   #wka {position:fixed; bottom:10px; right:1%; width:200px; height:300px; z-index:100;}
   #wka1 {left:87px; height:209px;}
   #wka3 {width:200px;}
   #wka1a {position: absolute; float:left; bottom:0px;  z-index:100;}
   #wka3a {position: absolute; float:left; top:0px; left:0; width:200px; z-index:100;}
}

@media only screen and (max-width:1279px) {
   body, table, td, a, li, p, h1, h2 { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
   body {margin:0; padding:0; width:100%;}
   .seite_schatten{width:100%; margin:0; padding:0; text-align:left; float:left;}
   .seite_rahmen {position:relative;}
   .seite { background:none; position:relative; z-index: 101;}
   .desktop, #metanavi, #topic_links, #groesse, #metanavline {display:none;}
   #wka {position:fixed; bottom:60px; right:1%; width:400px; height:600px; z-index:100;}
   #wka1a {position: absolute; float:left; bottom:0px; left:173px; height:417px; z-index:100;}
   #wka3a {position: absolute; float:left; top:0px; left:0; width:400px; z-index:100;}

   #sonne {position:relative; float:right; left:0; margin-right:0px; top:20px; width:100px;}
   #sonne img {width:100px;}
   #wasser {position:fixed; margin-bottom:-90px;}
   #zentrum, .seite, #seitenkopf, .seite_rahmen, .content, #spalte_mitte_rechts, #spalte_mitte, .addrem_energie, #anlage_wasser, #anlage_sonne, #anlage_wind, .anlage_text, #footer {width:100%;}
   #logo {width:90%; left:0; top:0; padding:20px; float:left;}
   #logo img {position:relative; float:left; max-width:60%; height:auto;}
   #spalte_mitte p img {position:relative; max-width:95%; height:auto; z-index:101;}
   #seitenkopf {height:auto; min-height: 90px;}
   #zentrum { position: absolute; }   
   .anlage_text {margin:0;top:0;}
   #spalte_rechts {border-left:0; border-top: 1px dotted #9CA4A4; padding:1em 0 0 0; width:100%;}
   #spalte_mitte, #spalte_rechts {margin:0;}
   #spalte_mitte h1, #spalte_mitte p, #spalte_mitte table, #spalte_rechts p, #spalte_mitte li, #footer p {margin: 0.75em 0 0.75em 20px; max-width:90%;}
   #spalte_mitte td {font-size: 1em;}

   #footer {margin: 0.5em 0 100px 0;}
   #footer p {font-size:1em; line-height:1.7em; padding: 1em 0 0 0;}
   

   #spalte_links {position:relative;float:left;clear:left;top:0;margin-top:0px;left:0px;width:100%;}
   #spalte_links ul, #spalte_links ul li ul {position:relative;float:left;clear:left;width:100%;margin:0;padding:0px;}
   #spalte_links ul li {position:relative;float:left;width:100%;line-height:1.5em;}
   #spalte_links ul li ul li {position:relative;float:left;width:100%;line-height:1.5em;}
   #spalte_links > ul li a {font-size:1em; font-weight:normal;padding-left:2em;}
   #spalte_links > ul li ul li a {font-size:1em;}
   #navi { position:relative;
    z-index: 101;
	height:0;
   	width:0;
	overflow:hidden;
	opacity:0;
	transition:opacity 0.9s;
	transition-timing-function: ease-out;
   } 
   #mkopf{position:relative;float:left;margin: 0px 0 0px 0;width:100%; background-color: #2382c8;}
   #mkopf p {margin:0; font-size: 0.85em;}
   .mobile {display:inline;}
   .menu-ein { font-size:1.2em; text-decoration:none; float:left; position:relative; top:0px; left:20px; color:#fff; text-align: left;}
   .menu-aus { font-size:1.2em; text-decoration:none; float:left; position:relative; top:0px; left:20px; color:#fff; text-align: left; display:none; }
   .icon {font-family:'WaSoWi';font-size:1.5em; line-height:2.1em; vertical-align:middle; margin-right:8px;}
   .addrem_energie span {padding-left:20px;}
   #zentrum:target #navi { width:100%; height:auto; opacity:1; margin-bottom:20px; }
   #zentrum:target .menu-aus { display: inline; }
   #zentrum:target .menu-ein { display: none; }
}
@media only screen and (max-width:1279px) and (max-height:600px)  {
   #wka {position:fixed; bottom:60px; right:3%; width:200px; height:300px; z-index:100;}
   #wka1a {left:87px; height:209px;}
   #wka3a {width:200px;}
}

@media only screen and (min-width:500px) and (max-width:1279px) {
  #logo img {position:relative; max-width:240px; height:auto;}
  #sonne {margin-right:40px;}
}
@media only screen and (min-width:1900px) {
  #sonne {margin-left:100px;}
}