/* FrontendUserLogin.css
   Ersetzt automatisch die Standard-Styles des Login-Formulars,
   sobald diese Datei unter site/templates/FrontendUser/ liegt
   (laut Modul-Doku).

   WICHTIG: Die genauen Klassennamen im vom Modul gerenderten Formular
   kenne ich nicht aus erster Hand (keine Doku dazu gefunden) — die
   Selektoren unten sind bewusst generisch gehalten (Element-Selektoren
   statt spezifischer Klassen) und sollten daher trotzdem greifen.
   Falls nach dem Einbinden noch Standard-Optik durchscheint: einmal
   den Quelltext der gerenderten Registrierungsseite im Browser
   ansehen (Rechtsklick > Seitenquelltext) und mir die tatsächlichen
   Klassennamen der <form>-Elemente schicken — dann mache ich die
   Selektoren spezifisch statt generisch.
*/

.lof-auth-form,
.lof-auth-body form{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:420px;
}

.lof-auth-body form ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.lof-auth-body form li{
  margin:0;
  padding:0;
}

.lof-auth-form label,
.lof-auth-body form label{
  font-family:var(--font-ui);
  font-weight:600;
  font-size:13px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:-8px;
}

.lof-auth-form input[type="text"],
.lof-auth-form input[type="email"],
.lof-auth-form input[type="password"],
.lof-auth-body form input[type="text"],
.lof-auth-body form input[type="email"],
.lof-auth-body form input[type="password"]{
  background:var(--bg-raised);
  border:1px solid var(--line);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:14px;
  padding:10px 12px;
  outline:none;
}

.lof-auth-form input:focus,
.lof-auth-body form input:focus{
  border-color:var(--amber);
}

.lof-auth-form button,
.lof-auth-form input[type="submit"],
.lof-auth-body form button,
.lof-auth-body form input[type="submit"]{
  background:var(--amber);
  color:#0b0d0b;
  border:none;
  font-family:var(--font-ui);
  font-weight:600;
  font-size:15px;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:11px 18px;
  cursor:pointer;
  align-self:flex-start;
}

.lof-auth-form button:hover,
.lof-auth-body form button:hover{
  background:var(--amber-bright);
}

/* Fehler-/Erfolgsmeldungen, die das Modul selbst rendert */
.lof-auth-body .error,
.lof-auth-body .errors,
.lof-auth-body p.error{
  color:var(--red-alert);
  font-family:var(--font-mono);
  font-size:12.5px;
}

.lof-auth-body .success,
.lof-auth-body .message{
  color:var(--green-live);
  font-family:var(--font-mono);
  font-size:12.5px;
}