/* =============================================================
   AOP HUB, SPRACHUMSCHALTER
   =============================================================
   Geladen von allen aop-hub-* Seiten, nach aop-hub.css.

   Eigene Datei, weil die Stilvorlagen des Prototyps eingefroren sind.
   Der Umschalter ist die einzige sichtbare Ergänzung im Kopf und damit
   auch die einzige, die hier Regeln braucht.

   Gestalterisch ist er eine kleinere Fassung von .aoph-user: dieselbe
   Pille, dieselbe Randfarbe, dieselbe Schrift. Er soll neben der
   Anmeldung nicht auffallen, sondern dazugehören.

   Alle Werte kommen aus tokens.css. Keine neuen Farben, keine neuen
   Abstände.
   ============================================================= */

.aoph-locale {
  display: inline-flex;
  align-items: center;
  padding: 3px;

  border: 1px solid var(--color-white-15);
  border-radius: var(--radius-pill);
}

/* --text-12 ist in tokens.css ausdrücklich für navigatorische
   Mikro-Beschriftungen vorgesehen. Genau das ist "DE" / "EN". */
.aoph-locale button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  cursor: pointer;

  font-family: var(--font-heading);
  font-weight: var(--fw-subheading);
  font-size: var(--text-12);
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--color-white-70);

  transition: color var(--dur-fast, 0.15s) ease,
              background-color var(--dur-fast, 0.15s) ease;
}

/* Die aktive Sprache ist gefüllt, nicht nur heller: bei zwei Kürzeln
   nebeneinander ist ein Farbunterschied allein zu leicht zu übersehen. */
.aoph-locale button.is-active {
  background: var(--color-white-8);
  color: var(--color-white);
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .aoph-locale button:not(.is-active):hover { color: var(--color-white); }
}

.aoph-locale button:focus-visible {
  outline: 2px solid var(--aop-teal);
  outline-offset: 2px;
}


/* ── Sehr schmale Fenster ──────────────────────────────────────
   Bei 390 px stehen Logo, Umschalter und Anmeldung in einer Reihe.
   Der Umschalter gibt zuerst Platz ab, weil er der kleinste und am
   seltensten benutzte Teil ist. */
@media (max-width: 420px) {
  .aoph-locale { padding: 2px; }
  .aoph-locale button { padding: 3px 5px; letter-spacing: 0; }

  /* Und der Abstand zur Anmeldung. Gemessen bei 390 px: Logo 151, Umschalter
     56, Schaltfläche 107, dazu zweimal 20 Rand. Mit dem Standardabstand von
     16 wäre das zusammen breiter als das Fenster, und das Wort HUB liefe
     sichtbar unter den Umschalter.

     Ohne Umschalter, also in der Fassung, die der Paritätstest
     fotografiert, hat der Bereich nur ein Kind und damit ohnehin keinen
     Abstand. Diese Regel kann dort nichts verschieben. */
  .aoph-nav-account { gap: var(--sp-8); }
}