/* ==========================================================================
   MM · SEITENGERÜST
   --------------------------------------------------------------------------
   Hello Elementor stellt über jeden Inhalt einen eigenen h1 mit dem Seiten-
   namen: <div class="page-header"><h1 class="entry-title">Home</h1></div>.

   Das ist doppelt gemoppelt — jede Seite bringt ihre Überschrift im Inhalt
   selbst mit, in der richtigen Schrift. Der Theme-Titel steht in der
   System-Schrift darüber und taucht nur auf Seiten ohne eigene Elementor-
   Vorlage auf. Genau das erzeugt den Eindruck, mal steht der Seitenname da,
   mal nicht.

   Elementor hat dafür keinen globalen Schalter, nur einen pro Seite
   (Seiteneinstellungen → „Titel ausblenden"). Deshalb steht die Regel hier —
   einmal für die ganze Seite.
   ========================================================================== */

.page-header{ display:none; }

/* --------------------------------------------------------------------------
   Ausnahme: „Mein Bereich" und „Mein Konto" kommen aus dem Plugin und haben
   keine eigene Überschrift im Inhalt. Dort bleibt der Titel stehen — sonst
   begänne die Seite unvermittelt mit der Reiterleiste.
   -------------------------------------------------------------------------- */
body:has(.mms-dashboard-wrap) .page-header,
body:has(.mms-account-wrap) .page-header{ display:block; }

body:has(.mms-dashboard-wrap) .page-header .entry-title,
body:has(.mms-account-wrap) .page-header .entry-title{
  font-family:var(--mm-font-sans);
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--mm-ink);
  padding-inline:0;
  margin-bottom:var(--mm-s-s);
}

/* ==========================================================================
   Knoepfe auf einer Ebene — Studio, Workshops, 1:1, Reads
   --------------------------------------------------------------------------
   Bis zum 19.08. stand das im Snippet "Studio/Workshops/1:1/Reads: Buttons
   auf einer Ebene ausrichten".

   Die vier Karten dieser Seiten haben unterschiedlich lange Texte. Ohne
   Zutun steht der Knopf jeweils direkt unter dem letzten Wort - die Reihe
   wirkt dadurch unruhig. Die Spalte wird zur Flex-Spalte, der Knopf bekommt
   margin-top:auto und wird damit ans untere Ende gedrueckt. Alle vier
   Knoepfe stehen so auf derselben Linie, egal wie lang der Text darueber ist.

   Die Nummern stammen aus Elementor und benennen die vier Karten-Spalten.
   ========================================================================== */

.elementor-element-96527b8,
.elementor-element-2c826b3,
.elementor-element-3a3c26c,
.elementor-element-75926d2{
  display:flex !important;
  flex-direction:column !important;
}

.elementor-element-96527b8 > .elementor-widget-button,
.elementor-element-2c826b3 > .elementor-widget-button,
.elementor-element-3a3c26c > .elementor-widget-button,
.elementor-element-75926d2 > .elementor-widget-button{
  margin-top:auto !important;
}


/* ==========================================================================
   Der alte Zweig-Bild-Block ist am 26.08. entfallen.
   Er hat das Hero-Bild am Telefon auf 95 px verkleinert und mittig
   ueber die Ueberschrift gesetzt. Ersetzt durch den Hero-Block
   am Ende dieser Datei (Variante A: Bild ueber die volle Breite).
   ========================================================================== */



/* ==========================================================================
   Die Scroll-Leiste mit Einrasten — nur auf /studioview/
   --------------------------------------------------------------------------
   Bis zum 19.08. stand das im Snippet "ScrollBar".

   Eine waagerechte Leiste, die sich wischen laesst und dabei einrastet, statt
   frei auszulaufen. Elementor bricht sie am Telefon sonst in eine Spalte um -
   deshalb flex-direction:row und flex-wrap:nowrap mit !important.

   Die Klassen .scroll-menu und .scroll-nav-wrap werden in Elementor von Hand
   vergeben und kommen nur auf dieser einen Seite vor. Die Regeln greifen
   dadurch nirgends sonst.
   ========================================================================== */

.scroll-menu{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.scroll-menu::-webkit-scrollbar{ display:none; }

/* Jedes Element bleibt in seiner Breite und rastet am linken Rand ein */
.scroll-menu > .elementor-widget,
.scroll-menu > .elementor-column,
.scroll-menu > .e-con,
.scroll-menu .menu-item,
.scroll-menu a{
  flex:0 0 auto !important;
  width:auto !important;
  max-width:none !important;
  scroll-snap-align:start;
}

/* Der Rahmen darum darf nicht abschneiden, sonst fehlen Pfeile und Schein */
.scroll-nav-wrap{ overflow:visible; position:relative; }

/* Mindestbreite, damit sich das Wischen griffig anfuehlt */
.scroll-menu > *{ min-width:90px; text-align:center; }


/* =========================================================
   Startseite - Hero auf dem Handy (Variante A)

   Auf dem Desktop stehen Textspalte (d72db2a) und Bildspalte
   (a54e007) nebeneinander. Auf dem Handy stapelte Elementor sie,
   das Bild landete klein und mittig unter dem Text.
   Hier drehen wir die Reihenfolge um, ziehen das Bild ueber die
   volle Bildschirmbreite und setzen den Text darunter.
   Nichts davon greift ab 768 px - der Desktop bleibt unberuehrt.
   ========================================================= */

@media (max-width:767px){

  /* Hero-Container: untereinander, ohne seitliche Polsterung */
  .elementor-886 .elementor-element-4b3a753 > .e-con-inner{
    flex-direction:column;
    flex-wrap:nowrap;
    gap:0;
    padding-left:0;
    padding-right:0;
  }

  /* Bildspalte zuerst und ueber die volle Breite */
  .elementor-886 .elementor-element-a54e007{
    order:-1;
    width:100vw;
    max-width:none;
    margin-left:calc(50% - 50vw);
    padding:0;
  }
  .elementor-886 .elementor-element-fde2558{ width:100%; margin:0; padding:0; }
  .elementor-886 .elementor-element-fde2558 .elementor-widget-container,
  .elementor-886 .elementor-element-fde2558 figure,
  .elementor-886 .elementor-element-fde2558 a{ display:block; width:100%; margin:0; }
  .elementor-886 .elementor-element-fde2558 img{
    display:block;
    width:100%;
    height:auto;
    max-width:none;
    aspect-ratio:1 / 1;
    object-fit:cover;
    object-position:50% 32%;
    border-radius:0;
  }

  /* Textspalte darunter, mit eigenem Innenabstand */
  .elementor-886 .elementor-element-d72db2a{
    order:1;
    width:100%;
    max-width:none;
    padding:22px 20px 28px;
    gap:14px;
  }
  .elementor-886 .elementor-element-46f7c8d,
  .elementor-886 .elementor-element-ee53121,
  .elementor-886 .elementor-element-26de834{ width:100%; margin:0; }

  /* Die beiden Abstandhalter uebernimmt hier der gap */
  .elementor-886 .elementor-element-ad79507,
  .elementor-886 .elementor-element-221f05d{ display:none; }
}


/* "Lerne uns kennen" endet mit einem eigenen Aufruf. Der
   Newsletter-Block im Footer wiederholt ihn direkt darunter nur -
   auf dieser Seite bleibt er deshalb weg. Der uebrige Footer
   (Logo, Impressum, Privacy) steht wie ueberall. */
body.page-id-3836 footer.elementor-location-footer .elementor-element-38dd29fb {
	display: none;
}