/* Leitung3 */
.demobox {
	fill: #fff;
	opacity: .2;
	stroke-width: 0px;	
}
.demotext {
	fill: #000;
	font-size: 38.3px;
	font-weight: 800;		
}

.bu2 { fill:#FFF;stroke:none;cursor:pointer; opacity:0.1;}	
.bu { fill:#FFF;stroke:none;cursor:pointer; opacity:0;}	
.bu0 { fill:transparent;fill:#FcF;stroke:none;cursor:pointer; opacity:0;}	
.nolink {display:none;}
.st00{fill:url(#verdampfer);}

.st00x{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
fill: #1e5799; /* Old browsers */
fill: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
fill: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
fill: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */


}

	.schnee {
	  transform: translate(0px, 0px);
	  transition-property: transform;
	  transition-duration: 300ms;
	  transition-timing-function: ease;
	  transition-delay: 0s;
	  backface-visibility: hidden;
	}
    .circ {
    	cursor:pointer; 
    	fill:#FFF;
    } 
   .circ:hover, .circ:focus {
    	fill:#93C23E;
    }
   .circ:focus {
    	fill:red;
    }
   .circactiv {
    	fill:#93C23E;
    } 
       
    #zahlen g {
		fill:#FCC;
		display:none;/*	*/		
	} 
	#zahlen text {
		fill:#000;
		font-family: "Oswald",sans-serif;
		font-family: aL57, Arial, Helvetica, sans-serif;
		font-weight: 700;
		font-weight: bold;
		font-size: 18px;	
	} 

	.textbox2 {
		/*
		position: absolute;
		z-index:800;
		top:-110px;
		*/
		color: #FFF;
		background-color:white;/**/
		width:640px;
		height:660px;
		padding:5px;
		border:solid 1px red;
		display:none;/**/
          	
	}
	.textbox2 .label {
		/*font-family: aL57, Arial, Helvetica, sans-serif;*/
		font-size: 14px;
		line-height: 16px;
		position:absolute;
		display:block;
		/*background-color:white;*/
		color:#000;
	}
	.lable{
			/*font-family: aL57, Arial, Helvetica, sans-serif;*/
			font-size: 8px;
			line-height: 16px;
			fill:#1A171B;
			font-weight:300;
			font-weight:400;
			font-weight:500;
			/*fill:red;*/
	}
	.lable2{
			/*font-family: aL57, Arial, Helvetica, sans-serif;*/
			font-size: 16px;
			line-height: 16px;
			fill:#1A171B;
			font-weight:600;
			/*fill:red;*/
	}
	.lable3{
			/*font-family: aL57, Arial, Helvetica, sans-serif;*/
			font-size: 14px;
			line-height: 16px;
			fill:#1A171B;
			/*fill:red;*/
	}
	.lable4{
			/*font-family: aL57, Arial, Helvetica, sans-serif;*/
			font-size: 17px;
			line-height: 20px;
			fill:#1A171B;
			font-weight:600;
	}	
    .svgbox {
    	position: absolute;

    	width:640px;
    	height:660px;     
    	overflow:hidden;      

    }
    .svgbox2 {
    	position: absolute;
    	width:640px;
    	height:660px;           	
    }
    .svgbox3 {
    	position: absolute;
    	width:640px;
    	height:660px;           	
    }
	.container {
	    width: 100%;
	    padding-left: 0%;
	    margin-left: 0%;
	    padding-top: 96%;
	    padding-top: 110%;
	    position: relative;
	}
	
	svg {
		/*border:solid 1px red;*/
	    position: relative;
	    top: 0px;
	    left: 0px;
	    /**/
	}

   .layerbox {
   	position: relative;
   	width:640px;
   	height:700px;
   	overflow:hidden;
   	background-color:#FFF;
   }
   .layerbox2 {
   	position: relative;
   	width:640px;
   	height:700px;
   	overflow:hidden;
   	background-color:#FFF;
   } 
   .layerbox3 {
   	position: relative;
   	width:640px;
   	height:700px;
   	overflow:hidden;
   	
  background-color:#FFF;
   }   
   .rechts, .layerbox {
   	/*background-color:#ccF;*/
   }
	#z1 { z-index:100; }
	#z2 { z-index:200; }
	#z3 { z-index:300; }
	
svg .nummer,svg .nummer1,svg .nummer2 { font-size: 8px;}	
	
.nummerXX {
	font-family: aL57, Arial, Helvetica, sans-serif;
	font-size: 18px;
	
}	
	#legende2 {display:block;}
	#legende1 {display:none;}

	.desk { display:block; }
	.smart { display:none; }	
	.desk2 { display:block; }
	.smart2 { display:none; }	
	
/* Desktop XLarge */
@media only screen and (min-width: 1536px) and (max-width: 3000px) {
	.layerbox3, .svgbox3 { width:960px; height:1040px;}
	.layerbox2, .svgbox2 { width:960px; height:1040px;}
	.layerbox, .svgbox, .textbox2 { width:960px; height:1040px;}
	.layerbox { left: 0px; background-color:white;}
	
	.textbox2 { top:-160px;	}
	.lable{ font-size: 6px; }
	.lable2{ font-size: 12px; } 
}



/* Desktop large */
@media only screen and (min-width: 1280px) and (max-width: 1535px) {
	.layerbox3, .svgbox3 { width:800px; height:870px; }	
	.layerbox2, .svgbox2 { width:800px; height:870px; }			
	.layerbox, .svgbox, .textbox2 { width:800px; height:870px; }	
	.layerbox { left: 0px; margin:0px; background-color:white;}
	.textbox2 { top:-140px;	}
	.lable{ font-size: 7px; } 
	.lable2{ font-size: 14px; }
		
}	
/* Tablet Landscape */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
	.svgbox3, .layerbox3{ width:600px; height:660px;  }	
	.svgbox2, .layerbox2{ width:600px; height:660px;  }	
	.svgbox, .layerbox{ width:600px; height:660px;  }
	.layerbox { left:20px;}
}

/* Tablet Portrait 
@media only screen and (min-width: 768px) and (max-width: 1023px) {	
*/
@media only screen and (max-width: 768px) {	
	.mm{}
	/*.svgbox3, .layerbox3 { width:486px; height:530px; width:100%;  }*/	
	
	.svgbox2, .layerbox2 { height:calc(108vw); width:100%; }
	.layerbox2 { margin-left:0px; }
	.svgbox3, .layerbox3 { height:calc(80vw); width:100%; }
	/*
	#detailinfo4 .svgbox3, #detailinfo4 .layerbox3 { height:calc(100vw); width:100%;}
	*/
	/*.layerbox3 { overflow-y:scroll; width:auto; height:530px; }*/
	/*.svgbox3 .container{ height:820px;}*/
	/*.svgbox2, .layerbox2 { width:748px; height:820px; width:100%; }*/
	.layerbox { margin-left:auto; margin-right:auto; top:10px; }
	
	.svgbox { width:748px; height:820px; width:100%; width:calc(100% - 0px); /*background-color:pink; border:solid 1px red;*/ }
	.layerbox { width:748px; height:820px; width:100%; }
	
	svg .nummer,svg .nummer1,svg .nummer2 { font-size: 10px;}
	svg { width:100%; height:auto; /*display:none;*/}
	
	.swiper-content .swiper-slide { width:100%; }
	
	#legende2 {display:none;}
	#legende1 {display:block;}
	
	.lable2{ font-size: 14px; }
	.lable{ font-size: 10px; line-height: 12px;  } 	
	.lable3{ font-size: 10px; }             
    .textbox h3 { font-size: 16px; line-height: 18px; }
    .textbox p { font-size: 14px; line-height: 16px; }	
    
    .textbox2
    /*
    .desk { display:none; }
	.smart { display:block; }
	.desk2 { display:none; }
	.smart2 { display:block; }
	*/
}

/*
@media only screen and (min-width: 320px)  and (max-width: 767px) {
	#ag{ position: static; }
	#zahlen g { display:block;	 } 
	.textbox2 {position:absolute; z-index:1000;height:500px;background-color:green; display:block;	}
	.textbox2 .label { position:static; display:none; color:#FFF; }
	.textbox2 .label span {display:none; }
	#lable {display:none;}
	#legende2 {display:none;}
	#legende1 {display:block;}
	.layerbox { top:10px; left:-10px;}
	.desk { display:block; }
	.smart { display:none; }	
}


@media only screen and (min-width: 512px) and (max-width: 767px) {
	.svgbox3, .layerbox3 { width:512px; height:540px;  }	
	.svgbox2, .layerbox2 { width:512px; height:540px;  }
	.svgbox, .layerbox { width:532px; height:600px;  }

	.textbox2 {width:502px; top:516px;}
	.textbox2 .label { font-size: 16px; line-height: 18px; }
    .textbox h3 { font-size: 16px; line-height: 18px; }
    .textbox p { font-size: 14px; line-height: 16px; }	
}


@media only screen and (min-width: 320px)  and (max-width: 511px) {
	.desk2 { display:none; }
	.smart2 { display:block; }
}
*/
@media only screen and (max-width: 375px) {
	            .svgbox { background-color:gold;}
            	.k2 .textbox2 { top:360px; /*background-color:gold;*/background-color:rgba(255,255,255,0.4); background-color:#608702; /*position:static;*/height:60px; z-index:1000;}

}
/* Smartphone iPhone7*/
/*
@media only screen and (min-width: 375px)  and (max-width: 511px) {
	        .svgbox3, .layerbox3{ width:375px; height:422px;  }
            .svgbox2, .layerbox2{ width:375px; height:422px; height:auto;   }
            .svgbox, .layerbox{ width:390px; height:360px;  }
            .svgbox {  }
            
            .textbox2 { width:365px; top:378px;}
            
            
            .textbox2 .label { font-size: 18px; line-height: 20px; }
            .textbox2 p { font-size: 14px; line-height: 16px; }
            .textbox h3 { font-size: 14px; line-height: 16px; }
            .textbox p { font-size: 14px; line-height: 16px; }


}
*/
@media only screen and (max-width: 320px) {
	            .svgbox { background-color:pink; }
				.k2 .textbox2 { top:400px; background-color:pink;}
}
/*
@media only screen and (min-width: 320px)  and (max-width: 374px) {
	        .svgbox3, .layerbox3{ width:320px; height:360px;  }
            .svgbox2, .layerbox2{ width:320px; height:360px;  }
            .svgbox, .layerbox{ width:320px; height:380px;  }
                		
            .textbox2 { width:310px; top:320px; top:360px;}
            .textbox2 .label { font-size: 14px; line-height: 14px; }
            .textbox2 p { font-size: 13px; line-height: 15px; }
            .textbox h3 { font-size: 14px; line-height: 16px; }
            .textbox p { font-size: 12px; line-height: 14px; }
			.textbox2x span { font-size: 16px; line-height: 18px; }
}*/