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

}


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

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


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




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


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


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

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

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


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


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

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

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

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

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

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

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


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





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


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





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



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

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



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






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

}

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

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

.icon.hover {
  opacity: 0;
}

.icon-default5{
  opacity: 1;
}



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

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



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











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



}

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



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

  }


.section-4neu {

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



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

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








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










  


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







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

  }



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




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



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

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

}




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

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








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

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










.section-call {

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




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

}

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


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

}

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





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

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




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

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


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

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

}




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




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

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

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



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

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

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

}







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










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

}

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


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

}

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



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


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


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

  







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



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





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




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




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



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










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

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









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



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

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













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

}

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

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

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

}



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



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

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





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

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

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

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

}

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








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

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

}




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





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



 .ctxt3 {
     font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(34px, 2.4vw, 37px);
    max-width: 20%;
    color: #db0e67;
    position: absolute;
    top: 7%;
    left: 44%;
    line-height: 0.9;

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


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


   .ctxt1 {
     font-family: 'LexendBold', sans-serif;
    font-size: clamp(15px, 2.4vw, 17px);
    max-width: 20%;
    color: #db0e67;
    position: absolute;
    top: 32%;
    left: 44%;
    line-height: 0.9;
  transition: color 2.2s ease; /* sanfter Übergang */
  }
  
  .section-3cneu.active .ctxt1 {
color: black;
  }




  

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

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

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

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

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

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

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

}

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


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
















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

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

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

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

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

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

/* Text über dem Bild */

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

}

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


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
















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

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

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

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

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

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

/* Text über dem Bild */

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

}

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


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


















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

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

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

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

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

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

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

}

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


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














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


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





  .section-3neu.from-section-3bneu {
    background-color: #db0e67;
    }




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


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

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





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


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

      }



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


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




  


      



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


     




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

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

     



      

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









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


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


        



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

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


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

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

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



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


            .energie4-container:hover .hg441 {
           
              color:#ff1d6c;     }
  
  










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

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

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

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



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

















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





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

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

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

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

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



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



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


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







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




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

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


}

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



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






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



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







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



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









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

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



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

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


}

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

}

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


}




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

}

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



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

}

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

}

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











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

}

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



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

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


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







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

}

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



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

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


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






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

}

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



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

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

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







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

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

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

/* .step-section4 braucht keine inherits */









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



}

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


}




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



}

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


}





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

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



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

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








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






.line-wrapper {
position: relative;
}



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

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







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

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





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

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


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

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


















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















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

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

  opacity: 1;
  }



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

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

.icon.hover {
  opacity: 0;
}

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

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


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

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

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

  color:#fafafa88;     }


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

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

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

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


















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

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

  opacity: 1;
  }



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

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

.icon.hover {
  opacity: 0;
}


             .icon.default33{
          opacity: 0.5;
        }
        


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

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


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

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




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

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

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

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




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






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

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

                        






















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

}

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

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

.icon.hover {
  opacity: 0;
}

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

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


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

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

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

  color:#fafafa;     }


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

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

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

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





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

}

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

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

.icon.hover {
  opacity: 0;
}

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

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


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

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

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

  color:#fafafa;     }


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

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



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

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

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

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


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


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


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


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




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


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

            



          
                                                            


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

                                                            }



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

                                                            }






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

                                                            


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

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

}

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

}















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

    }


    

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

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

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


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

    }

 

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

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

    }





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

    }

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



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

    }

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

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

    }

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

    















      

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

    }

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

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

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

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

    }

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

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

    }


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

    }

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













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

    }

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

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

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




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

    }

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

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

    }

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

    }

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


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

    }

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


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


    }

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












      














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

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














.canteen-hover-block {
  z-index: 5;
      width: 30%;
      margin: 0 auto;
      text-align: center;
      position: absolute;
      top: 15%;

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


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

.canteen-hover-block:hover .canteen-title {
  
  color: #040003;
}

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

.canteen-hover-block:hover .canteen-bold {
  
  color: #040003;
}













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

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


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

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

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

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



















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

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


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

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

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

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

















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

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

  }















  .media2-hover-block {


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

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


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

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

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




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

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


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


}

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

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

















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


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


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

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






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

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

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

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

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

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

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













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

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

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

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

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

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

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








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

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

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

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

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

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

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







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

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

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

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

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

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

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





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

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

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

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

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

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

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







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

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

}






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

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

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

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

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

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

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










.hover-card {
  text-decoration: none;

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

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

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

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

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

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

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











.hover2-card {
  text-decoration: none;

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

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

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

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

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

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

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













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

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

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

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

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











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



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

  }
  
  .thri41{
    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(107px, 3.4vw, 111px);
    max-width: 60%;
    color: #e3d3c09e;
    position: absolute;
    top: 30%;
    left: 4%;
    line-height: 0.9;
    transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateX(-230px);
    opacity: 0;
  }

  
   .section-3neu.active .thri41 {
    transform: translateX(0);

  opacity: 1;
  }

  .thri42{
    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(87px, 3.4vw, 91px);
    max-width: 60%;
    color: #ffce95b3;
    position: absolute;
    top: 50%;
    left: 24%;
    line-height: 0.9;
    transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateX(230px);
    opacity: 0;
  }

  
   .section-3neu.active .thri42 {
    transform: translateX(0);

  opacity: 1;
  }




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

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



  .thri44{
    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(120px, 3.4vw, 140px);
    color: #f5c07ed4;
    position: absolute;
    top: 63%;
    left: 54%;
    line-height: 0.9;
    transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateY(230px);
    opacity: 0;
  }

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







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


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

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

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





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

    



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

      



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

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

}



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

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

}




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

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

}




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

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


.hgeity2 {

  color: #b76f16;
}

 .hgeity3 {
 
  color: #b7167f;
}






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

}

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

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

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

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

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

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

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

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

.highlight521

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


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

}

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

}









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

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

}

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

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

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

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

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

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

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

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

.highlight521

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


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

}

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

}











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

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

}

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

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

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

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

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

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

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

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

.highlight521

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


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

}

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

}



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







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







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

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

}






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

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

}








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


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





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

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

}



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

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

}






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

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

}












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

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

}


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

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

}




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


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


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




.ansprechpartner-overlay {

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





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

}


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

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





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

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

}



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

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

}


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

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

}










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

}

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


}

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

}




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

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

}


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








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

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


}

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

}











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

}

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


}

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

}






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




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

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

}


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

}











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




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

}

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

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

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

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


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

}

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

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

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

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






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

}

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

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

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

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



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

}

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

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

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

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






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

}

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

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

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

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




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

}

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

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

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

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






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

}

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

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

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

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







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

}

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

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

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

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






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

}

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

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

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

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






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

}

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

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

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

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







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

}

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

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

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

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


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

}

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

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

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

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



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

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

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

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

}

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



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

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

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

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

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





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

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




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

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




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

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

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


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

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

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


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

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

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

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

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








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

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

}







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


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

}

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

}


























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

  .bg-section p {
    font-size: 16px;
  }

  .btn {
    font-size: 16px;
  }
}















/* HOME */ 
.wordlinkhome {
  font-family: 'LEMON MILK BOLD', sans-serif; /* Schriftart anwenden */
  font-size: 100px; /* Schriftgröße */
  color: #ffffff; /* Standardfarbe */
  text-decoration: none; /* Keine Unterstreichung im Normalzustand */
  position: absolute; /* Absolut positioniert */
  top: 40px; /* Platzierung des Textes nach oben - anpassbar */
  left: 2%; /* Horizontal zentrieren */
  transition: color 0.3s ease-in-out; /* Sanfter Übergang für Farbe */
}

/* Hover-Effekt */
.wordlinkhome:hover {
  color: #1a000a; /* Farbänderung beim Hover */
}




  /* Erste Klasse */
.wordlinkfirmentop, .wordlink1-1top, .wordlinküberNULNEBLAtop, .wordlinkknowhowtop, .wordlinkkontakttop {
    font-family: 'Avenirmedium', sans-serif;
    font-size: 20px;
    color: #ffffff;
    top: 53px; /* Position oben anpassen */
    text-decoration: none;
    position: absolute;
    z-index: 2;
  }


  /* Hover-Effekt */
  .wordlinkfirmentop:hover, .wordlink1-1top:hover, .wordlinküberNULNEBLAtop:hover, .wordlinkknowhowtop:hover, .wordlinkkontakttop:hover  {
    color: #e7308f;
          font-family: 'Avenirheavy', sans-serif;

  }
  
  /* Dynamische Unterstreichung */
  .wordlinkfirmentop:after, .wordlink1-1top:after, .wordlinküberNULNEBLAtop:after, .wordlinkknowhowtop:after, .wordlinkkontakttop:after {
    content: '';
    position: relative;
    left: 0;
    bottom: -12px;
    width: 0%;
    height: 8px;
    background-color: #ffffff;
    transition: width 0.3s ease-in-out;
  }
  
  /* Hover-Effekt für die Unterstreichung */
  .wordlinkfirmentop:hover:after, .wordlink1-1top:hover:after, .wordlinküberNULNEBLAtop:hover:after, .wordlinkknowhowtop:hover:after, .wordlinkkontakttop:hover:after  {
    width: 100%;
  }

  
.wordlinkfirmentop {
  
    left: 46%; /* Position von links anpassen */
    transform: translateX(-50%);
    transition: color 0.3s ease-in-out;
  }
 
  .wordlink1-1top {
  
    left: 56%; /* Position von links anpassen */
    transform: translateX(-50%);
    transition: color 0.3s ease-in-out;
  }
 
  .wordlinküberNULNEBLAtop {
  
    left: 66%; /* Position von links anpassen */
    transform: translateX(-50%);
    transition: color 0.3s ease-in-out;
  }
 
  .wordlinkknowhowtop {
  
    left: 76%; /* Position von links anpassen */
    transform: translateX(-50%);
    transition: color 0.3s ease-in-out;
  }
 
  .wordlinkkontakttop {
  
    left: 84%; /* Position von links anpassen */
    transform: translateX(-50%);
    transition: color 0.3s ease-in-out;
  }


  






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


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



  .section-10:hover {
    background-color: #9d105b;
    transition: opacity 0.6s ease-in-out; /* Sanfter Übergang für Opazität */
  }



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


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





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

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

}



   .section-10 .hgtext3 {

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

}

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

}


   .section-10 .hgtextb {

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

line-height: 0.6;
  opacity: 0;

}

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

}















  






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

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


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

.einszueins2-button:hover {
background-color: #111111;
color: #e6e6e6;
}







.section-10 .fly-in-image3 {
position: absolute;
right: 13%;
width: 43%;
bottom: 0%;
opacity: 0;
transform: translateY(80px);
transition: opacity 0.8s ease, transform 0.8s ease;
border-radius: 8px;
z-index: 0;
}

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



.section-10 .fly-in-image2 {
position: absolute;
right: 13%;
width: 17%;
bottom: 5%;
opacity: 0;
transform: translateY(80px);
transition: opacity 0.8s ease, transform 0.8s ease;
border-radius: 8px;
z-index: 3;
}

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









.insta-overlay {
position: absolute;
bottom: 32%;
left: 53%;
width: 5%;
height: auto;
overflow: hidden;

}

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

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

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

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












    .last-section {

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


      .twotitlelast-text {
        font-family: 'LEMONMILKBOLD', sans-serif;
        font-size: clamp(32px, 4.2vw, 38px);
        max-width: 900px;
        color: #1a000a;
        position: absolute;
        bottom: 0.3%;
        left: 4%;
        line-height: 0.9;
      }

      .twosubtitleforelast-text {
        font-family: 'LEMONMILKLight', sans-serif;
        font-size: clamp(20px, 2.8vw, 26px);
        color: #1a000a;
        position: absolute;
        bottom: 3%;
        left: 4%;
        line-height: 1.0;
      }
    }
    

    
    
    .wordlinkIMPRESSUM, .wordlinkCOOKIES, .wordlinkAGBs, .wordlinkdisclaimer {
      font-family: 'LEMONMILKLIGHT', sans-serif;
      font-size: clamp(12px, 1.6vw, 30px);
      text-align: left;
    
      color: #fefefe;
      text-decoration: none;
      position: absolute;
      bottom: 4%;
      transform: translateX(-50%);
      transition: color 0.3s ease-in-out;
    }
    
    
    /* Hover-Effekt */
    .wordlinkIMPRESSUM:hover, .wordlinkCOOKIES:hover, .wordlinkAGBs:hover, .wordlinkdisclaimer:hover {
      color: #9b006f;

    }
    
    
    /* Dynamische Unterstreichung */
    .wordlinkIMPRESSUM::after, .wordlinkCOOKIES::after, .wordlinkAGBs::after, .wordlinkdisclaimer::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -12px;
      width: 0%;
      height: 12px;
      background-color: #9b006f;
      transition: width 0.3s ease-in-out;
    }
    
    /* Hover-Effekt für die Unterstreichung */
    .wordlinkIMPRESSUM:hover::after, .wordlinkCOOKIES:hover::after, .wordlinkAGBs:hover::after, .wordlinkdisclaimer:hover::after{
      width: 100%;
    }
    
    
    .wordlinkCOOKIES {
      left: 42%; /* Weiter nach rechts verschoben */
    }
    
    .wordlinkdisclaimer{
      left: 8%;
    }
    
    .wordlinkIMPRESSUM{
      left: 20%;
    }
    
    .wordlinkAGBs{
      left: 34%;
    }
    
    
    
    
    .wordlinksPRIVATCOACHING, .wordlinksfirmenbottom, .wordlinksNULNEBLA, .wordlinksknowhow {
      font-family: 'LEMONMILKBOLD', sans-serif;
      font-size: clamp(8px, 1.6vw, 24px);
      color: #ededed;
      text-decoration: none;
      text-align: left;
      top: 5%;
      position: absolute;
      transition: color 0.3s ease-in-out;
      z-index: 10; /* Über andere Elemente */
    }
    
    
    .wordlinksPRIVATCOACHING:hover, .wordlinksfirmenbottom:hover, .wordlinksNULNEBLA:hover, .wordlinksknowhow:hover {
      color: #9b006f;

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

    }
    
    
    
    .wordlinksFirmenseminare {
      top: 14%;
    }
    
    .wordlinksleistungen
    {
      top: 18%;
    }
    
    .wordlinks1-1firmencoaching{
      top: 25%;
    }
    
    .wordlinksKonzeptErnährung{
      top: 28%;
    }
    
    .wordlinksKonzeptBewegung{
      top: 31%;
    }
    
    .wordlinksKonzeptEigenkompetenz{
      top: 34%;
    }
    
    .wordlinksquinfinity{
      top: 37%;
    }
    
    
    
    
    .wordlinksprivatleistungenbottom, .wordlinkserstgespräch {
      font-family: 'Avenirmedium', sans-serif;
      font-size: clamp(4px, 1.6vw, 18px);
      color: #ededed;
      text-decoration: none;
      text-align: left;
      position: absolute;
      left: 22%; /* Zentrierung des Containers */
      width: 300px; /* Feste Breite, z. B. 300px */
      transition: color 0.3s ease-in-out;
      z-index: 10; /* Über andere Elemente */
    }
    
    
    
    .wordlinksprivatleistungenbottom:hover, .wordlinkserstgespräch:hover {
    color: #9b006f;
    font-family: 'Avenirheavy', sans-serif;

    }
    
    .wordlinkserstgespräch{
      top: 14%;
    }
    .wordlinksprivatleistungenbottom{
      top: 18%;
    }
    
    
    
    .wordlinkseminare, .wordlinksblog {
      font-family: 'Avenirmedium', sans-serif;
      font-size: clamp(4px, 1.6vw, 18px);
      color: #ededed;
      text-decoration: none;
      text-align: left;
      position: absolute;
      left: 42%; /* Zentrierung des Containers */
      width: 300px; /* Feste Breite, z. B. 300px */
      transition: color 0.3s ease-in-out;
      z-index: 10; /* Über andere Elemente */
    }
    
    .wordlinkseminare:hover, .wordlinksblog:hover {
      color: #9b006f;
      font-family: 'Avenirheavy', sans-serif;
      }
    
    .wordlinkseminare{
      top: 14%;
    }
    .wordlinksblog{
      top: 18%;
    }
    
    
    
    
    .wordlinksmail {

      font-size: clamp(4px, 1.6vw, 18px);
      color: #ededed;
      text-decoration: none;
      text-align: left;
      position: absolute;
      left: 2%; /* Zentrierung des Containers */
      width: 300px; /* Feste Breite, z. B. 300px */
      transition: color 0.3s ease-in-out;
      z-index: 10; /* Über andere Elemente */
    }
    
    .wordlinksmail:hover {
      color: #9b006f;
      }
    
    
    
    
    
      .wordlinknulneblahome {
        font-family: 'LEMONMILKBOLD', sans-serif; /* Schriftart anwenden */
        font-size: clamp(28px, 3.2vw, 34px); /* Schriftgröße */
        color: #ededed; /* Standardfarbe */
        text-decoration: none; /* Keine Unterstreichung im Normalzustand */
        position: absolute; /* Absolut positioniert */
        bottom:4%; /* Platzierung des Textes nach oben - anpassbar */
        right: 4.5%; /* Horizontal zentrieren */
        transition: color 0.3s ease-in-out; /* Sanfter Übergang für Farbe */
      }
      
      /* Hover-Effekt */
      .wordlinknulneblahome:hover {
        color: #9b006f; /* Farbänderung beim Hover */
      }
    
    
      .logo-overlay {
        width: 3%;         /* oder z. B. 300px für feste Breite */
        max-width: 420px;    /* Bild wird nie größer als 600px */
        bottom: 4%;
        right: 19%;
        position: absolute;
        display: block;      /* Verhindert Lücken unter dem Bild */
      }
    
    
      .fusszeile-text {
        font-family: 'Lexendlight', sans-serif;
        font-size: clamp(4px, 1.8vw, 14px);
        max-width: 400px;
        color: #0c0c0c;
        position: absolute;
        bottom: 10%;
        right: 8%;
        line-height: 1.0;
      }

      


    













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