.hg {
	position:relative;
	top:0px;
	left:0px;		
	text-align: left;	
	margin-right: auto;
	margin-left: auto;		
	height:auto;
	background-color: transparent;
	overflow:hidden;

}
.header {
	background-color: gold;
	width: 100%;
	float: left;
	height:10px;
	display:none;
}

.footer {
	position:relative;
	background-color: #0F9;
	height:20px;
	width: 100%;
	float: left;	
	color:#B4AEA7;
	padding-bottom:10px;
	display:none;
}
.spacer {
	width:100%;
	height:200px;
}
.nav {
	position:relative;
	background-color: #0CF;
	width: 256px;
	float: left;
	height:100%;
}
.adress {
	position:relative;
	top:-10px;
	background-color: #09c;
	width: 768px;
	float: left;
	margin-bottom:10px;
}
.content {
	margin-top:0px;
	background-color: #09F;
	margin-left:7%;
	width:86%;
	float: left;

}
.content p { margin: 2%;}
.content, .adress {  }

.legende0 {

	position:absolute;
	bottom:0px;
	right:2%;
	z-index:10;
	background-color: #000;
	width: 90%;
	margin-bottom:1%;
	text-align:right;
} 
.legende0 span { display:block; padding-right:8%;
	background-repeat: no-repeat;
	background-position: top right;
	background-size: 6% auto;
	margin: 1% 0px 1% 0px;
	padding-top: 0.1em;	
}
.legende0 .leg0{ background-image: url(../userfiles/images/meta/icon-legende.svg);}
.legende0 .leg1{ background-image: url(../userfiles/images/meta/icon-legende1b.svg);}

.legende, .legende2 {
	background-image: url(../userfiles/images/meta/icon-legende2.svg);
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: 40px auto;
	
	position:absolute;
	bottom:0px;
	right:5px;
	z-index:10;
	background-color: #000;
	width: 100%;
	padding-right:50px;
	margin-bottom:1%;
	text-align:right;	
} 
.legende { background-image: url(../userfiles/images/meta/icon-legende.svg);}

.tabbox, .tabbox2 {
	position:absolute;
	bottom:0px;
	bottom:2%;
	left:-1%;
	z-index:10;
	border: solid 1px gold;
	border: none;
	width: 92%;

	margin-left:5.5%;
	margin-top:2%;
	margin-bottom:2%;
	
	height:700px; 
	height:78%; 
	height:auto; 
	
}
.tabbox2 {
	border: solid 1px pink;
	border: none;
	margin-bottom:6%;
	margin-bottom:12%;
	margin-bottom:1em;
	margin-bottom:2em;
	margin-bottom:3em;
}
.svgbox {
	position:absolute;
	bottom:0px;
	bottom:2%;
	left:-1%;
	z-index:10;
	width: 92%;
	margin-left:5.5%;
	margin-top:2%;
	margin-bottom:2%;
	text-align:right;	
	height:700px; 
	height:78%; 	
} 

.sp50 {
	width: 48%;
	margin-right:2%;
	background-color: #FFF;
	float: left;
	margin-bottom:0px;
}
.sp1{
	background-color: pink;
	margin-left:0%;
	height:100px;
}
.sp1 img{
	width:100%;
}
.sp2{
	position:relative;
	width:31%;
	height:100%;
	padding-left:1.8%;
	padding-right:1%;
	float:left;
	background-color: #000;
}
.sp2 img{
	width:100%;

	
}
#main {background-color: #000;}
.sp3a {
	width:100%;
	height:100%;
	padding-left:0%;
	background-color: #000;
	float:left;
}
.sp3{
	width:66.0%;
	height:100%;
	background-color: #000;
	
	float:left;
}
.sp3 img{
	width:100%;
	width:auto;
	height:100%;
}

.sp3 .bildrechts {
	margin-left:2.1%;
	
}


.seitenlogo {
	position:relative;
	margin:10% 0px;
	valign:middle;
}
.seitenlogo span{
	display:block;
}
.seitenlogo img{
	margin-left:-1%;
	margin-right:3%;
	width:18%;
	float:left;
}
.seitenlogo .name{

	width:80%;
	float:left;
	display:block;
	padding:12px 0px;
	color:#505050;
	
}
.seitenlogo h1{

	margin: 0;
	position: absolute;
	top: 60%;

	transform: translate(0%, -60%);

}


.menu {	
	position: absolute;
	top:1%;
	right: 2%;
	background-color: #FFF;
	background-image: url(../userfiles/images/meta/menu.svg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: 30px auto;
	height: 30px;
	width: 30px;
	margin-top:5px;
	cursor:pointer;
}
.menubox { position: relative; width: 100%; text-align:center; background-color: #CCC;}
.claimbox {
	width:auto;
	height:40px; 
	float:left; 
	text-transform: uppercase;
	font-size: 18px;
	line-height: 40px;
	font-weight: 400;
	background-color: pink;
	padding: 0px 10px;
	margin: 0px auto;
}
.logobox {width:40px; height:40px; float:left;}

.logo {
	
	width: 50%;
	height:auto;
	
}
.logo2 {
	position:absolute;
	bottom: 5px;
	left:0px;
}
.logo3 {
	position:absolute;
	bottom: 0px;
	left:30px;
}
.logo4 {	
	width: auto;
	height:100%;
	margin-right: 20px;	
}
#tes01{
	position:fixed;
	z-index:2000;
	top:0px;
	width: 400px;

	}
#tes01 input{
	font-size: 30px;
	height:30px;
	width: 300px;
	}

.mehr, .mehr1, .mehr2 {
	position:absolute;
	z-index: 310;
	top:4%;
	left:4%;
	font-size: 14px;
	font-size: 20px;	

}
.mehr {	display:none;}
.mehr1 {	display:none;}

.info, .mehr {
	background-image: url(../userfiles/images/meta/info.svg);
	background-size:40px;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size:50px;
	height: 40px;

	line-height: 40px;
	padding-left: 45px;
}

.mehr {
	background-image: url(../userfiles/images/meta/infokennzahlen.svg);
}

.mehr1, .mehr2 {		
	height: 40px;
	line-height: 40px;
	padding-left: 45px;
	padding-left: 10px;
}
.info {float: right; 	font-size: 14px;}
.infoX:hover,  .mehrX:hover {
	background-position: 0px -50px;
}
.infoactiv1, .mehractiv1 {
	background-position: 0px -50px;
}
.infoactiv, .mehractiv {
	background-position: 0px -50px;
}

.vermerk {
	color:#000;
	position:absolute;
	top:10px;left:20px;
	z-index: 1000;
	display:none;
}
.vermerk2 {
	color:#000;
	position:absolute;
	top:40px;left:20px;
	z-index: 1000;
	display:none;
}

.marker1 {
	color:#6CB5DE;	
}
.marker2 {
	color:#9DCF9C;	
}
.marker3 {
	color:#9DCF9C;	
}	
.hide4,	.hide5, .hide6, .hide7 { }

body { background-color: #ccc; font-family:'Atlas-Grotesk-Web-Regular';  font-size: 26px; line-height: 39px;}
.hg { /*width:1920px; height:1080px;*/}
.start  { font-size: 31px; line-height: 50px; margin: 2%; display:block;}
h1 {font-size: 1.2em; line-height: 1.2em;}
h2 { font-size: 1em;  line-height: 1,1em; margin:0px 0px 0px 0px;}	
.titel1 {font-family:'Atlas-Grotesk-Web-Bold'; font-size:0.48em; fill:#FFFFFF;}	
.text1 {font-family:'Atlas-Grotesk-Web-Regular'; font-size:0.48em; fill:#FFFFFF;}
.titel12 {font-family:'Atlas-Grotesk-Web-Bold'; font-size:38px; fill:#FFFFFF;}	
.text12 {font-family:'Atlas-Grotesk-Web-Regular'; font-size:38px; fill:#FFFFFF;}

.black { fill:#000;}

.kwh {font-family:'Atlas-Grotesk-Web-Regular'; font-size:10px; fill:#000;}
sup {font-size: 0.6em;position:relative;line-height:1em;}
.sup2 {font-size: 0.6em;position:relative; top:-0.6em;}
.sub2 {font-size: 0.7em;position:relative; top:+0.3em;}

.lable{  font-size: 0.12em; }
.lable2{ font-size: 0.24em; } 

.abdecker, .abdecker2 {opacity:1;fill:red;fill:#000;stroke:#000000;stroke-miterlimit:10;}


@media only screen and (max-width: 3840px) {
	body { background-color: lightgreen; background-color: black;/**/ font-size: 50px; line-height: 60px;}
	.hg { width:3840px; height:2160px;}
	.start  { font-size: 86px; line-height: 114px;}
	.spacer { height:600px; }
	.sp2 {}
	h1 { font-size: 64px; line-height: 78px; font-size: 1.2em; line-height: 1.2em;}
	h2 { font-size: 50px;font-size: 0.96em; font-size: 1em;  line-height: 74px; line-height: 1,1em; margin:0px 0px 0px 0px;}	
	
	.titel1 {font-family:'Atlas-Grotesk-Web-Bold'; font-size:64; font-size:0.48em; font-size:0.485em; fill:#FFFFFF; }	
	.text1 {font-family:'Atlas-Grotesk-Web-Regular'; font-size:52; font-size:0.48em; fill:#FFFFFF;}
	
	.legende0 span { }
	
	.svgbox2 {width:2560px; height:2160px;}	
	
}
@media only screen and (max-width: 2400px) {
	body { background-color: red; font-size: 25px; line-height: 35px;}
	.hg { width:1920px; min-height: 1080px; height: 1080px;}
	.spacer { height:200px; }
	.start  { font-size: 1.8em; line-height: 1.4em;}

	h1 { font-size: 32px; line-height: 39px;}
	h2 { font-size: 26px;line-height: 39px; margin:0px 0px 0px 0px;}

	.titel1 {font-size:1.2em;font-size:25px;}	
	.text1 {font-size:1.2em; font-size:22px;}
	.lable{  font-size: 0.4em; }
	.lable2{ font-size: 0.8em; } 
	
	.titel1 {font-size:0.79em; font-size:0.98em;}	
	.text1 {font-size:0.80em; }	
	.lable{  font-size: 0.24em; }
	.lable2{ font-size: 0.48em; } 

	.svgbox2 { width:1280px; height:1080px; }	
	
}



@media only screen and (max-width: 1920px) {
	body { background-color: pink; font-size: 25px; line-height: 32px;}
	.hg { width:1920px; min-height: 1080px; height: 1080px;}
	.spacer { height:200px; }
	.start  { font-size: 43px; line-height: 57px;}
	
	h1 { font-size: 32px; line-height: 39px;}
	h2 { font-size: 26px;line-height: 39px; margin:0px 0px 0px 0px;}

	.titel1 {font-size:1.2em;font-size:25px;}	
	.text1 {font-size:1.2em; font-size:22px;}
	.lable{  font-size: 0.4em; }
	.lable2{ font-size: 0.8em; } 
	
	.titel1 {font-size:0.79em; font-size:0.98em;}	
	.text1 {font-size:0.80em; }	
	.lable{  font-size: 0.24em; }
	.lable2{ font-size: 0.48em; } 

	.svgbox2 { width:1280px; height:1080px; }		
		/*
	body { background-color: pink;   font-size: 25px; line-height: 32px;}

	.hg { width:1920px; height:1080px;}
	.start  { font-size: 43px; line-height: 57px;}
	.spacer { height:400px; }
	
	h1 { font-size: 32px; line-height: 39px;}
	h2 { font-size: 26px;line-height: 39px; margin:0px 0px 0px 0px;}

	.titel1 {font-size:0.79em; font-size:0.98em; font-weight:normal; fill:#FFF; font-weight:700;}	
	.text1 {font-size:0.80em; }	
	.lable{  font-size: 0.24em; }
	.lable2{ font-size: 0.48em; } 

	.svgbox2 { width:1280px; height:1080px; }	
	*/
}


@media only screen and (max-width: 1600px) {
	body { background-color: orange; font-size: 15px; line-height: 20px;}
	.hg { width:1200px; min-height: 675px; height: 675px;}
	.spacer { height:200px; }
	.start  { font-size: 1.8em; line-height: 1.4em;}

	h1 { font-size: 15px; line-height: 20px;}
	h2 { font-size: 1em;line-height: 1.2em; margin:0px 0px 0px 0px;}

	.titel1 {font-size:1.2em;font-size:25px;}	
	.text1 {font-size:1.2em; font-size:22px;}
	.lable{  font-size: 0.4em; }
	.lable2{ font-size: 0.8em; } 

	.svgbox2 { width:800px; height:675px; }	
	
	
}

@media only screen and (max-width: 1279px) {
	body { background-color: blue; font-size: 13px; line-height: 17px;}
	.hg{ width:1024px; min-height:576px; height:576px;} 
	.start  { font-size: 1.7em; line-height: 1.4em;}
	.spacer { height:200px; }

	h1 { font-size: 1.1em; line-height: 1.2em;}
	h2 { font-size: 1em;line-height: 1.2em; margin:0px 0px 0px 0px;}

	.titel1 {font-size:1.6em;}	
	.text1 {font-size:1.6em; }

	.lable{  font-size: 0.5em;}
	.lable2{ font-size: 1.0em;} 

	.svgbox2 { width:682px; height:576px; }	
}

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

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

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