[canvas=container],
[off-canvas] {
    padding: 10px 20px;
}

[class*=js-] {
    cursor: pointer;
}


button:focus { outline: none; }
a:focus { outline: none; }

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 23px;
	text-align: center;
	text-align: left;
	margin: 0px;
	padding: 0px;

	color: #000;
	color: #FFF;
	/*background-color: #000;*/
	height: auto;
}
.html {
	height: auto;
}

html, body {
	/*	
	width: 100%;
	height: 100%;	
	overflow: hidden;*/
}



#hg {
	/*background-color: #FFc;*/
	position:relative;
	/*border:solid 1px #FFc;*/
	/*
	width: 1024px;
	height: 710px;
	width: 1920px;
	height: 1080px;
	*/
	margin-top: 0px;
	margin-right: auto;
	margin-left: 0px;
	text-align: left;
	overflow: hidden;/**/
}
#footer {
	background-color:pink;
	position:absolute !important;
	top:400px;
	left:100px;
	height: 80px;
	width: 80px;
	display:block;
	
}

h1 {
	font-size: 22px;
	line-height: 40px;
	/*text-transform: uppercase;*/
	text-align: center;

	color: #FFF;
	margin-left: 10px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
}
h2 {
	font-size: 21px;
	line-height: 23px;
	color: #FFF;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 9px;
}
.inhalt h2 {
	color: #000;
}
p {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}



#links {

	float: left;
		overflow: hidden;

}
.links{
	/*height: 577px;*/
	width: 364px;
	height:560px;
	/*min-height:670px;*/
	/*min-height:100%;*/
	
}
.demo-slidebarX{
	background-color: #323C45;
	height: 100%;	
}

.demo-slidebar {
	background-color: #323C45;
	text-align: left;
	margin-top:40px;
	height: 680px;	
}
.c1{
	font-size: 16px;
	line-height: 20px;
	margin-top:0px;;
}
.c1 h1{
	/*margin-top:10px;*/

}
.c1 p{
	/*color:#FFF;*/

}
.rechts {
	top:40px; 
	padding:0px 0px 0px 10px;
	background-color: gold;
	width: 660px;
	height: 710px;
	margin:0px 0px 0px 10px;
	display:none;
}
div {border:/*solid 1px red;*/ }

.inhaltsbox {
	width: 100%;
	/*border:solid 1px red;*/
	position:absolute;
	top:0px;
	left:0px;
	z-index: 1100;
	background-color:#FFF;/*
	background-color:transparent;*/
	padding-top:10px;
	
}
.d4 .inhaltsbox { background-color:#FFF;}	
.inhaltsbox h2 {
	color:#cc0;
	font-family: aL57, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
	font-weight: normal;
	text-align: left;
	display:none;
}
.inhalt {
	position:absolute;
	top:440px;
}
.inhalt {
	width:96%;
	margin-right:20px;
	background-color:#FFF;
	/*display:none;*/
	
}
.table01 {
	width: 80%;
	margin-left: 10px;
	margin-left: 10px;
  	margin-top: 0px;
  	padding: 0px;
	/*border:solid 1px #999;*/
	
}
.table01 tr th {
	margin-bottom: 6px;
	padding: 6px 5px 6px 0px;
	
}
.table01 tr td {
	margin: 6px 0px;
	padding: 3px 5px 3px 5px;
	/*
	border-left:none 0px;
	border-right:none 0px;*/
	border-bottom:solid 5px #FFF;
	background-color:#ccc;
	
}
sup { font-size:12px;}


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

#rechts {
	position:relative;
	color:#000;
	background-color: pink;
	float: left;
	width: 660px;
	height: 660px;

	min-height: 100%;
	height: 100%;
		height: 750px;
	margin:0px 0px 0px 0px;
	/*display:none;*/

}
.uebersichtbox {
	background-color: gold;

	width: 640px;
	height: 700px;
	margin:10px 0px 0px 10px;
	/*padding-top:10px;*/
	/*display:none;*/
}
.detailbox {
	position:absolute;
	top:0px;
	left:0px;	
	z-index: 200;
	color:#000;
/*	
	background-color:#FFF;

	width: 640px;
	height: 700px;
	margin:0px 0px 0px 10px;
	*/
	margin:0px 0px 0px 0px;
	/*display:none;
	opacity:0;*/
}

#header {
	background-color: #323C45;
	margin-bottom: 0px;
	width: 100%;
	height: 40px;
	position: relative;
	z-index: 2000;
}

#header div {
}
.icon {
	font-size: 0px;
	line-height: 0px;
	width: 42px;
	height: 40px;
	/*background-image: url(../userfiles/images/meta/schatten2.png);
		background-position:2px 2px;*/
	background-size:50px;
	background-repeat: no-repeat;
	cursor:pointer;

}
.icon img{

	width: 40px;
	height: 40px;

}
.icon:hover {
	/*background-image: none;
	background-position:0px 0px;*/
}
#menu1, #menu2 {
	background-repeat: no-repeat;
	/*background-position: 0px 0px;*/
	/*background-size:100%;*/
	float: left;
}
#menu1 {
	background-image: url(../userfiles/images/meta/menu1.svg);
	position: absolute;
	left: 6px;
	top: 0px;
}
#menu2 {
	background-image: url(../userfiles/images/meta/menu2.svg);
	position: absolute;
	top: 0px;
	right: 6px;
}

 
#menu1:hover, #menu2:hover {
	/*background-position: 0px -50px;*/
}
.menu {
 	background-position: 0px 0px;
}
.menuactiv {
	background-position: 0px -50px;
}

#numb{
	float: left;
	height: 40px;
	width: 50px;
	font-size: 14px;
	line-height: 40px;
	text-align: center;
}
#prev {
	background-image: url(../userfiles/images/meta/prev.svg);/**/
	float: left;
}
#next {
	background-image: url(../userfiles/images/meta/next.svg);/**/
	float: left;
}
.mehr, .mehr1, .mehr2 {
	font-family: aL57, Arial, Helvetica, sans-serif;	
	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;
}

#steuerung {
	padding-right: 10px;
	padding-left: 10px;
}




#titel {
	text-align: center;
	float: left;
	width: 100%;
}
.c1 .nav1 {
	margin-left:20px;
	margin-right:20px;
	/*background-color:gold;*/
}
.nav1 ul{
	list-style-type: none;
	padding-left: 0px;
	margin-left: 0px;
	margin-bottom: 10px;
}
.nav1 ul ul{
	position:absolute;
	top: 10px; 
	right:-1020px;
	/*background-color:green;*/
	/*display:none;*/
}
.nav1 ul li {
	/*background-color:gold;*/
	margin-top: 0px;
	margin-bottom: 18px;
	margin-bottom: 1vw;
	
	height:71px;
	height:auto;
	width: 470px;
	width: 33vw;
	position:relative;
}
.nav1 ul li ul li {
	/*background-color:pink;*/

	margin-top: 0px;
	margin-bottom: 15px;
	height:auto;
	width: 970px;
	position:static;
}
.nav1 ul li a {

	color: #FFF;
	text-decoration: none;
	padding-right: 80px;
	padding-right: 4.1vw;
	padding-right: 6.1vw;
	text-align: right;
	background-image: url(../userfiles/images/meta/icon_nav2.svg);
	background-repeat: no-repeat;
	background-position: 400px 0px;
	background-position: 28vw 0px;
	background-size: 71px auto;
	background-size: 4vw auto;
	font-size: 20px; 
	font-size: 1.6vw; 
	font-size: clamp(12px, 1.6vw, 50px);
	line-height: 71px;
	line-height: 4vw;
	display: block;

}
.nav1 ul li a:focus { outline: none; }


.nav1 #bottomnav li a {
	
	text-align: left;
	padding-right: 0px;
	padding-left: 80px;
	background-position: 0px 0px;
	/**/
}







.nav1 ul li ul li a, .nav1 ul .current ul li a {

	padding-left: 80px;
	padding-left: 4vw;
	text-align: left;
	background-position: 0px 0px;
	background-size: 48px auto;
	background-size: 3vw auto;
	/*font-size: 20px; */
	line-height: 3vw;
	display: block;
	/*border:solid 1px blue;*/
}
.nav1 ul li a:hover, .nav1 ul .current a {
	color: #E5E5E5;
	background-position: 400px -72px;
	background-position: 28vw -4vw;
	/*background-position: 0px -50px;*/

}
.nav1 ul li a:focus {
	color: #E5E5E5;
	background-color:rgba(255,255,255,0.1);
	boder:none;

}
.nav1 ul li ul li a:hover, .nav1 ul li ul .current a {
	color: #E5E5E5;
	background-position: 0px -48px;
	background-position: 0px -3vw;
}

#nav3 {
	position:absolute;
	z-index:1000;
	top:50vw;
	top:46vw;
	
	left:1%;
	left:4.5vw;
	
	height: 80px;
	width: 80px;
	width: 4vw;
	height: 4vw;

}
#nav3 .nav1 ul, #nav3 .nav1 ul ul{

	position:static;

	
}
#nav3 .nav1 ul li {

	height:auto;
	width: auto;
	position:static;
}
#nav3 .nav1 ul li a {
	background-position: 0px 0px;
	margin:0px;
	padding:0px;
}



.clr {
	font-size: 0px;
	line-height: 0px;
	clear: both;
	width: auto;
	height: 2px;
}
.anlagen {
	height: auto; width: 100%;
	
	}

input {width: 100%;}
#tes01 {
	background-color: #F00;
	position: absolute;
	z-index:1000;
	height: 100px;
	width: 200px;
	left: 310px;
	top: 250px;
	color:#000;
}

.impressum {
	color:#d2d2d2;
	margin: 70px 0px 0px 40px;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 12px;
	line-height: 18px;
}
.impressum a {color: #99AFDB;	text-decoration: none; }
.impressum a:hover {text-decoration: underline; }	

.op1 {}
.op2 {	opacity:0.3;}


.zaeler	 {		
	/*background-color: #F00;*/
	height: 40px;
	width: 630px;
	display: table-cell;
	vertical-align: bottom;/**/
	font-size: 16px;
	line-height: 18px;
	/*color:red;*/
}
.zaeler	 p{		

	/*vertical-align: bottom;*/
}
#hg { position:relative; background-color:transparent; /*height:750px;*/}
#home2 {display:block;}
#home1 {display:none;}
.home { height:100%; height:700px;}
#home1 h1 {position:absolute; top: 100px; left:92px;  font-size: 60px; line-height: 65px; margin:0px; padding:0px;}
#home1 #slidetext {position:absolute; top: 500px; left:92px;  font-size: 20px; line-height: 65px; margin:0px; padding:0px;}
#home2 #nav1 {position:absolute; top: 100px; left:92px; margin:0px; padding:0px; width: 700px; }
#home2 #nav1 {position:absolute; top: 4vw; left:5vw; margin:0px; padding:0px; width: auto; /*border:solid 1px gold;*/}

#home2 #nav2 {position:absolute; top: 600px; left:92px; margin:0px; padding:0px; width: 700px;}
#home2 #nav2 {position:absolute; top: 31vw; left:5vw; margin:0px; padding:0px; width: auto; /*border:solid 1px pink;*/}

#farbenX {left:50px;}
/* Desktop XLarge */
/* Tablet Landscape */
#hg { width: 100vw; height: 67vw; height: 54.4vw; /*height: 100vh;*/ }
.layerbox2 { width: 100vw; height: 52.6vw; /* height: 100vh;  border:solid 1px gold;*/background-color:black; margin:0px auto;}		
.svgbox2  { width: 94vw; margin:0px 3vw; /**/ height: 58.4vw; height: auto; background-color:black; /*  display:none;*/}
div {/*border:solid 1px gold;*/ }
	
	
@media only screen and (max-width: 1919px) { /* Desktop gross */
	body { background-color: gold; }

}
@media only screen and (max-width: 1639px) { /* Desktop mittel */
	body { background-color: orange; }

}

@media only screen and (max-width: 1319px) { /* Tablet hoch - Laptop */
	body { background-color: grey; }

}

@media only screen and (max-width: 1023px) { /* Tablet quer*/
	body { background-color: blue; 	}
	

}

@media only screen and (max-width: 767px) { /* Smartphone gross/quer */
	body { background-color: pink; 	}
.svgbox2  { width: 100vw; margin:0px 0vw;}

}

@media only screen and (max-width: 511px) {	/* Smartphone klein/hoch */
	body { background-color: purple; }

	.svgbox2  { width: 100vw; margin:0px 0vw;}
	

}	

body { background-color: black; }