/*
 * Dezenter Icon-Button, bewusst kein auffälliger CTA (Story
 * layout-034) -- Größe/Farblogik an .pg-language-switcher__toggle
 * angelehnt (direkter Nachbar im selben Header-Bereich), aber als
 * reiner Icon-Kreis statt Pill-Label.
 */
.pg-account-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: var(--color-text-inverse);
  transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.pg-account-toggle:hover,
.pg-account-toggle:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pg-account-toggle__icon {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
}

/* Unterhalb --breakpoint-lg (992px): wie der Sprachumschalter im
   mobilen Drawer als eigene Zeile, siehe header.css/pg-language-
   switcher.css. */
@media (max-width: 61.99875rem) {
  .pg-account-toggle {
    align-self: flex-start;
    margin-top: var(--space-xs);
  }
}