/* ── 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;
}
/* Die Sprachliste hat keinen Grund (s. u.), anders als das Kontomenü,
   dessen weiße Fläche bis an den Rand reicht. Reicht sie bis zum rechten
   Randhinweis „Bild“ hinunter, stünde er mitten in ihren Namen — nur dann
   ruht er, solange sie offen ist (gemessen in core/i18n.js). Er geht mit
   der Liste sofort weg und blendet danach wie gewohnt wieder auf. */
body.sprachliste-ueber-bild .edge-hint-right {
  opacity: 0 !important;
  transition: none;
}
body.menu-open .ctx {
  visibility: hidden;
}
/* Rechte Flucht: die Sperrung hinter dem letzten Buchstaben zieht die
   Zeile zurück. 5,5 statt 4 Punkte: die Zeile ist 24 Punkte hoch, so groß
   wie eine Trefferfläche sein soll (V3). */
.auth-menu-item {
  display: block;
  width: calc(100% + var(--t-label-sperrung));
  margin-right: calc(-1 * var(--t-label-sperrung));
  text-align: right;
  font-size: var(--t-label-groesse);
  font-weight: var(--t-label-gewicht);
  letter-spacing: var(--t-label-sperrung);
  text-transform: uppercase;
  color: var(--mid);
  background: none;
  border: none;
  cursor: pointer;
  padding: 5.5px 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.
   Kein Grund hinter der Liste (V3): auf der Anmeldeseite liegt das
   Rauschen der Startgrafik, und eine weisse Flaeche stand darin wie ein
   aufgeklebter Zettel. In der App ist die Seite ohnehin weiss.      */
.lang-menu {
  position: fixed;
  z-index: 300;
  background: none;
  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: 5.5px 0; /* 24 Punkte wie das Kontomenue */
  transition: color 0.15s;
  white-space: nowrap;
  font-family: var(--sans);
}
.lang-menu-item:hover {
  color: var(--black);
}
.lang-menu-item.an {
  color: var(--black);
  font-weight: 700;
}
/* Vor dem bewegten Startbild steht die Sprachwahl in einer weissen
   KORONA (V3 24.09.2026): mehrere weiche weisse Schatten um jede Schrift,
   dicht am Zeichen fast deckend, nach aussen verlaufend. So liest sie
   sich wie auf dem weissen Papier der App, ohne dass ein Zettel entsteht.
   Das gilt fuer den Knopf und fuer jeden Namen der aufgeklappten Liste -
   NUR solange das Startbild laeuft: nicht angemeldet (body.locked), und
   waehrend es nach der Anmeldung noch abblendet (body.rauscht, bis die
   Kreuzblende durch ist body.entrauscht). Der Kern ist bis 8 px fuenffach
   voll weiss, aussen reicht der Schein bis 32 px - so steht auch vor
   dunklem und grauem Grund ein heller Hof um jedes Wort. */
:root {
  --schrift-korona:
    0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 5px #fff, 0 0 8px #fff,
    0 0 12px rgba(255, 255, 255, 0.95), 0 0 18px rgba(255, 255, 255, 0.9),
    0 0 25px rgba(255, 255, 255, 0.75), 0 0 32px rgba(255, 255, 255, 0.55);
}
body.locked #lang-btn,
body.rauscht #lang-btn,
body.entrauscht #lang-btn,
body.locked .lang-menu-item,
body.rauscht .lang-menu-item,
body.entrauscht .lang-menu-item {
  text-shadow: var(--schrift-korona);
}
/* Dazu dunklere Schrift: vor dem bewegten Grund war das helle Grau zu
   blass. Hier ruhen die Namen - und der Knopf, solange die Wahl offen
   ist - in dunklem Grau (#555); die Hand macht einen Namen schwarz, und
   die geltende Sprache steht schwarz UND fett. */
body.locked .lang-menu-item,
body.rauscht .lang-menu-item {
  color: #555;
}
body.locked .lang-menu-item:hover,
body.rauscht .lang-menu-item:hover {
  color: var(--black);
}
body.locked .lang-menu-item.an,
body.rauscht .lang-menu-item.an {
  color: var(--black);
  font-weight: 700;
}
body.locked #lang-btn:hover,
body.rauscht #lang-btn:hover,
body.locked .lang-wrap.offen #lang-btn,
body.rauscht .lang-wrap.offen #lang-btn {
  color: #555;
}
/* Die Liste rollt (overflow-y:auto) und schneidet darum alles ab, was
   ueber ihren Rand ragt - auch den Schein der Namen. Innen Luft fuer die
   Korona, aussen ebenso viel negativer Rand: die Namen stehen weiter
   genau dort, wo das Menue sie hinsetzt. Oben nur 34 Punkte (der Abstand
   zum Knopf): so beginnt die Kiste an der Unterkante des Knopfes und
   legt sich nicht ueber ihn. */
body.locked .lang-menu,
body.rauscht .lang-menu {
  padding: 34px 40px 40px;
  margin: -34px -40px 0 0;
}

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