.elementor-kit-18{--e-global-color-primary:#007973;--e-global-color-secondary:#3F3F3F;--e-global-color-text:#9CA1A1;--e-global-color-accent:#59A8A6;--e-global-color-10ad33e:#59A8A6;--e-global-color-59bff67:#DFE3E3;--e-global-color-92183fb:#EAEEEE;--e-global-color-f3c4723:#D1D1D1;--e-global-color-623210a:#FFFFFF78;--e-global-color-aeee423:#17F3CE;--e-global-color-aac1246:#1D3037;--e-global-color-751c51f:#FFFFFF;--e-global-color-d3ba35e:#B8FE09;--e-global-color-5ee6bc5:#3B17FF;--e-global-color-503a2a7:#292B3A;--e-global-color-f70b98c:#00FDBA;--e-global-color-018694d:#E8FD96;--e-global-color-8ef2d74:#D0E6FD;--e-global-typography-primary-font-family:"Raleway";--e-global-typography-primary-font-size:105px;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-text-transform:none;--e-global-typography-primary-font-style:normal;--e-global-typography-primary-text-decoration:none;--e-global-typography-primary-line-height:120px;--e-global-typography-secondary-font-family:"Raleway";--e-global-typography-secondary-font-size:80px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-font-style:normal;--e-global-typography-secondary-text-decoration:none;--e-global-typography-secondary-line-height:120px;--e-global-typography-text-font-family:"Raleway";--e-global-typography-text-font-size:54px;--e-global-typography-text-font-weight:600;--e-global-typography-text-text-transform:none;--e-global-typography-text-font-style:normal;--e-global-typography-text-text-decoration:none;--e-global-typography-text-line-height:63px;--e-global-typography-accent-font-family:"Raleway";--e-global-typography-accent-font-size:50px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:none;--e-global-typography-accent-font-style:normal;--e-global-typography-accent-text-decoration:none;--e-global-typography-accent-line-height:59px;--e-global-typography-927c21a-font-family:"Plus Jakarta Sans";--e-global-typography-927c21a-font-size:87px;--e-global-typography-927c21a-font-weight:600;--e-global-typography-927c21a-text-transform:none;--e-global-typography-927c21a-font-style:normal;--e-global-typography-927c21a-text-decoration:none;--e-global-typography-927c21a-line-height:110px;--e-global-typography-7685566-font-family:"Inter";--e-global-typography-7685566-font-size:65px;--e-global-typography-7685566-font-weight:600;--e-global-typography-7685566-text-transform:none;--e-global-typography-7685566-font-style:normal;--e-global-typography-7685566-text-decoration:none;--e-global-typography-7685566-line-height:79px;--e-global-typography-9d2a4cf-font-family:"Inter";--e-global-typography-9d2a4cf-font-size:38px;--e-global-typography-9d2a4cf-font-weight:600;--e-global-typography-9d2a4cf-text-transform:none;--e-global-typography-9d2a4cf-font-style:normal;--e-global-typography-9d2a4cf-text-decoration:none;--e-global-typography-9d2a4cf-line-height:46px;--e-global-typography-f414d63-font-family:"Inter";--e-global-typography-f414d63-font-size:32px;--e-global-typography-f414d63-font-weight:600;--e-global-typography-f414d63-text-transform:none;--e-global-typography-f414d63-font-style:normal;--e-global-typography-f414d63-text-decoration:none;--e-global-typography-f414d63-line-height:39px;--e-global-typography-eabb5f0-font-family:"Inter";--e-global-typography-eabb5f0-font-size:24px;--e-global-typography-eabb5f0-font-weight:600;--e-global-typography-eabb5f0-text-transform:none;--e-global-typography-eabb5f0-font-style:normal;--e-global-typography-eabb5f0-text-decoration:none;--e-global-typography-eabb5f0-line-height:34px;--e-global-typography-78a570c-font-family:"Raleway";--e-global-typography-78a570c-font-size:16px;--e-global-typography-78a570c-font-weight:600;--e-global-typography-78a570c-text-transform:none;--e-global-typography-78a570c-font-style:normal;--e-global-typography-78a570c-text-decoration:none;--e-global-typography-78a570c-line-height:19px;--e-global-typography-4b1cb9b-font-family:"Inter";--e-global-typography-4b1cb9b-font-size:16px;--e-global-typography-4b1cb9b-font-weight:400;--e-global-typography-4b1cb9b-text-transform:none;--e-global-typography-4b1cb9b-font-style:normal;--e-global-typography-4b1cb9b-text-decoration:none;--e-global-typography-4b1cb9b-line-height:24px;--e-global-typography-0fe0027-font-family:"Inter";--e-global-typography-0fe0027-font-size:14px;--e-global-typography-0fe0027-font-weight:400;--e-global-typography-0fe0027-text-transform:none;--e-global-typography-0fe0027-font-style:normal;--e-global-typography-0fe0027-text-decoration:none;--e-global-typography-0fe0027-line-height:17px;--e-global-typography-0fe0027-letter-spacing:0px;--e-global-typography-88e8799-font-family:"Inter";--e-global-typography-88e8799-font-size:14px;--e-global-typography-88e8799-font-weight:600;--e-global-typography-88e8799-text-transform:none;--e-global-typography-88e8799-font-style:normal;--e-global-typography-88e8799-text-decoration:none;--e-global-typography-88e8799-line-height:17px;--e-global-typography-c7b5227-font-family:"Raleway";--e-global-typography-c7b5227-font-size:32px;--e-global-typography-c7b5227-font-weight:600;--e-global-typography-c7b5227-text-transform:none;--e-global-typography-c7b5227-font-style:normal;--e-global-typography-c7b5227-text-decoration:none;--e-global-typography-c7b5227-line-height:36px;--e-global-typography-02907a0-font-family:"Plus Jakarta Sans";--e-global-typography-02907a0-font-size:16px;--e-global-typography-02907a0-font-weight:600;--e-global-typography-02907a0-text-transform:none;--e-global-typography-02907a0-font-style:normal;--e-global-typography-02907a0-text-decoration:none;--e-global-typography-02907a0-line-height:20px;--e-global-typography-428e9a1-font-family:"Raleway";--e-global-typography-428e9a1-font-size:450px;--e-global-typography-428e9a1-font-weight:600;--e-global-typography-428e9a1-text-transform:none;--e-global-typography-428e9a1-font-style:normal;--e-global-typography-428e9a1-text-decoration:none;--e-global-typography-428e9a1-line-height:528px;background-color:#EAEEEE;}.elementor-kit-18 e-page-transition{background-color:#FFBC7D;}.elementor-kit-18 a{color:var( --e-global-color-secondary );}.elementor-kit-18 a:hover{color:var( --e-global-color-secondary );}.elementor-kit-18 button,.elementor-kit-18 input[type="button"],.elementor-kit-18 input[type="submit"],.elementor-kit-18 .elementor-button{font-family:"Montserrat", Sans-serif;font-size:14px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =====================================================
   01 – MONTMEDIA HERO SCROLL-EFFEKT
   ===================================================== */

.mm-hero-flip,
.mm-hero-flip *,
.mm-hero-flip *::before,
.mm-hero-flip *::after {
  box-sizing: border-box;
}

.mm-hero-flip {
  --mm-nav-h: 0px;

  position: relative;

  width: 100%;
  max-width: 100%;
  height: 300vh;

  margin: 0;
  padding: 0;

  /*
   * Verhindert horizontales Überlaufen, ohne einen
   * zusätzlichen Scroll-Container zu erzeugen.
   */
  overflow-x: clip;
}

/* Dynamische Viewport-Höhe für moderne Browser */
@supports (height: 100dvh) {
  .mm-hero-flip {
    height: 300dvh;
  }
}

/* Feststehender sichtbarer Bereich */
.mm-hero-flip__pin {
  position: -webkit-sticky;
  position: sticky;

  top: var(--mm-nav-h);

  width: 100%;
  max-width: 100%;
  height: calc(100vh - var(--mm-nav-h));

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  isolation: isolate;
}

@supports (height: 100dvh) {
  .mm-hero-flip__pin {
    height: calc(100dvh - var(--mm-nav-h));
  }
}

/* Hintergrundbild */
.mm-hero-flip__bg {
  position: absolute;
  z-index: 0;

  inset: 0;

  width: 100%;
  height: 100%;

  background-size: cover;
  background-position: center 5%;
  background-repeat: no-repeat;
}

/* Überschrift */
.mm-hero-flip__heading {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0 5vw;

  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;

  gap: 0.3em;

  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  text-align: center;
  line-height: 1;
}

/* Kleiner Text „mehr“ */
.mm-hero-flip__pre {
  flex: 0 0 auto;

  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 300;
  line-height: 1;

  opacity: 0.85;
}

/* Container der wechselnden Begriffe */
.mm-hero-flip__word-wrap {
  display: grid;

  max-width: 100%;
  min-width: 0;
}

/* Einzelne Begriffe */
.mm-hero-flip__word {
  grid-area: 1 / 1;

  max-width: 100%;

  font-size: clamp(4.2rem, 11vw, 9rem);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;

  opacity: 0;
  visibility: hidden;

  transform: translateY(24px);

  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    visibility 0.5s ease;

  will-change: opacity, transform;
}

/* Aktuell sichtbarer Begriff */
.mm-hero-flip__word.is-active {
  opacity: 1;
  visibility: visible;

  transform: translateY(0);
}


/* =====================================================
   01.1 – HERO TABLET
   ===================================================== */

@media (max-width: 768px) {
  .mm-hero-flip {
    --mm-nav-h: 0px;

    height: 220vh;
  }

  @supports (height: 100dvh) {
    .mm-hero-flip {
      height: 220dvh;
    }
  }

  .mm-hero-flip__heading {
    padding-right: 24px;
    padding-left: 24px;

    gap: 0.2em;
  }

  .mm-hero-flip__pre {
    font-size: clamp(1.8rem, 6vw, 2.6rem);
  }

  .mm-hero-flip__word {
    font-size: clamp(3rem, 10vw, 5.5rem);
  }
}


/* =====================================================
   01.2 – HERO SMARTPHONE
   ===================================================== */

@media (max-width: 600px) {
  .mm-hero-flip__heading {
    padding-right: 16px;
    padding-left: 16px;

    gap: 0.15em;
  }

  .mm-hero-flip__pre {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  .mm-hero-flip__word-wrap {
    width: 100%;
  }

  .mm-hero-flip__word {
    width: 100%;

    font-size: clamp(2.2rem, 11vw, 3.4rem);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }
}


/* Animationen bei entsprechender Systemeinstellung reduzieren */
@media (prefers-reduced-motion: reduce) {
  .mm-hero-flip__word {
    transition: none;
    transform: none;
  }
}


/* =====================================================
   02 – ELEMENTOR-KARUSSELLS
   HORIZONTALEN SEITEN-OVERFLOW VERHINDERN
   ===================================================== */

.elementor-widget-image-carousel,
.elementor-widget-media-carousel,
.elementor-widget-testimonial-carousel,
.elementor-widget-loop-carousel,
.elementor-widget-n-carousel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Sichtbarer Bereich des Karussells */
.elementor-widget-image-carousel .swiper,
.elementor-widget-image-carousel .elementor-image-carousel-wrapper,
.elementor-widget-media-carousel .swiper,
.elementor-widget-testimonial-carousel .swiper,
.elementor-widget-loop-carousel .swiper,
.elementor-widget-loop-carousel .elementor-loop-container,
.elementor-widget-n-carousel .swiper {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  overflow: hidden !important;
}

/* Elementor-Container dürfen in Flex-Layouts nicht breiter werden */
.e-con,
.e-con-inner,
.elementor-widget,
.elementor-widget-container {
  min-width: 0;
}


/* =====================================================
   03 – MONTMEDIA HEADER
   GLAS-EFFEKT & STICKY-ZUSTAND
   ===================================================== */

/* Grundzustand */
#headersticky {
  background-color: rgba(255, 255, 255, 0.12) !important;

  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;

  box-shadow: none !important;

  transition:
    background-color 0.4s ease,
    backdrop-filter 0.4s ease,
    box-shadow 0.4s ease !important;
}

/* Ab 250px Scroll */
body.mm-header-scrolled #headersticky {
  background-color: rgba(255, 255, 255, 0.62) !important;

  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;

  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Sticky Header – Hamburger-Icon MontMedia-Grün */
body.mm-header-scrolled
#headersticky
.elementor-icon {
  color: #007873 !important;
}

/* Falls das Icon als SVG ausgegeben wird */
body.mm-header-scrolled
#headersticky
.elementor-icon svg,
body.mm-header-scrolled
#headersticky
.elementor-icon svg path {
  fill: #007873 !important;
  stroke: #007873 !important;
}

/* =====================================================
   04 – MONTMEDIA HAUPTMENÜ
   UNDERLINE
   ===================================================== */

.mm-glass-menu
.elementor-nav-menu--main
.elementor-item::after {
  height: 1px !important;
}

/* Sticky Header – Hauptmenü wieder MontMedia-Grün */
body.mm-header-scrolled
#headersticky
.mm-glass-menu
.elementor-nav-menu--main
.elementor-item {
  color: #007873 !important;
}

/* Dropdown-Pfeil ebenfalls grün */
body.mm-header-scrolled
#headersticky
.mm-glass-menu
.elementor-nav-menu--main
.sub-arrow {
  color: #007873 !important;
}

body.mm-header-scrolled
#headersticky
.mm-glass-menu
.elementor-nav-menu--main
.sub-arrow svg {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Sticky Header – Logo wechseln */

/* Oben auf der Seite: weißes Logo */
.mm-logo-white {
  display: block !important;
}

.mm-logo-green {
  display: none !important;
}

/* Beim Scrollen: grünes Logo */
body.mm-header-scrolled
#headersticky
.mm-logo-white {
  display: none !important;
}

body.mm-header-scrolled
#headersticky
.mm-logo-green {
  display: block !important;
}

/* Sticky Header – aktive Unterstreichung MontMedia-Grün */
body.mm-header-scrolled
#headersticky
.mm-glass-menu
.elementor-nav-menu--main
.elementor-item.elementor-item-active::after {
  background-color: #007873 !important;
}

/* =====================================================
   05 – MONTMEDIA WORDPRESS-MENÜ
   GLAS-DROPDOWN DESKTOP
   ===================================================== */

@media (min-width: 1025px) {

  /* Das eigentliche Dropdown */
  .mm-glass-menu
  .elementor-nav-menu--main
  .elementor-nav-menu
  .sub-menu {
    min-width: 330px !important;

    margin-top: 8px !important;
    padding: 10px !important;

    background: rgba(239, 245, 245, 0.72) !important;

    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);

    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 18px !important;

    box-shadow:
      0 18px 45px rgba(0, 58, 70, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;

    overflow: hidden;
  }

  /* Listenelemente transparent machen */
  .mm-glass-menu
  .elementor-nav-menu--main
  .sub-menu > li {
    background: transparent !important;
  }

  /* Einzelne Menülinks */
  .mm-glass-menu
  .elementor-nav-menu--main
  .sub-menu > li > a {
    display: flex;

    padding: 14px 18px !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 11px !important;

    color: #354247 !important;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;

    transition:
      background-color 0.2s ease,
      color 0.2s ease,
      transform 0.2s ease;
  }

  /* Hover */
  .mm-glass-menu
  .elementor-nav-menu--main
  .sub-menu > li > a:hover,
  .mm-glass-menu
  .elementor-nav-menu--main
  .sub-menu > li > a:focus {
    background: rgba(255, 255, 255, 0.55) !important;
    color: #007873 !important;

    transform: translateX(3px);
  }

  /* Aktive Unterseite */
  .mm-glass-menu
  .elementor-nav-menu--main
  .sub-menu > li.current-menu-item > a,
  .mm-glass-menu
  .elementor-nav-menu--main
  .sub-menu > li.current-menu-ancestor > a {
    background: rgba(255, 255, 255, 0.55) !important;
    color: #007873 !important;
  }

  /* Elementor-Trennlinien entfernen */
  .mm-glass-menu
  .elementor-nav-menu--main
  .sub-menu > li:not(:last-child) > a {
    border-bottom: 0 !important;
  }
}


/* =====================================================
   06 – MONTMEDIA MOBILE CANVAS MENÜ
   GLAS-EFFEKT
   ===================================================== */

/* Äußeres Popup-Fenster */
.elementor-popup-modal:has(.mm-glass-canvas)
.dialog-widget-content {
  background: rgba(225, 237, 238, 0.72) !important;

  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);

  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px 0 0 24px;

  box-shadow:
    -18px 0 50px rgba(0, 58, 70, 0.18),
    inset 1px 0 0 rgba(255, 255, 255, 0.55);

  overflow: hidden;
}

/* Popup selbst transparent halten */
.elementor-popup-modal:has(.mm-glass-canvas)
.dialog-message {
  background: transparent !important;
}

/* Oberster Elementor-Container */
.mm-glass-canvas {
  min-height: 100vh;

  padding: 32px 28px;

  background: transparent !important;
}

/* Elementor-Container innerhalb des Popups */
.mm-glass-canvas,
.mm-glass-canvas > .e-con-inner,
.mm-glass-canvas .elementor-widget-container {
  background-color: transparent !important;
}

/* Hauptmenü */
.mm-glass-canvas .elementor-nav-menu {
  width: 100%;
}

/* Einzelne Menüpunkte */
.mm-glass-canvas .elementor-nav-menu > li {
  width: 100%;

  background: transparent !important;
}

/* Menülinks */
.mm-glass-canvas .elementor-nav-menu > li > a {
  width: 100%;

  padding: 14px 16px !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 12px;

  color: #173940 !important;

  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

/* Hover und Fokus */
.mm-glass-canvas .elementor-nav-menu > li > a:hover,
.mm-glass-canvas .elementor-nav-menu > li > a:focus {
  background: rgba(255, 255, 255, 0.5) !important;
  color: #007873 !important;

  transform: translateX(3px);
}

/* Aktiver Menüpunkt */
.mm-glass-canvas
.elementor-nav-menu
> li.current-menu-item
> a,
.mm-glass-canvas
.elementor-nav-menu
> li.current-menu-ancestor
> a {
  background: rgba(255, 255, 255, 0.5) !important;
  color: #007873 !important;
}

/* Dropdown innerhalb des mobilen Menüs */
.mm-glass-canvas .sub-menu {
  margin: 4px 0 8px 12px !important;
  padding: 6px !important;

  background: rgba(255, 255, 255, 0.28) !important;

  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 14px !important;

  box-shadow: none !important;
}

/* Links im Untermenü */
.mm-glass-canvas .sub-menu li,
.mm-glass-canvas .sub-menu li a {
  background: transparent !important;
}

.mm-glass-canvas .sub-menu li a {
  padding: 12px 14px !important;

  border: 0 !important;
  border-radius: 9px;

  color: #354247 !important;

  font-size: 16px;
}

/* Hover Untermenü */
.mm-glass-canvas .sub-menu li a:hover,
.mm-glass-canvas .sub-menu li.current-menu-item > a {
  background: rgba(255, 255, 255, 0.5) !important;
  color: #007873 !important;
}

/* Elementor-Schließen-Button */
.elementor-popup-modal:has(.mm-glass-canvas)
.dialog-close-button {
  top: 22px !important;
  right: 22px !important;

  color: #173940 !important;

  font-size: 23px;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.elementor-popup-modal:has(.mm-glass-canvas)
.dialog-close-button:hover {
  color: #007873 !important;

  transform: rotate(90deg);
}

/* Abdunklung hinter dem Canvas-Menü */
.elementor-popup-modal:has(.mm-glass-canvas) {
  background-color: rgba(5, 27, 32, 0.28) !important;

  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}


/* =====================================================
   06.1 – MOBILE CANVAS SMARTPHONE
   ===================================================== */

@media (max-width: 767px) {

  .elementor-popup-modal:has(.mm-glass-canvas)
  .dialog-widget-content {
    border-radius: 20px 0 0 20px;
  }

  .mm-glass-canvas {
    padding: 28px 20px;
  }

  .mm-glass-canvas .elementor-nav-menu > li > a {
    font-size: 17px;
  }
}/* End custom CSS */