/* Global Styles */
body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #000;
  color: white;
  overflow-x: hidden; /* Verhindert horizontales Scrollen */
  margin: 0;
  
scroll-behavior: smooth;

}


/* Section-Styles */
main {
  margin: 0;
}

@font-face {
  font-family: 'LouisGeorgeCafe';
  src: url(LouisGeorgeCafe.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 


@font-face {
  font-family: 'reaniebeanie';
  src: url(ReenieBeanie-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 




@font-face {
  font-family: 'Arkipelago';
  src: url(Arkipelago\ 1.003.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 


@font-face {
  font-family: 'Avenirroman';
  src: url(AvenirLTStd-Roman.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 


@font-face {
  font-family: 'Avenirmedium';
  src: url(AvenirLTStd-Medium.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 

@font-face {
  font-family: 'Avenirlight';
  src: url(AvenirLTStd-Light.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 

@font-face {
  font-family: 'Beauty';
  src: url(BeautyDemo.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 


@font-face {
  font-family: 'Avenirheavy';
  src: url(AvenirLTStd-Heavy.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 


@font-face {
  font-family: 'Louisgeorgecafebold';
  src: url(LouisGeorgeCafeBold.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 

@font-face {
  font-family: 'LEMONMILKBOLD';
  src: url(LEMONMILK-Bold.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 

@font-face {
  font-family: 'LEMONMILKLIGHT';
  src: url(LEMONMILK-Light.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 

@font-face {
  font-family: 'LEMONMILK';
  src: url(LEMONMILK-Regular.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 

@font-face {
  font-family: 'LexendBold';
  src: url(  Lexend-Bold.ttf    ) format('truetype');
  font-weight: normal;
  font-style: normal;
} 

@font-face {
  font-family: 'SignatureDecember';
  src: url(  SignatureDecember.otf    ) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Autobiography';
  src: url(Autobiography.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Lexendlight';
  src: url(  LexendLight.ttf   ) format('truetype');
  font-weight: normal;
  font-style: normal;
}





.section-1 {
  background-color: #0f0f0f;
  padding: 400px 0; /* Oben und unten Abstand */
  position: relative;
  box-shadow: 0 -20px 40px;
  z-index: 0;
  
}


 .section-61vid {
  background-color: #0f0f0f;
  padding: 400px 0; /* Oben und unten Abstand */
  position: relative;
  box-shadow: 0 -20px 40px;
  z-index: 0;
  
}





.bfq-video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
object-fit: cover;
z-index: 0;
}



.bfq2-video {
position: absolute;
top: 40%;
left: 50%;
min-width: 100%;

transform: translate(-50%, -50%);
object-fit: cover;
z-index: 2;
}



  .scroll-trigger {
    position: absolute;
    bottom: 24%;
    left: 4%;
    cursor: pointer;
    z-index: 10;
  }
  
  .scroll-trigger .arrow {
    width: 30%;
    transition: opacity 0.3s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .scroll-trigger .hover {
    opacity: 0;
  }
  
  .scroll-trigger:hover .default {
    opacity: 0;
  }
  
  .scroll-trigger:hover .hover {
    opacity: 1;
  }
  
  .scroll-trigger p1 {
    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(14px, 1.5vw, 20px);
    color: #e76730;
    margin-top: 80%;
    transition: color 0.3s ease;
  }
  
  .scroll-trigger:hover p1 {
    color: #080808;
  }
  






.NULNEBLA-container {
flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top: 4%;
  left: 4%;
  z-index: 1;

}

/* Bild-Wrapper */
.NULNEBLA-wrapper5 {
  position: relative;
  width: 30%; /* frei skalierbar */
  height: auto;
}

.icon {
  width: 100%;
  height: auto;
  position: absolute;
  top: 20%;
  top: 0;
  left: 0;
}

.icon.hover {
  opacity: 0;
}

.icon-default5{
  opacity: 1;
}



.NULNEBLA-container:hover .icon.default {
  opacity: 0;
}
.NULNEBLA-container:hover .icon.hover {
  opacity: 1;
}

/* Text */
.NULNEBLA-text {
  text-align: left;
 margin-top: 3%;
 margin-left: 33%;
  font-size: clamp(48px, 8vw, 54px);
  font-family: 'LEMONMILKBOLD', sans-serif;
  color:  #f5f5f5;
  max-width: 520px;
}



.NULNEBLA-container:hover .NULNEBLA-text {
  display: inline-block;
  color: #0e0e0e;      }






  .section-black {
    background-color: #0b0b0b;
    transition: background-color 0.4s ease;
        padding: 770px 0; /* Oben und unten Abstand */
            position: relative;
                box-shadow: 0 20px -30px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
      z-index: 3; /* Damit der Schatten über dem oberen Bereich liegt */
    overflow: hidden;
    }



    .wert-section.from-section-black {
      background-color: #0b0b0b;
      transition: background-color 0.6s ease;

      }






       .section-blacknoc {
    background-color: #0b0b0b;
    transition: background-color 0.4s ease;
        padding: 370px 0; /* Oben und unten Abstand */
            position: relative;
                box-shadow: 0 20px -30px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
      z-index: 3; /* Damit der Schatten über dem oberen Bereich liegt */
    overflow: hidden;
    }











    

    .blacktext-1{
      font-family: 'Avenirlight';
      color: #de9271aa;
      font-size: clamp(14px, 1.7vw, 17px);
      left:27%;
    top: 17%;
    max-width: 35%;
    position: absolute;
    transition: opacity 0.8s ease, color 0.6s ease transform 0.8s ease;
      z-index: 5;
     line-height: 0.92;
    }
    
    .hgblacktext1{
      font-family: 'LEMONMILKBOLD';
      font-size: clamp(19px, 1.7vw, 21px);

      }

      .hgblacktext12{
        font-family: 'Avenirmedium';
  
        }
      

    
    .blacktext-1:hover{
    color: #e76730;
    }





    .blacktext-3{
      font-family: 'Avenirlight';
      color: #de9271aa;
      font-size: clamp(14px, 1.7vw, 17px);
      left:27%;
    top: 49%;
    max-width: 35%;
    position: absolute;
    transition: opacity 0.8s ease, color 0.6s ease transform 0.8s ease;
      z-index: 5;
     line-height: 0.92;
    }
    
    .hgblacktext3{
      font-family: 'LEMONMILKBOLD';
      font-size: clamp(19px, 1.7vw, 21px);

      }

      .hgblacktext33{
        font-family: 'Avenirmedium';
  
        }
      

    
    .blacktext-3:hover{
    color: #e76730;
    }







.link4-span {
  font-family: 'Avenirmedium', sans-serif;
color: #de9271aa;
cursor: pointer;
transition: color 0.3s ease, background-color 0.3s ease;
text-decoration: underline;
text-decoration-color: #de9271aa;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}

.blacktext-4:hover .link4-span:hover {
color: #a56c36;
text-decoration: underline;
text-decoration-color: #a56c36;
animation: growLine 2s ease forwards;


}

.blacktext-4:hover .link4-span {
  font-family: 'Avenirmedium', sans-serif;
color: #eeeeee;
cursor: pointer;
transition: color 0.3s ease, background-color 0.3s ease;
text-decoration: underline;
text-decoration-color: #eeeeee;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}








    .blacktext-2{
      font-family: 'Avenirlight';
      color: #de9271aa;
      font-size: clamp(14px, 1.7vw, 17px);
      left:27%;
      top: 34%;
    max-width: 35%;
    position: absolute;
    transition: opacity 0.8s ease, color 0.6s ease transform 0.8s ease;
      z-index: 5;
     line-height: 0.92;
    }
    
    .hgblacktext2{
      font-family: 'LEMONMILKBOLD';
      font-size: clamp(19px, 1.7vw, 21px);

      }

      .hgblacktext22{
        font-family: 'Avenirmedium';
  
        }
      

    
    .blacktext-2:hover{
    color: #e76730;
    }













    .blacktext-4{
      font-family: 'Avenirlight';
      color: #de9271aa;
      font-size: clamp(14px, 1.7vw, 17px);
      left:27%;
    top: 68%;
    max-width: 35%;
    position: absolute;
    transition: opacity 0.8s ease, color 0.6s ease transform 0.8s ease;
      z-index: 5;
     line-height: 0.92;
    }
    
    .hgblacktext4{
      font-family: 'LEMONMILKBOLD';
      font-size: clamp(19px, 1.7vw, 21px);

      }

      .hgblacktext44{
        font-family: 'Avenirmedium';
  
        }
      

    
    .blacktext-4:hover{
    color: #e76730;
    }








    .btxt{
      font-family: 'LEMONMILKBOLD';
      color: #e7673062;
    opacity: 0;
    transform: translateX(-380px);
    left: 4%;
    top: 3%;
    position: absolute;
    transition: opacity 0.8s ease, transform 0.8s ease;
      z-index: 5;
      letter-spacing: -2px;
      font-size: clamp(42px, 1.7vw, 47px);
    }
    
    
    
    .section-black.active  .btxt {
    opacity: 1;
    transform: translateY(0);
    }



    .btxt2{
      font-family: 'LEMONMILKLIGHT';
      color: #e76730;
    opacity: 0;
    transform: translateX(380px);
    left: 4%;
    top: 7%;
    position: absolute;
    transition: opacity 0.8s ease, transform 0.8s ease;
      z-index: 5;
      letter-spacing: -2px;
      font-size: clamp(29px, 1.7vw, 32px);
    }
    
    
    
    .section-black.active  .btxt2 {
    opacity: 1;
    transform: translateY(0);
    }





.circ1 {
  position: absolute;
  top: 18%;
  left:22%;
  background-color: #e76730;
width: 35px;
height: 35px;
border-radius: 50%;
z-index: 4;
transform: translateX(-340px);
  transition: opacity 0.8s ease, transform 1.2s ease;
  opacity: 0;
  }



  .section-black.active .circ1 {
    opacity: 1;
    transform: translateX(0);
    }
  







    .line-container2 {
      position: absolute;
      top: 19%;
      left: 2%;
      height: 8px;
      border-radius: 8px;
      width: 21%; /* oder 300px, etc. */
      overflow: hidden;
     transition: opacity 2.3s ease, transform 1.3s ease;
     opacity: 0;
  }
     
    
    .black-line2 {
      height: 126px;
      background-color: #e76730;
opacity: 1;   
transition: opacity 2.3s ease, animation 1.3s ease;
}

     @keyframes growLine {
      from { width: 0; }
      to { width: 100%; } /* Zielbreite */
    }
    
  

    .section-black.active  .black-line2{
      animation: growLine 1s ease forwards;
      opacity: 1;
      }
    
  
      .section-black.active  .line-container2{
        opacity: 1;
        }
  





      .circ2 {
        position: absolute;
        top: 35%;
        left:22%;
        background-color: #e76730;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      z-index: 4;
      transform: translateY(-300px);
      transition: opacity 0.2s ease, transform 1.2s ease;
        opacity: 0;
        }
      
      
      
        .section-black.active .circ2 {
          opacity: 1;
          transform: translateY(0);
          transition-delay:0.5s; /* startet 0.5 Sekunden später */

          }
        



      .line-container3 {
        position: absolute;
        top: 19%;
        left: 23%;
        width: 8px; /* schmale vertikale Leiste */
        height: 260px; /* maximale Höhe der animierten Linie */
        border-radius: 8px;
        overflow: hidden;
      }
      
       
      
      .black-line3 {
        width: 100%;
        height: 0; /* startzustand */
        background-color: #e76730;
        opacity: 1;   
        transition: opacity 2.3s ease;
      }
      
    
  
    @keyframes growLineVertical {
      from { height: 0; }
      to { height: 100%; }
    }
    
    
    .section-black.active .black-line3 {
      animation: growLineVertical 0.8s ease forwards;
      opacity: 1;
      animation-delay:0.5s; /* startet 0.5 Sekunden später */

    }
    
      
    
        







    .circ3 {
      position: absolute;
      top: 52%;
      left:22%;
      background-color: #e76730;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    z-index: 4;
    transform: translateY(-300px);
      transition: opacity 0.2s ease, transform 1.2s ease;
      opacity: 0;
      }
    
    
    
      .section-black.active .circ3 {
        opacity: 1;
        transform: translateY(0);
        transition-delay:1s; /* startet 0.5 Sekunden später */

        }
      



    .line-container4 {
      position: absolute;
      top: 36%;
      left: 23%;
      width: 8px; /* schmale vertikale Leiste */
      height: 260px; /* maximale Höhe der animierten Linie */
      border-radius: 8px;
      overflow: hidden;
    }
    
     
    
    .black-line4 {
      width: 100%;
      height: 0; /* startzustand */
      background-color: #e76730;
      opacity: 1;   
      transition: opacity 2.3s ease;
    }
    
  

  @keyframes growLineVertical {
    from { height: 0; }
    to { height: 100%; }
  }
  
  
  .section-black.active .black-line4 {
    animation: growLineVertical 0.8s ease forwards;
    opacity: 1;
    animation-delay:1s; /* startet 0.5 Sekunden später */

  }
  
    
  

  

    







  .circ4 {
    position: absolute;
    top: 69%;
    left:22%;
    background-color: #e76730;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  z-index: 4;
  transform: translateY(-300px);
    transition: opacity 0.2s ease, transform 1.2s ease;
    opacity: 0;
    }
  
  
  
    .section-black.active .circ4 {
      opacity: 1;
      transform: translateY(0);
      transition-delay:1s; /* startet 0.5 Sekunden später */

      }
    



  .line-container5 {
    position: absolute;
    top: 53%;
    left: 23%;
    width: 8px; /* schmale vertikale Leiste */
    height: 260px; /* maximale Höhe der animierten Linie */
    border-radius: 8px;
    overflow: hidden;
  }
  
   
  
  .black-line5 {
    width: 100%;
    height: 0; /* startzustand */
    background-color: #e76730;
    opacity: 1;   
    transition: opacity 2.3s ease;
  }
  


@keyframes growLineVertical {
  from { height: 0; }
  to { height: 100%; }
}


.section-black.active .black-line5 {
  animation: growLineVertical 0.8s ease forwards;
  opacity: 1;
  animation-delay:1.5s; /* startet 0.5 Sekunden später */

}

  










.section-2 {
background-color: #C9CDD8;
transition: background-color 0.4s ease;
    padding: 470px 0; /* Oben und unten Abstand */
        position: relative;
            box-shadow: 0 20px -30px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
  z-index: 3; /* Damit der Schatten über dem oberen Bereich liegt */



}

.section-2.from-section-3neu {
background-color: #C9CDD8;
}



.section-5cneu.from-section-4neu {
  background-color: #C9CDD8;
  transition: background-color 0.6s ease;

  }


.section-4neu {

transition: background-color 0.6s ease;
overflow: hidden;
  background-color: #151515;
  padding: 620px 0; /* Oben und unten Abstand */
  position: relative;
  /* -------------------------------
   Box-Shadow erklärt:
   0     → Kein horizontaler Versatz (bleibt zentriert)
   20px  → Vertikaler Versatz nach unten (Schatten fällt nach unten)
   40px  → Weichzeichner-Radius (wie verschwommen der Schatten wirkt)
   -10px → Ausbreitung (negativ = kompakter)
   rgba(0, 0, 0, 0.6) → Farbe: halbtransparenter Schwarzton
-------------------------------- */
  z-index: 0; /* Damit der Schatten über dem oberen Bereich liegt */
}



.section-4neu.active {
  transition: background-color 0.9s ease;

  z-index: 5;
  background-color: #C9CDD8;
  position: relative;
}








  .scroll-trigger2 {
    position: absolute;
    bottom: 21%;
    left: 4%;
    cursor: pointer;
    z-index: 10;
    text-align: center;
  }
  
  .scroll-trigger2 .arrow {
    width: 30%;
    transition: opacity 0.3s ease;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .scroll-trigger2 .hover {
    opacity: 0;
  }
  
  .scroll-trigger2:hover .default {
    opacity: 0;
  }
  
  .scroll-trigger2:hover .hover {
    opacity: 1;
  }
  
  .scroll-trigger2 p1 {
    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(15px, 1.5vw, 17px);
    color: #040404;
    margin-top: 100%;
    transition: color 0.3s ease;
    line-height: 0.8;
  }
  
  .scroll-trigger2:hover p1 {
    color: #e7308f;
  }
  










  


  .scroll-trigger3 {
    position: absolute;
    bottom: 21%;
    left: 20%;
    cursor: pointer;
    z-index: 10;
    text-align: center;
  }
  
  .scroll-trigger3 .arrow {
    width: 30%;
    transition: opacity 0.3s ease;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .scroll-trigger3 .hover {
    opacity: 0;
  }
  
  .scroll-trigger3:hover .default {
    opacity: 0;
  }
  
  .scroll-trigger3:hover .hover {
    opacity: 1;
  }
  
  .scroll-trigger3 p1 {
    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(15px, 1.5vw, 17px);
    color: #040404;
    margin-top: 100%;
    transition: color 0.3s ease;
    line-height: 0.8;
  }
  
  .scroll-trigger3:hover p1 {
    color: #e7308f;
  }







.call-button {
  display: inline-block;
  padding: 14px 170px;
  position: absolute;
  bottom: 27%;
  left: 4%;
  font-size: clamp(12px, 1.7vw, 17px);
  font-family: 'LexendBold', sans-serif;
  font-weight: bold;
  color: #efefef; /* Schriftfarbe = Rahmenfarbe */
  background-color: transparent;
  border: 6px solid #e7308f;
  border-radius: 32px;
  text-decoration: none;
 transform: translateY(180px);
transition: opacity 0.8s ease, transform 0.8s ease;
border-radius: 12px;
  z-index: 5;
  }
  
  .call-button:hover {
  background-color: white;
  color: rgb(26, 26, 26);

  }



.section-call.active .call-button {
opacity: 1;
transform: translateY(0);
}




.calltit{
  font-family: 'LEMONMILKLIGHT';
  color: #e7308f;
opacity: 0;
transform: translateY(-380);
left: 4%;
top: 8%;
position: absolute;
transition: opacity 0.8s ease, transform 0.8s ease;
  z-index: 5;
  font-size: clamp(32px, 1.7vw, 67px);
 line-height: 0.92;
}



.section-call.active .calltit {
opacity: 1;
transform: translateY(0);
}

.calltito{
  font-family: 'LEMONMILKBOLD';
  color: #efefef;
    font-size: clamp(32px, 1.7vw, 67px);

}




.calltext{
  font-family: 'Avenirmedium';
  color: #e7308f;
opacity: 0;
transform: translateY(-380);
left: 4%;
top: 42%;
position: absolute;
transition: opacity 0.8s ease, transform 0.8s ease;
  z-index: 5;
  font-size: clamp(17px, 1.7vw, 19px);
 line-height: 0.85;
}

.section-call.active .calltext {
opacity: 1;
transform: translateY(0);
}








.calltexo{
  font-family: 'LexendBold';
  color: #eeeeee;
opacity: 0;
transform: translateY(-380);
left: 4%;
top: 47%;
max-width: 30%;
position: absolute;
transition: opacity 0.8s ease, transform 0.8s ease;
  z-index: 5;
  font-size: clamp(17px, 1.7vw, 19px);
 line-height: 1;
}

.section-call.active .calltexo {
opacity: 1;
transform: translateY(0);
}










.section-call {

transition: background-color 0.6s ease;
  box-shadow: 0 -20px 10px 5px rgba(8, 8, 8, 0.298); /* Schatten nach unten */
z-index: 5;
  background-color: #17001d;
  padding: 320px 0; /* Oben und unten Abstand */
  position: relative;
overflow:hidden ;
}




.section-call .fly-in-image {
position: absolute;
right: 5%;
width: 42%;
bottom: -2%;
opacity: 1;
transform: translateY(180px);
transition: opacity 0.8s ease, transform 0.8s ease;
border-radius: 8px;
  z-index: 5;

}

/* Hover-Zustand */
.section-call.active .fly-in-image {
opacity: 1;
transform: translateY(0);
}


.section-call .fly-in-imads {
position: absolute;
right: 25%;
width: 33%;
bottom: 30%;
opacity: 0;
transform: translateX(180px);
transition: opacity 0.8s ease, transform 0.8s ease;
border-radius: 12px;
  z-index: 4;

}

/* Hover-Zustand */
.section-call.active .fly-in-imads {
opacity: 1;
transform: translateY(0);
}





.section-betweenmovie1 {
  box-shadow: 20px -20px -20px 20px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
  box-shadow: 20px 20px -20px 20px rgba(0, 0, 0, 0.6); /* Schatten nach unten */

  position: relative;
    background-color: #151515;
    padding: 10px 0; /* Oben und unten Abstand */
    z-index: 7; /* Damit der Schatten über dem oberen Bereich liegt */
  }




.section-5 {
background-color: #b00052;
  padding: 680px 0; /* Oben und unten Abstand */
  position: relative;
transition: background-color 0.5s ease-in-out; /* sanfter Übergang */
z-index: 5;
}

.section-5.from-dynamic7-section {
  background-color: #151515;
  }
  
  


.fiveit{
  font-family: 'LEMONMILKLIGHT', sans-serif;
  font-size: clamp(17px, 2.4vw, 21px);
  max-width: 60%;
  color: #f7f7f7;
  position: absolute;
  top: 4%;
  left: 4%;
  line-height: 0.9;
}

.hgfiveit {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(37px, 3.4vw, 41px);
  color: #0b0b0b;

}




.twotitle-text {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(34px, 3.4vw, 38px);
  color: #e76730;
  position: absolute;
  top: 8%;
  left: 4%;
  line-height: 0.9;
}




.twoone-text {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
  max-width: 84%;
  color: #0e0e0e;
  position: absolute;
  top: 21%;
  left: 4%;
  line-height: 1.4;

}

 .highlighttwoofsdb {
      font-family: 'LexendBold', sans-serif;  }



.link1-span {
        font-family: 'Avenirmedium', sans-serif;

cursor: pointer;
transition: color 0.3s ease, background-color 0.3s ease;
background-color: transparent;
padding: 2px 4px;
border-radius: 4px;
}

.link1-span:hover {
color: #e7308f;
text-decoration: underline;
text-decoration-color: #050505;
text-decoration-thickness: 3px;
text-underline-offset: 5px;

}











.dynamic7-section {
  position: relative;
  height: 1500px; /* Start-Höhe */
  width: 100%;
  overflow: hidden;
  transition: height 0.8s ease;
  background-color: #000;
}










.section-pic {
  position: relative;
  height: 500px; /* Start-Höhe */
  width: 100%;
  overflow: hidden;
  transition: height 0.8s ease;
  background-color: #000;

}

.section-pic.grow {
  height: 700px; /* Zielhöhe beim Scroll */
}


.picok {
  opacity: 1;
   position: absolute;
  width: 110%;
  top: -10%;
  object-fit: cover; /* Füllt alles */
  z-index: 0;
 transform: translateY(50px);
        transition: opacity 0.8s ease, transform 0.8s ease;

}

.section-pic.grow .picok
{opacity: 1;
  transform: translateY(0);}



.dynamic-section {
  position: relative;
  height: 670px; /* Start-Höhe */
  width: 100%;
  overflow: hidden;
  background-color: #000;
}


.bfq5-video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Füllt alles */
  z-index: 1;
}


.menü3-button {
  display: inline-block;
  padding: 14px 40px;
  position: absolute;
  bottom: 12%;
  left: 50%;
  z-index: 5;
  font-size: clamp(12px, 1.7vw, 17px);
  font-family: 'LexendBold', sans-serif;
  font-weight: bold;
  color: #efefef; /* Schriftfarbe = Rahmenfarbe */
  transform: translateX(-50%);
  background-color: black;
  border: 4px solid #e7308f;
  border-radius: 32px;
  text-decoration: none;
  transition: all 0.3s ease;
  }
  
  .menü3-button:hover {
    background-color: #e7308f;
    color: white;
    color: rgb(26, 26, 26);
  }

  







  .dynamic2-section {
    position: relative;
    height: 100px; /* Start-Höhe */
    width: 100%;
    overflow: hidden;
    transition: height 0.8s ease;
    background-color: #000;
  }
  
  .dynamic2-section.grow {
    height: 700px; /* Zielhöhe beim Scroll */
  }
  
  .bfq6-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Füllt alles */
    z-index: 1;
  }



  .bfq8-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Füllt alles */
    z-index: 1;
  }





    .bfq7-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 110%;
    height: 100%;
    object-fit: cover; /* Füllt alles */
    z-index: 1;
    
  }




  .dynamic3-section {
    position: relative;
    height: 500px; /* Start-Höhe */
    width: 100%;
    overflow: hidden;
    transition: height 0.8s ease;
    background-color: #000;
  }
  
  .dynamic3-section.grow {
    height: 700px; /* Zielhöhe beim Scroll */
  }
  




    .bfq7-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 110%;
    height: 100%;
    object-fit: cover; /* Füllt alles */
    z-index: 1;
    transform: translateY(250px);
        transition: opacity 0.8s ease, transform 0.8s ease;
  }



.dynamic3-section.grow  .bfq7-video {
  opacity: 1;
  transform: translateY(0);
}










   
      .movietext32{
        text-align: center;
        font-family: 'Avenirlight', sans-serif;
        font-size: clamp(18px, 2.4vw, 18px);
        max-width: 50%;
        color: #fafafa;
        position: absolute;
        top: 30%;
        left: 32%;
        line-height: 1.2;
z-index: 5;
 transition: opacity 0.8s ease, transform 0.8s ease;
        transform: translateY(430px);
          opacity: 1;
          
        }
      
      
       .dynamic3-section.grow  .movietext32  {
          transform: translateX(0);
        opacity: 1;
        }
      

      .hgmovietext32{
        font-family: 'LEMONMILKBOLD', sans-serif;
        font-size: clamp(21px, 2.4vw,26px);
        color: #bf158c;
        opacity: 1;
       }









  .dynamic4-section {
    position: relative;
    height: 500px; /* Start-Höhe */
    width: 100%;
    overflow: hidden;
    transition: height 0.8s ease;
    background-color: #000;
  }
  
  .dynamic4-section.grow {
    height: 700px; /* Zielhöhe beim Scroll */
  }
  
  .bfq6-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Füllt alles */
    z-index: 1;
  }



  .movietext34{
    text-align: center;
    font-family: 'LexendBold', sans-serif;
    font-size: clamp(18px, 2.4vw, 18px);
    max-width: 50%;
    color: #fafafa;
    position: absolute;
    top: 37%;
    left: 30%;
    line-height: 1.2;
z-index: 5;
transition: opacity 0.8s ease, transform 0.8s ease;
    transform: translateY(230px);
      opacity: 1;
      
    }
  
  
    .dynamic4-section.grow  .movietext34 {
      transform: translateX(0);
    opacity: 1;
    }
  

  .hgmovietext34{
    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(18px, 2.4vw, 18px);
    color: #352127;
    opacity: 1;
   }













.highlighttwoonebold {
  color: #000000;
  font-family: 'LexendBold', sans-serif;

}

.highlighttwooneboldorange {
  color: #e7308f;
  font-weight: bold;
  font-family: 'LexendBold', sans-serif;
}

  .highlighttwooneboldorange2 {
    max-width: 50%;
    color: #000000;
  background-color: #e76730;
  font-weight: bold;
  font-family: 'LexendBold', sans-serif;
}

  .highlighttwoonesss {
    color: #e7308f;
   font-family: 'LexendBold', sans-serif;

}



.highlighttwoodf {
  color: #161616;
  font-weight: bold;
  font-family: 'LexendBold', sans-serif;
}



.sectiontwoone-text {
top: 1%; 
left: 4%; 
font-family: 'LEMONMILKLIGHT', sans-serif;
font-size: clamp(29px, 7vw, 31px);
color: #090909;
line-height: 1;
word-spacing: -5px;
position: absolute;
}

/* Beim Hover sichtbar & orange */
.highlightsectiontwoone{
color: #090909;
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(26px, 7vw, 32px);
}





.breadcrumb-overlay {
  font-size: clamp(12px, 1.5vw, 16px);
  top: 15%;
  left: 3%;
  margin: 20px;
  color: #1a1a1a;
  position: absolute; /* WICHTIG */
  z-index: 20; /* Optional, falls verdeckt */
}

.breadcrumb-overlay a {
  font-family: 'Avenirmedium', sans-serif;

  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

.breadcrumb-overlay a:hover {
  color: #e76730;
  font-family: 'Avenirmedium', sans-serif;

}

.breadcrumb-overlay span {
  margin: 0 8px;
  color: #e76730;
  font-family: 'Avenirheavy', sans-serif;
}








.section-3neu {
background-color: #C9CDD8;
padding: 430px 0;
position: relative;
z-index: 3;
transition: background-color 0.5s ease-in-out; /* sanfter Übergang */
}

.section-3neu.active {
background-color: #C9CDD8;
}








.section-3bneu {
  background-color: #e76730;
  padding: 830px 0;
  position: relative;
  z-index: 3;
  transition: background-color 0.5s ease-in-out; /* sanfter Übergang */
  box-shadow: 10px -10px 10px 10px rgba(0, 0, 0, 0.261); /* Schatten nach unten */
}
  
  .section-3bneu.active {
  background-color: #e76730;
  }
  





.section-3cneu {
  background-color: #d5d5d5;
  padding: 910px 0;
  position: relative;
  z-index: 3;
  overflow: hidden;
  transition: background-color 0.5s ease-in-out; /* sanfter Übergang */
  }
  
  .section-3cneu.active {
  background-color: #d5d5d5;
  }
  






  .section-quinity {
    background-color: #d5d5d5;
    padding: 510px 0;
    position: relative;
    z-index: 3;
    overflow: hidden;
    transition: background-color 0.5s ease-in-out; /* sanfter Übergang */
    }
    
    .section-quinity.active {
    background-color: #0b0b0b;
    }
  






    .logo-wrapper {
      position: absolute;
      width: 22%;
      left: 50%;
      bottom: 7%;
      transform: translateX(-50%);
      height: 100px; /* oder Höhe deiner Logos */
    }
    
    
    .quinv1-overlay,
    .quinv2-overlay {
      position: absolute; /* <- Wichtig */
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      transition: opacity 0.8s ease;
      z-index: 6;
    }
    
    
    .section-3cneu .quinv2-overlay {
      opacity: 1;
    }
    .section-3cneu .quinv1-overlay {
      opacity: 0;
    }
    
    .section-3cneu.active .quinv2-overlay {
      opacity: 0;
    }
    .section-3cneu.active .quinv1-overlay {
      opacity: 1;
    }
    
      




.section-3cneu.from-section-quinity {
  background-color: #0b0b0b;
  transition: background-color 0.5s ease-in-out; /* sanfter Übergang */
  ;

  }




  .section-quinity.from-section-quinity2 {
    background-color: #0b0b0b;
    transition: background-color 0.5s ease-in-out; /* sanfter Übergang */
    ;
  
    }
    




  .rectangle1 {
    position: absolute;
    top: 4%;
    left: 39%;
    width: 300px;
    height: 50px;
    border-radius: 14px;
    background-color: transparent;
    border: 8px solid #e76730;
    transform: translateY(10px);
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
    z-index: 4;
    transition-delay: 0.2s; /* startet 0.5 Sekunden später */ 
  }
  
  .rectangle-1-text {
    position: absolute;
    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(10px, 2.4vw, 12px);
    color: #e76730;
    left: 5%;
    top: 12%;
    opacity: 0;
    transition: opacity 0.6s ease 0.8s;
  }
  
  /* Kreis */
  .smallcircle1 {
    position: absolute;
    top: 17%;
    right: 7%;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 5px solid #fafafa;
    opacity: 0;
    transform: scale(0.3);
    transition: opacity 0.5s ease 1s, transform 0.5s ease 1s;
  }
  
  /* Kreuzlinien */
  .cross-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 5px;
    background-color: #fafafa;
    opacity: 0;
    transform-origin: center;
  }
  
  .line1 {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  
  .line2 {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  

  .section-quinity.active .rectangle1 {
    opacity: 1;
    transform: translateY(0);
  }
  
  .section-quinity.active .rectangle-1-text {
    opacity: 1;
  }
  
  .section-quinity.active .smallcircle1 {
    opacity: 1;
    transform: scale(1);
  }
  
  /* Animiertes Kreuz */
  .section-quinity.active .line1,
  .section-quinity.active .line2 {
    width: 48px;
    opacity: 1;
    transition: width 1s ease, opacity 0.4s ease;
      transition-delay: 0.8s; /* startet 0.5 Sekunden später */ }
 
      
  












      .rectangle2 {
        position: absolute;
        top: 14%;
        left: 39%;
        width: 300px;
        height: 300px;
        border-radius: 14px;
        background-color: transparent;
        border: 8px solid #e76730;
        transform: translateY(300px);
        opacity: 0;
        transition: opacity 1s ease, transform 1s ease;
        z-index: 4;
        transition-delay: 0.8s; /* startet 0.5 Sekunden später */ 
      }



      .rectangle21 {
        position: absolute;
        top: 19%;
        left: 4%;
        width: 170px;
        height: 20px;
        border-radius: 7px;
        background-color: transparent;
        border: 4px solid #e76730;  
      }


      .rectangle22 {
        position: absolute;
        top: 32%;
        left: 4%;
        width: 170px;
        height: 20px;
        border-radius: 7px;
        background-color: transparent;
        border: 4px solid #e76730;  
      }

      .rectangle23 {
        position: absolute;
        top: 46%;
        left: 4%;
        width: 170px;
        height: 20px;
        border-radius: 7px;
        background-color: transparent;
        border: 4px solid #e76730;  
      }

      .rectangle24 {
        position: absolute;
        top:60%;
        left: 4%;
        width: 170px;
        height: 20px;
        border-radius: 7px;
        background-color: transparent;
        border: 4px solid #e76730;  
      }


      .rectangle25 {
        position: absolute;
        top:74%;
        left: 4%;
        width: 170px;
        height: 20px;
        border-radius: 7px;
        background-color: transparent;
        border: 4px solid #e76730;  
      }
      
      .rectangle-2-text {
        position: absolute;
        font-family: 'LEMONMILKBOLD', sans-serif;
        font-size: clamp(20px, 2.4vw, 22px);
        color: #e76730;
        left: 10%;
        top: -2%;
        opacity: 0;
        transition: opacity 0.6s ease 0.8s;
      }




      .rectangle-21-text, .rectangle-22-text, .rectangle-23-text, .rectangle-24-text, .rectangle-25-text {
        position: absolute;
        font-family: 'LEMONMILKBOLD', sans-serif;
        font-size: clamp(8px, 2.4vw, 1px);
        color: #e76730;
        left:5%;
        top: -20%;
        opacity: 1;
        transition: opacity 0.6s ease 0.8s;
      }

      




      /* Kreis */
      .smallcircle21 {
        position: absolute;
        top: 18.5%;
        right: 15%;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 5px solid #fafafa;
        opacity: 0;
        transform: scale(0.3);
        transition: opacity 0.5s ease 1s, transform 0.5s ease 1s;
      }






      .smallcircle22 {
        position: absolute;
        top: 32%;
        right: 15%;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 5px solid #fafafa;
        opacity: 1;
        transform: scale(0.3);
        transition: opacity 0.5s ease 1s, transform 0.5s ease 1s;
      }


      .smallcircle23 {
        position: absolute;
        top: 47%;
        right: 15%;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 5px solid #fafafa;
        opacity: 1;
        transform: scale(0.3);
        transition: opacity 0.5s ease 1s, transform 0.5s ease 1s;
      }




      .smallcircle24 {
        position: absolute;
        top: 61%;
        right: 15%;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 5px solid #fafafa;
        opacity: 1;
        transform: scale(0.3);
        transition: opacity 0.5s ease 1s, transform 0.5s ease 1s;
      }



      .smallcircle25 {
        position: absolute;
        top: 75%;
        right: 15%;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 5px solid #fafafa;
        opacity: 1;
        transform: scale(0.3);
        transition: opacity 0.5s ease 1s, transform 0.5s ease 1s;
      }



      
      /* Kreuzlinien */
      .cross-line21 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 5px;
        background-color: #fafafa;
        opacity: 0;
        transform-origin: center;
      }
      
      .line21 {
        transform: translate(-50%, -50%) rotate(45deg);
      }
      
      .line22 {
        transform: translate(-50%, -50%) rotate(-45deg);
      }


     
      

      @keyframes slideInAndOut {
        0% {
          transform: translateY(600px);
          opacity: 0;
          transition-delay: 3.8s; /* startet 0.5 Sekunden später */ 

        }
        10% {
          transform: translateY(0);
          opacity: 1;
        }
        60% {
          transform: translateY(0);
          opacity: 1;
        }
        100% {
          transform: translateY(0) translateX(-120%);
          opacity: 1;
        }
      }
      
      .section-quinity.active .rectangle2 {
        animation: slideInAndOut 3s ease forwards;
      }
      

     


    
      .section-quinity.active .rectangle-2-text {
        opacity: 1;
      }
      
      .section-quinity.active .smallcircle21 {
        opacity: 1;
        transform: scale(1);
      }
      
      .section-quinity.active .smallcircle22 {
        opacity: 1;
        transform: scale(1);
      }

      .section-quinity.active .smallcircle23 {
        opacity: 1;
        transform: scale(1);
      }

      .section-quinity.active .smallcircle24 {
        opacity: 1;
        transform: scale(1);
      }

      .section-quinity.active .smallcircle25 {
        opacity: 1;
        transform: scale(1);
      }



      /* Animiertes Kreuz */
      .section-quinity.active .line21,
      .section-quinity.active .line22 {
        width: 38px;
        opacity: 1;
        transition: width 1s ease, opacity 0.4s ease;
          transition-delay: 0.8s; /* startet 0.5 Sekunden später */ }
     
          
  
          


    
          











          .rectangle3 {
            position: absolute;
            top: 14%;
            left: 39%;
            width: 300px;
            height: 300px;
            border-radius: 14px;
            background-color: transparent;
            border: 8px solid #e7308f;
            transform: translateX(400px);
            opacity: 0;
            transition: opacity 1s ease, transform 1s ease;
            z-index: 4;
            transition-delay: 1.8s; /* startet 0.5 Sekunden später */ 
          }



             
          .section-quinity.active .rectangle3 {
            transform: translateX(0);
            opacity: 1;       }
            
            

            
    
    
    
          .rectangle31 {
            position: absolute;
            top: 19%;
            left: 4%;
            width: 170px;
            height: 20px;
            border-radius: 7px;
            background-color: transparent;
            border: 4px solid #e7308f;  
          }
    
    
          .rectangle32 {
            position: absolute;
            top: 32%;
            left: 4%;
            width: 170px;
            height: 20px;
            border-radius: 7px;
            background-color: transparent;
            border: 4px solid #e7308f;  
          }
    
          .rectangle33 {
            position: absolute;
            top: 46%;
            left: 4%;
            width: 170px;
            height: 20px;
            border-radius: 7px;
            background-color: transparent;
            border: 4px solid #e7308f;  
          }




          .rectangle-3-text {
            position: absolute;
            font-family: 'LEMONMILKBOLD', sans-serif;
            font-size: clamp(20px, 2.4vw, 22px);
            color: #e7308f;
            left:6%;
            top: -2%;
            opacity: 1;
            transition: opacity 0.6s ease 0.8s;
          }
    
    
    
    
          .rectangle-31-text, .rectangle-32-text, .rectangle-33-text {
            position: absolute;
            font-family: 'LEMONMILKBOLD', sans-serif;
            font-size: clamp(8px, 2.4vw, 1px);
            color: #e7308f;
            left:5%;
            top: -20%;
            opacity: 1;
            transition: opacity 0.6s ease 0.8s;
          }
    





          .smallcircle31 {
            position: absolute;
            top: 18.5%;
            right: 15%;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 5px solid #fafafa;
            opacity: 1;
            transform: scale(0.3);
            transition: opacity 0.5s ease 1s, transform 0.5s ease 1s;
          }
    
    
          .smallcircle32 {
            position: absolute;
            top: 32%;
            right: 15%;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 5px solid #fafafa;
            opacity: 1;
            transform: scale(0.3);
            transition: opacity 0.5s ease 1s, transform 0.5s ease 1s;
          }
    
    
          .smallcircle33 {
            position: absolute;
            top: 47%;
            right: 15%;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 5px solid #fafafa;
            opacity: 1;
            transform: scale(0.3);
            transition: opacity 0.5s ease 1s, transform 0.5s ease 1s;
          }


.section-quinity.active .smallcircle31 {
        opacity: 1;
        transform: scale(1);
      }
      
      .section-quinity.active .smallcircle32 {
        opacity: 1;
        transform: scale(1);
      }

      .section-quinity.active .smallcircle33 {
        opacity: 1;
        transform: scale(1);
      }

      .section-quinity.active .line31,
      .section-quinity.active .line32 {
        width: 38px;
        opacity: 1;
        transition: width 1s ease, opacity 0.4s ease;
          transition-delay: 0.8s; /* startet 0.5 Sekunden später */ }




          .cross-line31 {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 5px;
            background-color: #fafafa;
            opacity: 0;
            transform-origin: center;
          }
          
          .line31 {
            transform: translate(-50%, -50%) rotate(45deg);
          }
          
          .line32 {
            transform: translate(-50%, -50%) rotate(-45deg);
          }
    
    
         
          

       













          .rectangle4 {
            position: absolute;
            top: 14%;
            left: 65%;
            width: 300px;
            height: 300px;
            border-radius: 14px;
            background-color: transparent;
            border: 8px solid #13a41a;
            transform: translateX(400px);
            opacity: 0;
            transition: opacity 1s ease, transform 1s ease;
            z-index: 4;
            transition-delay: 1.8s; /* startet 0.5 Sekunden später */ 
          }



             
          .section-quinity.active .rectangle4 {
            transform: translateX(0);
            opacity: 1;       }
            
            

            
    
    
    
          .rectangle41 {
            position: absolute;
            top: 19%;
            left: 4%;
            width: 170px;
            height: 20px;
            border-radius: 7px;
            background-color: transparent;
            border: 4px solid #13a41a;  
          }
    
    
          .rectangle42 {
            position: absolute;
            top: 32%;
            left: 4%;
            width: 170px;
            height: 20px;
            border-radius: 7px;
            background-color: transparent;
            border: 4px solid #13a41a;  
          }
    
          .rectangle43 {
            position: absolute;
            top: 46%;
            left: 4%;
            width: 170px;
            height: 20px;
            border-radius: 7px;
            background-color: transparent;
            border: 4px solid #13a41a;  
          }




          .rectangle-4-text {
            position: absolute;
            font-family: 'LEMONMILKBOLD', sans-serif;
            font-size: clamp(20px, 2.4vw, 22px);
            color: #13a41a;
            left:7%;
            top: -2%;
            opacity: 1;
            transition: opacity 0.6s ease 0.8s;
          }
    
    
    
    
          .rectangle-41-text, .rectangle-42-text, .rectangle-43-text {
            position: absolute;
            font-family: 'LEMONMILKBOLD', sans-serif;
            font-size: clamp(8px, 2.4vw, 1px);
            color: #13a41a;
            left:5%;
            top: -20%;
            opacity: 1;
            transition: opacity 0.6s ease 0.8s;
          }
    





          .smallcircle41 {
            position: absolute;
            top: 18.5%;
            right: 15%;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 5px solid #fafafa;
            opacity: 1;
            transform: scale(0.3);
            transition: opacity 0.5s ease 1s, transform 0.5s ease 1s;
          }
    
    
          .smallcircle42 {
            position: absolute;
            top: 32%;
            right: 15%;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 5px solid #fafafa;
            opacity: 1;
            transform: scale(0.3);
            transition: opacity 0.5s ease 1s, transform 0.5s ease 1s;
          }
    
    
          .smallcircle43 {
            position: absolute;
            top: 47%;
            right: 15%;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 5px solid #fafafa;
            opacity: 1;
            transform: scale(0.3);
            transition: opacity 0.5s ease 1s, transform 0.5s ease 1s;
          }


.section-quinity.active .smallcircle41 {
        opacity: 1;
        transform: scale(1);
      }
      
      .section-quinity.active .smallcircl42 {
        opacity: 1;
        transform: scale(1);
      }

      .section-quinity.active .smallcircle43 {
        opacity: 1;
        transform: scale(1);
      }

      .section-quinity.active .line41,
      .section-quinity.active .line42 {
        width: 38px;
        opacity: 1;
        transition: width 1s ease, opacity 0.4s ease;
          transition-delay: 0.8s; /* startet 0.5 Sekunden später */ }




          .cross-line41 {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 5px;
            background-color: #fafafa;
            opacity: 0;
            transform-origin: center;
          }
          
          .line41 {
            transform: translate(-50%, -50%) rotate(45deg);
          }
          
          .line42 {
            transform: translate(-50%, -50%) rotate(-45deg);
          }


















          .rectangle5 {
            position: absolute;
            top: 48%;
            left: 13%;
            width: 1050px;
            height: 70px;
            border-radius: 14px;
            background-color: transparent;
            border: 8px solid #cecece;
            transform: translateX(-400px);
            opacity: 0;
            transition: opacity 1s ease, transform 1s ease;
            z-index: 4;
            transition-delay: 2.4s; /* startet 0.5 Sekunden später */ 
          }



             
          .section-quinity.active .rectangle5 {
            transform: translateX(0);
            opacity: 1;       
                      background-color: transparent;

          }




            .smallcircle51 {
              position: absolute;
              top: 20%;
              left: 12%;
              width:30px;
              height: 30px;
              border-radius: 50%;
              border: 6px solid #e76730;
              opacity: 1;
              transform: scale(0.3);
              transition: opacity 0.5s ease 1s, transform 0.5s ease 1s;
            }
      
      
            .smallcircle52 {
              position: absolute;
              top: 20%;
              right: 48%;
              width:30px;
              height: 30px;
              border-radius: 50%;
              border: 6px solid #e7308f;
              opacity: 1;
              transform: scale(0.3);
              transition: opacity 0.5s ease 1s, transform 0.5s ease 1s;
            }
      
      
            .smallcircle53 {
              position: absolute;
              top: 20%;
              right: 12%;
              width:30px;
              height: 30px;
              border-radius: 50%;
              border: 6px solid #13a41a;
              opacity: 1;
              transform: scale(0.3);
              transition: opacity 0.5s ease 1s, transform 0.5s ease 1s;
            }


            

            .section-quinity.active .smallcircle51 {
              opacity: 1;
              transform: scale(1);
            }
            
            .section-quinity.active .smallcircle52 {
              opacity: 1;
              transform: scale(1);
            }
      
            .section-quinity.active .smallcircle53 {
              opacity: 1;
              transform: scale(1);
            }





            .cross-line51 {
              position: absolute;
              top: 50%;
              left: 50%;
              width: 0;
              height: 5px;
              background-color: #e76730;
              opacity: 0;
              transform-origin: center;
              border-radius: 4px;
            }
            
            .line511 {
              transform: translate(-50%, -50%) rotate(45deg);
            }
            
            .line512 {
              transform: translate(-50%, -50%) rotate(-45deg);
            }



            .section-quinity.active .line511,
            .section-quinity.active .line512 {
              width: 58px;
              opacity: 1;
              transition: width 1s ease, opacity 0.4s ease;
              transition-delay: 3.2s; /* startet 0.5 Sekunden später */ }













                .cross-line52 {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  width: 0;
                  height: 5px;
                  background-color: #e7308f;
                  opacity: 0;
                  transform-origin: center;
                  border-radius: 4px;
                }
                
                .line521 {
                  transform: translate(-50%, -50%) rotate(45deg);
                }
                
                .line522 {
                  transform: translate(-50%, -50%) rotate(-45deg);
                }
    
    
    
                .section-quinity.active .line521,
                .section-quinity.active .line522 {
                  width: 58px;
                  opacity: 1;
                  transition: width 1s ease, opacity 0.4s ease;
                    transition-delay: 3.2s; /* startet 0.5 Sekunden später */ }

                    











                .cross-line53 {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  width: 0;
                  height: 5px;
                  background-color: #13a41a;
                  opacity: 0;
                  transform-origin: center;
                  border-radius: 4px;
                }
                
                .line531 {
                  transform: translate(-50%, -50%) rotate(45deg);
                }
                
                .line532 {
                  transform: translate(-50%, -50%) rotate(-45deg);
                }
    
    
    
                .section-quinity.active .line531,
                .section-quinity.active .line532 {
                  width: 58px;
                  opacity: 1;
                  transition: width 1s ease, opacity 0.4s ease;
                    transition-delay: 3.2s; /* startet 0.5 Sekunden später */ }








                    .quinitytext { 
                      font-family: 'Avenirmedium', sans-serif;
                      font-size: clamp(15px, 2.4vw, 17px);
                      color: #dddddd;
                      position: absolute;
                      top: 62%;
                      left: 23%;
                      text-align: center;
                      line-height: 1.2;
                    transition: opacity 0.4s ease, transform 1s ease;
                    max-width: 50%;
                    transform: translateY(430px);
                    opacity: 1;
                    transition-delay: 2.7s; /* startet 0.5 Sekunden später */

                  }
        
        
                  .bquinitytext { 
                    font-family: 'LexendBold';
                }
      

                  .section-quinity.active .quinitytext {
                    transform: translateY(0);
                    opacity: 1;       
                     }













  .section-quinity2 {
    background-color: #0b0b0b;
    padding: 510px 0;
    position: relative;
    z-index: 3;
    overflow: hidden;
    transition: background-color 0.5s ease-in-out; /* sanfter Übergang */
    }
    
    .section-quinity2.active {
    background-color: #0b0b0b;
    }
  


 


    .section-quinity3 {
      background-color: #0b0b0b;
      padding: 130px 0;
      position: relative;
      z-index: 3;
      overflow: hidden;
      transition: background-color 0.5s ease-in-out; /* sanfter Übergang */
      }





        .section-contact {
      background-color: #0b0b0b;
      padding: 330px 0;
      position: relative;
      z-index: 3;
      overflow: hidden;
      transition: background-color 0.5s ease-in-out; /* sanfter Übergang */
      }




.ansprechpartner-overlay {

  width: 17%;
  top:27%;
  left: 40%;
  position: absolute;
}




.quin-overlay {
  position: absolute; /* Absolute Positionierung */
  top: 5%;
        left: 13%;
  width: 20%; /* Passt sich dem Container an */
  height: auto;
  overflow: hidden; /* Alles außerhalb des Containers wird verborgen */
  transform: translateY(230px);
  transition: opacity 0.4s ease, transform 1s ease;
  opacity: 0;
  transition-delay: 1s; /* startet 0.5 Sekunden später */

}


.section-quinity3.active .quin-overlay {
  transform: translateY(0);
  opacity: 1;       
   }


  
  /* Standardbild (sichtbar bei Start) */
  .quin-overlay img.default {
  width: 100%; /* Passt sich dem Container an */
  height: auto;
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
  }
  
  /* Hover-Effekt: Das Bild wird zum weißen Icon */
  .quin-overlay:hover img.default {
  opacity: 0; /* Standardbild wird unsichtbar */
  }
  
  /* Weißes Icon (ersetzt das Standardbild) */
  .quin-overlay img.hover {
  width: 100%; /* Passt sich dem Container an */
  height: auto; /* Behält das Seitenverhältnis bei */
  position: absolute; /* Position innerhalb des Containers */
  top: 0; /* Position oben im Container */
  left: 0; /* Position links im Container */
  opacity: 0; /* Startet unsichtbar */
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
  }
  
  /* Hover-Effekt: Das weiße Bild wird sichtbar */
  .quin-overlay:hover img.hover {
  opacity: 1; /* Weißes Bild wird sichtbar */
  }







    .quinitytwottxt { 
      font-family: 'LEMONMILKBOLD', sans-serif;
      font-size: clamp(85px, 2.4vw, 87px);
      color: #ad0d62eb;
      position: absolute;
      top:1%;
      left: 4%;
      line-height: 1.2;
    transition: opacity 0.4s ease, transform 1s ease;
    max-width: 50%;
    transform: translateX(730px);
    opacity: 0;
    transition-delay: 0.4s; /* startet 0.5 Sekunden später */
    word-spacing: -10px;

  }



  .section-quinity2.active .quinitytwottxt {
    transform: translateY(0);
    opacity: 1;       
     }





     .quinitytwottx { 
      font-family: 'LEMONMILKBOLD', sans-serif;
      font-size: clamp(85px, 2.4vw, 87px);
      color: #eb3395dc;
      position: absolute;
      top:1%;
      left: 43%;
      line-height: 1.2;
    transition: opacity 0.4s ease, transform 1s ease;
    max-width: 50%;
    transform: translateX(-730px);
    opacity: 0;
    transition-delay: 0.4s; /* startet 0.5 Sekunden später */
    word-spacing: -10px;

  }



  .section-quinity2.active .quinitytwottx {
    transform: translateY(0);
    opacity: 1;       
     }





     .quinitytwott { 
      font-family: 'LEMONMILKBOLD', sans-serif;
      font-size: clamp(85px, 2.4vw, 87px);
      color: #ffffffeb;
      position: absolute;
      top:1%;
      left: 38%;
      line-height: 1.2;
    transition: opacity 0.4s ease, transform 1s ease;
    max-width: 50%;
    transform: translateX(-730px);
    opacity: 0;
    transition-delay: 0.4s; /* startet 0.5 Sekunden später */
    word-spacing: -10px;

  }



  .section-quinity2.active .quinitytwott {
    transform: translateY(0);
    opacity: 1;       
     }









.learnkenn-button {
  display: inline-block;
  position: absolute;
  bottom:7%;
  left:42%;
  padding: 10px 58px; /* ↑↓ ←→ Abstand */
  font-size: clamp(14px, 1.4vw, 18px); /* Skalierbare Größe */
  font-family: 'Avenirmedium', sans-serif;
  color: #131313;
  background-color: #fff;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  z-index: 6;
  transform: translateY(430px);
  opacity: 0;
  transition: opacity 0.4s ease, transform 1s ease;
  transition-delay: 2.7s; /* startet 0.5 Sekunden später */
}

.learnkenn-button:hover {
  background-color: #ca9984;
  font-family: 'Avenirmedium', sans-serif;
  color: #fff;

}


.section-quinity.active .learnkenn-button {
  transform: translateY(0);
  opacity: 1;       
   }














   .faq-pop-button {
    font-family: 'Louisgeorgecafe', sans-serif;
    
      font-size: clamp(12px, 1.5vw, 18px);
      padding: 42px 42px;
      background-color: #240015;
        border: 4px solid #ffffff;
    
      color: white;
      border-radius: 88px;
       text-align: center;
      left: 27%;
      top:33%;
      cursor: pointer;
      position: absolute;
      transition: background-color 0.3s ease;
       opacity: 0;
      transform: translateX(-220px);
       transition: opacity 1.3s ease, transform 1.3s ease;
     
    
    }
    
    .section-quinity2.active .faq-pop-button  {
        opacity: 1;
      transform: translateY(0);
    
          }
    
    
    
    
    
    .faq-pop-button:hover {
      background-color: #420028;
    }
    
    .faq-popup {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: transparent;
      z-index: 9999;
      justify-content: center;
      align-items: center;
    }
    
    .faq-popup-content {
      background-color: #240015;
        text-align: center;
    
      padding: 32px;
      border-radius: 12px;
      width: 90%;
      max-width: 600px;
      color: #e8e8e8;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    
      font-family: 'Avenirlight', sans-serif;
      animation: popIn 0.4s ease-out;
      position: relative;
    }
    
    .close-button {
      position: absolute;
      top: 12px;
      right: 18px;
      font-size: 24px;
      cursor: pointer;
      color: #444;
    }
    
    @keyframes popIn {
      from {
        transform: scale(0.8);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
      .faq2-pop-button {
      font-family: 'Louisgeorgecafe', sans-serif;
      font-size: clamp(12px, 1.5vw, 18px);
      padding: 42px 42px;
      background-color: #750044;
      border: 4px solid #efefef;
    
      border-radius: 88px;
       text-align: center;
      left: 38%;
      top:33%;
      cursor: pointer;
      position: absolute;
      transition: background-color 0.3s ease;
       opacity: 0;
      transform: translateX(-420px);
       transition: opacity 1.3s ease, transform 1.3s ease;
     
    
    }
    
    .section-quinity2.active .faq2-pop-button  {
        opacity: 1;
      transform: translateY(0);
    
          }
    
    
    .faq2-pop-button:hover {
      background-color: #d4007f;
    }
    
    .faq2-popup {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: transparent;
      z-index: 9999;
      justify-content: center;
      align-items: center;
    }
    
    .faq2-popup-content {
      background-color: #750044;
        text-align: center;
    
      padding: 32px;
      border-radius: 12px;
      width: 90%;
      max-width: 600px;
      color: #e8e8e8;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    
      font-family: 'Avenirlight', sans-serif;
      animation: popIn 0.4s ease-out;
      position: relative;
    }
    
    .close2-button {
      position: absolute;
      top: 12px;
      right: 18px;
      font-size: 24px;
      cursor: pointer;
      color: #444;
    }
    
    @keyframes popIn {
      from {
        transform: scale(0.8);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }
    
    
    
    .faq3-pop-button {
      font-family: 'Louisgeorgecafe', sans-serif;
      font-size: clamp(12px, 1.5vw, 18px);
      padding: 42px 42px;
      background-color: #b46600;
      border: none;
        border: 4px solid #efefef;
    
      color: white;
      border-radius: 88px;
       text-align: center;
      left: 49%;
      top:33%;
      cursor: pointer;
      position: absolute;
      transition: background-color 0.3s ease;
       opacity: 0;
      transform: translateX(-620px);
       transition: opacity 1.3s ease, transform 1.3s ease;
     
    
    }
    
    .section-quinity2.active .faq3-pop-button  {
        opacity: 1;
      transform: translateY(0);
    
          }
    
    .faq3-pop-button:hover {
      background-color: #ffa42d;
    }
    
    .faq3-popup {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: transparent;
      z-index: 9999;
      justify-content: center;
      align-items: center;
    }
    
    .faq3-popup-content {
      background-color: #b46600;
        text-align: center;
    
      padding: 32px;
      border-radius: 12px;
      width: 90%;
      max-width: 600px;
      color: #e8e8e8;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    
      font-family: 'Avenirlight', sans-serif;
      animation: popIn 0.4s ease-out;
      position: relative;
    }
    
    .close3-button {
      position: absolute;
      top: 12px;
      right: 18px;
      font-size: 24px;
      cursor: pointer;
      color: #444;
    }
    
    @keyframes popIn {
      from {
        transform: scale(0.8);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }
    
    
    
    
    
    
    
    .faq4-pop-button {
      font-family: 'Louisgeorgecafe', sans-serif;
      font-size: clamp(12px, 1.5vw, 18px);
      padding: 42px 42px;
      background-color: #a8b400;
      border: none;
        border: 4px solid #efefef;
    
      color: white;
      border-radius: 88px;
       text-align: center;
      left:61%;
      top:33%;
      cursor: pointer;
      position: absolute;
      transition: background-color 0.3s ease;
       opacity: 0;
      transform: translateX(-820px);
       transition: opacity 1.3s ease, transform 1.3s ease;
     
    
    }
    
    .section-quinity2.active .faq4-pop-button  {
        opacity: 1;
      transform: translateY(0);
    
          }
    
    .faq4-pop-button:hover {
      background-color: #727a00;
    }
    
    .faq4-popup {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: transparent;
      z-index: 9999;
      justify-content: center;
      align-items: center;
    }
    
    .faq4-popup-content {
      background-color: #c7d500;
        text-align: center;
    
      padding: 32px;
      border-radius: 12px;
      width: 90%;
      max-width: 600px;
      color: #131313;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    
      font-family: 'Avenirlight', sans-serif;
      animation: popIn 0.4s ease-out;
      position: relative;
    }
    
    .close4-button {
      position: absolute;
      top: 12px;
      right: 18px;
      font-size: 24px;
      cursor: pointer;
      color: #444;
    }
    
    @keyframes popIn {
      from {
        transform: scale(0.8);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }
    
    
    
    
    
    
    
    
    
    
    
    .faq5-pop-button {
      font-family: 'Louisgeorgecafe', sans-serif;
      font-size: clamp(12px, 1.5vw, 18px);
      padding: 42px 42px;
      background-color: #007441;
      border: none;
        border: 4px solid #efefef;
    
      color: white;
      border-radius: 88px;
       text-align: center;
      left: 74%;
      top:33%;
      cursor: pointer;
      position: absolute;
      transition: background-color 0.3s ease;
       opacity: 0;
      transform: translateX(-1020px);
       transition: opacity 1.3s ease, transform 1.3s ease;
     
    
    }
    
    .section-quinity2.active .faq5-pop-button  {
        opacity: 1;
      transform: translateY(0);
    
          }
    
    
    .faq5-pop-button:hover {
      background-color: #00d277;
    }
    
    .faq5-popup {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: transparent;
      z-index: 9999;
      justify-content: center;
      align-items: center;
    }
    
    .faq5-popup-content {
      background-color: #007441;
        text-align: center;
    
      padding: 32px;
      border-radius: 12px;
      width: 90%;
      max-width: 600px;
      color: #f4f4f4;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    
      font-family: 'Avenirlight', sans-serif;
      animation: popIn 0.4s ease-out;
      position: relative;
    }
    
    .close5-button {
      position: absolute;
      top: 12px;
      right: 18px;
      font-size: 24px;
      cursor: pointer;
      color: #444;
    }
    
    @keyframes popIn {
      from {
        transform: scale(0.8);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }

    












    .quinity2text { 
      font-family: 'Avenirmedium', sans-serif;
      font-size: clamp(15px, 2.4vw, 17px);
      color: #dddddd;
      position: absolute;
      top: 52%;
      left: 13%;
      line-height: 1.2;
    transition: opacity 0.4s ease, transform 1s ease;
    max-width: 50%;
    transform: translateY(430px);
    opacity: 0;

  }


  .bquinity2text { 
    font-family: 'LexendBold';
}


  .section-quinity2.active .quinity2text {
    transform: translateY(0);
    opacity: 1;       
     }






 .ctxt3 {
     font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(44px, 2.4vw, 47px);
    color: #190800;
    position: absolute;
    top: 4%;
    left: 7%;
    line-height: 0.9;
    word-spacing: -3px;

  transition: color 2.2s ease; /* sanfter Übergang */
  }
  
  .section-3cneu.active .ctxt3 {
color: #190800;
  }
  


   .ctxt2 {
     font-family: 'LEMONMILKLIGHT', sans-serif;
    font-size: clamp(27px, 2.4vw, 31px);
    color: #190800;
    position: absolute;
    top: 8%;
    left: 7%;
    line-height: 0.9;
word-spacing: -5px;
  transition: color 2.2s ease; /* sanfter Übergang */
  }
  
  .section-3cneu.active .ctxt2 {
color: #190800;
  }
  


   .ctxt1 {
     font-family: 'Avenirmedium', sans-serif;
    font-size: clamp(15px, 2.4vw, 17px);
    color: #e76730;
    position: absolute;
    max-width: 60%;
    top: 12%;
    left: 7%;
    line-height: 1.2;
  transition: color 2.2s ease; /* sanfter Übergang */
  }
  
  .section-3cneu.active .ctxt1 {
color: #e76730;
  }















  .line-containerx {
    position: absolute;
    top: 9%;
    left: 7%;
    height: 7px;
    border-radius: 8px;
    width: 66%; /* oder 300px, etc. */
    overflow: hidden;
   transition: opacity 2.3s ease, transform 1.3s ease;
   opacity: 1;
}
   
  
  .black-linex {
    height: 126px;
    background-color: #e76730;
opacity: 1;   
transition: opacity 2.3s ease, animation 1.3s ease;
}

   @keyframes growLine {
    from { width: 0; }
    to { width: 100%; } /* Zielbreite */
  }
  


  .section-3cneu.active  .black-linex{
    animation: growLine 1s ease forwards;
    opacity: 1;
    }









 .calm-hover-block {
  width: 37%;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  left: 7%;

  top: 20%;
  cursor: pointer;
}

.calm-container {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}

.preview, .calm-video {
  position: absolute;
  left: 0%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease-in-out;
  border-radius: 10px;
}

.calm-video {
  opacity: 0;
  z-index: 2;
}

.calm-hover-block:hover .preview {
  opacity: 0;
}

.calm-hover-block:hover .calm-video {
  opacity: 1;
}

.calm-hover-block:hover .calm-video {
  /* Video spielt beim Hover los */
  animation: play-on-hover 0s forwards;
}

.calm-text {
top: 0%;
position: absolute;
max-width: 130%;
right: -140%;
text-align: left;
font-family: 'Avenirmedium', sans-serif;
font-size: 18px;
color: #ffffff;
opacity: 1;
}

.calm-hover-block:hover .calm-text {
opacity: 1;
color: #60440d;
}


.calm-title {

font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(30px, 5vw, 32px);
color: #ffffff;

}

.calm-hover-block:hover .calm-title {

color: #60440d;
}


.calm-bold {

font-family: 'LexendBold', sans-serif;
color: #ffffff;

}

.calm-hover-block:hover .calm-bold {

color: #60440d;
}





















.canteen-hover-block {
  width: 37%;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  left: 7%;

  top: 40%;
  cursor: pointer;
}

.canteen-container {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}

.preview, .canteen-video {
  position: absolute;
  left: 0%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease-in-out;
  border-radius: 10px;
}

.canteen-video {
  opacity: 0;
  z-index: 2;
}

.canteen-hover-block:hover .preview {
  opacity: 0;
}

.canteen-hover-block:hover .canteen-video {
  opacity: 1;
}

.canteen-hover-block:hover .canteen-video {
  /* Video spielt beim Hover los */
  animation: play-on-hover 0s forwards;
}

.canteen-text {
  top: 0%;
  position: absolute;
  max-width: 130%;
  right: -140%;
  text-align: left;
  font-family: 'Avenirmedium', sans-serif;
  font-size: 18px;
  color: #ffffff;
  opacity: 1;
}

.canteen-hover-block:hover .canteen-text {
opacity: 1;
color: #60440d;
}


.canteen-title {

font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(30px, 5vw, 32px);
color: #ffffff;

}

.canteen-hover-block:hover .canteen-title {

color: #60440d;
}


.canteen-bold {

font-family: 'LexendBold', sans-serif;
color: #ffffff;

}

.canteen-hover-block:hover .canteen-bold {

color: #60440d;
}










.office2-hover-block {
  width: 37%;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  left: 7%;

  top: 60%;
  cursor: pointer;
}

.office2-container {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}

.preview, .office2-video {
  position: absolute;
  left: 0%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease-in-out;
  border-radius: 10px;
}

.office2-video {
  opacity: 0;
  z-index: 2;
}

.office2-hover-block:hover .preview {
  opacity: 0;
}

.office2-hover-block:hover .office2-video {
  opacity: 1;
}

.office2-hover-block:hover .office2-video {
  /* Video spielt beim Hover los */
  animation: play-on-hover 0s forwards;
}

.office2-text {
  top: 0%;
  position: absolute;
  max-width: 130%;
  right: -140%;
  text-align: left;
  font-family: 'Avenirmedium', sans-serif;
  font-size: 18px;
  color: #ffffff;
  opacity: 1;
}

.office2-hover-block:hover .office2-text {
opacity: 1;
color: #60440d;
}


.office2-title {

font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(30px, 5vw, 32px);
color: #ffffff;

}

.office2-hover-block:hover .office2-title {

color: #60440d;
}


.office2-bold {

font-family: 'LexendBold', sans-serif;
color: #ffffff;

}

.office2-hover-block:hover .office2-bold {

color: #60440d;
}













.wert1-container {
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top:17%;
  left: 4%;
  max-width: 40%;
  transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateX(-230px);
    opacity: 0;
  }

  
   .wert-section.active .wert1-container {
    transform: translateX(0);
  opacity: 1;
  }



/* Bil
d-Wrapper */
.wert1-wrapper {
  position: relative;
  width: 15%; /* frei skalierbar */
  height: auto;
}

.icon {
  width: 100%;
  height: auto;
  position: absolute;
  top:34%;
  top: 0;
  left: 0;
}

.icon.hover {
  opacity: 0;
}

.wert1-container:hover .icon.default {
  opacity: 0;
}
.wert1-container:hover .icon.hover {
  opacity: 1;
}

/* Text */
.wert1-text {
  text-align: left;
 margin-top: 0.5%;
 margin-left: 20%;
  font-size: clamp(16px, 2.6vw, 18px);
  font-family: 'Avenirlight', sans-serif;
  color: #00000088;
  max-width: 87%;
}


.wert1-container .hgwert1-text {
  display: inline-block;
  font-family: 'LexendBold', sans-serif;
  color:#00000088;     }

.wert1-container:hover .wert1-text {
  display: inline-block;
  color: #000000;      }

  .wert1-container:hover .hgwert1-text {
 color: #000000 ;     }











  

.coco-card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: absolute;
  bottom: -2%;
  left: 10%;
  opacity: 1;
  transform: translateY(20px);
  transition: opacity 2.3s ease, transform 1.3s ease;
  z-index: 4;
}

.section-3cneu.active  .coco-card {
  opacity: 1;
  transform: translateX(0);
}

.coco-container {
  position: relative;
  width: 730px;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.hover6-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.4s ease;
}

/* Overlay mit Farbe */
.color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(220, 30, 100, 0.0); /* initial transparent */
  transition: background-color 0.4s ease;
  border-radius: 8px;
}

.coco-card:hover .color-overlay {
  background-color: rgba(26, 0, 10, 0.568); /* gewünschte Farbe mit Transparenz */
}

/* Text über dem Bild */
.cocotext {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(12px, 7vw, 21px);
  color: #ffffffcc;
  text-align: center;
  z-index: 2;
  opacity: 0;
  transition: color 0.3s ease, opacity 1.3s ease;

}

.coco-card:hover .cocotext {
  color: #ffffff;
  text-decoration: underline;
  opacity: 1;
}


.coco-card:hover .cocotext:hover {
  color: #d50084;
  text-decoration: underline;
  opacity: 1;
}
















.liv-card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top: 11%;
  left: 2%;
  opacity: 0;
  z-index: 0;
  transform: translateX(-320px);
  transition: opacity 2.3s ease, transform 1.3s ease;
}

.section-3cneu.active  .liv-card {
  opacity: 1;
  transform: translateX(0);
}

.liv-container {
  position: relative;
  width:690px;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.hover7-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.4s ease;
}

/* Overlay mit Farbe */
.color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(220, 30, 100, 0.0); /* initial transparent */
  transition: background-color 0.4s ease;
  border-radius: 8px;
}

.liv-card:hover .color-overlay {
  background-color: rgba(26, 0, 10, 0.568); /* gewünschte Farbe mit Transparenz */
}

/* Text über dem Bild */

/* Text über dem Bild */
.liv-text  {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(12px, 7vw, 21px);
  color: #ffffffcc;
  text-align: center;
  z-index: 2;
  opacity: 0;
  transition: color 0.3s ease, opacity 1.3s ease;

}

.liv-card:hover .liv-text {
  color: #ffffff;
  text-decoration: underline;
  opacity: 1;
}


.liv-card:hover .liv-text:hover {
  color: #d50084;
  text-decoration: underline;
  opacity: 1;
}
















.mp-card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top: 47%;
  left: 57%;
  opacity: 0;
  transform: translateX(320px);
  transition: opacity 1.3s ease, transform 1.3s ease;
}

.section-3cneu.active  .mp-card {
  opacity: 1;
  transform: translateX(0);
}

.mp-container {
  position: relative;
  width:630px;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.hover7-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.4s ease;
}

/* Overlay mit Farbe */
.color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(220, 30, 100, 0.0); /* initial transparent */
  transition: background-color 0.4s ease;
  border-radius: 8px;
}

.mp-card:hover .color-overlay {
  background-color: rgba(26, 0, 10, 0.568); /* gewünschte Farbe mit Transparenz */
}

/* Text über dem Bild */

/* Text über dem Bild */
.mp-text  {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(12px, 7vw, 21px);
  color: #ffffffcc;
  text-align: center;
  z-index: 2;
  opacity: 0;
  transition: color 0.3s ease, opacity 1.3s ease;

}

.mp-card:hover .mp-text {
  color: #ffffff;
  text-decoration: underline;
  opacity: 1;
}


.mp-card:hover .mp-text:hover {
  color: #d50084;
  text-decoration: underline;
  opacity: 1;
}


















.tho-card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top: 13%;
  right: 7%;
  opacity: 0;
  transform: translateY(320px);
  transition: opacity 1.3s ease, transform 1.3s ease;
}

.section-3cneu.active  .tho-card {
  opacity: 1;
  transform: translateX(0);
}

.tho-container {
  position: relative;
  width: 510px;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 8px;
}

.hover7-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.4s ease;
}

/* Overlay mit Farbe */
.color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(220, 30, 100, 0.0); /* initial transparent */
  transition: background-color 0.4s ease;
  border-radius: 8px;
}

.tho-card:hover .color-overlay {
  background-color: rgba(26, 0, 10, 0.568); /* gewünschte Farbe mit Transparenz */
}

/* Text über dem Bild */
.tho-text  {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(12px, 7vw, 21px);
  color: #ffffffcc;
  text-align: center;
  z-index: 2;
  opacity: 0;
  transition: color 0.3s ease, opacity 1.3s ease;

}

.tho-card:hover .tho-text {
  color: #ffffff;
  text-decoration: underline;
  opacity: 1;
}


.tho-card:hover .tho-text:hover {
  color: #d50084;
  text-decoration: underline;
  opacity: 1;
}














.bneutit{
  
        font-family: 'LEMONMILKLIGHT', sans-serif;
        font-size: clamp(41px, 2.4vw, 51px);
      
        color: #eeeeee;
        position: absolute;
        top: 2%;
        left: 4%;
z-index: 5;
 transition: opacity 0.8s ease, transform 0.8s ease;
          opacity: 1;}
      
   
   .section-3bneu.active .bneutit {
        opacity: 1;
  }
  


  .bneusit{
  
        font-family: 'LEMONMILKBOLD', sans-serif;
        font-size: clamp(41px, 2.4vw, 51px);
      
        color: #080808;
        position: absolute;
        top: 4.4%;
        left: 4%;
z-index: 5;
 transition: opacity 0.8s ease, transform 0.8s ease;
          opacity: 1;}
      
   
   .section-3bneu.active .bneusit {
        opacity: 1;
  }
  







    .section-3cneu.from-dynamic-section {
      background-color: #151515;
      }


      .section-movie1 {
        background-color: #0f0f0f;
        padding: 300px 0; /* Oben und unten Abstand */
        position: relative;
        z-index: 0;
        
      }

      .section-movie1.active {
        background-color: #0f0f0f;
        padding: 300px 0; /* Oben und unten Abstand */
        position: relative;
        z-index: 0;
        
      }





      .section-movie21 {
        background-color: #0f0f0f;
        padding: 320px 0; /* Oben und unten Abstand */
        position: relative;
        z-index: 0;
        overflow: hidden;
        
      }


      .section-movie21.active  {
        background-color: #0f0f0f;
        z-index: 0;

      }



      .section-movie22 {
        background-color: #0f0f0f;
        padding: 320px 0; /* Oben und unten Abstand */
        position: relative;
        z-index: 0;
        overflow: hidden;
        
      }


      .section-movie22.active  {
        background-color: #0f0f0f;
        
      }




  


      



      .section-movie23 {
        background-color: #0f0f0f;
        padding: 320px 0; /* Oben und unten Abstand */
        position: relative;
        z-index: 0;
        overflow: hidden;
        
      }


     




      .movietext31{
        text-align: center;
        font-family: 'Avenirlight', sans-serif;
        font-size: clamp(18px, 2.4vw, 18px);
        max-width: 50%;
        color: #fafafa;
        position: absolute;
        top: 97%;
        left: 22%;
        line-height: 1.2;
z-index: 5;
 transition: opacity 0.8s ease, transform 0.8s ease;
        transform: translateY(-430px);
          opacity: 1;
          
        }
      
      
        .dynamic2-section.grow  .movietext33 {
          transform: translateX(0);
        opacity: 1;
        }
      

      .hgmovietext31{
        font-family: 'LEMONMILKBOLD', sans-serif;
        font-size: clamp(21px, 2.4vw,26px);
        color: #890e5e;
        opacity: 1;
       }

     



      

    .section-4cneu {
      background-color: #151515;
      padding: 70px 0;
      position: relative;
      z-index: 3;
      transition: background-color 0.9s ease-in-out; /* sanfter Übergang */
      }
      
     .section-4cneu.active {
      background-color: #151515;
      
      }
      
      
      .section-5cneu {
        background-color: #151515;
        padding: 870px 0;
        position: relative;
        z-index: 3;
        transition: background-color 0.9s ease-in-out; /* sanfter Übergang */
        }
        
       .section-5cneu.active {
        background-color: #151515;
        }









        .vorteileundwrete {
          text-align: left;
         position: absolute;
         top: 4%;
         left: 4%;
          font-size: clamp(66px, 2.6vw, 28px);
          font-family: 'LEMONMILKBOLD', sans-serif;
          color: #dddddd88;
          max-width: 87%;
          line-height: 1;
          transition: opacity 0.8s ease, transform 0.8s ease;
          transform: translateX(-230px);
            opacity: 0;
          }
          


          .hgvorteileundwrete {
           
            color: #ff1d6cbe;
           
            }
                      
          
        
          
          .section-5cneu.active .vorteileundwrete {
           
            opacity: 1;
            transform: translateX(0);
          }
          


        



     
  










        .energie5-container {
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          position: absolute;
          top:54%;
          left: 4%;
          max-width: 40%;
          transition: opacity 0.8s ease, transform 0.8s ease;
          transform: translateX(-230px);
            opacity: 0;
          }
        
          
           .section-5cneu.active .energie5-container {
            transform: translateX(0);
          opacity: 1;
          }
        
        
        
        /* Bil
        d-Wrapper */
        .energie5-wrapper {
          position: relative;
          width: 15%; /* frei skalierbar */
          height: auto;
        }
        
        .icon {
          width: 100%;
          height: auto;
          position: absolute;
          top:34%;
          top: 0;
          left: 0;
        }
        
        .icon.hover {
          opacity: 0;
        }
        
        .energie5-container:hover .icon.default {
          opacity: 0;
        }
        .energie5-container:hover .icon.hover {
          opacity: 1;
        }
        
        /* Text */
        .energie5-text {
          text-align: left;
         margin-top: 0.5%;
         margin-left: 20%;
          font-size: clamp(16px, 2.6vw, 18px);
          font-family: 'Avenirlight', sans-serif;
          color: #fafafa88;
          max-width: 87%;
        }
        
        
        .energie5-container .highlightenergieone5-text {
          display: inline-block;
          font-family: 'LEMONMILKBOLD', sans-serif;
          color:#fafafa88;     }
        
     
          .energie5-container .highlightenergieone5u {
            color:#fafafa88;   
                 }

      
        .energie5-container:hover .energie5-text {
          display: inline-block;
          color: #ff1d6c;      }

          .energie5-container:hover .highlightenergieone5u {
            display: inline-block;
            text-decoration: underline;
            text-underline-offset: 3px;
            color: #ff1d6c;

text-decoration-thickness: 3px;       
     text-decoration-color: #bbbbbbd9;      }



          .energie5-container:hover .highlightenergieone5-text {
            display: inline-block;
            font-family: 'LEMONMILKBOLD', sans-serif;
            color:#ff1d6c;     }

















        .energie7-container {
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          position: absolute;
          top:24%;
          left: 47%;
          max-width: 40%;
          transition: opacity 0.8s ease, transform 0.8s ease;
          transform: translateX(-230px);
            opacity: 0;
          }
        
          
           .section-5cneu.active .energie7-container {
            transform: translateX(0);
          opacity: 1;
          }
        
        
        
        /* Bil
        d-Wrapper */
        .energie7-wrapper {
          position: relative;
          width: 15%; /* frei skalierbar */
          height: auto;
        }
        
        .icon {
          width: 100%;
          height: auto;
          position: absolute;
          top:34%;
          top: 0;
          left: 0;
        }
        
        .icon.hover {
          opacity: 0;
        }
        
        .energie7-container:hover .icon.default {
          opacity: 0;
        }
        .energie7-container:hover .icon.hover {
          opacity: 1;
        }
        





        /* Text */
        .energie7-text {
          text-align: left;
         margin-top: 0.5%;
         margin-left: 20%;
          font-size: clamp(16px, 2.6vw, 18px);
          font-family: 'Avenirlight', sans-serif;
          color: #fafafa88;
          max-width: 87%;
        }
        
        
        .energie7-container .hg77 {
          display: inline-block;
          font-family: 'LEMONMILKBOLD', sans-serif;
          color:#fafafa88;     }

          .energie7-container .hg771 {
            display: inline-block;
            font-family: 'LexendBold', sans-serif;
            color:#fafafa88;     }
        
     
          .energie7-container .hg77u {
            color:#fafafa88;   
                 }

                 .energie7-container .link1-span{
                  color:#86868688;   
                       }
      
        .energie7-container:hover .energie7-text {
          display: inline-block;
          color: #ff1d6c;      }

          .energie7-container:hover .hg77u {
            display: inline-block;
            text-decoration: underline;
            text-underline-offset: 3px;
            color: #ff1d6c;

text-decoration-thickness: 3px;       
     text-decoration-color: #bbbbbbd9;      }



          .energie7-container:hover .hg77 {
            display: inline-block;
            font-family: 'LEMONMILKBOLD', sans-serif;
            color:#ff1d6c;     }



            .energie7-container:hover .hg771 {
              color:#ff1d6c;     }


              .energie7-container:hover .link1-span {
                color:#cccccc;     }
  
                .energie7-container:hover .link1-span:hover {
                  text-decoration: underline;
                  text-underline-offset: 3px;
                  color: #c7067a;
      text-decoration-thickness: 3px;       
           text-decoration-color: #e4e4e4d9;  
              }
               







.glühbirnen-overlay {
  width: 8%;         /* oder z. B. 300px für feste Breite */
  max-width: 420px;    /* Bild wird nie größer als 600px */
  top: 12%;
  left: 22%;
  position: absolute;
  display: block;      /* Verhindert Lücken unter dem Bild */
}




.threeone-text {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
  max-width: 50%;
  color: #fafafa;
  position: absolute;
  top: 17%;
  left: 30%;
  line-height: 1.4;
}

.highlighttthreeonelight {
  color: #000000;
  font-family: 'LEMONMILKLIGHT', sans-serif;
  font-size: clamp(10px, 1.4vw, 12px);
  line-height: 0.8;


}

.highlightthreeonebold {
  color: #000000;
  font-size: clamp(18px, 2.4vw, 18px);
  font-family: 'LEMONMILKBOLD', sans-serif;
}



.highlighttthreeoneboldlex {
  font-size: clamp(18px, 2.4vw, 18px);
  font-family: 'LexendBold', sans-serif;
}






.digitalkey-overlay {
  width: 8%;         /* oder z. B. 300px für feste Breite */
  max-width: 420px;    /* Bild wird nie größer als 600px */
      bottom: 47%;
  left: 22%;
  position: absolute;
  display: block;      /* Verhindert Lücken unter dem Bild */
}



.threetwo-text {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
  max-width: 50%;
  color: #fafafa;
  position: absolute;
  bottom: 34%;
  left: 30%;
  line-height: 1.4;
}







.routing-overlay {
  width: 8%;         /* oder z. B. 300px für feste Breite */
  max-width: 420px;    /* Bild wird nie größer als 600px */
  bottom: 19%;
  left: 22%;
  position: absolute;
  display: block;      /* Verhindert Lücken unter dem Bild */
}



.threethree-text {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
  max-width: 50%;
  color: #fafafa;
  position: absolute;
  bottom: 4%;
  left: 30%;
  line-height: 1.4;
}









.section-4 {
  background-color: #C9CDD8;
  padding: 120px 0; /* Oben und unten Abstand */
  position: relative;
overflow: hidden;
box-shadow: 20px 20px 20px 20px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
z-index: 20;
}

.section-4:hover {
  background-color: #CDD1DC;
 
}



    .filmcafe3-overlay {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(65, 65, 65, 0.408); /* Transparente schwarze Schicht */
      z-index: 1;
    }

.fouritit{
  font-family: 'LEMONMILKLIGHT', sans-serif;
  font-size: clamp(17px, 2.4vw, 21px);
  max-width: 60%;
  color: #0f0f0f;
  position: absolute;
  top: 4%;
  left: 4%;
  line-height: 0.9;
transition: transform 0.3s ease-in;


}

.hgfouritit {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(37px, 3.4vw, 41px);
  color: #0f0f0f;

}

.fouriti{
  font-family: 'Beauty', sans-serif;
  font-size: clamp(107px, 2.4vw, 121px);
  max-width: 60%;
  color: #ae0074;
  position: absolute;
  top: 7%;
  left: 4%;
  line-height: 0.9;
transition: transform 0.3s ease-in;


}




.stepone{
  font-family: 'LexendBold', sans-serif;
  font-size: clamp(17px, 2.4vw, 21px);
  max-width: 30%;
  color: #0e0e0e;
  position: absolute;
  top: 19%;
  left: 24%;
  line-height: 1.2;
transition: transform 0.3s ease-in;
opacity: 1;

}

.hgstepone {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(17px, 2.4vw, 21px);
  color: #0e0e0e;
opacity: 1;
}



.step-section1.active  .stepone {
opacity: 1;
  color: #f4f4f4;

}

.step-section1.active  .hgstepone {
opacity: 1;
  color: #f4f4f4;

}

.fly-in-image7 {
opacity: 1;
 position: absolute;
left: 5%;
width: 12%;
top: 23%;
z-index: 2;
}











.steptwo{
  font-family: 'LexendBold', sans-serif;
  font-size: clamp(17px, 2.4vw, 21px);
  max-width: 50%;
  color: #f4f4f4;
  position: absolute;
  top: 19%;
  left: 24%;
  line-height: 1.2;
transition: transform 0.3s ease-in;
opacity: 1;

}

.hgsteptwo {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(17px, 2.4vw, 21px);
  color: #f4f4f4;
opacity: 1;
}



.step-section2.active  .steptwo {
opacity: 1;
}

.step-section2.active  .hgsteptwo {
opacity: 1;
}


.fly-in-image8 {
opacity: 1;
 position: absolute;
left: 5%;
width: 12%;
top: 23%;
z-index: 2;
}







.stepthree{
  font-family: 'LexendBold', sans-serif;
  font-size: clamp(17px, 2.4vw, 21px);
  max-width: 30%;
  color: #f4f4f4;
  position: absolute;
  top: 19%;
  left: 24%;
  line-height: 1.2;
transition: transform 0.3s ease-in;
opacity: 1;

}

.hgstepthree {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(17px, 2.4vw, 21px);
  color: #f4f4f4;
opacity: 1;
}



.step-section3.active  .stepthree {
opacity: 1;
}

.step-section3.active  .hgstepthree {
opacity: 1;
}


.fly-in-image9 {
opacity: 1;
 position: absolute;
left: 5%;
width: 12%;
top: 23%;
z-index: 2;
}






.stepfour{
  font-family: 'LexendBold', sans-serif;
  font-size: clamp(17px, 2.4vw, 21px);
  max-width: 30%;
  color: #f4f4f4;
  position: absolute;
  top: 19%;
  left: 24%;
  line-height: 1.2;
transition: transform 0.3s ease-in;
opacity: 1;

}

.hgstepfour {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(17px, 2.4vw, 21px);
  color: #f4f4f4;
opacity: 1;
}



.step-section4.active  .stepfour {
opacity: 1;
}

.step-section4.active  .hgstepfour {
opacity: 1;
}

.fly-in-imagex {
opacity: 1;
 position: absolute;
left: 5%;
width: 12%;
top: 23%;
z-index: 2;
}







.step-section1.inherits {
background-color: #bf107c; /* Farbe von .step-section2.active */
}

.step-section2.inherits {
background-color: #72215e; /* Farbe von .step-section3.active */
}

.step-section3.inherits {
background-color: #3d0842; /* Farbe von .step-section4.active */
}

/* .step-section4 braucht keine inherits */









.sixitit{
  font-family: 'LEMONMILKLIGHT', sans-serif;
  font-size: clamp(17px, 2.4vw, 21px);
  max-width: 60%;
  color: #f3f3f3;
  position: absolute;
  top: 14%;
  left: 4%;
  line-height: 0.9;



}

.hgsixitit {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(37px, 3.4vw, 41px);


}




.sixjffitit{
  font-family: 'LEMONMILKLIGHT', sans-serif;
  font-size: clamp(17px, 2.4vw, 21px);
  max-width: 60%;
  color: #e7308f;
  position: absolute;
  top: 14%;
  left: 4%;
  line-height: 0.9;



}

.hgsixjffitit {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(27px, 3.4vw, 31px);


}





.menü-button {
display: inline-block;
padding: 14px 40px;
position: absolute;
bottom: 17%;
left: 4%;
font-size: clamp(12px, 1.7vw, 17px);
font-family: 'LexendBold', sans-serif;
font-weight: bold;
color: #efefef; /* Schriftfarbe = Rahmenfarbe */
background-color: transparent;
border: 4px solid #efefef;
border-radius: 32px;
text-decoration: none;
transition: all 0.3s ease;
}

.menü-button:hover {
background-color: #e7308f;
color: white;
}



.menü2-button {
display: inline-block;
padding: 14px 40px;
position: absolute;
bottom: 17%;
left: 32%;
font-size: clamp(12px, 1.7vw, 17px);
font-family: 'LexendBold', sans-serif;
font-weight: bold;
color: #efefef; /* Schriftfarbe = Rahmenfarbe */
background-color: transparent;
border: 4px solid #e7308f;
border-radius: 32px;
text-decoration: none;
transition: all 0.3s ease;
}

.menü2-button:hover {
background-color: white;
color: rgb(26, 26, 26);
}








  
  
  
  
  .rezepte-button {
    display: inline-block;
    padding: 14px 162px;
    position: absolute;
    bottom:11%;
left: 50%;
transform: translateX(-50%);
    font-size: clamp(12px, 1.7vw, 17px);
    font-family: 'Avenirlight', sans-serif;
    font-weight: bold;
    color: #efefef; /* Schriftfarbe = Rahmenfarbe */
    background-color: #e7308f;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    z-index: 5;
    }
    
    .rezepte-button:hover {
    background-color: #57005a;
    }






.line-wrapper {
position: relative;
}



.step-section1 {
padding: 220px 0; /* Oben und unten Abstand */
                                                              position: relative;
color: white;
background-color: #C9CDD8;
position: relative;
z-index: 1;
transition: background-color 0.6s ease;
}

.step-section1.active  {
background-color: #bf107c; /* oder eine Farbe, die du möchtest */
}







.step-section2 {
padding: 220px 0; /* Oben und unten Abstand */
                                                              position: relative;
color: white;
background-color: #bf107c;
position: relative;
z-index: 1;
transition: background-color 0.6s ease;
}

.step-section2.active {
background-color: #72215e; /* oder eine Farbe, die du möchtest */
}





.step-section3 {
padding: 220px 0; /* Oben und unten Abstand */
                                                              position: relative;
font-size: 2rem;
color: white;
background-color: #72215e;
position: relative;
z-index: 1;
transition: background-color 0.6s ease;
}

.step-section3.active {
background-color: #3d0842; /* oder eine Farbe, die du möchtest */
}


.step-section4 {
padding: 220px 0; /* Oben und unten Abstand */
                                                              position: relative;
font-size: 2rem;
color: white;
background-color: #3d0842;
position: relative;
z-index: 1;
transition: background-color 0.6s ease;
}

.step-section4.active {
background-color: #361a3b; /* oder eine Farbe, die du möchtest */
}


















.scroll-line {
position: fixed;
top: 7%;
right: 20%;
width: 2%;
height: 0;
background-color: rgb(246, 246, 246);
z-index: 10;
transition: height 0.3s ease, background-color 0.3s ease;
border-radius: 4px;
}














.energie-container {
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top: 14%;
  left: 7%;
  max-width: 40%;
  transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateX(-230px);
    opacity: 0;
  }

  
   .section-3bneu.active .energie-container {
    transform: translateX(0);
  opacity: 1;
  }



/* Bild-Wrapper */
.energie-wrapper {
  position: relative;
  width: 15%; /* frei skalierbar */
  height: auto;
}

.icon {
  width: 100%;
  height: auto;
  position: absolute;
  top: 20%;
  top: 0;
  left: 0;
}

.icon.hover {
  opacity: 0;
}

.energie-container:hover .icon.default {
  opacity: 0;
}
.energie-container:hover .icon.hover {
  opacity: 1;
}

/* Text */
.energie-text {
  text-align: left;
 margin-top: 0.5%;
 margin-left: 20%;
  font-size: clamp(16px, 2.6vw, 18px);
  font-family: 'Avenirlight', sans-serif;
  color: #fafafa88;
  max-width: 87%;
}


.energie-container .highlightenergieone-text {
  display: inline-block;
  font-family: 'LEMONMILKBOLD', sans-serif;
  color:#00000088;     }

  .energie-container .highlightenergieone1-text {
  display: inline-block;
  font-family: 'LexendBold', sans-serif;
  color:#fafafa88;     }

.energie-container .highlightenergieone2-text {
  display: inline-block;
  font-family: 'Avenirheavy', sans-serif;

  color:#fafafa88;     }


.energie-container:hover .energie-text {
  display: inline-block;
  color: #fafafa;      }

 .energie-container:hover .highlightenergieone-text {
            display: inline-block;
            color: #000000;      }

            .energie-container:hover .highlightenergieone1-text {
            display: inline-block;
            color: #fafafa;      }

            .energie-container:hover .highlightenergieone2-text {
            display: inline-block;
            text-decoration: underline;
            text-decoration-color: #fafafa;
            text-decoration-thickness: 3px;
            text-underline-offset: 5px;
            color: #fafafa;      }


















.energie2-container {
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top: 14%;
  left: 52%;
  max-width: 40%;
  transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateX(230px);
    opacity: 0;
  }

  
   .section-3bneu.active .energie2-container {
    transform: translateX(0);

  opacity: 1;
  }



/* Bild-Wrapper */
.energie2-wrapper {
  position: relative;
  width: 15%; /* frei skalierbar */
  height: auto;
}

.icon33 {
  width: 70
  %;
  height: auto;
  position: absolute;
  top: 20%;
  top: 0;
  left: 0;
}

.icon.hover {
  opacity: 0;
}


             .icon.default33{
          opacity: 0.5;
        }
        


.energie2-container:hover .icon.default {
  opacity: 0.5;
}
.energie2-container:hover .icon.hover {
  opacity: 1;
}

/* Text */
.energie2-text {
  text-align: left;
 margin-top: 0.5%;
 margin-left: 20%;
  font-size: clamp(16px, 2.6vw, 18px);
  font-family: 'Avenirlight', sans-serif;
  color: #fafafa88;
  max-width: 87%;
}


.energie2-container .highlightenergieone2-text {
  display: inline-block;
  font-family: 'LEMONMILKBOLD', sans-serif;
  color:#00000088;     }

  .energie2-container .highlightenergieone12-text {
  display: inline-block;
  font-family: 'LexendBold', sans-serif;
  color:#fafafa88;     }




.energie2-container:hover .energie2-text {
  display: inline-block;
  color: #ffffff;      }

 .energie2-container:hover .highlightenergieone2-text {
            display: inline-block;
            color: #000000;      }

          

            .energie2-container:hover .highlightenergieone12-text {
           
            color: #fafafa;      }




.filmcafe2-overlay {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(133, 133, 133, 0.483); /* Transparente schwarze Schicht */
      z-index: 1;
    }






            .energie3-container {
              flex-direction: column;
              align-items: center;
              cursor: pointer;
              position: absolute;
              top: 41%;
  left: 7%;
  max-width: 40%;
              transition: opacity 0.8s ease, transform 0.8s ease;
              transform: translateX(-230px);
                opacity: 0;
              }
            
              
               .section-3bneu.active .energie3-container {
                transform: translateX(0);
              opacity: 1;
              }
            
            
            
            /* Bild-Wrapper */
            .energie3-wrapper {
              position: relative;
              width: 12%; /* frei skalierbar */
              height: auto;
            }
            
            .icon {
              width: 100%;
              height: auto;
              position: absolute;
              top: 20%;
              top: 0;
              left: 0;
            }
            
            .icon.hover {
              opacity: 0;
            }

             .icon.default3{
          opacity: 0.5;
        }
        
            
            .energie3-container:hover .icon.default {
              opacity: 0;
            }
            .energie3-container:hover .icon.hover {
              opacity: 1;
            }
            
            /* Text */
            .energie3-text {
              text-align: left;
             margin-top: 0.5%;
             margin-left: 20%;
              font-size: clamp(16px, 2.6vw, 18px);
              font-family: 'Avenirlight', sans-serif;
              color: #fafafa88;
              max-width: 87%;
            }
            
            
            .energie3-container .highlightenergieone3-text {
              display: inline-block;
              font-family: 'LEMONMILKBOLD', sans-serif;
              color:#00000088;     }
            
              .energie3-container .highlightenergieone13-text {
              display: inline-block;
              font-family: 'LexendBold', sans-serif;
              color:#fafafa88;     }
            
           
             .energie3-container:hover .highlightenergieone3-text {
                        display: inline-block;
                        color: #060000;      }
            
            
                        .energie3-container:hover .highlightenergieone13-text {
                  
                        color: #fafafa;      }

                        .energie3-container:hover .energie3-text {
                  
                          color: #fafafa;      }
  
                        




                          .dreineun{
  
                            font-family: 'SignatureDecember', sans-serif;
                            font-size: clamp(29px, 2.4vw, 31px);
                        text-align: center;
                            color: #080808;
                            position: absolute;
                            bottom:10%;
                            left: 50%;
                            transform: translateX(-50%);
                            line-height: 0.8;
                    z-index: 5;
                     transition: opacity 0.8s ease, transform 0.8s ease;
                              opacity: 1;}
                          
                       
                    .hgdreineun {
                      font-family: 'LEMONMILKBOLD', sans-serif;
                      font-size: clamp(21px, 2.4vw, 31px);
                  text-align: center;
                      color: #080808;
                      position: absolute;
                      bottom: 6%;
                      left: 50%;
                      transform: translateX(-50%);
                      line-height: 0.93;
              z-index: 5;
               transition: opacity 0.8s ease, transform 0.8s ease;
                        opacity: 1;
                      }
                      










.wert2-container {
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top:17%;
  left: 54%;
  max-width: 40%;
  transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateX(-230px);
    opacity: 0;
  }

  
   .wert-section.active .wert2-container {
    transform: translateX(0);
  opacity: 1;
  }



/* Bil
d-Wrapper */
.wert2-wrapper {
  position: relative;
  width: 15%; /* frei skalierbar */
  height: auto;
}

.icon {
  width: 100%;
  height: auto;
  position: absolute;
  top:34%;
  top: 0;
  left: 0;
}

.icon.hover {
  opacity: 0;
}

.wert2-container:hover .icon.default {
  opacity: 0;
}
.wert2-container:hover .icon.hover {
  opacity: 1;
}

/* Text */
.wert2-text {
  text-align: left;
 margin-top: 0.5%;
 margin-left: 20%;
  font-size: clamp(16px, 2.6vw, 18px);
  font-family: 'Avenirlight', sans-serif;
  color: #00000088;
  max-width: 87%;
}


.wert2-container .hgwert2-text {
  display: inline-block;
  font-family: 'LexendBold', sans-serif;
  color:#00000088;     }

.wert2-container:hover .wert2-text {
  display: inline-block;
  color: #000000;      }

  .wert2-container:hover .hgwert2-text {
 color: #000000 ;     }











            .energie4-container {
              flex-direction: column;
              align-items: center;
              cursor: pointer;
              position: absolute;
              top: 41%;
              left: 52%;
              max-width: 40%;
              transition: opacity 0.8s ease, transform 0.8s ease;
              transform: translateX(-230px);
                opacity: 0;
              }
            
              
               .section-3bneu.active .energie4-container {
                transform: translateX(0);
              opacity: 1;
              }
            
            
            
            /* Bild-Wrapper */
            .energie4-wrapper {
              position: relative;
              width: 12%; /* frei skalierbar */
              height: auto;
            }
            
            .icon {
              width: 100%;
              height: auto;
              position: absolute;
              top: 20%;
              top: 0;
              left: 0;
            }
            
            .icon.hover {
              opacity: 0;
            }

             .icon.default3{
          opacity: 0.5;
        }
        
            
            .energie4-container:hover .icon.default {
              opacity: 0;
            }
            .energie4-container:hover .icon.hover {
              opacity: 1;
            }
            
            /* Text */
            .energie4-text {
              text-align: left;
             margin-top: 0.5%;
             margin-left: 20%;
              font-size: clamp(16px, 2.6vw, 18px);
              font-family: 'Avenirlight', sans-serif;
              color: #fafafa88;
              max-width: 87%;
            }
            
            
            .energie4-container .highlightenergieone4-text {
              display: inline-block;
              font-family: 'LEMONMILKBOLD', sans-serif;
              color:#00000088;     }

              .energie4-container .highlightenergieone141 {
                display: inline-block;
                font-family: 'Avenirmedium', sans-serif;
                  }
            
                
            
              .energie4-container .highlightenergieone14-text {
              display: inline-block;
              font-family: 'LexendBold', sans-serif;
              color:#fafafa88;     }
            
           
             .energie4-container:hover .highlightenergieone4-text {
                        display: inline-block;
                        color: #060000;      }
            
            
                        .energie4-container:hover .highlightenergieone14-text {
                  
                        color: #fafafa;      }

                        .energie4-container:hover .energie4-text {
                  
                          color: #fafafa;      }


                        .energie4-container:hover .highlightenergieone141 {
                          display: inline-block;
                          font-family: 'Avenirmedium', sans-serif;
                            }
                      











.dynamicfilm1-section {
  position: relative;
  height: 100px; /* Start-Höhe */
  width: 100%;
  overflow: hidden;
  transition: height 0.8s ease;
  background-color: #000;
}

.dynamicfilm1-section.grow {
  height: 700px; /* Zielhöhe beim Scroll */
}



.fly-overlay {
  position: absolute;
  left: 10%;
  width: 22%;
  top: 7%;
  opacity: 0;
  transform: translateY(280px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  border-radius: 8px;
  z-index: 6;
  }
  
  /* Hover-Zustand */
  .dynamicfilm1-section.grow .fly-overlay {
  opacity: 1;
  transform: translateY(0);
  }














.tap-overlay {
  position: absolute;
  left: 17%;
  width: 4%;
  top: 35%;
  opacity: 0;
  transform: translateX(-480px);
  transition: opacity 0.8s ease, transform 1.2s ease;
  border-radius: 8px;
  z-index: 6;
  }
  
  /* Hover-Zustand */
  .section-quinity2.active .tap-overlay {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1s;
  }





  
    
   




.wert-section {
  position: relative;
  height: 700px; /* Start-Höhe */
  width: 100%;
  overflow: hidden;
  transition: height 0.8s ease;
  background-color: #C9CDD8;
}











.fly2-overlay {
  width:23%;
  top: 4%;
  left: 7%;
  position: absolute;
  transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateY(630px);
  opacity: 1;
  z-index: 6;
}

.dynamicfilm1-section.grow  .fly2-overlay  {
  opacity: 1;
  transform: translateX(0);}







.bfq5-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Füllt alles */
  z-index: 1;
   transform:  scale(1.05);
}


.filmcafe2-overlay {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(77, 77, 77, 0.4); /* Transparente schwarze Schicht */
        z-index: 5;
      }











.dff-container {
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top: 44%;
  left: 4%;

}

/* Bild-Wrapper */
.dff-wrapper {
  position: relative;
  width: 10%; /* frei skalierbar */
  height: auto;
}

.icon {
  width: 100%;
  height: auto;
  position: absolute;
  top: 20%;
  top: 0;
  left: 0;
}

.icon.hover {
  opacity: 0;
}

.dff-container:hover .icon.default {
  opacity: 0;
}
.dff-container:hover .icon.hover {
  opacity: 1;
}

/* Text */
.dff-text {
  text-align: left;
 margin-top: 0.5%;
 margin-left: 11%;
  font-size: clamp(16px, 2.6vw, 18px);
  font-family: 'Avenirlight', sans-serif;
  color: #fafafa;
  max-width: 37%;
}


.dff-container .hgdff-text {
  display: inline-block;
  font-family: 'LEMONMILKBOLD', sans-serif;
  color:#fafafa;     }

  .dff-container .hgdff1-text {
  display: inline-block;
  font-family: 'LexendBold', sans-serif;
  color:#fafafa;     }

.dff-container .hgdff2-text {
  display: inline-block;
  font-family: 'Avenirheavy', sans-serif;

  color:#fafafa;     }


.dff-container:hover .dff-text {
  display: inline-block;
  color: #e7308f;      }

 .dff-container:hover .hgdff-text {
            display: inline-block;
            color: #e7308f;      }

.dff-container:hover .hgdff1-text {
            display: inline-block;
            color: #e7308f;      }

.dff-container:hover .hgdff2-text {
            display: inline-block;
            text-decoration: underline;
            text-decoration-color: #e7308f;
            text-decoration-thickness: 3px;
            text-underline-offset: 5px;
            color: #fafafa;      }





 .puzzle-container {
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top:19%;
  left: 54%;

}

/* Bild-Wrapper */
.puzzle-wrapper {
  position: relative;
  width: 10%; /* frei skalierbar */
  height: auto;
}

.icon {
  width: 100%;
  height: auto;
  position: absolute;
  top: 20%;
  top: 0;
  left: 0;
}

.icon.hover {
  opacity: 0;
}

.puzzle-container:hover .icon.default {
  opacity: 0;
}
.puzzle-container:hover .icon.hover {
  opacity: 1;
}

/* Text */
.puzzle-text {
  text-align: left;
 margin-top: 0.5%;
 margin-left: 11%;
  font-size: clamp(16px, 2.6vw, 18px);
  font-family: 'Avenirlight', sans-serif;
  color: #fafafa;
  max-width: 47%;
}


.puzzle-container .hgpuzzle-text {
  display: inline-block;
  font-family: 'LEMONMILKBOLD', sans-serif;
  color:#fafafa;     }

  .puzzle-container .hgpuzzle1-text {
  display: inline-block;
  font-family: 'LexendBold', sans-serif;
  color:#fafafa;     }

.puzzle-container .hgpuzzle2-text {
  display: inline-block;
  font-family: 'Avenirheavy', sans-serif;

  color:#fafafa;     }


    .puzzle-container .hgpuzzle3-text {
  display: inline-block;
  font-family: 'Avenirheavy', sans-serif;
  color:#fafafa;     }

 .puzzle-container .hgpuzzle4-text {
  display: inline-block;
  font-family: 'Avenirlight', sans-serif;
  color:#fafafa;     }



.puzzle-container:hover .puzzle-text {
  display: inline-block;
  color: #e7308f;      }

 .puzzle-container:hover .hgpuzzle-text {
            display: inline-block;
            color: #e7308f;      }

.puzzle-container:hover .hgpuzzle1-text {
            display: inline-block;
            color: #e7308f;      }

.puzzle-container:hover .hgpuzzle2-text {
            display: inline-block;
            text-decoration: underline;
            text-decoration-color: #e7308f;
            text-decoration-thickness: 3px;
            text-underline-offset: 5px;
            color: #fafafa;      }


            .puzzle-container:hover .hgpuzzle3-text {
            display: inline-block;
           background-color: #ca38ff ;
            color: #fafafa;      }


              .puzzle-container:hover .hgpuzzle4-text {
            display: inline-block;
          
            color: #ca38ff;      }


            .puzzle-container:hover .hgpuzzle5-text {
            display: inline-block;
           background-color: #ff3838 ;
            color: #fafafa;      }


              .puzzle-container:hover .hgpuzzle6-text {
            display: inline-block;
          
            color: #ff3838;      }




.puzzle-container:hover .hgpuzzle5-text {
            display: inline-block;
           background-color: #ff3838 ;
            color: #fafafa;      }


              .puzzle-container:hover .hgpuzzle6-text {
            display: inline-block;
          
            color: #ff3838;      }

            



          
                                                            


.section-6122 {
                                                              background-color: #111111;
                                                              padding: 150px 0; /* Oben und unten Abstand */
                                                              position: relative;
                                                          z-index: 4;
                                                              box-shadow: 20px 20px 20px 20px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
      box-shadow: 20px -20px -20px -20px rgba(0, 0, 0, 0.6); /* Schatten nach unten */

                                                            }



                                                            .section-6 {
                                                              background-color: #111111;
                                                              padding: 120px 0; /* Oben und unten Abstand */
                                                              position: relative;
                                                          z-index: 4;
                                                              box-shadow: 20px 20px 20px 20px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
      box-shadow: 20px -20px -20px -20px rgba(0, 0, 0, 0.6); /* Schatten nach unten */

                                                            }






.section-7 {
                                                              background-color: #CDD1DC;
                                                              padding: 520px 0; /* Oben und unten Abstand */
                                                              position: relative;
                                                          z-index: 1;
                                                          overflow: hidden;
                                                            }

                                                            


.titleseven{
  font-family: 'Autobiography', sans-serif;
  font-size: clamp(77px, 2.4vw, 81px);
  color: #101010;
  position: absolute;
  top: 4%;
  left: 4%;
  line-height: 0.8;
}

.hgts {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(37px, 3.4vw, 41px);
  line-height: 0.6;

}

.ffff {
  font-family: 'LEMONMILKLIGHT', sans-serif;
  font-size: clamp(17px, 3.4vw, 21px);
  line-height: 0.6;

}















 .mediaone-hover-block {
      width: 20%;
      margin: 0 auto;
      text-align: center;
      position: absolute;
      top: 27%;
      left: 12%;
      bottom: 3%;
      cursor: pointer;
          transition: opacity 0.8s ease;
          opacity: 1;

    }


    

        .mediaone-wrapper {
          position: relative;
          margin-top: 1%;
          width: 42%; /* frei skalierbar */
          height: auto;
            border-radius: 8px;

        }
        
        .icon {
          width: 100%;
          height: auto;
          position: absolute;
          top:4%;
          top: 0;
          left: 0;
        }
        
        .icon.hover {
          opacity: 0;
        }

        .icon.default{
          opacity: 0.2;
        }
        
         .mediaone-hover-block:hover .icon.default {
          opacity: 0;
        }
         .mediaone-hover-block:hover .icon.hover {
          opacity: 1;
        }


    
    .mediaone-text {
      margin-top: 52%;
      opacity: 1;
      font-family: 'Avenirlight', sans-serif;
       font-size: clamp(12px, 5vw, 14px);
margin-left: -30%;
      color: #1111111d;
      transition: color 0.4s ease-in-out;
      text-align: center;
      max-width: 100%;
    }
    
    .mediaone-hover-block:hover .mediaone-text {
      opacity: 1;
            color: #111;

    }

 

           .hgmediaone{
     
      font-family: 'LEMONMILKBOLD', sans-serif;
   
      }
    

 .mediaone-hover-block:hover .hgmediaone {
   text-decoration: underline;
      text-underline-offset: 2px ;
      text-decoration-thickness: 5px;
      text-decoration-color: #d8418f;

    }





 .mediaone-hover-block:hover .humilde {
      opacity: 1;
            color: #d8418f;

    }

     .humilde{
      font-family: 'LexendBold', sans-serif;
      }



       .mediaone-hover-block:hover .hgmediaoneosqdsa {
      opacity: 1;
            color: #111111;
            background-color:#d8418f;
;

    }

     .hgmediaoneosqdsa{
      font-family: 'LexendBold', sans-serif;
      }
    

          .mediaone-hover-block:hover .hgmediaoneone {
      opacity: 1;
            color: #111111;
            background-color:#d8418f;
;

    }

     .hgmediaoneone{
      font-family: 'Avenirmedium', sans-serif;
      }
    

    















      

    .mediatwo-hover-block {
      width: 20%;
      margin: 0 auto;
      text-align: center;
      position: absolute;
      top: 27%;
      left: 50%;
      transform: translateX(-50%);
      bottom: 3%;
      cursor: pointer;
          transition: opacity 0.8s ease;
          opacity: 1;

    }

  .mediatwo-wrapper {
          position: relative;
          margin-top: 1%;
          width: 47%; /* frei skalierbar */
          height: auto;
            border-radius: 8px;

        }
        
        .icon {
          width: 100%;
          height: auto;
          position: absolute;
          top:4%;
          top: 0;
          left: 0;
        }
        
        .icon.hover {
          opacity: 0;
        }

        .icon.default{
          opacity: 0.2;
        }
        
         .mediatwo-hover-block:hover .icon.default {
          opacity: 0;
        }
         .mediatwo-hover-block:hover .icon.hover {
          opacity: 1;
        }

    
    .mediatwo-text {
        margin-top: 52%;
      opacity: 1;
      font-family: 'Avenirlight', sans-serif;
       font-size: clamp(12px, 5vw, 14px);
margin-left: -30%;
      color: #1111111d;
      transition: color 0.4s ease-in-out;
      text-align: center;
      max-width: 100%;
    }
    
    .mediatwo-hover-block:hover .mediatwo-text {
      opacity: 1;
            color: #111;

    }

       .hgmediatwo{
     
      font-family: 'LEMONMILKBOLD', sans-serif;
   
      }
    

 .mediatwo-hover-block:hover .hgmediatwo {
   text-decoration: underline;
      text-underline-offset: 2px ;
      text-decoration-thickness: 5px;
      text-decoration-color: #d8418f;

    }


 .mediatwo-hover-block:hover .humilde {
      opacity: 1;
            color: #d8418f;

    }

     .humilde{
      font-family: 'LexendBold', sans-serif;
      }
    













      .mediathree-hover-block {
      width: 20%;
      margin: 0 auto;
      text-align: center;
      position: absolute;
      top: 27%;
      left: 67%;
      bottom: 3%;
      cursor: pointer;
          transition: opacity 0.8s ease;
          opacity: 1;

    }

 .mediathree-wrapper {
          position: relative;
          margin-top: 1%;
          width: 47%; /* frei skalierbar */
          height: auto;
            border-radius: 8px;

        }
        
        .icon {
          width: 100%;
          height: auto;
          position: absolute;
          top:4%;
          top: 0;
          left: 0;
        }
        
        .icon.hover {
          opacity: 0;
        }

        .icon.default{
          opacity: 0.2;
        }
        
         .mediathree-hover-block:hover .icon.default {
          opacity: 0;
        }
         .mediathree-hover-block:hover .icon.hover {
          opacity: 1;
        }




    
    .mediathree-text {
      margin-top: 52%;
      opacity: 1;
      font-family: 'Avenirlight', sans-serif;
       font-size: clamp(12px, 5vw, 14px);
margin-left: -30%;
      color: #1111111d;
      transition: color 0.4s ease-in-out;
      text-align: center;
      max-width: 100%;
    }
    
    .mediathree-hover-block:hover .mediathree-text {
      opacity: 1;
            color: #111;

    }

     .hgmediathree{
     
      font-family: 'LEMONMILKBOLD', sans-serif;
   
      }
    

 .mediathree-hover-block:hover .hgmediathree {
   text-decoration: underline;
      text-underline-offset: 2px ;
      text-decoration-thickness: 5px;
      text-decoration-color: #d8418f;

    }

 .mediathree-hover-block:hover .humilde {
      opacity: 1;
            color: #d8418f;

    }

     .humilde{
      font-family: 'LexendBold', sans-serif;
      }
    


      .mediathree-hover-block:hover .hgmediaoneone {
      opacity: 1;
            color: #111111;
            background-color:#d8418f;
;

    }

     .hgmediaoneone{
      font-family: 'Avenirmedium', sans-serif;
      }
    


.mediathree-hover-block:hover .hgmediaoneosqdsa {
      opacity: 1;
            color: #111111;
            background-color:#d8418f;


    }

     .hgmediaoneosqdsa{
      font-family: 'LexendBold', sans-serif;
      }
    












      














         .leistungs-span{
    cursor: pointer;
text-decoration: underline;
transition: color 0.3 ease;  }

   .leistungs-span:hover{
 
    color: #ffffff;
  }




















.mikrocoachin-hover-block {
      width: 30%;
      margin: 0 auto;
      text-align: center;
      position: absolute;
      top: 42%;

      left: 4%;
      cursor: pointer;
    }
    
    .mikrocoachin-container {
      position: relative;
      aspect-ratio: 16 / 9;
      border-radius: 8px;
    }
    
    .preview, .mikrocoachin-video {
      position: absolute;
      left: 0%;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity 0.5s ease-in-out;
      border-radius: 10px;
    }
    
    .mikrocoachin-video {
      opacity: 0;
      z-index: 2;
    }
    
    .mikrocoachin-hover-block:hover .preview {
      opacity: 0;
    }
    
    .mikrocoachin-hover-block:hover .mikrocoachin-video {
      opacity: 1;
    }
    
    .mikrocoachin-hover-block:hover .mikrocoachin-video {
      /* Video spielt beim Hover los */
      animation: play-on-hover 0s forwards;
    }
    
  .mikrocoachin-text {
    top: -5%;
    position: absolute;
    max-width: 130%;
    right: -140%;
    text-align: left;
    font-family: 'Avenirmedium', sans-serif;
    font-size: 18px;
    color: #ffffff;
    opacity: 1;
  }
  
  .mikrocoachin-hover-block:hover .mikrocoachin-text {
    opacity: 1;
    color: #140d00;
}


.mikrocoachin-title {
 
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(30px, 5vw, 32px);
  color: #ffffff;
 
}

.mikrocoachin-hover-block:hover .mikrocoachin-title {
  
  color: #140d00;
}

    
.mikrocoachin-bold {
 
  font-family: 'LexendBold', sans-serif;
  color: #ffffff;
 
}

.mikrocoachin-hover-block:hover .mikrocoachin-bold {
  
  color: #140d00;
}



















.mealprepguide-hover-block {
      width: 30%;
      margin: 0 auto;
      text-align: center;
      position: absolute;
      top: 68%;

      left: 4%;
      cursor: pointer;
    }
    
    .mealprepguide-container {
      position: relative;
      aspect-ratio: 16 / 9;
      border-radius: 8px;
    }
    
    .preview, .mealprepguide-video {
      position: absolute;
      left: 0%;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity 0.5s ease-in-out;
      border-radius: 10px;
    }
    
    .mealprepguide-video {
      opacity: 0;
      z-index: 2;
    }
    
    .mealprepguide-hover-block:hover .preview {
      opacity: 0;
    }
    
    .mealprepguide-hover-block:hover .mealprepguide-video {
      opacity: 1;
    }
    
    .mealprepguide-hover-block:hover .mealprepguide-video {
      /* Video spielt beim Hover los */
      animation: play-on-hover 0s forwards;
    }
    
  .mealprepguide-text {
    top: -5%;
    position: absolute;
    max-width: 130%;
    right: -140%;
    text-align: left;
    font-family: 'Avenirmedium', sans-serif;
    font-size: 18px;
    color: #ffffff;
    opacity: 1;
  }
  
  .mealprepguide-hover-block:hover .mealprepguide-text {
    opacity: 1;
    color: #0b0009;
}


.mealprepguide-title {
 
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(30px, 5vw, 32px);
  color: #ffffff;
 
}

.mealprepguide-hover-block:hover .mealprepguide-title {
  
  color: #0b0009;
}

    
.mealprepguide-bold {
 
  font-family: 'LexendBold', sans-serif;
  color: #ffffff;
 
}

.mealprepguide-hover-block:hover .mealprepguide-bold {
  
  color: #0b0009;
}

















  .medic-hover-block{
    width:140%;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    left: 4%;
    top: 34%;
    cursor: pointer;
    aspect-ratio: 16/9;

  }
  
  .medic-container {
    position: relative;
    border-radius: 2px;
  }
  
  .preview, .hover-video {
    position: absolute;
    left: 0%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease-in-out;
    border-radius: 2px;
  }
  
  .hover-video {
    opacity: 0;
    z-index: 2;
  }
  
  .medic-hover-block:hover .preview {
    opacity: 0;
  }
  
  .medic-hover-block:hover .hover-video {
    opacity: 1;
  }
  
  .medic-hover-block:hover .hover-video {
    /* Video spielt beim Hover los */
    animation: play-on-hover 0s forwards;
  }
  
  .medictext {
   margin-top: 420px;
margin-left: 180px;
    font-family: 'LouisGeorgeCafe', sans-serif;
    font-size: 15px;
    color: #1111113e;
    transition: opacity 0.4s ease-in-out;
    max-width: 400px;
  }
  
  .medic-hover-block:hover .hovermedictext {
    color: #111;

  }















  .media2-hover-block {


     width: 40%;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 34%;
    cursor: pointer;

  }
  
  .media2-container {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
  }
  
  .preview, .hover2-video {
    position: absolute;
    left: 0%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease-in-out;
    border-radius: 10px;
  }
  
  .hover2-video {
    opacity: 0;
    z-index: 2;
  }
  
  .media2-hover-block:hover .preview {
    opacity: 0;
  }
  
  .media2-hover-block:hover .hover2-video {
    opacity: 1;
  }
  
  .media2-hover-block:hover .hover2-video {
    /* Video spielt beim Hover los */
    animation: play-on-hover 0s forwards;
  }
  
  .hover2-text {
     margin-top: 420px;
margin-left: 180px;


    opacity: 0;
    font-family: 'LouisGeorgeCafe', sans-serif;
    font-size: 15px;
    color: #111;
    transition: opacity 0.4s ease-in-out;
    max-width: 400px;
  }
  
  .media2-hover-block:hover .hover2-text {
    opacity: 1;
  }

 .hghover2{
   
    font-family: 'LexendBold', sans-serif;
   
  }
  
  .media2-hover-block:hover .hghover2 {
    opacity: 1;
  }

.hg2hover2{
   
    font-family: 'LexendBold', sans-serif;
   color:#e73092 ;
  }
  
  .media2-hover-block:hover .hg2hover2 {
    opacity: 1;
  }




  .media3-hover-block {
    width: 40%;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    right: 2%;

    top: 34%;
    cursor: pointer;
  }
  
  .media3-container {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
  }
  
  .preview, .hover3-video {
    position: absolute;
    left: 0%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease-in-out;
    border-radius: 10px;
  }
  
  .hover3-video {
    opacity: 0;
    z-index: 2;
  }
  
  .media3-hover-block:hover .preview {
    opacity: 0;
  }
  
  .media3-hover-block:hover .hover3-video {
    opacity: 1;
  }
  
  .media3-hover-block:hover .hover3-video {
    /* Video spielt beim Hover los */
    animation: play-on-hover 0s forwards;
  }
  
  .hover3-text {
   margin-top: 420px;
margin-left: 180px;


    opacity: 0;
    font-family: 'LouisGeorgeCafe', sans-serif;
    font-size: 15px;
    color: #111;
    transition: opacity 0.4s ease-in-out;
    max-width: 400px;
  }
  
  .media3-hover-block:hover .hover3-text {
    opacity: 1;


}

 .hghover3{
   
    font-family: 'LexendBold', sans-serif;
   
  }
  
  .media3-hover-block:hover .hghover3 {
    opacity: 1;
  }

.hg2hover3{
   
    font-family: 'LexendBold', sans-serif;
   color:#e73092 ;
  }
  
  .media3-hover-block:hover .hg2hover3 {
    opacity: 1;
  }

















.Buchbarmitquinfinity-text{
  font-family: 'LexendBold', sans-serif;
  font-size: clamp(17px, 2.4vw, 21px);
  max-width: 60%;
  color: #101010;
  position: absolute;
  bottom: 11%;
  left: 4%;
  line-height: 1;
}


.kompetenz-text1{
  font-family: 'LexendBold', sans-serif;
  font-size: clamp(17px, 2.4vw, 21px);
  max-width: 30%;
  text-align: center;
  color: #101010;
  position: absolute;
  bottom: 3%;
  right:4%;
  line-height: 1;
}


 .kompetenz-span{
  cursor: pointer;
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(27px, 3.4vw, 31px);
  color: #e76730;
}

 .kompetenz-span:hover{
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(27px, 3.4vw, 31px);
  color: #f9f9f9;
}






.red1-wrapper {
position: absolute; /* <-- Damit es global platzierbar ist */
top: 21%;            /* Frei auf der Seite */
left: 4%;           /* Nach Bedarf */
width: 27%;
cursor: pointer;
perspective: 1000px; /* 3D-Effekt */
}

.red1-wrapper-inner {
position: relative;
width: 100%;
height: auto;
}

.red1-wrapper img {
width: 100%;
height: auto;
position: absolute;
backface-visibility: hidden;
transition: transform 1s ease;
}

.red1hell {
transform: rotateY(0deg);
z-index: 2;
}

.red1dark {
transform: rotateY(180deg);
z-index: 1;
}

/* Flip-Effekt */
.red1-wrapper:hover .red1hell {
transform: rotateY(180deg);
}

.red1-wrapper:hover .red1dark {
transform: rotateY(0deg);
}













.black1-wrapper {
position: absolute; /* <-- Damit es global platzierbar ist */
top: 20%;            /* Frei auf der Seite */
right: 24%;           /* Nach Bedarf */
width: 16%;
cursor: pointer;
perspective: 1000px; /* 3D-Effekt */
}

.black1-wrapper-inner {
position: relative;
width: 100%;
height: auto;
}

.black1-wrapper img {
width: 100%;
height: auto;
position: absolute;
backface-visibility: hidden;
transition: transform 1s ease;
}

.black1hell {
transform: rotateY(0deg);
z-index: 2;
}

.black1dark {
transform: rotateY(180deg);
z-index: 1;
}

/* Flip-Effekt */
.black1-wrapper:hover .black1hell {
transform: rotateY(180deg);
}

.black1-wrapper:hover .black1dark {
transform: rotateY(0deg);
}








.black2-wrapper {
position: absolute; /* <-- Damit es global platzierbar ist */
top: 20%;            /* Frei auf der Seite */
right: 10%;           /* Nach Bedarf */
width: 12%;
cursor: pointer;
perspective: 1000px; /* 3D-Effekt */
}

.black2-wrapper-inner {
position: relative;
width: 100%;
height: auto;
}

.black2-wrapper img {
width: 100%;
height: auto;
position: absolute;
backface-visibility: hidden;
transition: transform 1s ease;
}

.black2hell {
transform: rotateY(0deg);
z-index: 2;
}

.black2dark {
transform: rotateY(180deg);
z-index: 1;
}

/* Flip-Effekt */
.black2-wrapper:hover .black2hell {
transform: rotateY(180deg);
}

.black2-wrapper:hover .black2dark {
transform: rotateY(0deg);
}







.black3-wrapper {
position: absolute; /* <-- Damit es global platzierbar ist */
top: 42%;            /* Frei auf der Seite */
right: 10%;           /* Nach Bedarf */
width: 12%;
cursor: pointer;
perspective: 1000px; /* 3D-Effekt */
}

.black3-wrapper-inner {
position: relative;
width: 100%;
height: auto;
}

.black3-wrapper img {
width: 100%;
height: auto;
position: absolute;
backface-visibility: hidden;
transition: transform 1s ease;
}

.black3hell {
transform: rotateY(0deg);
z-index: 2;
}

.black3dark {
transform: rotateY(180deg);
z-index: 1;
}

/* Flip-Effekt */
.black3-wrapper:hover .black3hell {
transform: rotateY(180deg);
}

.black3-wrapper:hover .black3dark {
transform: rotateY(0deg);
}





.black4-wrapper {
position: absolute; /* <-- Damit es global platzierbar ist */
top: 66%;            /* Frei auf der Seite */
right: 10%;           /* Nach Bedarf */
width: 12%;
cursor: pointer;
perspective: 1000px; /* 3D-Effekt */
}

.black4-wrapper-inner {
position: relative;
width: 100%;
height: auto;
}

.black4-wrapper img {
width: 100%;
height: auto;
position: absolute;
backface-visibility: hidden;
transition: transform 1s ease;
}

.black4hell {
transform: rotateY(0deg);
z-index: 2;
}

.black4dark {
transform: rotateY(180deg);
z-index: 1;
}

/* Flip-Effekt */
.black4-wrapper:hover .black4hell {
transform: rotateY(180deg);
}

.black4-wrapper:hover .black4dark {
transform: rotateY(0deg);
}







.why-overlay {
  width: 15%;
  top: 34%;
  left: 39%;

  position: absolute;
  display: block;
  border-radius: 8px;
  z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */

}






.red2-wrapper {
position: absolute; /* <-- Damit es global platzierbar ist */
bottom: 44%;            /* Frei auf der Seite */
left: 4%;           /* Nach Bedarf */
width: 27%;
cursor: pointer;
perspective: 1000px; /* 3D-Effekt */
}

.red2-wrapper-inner {
position: relative;
width: 100%;
height: auto;
}

.red2-wrapper img {
width: 100%;
height: auto;
position: absolute;
backface-visibility: hidden;
transition: transform 1s ease;
}

.red2hell {
transform: rotateY(0deg);
z-index: 2;
}

.red2dark {
transform: rotateY(180deg);
z-index: 1;
}

/* Flip-Effekt */
.red2-wrapper:hover .red2hell {
transform: rotateY(180deg);
}

.red2-wrapper:hover .red2dark {
transform: rotateY(0deg);
}










.hover-card {
  text-decoration: none;

display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: transform 0.3s ease;
position: absolute;
bottom:3%;
left: 50%;
transform: translateX(-50%);
}

/* Bildcontainer – zentriert */
.image-container {
position: relative;
width: 80px; /* ⬅️ Bildgröße kleiner! */
height: auto;
margin-top: 0 auto;
}

.image-container img {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
transition: opacity 0.3s ease;
border-radius: 8px;
}

.hover-img {
opacity: 0;
z-index: 2;
}

.hover-card:hover .default-img {
opacity: 0;
}
.hover-card:hover .hover-img {
opacity: 1;
}

/* Text unter dem Bild */
.vorottext {
font-family: 'LexendBold', sans-serif;
font-size: clamp(14px, 2vw, 20px);
color: #101010;
margin-top: 140px; /* etwa Bildhöhe + Abstand */
text-align: center;
transition: color 0.3s ease;
}

.hover-card:hover .vorottext {
color: #e76730;
}











.hover2-card {
  text-decoration: none;

display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: transform 0.3s ease;
position: absolute;
bottom:3%;
right: 30%;
}

/* Bildcontainer – zentriert */
.image2-container {
position: relative;
width: 80px; /* ⬅️ Bildgröße kleiner! */
height: auto;
margin-top: 0 auto;
}

.image2-container img {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
transition: opacity 0.3s ease;
border-radius: 8px;
}

.hover2-img {
opacity: 0;
z-index: 2;
}

.hover2-card:hover .default-img {
opacity: 0;
}
.hover2-card:hover .hover-img {
opacity: 1;
}

/* Text unter dem Bild */
.vorottext {
font-family: 'LexendBold', sans-serif;
font-size: clamp(14px, 2vw, 20px);
color: #101010;
margin-top: 140px; /* etwa Bildhöhe + Abstand */
text-align: center;
transition: color 0.3s ease;
}

.hover2-card:hover .vorottext {
color: #e76730;
}













.Buchbarmitquinfinity-overlay {
  position: absolute; /* Absolute Positionierung */
  bottom: 4%; /* Position 5% von unten */
  left: 4%; /* Position 5% von links */
  width: 10%; /* Passt sich dem Container an */
  height: auto;
  overflow: hidden; /* Alles außerhalb des Containers wird verborgen */
}

/* Standardbild (sichtbar bei Start) */
.Buchbarmitquinfinity-overlay img.default {
  width: 100%; /* Passt sich dem Container an */
  height: auto;
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.Buchbarmitquinfinity-overlay:hover img.default {
  opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.Buchbarmitquinfinity-overlay img.hover {
  width: 100%; /* Passt sich dem Container an */
  height: auto; /* Behält das Seitenverhältnis bei */
  position: absolute; /* Position innerhalb des Containers */
  top: 0; /* Position oben im Container */
  left: 0; /* Position links im Container */
  opacity: 0; /* Startet unsichtbar */
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.Buchbarmitquinfinity-overlay:hover img.hover {
  opacity: 1; /* Weißes Bild wird sichtbar */
}











.thri4{
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(27px, 3.4vw, 31px);
  color: #0f0800;
  position: absolute;
  top: 14%;
  left: 4%;
  line-height: 0.9;
  transition: opacity 0.8s ease, transform 0.8s ease;
transform: translateX(230px);
  opacity: 0;
}



.section-3neu.active .thri4 {
 
  opacity: 1;
  transform: translateX(0);

  }
  

  .thri41{
    font-family: 'LEMONMILKLIGHT', sans-serif;
    font-size: clamp(27px, 3.4vw, 31px);
    color: #0f0800;
    position: absolute;
    top: 10%;
    left: 4%;
    line-height: 0.9;
    transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateX(230px);
    opacity: 0;
  }
  
  
  
  .section-3neu.active .thri41 {
   
    opacity: 1;
    transform: translateX(0);
  
    }
  



    .section-3neu.active .highlighttwooneboldorange2 {
      transition: opacity 0.8s ease, transform 0.8s ease;
      opacity: 0;
      transform: translateY(457px);
      }

      
      



      .dreineutxt1{
        font-family: 'Avenirlight', sans-serif;
        font-size: clamp(13px, 3.4vw, 17px);
        color: #0f0800;
        position: absolute;
        top: 38%;
        left: 25%;
        line-height: 1.1;
        transition: opacity 0.8s ease, transform 0.8s ease;
        transform: translateY(230px);
        opacity: 0;
        max-width: 22%;
      }


      .hg-dreineutxt1{
        font-family: 'LexendBold', sans-serif;
        font-size: clamp(13px, 3.4vw, 17px);
      }
      
    
      
      .section-3neu.active .dreineutxt1 {
       
        opacity: 1;
        transform: translateX(0);
      
        }





        .dreineutxt2{
          font-family: 'Avenirlight', sans-serif;
          font-size: clamp(13px, 3.4vw, 17px);
          color: #0f0800;
          position: absolute;
          top: 54%;
          left: 25%;
          line-height: 1.1;
          transition: opacity 0.8s ease, transform 0.8s ease;
        transform: translateY(430px);
          opacity: 0;
          max-width: 22%;
        }
  
  
        .hg-dreineutxt2{
          font-family: 'LexendBold', sans-serif;
          font-size: clamp(13px, 3.4vw, 17px);
        }
        
      
        
        .section-3neu.active .dreineutxt2 {
         
          opacity: 1;
          transform: translateX(0);
        
          }
  





          .dreineutxt3{
            font-family: 'Avenirlight', sans-serif;
            font-size: clamp(13px, 3.4vw, 17px);
            color: #0f0800;
            position: absolute;
            top: 68%;
            left: 25%;
            line-height: 1.1;
            transition: opacity 0.8s ease, transform 0.8s ease;
          transform: translateY(630px);
            opacity: 0;
            max-width: 22%;
          }
    
    
          .hg-dreineutxt3{
            font-family: 'LexendBold', sans-serif;
            font-size: clamp(13px, 3.4vw, 17px);
          }
          
        
          
          .section-3neu.active .dreineutxt3 {
           
            opacity: 1;
            transform: translateX(0);
          
            }
  
            








            .ChatGPT-overlay {
              width:3%;
              top: 50%;
              left: 25%;
              position: absolute;
              transition: opacity 0.8s ease, transform 0.8s ease;
              transform: translateY(630px);
              opacity: 0;
            }



            .section-3neu.active    .ChatGPT-overlay  {
              opacity: 1;
              transform: translateX(0);}





              .ChatGPT2-overlay {
                width:3%;
                top: 34%;;
                left: 25%;
                position: absolute;
                transition: opacity 0.8s ease, transform 0.8s ease;
                transform: translateY(630px);
                opacity: 0;
              }
  
  
  
              .section-3neu.active    .ChatGPT2-overlay  {
                opacity: 1;
                transform: translateX(0);}




                .ChatGPT3-overlay {
                  width:3%;
                  top: 64%;;
                  left: 25%;
                  position: absolute;
                  transition: opacity 0.8s ease, transform 0.8s ease;
                  transform: translateY(630px);
                  opacity: 0;
                }
    
    
    
                .section-3neu.active    .ChatGPT3-overlay  {
                  opacity: 1;
                  transform: translateX(0);}












                  .dreineutxt4{
                    font-family: 'Avenirlight', sans-serif;
                    font-size: clamp(13px, 3.4vw, 17px);
                    color: #0f0800;
                    position: absolute;
                    top: 38%;
                    left: 67%;
                    line-height: 1.1;
                    transition: opacity 0.8s ease, transform 0.8s ease;
                  transform: translateY(630px);
                    opacity: 0;
                    max-width: 22%;
                  }
            
            
                  .hg-dreineutxt4{
                    font-family: 'LexendBold', sans-serif;
                    font-size: clamp(13px, 3.4vw, 17px);
                  }
                  
                
                  
                  .section-3neu.active .dreineutxt4 {
                   
                    opacity: 1;
                    transform: translateX(0);
                  
                    }


                    .ChatGPT4-overlay {
                      width:3%;
                      top: 48%;
                    left: 67%;
                      position: absolute;
                      transition: opacity 0.8s ease, transform 0.8s ease;
                      transform: translateY(630px);
                      opacity: 0;
                    }
        
        
        
                    .section-3neu.active    .ChatGPT4-overlay  {
                      opacity: 1;
                      transform: translateX(0);}
        




                      .dreineutxt5{
                        font-family: 'Avenirlight', sans-serif;
                        font-size: clamp(13px, 3.4vw, 17px);
                        color: #0f0800;
                        position: absolute;
                        top: 52%;
                        left: 67%;
                        line-height: 1.1;
                        transition: opacity 0.8s ease, transform 0.8s ease;
                      transform: translateY(630px);
                        opacity: 0;
                        max-width: 22%;
                      }
                
                
                      .hg-dreineutxt5{
                        font-family: 'LexendBold', sans-serif;
                        font-size: clamp(13px, 3.4vw, 17px);
                      }
                      
                    
                      
                      .section-3neu.active .dreineutxt5 {
                       
                        opacity: 1;
                        transform: translateX(0);
                      
                        }
    
    
                        .ChatGPT5-overlay {
                          width:3%;
                          top: 34%;
                          left: 67%;
                          position: absolute;
                          transition: opacity 0.8s ease, transform 0.8s ease;
                          transform: translateY(630px);
                          opacity: 0;
                        }
            
            
            
                        .section-3neu.active    .ChatGPT5-overlay  {
                          opacity: 1;
                          transform: translateX(0);}




                          .tabel-overlay {
                            width:28%;
                            top: 25%;;
                            left:44%;
                            position: absolute;
                            transition: opacity 0.8s ease, transform 0.8s ease;
                            transform: translateY(630px);
                            opacity: 0;
                          }
              
              
              
                          .section-3neu.active    .tabel-overlay  {
                            opacity: 1;
                            transform: translateX(0);}
  
  






                            .moderntablet-overlay {
                              width:22%;
                              top: 32%;;
                              left: 4%;
                              position: absolute;
                              transition: opacity 0.8s ease, transform 0.8s ease;
                              transform: translateY(630px);
                              opacity: 0;
                            }
                
                
                
                            .section-3neu.active    .moderntablet-overlay  {
                              opacity: 1;
                              transform: translateX(0);}
  
                              





 .thri2{
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(66px, 2.6vw, 28px);
  color: #000000;
  position: absolute;
  top: 4%;
  left: 4%;
  line-height: 1.;
  transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateY(-130px);
    opacity: 0;
    
  }
  


  .section-4neu.active .thri2 {
    transform: translateX(0);
    color: #e73092;
    opacity: 1;
    }
          

.hgthri2 {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(52px, 2.6vw, 62px);
  color: #080808;
  position: absolute;
  top:11%;
  left: 4%;
  line-height: 0.9;
  transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateX(230px);
    opacity: 0;
    
}

.section-4neu.active .hgthri2 {
  transform: translateX(0);
  opacity: 1;
  }





  .hgthri3 {
    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(52px, 2.6vw, 62px);
    color: #080808;
    position: absolute;
    top:11%;
    left:12%;
    line-height: 0.9;
    transition: opacity 0.8s ease, transform 0.8s ease;
    transform: translateY(230px);
      opacity: 0;
      
  }
  
  
  .section-4neu.active .hgthri3 {
    transform: translateX(0);
    opacity: 1;
    }
  

    



    .hgthri4 {
      font-family: 'LEMONMILKBOLD', sans-serif;
      font-size: clamp(52px, 2.6vw, 62px);
      color: #080808;
      position: absolute;
      top:11%;
      left:18%;
      line-height: 0.9;
      transition: opacity 0.8s ease, transform 0.8s ease;
      transform: translateX(230px);
        opacity: 0;
        
    }
    
    
    .section-4neu.active .hgthri4 {
      transform: translateX(0);
      opacity: 1;
      }
    

      



.nrvtxt{
  font-family: 'reaniebeanie', sans-serif;
  font-size: clamp(44px, 3.4vw, 49px);
  max-width: 60%;
  color: #080808;
  position: absolute;
  top: 25%;
  left: 27%;
  line-height: 0.9;
  z-index: 5;
}

.hgnrvtxt {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(17px, 1.4vw, 21px);
  color: #080808;

}



.nrvtxt2{
  font-family: 'reaniebeanie', sans-serif;
  font-size: clamp(44px, 3.4vw, 49px);
  max-width: 60%;
  color: #080808;
  position: absolute;
  bottom: 4%;
  left: 41%;
  line-height: 0.9;
}

.hgnrvtxt2 {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(17px, 1.4vw, 21px);
  color: #080808;

}




.nrvtxt3{
  font-family: 'reaniebeanie', sans-serif;
  font-size: clamp(44px, 3.4vw, 49px);
  max-width: 60%;
  color: #080808;
  position: absolute;
  bottom: 1%;
  right: 11%;
  line-height: 0.9;
  z-index: 5;
}

.hgnrvtxt3 {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(17px, 1.4vw, 21px);
  color: #080808;

}




.eity{
  font-family: 'LEMONMILKLIGHT', sans-serif;
  font-size: clamp(23px, 3.4vw, 27px);
  max-width: 60%;
  color: #3cb716;
  position: absolute;
  top: 4%;
  left: 4%;
  line-height: 1;
}

.hgeity {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(37px, 3.4vw, 41px);
  color: #f4f4f4;
}


.hgeity2 {

  color: #b76f16;
}

 .hgeity3 {
 
  color: #b7167f;
}






.hover-block {
  position: absolute;
  left: 17%;
  bottom: 14%;
  width: 17%;
  cursor: pointer;
  transition: transform 0.3s ease;

}

.media-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  top: 0%;
  width: 50%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
}

.default-media, .hover-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
  border-radius: 8px;
}

.hover-media {
  opacity: 0;
  z-index: 2;
}

.hover-block:hover .default-media {
  opacity: 0;
}

.hover-block:hover .hover-media {
  opacity: 1;
}

.hover-block:hover video {
  fallback: true;
}

.hover-text {
  margin-top: 57%;
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(12px, 3vw, 14px);
  color: #0e0e0e;
  text-align: center;
 
  transition: color 0.4s ease;
  line-height: 1.2;
}

.highlight521

{
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(12px, 3vw, 14px);
  color: #0e0e0e;
  line-height: 0.8;
  
}


.hover-block:hover .hover-text   {
  color: #0e0e0e;

}

  
.hover-block:hover .highlight521   {
  color: #0e0e0e;

}









.hover-block2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  bottom: 14%;
  width: 17%;
  cursor: pointer;
  transition: transform 0.3s ease;

}

.media2-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  top: 0%;
  width: 50%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
}

.default-media, .hover-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
  border-radius: 8px;
}

.hover-media {
  opacity: 0;
  z-index: 2;
}

.hover-block2:hover .default-media {
  opacity: 0;
}

.hover-block2:hover .hover-media {
  opacity: 1;
}

.hover-block2:hover video {
  fallback: true;
}

.hover-text2 {
  margin-top: 57%;
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(12px, 3vw, 14px);
  color: #0e0e0e;
  text-align: center;
 
  transition: color 0.4s ease;
  line-height: 1.2;
}

.highlight521

{
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(12px, 3vw, 14px);
  color: #0e0e0e;
  line-height: 0.8;
  
}


.hover-block:hover .hover-text   {
  color: #0e0e0e;

}

  
.hover-block2:hover .highlight521   {
  color: #0e0e0e;

}











.hover-block3 {
  position: absolute;
  right: 17%;

  bottom: 14%;
  width: 17%;
  cursor: pointer;
  transition: transform 0.3s ease;

}

.media3-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  top: 0%;
  width: 50%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
}

.default-media, .hover-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
  border-radius: 8px;
}

.hover-media {
  opacity: 0;
  z-index: 2;
}

.hover-block2:hover .default-media {
  opacity: 0;
}

.hover-block3:hover .hover-media {
  opacity: 1;
}

.hover-block3:hover video {
  fallback: true;
}

.hover-text3 {
  margin-top: 57%;
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(12px, 3vw, 14px);
  color: #0e0e0e;
  text-align: center;
 
  transition: color 0.4s ease;
  line-height: 1.2;
}

.highlight521

{
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(12px, 3vw, 14px);
  color: #0e0e0e;
  line-height: 0.8;
  
}


.hover-block3:hover .hover-text   {
  color: #0e0e0e;

}

  
.hover-block3:hover .highlight521   {
  color: #0e0e0e;

}



.seventex {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
  max-width: 50%;
  color: #0e0e0e;
  position: absolute;
  top:72%;
  left: 4%;
  line-height: 1.2;
}







.bildv-overlay {
  width: 37%;         /* oder z. B. 300px für feste Breite */
  top: 20%;
  right: 0%;
  position: absolute;
  display: block;      /* Verhindert Lücken unter dem Bild */
}







.sevenone{
  text-align: left;
left: 4%;
  top: 12%;
   font-size: clamp(16px, 2.6vw, 18px);
   font-family: 'Avenirlight', sans-serif;
   color: #0e0e0e;
   max-width: 50%;
   position: absolute;
}

.hgsevenone {
  font-family: 'LexendBold', sans-serif;

}






.titleseven2{
  font-family: 'LEMONMILKLIGHT', sans-serif;
  font-size: clamp(27px, 2.4vw, 31px);
  max-width: 60%;
  color: #101010;
  position: absolute;
  top: 57%;
  left: 4%;
  line-height: 1;
}

.hgts2 {
  font-family: 'LEMONMILKBOLD', sans-serif;

}








.section-thies {
  background-color: #CDD1DC;
  padding: 380px 0; /* Oben und unten Abstand */
  box-shadow: 20px -20px -20px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
  box-shadow: 20px 20px 20px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */


  position: relative;
z-index: 4;
overflow: hidden;
}





.titlethies{
  font-family: 'LEMONMILKLIGHT', sans-serif;
  font-size: clamp(14px, 2.3vw, 19px);
  color: #111111;
  position: absolute;
  top: 4%;
  left: 4%;
  line-height: 1;
  max-width: 40%;
}

.hgtm {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(34px, 4vw, 36px);

}



  .titlethies2{
  font-family: 'LEMONMILKLIGHT', sans-serif;
  font-size: clamp(23px, 2.4vw, 27px);
  color: #111111;
  position: absolute;
  top: 4%;
  right: 14%;
  line-height: 1;
  max-width: 30%;
}

.hgtm2 {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(34px, 4vw, 36px);

}






.title{
  font-family: 'LEMONMILKLIGHT', sans-serif;
  font-size: clamp(27px, 2.4vw, 31px);
  color: #151515;
  position: absolute;
  text-align: right;
  top: 17%;
  left: 17%;
  line-height: 1;
  max-width: 22%;
}

.hgtitle {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(34px, 4vw, 36px);

}












.title2{
  font-family: 'LEMONMILKLIGHT', sans-serif;
  font-size: clamp(27px, 2.4vw, 31px);
  color: #151515;
  position: absolute;
  text-align: right;
bottom: 7%;    left: 37%;
  line-height: 1;
  max-width: 22%;
}

.hgtitle2 {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(34px, 4vw, 36px);

}




.title3o{
font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(104px, 4vw, 126px);
  color: #e76730;
  position: absolute;
top: 21%;    left: 14%;
  line-height: 1;
  max-width: 30%;
}



.title3{
font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(34px, 4vw, 36px);
  color: white;
  position: absolute;
top: 47%;    left: 14%;
  line-height: 1;
  max-width: 30%;
}




.section-fullbild{
  background-color: #B3B5B7;
  padding: 300px 0; /* Oben und unten Abstand */
  position: relative;
  z-index: 1; /* Damit der Schatten über dem oberen Bereich liegt */
  overflow: hidden;
}


.meet-overlay {
  width: 100%;
  top:-8%;
  left: 0%;
  position: absolute;
  overflow: hidden;
  z-index: 0;
}








.section-invite{
  background-color: #CDD1DC;
  padding: 400px 0; /* Oben und unten Abstand */
  position: relative;
  z-index: 3; /* Damit der Schatten über dem oberen Bereich liegt */
  box-shadow: 0 -40px -50px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */

}


.invite-button {
display: inline-block;
padding: 14px 160px;
position: absolute;
top: 19%;
left: 4%;
font-size: clamp(12px, 1.7vw, 17px);
font-family: 'LexendBold', sans-serif;
font-weight: bold;
color: #171717; /* Schriftfarbe = Rahmenfarbe */
background-color: transparent;
border: 6px solid #171717;
border-radius: 32px;
text-decoration: none;
transition: all 0.3s ease;
}

.invite-button:hover {
background-color: #e73092;
color: white;
}





.fivesourct-text {
  font-family: 'LexendBold', sans-serif;
  font-size: clamp(13px, 3vw, 17px);
  max-width: 30%;
  color: #e73092;
  position: absolute;
  top: 24%;
  right: 14%;
  line-height: 1.0;
}

.hgfivesourct{
  font-family: 'Avenirmedium', sans-serif;
  color: #1a1a1a;

}



.fivesourct2-text {
  font-family: 'LexendBold', sans-serif;
  font-size: clamp(13px, 3vw, 17px);
  max-width: 30%;
  color: #e73092;
  position: absolute;
  top: 43%;
  right: 14%;
  line-height: 1.0;
}

.hgfivesourct2{
  font-family: 'Avenirmedium', sans-serif;
  color: #1a1a1a;

}


  .fivesourct3-text {
  font-family: 'LexendBold', sans-serif;
  font-size: clamp(13px, 3vw, 17px);
  max-width: 30%;
  color: #e73092;
  position: absolute;
  top: 61%;
  right: 14%;
  line-height: 1.0;
}

.hgfivesourct3{
  font-family: 'Avenirmedium', sans-serif;
  color: #1a1a1a;

}










.thiestext {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
  max-width: 30%;
  color: #0e0e0e;
  position: absolute;
  top: 27%;
  left: 4%;
  line-height: 1.4;

}

.hgthiestext {
  color: #000000;
  font-family: 'LexendBold', sans-serif;
  font-size: clamp(21px, 2.3vw, 23px);


}

.hgthiestextb {
  font-weight: bold;
  font-family: 'LexendBold', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
  line-height: 1;

}




.fivesourceone-text {
  font-family: 'LexendBold', sans-serif;
  font-size: clamp(13px, 3vw, 17px);
  max-width: 50%;
  color: #0c0c0c;
  position: absolute;
  top: 41%;
  left: 4%;
  line-height: 1.0;
}

.fivesourceoneone-text {
  font-family: 'Avenirmedium', sans-serif;
  color: #e8662f;

}


.fivesourceone-bold {
  font-family: 'LexendBold', sans-serif;
  font-size: clamp(13px, 3vw, 17px);
  max-width: 50%;
  color: #0c0c0c;
  position: absolute;
  top: 70%;
  left: 4%;
  line-height: 1.0;
}








.imtxt {
  font-family: 'Louisgeorgecafebold', sans-serif;
  text-align: right;
  font-size: clamp(18px, 2.4vw, 18px);
  max-width: 50%;
  color: #0e0e0e;
  position: absolute;
  bottom: 7%;
  right: 11%;
}

.hgimtxt {
  color: #000000;
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(21px, 2.3vw, 23px);
  color: #ededed;


}

.imtxtb {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
  line-height: 0.6;

}











.imtxt2 {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
  max-width: 50%;
  color: #e76730;
  text-align: center;
  position: absolute;
  top: 41%;
  right: 26%;
  line-height: 1;
  text-align: center;

}

.hgimtxt2 {
  color: #000000;
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(21px, 2.3vw, 23px);
  color: #ededed;
  top: 44%;
  right: 25%;
  position: absolute;
  text-align: center;

}

.imtxtb2 {
  font-family: 'Avenirmedium', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
  color: #e76730;
  text-decoration: none;
}


.imtxtb2:hover {
  font-family: 'Avenirheavy', sans-serif;
  transition: scale 1s;
}












.Thies-overlay {
  width: 27%;         /* oder z. B. 300px für feste Breite */
  top: 7%;
  right: 7%;
  position: absolute;
  display: block;      /* Verhindert Lücken unter dem Bild */
}




.tiitn{
  font-family: 'LEMONMILKLIGHT', sans-serif;
  font-size: clamp(27px, 2.4vw, 31px);
  color: #0f0f0f;
  position: absolute;
  top: 4%;
  left: 4%;
  line-height: 1;
}

.hgtiitn {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(34px, 4vw, 36px);

}


.beautyni {
  font-family: 'Beauty', sans-serif;
  font-size: clamp(84px, 7vw, 96px);
  line-height: 0.6;

}











.Vorteile-overlay {
width: 70%;
top:14%;
left: 4%;
position: absolute;
display: block;
}




.g1-overlay {
position: absolute;
top: 20%;
left: 6%;
width: 20%;
max-width: 420px;
height: auto;
overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.g1-overlay img.default {
width: 100%; /* Passt sich dem Container an */
height: auto;
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.g1-overlay:hover img.default {
opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.g1-overlay img.hover {
width: 100%; /* Passt sich dem Container an */
height: auto; /* Behält das Seitenverhältnis bei */
position: absolute; /* Position innerhalb des Containers */
top: 0; /* Position oben im Container */
left: 0; /* Position links im Container */
opacity: 0; /* Startet unsichtbar */
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.g1-overlay:hover img.hover {
opacity: 1; /* Weißes Bild wird sichtbar */
}


.g1-1-overlay {
position: absolute;
top: 34%;
left: 6%;
width: 20%;
max-width: 420px;
height: auto;
overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.g1-1-overlay img.default {
width: 100%; /* Passt sich dem Container an */
height: auto;
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.g1-1-overlay:hover img.default {
opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.g1-1-overlay img.hover {
width: 100%; /* Passt sich dem Container an */
height: auto; /* Behält das Seitenverhältnis bei */
position: absolute; /* Position innerhalb des Containers */
top: 0; /* Position oben im Container */
left: 0; /* Position links im Container */
opacity: 0; /* Startet unsichtbar */
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.g1-1-overlay:hover img.hover {
opacity: 1; /* Weißes Bild wird sichtbar */
}






.g3-1-overlay {
position: absolute;
top: 42%;
left: 6%;
width: 20%;
max-width: 420px;
height: auto;
overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.g3-1-overlay img.default {
width: 100%; /* Passt sich dem Container an */
height: auto;
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.g3-1-overlay:hover img.default {
opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.g3-1-overlay img.hover {
width: 100%; /* Passt sich dem Container an */
height: auto; /* Behält das Seitenverhältnis bei */
position: absolute; /* Position innerhalb des Containers */
top: 0; /* Position oben im Container */
left: 0; /* Position links im Container */
opacity: 0; /* Startet unsichtbar */
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.g3-1-overlay:hover img.hover {
opacity: 1; /* Weißes Bild wird sichtbar */
}



.r1-1-overlay {
position: absolute;
top: 20%;
left: 29%;
width: 20%;
max-width: 420px;
height: auto;
overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.r1-1-overlay img.default {
width: 100%; /* Passt sich dem Container an */
height: auto;
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.r1-1-overlay:hover img.default {
opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.r1-1-overlay img.hover {
width: 100%; /* Passt sich dem Container an */
height: auto; /* Behält das Seitenverhältnis bei */
position: absolute; /* Position innerhalb des Containers */
top: 0; /* Position oben im Container */
left: 0; /* Position links im Container */
opacity: 0; /* Startet unsichtbar */
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.r1-1-overlay:hover img.hover {
opacity: 1; /* Weißes Bild wird sichtbar */
}






.r2-1-overlay {
position: absolute;
top: 34%;
left: 29%;
width: 20%;
max-width: 420px;
height: auto;
overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.r2-1-overlay img.default {
width: 100%; /* Passt sich dem Container an */
height: auto;
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.r2-1-overlay:hover img.default {
opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.r2-1-overlay img.hover {
width: 100%; /* Passt sich dem Container an */
height: auto; /* Behält das Seitenverhältnis bei */
position: absolute; /* Position innerhalb des Containers */
top: 0; /* Position oben im Container */
left: 0; /* Position links im Container */
opacity: 0; /* Startet unsichtbar */
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.r2-1-overlay:hover img.hover {
opacity: 1; /* Weißes Bild wird sichtbar */
}




.r3-1-overlay {
position: absolute;
top: 40%;
left: 29%;
width: 20%;
max-width: 420px;
height: auto;
overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.r3-1-overlay img.default {
width: 100%; /* Passt sich dem Container an */
height: auto;
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.r3-1-overlay:hover img.default {
opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.r3-1-overlay img.hover {
width: 100%; /* Passt sich dem Container an */
height: auto; /* Behält das Seitenverhältnis bei */
position: absolute; /* Position innerhalb des Containers */
top: 0; /* Position oben im Container */
left: 0; /* Position links im Container */
opacity: 0; /* Startet unsichtbar */
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.r3-1-overlay:hover img.hover {
opacity: 1; /* Weißes Bild wird sichtbar */
}






.r4-1-overlay {
position: absolute;
top: 46%;
left: 29%;
width: 20%;
max-width: 420px;
height: auto;
overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.r4-1-overlay img.default {
width: 100%; /* Passt sich dem Container an */
height: auto;
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.r4-1-overlay:hover img.default {
opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.r4-1-overlay img.hover {
width: 100%; /* Passt sich dem Container an */
height: auto; /* Behält das Seitenverhältnis bei */
position: absolute; /* Position innerhalb des Containers */
top: 0; /* Position oben im Container */
left: 0; /* Position links im Container */
opacity: 0; /* Startet unsichtbar */
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.r4-1-overlay:hover img.hover {
opacity: 1; /* Weißes Bild wird sichtbar */
}







.o1-1-overlay {
position: absolute;
top: 20%;
left: 52%;
width: 20%;
max-width: 420px;
height: auto;
overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.o1-1-overlay img.default {
width: 100%; /* Passt sich dem Container an */
height: auto;
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.o1-1-overlay:hover img.default {
opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.o1-1-overlay img.hover {
width: 100%; /* Passt sich dem Container an */
height: auto; /* Behält das Seitenverhältnis bei */
position: absolute; /* Position innerhalb des Containers */
top: 0; /* Position oben im Container */
left: 0; /* Position links im Container */
opacity: 0; /* Startet unsichtbar */
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.o1-1-overlay:hover img.hover {
opacity: 1; /* Weißes Bild wird sichtbar */
}






.o2-1-overlay {
position: absolute;
top: 31%;
left: 52%;
width: 20%;
max-width: 420px;
height: auto;
overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.o2-1-overlay img.default {
width: 100%; /* Passt sich dem Container an */
height: auto;
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.o2-1-overlay:hover img.default {
opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.o2-1-overlay img.hover {
width: 100%; /* Passt sich dem Container an */
height: auto; /* Behält das Seitenverhältnis bei */
position: absolute; /* Position innerhalb des Containers */
top: 0; /* Position oben im Container */
left: 0; /* Position links im Container */
opacity: 0; /* Startet unsichtbar */
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.o2-1-overlay:hover img.hover {
opacity: 1; /* Weißes Bild wird sichtbar */
}






.o3-1-overlay {
position: absolute;
top: 37%;
left: 52%;
width: 20%;
max-width: 420px;
height: auto;
overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.o3-1-overlay img.default {
width: 100%; /* Passt sich dem Container an */
height: auto;
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.o3-1-overlay:hover img.default {
opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.o3-1-overlay img.hover {
width: 100%; /* Passt sich dem Container an */
height: auto; /* Behält das Seitenverhältnis bei */
position: absolute; /* Position innerhalb des Containers */
top: 0; /* Position oben im Container */
left: 0; /* Position links im Container */
opacity: 0; /* Startet unsichtbar */
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.o3-1-overlay:hover img.hover {
opacity: 1; /* Weißes Bild wird sichtbar */
}







.o4-1-overlay {
position: absolute;
top: 43%;
left: 52%;
width: 20%;
max-width: 420px;
height: auto;
overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.o4-1-overlay img.default {
width: 100%; /* Passt sich dem Container an */
height: auto;
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.o4-1-overlay:hover img.default {
opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.o4-1-overlay img.hover {
width: 100%; /* Passt sich dem Container an */
height: auto; /* Behält das Seitenverhältnis bei */
position: absolute; /* Position innerhalb des Containers */
top: 0; /* Position oben im Container */
left: 0; /* Position links im Container */
opacity: 0; /* Startet unsichtbar */
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.o4-1-overlay:hover img.hover {
opacity: 1; /* Weißes Bild wird sichtbar */
}


.o5-1-overlay {
position: absolute;
top: 49%;
left: 52%;
width: 20%;
max-width: 420px;
height: auto;
overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.o5-1-overlay img.default {
width: 100%; /* Passt sich dem Container an */
height: auto;
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.o5-1-overlay:hover img.default {
opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.o5-1-overlay img.hover {
width: 100%; /* Passt sich dem Container an */
height: auto; /* Behält das Seitenverhältnis bei */
position: absolute; /* Position innerhalb des Containers */
top: 0; /* Position oben im Container */
left: 0; /* Position links im Container */
opacity: 0; /* Startet unsichtbar */
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.o5-1-overlay:hover img.hover {
opacity: 1; /* Weißes Bild wird sichtbar */
}



.inbetweentitle-text {
font-family: 'SignatureDecember', sans-serif;
font-size: clamp(40px, 5vw, 48px);
color: #f8f8f8;
position: absolute;
top: 5%;
left: 4%;
line-height: 0.9;
}

.inbetweentitlescnd-text {
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(18px, 1.8vw, 23px);

max-width: 700px;
color: #f8f8f8;
position: absolute;
top: 11%;
left: 4%;
line-height: 0.9;
}

.inbetweenone-text {
font-family: 'Avenirlight', sans-serif;
font-size: clamp(18px, 2.4vw, 18px);
max-width: 1000px;
color: #f8f8f8;
position: absolute;
top: 17%;
left: 4%;
line-height: 1.4;
z-index: 0;

}

.highlightinbetweenone {
color: #f8f8f8;
font-weight: bold;
font-family: 'Avenirmedium', sans-serif;
line-height: 1.0;
z-index: 0;
}



.inbetweenquin-text {
position: absolute;
bottom: 37%;
left: 4%;
font-family: 'Avenirmedium', sans-serif;
font-size: clamp(18px, 2.4vw, 18px);
max-width: 1000px;
color: #ffffff;
line-height: 1.4;
max-width: 800px;
}

.gradient-word {
display: inline-block;
font-size: clamp(18px, 2.4vw, 18px);
background: linear-gradient(90deg, #280914, #771836, #dc4806, #f8cc47, #387307);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}

.gradient-word .part1 {
font-family: 'LEMONMILKBOLD', sans-serif;
font-weight: bold;
}

.gradient-word .part2 {
font-family: 'LexendBold', sans-serif;
font-weight: bold;
}

.highlightinbetweenquib {
color: #f8f8f8;
font-weight: bold;
font-family: 'Avenirhheavy', sans-serif;
line-height: 1.0;
z-index: 0;
}





.sixonesubtext-text {
position: absolute;
bottom: 30%;
left: 22%;
font-size: clamp(16px, 1.4vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #ffffff;
line-height: 1.0;
max-width: 200px;
}

/* Stil für „Quinfinity“ */
.highlight2 {
color: #e11167;
font-weight: bold;
font-family: 'Avenirhheavy', sans-serif;
}




.sixtwosubtext-text {
position: absolute;
bottom: 30%;
left: 4%;
font-size: clamp(16px, 1.4vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #ffffff;
line-height: 1.0;
max-width: 200px;
}

/* Stil für „Quinfinity“ */
.highlight3 {
color: #e11167;
font-weight: bold;
font-family: 'Avenirhheavy', sans-serif;
}




.sixthreesubtext-text {
position: absolute;
bottom: 30%;
left: 40%;
font-size: clamp(16px, 1.4vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #ffffff;
line-height: 1.0;
max-width: 200px;
}

.gradient-word2 {
display: inline-block;
font-size: clamp(16px, 1.4vw, 18px);
font-family: 'Avenirheavy', sans-serif;
background: linear-gradient(90deg, #280914, #771836, #dc4806, #f8cc47, #387307);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}

.left-overlay {
width: 7%;         /* oder z. B. 300px für feste Breite */
max-width: 420px;    /* Bild wird nie größer als 600px */
bottom: 24%;
left: 4%;
position: absolute;
display: block;      /* Verhindert Lücken unter dem Bild */
}


.middle-overlay {
width: 7%;         /* oder z. B. 300px für feste Breite */
max-width: 420px;    /* Bild wird nie größer als 600px */
bottom: 24%;
left: 22%;
position: absolute;
display: block;      /* Verhindert Lücken unter dem Bild */
}

.right-overlay {
width: 9%;         /* oder z. B. 300px für feste Breite */
max-width: 420px;    /* Bild wird nie größer als 600px */
bottom: 24%;
left: 40%;
position: absolute;
display: block;      /* Verhindert Lücken unter dem Bild */
}

.quino-overlay {
width: 80%;         /* oder z. B. 300px für feste Breite */
bottom: 12%;
left: 3%;
position: absolute;
display: block;      /* Verhindert Lücken unter dem Bild */
}













.vorteile-button {
display: inline-block;
position: absolute;
bottom: 8%;
left: 50%;
transform: translateX(-50%);
padding: 10px 58px; /* ↑↓ ←→ Abstand */
font-size: clamp(14px, 1.4vw, 18px); /* Skalierbare Größe */
font-family: 'Louisgeorgecafebold', sans-serif;
color: #fff;
background-color: #e73092;
border: none;
border-radius: 22px;
text-decoration: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
z-index: 6;
}

.vorteile-button:hover {
background-color: rgb(170, 0, 71);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
font-family: 'Louisgeorgecafebold', sans-serif;
color: #fff;

}







.sixtitle-text {
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(34px, 3.4vw, 38px);
max-width: 700px;
color: #f8f8f8;
position: absolute;
top: 2%;
left: 4%;
line-height: 0.9;
}


.sixone-text {
font-family: 'Avenirlight', sans-serif;
font-size: clamp(18px, 2.4vw, 18px);
max-width: 920px;
color: #f8f8f8;
position: absolute;
top: 13%;
left: 4%;
line-height: 1.4;
z-index: 0;

}

.highlightsixone {
color: #f8f8f8;
font-weight: bold;
font-family: 'Avenirmedium', sans-serif;
line-height: 1.0;
z-index: 0;

}


























/* Mobilfreundlich */
@media (max-width: 768px) {
  .bg-section h2 {
    font-size: 28px;
  }

  .bg-section p {
    font-size: 16px;
  }

  .btn {
    font-size: 16px;
  }
}















/* HOME */ 
.wordlinkhome {
  font-family: 'LEMON MILK BOLD', sans-serif; /* Schriftart anwenden */
  font-size: 100px; /* Schriftgröße */
  color: #ffffff; /* Standardfarbe */
  text-decoration: none; /* Keine Unterstreichung im Normalzustand */
  position: absolute; /* Absolut positioniert */
  top: 40px; /* Platzierung des Textes nach oben - anpassbar */
  left: 2%; /* Horizontal zentrieren */
  transition: color 0.3s ease-in-out; /* Sanfter Übergang für Farbe */
}

/* Hover-Effekt */
.wordlinkhome:hover {
  color: #1a000a; /* Farbänderung beim Hover */
}




  /* Erste Klasse */
.wordlinkfirmentop, .wordlink1-1top, .wordlinküberNULNEBLAtop, .wordlinkknowhowtop, .wordlinkkontakttop {
    font-family: 'Avenirmedium', sans-serif;
  font-size: clamp(17px, 3vw, 19px);
    color: #ffffff;
    top: 72px; /* Position oben anpassen */
    text-decoration: none;
    position: absolute;
    z-index: 2;
  }


  /* Hover-Effekt */
  .wordlinkfirmentop:hover, .wordlink1-1top:hover, .wordlinküberNULNEBLAtop:hover, .wordlinkknowhowtop:hover, .wordlinkkontakttop:hover  {
    color: #e76730;
          font-family: 'Avenirheavy', sans-serif;

  }
  
  /* Dynamische Unterstreichung */
  .wordlinkfirmentop:after, .wordlink1-1top:after, .wordlinküberNULNEBLAtop:after, .wordlinkknowhowtop:after, .wordlinkkontakttop:after {
    content: '';
    position: relative;
    left: 0;
    bottom: -12px;
    width: 0%;
    height: 8px;
    background-color: #ffffff;
    transition: width 0.3s ease-in-out;
  }
  
  /* Hover-Effekt für die Unterstreichung */
  .wordlinkfirmentop:hover:after, .wordlink1-1top:hover:after, .wordlinküberNULNEBLAtop:hover:after, .wordlinkknowhowtop:hover:after, .wordlinkkontakttop:hover:after  {
    width: 100%;
  }

  
.wordlinkfirmentop {
  
    left: 40%; /* Position von links anpassen */
    transform: translateX(-50%);
    transition: color 0.3s ease-in-out;
  }
 
  .wordlink1-1top {
  
    left: 50%; /* Position von links anpassen */
    transform: translateX(-50%);
    transition: color 0.3s ease-in-out;
  }
 
  .wordlinküberNULNEBLAtop {
  
    left: 60%; /* Position von links anpassen */
    transform: translateX(-50%);
    transition: color 0.3s ease-in-out;
  }
 
  .wordlinkknowhowtop {
  
    left: 70%; /* Position von links anpassen */
    transform: translateX(-50%);
    transition: color 0.3s ease-in-out;
  }
 
  .wordlinkkontakttop {
  
    left: 78%; /* Position von links anpassen */
    transform: translateX(-50%);
    transition: color 0.3s ease-in-out;
  }








  .quinfinity-booking-wrapper {
  display: flex;
  align-items: center;
  gap: 10px; /* Abstand zwischen Text und Bild */
  position: absolute;
  top: 53.5px; /* Position oben anpassen */
  left: 82%;
}

.booking-label {
    font-family: 'Avenirmedium', sans-serif;
  font-size: clamp(17px, 3vw, 19px);
  color: #ffffff; /* falls du weißen Text willst */
}

.image-hover-link {
  position: relative;
  display: inline-block;
  width: 140px; /* oder anpassen */
  height: 60px;
}

.img-default,
.img-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s ease-in-out;
}

.img-default {
  opacity: 1;
  z-index: 1;
}

.img-hover {
  opacity: 0;
  z-index: 2;
}

.image-hover-link:hover .img-hover {
  opacity: 1;
}

.image-hover-link:hover .img-default {
  opacity: 0;
}
























  .section-9 {
    background-color: #e76730;
    padding: 770px 0; /* Oben und unten Abstand */
    position: relative;
z-index: 1;
overflow: hidden;
  }


  .section-10 {
    background-color: #CDD1DC;
    padding: 340px 0; /* Oben und unten Abstand */
    position: relative;
z-index: 1;
overflow: hidden;
  }



  .section-10:hover {
    background-color: #9d105b;
    transition: opacity 0.6s ease-in-out; /* Sanfter Übergang für Opazität */
  }



  .section-10:hover .title3{
  color: #1a1a1a;
  }


  .section-10:hover .hgtitle3{
    color: #1a1a1a;
    }





    .section-10 .text3 {
color: #1a1a1a;
   font-family: 'LexendBold', sans-serif;
  font-size: clamp(14px, 3vw, 17px);
  position: absolute;
  text-align: left;
top: 44%;    left: 22%;
  line-height: 1.2;
  opacity: 0;
max-width: 40%;
}

/* Hover-Zustand */
.section-10:hover .text3{
opacity: 1;

}



   .section-10 .hgtext3 {

   font-family: 'LexendBold', sans-serif;
  
  opacity: 0;

}

/* Hover-Zustand */
.section-10:hover .hgtext3{
opacity: 1;

}


   .section-10 .hgtextb {

   font-family: 'Arkipelago', sans-serif;
  color: #e73092;
      font-size: clamp(34px, 4vw, 47px);

line-height: 0.6;
  opacity: 0;

}

/* Hover-Zustand */
.section-10:hover .hgtextb{
opacity: 1;

}















  






.section-10:hover  .einszueins-button {
display: inline-block;
padding: 14px 160px;
position: absolute;
bottom: 17%;
left: 13%;
font-size: clamp(12px, 1.7vw, 17px);
font-family: 'LexendBold', sans-serif;
font-weight: bold;
color: #efefef; /* Schriftfarbe = Rahmenfarbe */
background-color: transparent;
border: 4px solid #efefef;
border-radius: 12px;
text-decoration: none;
transition: all 0.3s ease;
}

.section-10:hover   .einszueins-button:hover {
background-color: #0d0d0d;
color: white;
}


.einszueins2-button {
display: inline-block;
padding: 14px 70px;
position: absolute;
top: 67%;
left: 4%;
font-size: clamp(12px, 1.7vw, 17px);
font-family: 'LexendBold', sans-serif;
font-weight: bold;
color: #111111; /* Schriftfarbe = Rahmenfarbe */
background-color: transparent;
border: 8px solid #bf0069;
border-radius: 12px;
text-decoration: none;
transition: all 0.3s ease;
}

.einszueins2-button:hover {
background-color: #111111;
color: #e6e6e6;
}







.flyrü-overlay {
  position: absolute;
  right: 10%;
  width: 22%;
  top: 17%;
  opacity: 0;
  transform: translateY(280px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  border-radius: 8px;
  z-index: 0;
  }
  
  /* Hover-Zustand */
  .section-black.active .flyrü-overlay {
  opacity: 1;
  transform: translateY(0);
  }





  
.flyda-overlay {
  position: absolute;
  right:4.5%;
  width: 36%;
  top:55%;
  opacity: 0;
  transform: translateY(280px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  border-radius: 8px;
  z-index: 0;
  }
  
  /* Hover-Zustand */
  .section-black.active .flyda-overlay {
  opacity: 1;
  transform: translateY(0);
  }






.section-10 .fly-in-image3 {
position: absolute;
right: 13%;
width: 43%;
bottom: 0%;
opacity: 0;
transform: translateY(80px);
transition: opacity 0.8s ease, transform 0.8s ease;
border-radius: 8px;
z-index: 0;
}

/* Hover-Zustand */
.section-10:hover .fly-in-image3 {
opacity: 1;
transform: translateY(0);
}



.section-10 .fly-in-image2 {
position: absolute;
right: 13%;
width: 17%;
bottom: 5%;
opacity: 0;
transform: translateY(80px);
transition: opacity 0.8s ease, transform 0.8s ease;
border-radius: 8px;
z-index: 3;
}

/* Hover-Zustand */
.section-10:hover .fly-in-image2 {
opacity: 1;
transform: translateY(0);
}









.insta-overlay {
position: absolute;
bottom: 32%;
left: 53%;
width: 5%;
height: auto;
overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.insta-overlay img.default {
width: 100%; /* Passt sich dem Container an */
height: auto;
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.insta-overlay:hover img.default {
opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.insta-overlay img.hover {
width: 100%; /* Passt sich dem Container an */
height: auto; /* Behält das Seitenverhältnis bei */
position: absolute; /* Position innerhalb des Containers */
top: 0; /* Position oben im Container */
left: 0; /* Position links im Container */
opacity: 0; /* Startet unsichtbar */
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.insta-overlay:hover img.hover {
opacity: 1; /* Weißes Bild wird sichtbar */
}












    .last-section {

      background-color: #0b0b0b;
      padding: 320px 0; /* Oben und unten Abstand */
      position: relative;
      z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */


      .twotitlelast-text {
        font-family: 'LEMONMILKBOLD', sans-serif;
        font-size: clamp(32px, 4.2vw, 38px);
        max-width: 900px;
        color: #1a000a;
        position: absolute;
        bottom: 0.3%;
        left: 4%;
        line-height: 0.9;
      }

      .twosubtitleforelast-text {
        font-family: 'LEMONMILKLight', sans-serif;
        font-size: clamp(20px, 2.8vw, 26px);
        color: #1a000a;
        position: absolute;
        bottom: 3%;
        left: 4%;
        line-height: 1.0;
      }
    }
    

    
    
    .wordlinkIMPRESSUM, .wordlinkCOOKIES, .wordlinkAGBs, .wordlinkdisclaimer {
      font-family: 'LEMONMILKLIGHT', sans-serif;
      font-size: clamp(12px, 1.6vw, 30px);
      text-align: left;
    
      color: #fefefe;
      text-decoration: none;
      position: absolute;
      bottom: 4%;
      transform: translateX(-50%);
      transition: color 0.3s ease-in-out;
    }
    
    
    /* Hover-Effekt */
    .wordlinkIMPRESSUM:hover, .wordlinkCOOKIES:hover, .wordlinkAGBs:hover, .wordlinkdisclaimer:hover {
      color: #e76730;

    }
    
    
    /* Dynamische Unterstreichung */
    .wordlinkIMPRESSUM::after, .wordlinkCOOKIES::after, .wordlinkAGBs::after, .wordlinkdisclaimer::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -12px;
      width: 0%;
      height: 12px;
      background-color: #e76730;
      transition: width 0.3s ease-in-out;
    }
    
    /* Hover-Effekt für die Unterstreichung */
    .wordlinkIMPRESSUM:hover::after, .wordlinkCOOKIES:hover::after, .wordlinkAGBs:hover::after, .wordlinkdisclaimer:hover::after{
      width: 100%;
    }
    
    
    .wordlinkCOOKIES {
      left: 42%; /* Weiter nach rechts verschoben */
    }
    
    .wordlinkdisclaimer{
      left: 8%;
    }
    
    .wordlinkIMPRESSUM{
      left: 20%;
    }
    
    .wordlinkAGBs{
      left: 34%;
    }
    
    
    
    
    .wordlinksPRIVATCOACHING, .wordlinksfirmenbottom, .wordlinksNULNEBLA, .wordlinksknowhow {
      font-family: 'LEMONMILKBOLD', sans-serif;
      font-size: clamp(8px, 1.6vw, 24px);
      color: #ededed;
      text-decoration: none;
      text-align: left;
      top: 5%;
      position: absolute;
      transition: color 0.3s ease-in-out;
      z-index: 10; /* Über andere Elemente */
    }
    
    
    .wordlinksPRIVATCOACHING:hover, .wordlinksfirmenbottom:hover, .wordlinksNULNEBLA:hover, .wordlinksknowhow:hover {
      color: #e76730;

    }
    
    .wordlinksPRIVATCOACHING::after, .wordlinksfirmenbottom::after, .wordlinksNULNEBLA:after, .wordlinksknowhow::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 0%;
      height: 8px; /* Kleinere Unterstreichungshöhe */
      background-color: #e76730;
      transition: width 0.3s ease-in-out;
    }
    
    
    .wordlinksPRIVATCOACHING:hover:after, .wordlinksfirmenbottom:hover:after, .wordlinksNULNEBLA:hover:after, .wordlinksknowhow:hover:after {
      width: 100%;
    }
    
    
    .wordlinksPRIVATCOACHING {
      left: 22%;
    }
    
    .wordlinksfirmenbottom {
      left: 2%;
    
    }
    
    
    .wordlinksknowhow {
      left: 42%;
    }
    
    .wordlinksNULNEBLA {
      left: 62%;
    }
    
    
    .wordlinksFirmenseminare, .wordlinksleistungen, .wordlinks1-1firmencoaching, .wordlinksKonzeptErnährung,
    .wordlinksKonzeptBewegung, .wordlinksKonzeptEigenkompetenz, .wordlinksquinfinity, .wordlinksbuchung, .wordlinksseminare, .wordlinksErnährungsleistungen {
      font-family: 'Avenirmedium';
      font-size: clamp(4px, 1.6vw, 18px);
      color: #ededed;
      text-decoration: none;
      text-align: left;
      position: absolute;
      left: 2%; /* Zentrierung des Containers */
      width: 300px; /* Feste Breite, z. B. 300px */
      transition: color 0.3s ease-in-out;
      z-index: 10; /* Über andere Elemente */
    }
    
    .wordlinksFirmenseminare:hover, .wordlinksleistungen:hover, .wordlinks1-1firmencoaching:hover, .wordlinksKonzeptErnährung:hover,
    .wordlinksKonzeptBewegung:hover, .wordlinksKonzeptEigenkompetenz:hover, .wordlinksquinfinity:hover, .wordlinksseminare:hover, .wordlinksbuchung:hover, .wordlinksErnährungsleistungen:hover {
    
    color: #e76730;
    font-family: 'Avenirheavy', sans-serif;

    }
    
    
    
     .wordlinksseminare
      {
        top: 20%;
      }

      .wordlinks1-1firmencoaching
      {
        top: 23%;
      }
    
   .wordlinksleistungen
      {
        top: 14%;
      }
    
    .wordlinksErnährungsleistungen{
      top: 29%;
    }
    
    .wordlinksKonzeptErnährung{
      top: 32%;
    }
    
    .wordlinksKonzeptBewegung{
      top: 35%;
    }
    
    .wordlinksKonzeptEigenkompetenz{
      top: 34%;
    }
    
    .wordlinksquinfinity{
      top: 41%;
    }
    
      .wordlinksbuchung
      {
        top: 51%;
      }




      


.downlink-button {
  display: inline-block;
  position: absolute;
  top: 51%;
  left: 2%;
  padding: 7px 24px; /* ↑↓ ←→ Abstand */
  font-size: clamp(14px, 1.4vw, 16px); /* Skalierbare Größe */
  font-family: 'Avenirmedium', sans-serif;
  color: white;
  background-color: #e76730;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  z-index: 6;
  opacity: 1;

}

.downlink-button:hover {
  background-color: #b83700;
  font-family: 'Avenirmedium', sans-serif;

}







        .wordlinksmail {

        font-size: clamp(4px, 1.6vw, 18px);
        color: #ededed;
        text-decoration: none;
        text-align: left;
        position: absolute;
        font-family: 'Avenirheavy', sans-serif;
top: 62%;
        left: 2%; /* Zentrierung des Containers */
        width: 300px; /* Feste Breite, z. B. 300px */
        transition: color 0.3s ease-in-out;
        z-index: 10; /* Über andere Elemente */
      }
      
      .wordlinksmail:hover {
        color: #e76730;
        }
      



    
    
    .wordlinksprivatleistungenbottom, .wordlinkserstgespräch {
      font-family: 'Avenirmedium', sans-serif;
      font-size: clamp(4px, 1.6vw, 18px);
      color: #ededed;
      text-decoration: none;
      text-align: left;
      position: absolute;
      left: 22%; /* Zentrierung des Containers */
      width: 300px; /* Feste Breite, z. B. 300px */
      transition: color 0.3s ease-in-out;
      z-index: 10; /* Über andere Elemente */
    }
    
    
    
    .wordlinksprivatleistungenbottom:hover, .wordlinkserstgespräch:hover {
    color: #e76730;
    font-family: 'Avenirheavy', sans-serif;

    }
    
    .wordlinkserstgespräch{
      top: 14%;
    }
    .wordlinksprivatleistungenbottom{
      top: 18%;
    }
    
    
    
    .wordlinkseminare, .wordlinksblog {
      font-family: 'Avenirmedium', sans-serif;
      font-size: clamp(4px, 1.6vw, 18px);
      color: #ededed;
      text-decoration: none;
      text-align: left;
      position: absolute;
      left: 42%; /* Zentrierung des Containers */
      width: 300px; /* Feste Breite, z. B. 300px */
      transition: color 0.3s ease-in-out;
      z-index: 10; /* Über andere Elemente */
    }
    
    .wordlinkseminare:hover, .wordlinksblog:hover {
      color: #e76730;
      font-family: 'Avenirheavy', sans-serif;
      }
    
    .wordlinkseminare{
      top: 14%;
    }
    .wordlinksblog{
      top: 18%;
    }
    
    
    
    
    
    
    
    
      .wordlinknulneblahome {
        font-family: 'LEMONMILKBOLD', sans-serif; /* Schriftart anwenden */
        font-size: clamp(28px, 3.2vw, 34px); /* Schriftgröße */
        color: #ededed; /* Standardfarbe */
        text-decoration: none; /* Keine Unterstreichung im Normalzustand */
        position: absolute; /* Absolut positioniert */
        bottom:4%; /* Platzierung des Textes nach oben - anpassbar */
        right: 4.5%; /* Horizontal zentrieren */
        transition: color 0.3s ease-in-out; /* Sanfter Übergang für Farbe */
      }
      
      /* Hover-Effekt */
      .wordlinknulneblahome:hover {
        color: #e76730; /* Farbänderung beim Hover */
      }
    
    
      .logo-overlay {
        width: 3%;         /* oder z. B. 300px für feste Breite */
        max-width: 420px;    /* Bild wird nie größer als 600px */
        bottom: 3%;
        right: 16%;
        position: absolute;
        display: block;      /* Verhindert Lücken unter dem Bild */
      }
    
    
      .fusszeile-text {
        font-family: 'Lexendlight', sans-serif;
        font-size: clamp(4px, 1.8vw, 14px);
        max-width: 400px;
        color: #0c0c0c;
        position: absolute;
        bottom: 10%;
        right: 8%;
        line-height: 1.0;
      }

      


    













    .back-to-top {
      position: fixed;
      bottom: 30px;
      left: 50%;
      text-decoration: none;
      background-color: #e76730;
      color: white;
      font-size: 30px;
      padding: 10px 18px;
      border-radius: 50%;
      transition: background-color 0.3s ease;
      z-index: 999;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    }
    
    .back-to-top:hover {
      background-color: #4b2313;
      color: #ffffff;
    }