/* ============================================================
   .pb-avatar — round initials tile
   ------------------------------------------------------------
   A circular avatar showing a person's initials over a soft
   neutral gradient. The default is ~3.25rem, but it's fully
   size-able: override width / height / font-size from the
   caller and the glyph stays perfectly centred. The faint
   inner ring keeps it legible on any surface.

   Sizes:  default ~3.25rem  ·  .sm ~2.25rem
   ============================================================ */

.pb-avatar {
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--avatar);
  box-shadow: inset 0 0 0 0.0625rem var(--border);   /* hairline ring */
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-md);
  letter-spacing: var(--track-body);
  color: var(--text);
  text-transform: uppercase;
  user-select: none;
}

/* ---- Echtes Foto statt Initialen ----
   Absolut über die ganze Kachel + overflow-Clip: nicht-quadratische
   Fotos werden mittig beschnitten (object-fit cover). Die naive
   height:100%-Variante ließ Hochformate aus dem Kreis laufen (Grid
   löst die Prozent-Höhe fürs img nicht auf → Seitenverhältnis gewann). */
.pb-avatar { position: relative; overflow: hidden; }
.pb-avatar > .pb-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

/* ---- Small modifier ---- */
.pb-avatar.sm {
  width: 2.25rem;
  height: 2.25rem;
  font-size: var(--fs-sm);
}

/* ---- Status-Punkt (und Zahl) am Avatar ----
   Design „Neu“ Runden 19/38–41 (übernommen 02.10.2026, Paket 8): der
   Punkt sitzt außen am Kreis (der Avatar selbst schneidet sein Foto
   rund ab, deshalb ein Wrapper). Liegen ungelesene Nachrichten vor,
   wächst er mittig auf 1.375rem und trägt die Zahl (Diatype); auf Grün
   in Tinte wie das P im Logo, auf Rot und Grau hell. Die Zahl ist für
   Screenreader am Knopf beschriftet („2 ungelesen“), nicht nur hier.

     <span class="pb-avatar-wrap"><span class="pb-avatar">LH</span>
       <i class="pb-avatar-dot yes has-n">2</i></span>
   ---- */
.pb-avatar-wrap { position: relative; flex: none; display: inline-grid; }
.pb-avatar-dot {
  position: absolute;
  right: 0.0625rem;
  bottom: 0.0625rem;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 0.875rem;
  height: 0.875rem;
  padding: 0;
  border-radius: var(--r-pill);
  background: var(--text-faint);
  box-shadow: 0 0 0 0.1875rem var(--surface);
  color: var(--surface);
  font: 800 0.8125rem/1 var(--font-display);
  font-style: normal;
  transition: min-width 0.25s var(--ease), height 0.25s var(--ease), right 0.25s var(--ease), bottom 0.25s var(--ease);
}
.pb-avatar-dot.yes { background: var(--brand); color: #161616; }
.pb-avatar-dot.no { background: var(--bad-fg); }
.pb-avatar-dot.has-n { min-width: 1.375rem; height: 1.375rem; padding: 0 0.3125rem; right: -0.1875rem; bottom: -0.1875rem; }
@media (prefers-reduced-motion: reduce) { .pb-avatar-dot { transition: none; } }