/* =========================================================
   Auge im Passwortfeld
   ---------------------------------------------------------
   Kleiner Knopf rechts IM Feld, der den getippten Text sichtbar
   macht. Bewusst seitenuebergreifend gehalten: Login, Profil,
   Admin, Passwort-Reset und das Demo-Gate haben jeweils ihr
   eigenes CSS mit eigenen Variablennamen -- deshalb hier nur
   Fallback-Ketten (var(--a, var(--b, #farbe))) statt Annahmen.

   Die .pw-huelle baut passwort-auge.js zur Laufzeit. Ohne JS
   bleibt das Feld exakt so, wie es vorher war (kein toter Knopf).

   Alle Regeln sind mit .pw-huelle vorangestellt: die Seiten-CSS
   enthaelt teils blanke `button`- und `button:hover`-Regeln
   (z.B. login.html mit width:100% + Farbverlauf). Zwei Klassen
   schlagen die sicher -- ohne !important.
   ========================================================= */

.pw-huelle { position: relative; display: block; }

/* Klasse + Element (0,1,1) schlaegt die blanken input-Regeln (0,0,1)
   der Seiten-CSS. display:block entfernt die Baseline-Luecke unter
   dem Feld, sonst sitzt der Knopf ein paar Pixel zu hoch. */
.pw-huelle > input {
  display: block;
  padding-right: 2.65rem;
}

.pw-huelle .pw-auge {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 2.5rem; height: auto;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0;
  border: none; background: none; box-shadow: none;
  border-radius: var(--radius-s, 8px);
  color: var(--text-mut, var(--muted, #6b7a90));
  opacity: 1;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.pw-huelle .pw-auge:hover {
  color: var(--blau, var(--accent, #4a90d9));
  background: none;
  opacity: 1;
}
.pw-huelle .pw-auge:focus-visible {
  outline: 2px solid var(--blau, var(--accent, #4a90d9));
  outline-offset: -3px;
}
.pw-huelle .pw-auge svg {
  width: 18px; height: 18px;
  display: block;
  pointer-events: none;
}

/* Umschalten der beiden Symbole haengt am aria-pressed des Knopfes --
   damit gibt es genau einen Zustand, den JS pflegen muss. */
.pw-huelle .pw-auge .auge-zu { display: none; }
.pw-huelle .pw-auge[aria-pressed="true"] .auge-auf { display: none; }
.pw-huelle .pw-auge[aria-pressed="true"] .auge-zu { display: block; }

/* Das Demo-Gate sperrt seine Eingabe mit letter-spacing, sonst rutscht
   der letzte Punkt unter das Auge. */
.pw-huelle > .dgate-input { padding-right: 2.9rem; }