/*SCHRIFTEN*/

/*
font-family: 'Poppins', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'Comfortaa', cursive;
font-family: 'Open Sans', sans-serif;

*/

:root {
	--blackbackground:rgba(70,70,70,1);
	--shadow-color:rgba(0,0,0,0.8);
	--navbackground:rgba(0,0,0,0.4);
	--light-black-color:rgba(0,0,0,0.4);
	--orange:rgba(255,165,0,1);
	--gray:silver;
	--fast-transition:all 0.4s ease-in-out;
	--slow-transition:all 0.8s ease-in-out;
	--body-bg:linear-gradient(to left, var(--blackbackground), var(--blackbackground)) ;
	
}


html {width:100vw;  font-size:100%; background-image:var(--body-bg);}

body {min-height:100vh; width:100vw; font-family: 'Raleway', sans-serif; line-height:1.5; margin:0; padding:0;  overflow-x:hidden; color:white;  font-size:16px;   display:grid; grid-template-columns:  1fr 992px 1fr; grid-template-rows:auto 1fr auto; grid-gap:1rem;
grid-template-areas: "   . head . "
					 "   . main . "
					 "   foot foot foot ";}

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

img {display:block; border:1px solid black;}

#anzeige {position:fixed; top:2px; left:10rem; width:auto; height:auto; color:orange; z-index:100;}

/*NAVIGATION*/
nav {position:fixed; top:0; right:0; bottom:0; width:50%; background:var(--navbackground); display:grid; grid-template-columns:1fr; grid-template-rows:1fr auto 2fr; transform:translateX(100vw); transition:all 0.8s ease-in-out;}
nav.open {transform:translateX(0); z-index:100;}
ul.nav {grid-row:2/3; list-style-type:none; margin-left:2rem;}
ul.nav li {height:3rem;}
a.nav {text-decoration:none; font-size:1.5rem; color:white; transition:all 0.5s ease-in-out;}
a.nav:hover, a.nav:active {color:var(--orange);}



/*ZEN - HAMBURGER*/
div#zen {width:3.5rem; height:2.5rem; border:1px solid rgba(0,0,0,0.0); position:relative; overflow:visible; cursor:pointer; display:inline-block; z-index:200;}
span.zen {display:block; height:0.25rem; background:white; border-radius:0.1rem; 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(-4px, 3px); 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(-3px, -4px); 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#zen:hover span.zen:first-child {animation:first 1s linear forwards;}
div#zen:hover span.zen:nth-child(2)  {animation:first 1s 0.2s linear forwards;}
div#zen:hover span.zen:last-child  {animation:first 1s 0.4s linear forwards;}

@keyframes first {
	0%  {transform:translateX(0);}
	25%  {transform:translateX(-1rem);}
	50%  {transform:translateX(0);}
	75%  {transform:translateX(1rem);}
	100%  {transform:translateX(0);}
}


/*HEADER*/
header.top {grid-area:head; height:auto; background-image:var(--body-bg); display:grid; grid-template-columns:1fr auto; justify-content:space-between; align-items:center; position: sticky; top: 0; z-index: 20; padding-top:2rem; padding-bottom:2rem; } 

h1 {font-family: 'Comfortaa', cursive; font-size:6.5rem; font-weight:400; text-shadow:0px 1px 0px rgba(0,0,0,0.8); }
span.gray {color:var(--gray); }
span.orange {color:var(--orange);  }
h2.top {font-size:1.25rem; line-height:1.25rem; transform:translateY(-0.6rem);}

/*span.first { position:relative; left:-100vw;animation:fromleft forwards 1s 1s ease-in-out;}
span.second { position:relative; left:-100vw;animation:fromleft forwards 1s 0.5s ease-in-out; }
span.third  { position:relative; left:-100vw; animation:fromleft forwards 1s ease-in-out;}*/
/*h2    {transform:translateX(-100vw); animation:fromleft forwards 1s ease-in-out;}*/

@keyframes fromleft {
	0% {  left:-100vw; }
	100% {  left:0; }
}

/*MAIN*/
main {grid-area:main; display:grid; overflow:visible; }
header.section {width:100%; display:grid; grid-template-columns:1fr; justify-items:end;}
h2.section {font-size:1.25rem;}
section {}
a.white {color:white;}

/*SECTIONS*/
/*HOME*/
section#home {display:grid; grid-template-columns:1fr; grid-template-rows:auto 1fr; justify-items:center; grid-gap:1rem; overflow:visible;}


div.home {  grid-column:1/-1; grid-row:2/-1; display:grid; grid-template-columns:repeat(12,1fr);  grid-template-rows:repeat(4, 1fr); align-content:start; justify-items:center;}

ul.home {list-style-type:none; grid-column:1/-1; grid-row:1/-2; display:grid; grid-template-columns:1fr; justify-items:center; align-items:start; overflow:visible; z-index:10; }
ul.home li {font-size:20rem; font-size:35vmin; line-height:35vmin; display:none; font-weight:800; grid-column:1/-1; grid-row:1/-1;  animation:ulminili_scale 30s 0s ease infinite; transform-origin:center; }

ul.home li:nth-child(1), ul.mini-1 li:nth-child(3), ul.mini-2 li:nth-child(5),  ul.mini-3 li:nth-child(2) {color:rgba(173,255,47,0.6);}
ul.home li:nth-child(2), ul.mini-1 li:nth-child(4), ul.mini-2 li:nth-child(1),  ul.mini-3 li:nth-child(3) {color:rgba(0,255,255,0.6);}
ul.home li:nth-child(3), ul.mini-1 li:nth-child(5), ul.mini-2 li:nth-child(2),  ul.mini-3 li:nth-child(4){color:rgba(255,0,255,0.6);}
ul.home li:nth-child(4), ul.mini-1 li:nth-child(1), ul.mini-2 li:nth-child(3),  ul.mini-3 li:nth-child(5){color:rgba(255,255,0,0.6);}
ul.home li:nth-child(5), ul.mini-1 li:nth-child(2), ul.mini-2 li:nth-child(4),  ul.mini-3 li:nth-child(1) {color:rgba(255,165,0,0.6);}

ul.mini-1 {list-style-type:none; grid-column: 2/span 5; grid-row:1; display:grid; grid-template-columns:1fr; justify-items:center; z-index:-1; align-self:end;}
ul.mini-1 li {font-size:6rem; font-size:10vmin; line-height:10vmin; display:none; grid-row:1/-1; grid-column:1/-1; font-weight:800;  animation:ulminili 10s 0s ease infinite; transform-origin:center; }

ul.mini-2 {list-style-type:none; grid-column: 7/span 5; grid-row:2; display:grid; grid-template-columns:1fr; justify-items:center; z-index:-1;}
ul.mini-2 li {font-size:5rem; font-size:8min; line-height:8vmin; display:none; grid-row:1/-1; grid-column:1/-1; font-weight:800; animation:ulminili_retour 20s  0s ease infinite; transform-origin:center; align-self:start; }

ul.mini-3 {list-style-type:none; grid-column: 1/span 5; grid-row:2; display:grid; grid-template-columns:1fr; justify-items:center; z-index:-1; align-self:start; animation:drehen 0.9s linear infinite; transform-origin:center; }
ul.mini-3 li {font-size:8rem; font-size:12vmin; line-height:12vmin; display:none; grid-row:1/2; grid-column:4/8; font-weight:800;  animation:ulminili 20s 0s ease infinite; transform-origin:center; align-self:end;}

ul.mini-4 {list-style-type:none; grid-column: 1/-1; grid-row:3/ span 2; display:grid; grid-template-columns:repeat(5,auto); grid-template-rows:1fr; justify-items:center; z-index:-1; align-self:start;  z-index:20; }
ul.mini-4 li {font-size:8rem; font-size:5vmin; line-height:5vmin; font-variant:small-caps; text-shadow:0px 1px 1px black, 10px 10px 10px rgba(0,0,0,1); ; display:none; grid-row:1/2; grid-column:4/8; font-weight:800; animation:scalex 19s 1s ease infinite; transform-origin:center;}

/*DREHEN*/
@keyframes rechts-links {

	0% {transform:translateX(-100%);}
	100% {transform:translateX(100%);}
}
@keyframes ulminili {
	0% {transform: rotate(0deg); transform:translateX(-50vmin);  transform:scale(0.6);}
	
	50%{transform:rotate(0deg);transform:translateX(30vmin);   }
	
	100%{transform:rotate(0deg);transform:translateX(-50vmin);   transform:scale(1.2);}
}

@keyframes ulminili_retour {
	0% {transform: rotate(0deg);transform:translateX(30vmin); transform:scale(0.6); }
	
	50%{transform:rotate(0deg);transform:translateX(-30vmin); }
	
	100%{transform:rotate(0deg);transform:translateX(30vmin); transform:scale(1.2); }
}

@keyframes ulminili_scale {
	0% {transform: rotate(0deg);transform:translateX(0rem); transform:scale(0.5);}
	
	50%{transform:rotate(0deg);transform:translateX(0rem); transform:scale(1.5);}
	
	100%{transform:rotate(0deg);transform:translateX(0rem); transform:scale(0.5);}
}
@keyframes scale {
	0% {transform: rotate(0deg);transform:translateX(0rem); transform:scale(0.8);}

	100%{transform:rotate(0deg);transform:translateX(0rem); transform:scale(1.1);}
}

/*SECTION REFERENCES*/
section#references {display:grid; grid-template-columns:1fr; grid-gap:2rem;}

div.wrapreferences {background:transparent; display:grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-gap:1.5rem; }

figure.referenz {width:auto; height:auto; transition:all 0.5s ease-in-out; position:relative; overflow:hidden;opacity:0; transform:translateX(-60px);}
figure.referenz.show {animation:visible 1s forwards ease-in-out}

@keyframes visible {
  0%    {opacity: 0; transform:translateX(-60px); }
  80%   {opacity:0.5;}
  100%  {opacity: 1; transform:translateX(0px); }
}
  
  
figure.referenz:hover {transform:scale(1.15); z-index:2; }
figure.referenz figcaption { transition:transform .5s .5s ease-in-out;position:absolute; top:0; right:0; bottom:0; left:0; transform:translateX(-100%); font-size:1.125rem;  font-variant:small-caps; background:var(--shadow-color); display:flex; justify-content:left; align-items:flex-end; transition:var(--fast-transition); padding:1rem;}
figure.referenz:hover img.referenz { scale:1.2;}
figure.referenz:hover figcaption {transform:translateX(0); transition:transform .5s .5s ease-in-out;}

img.referenz {width:100%; height:100%; transition:all 0.5s ease-in-out;  }

.wrapreferences:has(figure.referenz:hover) figure.referenz:not(:hover) img.referenz {
  scale: 0.8;
  opacity: 0.5;
  filter: sepia(100%);
}



/*PING*/

@keyframes ping {
					0% {transform:translateY(0px);}
					60% {transform:translateY(-10px);}
					80% {transform:translateY(5px);}
					0% {transform:translateY(0px);}
					}

/*img.referenz:hover {transform:scale(1.14); z-index:20;}*/

iframe {transform:scale(2);}





/*FOOTER*/
footer {grid-area:foot; height:auto;  background-image:linear-gradient(to bottom, var(--navbackground), var(--navbackground)); display:grid;  grid-template-columns:  1fr 992px 1fr; grid-row:auto;  padding:1rem 0 2.5rem 0;}
div.footerWrap {grid-column:2/3; display:grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); grid-gap:2rem 1rem;  }
p.footer { font-size:1.15rem; color:white; line-height:1.5; }
a.footer {color:white; transition:var(--fast-transition);}
a.footer:hover {color:var(--orange);}

/*BREAKPOINTS*/


@media screen and (max-width:1310px){
	
/*ul.home li {font-size:25vw;}
ul.mini-1 li {font-size:8.5vw;}
ul.mini-2 li {font-size:7.25vw;}
ul.mini-3 li {font-size:11vw;}*/

}

@media screen and (max-width:1056px){
	
	body {grid-template-columns: 1rem 1fr 1rem; 
		grid-template-areas: 	". 	head  ."
								".  main  ."
								"foot foot  foot";}
	h1 {font-size:10vw; }
	footer {grid-template-columns:  1rem 1fr 1rem; }

}

@media screen and (max-width:750px){
	div#zen {width:3rem; height:calc(3rem * 5 / 7); }
	}

@media screen and (max-width:650px){
	body {grid-template-columns:0.5rem 1fr 0.5rem;}
	div#zen {width:2.5rem; height:calc(2.5rem * 5 / 7); }
	}
	
@media screen and (max-width:600px){
	body {grid-template-columns:0.2rem 1fr 0.2rem;}
	div#zen {width:2rem; height:calc(2rem * 5 / 7); }
}