:root {
  --intro--title-size: max(4.5rem, 3vw);
  --intro--textani-xanchor: -50%;
  --intro--color-bg: #eee;
  --intro--color-primary: #ff2d7d;
  --intro--color-glow: #f2fdc0;
  --intro--map-width: 650px;
  --intro--cloud-width: 750px;
  --intro--UI-buffer: 80px;
  --intro--text-maxsize: 2rem;
  --intro--offset: calc(100svh + var(--intro--UI-buffer))
}
.header-wrapper {
  position: relative;
  z-index: 2000
}

.intro--animation{
  position: fixed;
  inset: 0;
  z-index: 3000;
  width: 100%;
  height: 100svh;
  background-image: url("/typo3conf/ext/sip_sitepackage/Resources/Public/Images/backgroundGradient.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s ease;
}

/* sichtbar während der Laufzeit */
.intro--animation.mainstage:not(.pre-stage){
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* WICHTIG: sichtbar bleiben, solange fade-out läuft (sonst "hart") */
.intro--animation.fade-out{
  opacity: 0;
  visibility: visible;     /* <- override */
  pointer-events: none;
}

/* Erst am Ende wirklich weg */
.intro--animation.closed{
  display: none;
  background: none;
}




.intro--animation .intro--clouds-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 30;
  will-change: opacity
}
.intro--animation .intro--clouds-wrapper .intro--cloud {
  will-change: transform, opacity;
  width: 100%;
  max-width: var(--intro--cloud-width);
  position: absolute;
  left: 50%;
  top: 50%
}
.intro--animation .intro--clouds-wrapper .intro--cloud.cloud-1 {
  transform: translate(-30vw, -20vh) scale(1.5)
}
.intro--animation .intro--clouds-wrapper .intro--cloud.cloud-1.animated {
  animation: intro--cloud-move-1 12.5s ease forwards
}
.intro--animation .intro--clouds-wrapper .intro--cloud.cloud-2 {
  transform: translate(0vw, 0vh) scale(1.5)
}
.intro--animation .intro--clouds-wrapper .intro--cloud.cloud-2.animated {
  animation: intro--cloud-move-2 10s ease forwards
}
@keyframes intro--cloud-move-1 {
  0% {
    transform: translate(-30vw, -20vh) scale(1.5)
  }
  50% {
    opacity: 1
  }
  60% {
    opacity: 0
  }
  100% {
    transform: translate(-120vw, -20vh) scale(1.5)
  }
}
@keyframes intro--cloud-move-2 {
  0% {
    transform: translate(0vw, 0vh) scale(1.5)
  }
  60% {
    opacity: 1
  }
  70% {
    opacity: 0
  }
  100% {
    transform: translate(50vw, 0vh) scale(1.5)
  }
}
.intro--animation .intro--clouds-wrapper .intro--cloud img {
  width: 100%;
  height: auto;
  filter: blur(2px);
  color: var(--intro--color-bg)
}
.intro--animation .intro--clouds-wrapper.animated-back {
  z-index: 60
}
.intro--animation .intro--clouds-wrapper.animated-back .intro--cloud.cloud-1 {
  transform: translate(-120vw, -20vh) scale(6);
  opacity: 0
}
.intro--animation .intro--clouds-wrapper.animated-back .intro--cloud.cloud-1.animated-back {
  animation: intro--cloud-move-1back 2s ease-out forwards
}
@keyframes intro--cloud-move-1back {
  0% {
    transform: translate(-120vw, -20vh) scale(6)
  }
  25% {
    opacity: 1
  }
  100% {
    transform: translate(10vw, -20vh) scale(6)
  }
}
.intro--animation .intro--clouds-wrapper.fade-out {
  transition: opacity .5s ease;
  opacity: 0
}
.intro--animation .intro--globe-wrapper {
  position: absolute;
  z-index: 20;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden
}
.intro--animation .intro--globe-wrapper .intro--globe {
  will-change: opacity;
  opacity: 0;
  position: absolute;
  top: 0
}
.intro--animation .intro--globe-wrapper .intro--globe.fade-in {
  transition: opacity 1s ease;
  opacity: 1
}
.intro--animation .intro--globe-wrapper .intro--globe.fade-out {
  transition: opacity .5s ease;
  opacity: 0
}
.intro--animation .intro--map-wrapper {
  position: absolute;
  z-index: 40;
  width: 100%;
  height: 100%;
  overflow: hidden
}
.intro--animation .intro--map-wrapper .intro--map {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 100%
}
.intro--animation .intro--map-wrapper .intro--map img {
  will-change: opacity, transform;
  height: auto;
  width: 100%;
  opacity: 0;
  transform: scale(0)
}
.intro--animation .intro--map-wrapper .intro--map.fade-in img {
  transition: opacity 2s, transform 5.5s ease-in-out;
  opacity: 1;
  transform: scale(1)
}
.intro--animation .intro--map-wrapper.fade-out .intro--map {
  will-change: opacity;
  transition: filter .5s ease-in, opacity .5s ease;
  filter: blur(12px);
  opacity: 0
}
.intro--animation .intro--texts-wrapper {
  position: absolute;
  z-index: 70;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden
}
.intro--animation .intro--texts-wrapper .intro--texts {
  will-change: opacity;
  width: min(100vw, 100vh);
  height: min(100vw, 100vh);
  aspect-ratio: 1/1;
  position: relative;
  opacity: 0
}
.intro--animation .intro--texts-wrapper .intro--texts.show {
  opacity: 1
}
.intro--animation .intro--texts-wrapper .intro--texts ul {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 100%;
  height: 100%
}
.intro--animation .intro--texts-wrapper .intro--texts ul.animated {
  transform: scale(5);
  opacity: 0;
  filter: blur(2px);
  transition: transform 4.5s ease-in-out, opacity 2s ease 1.5s, filter 2s ease 1.5s
}
.intro--animation .intro--texts-wrapper .intro--texts ul li {
  text-transform: uppercase;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font-size: clamp(1.1vmin, 4vmin, var(--intro--text-maxsize));
  color: #fff;
  filter: drop-shadow(0 0 4px var(--intro--color-primary)) drop-shadow(0 0 16px var(--intro--color-primary));
  will-change: transform, opacity
}
.intro--animation .intro--texts-wrapper .intro--texts ul li .center {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  white-space: nowrap
}
.intro--animation .intro--texts-wrapper .intro--texts ul li:nth-child(1).animated {
  --intro--textani-endX: calc(0vmin);
  --intro--textani-endY: calc(-35.625vmin);
  --intro--textani-bow: 1;
  --intro--textani-delay: 0.6s;
  --intro--textani-xanchor: -50% -50%;
  animation: intro--textani-move 1.75s both;
  animation-delay: var(--intro--textani-delay, 0s)
}
.intro--animation .intro--texts-wrapper .intro--texts ul li:nth-child(2).animated {
  --intro--textani-endX: calc(13.2251681766vmin);
  --intro--textani-endY: calc(-18.2028823734vmin);
  --intro--textani-bow: 1;
  --intro--textani-delay: 0.2s;
  --intro--textani-xanchor: calc(-100% - 1rem) -50%;
  animation: intro--textani-move 1.75s both;
  animation-delay: var(--intro--textani-delay, 0s)
}
.intro--animation .intro--texts-wrapper .intro--texts ul li:nth-child(3).animated {
  --intro--textani-endX: calc(28.5316954889vmin);
  --intro--textani-endY: calc(-9.2705098312vmin);
  --intro--textani-bow: 1;
  --intro--textani-delay: 1s;
  --intro--textani-xanchor: calc(-100% - 1rem) -50%;
  animation: intro--textani-move 1.75s both;
  animation-delay: var(--intro--textani-delay, 0s)
}
.intro--animation .intro--texts-wrapper .intro--texts ul li:nth-child(4).animated {
  --intro--textani-endX: calc(21.3987716166vmin);
  --intro--textani-endY: calc(6.9528823734vmin);
  --intro--textani-bow: 1;
  --intro--textani-delay: 0.4s;
  --intro--textani-xanchor: calc(-100% - 1rem) -50%;
  animation: intro--textani-move 1.75s both;
  animation-delay: var(--intro--textani-delay, 0s)
}
.intro--animation .intro--texts-wrapper .intro--texts ul li:nth-child(5).animated {
  --intro--textani-endX: calc(22.041946961vmin);
  --intro--textani-endY: calc(30.3381372891vmin);
  --intro--textani-bow: 1;
  --intro--textani-delay: 0.8s;
  --intro--textani-xanchor: calc(-100% - 1rem) -50%;
  animation: intro--textani-move 1.75s both;
  animation-delay: var(--intro--textani-delay, 0s)
}
.intro--animation .intro--texts-wrapper .intro--texts ul li:nth-child(6).animated {
  --intro--textani-endX: calc(0vmin);
  --intro--textani-endY: calc(11.25vmin);
  --intro--textani-bow: -1;
  --intro--textani-delay: 1.4s;
  --intro--textani-xanchor: -50% -50%;
  animation: intro--textani-move 1.75s both;
  animation-delay: var(--intro--textani-delay, 0s)
}
.intro--animation .intro--texts-wrapper .intro--texts ul li:nth-child(7).animated {
  --intro--textani-endX: calc(-16.5314602207vmin);
  --intro--textani-endY: calc(22.7536029668vmin);
  --intro--textani-bow: -1;
  --intro--textani-delay: 0s;
  --intro--textani-xanchor: 1rem -50%;
  animation: intro--textani-move 1.75s both;
  animation-delay: var(--intro--textani-delay, 0s)
}
.intro--animation .intro--texts-wrapper .intro--texts ul li:nth-child(8).animated {
  --intro--textani-endX: calc(-19.6155406486vmin);
  --intro--textani-endY: calc(6.373475509vmin);
  --intro--textani-bow: -1;
  --intro--textani-delay: 1.2s;
  --intro--textani-xanchor: 1rem -50%;
  animation: intro--textani-move 1.75s both;
  animation-delay: var(--intro--textani-delay, 0s)
}
.intro--animation .intro--texts-wrapper .intro--texts ul li:nth-child(9).animated {
  --intro--textani-endX: calc(-32.098157425vmin);
  --intro--textani-endY: calc(-10.4293235602vmin);
  --intro--textani-bow: -1;
  --intro--textani-delay: 1.8s;
  --intro--textani-xanchor: 1rem -50%;
  animation: intro--textani-move 1.75s both;
  animation-delay: var(--intro--textani-delay, 0s)
}
.intro--animation .intro--texts-wrapper .intro--texts ul li:nth-child(10).animated {
  --intro--textani-endX: calc(-15.4293628727vmin);
  --intro--textani-endY: calc(-21.2366961023vmin);
  --intro--textani-bow: -1;
  --intro--textani-delay: 1.6s;
  --intro--textani-xanchor: 1rem -50%;
  animation: intro--textani-move 1.75s both;
  animation-delay: var(--intro--textani-delay, 0s)
}
@keyframes intro--textani-move {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0
  }
  100% {
    opacity: 1;
    transform: translate(var(--intro--textani-endX), var(--intro--textani-endY)) scale(1.5)
  }
}
.intro--animation .intro--title-wrapper {
  position: absolute;
  z-index: 100;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center
}
.intro--animation .intro--title-wrapper .intro--title {
  padding: 2rem;
  will-change: opacity;
  font-family: "DINNextProRegular", Helvetica, Arial, sans-serif;
  font-size: var(--intro--title-size);
  line-height: 1.167;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 1rem;
  text-align: center
}
.intro--animation .intro--title-wrapper .intro--title.fade-out {
  opacity: 0;
  transition: opacity 1s ease;
  animation: none !important
}
.intro--animation .intro--skip {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom) + 2rem);
  left: 0;
  z-index: 110;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center
}
.intro--animation .intro--skip #intro--skipbutton {
  display: block;
  padding: .5rem 2rem .3rem;
  font-size: 1.1rem;
  text-transform: uppercase;
  font-family: "DINNextProBold", Helvetica, Arial, sans-serif;
  color: #f33c8b;
  background-color: var(--intro--color-bg);
  border: 1px solid #f33c8b;
  text-align: center
}
.intro--animation .intro--skip #intro--skipbutton.fade-out {
  opacity: 0;
  transition: opacity .5s ease
}


/* ENTFERNEN:
.intro--animation.pre-stage + .main-wrapper { padding-top: var(--intro--offset) }
.intro--animation.mainstage + .main-wrapper { will-change: opacity, overflow; overflow-x: hidden; overflow-y: visible }
.intro--animation:not(.mainstage) + .main-wrapper { opacity: 0 }
.intro--animation.pre-fade-out + .main-wrapper { transition: opacity 2s ease; opacity: 1 }
.intro--animation.closed + .main-wrapper { overflow: visible }
*/

body.intro-lock {
  overflow: hidden;
  height: 100%;
}




@media(max-width: 1000px) {
  .intro--animation .intro--clouds-wrapper .intro--cloud.cloud-1 {
    transform: translate(-30vw, -20vh) scale(1.5)
  }
  .intro--animation .intro--clouds-wrapper .intro--cloud.cloud-1.animated {
    animation: intro--cloud-move-1 12.5s ease forwards
  }
  .intro--animation .intro--clouds-wrapper .intro--cloud.cloud-2 {
    transform: translate(0vw, 0vh) scale(1.5)
  }
  .intro--animation .intro--clouds-wrapper .intro--cloud.cloud-2.animated {
    animation: intro--cloud-move-2 10s ease forwards
  }
  @keyframes intro--cloud-move-1 {
    0% {
      transform: translate(-30vw, -20vh) scale(1.5)
    }
    50% {
      opacity: 1
    }
    60% {
      opacity: 0
    }
    100% {
      transform: translate(-120vw, -20vh) scale(1.5)
    }
  }
  @keyframes intro--cloud-move-2 {
    0% {
      transform: translate(0vw, 0vh) scale(1.5)
    }
    60% {
      opacity: 1
    }
    70% {
      opacity: 0
    }
    100% {
      transform: translate(50vw, 0vh) scale(1.5)
    }
  }
  .intro--animation .intro--clouds-wrapper.animated-back .intro--cloud.cloud-1 {
    transform: translate(-100vw, 0vh) scale(3);
    opacity: 0
  }
  .intro--animation .intro--clouds-wrapper.animated-back .intro--cloud.cloud-1.animated-back {
    animation: intro--cloud-move-1back 4s ease-out forwards
  }
  @keyframes intro--cloud-move-1back {
    0% {
      transform: translate(-100vw, 0vh) scale(3)
    }
    25% {
      opacity: 1
    }
    100% {
      transform: translate(100vw, 0vh) scale(3)
    }
  }
  .intro--animation .intro--texts-wrapper .intro--texts ul li .center {
    translate: var(--intro--textani-xanchor, -50% -50%)
  }
  .intro--animation .intro--texts-wrapper .intro--texts ul li:nth-child(1).animated {
    --intro--textani-endX: calc(4vw);
    --intro--textani-endY: calc(-30vh);
    --intro--textani-bow: 1;
    --intro--textani-delay: 0.24s;
    --intro--textani-xanchor: -50% -50%;
    animation: intro--textani-move 1.5s both;
    animation-delay: var(--intro--textani-delay, 0s)
  }
  .intro--animation .intro--texts-wrapper .intro--texts ul li:nth-child(2).animated {
    --intro--textani-endX: calc(5vw);
    --intro--textani-endY: calc(-20vh);
    --intro--textani-bow: 1;
    --intro--textani-delay: 0.08s;
    --intro--textani-xanchor: calc(-100% - 1rem) -50%;
    animation: intro--textani-move 1.5s both;
    animation-delay: var(--intro--textani-delay, 0s)
  }
  .intro--animation .intro--texts-wrapper .intro--texts ul li:nth-child(3).animated {
    --intro--textani-endX: calc(25vw);
    --intro--textani-endY: calc(-15vh);
    --intro--textani-bow: 1;
    --intro--textani-delay: 0.4s;
    --intro--textani-xanchor: calc(-100% - 1rem) -50%;
    animation: intro--textani-move 1.5s both;
    animation-delay: var(--intro--textani-delay, 0s)
  }
  .intro--animation .intro--texts-wrapper .intro--texts ul li:nth-child(4).animated {
    --intro--textani-endX: calc(50vw);
    --intro--textani-endY: calc(-10vh);
    --intro--textani-bow: 1;
    --intro--textani-delay: 0.16s;
    --intro--textani-xanchor: calc(-100% - 1rem) -50%;
    animation: intro--textani-move 1.5s both;
    animation-delay: var(--intro--textani-delay, 0s)
  }
  .intro--animation .intro--texts-wrapper .intro--texts ul li:nth-child(5).animated {
    --intro--textani-endX: calc(12vw);
    --intro--textani-endY: calc(-3.3vh);
    --intro--textani-bow: 1;
    --intro--textani-delay: 0.32s;
    --intro--textani-xanchor: calc(-100% - 1rem) -50%;
    animation: intro--textani-move 1.5s both;
    animation-delay: var(--intro--textani-delay, 0s)
  }
  .intro--animation .intro--texts-wrapper .intro--texts ul li:nth-child(6).animated {
    --intro--textani-endX: calc(-22.1vw);
    --intro--textani-endY: calc(3.3vh);
    --intro--textani-bow: -1;
    --intro--textani-delay: 0.56s;
    --intro--textani-xanchor: -50% -50%;
    animation: intro--textani-move 1.5s both;
    animation-delay: var(--intro--textani-delay, 0s)
  }
  .intro--animation .intro--texts-wrapper .intro--texts ul li:nth-child(7).animated {
    --intro--textani-endX: calc(-20vw);
    --intro--textani-endY: calc(10vh);
    --intro--textani-bow: -1;
    --intro--textani-delay: 0s;
    --intro--textani-xanchor: 1rem -50%;
    animation: intro--textani-move 1.5s both;
    animation-delay: var(--intro--textani-delay, 0s)
  }
  .intro--animation .intro--texts-wrapper .intro--texts ul li:nth-child(8).animated {
    --intro--textani-endX: calc(-49.6vw);
    --intro--textani-endY: calc(16.7vh);
    --intro--textani-bow: -1;
    --intro--textani-delay: 0.48s;
    --intro--textani-xanchor: 1rem -50%;
    animation: intro--textani-move 1.5s both;
    animation-delay: var(--intro--textani-delay, 0s)
  }
  .intro--animation .intro--texts-wrapper .intro--texts ul li:nth-child(9).animated {
    --intro--textani-endX: calc(-10vw);
    --intro--textani-endY: calc(23.3vh);
    --intro--textani-bow: -1;
    --intro--textani-delay: 0.72s;
    --intro--textani-xanchor: 1rem -50%;
    animation: intro--textani-move 1.5s both;
    animation-delay: var(--intro--textani-delay, 0s)
  }
  .intro--animation .intro--texts-wrapper .intro--texts ul li:nth-child(10).animated {
    --intro--textani-endX: calc(-15.4vw);
    --intro--textani-endY: calc(30vh);
    --intro--textani-bow: -1;
    --intro--textani-delay: 0.64s;
    --intro--textani-xanchor: 1rem -50%;
    animation: intro--textani-move 1.5s both;
    animation-delay: var(--intro--textani-delay, 0s)
  }
}