#CustomMarquee {
  z-index: 0;
  --PT: px;
  --PB: px;
}
.aos-init:not(#CustomMarquee) {
  z-index: 2;
}
.marquee-wave .wrapper--full {
  overflow: hidden;
}
.wrapper--full {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  max-width: 100%;
}
.marquee-wave svg {
  position: relative;
  left: -1vw;
  width: 102vw;
  display: block;
}
svg:not(:root) {
  overflow: hidden;
}
.wrapper--full:after {
  content: "";
  display: table;
  clear: both;
}
#CustomMarquee .st0 {
  fill: var(--acc-sec);
}
.st1 {
  fill: none;
}
#CustomMarquee text {
  fill: #ffffff;
}
/* Set the font-family property of the elements you want to apply the font to */
.marquee-wave,
.marquee-wave text,
.marquee-wave textpath {
  font-size: 8vmin;
  text-transform: uppercase;
  font-family: "GothicExpand";
  font-weight: var(--FONT-WEIGHT-HEADING);
}

.wrapper--full:after {
  content: "";
  display: table;
  clear: both;
}



.ellipse-container {
  display: flex;
  /* flex-flow: column nowrap; */
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'GothicExpand';
  letter-spacing: 2px;
}

.ellipse {
  width: min(90%, 90%);
  transition: transform 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  perspective: 500px;
  margin-top: -2rem;
}

.ellipse:hover{
  transform: scale(1.2);
}


.ellipse svg {
  width: 100%;
  height: 100%;
  transform: rotateX(53deg) rotate(-40deg);
  transform-style: preserve-3d;
}

.ellipse svg text {
  fill: #fff;
}

.ellipse {
  position: relative;
}

.planet-back,
.planet-front {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-size: cover;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.5) 0%, rgba(170, 170, 170, 0.5) 50%, rgba(170, 170, 170, 0.1) 80%),
    /* Lichtschein */
      /* repeating-linear-gradient(
        to bottom,
        #d7a774 0 5%,
        #b28259 5% 10%,
        #d7a774 10% 15%,
        #c08c5c 15% 20%
      ); */
        linear-gradient(
    to bottom,
     #a3b99b 0%,       /* heller Grünton */
    #88a079 12%,      /* dunklerer Olive-Ton */
    #98af90 25%,      /* Hauptfarbe */
    #7b9271 37%,      /* kräftiger Olive */
    #98af90 50%,      /* wieder Hauptfarbe */
    #a3b99b 62%,      /* heller */
    #6d8463 75%,      /* dunkler Akzent */
    #98af90 87%,      /* Hauptfarbe nochmal */
    #88a079 100%
  );
}



.planet-back {
  clip-path: inset(50% 0 0 0); /* untere Hälfte sichtbar → hinterer Teil */
  z-index: 0;
}

.planet-front {
  clip-path: inset(0 0 50% 0); /* obere Hälfte sichtbar → vorderer Teil */
  z-index: 2;
}

.text-layer {
  position: relative;
  z-index: 1; /* Text liegt zwischen Back und Front */
}



.ellipse-container-booking {
  display: flex;
  /* flex-flow: column nowrap; */
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'GothicExpand';
  letter-spacing: 2px;
  transform: scale(2);
}

@media screen and (max-width:768px){
  .ellipse-container-booking {
    transform: scale(1.33);
    margin-left: 6.66vw;
    letter-spacing: 1px;
  }
  
}

.ellipse-booking {
  width: min(90%, 90%);
  transition: transform 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  perspective: 500px;
  margin-top: -2rem;
}


.ellipse-booking svg {
  width: 100%;
  height: 100%;
  transform: rotateX(53deg) rotate(-40deg);
  transform-style: preserve-3d;
}

.ellipse-booking svg text {
  fill: #fff;
}

.ellipse-booking {
  position: relative;
}

.planet-back-booking,
.planet-front-booking {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-size: cover;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.5) 0%, rgba(170, 170, 170, 0.5) 50%, rgba(170, 170, 170, 0.1) 80%),
    /* Lichtschein */
      /* repeating-linear-gradient(
        to bottom,
        #d7a774 0 5%,
        #b28259 5% 10%,
        #d7a774 10% 15%,
        #c08c5c 15% 20%
      ); */
        linear-gradient(
    to bottom,
     #a3b99b 0%,       /* heller Grünton */
    #88a079 12%,      /* dunklerer Olive-Ton */
    #98af90 25%,      /* Hauptfarbe */
    #7b9271 37%,      /* kräftiger Olive */
    #98af90 50%,      /* wieder Hauptfarbe */
    #a3b99b 62%,      /* heller */
    #6d8463 75%,      /* dunkler Akzent */
    #98af90 87%,      /* Hauptfarbe nochmal */
    #88a079 100%
  );
}



.planet-back-booking {
  clip-path: inset(50% 0 0 0); /* untere Hälfte sichtbar → hinterer Teil */
  z-index: 0;
}

.planet-front-booking {
  clip-path: inset(0 0 50% 0); /* obere Hälfte sichtbar → vorderer Teil */
  z-index: 2;
}

.text-layer-booking {
  position: relative;
  z-index: 1; /* Text liegt zwischen Back und Front */
}






.ribbon {
  stroke: var(--prim);
}

/* .ribbon--scoll {
  margin: 10rem 0;
} */

.ribbon__text {
  text-transform: uppercase;
  fill: #fff;
  color:white;
  paint-order: stroke fill;
  font-weight: 900;
  font-size: 100px;
  letter-spacing: 8px;
  text-shadow: 3px 3px black;
  text-rendering: geometricPrecision;
}

.ribbon-wrapper {
  position: relative;
  height: 230vh;
}

.ribbon-container {
  position: sticky;
  top:0;
  margin-left: -4%;
  /* height: 100vh; */
  width: 108vw;
  display: grid;
  place-items: center;
}



@media screen and (max-width: 768px) {
  .marquee-wave,
  .marquee-wave text,
  .marquee-wave textpath {
    padding-top: 20vmin;
    font-size: 33vmin;
  }
  .marquee-wave textPath {
    dominant-baseline: middle;
  }
  .ellipse-container{
    letter-spacing: 1px;
  }
   .ellipse svg{
    width: 110% !important;
    height: 110%  !important;
  }
  .planet-back,
.planet-front {
  left: 55%;
  width: 65px;
  height: 65px;
}
.ribbon-container{
  height: 115vh;
  width: auto;
  top:-18%
}
}