/* MN Mobile UX — Polish Pass v2 (2026-04-23)
   Mit realen Klassennamen aus DOM-Inventory */

/* ============================================
   1. Image-Overlay-Cards ausblenden auf Mobile
   ============================================ */
@media (max-width: 767px) {
  /* LP Webdesign-Neuss: .mn-pop1-4 Benefit-Cards */
  html body .mn-pop,
  html body .mn-pop1,
  html body .mn-pop2,
  html body .mn-pop3,
  html body .mn-pop4,
  /* Startseite/Über-mich-Teaser: 100% Weiterempfehlung */
  html body .mn-about-badge,
  html body .mn-about-visual .mn-stat-vis,
  /* Warum-MN-Sektion (Was mich unterscheidet): mn-stat-vis mit Zahl+Label */
  html body .mn-why-card .mn-stat-vis,
  /* Generisch: mn-photo-wrap direkt-children die keine Bilder sind */
  html body .mn-photo-wrap > *:not(.mn-photo):not(img):not(picture) {
    display: none !important;
  }
}

/* ============================================
   2. Chat-Mockup (Startseite Hero) voll lesbar
   ============================================ */
@media (max-width: 767px) {
  html body .mn-chat-wrap,
  html body .mn-chat-bubble,
  html body .mn-chat-l,
  html body .mn-chat-r,
  html body .mn-sh-dd-preview-wrap,
  html body .mn-sh-dd-preview-card {
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
  }
  html body .mn-chat-wrap * {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ============================================
   3. Typewriter-Animation: min-height fix
   ============================================ */
@media (max-width: 767px) {
  html body .mn-typewriter-wrap,
  html body .mn-typewriter {
    min-height: 3.3em !important;
    display: block !important;
  }
  /* Body-Copy nach Headline bekommt klaren Abstand */
  html body .e-parent.mn-hero .elementor-widget-heading + * {
    margin-top: 20px !important;
  }
}

/* ============================================
   4. Check-Icons blau färben (FEAT-CHECKS)
   ============================================ */
/* Elementor icon-list checkmarks */
html body .elementor-widget-icon-list .elementor-icon-list-icon,
html body .elementor-widget-icon-list .elementor-icon-list-icon i,
html body .elementor-widget-icon-list .elementor-icon-list-icon svg,
html body .elementor-widget-icon-list .elementor-icon-list-icon svg path {
  color: #4b4efc !important;
  fill: #4b4efc !important;
  stroke: #4b4efc !important;
}
/* Custom .mn-check / .mn-checkmark in HTML-Widgets */
html body .mn-check-text::before,
html body .mn-checkmark,
html body .mn-check-wrap .mn-checkmark,
html body .mn-check-wrap::before,
html body li.mn-check-item::before {
  color: #4b4efc !important;
  fill: #4b4efc !important;
}

/* ============================================
   5. Buttons in Hero/CTA: gleich breit + mittig
   ============================================ */
@media (max-width: 767px) {
  html body .e-parent.mn-hero .elementor-widget-button,
  html body .e-parent.mn-cta .elementor-widget-button,
  html body .e-parent.mn-story .elementor-widget-button {
    text-align: center !important;
    width: 100% !important;
  }
  html body .e-parent.mn-hero .elementor-widget-button .elementor-button-wrapper,
  html body .e-parent.mn-cta .elementor-widget-button .elementor-button-wrapper,
  html body .e-parent.mn-story .elementor-widget-button .elementor-button-wrapper {
    text-align: center !important;
    display: block !important;
  }
  html body .e-parent.mn-hero .elementor-button,
  html body .e-parent.mn-cta .elementor-button,
  html body .e-parent.mn-story .elementor-button {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 360px !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }
  /* Auch .mn-btn und .mn-cta-submit gleich behandeln */
  html body .e-parent.mn-hero .mn-btn,
  html body .e-parent.mn-cta .mn-btn,
  html body .e-parent.mn-story .mn-btn,
  html body .mn-cta-submit {
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 8px auto !important;
    text-align: center !important;
  }
}

/* ============================================
   6. Card-Padding symmetrisch + erhöht
   ============================================ */
@media (max-width: 767px) {
  /* Leistungs-Card-Wrapper-Kinder */
  html body .e-parent.mn-card-leistung-wrapper > .e-con > .e-con,
  html body .e-parent.mn-card-leistung-wrapper > .e-con > .e-con-inner > .e-con {
    padding: 20px !important;
  }
  /* Why-Cards */
  html body .mn-why-card {
    padding: 20px !important;
  }
  /* FAQ-Items */
  html body .mn-faq-item,
  html body .mn-faq-q,
  html body .mn-faq-a-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Testimonials */
  html body .mn-testi-card,
  html body .mn-testi-inner {
    padding: 20px !important;
  }
  /* How-Steps */
  html body .mn-how-step,
  html body .mn-how-inner {
    padding: 20px !important;
  }
}

/* ============================================
   7. Preis-Kacheln: LEFT-align (alle Breakpoints)
   ============================================ */
/* Heuristik: Container mit icon-list + heading die '€' oder 'Monat' enthalten */
html body .mn-price,
html body .mn-price *,
html body .mn-pricing-card,
html body .mn-pricing-card * {
  text-align: left !important;
}
html body .mn-price .elementor-button-wrapper,
html body .mn-pricing-card .elementor-button-wrapper {
  display: flex !important;
  justify-content: flex-start !important;
}
/* Pragmatischer: Elementor-Container auf /leistungen /wordpress-wartung etc.
   mit Heading der Preis-Signal enthält - CSS hat keine Text-Search aber wir nutzen
   class-attribute contains */
html body .elementor [class*="mn-plan"] .elementor-widget-heading .elementor-heading-title,
html body .elementor [class*="mn-plan"] .elementor-widget-text-editor,
html body .elementor [class*="mn-plan"] .elementor-widget-icon-list,
html body .elementor [class*="mn-plan"] .elementor-icon-list-item,
html body .elementor [class*="mn-tarif"] .elementor-widget-heading .elementor-heading-title,
html body .elementor [class*="mn-tarif"] .elementor-widget-text-editor,
html body .elementor [class*="mn-tarif"] .elementor-widget-icon-list,
html body .elementor [class*="wusp"] .elementor-widget-heading .elementor-heading-title,
html body .elementor [class*="wusp"] .elementor-widget-text-editor,
html body .elementor [class*="wusp"] .elementor-widget-icon-list {
  text-align: left !important;
}

/* ============================================
   8. Weiße Hintergründe auf Content-Kacheln entfernen
   (Case Studies + Über mich "Wie ich arbeite")
   ============================================ */
/* Case-Study-Seiten (Projekt-Detailseiten) */
body.page-id-407 .e-parent.mn-card-leistung-wrapper > .e-con > .e-con,
body.page-id-407 .e-parent.mn-card-leistung-wrapper > .e-con > .e-con-inner > .e-con,
body.page-id-415 .e-parent.mn-card-leistung-wrapper > .e-con > .e-con,
body.page-id-415 .e-parent.mn-card-leistung-wrapper > .e-con > .e-con-inner > .e-con,
body.page-id-419 .e-parent.mn-card-leistung-wrapper > .e-con > .e-con,
body.page-id-419 .e-parent.mn-card-leistung-wrapper > .e-con > .e-con-inner > .e-con,
body.page-id-423 .e-parent.mn-card-leistung-wrapper > .e-con > .e-con,
body.page-id-423 .e-parent.mn-card-leistung-wrapper > .e-con > .e-con-inner > .e-con,
body.page-id-427 .e-parent.mn-card-leistung-wrapper > .e-con > .e-con,
body.page-id-427 .e-parent.mn-card-leistung-wrapper > .e-con > .e-con-inner > .e-con,
body.page-id-486 .e-parent.mn-card-leistung-wrapper > .e-con > .e-con,
body.page-id-486 .e-parent.mn-card-leistung-wrapper > .e-con > .e-con-inner > .e-con,
body.page-id-126 .e-parent > .e-con > .e-con,
body.page-id-127 .e-parent > .e-con > .e-con,
/* Über-mich: "Wie ich arbeite" Kacheln */
body.page-id-17 .mn-how-step,
body.page-id-17 .e-parent.mn-card-leistung-wrapper > .e-con > .e-con,
body.page-id-17 .e-parent.mn-card-leistung-wrapper > .e-con > .e-con-inner > .e-con {
  background: transparent !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: none !important;
}

/* ============================================
   9. Kontakt-Formular: weiße Hintergrund-Box entfernen
   ============================================ */
body.page-id-18 .elementor .elementor-form,
body.page-id-18 .elementor .elementor-widget-form,
body.page-id-18 .elementor .e-con:has(.elementor-form),
body.page-id-18 .elementor .e-con:has(form),
body.page-id-18 .elementor .mn-cta-form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ============================================
   10. CTA "Kein Verkaufsgespräch" — weiße Schrift
   auf blauem Hintergrund (alle mn-cta-badge-Varianten)
   ============================================ */
html body .mn-cta.mn-accent,
html body .e-parent.mn-cta[class*="accent"],
html body .e-parent[class*="dark"],
html body .e-parent[style*="background:#4b4efc"],
html body .e-parent[style*="background-color:#4b4efc"] {
  color: #ffffff !important;
}
html body .mn-cta.mn-accent h1,
html body .mn-cta.mn-accent h2,
html body .mn-cta.mn-accent h3,
html body .mn-cta.mn-accent h4,
html body .mn-cta.mn-accent .elementor-heading-title,
html body .mn-cta.mn-accent p,
html body .mn-cta.mn-accent .elementor-widget-text-editor,
html body .mn-cta.mn-accent .mn-cta-text {
  color: #ffffff !important;
}
/* Spezifisch für die "Kein Verkaufsgespräch"-Sektion (Kontakt-Seite) */
body.page-id-18 .e-parent.mn-cta h1,
body.page-id-18 .e-parent.mn-cta h2,
body.page-id-18 .e-parent.mn-cta h3,
body.page-id-18 .e-parent.mn-cta .elementor-heading-title,
body.page-id-18 .e-parent.mn-cta p {
  color: #ffffff !important;
}

/* ============================================
   11. Portfolio-Filter Mobile: verbesserte Scroll-Hint
   ============================================ */
@media (max-width: 767px) {
  html body.page-id-16 .mn-portfolio-filter,
  html body.page-id-16 .mn-filter,
  html body.page-id-16 [class*="filter"] .elementor-widget-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    padding-bottom: 8px !important;
    position: relative !important;
  }
  html body.page-id-16 .mn-portfolio-filter > * {
    flex-shrink: 0 !important;
  }
}

/* ============================================
   12. Section-Padding Verstärkung (Specificity-Bump)
   ============================================ */
@media (max-width: 767px) {
  html body.elementor-page .elementor .e-con.e-parent {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  html body.elementor-page .elementor .e-parent .e-con:not(.mn-hero *):not(.mn-card-leistung-wrapper *):not(.mn-card-wrapper *) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ============================================
   13. "Dein 360°-Partner" + "Noch unsicher" Abstände
   ============================================ */
@media (max-width: 767px) {
  html body .mn-lead,
  html body .mn-trust,
  html body .mn-conv-vis,
  html body .mn-cost-vis,
  html body .mn-local-vis {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }
}

/* ============================================
   14. Case-Study "Was X besonders macht" Kacheln
   (inrosa ir_b1-3, zukunftssicher auch ph_b*, wg_b*, sh_b*)
   ============================================ */
html body.page-id-415 .elementor-element.elementor-element-ir_b1,
html body.page-id-415 .elementor-element.elementor-element-ir_b2,
html body.page-id-415 .elementor-element.elementor-element-ir_b3,
html body.page-id-407 .elementor-element.elementor-element-ph_b1,
html body.page-id-407 .elementor-element.elementor-element-ph_b2,
html body.page-id-407 .elementor-element.elementor-element-ph_b3,
html body.page-id-419 .elementor-element.elementor-element-wg_b1,
html body.page-id-419 .elementor-element.elementor-element-wg_b2,
html body.page-id-419 .elementor-element.elementor-element-wg_b3,
html body.page-id-437 .elementor-element.elementor-element-sh_b1,
html body.page-id-437 .elementor-element.elementor-element-sh_b2,
html body.page-id-437 .elementor-element.elementor-element-sh_b3,
/* Generisch: jede Case-Study "besonders macht"-Row: direct children der *_bes_row */
html body [class*="elementor-element-"][class*="_bes_row"] > .e-con.e-child {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
}

/* ============================================
   SECTION 15 (2026-04-23) - Startseite-specific fixes
   ============================================ */

/* 15a. Typewriter-Cursor auf Mobile komplett ausblenden */
@media (max-width: 767px) {
  html body .mn-typewriter-wrap::after,
  html body .mn-typewriter::after {
    content: '' !important;
    display: none !important;
  }
}

/* 15b. Custom mn-section-wrapper: horizontales Padding nullen */
@media (max-width: 767px) {
  html body .mn-why,
  html body .mn-how,
  html body .mn-about,
  html body .mn-testi,
  html body .mn-faq,
  html body .mn-cta,
  html body .mn-how-inner,
  html body .mn-about-inner,
  html body .mn-testi-inner,
  html body .mn-why-inner,
  html body .mn-faq-inner,
  html body .mn-cta-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Vertikales Padding stark reduzieren auf Mobile */
  html body .mn-why,
  html body .mn-how,
  html body .mn-about,
  html body .mn-testi,
  html body .mn-faq {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  html body .mn-cta {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* 15c. Checkmarks knalliger machen (Brand-Blau + etwas fetter) */
html body .mn-trust-item::before,
html body .mn-check-item::before,
html body .mn-checkmark {
  color: #4b4efc !important;
  font-weight: 700 !important;
  font-size: 1.1em !important;
  display: inline-block !important;
  margin-right: 10px !important;
}

/* 15d. Headlines in Section-Content auf Mobile full-width (kein center-margin-limit) */
@media (max-width: 767px) {
  html body .mn-why-head,
  html body .mn-how-head,
  html body .mn-testi-head,
  html body .mn-faq-head,
  html body .mn-about-text,
  html body .mn-cta-inner,
  html body .mn-cta-text {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* 15e. Portfolio-Card auf Startseite (echte Websites): Inner-Text bekommt Padding */
@media (max-width: 767px) {
  /* Die Portfolio-Card auf Startseite/Projekte nutzt mn-proj-card struktur */
  html body .mn-proj-card {
    padding: 0 !important;
    overflow: hidden !important;
  }
  html body .mn-proj-card .mn-proj-img-wrap,
  html body .mn-proj-card > img:first-child {
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Text-Content inside the card needs horizontal padding */
  html body .mn-proj-card .mn-proj-tags,
  html body .mn-proj-card > h3,
  html body .mn-proj-card > p,
  html body .mn-proj-card > .mn-proj-meta,
  html body .mn-proj-card > .mn-proj-text,
  html body .mn-proj-card > a {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* 15f. .mn-about-visual (Bild-Container) full-width auf Mobile */
@media (max-width: 767px) {
  html body .mn-about-visual,
  html body .mn-about-photo {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* 15g. Testimonial-Card Mobile: volle Breite nutzen */
@media (max-width: 767px) {
  html body .mn-testi-card,
  html body .mn-testi-grid,
  html body .mn-testi-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* 15h. Step-Cards (.mn-how-step): Padding symmetrisch, volle Breite */
@media (max-width: 767px) {
  html body .mn-how-grid,
  html body .mn-how-step {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ============================================
   SECTION 16 (2026-04-23) - Asymmetrische Margins + Proj-Card Inner-Padding
   ============================================ */

/* 16a. Leistungen-Wrapper Kinder: asymmetrische Margins nullen */
@media (max-width: 767px) {
  html body .mn-card-leistung-wrapper > .e-con,
  html body .mn-card-leistung-wrapper > .e-con > .e-con,
  html body .mn-card-leistung-wrapper > .e-con > .e-con-inner > .e-con,
  html body .mn-card-wrapper > .e-con,
  html body .mn-card-wrapper > .e-con > .e-con,
  html body .e-parent > .e-con.e-child,
  html body .e-parent > .e-con > .e-con-inner > .e-con.e-child {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Widget-level: horizontale Margins auf Widgets nullen */
  html body .e-parent .elementor-widget {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* 16b. Proj-Card Inner-Padding (Case-Study-Cards auf Startseite/Projekte) */
.mn-proj-card {
  padding: 0 !important;
  overflow: hidden !important;
}
/* Image Wrapper edge-to-edge */
.mn-proj-card .mn-proj-img-wrap,
.mn-proj-card > .elementor-widget-image,
.mn-proj-card > div:first-child img,
.mn-proj-card .e-con:first-child,
.mn-proj-card .e-con:first-child .elementor-widget-image,
.mn-proj-card .e-con:first-child img {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
/* Text-Widgets inside card: 20 px horizontales Padding via Descendant-Selector */
.mn-proj-card .elementor-widget-heading,
.mn-proj-card .elementor-widget-text-editor,
.mn-proj-card .elementor-widget-html:not(.mn-proj-img-wrap-widget):not(:has(img)),
.mn-proj-card .elementor-widget-button,
.mn-proj-card .elementor-widget-divider,
.mn-proj-card .mn-proj-tags {
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}
/* Alternative: zweite-Ebene e-con (typisch 'text container') bekommt Padding wenn es KEIN Bild enthält */
.mn-proj-card > .e-con:not(:has(> img)):not(:first-child),
.mn-proj-card > .e-con-inner > .e-con:not(:has(> img)):not(:first-child) {
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-bottom: 20px !important;
}

/* 16c. mn-story Sektion kann auch solche Cards haben: gleiche Regel */
html body .mn-story .mn-proj-card,
html body .e-parent.mn-story .mn-proj-card {
  padding: 0 !important;
}

/* 16d. H2/Heading in Leistungen zentriert aber volle Breite des Inhalts-Containers */
@media (max-width: 767px) {
  html body .mn-card-leistung-wrapper .elementor-widget-heading,
  html body .mn-card-leistung-wrapper .elementor-widget-heading .elementor-heading-title,
  html body .mn-card-leistung-wrapper .elementor-widget-text-editor {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================
   SECTION 17 (2026-04-23) - Case-Study-Cards centering + Category spacing + FAQ centering
   ============================================ */

/* 17a. Case-Study-Cards + Container mittig auf Mobile, volle Breite nutzen */
@media (max-width: 767px) {
  html body .mn-story > .e-con,
  html body .mn-story > .e-con > .e-con-inner,
  html body .mn-story > .e-con > .e-con-inner > .e-con,
  html body .mn-story > .e-con > .e-con {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: stretch !important;
  }
  html body .mn-proj-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Auch der direkte Container (e-child) der Card soll full-width sein */
  html body .mn-story .e-con.e-child:has(.mn-proj-card),
  html body .mn-story .e-con.e-child:has(> .mn-proj-card) {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
  }
}

/* 17b. Abstand zwischen Bild und erster Text-Zeile (MEDIZIN & BEAUTY etc.) erhöhen */
@media (max-width: 767px) {
  /* Der erste Heading-Widget nach dem Bild im mn-proj-card bekommt Top-Margin */
  html body .mn-proj-card .e-con:not(:first-child) .elementor-widget-heading:first-child,
  html body .mn-proj-card .e-con-inner:not(:first-child) > .e-con:first-child > .elementor-widget-heading:first-child,
  html body .mn-proj-card > .e-con:nth-child(2) > *:first-child,
  html body .mn-proj-card > .e-con-inner > .e-con:nth-child(2) > *:first-child {
    margin-top: 28px !important;
    padding-top: 0 !important;
  }
  /* Konkreter: das Text-Container-Widget 5f51y9q bekommt padding-top */
  html body .mn-proj-card .elementor-element-5f51y9q,
  html body .mn-proj-card .e-con.e-child:not(:has(img)):not(:has(.elementor-widget-image)) {
    padding-top: 20px !important;
  }
}

/* 17c. FAQ Headline + Content zentrieren auf Mobile */
@media (max-width: 767px) {
  html body .mn-faq,
  html body .mn-faq-inner,
  html body .mn-faq-head,
  html body .mn-faq-head *,
  html body .mn-faq .mn-h2,
  html body .mn-faq .mn-lead,
  html body .mn-faq-head .mn-kicker,
  html body .mn-faq-head p {
    text-align: center !important;
  }
  /* Kicker-Label oberhalb der FAQ-H2 auch zentriert */
  html body .mn-faq .mn-label,
  html body .mn-faq-head .mn-label {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    text-align: center !important;
  }
}

/* ============================================
   SECTION 18 (2026-04-23) - Button-BP + FAQ-Q&A left + Testi-Head center
   ============================================ */

/* 18a. Case-Study-Card: Padding-Bottom unter dem Button
       (Specificity-Bump: schlägt .e-parent.e-con .e-con.e-child aus 01-tokens) */
@media (max-width: 767px) {
  html body.elementor-page .elementor .e-parent.e-con .mn-proj-card.e-child,
  html body.elementor-page .elementor .e-parent.mn-story .mn-proj-card.e-child,
  html body .elementor .e-parent.e-con .mn-proj-card.e-con.e-child,
  html body .elementor .e-parent.mn-story.e-con .mn-proj-card.e-con.e-child {
    padding: 0 0 24px 0 !important;
  }
}

/* 18b. FAQ Q&A Items links-align (nur Header zentriert bleibt) */
@media (max-width: 767px) {
  html body .mn-faq-item,
  html body .mn-faq-q,
  html body .mn-faq-a,
  html body .mn-faq-a-inner,
  html body .mn-faq-item *:not(.mn-faq-ico),
  html body .mn-faq-item p,
  html body .mn-faq-item span,
  html body .mn-faq-item div {
    text-align: left !important;
  }
}

/* 18c. Testimonials Head (Kundenstimmen + Das sagen meine Kunden) zentriert */
@media (max-width: 767px) {
  html body .mn-testi-head,
  html body .mn-testi-head *,
  html body .mn-testi .mn-label,
  html body .mn-testi .mn-h2,
  html body .mn-testi-head .mn-label,
  html body .mn-testi-head .mn-h2 {
    text-align: center !important;
  }
  html body .mn-testi-head .mn-label {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
}

/* 18d. CROSS-PAGE: Pauschale Section-Headline-Zentrierung
   auf allen Seiten (not just Startseite) für konsistente Abstände */
@media (max-width: 767px) {
  /* Jede mn-* Section-Headline + Label zentriert */
  html body .mn-why-head,
  html body .mn-why-head *,
  html body .mn-how-head,
  html body .mn-how-head *,
  html body .mn-seofs-kicker,
  html body .mn-seofs-lead,
  html body .mn-proj-head,
  html body .mn-proj-head *,
  html body .mn-portfolio-head,
  html body .mn-portfolio-head * {
    text-align: center !important;
  }
}

/* ============================================
   SECTION 19 (2026-04-23) - Testi-Head center fix + Pricing-Card padding
   ============================================ */

/* 19a. Testi-Head flex-container: center alignment */
@media (max-width: 767px) {
  html body .mn-testi-head,
  html body .mn-why-head,
  html body .mn-how-head,
  html body .mn-faq-head {
    align-items: center !important;
    justify-content: center !important;
  }
  html body .mn-testi-head > *,
  html body .mn-why-head > *,
  html body .mn-how-head > *,
  html body .mn-faq-head > * {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  /* About-Text Head analog */
  html body .mn-about-text {
    text-align: left !important;
  }
  html body .mn-about-text .mn-label,
  html body .mn-about-text .mn-h2 {
    text-align: left !important;
  }
}

/* 19b. Pricing-Cards: 24px internal padding + Header-Widgets zentriert */
@media (max-width: 767px) {
  /* Identifiziere Pricing-Card-Wrapper über Klassennamen-Prefix */
  html body .mn-card-leistung-wrapper > .e-con > .e-con-inner > .e-con.e-child[class*="-wa"],
  html body .mn-card-leistung-wrapper > .e-con > .e-con.e-child[class*="-wa"],
  html body .mn-card-leistung-wrapper > .e-con > .e-con-inner > .e-con.e-child[class*="-ph"],
  html body .mn-card-leistung-wrapper > .e-con > .e-con.e-child[class*="-ph"],
  html body .mn-card-leistung-wrapper > .e-con > .e-con-inner > .e-con.e-child[class*="-kt"],
  html body .mn-card-leistung-wrapper > .e-con > .e-con.e-child[class*="-kt"],
  html body .mn-card-leistung-wrapper > .e-con > .e-con-inner > .e-con.e-child[class*="-le"],
  html body .mn-card-leistung-wrapper > .e-con > .e-con.e-child[class*="-le"],
  html body .mn-card-leistung-wrapper > .e-con > .e-con-inner > .e-con.e-child[class*="-paket"],
  html body .mn-card-leistung-wrapper > .e-con > .e-con.e-child[class*="-paket"] {
    padding: 28px 24px !important;
  }
  /* Erste 4 Widgets (Icon, Label, Price, Subtitle) zentriert */
  html body .mn-card-leistung-wrapper > .e-con.e-child[class*="-wa"] > .elementor-widget:nth-child(-n+4),
  html body .mn-card-leistung-wrapper > .e-con.e-child[class*="-ph"] > .elementor-widget:nth-child(-n+4),
  html body .mn-card-leistung-wrapper > .e-con.e-child[class*="-le"] > .elementor-widget:nth-child(-n+4),
  html body .mn-card-leistung-wrapper > .e-con.e-child[class*="-paket"] > .elementor-widget:nth-child(-n+4),
  html body .mn-card-leistung-wrapper > .e-con.e-child[class*="-wa"] > .elementor-widget:nth-child(-n+4) *,
  html body .mn-card-leistung-wrapper > .e-con.e-child[class*="-ph"] > .elementor-widget:nth-child(-n+4) *,
  html body .mn-card-leistung-wrapper > .e-con.e-child[class*="-le"] > .elementor-widget:nth-child(-n+4) * {
    text-align: center !important;
  }
  /* Checkmark-Liste: mehr Left-Padding (falls keine Einrückung durch padding schon) */
  html body .mn-card-leistung-wrapper ul,
  html body .mn-card-leistung-wrapper ol,
  html body .mn-card-leistung-wrapper .elementor-icon-list-items {
    padding-left: 0 !important;
  }
  /* Button am Ende auch zentrieren */
  html body .mn-card-leistung-wrapper .elementor-widget-button {
    text-align: center !important;
  }
  html body .mn-card-leistung-wrapper .elementor-widget-button .elementor-button {
    margin: 0 auto !important;
    display: inline-flex !important;
  }
}

/* 19c. Pauschal: Alle Kacheln mit BG bekommen 24px inner padding auf Mobile */
@media (max-width: 767px) {
  /* Jede .e-con.e-child die aussieht wie eine Card (hat Background ggf. via Inline-Style) */
  html body .elementor .e-parent .e-con.e-child[class*="-card"],
  html body .elementor .e-parent .e-con.e-child[class*="-box"],
  html body .elementor .e-parent .e-con.e-child[class*="-tile"] {
    padding: 24px !important;
  }
}

/* ============================================
   SECTION 20 (2026-04-23) - Pricing-Card via data-settings + Testi-Head REAL center
   ============================================ */

/* 20a. Pricing-Cards identifiziert über data-settings mit background
       Specificity-Bump: schlägt .e-parent.e-con .e-con.e-child aus 01-tokens */
@media (max-width: 767px) {
  html body.elementor-page .elementor .e-parent.e-con .e-con.e-child[data-settings*="background"],
  html body.elementor-page .elementor .e-parent.e-con .e-con.e-parent[data-settings*="background"]:not(.mn-hero):not(.mn-cta),
  html body .elementor .e-parent.e-con .e-con.e-child.e-con-full[data-settings*="background"] {
    padding: 28px 24px !important;
  }
  /* Erste 4 Kinder zentriert (Icon, Label, Price, Subtitle) */
  html body .elementor .e-con.e-child[data-settings*="background"] > .elementor-widget:nth-child(-n+4),
  html body .elementor .e-con.e-child[data-settings*="background"] > .elementor-widget:nth-child(-n+4) * {
    text-align: center !important;
  }
  /* Button zentriert im Pricing-Card */
  html body .elementor .e-con.e-child[data-settings*="background"] .elementor-widget-button {
    text-align: center !important;
  }
  html body .elementor .e-con.e-child[data-settings*="background"] .elementor-widget-button .elementor-button {
    margin: 0 auto !important;
    display: inline-flex !important;
  }
  /* Checkmark-Liste links-bündig mit sanfter Einrückung durch das Card-Padding */
  html body .elementor .e-con.e-child[data-settings*="background"] ul,
  html body .elementor .e-con.e-child[data-settings*="background"] ol {
    padding-left: 0 !important;
    list-style-position: inside !important;
  }
}

/* 20b. Testi-Head + mn-head Container ECHT zentrieren (flex align) */
@media (max-width: 767px) {
  /* Wenn Container flex ist, müssen align+justify gesetzt werden, nicht nur text-align */
  html body .mn-testi-head,
  html body .mn-why-head,
  html body .mn-how-head,
  html body .mn-faq-head,
  html body .mn-seofs-inner,
  html body .mn-cta-inner,
  html body .mn-cta-text {
    align-items: center !important;
    justify-content: center !important;
  }
  /* Direkte Kinder sollen volle Breite haben + text-align: center */
  html body .mn-testi-head > *,
  html body .mn-why-head > *,
  html body .mn-how-head > *,
  html body .mn-faq-head > *,
  html body .mn-cta-inner > *:not(.elementor-widget-button),
  html body .mn-cta-text > * {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
}

/* ============================================
   SECTION 21 (2026-04-23) - Pricing-Cards LEFT-align (NUR Pricing-Seiten)
   Service-Cards bleiben center (aus Section 20)
   ============================================ */
@media (max-width: 767px) {
  /* Pricing-Cards: WordPress-Wartung (28), Leistungen (15), LP Webdesign Pakete (27) */
  html body.page-id-28 .elementor .e-parent.e-con .e-con.e-child[data-settings*="background"],
  html body.page-id-28 .elementor .e-parent.e-con .e-con.e-child[data-settings*="background"] *,
  html body.page-id-28 .elementor .e-parent.e-con .e-con.e-child[data-settings*="background"] .elementor-widget,
  html body.page-id-28 .elementor .e-parent.e-con .e-con.e-child[data-settings*="background"] .elementor-widget *,
  html body.page-id-28 .elementor .e-parent.e-con .e-con.e-child[data-settings*="background"] .elementor-heading-title,
  html body.page-id-15 .elementor .e-parent.e-con .e-con.e-child[data-settings*="background"],
  html body.page-id-15 .elementor .e-parent.e-con .e-con.e-child[data-settings*="background"] *,
  html body .elementor .e-con.e-child[class*="pakete"],
  html body .elementor .e-con.e-child[class*="pakete"] *,
  html body .elementor .e-con.e-child[class*="-price"],
  html body .elementor .e-con.e-child[class*="-price"] *,
  html body .elementor .e-con.e-child[class*="-plan"],
  html body .elementor .e-con.e-child[class*="-plan"] * {
    text-align: left !important;
  }
  /* Button bleibt centered in Pricing-Cards */
  html body.page-id-28 .elementor .e-parent.e-con .e-con.e-child[data-settings*="background"] .elementor-widget-button,
  html body.page-id-28 .elementor .e-parent.e-con .e-con.e-child[data-settings*="background"] .elementor-widget-button *,
  html body.page-id-15 .elementor .e-parent.e-con .e-con.e-child[data-settings*="background"] .elementor-widget-button,
  html body.page-id-15 .elementor .e-parent.e-con .e-con.e-child[data-settings*="background"] .elementor-widget-button * {
    text-align: center !important;
  }
  html body.page-id-28 .elementor .e-parent.e-con .e-con.e-child[data-settings*="background"] .elementor-widget-button .elementor-button,
  html body.page-id-15 .elementor .e-parent.e-con .e-con.e-child[data-settings*="background"] .elementor-widget-button .elementor-button {
    margin: 0 auto !important;
  }
}

/* ============================================
   SECTION 22 (2026-04-23) - Force Horizontal Centering (Cards + Images + Media)
   ============================================ */
@media (max-width: 767px) {
  /* Hero-Image + alle Custom-Photo-Images zentriert (margin: 0 auto) */
  html body .e-parent.mn-hero img,
  html body .e-parent.mn-hero .mn-photo,
  html body .e-parent.mn-hero .mn-photo-wrap,
  html body .mn-about-visual,
  html body .mn-about-visual img,
  html body .mn-about-photo,
  html body .mn-about-photo img,
  html body .mn-story img,
  html body .mn-story .mn-photo,
  html body .mn-story .mn-photo-wrap,
  html body .mn-proj-card img,
  html body .mn-proj-card .mn-proj-img-wrap,
  html body .e-parent.mn-hero .mn-photo-wrap img {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
  /* Cards + Wrapper zentriert innerhalb ihres Parents */
  html body .mn-proj-card,
  html body .mn-testi-card,
  html body .mn-how-step,
  html body .mn-why-card,
  html body .mn-faq-item,
  html body .elementor .e-con.e-child[data-settings*="background"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Full-width Container (Wrapper) sollen die volle Body-Breite nutzen */
  html body .elementor .e-parent,
  html body .elementor .e-parent.e-con,
  html body section[class*="mn-"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Story-Container auch centered */
  html body .mn-story,
  html body .mn-story > .e-con,
  html body .mn-story > .e-con > .e-con-inner,
  html body .mn-story > .e-con > .e-con > .e-con-inner {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* About-Visual Container explizit zentrieren */
  html body .mn-about-inner,
  html body .mn-about-text,
  html body .mn-about-visual {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ============================================
   SECTION 23 (2026-04-23) - Force 100% width on row/grid-containers (stop fixed px)
   ============================================ */
@media (max-width: 767px) {
  /* Alle e-con e-child die feste Pixel-Width gesetzt haben: auf 100% zwingen */
  html body.elementor-page .elementor .e-parent.e-con .e-con.e-child,
  html body.elementor-page .elementor .e-parent.e-con .e-con.e-child.e-flex,
  html body .elementor .e-parent .e-con.e-child {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Row-Grid-Container die cards halten: zentriert + full width */
  html body .elementor [class*="_row"].e-con,
  html body .elementor [class*="_grid"].e-con,
  html body .elementor [class*="_list"].e-con,
  html body .elementor .lc_row,
  html body .elementor .ph_row,
  html body .elementor .wa_row,
  html body .elementor .pb_row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Flex-row grids auf Mobile zu column umstellen */
  html body .elementor .e-con.e-flex[class*="_row"],
  html body .elementor .e-con.e-flex[class*="_grid"] {
    flex-direction: column !important;
  }
  /* Bilder/Icons in Service-Cards zentrieren via margin: 0 auto */
  html body .elementor .e-con.e-child[data-settings*="background"] img,
  html body .elementor .e-con.e-child[data-settings*="background"] .elementor-icon,
  html body .elementor .e-con.e-child[data-settings*="background"] .elementor-widget-image img,
  html body .elementor .e-con.e-child[data-settings*="background"] .elementor-widget-icon svg {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
  /* Wartung-Pricing: Icons LEFT (passt zum left-align) */
  html body.page-id-28 .elementor .e-con.e-child[data-settings*="background"] img,
  html body.page-id-28 .elementor .e-con.e-child[data-settings*="background"] .elementor-icon,
  html body.page-id-15 .elementor .e-con.e-child[data-settings*="background"] img,
  html body.page-id-15 .elementor .e-con.e-child[data-settings*="background"] .elementor-icon {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* === Logo & Print (page 448) Hero-Collage Mobile-Hide === */
@media (max-width: 767px) {
  /* Hide the floating card/logo collage in the hero — it overlaps headline + body on small screens */
  body.page-id-448 .mn-lp-collage {
    display: none !important;
  }
  /* The container that wrapped the collage can also collapse so the text uses full width */
  body.page-id-448 #prae66d867 {
    display: none !important;
  }
}
/* === /Logo & Print === */