/*FONTS*/



/*font-family: "Nanum Gothic", sans-serif;
 font-family: "Raleway", sans-serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: "Gotu", sans-serif;*/

 	



/*ROOT-VARIABLEN*/
:root {
	--bodyColor:rgba(220,220,220,1);
	--headerTopColor:#fff;

	--textColor:#222;
	--textDarkColor:#000;
	--gridColumLARGE:minmax(1.5rem,1fr) minmax(auto,80rem) minmax(2rem,1fr);
	
	--hoeheHeader:10rem;
	--backgroundVideos:rgba(213, 233, 139, 0.54);
	
	--bodyGab:1rem;
	--navBg:#b6daf8;
	--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);*/
	
    --step--3: clamp(0.651rem, 0.6104rem + 0.2034vi, 0.768rem);
     --step--2: clamp(0.7813rem, 0.7191rem + 0.3109vi, 0.96rem);
     --step--1: clamp(0.9375rem, 0.8462rem + 0.4565vi, 1.2rem);
     --step-0: clamp(1.125rem, 0.9946rem + 0.6522vi, 1.5rem);
     --step-1: clamp(1.35rem, 1.1674rem + 0.913vi, 1.875rem);
     --step-2: clamp(1.62rem, 1.3683rem + 1.2587vi, 2.3438rem);
     --step-3: clamp(1.944rem, 1.6012rem + 1.7142vi, 2.9297rem);
     --step-4: clamp(2.3328rem, 1.8704rem + 2.3118vi, 3.6621rem);
     --step-5: clamp(2.7994rem, 2.1808rem + 3.0927vi, 4.5776rem);
     --step-6: clamp(3.3592rem, 2.5374rem + 4.1092vi, 5.722rem);
     --step-7: clamp(4.0311rem, 2.9453rem + 5.4287vi, 7.1526rem);
      --step-8: clamp(4.8373rem, 3.41rem + 7.1364vi, 8.9407rem);
      --step-9: clamp(5.8048rem, 3.9365rem + 9.3411vi, 11.1759rem);
      --step-10: clamp(6.9657rem, 4.5295rem + 12.1811vi, 13.9698rem);
	/*https://utopia.fyi/type/calculator/?c=320,18,1.2,1240,24,1.25,10,3,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12*/
}

html {height:100%; width:100dvw; font-size:100%; font-size:16px; scroll-behavior: smooth; 
  @media (width < 50rem){font-size:95%;font-size:15px;}}

body {min-height:100dvh; max-width:100dvw; font-family: "Raleway", sans-serif; overflow-x:hidden; scroll-margin-top:var(--navHeight),6lh; /*overflow-x:hidden; /*scroll-margin-top:var(--navHeight),6lh;*/ color:var(--textColor);  font-size:1rem; 
	 display:grid; 
	 gap:1rem;

	 
	
	
 grid-template-columns: 1fr; /*minmax(1.5rem,1fr) minmax(auto,80rem) minmax(1.5rem,1fr); */
 grid-template-areas: 
 	 					"header" 
							
 						"navigation"
					  "main " 
					  "footer";
grid-template-rows:  auto auto 1fr auto ; animation:show 3s  ease-in forwards; align-items:start;}
	


/*Scrollwatcher*/
div.scrollwatcher {position:fixed; top:0; grid-row:1/2;width:100%;height:.3rem;background:#7c8c74; z-index:10; scale:0 1; animation:scrollwatcher linear; animation-timeline:scroll(y); transform-origin:left;}
@keyframes scrollwatcher{
	to{scale:1 1;}
}

/*Hier wichtigste  Grundeinstellungen für css*/	
/*#GEGEN_wind_888#*/

*, *: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); }

img{transition:all .8s ease-in-out;}
img:hover {transition:all .8s ease-in-out;}

ul {list-style:none;}

/*Hier Angaben für verschiedene Titel und Schrift*/

h2,h3,h4 {/*font-family: 'Lora', serif;*/font-family: "Gotu", sans-serif; color:var(--textColor); line-height:1.2; }
p {}

h1 {/*font-family: "Nanum Gothic Coding", monospace; */ font-family: "Splash", cursive;font-size:var(--step-5); line-height:1 ;padding:1rem; grid-column:1/-1; margin:var(--step-0) var(--step-3);}
h2 { font-size:var(--step-5);font-weight:900; color:#7c8c74;/*clamp(2rem, 4vw, 4rem);*/ hyphens:auto;}

h3 { font-size:var(--step-2);/*clamp(1.5rem ,3vw, 2.5rem);*/ hyphens:auto; }
h4 { font-size:var(--step-1);/*clamp(1rem,1.5rem,2rem);*/}
h2,h3,h4 {margin-bottom:1rem;}
p {font-size:var(--step-0); hyphens:auto; margin-bottom:1rem;}
ul.pfeil li {font-size:var(--step-0); hyphens:auto;}
ul li {font-size:var(--step-0);}
a {font-size:var(--step-0); color:green; transition:all .8s ease-in-out;}
a:hover {color:white; background:darkgreen; transition:all .8s ease-in-out;}

a.flyer {font-size:var(--step-3); padding:0 1rem; border-left:solid red 1rem;}

p, ul, details {margin-bottom:1rem;}
strong {font-weight:800;}
.italic {font-style:italic;}



main {grid-area:main; display:grid; grid-template-columns:var(--gridColumLARGE); gap:var(--step-5) 0;
	/*@media (width < 50rem){gap:2rem 0;}*/
	
}

header#top {background:#2070d787;grid-area:header; min-height:25vmax;z-index:2; opacity:0;/*url("images/visualisierungen/F13-Nebel-Nahe2_1500.jpg");*/ background-size:cover; display:grid;transition:all 0.8s ease-in-out;isolation:isolate; cursor:pointer;background-position:50%100%;


		
       & div.title {display:grid; grid-template-columns:var(--gridColumLARGE); 
			   
	   	& h1  { grid-rows:2/-1; color:white; align-self:end;}

  	 }/*Ende div.title*/
 }/*ENDE header#top*/
 


header#top.bg0 {background-image:url("images/bgImages/Hasplen.jpg"); background-position:50%40%;}
header#top.bg1 {background-image:url("images/bgImages/Freudenberg.jpg");background-position:50%;}
header#top.bg2 {background-image:url('images/bgImages/Hinteruttenberg.jpg');background-position:50%30%;}
header#top.bg3 {background-image:url("images/bgImages/WettswilWeiher.png");background-position:50%40%;}
header#top.bg4 {background-image:url("images/bgImages/Himelsbuel.jpg");background-position:50%30%;}
header#top.bg5 {background-image:url("images/bgImages/Landschaft.jpg");background-position:50%40%;}
header#top.bg6 {background-image:url("images/bgImages/BonstettenLaetten.jpg");background-position:50%40%;}
header#top.bg7 {background-image:url("images/bgImages/Birch.jpg");background-position:50%40%;}
header#top.bg8 {background-image:url("images/bgImages/Frauenthal.jpg");background-position:50%40%;}
header#top.bg8 {background-image:url("images/bgImages/maschwanden.jpg");background-position:50%40%;}
header#top.show {opacity:1; transition:all 1s ease-in-out;}
 		
 
/* .bgTop {grid-column:1/-1;grid-row:1/-1;width:100vw; background-size:cover;isolation:isolate; opacity:0; transition:var(--slowTransition);}
 .bgTop.show {opacity:1;}*/
 
nav {z-index:10000; grid-area:navigation; position:sticky; top:0; display:grid; grid-template-columns:var(--gridColumLARGE);
     & ul{grid-column:2/-2; list-style-type:none; display:flex; flex-wrap:wrap; gap:.5rem .25rem; /*grid-template-columns:repeat(auto-fill , minmax(12em,1fr))*/;
	   & li{
		  & a.navi{font-size:var(--step--1); padding:.25rem 1rem; font-family: 'Montserrat', sans-serif; white-space: nowrap; background:rgb(238, 242, 226);
			}/*ENDE A*/
			& a.navi:hover{background:darkgreen;}
		}/*ENDE li*/
	}/*ENDE ul*/
}/*ENDE nav*/

/*INITIA%IVE*/

div.initiativen {grid-column:2/-2; display:grid;grid-template-columns:repeat(auto-fit, minmax(20rem,1fr)); gap:1rem; position:relative;
	& a {color:rgb(255,0,0);font-size: var(--step-1); font-weight:600; text-decoration:none;}



	& div.banner {z-index:2; position:absolute; height:var(--step-4);left:30%; top:40%;  background:red; transform:skewy(-10deg); display:grid; place-items:center; animation: ticken 8s alternate-reverse infinite;
		
		& p{font-size:var(--step-1); font-weight:600; color:white; font-variant:small-caps;padding:0 1rem;}
		}
 }
@keyframes ticken {

	 0% {scale:1;}
	50% {scale:1.2;}
 }

footer {margin-top: var(--step-4); background:aliceblue;grid-area:footer; display:grid; grid-template-columns:var(--gridColumLARGE);
		div.wrapper{margin:2lh 0;grid-column:2/-2; display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem,1fr)); gap:1rem;
			aside {padding:.5rem;border-left:.25rem dotted darkgreen;
				h4 {font-size:var(--step--1);
				 @media (width < 50rem){font-size:var(--step-0);}}
				& p {font-size:var(--step--2);
				@media (width < 50rem){font-size:var(--step--1);}}
				& p a {font-size:var(--step--2);
				@media (width < 50rem){font-size:var(--step--1);}}
		}
	}
	}

section {grid-column:2/-2; display:grid;  grid-template-columns: 5fr 2fr;
		 grid-template-areas	:	" head head"
			 						"content info" ;
							
							
		grid-template-rows: auto;
		
		gap:.5rem 2rem;
		margin-bottom:2rem;
		align-content:start; align-items:start; /*transform:translateY(5rem); transition:all 1s ease-in-out;/*opacity:0; overflow:visible;*/
	
	
		& header {grid-area:head;
			& h2{  font-size:var(--step-5);font-weight:900; color:#7c8c74; text-wrap:balance;;
			@media (width < 50rem){font-size:var(--step-4);}}
			}/*ENDE Header innerhalb section */
		& div.content {grid-area:content; display:grid; gap:var(--step-1); 
			& article {display:grid;}
		 	@media (width < 50rem){margin-bottom:2rem;}
			}/*ENDE CONTENT*/
		& aside.aside {display:grid; grid-area:info; align-items:start; gap:2rem;
				& h3{font-size:var(--step-0);}
				& p {font-size:var(--step--1);}
				& li {font-size:var(--step--1); margin-bottom:1rem; hyphens:auto;}
				& a {font-size:var(--step--1);}
				& figure { border:none;background:none;
					& img {border:none;}
					& figcaption {font-size:var(--step--1); padding:.5rem 0;}
					& figcaption a {font-style:italic;font-size:var(--step--2);}
					}/*ENDE FIGURE innerhalb von aside.aside*/
				& article {background:#f4f4f4;max-width:100%;}
		
			}
	  @media (width < 50rem){grid-template-columns:1fr; grid-template-areas:"head" "content" "info";}
		 		  

	}
	
	
	/*Section AKTUELL*/
	article.aktuell {display:grid; grid-template-columns:2fr 3fr;
		& figure {grid-column:1/2;
			& figcaption{ background:rgb(238, 242, 226);font-size:var(--step--1);}
			}
		
			
		& article {grid-column:2/-1; padding:.5rem 1rem;
			
			& h3 {font-weight:600; margin-bottom: - var(--step-0);}
			
			& p > a {font-size:var(--step--1);}
		}
		
		
	}
	

/*section.show {transform:translateY(0);opacity:1;}*/


	/*EINZELNE WRAPPER, ARTIKEL USW*/
	
	
	header.start {background: #b7d171a3;border-left: solid 1.5rem darkgreen;  border-right: solid 1.5rem darkgreen;  padding: .5rem 1rem; margin:1lh 0;
		& h2 {font-family: unset; font-size:var(--step-2);}
		
	}
	article.topAktuell {border-image:linear-gradient(45deg,#d6ea8c,blue)1/var(--step--3)/var(--step--2);
	
		& h3 {font-weight:900; margin-bottom: - var(--step-0);}
		
		& h4 {font-weight:600; font-size: var(--step-1); margin:var(--step--1) 0; color:#7c8c74;}
		
		& a {color: blue; font-weight:600; padding:5px 0; line-height:2.5;}
		
		& a:hover {color:black; background:#d6ea8c;}
		
		& span {font-size:smaller; line-height:1;
			a {font-size:inherit; font-weight:400; line-height:1;}
			}
			
		& details { }
		& summary {font-weight:600; font-size: var(--step-0); margin-left:var(--step-0) }
		
	}
	
	div.wrapperStandorte {
		display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem,1fr)); gap:1rem;grid-template-rows:auto; grid-template-rows:masonry;
		
		& figure {background:#f4f4f4}
	}

	article.visualisierung {display:grid;gap:1rem;
		
		& figure {overflow:hidden; transition:all 3s ease-in-out; 
		 & img{transform-origin:25%50%; transition:all 3s ease-in-out;}
		 & img.laetten {transform-origin:70%40%; transition:all 3s ease-in-out;}
		 }
		
		& figcaption {font-size:var(--step--1); padding:.5rem; background:rgba(0,0,0,0.05);}
	
	& figure:hover img {scale:3; }
	}
	
	aside.filme {display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem,1fr)); gap:.5rem;
		
		& figure {width:100%; display:grid; background:var(--backgroundVideos); padding:.25rem; border:1px solid var(--textDarkColor);
			& figcaption {font-size:var(--step--2);}
			}/*ENDE FIGURE */
		& iframe.video {aspect-ratio:16 / 9; width:100%; grid-column:1/-1; align-self:end; border:none;}
		& img.video {aspect-ratio:16 / 9; width:100%; grid-column:1/-1; align-self:end; border:none;}
		& a {align-self:end;}
		}   /*ENDE ASIDE FILME*/
		
		
		aside.links {background: inherit;
			& h3 {font-size:var(--step-0);}
			& ul {list-style-type:circle;
				& li {padding-left:1rem; margin-left:1rem;
					& a{font-size:var(--step--1);}
				}
		
			}
		}/*ENDE ASIDE LINKS*/
		
	/*INITIATIVE*/
	
	article.initiativen {
		& h3  a {font-size:var(--step-2); font-weight:900; 
			& span {color:red;}
			} /*ENDE H3 a */
		
		
		& details{ background:rgba(0,0,0,0.05);
			& summary {font-weight:600;}
			& summary::-webkit-details-marker, summary::marker {color:green; font-size:var(--step-1); opacity:0.8;}
			
			}
			
			}/*ENDE DETAILS*/
			
			& details[open] summary ~ *, details details[open] summary ~ * {
			  animation: sweep .8s ease-in-out;
		
		
	}/*ENDE ARTICLE initiative*/

	
		
	/*Visualisierungen*/
	
	article.visualisierung {
		
		& details{ background:rgba(0,0,0,0.05);
			& summary {font-weight:600;}
			
			&  ol {margin-left:2rem;
				& li {padding:.25rem;}
			}
		
			}/*ENDE DETAILS*/
		
		
	}/*ENDE ARTICLE visualisierungen*/

		/*ARGUMENTE*/
		ul.pfeil li:before {content:'→'; color:var(--redColor); padding-right:0.25rem; font-weight:bolder;}

		details.argumente   {padding-left:0; margin:.0rem 0;}
		details.argumente p  {font-size:var(--step-0);}
		details.argumente > summary {font-size:var(--step-1); text-align:left; margin:0; padding:0 0 0.5rem 0; transition:var(--slowTransition); line-height:1.1; 
			/* font-family: var(--titleFamily);*/ font-variant:small-caps;margin-bottom:1rem;}
		/*details.argumente:hover > summary {background:rgba(255,215,0,0.5);}*/
		summary {list-style-position:outside;}

		summary::-webkit-details-marker, summary::marker {color:green; font-size:var(--step-1); opacity:0.8;}

		details[open] summary ~ *, details details[open] summary ~ * {
		  animation: sweep 1s ease-in-out;
		}

		@keyframes sweep {
		  0%    {opacity: 0; }
		  100%  {opacity: 1; }
		}
		
		/*YOUTTUBES*/
		
		.video {   aspect-ratio: 16 / 9;   width: 100%; }
		
		.video[poster] { object-fit: cover;}
		
		/*STANDFOTOSS*/
		
		div.StandFotos {display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem,1fr)); gap:1rem;
			
			& figure {display:grid; background:#bcce8638;}
			
			& figcaption {align-self:start;}
			
			& img {border-color:#7c8c74; align-self:end;filter:grayscale(10%)}
				
			
		
			& img:hover {scale:2; z-index:8; position:relative; filter:none;}
			
			
		}
		div.StandFotos:has(img:hover) img:not(:hover){ filter:grayscale(100%); scale:.9;}
		
		div.wrapperVideos {display:grid; grid-template-columns:repeat(auto-fit, minmax(12rem,1fr)); gap:2rem;}
		
		
		/*VISUALISIERUNGSCLIPS*/
		
		div.vClips {display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem,1fr)); gap:1rem;
			
			& figure.order {display:grid; background:#bcce8638; display:grid; border:1px solid rgba(0,0,0,0.8);  transition:all .8s ease-in-out;}
			
			& figcaption {align-self:start; padding:2px;}
			
			& video { aspect-ratio: 16 / 9;   width: 100%; border-color:#7c8c74; filter:grayscale(10%); align-self:end; border:none;}
				
			
		
			
			
			
		}
		div.vClips:has(img:hover) img:not(:hover){ filter:grayscale(100%); scale:.9;}
		div.vClips:has(figure:hover) figure:not(:hover) {filter:grayscale(100%); scale:80%; transition:all .8s ease-in-out;}
		
		
		div.wrapperVideos {display:grid; grid-template-columns:repeat(auto-fit, minmax(12rem,1fr)); gap:2rem;}