Das sind wir!

<script>
  
  const videos = document.querySelectorAll(".hero-video");
  const cards = document.querySelectorAll(".hero-card");
  const imagesLight = document.querySelectorAll(".image-light");
  const textBoxes = document.querySelectorAll(".hero-textbox");
  
  cards.forEach((card, index) =>{
    card.addEventListener("click", ()=>{
      videos.forEach((vid) =>{
      	console.log(vid);
        vid.style.zIndex = "0";
      });
      imagesLight.forEach((img)=>{
        img.style.zIndex = "1";
      });
      textBoxes.forEach((text)=>{
        text.style.display = "none";
      });
      videos[index].style.zIndex = "1";
      imagesLight[index].style.zIndex = "0";
      textBoxes[index].style.display="flex";
    });
  });
  
  
  
</script>

<script>
 
  document.addEventListener("DOMContentLoaded", (event) => {
  
  const leistungenContainer = document.querySelectorAll(".leistungen-container");
  console.log(leistungenContainer);
  const leistungenInfobox = document.querySelectorAll(".leistungen-infobox");
  console.log(leistungenInfobox);
  const leistungenButton = document.querySelectorAll(".leistungen-button");
	console.log(leistungenButton);
    
  let prevButton = null;
  let prevTimeLine = null;
  
  leistungenButton.forEach((button, index) =>{
   button.addEventListener("click", ()=>{
   	 
     leistungenContainer.forEach((box) =>{
       box.style.width = "25%";
       if(window.innerWidth < 1000){
          box.style.width = "auto";
          box.style.height = "900px";
       }
       box.style.minWidth = "12vw";
       
     });
     leistungenButton.forEach((button2) =>{
       button2.style.top = "50%";
       button.style.maxWidth = "200px";
       button.style.minWidth = "200px";
     });
     leistungenInfobox.forEach((info) =>{
       info.style.opacity = "0";
       info.style.overflow = "hidden";
       info.style.maxWidth = "0";
     });
    /*
    if(prevTimeLine !== null && prevButton !== button) {
      console.log("anderer Button");
      prevTimeLine.reverse();
    }
     if(button === prevButton) {
       console.log("gleicher Button");
       prevTimeLine.reverse();
     }
     
    let buttonTimeLine = gsap.timeline();
    //buttonTimeLine.addDelay(2);
		buttonTimeLine.to(button, {y: -350, duration: .25,	ease: 'bounce.out' });
     buttonTimeLine.to(button, {maxWidth:"70%", duration: .25});
     buttonTimeLine.to(button, {minWidth:"70%", duration: .25});
     buttonTimeLine.play();
     */
     
     
     leistungenContainer[index].style.minWidth = "50vw";
     leistungenInfobox[index].style.opacity = "1";
     leistungenInfobox[index].style.maxHeight = "fit-content";
     leistungenInfobox[index].style.maxWidth = "fit-content";
     
		
     
     button.style.top = "40px";
     button.style.maxWidth = "70%";
     button.style.minWidth = "70%";
     
     
     
     if(prevButton === button){
       leistungenInfobox.forEach((info) =>{
       	info.style.opacity = "0";
       	info.style.overflow = "hidden";
       	info.style.maxWidth = "0";
     	 });
       leistungenContainer.forEach((box) =>{
       	box.style.width = "24%";
        if(window.innerWidth < 1000){
          box.style.width = "auto";
          box.style.height = "900px";
        }
        box.style.minWidth = "24vw";
     	 });
       leistungenButton.forEach((button2) =>{
       	button2.style.top = "50%";
       	button.style.maxWidth = "200px";
       	button.style.minWidth = "200px";
     	 });
     }
     
     prevButton = button;
    
   });
    
  });
   /* 
   window.addEventListener("load", function(e){

  //custom GSAP code goes here
  // This tween will rotate an element with a class of .my-element
   gsap.to('.leistungen-button', {
    rotation: 160,
    duration: 2,
    ease: 'bounce.out'
   })

   console.log("window loaded");
  }, false);  
  */
  
  });
  
</script>