/* /css/components/toggle.css */
@layer components {
  /* Passwort-Auge – generisch für alle Seiten */
  .pw-eye-wrap {
    position: relative;
    display: block;           /* lässt sich wie ein normales Feld verhalten */
  }
  .pw-eye-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    inline-size: 34px;
    block-size: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #e5e7eb00 !important;
    background: #fff;
    color: #a1a1a1 !important;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
  .pw-eye-btn:hover { background: #f8fafc; }
  .pw-eye-btn:focus-visible {
    outline: 2px solid var(--accent-blue, #2563eb);
    outline-offset: 2px;
  }
  .pw-eye-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    display: block;
  }
  .pw-eye-btn .eye-closed { display: none; }
  .pw-eye-btn.is-on .eye-open { display: none; }
  .pw-eye-btn.is-on .eye-closed { display: block; }

  /* Falls ein Browser sein eigenes Reveal-Icon zeigt (altes Edge/IE) */
  input[type="password"]::-ms-reveal { display: none; }
}