/* ═══════════════════════════════════════════════════════════════════════════
   BLUE HORIZON DESIGN SYSTEM — components/toast.css
   Version: 0.1.2 · Build: 2026-09-13 · Benötigt: tokens.css, base.css
   VENDORED — READ-ONLY.

   Meldungen sind Toasts, keine Kästen im Seitenfluss. Ersetzt .notification
   (demo, southland) und die statischen .alert-box (ticketsystem, forum).
   ═══════════════════════════════════════════════════════════════════════════ */

.bh-toast-stack {
  position: fixed;
  top: var(--bh-space-4);
  right: var(--bh-space-4);
  z-index: var(--bh-z-toast);

  display: flex;
  flex-direction: column;
  gap: var(--bh-space-2);
  width: min(360px, calc(100vw - var(--bh-space-4) * 2));

  pointer-events: none;
}
.bh-toast-stack > * { pointer-events: auto; }

.bh-toast {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--bh-space-3);

  padding: var(--bh-space-3) var(--bh-space-4);

  border: 1px solid var(--bh-border-strong);
  border-radius: var(--bh-radius-xl);
  background: var(--bh-surface-1);
  box-shadow: var(--bh-shadow-3);

  overflow: hidden;
  transition: opacity var(--bh-transition-enter), transform var(--bh-transition-enter);
}

/* Auffahren von rechts. */
.bh-toast[data-state="entering"],
.bh-toast.is-entering { opacity: 0; transform: translateX(var(--bh-space-4)); }
.bh-toast[data-state="leaving"],
.bh-toast.is-leaving  { opacity: 0; transform: translateX(var(--bh-space-4)); }

.bh-toast__icon {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none;
  border-radius: var(--bh-radius-md);
  color: var(--bh-color-accent);
}
.bh-toast__icon > svg { width: var(--bh-icon-size); height: var(--bh-icon-size); }

.bh-toast__body { min-width: 0; }

.bh-toast__title {
  margin: 0;
  color: var(--bh-text-primary);
  font-size: var(--bh-text-sm);
  font-weight: var(--bh-weight-semibold);
  line-height: var(--bh-leading-normal);
}
.bh-toast__text {
  margin: var(--bh-space-1) 0 0;
  color: var(--bh-text-tertiary);
  font-size: var(--bh-text-xs);
}

.bh-toast__close {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none;
  margin: -2px -4px 0 0;
  border: 0; border-radius: var(--bh-radius-md);
  background: none;
  color: var(--bh-text-muted);
  cursor: pointer;
  transition: background var(--bh-transition), color var(--bh-transition);
}
.bh-toast__close > svg { width: 14px; height: 14px; }
.bh-toast__close:hover  { background: var(--bh-surface-hover); color: var(--bh-text-primary); }
.bh-toast__close:active { background: var(--bh-surface-3); }
.bh-toast__close:focus-visible {
  outline: var(--bh-focus-width) solid var(--bh-focus-color);
  outline-offset: var(--bh-focus-offset);
}
.bh-toast__close:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Restlaufzeit. */
.bh-toast__progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  background: var(--bh-color-accent);
  transform-origin: left center;
}

/* ── Varianten ───────────────────────────────────────────────────────────── */
.bh-toast--success .bh-toast__icon,
.bh-toast--success .bh-toast__progress { color: var(--bh-color-success); background-color: var(--bh-color-success); }
.bh-toast--success .bh-toast__icon { background-color: var(--bh-color-success-soft); }

.bh-toast--warning .bh-toast__icon,
.bh-toast--warning .bh-toast__progress { color: var(--bh-color-warning); background-color: var(--bh-color-warning); }
.bh-toast--warning .bh-toast__icon { background-color: var(--bh-color-warning-soft); }

.bh-toast--danger .bh-toast__icon,
.bh-toast--danger .bh-toast__progress { color: var(--bh-color-danger); background-color: var(--bh-color-danger); }
.bh-toast--danger .bh-toast__icon { background-color: var(--bh-color-danger-soft); }

.bh-toast--info .bh-toast__icon { background-color: var(--bh-color-accent-soft); color: var(--bh-color-accent); }

/* ── Mobil ───────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  .bh-toast-stack {
    top: auto;
    bottom: var(--bh-space-3);
    left: var(--bh-space-3);
    right: var(--bh-space-3);
    width: auto;
  }
  .bh-toast[data-state="entering"],
  .bh-toast.is-entering,
  .bh-toast[data-state="leaving"],
  .bh-toast.is-leaving { transform: translateY(var(--bh-space-3)); }
}

@media (prefers-reduced-motion: reduce) {
  .bh-toast { transition: opacity 0.01ms linear; }
  .bh-toast[data-state="entering"], .bh-toast.is-entering,
  .bh-toast[data-state="leaving"],  .bh-toast.is-leaving { transform: none; }
  .bh-toast__progress { display: none; }
}

/* Ohne JavaScript: Serverseitige Meldung bleibt im Fluss stehen statt zu
   verschwinden. Progressive Enhancement, siehe GUIDE.md §Toast. */
/* Der Rand ist am 2026-09-23 entfallen. Die statische Meldung steht
   IMMER in einem Behälter, der seine Kinder ohnehin trennt — acht Stellen
   in zwei Projekten, alle in .bh-stack, .bh-formpage, .bh-overview oder
   .bh-shell__content. Ihr eigener margin-bottom addierte sich dort zum
   gap; was man sah, war eine Summe (DESIGN.md §0c).
   Wer sie je ohne solchen Behälter einsetzt, gibt den Abstand dort.

   DER FALL, DER DAS NICHT VON SELBST ERFÜLLT: MEHRERE statische
   Meldungen untereinander. Eine Liste von Servermeldungen ist kein
   vorhandener Behälter — sie entsteht erst beim Ausgeben, und wer sie
   ohne Weiteres in ein <div> legt, bekommt sie aneinandergeklebt.
   Der Behälter gehört also mit ausgegeben; .bh-stack--tight ist die
   Antwort, die das Designsystem dafür hat. Belegt in
   ticketsystem/includes/header.php (2026-09-23).

   Das steht hier und nicht nur im Projekt, weil die Stelle beim
   NÄCHSTEN Projekt wieder entsteht: Meldungen listet jedes. */
.bh-toast--static { position: static; width: auto; }