/* ==========================================================================
   MM · BUTTONS — der Zielzustand, ohne !important
   --------------------------------------------------------------------------
   Diese Datei setzt voraus, dass in den Elementor-Widgets KEINE lokalen
   Werte mehr gesetzt sind. Solange noch welche existieren, lädt zusätzlich
   mm-bridge.css und erzwingt den Standard. Nach dem Aufräumen in
   functions.php  MM_USE_BRIDGE  auf false setzen — dann gilt nur noch diese
   Datei, und der Stil-Reiter im Widget funktioniert wieder für Ausnahmen.

   DREI STANDARDS
     (ohne Klasse)  Sekundär — Kontur, füllt sich blau beim Hover. Der Normalfall.
     .mm-primary    Primär   — hellblau angedeutet. Genau einer pro Ansicht.
     .mm-quiet      Leise    — Textknopf ohne Rahmen, für Nebenwege.
   MODIFIKATOREN
     .mm-sm  klein · .mm-block volle Breite · .mm-on-dark auf dunklem Grund
     .mm-raw Notausgang — dieser Button bleibt vom Standard unberührt
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Grundform
   -------------------------------------------------------------------------- */
.elementor-button,
.ltd-blog-btn,
.mm-btn,
.mms-btn,
.mms-login-submit,
.mms-login-google-button,
.mms-pw-toggle,
.mmst-btn,
.mmp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:var(--mm-btn-h);
  padding:var(--mm-btn-pad);
  border:var(--mm-border) solid var(--mm-ink);
  border-radius:var(--mm-r-control);
  background-color:transparent;
  color:var(--mm-ink);
  font-family:var(--mm-font-sans);
  font-size:var(--mm-btn-size);
  font-weight:400;
  line-height:1.2;
  letter-spacing:var(--mm-btn-track);
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  box-shadow:0 0 0 rgba(67,119,187,0);
  transition:background-color var(--mm-t) var(--mm-ease),
             border-color     var(--mm-t) var(--mm-ease),
             color            var(--mm-t) var(--mm-ease),
             box-shadow       var(--mm-t) var(--mm-ease),
             transform        220ms       var(--mm-ease);
}

/* Elementors innere Spans bringen eigene Zeilenhöhen mit —
   ohne diese Zeile wird der Button 2 px zu hoch. */
.elementor-button .elementor-button-content-wrapper,
.elementor-button .elementor-button-text,
.elementor-button .elementor-button-icon,
.ltd-blog-btn span, .mm-btn span, .mms-btn span{
  line-height:1.2;
}

/* Elementors eigene Größenklassen setzen Padding und Schriftgröße neu */
.elementor-button.elementor-size-xs,
.elementor-button.elementor-size-sm,
.elementor-button.elementor-size-md,
.elementor-button.elementor-size-lg,
.elementor-button.elementor-size-xl{
  padding:var(--mm-btn-pad);
  font-size:var(--mm-btn-size);
  border-radius:var(--mm-r-control);
}

/* --------------------------------------------------------------------------
   2 · Zustände
   -------------------------------------------------------------------------- */
.elementor-button:hover,
.ltd-blog-btn:hover,
.mm-btn:hover,
.mms-btn:hover,
.mms-login-submit:hover,
.mms-login-google-button:hover,
.mms-pw-toggle:hover,
.mmst-btn:hover,
.mmp-btn:hover,
.elementor-button:focus,
.ltd-blog-btn:focus,
.mm-btn:focus,
.mms-btn:focus,
.mms-login-submit:focus,
.mms-login-google-button:focus,
.mms-pw-toggle:focus,
.mmst-btn:focus,
.mmp-btn:focus
{
  background-color:var(--mm-blue);
  border-color:var(--mm-blue);
  color:var(--mm-cream);
  transform:translateY(var(--mm-lift));
  box-shadow:0 6px 16px rgba(67,119,187,.28);
}

.elementor-button:active,
.ltd-blog-btn:active,
.mm-btn:active,
.mms-btn:active,
.mms-login-submit:active,
.mmst-btn:active,
.mmp-btn:active{
  transform:translateY(0) scale(.975);
  box-shadow:0 1px 3px rgba(67,119,187,.30);
  transition-duration:var(--mm-t-press);
}

/* --------------------------------------------------------------------------
   3 · Primär und Leise
   -------------------------------------------------------------------------- */
.mm-primary,
.mms-btn-primary,
.mms-login-submit{
  background-color:var(--mm-blue-soft);
  border-color:var(--mm-blue-line);
  color:var(--mm-blue);
}
.mm-primary:hover,
.mms-btn-primary:hover,
.mms-login-submit:hover{
  background-color:var(--mm-blue);
  border-color:var(--mm-blue);
  color:var(--mm-cream);
}

.mm-quiet,
.mms-btn-ghost,
.mms-pw-toggle{
  border-color:transparent;
  padding-left:16px;
  padding-right:16px;
}
.mm-quiet:hover,
.mms-btn-ghost:hover,
.mms-pw-toggle:hover{
  background-color:rgba(67,119,187,.10);
  border-color:transparent;
  color:var(--mm-blue);
  box-shadow:none;
}

/* Unwiderrufliche Aktionen behalten ihre Warnfarbe */
.mms-btn-danger{
  border-color:var(--mm-danger);
  color:var(--mm-danger);
}
.mms-btn-danger:hover{
  background-color:var(--mm-danger);
  border-color:var(--mm-danger);
  color:var(--mm-cream);
  box-shadow:0 6px 16px rgba(178,74,62,.26);
}

/* --------------------------------------------------------------------------
   4 · Modifikatoren
   -------------------------------------------------------------------------- */
.mm-sm, .mms-btn-sm{
  min-height:36px;
  padding:9px 20px;
  font-size:13px;
}
.mm-block{ display:flex; width:100%; }

.mm-on-dark, .mm-btn--dark,
.mm-dark .elementor-button, .mm-dark .mm-btn{
  border-color:var(--mm-cream);
  color:var(--mm-cream);
}
.mm-on-dark:hover, .mm-btn--dark:hover,
.mm-dark .elementor-button:hover, .mm-dark .mm-btn:hover,
.mm-on-dark:focus,
.mm-btn--dark:focus,
.mm-dark .elementor-button:focus,
.mm-dark .mm-btn:focus
{
  background-color:var(--mm-blue);
  border-color:var(--mm-blue);
  color:var(--mm-cream);
}

.elementor-button[disabled], .mm-btn[disabled], .mms-btn[disabled],
.elementor-button.mm-disabled{
  opacity:.38;
  pointer-events:none;
}

/* --------------------------------------------------------------------------
   5 · Ausnahmen — das sind keine Buttons
   -------------------------------------------------------------------------- */
/* KEIN all:revert — das setzt ein Element auf den Browser-Rohzustand
   zurueck und wirft dabei auch das Aussehen weg, das das Plugin ihm gibt.
   Das Merken-Herz wurde so zu einem eckigen Kasten mit schwarzem Rahmen.
   Die Klassen der Grundform oben treffen diese Elemente ohnehin nicht. */

/* Notausgang: nimmt genau das zurueck, was oben gesetzt wird. */
.mm-raw{
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background-color:transparent;
  font-size:inherit;
  letter-spacing:normal;
  text-transform:none;
  box-shadow:none;
}
.mm-raw:hover,
.mm-raw:active{
  background-color:transparent;
  border-color:transparent;
  color:inherit;
  transform:none;
  box-shadow:none;
}

/* Der Google-Knopf im Login behält Logo und Normalschreibung */
.mms-login-google-button{
  text-transform:none;
  letter-spacing:.01em;
  font-size:15px;
}

/* --------------------------------------------------------------------------
   6 · Mobil — lange Beschriftungen dürfen umbrechen
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  .elementor-button, .ltd-blog-btn, .mm-btn,
  .mms-btn, .mms-login-submit, .mmst-btn, .mmp-btn{
    white-space:normal;
  }
}

/* --------------------------------------------------------------------------
   7 · Der Notnagel gegen das Reset-Pink von Hello Elementor
   --------------------------------------------------------------------------
   Bis zum 19.08. stand das im Snippet "Fix: Hello-Elementor Reset-Pink auf
   nativen Buttons (site-weit)".

   DIE URSACHE
   Hello Elementors reset.css gibt jedem nativen Knopf einen pinken Rahmen
   und pinke Schrift:

     [type="button"], [type="submit"], button{
       background-color:transparent; border:1px solid #c36; color:#c36;
     }

   Ein Attribut-Selektor wiegt genau so viel wie eine einzelne Klasse
   (0,1,0). Jedes Plugin-Widget, das seinen Knopf nur mit EINER Klasse
   gestaltet, steht damit im Gleichstand - und bei Gleichstand gewinnt, was
   spaeter geladen wird. Das war reset.css.

   WARUM HIER NUR DER RAHMEN FAELLT
   Eine erste, zu pauschale Fassung hat mit hoeherer Spezifitaet gleich alles
   ueberschrieben - und damit auch die gewollte eigene Farbe jedes Widgets,
   das nur eine Klasse nutzt. Der blaue "Anmelden"-Knopf wurde dadurch weiss.
   Der Fehler war nicht behoben, nur umgefaerbt.

   Deshalb steht hier nur der eine Griff, den nachweislich kein Widget der
   Seite haben will: der Rahmen faellt weg. Farbe und Flaeche regelt jedes
   Widget selbst - fuer die Plugin-Widgets steht das in mm-bridge.css.
   -------------------------------------------------------------------------- */

/* Ausnahme fuer den Kennenlern-Pfad: dessen Antwortkacheln sind
   ausdruecklich Umriss-Knoepfe. Ohne Rahmen sehen sie aus wie Fliesstext.
   Die Ausnahme nimmt nur mmk- heraus, so wie mms-login-google-button schon
   herausgenommen ist - an bestehenden Knoepfen aendert sie nichts. */
[type="button"][type="button"]:not(.mms-login-google-button):not([class*="mmk-"]),
[type="submit"][type="submit"]:not(.mms-login-google-button):not([class*="mmk-"]){
  border:0;
}

/* Nackte Links ohne jede Klasse - etwa "jetzt ausloggen" im Kassen-Formular.
   reset.css faerbt jedes <a> pink. :not([class]) trifft nur Links, die
   ueberhaupt keine Klasse tragen; jeder normal gestaltete Link hat eine. */
a:not([class]){
  color:var(--e-global-color-primary, #4377bb);
  text-decoration:underline;
}

/* =========================================================
   Hello-Elementor-Boden neutralisieren

   Hello Elementor setzt in reset.css:
     a, button, [type=submit]        -> color:#CC3366
     button:hover, [type=submit]:hover -> background:#CC3366
   Alles, was nicht ausdruecklich gestaltet ist, faellt dorthin.
   Das ist der Grund, warum das Pink an jeder neuen Stelle
   wieder auftaucht.

   Zwei Ebenen, damit der Boden Boden bleibt:
   1. Textfarbe fuer alle Knoepfe - Hello setzt sie nur im
      Grundzustand, da kollidiert nichts.
   2. Hover-Hintergrund nur fuer Knoepfe ganz ohne Klasse.
      Alles mit eigener Klasse ist eine Komponente und
      definiert ihren Hover selbst (siehe .mm-btn oben).
   :where() zaehlt nicht in die Spezifitaet.
   Ausgenommen: die Check-Plugins (mmst-, mmc-).
   ========================================================= */

a{ color:var(--mm-blue); }

/* Boden 1 - Grundfarben. Hello setzt hier Text und Rahmen auf Pink. */
button:where(:not([class*="mmst-"]):not([class*="mmc-"])),
[type="button"]:where(:not([class*="mmst-"]):not([class*="mmc-"])),
[type="submit"]:where(:not([class*="mmst-"]):not([class*="mmc-"])),
[type="reset"]:where(:not([class*="mmst-"]):not([class*="mmc-"])){
  color:var(--mm-ink);
  border-color:var(--mm-line);
}

/* Boden 2 - Hover fuer Knoepfe, die zwar eine Klasse tragen, aber
   keinen eigenen Hover definieren. Kein Pink, keine Fuellung. */
button:where(:not([class*="mmst-"]):not([class*="mmc-"])):hover,
[type="button"]:where(:not([class*="mmst-"]):not([class*="mmc-"])):hover,
[type="submit"]:where(:not([class*="mmst-"]):not([class*="mmc-"])):hover,
[type="reset"]:where(:not([class*="mmst-"]):not([class*="mmc-"])):hover{
  background-color:transparent;
  color:var(--mm-blue);
  border-color:var(--mm-blue);
}

/* Boden 3 - echte Standardknoepfe ohne jede Klasse bekommen die
   volle Designsystem-Logik: blaue Fuellung, cremefarbener Text, Lift. */
button:where(:not([class])):hover,
[type="button"]:where(:not([class])):hover,
[type="submit"]:where(:not([class])):hover,
[type="reset"]:where(:not([class])):hover,
button:where(:not([class])):focus,
[type="button"]:where(:not([class])):focus,
[type="submit"]:where(:not([class])):focus,
[type="reset"]:where(:not([class])):focus{
  background-color:var(--mm-blue);
  color:var(--mm-cream);
  border-color:var(--mm-blue);
  transform:translateY(var(--mm-lift, -2px));
}

/* Boden 4 - der eigentliche Grund fuer das wiederkehrende Pink.
   reset.css setzt button:focus{background:#CC3366}. Das ist (0,1,1)
   und damit staerker als eine einfache Komponentenklasse (0,1,0).
   Nach einem Mausklick bleibt der Fokus stehen - der Knopf wird
   pink, sobald die Maus weg ist. Genau das hat David gesehen.
   Wir kontern auf derselben Ebene (0,1,1), spaeter geladen.
   Ausgeklammert ist alles, was eine eigene Komponentenklasse hat
   (mm..., elementor..., pmpro..., wp-...) - fuer die steht der
   Fokus weiter unten bzw. im jeweiligen Plugin. */
button:where(:not([class*="mm"]):not([class*="elementor"]):not([class*="pmpro"]):not([class*="wp-"])):focus,
[type="button"]:where(:not([class*="mm"]):not([class*="elementor"]):not([class*="pmpro"]):not([class*="wp-"])):focus,
[type="submit"]:where(:not([class*="mm"]):not([class*="elementor"]):not([class*="pmpro"]):not([class*="wp-"])):focus,
[type="reset"]:where(:not([class*="mm"]):not([class*="elementor"]):not([class*="pmpro"]):not([class*="wp-"])):focus{
  background-color:transparent;
  color:var(--mm-ink);
  border-color:var(--mm-line);
}

@media (hover:none),(pointer:coarse){
  button:where(:not([class*="mmst-"]):not([class*="mmc-"])):hover,
  [type="button"]:where(:not([class*="mmst-"]):not([class*="mmc-"])):hover,
  [type="submit"]:where(:not([class*="mmst-"]):not([class*="mmc-"])):hover,
  [type="reset"]:where(:not([class*="mmst-"]):not([class*="mmc-"])):hover{
    background-color:transparent;
    color:var(--mm-ink);
    border-color:var(--mm-line);
    transform:none;
  }
}

/* =========================================================
   Elementor-Decke neutralisieren

   Elementor schreibt in JEDE Seiten-CSS seinen Widget-Standard:
     .elementor-widget-button .elementor-button{
        background-color:var(--e-global-color-accent) }
   Das ist Orange und hat die Spezifitaet (0,2,0) - hoeher als
   unsere Grundform oben (0,1,0). Bisher war das unsichtbar, weil
   jeder Button die Farbe einzeln in Elementor ueberschrieben hat.
   Genau diese Einzelwerte waren der Grund fuer die
   unterschiedlichen Hover-Effekte. Sie sind jetzt geleert.
   Damit neue Buttons ohne jede Einstellung richtig aussehen,
   kontern wir die Decke hier - gleiche Spezifitaet, spaeter
   in der Ladereihenfolge.
   ========================================================= */

.elementor-widget-button .elementor-button,
.elementor-widget-form .elementor-button{
  background-color:transparent;
  border:var(--mm-border) solid var(--mm-ink);
  border-radius:var(--mm-r-control);
  color:var(--mm-ink);
  font-family:var(--mm-font-sans);
  font-size:var(--mm-btn-size);
  font-weight:400;
  letter-spacing:var(--mm-btn-track);
  text-transform:uppercase;
}

.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus,
.elementor-widget-form .elementor-button:hover,
.elementor-widget-form .elementor-button:focus{
  background-color:var(--mm-blue);
  border-color:var(--mm-blue);
  color:var(--mm-cream);
  transform:translateY(var(--mm-lift));
  box-shadow:0 6px 16px rgba(67,119,187,.28);
}

/* Dunkle Abschnitte behalten Vorrang. */
.mm-dark .elementor-widget-button .elementor-button,
.mm-dark .elementor-widget-form .elementor-button{
  border-color:var(--mm-cream);
  color:var(--mm-cream);
}
.mm-dark .elementor-widget-button .elementor-button:hover,
.mm-dark .elementor-widget-form .elementor-button:hover{
  background-color:var(--mm-blue);
  border-color:var(--mm-blue);
  color:var(--mm-cream);
}

@media (hover:none),(pointer:coarse){
  .elementor-widget-button .elementor-button:hover,
  .elementor-widget-form .elementor-button:hover{
    background-color:transparent;
    border-color:var(--mm-ink);
    color:var(--mm-ink);
    transform:none;
    box-shadow:none;
  }
  .mm-dark .elementor-widget-button .elementor-button:hover{
    border-color:var(--mm-cream);
    color:var(--mm-cream);
  }
}

/* Elementors Formular-Absender bringt eine eigene, hoehere
   Regel mit: .elementor-widget-form .elementor-button[type=submit]
   -> Orange. Gleiche Spezifitaet kontern, spaeter geladen. */
.elementor-widget-form .elementor-button[type="submit"]{
  background-color:transparent;
  border-color:var(--mm-ink);
  color:var(--mm-ink);
}
.elementor-widget-form .elementor-button[type="submit"]:hover,
.elementor-widget-form .elementor-button[type="submit"]:focus{
  background-color:var(--mm-blue);
  border-color:var(--mm-blue);
  color:var(--mm-cream);
}
.mm-dark .elementor-widget-form .elementor-button[type="submit"]{
  border-color:var(--mm-cream);
  color:var(--mm-cream);
}

/* Die Notloesung fuer Elemente ohne ID ist am 26.08. entfallen.
   Die Elementor-Daten der 1:1-Seite sind repariert, alle 103
   Elemente haben wieder eine ID. Die Buttons dort folgen jetzt
   ueber geleerte Einzelwerte dem normalen Standard oben. */


/* Knoepfe werden nie unterstrichen.
   theme.css setzt .page-content a{text-decoration:underline} mit
   (0,1,1) - genauso stark wie a.klasse, und weil theme.css spaeter
   geladen wird, gewinnt der Unterstrich. Deshalb war "Test starten"
   in Mein Bereich unterstrichen. Klasse doppelt genannt = (0,2,1). */
a.elementor-button.elementor-button,
a.mm-btn.mm-btn,
a.mms-btn.mms-btn,
a.ltd-blog-btn.ltd-blog-btn,
a.mmp-btn.mmp-btn,
a.mms-selftest-start.mms-selftest-start,
a.mms-login-submit.mms-login-submit,
a.mms-login-google-button.mms-login-google-button{
  text-decoration:none;
}
