@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400'); /*Schrift-Import*/

html{
	min-height:100%; /*Seite auf Browserfenster erweitern*/
	/*Umstellen des Box-Models (Sollte man hier machen, weil einige Browser es hier erwarten*/
	-moz-box-sizing:border-box; /*Holt alte Mozilla-Browser an Board*/
	-webkit-box-sizing:border-box; /*Holt alte Chrome- und Safari-Browser an Board, glaube ich*/
	box-sizing:border-box;  /*Die aktuellste Ansage zuletzt. Bei Browsern, die mehrere Anweisungen verstehen, überschreibt das die alten*/
	/*damit das Layout bei kurzen Seiten ohne Scrollbalken nicht springt*/
/*	overflow-x:scroll;*/
	overflow-y:scroll;
	margin-bottom:1px; /*damit das auch bei alten Browsern funktioniert*/
	/*Flächenfarben*/
	--backdrop: #9a0259;	/*Brombeer*/
	--background: #fff;		/*fast weiß*/
	/*Schriftfarben*/
	--lightscript: #fff;
	--mediumscript: #807e81;
	--darkscript: #4a4a4a;
	/*Standard-Abstände*/
	--standardpadding-sides: 2em;
	--standardpadding-updown: 1em;
	--standardmargin:1em;
	--imagepadding:0.5em;
	}

*{  /*erstmal alle Abstände killen, um sie neu aufzubauen*/
	margin:0;
	padding:0;
	/*Umstellen des Box-Models (Sollte hier eigentlich genügen, aber wir haben es bei html definiert, müssen es daher hier ererben.)*/
	-moz-box-sizing:inherit;
	-webkit-box-sizing:inherit;
	box-sizing:inherit;
}

body{
	font-family: 'Source Sans Pro', sans-serif; 
	font-size: 1.125em;			/*18px*/
	background: var(--backdrop);
	}

/*Die lightbox (Galerie) bezieht sich auf den Body und muss die volle Breite behalten, während die Seite ansonsten schmaler sein soll. Daher klemmen die folgenden Einstellungen am eigens dafür eingebauten div-Container, nicht am body.*/
#aussen{
	max-width:64em;
	margin: 0 auto;			
	/*oben/unten: kein Abstand*/
	/*rechts/links: automatische gleiche Abstände zum Browserrand (zentriert)*/ 
}

header{
	display:block;		/*... weil alte IEs main nicht kennen*/
	background:var(--backdrop);
	margin:0;  
	font-size:1.2em;			/*22px*/
	}

/*Navitation Anfang*/

ul{
	overflow:hidden;
	list-style-type:none;  			/*entfernt die Punkte vor der Aufzählung*/
}


header ul{
	display: flex;
	justify-content: space-between;		/*gleichmäßige Verteilung der Items*/
}
header li{
	flex:auto; 
	padding:0.5em 0;
	background:var(--background);
	text-align:center;
	border-left:1px solid var(--backdrop); /*Trennlinien*/
	border-right:1px solid var(--backdrop);
	border-bottom-left-radius: 5px;		/*unten abgerundete Ecken*/
	border-bottom-right-radius: 5px;
}

a{	
	text-decoration:none;/*erstmal nackig machen*/
	color:var(--darkscript);
	padding:0;
} 	
a:focus, a:hover, a:active{
	text-decoration:underline;
}	
#activeNav{				/*Hervorhebung des aktiven Navigationspunkts*/
	color:var(--lightscript);
	background:var(--backdrop);
}
a.nav-show, a.nav-hide{	/*Navigations-Hamburger-Icon verstecken, wenn die normale Navigation gezeigt wird.*/
	display:none;
	margin:0.2em;
}

/*Navigation Ende*/	
/*Anfang Inhalt*/

main{
	display:block;		/*... weil alte IEs main nicht kennen*/
	background:var(--backdrop);
/*	min-height:20em;  */  /*Damit es auch bei wenig Inhalt ordentlich aussieht, dann taucht evtl. der Footer ab.*/
	/*Box wächst mit dem Text mit*/
}
main h1{
	margin-bottom:0.6em;
	color:var(--mediumscript);
	font-size:2em;
}
main h2{	
	margin: var(--standardmargin) 0 calc(0.5*var(--standardmargin)) 0;
	color:var(--darkscript);
	font-size:1.375em;

}
p{
	margin-bottom:var(--standardmargin);
}
img{
	width:100%;  	/* bezogen auf die Breite des umgebenden Elements */
	height:auto;    /* auto: Höhe skaliert mit */
	}

figcaption{
	color:var(--mediumscript);
	background:var(--background);
	font-size:0.9em;
	padding: 0.5em 0 1em 0;
}	
#Titel_Bild{
	float:left;
	width: calc(100% - 2 * var(--standardmargin));
	background:var(--background);
	margin: calc(2 * var(--standardmargin)) var(--standardmargin);
	padding:var(--standardpadding-updown) var(--standardpadding-sides);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); /*Schatten unter der weißen Box*/
	position:relative;		/*Weil z-index sonst nicht funktioniert*/
	z-index:0;				/*Weil der Bild-Schatten sonst hinter dem Bild verschwindet und nicht sichtbar ist.*/
}

/*Ordentliches Anordnen der Zeitangaben und Icons unter dem Hauptbild*/
#Zeiten{	
	display: flex;
	justify-content: space-between;
	text-align: center;
	padding-top:var(--standardpadding-updown);
	}
#Zeiten :first-child{
	text-align:left;
	vertical-align:top;			/*überhaupt keine Ahnung, warum das funktioniert. War ein Unfall.*/
	}
#Zeiten :last-child{
	text-align:right;
}
#Zeiten img{	/*Zeit-Icons*/
	width: 20px; 
	height: auto;
	margin-right:0.6em;
}

#Rezept{ /*umfasst Zutaten, Geräte, Zubereitung, Anmerkungen und Quelle*/
	float:left;
	background:var(--background);
	box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.5); /*Schatten unter den weißen Boxen*/
	padding:0 var(--standardpadding-sides);
	margin:0 var(--standardmargin); /*gemeinsamer seitlicher Abstand für die weißen Boxen*/ 
}
#Zubereitung_Anmerkung,#Zutaten_Geraete{
/*	display:block;*/
	float:left;
	position:relative;		/*weil z-index sonst nicht funktioniert*/
	z-index:0;				/*Weil der Bild-Schatten sonst hinter dem Bild verschwindet und nicht sichtbar ist.*/
}
#Zubereitung_Anmerkung{
	width:70%;
}
#Zutaten_Geraete{
	width:30%;
	padding-right: var(--standardpadding-sides); /*Abstand zum Rezept*/
}
#Zutatenliste, #Geraete, .IHVZCats, .IHVZItems{
	list-style-type: disc;
	padding-left:1em;		/*Einrückung wegen list-style-type*/
	margin-bottom:var(--standardmargin);
}

#Zutatenliste ul, #Geraete ul{
	list-style-type: circle;	/*für nestes lists*/
}

/*Anodrnung der kleinen Bilder*/
.Bilderriegel{
	display:flex;
	justify-content: space-between;
}
.BilderriegelL{
	padding:0 var(--imagepadding) var(--imagepadding) 0;
}
.BilderriegelR{
	padding:0 0 var(--imagepadding) var(--imagepadding);
}

/*Innenschatten der Bilder*/
.InsetShadow{
	margin-bottom:-5px;      /*Warum auch immer!!*/
	box-shadow: inset 0px -2px 10px 8px rgba(0, 0, 0, 0.2);
}
.setbackImg{
	margin:0;
	position:relative;		/*weil z-index sonst nicht funktioniert*/
	z-index: -1;			/*damit das Bild hinter dem Inset-Shadow sitzt.*/
}

/*Footer-Navigation*/
#nav_footer_flexbox{
	clear:both;   /*damit der Footer unten, unter den anderen Floats bleibt*/
	display: flex;
	justify-content: space-between;
	position: sticky;	/*damit der Footer nicht mit dem Seitenende hochfährt, sondern unten bleibt.*/
	bottom:0;
	background:var(--backdrop);	
	box-shadow: 0px -4px 10px 0 rgba(0, 0, 0, 0.5); /*Schatten auf den Inhalt*/
	}
#nav_footer_flexbox li{
	color:var(--lightscript);
	margin-top:0.2em;
}
#nav_footer_flexbox img{ 	/*die Navi-Icons*/
	width:1.5em; 
	height:auto;
	margin: 0 0.6em;
}

/*Das Inhaltsverzeichnis*/
.IHVZ, .IHVZ a, .IHVZ h1, .IHVZ h2{
	color:var(--lightscript);
}
.IHVZ{
	display:flex;
	justify-content: space-around;
	margin:var(--standardmargin);
}
.IHVZItems{
	list-style-type: circle;
}
.IHVZItems li{
	margin:0.5em 0;
}

/* Überbleibsel? */
#floatunderfooter{float:left;}



/* mobile Version */

@media screen and (max-width: 689px){    /*Navigations-Breakpoint*/
	header ul{
		display: block;
	}
	header li{
	/*	float:none;		/*Überbleibsel?*/
		padding:0.5em 1em;
		text-align:left; /*rückt bei Bedarf die Navigations-Einträge nach links*/
		border-bottom:1px solid var(--backdrop); /*Trennlinine zwischen Nav-Items*/
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 0px;	/*entfernt die bisher abgerundeten Ecken der Nav-Items*/
	}
	header ul:last-child{	/*Beim letzten Nav-Item wird doch wieder abgerundet.*/
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		border-bottom:1px solid var(--background);
	}
	#activeNav{	/*Sonderbehandlung für aktives Nav-Item (das kein Link ist)*/
		display:block;
	}
	a.nav-show{ /*Platzieren des Navigation-Ausklapp-Icons.*/
		display:block;
		width:1.5em;
	}

	/*Animation*/
	.nav-slider{	/*normalerweise Navigations-Items ausblenden*/
		display:none;
	}
	#nav-open:target .nav-slider{ 	/*Bei Klick auf Navigation-Ausklapp-Icon Nav-Items anzeigen.*/
		display:block;
	}
	#nav-open:target a.nav-show{	/*Bei ausgeklappter Navigation Ausklapp-Icon verbergen.*/
		display:none;
	}
	#nav-open:target a.nav-hide{	/*Bei ausgeklappter Navigation Einklapp-Icon anzeigen.*/
		display:block;
		width:1.5em;
	}
	#nav-open:target #Titel_Bild{	/*Bei ausgeklappter Navigation Abstand zur Navigation nachjustieren.*/
		margin-top:calc(2 * var(--standardmargin));
	}
	#nav-open:target .IHVZ{			/*Bei ausgeklappter Navigation Abstand zur Navigation nachjustieren.*/
		margin-top:var(--standardmargin);
	}
	#Titel_Bild, .IHVZ{				/*Bei eingeklappter Navitation Abstand zur Navigation nachjustieren.*/
		margin-top:0px;
	}
	
	/*Schönheitskorrekturen*/
	.nav-slider li:first-child{		/*optische Trennlinie für wenn oberstes Nav-Item aktiv ist*/
		border-top:1px solid var(--background);
	}
	.nav-slider li:last-child{		/*optische Trennlinie für wenn unterstes Nav-Item aktiv ist*/
		border-bottom:1px solid var(--background);
	}
}

@media screen and (max-width: 630px){    /*Inhalts-Breakpoint, ordnet alles untereinander an.*/
	#Zubereitung_Anmerkung{
		width:60%;
	}
	#Zutaten_Geraete{
		width:40%;
		padding-right: calc(0.8*var(--standardpadding-sides)); /*Abstand zum Rezept*/
	}
}

@media screen and (max-width: 549px){    /*Inhalts-Breakpoint, ordnet alles untereinander an.*/
	.IHVZ{display:block;}
	#Zubereitung_Anmerkung{width:100%;}
	#Zutaten_Geraete{
		width:100%;
		padding-right: 0;
	}
}

/*Ende Inhalt*/