/* 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: 'Arkipelago';
    src: url(Arkipelago\ 1.003.otf) format('truetype');
    font-weight: normal;
    font-style: normal;
  } 


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


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

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

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


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


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

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

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

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

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

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


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




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



  

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


 

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





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

  }
  
  /* Bild-Wrapper */
  .NULNEBLA-wrapper {
    position: relative;
    width: 30%; /* frei skalierbar */
    height: auto;
  }
  
  .icon {
    width: 100%;
    height: auto;
    position: absolute;
    top: 20%;
    top: 0;
    left: 0;
  }
  
  .icon.hover {
    opacity: 0;
  }
  
  .NULNEBLA-container:hover .icon.default {
    opacity: 0;
  }
  .NULNEBLA-container:hover .icon.hover {
    opacity: 1;
  }
  
  /* Text */
  .NULNEBLA-text {
    text-align: left;
   margin-top: 3%;
   margin-left: 33%;
    font-size: clamp(48px, 8vw, 54px);
    font-family: 'LEMONMILKBOLD', sans-serif;
    color:  #f5f5f5;
    max-width: 520px;
  }



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

  
  







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


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


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




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

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



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

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

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

}







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

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





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

  }

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

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



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



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

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





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

    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
  }
  
  .breadcrumb-overlay a:hover {
    color: #e76730;
    font-family: 'Avenirmedium', sans-serif;

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








  .section-3 {
    background-color: #e76730;
    padding: 680px 0; /* Oben und unten Abstand */
    position: relative;

  }



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




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

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


  }

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



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

 




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



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







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



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

  







  .section-4 {
    background-color: #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: 430px 0; /* Oben und unten Abstand */
    position: relative;
    box-shadow: 0 20px -50px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */

  }



  





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

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


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


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

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













              .stoffwechsel-container {
                flex-direction: column;
                align-items: center;
                cursor: pointer;
                position: absolute;
                                        bottom: 34%;
                left: 4%;
            
              }
              
              /* 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: #fafafa;
                max-width: 37%;
              }
            
            
              .stoffwechsel-container .highlightstoffwechseleone-text {
                display: inline-block;
                font-family: 'LEMONMILKBOLD', sans-serif;
                color:#fafafa;     }
            
            
              
              .stoffwechsel-container:hover .stoffwechsel-text {
                display: inline-block;
                color: #e76730;      }
            
               .stoffwechsel-container:hover .highlightstoffwechseleone-text {
                          display: inline-block;
                          color: #e76730;      }
            

                          








              .Mikronährstoff-container {
                flex-direction: column;
                align-items: center;
                cursor: pointer;
                position: absolute;
                bottom: 10%;
                left: 4%;
            
              }
              
              /* Bild-Wrapper */
              .Mikronährstoff-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;
              }
              
              .Mikronährstoff-container:hover .icon.default {
                opacity: 0;
              }
              .Mikronährstoff-container:hover .icon.hover {
                opacity: 1;
              }
              
              /* Text */
              .Mikronährstoff-text {
                text-align: left;
               margin-top: 0.5%;
               margin-left: 6%;
                font-size: clamp(16px, 2.6vw, 18px);
                font-family: 'Avenirlight', sans-serif;
                color: #fafafa;
                max-width: 37%;
              }
            
            
              .Mikronährstoff-container .highlightMikronährstoffone-text {
                display: inline-block;
                font-family: 'LEMONMILKBOLD', sans-serif;
                color:#fafafa;     }
            
            
              
              .Mikronährstoff-container:hover .Mikronährstoff-text {
                display: inline-block;
                color: #e76730;      }
            
               .Mikronährstoff-container:hover .highlightMikronährstoffone-text {
                          display: inline-block;
                          color: #e76730;      }



















                          .Neurotransmitter-container {
                            flex-direction: column;
                            align-items: center;
                            cursor: pointer;
                            position: absolute;
                            bottom: 60%;
                            left: 52%;
                        
                          }
                          
                          /* Bild-Wrapper */
                          .Neurotransmitter-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;
                          }
                          
                          .Neurotransmitter-container:hover .icon.default {
                            opacity: 0;
                          }
                          .Neurotransmitter-container:hover .icon.hover {
                            opacity: 1;
                          }
                          
                          /* Text */
                          .Neurotransmitter-text {
                            text-align: left;
                           margin-top: 0.5%;
                           margin-left: 6%;
                            font-size: clamp(16px, 2.6vw, 18px);
                            font-family: 'Avenirlight', sans-serif;
                            color: #fafafa;
                            max-width: 80%;
                          }
                        
                        
                          .Neurotransmitter-container .highlightNeurotransmitterone-text {
                            display: inline-block;
                            font-family: 'LEMONMILKBOLD', sans-serif;
                            color:#fafafa;     }
                        
                        
                          
                          .Neurotransmitter-container:hover .Neurotransmitter-text {
                            display: inline-block;
                            color: #e76730;      }
                        
                           .Neurotransmitter-container:hover .highlightNeurotransmitterone-text {
                                      display: inline-block;
                                      color: #e76730;      }

                                      
















                                      .Hormone-container {
                                        flex-direction: column;
                                        align-items: center;
                                        cursor: pointer;
                                        position: absolute;
                                        bottom: 34%;
                                        left: 52%;
                                    
                                      }
                                      
                                      /* 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: #fafafa;
                                        max-width: 80%;
                                      }
                                    
                                    
                                      .Hormone-container .highlightHormoneone-text {
                                        display: inline-block;
                                        font-family: 'LEMONMILKBOLD', sans-serif;
                                        color:#fafafa;     }
                                    
                                    
                                      
                                      .Hormone-container:hover .Hormone-text {
                                        display: inline-block;
                                        color: #e76730;      }
                                    
                                       .Hormone-container:hover .highlightHormoneone-text {
                                                  display: inline-block;
                                                  color: #e76730;      }
            
                                                  
            

                                                  






                                                  .wellnes-container {
                                                    flex-direction: column;
                                                    align-items: center;
                                                    cursor: pointer;
                                                    position: absolute;
                                                    bottom: 10%;
                                                    left: 52%;
                                                
                                                  }
                                                  
                                                  /* Bild-Wrapper */
                                                  .wellnes-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;
                                                  }
                                                  
                                                  .wellnes-container:hover .icon.default {
                                                    opacity: 0;
                                                  }
                                                  .wellnes-container:hover .icon.hover {
                                                    opacity: 1;
                                                  }
                                                  
                                                  /* Text */
                                                  .wellnes-text {
                                                    text-align: left;
                                                   margin-top: 0.5%;
                                                   margin-left: 6%;
                                                    font-size: clamp(16px, 2.6vw, 18px);
                                                    font-family: 'Avenirlight', sans-serif;
                                                    color: #fafafa;
                                                    max-width: 80%;
                                                  }
                                                
                                                
                                                  .wellnes-container .highlightwellnesone-text {
                                                    display: inline-block;
                                                    font-family: 'LEMONMILKBOLD', sans-serif;
                                                    color:#fafafa;     }
                                                
                                                
                                                  
                                                  .wellnes-container:hover .wellnes-text {
                                                    display: inline-block;
                                                    color: #e76730;      }
                                                
                                                   .wellnes-container:hover .highlightwellnesone-text {
                                                              display: inline-block;
                                                              color: #e76730;      }
                        
                                                              
            
                                                              


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


.section-7 {
                                                                background-color: #CDD1DC;
                                                                padding: 880px 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: 60%;
    color: #101010;
    position: absolute;
    top: 4%;
    left: 4%;
    line-height: 1;
  }

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

  }



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

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


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

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






.hover-card {
    text-decoration: none;

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

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

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

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

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

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

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











.hover2-card {
    text-decoration: none;

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

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

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

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

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

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

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











  

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







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

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

  }




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

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





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

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


 .hgeity2 {

    color: #b76f16;
  }

   .hgeity3 {
   
    color: #b7167f;
  }






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

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








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

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

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










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

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

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


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

  }






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

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

  }






  

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

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

  }




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


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


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




  .ansprechpartner-overlay {

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





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

  }


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

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





  .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-text {
    font-family: 'LexendBold', sans-serif;
    font-size: clamp(13px, 3vw, 17px);
    max-width: 50%;
    color: #0c0c0c;
    position: absolute;
    top: 41%;
    left: 4%;
    line-height: 1.0;
  }
  
  .fivesourceoneone-text {
    font-family: 'Avenirmedium', sans-serif;
    color: #e8662f;
  
  }


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




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





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

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


  }

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

  }











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

  }

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


  }

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

  }






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




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

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

  }


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

  }



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








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




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

}

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

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

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

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


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

}

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

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

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

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






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

}

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

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

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

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



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

}

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

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

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

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






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

}

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

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

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

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




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

}

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

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

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

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






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

}

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

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

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

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







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

}

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

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

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

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






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

}

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

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

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

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






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

}

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

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

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

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







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

}

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

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

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

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


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

}

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

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

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

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



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

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

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

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

}

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



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

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

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

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

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





.sixonesubtext-text {
  position: absolute;
  top: 40%;
  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: #e76730;
  font-weight: bold;
  font-family: 'Avenirhheavy', sans-serif;
}




.sixtwosubtext-text {
  position: absolute;
  top: 40%;
  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: #e76730;
  font-weight: bold;
  font-family: 'Avenirhheavy', sans-serif;
}




.sixthreesubtext-text {
  position: absolute;
  top: 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: 12%;         /* oder z. B. 300px für feste Breite */
  max-width: 420px;    /* Bild wird nie größer als 600px */
  bottom: 26%;
  left: 4%;
  position: absolute;
  display: block;      /* Verhindert Lücken unter dem Bild */
}


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

.right-overlay {
  width: 16%;         /* oder z. B. 300px für feste Breite */
  max-width: 420px;    /* Bild wird nie größer als 600px */
  bottom: 27%;
  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: 4%; /* Position 5% von links */
  width: 20%; /* Passt sich dem Container an */
  height: auto;
  overflow: hidden; /* Alles außerhalb des Containers wird verborgen */
}

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

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

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

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








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

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

}







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


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

}

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

}










  
  
  
  /* Mobilfreundlich */
  @media (max-width: 768px) {
    .bg-section h2 {
      font-size: 28px;
    }
  
    .bg-section p {
      font-size: 16px;
    }
  
    .btn {
      font-size: 16px;
    }
  }
  














  /* HOME */ 
.wordlinkhome {
    font-family: 'LEMON MILK BOLD', sans-serif; /* Schriftart anwenden */
    font-size: 100px; /* Schriftgröße */
    color: #ffffff; /* Standardfarbe */
    text-decoration: none; /* Keine Unterstreichung im Normalzustand */
    position: absolute; /* Absolut positioniert */
    top: 40px; /* Platzierung des Textes nach oben - anpassbar */
    left: 2%; /* Horizontal zentrieren */
    transition: color 0.3s ease-in-out; /* Sanfter Übergang für Farbe */
  }
  
  /* Hover-Effekt */
  .wordlinkhome:hover {
    color: #1a000a; /* Farbänderung beim Hover */
  }
  
  
  
  
    /* Erste Klasse */
  .wordlinkfirmentop, .wordlink1-1top, .wordlinküberNULNEBLAtop, .wordlinkknowhowtop, .wordlinkkontakttop {
      font-family: 'Avenirmedium', sans-serif;
      font-size: 20px;
      color: #ffffff;
      top: 53px; /* Position oben anpassen */
      text-decoration: none;
      position: absolute;
      z-index: 2;
    }
  
  
    /* Hover-Effekt */
    .wordlinkfirmentop:hover, .wordlink1-1top:hover, .wordlinküberNULNEBLAtop:hover, .wordlinkknowhowtop:hover, .wordlinkkontakttop:hover  {
      color: #e76730;
            font-family: 'Avenirheavy', sans-serif;

    }
    
    /* Dynamische Unterstreichung */
    .wordlinkfirmentop:after, .wordlink1-1top:after, .wordlinküberNULNEBLAtop:after, .wordlinkknowhowtop:after, .wordlinkkontakttop:after {
      content: '';
      position: relative;
      left: 0;
      bottom: -12px;
      width: 0%;
      height: 8px;
      background-color: #ffffff;
      transition: width 0.3s ease-in-out;
    }
    
    /* Hover-Effekt für die Unterstreichung */
    .wordlinkfirmentop:hover:after, .wordlink1-1top:hover:after, .wordlinküberNULNEBLAtop:hover:after, .wordlinkknowhowtop:hover:after, .wordlinkkontakttop:hover:after  {
      width: 100%;
    }
  
    
  .wordlinkfirmentop {
    
      left: 46%; /* Position von links anpassen */
      transform: translateX(-50%);
      transition: color 0.3s ease-in-out;
    }
   
    .wordlink1-1top {
    
      left: 56%; /* Position von links anpassen */
      transform: translateX(-50%);
      transition: color 0.3s ease-in-out;
    }
   
    .wordlinküberNULNEBLAtop {
    
      left: 66%; /* Position von links anpassen */
      transform: translateX(-50%);
      transition: color 0.3s ease-in-out;
    }
   
    .wordlinkknowhowtop {
    
      left: 76%; /* Position von links anpassen */
      transform: translateX(-50%);
      transition: color 0.3s ease-in-out;
    }
   
    .wordlinkkontakttop {
    
      left: 84%; /* Position von links anpassen */
      transform: translateX(-50%);
      transition: color 0.3s ease-in-out;
    }


    






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


    .section-10 {
      background-color: #e76730;
      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 */
    }
  


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

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





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

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

}



     .section-10 .hgtext3 {
 
     font-family: 'LexendBold', sans-serif;
    
    opacity: 0;

}

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

}


     .section-10 .hgtextb {
 
     font-family: 'Arkipelago', sans-serif;
    color: #e73092;
        font-size: clamp(34px, 4vw, 47px);

line-height: 0.6;
    opacity: 0;

}

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

}










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

}

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




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

      





  .section-10:hover  .einszueins-button {
  display: inline-block;
  padding: 14px 160px;
  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);
}










.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: 32%;
  left: 53%;
  width: 5%;
  height: auto;
  overflow: hidden;

}

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

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

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

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












      .last-section {

        background-color: #CDD1DC;
        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: #9b006f;

      }
      
      
      /* Dynamische Unterstreichung */
      .wordlinkIMPRESSUM::after, .wordlinkCOOKIES::after, .wordlinkAGBs::after, .wordlinkdisclaimer::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -12px;
        width: 0%;
        height: 12px;
        background-color: #9b006f;
        transition: width 0.3s ease-in-out;
      }
      
      /* Hover-Effekt für die Unterstreichung */
      .wordlinkIMPRESSUM:hover::after, .wordlinkCOOKIES:hover::after, .wordlinkAGBs:hover::after, .wordlinkdisclaimer:hover::after{
        width: 100%;
      }
      
      
      .wordlinkCOOKIES {
        left: 42%; /* Weiter nach rechts verschoben */
      }
      
      .wordlinkdisclaimer{
        left: 8%;
      }
      
      .wordlinkIMPRESSUM{
        left: 20%;
      }
      
      .wordlinkAGBs{
        left: 34%;
      }
      
      
      
      
      .wordlinksPRIVATCOACHING, .wordlinksfirmenbottom, .wordlinksNULNEBLA, .wordlinksknowhow {
        font-family: 'LEMONMILKBOLD', sans-serif;
        font-size: clamp(8px, 1.6vw, 24px);
        color: #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: #9b006f;

      }
      
      .wordlinksPRIVATCOACHING::after, .wordlinksfirmenbottom::after, .wordlinksNULNEBLA:after, .wordlinksknowhow::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 0%;
        height: 8px; /* Kleinere Unterstreichungshöhe */
        background-color: #9b006f;
        transition: width 0.3s ease-in-out;
      }
      
      
      .wordlinksPRIVATCOACHING:hover:after, .wordlinksfirmenbottom:hover:after, .wordlinksNULNEBLA:hover:after, .wordlinksknowhow:hover:after {
        width: 100%;
      }
      
      
      .wordlinksPRIVATCOACHING {
        left: 22%;
      }
      
      .wordlinksfirmenbottom {
        left: 2%;
      
      }
      
      
      .wordlinksknowhow {
        left: 42%;
      }
      
      .wordlinksNULNEBLA {
        left: 62%;
      }
      
      
      .wordlinksFirmenseminare, .wordlinksleistungen, .wordlinks1-1firmencoaching, .wordlinksKonzeptErnährung,
      .wordlinksKonzeptBewegung, .wordlinksKonzeptEigenkompetenz, .wordlinksquinfinity {
        font-family: 'Avenirmedium';
        font-size: clamp(4px, 1.6vw, 18px);
        color: #0c0c0c;
        text-decoration: none;
        text-align: left;
        position: absolute;
        left: 2%; /* Zentrierung des Containers */
        width: 300px; /* Feste Breite, z. B. 300px */
        transition: color 0.3s ease-in-out;
        z-index: 10; /* Über andere Elemente */
      }
      
      .wordlinksFirmenseminare:hover, .wordlinksleistungen:hover, .wordlinks1-1firmencoaching:hover, .wordlinksKonzeptErnährung:hover,
      .wordlinksKonzeptBewegung:hover, .wordlinksKonzeptEigenkompetenz:hover, .wordlinksquinfinity:hover {
      
      color: #9b006f;
      font-family: 'Avenirheavy', sans-serif;

      }
      
      
      
      .wordlinksFirmenseminare {
        top: 14%;
      }
      
      .wordlinksleistungen
      {
        top: 18%;
      }
      
      .wordlinks1-1firmencoaching{
        top: 25%;
      }
      
      .wordlinksKonzeptErnährung{
        top: 28%;
      }
      
      .wordlinksKonzeptBewegung{
        top: 31%;
      }
      
      .wordlinksKonzeptEigenkompetenz{
        top: 34%;
      }
      
      .wordlinksquinfinity{
        top: 37%;
      }
      
      
      
      
      .wordlinksprivatleistungenbottom, .wordlinkserstgespräch {
        font-family: 'Avenirmedium', sans-serif;
        font-size: clamp(4px, 1.6vw, 18px);
        color: #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: #9b006f;
      font-family: 'Avenirheavy', sans-serif;

      }
      
      .wordlinkserstgespräch{
        top: 14%;
      }
      .wordlinksprivatleistungenbottom{
        top: 18%;
      }
      
      
      
      .wordlinkseminare, .wordlinksblog {
        font-family: 'Avenirmedium', sans-serif;
        font-size: clamp(4px, 1.6vw, 18px);
        color: #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: #9b006f;
        font-family: 'Avenirheavy', sans-serif;
        }
      
      .wordlinkseminare{
        top: 14%;
      }
      .wordlinksblog{
        top: 18%;
      }
      
      
      
      
      .wordlinksmail {

        font-size: clamp(4px, 1.6vw, 18px);
        color: #0c0c0c;
        text-decoration: none;
        text-align: left;
        position: absolute;
        left: 2%; /* Zentrierung des Containers */
        width: 300px; /* Feste Breite, z. B. 300px */
        transition: color 0.3s ease-in-out;
        z-index: 10; /* Über andere Elemente */
      }
      
      .wordlinksmail:hover {
        color: #9b006f;
        }
      
      
      
      
      
        .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: #9b006f; /* Farbänderung beim Hover */
        }
      
      
        .logo-overlay {
          width: 3%;         /* oder z. B. 300px für feste Breite */
          max-width: 420px;    /* Bild wird nie größer als 600px */
          bottom: 4%;
          right: 19%;
          position: absolute;
          display: block;      /* Verhindert Lücken unter dem Bild */
        }
      
      
        .fusszeile-text {
          font-family: 'Lexendlight', sans-serif;
          font-size: clamp(4px, 1.8vw, 14px);
          max-width: 400px;
          color: #0c0c0c;
          position: absolute;
          bottom: 10%;
          right: 8%;
          line-height: 1.0;
        }
  
        


      













      .back-to-top {
        position: fixed;
        bottom: 30px;
        left: 50%;
        text-decoration: none;
        background-color: #e76730;
        color: white;
        font-size: 30px;
        padding: 10px 18px;
        border-radius: 50%;
        transition: background-color 0.3s ease;
        z-index: 999;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
      }
      
      .back-to-top:hover {
        background-color: #4b2313;
        color: #ffffff;
      }