@charset "UTF-8";
@media only screen and (max-width: 768px) {
  .fullsize-start-text, .fullsize-start-text .elementor-element {
    position: relative;
  }
  .elementor .elementor-background-video-hosted {
    height: 100vh !important;
    /* Eventuell overflow: hidden, falls das Video außerhalb des Containers liegt */
    overflow: hidden;
  }
}
.section-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  will-change: transform;
  backface-visibility: hidden; /* Verhindert visuelle Fehler */
  transform-style: preserve-3d; /* Optimiert GPU-Nutzung */
  perspective: 1000px; /* Unterstützt 3D-Effekte */
  transition: transform 0.1s ease-out; /* Sanfte Animation */
  z-index: 3;
}
.section-sticky.zero-z {
  z-index: 1 !important;
  min-height: calc(88vh - 86px);
  height: calc(88vh - 86px) !important;
  /*
  height: calc(100vh - 170px);
   100vh - 150px header height - 2x 10px Außenabstand */
}
@media (max-width: 767px) {
  .section-sticky.zero-z {
    height: -moz-fit-content !important;
    height: fit-content !important;
    min-height: unset !important;
    z-index: 9999 !important;
    position: relative !important;
  }
}
.section-sticky.zero-z #skip-animation-button {
  position: relative;
  z-index: 10000;
}

@-moz-document url-prefix() {
  .section-sticky {
    transform: translateZ(0); /* Erzwingt GPU-Rendering in Firefox */
  }
}
/* gerneral */
.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.fade-in {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

/* Typewriter effect */
.text-background.typewriter {
  transition: opacity 0.3s ease-in-out;
}

.text-background.visible {
  display: inline-block; /* Sichtbar machen */
}

@media only screen and (max-width: 768px) {
  /* "Wenn" in eigener Zeile (falls nötig) */
  .mobile-break {
    display: block;
    margin-bottom: 0.1em;
  }
  /* Die animierten Texte auf eigener Zeile mit Abstand */
  .text-background.typewriter {
    display: inline-block;
  }
}
/* Animation für das H2 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Scrollmagic Startseite */
/* Desktop unverändert */
.pin-stage {
  position: relative;
  height: 100svh;
  overflow: hidden;
}

/* Aktiver Link (Desktop/Tablet bleibt) */
.fixedContent__right a {
  text-decoration: none;
  display: block;
}

.fixedContent__right a.active,
.fixedContent__right a:hover {
  text-decoration: underline;
  color: var(--e-global-color-accent);
}

/* ===== Mobile (<=1025px) ===== */
@media (max-width: 1025px) {
  /* Bühne aus dem Pin holen */
  .pin-stage {
    height: auto;
    overflow: visible;
    display: block;
  }
  /* Linke Seite ausblenden – Steps sind rechts */
  .fixedContent__left {
    display: none !important;
  }
  .fixedContent__right {
    display: block !important;
    width: 100%;
    max-width: 100%;
    margin-left: 0px !important;
  }
  /* Jeder Step nimmt 50% der mobilen Höhe ein */
  .fixedContent__right .fixedContent__step {
    position: relative;
    height: 50svh; /* 50% der sichtbaren Höhe */
    min-height: 320px; /* Fallback */
    margin: 0px 12px 0.5em 12px;
    overflow: hidden;
  }
  /* Bild-Container füllt den Step */
  .fixedContent__right .fixedContent__background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  /* Bild füllt Breite & Höhe des Steps */
  .fixedContent__right .fixedContent__background > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* füllt ohne Verzerrung, ggf. Beschnitt */
  }
  /* Titel/Link zentriert über dem Bild (wie in deinem Muster) */
  .fixedContent__right .fixedContent__step h3 {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 16px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    text-align: center;
    z-index: 2;
    font-size: 1em;
  }
}
/* animation elementor-location-header */
body .elementor-location-header .e-con > .e-con-inner {
  transition: padding-block-start 0.3s ease-in-out;
}
body .elementor-location-header .e-con > .e-con-inner .elementor-widget-image img {
  transform-origin: left center; /* Skalierung startet links mitte */
  transition: transform 0.3s ease-in-out;
  object-position: center left;
}

/* Scroll-Animation für horizontale Fade-In-Punkte */
.punkt-horizontal-fadein {
  opacity: 0;
  transform: translateX(150px);
  transition: transform 1s ease, opacity 1s ease;
}

.punkt-horizontal-fadein.animate {
  opacity: 1;
  transform: translateX(0);
}