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

   Ersetzt fünf Altnamen: .empty, .empty-state, .empty-box, .empty-activity,
   .table-empty.
   ═══════════════════════════════════════════════════════════════════════════ */

.bh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bh-space-2);

  padding: var(--bh-space-6) var(--bh-space-4);
  text-align: center;
  color: var(--bh-text-muted);
}

.bh-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--bh-radius-lg);
  background: var(--bh-surface-3);
  color: var(--bh-text-muted);
}
.bh-empty__icon > svg { width: 20px; height: 20px; }

.bh-empty__title {
  margin: 0;
  color: var(--bh-text-primary);
  font-size: var(--bh-text-md);
  font-weight: var(--bh-weight-semibold);
}
.bh-empty__text {
  margin: 0;
  max-width: 42ch;
  font-size: var(--bh-text-sm);
  color: var(--bh-text-muted);
}
/* Die eigenen Ränder von __icon (4px unten) und __action (8px oben) sind
   am 2026-09-23 entfallen. .bh-empty setzt gap: 8px, und beide addierten
   sich darauf: 12px unter dem Symbol, 16px über der Aktion — zwei Werte,
   die niemand gewählt hat (DESIGN.md §0c). Jetzt trennt der Behälter
   alles gleich.
   Wenn die Aktion mehr Luft braucht als der Text darüber, ist die
   richtige Stelle der gap dieses Behälters, nicht ein Rand am Kind.

   .bh-empty__action ist damit ganz entfallen: Sie war nur der Haken für
   diesen Rand. Ein Knopf steht jetzt direkt in .bh-empty; der Behälter
   zentriert ihn ohnehin. Eine Klasse ohne Regel ist Rauschen im Markup —
   genau das, wonach check-markup.py fragt. */


/* Kompakte Form für Tabellenzellen und Meta-Karten. */
.bh-empty--inline {
  padding: var(--bh-space-4) var(--bh-space-3);
  font-size: var(--bh-text-xs);
}
.bh-empty--inline .bh-empty__icon { display: none; }

/* 42ch sind die Lesebreite eines Absatzes — richtig fuer die grosse Form,
   die mitten in einer leeren Flaeche steht. Die einzeilige Form ist ein
   Hinweis in einer vorhandenen Zeile: dort schneidet dieselbe Grenze einen
   Satz mittendurch, obwohl daneben Platz ist. */
.bh-empty--inline .bh-empty__text { max-width: none; }