/* =================================================================
   STATUS-MELDUNGEN · .alert – eine Komponente für Erfolg/Warnung/
   Fehler/Info. Nutzt ausschließlich die semantischen Alert-Tokens aus
   tokens.css (keine fest verdrahteten Farben). Sichtbar, aber ruhig/edel.

   Barrierefreiheit: Farbe ist NIE der einzige Bedeutungsträger – jede
   Variante trägt ein Icon und Text; Kontrast über die *-text-Tokens.
   ================================================================= */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--info-border);
  background: var(--info-surface);
  color: var(--info-text);
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
}
.alert__icon { flex-shrink: 0; display: grid; place-items: center; margin-top: 1px; }
.alert__icon svg { width: 18px; height: 18px; }
.alert__body { min-width: 0; }
.alert__title { font-weight: var(--fw-semi); }
.alert a { color: inherit; text-decoration: underline; font-weight: var(--fw-medium); }

.alert--success { background: var(--success-surface); color: var(--success-text); border-color: var(--success-border); }
.alert--warning { background: var(--warning-surface); color: var(--warning-text); border-color: var(--warning-border); }
.alert--danger  { background: var(--danger-surface);  color: var(--danger-text);  border-color: var(--danger-border); }
.alert--info    { background: var(--info-surface);    color: var(--info-text);    border-color: var(--info-border); }

/* Kompakte Inline-Variante (z. B. unter Formularen) */
.alert--sm { padding: var(--s-2) var(--s-3); font-size: var(--t-xs); }