/* ══════════════════════════════════════════════════════════════
   PASSWORT-AUGE auf der Anmeldeseite
   ══════════════════════════════════════════════════════════════
   Das Auge blendet das eingetippte Passwort ein und aus, damit man
   Tippfehler sieht, bevor man auf "Einloggen" drueckt.

   Die Einstellungsseite hat dasselbe schon laenger (.ks-pw-wrap).
   Warum hier trotzdem eigene Klassen: Das Anmeldefeld hat andere
   Abstaende und eine andere Schriftgroesse als die Felder in den
   Einstellungen. Wuerde man die dortigen Klassen mitbenutzen,
   zoege jede Aenderung an den Einstellungen die Anmeldeseite mit.

   Die Farben sind bewusst ein mittleres Grau: Diese Datei wird NACH
   dem Dunkelmodus geladen und wuerde ihn sonst ueberschreiben. Grau
   sitzt auf hellem wie auf dunklem Grund gut lesbar.
   ══════════════════════════════════════════════════════════════ */

.ra-pw-wrap {
  position: relative;
  display: block;
  width: 100%;
}

/* Platz rechts schaffen, damit der Text nicht unter das Auge laeuft. */
.ra-pw-wrap > input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.75rem;
}

.ra-pw-auge {
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  background: none;
  border: none;
  border-radius: .35rem;
  color: #9ca3af;
  cursor: pointer;
  transition: color .12s, background-color .12s;
}

.ra-pw-auge:hover {
  color: var(--ra-akzent, #34d399);
  background: var(--ra-akzent-hell, rgba(52, 211, 153, .18));
}

/* Sichtbarer Rahmen fuer alle, die mit der Tastatur bedienen. */
.ra-pw-auge:focus-visible {
  outline: 2px solid var(--ra-akzent, #34d399);
  outline-offset: 1px;
  color: var(--ra-akzent, #34d399);
}

/* Solange das Passwort offen liegt, ist das Auge in der Akzentfarbe –
   ein stiller Hinweis, dass gerade jemand mitlesen koennte. */
.ra-pw-auge.offen {
  color: var(--ra-akzent, #34d399);
}

/* ══════════════════════════════════════════════════════════════
   KNOPF "ALS APP INSTALLIEREN"
   ══════════════════════════════════════════════════════════════
   Steht unter dem Einloggen-Knopf und ist bewusst zurueckhaltend:
   ein Textknopf, kein zweiter bunter Balken. Er soll nicht mit
   dem Anmelden konkurrieren.

   Er wird erst vom Browser eingeblendet (teile/js/38-...js) und
   ist deshalb hier nicht versteckt - es gibt ihn schlicht nicht,
   solange die Installation nicht moeglich ist.
   ══════════════════════════════════════════════════════════════ */

.ra-app-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 100%;
  margin-top: .6rem;
  padding: .55rem 1rem;
  background: none;
  border: 1.5px solid #e5e7eb;
  border-radius: .5rem;
  color: #6b7280;
  font-size: .82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s;
}

.ra-app-knopf:hover {
  border-color: var(--ra-akzent, #34d399);
  color: var(--ra-akzent-dunkel, #1fae7c);
  background: var(--ra-akzent-hell, rgba(52, 211, 153, .18));
}

.ra-app-knopf:focus-visible {
  outline: 2px solid var(--ra-akzent, #34d399);
  outline-offset: 1px;
}

.ra-app-knopf svg { flex: 0 0 auto; }