/* ── Passwort-Sichtbarkeit (Auge im Feld) ────────────────────────────────────
   Gemeinsam genutzt von der Loginseite (index.php) und passwort.php — eine
   Quelle statt zweier Kopien. Das Feld liegt im .password-wrapper, der Knopf
   schwebt rechts darüber; das jeweilige Seitenskript schaltet input.type um und
   blendet über die .visible-Klasse das offene oder das durchgestrichene Auge ein.

   Diese Datei wird auf beiden Seiten ZULETZT eingebunden, damit ihre Regeln bei
   Gleichstand gewinnen. */
.password-wrapper {
    position: relative;
}

/* Das Feld muss den Wrapper voll ausfüllen, sonst klebt das absolut gesetzte
   Auge am rechten Wrapper-Rand statt am Feldrand. Beim Login ist das Feld schon
   width:100%; auf passwort.php sitzt es in .field und wurde bisher per Flex
   gestreckt — im Wrapper ist es das nicht mehr und fiele sonst auf seine schmale
   Inline-Standardbreite zurück. box-sizing, weil es hier sonst um Polsterung und
   Rahmen überliefe. */
.password-wrapper input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 44px;   /* Platz für das Auge */
}
/* passwort.php: .field input[type=password] setzt eigenes padding und schlägt die
   Regel oben — daher schärfer und typunabhängig (greift auch bei type="text"). */
.field .password-wrapper input[type="password"],
.field .password-wrapper input[type="text"] { padding-right: 44px; }

/* Überschreibt bewusst generische Button-Stile (Breite, Hintergrund, Rahmen,
   Rand, Verschiebung beim Drücken). */
.toggle-psw,
.toggle-psw:hover,
.toggle-psw:active {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: auto;
    margin: 0;
    padding: 6px;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    box-shadow: none;
    cursor: pointer;
    color: var(--text-muted);
}
.toggle-psw:hover { color: var(--text-light); }
.toggle-psw svg {
    width: 20px;
    height: 20px;
    flex: none;             /* Firefox: nicht als Flex-Item strecken */
    display: block;
    pointer-events: none;   /* Klick landet immer auf dem Knopf, nie auf dem Pfad */
}
.toggle-psw .icon-hide { display: none; }
.toggle-psw.visible .icon-show { display: none; }
.toggle-psw.visible .icon-hide { display: block; }