/* ==========================================================================
   MM · FORMULARFELDER
   --------------------------------------------------------------------------
   Ein Feld für die ganze Seite. Vorher waren drei Sorten im Umlauf
   (gemessen am 17.08.):

     Ziel                     56 px hoch · Radius 10 · Rahmen 1,5 · Schrift 16
     .mmst-input / .mmp-email 42 px      · Radius  3 · Rahmen 1   · Schrift 16
     .elementor-field         33 px      · Radius  2 · Rahmen 1   · Schrift 13

   Das Newsletter-Feld steht in der Fußzeile jeder Seite — es war der
   auffälligste Ausreißer.

   DAS WANDERNDE LABEL
   Die Beschriftung sitzt im Feld und wandert nach oben, sobald man
   hineinklickt oder etwas drinsteht. Dafür braucht es die Reihenfolge
   input + label im HTML. Elementor und die Check-Plugins liefern nur einen
   Platzhalter — mm-fields.js baut das Label zur Laufzeit nach.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Das Feld
   -------------------------------------------------------------------------- */
.mm-field > input,
.mm-field > textarea,
.mmst-input,
.mmp-email,
.elementor-field-textual{
  box-sizing:border-box;
  width:100%;
  min-height:var(--mm-field-h);
  padding:12px 16px;
  border:var(--mm-border) solid var(--mm-line);
  border-radius:var(--mm-r-control);
  background:var(--mm-surface);
  font-family:var(--mm-font-sans);
  /* Unter 16px zoomt iOS beim Antippen in das Feld hinein. */
  font-size:16px;
  line-height:1.3;
  color:var(--mm-ink);
  transition:border-color var(--mm-t) var(--mm-ease),
             box-shadow   var(--mm-t) var(--mm-ease);
}

/* Elementors eigene Größenklassen setzen Polster und Schrift neu */
.elementor-field-textual.elementor-size-xs,
.elementor-field-textual.elementor-size-sm,
.elementor-field-textual.elementor-size-md,
.elementor-field-textual.elementor-size-lg,
.elementor-field-textual.elementor-size-xl{
  min-height:var(--mm-field-h);
  padding:12px 16px;
  border-radius:var(--mm-r-control);
  font-size:16px;
}

.mm-field > textarea{
  min-height:120px;
  padding-top:22px;
  resize:vertical;
}

/* --------------------------------------------------------------------------
   2 · Fokus — ein Ring, kein Systemrahmen
   -------------------------------------------------------------------------- */
.mm-field > input:focus,
.mm-field > textarea:focus,
.mmst-input:focus,
.mmp-email:focus,
.elementor-field-textual:focus{
  outline:none;
  border-color:var(--mm-blue);
  box-shadow:0 0 0 4px var(--mm-blue-soft);
}

.mm-field > input[aria-invalid="true"],
.elementor-field-textual.elementor-error{
  border-color:var(--mm-danger);
}

/* --------------------------------------------------------------------------
   3 · Das wandernde Label
   -------------------------------------------------------------------------- */
.mm-field{
  position:relative;
  display:block;
  width:100%;
}

/* Platz oben schaffen, damit das Label nicht auf dem Text sitzt */
.mm-field > input,
.mm-field > textarea{
  padding-top:22px;
  padding-bottom:8px;
}

.mm-field-label{
  position:absolute;
  left:17px;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--mm-font-sans);
  font-size:16px;
  line-height:1;
  color:var(--mm-ink-45);
  pointer-events:none;
  transition:transform 160ms var(--mm-ease),
             font-size 160ms var(--mm-ease),
             color     160ms var(--mm-ease),
             letter-spacing 160ms var(--mm-ease);
}

.mm-field > textarea ~ .mm-field-label{
  top:26px;
  transform:none;
}

/* :placeholder-shown greift nur, solange nichts im Feld steht. Deshalb
   setzt mm-fields.js den Platzhalter auf ein einzelnes Leerzeichen. */
.mm-field > input:focus ~ .mm-field-label,
.mm-field > input:not(:placeholder-shown) ~ .mm-field-label,
.mm-field > textarea:focus ~ .mm-field-label,
.mm-field > textarea:not(:placeholder-shown) ~ .mm-field-label{
  transform:translateY(-152%);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--mm-blue);
}

.mm-field > textarea:focus ~ .mm-field-label,
.mm-field > textarea:not(:placeholder-shown) ~ .mm-field-label{
  transform:translateY(-14px);
}

/* Die ursprüngliche Beschriftung, aus der das Label gebaut wurde */
.mm-field-orig-hidden{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* --------------------------------------------------------------------------
   4 · Zeile aus Feld und Knopf — beide exakt gleich hoch
   -------------------------------------------------------------------------- */
.elementor-form .elementor-field-group.e-form__buttons .elementor-button{
  min-height:var(--mm-field-h);
}

@media (max-width:600px){
  /* Am Telefon untereinander statt nebeneinander — sonst wird das Feld
     schmaler als die Adresse, die hineingehört. */
  .elementor-form .elementor-form-fields-wrapper{ row-gap:12px; }
  .elementor-form .elementor-field-group{ width:100%; flex-basis:100%; max-width:100%; }
  .elementor-form .elementor-field-group .elementor-button{ width:100%; }
}


/* --------------------------------------------------------------------------
   5 · Elementor-Formulare — gleiche Spezifitaet, spaetere Position
   --------------------------------------------------------------------------
   Elementor schreibt in jede Seiten-CSS-Datei:
     .elementor-widget-form .elementor-field-group .elementor-field{
       font-size: var(--e-global-typography-text-font-size);   /* = 24px */
     }
   Das ist keine Widget-Einstellung, sondern die eingebaute Vorbelegung des
   Formular-Widgets: die Feldschrift haengt ab Werk am globalen Stil "Text".
   Fuer Fliesstext sind 24px richtig, fuer ein Eingabefeld nicht.

   Deshalb hier dieselben drei Klassen. Das Child-Theme laedt mit Prioritaet
   100, also nach den Seiten-Dateien - bei gleicher Spezifitaet gewinnt die
   spaetere Regel. Kein !important noetig.
   -------------------------------------------------------------------------- */
.elementor-widget-form .elementor-field-group .elementor-field,
.elementor-widget-form .elementor-field-group .elementor-field-textual{
  box-sizing:border-box;
  min-height:var(--mm-field-h);
  padding:22px 16px 8px;
  border:var(--mm-border) solid var(--mm-line);
  border-radius:var(--mm-r-control);
  font-family:var(--mm-font-sans);
  font-size:16px;
  line-height:1.3;
  letter-spacing:normal;
  color:var(--mm-ink);
}

.elementor-widget-form .elementor-field-group .elementor-field:focus{
  outline:none;
  border-color:var(--mm-blue);
  box-shadow:0 0 0 4px var(--mm-blue-soft);
}

/* Der Absende-Knopf steht neben dem Feld und muss exakt gleich hoch sein.
   Das !important schlaegt die Plugin-Schicht, die alle Knoepfe auf 44px
   setzt - hier gilt die Feldhoehe, nicht die Knopfhoehe. */
.elementor-form .elementor-field-type-submit .elementor-button{
  min-height:var(--mm-field-h) !important;
}