/* 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;
  }
  
  
  /* Section-Styles */
main {
    margin: 0;
  }

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



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


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

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

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


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


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

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

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

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

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

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


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




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

 

.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.459); /* 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.default {
    opacity: 0;
  }
  .NULNEBLA-container:hover .icon.hover {
    opacity: 1;
  }
  
  /* Text */
  .NULNEBLA-text {
    text-align: left;
   margin-top: 3%;
   margin-left: 33%;
    font-size: clamp(48px, 8vw, 54px);
    font-family: 'LEMONMILKBOLD', sans-serif;
    color:  #f5f5f5;
    max-width: 520px;
  }



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


  
  
  





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

}

.faq10-pop-button:hover {
  background-color: #d90074;
}

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

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













.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:  35%;
cursor: pointer;
position: absolute;
transition: background-color 0.3s ease;
max-width: 27%;
line-height: 1.5;
white-space: normal;
word-wrap: break-word;

}

.faq9-pop-button:hover {
  background-color: #d90074;
}

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

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











 .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: 43%;
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: #d90074;
}

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

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





 .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: 58%;
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: #d90074;
}

.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-2 {
    box-shadow: 20px -20px 20px 70px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
    z-index: 5;
    background-color: #CDD1DC;
    padding: 540px 0; /* Oben und unten Abstand */
    position: relative;
    box-shadow: 0 20px -50px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
    /* -------------------------------
     Box-Shadow erklärt:
     0     → Kein horizontaler Versatz (bleibt zentriert)
     20px  → Vertikaler Versatz nach unten (Schatten fällt nach unten)
     40px  → Weichzeichner-Radius (wie verschwommen der Schatten wirkt)
     -10px → Ausbreitung (negativ = kompakter)
     rgba(0, 0, 0, 0.6) → Farbe: halbtransparenter Schwarzton
  -------------------------------- */
    z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */
  }



    .section-s {
   
    background-color: #CDD1DC;
    padding: 100px 0; /* Oben und unten Abstand */
    position: relative;
    z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */
  }




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





  

  .Buchbarmitquinfinity-overlay {
    position: absolute; /* Absolute Positionierung */
    top: 1%; /* Position 5% von unten */
  left: 50%;
    transform: translateX(-50%);    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 */
  }




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


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

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





  .twotitle-text {
    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(34px, 3.4vw, 38px);
    color: #c21e65;
    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: 15%;
    left: 4%;
    line-height: 1.4;
  }

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

  }

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








  .breadcrumb-overlay {
    font-size: clamp(12px, 1.5vw, 16px);
    top: 9%;
    left: 3%;
    margin: 20px;
    color: #e73092;
    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: #e73092;
    font-family: 'louisgeorgecafebold', sans-serif;

  }
  
  .breadcrumb-overlay span {
    margin: 0 8px;
    color: #e73092;
    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;
}





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

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


  .section-3 {
     background-color: #c21e65;
    box-shadow: 20px -20px 20px 10px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
    padding: 820px 0; /* Oben und unten Abstand */
    position: relative;
    transition: color 1.2s ease-in-out;
    z-index: 6;

  }





  .section-3.active {
    background-color: #c21e65;
    box-shadow: 20px -20px 20px 10px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
  transition: background-color 0.4s ease;

  
  }

  .section-3.from-section-wild {
  background-color: #c21e65;
      
  z-index: 0;
}

  .section-wild.from-section-need {
  background-color: #c21e65;
      
  transition: background-color 0.4s ease;
     box-shadow: 20px -20px 20px 70px rgba(104, 104, 104, 0.6); /* Schatten nach unten */

                                                                z-index: 5;
}


 .section-wild {
    background-color: #c21e65;
    padding: 440px 0; /* Oben und unten Abstand */
    position: relative;



  }

  .section-need {

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





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

}

  .neddit {
    font-family: 'reaniebeanie', sans-serif;
    font-size: clamp(98px,3.4vw, 108px);
    color: #151515;
    position: absolute;
    top: 4%;
    left: 4%;
    line-height: 1.4;
    opacity: 0;

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


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

}




  .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: 22%;
  bottom: 53.5%;
  height: 5px;
  width: 10%; /* oder 300px, etc. */
  overflow: hidden;
   transition: opacity 0.3s ease, transform 1.3s ease;

  opacity: 0;
}

.black-line {
  height: 126px;
  background-color: rgb(21, 21, 21);
  width: 0;
  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;

  }









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




.hover-card {
    text-decoration: none;

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

    opacity: 0;
 
transition: opacity 3.3s ease
  }

  .section-wild.visible .hover-card {
  opacity: 1;
}



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

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

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

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

/* Text unter dem Bild */
.hover1txt {
  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: 30%;

}

.hover-card:hover .hover1txt {
  color: #fcfcfc;
}

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

}

.hover-card:hover .hghover1txt {
  color: #fcfcfc;
}










.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-block {
    position: absolute;
    left: 17%;
    bottom: 14%;
    width: 17%;
    cursor: pointer;
    transition: transform 0.3s ease;
  
  }
  
  .media-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    top: 0%;
    width: 50%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
  }
  
  .default-media, .hover-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
    border-radius: 8px;
  }
  
  .hover-media {
    opacity: 0;
    z-index: 2;
  }
  
  .hover-block:hover .default-media {
    opacity: 0;
  }
  
  .hover-block:hover .hover-media {
    opacity: 1;
  }
  
  .hover-block:hover video {
    fallback: true;
  }
  
  .hover-text {
    margin-top: 57%;
    font-family: 'Avenirlight', sans-serif;
    font-size: clamp(12px, 3vw, 14px);
    color: #0e0e0e;
    text-align: center;
   
    transition: color 0.4s ease;
    line-height: 1.2;
  }
  
  .highlight521
  
  {
    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(12px, 3vw, 14px);
    color: #0e0e0e;
    line-height: 0.8;
    
  }
  
  
  .hover-block:hover .hover-text   {
    color: #0e0e0e;
  
  }
  
    
  .hover-block:hover .highlight521   {
    color: #0e0e0e;
  
  }
  








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

    bottom: 14%;
    width: 17%;
    cursor: pointer;
    transition: transform 0.3s ease;
  
  }
  
  .media2-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    top: 0%;
    width: 50%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
  }
  
  .default-media, .hover-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
    border-radius: 8px;
  }
  
  .hover-media {
    opacity: 0;
    z-index: 2;
  }
  
  .hover-block2:hover .default-media {
    opacity: 0;
  }
  
  .hover-block2:hover .hover-media {
    opacity: 1;
  }
  
  .hover-block2:hover video {
    fallback: true;
  }
  
  .hover-text2 {
    margin-top: 57%;
    font-family: 'Avenirlight', sans-serif;
    font-size: clamp(12px, 3vw, 14px);
    color: #0e0e0e;
    text-align: center;
   
    transition: color 0.4s ease;
    line-height: 1.2;
  }
  
  .highlight521
  
  {
    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(12px, 3vw, 14px);
    color: #0e0e0e;
    line-height: 0.8;
    
  }
  
  
  .hover-block:hover .hover-text   {
    color: #0e0e0e;
  
  }
  
    
  .hover-block2:hover .highlight521   {
    color: #0e0e0e;
  
  }
  










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

    bottom: 14%;
    width: 17%;
    cursor: pointer;
    transition: transform 0.3s ease;
  
  }
  
  .media3-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    top: 0%;
    width: 50%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
  }
  
  .default-media, .hover-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
    border-radius: 8px;
  }
  
  .hover-media {
    opacity: 0;
    z-index: 2;
  }
  
  .hover-block2:hover .default-media {
    opacity: 0;
  }
  
  .hover-block3:hover .hover-media {
    opacity: 1;
  }
  
  .hover-block3:hover video {
    fallback: true;
  }
  
  .hover-text3 {
    margin-top: 57%;
    font-family: 'Avenirlight', sans-serif;
    font-size: clamp(12px, 3vw, 14px);
    color: #0e0e0e;
    text-align: center;
   
    transition: color 0.4s ease;
    line-height: 1.2;
  }
  
  .highlight521
  
  {
    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(12px, 3vw, 14px);
    color: #0e0e0e;
    line-height: 0.8;
    
  }
  
  
  .hover-block3:hover .hover-text   {
    color: #0e0e0e;
  
  }
  
    
  .hover-block3:hover .highlight521   {
    color: #0e0e0e;
  
  }
  


  .seventex {
    font-family: 'Avenirlight', sans-serif;
    font-size: clamp(18px, 2.4vw, 18px);
    max-width: 50%;
    color: #0e0e0e;
    position: absolute;
    top: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: 'LEMONMILKLIGHT', sans-serif;
    font-size: clamp(27px, 2.4vw, 31px);
    max-width: 60%;
    color: #f0f0f0;
    position: absolute;
    top: 4%;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1;
  }

  .hgttitjd {
    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(67px, 2.4vw, 71px);
word-spacing: -10px;
    color: #161616;

  }






  

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






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

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

 .hgfivesourct{
    font-family: 'LexendBold', sans-serif;
    color: #c21e65;
  
  }











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

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

 .hgfivesourct2{
    font-family: 'LexendBold', sans-serif;
    color: #c21e65;
  
  }








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

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


  
  .hgfivesourct3{
    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;
    bottom: 27%;
    right: 7%;
    line-height: 1;

  }

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


  }

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

  }






  .Thies-overlay {
    width: 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: 1; /* Damit der Schatten über dem oberen Bereich liegt */
  box-shadow: 20px 20px 20px 10px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
  box-shadow: 20px -20px 20px 50px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
  overflow: hidden;
}








.Vorteile-overlay {
  width: 70%;
  top:14%;
  left: 4%;
  position: absolute;
  display: block;
  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;
}





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

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




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

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




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

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

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


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

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

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


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

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

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

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

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






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

}










  
  /* Wordlinks */
  .wordlinkhome,
  .wordlinkfirmentop,
  .wordlink1-1top,
  .wordlinküberNULNEBLAtop,
  .wordlinkknowhowtop,
  .wordlinkkontakttop {
    color: white;
    font-size: 20px;
    margin: 10px;
    text-decoration: none;
    z-index: 2;
    position: relative;
  }
  
  
  
  /* 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: 'Louis George Cafe Bold', sans-serif;
      font-size: 20px;
      color: #ffffff;
      top: 53px; /* Position oben anpassen */
      text-decoration: none;
      position: absolute;
    }
  
  
    /* Hover-Effekt */
    .wordlinkfirmentop:hover, .wordlink1-1top:hover, .wordlinküberNULNEBLAtop:hover, .wordlinkknowhowtop:hover, .wordlinkkontakttop:hover  {
      color: #1a000a;
    }
    
    /* 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: #c21e65;
        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, .wordlinksbuchung,  .wordlinksseminare {
        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, .wordlinksbuchung:hover,  .wordlinksseminare:hover {
      
      color: #f7f7f7;
      font-family: 'Avenirheavy', sans-serif;

      }
      
      
      
     
      .wordlinksFirmenseminare {
        top: 18%;
      }
      
      .wordlinksleistungen
      {
        top: 14%;
      }

      .wordlinksseminare
      {
        top: 17%;
      }
      
      .wordlinks1-1firmencoaching{
        top: 25%;
      }
      
      .wordlinksKonzeptErnährung{
        top: 28%;
      }
      
      .wordlinksKonzeptBewegung{
        top: 31%;
      }
      
      .wordlinksKonzeptEigenkompetenz{
        top: 34%;
      }
      
      .wordlinksquinfinity{
        top: 37%;
      }
      
      .wordlinksbuchung
      {
        top: 47%;
      }
      
      
      
      .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: #000000;
        text-decoration: none;
        text-align: left;
        position: absolute;
        font-family: 'Avenirheavy', sans-serif;
top: 62%;
        left: 2%; /* Zentrierung des Containers */
        width: 300px; /* Feste Breite, z. B. 300px */
        transition: color 0.3s ease-in-out;
        z-index: 10; /* Über andere Elemente */
      }
      
      .wordlinksmail:hover {
        color: #ededed;
        }
      
      
      
      
      
      
        .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: 3%;         /* oder z. B. 300px für feste Breite */
          max-width: 420px;    /* Bild wird nie größer als 600px */
          bottom: 4%;
          right: 19%;
          position: absolute;
          display: block;      /* Verhindert Lücken unter dem Bild */
        }
      
      
        .fusszeile-text {
          font-family: 'Lexendlight', sans-serif;
          font-size: clamp(4px, 1.8vw, 14px);
          max-width: 400px;
          color: #0c0c0c;
          position: absolute;
          bottom: 10%;
          right: 8%;
          line-height: 1.0;
        }
  
        


      













      .back-to-top {
        position: fixed;
        bottom: 30px;
        left: 50%;
        text-decoration: none;
        background-color: #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;
      }