/* ── AUTH WIDGET ── */
/* width:100% wuerde den Sprachknopf daneben aus der Leiste druecken —
   der Block darf jetzt nur so breit sein, wie er braucht.            */
.auth-wrap {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex: 0 1 auto;
}
.auth-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  color: var(--black);
  position: relative;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
/* Die Rueckmeldung der drei Kopfschalter steht beim Sprachknopf (weiter
   unten): ueberfahren und offen ergrauen beide auf var(--light).     */
.auth-icon-wake {
  display: none;
}
.auth-wrap.logged-in .auth-icon-sleep {
  display: none;
}
.auth-wrap.logged-in .auth-icon-wake {
  display: block;
}
.auth-wrap.logged-in .auth-z {
  display: none;
}
@keyframes authZ {
  0% {
    opacity: 0;
    transform: translateY(1px);
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translateY(-13px);
  }
}
.auth-z {
  position: absolute;
  font-weight: 700;
  font-family: var(--sans);
  color: var(--black);
  pointer-events: none;
  animation: authZ 2.4s ease-in infinite;
}
.auth-z:nth-of-type(1) {
  font-size: 8px;
  right: 3px;
  top: 1px;
  animation-delay: 0s;
}
.auth-z:nth-of-type(2) {
  font-size: 6px;
  right: 7px;
  top: -3px;
  animation-delay: 0.8s;
}
.auth-z:nth-of-type(3) {
  font-size: 5px;
  right: 9px;
  top: -7px;
  animation-delay: 1.6s;
}
/* E-Mail-Feld */
/* Dropdown-Menü — fixed, per JS auf 3D-Feld ausgerichtet */
/* Beide Kopfmenues — Konto und Sprache — haengen an derselben Kante und
   beginnen auf derselben Hoehe. Gesetzt wird das in kopfMenuePlatzieren();
   hier stehen nur die gemeinsamen Eigenschaften.                     */
.auth-menu {
  position: fixed;
  z-index: 300;
  background: var(--white);
  display: none;
  text-align: right;
}
/* Die z-index 300 der Menues gilt nur innerhalb der Kopfleiste — sie ist
   mit z-index 70 ein eigener Stapelzusammenhang. Nach aussen zaehlten die
   Menues also nur 70 und lagen unter dem rechten Randhinweis (150). Auf
   kleinen Fenstern reichen sie bis zu ihm hinunter. Solange eines offen
   steht, hebt sich darum die ganze Leiste.                           */
body.menu-open .hdr,
.hdr:has(.lang-wrap.offen) {
  z-index: 310;
}
body.menu-open .ctx {
  visibility: hidden;
}
.auth-menu-item {
  display: block;
  width: 100%;
  text-align: right;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
  white-space: nowrap;
}
.auth-menu-item:hover {
  color: var(--black);
}
/* Punkte, die nur manche Konten sehen (Benutzerkonten) — display:block oben
   würde hidden sonst überstimmen */
.auth-menu-item[hidden] {
  display: none;
}

/* ── SPRACHKNOPF ──────────────────────────────────────
   Zwei Grossbuchstaben rechts vom Anmeldezeichen. Sie sagen, welche
   Sprache GILT — darum stehen sie fett und schwarz. Faehrt die Maus
   darueber, klappt die Liste auf und der Code graut aus: in diesem
   Moment ist die Wahl offen, nichts steht fest. Es braucht keinen
   Klick zum Aufklappen; gewaehlt wird erst durch den Klick auf einen
   Namen, danach steht der neue Code wieder fett da.

   Satz wie ein Chip: Familie var(--sans) wie die Kreditanzeige, 14 px.
   Das Gewicht bleibt beim Ausgrauen auf 700 — ein Wechsel wuerde die
   Breite springen lassen und die Kopfleiste zucken.                  */
.lang-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
#lang-btn {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--black);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0 2px 14px;
  line-height: 1;
  transition: color 0.12s;
}
/* Beim Ueberfahren die uebliche Rueckmeldung, bei offener Liste
   dieselbe Graustufe: solange gewaehlt wird, steht nichts fest.
   Dieselbe Antwort geben die beiden Nachbarn — das Anmeldezeichen mit
   seinem Menue und die Kreditzahlen mit der Tarifwahl. Alle drei sind
   Schalter derselben Leiste, also grauen sie gleich aus: beim Ueber-
   fahren und solange ihr Menue offen steht. Gewicht und Groesse
   bleiben, sonst zuckte die Leiste.                                 */
#lang-btn:hover,
.lang-wrap.offen #lang-btn,
.auth-btn:hover,
body.menu-open .auth-btn,
#credit-display:hover,
body.abo-app #credit-display {
  color: var(--light);
}
#credit-display {
  transition: color 0.12s;
}
/* Die Liste haengt am Knopf statt an Bildschirmkoordinaten — so klappt
   sie ohne eine Zeile Skript auf und bleibt beim Rollen an ihrem Platz.
   Sie beginnt buendig an der Unterkante des Knopfes; der sichtbare
   Abstand kommt aus dem Innenabstand, damit zwischen Knopf und Liste
   keine tote Zone entsteht, in der das Ueberfahren abreisst.        */
.lang-menu {
  position: fixed;
  z-index: 300;
  background: var(--white);
  display: none;
  padding: 0;
  text-align: right;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lang-menu::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.lang-wrap.offen .lang-menu {
  display: block;
}
/* Die Endonyme sind Namen, keine Schalterbeschriftungen — darum
   ungesperrt und in ihrer eigenen Schreibung, nicht in Versalien. */
.lang-menu-item {
  display: block;
  width: 100%;
  text-align: right;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--light);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
  white-space: nowrap;
  font-family: var(--sans);
}
.lang-menu-item:hover {
  color: var(--black);
}
.lang-menu-item.an {
  color: var(--mid);
}

.auth-menu-gap {
  height: 8px;
}