/* ============================================================================
   Meldung (Toast).

   Verhalten steht in static/app.js (`window.toast(text, art)`), hier steht
   nur, wie es aussieht. Die Klassennamen sind der Vertrag zwischen beiden
   Dateien: `toast-host`, `toast`, `show`, `toast-success`, `toast-warn`,
   `toast-danger`, `toast-info`.

   WARUM DAS EINE EIGENE DATEI IST – dieselbe Geschichte wie menue.css und
   tabelle_mobil.css: Die zwei größten Seiten des Hauses (gallery.html mit
   8.610 Zeilen, ankauf.html mit 14.004) laden weder app.css noch tokens.css.
   Sie haben deshalb bis VALDURA-505 ihre EIGENE toast-Fassung mitgebracht –
   nicht aus Absicht, sondern weil die gemeinsame dort schlicht unsichtbar
   gewesen wäre. Ein Stylesheet, das nur diesen einen Baustein trägt, löst das,
   ohne dass eine Altbestandsseite die ganze app.css laden muss.

   JEDES var() TRÄGT EINEN RÜCKFALL. Ohne ihn ist `gap: var(--sp-2)` auf einer
   Seite ohne tokens.css schlicht ungültig – bei den Tabellen fürs Telefon
   wurde daraus „StufeBaujahr", und den Fehler sucht man am falschen Ende.
   ============================================================================ */

.toast-host {
  position: fixed;
  left: 50%;
  bottom: var(--sp-5, 24px);
  transform: translateX(-50%);
  z-index: var(--z-toast, 900);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
  align-items: center;
  pointer-events: none;
}

.toast {
  background: #0f172a;
  color: #fff;
  padding: var(--sp-2, 8px) var(--sp-4, 16px);
  border-radius: var(--r-md, 8px);
  font-size: var(--fs-md, 13px);
  box-shadow: var(--shadow-md, 0 4px 14px rgba(15, 23, 42, .18));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s, transform .2s;
  max-width: min(90vw, 520px);
  pointer-events: auto;
}
.toast.show { opacity: 1; transform: none; }

.toast-success { background: var(--success, #218a47); }
.toast-warn    { background: var(--warn,    #c9820a); }
.toast-danger  { background: var(--danger,  #c0392b); }
.toast-info    { background: var(--info,    #2f52e0); }