/* ═══════════════════════════════════════════════════════════════════════════
   mm-buttons.css — EIN Button-System für alle Kundenseiten (2026-10-09)

   Vorher gab es fünf Lilatöne für Hauptbuttons (#3a2f78, #5d3fa8, #9b7ff0
   mit weißer und mit dunkler Schrift, ein Verlauf), dazu Gold und Mint als
   weitere „Haupt“-Farben. Diese Datei legt sich darüber und gleicht nur
   FARBE, RAND, RUNDUNG und ZUSTÄNDE an — Größen und Abstände bleiben, wie
   sie auf der jeweiligen Seite sind.

   🔑 Sie wird auf jeder Seite ZULETZT geladen und arbeitet mit !important,
      weil viele Seiten ihre Buttons in eigenen <style>-Blöcken oder per
      style="" setzen. Die alten Regeln bleiben unangetastet.
   ⚠️ Jeder Selektor beginnt mit `:root body`. Das hebt die Spezifität über
      die alten !important-Regeln mit zwei, drei Klassen (z. B.
      `.match-card__actions .btn-date-request:hover`), ohne sie anzufassen.
   🔧 Rückweg: die <link>-Zeile auf den Seiten entfernen.

   Die drei Arten:
     Haupt     — Lila #5d3fa8 wie „Speichern“, weiße Schrift (≈ 7,7 : 1)
     Highlight — Gold gefüllt, dunkle Schrift: NUR die eine Aktion pro
                 Bildschirm, die zum Treffen führt (Fragebogen starten,
                 Date anfragen, Event buchen, Einladung annehmen)
     Zweit     — Umriss in Gold (#d4af37)
     Gefahr    — roter Umriss; gefüllt NUR im letzten Bestätigungsschritt
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --mmb-haupt:        #5d3fa8;                    /* wie „Speichern“ im Kundenkonto */
  --mmb-haupt-hover:  #6b4ac0;
  --mmb-auf-haupt:    #fff;                       /* Weiß darauf ≈ 7,7 : 1 */
  --mmb-haupt-rand:   rgba(255, 255, 255, .14);
  --mmb-zweit:        #d4af37;                    /* Gold wie auf der Startseite */
  --mmb-zweit-text:   #d4af37;
  --mmb-gefahr:       #f87171;
  --mmb-gefahr-text:  #fca5a5;
  --mmb-gefahr-voll:  #dc2626;                    /* Weiß darauf ≈ 4,8 : 1 */
  --mmb-gold:         #d4af37;
  --mmb-gold-hover:   #e6c158;
  --mmb-auf-gold:     #1a1238;                    /* ≈ 8,4 : 1 */
  --mmb-fokus:        #d4af37;
}

/* ── Hauptbutton ─────────────────────────────────────────────────────────── */
:root body .landing-btn,
:root body .cta-btn,
:root body .imprint-page__back,
:root body .mm-btn-primary,
:root body .msig__cta:not(.msig__cta--ghost),
:root body .mp-cta-btn,
:root body .mflip__cta:not(.mflip__cta--ghost):not([data-account-jump="chats"]),
:root body .events-book-btn,
:root body .event-card--v2 .event-card__button,
:root body .book-action__btn,
:root body .btn-date-request,
:root body .mmc__btn--primary,
:root body .mm-cross-prompt__cta,
:root body .chat-confirm__ok,
:root body .mm-confirm__btn--primary,
:root body .mm-curated-card__btn--primary,
:root body .sdf-submit-btn,
:root body #date-type-confirm,
:root body .ev-btn--primary:not(.ev-actions .ev-btn--primary),
:root body .cb-btn,
:root body .fq-btn-next,
:root body .fq-match-request-btn,
:root body .btn--primary,
:root body .mm-sb-act__btn--save,
:root body .mm-dd__btn,
:root body .mmr-btn--gold,
:root body [data-skal-senden],
:root body .chat-inline-send,
:root body .ec-form__send,
:root body a.btn:not(.btn-outline):not(.btn-ghost),
:root body button.btn:not(.btn-outline):not(.btn-ghost):not(.btn--ghost) {
  background: var(--mmb-haupt) !important;
  background-image: none !important;
  color: var(--mmb-auf-haupt) !important;
  border: 1px solid var(--mmb-haupt-rand) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}:root body .landing-btn:hover,
:root body .cta-btn:hover,
:root body .imprint-page__back:hover,
:root body .mm-btn-primary:hover,
:root body .msig__cta:not(.msig__cta--ghost):hover,
:root body .mp-cta-btn:hover,
:root body .mflip__cta:not(.mflip__cta--ghost):not([data-account-jump="chats"]):hover,
:root body .events-book-btn:hover,
:root body .event-card--v2 .event-card__button:hover,
:root body .book-action__btn:hover,
:root body .book-action__btn:not(:disabled):hover,
:root body .btn-date-request:hover,
:root body .mmc__btn--primary:hover,
:root body .mm-cross-prompt__cta:hover,
:root body .chat-confirm__ok:hover,
:root body .mm-confirm__btn--primary:hover,
:root body .mm-curated-card__btn--primary:hover,
:root body .sdf-submit-btn:hover,
:root body #date-type-confirm:hover,
:root body .cb-btn:hover,
:root body .fq-btn-next:hover,
:root body .fq-match-request-btn:hover,
:root body .btn--primary:hover,
:root body .mm-sb-act__btn--save:hover,
:root body .mm-dd__btn:hover,
:root body .mmr-btn--gold:hover,
:root body [data-skal-senden]:hover,
:root body .chat-inline-send:hover,
:root body .ec-form__send:hover,
:root body a.btn:not(.btn-outline):not(.btn-ghost):hover,
:root body button.btn:not(.btn-outline):not(.btn-ghost):not(.btn--ghost):hover {
  background: var(--mmb-haupt-hover) !important;
  border-color: var(--mmb-haupt-rand) !important;
  color: var(--mmb-auf-haupt) !important;
}

/* Icons in Hauptbuttons folgen der Schriftfarbe */
:root body .mm-btn-primary svg,
:root body .mflip__cta svg,
:root body .msig__cta svg,
:root body .cb-btn svg,
:root body .fq-btn-next svg,
:root body .book-action__btn svg,
:root body .chat-inline-send svg,
:root body .ec-form__send svg { stroke: currentColor; }

/* ── Highlight: Gold gefüllt ─────────────────────────────────────────────────
   Steht NACH dem Hauptbutton und schlägt ihn bei gleicher Spezifität, weil
   z. B. „Event buchen“ beide Klassen trägt (landing-btn book-action__btn). */
:root body main a.btn:not(.btn-outline):not(.btn-ghost),
:root body .mobile-menu a.btn,
:root body .mflip__cta:not(.mflip__cta--ghost):not([data-account-jump="chats"]):not(.msig__cta),
:root body .btn-date-request,
:root body .book-action__btn,
:root body .events-book-btn,
:root body .event-card--v2 .event-card__button,
:root body .cb-btn,
:root body .mm-curated-card__btn--primary {
  background: var(--mmb-gold) !important;
  background-image: none !important;
  color: var(--mmb-auf-gold) !important;
  border: 1px solid var(--mmb-gold) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
:root body main a.btn:not(.btn-outline):not(.btn-ghost):hover,
:root body .mobile-menu a.btn:hover,
:root body .mflip__cta:not(.mflip__cta--ghost):not([data-account-jump="chats"]):not(.msig__cta):hover,
:root body .btn-date-request:hover,
:root body .book-action__btn:hover,
:root body .book-action__btn:not(:disabled):hover,
:root body .events-book-btn:hover,
:root body .event-card--v2 .event-card__button:hover,
:root body .cb-btn:hover,
:root body .mm-curated-card__btn--primary:hover {
  background: var(--mmb-gold-hover) !important;
  border-color: var(--mmb-gold-hover) !important;
  color: var(--mmb-auf-gold) !important;
}


/* ── Zweitbutton ─────────────────────────────────────────────────────────── */
:root body .landing-btn-ghost,
:root body .msig__cta--ghost,
:root body .mflip__cta--ghost,
:root body .mflip__cta[data-account-jump="chats"],
:root body .mm-curated-card__btn--ghost,
:root body .mm-sb-act__btn--ghost,
:root body .chat-confirm__cancel,
:root body .mm-confirm__btn:not(.mm-confirm__btn--primary):not(.mm-confirm__btn--danger),
:root body .fq-btn-back,
:root body .btn--ghost,
:root body .mmr-btn:not(.mmr-btn--gold),
:root body .mm-back,
:root body .mm-back-btn,
:root body .ev-btn--chat,
:root body .btn-outline,
:root body .btn-ghost {
  background: transparent !important;
  background-image: none !important;
  color: var(--mmb-zweit-text) !important;
  border: 1px solid var(--mmb-zweit) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}:root body .landing-btn-ghost:hover,
:root body .msig__cta--ghost:hover,
:root body .mflip__cta--ghost:hover,
:root body .mflip__cta[data-account-jump="chats"]:hover,
:root body .mm-curated-card__btn--ghost:hover,
:root body .mm-sb-act__btn--ghost:hover,
:root body .chat-confirm__cancel:hover,
:root body .mm-confirm__btn:not(.mm-confirm__btn--primary):not(.mm-confirm__btn--danger):hover,
:root body .fq-btn-back:hover,
:root body .btn--ghost:hover,
:root body .mmr-btn:not(.mmr-btn--gold):hover,
:root body .mm-back:hover,
:root body .mm-back-btn:hover,
:root body .ev-btn--chat:hover,
:root body .btn-outline:hover,
:root body .btn-ghost:hover {
  background: rgba(212, 175, 55, .12) !important;
  color: #e6c158 !important;
  border-color: #e6c158 !important;
}

/* ── Gefahr ──────────────────────────────────────────────────────────────── */
:root body .mm-btn-danger,
:root body .mm-btn-widerruf {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--mmb-gefahr-text) !important;
  border: 1px solid var(--mmb-gefahr) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}:root body .mm-btn-danger:hover,
:root body .mm-btn-widerruf:hover { background: rgba(248, 113, 113, .12) !important; }

/* Gefüllt nur im letzten Schritt: endgültig löschen / widerrufen */
:root body #deleteStep2Confirm,
:root body [data-consent-revoke-confirm],
:root body .mm-confirm__btn--danger {
  background: var(--mmb-gefahr-voll) !important;
  box-shadow: none !important;
  color: #fff !important;
  border: 1px solid var(--mmb-gefahr-voll) !important;
  border-radius: 999px !important;
}:root body #deleteStep2Confirm:hover,
:root body [data-consent-revoke-confirm]:hover,
:root body .mm-confirm__btn--danger:hover {
  background: #b91c1c !important; border-color: #b91c1c !important;
}

/* ── Gesperrt und Fokus — für alle drei Arten gleich ─────────────────────── */
:root body .landing-btn:disabled,
:root body .imprint-page__back:disabled,
:root body .mm-btn-primary:disabled,
:root body .cb-btn:disabled,
:root body .fq-btn-next:disabled,
:root body .btn--primary:disabled,
:root body .book-action__btn:disabled,
:root body .mm-btn-danger:disabled,
:root body .mm-sb-act__btn:disabled,
:root body .mm-confirm__btn:disabled,
:root body .chat-confirm__ok:disabled,
:root body .chat-inline-send:disabled,
:root body .ec-form__send:disabled,
:root body button.btn:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}:root body .landing-btn:focus-visible,
:root body .landing-btn-ghost:focus-visible,
:root body .imprint-page__back:focus-visible,
:root body .mm-btn-primary:focus-visible,
:root body .mm-btn-danger:focus-visible,
:root body .cb-btn:focus-visible,
:root body .fq-btn-next:focus-visible,
:root body .fq-btn-back:focus-visible,
:root body .btn--primary:focus-visible,
:root body .btn--ghost:focus-visible,
:root body .ev-btn:focus-visible,
:root body .mflip__cta:focus-visible,
:root body .msig__cta:focus-visible,
:root body .mm-sb-act__btn:focus-visible,
:root body .mm-confirm__btn:focus-visible,
:root body .chat-confirm__ok:focus-visible,
:root body .chat-confirm__cancel:focus-visible,
:root body .mm-back:focus-visible,
:root body .mm-back-btn:focus-visible,
:root body .book-action__btn:focus-visible,
:root body .mp-cta-btn:focus-visible,
:root body .btn:focus-visible {
  outline: 2px solid var(--mmb-fokus) !important;
  outline-offset: 3px !important;
}

/* ── Rundung für die übrigen Aktionsknöpfe (2026-10-10) ──────────────────────
   Diese Knöpfe behalten ihre Farbe, bekommen aber dieselbe Pillenform wie
   alle anderen. Bewusst NICHT dabei: Format-Kacheln, Sterne, Daumen und
   Melde-Symbole — das sind Auswahlflächen und Symbole, keine Knöpfe. */
:root body .mmc__btn,
:root body .mm-media-btn,
:root body .mflip__backbtn,
:root body .fq-btn-ghost-lg,
:root body #skip-consent-gp,
:root body .mm-fb-btn-cancel,
:root body .mm-fb-btn-shot,
:root body .mm-fb-btn-submit {
  border-radius: 999px !important;
}

/* ── Tastatur-Fokus auf allen Seiten gleich (2026-10-10) ─────────────────────
   Bisher gab es einen gestalteten Fokus nur auf Startseite und Matching-Seite
   (mm-site.css), sonst den Browser-Standard — an manchen Stellen war er
   sogar mit `outline: none` abgeschaltet. Jetzt: goldener Ring für alles,
   was man mit der Tastatur ansteuert. `:focus-visible` greift nur bei
   Tastatur, nicht beim Antippen oder Klicken. */
:root body a:focus-visible,
:root body button:focus-visible,
:root body summary:focus-visible,
:root body [role="button"]:focus-visible,
:root body [tabindex]:not([tabindex="-1"]):focus-visible,
:root body input[type="checkbox"]:focus-visible,
:root body input[type="radio"]:focus-visible {
  outline: 2px solid var(--mmb-fokus) !important;
  outline-offset: 3px !important;
}