.elementor-1532 .elementor-element.elementor-element-8e5d0f8{--display:flex;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-1532 .elementor-element.elementor-element-05d79a4{--e-image-carousel-slides-to-show:1;}.elementor-1532 .elementor-element.elementor-element-05d79a4 .swiper-pagination-bullet{--swiper-pagination-bullet-horizontal-gap:4px;--swiper-pagination-bullet-vertical-gap:4px;background:var( --e-global-color-accent );}.elementor-1532 .elementor-element.elementor-element-05d79a4 .swiper-pagination-bullet:not(.swiper-pagination-bullet-active){background:var( --e-global-color-14ef391 );opacity:var( --e-global-color-14ef391 );}.elementor-1532 .elementor-element.elementor-element-05d79a4 .elementor-image-carousel-wrapper .elementor-image-carousel .swiper-slide-image{border-radius:9px 9px 9px 9px;}/* Start custom CSS *//* Karussell Vorteile: einheitlich 3:2, Hochkantbilder oben/unten beschnitten */
.elementor-element-05d79a4 .swiper-slide-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* Mobil-Leiste: erst einblenden, wenn die Hero-Buttons aus dem Bild gescrollt sind.
   Browser ohne Scroll-Timelines (aeltere iPhones, Firefox) zeigen die Leiste dauerhaft. */
@supports (animation-timeline: view()) and (timeline-scope: --a) {
  @media (max-width: 767px) {
    body { timeline-scope: --mp-hero-cta; }
    .elementor-element-700a2b4c { view-timeline-name: --mp-hero-cta; }
    .elementor-element-69f27554 {
      animation: mp-leiste-rein linear both;
      animation-timeline: --mp-hero-cta;
      animation-range: exit 0% exit 100%;
    }
  }
}
@keyframes mp-leiste-rein {
  from { transform: translateY(calc(100% + 32px)); }
  to   { transform: translateY(0); }
}

/* Ablauf mobil: der Schritt in der Bildschirmmitte bekommt einen gruenen Strich.
   Feste Farbwerte statt var(), da Safari Variablen in scroll-gesteuerten Keyframes unzuverlaessig aufloest.
   #C8D5DC = mp-line, #015852 = mp-green. Ohne Scroll-Timeline bleiben alle Striche grau. */
@supports (animation-timeline: view()) {
  @media (max-width: 767px) {
    .elementor-element-3dd9e716,
    .elementor-element-318fdd97,
    .elementor-element-ba07ff4,
    .elementor-element-4170df28 {
      animation: mp-schritt-fokus linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes mp-schritt-fokus {
  0%, 34%   { border-left-color: #C8D5DC; }
  44%, 56%  { border-left-color: #015852; }
  66%, 100% { border-left-color: #C8D5DC; }
}/* End custom CSS */