@charset "UTF-8";
/* CSS Document */



.Kartenbox { 
	float:left;
	margin:0;
	padding:0;
	width:100%;
	height:1045px;
	border:1px solid rgba(152,152,152,1.00);
} 

/* ======================================= iFrame-Seiten ======================================== */


#Karte01, .target-box { width:1138px; height:1043px; }

#Karte02, .target-box02 { width:570px; height:522px; }

.targetPoints { width:1140px; }

.targetPoints02 { width:570px; }


#Zoom {
	position:absolute;
	width: 40px;
	margin:10px;
	text-align:center;
	background:white;
	border:1px solid rgba(96,96,96,1.00);
	z-index:45;
	display:none;
}

#Zoom a i.fa {
	font-size:30px;
	padding:5px;
}



.Kartenrahmen {
    position: absolute;
    z-index: 1;
	width:100%;
	height:100%;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
    background-position: left top !important;
}

#Karte01,#Karte02 {
	
}

.target-box {
	position:absolute;
	margin:0;
	z-index:2;
}

.targetPoints { 
	float:left;
	z-index:46;
	top:0;
}

.target img, .target02 img { width:100%; height:auto; }

.target img { border-radius:11px; }

.target02 img { border-radius:5.5px;  }

.target { 
	position:absolute;
	width:22px;
	height:22px;
	border-radius:11px;
}

.target02 { 
	position:absolute;
	width:11px;
	height:11px;
	border-radius:5.5px;
}

/* ======================================================================== */
/*								RESPONSIVE 								    */
/* ======================================================================== */

@media(min-width:992px) and (max-width:1199px){ 
	
	.Kartenbox {width:940px; height:861.5px;}
	
	#Karte01, .target-box { width:938px !important; height:860px !important; }
		
	.target { 
		width:20px;
		height:20px;
		border-radius:10px;
	}
}
@media(min-width:768px) and (max-width: 991px){ 
	
	.Kartenbox {width:720px; height:660px;}
	
	#Karte01, .target-box { width:718px !important; height:658px !important; }
		
	.target { 
		width:15px;
		height:15px;
		border-radius:7.5px;
	}
}
@media(min-width:640px) and (max-width: 767px){ 
	
	.Kartenbox {width:610px; height:559px;}
	
	#Karte01, .target-box { width:608px !important; height:557px !important; }
		
	.target { 
		width:12px;
		height:12px;
		border-radius:6px;
	}
}
@media(min-width:600px) and (max-width: 639px){ 
	
	.Kartenbox { width:570px; height:522px;}
	
	#Karte01, .target-box { width:568px !important; height:520px !important; }
		
	.target { 
		width:11px;
		height:11px;
		border-radius:5.5px;
	} 
}
@media(min-width:568px) and (max-width: 599px){ 
	
	.Kartenbox {width:538px;height:493px;}
	
	#Karte01, .target-box { width:536px !important; height:491px !important; }
		
	.target { 
		width:11px;
		height:11px;
		border-radius:5.5px;
	} 
}
@media(min-width:414px) and (max-width: 567px){ 
	
	.Kartenbox {width:384px; height:352px;}
	
	#Karte01, .target-box { width:382px !important; height:350px !important; }
		
	.target { 
		width:7px;
		height:7px;
		border-radius:3.5px;
	}
}
@media(min-width:375px) and (max-width: 413px){ 

	.Kartenbox {width:345px; height:316px;} 
	
	#Karte01, .target-box { width:343px !important; height:314px !important; }
		
	.target { 
		width:6px;
		height:6px;
		border-radius:3px;
	}
}
@media(min-width:360px) and (max-width: 374px){ 
	
	.Kartenbox {width:330px; height:303px;} 
	
	#Karte01, .target-box { width:328px !important; height:301px !important; }
			
	.target { 
		width:6px;
		height:6px;
		border-radius:3px;
	} 
}
@media(min-width:320px) and (max-width: 359px){ 
	
	.Kartenbox {width:290px; height:266px;} 
	
	#Karte01, .target-box { width:288px !important; height:264px !important; }
		
	.target { 
		width:5px;
		height:5px;
		border-radius:2.5px;
	} 
}

/* ============================================================== */
/* 							INFO-POPUP 							  */
/* ============================================================== */
.INFO, .INFO2 {
	position:absolute;
	padding:8px;
	background:rgba(255,248,183,1.00);
	border: 1px solid rgba(96,153,86,1.00);
	border-radius:6px;
	font-size:14px;
	width:200px;
	/*z-index:2222222222 !important;*/
	box-shadow: 3px 7px 4px 0px rgba(0,0,0,0.30);
	display:none;
}
/* =============================================== Ausrichtung links */
.INFO { margin-top:-21px; margin-left:21px; }
.INFO2 { margin-top:-10px; margin-left:10px; }
/* =============================================== Ausrichtung rechts */
.INFO.right 	{ margin-left:-218px; }
.INFO2.right 	{ margin-left:-207px;}
/* =============================================== Ausrichtung unten */
.INFO.bottom  	{ margin-left:-111px; margin-top:-120px; }
.INFO2.bottom 	{ margin-left:-105px; margin-top:-110px; }