body  {
	color:midnightblue;
	font-family:Arial, Helvetica, Sans-Serif;
	overflow-y: scroll;
	margin: 0;
	margin: auto;
	}	
	
	h1  {
	font-size: 20px;
	font-weight:bold;
	font: 1000 20px/1.3 "Lato", sans-serif;
	color: midnightblue;
	}
					
	h3 {
	margin-bottom: -10px;
	}

	a:visited {
	text-decoration: none;
	color: blue;}
	
	a:active {
	text-decoration: none;
	color: blue;}
	
	a:link {
	text-decoration: none;
	color: blue;}
	
	a:hover {
	text-decoration: none;
	color: red;}
	
	a.footer:link {color: white;}
	a.footer:visited {color: white;}
	a.footer:active {color: white;}
	a.footer:hover {text-decoration: none; color: gray;}

	a.mail:link {color: white;}
	a.mail:visited {color: white;}
	a.mail:active {color: white;}
	a.mail:hover {text-decoration: none; color: gray;}
	
	
li {
list-style-image: url(hakenrot.gif);
padding-left: 10px;
}


img {
	webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px 10px 10px 10px;
    -moz-box-shadow: 10px 10px 20px gray;
    -webkit-box-shadow: 10px 10px 20px gray;
    box-shadow: 10px 10px 20px gray;
}

.schatten{
	-moz-box-shadow: 10px 10px 20px gray;
    -webkit-box-shadow: 10px 10px 20px gray;
    box-shadow: 10px 10px 20px gray;
}


/* hover Selectfeld */
select:hover {
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
}


/* Höhenabstand Selectfeld */
option {
  padding: 0.2em 0.2em 0.2em 0.9em;
}

	.station {
		width: 348px;
		padding-left: 5px;
		height: 40px;
		font-size: 14px;
		color:midnightblue;
		cursor: pointer;
	}
		
		.tag {
		width: 60px;
		padding-left: 5px;
		margin-right: 7px;
		height: 40px;
		font-size: 14px;
		color:midnightblue;
		cursor: pointer;
	}

		.monat {
		width: 160px;
		padding-left: 5px;
		margin-right: 7px;
		height: 40px;
		font-size: 14px;
		color:midnightblue;
		cursor: pointer;
	}

		.zeit {
		width: 105px;
		padding-left: 5px;
		height: 40px;
		font-size: 14px;
		color:midnightblue;
		cursor: pointer;
	}
	
	#dias {
	max-width: 400px;
	}
	
	.none {
	display: none;
	}
	

		
	@media screen and (max-width: 4000px) {

	html{
	background: url('pics/back/sonnenuntergang.webp') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}
	
			
	body:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
	  background: url('pics/back/sonnenuntergang.webp') center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
	  }
	
	}

	@media screen and (min-width: 1581px) {

	.footerdivx {
									
					img {				
					-moz-box-shadow: 0px 0px 0px;
					-webkit-box-shadow: 0px 0px 0px;
					box-shadow: 0px 0px 0px;
					}
						}
						}
						
						
					@media screen and (max-width: 900px) {
								
					.footerdivx {
									
					img {				
					-moz-box-shadow: 0px 0px 0px;
					-webkit-box-shadow: 0px 0px 0px;
					box-shadow: 0px 0px 0px;
					}
						}
						}

						
					@media screen and (min-width: 901px) and (max-width: 1580px) {
						
							.footerdivx {
									
							display:none;
						}
						}
						
					
						
		
	@media screen and (min-width: 901px) {
	
	body  {
	font-size:1em;
	margin-top:40px;
	
    animation: einblenden 1.5s;

	}
	
	
	
	@keyframes einblenden {
    from { opacity:0; }
    to { opacity:1; }
	}


	
		#footer {
		position: fixed;
		background-color: black;
		font-size: 13px;
		text-align: center;
		color: white;
		opacity: 0.8;
		bottom: 0px;
		width: 100%;
		}
	
	

			#divmitte {
				padding: 10px;
				margin: 0 auto;
				display: inline-block;
				}


				.footerdiv {
					margin-left: 50px;
					width: 180px;
					line-height: 20px;
					text-align: left;
					float: left;
												
					div::first-letter {
					font-size: 100%;
					font-weight: normal;
					}
					
					}


					.footerdivwhatsapp {
					margin-left: 50px;
					width: 120px;
					line-height: 20px;
					text-align: center;
					float: left;
					
					img {				
					-moz-box-shadow: 0px 0px 0px;
					-webkit-box-shadow: 0px 0px 0px;
					box-shadow: 0px 0px 0px;
					}
					
					}
					
														
										

							.foobar + label + div { display: none }
							.foobar:checked + label + div { display: block }

							input { vertical-align:middle;line-height:1em; }
							label { vertical-align:middle; }

								#ueberschrift {
									top: 30px;
									margin-left: 50px;
									line-height: 18px;
									width: 850px;
								}

	#t750 {
		
		background-color: rgba(255,255,255,0.9);
		padding: 15px;
		margin-bottom: 80px;
		margin-left: 50px;
		line-height: 28px;
		width: 50%;
		max-width: 1000px;
		overflow: hidden;
		hyphens: auto;
		margin-bottom: 200px;
		webkit-border-radius: 10px;
		-khtml-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px 10px 10px 10px;

		}
		
	.t750 {
		
		background-color: rgba(255,255,255,0.9);
		padding: 15px;
		margin-bottom: 80px;
		margin-left: 50px;
		line-height: 28px;
		width: 50%;
		max-width: 1000px;
		overflow: hidden;
		hyphens: auto;
		margin-bottom: 200px;
		webkit-border-radius: 10px;
		-khtml-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px 10px 10px 10px;

		}		

			#t500 {

				background-color: rgba(255,255,255,0.9);
				padding: 15px;
				margin-bottom: 80px;
				margin-left: 50px;
				line-height: 28px;
				width: 430px;
				overflow: hidden;
				hyphens: auto;
				webkit-border-radius: 10px;
				-khtml-border-radius: 10px;
				-moz-border-radius: 10px;
				border-radius: 10px 10px 10px 10px;
				}
				
				.t500 {

				background-color: rgba(255,255,255,0.9);
				padding: 15px;
				margin-bottom: 80px;
				margin-left: 50px;
				line-height: 28px;
				width: 430px;
				overflow: hidden;
				hyphens: auto;
				webkit-border-radius: 10px;
				-khtml-border-radius: 10px;
				-moz-border-radius: 10px;
				border-radius: 10px 10px 10px 10px;
				}
				
				
			
				.autobild {
				width: 400px;
				}


	#tm {

	}


	.tabelle25 {
	
		line-height: 25px;
	}

	#z {
	
	text-align: center;
	
	}
	
					.x {
					margin-left: 5px;
					margin-top: 0px;
					opacity: 0.8;
					z-index: 2;
					position: fixed;
					animation: einblendenx 10.5s;
					
					img {				
					-moz-box-shadow: 0px 0px 0px;
					-webkit-box-shadow: 0px 0px 0px;
					box-shadow: 0px 0px 0px;
					}
					
					}
	
	
					
						@keyframes einblendenx {
						from { opacity:0; }
						to { opacity:0.7; }
						}
					
						.kreis {
						background-color: white;
						position: absolute;
						width: 40px;
						height: 40px;
						margin-top: 0px;
						margin-left: 5px;
						text-align: center;
						border-radius: 100px;
						opacity: 0.7;
						z-index: 1;
						pointer-events: none;
						position: fixed;
						animation: einblendenx 10.5s;

								@keyframes einblendenx {
								from { opacity:0; }
								to { opacity:0.7; }
								}
						}
						
	}


		@media screen and (min-width: 1280px) and (max-width: 1580px) {


		.tpr1 {
			width: 350px;
			margin: 0 auto;
			font-size: 1.0em;
			margin-bottom: 40px;
		}

		.tpr2 {
			width: 360px;
			margin: 0 auto;
			font-size: 1.0em;
			line-height: 25px;
		}
		
		#t500 {
		margin-bottom: 200px;
		}
		
		.t500 {
		margin-bottom: 200px;
		}
		
		}


			@media screen and (min-width: 1581px) {

				.tpr1 {
					width: 350px;
					float: left;
					font-size: 1.0em;
					margin-right: 80px;
					margin-bottom: 20px;
				}

				.tpr2 {
					width: 350px;
					float: left;
					font-size: 1.0em;
					line-height: 28px;
				}
				
						
					}


					@media screen and (min-width: 901px) and (max-width: 1279px) {


					#t750 {
						width: 765px;
						}
					.t750 {
						width: 765px;
						}
						
					#t500 {
					width: 400px;
					}
					
					.t500 {
					width: 400px;
					}
					

					.tpr1 {
						width: 350px;
						margin: 0 auto;
						font-size: 1.0em;
						margin-bottom: 40px;
					}

					.tpr2 {
						width: 350px;
						margin: 0 auto;
						font-size: 1.0em;
						line-height: 26px;
					}

					.tabelle25 {
						line-height: 25px;
					}

					#z {
					text-align: center;
					}

					.bottom {margin-bottom:100px;}


					}






@media screen and (max-width: 900px) {


body  {
margin-top: 40px;
font-size:1em;
width: 100%;
}



	a.footer:link {color: blue;}
	a.footer:visited {color: blue;}
	a.footer:active {color: blue;}
	a.footer:hover {text-decoration: none; color: gray;}
	
	a.mail:link {color: blue;}
	a.mail:visited {color: blue;}
	a.mail:active {color: blue;}
	a.mail:hover {text-decoration: none; color: gray;}


.foobar + label + div { display: none }
.foobar:checked + label + div { display: block }

input { vertical-align:middle;line-height:1em; }
label { vertical-align:middle; }



#ueberschrift {
	top: 30px;
	margin-left: 50px;
	line-height: 18px;
	width: 850px;
}


#t750 {
	padding: 5px;
	margin-bottom: 80px;
	line-height: 32px;
	width: 95%;
	overflow: hidden;
	hyphens: auto;
	background-color: rgba(255,255,255,0.9);
	margin: auto;
	webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px 10px 10px 10px;
}

.t750 {
	padding: 5px;
	margin-bottom: 80px;
	line-height: 32px;
	width: 95%;
	overflow: hidden;
	hyphens: auto;
	background-color: rgba(255,255,255,0.9);
	margin: auto;
	webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px 10px 10px 10px;
}



	#t500 {
		padding: 5px;
		margin: auto;
		margin-bottom: 100px;
		width: 95%;
		max-width: 400px;
		hyphens: auto;
		background-color: rgba(255,255,255,0.9);
		webkit-border-radius: 10px;
		-khtml-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px 10px 10px 10px;		
		}
		
		.t500 {
		padding: 5px;
		margin: auto;
		margin-bottom: 100px;
		width: 95%;
		max-width: 400px;
		hyphens: auto;
		background-color: rgba(255,255,255,0.9);
		webkit-border-radius: 10px;
		-khtml-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px 10px 10px 10px;		
		}

.autobild {
max-width: 400px;
}


.tpr1 {
	width: 350px;
	margin: auto;
	font-size: 1.0em;
	margin-bottom: 80px;
}

.tpr2 {
	width: 345px;
	margin: auto;
	font-size: 1.0em;
	line-height: 26px;
}

.tabelle25 {
	line-height: 25px;
}

#z {
text-align: center;
}


.button:hover {
    background-color: lightblue;
    color: red;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
 }

.button4 {
	color: midnightblue;
    font-size: 1em;
    width: 255px;
    border: none;
    padding: 3px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 30px;
    transition-duration: 0.4s;
    border-radius: 12px;
	}
 
 .button5 {
	color: midnightblue;
    font-size: 0.9em;
    width: 255px;
    border: none>;
    padding: 3px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 30px;
    transition-duration: 0.4s;
    border-radius: 12px;
	}
	
	.none799 {
	display: none;
	} 
	

 .foto {
		  margin: auto; 
		  width: 96%; 
		  max-width: 800px; 
		  text-align: center;		  		
		  }
		  
	#footer {
	width:255px;
	margin:auto;
	margin-top: 80px;
	margin-bottom: 800px;
	}

	.footer {
	background-color: rgba(235,235,235,0.8);
	}

	.footerdivwhatsapp {
									
					img {				
					-moz-box-shadow: 0px 0px 0px;
					-webkit-box-shadow: 0px 0px 0px;
					box-shadow: 0px 0px 0px;
					}
						}

		

					.x {
					display:none;
					}
					
						.kreis {
						display:none;
						}
						
						

}



@media screen and (min-width: 901px) {
	
	.abstand100 {
	margin-bottom: 100px;	
	}

}


	@media screen and (max-width: 400px) {


	#dias {
	margin: auto;
	width: 98%;
	
	}
	
	}
	
	
	


	  
		  @media screen and (min-width: 901px) {

		 .foto {
		  display: none;
		  		
		  }
		
		  }
		  
		  

/* submit button */
.btn {
    background-color: blue;
    color: white;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}

.btn:hover {
    opacity: 1;
}

.btn {
    webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px 10px 10px 10px;
    -moz-box-shadow: 10px 10px 20px gray;
    -webkit-box-shadow: 10px 10px 20px gray;
    box-shadow: 10px 10px 20px gray;
}


		  @media screen and (min-width: 1000px) {

				.footerdiv {
					margin-left: 50px;
					width: 200px;
					line-height: 20px;
					text-align: left;
					float: left;
				}

					.footerdivwhatsapp {
					margin-left: 50px;
					width: 150px;
					line-height: 20px;
					text-align: center;
					float: left;
					
					img {				
					-moz-box-shadow: 0px 0px 0px;
					-webkit-box-shadow: 0px 0px 0px;
					box-shadow: 0px 0px 0px;
					}
										}
				
			}
			
			
			
			
			
		@media (prefers-color-scheme: light) {

		.t750 {
			background-color: rgba(235,235,235,0.9);
			}
			
			.t500 {
			background-color: rgba(235,235,235,0.9);
			}
			
		}
		
		
		
		@media (prefers-color-scheme: dark) {

		.t750 {
			background-color: rgba(235,235,235,0.9);
			}
			
			.t500 {
			background-color: rgba(235,235,235,0.9);
			}
			
			}

	
	
	.tooltip {
    position: absolute;
    margin-left: 9px;
    display: inline-block;
    margin-top: -4px;
    border-bottom: 1px dotted blue;
    border-radius: 50%;
    height: 16px;
    width: 16px;
    background-color: white;
    color: blue;
    font-size: 14px;
    font-weight: bold;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 180px;
    z-index: 1;
	background-color: white;
    color: black;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: -370%;
    left: 50%;
    margin-left: -100px;
    font-size: 14px;
    line-height: 17px;
    font-weight: normal;
    hyphens: auto;

    /* Fade in tooltip - 2 Sekunden 100% opac: */
    opacity: 0;
    transition: opacity 2s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}	


		@media screen and (min-width: 1335px) {

		.t750 {
		width: 1000px;	
		}
	
		}