/* design-system: migriert */
/* ==========================================================================
   Passwort-Sichtbar-Umschalten — wird von password-toggle.js automatisch um
   jedes input[type="password"] auf der Seite gelegt (statisch beim Laden UND
   dynamisch nachträglich erzeugte Felder, siehe wirePasswordToggle()).

   2026-10-11 (Optik-Stufe 3, DESIGNRICHTUNG C1): Das Auge stand in den
   Einstellungen NEBEN dem Feld (Feld endete bei x=550, Auge bei x=679).
   Grund: der Wrapper war 100 % breit, das Feld darin behielt seine
   natürliche Breite (.settings-input hat keine width), das Auge saß rechts
   am Wrapper. Jetzt füllt das Feld den Wrapper, das Auge liegt damit immer
   im Feld — auf der Anmeldeseite (Feld ohnehin 100 %) ändert sich nichts.
   ========================================================================== */
.password-toggle-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
}

.password-toggle-wrap > input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding-right: calc(var(--control-h-m) + var(--space-2)) !important;
}

.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: var(--space-1);
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: calc(var(--radius-s) - 2px);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.password-toggle-btn:hover { color: var(--text-primary); background: var(--fill-2); }
/* Drücken: Fläche dunkler und minimal kleiner, sofort auf pointerdown. */
.password-toggle-btn:active {
  background: var(--fill-3);
  transform: translateY(-50%) scale(var(--press-scale));
}
.password-toggle-btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 0;
}
.password-toggle-btn svg { width: 18px; height: 18px; }
.password-toggle-btn .icon-eye-off { display: none; }
.password-toggle-btn[data-visible="true"] .icon-eye { display: none; }
.password-toggle-btn[data-visible="true"] .icon-eye-off { display: block; }

@media (pointer: coarse) {
  .password-toggle-btn { width: 40px; height: 40px; }
  .password-toggle-wrap > input { padding-right: calc(40px + var(--space-2)) !important; }
}