/* MN Mobile UX — Desktop-Layout (ab 768px)
 *
 * 1. Hero: Textspalte vertikal mittig zum Bild statt oben klebend.
 *    Auf Seiten mit kurzer Textspalte (Leistungsseiten) entstand sonst ein
 *    grosser Krater unter den Buttons. Auf der Startseite faellt es nicht auf,
 *    weil die Haekchen-Liste die Spalte fuellt.
 *
 * 2. Content-Breite deckeln. Das Elementor-Kit steht auf 1200px, die Sections
 *    sind aber als "Full Width" gebaut und ignorieren den Wert — auf breiten
 *    Monitoren driften Text und Bild weit auseinander. Die Section selbst
 *    bleibt full-bleed (Hintergruende durchgehend), nur der Inhalt wird
 *    zentriert begrenzt.
 *
 * Angelegt 2026-07-16. Rollback: diese Datei loeschen + Eintrag in
 * mn-mobile-ux.php entfernen.
 */

:root {
  --mn-content-max: 1280px;
}

@media (min-width: 768px) {

  /* 1. Textspalte = Container MIT Ueberschrift, OHNE Bild.
     Damit ausgeschlossen: die Spalten-Row (enthaelt h1 und img) und die
     Button-Zeile (enthaelt kein h1). */
  html body .elementor .e-parent.mn-hero .e-con:has(h1):not(:has(img)) {
    justify-content: center;
  }

  /* 2. Direkte Kinder der Top-Level-Sections zentriert begrenzen. */
  html body.elementor-page .elementor .e-parent.e-con > .e-con {
    max-width: var(--mn-content-max);
    margin-inline: auto;
  }
}

/* Opt-in: Zwei-Spalten-Section vertikal zentrieren.
   Klasse .mn-vcenter auf die Section (e-parent) setzen. Zentriert die
   Spalten der direkten Row zueinander, statt sie auf gleiche Hoehe zu
   strecken — gegen den Krater unter kurzen Textspalten neben hohen Bildern.
   Nur Desktop; mobil stapeln die Spalten ohnehin. */
@media (min-width: 768px) {
  html body .elementor .e-parent.mn-vcenter > .e-con {
    align-items: center;
  }
}