/* 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: auto;
}


/* 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: 'reenie';
  src: url(ReenieBeanie-Regular.ttf) 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: 'LEMONMILK';
  src: url(LEMONMILK-Regular.otf) 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;
  
}




.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: 70%;
left: 50%;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
object-fit: cover;
z-index: 0;
}


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








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









      






  
.greenie-section {
  padding: 20px ; /* Oben und unten Abstand */
  position: relative;
  transition:  height 0.8s ease;
  overflow: hidden;
  background-color: #839a89;


  z-index: 0;
  
}


.greenie-section.grow {
  height: 600px; /* Zielhöhe beim Scroll */
  background-color: #003204;

}




  
      .section-need.from-section-greenie {
background-color: #003204;
transition: background-color 0.4s ease-in-out;
z-index: 0;
}



.g1 {
font-family: 'LEMONMILKBOLD';
  font-size: clamp(128px, 8vw, 134px);
  position: absolute;
  top: 4%;
  left: 4%;
  z-index: 0;
color: #dbdbdb5b;
   opacity: 0;
transform: translateX(-40px);
transition: opacity 1.3s ease, transform 1.3s ease;
  letter-spacing: -5px;

}


.greenie-section.grow .g1 {
opacity: 1;
color: #d2d2d2;
transform: translateX(0) ;
}



.g2 {
font-family: 'LEMONMILKLIGHT';
  font-size: clamp(88px, 8vw, 94px);
  position: absolute;
  top: 37%;
  left: 34%;
  z-index: 0;
color: #77bd8efc;
   opacity: 0;
transform: translateY(340px);
transition: opacity 1.3s ease, transform 1.3s ease;
  letter-spacing: -1px;

}


.greenie-section.grow .g2 {
opacity: 1;
transform: translateX(0) ;
}




.g3 {
font-family: 'LEMONMILK';
  font-size: clamp(48px, 8vw, 54px);
  position: absolute;
  top: 34%;
  right: 34%;
  z-index: 0;
color: #64b8a7fc;
   opacity: 0;
transform: translateY(-70px);
transition: opacity 1.3s ease, transform 1.3s ease;
  letter-spacing: -1px;

}


.greenie-section.grow .g3 {
opacity: 1;
transform: translateX(0) ;
}


.g4 {
font-family: 'LEMONMILK';
  font-size: clamp(68px, 8vw, 72px);
  position: absolute;
  top: 49%;
  max-width: 30%;
  left: 7%;
  z-index: 0;
color: #a4d585fc;
   opacity: 0;
transform: translateY(470px);
transition: opacity 1.3s ease, transform 1.3s ease;
  letter-spacing: -5px;
line-height: 0.9;
}


.greenie-section.grow .g4 {
opacity: 1;
transform: translateX(0) ;
}








.g7 {
font-family: 'LEMONMILK';
  font-size: clamp(38px, 8vw, 42px);
  position: absolute;
  top: 62%;
  max-width: 30%;
  left: 34%;
  z-index: 0;
color: #d7d7d7a6;
   opacity: 0;
transform: translateX(470px);
transition: opacity 1.3s ease, transform 1.3s ease;
  letter-spacing: -1px;
line-height: 0.9;
}


.greenie-section.grow .g7 {
opacity: 1;
transform: translateX(0) ;
}







.g5 {
font-family: 'LEMONMILKBOLD';
  font-size: clamp(38px, 8vw, 42px);
  position: absolute;
  top: 37%;
  left:7%;
  z-index: 0;
color: #b0c99afc;
   opacity: 0;
transform: translateX(240px);
transition: opacity 1.3s ease, transform 1.3s ease;
  letter-spacing: -4px;

}


.greenie-section.grow .g5 {
opacity: 1;
transform: translateX(0) ;
}





.g6 {
font-family: 'LEMONMILKBOLD';
  font-size: clamp(108px, 8vw, 142px);
  position: absolute;
  top: 56%;
  right:7%;
  z-index: 0;
color: #1a8535fc;
   opacity: 0;
transform: translateX(240px);
transition: opacity 1.3s ease, transform 1.3s ease;
  letter-spacing: -10px;

}


.greenie-section.grow .g6 {
opacity: 1;
transform: translateX(0) ;
}





.faq10-pop-button {
display: block;
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(12px, 1.5vw, 18px);
padding: 12px 24px;
text-align: center; /* ⬅️ Jetzt linksbündig */
background-color: #ffffff;
border: none;
color: rgb(15, 15, 15);
border-radius: 8px;
left: 4%;
top: 38%;
cursor: pointer;
position: absolute;
transition: background-color 0.3s ease;
max-width: 25%;
line-height: 1.5;
white-space: normal;
word-wrap: break-word;

}

.faq10-pop-button:hover {
background-color: #001e0d;
color: rgb(235, 235, 235);}

.faq10-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(15, 15, 15, 0.85);
z-index: 9999;
justify-content: center;
align-items: center;
}

.faq10-popup-content {
background-color: #005726;
padding: 32px;
border-radius: 12px;
width: 90%;
max-width: 600px;
color: #e6e6e6;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
text-align: left;
font-family: 'LouisGeorgeCafe', sans-serif;
animation: popIn 0.4s ease-out;
position: relative;
}

.close10-button {
position: absolute;
top: 12px;
right: 18px;
font-size: 34px;
cursor: pointer;
color: #00bd72;
}














.faq9-pop-button {
display: block;
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(12px, 1.5vw, 18px);
padding: 12px 42px;
text-align: center; /* ⬅️ Jetzt linksbündig */
background-color: #ffffff;
border: none;
color: rgb(15, 15, 15);
border-radius: 8px;
left: 4%;
top:  51%;
cursor: pointer;
position: absolute;
transition: background-color 0.3s ease;
max-width: 24.3%;
line-height: 1.5;
white-space: normal;
word-wrap: break-word;

}

.faq9-pop-button:hover {
background-color: #001e0d;
color: rgb(235, 235, 235);}

.faq9-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(15, 15, 15, 0.85);
z-index: 9999;
justify-content: center;
align-items: center;
}

.faq9-popup-content {
background-color: #005726;
padding: 32px;
border-radius: 12px;
width: 90%;
max-width: 600px;
color: #ececec;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
text-align: left;
font-family: 'LouisGeorgeCafe', sans-serif;
animation: popIn 0.4s ease-out;
position: relative;
}

.close9-button {
position: absolute;
top: 12px;
right: 18px;
font-size: 24px;
cursor: pointer;
color: #00bd72;
}

@keyframes popIn {
from {
  transform: scale(0.8);
  opacity: 0;
}
to {
  transform: scale(1);
  opacity: 1;
}
}











.faq7-pop-button {
display: block;
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(12px, 1.5vw, 18px);
padding: 12px 32px;
text-align: center; /* ⬅️ Jetzt linksbündig */
background-color: #ffffff;
border: none;
color: rgb(15, 15, 15);
border-radius: 8px;
left: 4%;
top: 24%;
cursor: pointer;
position: absolute;
transition: background-color 0.3s ease;
max-width: 25%;
line-height: 1.5;
white-space: normal;
word-wrap: break-word;

}

.faq7-pop-button:hover {
background-color: #001e0d;
color: rgb(235, 235, 235);

}

.faq7-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(15, 15, 15, 0.85);
z-index: 9999;
justify-content: center;
align-items: center;
}

.faq7-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(15, 15, 15, 0.85);
z-index: 9999;
justify-content: center;
align-items: center;
}

.faq7-popup-content {
background-color: #005726;
padding: 32px;
border-radius: 12px;
width: 90%;
max-width: 600px;
color: #e6e6e6;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
text-align: left;
font-family: 'LouisGeorgeCafe', sans-serif;
animation: popIn 0.4s ease-out;
position: relative;
}

.close7-button {
position: absolute;
top: 12px;
right: 18px;
font-size: 34px;
cursor: pointer;
color: #00bd72;
}





.faq8-pop-button {
display: block;
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(12px, 1.5vw, 18px);
padding: 12px 32px;
text-align: center; /* ⬅️ Jetzt linksbündig */
background-color: #ffffff;
border: none;
color: rgb(15, 15, 15);
border-radius: 8px;
left: 4%;
top: 68%;
cursor: pointer;
position: absolute;
transition: background-color 0.3s ease;
max-width: 25%;
line-height: 1.5;
white-space: normal;
word-wrap: break-word;

}

.faq8-pop-button:hover {
background-color: #001e0d;
color: rgb(235, 235, 235);}

.faq8-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(15, 15, 15, 0.85);
z-index: 9999;
justify-content: center;
align-items: center;
}

.faq8-popup-content {
background-color: #ffffff;
padding: 32px;
border-radius: 12px;
width: 90%;
max-width: 600px;
color: #101010;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
text-align: left;
font-family: 'LouisGeorgeCafe', sans-serif;
animation: popIn 0.4s ease-out;
position: relative;
}

.close8-button {
position: absolute;
top: 12px;
right: 18px;
font-size: 24px;
cursor: pointer;
color: #444;
}

@keyframes popIn {
from {
  transform: scale(0.8);
  opacity: 0;
}
to {
  transform: scale(1);
  opacity: 1;
}
}





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

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




.kommtit {
  font-family: 'LEMONMILKBOLD';
  color: rgba(252, 252, 252, 0.6);
  font-size: clamp(48px, 4.4vw, 68px);
  opacity: 0.4;
  position: absolute;
  top: 4%;
  left: 4%;
  letter-spacing: -5px;
  transition: opacity 1.8s ease, color 1.5s ease;
}

/* Wenn die Section .grow wird */
.section-komm.grow .kommtit {
  opacity: 1;
  color: #ffffff;
}






.kommtig{
font-family: 'LEMONMILKBOLD';
color: #81d69a;
  font-size: clamp(38px, 3.4vw, 41px);
opacity: 0.4;
position: absolute;
top: 16%;
left: 4%;
transform: translateX(-500px) ;
letter-spacing: -3px;
transition: opacity 1.3s ease, transform 1.3s ease;

}


.section-komm.grow .kommtig {
 transform: translateX(0);
  transform: 5s; /* z. B. 1 Sekunde später */

}



.licht{
font-family: 'LEMONMILKBOLD';
color: white;
position: absolute;
top: 4%;
left: 4%;
}













    .scroll-trigger {
      position: absolute;
      top: 49%;
  right: 7%;
      cursor: pointer;
      z-index: 10;
  opacity: 0;
transition: opacity 4.8s ease;
      text-align: center;

  }
  


  .section-komm.active .scroll-trigger {
opacity: 1;

}
    
    .scroll-trigger .arrow {
      width: 30%;
      transition: opacity 0.3s ease;
      position: absolute;
      top: 90%;
      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: 'Beauty', sans-serif;
      font-size: clamp(84px, 1.5vw, 92px);
      color: #ffffff;
      margin-top: 30%;
      transition: color 0.3s ease;
      width: 10%;
      position: relative;
      line-height: 0.2;
    }
    
    .scroll-trigger:hover p1 {
      color: #259e00;
    }















.kommone-container {
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: 34%;
    left: 4%;
    max-width: 25%;
opacity: 0;
transition: opacity 4.8s ease;
  }
  


  .section-komm.active .kommone-container {
opacity: 1;

}


  .section-komm.active .kommonetxt {
opacity: 1;

}


  /* Bild-Wrapper */
  .kommone-wrapper {
    position: relative;
    width: 7%; /* frei skalierbar */
    height: auto;
    
  }
  
  .icon {
    width: 100%;
    height: auto;
    position: absolute;
    top: 20%;
    top: 0;
    left: 0;
  }
  
  .icon.hover {
    opacity: 0;
  }
  .icon.default {
  opacity: 1; /* macht das Standard-Icon transparenter */
}

  
  .kommone-container:hover .icon.default {
    opacity: 0;
  }
  .kommone-container:hover .icon.hover {
    opacity: 1;
  }
  
  /* Text */
  .kommonetxt {
    text-align: left;
   margin-top: 0%;
   margin-left: 13%;
       line-height: 1.2;
width: 100%;
    font-size: clamp(10px, 1.5vw, 18px);
    font-family: 'Avenirlight', sans-serif;
    color: #edededc3;
    opacity: 0.4;
    transform: opacity 1s ease;
  }


  .kommone-container .hgkommonetxt {
    display: inline-block;
    font-family: 'LEMONMILKBOLD', sans-serif;
         }


  
  .kommone-container:hover .kommonetxt {
    display: inline-block;
    color: #8cb47f;      }



         .seckommoneone-container:hover .hgkommbold {
    display: inline-block;
    font-family: 'Avenirmedium', sans-serif;
text-decoration: underline;
text-decoration-color: #1d1d1d;
text-decoration-thickness: 3px;
text-underline-offset: 3px;
         }



.kommone-container .hgkommbold {
    display: inline-block;
    font-family: 'Avenirmedium', sans-serif;
    
         }


         
.kommone-container .Lärm {
    display: inline-block;
    font-family: 'LEMONMILK', sans-serif;
        font-size: clamp(10px, 1.5vw, 18px);

         }


.kommone-container .Lichtverhältnisse {
    display: inline-block;
    font-family: 'LEMONMILK', sans-serif;
        font-size: clamp(10px, 1.5vw, 18px);

         }

.kommone-container .Sitzhaltung {
    display: inline-block;
    font-family: 'LEMONMILK', sans-serif;
        font-size: clamp(10px, 1.5vw, 18px);

         }



.kommone-container:hover .Sitzhaltung {
    color: #1e7800;      }


.kommone-container:hover .Lärm {
    color: #ccf0c0;      }

    .kommone-container:hover  .Lichtverhältnisse  {
    color: #53da26;      }























    

.kommtwo-container {
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: 32%;
    left: 34%;
    max-width: 25%;
opacity: 0;
transition: opacity 4.8s ease;
  }
  


  .section-komm.active .kommtwo-container {
opacity: 1;

}


  .section-komm.active .kommtwotxt {
opacity: 1;

}


  /* Bild-Wrapper */
  .kommtwo-wrapper {
    position: relative;
    width: 12%; /* frei skalierbar */
    height: auto;
    
  }
  
  .icon {
    width: 100%;
    height: auto;
    position: absolute;
    top: 20%;
    top: 0;
    left: 0;
  }
  
  .icon.hover {
    opacity: 0;
  }
  .icon.default {
  opacity: 1; /* macht das Standard-Icon transparenter */
}

  
  .kommtwo-container:hover .icon.default {
    opacity: 0;
  }
  .kommtwo-container:hover .icon.hover {
    opacity: 1;
  }
  
  /* Text */
  .kommtwotxt {
    text-align: left;
   margin-top: 4%;
   margin-left: 15%;
       line-height: 1.2;
width: 100%;
    font-size: clamp(10px, 1.5vw, 18px);
    font-family: 'Avenirlight', sans-serif;
    color: #edededc3;
    opacity: 0.4;
    transform: opacity 1s ease;
  }


  .kommtwo-container .hgkommtwotxt {
    display: inline-block;
    font-family: 'LEMONMILKBOLD', sans-serif;
         }


  
  .kommtwo-container:hover .kommtwotxt {
    display: inline-block;
    color: #8cb47f;      }



         .seckommoneone-container:hover .hgkommbold {
    display: inline-block;
    font-family: 'Avenirmedium', sans-serif;
text-decoration: underline;
text-decoration-color: #1d1d1d;
text-decoration-thickness: 3px;
text-underline-offset: 3px;
         }



.kommtwo-container .hgkommbold {
    display: inline-block;
    font-family: 'Avenirmedium', sans-serif;
    
         }


         



.kommtwo-container .Einrichtung {
    display: inline-block;
    font-family: 'LEMONMILK', sans-serif;
        font-size: clamp(10px, 1.5vw, 18px);

         }

.kommtwo-container .Upgrade {
    display: inline-block;
    font-family: 'LEMONMILK', sans-serif;
        font-size: clamp(10px, 1.5vw, 18px);

         }



.kommtwo-container:hover .Upgrade {
    color: #1e7800;      }


.kommtwo-container:hover .Einrichtung {
    color: #ccf0c0;      }





.kommtwo-container .hgkommbolo {
    display: inline-block;
    font-family: 'Avenirmedium', sans-serif;
        font-size: clamp(10px, 1.5vw, 18px);

         }


.kommtwo-container:hover .hgkommbolo {
    color: #238c00;      }













.section-2 {

    
  box-shadow: 20px -20px 20px 70px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
  z-index: 5;
  background-color: #CDD1DC;
  padding: 350px 0; /* Oben und unten Abstand */
  position: relative;
  box-shadow: 20px 20px 20px 70px 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: 2; /* Damit der Schatten über dem oberen Bereich liegt */
}


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




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

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


}


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


}
 

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

   text-decoration: underline;
 text-decoration-color: #259e00;
 text-decoration-thickness: 3px;
 text-underline-offset: 5px;
}

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








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

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

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

.breadcrumb-overlay a:hover {
  color: #259e00;
  font-family: 'louisgeorgecafebold', sans-serif;

}

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





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

.beitritt-button:hover {
background-color: #2c0017;
color: white;
}


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

.beitritt2-button:hover {
background-color: rgb(0, 50, 9);
color: white;
}








  
  .Buchbarmitquinfinity-text{
    font-family: 'LexendBold', sans-serif;
    font-size: clamp(17px, 2.4vw, 21px);
    max-width: 60%;
    color: #101010;
    position: absolute;
    bottom: 17%;
    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: 7%;
    right:4%;
    line-height: 1;
  }


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

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






.hover-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 */
.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: #259e00;
}










  

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









.redaufzäflung {
  font-family: 'Avenirmedium', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
 
  color: #259e00;

}

.djfahsd {
  font-family: 'Avenirmedium', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
 text-decoration: underline;
 text-decoration-color: #c21e65;
 text-decoration-thickness: 3px;
 text-underline-offset: 5px;
  color: #0e0e0e;

}











.rectangle-container {
  width: 90%;
  max-width: 30%;
    width: 580px;
  height: 664px;
  background-color: #070707;
  position: absolute;
  top: 7%;
  right: 17%;
  border-radius: 16px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 24px;
  box-shadow: 0 -30px 30px rgba(0, 0, 0, 0.4);
        opacity: 0;
transform: translateY(140px);
transition: opacity 1.3s ease, transform 1.3s ease;
}

.section-3.active .rectangle-container {
opacity: 1;
transform: translateY(0);
}




.rectangle1-img{
  width: 9%;
 position: absolute;
 left: 5%;
 top: 26%;
}


.rectangle2-img{
  width: 9%;
 position: absolute;
 left: 5%;
 top: 40%;
}



.rectangle3-img{
  width: 9%;
 position: absolute;
 left: 5%;
 top: 53%;
}


.rectangle4-img{
  width: 9%;
 position: absolute;
 left: 5%;
 top: 65%;
}






.titlebox {
  font-family: 'LEMONMILKBOLD';
 position: absolute;
   font-size: clamp(23px, 2.7vw, 27px);
 left: 15%;
 top: 2%;
   max-width: 70%;
line-height: 0.8;
}

.hgtitlebox {
  font-family: 'LexendBold';
    font-size: clamp(14px, 2.7vw, 16px);

}



.bloodsugar1 {
  font-family: 'LexendBold';
 position: absolute;
   font-size: clamp(15px, 1.7vw, 17px);
 left: 15%;
 top: 23%;
  max-width: 70%;

}

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


.bloodsugar2 {
  font-family: 'LexendBold';
 position: absolute;
   font-size: clamp(15px, 1.7vw, 17px);
 left: 15%;
 top: 37%;
   max-width: 70%;

}

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



.bloodsugar3 {
  font-family: 'LexendBold';
 position: absolute;
   font-size: clamp(15px, 1.7vw, 17px);
 left: 15%;
 top: 51%;
   max-width: 70%;

}

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



.bloodsugar4 {
  font-family: 'LexendBold';
 position: absolute;
   font-size: clamp(15px, 1.7vw, 17px);
 left: 15%;
 top: 61%;
   max-width: 70%;

}

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


.bloodsugar5 {
  font-family: 'Avenirmedium';
 position: absolute;
   font-size: clamp(15px, 1.7vw, 17px);
 left: 15%;
 top: 74%;
   max-width: 70%;
text-align: left;
  color: #5ab456;

}


.bloodsugar6 {
  font-family: 'LexendBold';
 position: absolute;
   font-size: clamp(15px, 1.7vw, 17px);
 left: 15%;
 top: 84%;
   max-width: 70%;
text-align: left;
  color: #f7f7f7;

}






.fivesourct-text {
  font-family: 'Avenirmedium', sans-serif;
  font-size: clamp(17px, 3vw, 19px);
  max-width: 50%;
  color: #0c0c0c;
  position: absolute;
  top:17%;
  left: 4%;
  line-height: 1.1;
  max-width: 32%;
  text-align: left;
        opacity: 0;
transform: translateY(140px);
transition: opacity 2.3s ease, transform 1.3s ease;
}

.section-3.active .fivesourct-text {
opacity: 1;
transform: translateY(0);
}

.hgfivesourct{
  font-family: 'Avenirheavy', sans-serif;
  color: #f4f4f4;

}








.fivesourct2-text {
  font-family: 'Avenirmedium', sans-serif;
  max-width: 50%;
  color: #111111;
  position: absolute;
  top:40%;
  left: 4%;
  line-height: 1.1;
  max-width: 32%;
    font-size: clamp(17px, 3vw, 19px);
transition: opacity 2.3s ease, transform 1.3s ease;
  text-align: left;
        opacity: 0;
transform: translateY(140px);
}

.section-3.active .fivesourct2-text {
opacity: 1;
transform: translateY(0);
}

.hgfivesourct2{
  font-family: 'Avenirheavy', sans-serif;
  color: #e0e0e0;

}






.fivesourct3-text {
  font-family: 'Avenirmedium', sans-serif;
  font-size: clamp(9px, 3vw, 12px);
  max-width: 50%;
  color: #0c0c0c;
  position: absolute;
 top:55%;
  left: 4%;
  line-height: 1.1;
  max-width: 32%;
    font-size: clamp(17px, 3vw, 19px);
transition: opacity 2.3s ease, transform 1.3s ease;
  text-align: left;
        opacity: 0;
transform: translateY(140px);
}

.section-3.active .fivesourct3-text {
opacity: 1;
transform: translateY(0);
}

.hgfivesourct3{
  font-family: 'Avenirheavy', sans-serif;
  color: #f4f4f4;

}




.section-3 {
  background-color: #259e00;
  padding:470px 0; /* Oben und unten Abstand */
  position: relative;
  transition: color 1.2s ease-in-out;
  z-index: 6;

}
















.section-wild {
  background-color: #259e00;
  padding: 620px 0; /* Oben und unten Abstand */
  position: relative;
  z-index: 5;
transition: opacity 0.8s ease, transform 0.8s ease;
  box-shadow: 20px -20px 20px 10px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
  box-shadow: 20px 20px 20px 10px rgba(0, 0, 0, 0.6); /* Schatten nach unten */

}


















.akutisch4{
    font-family: 'Avenirlight', sans-serif;
    font-size: clamp(14px, 2.4vw, 17px);
    max-width: 26%;
    text-align: left;
    color: #f6f6f6;
    position: absolute;
    top: 57%;
    right:13%;
    line-height: 1;
   opacity: 0;

  transform: translateY(-78px);
transition: opacity 0.8s ease, transform 0.8s ease;
}


.section-wild.active .akutisch4{
  opacity: 1;
  transform: translateY(0);

}


   .hgakutisch4{
    cursor: pointer;
    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(17px, 3.4vw, 21px);
    color: #0f0f0f;
  }


.hgakutisch24{
    cursor: pointer;
    font-family: 'LexendBold', sans-serif;
    color: #0f0f0f;
  }


.hgakutischu4{
    font-family: 'LexendBold', sans-serif;
    text-decoration: underline;
text-decoration-color: #101010;
text-decoration-thickness: 5px;
text-underline-offset: 
5px;  

  }












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

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

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


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










      
      .dynamicfilm1-negro {
  position: relative;
  height: 40px; /* Start-Höhe */
  overflow: hidden;
  background-color: #101010;
    box-shadow: 0 -20px 20px 20px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
  box-shadow: 0 20px 20px 20px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
}







      
      .dynamicfilm1-white {
  position: relative;
  height: 200px; /* Start-Höhe */
  overflow: hidden;
  background-color: #e4e4e4;
    transition: height 0.8s ease;
z-index: 0;
  
}



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





.htext{
    font-family: 'reenie', sans-serif;
    font-size: clamp(54px, 3.4vw, 57px);
    max-width: 60%;
    text-align: left;
    color: #1b1b1b;
    position: absolute;
    top: 4%;
    left:4%;
    line-height: 0.5;
   opacity: 0;
z-index: 8;
  transform: translateY(218px);
transition: opacity 0.8s ease, transform 0.8s ease;
}


.hghtext{
    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(34px, 2.4vw, 35px);
  
}


.dynamicfilm1-white.grow .htext{
  opacity: 1;
  transform: translateY(0);

}
















    .media-hover-block {
      width: 30%;
      margin: 0 auto;
      text-align: center;
      position: absolute;
      top: 17%;
      left: 4%;
      bottom: 3%;
      cursor: pointer;
          transition: opacity 0.8s ease;
          opacity: 0;

    }




      .dynamicfilm1-white.grow .media-hover-block{
            opacity: 1;

}


    
    .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: 12px;
      opacity: 1;
      font-family: 'Avenirlight', sans-serif;
      font-size: 18px;
      color: #1111111d;
      transition: color 0.4s ease-in-out;
      text-align: center;
    }
    
    .media-hover-block:hover .hover-text {
      opacity: 1;
            color: #111;

    }

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















      


    .mediax-hover-block {
      width: 30%;
      margin: 0 auto;
      text-align: center;
      position: absolute;
      bottom: 27%;
      
      left: 4%;
      top: 57%;
      cursor: pointer;
          transition: opacity 0.8s ease;
          opacity: 0;

    }


      .dynamicfilm1-white.grow .mediax-hover-block{
            opacity: 1;

}

    
    .mediax-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;
    }
    
    .mediax-hover-block:hover .preview {
      opacity: 0;
    }
    
    .mediax-hover-block:hover .hover-video {
      opacity: 1;
    }
    
    .mediax-hover-block:hover .hover-video {
      /* Video spielt beim Hover los */
      animation: play-on-hover 0s forwards;
    }
    
    .hoverxtext-text {
      margin-top: 12px;
      opacity: 1;
      font-family: 'Avenirlight', sans-serif;
      font-size: 18px;
      color: #1111111d;
      transition: color 0.4s ease-in-out;
      text-align: center;
    }
    
    .mediax-hover-block:hover .hoverxtext-text {
      opacity: 1;
            color: #111;

    }

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












      






    .mediaw-hover-block {
      width: 30%;
      margin: 0 auto;
      text-align: center;
      position: absolute;
      bottom: 27%;
      right: 24%;
      top: 57%;
      cursor: pointer;
          transition: opacity 0.8s ease;
          opacity: 0;

    }


      .dynamicfilm1-white.grow .mediaw-hover-block{
            opacity: 1;

}

    
    .mediaw-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;
    }
    
    .mediaw-hover-block:hover .preview {
      opacity: 0;
    }
    
    .mediaw-hover-block:hover .hover-video {
      opacity: 1;
    }
    
    .mediaw-hover-block:hover .hover-video {
      /* Video spielt beim Hover los */
      animation: play-on-hover 0s forwards;
    }
    
    .hoverwtext {
      margin-top: 12px;
      opacity: 1;
      font-family: 'Avenirlight', sans-serif;
      font-size: 18px;
      color: #1111111d;
      transition: color 0.4s ease-in-out;
      text-align: center;
    }
    
    .mediaw-hover-block:hover .hoverwtext {
      opacity: 1;
            color: #111;

    }

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





      

    .mediaz-hover-block {
      width: 30%;
      margin: 0 auto;
      text-align: center;
      position: absolute;
      top: 17%;
      right: 24%;
      bottom: 3%;
      cursor: pointer;
          transition: opacity 0.8s ease;
          opacity: 0;

    }


      .dynamicfilm1-white.grow .mediaz-hover-block{
            opacity: 1;

}

    
    .mediaz-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;
    }
    
    .mediaz-hover-block:hover .preview {
      opacity: 0;
    }
    
    .mediaz-hover-block:hover .hover-video {
      opacity: 1;
    }
    
    .mediaz-hover-block:hover .hover-video {
      /* Video spielt beim Hover los */
      animation: play-on-hover 0s forwards;
    }
    
    .mediaz-text {
      margin-top: 12px;
      opacity: 1;
      font-family: 'Avenirlight', sans-serif;
      font-size: 18px;
      color: #1111111d;
      transition: color 0.4s ease-in-out;
      text-align: center;
    }
    
    .mediaz-hover-block:hover .mediaz-text {
      opacity: 1;
            color: #111;

    }

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



















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

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


.section-wild.from-section-negro {
      background-color: #101010;
transition: opacity 0.8s ease, transform 0.8s ease;

z-index: 0;
}




.negrotitle{
    font-family: 'LEMONMILK', sans-serif;
    font-size: clamp(27px, 2.4vw, 31px);
    max-width: 80%;
    text-align: center;
    color: #f6f6f6ae;
    position: absolute;
    top: 40%;
    left:50%;
    line-height: 0.4;
   opacity: 0.4;
z-index: 8;
  transform: translateX(-50%);
transition: opacity 2.8s ease;
}


.section-negro.grow .negrotitle{
  opacity: 1;
  

}



.negrotitle2{
    font-family: 'Beauty', sans-serif;
    font-size: clamp(184px, 2.4vw, 197px);
        color: #9fcb9d;

}













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

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

















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













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

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

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












.dynamicfilm3text{
    font-family: 'Avenirlight', sans-serif;
    font-size: clamp(14px, 2.4vw, 17px);
    max-width: 26%;
    text-align: center;
    color: #f6f6f6;
    position: absolute;
    top: 27%;
    right:40%;
    line-height: 1;
   opacity: 0;
z-index: 8;
  transform: translateY(-78px);
transition: opacity 0.8s ease, transform 0.8s ease;
}


.dynamicfilm3-section.grow .dynamicfilm3text{
  opacity: 1;
  transform: translateY(0);

}


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


.hgdynamicfilm1text3{
    cursor: pointer;
    font-family: 'LexendBold', sans-serif;
    color: #72cd8f;
  }















  .dynamicfilm4text{
    font-family: 'Avenirlight', sans-serif;
    font-size: clamp(14px, 2.4vw, 17px);
    max-width: 26%;
    text-align: center;
    color: #f6f6f6;
    position: absolute;
    top: 27%;
    right:40%;
    line-height: 1;
   opacity: 0;
z-index: 8;
  transform: translateY(-78px);
transition: opacity 0.8s ease, transform 0.8s ease;
}


.dynamicfilm4-section.grow .dynamicfilm4text{
  opacity: 1;
  transform: translateY(0);

}


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


.hgdynamicfilm5text3{
    cursor: pointer;
    font-family: 'LexendBold', sans-serif;
    color: #72cd8f;
  }



























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

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


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





.dynamicfilm2text{
    font-family: 'Avenirlight', sans-serif;
    font-size: clamp(14px, 2.4vw, 17px);
    max-width: 26%;
    text-align: center;
    color: #f6f6f6;
    position: absolute;
    top: 27%;
    right:40%;
    line-height: 1;
   opacity: 0;
z-index: 8;
  transform: translateY(-78px);
transition: opacity 0.8s ease, transform 0.8s ease;
}


.dynamicfilm2-section.grow .dynamicfilm2text{
  opacity: 1;
  transform: translateY(0);

}


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


.hgdynamicfilm2text{
    cursor: pointer;
    font-family: 'LexendBold', sans-serif;
    color: #72cd8f;
  }











.wildtitle{
    font-family: 'LEMONMILK', sans-serif;
    font-size: clamp(17px, 2.4vw, 21px);
    text-align: left;
    color: #e8e8e8;
    position: absolute;
    top: 4%;
    left:13%;
    line-height: 1;
   opacity: 0;
   transform: translateY(360px);
transition: opacity 0.8s ease, transform 0.8s ease;}


.section-wild.active .wildtitle{
  opacity: 1;
   transform: translateY(0);

}


.wildtitle2{
    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(24px, 2.4vw, 37px);
    text-align: left;
    color: #141414;
    position: absolute;
    top: 4.2%;
    left:13%;
    line-height: 1;
   opacity: 0;
   transform: translateY(360px);
transition: opacity 0.8s ease, transform 0.8s ease;}


.section-wild.active .wildtitle2{
  opacity: 1;
   transform: translateY(0);

}

      



.dynamicfilm1text{
    font-family: 'Avenirlight', sans-serif;
    font-size: clamp(14px, 2.4vw, 17px);
    max-width: 26%;
    text-align: center;
    color: #f6f6f6;
    position: absolute;
    top: 27%;
    right:40%;
    line-height: 1;
   opacity: 0;
z-index: 8;
  transform: translateY(-78px);
transition: opacity 0.8s ease, transform 0.8s ease;
}


.dynamicfilm1-section.grow .dynamicfilm1text{
  opacity: 1;
  transform: translateY(0);

}


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


.hgdynamicfilm1text2{
    cursor: pointer;
    font-family: 'LexendBold', sans-serif;
    color: #72cd8f;
  }













  














.akutisch3{
    font-family: 'Avenirlight', sans-serif;
    font-size: clamp(14px, 2.4vw, 17px);
    max-width: 26%;
    text-align: left;
    color: #f6f6f6;
    position: absolute;
    top:57%;
    left:13%;
    line-height: 1;
   opacity: 0;

  transform: translateY(228px);
transition: opacity 0.8s ease, transform 0.8s ease;
}


.section-wild.active .akutisch3{
  opacity: 1;
  transform: translateY(0);

}


   .hgakutisch3{
    cursor: pointer;
    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(17px, 3.4vw, 21px);
    color: #0f0f0f;
  }


.hgakutisch23{
    cursor: pointer;
    font-family: 'LexendBold', sans-serif;
    color: #0f0f0f;
  }


.hgakutischu3{
    font-family: 'LexendBold', sans-serif;
    text-decoration: underline;
text-decoration-color: #101010;
text-decoration-thickness: 5px;
text-underline-offset: 
5px;  

  }


















.akutisch2{
    font-family: 'Avenirlight', sans-serif;
    font-size: clamp(14px, 2.4vw, 17px);
    max-width: 26%;
    text-align: left;
    color: #f6f6f6;
    position: absolute;
    top: 21%;
    right:13%;
    line-height: 1;
   opacity: 0;

  transform: translateY(228px);
transition: opacity 0.8s ease, transform 0.8s ease;
}


.section-wild.active .akutisch2{
  opacity: 1;
  transform: translateY(0);

}

.hgakutisch222{

    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(17px, 3.4vw, 21px);
    color: #0f0f0f;
  }


.hgakutisch22{
    cursor: pointer;
    font-family: 'LexendBold', sans-serif;
    color: #0f0f0f;
  }


.hgakutischu2{
    font-family: 'LexendBold', sans-serif;
    text-decoration: underline;
text-decoration-color: #101010;
text-decoration-thickness: 5px;
text-underline-offset: 
5px;  

  }




  



.akutisch{
    font-family: 'Avenirlight', sans-serif;
    font-size: clamp(14px, 2.4vw, 17px);
    max-width: 26%;
    text-align: left;
    color: #f6f6f6;
    position: absolute;
    top: 21%;
    left:13%;
    line-height: 1;
   opacity: 0;

  transform: translateY(228px);
transition: opacity 0.8s ease, transform 0.8s ease;
}


.section-wild.active .akutisch{
  opacity: 1;
  transform: translateY(0);

}


   .hgakutisch{
    cursor: pointer;
    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(17px, 3.4vw, 21px);
    color: #0f0f0f;
  }


.hgakutisch2{
    cursor: pointer;
    font-family: 'LexendBold', sans-serif;
    color: #0f0f0f;
  }


.hgakutischu{
    font-family: 'LexendBold', sans-serif;
    text-decoration: underline;
text-decoration-color: #101010;
text-decoration-thickness: 5px;
text-underline-offset: 
5px;  

  }






.section-need {

  background-color: #839a89;
                                                              padding: 640px 0; /* Oben und unten Abstand */
                                                              position: relative;
                                                          z-index: 1;
                                                          overflow: hidden;
}





.section-need.visible .neddit{
  opacity: 1;
  transform: translateY(0);

}




.tit {
  font-family: 'reenie', sans-serif;
  font-size: clamp(98px,3.4vw, 108px);
  color: #151515;
  position: absolute;
  top: 8%;
  left: 4%;
  line-height: 0.3;
max-width: 50%;
  transform: translateY(-128px);
transition: opacity 0.8s ease, transform 0.8s ease;
}


.tit2 {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(42px, 3.4vw,47px);
  position: absolute;
  top: 7%;
  left: 4%;
    line-height: 0.9;
max-width: 50%;
  color: #151515;

}








.neddituna {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(13px,3.4vw, 17px);
  color: #151515;
  position: absolute;
  top: 27%;
  left: 4%;
  line-height: 1;
  opacity: 0;

  transform: translateY(-128px);
transition: opacity 0.8s ease, transform 0.8s ease;
}


.section-need.visible .neddituna{
  opacity: 1;
  transform: translateY(0);

}

.section-need.visible .hgneddituna{
  opacity: 1;
  transform: translateY(0);

}











  .hgneddituna {
  font-family: 'Avenirmedium', sans-serif;
  font-size: clamp(13px,3.4vw, 17px);
  color: #151515;
 opacity: 0;
transition: opacity 0.8s ease, transform 0.8s ease;
}



  .neddittuyo {
  font-family: 'reaniebeanie', sans-serif;
  font-size: clamp(58px,3.4vw, 62px);
  color: #151515;
  position: absolute;
  top: 72%;
  left: 7%;
  line-height: 0.15;
  opacity: 0;
  max-width: 17%;

  transform: translateY(128px);
transition: opacity 0.8s ease, transform 0.8s ease;
}


.section-need.visible .neddittuyo{
  opacity: 1;
  transform: translateY(0);

}

  .hgneddittuyo {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(13px,3.4vw, 17px);
  color: #151515;
 opacity: 0;
transition: opacity 0.8s ease, transform 0.8s ease;

}

.section-need.visible .hgneddittuyo{
  opacity: 1;
  transform: translateY(0);

}







.neddittodo {
  font-family: 'reaniebeanie', sans-serif;
  font-size: clamp(58px,3.4vw, 62px);
  color: #151515;
  position: absolute;
  top: 72%;
  left: 54%;
  line-height: 0.15;
  opacity: 0;
  max-width: 17%;

  transform: translateY(128px);
transition: opacity 0.8s ease, transform 0.8s ease;
}


.section-need.visible .neddittodo{
  opacity: 1;
  transform: translateY(0);

}

  .hgneddittodo {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(13px,3.4vw, 17px);
  color: #151515;
 opacity: 0;
transition: opacity 0.8s ease, transform 0.8s ease;

}

.section-need.visible .hgneddittodo{
  opacity: 1;
  transform: translateY(0);

}












.nedditella {
  font-family: 'reaniebeanie', sans-serif;
  font-size: clamp(58px,3.4vw, 62px);
  color: #151515;
  position: absolute;
  top: 72%;
  left: 34%;
  line-height: 0.2;
  opacity: 0;
  max-width: 17%;

  transform: translateY(128px);
transition: opacity 0.8s ease, transform 0.8s ease;
}


.section-need.visible .nedditella{
  opacity: 1;
  transform: translateY(0);

}

  .hgnedditella {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(13px,3.4vw, 17px);
  color: #151515;
 opacity: 0;
transition: opacity 0.8s ease, transform 0.8s ease;

}

.section-need.visible .hgnedditella{
  opacity: 1;
  transform: translateY(0);

}






.nedditsiempre {
  font-family: 'reaniebeanie', sans-serif;
  font-size: clamp(58px,3.4vw, 62px);
  color: #151515;
  position: absolute;
  top: 72%;
  left: 74%;
  line-height: 0.2;
  opacity: 0;
  max-width: 17%;

  transform: translateY(128px);
transition: opacity 0.8s ease, transform 0.8s ease;
}


.section-need.visible .nedditsiempre{
  opacity: 1;
  transform: translateY(0);

}

  .hgnedditsiempre {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(13px,3.4vw, 17px);
  color: #151515;
 opacity: 0;
transition: opacity 0.8s ease, transform 0.8s ease;

}

.section-need.visible .hgnedditsiempre{
  opacity: 1;
  transform: translateY(0);

}









.forward-overlay {
  width: 12%;         /* oder z. B. 300px für feste Breite */
  top: 53%;
  left: 74%;
  position: absolute;
     transform: translateY(228px);
transition: opacity 0.8s ease, transform 0.8s ease;
}

.section-need.visible .forward-overlay{
  opacity: 1;
  transform: translateY(0);

}









.section-need.visible .rojo-overlay{
  opacity: 1;
  transform: translateY(0);

}



.eggwhite-overlay {
  width: 12%;         /* oder z. B. 300px für feste Breite */
  top: 53%;
  left: 55%;
  position: absolute;
     transform: translateY(228px);
transition: opacity 0.8s ease, transform 0.8s ease;
}





.section-need.visible .eggwhite-overlay{
  opacity: 1;
  transform: translateY(0);

}

.rojo-overlay {
  width: 12%;         /* oder z. B. 300px für feste Breite */
  top: 53%;
  left: 11%;
  position: absolute;
     transform: translateY(228px);
transition: opacity 0.8s ease, transform 0.8s ease;
}





.section-need.visible .vallarta-overlay{
  opacity: 1;
  transform: translateY(0);

}



.vallarta-overlay {
  width: 12%;         /* oder z. B. 300px für feste Breite */
  top: 53%;
  left: 34%;
  position: absolute;
     transform: translateY(228px);
transition: opacity 0.8s ease, transform 0.8s ease;
}









    .line-container {
position: absolute;
left: 13%;
top: 60.5%;
height: 5px;
overflow: hidden;
opacity: 0;
   transform: translateY(160px);
transition: opacity 2.8s ease, transform 0.8s ease;}


.section-wild.active  .line-container {
  opacity: 1;
   transform: translateY(0);

}

.black-line {
height: 40px;
max-width: 25%;
background-color: rgb(21, 21, 21);
animation: growLine 2s ease forwards;
  opacity: 0;
transition: opacity 0.3s ease, transform 1.3s ease;
}

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

.section-wild.active .black-line{
opacity: 1;
 animation: growLine 5s ease forwards;

}

.section-wild.active .line-container{
opacity: 1;
 animation: growLine 5s ease forwards;

}












    .line-container2 {
position: absolute;
left: 13%;
top: 24.5%;
height: 5px;
overflow: hidden;
opacity: 0;
   transform: translateY(160px);
transition: opacity 2.8s ease, transform 0.8s ease;}


.section-wild.active  .line-container2 {
  opacity: 1;
   transform: translateY(0);

}


.black-line2 {
height: 40px;
max-width: 25%;
background-color: rgb(21, 21, 21);
animation: growLine 2s ease forwards;
  opacity: 0;
transition: opacity 0.3s ease, transform 1.3s ease;
}

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

.section-wild.active .black-line2{
opacity: 1;
 animation: growLine 5s ease forwards;

}

.section-wild.active .line-container2{
opacity: 1;
 animation: growLine 5s ease forwards;

}














    .line-container3 {
position: absolute;
left: 61%;
top: 11.5%;
height: 5px;
overflow: hidden;
opacity: 0;
   transform: translateY(160px);
transition: opacity 2.8s ease, transform 0.8s ease;}


.section-wild.active  .line-container2 {
  opacity: 1;
   transform: translateY(0);

}


.black-line3 {
height: 40px;
max-width: 25%;
background-color: rgb(21, 21, 21);
animation: growLine 2s ease forwards;
  opacity: 0;
transition: opacity 0.3s ease, transform 1.3s ease;
}

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

.section-wild.active .black-line3{
opacity: 1;
 animation: growLine 5s ease forwards;

}

.section-wild.active .line-container3{
opacity: 1;
 animation: growLine 5s ease forwards;

}












    .line-container4 {
position: absolute;
left: 61%;
top: 60.5%;
height: 5px;
overflow: hidden;
opacity: 0;
   transform: translateY(160px);
transition: opacity 2.8s ease, transform 0.8s ease;}


.section-wild.active  .line-container4 {
  opacity: 1;
   transform: translateY(0);

}


.black-line4 {
height: 40px;
max-width: 11%;
background-color: rgb(21, 21, 21);
animation: growLine 2s ease forwards;
  opacity: 0;
transition: opacity 0.3s ease, transform 1.3s ease;
}

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

.section-wild.active .black-line4{
opacity: 1;
 animation: growLine 5s ease forwards;

}

.section-wild.active .line-container4{
opacity: 1;
 animation: growLine 5s ease forwards;

}

















.circle1 {
width: 50px;
height: 50px;
background-color: #070707;
border-radius: 50%; /* macht es zum Kreis */
position: absolute;
bottom:51%;
left: 50%;
     opacity: 0;
transform: translateY(440px);
transition: opacity 1.3s ease, transform 1.3s ease;
}

.section-wild.visible .circle1 {
opacity: 1;
transform: translateY(0);
}


.circle2 {
width: 50px;
height: 50px;
background-color: #070707;
border-radius: 50%; /* macht es zum Kreis */
position: absolute;
bottom:51%;
left: 35%;
     opacity: 0;
transform: translateY(-440px);
transition: opacity 1.3s ease, transform 1.3s ease;
}

.section-wild.visible .circle2 {
opacity: 1;
transform: translateY(0);
}







.circle3 {
width: 50px;
height: 50px;
background-color: #070707;
border-radius: 50%; /* macht es zum Kreis */
position: absolute;
bottom:51%;
left: 20%;
     opacity: 0;
transform: translateY(440px);
transition: opacity 1.3s ease, transform 1.3s ease;
}

.section-wild.visible .circle3 {
opacity: 1;
transform: translateY(0);
}





.circle4 {
width: 50px;
height: 50px;
background-color: #070707;
border-radius: 50%; /* macht es zum Kreis */
position: absolute;
bottom:51%;
left: 68%;
     opacity: 0;
transform: translateY(-440px);
transition: opacity 1.3s ease, transform 1.3s ease;
}

.section-wild.visible .circle4 {
opacity: 1;
transform: translateY(0);
}














.hover2-card {
  text-decoration: none;

display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: transform 0.3s ease;
position: absolute;
bottom:4%;
left: 7%;

  opacity: 0;

transition: opacity 3.3s ease
}

.section-wild.visible .hover2-card {
opacity: 1;

}

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

}

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

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

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

/* Text unter dem Bild */
.hover2txt {
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(12px, 2vw, 15px);
color: #2900205e;
margin-top: 100px; /* etwa Bildhöhe + Abstand */
text-align: left;
transition: color 0.3s ease;
  max-width: 40%;

}

.hover2-card:hover .hover2txt {
color: #fcfcfc;
}

.hghover2txt {
font-family: 'Avenirlight', sans-serif;
font-size: clamp(12px, 2vw, 15px);
color: #2900205e;
  transition: color 0.3s ease;

}

.hover2-card:hover .hghover2txt {
color: #fcfcfc;
}













.hover3-card {

display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: transform 0.3s ease;
position: absolute;
bottom:11%;
left: 36%;

  opacity: 0;

transition: opacity 3.3s ease
}

.section-wild.visible .hover3-card {
opacity: 1;

}

/* Bildcontainer – zentriert */
.image3-container {
position: absolute;
left: 25%;
width: 64px; /* ⬅️ Bildgröße kleiner! */
height: auto;
margin-top: 0 auto;

}

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

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

/* Text unter dem Bild */
.hover3txt {
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(12px, 2vw, 15px);
color: #2900205e;
margin-top: 100px; /* etwa Bildhöhe + Abstand */
text-align: left;
transition: color 0.3s ease;
  max-width: 50%;

}

.hover3-card:hover .hover3txt {
color: #fcfcfc;
}

.hghover3txt {
font-family: 'Avenirlight', sans-serif;
font-size: clamp(12px, 2vw, 15px);
color: #2900205e;
  transition: color 0.3s ease;

}

.hover3-card:hover .hghover3txt {
color: #fcfcfc;
}


.hglink1 {
font-family: 'Avenirmedium', sans-serif;
font-size: clamp(12px, 2vw, 15px);
color: #2900205e;
  transition: color 0.3s ease;

}

.hglink1:hover {
font-size: clamp(12px, 2vw, 15px);
text-decoration: underline;
text-decoration-color: #fcfcfc;
text-underline-offset: 
3px;  color: #f6f6f6;

}

.hover3-card:hover .hglink1 {
color: #171717;
}















.hover4-card {

display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: transform 0.3s ease;
position: absolute;
bottom:69%;
left:64%;

  opacity: 0;

transition: opacity 3.3s ease
}

.section-wild.visible .hover4-card {
opacity: 1;

}

/* Bildcontainer – zentriert */
.image4-container {
position: absolute;
bottom: -1%;
left: 6%;
width: 64px; /* ⬅️ Bildgröße kleiner! */
height: auto;
margin-top: 0 auto;

}

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

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



/* Text unter dem Bild */
.hover4txt {
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(12px, 2vw, 15px);
color: #2900205e;
margin-top: 100px; /* etwa Bildhöhe + Abstand */
text-align: left;
transition: color 0.3s ease;
  max-width: 90%;

}

.hover4-card:hover .hover4txt {
color: #fcfcfc;
}

.hghover4txt {
font-family: 'Avenirlight', sans-serif;
font-size: clamp(12px, 2vw, 15px);
color: #2900205e;
  transition: color 0.3s ease;

}

.hover4-card:hover .hghover4txt {
color: #fcfcfc;
}


.hglink1 {
font-family: 'Avenirmedium', sans-serif;
font-size: clamp(12px, 2vw, 15px);
color: #2900205e;
  transition: color 0.3s ease;

}

.hover4:hover {
font-size: clamp(12px, 2vw, 15px);
text-decoration: underline;
text-decoration-color: #fcfcfc;
text-underline-offset: 
3px;  color: #f6f6f6;

}

.hover4-card:hover .hglink1 {
color: #171717;
}
















.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: 12%;
  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: 5%;         /* oder z. B. 300px für feste Breite */
  max-width: 420px;    /* Bild wird nie größer als 600px */
  top: 27%;
  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;
  top: 27%;
  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 */
  top: 42%;
  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;
  top: 42%;
  left: 30%;
  line-height: 1.4;
}









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



.Vorträgelein-overlay {
  width: 100%;
  top:-8%;
  left: 2%;
  position: absolute;
  display: block;
  z-index: 1; /* Damit der Schatten über dem oberen Bereich liegt */
  overflow: hidden;
}



.section-5 {
  background-color: #111111;
  padding: 330px 0; /* Oben und unten Abstand */
  position: relative;
  box-shadow: 0 20px -50px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */

}






.rolf-container {
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: absolute;
  bottom: 48%;
  left: 27%;

}

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

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

.icon.hover {
  opacity: 0;
}

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

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


.rolf-container .hgrolf-text {
  display: inline-block;
  font-family: 'LEMONMILKLIGHT', sans-serif;
  transition: color 0.3s ease-in-out;
  color:#cccccc95;     }



.rolf-container:hover .rolf-text {
  display: inline-block;
  font-family: 'Avenirmedium', sans-serif;

  color: #191919;      }

 .rolf-container:hover .hgrolf-text {
            display: inline-block;
            font-family: 'LEMONMILKBOLD', sans-serif;
text-decoration: underline;
text-decoration-color: white;
text-decoration-thickness: 4px;
text-underline-offset: 5px;
transition: color 0.6s ease-in-out;
            color: #171717;      }








.energie-container {
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: absolute;
  bottom: 32%;
  left: 27%;

}

/* Bild-Wrapper */
.energie-wrapper {
  position: relative;
  width: 5%; /* 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: 6%;
  font-size: clamp(16px, 2.6vw, 18px);
  font-family: 'Avenirlight', sans-serif;
  color: #cccccc95;
  max-width: 60%;
}


.energie-container .highlightenergieone-text {
  display: inline-block;
  font-family: 'LEMONMILKLIGHT', sans-serif;
  transition: color 0.3s ease-in-out;
  color:#cccccc95;     }



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

  color: #191919;      }

 .energie-container:hover .highlightenergieone-text {
            display: inline-block;
            font-family: 'LEMONMILKBOLD', sans-serif;
text-decoration: underline;
text-decoration-color: white;
text-decoration-thickness: 4px;
text-underline-offset: 5px;
transition: color 0.6s ease-in-out;
            color: #171717;      }

         













.stoffwechsel-container {
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: absolute;
  bottom: 17%;
  left: 27%;

}

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

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

.icon.hover {
  opacity: 0;
}

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

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


.stoffwechsel-container .highlightstoffwechseleone-text {
  display: inline-block;
  font-family: 'LEMONMILKLIGHT', sans-serif;
  transition: color 0.3s ease-in-out;
  color:#cccccc95;     }



.stoffwechsel-container:hover .stoffwechsel-text {
  display: inline-block;
  font-family: 'Avenirmedium', sans-serif;

  color: #191919;      }

 .stoffwechsel-container:hover .highlightstoffwechseleone-text {
            display: inline-block;
            font-family: 'LEMONMILKBOLD', sans-serif;
text-decoration: underline;
text-decoration-color: white;
text-decoration-thickness: 4px;
text-underline-offset: 5px;
transition: color 0.6s ease-in-out;
            color: #171717;      }








.Hormone-container {
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: absolute;
  bottom: 3%;
  left: 27%;

}

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

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

.icon.hover {
  opacity: 0;
}

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

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


.Hormone-container .highlightHormoneone-text {
  display: inline-block;
  font-family: 'LEMONMILKLIGHT', sans-serif;
  transition: color 0.3s ease-in-out;
  color:#cccccc95;     }



.Hormone-container:hover .Hormone-text {
  display: inline-block;
  font-family: 'Avenirmedium', sans-serif;

  color: #191919;      }

 .Hormone-container:hover .highlightHormoneone-text {
            display: inline-block;
            font-family: 'LEMONMILKBOLD', sans-serif;
text-decoration: underline;
text-decoration-color: white;
text-decoration-thickness: 4px;
text-underline-offset: 5px;
transition: color 0.6s ease-in-out;
            color: #171717;      }

            s




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
















                                    














          
                                                            


                                                            .section-6 {
                                                              background-color: #111111;
                                                              padding: 280px 0; /* Oben und unten Abstand */
                                                              position: relative;
                                                          z-index: 1;
                                                            }


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

                                                            


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

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

}


.titleseven1{
  font-family: 'LEMONMILKLIGHT', sans-serif;
  font-size: clamp(27px, 2.4vw, 31px);
  max-width: 40%;
  color: #101010;
  position: absolute;
  top: 4%;
  right:11%;
  line-height: 1;
  text-align: right;
}

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

}













.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:53%;
  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;

}






.ttitjd{
  font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(17px, 2.4vw, 21px);

  max-width: 40%;
  color: #000000;
  position: absolute;
  top: 4%;
  max-width: 30%;
  text-align: left;
  left: 4%;
  line-height: 1;
    transform: translateY(128px);
  transition: opacity 0.8s ease, transform 0.8s ease;
opacity: 0;
}

.hgttitjd {
  font-family: 'LEMONMILKBOLD', sans-serif;
  opacity: 0;
    color: #f0f0f0;
  font-size: clamp(27px, 2.4vw, 31px);
    max-width: 50%;


}

.section-3.active .ttitjd{
    transform: translateY(0);
opacity: 1;
}

.section-3.active .hgttitjd{
    transform: translateY(0);
opacity: 1;
}







.section-thies {
  background-color: #7E665B;
  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: 3;
overflow: hidden;
}





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

.hgtm {
  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: #f3f3f3;
  position: absolute;
  text-align: left;
top: 4%;    left: 4%;
  line-height: 1;
  max-width: 40%;
}

  .section-10:hover .title3{
  color: #f0f0f0;
  }

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

}

  .section-10:hover .hgtitle3{
    color: #f0f0f0;
    }







    

    .section-10 .text3 {
color: #f8f8f8;
   font-family: 'Avenirlight', sans-serif;
  font-size: clamp(14px, 3vw, 17px);
  position: absolute;
  text-align: left;
top: 27%;    left: 4%;
  line-height: 1.2;
  opacity: 0;
max-width: 32%;
}

/* Hover-Zustand */
.section-10:hover .text3{
opacity: 1;

}



   .section-10 .hgtext3 {

   font-family: 'LexendBold', sans-serif;
  color: #e73092;
  opacity: 0;

}

/* Hover-Zustand */
.section-10:hover .hgtext3{
opacity: 1;

}




    
.section-7.from-section-10 {
background-color: #101010;
    
transition: background-color 0.4s ease;
z-index: 0;
}





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

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

    


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

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


.section-10:hover  .einszueins-button {
display: inline-block;
padding: 14px 120px;
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: 6px solid #efefef;
border-radius: 32px;
text-decoration: none;
transition: all 0.3s ease;
}

.section-10:hover   .einszueins-button:hover {
background-color: #e73092;
color: white;
}







.section-10 .fly-in-image3 {
position: absolute;
right: 13%;
width: 37%;
top: 5%;
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-fullbild{
  background-color: #B3B5B7;
  padding: 300px 0; /* Oben und unten Abstand */
  position: relative;
  z-index: 1; /* Damit der Schatten über dem oberen Bereich liegt */
}


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


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




.ansprechpartner-overlay {

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





.section-invite{
  background-color: #259e00;
  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 */

}

.section-invite.from-section-8 {
background-color: #151515;
    
z-index: 0;
}








.thiestext {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
  max-width: 50%;
  color: #0e0e0e;
  position: absolute;
  top: 19%;
  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-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.2;
  opacity: 0;
}

.section-7.visible .fivesourceone-bold {
opacity: 1;
}



.fivesourceone-text {


 font-family: 'Avenirlight', sans-serif;
  font-size: clamp(13px, 3vw, 17px);
  max-width: 50%;
  color: #0c0c0c;
  position: absolute;
  top: 24%;
  right: 11%;
  line-height: 1.0;
  max-width: 30%;
  text-align: right;
      opacity: 0;
transform: translateY(540px);
transition: opacity 1.3s ease, transform 1.3s ease;
}

.section-7.visible .fivesourceone-text {
opacity: 1;
transform: translateY(0);
}

.fivesourceoneone-text{
  font-family: 'LexendBold', sans-serif;
  color: #c21e65;

}























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

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


}

.imtxtb {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(12px, 2.4vw, 14px);
  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;
  top: 62%;
  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: 'Avenirmedium', sans-serif;
  color: #f5f5f5;
  text-decoration: none;
}

.imtxtb2:hover {
  color: #181818;
}







.Thies-overlay {
  width: 24%;         /* oder z. B. 300px für feste Breite */
  top: 27%;
  left: 11%;
  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: 710px 0; /* Oben und unten Abstand */
position: relative;
z-index: 5; /* 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;
z-index: 0;
}




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

}

/* 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;
z-index: 5;

}

/* 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;
z-index: 5;

}

/* 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;
z-index: 5;

}

/* 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;
z-index: 5;

}

/* 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;
z-index: 5;

}

/* 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;
z-index: 5;

}

/* 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;
z-index: 5;

}

/* 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;
z-index: 5;

}

/* 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;
z-index: 5;

}

/* 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;
z-index: 5;

}

/* 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;
z-index: 5;

}

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
















                .secone-container {
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: 22%;
    left: 4%;
    max-width: 40%;

  }
  
  /* Bild-Wrapper */
  .secone-wrapper {
    position: relative;
    width: 7%; /* frei skalierbar */
    height: auto;
    
  }
  
  .icon {
    width: 100%;
    height: auto;
    position: absolute;
    top: 20%;
    top: 0;
    left: 0;
  }
  
  .icon.hover {
    opacity: 0;
  }
  .icon.default {
  opacity: 0.4; /* macht das Standard-Icon transparenter */
}

  
  .secone-container:hover .icon.default {
    opacity: 0;
  }
  .secone-container:hover .icon.hover {
    opacity: 1;
  }
  
  /* Text */
  .seconetxt {
    text-align: left;
   margin-top: 2.5%;
   margin-left: 13%;
       line-height: 1.2;
width: 100%;
    font-size: clamp(10px, 1.5vw, 18px);
    font-family: 'Avenirlight', sans-serif;
    color: #ededed54;
  }


  .secone-container .hxseconetxt {
    display: inline-block;
    font-family: 'LEMONMILKBOLD', sans-serif;
         }


  
  .secone-container:hover .seconetxt {
    display: inline-block;
    color: #f3f3f3;      }



         .secone-container:hover .hgsecbold {
    display: inline-block;
    font-family: 'Avenirmedium', sans-serif;
text-decoration: underline;
text-decoration-color: #1d1d1d;
text-decoration-thickness: 3px;
text-underline-offset: 3px;
         }



.secone-container .hgsecbold {
    display: inline-block;
    font-family: 'Avenirmedium', sans-serif;
    
         }













    
                .sectwo-container {
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: 37%;
    left: 4%;
    max-width: 40%;

  }
  
  /* Bild-Wrapper */
  .sectwo-wrapper {
    position: relative;
    width: 5%; /* frei skalierbar */
    height: auto;
  }
  
  .icon {
    width: 100%;
    height: auto;
    position: absolute;
    top: 20%;
    top: 0;
    left: 0;
  }
  
  .icon.hover {
    opacity: 0;
  }
    .icon.default {
  opacity: 0.4; /* macht das Standard-Icon transparenter */
}
  
  .sectwo-container:hover .icon.default {
    opacity: 0;
  }
  .sectwo-container:hover .icon.hover {
    opacity: 1;
  }
  
  /* Text */
  .sectwotxt {
    text-align: left;
    margin-top: 1.1%;   margin-left: 10%;
       line-height: 1.4;
width: 200%;
    font-size: clamp(10px, 1.5vw, 18px);
    font-family: 'Avenirlight', sans-serif;
    color: #ededed54;
  }


  .sectwo-container .hgsectwo {
    display: inline-block;
    font-family: 'LEMONMILKBOLD', sans-serif;
         }

         .sectwo-container:hover .hgsecbold {
    display: inline-block;
    font-family: 'Avenirmedium', sans-serif;
color: #1d1d1d;
         }


  
  .sectwo-container:hover .sectwotxt {
    display: inline-block;
    color: #f3f3f3;      }


.sectwo-container .hgsecbold {
    display: inline-block;
    font-family: 'Avenirmedium', sans-serif;
    
         }

.sectwo-container .hgsecbols {
    display: inline-block;
    font-family: 'Avenirmedium', sans-serif;
    
         }

    
         .sectwo-container:hover .hgsecbols {
    display: inline-block;
    font-family: 'Avenirmedium', sans-serif;
text-decoration: underline;
text-decoration-color: #1d1d1d;
text-decoration-thickness: 3px;
text-underline-offset: 3px;
         }














             
.sectthree-container {
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: 56%;
    left: 4%;
    max-width: 40%;

  }
  
  /* Bild-Wrapper */
  .sectthree-wrapper {
    position: relative;
    width: 5%; /* frei skalierbar */
    height: auto;
  }
  
    .icon.default {
  opacity: 0.4; /* macht das Standard-Icon transparenter */
}

  .icon {
    width: 100%;
    height: auto;
    position: absolute;
    top: 20%;
    top: 0;
    left: 0;
  }
  
  .icon.hover {
    opacity: 0;
  }
  
  .sectthree-container:hover .icon.default {
    opacity: 0;
  }
  .sectthree-container:hover .icon.hover {
    opacity: 1;
  }
  
  /* Text */
  .sectthreetxt {
    text-align: left;
    margin-top: 1.1%;  
     margin-left: 10%;
       line-height: 1.4;
width: 200%;
    font-size: clamp(10px, 1.5vw, 18px);
    font-family: 'Avenirlight', sans-serif;
    color: #ededed54;
  }


  .sectthree-container .hgsectthreetxt {
    display: inline-block;
    font-family: 'LEMONMILKBOLD', sans-serif;
         }

         .sectthree-container:hover .hgsecboli {
    display: inline-block;
    font-family: 'Avenirmedium', sans-serif;
color: #1d1d1d;
         }


  
  .sectthree-container:hover .sectthreetxt {
    display: inline-block;
    color: #f3f3f3;      }


.sectthree-container .hgsecboli {
    display: inline-block;
    font-family: 'Avenirmedium', sans-serif;
    
         }


         
.sectthree-container .hgsecbols {
    display: inline-block;
    font-family: 'Avenirmedium', sans-serif;
    
         }

    
         .sectthree-container:hover .hgsecbols {
    display: inline-block;
    font-family: 'Avenirmedium', sans-serif;
text-decoration: underline;
text-decoration-color: #1d1d1d;
text-decoration-thickness: 3px;
text-underline-offset: 3px;
         }











         


             
.secfour-container {
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: 73%;
    left: 4%;
    max-width: 40%;

  }
  
  /* Bild-Wrapper */
  .secfour-wrapper {
    position: relative;
    width: 5%; /* frei skalierbar */
    height: auto;
  }
  
  .icon {
    width: 100%;
    height: auto;
    position: absolute;
    top: 20%;
    top: 0;
    left: 0;
  }
  

    .icon.default {
  opacity: 0.4; /* macht das Standard-Icon transparenter */
}


  .icon.hover {
    opacity: 0;
  }
  
  .secfour-container:hover .icon.default {
    opacity: 0;
  }
  .secfour-container:hover .icon.hover {
    opacity: 1;
  }
  
  /* Text */
  .secfourtxt {
    text-align: left;
    margin-top: 1.1%;
   margin-left: 10%;
       line-height: 1.4;
width: 200%;
    font-size: clamp(10px, 1.5vw, 18px);
    font-family: 'Avenirlight', sans-serif;
    color: #ededed54;
  }


  .secfour-container .hgsecfourtxt {
    display: inline-block;
    font-family: 'LEMONMILKBOLD', sans-serif;
         }

         .secfour-container:hover .hgsecboli {
    display: inline-block;
    font-family: 'Avenirmedium', sans-serif;
color: #1d1d1d;
         }


  
  .secfour-container:hover .secfourtxt {
    display: inline-block;
    color: #f3f3f3;      }


.secfour-container .hgsecboli {
    display: inline-block;
    font-family: 'Avenirmedium', sans-serif;
    
         }


         
.secfour-container .hgsecbols {
    display: inline-block;
    font-family: 'Avenirmedium', sans-serif;
    
         }

    
         .secfour-container:hover .hgsecbols {
    display: inline-block;
    font-family: 'Avenirmedium', sans-serif;
text-decoration: underline;
text-decoration-color: #1d1d1d;
text-decoration-thickness: 3px;
text-underline-offset: 3px;
         }



























.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: #329551;
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: #329551;
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 */
}







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





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





  /* Hover-Effekt */
  .wordlinkfirmentop:hover, .wordlink1-1top:hover, .wordlinküberNULNEBLAtop:hover, .wordlinkknowhowtop:hover, .wordlinkkontakttop:hover  {
    color: #259e00;
        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-asd {
    background-color: #8ca69f;
    padding: 130px 0; /* Oben und unten Abstand */
    position: relative;
z-index: 1;
overflow: hidden;
transition: background-color 0.4s ease; }





.titulio {
opacity: 0;
transform: translateX(-340px);


transition: opacity 1.3s ease, transform 1.3s ease;
color: white;
font-size: clamp(54px, 4.7vw, 77px);
text-align: center;
position: absolute;
z-index: 2;
 font-family: 'LEMONMILKLIGHT', sans-serif;
 max-width: 60%;
bottom: 4%;
left: 4%;
line-height: 0.8;
text-align: left;
}

.section-asd.visible .titulio {
opacity: 1;
transform: translateY(0);
}


.hgtitulio {
opacity: 0;
color: #103b2f ;
 font-family: 'LEMONMILKBOLD', sans-serif;
 
}

.section-asd.visible .hgtitulio {
opacity: 1;
transform: translateY(0);
}










 .section-asdmento {
    background-color: #8ca69f;
    padding: 20px 0; /* Oben und unten Abstand */
    position: relative;
z-index: 1;
overflow: hidden;
 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);
}





.filmasdone {
opacity: 0;
transform: translateY(-340px);


transition: opacity 1.3s ease, transform 1.3s ease;
color: white;
font-size: clamp(14px, 3.7vw, 17px);
text-align: center;
position: absolute;
z-index: 2;
 font-family: 'Avenirlight', sans-serif;
 max-width: 40%;
bottom: 30%;

left: 30%;
}

.section-asd1.visible .filmasdone {
opacity: 1;
transform: translateY(0);
}

.hgfilmasdone {
display: inline-block;
 font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(12px, 2vw, 18px);
transition: color 0.8s ease;
color: #00d77a;
}

.section-asd1.visible .filmasdone {
opacity: 1;
transform: translateY(0);
}


.hgfilmasdone1 {
display: inline-block;
 font-family: 'Avenirmedium', sans-serif;
font-size: clamp(12px, 2vw, 18px);
transition: color 0.8s ease;
color: #00d77a;
}

.section-asd1.visible .filmasdone1 {
opacity: 1;
transform: translateY(0);
}







.filmasdos {
opacity: 0;
transform: translateY(-340px);


transition: opacity 1.3s ease, transform 1.3s ease;
color: white;
font-size: clamp(14px, 3.7vw, 17px);
text-align: center;
position: absolute;
z-index: 2;
 font-family: 'Avenirlight', sans-serif;
 max-width: 40%;
bottom: 30%;

left: 30%;
}

.section-asd2.visible .filmasdos {
opacity: 1;
transform: translateY(0);
}

.hgfilmasdos {
display: inline-block;
 font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(12px, 2vw, 18px);
transition: color 0.8s ease;
color: #00d77a;
}

.section-asd2.visible .hgfilmasdos {
opacity: 1;
transform: translateY(0);
}


.hgfilmasdos2 {
display: inline-block;
 font-family: 'Avenirmedium', sans-serif;
font-size: clamp(12px, 2vw, 18px);
transition: color 0.8s ease;
color: #00d77a;
}

.section-asd2.visible .hgfilmasdos2 {
opacity: 1;
transform: translateY(0);
}
















.filmastodo {
opacity: 0;
transform: translateY(-340px);


transition: opacity 1.3s ease, transform 1.3s ease;
color: white;
font-size: clamp(14px, 3.7vw, 17px);
text-align: center;
position: absolute;
z-index: 2;
 font-family: 'Avenirlight', sans-serif;
 max-width: 40%;
bottom: 30%;
left: 30%;
}

.section-asd3.visible .filmastodo {
opacity: 1;
transform: translateY(0);
}

.hgfilmastodo {
display: inline-block;
 font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(12px, 2vw, 18px);
transition: color 0.8s ease;
color: #00d77a;
}

.section-asd3.visible .hgfilmastodo {
opacity: 1;
transform: translateY(0);
}


.hgfilmastodo2 {
display: inline-block;
 font-family: 'Avenirmedium', sans-serif;
font-size: clamp(12px, 2vw, 18px);
transition: color 0.8s ease;
color: #00d77a;
}

.section-asd3.visible .hgfilmastodo2 {
opacity: 1;
transform: translateY(0);
}











.section-asd1.visible {
    background-color: #8ca69f;

  }






  
  .section-asd.active {
    background-color: #8ca69f;

  }

      .section-need.from-section-asd {
background-color: #8ca69f;
    
transition: background-color 0.4s ease;
z-index: 0;
}




.section-asd1 {
 
    padding: 280px 0; /* Oben und unten Abstand */
    position: relative;
z-index: 1;
overflow: hidden;

  }

  .section-asd2 {
 
    padding: 280px 0; /* Oben und unten Abstand */
    position: relative;
z-index: 1;
overflow: hidden;

  }

  .section-asd3 {
 
    padding: 280px 0; /* Oben und unten Abstand */
    position: relative;
z-index: 1;
overflow: hidden;

  }






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

  


  .section-10:hover {
    background-color: #101010;
    transition: opacity 0.6s ease-in-out; /* Sanfter Übergang für Opazität */
     box-shadow: 20px -20px 20px 10px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
transition: background-color 0.4s ease;
  }



  .section-10:hover .title3{
  color: #f0f0f0;
  }


  .section-10:hover .hgtitle3{
    color: #f0f0f0;
    }


  
      .section-10.from-section-8 {
background-color: #101010;
    
transition: background-color 0.4s ease;
z-index: 0;
}







.padebook-overlay {
width: 51%;         /* oder z. B. 300px für feste Breite */
top: 17%;
right: 7%;
position: absolute;
display: block;      /* Verhindert Lücken unter dem Bild */
z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */
}



.lock-overlay {
width: 3%;         /* oder z. B. 300px für feste Breite */
top: 39%;
left: 37%;
position: absolute;
display: block;      /* Verhindert Lücken unter dem Bild */
z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */

}


.locktx {
font-family: 'Avenirmedium', sans-serif;
font-size: clamp(4px, 1.6vw, 18px);
color: #181818;
top: 39%;
left: 13%;
max-width: 27%;


position: absolute;

z-index: 10; /* Über andere Elemente */
}


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

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

}






.Krankheitserfassung-overlay {
width: 21%;         /* oder z. B. 300px für feste Breite */
bottom: 7%;
right: 7%;
position: absolute;
display: block;      /* Verhindert Lücken unter dem Bild */
z-index: 1; /* Damit der Schatten über dem oberen Bereich liegt */

}



.knowhow1-overlay {
width: 21%;         /* oder z. B. 300px für feste Breite */
bottom: 7%;
right: 17%;
position: absolute;
display: block;      /* Verhindert Lücken unter dem Bild */
z-index: 3; /* Damit der Schatten über dem oberen Bereich liegt */

}






.insta-overlay {
position: absolute;
bottom: 37%;
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: #259e00;
      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: #0c0c0c;
      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: #f7f7f7;

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

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

      font-size: clamp(4px, 1.6vw, 18px);
      color: #0c0c0c;
      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: #f7f7f7;
      }
    
    
    
    
    
      .wordlinknulneblahome {
        font-family: 'LEMONMILKBOLD', sans-serif; /* Schriftart anwenden */
        font-size: clamp(28px, 3.2vw, 34px); /* Schriftgröße */
        color: #0c0c0c; /* 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: #f7f7f7; /* Farbänderung beim Hover */
      }
    
    
      .logo-overlay {
        width: 2.5%;         /* oder z. B. 300px für feste Breite */
        max-width: 420px;    /* Bild wird nie größer als 600px */
        bottom: 4%;
        right: 15.5%;
        position: absolute;
        display: block;      /* Verhindert Lücken unter dem Bild */
      }
    
    
      .fusszeile-text {
        font-family: 'Avenirmedium', 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: #b60046;
      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: #500024;
      color: #ffffff;
    }