/* MN Mobile UX — Archetypen (Pattern-based, keine Custom-Child-Classes) */

/* ============ Hero (Mobile) ============ */
@media (max-width: 767px) {
  /* Force column-Direction auf Hero-Inner-Containern */
  html body .elementor .e-parent.mn-hero,
  html body .elementor .e-parent.mn-hero > .e-con,
  html body .elementor .e-parent.mn-hero > .e-con > .e-con-inner,
  html body .elementor .e-parent.mn-hero > .e-con > .e-con > .e-con-inner {
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Image-Container: zeige zuerst (order 1)
     Gilt fuer Elementor-Image-Widget UND fuer Custom-HTML-Widget mit .mn-photo / <img> */
  html body .elementor .e-parent.mn-hero .e-con:has(.elementor-widget-image),
  html body .elementor .e-parent.mn-hero .e-con:has(.elementor-widget-html .mn-photo),
  html body .elementor .e-parent.mn-hero .e-con:has(.elementor-widget-html img),
  html body .elementor .e-parent.mn-hero .e-con:has(img) {
    order: 1 !important;
  }
  /* Text-Container: zeige danach (order 2) */
  html body .elementor .e-parent.mn-hero .e-con:not(:has(.elementor-widget-image)):not(:has(img)) {
    order: 2 !important;
  }

  /* Image selber: Aspect-Ratio + Cover + Radius (Elementor-Widget) */
  html body .elementor .e-parent.mn-hero .elementor-widget-image img,
  html body .elementor .e-parent.mn-hero .elementor-widget-html img,
  html body .elementor .e-parent.mn-hero .mn-photo img {
    aspect-ratio: 4 / 5;
    max-height: 400px;
    width: 100%;
    object-fit: cover;
    border-radius: 22px;
    display: block;
  }
  /* Image selber: Aspect-Ratio + Cover + Radius (Custom-HTML-Widget: .mn-photo / .mn-photo-wrap) */
  html body .elementor .e-parent.mn-hero .mn-photo,
  html body .elementor .e-parent.mn-hero .mn-photo-wrap {
    aspect-ratio: 4 / 5;
    max-height: 400px;
    width: 100%;
    overflow: hidden;
    border-radius: 22px;
    display: block;
  }
  html body .elementor .e-parent.mn-hero .mn-photo-wrap img {
    width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 22px;
    display: block;
  }
  /* Image-Wrapper (Elementor-widget-image) sollte nicht Extra-Padding beisteuern */
  html body .elementor .e-parent.mn-hero .elementor-widget-image .elementor-widget-container,
  html body .elementor .e-parent.mn-hero .elementor-widget-html .elementor-widget-container {
    padding: 0 !important;
  }
}

/* ============ Story-Archetyp (Mobile, pattern-based) ============ */
@media (max-width: 767px) {
  html body .elementor .e-parent.mn-story,
  html body .elementor .e-parent.mn-story > .e-con,
  html body .elementor .e-parent.mn-story > .e-con > .e-con-inner {
    flex-direction: column !important;
    gap: 12px !important;
  }
  /* Image kommt NACH der Headline (nicht ganz oben wie Hero) */
  html body .elementor .e-parent.mn-story .elementor-widget-heading {
    order: 1;
  }
  html body .elementor .e-parent.mn-story .e-con:has(.elementor-widget-image),
  html body .elementor .e-parent.mn-story .e-con:has(img) {
    order: 2 !important;
  }
  html body .elementor .e-parent.mn-story .elementor-widget-text-editor,
  html body .elementor .e-parent.mn-story .elementor-widget-button {
    order: 3;
  }
  html body .elementor .e-parent.mn-story .elementor-widget-image img,
  html body .elementor .e-parent.mn-story .elementor-widget-html img,
  html body .elementor .e-parent.mn-story .mn-photo img,
  html body .elementor .e-parent.mn-story .mn-photo-wrap img {
    aspect-ratio: 4 / 5;
    max-height: 360px;
    width: 100%;
    object-fit: cover;
    border-radius: 14px;
  }
}

/* ============ Proof / Portfolio-Card Wrapper ============ */
html body .elementor .e-parent.mn-card-wrapper .elementor-widget-image img {
  aspect-ratio: 16 / 9;
  max-height: 200px;
  width: 100%;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* Fallback: any tall card-like structure (heading + single image + text) auf Mobile limitieren */
@media (max-width: 767px) {
  html body .elementor .e-parent:not(.mn-hero):not(.mn-story) .elementor-widget-image img {
    max-height: 320px;
    object-fit: cover;
  }
}

/* ============ CTA-Archetyp ============ */
html body .elementor .e-parent.mn-cta {
  text-align: center;
}
@media (max-width: 767px) {
  html body .elementor .e-parent.mn-cta .elementor-widget-button,
  html body .elementor .e-parent.mn-cta .e-con:has(.elementor-widget-button) {
    width: 100%;
  }
}


/* ============ mn-card-wrapper (Portfolio-Cards) ============ */
/* Jede direkte Kind-Card bekommt Border-Radius + Border + konsistente Bildhöhe */
html body .elementor .e-parent.mn-card-wrapper > .e-con > .e-con-inner > .e-con,
html body .elementor .e-parent.mn-card-wrapper > .e-con > .e-con {
  background: #fff;
  border: 1px solid #eee;
  border-radius: var(--mn-radius-card, 14px);
  overflow: hidden;
}

/* Image innerhalb der Cards: fixe Aspect-Ratio */
html body .elementor .e-parent.mn-card-wrapper .elementor-widget-image img {
  aspect-ratio: 16 / 9;
  max-height: 200px;
  width: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  html body .elementor .e-parent.mn-card-wrapper .elementor-widget-image img {
    max-height: 180px;
  }
}

/* ============ mn-card-leistung-wrapper (Leistungs-Cards) ============ */
html body .elementor .e-parent.mn-card-leistung-wrapper > .e-con > .e-con-inner > .e-con,
html body .elementor .e-parent.mn-card-leistung-wrapper > .e-con > .e-con {
  background: #fff;
  border: 1px solid #eee;
  border-radius: var(--mn-radius-card, 14px);
  padding: 18px 16px 16px !important;
}

/* Icon innerhalb der Leistungs-Cards: als Tile darstellen */
html body .elementor .e-parent.mn-card-leistung-wrapper .elementor-widget-icon-box .elementor-icon,
html body .elementor .e-parent.mn-card-leistung-wrapper .elementor-widget-image-box img {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 10px;
  background: #f0f0ff;
  padding: 10px;
  object-fit: contain;
}

@media (max-width: 767px) {
  html body .elementor .e-parent.mn-card-leistung-wrapper .elementor-widget-icon-box .elementor-icon,
  html body .elementor .e-parent.mn-card-leistung-wrapper .elementor-widget-image-box img {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
}

/* ============ mn-proof — große Zahlen prominent ============ */
html body .elementor .e-parent.mn-proof .elementor-widget-heading .elementor-heading-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}