/* https://www.youtube.com/watch?v=q3PKDgabL7A */





@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Text:wght@200..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');



@font-face {
  font-family: 'TeamMTBold';
  src: url('fonts/team-mt-bold.woff2') format('woff2'),
       url('fonts/team-mt-bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GTAmericaCondensed';
  src: url('GTAmericaCondensedRegular.woff2') format('woff2'),
       url('GTAmericaCondensedRegular.woff') format('woff');
   font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'GTAmericaCompressed';
  src: url('fonts/GTAmericaCompressedBold.woff2') format('woff2'),
       url('fonts/GTAmericaCompressedBold.woff') format('woff');
   font-weight: 700;
 
}

@font-face {
  font-family: 'GTAmericaRegular';
  src: url('GTAmericaRegular.woff2') format('woff2'),
       url('GTAmericaRegular.woff') format('woff');
  font-weight: normal;
 
}







body{
  background-color: rgb(255, 255, 255);
color: #000000;
font-family: 'Arial';
margin: 0; 

}

a:link {
  color: white;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: white;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: grey;
  background-color: black;
}
a:active {
  color: white;
  background-color: transparent;
  text-decoration: none;
}
/* Scroll Watcher for demo 
Kommt von hier:
 https://www.youtube.com/watch?v=UmzFk68Bwdk&list=PL4-IK0AVhVjP5iRPyoF1pKwX-7sEOwty4&index=12

 */

/* CSS Scroll Watcher-Ding */


 .scroll-watcher {
  height: 10px;
  position: fixed;
  top: 0;
  z-index: 1000;
  background-color: lime;
  width: 100%;
  scale: 0 1;
  transform-origin: left;
  animation: scroll-watcher linear;
  animation-timeline: scroll()
 }

@keyframes scroll-watcher {
  to { scale: 1 1; }
}

/* Fade-In für alle Bilder */

img {
scale: 1; opacity: 1;
animation: fade-in linear forwards;
animation-timeline: view();
animation-range: entry 200px;
}

@keyframes fade-in {

  to {scale: 1; opacity: 1;}
}


/* Fade-Out Header-Image */

.header-image {
grid-column: 1 / 1;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.8;
object-fit: cover;
z-index: -1;

animation: header-image-animation linear forwards;
animation-timeline: view();
animation-range: exit;


}
@keyframes fade-out {
  to {opacity: 0;}
}

@keyframes header-image-animation { 
25% { opacity: 1; }
85% {opacity: 0; scale: 3}
 100% {opacity: 0; scale:0}
}


/* Fade-Out TURBOMANÉS-Schriftzug */

.article-header {
  display: grid;
  place-items: center;
  position: relative;
height: 100svh;
overflow-x: clip;
padding-block: 7rem;
margin-block-end: 3rem;
font-size: 90px;
text-transform: uppercase;
font-family: 'TeamMTBold', cursive;
color:#fff;

}

.header-content {
animation: fade-out linear;
animation-timeline: view();
animation-range: exit -200px;


}



/* ENDE DES ANIMATIONSTEILS */






.banner{
background-image: url(pi/grain2_small.jpg) ;
width: 100%;
height: 100vh;
margin-top: -70px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
display: flex;
justify-content: center;
/* display flex und justify-content center (vertikal zentrieren) platzieren alle Elemente innerhalb des Containers banner 
immer in der Mitte des Bildschirms ; align-items richtet die Elemente horizontal aus*/
align-items: center;
animation: banner linear forwards;
animation-timeline: view();
animation-range: exit;


}

.header{
  border-bottom: 0px solid #eee2;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 100px;	
font-family: 'Google Sans Flex';
z-index: 1000;


}


@keyframes fade-out {
  to {opacity: 0;}
}

@keyframes banner { 
25% { opacity: 1; }
85% {opacity: 0; scale: 3}
100% {opacity: 0; scale: 1}
}



.banner .content{
font-size: 9px;
text-transform: uppercase;
font-family: 'TeamMTBold';
color:#fff;

}




.banner .content div:nth-child(1){
font-size: 20em;
 /* 3em = 12px x 3 */
}


.banner .content div:nth-child(2){
font-size: 3em;
 /* 20em = 12px x 20 */
font-weight: bold;
text-align: center;
}

.banner .content div:nth-child(3){
text-align: center;

}

.banner .content div button{
border: 1px solid #eee7;
background-color: transparent;
color: #eee;
padding: 10px 20px;
letter-spacing: 5px;
}


@media screen and (max-width: 1300px) {
.banner .content { font-size: 7px ; }
}
/* iPad */
@media screen and (max-width: 992px) {
.banner .content { font-size: 5.5px ; }

}  
/* Mobile Phones */
@media screen and (max-width: 678px) {
.banner .content { font-size: 3px ; }

}  





.banner2{

width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
margin-top: 0px;
justify-content: center;
align-items: center;

}

.banner2 .content{
font-size: 12px;
text-transform: uppercase;
font-family: 'Google Sans Flex';
color:#fff;
justify-content: center;
}

.heading1{
font-size: 25px;
text-transform: uppercase;
font-family: 'Rubik Mono One';
color:#fff;

}
.banner2 .content2{
font-size: clamp(1em, 2.8vw, 2em);
text-transform:uppercase;
font-family: 'Google Sans Flex';
text-align: left;
display: flex;
color:#000000;
width: 70%;
margin: 2px;
align-items: center;
justify-content: center;
line-height: 1.3em;


}
.banner2 .content2a{
font-size: clamp(3em, 2.8vw, 4em);
text-transform:uppercase;
font-family: 'GTAmericaCompressed';
text-align: center;
display: flex;
color:#fff;
width: 70%;
margin: 2px;
line-height: 1.2em;

justify-content: center;

}

.banner2 .headline{
font-size: clamp(7em, 2.8vw, 12em);
text-transform:uppercase;
font-family: 'GTAmericaCompressed';
text-align: center;
display: flex;
color:#000000;
width: 70%;
margin: 80px;
line-height: 0.8em;
opacity: 0.3;

align-items: center;
justify-content: center;

  animation-duration: 3s;
 animation-name: cube-rotate;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;

}

/*animation: headline linear forwards;
animation-timeline: view();
animation-range: 100px;
}

@keyframes headline { 
25% { opacity: 1; }
85% {opacity: 0.5; scale: 1}
90% {opacity: 0.8; scale: 1}
100% {opacity: 0.6}

}
*/

@keyframes cube-rotate {

  25% { opacity: 1; }
  85% {opacity: 0.5; scale: 1}
90% {opacity: 0.8; scale: 1}
100% {opacity: 0.6}

  

from {
    transform: perspective(600px) rotate3d(0.6, 0.05, 0.2, 0deg);

  }

  to {
    transform: perspective(600px) rotate3d(0.6, 0.05, 0.2, 20deg);
   
  }

} 


.content2{
font-size: clamp(1em, 2.8vw, 2em);
text-transform:uppercase;
font-family: 'GTAmericaCondensed';
text-align: center;
display: flex;
color:#000000;
width: 70%;
margin: 2px;
align-items: center;
justify-content: center;
line-height: 1.3em;
}

.banner2 .content3{
font-size: 16px;
font-family: 'Google Sans Flex';
color:#fff;
width: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: end;
}

.banner2 .content4{

background-color:#000;
  font-size: 16px;
font-family: 'Google Sans Flex';
color:#fff;
width: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}


.banner2 .content5{

background-color:#000;
  font-size: 16px;
font-family: 'Google Sans Flex';
color:#fff;
width: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
}

.banner3{
background-image: url(bandroom_001.jpg) ;
width: 100%;
height: 100vh;

background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;

justify-content: center;
align-items: center;


}

.banner4{
background-image: url(Bandroom_clean_001ab_grain.jpg);
width: 100%;
height: 100vh;
margin-top: 0px;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;

justify-content: center;
align-items: center;
}

.banner3 .content2{
font-size: clamp(1em, 2.8vw, 2em);
text-transform:uppercase;
font-family: 'GTAmericaCondensed';
text-align: left;
display: flex;
color:#fff;
width: 70%;
margin: 2px;
align-items: center;
justify-content: center;
line-height: 1.3em;
}