/*
font-family: 'Comfortaa', cursive;
font-family: 'Open Sans', sans-serif;
font-family: 'Over the Rainbow', cursive;
*/

/*ROOT-VARIABLEN*/
:root {
	--textColor: rgba(0,0,0.0.8);
	--initial-font-color: rgba (0,0,0,0.8);
	--normal-link: rgba(47,79,79,1.0);
	--white-transparent:rgba(255,255,255,0.8);
}



html {font-size:100%; font-size:16px; background:white;font-family: 'Open Sans', sans-serif; scroll-behavior: smooth; scroll-padding-top:5rem;} 
body {width:100%; height:auto; overflow-x:hidden;}
*, *:before, *:after {margin:0; padding:0; box-sizing:border-box;}

img {width:100%; height:auto; border:1px solid var(--textColor); display:block;}



h1 { font-family: 'Over the Rainbow', cursive; line-height:1.2; text-shadow: 10px 10px 10px rgba(0,0,0,0.5); display:flex; flex-wrap:wrap; align-items:baseline; }
h1 span.irr {font-size:40px; align-self:end;}
h2, h3, summary { font-family: 'Comfortaa', cursive;}

h1 span.irr.klein {font-size:30px;}
h1 span.nobr {white-space: nowrap; font-size:30px; display:flex; }
h2, h2.rezepte {font-size:20px; margin-bottom:5px; line-height:1.5; text-shadow:5px 5px 5px rgba(0,0,0,0.5);}
h2.einzelrezept {font-family: 'Over the Rainbow', cursive; line-height:1.2; margin:5px 0; font-size:30px;}
h3, summary {font-size:20px; margin-bottom:5px; line-height:1.5; cursor:pointer;}

p, p.rezepte, p.rezeptheader, li {font-size:17px; line-height:1.3; margin-bottom:6px;}
p.rezept {display:inline-block;}
a.textlink, a.contact {color:rgba(47,79,79,1.0); text-decoration:underline; }

/*ZEN*/
div.zen {width:30px; height:30px; overflow:visible; margin:10px; padding:10px; cursor:pointer; position:fixed; top:0; right:0; background:transparent; z-index:100; display:none;}
span.zen {display:block; height:4px; background:rgba(0,0,0,0.8); border-radius:2px; position:absolute; left:0; right:0;}
span.zen:first-child { top:0; left:0; right:0;}
span.zen:nth-child(2) { top:50%; margin-top:-2px; left:0; right:0;}
span.zen:nth-child(3) { top:50%; margin-top:-2px;}
span.zen:nth-child(4) { top:50%; margin-top:-2px;}
span.zen:last-child { top:100%; margin-top:-4px; left:0; right:0;}

div.zen:hover {cursor:pointer;}
div.zen.open  span.zen:first-child {left:-150%; right:150%; opacity:0; transition:all 300ms ease-in-out;}
div.zen.close span.zen:first-child { opacity:1; transition:all 300ms ease-in-out;} 
div.zen.open  span.zen:nth-child(2) {left:-150%; right:150%; opacity:0; transition:all 300ms ease-in-out 150ms;}
div.zen.close span.zen:nth-child(2) { opacity:1; transition:all 300ms ease-in-out 150ms;} 
div.zen.open  span.zen:last-child  {left:-150%; right:150%; opacity:0; transition:all 300ms ease-in-out 300ms;}
div.zen.close span.zen:last-child  { opacity:1; transition:all 300ms ease-in-out 300ms;} 

div.zen.open span.zen:nth-child(3) {  opacity:1; transform:rotate(45deg) translate(-5px, 4px); transition:all 300ms ease-in-out; width:calc(141.421% - 6px); } 
div.zen.close span.zen:nth-child(3) {  opacity:0; transform: rotate(0deg) ; transition:all 300ms ease-in-out;  }
div.zen.open  span.zen:nth-child(4) {  opacity:1; transform:rotate(-45deg) translate(-4px, -5px); transition:all 300ms ease-in-out; width:calc(141.421% - 6px); } 
div.zen.close span.zen:nth-child(4) {  opacity:0; transform: rotate(0deg) ; transition:all 300ms ease-in-out;  }

div.anzeige {position:fixed; top:0; right:200px; height:20px; font-size:20px; width:auto; color:red; z-index:20;}

header.seitenheader {grid-column:1/-1; padding:40px 50px;}
footer {grid-column:1/-1; padding:40px 50px; display:grid;}
address {grid-column:1/-1; display:grid; 
			grid-template-columns: repeat(auto-fill, minmax(150px, 1fr) );
	        grid-auto-rows: auto;
	  
	        grid-auto-flow: dense;
	        grid-gap: 10px;}

/*display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap;*/
details {grid-column:span 1; grid-row:span 1; align-self:start;}			
details, details[open] {font:var(--initial-font);  background:rgba(255,215,0,0.3); border-radius:5px; box-shadow:3px 5px 10px rgba(0,0,0,0.5); padding:5px 2px 2px 2px; }

summary {font:var(--initial-font); }

 
footer i.far {font:var(--initial-font); color:var(--initial-link); font-size:20px; font-weight:bold;}
footer summary.small {font-size: 17px; color:rgba(0,0,0,0.8);}

  
nav {grid-column:1/-1; position:-webkit-sticky; position:sticky; top:0; height:auto; z-index:2; background:rgba(255,255,255,0.5);
		display:grid; grid-template-columns:1fr; grid-gap:10px; transition:all 0.8s 0.1s ease-in-out;}
		
nav.hide {transform:translateX(100%); background:transparent;}
nav.show {transform:translateX(0%); background:transparent;}

ul.nav {background:rgba(255,255,255,1.0); padding:0 50px; list-style-type:none;  margin:0; border-bottom:4px solid transparent; z-index:10;
			display:grid;
			grid-gap:10px;
			grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); grid-template-rows:32px;}

ul.unav {background:rgba(255,255,255,1.0); list-style-type:none; width:calc(100vw - 100px); border-top:5px solid transparent; z-index:10; transition:all 0.8s ease-in-out; box-shadow:5px 5px 5px rgba(0,0,0,0.8);
		display:none; grid-gap:10px;
		grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); grid-template-rows:auto; }
		
ul.nav li {margin:0;}
ul.unav li {height:auto; margin:0;}
		
li.rezepte:hover ul.unav {display:grid;  z-index:20;}
li.rezepte:hover {z-index:200;}

a.nav	{text-decoration:none; color:rgba(0,0,0,0.95); display:inline-block; width:100%; padding:3px 10px; height:32px;  background-image:linear-gradient(to right, rgba(255,255,255,1.0) 50%, rgba(0,0,0,0.2) 50%); background-position:0; background-size:200%; font-size:20px; line-height:26px; filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.5)); white-space:nowrap; transition:all 0.4s;}

a.nav:hover {background-position:-100%; height:auto; }

a.unavrezepte	{text-decoration:none; color:rgba(0,0,0,0.95); display:inline-block; width:100%; padding:3px 10px; background:rgba(255,255,255,0.0); font-size:20px; line-height:26px; white-space:nowrap;}

main { grid-column:1/-1; padding:40px 50px; display:grid; grid-template-columns:1fr; grid-gap: 50px 0;}


section#rezepte {display:grid; 
		grid-gap:10px;
	 	grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));}
		
article.rezepte {background:rgba(255,255,255,1.0); filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.5));
					display:grid;
					grid-gap:10px;
					grid-template-columns:1fr;
					align-content:start;}		
figure.rezepte { overflow:hidden;
	
				display:grid; 
				grid-template-columns:1fr;
				grid-template-rows:1fr;

				}


img.rezepte {width:100%; transition:all 0.8s ease-in-out;
				grid-column:1/-1;
				grid-row:1/-1;

					outline: 1px solid white;
					outline-offset: -0.4rem;
				}
				
figcaption.rezepte {color:white; transform:translateY(100%);
				grid-column: 1/-1;
				grid-row: 1/-1;
				display:grid;
				align-items:center;
				text-align:center;
				transition:all 0.8s ease-in-out; background:rgba(0,0,0,0.2);}
figure.rezepte:hover figcaption.rezepte {transform:translateY(0%);}
figure.rezepte:hover img.rezepte {transform:scale(1.2);}

article.text, header.text {text-align:center;}

a.rezeptlink {padding:3px 10px; margin:10px 0; text-decoration:none; border:1px solid rgba(0,0,0,0.8); color:rgba(0,0,0,0.95);display:inline-block; transition:all 0.5s ease-in-out;}
a.rezeptlink:hover {box-shadow:5px 5px 5px rgba(0,0,0,0.8);}


/*EINZELREZEPT*/
.print {color:black; padding:2rem;}
.print h2.einzelrezept {color:black;}


section.einzelrezept {background:rgba(255,255,255,1.0); filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.5));  display:grid; grid-gap:20px; padding:30px; 
				 grid-template-columns:repeat(12, 1fr);
				 grid-template-rows:auto; 
				 position:fixed; top:0px; left:0px; right:0px; bottom:0px;  overflow-x:hidden; overflow-y:scroll;
			 
				 transition:all 0.8s ease-in-out;  transform-origin:center;}

section.einzelrezept:not(target) {transform:scale(0,1); transform-origin:center; transition:all 0.8s ease-in-out; }
section.einzelrezept:target {transform:scale(1,1); transform-origin:center; transition:all 0.8s ease-in-out; z-index:2;}
				 
/*section.neuesFenster {position:fixed; top:0px; left:0px; right:0px; bottom:0px; z-index:20; overflow-x:hidden; overflow-y:scroll;}*/
/*button.close {position:absolute; top:1rem; right:1rem; width:2rem; height:2rem; background:rgba(0,0,0,0.2); border-radius:50%; display:flex; justivy-align:center; align-items:center; }*/
a.close {position:absolute; top:1rem; right:1rem; width:2rem; height:2rem; background:rgba(0,0,0,0.1); border-radius:50%; text-decoration:none; color:var(--normal-link); font-variant:small-caps; display:flex; align-items:center; justify-content:center; box-shadow:1px 2px 3px rgba(0,0,0,0.5);}
a.close::after {content:'\00D7'; color:var(--normal-link); text-decoration:none; font-size:2rem;}
/*div.close {position:fixed; top:0px; right:30px; width:30px; font-size:30px; padding:10px; margin:10px; z-index:100; color:rgba(0,0,0,0.5); background:transparent; cursor:pointer; text-shadow:1px 1px 1px rgba(255,255,255,0.7);}*/

section.einfzefenster.printStyle {padding:2rem; }
section.einzelfenster.printStyle figure.einzelrezept {max-width:30%; height:auto;}



figure.einzelrezept {padding:0; margin:0; grid-column:2/9; grid-row:1/4; position:relative; width:100%; height:auto; filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.5));}
img.einzelrezept {width:100%; height:auto; padding:0; margin:0; border:none;}

figure.einzelrezept::before {content:'';  display:block; background:transparent; position:absolute; top:18px; left:18px; right:18px; bottom:18px; border:1px solid white;}

figure.einzelrezept::after {padding:0; margin:0; content:''; display:block; background:transparent; position:absolute; top:15px; left:15px; right:15px; bottom:15px; border:1px solid white; } 

header.einzelrezept {  grid-column:8/-2; grid-row:2/3; padding:10px; z-index:2; background:rgba(255,255,255,0.95); border:1px dashed rgba(0,0,0,0.3); filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.5));}

aside.zutaten {grid-column:1/5; grid-row:4/5; background:rgba(143,188,143,0.2); border:1px dashed rgba(143,188,143,0.5); padding:5px;}
ul.zutaten {list-style-type:circle; list-style-position:outside; margin-left:10px; padding-left:10px; }
ul.zutaten li::marker {color:var(--normal-link); transition:all 0.8s ease-in-out; margin-right:20rem;}

article.rezept {grid-column:5/-1; grid-row:4/5; columns:15em; column-gap:20px; column-fill:balance; column-rule:1px dashed rgba(0,0,0,0.3); hyphens:auto; padding:5px}
article.rezept > h3.rezept { -webkit-column-span: all; column-span: all;}
aside.tipps {grid-column:1/-1; grid-row:5/6; padding:5px; display:grid; grid-template-columns: auto 1fr; grid-gap:20px; align-items:center; justify-items:start;}
div.tipps {padding-left:10px; border-left: 1px dashed rgba(0,0,0,0.8);}
h3.tipps {writing-mode:vertical-rl; border-block-end: 0.5rem solid rgb(49, 79, 79); padding-block-end: 1rem; }

/*BREAKPOINTS*/			

@media screen and (max-width:1185px){
	aside.zutaten {grid-column:1/6;}
	article.rezept {grid-column:6/-1;}
}

@media screen and (max-width:890px){
	figure.einzelrezept {grid-column:1/9;}
	header.einzelrezept {grid-column:8/-1;}
	aside.zutaten {grid-column:1/7;}
	article.rezept {grid-column:7/-1;}
}

@media screen and (max-width:700px){
	figure.einzelrezept {grid-column:1/9;}
	header.einzelrezept {grid-column:7/-1;}
	aside.zutaten {grid-column:1/-1; grid-row:4/5;}
	article.rezept {grid-column:1/-1; grid-row:5 /6;}
	aside.tipps {grid-row:6/7;}
}

@media screen and (max-width:600px){
	header.seitenheader, footer, main {padding: 20px 30px;}
	ul.nav {padding:0 30px;}
	ul.unav {width:calc(100vw - 60px);}
	figure.einzelrezept {grid-column:1/-1; grid-row:1/5;}
	header.einzelrezept {grid-column:2/-2; grid-row:4/6;}
	aside.zutaten {grid-column:1/-1; grid-row:6/7;}
	article.rezept {grid-column:1/-1; grid-row:7/8;}
	aside.tipps {grid-row:8/9;}
}

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

	header.seitenheader {padding:10px;}
	main {grid-gap:10px 0;}
	footer, main {padding: 10px 0px;}
	section.einzelrezept {grid-gap:5px; padding:0px;}
	ul.nav {padding:0;}
	ul.unav {width:100vw;}
	figure.einzelrezept {grid-column:1/-1; grid-row:2/6;}
	header.einzelrezept {grid-column:1/-1; grid-row:1/2; padding:10px;}
	aside.zutaten {grid-column:1/-1; grid-row:6/7;}
	article.rezept {grid-column:1/-1; grid-row:7/8;}
	aside.tipps {grid-row:8/9;}
}

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

		div.zen {display:block;}
		nav {position:fixed; top:0; right:0; height:auto; width:100%;}
		div.close {position:fixed; top:0px; right:0px; margin:0; padding:10px; }
		header.einzelrezept {background:rgba(255,255,255,1.0); }

}

