/*FONTS*/

/*font-family: 'Gotu', sans-serif;
font-family: 'Lora', serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Open Sans', sans-serif;*/


/*ROOT-VARIABLEN*/
:root {
	--navTopColor:#121212;
	--bodyLightColor:#f7e8d957;
	--textColor:rgba(0 0 0 0.8);
	--textDarkColor:#222;
	--backgroundBody:#f7e8d9;/*#c185514f;#f7e8d9*/
	--grayColor:#576b77;
	--grayLightColor:#e5e5dd;
	--redColor:#cb4664;
	--figcaptionBackground:#778e9db5;
	--transitionAll:all .8s ease-in-out;
	--marginTopBildwechsel:2rem;
	--briefColor:#9bdad3;
	
	--colorLight:rgba(148, 179, 199, 0.18);
	--navHeigh:6lh;
	
    --step--2: clamp(0.8681rem, 0.7248rem + 0.7164vi, 1.28rem);
     --step--1: clamp(1.0417rem, 0.8475rem + 0.971vi, 1.6rem);
     --step-0: clamp(1.25rem, 0.9891rem + 1.3043vi, 2rem);
     --step-1: clamp(1.5rem, 1.1522rem + 1.7391vi, 2.5rem);
     --step-2: clamp(1.8rem, 1.3391rem + 2.3043vi, 3.125rem);
     --step-3: clamp(2.16rem, 1.5526rem + 3.037vi, 3.9063rem);
     --step-4: clamp(2.592rem, 1.7952rem + 3.984vi, 4.8828rem);
     --step-5: clamp(3.1104rem, 2.0693rem + 5.2054vi, 6.1035rem);


}

html {height:100%; width:100dvw; font-size:100%; font-size:16px; scroll-behavior: smooth; }

body {background:var(--bodyLightColor); min-height:100dvh; width:100dvw; font-family: 'Montserrat', sans-serif; overflow-x:hidden; /*scroll-margin-top:var(--navHeigh),6lh;*/ color:var(--textColor);  font-size:1rem; 
	 display:grid; 
	 grid-template-columns: 1fr;
	
	 /*grid-template-columns: minmax(1.5rem,1fr) minmax(auto,64rem) minmax(1.5rem,1fr); */
	 
	 grid-template-areas: 	"navi " 
							"header " 
		 					
						 	"main" 
						  	"footer";
	grid-template-rows:auto minmax(30vmin,auto) 1fr auto ; 
	
	

}
	

*, *:before, *:after {box-sizing:border-box;}

* {margin:0; padding:0; font:inherit; text-decoration:none;}

img, picture, svg, video {display:block; max-width:100%;border:1px solid var(--textDarkColor);}

ul {list-style:none;}

h2,h3,h4 {font-family: 'Lora', serif; color:var(--grayColor); line-height:1;margin:1lh 0 .5lh}
p {font-family: 'Montserrat', sans-serif; margin:1lh 0 .5lh;}

h2 { font-size:var(--step-3);/*clamp(2rem, 4vw, 4rem);*/}
h3 { font-size:var(--step-2);/*clamp(1.5rem ,3vw, 2.5rem);*/  }
h4 { font-size:var(--step-1);/*clamp(1rem,1.5rem,2rem);*/}
p {font-size:clamp(1.25rem,1.5vw, 2rem); hyphens:auto;}
p.danke {font-family: 'Gotu', sans-serif;  font-size:var(--step-0);margin:.5lh 0;color:var(--redColor); line-height:1; margin:1lh 0 .5lh; hyphens:unset;}
a {color:var(--redColor); text-decoration:underline;}
p.italic {font-style:italic;}
span.ong {color:var(--redColor); font-weight:700;}
/*p.floatLeft {float:left;}*/




header.top {grid-area:header; display:grid; grid-template-columns: clamp(10rem, 10vw, 15rem) 1fr; /*minmax(10rem,15rem) 1fr*/ grid-template-areas:"logo image"; grid-template-rows:1fr;
border-bottom:1px solid var(--redColor);
			& div.logo{grid-area:logo;background:#94b3c7;padding:2rem;;display:grid;place-items:center;}
			& div.bgImage {grid-area:image;background-image:url('images/bgHeader.png');background-size:cover;background-position:center left;}
			& img {border:none;}
			& h1 {font-family: 'Gotu', sans-serif; font-size:clamp(1.7rem,3vw,5rem); grid-area:image; color:#cb4664;line-height:1 ;padding:1rem; justify-self:end;}
			
		
		}
	
	/**/

	
nav.top {grid-area:navi; display:grid; align-items:center; position:sticky; top:0; padding:1rem 0 1.5rem; background:var(--backgroundBody);
	grid-template-columns: minmax(1.5rem,1fr) minmax(auto,64rem) minmax(2rem,1fr); grid-template-areas:". navigation ."; border-bottom:1px solid var(--redColor);z-index:100;

	& ul {grid-area:navigation; display:flex;;margin-top:1rem;;gap:1rem; flex-wrap:wrap;
	
	@media (width < 64rem) {
	     gap:.75rem;}
	  }
	& li {display:grid; width:max-content;}
	& a {font-family: 'Montserrat', sans-serif; font-size:clamp(1.2rem, 2vw, 1.5rem) ;color:var(--grayColor);line-height:1.2;transition:all .8s ease-in-out; text-decoration:none;
	 &:hover{color:var(--redColor);}
	 &.active {color:var(--redColor); text-decoration:underline;}}
	
	
}

main {grid-area:main; background:#0000; display:grid; grid-template-columns: 1fr; gap:1.5rem; margin:0 0 3rem;}

section {grid-column:1/-1; display:grid; gap:2rem 0; grid-template-columns:minmax(1.5rem,1fr) minmax(auto,64rem) minmax(2rem,1fr);

	/*@media (width < 64rem) {
	     grid-template-columns: .5rem 1fr 1rem;
	  }*/
}

header.section { grid-column:2/-2;
	
	& h2 {margin:1lh 0 .25lh;}
}
@keyframes go {
	0%	 {opacity:1; z-index:1; transform:translateX(0vw);}
	100% {opacity:0.8; z-index:-2; transform:translateX(100%);} 

}
@keyframes come {
	0% 	 {opacity:0.8; z-index:-2; transform:translateX(-100%);}
	100% {opacity:1; z-index:1; transform:translateX(0vw);} 
}

article.home {opacity:0; transition:opacity 1.2s ease-in-out;}
article.home.visible {opacity:1;}

div.wrapperAutoFill {grid-column:2/-2; display:grid;grid-template-columns:repeat(auto-fill, minmax(15rem,1fr)); gap:2.5rem 1.5rem;
	& article {display:grid; gap:.5rem; align-content:start; background:rgba(148, 179, 199, 0.18);}
	& header{}
 	& h3{font-family: 'Lora', serif; font-size:2rem; line-height:1; margin:.25lh 0;}
	& figure {display:grid; align-self:start; aspect-ratio:4/2.75;}

	/*figcaption{color:var(--grayColor); font-size:1.3rem;line-height:1.1; margin:.5rem 0; align-self:end; vertical-align:bottom;}*/
	& image {border:1px solid var(--textColor);}
	& p.bildBeschreibung {font-size:clamp(1rem,1.2vmax,1.25rem);margin-top:.0; color:var(--textColor);}
	& p.bildbeschreibungOberhalb {font-family: 'Lora', serif; color:var(--grayColor);aspect-ratio:8/3;font-size:clamp(1rem,1.5rem,2rem);margin:0;
		@media (width < 40rem){
			aspect-ratio:inherit; }
		
	}
	
		
}

div.wrapperAutoFillFigure {grid-column:2/-2; display:grid;grid-template-columns:repeat(auto-fill, minmax(15rem,1fr)); gap:1.5rem;
	& article {
		& h3 {margin:0;line-height:1;}
	}
	
	
	& figure {display:grid; place-items:center;  overflow:hidden; cursor:pointer; position:relative; place-items:center;}
	
	& figcaption { display:grid; justify-items:center;align-items:center; padding:.5rem; position:absolute; color:white; font-size:clamp(1.2rem,1.2vmax,1.25rem); line-height:1.1; height:100%;width:100%; top:0; left:0; bottom:0;right:0; background:var(--figcaptionBackground); transform:translateX(-100%); transition:all 0.8s ease-in-out;}
	
	& img {border:1px solid var(--textColor); transition:all 0.8s ease-in-out}
	
	& figure:hover figcaption {transform:translateX(0);animation:all .8s ease-in-out;}
	& figure:hover  img {transform:scale(1.3);animation:all .8s ease-in-out;}
		
}

div.wrapperUeberUns {grid-column:2/-2; display:grid; grid-template-columns:2fr 1.36fr 2fr; gap:1rem; grid-row:auto;
	@media (width < 20rem){display:none;/*grid-template-columns:1fr;*/}
	
	}




/*div.wrapperAutoFillFigure {
	grid-column:2/-2; display:grid;grid-template-columns:repeat(auto-fill, minmax(15rem,1fr)); gap:1.5rem;
	
	& figure {display:grid; gap:.5rem; position:relative;}
	& img {image {border:1px solid var(--textColor);}
}*/


div.wrapperCenter {grid-column:2/-2; display:grid; grid-template-columns:1fr minmax(auto,45rem) 2fr;

	& p {grid-column:2/3; }
}
div.wrapper {grid-column:2/-2;}

div.wrapperText {grid-column:2/-2;
  & article.floatLeft {float:left; padding:0 .5lh 0 0;
	  
	  & img {float:left; margin:.5lh 1lh .5lh 0; width:clamp(30rem,20dvw, 40rem);}
	  & img.right {float:right;}
	  @media (width < 30rem){clear:both; display:grid; grid-template-columns:1fr}
	 
  }
  
  & article.floatRight {float:right;
	
	  & img {float:right; margin:.5lh 0 .5lh 1lh; width:clamp(30rem,20dvw, 40rem);}
	  & img.left {float:left;}
	  & img.buch {width:clamp(18rem,25vw, 30rem);}
	  & img.QR 	 {width:clamp(10rem,6vw, 12rem); float:left;}
	 
		  }
	   @media (width < 30rem){clear:both; display:grid; grid-template-columns:1fr;
		   & img.buch{justify-self:start;padding:.5lh 0; margin:0;float:left;}
		   }
		 

}
div.wrapperTextColumns2Links {grid-column:1/-1;display:grid;grid-template-columns:minmax(5rem,15rem) 1fr; gap:2rem;
		@media (width < 40rem){ grid-template-columns:1fr;}
}
div.wrapperTextColumns2Rechts {grid-column:1/-1;display:grid;grid-template-columns:1fr minmax(5rem,15rem); gap:2rem;
		@media (width < 40rem){ grid-template-columns:1fr;}
}
/*div.wrapperTextColumns2 {grid-column:1/-1;display:grid;grid-template-columns:auto 1fr; gap:2rem;
		@media (width < 40rem){ grid-template-columns:1fr;}}*/


div.wrapperTextColumns2 {grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; align-content:start; gap:2rem;
		@media (width < 40rem){ grid-template-columns:1fr;}
		
		
}

div.wrapperTEXT {grid-column:2/-2;}

div.buchAngaben{display:grid; grid-template-columns: max-content 1fr;
	 			& div.links {}
				& div.rechts {}
			}
	
	
div.wrapperJahresberichtTop {grid-column:2/-2; display:grid;grid-template-columns:repeat(auto-fill, minmax(15rem,1fr)); margin:2rem 0;gap:2.5rem 3lh;
	& figure {position:relative; 
	& figcaption {position:absolute; top:-1.6lh; left:0; font-size:1.2rem; display:grid;align-items:end;}
	& img {width:100%;height:auto;border:3px solid var(--grayColor);}
	& img.brief {width:100%;height:auto;border:3px solid var(--briefColor);}

}

}
	
div.wrapperJahresberichtBottom{grid-column:2/-2;display:grid; grid-template-columns:repeat(auto-fill, minmax(10rem,1fr)); gap:1rem;
	& figure {position:relative; display:grid; align-content:start; justify-content:start;}
	& figcaption { position:absolute; width:max-content; height:1lh; font-weight:bolder; padding:.5rem; top:0;left:0;color:white;}
	& img {border:3px solid var(--grayColor);}
	& img.brief {border:3px solid var(--briefColor);}
	
}

/*BILDWECHSEL*/


div.bildwechselSection {display:grid; grid-column:1/-1;grid-template-columns:minmax(1.5rem,1fr) minmax(auto,64rem) minmax(2rem,1fr); grid-template-rows: auto; gap:2rem 0;
	& header {grid-column:2/-2;display:grid; ; 
		& h2 {}
	}
	
article.BildwechselLinks {grid-column:1/-1; display:grid; grid-template-columns:minmax(1.5rem,1fr) minmax(auto,32rem) minmax(auto,32rem) minmax(2rem,1fr); gap:1rem 0;
	
	 grid-template-areas:  	". untertitel  untertitel ."
							"figure	figure	 text text ";
	
	
	& header {grid-area:untertitel; display:grid;;
		& h3 {margin:1rem 0;}
	}
		
	& figure.bildwechsel {grid-area:figure; display:grid;align-items:start;overflow:hidden;
		& ul {grid-column:1/-1; grid-row:1/-1; display:grid; grid-template-rows:1fr; place-items:center;} 
		& li {grid-column:1/-1; grid-row:1/-1;}
		& img {width:100%;height:100%; transition:var(--transition);}
		& img.isVisible {transform:scale(1); z-index:2; opacity:1;}
		& img.come {animation:come 1s ease-in-out forwards;}
		
		& img.go {animation:go 1s ease-in-out forwards;}
				
		}
	& div.text.right {grid-area:text; padding:0 2rem 0 1rem;}
	& div.text.left  {grid-area:text; padding:0 1rem 0 2rem;}
		
		@media (width < 50rem){
			gap:0;
			/*grid-template-columns:minmax(1.5rem,1fr) minmax(auto,50rem) minmax(1.5rem,1fr);*/
	   	 	grid-template-areas: ". untertitel untertiel."
		 						". text text."
	   							".  figure  figure.";
								& div.text.left {padding:0;}
								& div.text.right {padding:0;}
								
		}
	}
}

article.BildwechselRechts {grid-column:1/-1; display:grid; grid-template-columns:minmax(1.5rem,1fr) minmax(auto,32rem) minmax(auto,32rem) minmax(2rem,1fr); gap:1rem 0;
	
	 grid-template-areas:  	". untertitel  untertitel ."
							"text text figure figure ";
	
	
	& header {grid-area:untertitel; display:grid;
		& h3 {margin:1rem 0 0;}
	}
		
	& figure.bildwechsel {grid-area:figure; display:grid;align-items:start;overflow:hidden;
		& ul {grid-column:1/-1; grid-row:1/-1; display:grid; grid-template-rows:1fr; place-items:center;} 
		& li {grid-column:1/-1; grid-row:1/-1;}
		& img {width:100%;height:100%; transition:var(--transition);}
		& img.isVisible {transform:scale(1); z-index:2; opacity:1;}
		& img.come {animation:come 1s ease-in-out forwards;}
		
		& img.go {animation:go 1s ease-in-out forwards;}
				
		}
	/*div.text {grid-area:text; padding:0 2rem 0 1rem;}*/
	& div.text.right {grid-area:text; padding:0 2rem 0 1rem;}
	& div.text.left  {grid-area:text; padding:0 1rem 0 2rem;}
		
		@media (width < 50rem){
			/*grid-template-columns:minmax(1.5rem,1fr) minmax(auto,50rem) minmax(1.5rem,1fr);*/
	   	 	grid-template-areas: ".  untertitel untertiel."
		 						". text text."
	   							".  figure  figure.";
								& div.text.left {padding:0;}
								& div.text.right {padding:0;}
		}
	}


	div.zweiColumns {display:grid; grid-template-columns:auto 1fr; gap:2rem;
		/*@media {width < 20rem){grid-template-columns:1fr;}*/
		@media (width < 34rem){
			grid-template-columns:1fr;}
	}


footer {grid-area:footer;grid-column:1/-1; background:var(--backgroundBody);display:grid; grid-template-columns:minmax(1.5rem,1fr) minmax(auto,64rem) minmax(2rem,1fr) ;padding:2rem 0 2rem;
			
	
	&  div.footerContent {grid-column:2/-2; display:grid; grid-template-columns:1fr 1fr; gap:3rem;
		@media (width < 34rem){
			grid-template-columns:1fr;}

	
	&  aside {display:grid;grid-template-columns:1fr;align-content:start; }
	&  p.adress { font-size:1rem; margin:.5lh 0;}
	
}

/*FORM*/
form {max-width:20rem; margin:.5lh 0;}

fieldset.kontakt {display:grid; grid-template-columns:1fr; grid-template-rows:auto; gap:.5rem; border:none;}

div.form {width:100%; height:auto;}
div.form.test {display:grid; grid-template-columns:auto 1fr; grid-gap:1rem;}
div.form.submitbox {display:grid; grid-template-columns:1fr 1fr; grid-gap:1rem; margin-top:1rem;}

input, textarea {width:100%; border:1px dotted var(--grayColor); border-radius:.25rem; display:grid; background-color:white; height:1.5rem; font-size:.8rem; color:var(--titleColor);}
textarea {height:3rem;}
input::placeholder, textarea::placeholder {font-size:.8rem; color:var(--grayColor); align-self:end;}
label.none {display:none;}

input, label { display:flex; align-items:center; justify-content:center; }
input.absenden, input.abbrechen {background:white; cursor:pointer;text-align:center; color:var(--titleColor);font-size:.8rem;}

#output {background:var(--footerBackground);}
#output.output {border:2px solid var(--mainColor);}
p.output, table.output {font-size:1rem; color:var(--titleColor);}