/* Zweck: Aussehen des Popups zur Telefon-Bestätigung (templates/verification.tpl, assets/otp.js). NEU 08.11.2026.
   Hell/Dunkel: Lagom schaltet über html.lagom-dark-mode, NICHT über prefers-color-scheme (das Theme folgt dem Schalter
   der Seite). Flächen und Schrift nehmen die Lagom-Variablen mit Rückfallwert. Die drei Meldungsfarben sind feste, je
   Modus nachgemessene Paare (WCAG AA, Text gegen eigene Fläche, nachgerechnet am 08.11.2026):
     hell:   Erfolg #14532d auf #ecf8f0 = 8,35:1  Hinweis #0b3a8c auf #eaf1ff = 9,27:1  Fehler #8a1c1c auf #fdeeee = 8,24:1
     dunkel: Erfolg #8ee6ae auf #1d3326 = 9,06:1  Hinweis #a9c8ff auf #1b2a45 = 8,47:1  Fehler #ffb4b4 auf #3d2020 = 8,72:1
     Ränder gegen die Fensterfläche (#fff bzw. #242424) jeweils mindestens 4,46:1 (WCAG 1.4.11 verlangt 3:1).

   Symbole nutzen currentColor, damit sie automatisch die Textfarbe haben. Touch-Ziele mindestens 44px. */
.mh-otp-dialog {
  --mh-ok-fg: #14532d; --mh-ok-bg: #ecf8f0; --mh-ok-bd: #1e7b3c;
  --mh-info-fg: #0b3a8c; --mh-info-bg: #eaf1ff; --mh-info-bd: #1062fe;
  --mh-err-fg: #8a1c1c; --mh-err-bg: #fdeeee; --mh-err-bd: #c62828;
  --mh-surface: var(--ui-block-bg, #fff);
  --mh-text: var(--text-heading-color, #17191c);
  --mh-muted: var(--gray-base, #5e636e);
  --mh-line: rgba(127, 127, 127, .45);
}
.mh-otp-trigger, .mh-otp {
  --mh-ok-fg: #14532d; --mh-ok-bg: #ecf8f0; --mh-ok-bd: #1e7b3c;
}
html.lagom-dark-mode .mh-otp-dialog,
html.lagom-dark-mode .mh-otp-trigger,
html.lagom-dark-mode .mh-otp {
  --mh-ok-fg: #8ee6ae; --mh-ok-bg: #1d3326; --mh-ok-bd: #3fb871;
  --mh-info-fg: #a9c8ff; --mh-info-bg: #1b2a45; --mh-info-bd: #5b95ff;
  --mh-err-fg: #ffb4b4; --mh-err-bg: #3d2020; --mh-err-bd: #f05252;
  --mh-surface: var(--ui-block-bg, #242424);
  --mh-text: var(--text-heading-color, #fff);
  --mh-muted: var(--gray-base, #b3b3b3);
}

/* Auslöser neben dem Telefonfeld */
.mh-otp-trigger { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 12px; }
.mh-otp-trigger[hidden], .mh-otp-trigger [hidden] { display: none !important; }
.mh-otp-open { min-height: 44px; }
.mh-otp-badge {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--mh-ok-bd); border-radius: 6px; background: var(--mh-ok-bg); color: var(--mh-ok-fg); font-weight: 600;
}

/* Fenster */
.mh-otp-dialog {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  padding: 0; border: 1px solid var(--mh-line); border-radius: 10px; overflow: auto;
  background: var(--mh-surface); color: var(--mh-text); box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.mh-otp-dialog::backdrop { background: rgba(0, 0, 0, .6); }
/* Rückfall für Browser ohne showModal: fest positioniert, Abdunkelung über einen großen Schatten. */
.mh-otp-dialog.mh-otp-fallback[open] {
  position: fixed; inset: 0; margin: auto; z-index: 100000; height: fit-content;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .6);
}
html.mh-otp-lock, html.mh-otp-lock body { overflow: hidden !important; }
.mh-otp-form { margin: 0; }
.mh-otp-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 14px 10px 20px; border-bottom: 1px solid var(--mh-line);
}
.mh-otp-title { margin: 0; font-size: 1.25rem; line-height: 1.3; color: var(--mh-text); }
.mh-otp-x {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--mh-text); cursor: pointer;
}
.mh-otp-x:hover { background: rgba(127, 127, 127, .15); }
.mh-otp-x:focus-visible, .mh-otp-dialog .btn:focus-visible, .mh-otp-choice:focus-within {
  outline: 3px solid var(--mh-info-bd); outline-offset: 2px;
}
.mh-otp-body { padding: 16px 20px 4px; }
.mh-otp-intro { margin: 0 0 12px; color: var(--mh-text); }
.mh-otp-help { color: var(--mh-muted); font-size: .875rem; margin: 6px 0 0; }
.mh-otp-field { margin-bottom: 14px; }
.mh-otp-field label, .mh-otp-legend { font-weight: 600; color: var(--mh-text); }
.mh-otp-dialog .form-control { min-height: 44px; }
.mh-otp-code { letter-spacing: .2em; font-size: 1.15rem; }
.mh-otp-channels { margin: 0 0 4px; padding: 0; border: 0; min-width: 0; }
.mh-otp-channels[hidden], .mh-otp-step[hidden], .mh-otp-msg[hidden], .mh-otp-dialog [hidden] { display: none !important; }
.mh-otp-legend { display: block; width: auto; margin: 0 0 6px; padding: 0; border: 0; font-size: 1rem; }
.mh-otp-choice {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 8px 8px 0; padding: 8px 14px;
  border: 1px solid rgba(127, 127, 127, .85); border-radius: 6px; cursor: pointer; color: var(--mh-text); font-weight: 500;
}
.mh-otp-choice input { margin: 0; width: 18px; height: 18px; accent-color: var(--mh-info-bd); }
.mh-otp-btn { min-height: 44px; margin: 4px 8px 4px 0; }
.mh-otp-btn[disabled] { cursor: not-allowed; }
.mh-otp-step { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mh-line); }
.mh-otp-actions { display: flex; flex-wrap: wrap; align-items: center; }
.mh-otp-foot { padding: 4px 20px 18px; }
.mh-otp-foot .mh-otp-btn { width: 100%; margin: 10px 0 0; }

/* Meldungen: Hinweis blau, Erfolg grün, Fehler rot; nie nur über Farbe (Symbol + Text). */
.mh-otp-msg {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 10px 12px;
  border: 1px solid var(--mh-info-bd); border-left-width: 4px; border-radius: 6px;
  background: var(--mh-info-bg); color: var(--mh-info-fg); line-height: 1.45;
}
.mh-otp-msg:empty { display: none; }
.mh-otp-msg[data-tone="success"] { border-color: var(--mh-ok-bd); background: var(--mh-ok-bg); color: var(--mh-ok-fg); font-weight: 600; }
.mh-otp-msg--danger, .mh-otp-msg[data-tone="danger"] { border-color: var(--mh-err-bd); background: var(--mh-err-bg); color: var(--mh-err-fg); }
.mh-otp-icon { flex: 0 0 auto; margin-top: 1px; }

/* Handy: bildschirmfüllend, Kopf bleibt oben. */
@media (max-width: 575px) {
  .mh-otp-dialog {
    width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh;
    margin: 0; border: 0; border-radius: 0;
  }
  .mh-otp-head { position: sticky; top: 0; z-index: 1; background: var(--mh-surface); }
  .mh-otp-actions .mh-otp-btn, .mh-otp-body > .mh-otp-btn { width: 100%; margin-right: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .mh-otp-dialog[open] { animation: mh-otp-in .16s ease-out; }
  @keyframes mh-otp-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}