/* ============================================================================
   tm_design/dialog.css — Rückfragen im ERP-Design (Haris 15.10.2026)
   Gehört zu tm_design/dialog.js (tm.frage, tm.eingabe, tm.hinweis).
   Eine Karte wie .card: Fläche --surface, Ecken --r-xl, Schatten --shadow-3,
   Schleier --schleier wie beim Seitenpanel. Knöpfe sind die normalen .btn
   (ghost für Abbrechen, primary für OK, danger bei Gefahr). Nur Variablen
   aus tokens.css, damit Hell und Dunkel von selbst stimmen. Keine
   style-Attribute (Portal: style-src 'self').
   ============================================================================ */

.tm-dlg-schleier{position:fixed;inset:0;z-index:1500;display:flex;align-items:center;justify-content:center;
  padding:16px;background:var(--schleier);opacity:0;transition:opacity var(--t-fast)}
.tm-dlg-schleier.an{opacity:1}
/* Beim Ausblenden fängt der Schleier keine Klicks mehr ab. */
.tm-dlg-schleier:not(.an){pointer-events:none}

.tm-dlg{width:100%;max-width:460px;max-height:calc(100vh - 32px);overflow:auto;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-3);padding:22px 24px 20px;font-family:var(--font);
  transform:translateY(6px) scale(.98);transition:transform var(--t)}
.tm-dlg-schleier.an .tm-dlg{transform:none}
/* Gefahr: roter Streifen oben, wie die Zustandsfarbe crit. */
.tm-dlg.gefahr{border-top:4px solid var(--crit)}

.tm-dlg-text{margin:0 0 18px;font-size:15px;line-height:1.5;font-weight:600;white-space:pre-line;
  overflow-wrap:anywhere}

.tm .tm-dlg-feld,.tm-dlg-feld{display:block;width:100%;margin:0 0 6px}
.tm-dlg textarea.tm-dlg-feld{min-height:90px}
.tm-dlg-fehler{margin:2px 0 6px;font-size:13px;font-weight:600;color:var(--crit)}
.tm-dlg-fehler[hidden]{display:none}
.tm .tm-dlg-feld[aria-invalid="true"]{border-color:var(--crit);box-shadow:0 0 0 3px var(--crit-soft)}

.tm-dlg-fuss{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;flex-wrap:wrap}
.tm-dlg-fuss .btn{min-width:110px;justify-content:center}

@media (max-width:520px){
  .tm-dlg{padding:18px 16px 16px}
  .tm-dlg-fuss .btn{flex:1 1 0;min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .tm-dlg-schleier,.tm-dlg{transition:none}
}