* {
	outline: none;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
		    box-sizing: border-box;
}

img {
	vertical-align: bottom;
}


html, body {
	margin:0;
	padding:0;
	height: 100%;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
	font-size: 101%;
	color: #6e6e6e;
	overflow: hidden;
}

	#Badge {
		margin: 0px auto;
		width: 100%;
		max-width: 1400px;
		position: relative;
		z-index: 102;
		text-align: right;
	}
	
		#Badge img {
			margin: 0px 70px 0px 0px;
		}

	#Map {
		margin: 0px auto 0px auto;
		width: 100vw;
		max-width: 1400px;
		height: 600px;
		overflow: hidden;
		position: relative;
	}
	
		#Legend {
			position: absolute;
			bottom: 10px;
			right: 10px;
			width: 200px;
			height: 160px; 
			border: 2px #FFF solid;
			z-index: 100;			
			background: url("../Gfx/legende_03.png") no-repeat;
			background-size: 100%;
			-webkit-box-shadow: 0 0 4px 0 #A3A3A3;
			        box-shadow: 0 0 4px 0 #A3A3A3;
		}
		
		#TimeInfo {
			position: absolute;
			bottom: 10px;
			margin: 0px 0px 0px 10px;
			width: auto;
			height: 44px; 
			font-size: 12px;
			z-index: 100;						
		}

			#TimeInfo p,
			#TimeInfo a p { margin: 0px; }
		
		.TimeInfoContent {
			margin: 0px 5px 0px 0px;
			padding: 10px;
			float: left;
			width: 190px;
			background: #FFFFFF;
			border: solid 2px #db9e26;
			-webkit-box-shadow: 0 0 4px 0 #A3A3A3;
			        box-shadow: 0 0 4px 0 #A3A3A3;
		}
		
			.MagnificInline {
				margin: 0px 0px 0px 0px;
				padding: 0px 20px 0px 35px;
				width: auto;
				height: 30px;
				line-height: 15px;
				display: block;
				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeBAMAAADJHrORAAAAJFBMVEUAbqv///9ElcFmqM3d7PTu9fmt0OTM4u672OmIu9h3stIigbalLEJaAAAAOUlEQVQY02NIYEAGbAy0ASbOqPxAUXQ+hnp8QFFQCIVviMbnRuMz0JlvLigyAZm/UFCwgYEuAD0+AddnBnFZcefiAAAAAElFTkSuQmCC');
				background-repeat: no-repeat;
				text-decoration: none;
				color: #6e6e6e;
			}
	
		#Overview {
			position: absolute;
			bottom: 10px;
			right: 10px;
			width: 180px;
			height: 120px;
			border: 2px #6e6e6e solid;
			z-index: 100;			
			background: url("../../img/karte.jpg");
			background-repeat: no-repeat;
			background-size: 100%;
			-webkit-box-shadow: 0 0 4px 0 #A3A3A3;
			        box-shadow: 0 0 4px 0 #A3A3A3;
		}
		
			#OverviewInner {
				width: 100%;
				height: 100%;
				position: relative;
				
			}
			
				#OverviewHolder {
					position: absolute;
					width: 140px;
					height: 60px;
					border: 1px #e3051a solid;
					cursor: grabbing;
				}
			
	
		#MapContentHolder {
			margin: -600px 0px 0px -400px;
			padding: 0px 0px 0px 0px;
			width: 2200px;
			height: 1800px;
			position: relative;
		}
		
			#MapContent {
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				width: 1800px;
				height: 1200px;
				position: relative;
				cursor: move;

			}
			
				.MapContentItem {
					position: absolute;
					top: 9px;
					left: 0px;
					width: 100%;
					height: 100%;
				}
						
					.MapContentItem img {
						max-width: 100%;
						height: auto;
						position: absolute;
					}
	
	#Spacer {
		margin: 0px auto;
		width: 100%;
		max-width: 1400px;
		height: 3px;
		background: #e3051a;
	}
	
	#Navigation {
		margin: 0px auto 40px auto;
		width: 100%;
		max-width: 1400px;
		height: 150px;
		border-bottom: 1px #CCCCCC solid;
		position: relative;
		background: #FFFFFF;

		z-index: 10;
	}
	
		#Calendar {
			width: 90%;
			float: left;
			height: 100%;
		}

			#CalendarInner {
				width: 100%;
				height: 100%;
				position: relative;
			}
		
			#Calendar .Month {
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				width: 11.1%;
				height: 100%;
				float: left;
				text-align: center;
				font-size: 12px;				
				position: relative;
			}

			#Calendar .Month .Title {
				position: absolute;
				left: 50%;
				bottom: 20px;
				width: 16px;
				line-height: 16px;
				white-space: nowrap;
				transform-origin: bottom center;
				-webkit-transform: rotate(-90deg);
				   -moz-transform: rotate(-90deg);
				    -ms-transform: rotate(-90deg);
					 -o-transform: rotate(-90deg);
					    transform: rotate(-90deg);
						   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
			}

			#Calendar .Year {
				padding: 0px 10px;
				position: absolute;
				bottom: 0%;
				top: 100%;
				height: 40px;
				line-height: 40px;
				padding-top: 1%;
				color: #e3051a;
				text-align: center;
			}


			#Calendar .Year.Year2024 { width: 66.7%; border-right: solid; border-color: #CCC; border-width: 0.2px;}
			#Calendar .Year.Year2025 { left: 66.7%; width: 33.4%;}
			
			#Calendar .Month:after{
				content: "";
				width: 1px;
				height: 100%;
				display: block;
				position: absolute;
				right: -1px;
				top: 0px;
				margin-left: -1px;
				background: #CCC;
			}

			
		#sliderHolder {
			position: absolute;
			z-index: 10;
			top: 0px;
			left: 5%;
			width: 90%;
			height: 100%;
		}
		
			#slider {
				height: 100%;
			}
			
				.ui-slider .ui-slider-handle {
					top: 2px !important;
					height: 145px !important;
					width: 72px !important;
					margin-left: -36px !important;			
					background-image: url("../Gfx/Slider.png");
					background-size: 100%;
					cursor: pointer !important;
				}
				
			.BauPhase {
				position: absolute;
				top: 15px;
				padding: 0px 0px;
				height: 23px;
				line-height: 25px;
				text-align: center;
				font-size: 0.7em;
				color: #FFFFFF;
				text-align: left;
			}

				.BauPhase:nth-child(even) { background: #114377;}
				.BauPhase:nth-child(odd) { background: #db9e26; top: 25px;}
				
				/*
				/ Für die Berechnung
				/ in der Zeitleiste ist ein Tag = 0.37%	
				*/

				#BauPhase01 {	left: 0%;	width: 7.77%;	}
				#BauPhase02 {	left: 7.78%;	width: 19.98%;	}
				#BauPhase03 {	left: 27.76%;	width: 5.18%;	}
				#BauPhase04 {	left: 32.94%;	width: 2.59%;	}
				#BauPhase05 {	left: 35.53%;	width: 2.59%;	}
				#BauPhase06 {	left: 38.12%;	width: 2.59%;	}
				#BauPhase07 {	left: 40.71%;	width: 2.59%;	}
				#BauPhase08 {	left: 43.3%;	width: 56.7%;	}


				
	
		.Button {		
			width: 5%;
			height: 100%;
			overflow: hidden;
			float: left;
			display: block;			
			color: #FFFFFF;
			text-decoration: none;
			text-indent: -1000px;
			background-position: center center;
			background-color: #CCC;
			background-repeat: no-repeat;
			-webkit-transition: all 0.3s ease-in-out;
			   -moz-transition: all 0.3s ease-in-out;
			     -o-transition: all 0.3s ease-in-out;
			        transition: all 0.3s ease-in-out;
	}
		
			.Button:hover { background-size: 30px auto;}
		
			#ButtonLeft { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAA9CAMAAABr/+JMAAAAaVBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8G612AAAAInRSTlMAN+MGDPDZzF3169S9o5mDRSAbEsa3fXBVLCcWkGqsqUpMFq5MEQAAALFJREFUOMvdkskOwjAMRJ20TdO9UPZCAf//RxLfx5EiFqHO9V3sN0Ofjen6rYI2BXOLUVYys8Ws55ABIi9olyF0rgKq4Sm545CRUBZBB4iOgvb4aUF2Qmi2wgyhtIJuEA2COogegppcM8zFRTXMJ93w9UeG7/9veIwYrgOqkg1P8Eb8G3aS5BJ3gLvTO0/dCjaAt6lvWm8qtWGav2N9WYv153vWfcS6I916Q0q8Kw3F8gKmfiR6RJEi8QAAAABJRU5ErkJggg==')}
			#ButtonRight { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAA9CAMAAABr/+JMAAAAaVBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8G612AAAAInRSTlMAN+PtBgzZzF311L2jmYNFIBsSxrd9cFUsJxbxkGqsqUpMTGLw+wAAALVJREFUOMvd09kOgjAQhWHKUnZQXBFFnPd/SDtXvZnpiXGJobdfJoF/2ih4TG4LzSoiMopZZ/FFtsIZ1cpgw9jJllWMDxnHyVmykfHEg3kq45WxlS3dMSoJtomz8ixjz4M2k/HAOCsJ9oxH2YaY9OqGAtVv71Vf1lL9/p3qw6sFxtKXE4v3YFN4w/hm+H9DTXBLvAO/O7xzfFdw4QkUXv6/8Pyjwl3gNcaBV1xrhflT2sZEHz1PjiMkVfpZyacAAAAASUVORK5CYII=')}
	
	#BadgeBottom {
		position: fixed;
		left: 50%;
		bottom: 0px;
		width: 128px;
		height: 42px;
		background: #e3051a;
		margin-left: 502px;
	}
	
#controls {
	clear: both;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	position: absolute;
	bottom: 110px;
	margin: 0px 0px 30px 0px;
	font-size: 13px;
	z-index: 101;	
	background-color: white;
	padding: 10px;	
	
}


		#controls .control label {
			padding-left: 35px;
			padding-bottom: 5px;
			padding-right: 5px;
			text-indent: -35px;
			display: inline-block;
		}

		#controls .control input { 
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			border:none;
			border-radius: 0;
			font-size: 1em;
			width: 100%
		}

		/* graceful degradation for ie8 */
		#controls .control input[type='checkbox'],
		#controls .control input[type='radio'] {
			width:auto;
			float:left;
			margin-right: .75em;
			background:transparent;
			border:none;
		}
		
		#controls .control input[type='checkbox']:checked,
		#controls .control input[type='checkbox']:not(:checked),
		#controls .control input[type='radio']:checked,
		#controls .control input[type='radio']:not(:checked) {
			background: transparent;
			position: relative;
			visibility: hidden;
			margin:0;
			padding:0;
		}
			
		#controls .control input[type='checkbox'] + label,
		#controls .control input[type='radio'] + label {
			cursor: pointer;
		}

		#controls .control input[type='checkbox']:checked + label::before,
		#controls .control input[type='checkbox']:not(:checked) + label::before,
		#controls .control input[type='radio']:checked + label::before,
		#controls .control input[type='radio']:not(:checked) + label::before {
			content:' ';
			display:inline-block;
			width: 15px;
			height: 15px;
			position: relative;
			top: 4px;
			border: 1px #CCC solid;
			background: white;
			margin-right: 10px;
			box-shadow: inset 0 0 0 2px #FFFFFF;
		}
		
			
		#controls .control input[type='checkbox']:hover  + label::before,
		#controls .control input[type='radio']:hover  + label::before {
			background: #CCC;
		}
		
		#controls .control  input[type='checkbox']:checked  + label::before,
		#controls .control  input[type='radio']:checked  + label::before {
			background: #e3051a;
		}


.legende {
	position: absolute;
	bottom: 10px;
	margin: 0px 0px 40px -10px;
	width: 300px; 
	font-size: 12px;
	z-index: 100;
}

.ohnenl {
	margin-top: -90px;

}

.ui-tooltip {
	z-index: 100%;
	background: #FFF;
}

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
  font-size: 13px;
  line-height: 17px;
  
}