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

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

  @font-face {
    font-family: 'hellony';
    src: url(Hello\ Newyork.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: 'LEMONMILK';
  src: url(LEMONMILK-Regular.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 

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

 @font-face {
  font-family: 'reaniebeanie';
  src: url(ReenieBeanie-Regular.ttf) 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;
  }
  

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

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

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

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}

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

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
}

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

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

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

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

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

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}

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

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}

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

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

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

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
}

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

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}





:root{
  --btn-size: 44px;
  --line-w: 30px;
  --line-h: 3px;
  --gap: 1px;
  --fg: #ffffff;
  --bg: transparent;
  --panel-bg: transparent;
  --panel-shadow: 0 16px 40px -12px rgba(0,0,0,.25);
  --radius: 12px;
}

/* Button */
.hamburger{
    position: absolute;

  left: 50%;
  top: 16px;
  right: 16px;
  width: var(--btn-size);
  height: var(--btn-size);
  display: grid;
  place-items: center;
  border: none;
  background: var(--bg);
  border-radius: 999px;
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.35);
  cursor: pointer;
  z-index: 100;
}

.hamburger span{
  display: block;
  width: var(--line-w);
  height: var(--line-h);
  background: var(--fg);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, width .25s ease;
}
.hamburger span + span{ margin-top: var(--gap); }

/* X-Animation bei offenem Menü */
.hamburger.is-open span:nth-child(1){
  transform: translateY(calc(var(--gap) + var(--line-h))) rotate(45deg);
}
.hamburger.is-open span:nth-child(2){
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.is-open span:nth-child(3){
  transform: translateY(calc(-1 * (var(--gap) + var(--line-h)))) rotate(-45deg);
}

/* Panel */
.nav-menu{
  position: absolute;      /* oder absolute, je nach Layout */
  left: 45%;
    top: calc(16px + var(--btn-size) + 10px);
  right: 16px;
  background: var(--panel-bg);
  border-radius: var(--radius);
  box-shadow: var(--panel-shadow);
  padding: 12px;
  width: 240px;
  display: grid;
  gap: 6px;
  z-index: 99;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
  text-align: center;
  color: white;
}
.nav-menu[data-open="true"]{
  opacity: 1;
  transform: translateY(0);
}
.nav-menu a{
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-family: "Avenirmedium";
}
.nav-menu a:hover{
  background: transparent;
  color: #ca0065;
    font-family: "Avenirheavy";
}

/* Mobile Breite voll (optional) */
@media (max-width: 520px){
  .nav-menu{ width: min(92vw, 320px); right: 4vw; }
}









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

}

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








  .section-2 {
    z-index: 1;
    background-color: #CDD1DC;
    padding: 320px 0; /* Oben und unten Abstand */
    position: relative;
    box-shadow: 0 20px -50px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
    box-shadow: 0 20px -30px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */

    /* -------------------------------
     Box-Shadow erklärt:
     0     → Kein horizontaler Versatz (bleibt zentriert)
     20px  → Vertikaler Versatz nach unten (Schatten fällt nach unten)
     40px  → Weichzeichner-Radius (wie verschwommen der Schatten wirkt)
     -10px → Ausbreitung (negativ = kompakter)
     rgba(0, 0, 0, 0.6) → Farbe: halbtransparenter Schwarzton
  -------------------------------- */
    z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */
  }


    .section-2.active {

    background-color: #CDD1DC;
    
  }




  .quinfinityimageq{
   position: absolute;
  left: 46%;
  width: 10%;
  top: 75%;
  z-index: 2;
  opacity: 1;

}




  .section-2c {
    z-index: 1;
    background-color: #18000f;
    padding: 320px 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: 1; /* Damit der Schatten über dem oberen Bereich liegt */
  }



    .section-2c.active {
    transform: all 1.4s;
    background-color: #CDD1DC;
  
  }



  .section-2g.grow .section-2c{
  height: 520px; /* Zielhöhe beim Scroll */


}

  .section-2g.grow .section-2{
  height: 520px; /* Zielhöhe beim Scroll */

z-index: 5;
}




  .hgtwoctet {
font-family: 'Avenirmedium', sans-serif;
color: #f5f5f5d2;
  font-size: clamp(16px, 7vw, 18px);
text-align: center;
opacity: 0;
top: 6%;
left: 27%;
width: 50%;
position: absolute;
transform: translateY(320px);
  transition: opacity 3.3s ease, transform 1.3s ease;
}

.section-2g.active .hgtwoctet {
  opacity: 1;
  transform: translateY(0);
}

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

}


  



  .hgtw {
font-family: 'Avenirheavy', sans-serif;

}






.two-link{
  font-family: 'Avenirheavy', sans-serif;
cursor: pointer;
}

.two-link:hover{
color: #c8158c;
}





 
.section-2g {
  position: relative;
  height: 820px; /* Start-Höhe */
  width: 100%;
  overflow: hidden;
  transition: height 0.8s ease, background-color 0.4s ease;
z-index: 0;
    background-color: #CDD1DC;

}





.section-2g.active {
    background-color: #18000f;

}



.section-2g.from-section-2c {
  background-color: #18000f;
    transition: background-color 0.4s ease;
    z-index: 2;
        box-shadow: 20px 20px 20px 70px rgba(0, 0, 0, 0.6); /* Schatten nach unten */

}







.section-2.from-section-2g {
  background-color: #18000f;
    transition: background-color 0.4s ease;

}













    .scroll-triggerq {
      position: absolute;
      top: 87%;
      left: 50%;
      transform: translateX(-50%);
      cursor: pointer;
      z-index: 10;
    }
    
    .scroll-triggerq .arrow {
      width: 70%;
      transition: opacity 0.3s ease;
      position: absolute;
      top: 120%;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .scroll-triggerq .hover {
      opacity: 0;
    }
    
    .scroll-triggerq:hover .default {
      opacity: 0;
    }
    
    .scroll-triggerq:hover .hover {
      opacity: 1;
    }
    
    .scroll-triggerq p1 {
      font-family: 'hellony', sans-serif;
      text-align: center;
      font-size: clamp(34px, 1.5vw, 40px);
      color: #000000;
      margin-top: 80%;
      transition: color 0.3s ease;
      text-align: right;
      margin-left: 10%;
    }
    
    .scroll-triggerq:hover p1 {
      color: #000000;
    }
    








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

.section-2g.active .hover552-card {
  opacity: 1;
  transform: translateY(0);
}

/* Container für Bildüberlagerung */
.zsm-container {
  position: relative;
  width: 110px;
  height: auto;
  margin: 0 auto;
}

/* Bilder übereinander positionieren */
.zsm-container img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 8px;
  transition: opacity 0.3s ease;
}

/* Standardbild initial halbtransparent */
.default-img {
  opacity: 0.3;
}

/* Hoverbild initial unsichtbar */
.hover-img {
  opacity: 0;
}

/* Hovereffekt: Default-Bild ausblenden, Hover-Bild einblenden */
.hover552-card:hover .default-img {
  opacity: 0;
}
.hover552-card:hover .hover-img {
  opacity: 1;
}

/* Textstil */
.mailtext {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(21px, 4vw, 22px);
  width: 32%;
  color: #eeeeee6b;
  margin-top: 120px;
    line-height: 0.9;

  text-align: center;
  transition: color 0.3s ease;
}

.hover552-card:hover .mailtext {
  color: #eeeeee;
}


.hgmail {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(12px, 4vw, 14px);
  color: #eeeeee6b;
  transition: color 0.3s ease;
}

.hover552-card:hover .hgmail {
  color: #eeeeee;
}









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

.section-2g.active .hover553-card {
  opacity: 1;
  transform: translateY(0);
}

/* Container für Bildüberlagerung */
.zsm3-container {
  position: relative;
  width: 140px;
  height: auto;
  margin: 0 auto;
}

/* Bilder übereinander positionieren */
.zsm3-container img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 8px;
  transition: opacity 0.3s ease;
}

/* Standardbild initial halbtransparent */
.default-img {
  opacity: 0.3;
}

/* Hoverbild initial unsichtbar */
.hover-img {
  opacity: 0;
}

/* Hovereffekt: Default-Bild ausblenden, Hover-Bild einblenden */
.hover553-card:hover .default-img {
  opacity: 0;
}
.hover553-card:hover .hover-img {
  opacity: 1;
}

/* Textstil */
.mail3text {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(21px, 4vw, 22px);
  color: #eeeeee6b;
  margin-top: 120px;
  text-align: center;
  transition: color 0.3s ease;
}

.hover553-card:hover .mail3text {
  color: #eeeeee;
}




.mail3text {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(21px, 4vw, 22px);
  width: 57%;
  color: #eeeeee6b;
  margin-top: 120px;
    line-height: 0.9;

  text-align: center;
  transition: color 0.3s ease;
}

.hover553-card:hover .mail3text {
  color: #eeeeee;
}


.hgmail3 {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(12px, 4vw, 14px);
  color: #eeeeee6b;
  transition: color 0.3s ease;
}

.hover553-card:hover .hgmail3 {
  color: #eeeeee;
}














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

.section-2g.active .hover554-card {
  opacity: 1;
  transform: translateY(0);
}

/* Container für Bildüberlagerung */
.zsm4-container {
  position: relative;
  width: 140px;
  height: auto;
  margin: 0 auto;
}

/* Bilder übereinander positionieren */
.zsm4-container img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 8px;
  transition: opacity 0.3s ease;
}

/* Standardbild initial halbtransparent */
.default-img {
  opacity: 0.3;
}

/* Hoverbild initial unsichtbar */
.hover-img {
  opacity: 0;
}

/* Hovereffekt: Default-Bild ausblenden, Hover-Bild einblenden */
.hover554-card:hover .default-img {
  opacity: 0;
}
.hover554-card:hover .hover-img {
  opacity: 1;
}





.mail4text {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(21px, 4vw, 22px);
  width: 57%;
  color: #eeeeee6b;
  margin-top: 120px;
    line-height: 0.9;

  text-align: center;
  transition: color 0.3s ease;
}

.hover554-card:hover .mail4text {
  color: #eeeeee;
}


.hgmail4 {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(12px, 4vw, 14px);
  color: #eeeeee6b;
  transition: color 0.3s ease;
}

.hover554-card:hover .hgmail4 {
  color: #eeeeee;
}





















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







.hero-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
  z-index: 10;
}

.hero-video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  transform-origin: center;
  transition: transform 0.5s ease;
}

.overlay-text {
  position: absolute;
  bottom: 10%;
  left: 5%;
  color: white;
  font-size: 3em;
  z-index: 11;
  font-family: 'Louisgeorgecafe', sans-serif;
  letter-spacing: 1px;
}




/* Ausgangszustand: groß im Hero, mittig */
.quinfinityimage7{
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, 0) scale(1); /* groß */
  width: 47%;                /* nur optische Basis – die Skalierung macht die Arbeit */
  z-index: 5;
  opacity: 0;
  transition:
    opacity .8s ease,
    transform .6s ease,
    top .6s ease,
    width .6s ease;
}

/* Hero aktiviert → einblenden */
.hero-section.active .quinfinityimage7{
  opacity: 1;
}

/* Gepinnter Zustand ab Section 1: kleiner + oben fixiert */
.quinfinityimage7.logo-pin{
  position: fixed;           /* bleibt oben stehen */
  top: 16px;                 /* Abstand oben: anpassen */
  left: 50%;
  transform: translate(-50%, 0) scale(.38); /* sanft verkleinert (Faktor anpassen) */
  width: 47%;                /* gleiche Basis – Größe kommt hier über scale() */
  z-index: 50;
  opacity: 1;
  pointer-events: none;      /* blockiert nichts */
}

/* optional: etwas kleiner auf sehr kleinen Screens */
@media (max-width: 640px){
  .quinfinityimage7.logo-pin{
    top: 10px;
    transform: translate(-50%, 0) scale(.32);
  }
}

/* Barrierefreiheit: Bewegungen reduzieren */
@media (prefers-reduced-motion: reduce){
  .quinfinityimage7{
    transition: opacity .2s linear;
  }
}












 .Zustandserfassung{
   position: absolute;
  left: 7%;
  width: 32%;
  top: 30%;
  z-index: 2;
  opacity: 0;
  transform: translateY(450px);
        transition: opacity 0.8s ease, transform 0.8s ease;

}

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

 .Anbietung{
   position: absolute;
  left: 78%;
  width: 18%;
  top: 10%;
  z-index: 2;
  opacity: 0;
  transform: translateY(250px);
        transition: opacity 0.8s ease, transform 0.8s ease;

}

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

}








.NULNEBLA-container {
  flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: 4%;
    left: 4%;
    z-index: 1;
opacity: 0;
   transform: translateY(128px);
  transition: opacity 0.8s ease, transform 1.2s ease;
}

/* Hover-Zustand */
.section-1.grow .NULNEBLA-container  {
  opacity: 1;
  transform: translateY(0);
}

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



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

  
  


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

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

/* Hover-Zustand */
.section-1.grow .wordlinkkontakttop {
  opacity: 1;
  transform: translateY(0);
}

    











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

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


.section-maß {
  position: relative;
  height: 800px; /* Start-Höhe */
  width: 100%;
  overflow: hidden;
    transition: background-color 0.4s ease;
  background-color: #386600;
}



.section-maß.active {
  
  background-color: #000;
}





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












.rectangle1 {
  position: absolute;
  top: 4%;
  left: 4%;
  width: 320px;
  height: 164px;
  background-color: #c2006b;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}

.rectangle1:hover { 
  background-color: #ff2e7e;
}

.rect-text1 {
  font-family: 'LouisGeorgeCafe', sans-serif;
  font-size: clamp(12px, 1.7vw, 13px);
  color: #ffffff;
  margin: 0;
  text-align: left;
}

.hgrect-text1 {
  font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(14px, 2.7vw, 15px);

  color: #ffffff;
}

.rectangle1:hover .rect-text1 { 
  color: #36001e;
}


.rectangle1:hover .hgrect-text1 { 
  color: #36001e;
}











.rectangle0 {
  position: absolute;
  top: 59%;
  left: 4%;
  width: 1080px;
  height: 64px;
  background-color: #cbcbcb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}

.rectangle0:hover { 
  background-color: #474747;
}

.rect-text0 {
  font-family: 'LouisGeorgeCafe', sans-serif;
  font-size: clamp(12px, 1.7vw, 13px);
  color: #474747;
  margin: 0;
  text-align: left;
}

.hgrect-text0 {
  font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(14px, 2.7vw, 15px);

  color: #474747;
}

.rectangle0:hover .rect-text0 { 
  color: #ffffff;
}


.rectangle0:hover .hgrect-text0 { 
  color: #ffffff;
}












.rectangle11 {
  position: absolute;
  top: 34%;
  left: 4%;
  width: 320px;
  height:54px;
  background-color: #6e003d80;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}

.rectangle11:hover { 
  background-color: #bd0068e3;
}

.rect-text11 {
  font-family: 'LouisGeorgeCafe', sans-serif;
  font-size: clamp(12px, 1.7vw, 13px);
  color: #ffffff;
  margin: 0;
  text-align: left;
}

.hgrect-text11 {
  font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(14px, 2.7vw, 15px);

  color: #ffffff;
}

.rectangle1:hover .rect-text11 { 
  color: #240014;
}


.rectangle11:hover .hgrect-text11 { 
  color: #240014;
}











.rectangle12 {
  position: absolute;
  top: 26%;
  left: 4%;
  width: 320px;
  height:54px;
  background-color: #6e003d80;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}

.rectangle12:hover { 
  background-color: #bd0068e3;
}

.rect-text12 {
  font-family: 'LouisGeorgeCafe', sans-serif;
  font-size: clamp(12px, 1.7vw, 13px);
  color: #ffffff;
  margin: 0;
  text-align: left;
}

.hgrect-text12 {
  font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(14px, 2.7vw, 15px);

  color: #ffffff;
}

.rectangle12:hover .rect-text12 { 
  color: #240014;
}


.rectangle12:hover .hgrect-text12 { 
  color: #240014;
}








.rectangle13 {
  position: absolute;
  top: 42%;
  left: 4%;
  width: 320px;
  height:54px;
  background-color: #6e003d80;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}

.rectangle13:hover { 
  background-color: #bd0068e3;
}

.rect-text13 {
  font-family: 'LouisGeorgeCafe', sans-serif;
  font-size: clamp(12px, 1.7vw, 13px);
  color: #ffffff;
  margin: 0;
  text-align: left;
}

.hgrect-text13 {
  font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(14px, 2.7vw, 15px);

  color: #ffffff;
}

.rectangle13:hover .rect-text13 { 
  color: #240014;
}


.rectangle13:hover .hgrect-text13 { 
  color: #240014;
}








.rectangle2 {
  position: absolute;
  top: 4%;
  left: 24%;
  width: 320px;
  height: 164px;
  background-color: #008a43;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}

.rectangle2:hover { 
  background-color: #00e472;
}

.rect-text2 {
  font-family: 'LouisGeorgeCafe', sans-serif;
  font-size: clamp(12px, 1.7vw, 13px);
  color: #ffffff;
  margin: 0;
  text-align: left;
}

.hgrect-text2 {
  font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(14px, 2.7vw, 15px);

  color: #ffffff;
}

.rectangle2:hover .rect-text2 { 
  color: #002d16;
}


.rectangle2:hover .hgrect-text2 { 
  color: #002d16;
}







.rectangle22 {
  position: absolute;
  top: 26%;
  left: 24%;
  width: 320px;
  height:54px;
  background-color: #006b34a3;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}

.rectangle22:hover { 
  background-color: #00ca62;
}

.rect-text22 {
  font-family: 'LouisGeorgeCafe', sans-serif;
  font-size: clamp(12px, 1.7vw, 13px);
  color: #ffffff;
  margin: 0;
  text-align: left;
}

.hgrect-text22 {
  font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(14px, 2.7vw, 15px);

  color: #ffffff;
}

.rectangle22:hover .rect-text22 { 
  color: #006531;
}


.rectangle22:hover .hgrect-text22 { 
  color: #006531;
}














.rectangle23 {
  position: absolute;
  top: 34%;
  left: 24%;
  width: 320px;
  height:54px;
  background-color: #006b34a3;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}

.rectangle23:hover { 
  background-color: #00ca62;
}

.rect-text23 {
  font-family: 'LouisGeorgeCafe', sans-serif;
  font-size: clamp(12px, 1.7vw, 13px);
  color: #ffffff;
  margin: 0;
  text-align: center;
}

.hgrect-text23 {
  font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(14px, 2.7vw, 15px);

  color: #ffffff;
}

.rectangle23:hover .rect-text23 { 
  color: #006531;
}


.rectangle23:hover .hgrect-text23 { 
  color: #006531;
}







.rectangle3 {
  position: absolute;
  top: 4%;
  left: 44%;
  width: 320px;
  height:164px;
  background-color: #db7500;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}

.rectangle3:hover { 
  background-color: #ff9900;
}

.rect-text1 {
  font-family: 'LouisGeorgeCafe', sans-serif;
  font-size: clamp(12px, 1.7vw, 13px);
  color: #ffffff;
  margin: 0;
  text-align: left;
}

.hgrect-text1 {
  font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(14px, 2.7vw, 15px);

  color: #ffffff;
}

.rectangle3:hover .rect-text1 { 
  color: #4d2e00;
}


.rectangle3:hover .hgrect-text1 { 
  color: #4d2e00;
}














.rectangle33 {
  position: absolute;
  top: 26%;
  left: 44%;
  width: 320px;
  height:54px;
  background-color: #7c4200a2;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}

.rectangle33:hover { 
  background-color: #e17800c9;
}

.rect-text33 {
  font-family: 'LouisGeorgeCafe', sans-serif;
  font-size: clamp(12px, 1.7vw, 13px);
  color: #ffffff;
  margin: 0;
  text-align: left;
}

.hgrect-text33 {
  font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(14px, 2.7vw, 15px);

  color: #ffffff;
}

.rectangle33:hover .rect-text33 { 
  color: #4d2e00;
}


.rectangle33:hover .hgrect-text33 { 
  color: #4d2e00;
}




.rectangle34 {
  position: absolute;
  top: 34%;
  left: 44%;
  width: 320px;
  height:54px;
  background-color: #7c4200a2;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}

.rectangle34:hover { 
  background-color: #e17800c9;
}

.rect-text34 {
  font-family: 'LouisGeorgeCafe', sans-serif;
  font-size: clamp(12px, 1.7vw, 13px);
  color: #ffffff;
  margin: 0;
  text-align: left;
}

.hgrect-text34 {
  font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(14px, 2.7vw, 15px);

  color: #ffffff;
}

.rectangle34:hover .rect-text34 { 
  color: #4d2e00;
}


.rectangle34:hover .hgrect-text34 { 
  color: #4d2e00;
}



.rectangle35 {
  position: absolute;
  top: 42%;
  left: 44%;
  width: 320px;
  height:54px;
  background-color: #7c4200a2;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}

.rectangle35:hover { 
  background-color: #e17800c9;
}

.rect-text35 {
  font-family: 'LouisGeorgeCafe', sans-serif;
  font-size: clamp(12px, 1.7vw, 13px);
  color: #ffffff;
  margin: 0;
  text-align: left;
}

.hgrect-text35 {
  font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(14px, 2.7vw, 15px);

  color: #ffffff;
}

.rectangle35:hover .rect-text35 { 
  color: #4d2e00;
}


.rectangle35:hover .hgrect-text35 { 
  color: #4d2e00;
}












.rectangle36 {
  position: absolute;
  top: 50%;
  left: 44%;
  width: 320px;
  height:54px;
  background-color: #7c4200a2;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}

.rectangle36:hover { 
  background-color: #e17800c9;
}

.rect-text36 {
  font-family: 'LouisGeorgeCafe', sans-serif;
  font-size: clamp(12px, 1.7vw, 13px);
  color: #ffffff;
  margin: 0;
  text-align: left;
}

.hgrect-text36 {
  font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(14px, 2.7vw, 15px);

  color: #ffffff;
}

.rectangle36:hover .rect-text36 { 
  color: #4d2e00;
}


.rectangle36:hover .hgrect-text36 { 
  color: #4d2e00;
}






.maßone { 

 font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(47px, 3.4vw, 51px);
    max-width: 60%;
    color: transparent;
    position: absolute;
    top: 4%;
    left: 4%;
    line-height: 1;
    transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateX(230px);
    opacity: 0;
          transition-delay: 0.6s; /* z. B. 1 Sekunde später */}



.section-maß.active .maßone{
    transform: translateY(0);
    color: #ffffff;
opacity: 1;
}












.kompetenz { 

 font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(22px, 3.4vw, 27px);
    max-width: 60%;
    text-align: center;
    color: transparent;
    position: absolute;
    bottom: 2%;
    left: 45%;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateX(230px);
    opacity: 0;
    transition-delay: 1.6s; /* z. B. 1 Sekunde später */}


.kompetenzhg{ 

color: #f0f0f0cf;}

.section-maß.active .kompetenz{
    transform: translateY(0);
    color: #db7500;
opacity: 1;
}

.section-maß.active .kompetenz:hover{
  
    color: #ad773a;

}










.ernährung { 

 font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(22px, 3.4vw, 27px);
    max-width: 60%;
    text-align: center;
    color: transparent;
    position: absolute;
    bottom: 2%;
    left: 4%;
    cursor: pointer;
    line-height: 1;
    transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateX(230px);
    opacity: 0;
    transition-delay: 1.6s; /* z. B. 1 Sekunde später */}


.ernährunghg{ 

color: #f0f0f0cf;}

.section-maß.active .ernährung{
    transform: translateY(0);
    color: #ff2e7e;
opacity: 1;
}

.section-maß.active .ernährung:hover{
  
    color: #db3877;

}





.bewegung { 

 font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(22px, 3.4vw, 27px);
    max-width: 60%;
    text-align: center;
    color: transparent;
    position: absolute;
    bottom: 2%;
    cursor: pointer;
    left: 24%;
    line-height: 1;
    transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateX(230px);
    opacity: 0;
    transition-delay: 1.6s; /* z. B. 1 Sekunde später */}


.bewegunghg{ 

color: #f0f0f0cf;}

.section-maß.active .bewegung{
    transform: translateY(0);
    color: #00a851;
opacity: 1;
}

.section-maß.active .bewegung:hover{
  text-decoration: underline;
    color: #40c37f;

}










.maßtwo { 

 font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(27px, 3.4vw, 31px);
    max-width: 60%;
    color: transparent;
    position: absolute;
    top: 13%;
    left: 4%;
    line-height: 1;
    transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateX(-430px);
    opacity: 0;
          transition-delay: 1.1s; /* z. B. 1 Sekunde später */}



.section-maß.active .maßtwo{
    transform: translateY(0);
    color: #e73092;
opacity: 1;
}




.maßtext { 

 font-family: 'LexendBold', sans-serif;
    font-size: clamp(14, 3.4vw, 17px);
    max-width: 60%;
    color: transparent;
    position: absolute;
    top: 24%;
    left: 4%;
    line-height: 1;
    transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateY(230px);
    opacity: 0;
          transition-delay: 1.1s; /* z. B. 1 Sekunde später */}



.section-maß.active .maßtext{
    transform: translateY(0);
    color: #e73092;
opacity: 1;
}





.maßzerotext { 

 font-family: 'LexendBold', sans-serif;
    font-size: clamp(14, 3.4vw, 17px);
    max-width: 60%;
    color: transparent;
    position: absolute;
    top: 27%;
    left: 4%;
    line-height: 1;
    transition: opacity 1.8s ease, transform 0.8s ease;
  transform: translateY(230px);
    opacity: 0;
          transition-delay: 1.1s; /* z. B. 1 Sekunde später */}



.section-maß.active .maßzerotext{
    transform: translateY(0);
    color: #f4f4f4;
opacity: 1;
}




.inbetweenquin-text {
position: absolute;
top: 34%;
left: 4%;
font-family: 'Avenirlight', sans-serif;
font-size: clamp(18px, 2.4vw, 18px);
max-width: 1000px;
color: #ffffff;
line-height: 1.4;
max-width: 60%;
  transform: translateY(430px);
    opacity: 0;
        transition: opacity 1.8s ease, transform 0.8s ease;

          transition-delay: 1.1s; /* z. B. 1 Sekunde später */}



.section-maß.active .inbetweenquin-text{
    transform: translateY(0);
    color: #f4f4f4;
opacity: 1;
}


.gradient-word {
color: #e73092;
}

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

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

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







.sixonesubtext-text {
position: absolute;
top: 44%;
left: 22%;
font-size: clamp(16px, 1.4vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #ffffff;
line-height: 1.0;
max-width: 200px;
transform: translateY(430px);
    opacity: 0;
        transition: opacity 1.8s ease, transform 0.8s ease;

          transition-delay: 1.1s; /* z. B. 1 Sekunde später */}



.section-maß.active .sixonesubtext-text{
    transform: translateY(0);
    color: #f4f4f4;
opacity: 1;
}

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




.sixtwosubtext-text {
position: absolute;
top: 44%;
left: 4%;
font-size: clamp(16px, 1.4vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #ffffff;
line-height: 1.0;
max-width: 200px;
  opacity: 0;
        transition: opacity 1.8s ease, transform 0.8s ease;
transform: translateY(430px);

          transition-delay: 1.1s; /* z. B. 1 Sekunde später */}



.section-maß.active .sixtwosubtext-text{
    transform: translateY(0);
    color: #f4f4f4;
opacity: 1;
}

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




.sixthreesubtext-text {
position: absolute;
top: 44%;
left: 40%;
font-size: clamp(16px, 1.4vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #ffffff;
line-height: 1.0;
max-width: 200px;
  opacity: 0;
        transition: opacity 1.8s ease, transform 0.8s ease;
transform: translateY(430px);

          transition-delay: 1.1s; /* z. B. 1 Sekunde später */}



.section-maß.active .sixthreesubtext-text{
    transform: translateY(0);
    color: #f4f4f4;
opacity: 1;
}

.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 */
left: 4%;
top: 57%;
position: absolute;
display: block;      /* Verhindert Lücken unter dem Bild */
  opacity: 0;
        transition: opacity 1.8s ease, transform 0.8s ease;
transform: translateX(-230px);

          transition-delay: 1.1s; /* z. B. 1 Sekunde später */}



.section-maß.active .left-overlay{
    transform: translateY(0);
    color: #f4f4f4;
opacity: 1;
}


.middle-overlay {
width: 7%;         /* oder z. B. 300px für feste Breite */
max-width: 420px;    /* Bild wird nie größer als 600px */
top: 57%;
left: 22%;
position: absolute;
display: block;      /* Verhindert Lücken unter dem Bild */
  opacity: 0;
        transition: opacity 1.8s ease, transform 0.8s ease;
transform: translateX(-630px);

          transition-delay: 1.1s; /* z. B. 1 Sekunde später */}



.section-maß.active .middle-overlay{
    transform: translateY(0);
    color: #f4f4f4;
opacity: 1;
}

.right-overlay {
width: 9%;         /* oder z. B. 300px für feste Breite */
max-width: 420px;    /* Bild wird nie größer als 600px */
top: 57%;
left: 40%;
position: absolute;
display: block;      /* Verhindert Lücken unter dem Bild */
  opacity: 0;
        transition: opacity 1.8s ease, transform 0.8s ease;
transform: translateX(-1030px);

          transition-delay: 1.1s; /* z. B. 1 Sekunde später */}



.section-maß.active .right-overlay{
    transform: translateY(0);
    color: #f4f4f4;
opacity: 1;
}
.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 */
}







.section-maß.active {
  
  background-color: #000;
}





.section-green.from-section-maß {
  background-color: #000;
    transition: background-color 0.4s ease;

}


.section-maß.from-section-leistungen {
  background-color: #000;
    transition: background-color 0.4s ease;

}

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


.section-endgame.active {
  background-color: #ada8a8;
}






.section-whyc.from-section-endgame {
  background-color: #ada8a8;
    transition: background-color 0.4s ease;
}




.section-endgame.from-section-vgl {
  background-color: #CDD1DC;
    transition: background-color 0.4s ease;
}




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



 .quinfinityimage5{
   position: absolute;
  left: 72%;
  width: 27%;
  top: 3%;
  z-index: 4;
  opacity: 1;
  transform: translateY(250px);
        transition: opacity 0.8s ease, transform 0.8s ease;

}

.section-pictures.active .quinfinityimage5
{
  opacity: 1;
  transform: translateY(0);

}



  .quinfinityimage8{
   position: absolute;
  left: 45%;

  border-radius: 8px;
  width: 27%;
  top: 63%;
  z-index: 1;
  opacity: 0;
  transform: translateX(-450px);
        transition: opacity 0.8s ease, transform 0.8s ease;

}

.section-pictures.active .quinfinityimage8
{
  opacity: 1;
  transform: translateY(0);

}




  .quinfinityimage9{
   position: absolute;
  left: 55%;

  border-radius: 8px;
  width: 22%;
  top: 33%;
  z-index: 1;
  opacity: 0;
  transform: translateX(650px);
        transition: opacity 0.8s ease, transform 0.8s ease;

}

.section-pictures.active .quinfinityimage9
{
  opacity: 1;
  transform: translateY(0);

}




  .quinfinityimagex{
   position: absolute;
  left: 23%;

  border-radius: 8px;
  width: 37%;
  bottom: 0%;
  z-index: 1;
  opacity: 0;
  transform: translateY(650px);
        transition: opacity 0.8s ease, transform 0.8s ease;

}

.section-pictures.active .quinfinityimagex
{
  opacity: 1;
  transform: translateY(0);

}



  .quinfinityimagez{
   position: absolute;
  left: 25%;

  border-radius: 8px;
  width: 27%;
  top: 30%;
  z-index: 0;
  opacity: 0;
  transform: translateY(-150px);
        transition: opacity 0.8s ease, transform 0.8s ease;

}

.section-pictures.active .quinfinityimagez
{
  opacity: 1;
  transform: translateY(0);

}








.section-vgl.from-section-pictures {
  background-color: #CDD1DC;
    transition: background-color 0.4s ease;
}






.section-vino {
  position: relative;
  height: 700px; /* Start-Höhe */
  width: 100%;
  overflow: hidden;
    transition: background-color 0.4s ease;
  background-color: #5b004d;
}


.section-vino.active  {
  background-color: #5b004d;
}



































 .vinoimg{
   position: absolute;
  left: 23%;
  width: 57%;
  top: 10%;
  z-index: 2;
  opacity: 0;
  transform: translateX(250px);
        transition: opacity 0.8s ease, transform 0.8s ease;

}

.section-vino.active .vinoimg
{
  opacity: 1;
  transform: translateY(0);

}







.section-vino.from-section-red {
  background-color: #4a0019;
    transition: background-color 1.2s ease;
}


.section-red {
  position: relative;
  height: 700px; /* Start-Höhe */
  width: 100%;
  overflow: hidden;
    transition: background-color 0.4s ease;
  background-color: #5b004d;
}


.section-red.active  {
  background-color: #4a0019;
}




.redimg{
   position: absolute;
  left: 23%;
  width: 57%;
  top: 10%;
  z-index: 2;
  opacity: 0;
  transform: translateX(250px);
        transition: opacity 0.8s ease, transform 0.8s ease;

}

.section-red.active .redimg
{
  opacity: 1;
  transform: translateY(0);

}












.section-red.from-section-or {
  background-color: #6c3f00;
    transition: background-color 1.2s ease;
}


.section-or {
  position: relative;
  height: 700px; /* Start-Höhe */
  width: 100%;
  overflow: hidden;
    transition: background-color 0.4s ease;
  background-color: #4a0019;
}


.section-or.active  {
  background-color: #6c3f00;
}


.orimg{
   position: absolute;
  left: 23%;
  width: 57%;
  top: 10%;
  z-index: 2;
  opacity: 0;
  transform: translateX(-250px);
        transition: opacity 0.8s ease, transform 0.8s ease;

}

.section-or.active .orimg
{
  opacity: 1;
  transform: translateY(0);

}
















.section-or.from-section-yel {
  background-color: #6c6300;
    transition: background-color 1.2s ease;
}


.section-yel {
  position: relative;
  height: 700px; /* Start-Höhe */
  width: 100%;
  overflow: hidden;
    transition: background-color 0.4s ease;
  background-color: #6c3f00;
}


.section-yel.active  {
  background-color: #6c6300;
}


.yelimg{
   position: absolute;
  left: 23%;
  width: 57%;
  top: 10%;
  z-index: 2;
  opacity: 0;
  transform: translateX(250px);
        transition: opacity 0.8s ease, transform 0.8s ease;

}

.section-yel.active .yelimg
{
  opacity: 1;
  transform: translateY(0);

}














.section-yel.from-section-green {
  background-color: #386600;
    transition: background-color 1.2s ease;
}


.section-green {
  position: relative;
  height: 700px; /* Start-Höhe */
  width: 100%;
  overflow: hidden;
    transition: background-color 0.4s ease;
  background-color: #6c6300;
}


.section-green.active  {
  background-color: #386600;
}


.greenimg{
   position: absolute;
  left: 23%;
  width: 57%;
  top: 10%;
  z-index: 2;
  opacity: 0;
  transform: translateX(250px);
        transition: opacity 0.8s ease, transform 0.8s ease;

}

.section-green.active .greenimg
{
  opacity: 1;
  transform: translateY(0);

}












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


.section-endgame.active {
  background-color: #ada8a8;
}




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

.section-vgl.active {
  background-color: #CDD1DC;
}



.vgltxt{
    font-family: 'LEMONMILKLIGHT', sans-serif;
    font-size: clamp(37px, 3.4vw, 41px);
    color: #080808e2;
     position: relative;
     text-align: center;
    top: 7%;
    left: -1%;
    line-height: 1;
    transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateY(230px);
    opacity: 0;
    word-spacing: -3px;
  }

  .section-vgl.active .vgltxt{
  background-color: #CDD1DC;
    transform: translateY(0);
opacity: 1;
}



.vgltx2{
    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(37px, 3.4vw, 41px);
    color: #080808e2;
    position: relative;
    top: 5%;
    left: -1%;
    text-align: center;
    line-height: 1;
    transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateY(230px);
    opacity: 0;
    word-spacing: -5px;
  }

  .section-vgl.active .vgltx2{
  background-color: #CDD1DC;
    transform: translateY(0);
opacity: 1;
}





.vgltx{
    font-family: 'LexendBold', sans-serif;
    font-size: clamp(17px, 3.4vw, 19px);
    color: #080808e2;
    position: relative;
    top: 5%;
    left: 35%;
    line-height: 1;
        max-width: 40%;

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

  .section-vgl.active .vgltx{

    transform: translateY(0);
opacity: 1;
}







.vglt2{
    font-family: 'Avenirlight', sans-serif;
    font-size: clamp(16px, 3.4vw, 17px);
    color: #080808e2;
    position: relative;
    text-align: center;
    max-width: 50%;
    top: 7%;
    left: 24%;
    line-height: 1.2;
    transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateY(230px);
    opacity: 0;
  }


  .HGvglt2{
    font-family: 'Avenirmedium', sans-serif;
    font-size: clamp(17px, 3.4vw, 19px);
    color: #c8158c;
   
  }


  .section-vgl.active .vglt2{
  background-color: #CDD1DC;
    transform: translateY(0);
opacity: 1;
}











.color2-swipe{
  position:relative;
  left:29%;
  display:inline-block;
  font-family:'PoppinsRegular';
  padding:8px 122px;
  border:2px solid transparent;     /* fixiert Box-Metrik */
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  color:#fff;
  background:#d9d9d9;
  cursor:pointer;
  overflow:hidden;
  transition: background-color .6s ease;
  text-decoration:none;
  bottom: -71%;
  transition: opacity 1.8s ease, transform 0.8s ease;
  transform: translateX(230px);
   opacity: 0;
   transition-delay: 1s; /* z. B. 1 Sekunde später */

  }

  
  .section-whyc.active .color2-swipe{
  transform: translateX(0);
  opacity: 1;
  }



.color2-swipe::after{
  content:"";
  position:absolute; top:0; left:-75%;
  width:10%; height:100%;
  background:#000000;
  transform: skewX(-20deg);
  opacity:0;
}
.color2-swipe:hover::after{
  opacity:1; animation: swipe 1.2s forwards;
}
.color2-swipe:hover{ background:#ca0065; }

@keyframes swipe{
  0%{left:-75%} 100%{left:125%}
}












.color3-swipe{
  position:relative;
  left:-15%;
  display:inline-block;
  font-family:'PoppinsRegular';
  padding:8px 122px;
  border:2px solid transparent;     /* fixiert Box-Metrik */
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  color:#fff;
  background:#cf2b7d;
  cursor:pointer;
  overflow:hidden;
  transition: background-color .6s ease;
  text-decoration:none;
  bottom: -71%;
 transition: opacity 1.8s ease, transform 0.8s ease;
  transform: translateX(-230px);
   opacity: 0;
   transition-delay: 1s; /* z. B. 1 Sekunde später */

  }

  
  .section-whyc.active .color3-swipe{
  transform: translateX(0);
  opacity: 1;
  }
  

.color3-swipe::after{
  content:"";
  position:absolute; top:0; left:-75%;
  width:10%; height:100%;
  background:#000000;
  transform: skewX(-20deg);
  opacity:0;
}
.color3-swipe:hover::after{
  opacity:1; animation: swipe 1.2s forwards;
}
.color3-swipe:hover{ background:#d9d9d9; }

@keyframes swipe{
  0%{left:-75%} 100%{left:125%}
}










    .vgl0-group {
  display: flex;
  gap: -42%;
  position: absolute;
  top: 24%;
  left: 9%;
    transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateY(230px);
    opacity: 0;
  }

  .section-vgl.active .vgl0-group{
    transform: translateY(0);
opacity: 1;
}

.vgl0-container {
  width: 45%;
  cursor: pointer;
}

.vgl0-wrapper {
  position: relative;
  left: -12%;
  top: 29%;
  width: 10%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.vgl0-wrapper .icon {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  transition: opacity 0.4s ease;
  border-radius: 8px;
}

.vgl0-wrapper .hover {
  opacity: 0;
}


.vgl0-wrapper .default {
  opacity: 0.4;
}

.vgl0-group:hover .vgl0-wrapper .default {
  opacity: 0;
}
.vgl0-group:hover .vgl0-wrapper .hover {
  opacity: 1;
}



.vgl0-text {
  margin-top: 16px;
  font-family: 'LouisGeorgeCafe', sans-serif;
  font-size: clamp(14px, 2vw, 18px);
  color: #ddd;
  width: 80%;
}


.vgl0-group:hover .vgl0-text{
  color: #9d9d9d;

}



.hgvgl0 {
  font-family: 'LEMONMILKBOLD', sans-serif;
  color: #ddd;
  font-size: clamp(18px, 2.5vw, 22px);
}



.vgl0-group:hover .hgvgl0 {
   font-family: 'LEMONMILKBOLD', sans-serif;
  color: #9d9d9d;
  font-size: clamp(18px, 2.5vw, 22px);
}


.vgl0-group:hover .hgvgl0-2 {
   font-family: 'LEMONMILKBOLD', sans-serif;
  color: #560032;
  font-size: clamp(18px, 2.5vw, 22px);
}

.vgl1-group:hover .hgvgl0-21 {
   font-family: 'LEMONMILKBOLD', sans-serif;
  color: #9d9d9d;
  font-size: clamp(18px, 2.5vw, 22px);
}


.vgl0-text-2 {
  margin-top: 16px;
  font-family: 'LouisGeorgeCafe', sans-serif;
  font-size: clamp(14px, 2vw, 18px);
  color: #ddd;
  width: 80%;
}


.vgl0-group:hover .vgl0-text-2 {
  color: #560032;
 
}

.hgvgl0-2 {
  font-family: 'LEMONMILKBOLD', sans-serif;
  color: #ddd;
  font-size: clamp(18px, 2.5vw, 22px);
}

.hgvgl0-21 {
  font-family: 'LEMONMILKBOLD', sans-serif;
  color: #ddd;
  font-size: clamp(18px, 2.5vw, 22px);
}

.hgvgl0-2-2 {
  font-family: 'LexendBold', sans-serif;
    font-size: clamp(14px, 2.5vw, 15px);

}
















.vgl1-group {
  display: flex;
  gap: -42%;
  position: absolute;
  top: 37%;
  left: 9%;
  transform: translateY(230px);
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.section-vgl.active .vgl1-group {
  transform: translateY(0);
  opacity: 1;
}

.vgl1-container {
  width: 45%;
  cursor: pointer;
}

.vgl1-wrapper {
  position: relative;
  left: -12%;
  top: 29%;
  width: 10%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.vgl1-wrapper .icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.4s ease;
  border-radius: 8px;
}

.vgl1-wrapper .hover {
  opacity: 0;
}
.vgl1-wrapper .default {
  opacity: 0.4;
}

.vgl1-group:hover .vgl1-wrapper .default {
  opacity: 0;
}
.vgl1-group:hover .vgl1-wrapper .hover {
  opacity: 1;
}

/* Text */
.vgl1-text,
.vgl1-text-2 {
  font-family: 'LouisGeorgeCafe', sans-serif;
  font-size: clamp(14px, 2vw, 18px);
  color: #ddd;
  width: 80%;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.vgl1-group:hover .vgl1-text {
  color: #9d9d9d;
}

.vgl1-group:hover .vgl1-text-2 {
  color: #920055;
}

/* Überschriften */
.hgvgl{
  font-family: 'LEMONMILKBOLD', sans-serif;
  color: #ca0065;
}



.hgvgl-2 {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(18px, 2.5vw, 22px);
  color: #ddd;
  display: inline-block;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.vgl1-group:hover .hgvgl {
  color: #9d9d9d;
}
.vgl1-group:hover .hgvgl-2 {
  color: #920055;
}

/* Zusatztexte */
.hgvgl1-2,
.hgvgl1-2-2 {
  font-family: 'LexendBold', sans-serif;
  font-size: clamp(14px, 2vw, 15px);
  display: block;
  margin-top: 8px;
  transition: color 0.3s ease;
}

.vgl1-group:hover .hgvgl1-2 {
  color: #9d9d9d;
}
.vgl1-group:hover .hgvgl1-2-2 {
  color: #920055;
}














.vgl2-group {
  display: flex;
  gap: -42%;
  position: absolute;
  top: 52%;
  left: 9%;
  transform: translateY(230px);
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.section-vgl.active .vgl2-group {
  transform: translateY(0);
  opacity: 1;
}

.vgl2-container {
  width: 45%;
  cursor: pointer;
}

.vgl2-wrapper {
  position: relative;
  left: -12%;
  top: 29%;
  width: 10%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.vgl2-wrapper .icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.4s ease;
  border-radius: 8px;
}

.vgl2-wrapper .hover {
  opacity: 0;
}
.vgl2-wrapper .default {
  opacity: 0.4;
}

.vgl2-group:hover .vgl2-wrapper .default {
  opacity: 0;
}
.vgl2-group:hover .vgl2-wrapper .hover {
  opacity: 1;
}

/* Text */
.vgl2-text,
.vgl2-text-2 {
  font-family: 'LouisGeorgeCafe', sans-serif;
  font-size: clamp(14px, 2vw, 18px);
  color: #ddd;
  width: 80%;
  line-height: 1.4;
  transition: color 0.3s ease;
}


.vgl2-group:hover .vgl2-text {
  color: #9d9d9d;
}

.vgl2-group:hover .vgl2-text-2 {
  color: #d38705;
}

/* Headlines */
.hgvgl2,
.hgvgl2-2 {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(18px, 2.5vw, 22px);
  color: #ddd;
  display: inline-block;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.vgl2-group:hover .hgvgl2 {
  color: #9d9d9d;
}
.vgl2-group:hover .hgvgl2-2 {
  color: #d38705;
}

/* Zusatztexte */
.hgvgl2-1,
.hgvgl2-2-2 {
  font-family: 'LexendBold', sans-serif;
  font-size: clamp(14px, 2vw, 15px);
  display: block;
  margin-top: 8px;
  transition: color 0.3s ease;
}

.vgl2-group:hover .hgvgl2-1 {
  color: #9d9d9d;
}
.vgl2-group:hover .hgvgl2-2-2 {
  color: #d38705;
}















.vgl3-group {
 display: flex;
  gap: -42%;
  position: absolute;
  top: 67%;
  left: 9%;
  transform: translateY(230px);
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.section-vgl.active .vgl3-group {
  transform: translateY(0);
  opacity: 1;
}

.vgl3-container {
  width: 45%;
  cursor: pointer;
}

.vgl3-wrapper {
  position: relative;
  left: -12%;
  top: 29%;
  width: 10%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.vgl3-wrapper .icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.4s ease;
  border-radius: 8px;
}

.vgl3-wrapper .hover {
  opacity: 0;
}
.vgl3-wrapper .default {
  opacity: 0.4;
}

.vgl3-group:hover .vgl3-wrapper .default {
  opacity: 0;
}
.vgl3-group:hover .vgl3-wrapper .hover {
  opacity: 1;
}

.vgl3-text,
.vgl3-text-2 {
  font-family: 'LouisGeorgeCafe', sans-serif;
  font-size: clamp(14px, 2vw, 18px);
  color: #ddd;
  width: 80%;
  line-height: 1.4;
  transition: color 0.3s ease;
}


.vgl3-group:hover .vgl3-text {
  color: #9d9d9d;
}

.vgl3-group:hover .vgl3-text-2 {
  color: #b0c400;
}


.hgvgl3,
.hgvgl3-2 {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(18px, 2.5vw, 22px);
  color: #ddd;
  display: inline-block;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.vgl3-group:hover .hgvgl3 {
  color: #9d9d9d;
}
.vgl3-group:hover .hgvgl3-2 {
  color: #b0c400;
}

.hgvgl3-1,
.hgvgl3-2-2 {
  font-family: 'LexendBold', sans-serif;
  font-size: clamp(14px, 2vw, 15px);
  display: block;
  margin-top: 8px;
  transition: color 0.3s ease;
}

.vgl3-group:hover .hgvgl3-1 {
  color: #9d9d9d;
}
.vgl3-group:hover .hgvgl3-2-2 {
  color: #b0c400;
}














.vgl4-group {
 display: flex;
  gap: -42%;
  position: absolute;
  top: 82%;
  left: 9%;
  transform: translateY(230px);
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.section-vgl.active .vgl4-group {
  transform: translateY(0);
  opacity: 1;
}

.vgl4-container {
  width: 45%;
  cursor: pointer;
}

.vgl4-wrapper {
  position: relative;
  left: -12%;
  top: 29%;
  width: 10%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.vgl4-wrapper .icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.4s ease;
  border-radius: 8px;
}

.vgl4-wrapper .hover {
  opacity: 0;
}
.vgl4-wrapper .default {
  opacity: 0.4;
}

.vgl4-group:hover .vgl4-wrapper .default {
  opacity: 0;
}
.vgl4-group:hover .vgl4-wrapper .hover {
  opacity: 1;
}

.vgl4-text,
.vgl4-text-2 {
  font-family: 'LouisGeorgeCafe', sans-serif;
  font-size: clamp(14px, 2vw, 18px);
  color: #ddd;
  width: 80%;
  line-height: 1.4;
  transition: color 0.3s ease;
}


.vgl4-group:hover .vgl4-text {
  color: #9d9d9d;
}

.vgl4-group:hover .vgl4-text-2 {
  color: #1c9b00;
}



.vgl4-group:hover .vgl4-span {
  color: #9d9d9d;
    font-family: 'Avenirmedium', sans-serif;

}

.vgl4-group:hover .vgl4-span {
  color: #062100;
}

.vgl4-group:hover .vgl4-span:hover {
  color: #8ebd83;
}


.hgvgl4,
.hgvgl4-2 {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(18px, 2.5vw, 22px);
  color: #ddd;
  display: inline-block;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}




.vgl4-group:hover .hgvgl4 {
  color: #9d9d9d;
}
.vgl4-group:hover .hgvgl4-2 {
  color: #1c9b00;
}

.vgl4-group:hover .xsads {
  color: #1c9b00;
}


.hgvgl4-1,
.hgvgl4-2-2 {
  font-family: 'LexendBold', sans-serif;
  font-size: clamp(14px, 2vw, 15px);
  display: block;
  margin-top: 8px;
  transition: color 0.3s ease;
}

.vgl4-group:hover .hgvgl3-1 {
  color: #9d9d9d;
}
.vgl4-group:hover .hgvgl3-2-2 {
  color: #1c9b00;
}







 .endgametxt{
    font-family: 'LEMONMILKBOLD', sans-serif;
    font-size: clamp(17px, 3.4vw, 31px);
    color: #080808e2;
    position: absolute;
    top: 50%;
    left: 37%;
    line-height: 1;
    transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateY(230px);
    opacity: 0;
  }

  .section-endgame.active .endgametxt{
  transform: translateX(0);
  opacity: 1;
  }



  
 .endgame2xt{
    font-family: 'Avenirmedium', sans-serif;
    font-size: clamp(13px, 3.4vw, 15x);
    color: #080808e2;
    position: absolute;
    text-align: center;
    top: 65%;
    left: 34%;
    max-width: 30%;
    line-height: 1;
    transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateY(230px);
    opacity: 0;
  }

  .section-endgame.active .endgame2xt{
  transform: translateX(0);
  opacity: 1;
  }




 .quinfinityimage1{
   position: absolute;
  left: 32%;
  width: 32%;
  top: 20%;
  z-index: 2;
  opacity: 0;
  transform: translateY(250px);
        transition: opacity 0.8s ease, transform 0.8s ease;

}

.section-endgame.active .quinfinityimage1
{
  opacity: 1;
  transform: translateY(0);

}





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

  
  .section-why.active .whytext{
  transform: translateX(0);
  opacity: 1;
  }








.tap-overlay {
  position: absolute;
  bottom: 4%;
  left: 48%;
  width: 7%;
  height: auto;
  overflow: hidden;
  opacity: 1;
  transform: translateX(300px);
  transition: opacity 1.3s ease, transform 1.3s ease;
}

.section-quinstep.grow .tap-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* Standardbild */
.tap-overlay img.default {
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

/* Weißes Hoverbild */
.tap-overlay img.hover {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Automatischer Wechsel bei sichtbarer Section */
.section-quinstep.grow .tap-overlay img.default {
  opacity: 0;
}

.section-quinstep.grow .tap-overlay img.hover {
  opacity: 1;
}



















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

.section-why.active .mp2-card {
  opacity: 1;
  transform: translateX(0);
}

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

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

.mp2-card:hover .color-overlay {
  background-color: #0d080a9a; /* gewünschte Farbe mit Transparenz */
}

/* Text über dem Bild */
.mp2text {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'reaniebeanie', sans-serif;
  font-size: clamp(28px, 7vw, 31px);
  color: #ffffffcc;
  text-align: center;
  z-index: 2;
  transition: color 0.3s ease;
  opacity: 0;
  line-height: 0.8;
}

.mp2-card:hover .mp2text {
  color: #ffffff;
    opacity: 1;
}

.hgmp2text {
  color: #ffffff;
    opacity: 1;
    font-family: 'LexendBold', sans-serif;
    word-spacing: -5px;
  font-size: clamp(18px, 7vw, 21px);
}

.mp2-card:hover .hgmp2text {
  color: #ffffff;
    opacity: 1;
}












.coco-card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: relative;
  top: 46%;
  left: -20%;
  opacity: 0;
  transform: translateY(420px);
  transition: opacity 1.3s ease, transform 1.3s ease;
  opacity: 0;
}

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

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

.hover9-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: #0d080a9a; /* gewünschte Farbe mit Transparenz */
}

/* Text über dem Bild */
.cocotext {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'reaniebeanie', sans-serif;
  font-size: clamp(28px, 7vw, 31px);
  color: #ffffffcc;
  text-align: center;
  z-index: 2;
  transition: color 0.3s ease;
  opacity: 0;
  line-height: 0.8;
}

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

.hgcocotext {
  color: #ffffff;
    opacity: 1;
    font-family: 'LexendBold', sans-serif;
    word-spacing: -5px;
  font-size: clamp(18px, 7vw, 21px);
}

.coco-card:hover .hgcocotext {
  color: #ffffff;
    opacity: 1;
}









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

.section-why.active .ep1-card {
  opacity: 1;
  transform: translateX(0);
}

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

.hover2-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: #0f03079d; /* initial transparent */
  transition: background-color 0.4s ease;
  border-radius: 8px;
}

.ep1-card:hover .color-overlay {
  background-color: #0f03079d; /* gewünschte Farbe mit Transparenz */
}

/* Text über dem Bild */
.ep1text {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'reaniebeanie', sans-serif;
  font-size: clamp(28px, 7vw, 31px);
  color: #ffffffcc;
  text-align: center;
  z-index: 2;
  transition: color 0.3s ease;
  opacity: 0;
  line-height: 0.8;
}

.ep1-card:hover .ep1text {
  color: #ffffff;
    opacity: 1;
}

.hgep1text {
  color: #ffffff;
    opacity: 1;
    font-family: 'LexendBold', sans-serif;
    word-spacing: -5px;
  font-size: clamp(18px, 7vw, 21px);
}

.ep1-card:hover .hgep1text {
  color: #ffffff;
    opacity: 1;
}




















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

.section-why.active .a-card {
  opacity: 1;
  transform: translateX(0);
}

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

.hover2-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: #0400319d; /* initial transparent */
  transition: background-color 0.4s ease;
  border-radius: 8px;
}

.a-card:hover .color-overlay {
  background-color: #0400319d; /* gewünschte Farbe mit Transparenz */
}

/* Text über dem Bild */
.atext {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'reaniebeanie', sans-serif;
  font-size: clamp(28px, 7vw, 31px);
  color: #ffffffcc;
  text-align: center;
  z-index: 2;
  transition: color 0.3s ease;
  opacity: 0;
  line-height: 0.8;
}

.a-card:hover .atext {
  color: #ffffff;
    opacity: 1;
}

.hgatext {
  color: #ffffff;
    opacity: 1;
    font-family: 'LexendBold', sans-serif;
    word-spacing: -5px;
  font-size: clamp(18px, 7vw, 21px);
}

.a-card:hover .hgatext {
  color: #ffffff;
    opacity: 1;
}





















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

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

.neu-container {
  position: relative;
  width: 310px;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 8px;
}

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

.neu-card:hover .color-overlay {
  background-color: #1a010ab6; /* gewünschte Farbe mit Transparenz */
}

/* Text über dem Bild */
.neutext {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'reaniebeanie', sans-serif;
  font-size: clamp(28px, 7vw, 31px);
  color: #ffffffcc;
  text-align: center;
  z-index: 2;
  transition: color 0.3s ease;
  opacity: 0;
  line-height: 0.8;
}

.neu-card:hover .neutext {
  color: #ffffff;
    opacity: 1;
}

.hgneutext {
  color: #ffffff;
    opacity: 1;
    font-family: 'LexendBold', sans-serif;
    word-spacing: -5px;
  font-size: clamp(18px, 7vw, 21px);
}


.neu-card:hover .hgneutext {
  color: #ffffff;
    opacity: 1;
}
















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

.section-why.active .rec-card {
  opacity: 1;
  transform: translateX(0);
}

.rec-container {
  position: relative;
  width: 270px;
  aspect-ratio: 6/8;
  overflow: hidden;
  border-radius: 8px;
}

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

.rec-card:hover .color-overlay {
  background-color: rgba(220, 30, 100, 0.4); /* gewünschte Farbe mit Transparenz */
}

/* Text über dem Bild */
.rectext {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'reaniebeanie', sans-serif;
  font-size: clamp(28px, 7vw, 31px);
  color: #ffffffcc;
  text-align: center;
  z-index: 2;
  transition: color 0.3s ease;
}

.rec-card:hover .cocotext {
  color: #ffffff;
}












.whyctext-span {
 font-family: 'Avenirmedium', sans-serif;
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease;
    color: #e92088;

}

.whyctext-span:hover {
  color: #f1f1f1;
  text-decoration: underline;
  text-decoration-color: #f1f1f1;
  text-decoration-thickness: 2px;
text-underline-offset: 3px;

}





 .whyctext{
    font-family: 'Avenirmedium', sans-serif;
    font-size: clamp(17px, 3.4vw, 21px);
    max-width: 60%;
    color: #ffffffe2;
    position: absolute;
    top: 1%;
    left: 5%;
    line-height: 1;
    transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateY(230px);
    opacity: 0;
  }

  .hgwhyctext{
   
    color: #e73092;
    position: absolute;
   
  }


  
  .section-whyc.active .whyctext{
  transform: translateX(0);
  opacity: 1;
  }








  
 .whyc2ext{
    font-family: 'LexendBold', sans-serif;
    font-size: clamp(17px, 3.4vw, 21px);
    max-width: 60%;
    color: #e73092;
    position: absolute;
    top: 13%;
    left: 5%;
    line-height: 1;
    transition: opacity 1.8s ease, transform 0.8s ease;
  transform: translateY(230px);
    opacity: 0;
              transition-delay: 1s; /* z. B. 1 Sekunde später */

  }

  
  .section-whyc.active .whyc2ext{
  transform: translateX(0);
  opacity: 1;
  }







    
 .whyc3ext{
    font-family: 'Avenirmedium', sans-serif;
    font-size: clamp(17px, 3.4vw, 21px);
    max-width: 60%;
    color: #f0f0f0;
    position: absolute;
    top: 24%;
    left: 5%;
    line-height: 1;
    transition: opacity 2.8s ease;
    opacity: 0;
   transition-delay: 1s; /* z. B. 1 Sekunde später */

  }

   .hgwhyc3ext{

    color: #f0f0f0;
    

  }


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



     .whycv{
    font-family: 'LexendBold', sans-serif;
  color: #560032;}

.whycr{
    font-family: 'LexendBold', sans-serif;
  color: #920055;}

  .whycy{
    font-family: 'LexendBold', sans-serif;
  color: #d38705;}

  .whyco{
    font-family: 'LexendBold', sans-serif;
  color: #b0c400;}

  .whycg{
    font-family: 'LexendBold', sans-serif;
  color: #1c9b00;}

  .section-whyc.active .whyc3ext{
    opacity: 1;
  }

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





 .menü-button {
  display: inline-block;
  padding: 8px 40px;
  position: absolute;
  top: 70%;
  left: 5%;
  font-size: clamp(12px, 1.7vw, 17px);
  font-family: 'LexendBold', sans-serif;
  font-weight: bold;
  color: #e7308f; /* Schriftfarbe = Rahmenfarbe */
  background-color: transparent;
  border: 4px solid #e7308f;
  border-radius: 9px;
  text-decoration: none;
  transition: all 0.3s ease;
  transition: opacity 1.8s ease, transform 0.8s ease;
  transform: translateY(330px);
    opacity: 0;
              transition-delay: 1s; /* z. B. 1 Sekunde später */

  }

  
  .section-whyc.active .menü-button{
  transform: translateX(0);
  opacity: 1;
  }



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





   .whyc2text{
    font-family: 'Avenirmedium', sans-serif;
    font-size: clamp(17px, 3.4vw, 21px);
    max-width: 60%;
    color: #ffffffe2;
    position: absolute;
    top: 4%;
    left: 5%;
    line-height: 1;
    transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateY(230px);
    opacity: 0;
          transition-delay: 0.3s; /* z. B. 1 Sekunde später */

  }

  .hgwhyc2text{
   
    color: #e73092;
    position: absolute;
   
  }

  .section-whyc.active .whyc2text{
  transform: translateX(0);
  opacity: 1;
  }

  



     .whyc3text{
    font-family: 'Avenirmedium', sans-serif;
    font-size: clamp(17px, 3.4vw, 21px);
    max-width: 60%;
    color: #ffffffe2;
    position: absolute;
    top: 7%;
    left: 5%;
    line-height: 1;
    transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateY(230px);
    opacity: 0;
          transition-delay: 0.6s; /* z. B. 1 Sekunde später */

  }

  .hgwhyc3ext{
   
 text-decoration: underline;
  text-decoration-color: #e73092;
  text-decoration-thickness: 2px;
text-underline-offset: 3px;

  }

  .section-whyc.active .whyc3text{
  transform: translateX(0);
  opacity: 1;
  }


  




  .whytx{
    font-family: 'Avenirmedium', sans-serif;
    font-size: clamp(17px, 3.4vw, 21px);
    max-width: 60%;
    color: #ffffffe2;
    position: absolute;
    top: 57%;
    left: 5%;
    line-height: 1;
    transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateY(230px);
    opacity: 0;
      transition-delay: 1s; /* z. B. 1 Sekunde später */
  }


    .hgwhy{
    font-family: 'Avenirmedium', sans-serif;
    color: #e73092;
    
  }

  .hgwhytx{
    font-family: 'LEMONMILKBOLD', sans-serif;
       font-size: clamp(15px, 3.4vw, 17px);

    
  }

  
  .section-why.active .whytx{
  transform: translateX(0);
  opacity: 1;
  }






    .vino-point {

  padding: 12px 12px;
  background-color: #560032;
  border-radius: 88px;
  left: 5%;
  top: 52%;
  position: absolute;
   opacity: 0;
  transform: translateX(-220px);
   transition: opacity 1.3s ease, transform 1.3s ease;
 

}

.section-why.active  .vino-point  {
    opacity: 1;
  transform: translateY(0);

      }




 .red-point {

  padding: 12px 12px;
  background-color: #920055;
  border-radius: 88px;
  left: 7%;
  top: 52%;
  position: absolute;
   opacity: 0;
  transform: translateX(-420px);
   transition: opacity 1.3s ease, transform 1.3s ease;
 

}

.section-why.active  .red-point  {
    opacity: 1;
  transform: translateY(0);

      }






      
 .y-point {

  padding: 12px 12px;
    background-color: #d38705;
  border-radius: 88px;
  left: 9%;
  top: 52%;
  position: absolute;
   opacity: 0;
  transform: translateX(-620px);
   transition: opacity 1.3s ease, transform 1.3s ease;
 

}

.section-why.active  .y-point  {
    opacity: 1;
  transform: translateY(0);

      }






       .o-point {

  padding: 12px 12px;
  background-color: #b0c400;
  border-radius: 88px;
  left: 11%;
  top: 52%;
  position: absolute;
   opacity: 0;
  transform: translateX(-820px);
   transition: opacity 1.3s ease, transform 1.3s ease;
 

}

.section-why.active  .o-point  {
    opacity: 1;
  transform: translateY(0);

      }





           .g-point {

  padding: 12px 12px;
  background-color: #1c9b00;
  border-radius: 88px;
  left: 13%;
  top: 52%;
  position: absolute;
   opacity: 0;
  transform: translateX(-1120px);
   transition: opacity 1.3s ease, transform 1.3s ease;
 

}

.section-why.active  .g-point  {
    opacity: 1;
  transform: translateY(0);

      }



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

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




  .twotit {
font-family: 'LEMONMILKBOLD', sans-serif;
 font-size: clamp(37px, 1.5vw, 41px);
  color: #090909;
    position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 4%;
text-align: center;
line-height: 0.9;
}




  .twoti {
font-family: 'LEMONMILK', sans-serif;
 font-size: clamp(37px, 1.5vw, 41px);
text-align: center;
  color: #090909;
   left: 50%;
    position: absolute;
  left: 50%;
  transform: translateX(-50%);
transform: translateX(-50%);
  top: 9%;
word-spacing: -4px;
line-height: 0.9;

}



.ppictit{
  font-family: 'LEMONMILKBOLD', sans-serif;
 font-size: clamp(17px, 1.5vw, 21px);
   color: #c8158c;
  left: 4%;
  top: 14%;
  position: absolute;
  opacity: 0;
  transform: translateX(350px);
        transition: opacity 0.8s ease, transform 0.8s ease;

}

.section-pictures.active .ppictit
{
  opacity: 1;
  transform: translateY(0);

}




.gjhgjh{
  font-family: 'LEMONMILKBOLD', sans-serif;
 font-size: clamp(37px, 1.5vw, 41px);
  color: #242424df;
  left: 4%;
  top: 15%;
  position: absolute;
  line-height: 0.9;
  word-spacing: -5px;
  opacity: 0;
  transform: translateX(-50px);
        transition: opacity 0.8s ease, transform 0.8s ease;

}

.section-pictures.active .gjhgjh
{
  opacity: 1;
  transform: translateY(0);

}







  .twotext {
font-family: 'Avenirmedium', sans-serif;
 font-size: clamp(14px, 1.5vw, 17px);
 text-align: center;
  color: #090909;
   left: 50%;
  position: relative;
transform: translateX(-50%);
  top: 35%;
  position: absolute;
max-width: 50%;
}







  .twot {
font-family: 'Avenirmedium', sans-serif;
 font-size: clamp(14px, 1.5vw, 17px);
  color: #090909;
  left: 50%;
  transform: translateX(-50%);
  top: 26%;
  position: absolute;
max-width: 50%;
opacity: 0;
transition: opacity 1s;
text-align: center;
}



.section-2c.active .twot{
opacity: 1;
transition: 3s;
}


.twoi{
font-family: 'PoppinsSemiBold', sans-serif;
 font-size: clamp(21px, 1.5vw, 23px);
}




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

}

  .hgtwotxt {
font-family: 'Avenirheavy', sans-serif;
color: #e73092;
}



.link11-span {
  color: #aa005b;
  cursor: pointer;
  font-family: 'Avenirheavy', sans-serif;
  position: relative;      /* wichtig für das ::after-Element */
  display: inline-block;   /* damit das Pseudo-Element drunterläuft */
}

.link11-span:hover {
  color: #e00034;
}

/* Unterstreichung */
.link11-span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;            /* Abstand zur Schrift */
  width: 0%;
  height: 3px;             /* Höhe der Linie */
  background-color: #2a2a2a;
  transition: width 0.3s ease-in-out;
}

.link11-span:hover::after {
  width: 100%;
}





  .link1-span {
    color: #600033;
cursor: pointer;
font-family: 'Avenirheavy', sans-serif;}

  .link1-span:hover {
    color: #9c0053;
cursor: pointer;
font-family: 'Avenirheavy', sans-serif;}

.link2-span {
    color: #004e0e;
cursor: pointer;
font-family: 'Avenirheavy', sans-serif;}

  .link2-span:hover {
    color: #00b809;
cursor: pointer;
font-family: 'Avenirheavy', sans-serif;}


.link3-span {
    color: #764500;
cursor: pointer;
font-family: 'Avenirheavy', sans-serif;}

  .link3-span:hover {
    color: #ba7000;
cursor: pointer;
font-family: 'Avenirheavy', sans-serif;}





  .hgtwotuna {
font-family: 'LexendMedium', sans-serif;

}


  .hgtwotu {
font-family: 'LexendMedium', sans-serif;
text-decoration: underline;
text-decoration-color:   #e73092;
text-decoration-thickness: 2px;
text-underline-offset: 2px;
}



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

  color: #e73092;
  left: 4%;
  top: 4%;

  position: relative;
  transition: background-color 0.3s ease;
   opacity: 0;
  transform: translateX(-220px);
   transition: opacity 1.3s ease, transform 1.3s ease;
 word-spacing: -3px;

}

.section-quinstep.grow .steptitle {
    opacity: 1;
  transform: translateY(0);

      }


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

  color: #f4f4f4;
  left: 4%;
  top: -2%;

  position: relative;
  transition: background-color 0.3s ease;
   opacity: 0;
  transform: translateX(-220px);
   transition: opacity 1.3s ease, transform 1.3s ease;
 word-spacing: -3px;

}

.section-quinstep.grow .steptito {
    opacity: 1;
  transform: translateY(0);

      }







       .stepPLAIN {
font-family: 'Avenirmedium', sans-serif;
 font-size: clamp(12px, 1.5vw, 14px);
  color: #f4f4f4;
  left: 4%;
  top: -2%;
max-width: 20%;
  position: relative;
  transition: background-color 0.3s ease;
   opacity: 0;
  transform: translateX(-220px);
   transition: opacity 1.3s ease, transform 1.3s ease;
}

.section-quinstep.grow .stepPLAIN {
    opacity: 1;
  transform: translateY(0);

      }


.hgstepPLAIN {
font-family: 'PoppinsExtraBold', sans-serif;
}

.hg2stepPLAIN {
  color: #e73092;
}

.hg3stepPLAIN {
font-family: 'PoppinsExtraBold', sans-serif;
text-decoration: underline;
text-decoration-color:  #e73092;
}






    .line-container {
   position: absolute;
  top: 63%;
  left: 33%;
  height: 7px;
  width: 4%; /* oder 300px, etc. */
  overflow: hidden;
 transition: opacity 2.3s ease, transform 1.3s ease;

  opacity: 0;
}

.black-line {
  height: 126px;
  background-color: rgb(252, 252, 252);
  width: 0;
  animation: growLine 2s ease forwards;
    opacity: 0;
transition: opacity 2.3s ease, transform 1.3s ease;
}

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



.section-quinstep.grow  .line-container {
    opacity: 1;
      }


.section-quinstep.grow  .black-line {
    opacity: 1;
      }




      .line-container2 {
  position: absolute;
  top: 63%;
  left: 44%;
  height: 7px;
  width: 4%; /* oder 300px, etc. */
  overflow: hidden;
 transition: opacity 2.3s ease, transform 1.3s ease;

  opacity: 0;}

 

.black-line2 {
  height: 126px;
  background-color: #ffffff;
  width: 0;
  animation: growLine 2s ease forwards;
   transition: opacity 6.3s ease, transform 1.3s ease;

  opacity: 0;
}

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


.section-quinstep.grow  .line-container2 {
    opacity: 1;
      }


.section-quinstep.grow  .black-line2 {
    opacity: 1;
      }








            .line-container3 {
   position: absolute;
  top: 63%;
  left: 55%;
  height: 7px;
  width: 5%; /* oder 300px, etc. */
  overflow: hidden;
 transition: opacity 2.3s ease, transform 1.3s ease;



  opacity: 0;}

.black-line3 {
  height: 126px;
  background-color: #ffffff;
  width: 0;
  animation: growLine 2s ease forwards;
   transition: opacity 6.3s ease, transform 1.3s ease;

  opacity: 0;
}

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


.section-quinstep.grow  .line-container3 {
    opacity: 1;
      }


.section-quinstep.grow  .black-line3 {
    opacity: 1;
      }










            .line-container4 {
  position: absolute;
  top: 63%;
  left:67%;
  height: 7px;
  width: 5%; /* oder 300px, etc. */
  overflow: hidden;
 transition: opacity 2.3s ease, transform 1.3s ease;

  opacity: 0;}

.black-line4 {
  height: 126px;
  background-color: rgb(241, 241, 241);
  width: 0;
  animation: growLine 2s ease forwards;
   transition: opacity 6.3s ease, transform 1.3s ease;

  opacity: 0;
}

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


.section-quinstep.grow  .line-container4 {
    opacity: 1;
      }


.section-quinstep.grow  .black-line4 {
    opacity: 1;
      }





    






  .faq-pop-button {
font-family: 'Louisgeorgecafe', sans-serif;

  font-size: clamp(12px, 1.5vw, 18px);
  padding: 42px 42px;
  background-color: #240015;
    border: 4px solid #ffffff;

  color: white;
  border-radius: 88px;
   text-align: center;
  left: 27%;
  top: 57%;
  cursor: pointer;
  position: absolute;
  transition: background-color 0.3s ease;
   opacity: 0;
  transform: translateX(-220px);
   transition: opacity 1.3s ease, transform 1.3s ease;
 

}

.section-quinstep.grow .faq-pop-button  {
    opacity: 1;
  transform: translateY(0);

      }





.faq-pop-button:hover {
  background-color: #420028;
}

.faq-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.faq-popup-content {
  background-color: #240015;
    text-align: center;

  padding: 32px;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  color: #e8e8e8;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);

  font-family: 'Avenirlight', sans-serif;
  animation: popIn 0.4s ease-out;
  position: relative;
}

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

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













  .faq2-pop-button {
  font-family: 'Louisgeorgecafe', sans-serif;
  font-size: clamp(12px, 1.5vw, 18px);
  padding: 42px 42px;
  background-color: #750044;
  border: 4px solid #efefef;

  border-radius: 88px;
   text-align: center;
  left: 38%;
  top: 57%;
  cursor: pointer;
  position: absolute;
  transition: background-color 0.3s ease;
   opacity: 0;
  transform: translateX(-420px);
   transition: opacity 1.3s ease, transform 1.3s ease;
 

}

.section-quinstep.grow .faq2-pop-button  {
    opacity: 1;
  transform: translateY(0);

      }


.faq2-pop-button:hover {
  background-color: #d4007f;
}

.faq2-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.faq2-popup-content {
  background-color: #750044;
    text-align: center;

  padding: 32px;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  color: #e8e8e8;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);

  font-family: 'Avenirlight', sans-serif;
  animation: popIn 0.4s ease-out;
  position: relative;
}

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

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



.faq3-pop-button {
  font-family: 'Poppins', sans-serif;
  padding: 42px 42px;
  background-color: #b46600;
  border: none;
    border: 4px solid #efefef;

  color: white;
  border-radius: 88px;
   text-align: center;
  left: 49%;
  top: 57%;
  cursor: pointer;
  position: absolute;
  transition: background-color 0.3s ease;
   opacity: 0;
  transform: translateX(-620px);
   transition: opacity 1.3s ease, transform 1.3s ease;
 

}

.section-quinstep.grow .faq3-pop-button  {
    opacity: 1;
  transform: translateY(0);

      }

.faq3-pop-button:hover {
  background-color: #ffa42d;
}

.faq3-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.faq3h{
  color: #8b4f00a1;
    text-align: center;
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(57px, 2.5vw, 60px);
}

.faqh{
  color: #f3f3f3;
    text-align: center;
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(12px, 2.5vw, 17px);
}

.faqhg{
  color: #f3f3f3;
    text-align: center;
  font-family: 'Avenirheavy', sans-serif;
}


.faq-link{
  color: #f3f3f3;
    text-align: center;
  font-family: 'Avenirheavy', sans-serif;
  cursor: pointer;
}

.faq-link:hover{
  color: #565f00;
}









.faq5h{
  color: #00953b;
    text-align: center;
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(57px, 2.5vw, 60px);
}


.faq5hg{
  color: #003319;
    text-align: center;
        text-align: center;
  font-family: 'Avenirheavy', sans-serif;
 }








.faqhg3a{
  color: #0f0f0f;
    text-align: center;
  font-family: 'Avenirheavy', sans-serif;
}



.faq2hg{
  color: #4a2a00;
    text-align: center;
  font-family: 'Avenirheavy', sans-serif;
}





.faq2h{
  color: #520015c1;
    text-align: center;
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(57px, 2.5vw, 60px);
}


.faq3hg{
  color: #510018;
    text-align: center;
  font-family: 'Avenirheavy', sans-serif;
}





.faq4h{
  color: #4d5200c1;
    text-align: center;
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(57px, 2.5vw, 60px);
}


.faq4hg{
  color: #515000;
    text-align: center;
  font-family: 'Avenirheavy', sans-serif;
}




.faq1h{
  color: #520033c1;
    text-align: center;
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(57px, 2.5vw, 60px);
}


.faq1hg{
  color: #a6007f;
    text-align: center;
  font-family: 'Avenirheavy', sans-serif;
}






.faq3-popup-content {
  background-color: #b46600;
    text-align: center;
  font-size: clamp(8px, 0.8vw, 12px);

  padding: 32px;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  color: #e8e8e8;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);

  font-family: 'Avenirlight', sans-serif;
  animation: popIn 0.4s ease-out;
  position: relative;
}

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

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







.faq4-pop-button {
  font-family: 'Louisgeorgecafe', sans-serif;
  font-size: clamp(12px, 1.5vw, 18px);
  padding: 42px 42px;
  background-color: #a8b400;
  border: none;
    border: 4px solid #efefef;

  color: white;
  border-radius: 88px;
   text-align: center;
  left:61%;
  top: 57%;
  cursor: pointer;
  position: absolute;
  transition: background-color 0.3s ease;
   opacity: 0;
  transform: translateX(-820px);
   transition: opacity 1.3s ease, transform 1.3s ease;
 

}

.section-quinstep.grow .faq4-pop-button  {
    opacity: 1;
  transform: translateY(0);

      }

.faq4-pop-button:hover {
  background-color: #727a00;
}

.faq4-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.faq4-popup-content {
  background-color: #c7d500;
    text-align: center;

  padding: 32px;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  color: #131313;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);

  font-family: 'Avenirlight', sans-serif;
  animation: popIn 0.4s ease-out;
  position: relative;
}

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

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











.faq5-pop-button {
  font-family: 'Louisgeorgecafe', sans-serif;
  font-size: clamp(12px, 1.5vw, 18px);
  padding: 42px 42px;
  background-color: #007441;
  border: none;
    border: 4px solid #efefef;

  color: white;
  border-radius: 88px;
   text-align: center;
  left: 74%;
  top: 57%;
  cursor: pointer;
  position: absolute;
  transition: background-color 0.3s ease;
   opacity: 0;
  transform: translateX(-1020px);
   transition: opacity 1.3s ease, transform 1.3s ease;
 

}

.section-quinstep.grow .faq5-pop-button  {
    opacity: 1;
  transform: translateY(0);

      }


.faq5-pop-button:hover {
  background-color: #00d277;
}

.faq5-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.faq5-popup-content {
  background-color: #007441;
    text-align: center;

  padding: 32px;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  color: #f4f4f4;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);

  font-family: 'Avenirlight', sans-serif;
  animation: popIn 0.4s ease-out;
  position: relative;
}

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

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


  









.breadcrumb-overlay {
    font-size: clamp(12px, 1.5vw, 16px);
    top: 27%;
      left: 24%;
text-align: left;
  position: relative;
    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: #d21c6b;
    font-family: 'Avenirmedium', sans-serif;

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










  

  



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






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

.section-leistungen  .quinmenu-button:hover {
  background-color: #e73092;
  color: white;
}


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

.section-leistungen  .quinmenu2-button:hover {
  background-color: #00822e;
  color: white;
}





  


    .last-section {

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


    }
    

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

    }
        
    
    .wordlinkCOOKIES {
      left: 40%; /* Weiter nach rechts verschoben */
    }
    
    .wordlinkdisclaimer{
      left: 30%;
    }
    
    .wordlinkIMPRESSUM{
      left: 24%;
    }
    
    .wordlinkAGBs{
      left: 35%;
    }
    
    
    
    
    .wordlinksPRIVATCOACHING, .wordlinksfirmenbottom, .wordlinksNULNEBLA, .wordlinksknowhow {
      font-family: 'LEMONMILKBOLD', sans-serif;
      font-size: clamp(8px, 1.6vw, 12px);
      color: #ffffff;
      text-decoration: none;
      text-align: left;
      top: 20%;
      position: absolute;
      transition: color 0.3s ease-in-out;
      z-index: 10; /* Über andere Elemente */
    }
    
    
    .wordlinksPRIVATCOACHING:hover, .wordlinksfirmenbottom:hover, .wordlinksNULNEBLA:hover, .wordlinksknowhow:hover {
      color: #c8158c;

    }
    
    .wordlinksPRIVATCOACHING::after, .wordlinksfirmenbottom::after, .wordlinksNULNEBLA:after, .wordlinksknowhow::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 0%;
      height: 8px; /* Kleinere Unterstreichungshöhe */
      background-color: #c8158c;
      transition: width 0.3s ease-in-out;
    }
    
    
    .wordlinksPRIVATCOACHING:hover:after, .wordlinksfirmenbottom:hover:after, .wordlinksNULNEBLA:hover:after, .wordlinksknowhow:hover:after {
      width: 100%;
    }
    
    
    .wordlinksPRIVATCOACHING {
      left: 35%;
    }
    
    .wordlinksfirmenbottom {
      left: 22%;
    
    }
    
    
    .wordlinksknowhow {
      left: 47%;
    }
    
    .wordlinksNULNEBLA {
      left: 57%;
    }
    



    
.wordlinks-block {
  position: absolute;   /* den ganzen Block platzieren */
  top: 24%;             /* wo der Block sitzen soll */
  left: 22%;            /* Einrückung wie bisher */
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 2px;            /* Abstand zwischen den Links */
  z-index: 10;
}

.wordlinks-block a {
  font-family: 'Avenirmedium';
  font-size: clamp(4px, 1.6vw, 12px);
  color: #ffffff;
  text-decoration: none;
  text-align: left;
  transition: color 0.3s ease-in-out;
}

.wordlinks-block a:hover {
  color: #c8158c;
  font-family: 'Avenirheavy', sans-serif;
}











.wordlinks2-block {
  position: absolute;   /* den ganzen Block platzieren */
  top: 24%;             /* wo der Block sitzen soll */
  left: 35%;            /* Einrückung wie bisher */
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 2px;            /* Abstand zwischen den Links */
  z-index: 10;
}

.wordlinks2-block a {
  font-family: 'Avenirmedium';
  font-size: clamp(4px, 1.6vw, 12px);
  color: #ffffff;
  text-decoration: none;
  text-align: left;
  transition: color 0.3s ease-in-out;
}

.wordlinks2-block a:hover {
  color: #c8158c;
  font-family: 'Avenirheavy', sans-serif;
}







.wordlinks3-block {
  position: absolute;   /* den ganzen Block platzieren */
  top: 24%;             /* wo der Block sitzen soll */
  left: 47%;            /* Einrückung wie bisher */
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 2px;            /* Abstand zwischen den Links */
  z-index: 10;
}

.wordlinks3-block a {
  font-family: 'Avenirmedium';
  font-size: clamp(4px, 1.6vw, 12px);
  color: #ffffff;
  text-decoration: none;
  text-align: left;
  transition: color 0.3s ease-in-out;
}

.wordlinks3-block a:hover {
  color: #c8158c;
  font-family: 'Avenirheavy', sans-serif;
}











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

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



  .NULNEBLA2-container:hover .NULNEBLA-text {
    display: inline-block;
    color: #d21c6b;      }
















    


.wordlinksbuchung {
  top: 61%;
}

.downlink-button {
  display: inline-block;
  position: absolute;
  top: 52%;
  left: 22%;
  padding: 5px 17px; /* ↑↓ ←→ Abstand */
  font-size: clamp(8px, 1.4vw, 12px); /* Skalierbare Größe */
  font-family: 'Avenirmedium', sans-serif;
  color: #ffffff;
  background-color: #c8158c;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  z-index: 6;
  opacity: 1;

}

.downlink-button:hover {
  background-color: #cccccc;
  font-family: 'Avenirmedium', sans-serif;

}







        .wordlinksmail {

        font-size: clamp(4px, 1.6vw, 14px);
        color: #ffffff;
        text-decoration: none;
        text-align: left;
        position: absolute;
        font-family: 'Avenirheavy', sans-serif;
top: 62%;
        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 */
      }
      
      .wordlinksmail:hover {
        color: #c8158c;
        }
      



    
    
    .wordlinksprivatleistungenbottom, .wordlinkserstgespräch {
      font-family: 'Avenirmedium', sans-serif;
      font-size: clamp(4px, 1.6vw, 18px);
      color: #080808;
      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: #c8158c;
    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: #080808;
      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: #c8158c;
      font-family: 'Avenirheavy', sans-serif;
      }
    
    .wordlinkseminare{
      top: 14%;
    }
    .wordlinksblog{
      top: 18%;
    }
    
    
    
    
    
    
    
    
      .wordlinknulneblahome {
        font-family: 'LEMONMILKBOLD', sans-serif; /* Schriftart anwenden */
        font-size: clamp(28px, 3.2vw, 34px); /* Schriftgröße */
        color: #080808; /* 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: #c8158c; /* 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: 3%;
        right: 16%;
        position: absolute;
        display: block;      /* Verhindert Lücken unter dem Bild */
      }
    
    
      .fusszeile-text {
        font-family: 'PoppinsRegular', sans-serif;
        font-size: clamp(4px, 1.8vw, 14px);
        max-width: 400px;
        color: #5d5d5d;
        position: absolute;
        bottom: 10%;
        right: 8%;
        line-height: 1.0;
      }







  .instagram-overlay {
    position: absolute; /* Absolute Positionierung */
    bottom: 52%; /* Position 5% von unten */
    left: 83%;
    width: 2%; /* Passt sich dem Container an */
    height: auto;
    overflow: hidden; /* Alles außerhalb des Containers wird verborgen */
  }
  
  /* Standardbild (sichtbar bei Start) */
  .instagram-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 */
  .instagram-overlay:hover img.default {
    opacity: 0; /* Standardbild wird unsichtbar */
  }
  
  /* Weißes Icon (ersetzt das Standardbild) */
  .instagram-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 */
  .instagram-overlay:hover img.hover {
    opacity: 1; /* Weißes Bild wird sichtbar */
  }










  
.envelope-overlay {
    position: absolute; /* Absolute Positionierung */
    bottom: 50.5%; /* Position 5% von unten */
    left: 79%;
    width: 3%; /* Passt sich dem Container an */
    height: auto;
    overflow: hidden; /* Alles außerhalb des Containers wird verborgen */
  }
  
  /* Standardbild (sichtbar bei Start) */
  .envelope-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 */
  .envelope-overlay:hover img.default {
    opacity: 0; /* Standardbild wird unsichtbar */
  }
  
  /* Weißes Icon (ersetzt das Standardbild) */
  .envelope-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 */
  .envelope-overlay:hover img.hover {
    opacity: 1; /* Weißes Bild wird sichtbar */
  }


        


      











  



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