/* element wird im wechsel gross und klein gezommed */
.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
  animation: zoom-in-zoom-out 1s ease infinite;
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}




.fadeInUp {
  animation-name: fadeInUp;
}

.animated {
  animation-duration: 1.25s;
}



.animated_duration {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeInUp {
  
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}





/* Background color: https://www.w3schools.com/cssref/tryit.php?filename=trycss_animatable*/




._galleryScroller_1s4i2_120 {
  width: 100%;
  --scroller-height: max(416px, 33vh);
  position: relative;
  height: var(--scroller-height);
  overflow: hidden;
  background-image: url(smo/img/homepage-scroll-dark.webp);
  background-size: 100% auto;
  animation-name: _scroll-hero_1s4i2_1;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@media screen and (min-width: 1020px){
._galleryScroller_1s4i2_120 {
    aspect-ratio: 16/9;
}
}
@keyframes _scroll-hero_1s4i2_1 {
  0% {
      background-position-y: 0;
  }

  to {
      background-position-y: -100%;
  }
}



._galleryScroller_1s4i2_120:before, ._galleryScroller_1s4i2_120:after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 48px;
}
._galleryScroller_1s4i2_120:after {
  bottom: 0;
  background-image: linear-gradient(transparent,var(--dark-blue-600));
}
._heroInner_1s4i2_9 {
  display: flex;
  flex-direction: column;
  gap: 0 32px;
}

.page-margin {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: calc(var(--max-page-width) + var(--horizontal-margin) * 2);
  padding-left: 16px;
  padding-right: 16px;
}




/* START: Bild Lauf als Animation. Sieht optisch aus wie ein Video/Film. Muss mit einem langen Bild erfolgen. */


._galleryScroller_2cg73_96 {
  --scroller-height: max(416px, 33vh);
  position: relative;
  height: var(--scroller-height);
  overflow: hidden;
  background-image: url(../../smo/img/seasonality_features.webp);
  background-size: 100% auto;
  animation-name: _scroll-hero_2cg73_1;
  animation-duration: 250s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  width: 100%;
  padding: 0;
}

._galleryScroller_2cg73_96:after {
  bottom: 0;
  background-image: linear-gradient(transparent,var(--color-util-brand-700));
}
._galleryScroller_2cg73_96:before, ._galleryScroller_2cg73_96:after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 48px;
}

._galleryScroller_2cg73_96:before, ._galleryScroller_2cg73_96:after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 48px;
}

._galleryScroller_2cg73_96:before {
  --color-gray-800: #13131f;
  --color-gray-900: #131323;
  --color-bg-primary: color-mix(in srgb, var(--color-gray-800), var(--color-gray-900) 50%);
  background-image: linear-gradient(var(--color-bg-primary),transparent);
  top: 0;
  z-index: 1;
}

._galleryScroller_2cg73_96:after {
  --color-gray-800: #12121f;
  --color-gray-900: #12121f;
  --color-bg-primary1: color-mix(in srgb, var(--color-gray-900), var(--color-gray-900) 50%);
  background-image: linear-gradient(transparent, var(--color-bg-primary1));
  bottom: 0;
  z-index: 1;
}
@keyframes _scroll-hero_2cg73_1 {
0% {
  background-position-y: 0;
}
100% {
  background-position-y: 500%;
}
}

/* END: Bild Lauf als Animation. Sieht optisch aus wie ein Video/Film. Muss mit einem langen Bild erfolgen. */






/* START: Bild Lauf als Animation. Sieht optisch aus wie ein Video/Film. Muss mit einem langen Bild erfolgen. */


._galleryScroller_2cg73_96_seasonality {
  --scroller-height: max(416px, 33vh);
  position: relative;
  height: var(--scroller-height);
  overflow: hidden;
  background-image: url(../../smo/img/seasonality_examples.webp);
  background-size: 100% auto;
  animation-name: _scroll-hero_2cg73_1;
  animation-duration: 250s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  width: 100%;
  padding: 0;
}

._galleryScroller_2cg73_96_seasonality:after {
  bottom: 0;
  background-image: linear-gradient(transparent,var(--color-util-brand-700));
}
._galleryScroller_2cg73_96_seasonality:before, ._galleryScroller_2cg73_96_seasonality:after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 48px;
}

._galleryScroller_2cg73_96_seasonality:before, ._galleryScroller_2cg73_96_seasonality:after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 48px;
}

._galleryScroller_2cg73_96_seasonality:before {
  --color-gray-800: #13131e;
  --color-gray-900: #131323;
  --color-bg-primary: color-mix(in srgb, var(--color-gray-800), var(--color-gray-900) 50%);
  background-image: linear-gradient(var(--color-bg-primary),transparent);
  top: 0;
  z-index: 1;
}

._galleryScroller_2cg73_96_seasonality:after {
  --color-gray-800: #111121;
  --color-gray-900: #111121;
  --color-bg-primary1: color-mix(in srgb, var(--color-gray-900), var(--color-gray-900) 50%);
  background-image: linear-gradient(transparent, var(--color-bg-primary1));
  bottom: 0;
  z-index: 1;
}
@keyframes _scroll-hero_2cg73_1 {
0% {
  background-position-y: 0;
}
100% {
  background-position-y: 500%;
}
}

/* END: Bild Lauf als Animation. Sieht optisch aus wie ein Video/Film. Muss mit einem langen Bild erfolgen. */