/*FONTS*/

/*
font-family: "Courier Prime", monospace;
font-family: "Rock Salt", cursive;
font-family: "Vast Shadow", serif;
font-family: "Montserrat", sans-serif;
font-family: "Open Sans", sans-serif;
font-family: "Nanum Gothic Coding", monospace;
font-family: "Raleway", sans-serif;

*/
/* @link https://utopia.fyi/type/calculator?c=320,20,1.2,1240,24,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
 /* --step--3: clamp(0.7234rem, 0.7079rem + 0.0776vi, 0.768rem);
  --step--2: clamp(0.8681rem, 0.8361rem + 0.1599vi, 0.96rem);
  --step--1: clamp(1.0417rem, 0.9866rem + 0.2754vi, 1.2rem);
  --step-0: clamp(1.25rem, 1.163rem + 0.4348vi, 1.5rem);
  --step-1: clamp(1.5rem, 1.3696rem + 0.6522vi, 1.875rem);
  --step-2: clamp(1.8rem, 1.6109rem + 0.9457vi, 2.3438rem);
  --step-3: clamp(2.16rem, 1.8923rem + 1.3386vi, 2.9297rem);
  --step-4: clamp(2.592rem, 2.2198rem + 1.8611vi, 3.6621rem);
  --step-5: clamp(3.1104rem, 2.6001rem + 2.5517vi, 4.5776rem);*/
 --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);
   --minus-step-4:-3dvw;
}

/*ROOT-VARIABLEN*/
:root {
	--textColor:white;
	--bodyColor:black;
	--goldColor:#857650;
	--borderColor:black;
	--gridColumLARGE:minmax(1.5rem,1fr) minmax(auto,80rem) minmax(2rem,1fr);;
	--gridColumnMediumArticle: minmax(0rem,1fr) minmax(auto,55rem) minmax(0rem,1fr);

	--gridColumnSmallArticle:minmax(0rem,1fr) minmax(auto,40rem) minmax(0rem,1fr);

	--navTopColor:#efefef;
	--scrollTop:50vh;
	--redColor:#840202;
	--redDarkColor:#af0000;/*#840202;*/
	--redMiddleColor:#ef1a1a;
	--goldDarkColor:#4f452e;
	--goldWeiterlesenColor:#ffd700bf;
	
	--navHoverUnderline:#618a86;
	--ArdennesOrnatiGreen:#06f5de;


}

html {height:100%; width:100dvw; font-size:100%; font-size:16px; scroll-behavior: smooth; scroll-padding-top:var(--scrollTop);}

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

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

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

img, picture, svg, video {display:block; width:100%;}

ul {list-style:none;}

p{ font-size:var(--step-0); line-height:1.3; font-family: "Raleway", sans-serif; margin:.5lh 0;font-weight:300; hyphens:auto;}
a {color:white; text-decoration:underline;}
p.balance {text-wrap:balance;}
h2 {font-size:var(--step-2);font-family: "Nanum Gothic Coding", monospace; margin:.5lh 0 0;}
h3 {font-size:var(--step-1);font-family: "Nanum Gothic Coding", monospace; margin:.5lh 0;}
h4 {font-size:var(--step-0);font-family: "Nanum Gothic Coding", monospace; margin:.5lh 0;}


/*div.scrollwatcher {width:100%; position:fixed; top:0; height:.5rem; background:lime; z-index:40; transform:translatex(-100%); animation:scroll-watcher linear; animation-timeline:scroll();}
@keyframes scroll-watcher{
	to {transform:translatex(0);}
	}*/

nav.top { z-index:20; grid-area:navi; display:grid; grid-template-columns: var(--gridColumLARGE);margin:0 1rem; position:sticky; top:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(2px); transition:all .8s ease-in-out;
	
	 ul {grid-column:2/-2; justify-self:end; /*gap:0 1rem;*/ margin:var(--step-1) 0 1rem; display:flex; /*flex-wrap:wrap;*/ list-style-type:none;
		 @media(width < 502px){justify-self:start;}
	
	 
	 	&::before, &::after {
	  		content:'';
	  		position:absolute;
	 	    left: calc(anchor(left) + .2rem);
	 	    right: calc(anchor(right) + .2rem);
	  		bottom:anchor(bottom);

	  		height:.3rem;
	 		border-radius:.5rem;	
	  		transition:all .5s ease-in-out;
	  	}

	 	&::before {
	 		position-anchor: --active-link;
	 		background:#840202;
	 	}
	  	&::after {
	 		z-index:10000;
	  		position-anchor: --hovered-link;
	  		background:var(--navHoverUnderline);  /*blue*/
			
	}
	
	/*isolation: isolate;*/
 	
	
	
	
		
			/*& li:hover {anchor-name: --hovered-link; }*/
		
		a {color:var(--navTopColor); text-underline-offset:.5rem; font-family: "Montserrat", sans-serif; font-size:var(--step--1); transition:all .5s ease-in-out; text-decoration:underline; text-decoration-thickness:.25rem;  text-decoration-color:#0000; padding:0 .5rem .6rem; }
 	 	
	 	a:hover, a:focus {
	 		anchor-name: --hovered-link;
	 	}
		
		a.active  {
			anchor-name: --active-link;
		}
		
		 @supports not ((anchor-name: --hovered-link) or (anchor-name: --active-link)){
	
		 		 & a:hover, & a.active {text-decoration:underline; text-decoration-thickness:.25rem;  text-decoration-color:var(--redColor);transition:all .5s ease-in-out;}
		 	   
		 	 }
		
		 	
   	 

				 	/*&::before, &::after {
				 		content:'';
				 		position:absolute;
					    left: calc(anchor(left) + 0rem);
					    right: calc(anchor(right) + 0rem);
				 		top:   anchor(bottom);
		
				 		height:.5rem;
						border-radius:.5rem;
	 		
	 		
		
				 		transition:left 300ms, right 300ms;
	
				 	}
		
					&::before {
		
						position-anchor: --hovered-link;
						background:blue;
			
					}
				 	&::after {
			
				 		position-anchor: --active-link;
				 		background:#840202;
			
				 	}*/
	
				}

}

/*header.top {grid-area:header;display:grid; grid-template-columns: var(--gridColumLARGE); 
	& div.contentHEADER {grid-column:2/-2; display:grid;  grid-template-columns:15vw 1fr; align-items:center; 

		& img { grid-column:1/2; align-self:center;  }
		& div.title{grid-column:2/3; display:grid; grid-template-columns:1fr; grid-template-rows:auto auto;
			& h1 {grid-column:1/-1; grid-row:1/2; font-family: "Vast Shadow", serif; font-size:var(--step-5); line-height:1; padding-bottom:.2lh; color:var(--goldColor); font-family: "Vast Shadow", serif;
				& span {letter-spacing:-3px;}
			}
			& h2 {grid-column:1/-1; grid-row:2/3; font-size:var(--step-1);font-family: "Nanum Gothic Coding", monospace; padding-left:.25lh; margin:0;}
			
		}		
		@media(width < 800px){grid-template-columns:1fr; 
			& img {display:none;}
			& div.title {grid-column:1/-1;} 
		}
	}
	
}*/


main {grid-area:main;}
section {gap:var(--step-5) 0;transform:translateY(5rem); transition:all 1.5s ease-in-out; opacity:0; overflow:visible; 
	display:grid;  grid-template-columns:var(--gridColumLARGE); grid-template-rows:auto;
	/*HEADER*/
	& header {grid-column:2/-2;display:grid; grid-template-columns: 1fr; margin-bottom: var(--minus-step-4);display:grid; grid-template-columns:15vw 1fr; grid-template-rows:max-content; align-content:center; 
		& img {grid-column:1/2; grid-row:1/-1; align-self:center;}
	
		& h2 {grid-column:2/-1; grid-row:1/3; font-size:var(--step-4);/*letter-spacing:-3px;*/font-family: "Rock Salt", cursive; /*font-family: "Vast Shadow", serif;*/ padding-left:.25lh; margin:0; align-self:center;}
		
		@media(width < 800px){grid-template-columns:1fr; 
			& img {display:none;}
			& h1, & h2 {grid-column:1/-1;} 
		}/*ENDE MEDIA*/
	
	}/*ENDHEADER*/
}

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



/*HOME*/
section#home {grid-template-columns:var(--gridColumLARGE); display:grid; grid-template-rows:auto;
	/*HEADER*/
	& header {grid-column:2/-2;display:grid; grid-template-columns: 1fr; margin-bottom: var(--minus-step-4);display:grid; grid-template-columns:15vw 1fr; grid-template-rows:auto auto; 
		& img {grid-column:1/2; grid-row:1/-1; align-self:center;}
		& h1 {grid-column:2/3; grid-row:1/2; font-family: "Vast Shadow", serif; font-size:var(--step-5); line-height:1; /*padding-bottom:.2lh;*/ color:var(--goldColor); font-family: "Vast Shadow", serif; align-self:end;
			& span {/*letter-spacing:-3px; */color:white; font-size:var(--step-4);font-family: "Rock Salt", cursive; }
		}
		& h2 {grid-column:2/3; grid-row:2/3; font-size:var(--step-1);font-family: "Nanum Gothic Coding", monospace; margin:0; padding-left:.25lh;}
		
		@media(width < 800px){grid-template-columns:1fr; 
			& img {display:none;}
			& h1, & h2 {grid-column:1/-1;} 
		}/*ENDE MEDIA*/
	
	}
		
		/*ENDHEADER*/
	
	& figure {grid-column:2/-2; z-index:-2; /*display:grid;*/;position:relative;
		& img.breite {grid-column:1/-1; grid-row:1/-1;z-index:-2;width:100%; border:none; position:relative; transform:translateY(0); scale:1; animation:scrollback linear; animation-timeline:scroll();transform-origin: bottom;}
		& figcaption {/*grid-column:1/-1; grid-row:1/-1; align-self:end; justify-self:start;*/position:absolute;right:0;top:.1rem; writing-mode:sideways-lr; color:white; transform-origin: top;}
	
	}
	
	
	
	& article.small {grid-column:2/-2; display:grid; grid-template-columns:minmax(0rem,1fr) minmax(auto,55rem) minmax(0rem,1fr);
		& p{ background:transparent;}
		
		& div.wrapperOneColumn {grid-column:2/-2; margin-top:1rem;}
		& aside.konzert{ display:grid; grid-template-columns:2fr 1fr; background:#840202; padding:.5rem;
			& div {grid-column:1/2; 
				& p {font-size:var(--step--0);}
				& h3 {font-size:var(--step-1);}
				& a {color:white; text-decoration:underline; line-height:1.5;}
			}
			& figure {grid-column:2/3; align-self:center; z-index:2;
				& img.black {background:black;}
				& img.white {background:white;}
			
			}
		}
		
		& div.wrapperAutoFit {grid-column:1/-1; display:grid; grid-template-columns:repeat(auto-fit, minmax(20rem,1fr)); gap:2rem; margin-top:2lh;
			& aside.konzert{ display:grid; grid-template-columns:2fr 1fr; background:#840202; padding:.5rem;
				& div {grid-column:1/2; 
					& p {font-size:var(--step--0);}
					& h3 {font-size:var(--step-1);}
					& a {color:white; text-decoration:underline; line-height:1.5;}
				}
				& figure {grid-column:2/3; align-self:center; z-index:2;
					& img.black {background:black;}}
			}
			
		}
		& p, & figure, & h2 {grid-column:2/-2;}
		
		
		& div.wrapperTwoColumns{ grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr;grid-template-columns:repeat(auto-fit, minmax(20rem,1fr)); margin-top:2lh; gap:.125em 2em;
			/*& *{margin:0; padding:0;}*/
			& aside.left, & aside.right {display:grid; align-items:start; grid-template-columns:1fr;  grid-template-rows:min-content min-content auto;}
			& iframe.video {aspect-ratio:16 / 9; width:100%; grid-column:1/-1; align-self:end;}
			& audio {transition:all .5s ease-in-out; margin:1lh auto .5lh 0; align-self:center;}
			& audio:hover, & audio:focus, & audio:active {}
			& h3 {font-size:var(--step-0);}
			& p {font-size:var(--step--1);}
			
			& figure.bildwechsel {overflow:hidden; width:100%; aspect-ratio:4/3; display:grid; margin-top:0;  align-self:end;
				& ul {grid-column:1/-1; grid-row:1/2; display:grid; overflow:hidden;
					& li { grid-column:1/-1; grid-row:1/2; overflow:hidden; 
					
				
						& img.BWhomeLINKS { width:100%; height:100%; transition:all 1.5s ease-in-out; object-fit:cover;}
					
						& img.BWhomeLINKS.come { animation:come 1.5s ease-in-out forwards;}
				
						& img.BWhomeLINKS.go {animation:go 1.5s ease-in-out forwards;}
						& img.BWhomeRECHTS { width:100%; height:100%; transition:all 1.5s ease-in-out; object-fit:cover;}
					
						& img.BWhomeRECHTS.come { animation:come 1.5s ease-in-out forwards;}
				
						& img.BWhomeRECHTS.go {animation:go 1.5s ease-in-out forwards;}
						
						/*& aside {position:absolute; left:0; bottom:0; color:white; writing-mode:sideways-lr;}*/
				
				}/*ENDE LI*/
			}/*ENDE UL*/
			
						
			}/*ENDE FIGURE*/
			
	 }/*ENDE WRAPPER TWO COLUMNS*/
	
	
} /*ENDE VON SECTION HOME*/
}



@keyframes ah2 {
	0% 		{opacity:0; transform:translateX(-4rem);}
	100%    {opacity:1; transform:translateX(0);}
}
@keyframes scrollback {
	
	to {transform:translateY(50%); scale:1.6;}
}

@keyframes come {
	0% 	 {opacity:0.0; z-index:-2;}
	100% {opacity:1; z-index:1;} 
}

@keyframes go {
	0%	 {opacity:1; z-index:1; ;}
	100% {opacity:0; z-index:-2;} 
}
/*Section BAND*/
section#band {grid-template-columns:var(--gridColumLARGE); display:grid; grid-template-rows:auto;
	& div.smaller {grid-column:2/-2; display:grid; grid-template-columns:minmax(0rem,1fr) minmax(auto,55rem) minmax(0rem,1fr);margin-top:-1rem;}
	& div.wrapperBand {grid-column:2/-2; display:grid; grid-template-columns:repeat(auto-fit, minmax(18rem,1fr)); gap:4rem 6rem; }
	& article{ 
		& h3 {margin-bottom:0;}
		& h3 + p {color:#afafaf; margin-top:0; font-size:var(--step--1);}
			
		
		& div.text p {font-size:var(--step--1); 
			& *{transition:all .4s ease-in-out; }
			& span.einblenden, & span.ausblenden{color:gold; font-style:italic; font-size:var(--step--1); cursor:pointer;
				&:hover {color:red;}
			}
	 	  	& span.mehr {display:none;}
	 	 	& span.mehr.inline {display:inline;}
	 	 	& span.ausblenden { display:none; font-style:italic;}
		}
		& div.text.gold {padding:.25rem; background:var(--goldDarkColor); border:solid var(--goldDarkColor); border-width:0 1rem; margin:0 -1.5rem -1rem;
			& span.einblenden, & span.ausblenden {color:gold;
				&:hover {color:red;}}
		
		}
		
	}
	
	& div.avatars {
		padding: 1rem 0; margin:var(--step-1) 0;
 	  	 --avatar-count: 16;
 	  	 --avatar-size: var(--step-7);
		 --column-size: calc(var(--avatar-size) / 3);

  	display: grid;  grid-template-columns: repeat(var(--avatar-count), var(--column-size)); transition: 500ms;  transition-delay: 500ms;}

	& div.avatars:hover {
 	   --column-size: calc(var(--avatar-size) * .8);  transition-delay: 0ms; }

	& img.avatar {
 		 width: var(--avatar-size); border-radius: 100vw;   border: .2em solid white; box-shadow: 0.25rem 0.28rem 0.5rem hsl(0 0% 0% / 0.2); transition: all 500ms;}
		 

	& img.avatar:hover { scale: 2.5;  z-index: 2; border-color:white;  }
	
	

		@supports selector(:has(+ *)) {
 	  	  img.avatar:hover + .avatar,
 	 	 img.avatar:has(+ .avatar:hover) {scale: 1.3; border-color:#0000;  }
	 }
	 & div.avatars:has(img.avatar:hover) img.avatar:not(:hover) {border-color:#0000;}
	 

 	/*& article.white {background:white; color:black; padding:.5rem; border-color:black; 
 		& img.avatar:hover {border-color:black;}*/
 	}

/*MUSIC*/
section#musik {grid-template-columns:var(--gridColumLARGE); display:grid; grid-template-rows:auto;
	& div.wrappeer_4_1 {grid-column:2/-2; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--step-0); 
		& img { position:relative; transform:translateY(0); scale:1; animation:scrollback linear; animation-timeline:scroll(); }
		/*& p { grid-column:1/-1; grid-row:2/-1; align-self:start; justify-self:end; font-size:var(--step--2); color:pink; z-index:10; }*/
		
		& + aside {font-size:var(--step--2); color:pink; grid-column:3/-1;margin:calc(-1 * var(--step-5)) 0; text-align:end;}
	
	}
	 
	
	article.borderImage {/*animation: example 1s ease-in-out 1s infinite alternate; */border-image:repeating-radial-gradient(1q,#857650,20px,#840202 0 40px)fill 0//0 100vw;}
	
	
	
	& figure.timeline {grid-column:2/-2; display:grid; grid-template-columns:minmax(0rem,1fr) minmax(auto,55rem) minmax(0rem,1fr); z-index:-2;
		& img {grid-column:2/-2;  width:100%; border:none; position:relative; transform:translateY(0); scale:1; animation:scrollback linear; animation-timeline:scroll();}
	
	}
	
	& article.small {grid-column:2/-2; display:grid; grid-template-columns:minmax(0rem,1fr) minmax(auto,55rem) minmax(0rem,1fr); background:transparent;
		& p{ background:rgba(0,0,0,0.5);}
		& p, & figure, & h2 {grid-column:2/-2;}
	
	
	}

	& div.wrapperAudios {grid-column:2/-2;display:grid;grid-template-columns:repeat(auto-fit, minmax(20rem,1fr)); gap:2rem ;
		& aside { border:dotted var(--redColor); padding:.5lh; transition:all .8s ease-in-out;  
			&:hover {border-color:red; scale:1.1; box-shadow: 2px 2px 10px 2px var(--redColor);}
	/* filter: drop-shadow(5px 10px white); */
	}
		
		& h4 {grid-area:title; font-size:var(--step-0); margin:0; align-self:end; letter-spacing:-.06em;}
		& p {grid-area:interpret; font-size:var(--step--1);margin:0; align-self:start;}
		& audio {padding:.5rem 0;}
		}
		
		& div.VOX { grid-column:2/-2; padding:1rem 0; display:grid;grid-template-columns:repeat(auto-fit, minmax(15rem,1fr));  gap:2rem;
			& figure { grid-column:auto; display:grid;grid-template-columns:1fr; width:auto; transition:all .8s ease-in-out; cursor:pointer;
			
			&:hover{scale:1.3; transition:all .8s ease-in-out; z-index:21;
				& img {filter:grayscale(0); transition:all .8s ease-in-out;;}
			}
				
				& img {grid-column:1/-1; filter:grayscale(.7); transition:all .8s ease-in-out; }
				
			}
			
		}
	 
}





/*REPETOIRE*/
section#repertoire {grid-template-columns:var(--gridColumLARGE); display:grid; grid-template-rows:auto;
	
	& figure {grid-column:2/-2; z-index:-2; position:relative; /*display:grid;*/
		& img.breite {grid-column:1/-1; grid-row:1/-1; width:100%; border:none; position:relative; transform:translateY(0); scale:1; animation:scrollback linear; animation-timeline:scroll();}
		& figcaption {/*grid-column:1/-1; grid-row:1/-1; aling-self:end; justify-self:start; */position:absolute; top:.1rem; right:0; writing-mode:sideways-lr; color:white; z-index:10;}
	
	}
	
	& article.small {grid-column:2/-2; display:grid; grid-template-columns:minmax(0rem,1fr) minmax(auto,55rem) minmax(0rem,1fr);
	& p, & figure, & h2 {grid-column:2/-2;}
	
	}
	
	& article.playlist {grid-column:2/2; display:grid; gap:2rem;
		& div.wrapperPlaylist {display:grid;grid-template-columns:repeat(auto-fit, minmax(20rem,1fr)); gap:1vw; padding:0 5vw; margin-top:-3vw;
			& aside {/*{border:solid 2px var(--goldColor);*/  scale:.8; display:grid; grid-template-columns:4rem 1fr; grid-template-rows:auto auto; gap:.125rem  1rem; grid-template-areas:"number title" "number interpret"; transition:all .4s ease-in-out; transform-origin:left; 

			& p.number {grid-area:number; color:var(--redColor); font-size:var(--step-4); margin:0;}
			& h4 {grid-area:title; font-size:var(--step-0); margin:0; align-self:end; letter-spacing:-.06em;}
			& p.interpret {grid-area:interpret; font-size:var(--step--1);margin:0; align-self:start;}
			
			}
			& aside:hover {scale:1;
				& p.number {color:red;}}
		}
		@media(width < 1048px){
			& div.wrapperPlaylist {padding:0;}
		}
	}
			

} /*ENDE SECTION REPERTOIRE*/

@keyframes scale{
	
	from {scale:.4; opacity:0; }
	to {scale:.8; opacity:1;}
	
}

/*SECTIONN KONTAKT*/
section#kontakt {grid-template-columns:var(--gridColumLARGE); display:grid; grid-template-rows:auto;
	
	& figure {grid-column:2/-2; 
		& img.breite {width:100%; border:none;}
	
	}
	
	& article.small {grid-column:2/-2; display:grid; grid-template-columns:minmax(0rem,1fr) minmax(auto,55rem) minmax(0rem,1fr);margin-top:-1rem;;
	& p, & figure, & h2 {grid-column:2/-2;}
	
	}
	
	& aside.kontaktformular {grid-column:2/-2;display:grid; grid-template-columns:minmax(0rem,1fr) minmax(auto,55rem) minmax(0rem,1fr); margin-top:-4vw;
			& div.output {grid-column: 2/-2; background:var(--goldColor); margin:1rem 0;
			& p, table.output {font-size:var(--step-1); color:white}
			}
		 	
			& form {grid-column:2/-2; display:grid; max-width:30rem; 
				& p, & table.output {font-size:var(--step-0); color:white;}
				& div#output {background:var(--goldColor); padding:0 1rem .5rem; margin:.5rem 0;opacity:0;
					& p, & tr {font-size:var(--step--1);}
					& tr {padding-right:.5rem;}
					}
				
			}
				
				
				& * {border-radius:0;}
				& fieldset { display:grid; grid-template-columns:1fr; gap:1rem; border:none;
					& div.form {display:grid;}
					& label.none {display:none;}
					& input, & label, & textarea {height:3rem; background:black; color:white; font-size:var(--step--1); background:black; padding-bottom:.5rem;border:none; border-bottom:1px solid white;}
					& textarea {height:6rem;}
					
					& input::placeholder, textarea::placeholder {font-size:var(--step--1); color:white; align-self:end;}
					& label {font-size:var(--step--1); color:white; }
					& input.absenden, input.abbrechen {background:white; cursor:pointer;text-align:center; color:var(--redColor); ;font-size:var(--step--1);}
					& div.form.test {display:grid; grid-template-columns:max-content 1fr; grid-gap:1rem;
					 & label.test {display:grid; grid-template-columns:auto auto auto auto auto;}}
					& div.form.submitbox {display:grid; grid-template-columns:1fr 1fr; grid-gap:1rem; margin-top:1rem;}
					& input.absenden, & input.abbrechen {background:black; cursor:pointer;text-align:center; color:white;font-size:var(--step--1); border:dotted 1px white; display:grid; place-items:center;}
				}
			}
			
			
			/*& 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;}
			

			& 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);}*/
			
		}	
			
		




/*IMPRESSUM*/
section#impressum {
	div.content {grid-column:2/-2;  /*display:grid; grid-template-columns:repeat(auto-fit, minmax(18rem,1fr)); */display:flex; flex-wrap:nowrap; gap:2rem; 
		@media(width < 1048px){
			flex-wrap:wrap;
		}
		& article { display:grid; align-content:start; 

			& p {font-size:var(--step--1);}
		}
		& article + * {flex:1 1 50rem;}
		
	}
}


/*FOOTER*/

footer {/*background:  --s: 10px; /* control the size */

grid-area:footer;display:grid; grid-template-columns:var(--gridColumLARGE); min-height:10rem; margin-top:var(--step-6); margin:var(--step-8) 0;

	& div.content {grid-column:2/-2; padding-top:var(--step-2);border-top:2px dotted var(--redColor); /*display:grid; grid-template-columns:repeat(auto-fit, minmax(18rem,1fr));*/ gap:5vw; display:flex; flex-wrap:wrap;
		& aside{display:grid; grid-template-columns:1fr; grid-template-rows:2.5em auto; gap:0 2rem; 
			& img.youtube {width:var(--step-2); height:auto; grid-row:2/3; margin:.25rem 0;}
			& h4 {font-size:var(--step---4); grid-row:1/2; margin:0; align-self:end;color:#afafaf;}
			& p {font-size:var(--step--1); align-self:start; grid-row:2/3; margin:.25rem 0;}
			& a {color:white;transition: all .5s ease-in-out;
				&:hover{ color:red;}
				}
			
			
			
			}/*ENDE Aside*/
			& aside.bandmotto {display:grid; grid-template-columns:1fr var(--step-5); grid-template-rows:2.5em auto; gap:0 2rem;
				& h4 {grid-column:1/2; grid-row:1/2;}
				& p {grid-column:1/2; grid-row:2/3; align-self:start;}
				& img {grid-column:2/3; grid-row:1/-1; width:100%; transition:all .8s ease-in-out; border-radius:.25em; border:1px solid black}
					& img:hover {scale:2;};
			/*ENDE Div Bandmotto*/
		}/*ENDE div.content*/
	
	}/*ENDE FOOTer*/