/* <!--  Große Bildschirme Headfix, kleinere dann nicht mehr, nur Hochkant bleibt immer  --> */
@media (max-width: 1400px) and (orientation: landscape) {
	.website {
		padding-top: 0px;
	}

	#headfix {
		position: relative;
	}
}

/* <!--  Hintergrund anpassen / Überschriften kleiner  --> */
@media (max-width: 916px) {
	
	#headermain {
		background-size: 200% auto;
	}
	
	#ueberschrift h1 {
		font-size: 1.5em;
	}
}	

/* <!--  Startseite 1-spaltig / Bildergalerie 2-spaltig  --> */
@media (max-width: 916px) and (orientation: landscape) {	
	.starttext, #oeffnungszeiten, .bild {
		clear: both;
		width: 98%;
		margin-bottom: 20px;
	}
		
	.bilddiv {
		width: 48%;
		height: 48%;
	}
	
	.bildname {
		font-size: 0.8em;
	}
	
	#schattenobenmain {
		height: 5px;
	}
	
	#schattenuntenmain {
		height: 8px;
	}
}

/* <!--  Hochkant  --> */
@media (orientation: portrait) {
	.website {
		padding-top: calc(15vw + 57px);
	}
}

/* <!--  Hochkant: Startseite 1-spaltig / Bildergalerie 2-spaltig  --> */
@media (max-width: 916px) and (min-width: 781px) and (orientation: portrait) {	
	.starttext, #oeffnungszeiten, .bild {
		clear: both;
		width: 98%;
		margin-bottom: 20px;
	}
		
	.bilddiv {
		width: 48%;
		height: 48%;
	}
}

/* <!--  Hochkant: Startseite 2-spaltig / Bildergalerie 3-spaltig (wegen schmalem Menü)  --> */
@media (max-width: 780px) and (orientation: portrait) {
	#sidebar {
		margin-left: -200px;
	}
	
	@media (min-height: 553px) {
		#sidebar {
			position: fixed;
		}
		
		#footer {
			float: right;
			width: calc(98% - 70px);
			margin-right: 2%;
		}
	}
	
	#aktuellerMPUP {
		padding-right: 38px;
		width: 94%;
		background-color: rgba(255,255,255,0.98);
		border-radius: 8px 0px 0px 8px;
		margin-top: 3px;
		margin-right: 50px;
		color: Black;
		font-size: 18pt;
		font-weight: bold;
	}
	
	.unterpunkt, #aktuellerunterpunkt {
		display: none;
	}
	
	#inhaltmain {
		width: calc(100% - 70px);
	}
	
	#inhalt {
		min-height: 500px;
	}
	
	#schattenobenmain {
		height: 8px;
	}
	
	#schattenuntenmain {
		height: 10px;
	}
	
	#footertext a {
		font-size: 0.4em;
	}
	
	#einklappen {
		display: block;
	}
	
	#jahreslosung, #seiten {
		display: none;
	}
}

/* <!--  Hochkant: Startseite 1-spaltig / Bildergalerie 2-spaltig  --> */
@media (max-width: 716px) and (orientation: portrait) {	
	#ueberschrift h1 {
		font-size: 1.2em;
	}

	.starttext, #oeffnungszeiten, .bild {
		clear: both;
		width: 98%;
		margin-bottom: 20px;
	}
		
	.bilddiv {
		width: 48%;
		height: 48%;
	}
}

/* <!--  Schmales Menü (jetzt auch für Querformat) / Kleinere Headgrenze/Schatten/Überschriften  --> */
@media (max-width: 600px) {
	#headgrenze {
		height: 20px;
		top: -5px;
	}
	
	#ueberschrift h1 {
		font-size: 1.2em;
	}
	
	#sidebar {
		margin-left: -200px;
	}

	#aktuellerMPUP {
		padding-right: 38px;
		width: 94%;
		background-color: rgba(255,255,255,0.98);
		border-radius: 8px 0px 0px 8px;
		margin-top: 3px;
		margin-right: 50px;
		color: Black;
		font-size: 18pt;
		font-weight: bold;
	}
	
	.unterpunkt, #aktuellerunterpunkt {
		display: none;
	}
	
	#inhaltmain {
		width: calc(100% - 70px);
	}
	
	#schattenobenmain {
		height: 3px;
	}
	
	#schattenuntenmain {
		height: 6px;
	}
	
	#footertext a {
		font-size: 0.4em;
	}
	
	#einklappen {
		display: block;
	}
	
	#jahreslosung, #seiten {
		display: none;
	}
	
	#inhalt h3 {
		font-size: 1.1em;
	}
}

/* <!--  Hochkant: Inhalt Mindesthöhe anpassen  --> */
@media (max-width: 600px) and (orientation: portrait) {
	.website {
		padding-top: calc(15vw + 45px);
	}
	
	#inhalt {
		min-height: 400px;
	}
}

/* <!--  Hochkant: Bildergalerie Beschriftungsgröße anpassen  --> */
@media (max-width: 500px) and (orientation: portrait) {
	.bildname {
		font-size: 0.7em;
	}
}