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

   Im Bestand gab es nur .avatar-tiny und .avatar-stack — die Komponente ist
   im Wesentlichen neu. Drei Größen, mehr nicht.
   ═══════════════════════════════════════════════════════════════════════════ */

.bh-avatar {
  --bh-avatar-size: 32px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;

  width: var(--bh-avatar-size);
  height: var(--bh-avatar-size);

  border-radius: var(--bh-radius-round);
  background: var(--bh-surface-3);
  color: var(--bh-text-tertiary);

  font-size: var(--bh-text-xs);
  font-weight: var(--bh-weight-semibold);
  line-height: 1;
  text-transform: uppercase;
  overflow: hidden;
  user-select: none;
}

.bh-avatar--sm { --bh-avatar-size: 24px; }
.bh-avatar--lg { --bh-avatar-size: 48px; font-size: var(--bh-text-md); }

.bh-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Fallback-Initialen, wenn kein Bild vorliegt. */
.bh-avatar__initials { pointer-events: none; }

/* Anwesenheitspunkt. */
.bh-avatar__status {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 10px; height: 10px;
  border-radius: var(--bh-radius-round);
  border: 2px solid var(--bh-surface-1);
  background: var(--bh-text-muted);
}
.bh-avatar__status--online { background: var(--bh-color-success); }
.bh-avatar__status--busy   { background: var(--bh-color-danger); }
.bh-avatar__status--away   { background: var(--bh-color-warning); }

/* Anklickbarer Avatar. */
a.bh-avatar, button.bh-avatar { cursor: pointer; transition: box-shadow var(--bh-transition); }
a.bh-avatar:hover, button.bh-avatar:hover { box-shadow: 0 0 0 2px var(--bh-border-strong); }
a.bh-avatar:active, button.bh-avatar:active { box-shadow: 0 0 0 2px var(--bh-color-accent); }
a.bh-avatar:focus-visible, button.bh-avatar:focus-visible {
  outline: var(--bh-focus-width) solid var(--bh-focus-color);
  outline-offset: var(--bh-focus-offset);
}
button.bh-avatar:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ── Stapel ──────────────────────────────────────────────────────────────── */
.bh-avatar-stack { display: inline-flex; align-items: center; }
.bh-avatar-stack .bh-avatar { border: 2px solid var(--bh-surface-1); }
.bh-avatar-stack .bh-avatar + .bh-avatar { margin-left: calc(var(--bh-space-2) * -1); }