/* Leitung3 */

	.bu2{ fill:#FFF;stroke:none;cursor:pointer; opacity:0.1;}	

	.bu{ fill:#FFF;stroke:none;cursor:pointer; opacity:0;}	
	.bu0{ fill:#FFF;stroke:none;cursor:pointer; opacity:0;}	

.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;
		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;
			/*fill:red;*/
	}
	.lable2{
			font-family: aL57, Arial, Helvetica, sans-serif;
			font-size: 16px;
			line-height: 16px;
			fill:#1A171B;
			/*fill:red;*/
	}
	.lable3{
			font-family: aL57, Arial, Helvetica, sans-serif;
			font-size: 14px;
			line-height: 16px;
			fill:#1A171B;
			/*fill:red;*/
	}	
    .svgbox {
    	position: absolute;

    	width:640px;
    	height:660px;           	
    }
    .svgbox2 {
    	position: absolute;
    	width:640px;
    	height:660px;           	
    }
    .svgbox3 {
    	position: absolute;
    	width:640px;
    	height:660px;           	
    }
	.container {
	    width: 100%;
	    height: 0;
	    padding-left: 0%;
	    margin-left: 0%;
	    padding-top: 96%;
	    padding-top: 110%;
	    position: relative;
	}
	
	svg {
		
	    position: absolute;
	    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) {	
	.mm{}
	.svgbox3, .layerbox3 { width:486px; height:530px;  }	
	.svgbox2, .layerbox2 { width:748px; height:820px;  }
	.layerbox2 { margin-left:10px; }
	.svgbox3, .layerbox3 { width:748px; height:820px;  }
	.layerbox3 { overflow-y:scroll; width:auto; height:530px; }
	.svgbox3 .container{ height:820px;}
	.svgbox2, .layerbox2 { width:748px; height:820px;  }
	.layerbox { margin-left:auto;margin-right:auto;  top:10px;}
	.svgbox, .layerbox { width:748px; height:820px;  }
	svg .nummer,svg .nummer1,svg .nummer2 { font-size: 10px;}
	#legende2 {display:none;}
	#legende1 {display:block;}
	
	.lable2{ font-size: 14px; }
	.lable{ font-size: 5px; } 	
	.lable3{ font-size: 10px; }             
    .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: 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: 14px; line-height: 16px; }
    .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; }
}

/* 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;  }
            .svgbox, .layerbox{ width:390px; height:422px;  }
            .textbox2 { width:365px; top:378px;}
            .textbox2 .label { font-size: 14px; line-height: 14px; }
            .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 (min-width: 320px)  and (max-width: 374px) {
	        .svgbox3, .layerbox3{ width:320px; height:360px;  }
            .svgbox2, .layerbox2{ width:320px; height:360px;  }
            .svgbox, .layerbox{ width:340px; height:380px;  }
            .textbox2 { width:310px; top:320px;}
            .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; }
}