/* 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: 'LEMONMILKLight';
    src: url(LEMONMILK-Light.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: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}

 

    .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-wrapper {
    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;
  }
  
  .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-2 {
  background-color: #C9CDD8;
  transition: background-color 0.4s ease;
      padding: 670px 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: #e7308f;
}




  
  .section-4neu {
    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 */

  transition: background-color 0.6s ease;

    z-index: 5;
    background-color: #C9CDD8;
    padding: 470px 0; /* Oben und unten Abstand */
    position: relative;
    box-shadow: 0 20px -30px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
    /* -------------------------------
     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 .fly-in-image5 {
  position: absolute;
  left: 5%;
  width: 23%;
  bottom: 13%;
  opacity: 0;
  transform: translateY(128px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  border-radius: 8px;
  z-index: 2;
  opacity: 1;
}

/* Hover-Zustand */
.section-4neu:hover .fly-in-image5 {
  opacity: 1;
  transform: translateY(0);
}




.section-4neu .fly-in-image6 {
  position: absolute;
  right: 15%;
  width: 31%;
  bottom: 5%;
  opacity: 0;
  transform: translateY(-128px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  border-radius: 8px;
  z-index: 2;
  opacity: 1;
}

/* Hover-Zustand */
.section-4neu:hover .fly-in-image6 {
  opacity: 1;
  transform: translateY(0);
}




 


  .section-4neu {
  background-color: #C9CDD8;
  transition: background-color 0.6s ease;
  padding: 400px 0;
}

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

.section-4neu.active,
.section-5.active {
  background-color: #111111;
}






.section-5.active .fly-in-image5{
  opacity: 0;
    pointer-events: none; /* Optional: deaktiviert Interaktion */

}

.section-5.active .fly-in-image6{
  opacity: 0;
    pointer-events: none; /* Optional: deaktiviert Interaktion */

}




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




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

    color: #000000;
text-decoration: underline;
text-decoration-color: #e7308f;
text-decoration-thickness: 3px;
text-underline-offset: 5px;  }



.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;

}







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

    color: #000000;
text-decoration: underline;
text-decoration-color: #e7308f;
text-decoration-thickness: 3px;
text-underline-offset: 5px;  }





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

  }

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

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



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



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

/* Beim Hover sichtbar & orange */
.highlightsectiontwoone{
  color: #090909;
  font-family: 'Avenirheavy', 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: #e73092;
    font-family: 'Avenirmedium', sans-serif;

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








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

.section-3neu.active {
  background-color: #e7308f;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3); /* NUR nach unten */

}



  



  .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;
  }

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




  .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;

  }


  
  .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);
}



  
.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: 19%;
    left: 4%;

  }
  
  /* 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: #fafafa;
    max-width: 87%;
  }


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

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

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

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

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

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

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








  










  .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;

  }











  


    .media-hover-block {
      width: 40%;
      margin: 0 auto;
      text-align: center;
      position: absolute;
      left: 3%;
      top: 34%;
      cursor: pointer;
    }
    
    .media-container {
      position: relative;
      aspect-ratio: 16 / 9;
      border-radius: 8px;
    }
    
    .preview, .hover-video {
      position: absolute;
      left: 0%;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity 0.5s ease-in-out;
      border-radius: 10px;
    }
    
    .hover-video {
      opacity: 0;
      z-index: 2;
    }
    
    .media-hover-block:hover .preview {
      opacity: 0;
    }
    
    .media-hover-block:hover .hover-video {
      opacity: 1;
    }
    
    .media-hover-block:hover .hover-video {
      /* Video spielt beim Hover los */
      animation: play-on-hover 0s forwards;
    }
    
    .hover-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;
    }
    
    .media-hover-block:hover .hover-text {
      opacity: 1;
    }

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

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


















    .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: #800046;
  }

   .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: 110px; /* ⬅️ 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: 110px; /* ⬅️ 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: #e8297f;
}











  

  .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 */
  }







  .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: #e7308f;

  }



 

   .section-3neu.active .thri {
   
opacity: 1;
  }


   .section-3neu.active .hgthri {
   
opacity: 1;
  }


  .thri{
    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;
    opacity: 0;
  }

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

  }




  

   .thri2{
    font-family: 'reaniebeanie', sans-serif;
    font-size: clamp(27px, 3.4vw, 29px);
    max-width: 60%;
    color: #080808;
    position: absolute;
    top: 4%;
    left: 4%;
    line-height: 0.9;
  }

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

  }




  .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);

  }


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

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

  }




  .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;
  }


  .ChatGPT-overlay {
    width: 100%;
    top:-8%;
    left: 2%;
    position: absolute;
    display: block;
    overflow: hidden;
  }




  .ansprechpartner-overlay {

    width: 20%;
    top:27%;
    right: 3%;
    position: absolute;
  }





  .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: 'Louisgeorgecafebold', sans-serif;
    text-align: right;
    font-size: clamp(18px, 2.4vw, 18px);
    max-width: 50%;
    color: #0e0e0e;
    position: absolute;
    bottom: 7%;
    right: 7%;
    line-height: 1;

  }

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


  }

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

  }






  .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;

  }



.section-8 {
  background-color: #151515;
  padding: 780px 0; /* Oben und unten Abstand */
  position: relative;
  z-index: 1; /* Damit der Schatten über dem oberen Bereich liegt */
  box-shadow: 20px 20px 20px 10px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
  box-shadow: 20px -20px 20px 50px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
  overflow: hidden;
}








.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 */
}


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

/* 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 */
}








.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: 20px;
      color: #ffffff;
      top: 53px; /* 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: #30e74f;
            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: 46%; /* Position von links anpassen */
      transform: translateX(-50%);
      transition: color 0.3s ease-in-out;
    }
   
    .wordlink1-1top {
    
      left: 56%; /* Position von links anpassen */
      transform: translateX(-50%);
      transition: color 0.3s ease-in-out;
    }
   
    .wordlinküberNULNEBLAtop {
    
      left: 66%; /* Position von links anpassen */
      transform: translateX(-50%);
      transition: color 0.3s ease-in-out;
    }
   
    .wordlinkknowhowtop {
    
      left: 76%; /* Position von links anpassen */
      transform: translateX(-50%);
      transition: color 0.3s ease-in-out;
    }
   
    .wordlinkkontakttop {
    
      left: 84%; /* Position von links anpassen */
      transform: translateX(-50%);
      transition: color 0.3s ease-in-out;
    }


    






    .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 .fly-in-image {
  position: absolute;
  right: 5%;
  width: 30%;
  bottom: 15%;
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  border-radius: 8px;
    z-index: 1;

}

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






    






  .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;
}







.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: #151515;
        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: #9b006f;

      }
      
      
      /* Dynamische Unterstreichung */
      .wordlinkIMPRESSUM::after, .wordlinkCOOKIES::after, .wordlinkAGBs::after, .wordlinkdisclaimer::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -12px;
        width: 0%;
        height: 12px;
        background-color: #9b006f;
        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: #9b006f;

      }
      
      .wordlinksPRIVATCOACHING::after, .wordlinksfirmenbottom::after, .wordlinksNULNEBLA:after, .wordlinksknowhow::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 0%;
        height: 8px; /* Kleinere Unterstreichungshöhe */
        background-color: #9b006f;
        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 {
        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 {
      
      color: #9b006f;
      font-family: 'Avenirheavy', sans-serif;

      }
      
      
      
      .wordlinksFirmenseminare {
        top: 14%;
      }
      
      .wordlinksleistungen
      {
        top: 18%;
      }
      
      .wordlinks1-1firmencoaching{
        top: 25%;
      }
      
      .wordlinksKonzeptErnährung{
        top: 28%;
      }
      
      .wordlinksKonzeptBewegung{
        top: 31%;
      }
      
      .wordlinksKonzeptEigenkompetenz{
        top: 34%;
      }
      
      .wordlinksquinfinity{
        top: 37%;
      }
      
      
      
      
      .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: #9b006f;
      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: #9b006f;
        font-family: 'Avenirheavy', sans-serif;
        }
      
      .wordlinkseminare{
        top: 14%;
      }
      .wordlinksblog{
        top: 18%;
      }
      
      
      
      
      .wordlinksmail {

        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 */
      }
      
      .wordlinksmail:hover {
        color: #9b006f;
        }
      
      
      
      
      
        .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: #9b006f; /* 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: 4%;
          right: 19%;
          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: #e73098;
        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;
      }