/**
 * agenic Komponenten-CSS – Avatar (Atom) — Figma `avatar` (673:84, UI Konzepte
 * (WIP), Graduierung nach 0.5 im Figma-Strang 20.09.2026), gemessen 20.09.2026:
 *   Größe S 32 · M 40 · L 56 · XL 80, Radius Values/radius/max.
 *   Initialen: Fläche Surface/brand-subtle, Text/standard,
 *              Schrift Copy/XS · Copy/S · Copy/M · Headline/M (je Größe).
 *   Bild:      Fläche Surface/medium, Bild füllt den Kreis.
 * Handle `ag-avatar`. Kontrakt: claude/kontrakt-blog-familie-20-09.md §1.
 *
 * TMP: Die vier Maße haben kein Größen-Token (Figma misst sie als feste
 * Werte). Finding im Kontrakt §3 — entscheidet Vincent.
 */

.ag-avatar,
.ag-avatar * {
    box-sizing: border-box;
}

.ag-avatar {
    --ag-avatar-groesse: 40px;                               /* tmp — Figma avatar Größe=M */
    --ag-avatar-flaeche: var(--color-surface-brand-subtle);  /* Figma Surface/brand-subtle */
    --ag-avatar-fg: var(--color-text-standard);              /* Figma Text/standard */
    --ag-avatar-fs: var(--fs-200);                           /* Figma Copy/S */
    --ag-avatar-lh: calc(19 / 14);
    --ag-avatar-fw: var(--fw-light);

    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--ag-avatar-groesse);
    height: var(--ag-avatar-groesse);
    overflow: hidden;
    border-radius: var(--radius-max);                        /* Figma Values/radius/max */
    background: var(--ag-avatar-flaeche);
    color: var(--ag-avatar-fg);
    font-family: var(--font-sans);
    font-size: var(--ag-avatar-fs);
    line-height: var(--ag-avatar-lh);
    font-weight: var(--ag-avatar-fw);
    letter-spacing: -0.02em;
}

.ag-avatar--s  { --ag-avatar-groesse: 32px; --ag-avatar-fs: var(--fs-100); --ag-avatar-lh: calc(16 / 12); }                               /* tmp 32 · Copy/XS */
.ag-avatar--m  { --ag-avatar-groesse: 40px; --ag-avatar-fs: var(--fs-200); --ag-avatar-lh: calc(19 / 14); }                               /* tmp 40 · Copy/S */
.ag-avatar--l  { --ag-avatar-groesse: 56px; --ag-avatar-fs: var(--fs-300); --ag-avatar-lh: calc(21 / 16); }                               /* tmp 56 · Copy/M */
.ag-avatar--xl { --ag-avatar-groesse: 80px; --ag-avatar-fs: var(--fs-600); --ag-avatar-lh: calc(32 / 24); --ag-avatar-fw: var(--fw-medium); } /* tmp 80 · Headline/M */

.ag-avatar--bild {
    --ag-avatar-flaeche: var(--color-surface-medium);        /* Figma Surface/medium */
}

/* (0,2,0) gegen `.elementor img { height: auto }` (0,1,1). */
.ag-avatar .ag-avatar__bild,
.ag-avatar picture,
.ag-avatar picture > img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: inherit;
    object-fit: cover;
}

.ag-avatar .ag-avatar__initialen {
    display: block;
}