/* profil-avatar */
.profil-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px; min-width: 40px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  line-height: 1;
  border: 2px solid transparent;
  transition: transform var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}
.profil-avatar--lg { width: 64px; height: 64px; font-size: var(--font-size-xl); }
.profil-avatar--xl { width: 96px; height: 96px; font-size: var(--font-size-2xl); }

.profil-avatar[data-profil="tom"]   { background: var(--tom);   color: var(--text-on-color); }
.profil-avatar[data-profil="julia"] { background: var(--julia); color: var(--text-on-color); }
.profil-avatar[data-profil="carlo"] { background: var(--carlo); color: var(--text-on-color); }
.profil-avatar[data-profil="lola"]  { background: var(--lola);  color: var(--text-on-color); }

.profil-avatar.is-aktiv {
  border-color: var(--profil-aktiv-strong);
  box-shadow: 0 0 0 3px var(--profil-aktiv-tint);
  transform: scale(1.04);
}

.profil-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  border: 2px solid var(--bg-secondary);
}
.profil-dot[data-profil="tom"]   { background: var(--tom); }
.profil-dot[data-profil="julia"] { background: var(--julia); }
.profil-dot[data-profil="carlo"] { background: var(--carlo); }
.profil-dot[data-profil="lola"]  { background: var(--lola); }

.profil-dot-gruppe { display: inline-flex; }
.profil-dot-gruppe .profil-dot + .profil-dot { margin-left: -6px; }