/* A12 Team: Profilbild und Farbe je Rolle (Schalter team.profil). Eigene Datei statt styles.css (Merge-Stelle).
   Farben nur aus den Tokens --rolle-* in styles.css :root. */

/* Profilbild über den Initialen; lädt es nicht, bleiben die Initialen sichtbar */
.avatar { position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-gross { width: 64px; height: 64px; font-size: 20px; }

/* Rollen-Tags: grau wie bisher, gefärbt erst mit <html class="rollenfarben"> */
.rollenfarben .tag-rolle-admin { background: var(--rolle-admin-bg); color: var(--rolle-admin-fg); }
.rollenfarben .tag-rolle-buero { background: var(--rolle-buero-bg); color: var(--rolle-buero-fg); }
.rollenfarben .tag-rolle-bauleiter { background: var(--rolle-bauleiter-bg); color: var(--rolle-bauleiter-fg); }
.rollenfarben .tag-rolle-vorarbeiter { background: var(--rolle-vorarbeiter-bg); color: var(--rolle-vorarbeiter-fg); }
.rollenfarben .tag-rolle-hr { background: var(--rolle-hr-bg); color: var(--rolle-hr-fg); }
.rollenfarben .tag-rolle-buchhaltung { background: var(--rolle-buchhaltung-bg); color: var(--rolle-buchhaltung-fg); }

/* Person mit Avatar in Listen und Karten (Team, Zuständig, Freigaben) */
.tp-person { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.tp-person-name { overflow-wrap: anywhere; }

/* Profilbild ändern (Konto, Team) */
.tp-profil { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.tp-profil-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }

/* Zuschneiden: runder Ausschnitt zum Verschieben, darunter der Zoom-Regler */
.tp-zuschnitt { display: grid; gap: 12px; justify-items: center; }
.tp-feld {
  position: relative; width: 240px; height: 240px; overflow: hidden; border-radius: 50%;
  background: var(--color-muted); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.tp-feld:active { cursor: grabbing; }
.tp-feld img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.tp-zoom { display: grid; gap: 4px; width: 240px; }
.tp-zoom input[type=range] { width: 100%; min-height: var(--tap); accent-color: var(--color-primary); margin: 0; }
.pb-person .avatar { margin-right: 4px; }