/* Die beiden Zugangsseiten: Anmelden und Passwort festlegen.
   Bewusst schmal und ohne Ablenkung, es gibt hier nur eine Sache zu
   tun. */

.rahmen.schmal { max-width: 480px; }

/* Das Passwortfeld mit dem Auge daneben. Carmen am 06.09.2026:
   "Außerdem soll es ein Augensymbol geben, mit dem die Kundin ihr
   eingegebenes Passwort anzeigen kann." Das Auge trägt zusätzlich ein
   Wort, denn ein Symbol allein ist für viele raten. */
/* stil.css kennt nur input[type="text"]. Ein Passwortfeld saehe sonst
   aus wie vom Browser dazugestellt. */
.rahmen.schmal input[type="password"] {
  width: 100%;
  padding: .8rem 1rem;
  font: inherit;
  font-size: 1.02rem;
  color: var(--schrift);
  background: var(--schwarz-tief);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund);
  margin-bottom: 1.2rem;
}
.rahmen.schmal input[type="password"]:focus {
  outline: none; border-color: var(--rose-matt);
}

.zfeld { position: relative; }
.zfeld input { margin-bottom: 1.2rem; }
.zfeld input { width: 100%; padding-right: 7.5rem; }

.zauge {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: .35rem;
  background: none; border: 1px solid var(--bordeaux-rand);
  border-radius: 8px; padding: .35rem .6rem;
  color: var(--schrift-leise); font: inherit; font-size: .88rem;
  cursor: pointer;
}
.zauge:hover { color: var(--schrift); border-color: var(--rose-matt); }
.zauge::before { content: "👁"; font-size: 1rem; line-height: 1; }

.zmail {
  padding: .7rem .9rem; margin-bottom: 1.2rem;
  background: var(--bordeaux-tief); border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund); color: var(--schrift-leise);
}

/* Wie viele Zeichen noch fehlen. Steht direkt unter dem Feld, damit sie
   es beim Tippen sieht und nicht erst nach dem Klick. */
.zzaehler {
  margin: -.6rem 0 1rem; font-size: .95rem; min-height: 1.5rem;
  color: var(--schrift-leise);
}
.zzaehler.reicht { color: var(--gruen); }
.zzaehler.reicht::before { content: "✓ "; }

.haupt.breit { width: 100%; margin-top: .4rem; }
a.haupt.breit {
  display: block; text-align: center; text-decoration: none;
  padding: .8rem 1.2rem;
}

.ztrenner {
  margin-top: 1.6rem; padding-top: 1.2rem;
  border-top: 1px solid var(--bordeaux-rand);
}