/*
 * Anmeldebildschirm `wp-login.php` — Design-System-Muster 3g.
 * Wird ausschließlich über inc/login.php geladen (login_enqueue_scripts),
 * nie im Frontend.
 *
 * Gegenspieler ist `wp-admin/css/login.min.css`. Das arbeitet an etlichen
 * Stellen selbst mit ID-Selektoren (`#login form p { margin-bottom: 0 }`),
 * weshalb `body.login form p` dort verliert — die Regeln hier stellen deshalb
 * durchgehend `body.login #login` voran und gewinnen über Spezifität statt
 * über !important. Ausnahme sind Inline-Styles fremder Plugins, die nur mit
 * !important erreichbar sind; die stehen einzeln kommentiert.
 */

/* ==========================================================================
   Fläche & Karte
   ========================================================================== */

body.login {
  background: var(--surface-quiet);
  color: var(--text-body-color);
  font-family: var(--font-ui);
  font-size: var(--text-body-s);
  line-height: var(--leading-body);
  min-height: 100vh;
  padding: var(--space-8) var(--space-5);
}

/* #login ist die Karte selbst: WordPress hat außerhalb kein Element, das
   Formular, Meldungen und Sekundärlinks gemeinsam umschließt. Das Logo sitzt
   dadurch mit in der Karte — auf wp-login.php gibt es keine Kopfzeile, die es
   sonst tragen würde. */
body.login #login {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 34px;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
}

body.login #login h1 a,
body.login #login .wp-login-logo a {
  background-image: url('../logo/logo-blau.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 210px;
  height: 46px;
  margin: 0 auto var(--space-6);
}

/* ==========================================================================
   Kopf der Karte (inc/login.php, Filter login_message)
   ========================================================================== */

.abae-login-kopf {
  margin: 0 0 var(--space-5);
}

.abae-login-titel {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: var(--leading-display);
  letter-spacing: normal;
  color: var(--text-headline);
  margin: 0 0 var(--space-2);
}

.abae-login-hinweis {
  font-size: var(--text-caption);
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

/* ==========================================================================
   Meldungen (Fehler, Hinweise)
   ========================================================================== */

body.login #login #login_error,
body.login #login .message,
body.login #login .notice,
body.login #login .success {
  background: var(--surface-quiet);
  border: 0;
  border-left: var(--border-akzent) solid var(--abae-blau);
  border-radius: var(--radius-control);
  box-shadow: none;
  color: var(--text-body-color);
  font-size: var(--text-caption);
  line-height: 1.5;
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
}

body.login #login #login_error {
  border-left-color: var(--abae-magenta);
}

body.login #login #login_error a,
body.login #login .message a,
body.login #login .notice a {
  color: var(--link-default);
  font-weight: var(--weight-bold);
}

/* ==========================================================================
   SSO-Knopf (Plugin „OpenID Connect Generic", Casdoor)
   ========================================================================== */

/* Das Plugin setzt margin per Inline-Style — nur mit !important erreichbar. */
body.login #login .openid-connect-login-button {
  margin: 0 0 var(--space-5) !important;
}

body.login #login .openid-connect-login-button .button {
  display: block;
  width: 100%;
  height: auto;
  padding: 12px 18px;
  background: var(--surface-card);
  border: var(--border-width-control) solid var(--border-strong);
  border-radius: var(--radius-control);
  color: var(--abae-blau);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  text-shadow: none;
  box-shadow: none;
}

body.login #login .openid-connect-login-button .button:hover,
body.login #login .openid-connect-login-button .button:focus {
  background: var(--surface-quiet);
  border-color: var(--abae-blau);
  color: var(--abae-blau);
}

/* ==========================================================================
   Formular
   ========================================================================== */

/* Die Karte ist #login — das Formular selbst bleibt rahmenlos. */
body.login #login form {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  font-family: var(--font-ui);
}

body.login #login form p,
body.login #login form .user-pass-wrap {
  margin: 0 0 var(--space-4);
}

body.login #login form label {
  display: block;
  margin: 0 0 7px;
  color: var(--text-headline);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  line-height: 1.3;
}

body.login #login form .input,
body.login #login form input[type='text'],
body.login #login form input[type='email'],
body.login #login form input[type='password'] {
  width: 100%;
  margin: 0;
  padding: 13px 15px;
  background: var(--surface-input);
  border: var(--border-width-control) solid var(--border-strong);
  border-radius: var(--radius-control);
  box-shadow: none;
  color: var(--text-headline);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.3;
  min-height: 0;
}

/* Platz für den Augen-Knopf, sonst läuft langes Passwort darunter. */
body.login #login form .wp-pwd .input {
  padding-right: 52px;
}

body.login #login form .input:focus,
body.login #login form input[type='text']:focus,
body.login #login form input[type='email']:focus,
body.login #login form input[type='password']:focus {
  border-color: var(--abae-magenta);
  box-shadow: none;
  outline: 2px solid var(--magenta-200);
  outline-offset: 1px;
}

body.login #login form .input::placeholder {
  color: var(--text-faint);
}

/* Augen-Knopf im Passwortfeld: neutral, ohne WordPress-Blau. */
body.login #login .wp-pwd .button.wp-hide-pw {
  right: 4px;
  color: var(--neutral-600);
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.login #login .wp-pwd .button.wp-hide-pw:hover,
body.login #login .wp-pwd .button.wp-hide-pw:focus {
  color: var(--abae-blau);
  background: transparent;
}

/* Sozialer Login (Nextend) bringt eigene Knopf-Optik mit — hier nur der
   Abstand zum übrigen Formular. */
body.login #login #nsl-custom-login-form-main {
  margin: 0 0 var(--space-4);
}

/* „Angemeldet bleiben" — Zeile statt WordPress' float. */
body.login #login .forgetmenot {
  float: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--space-5);
  font-size: var(--text-caption);
  line-height: 1.3;
}

body.login #login .forgetmenot input[type='checkbox'] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--abae-blau);
}

body.login #login .forgetmenot label {
  margin: 0;
  color: var(--text-body-color);
  font-weight: var(--weight-regular);
}

body.login #login .submit,
body.login #login p.submit {
  margin: 0;
  padding: 0;
}

body.login #wp-submit,
body.login #login .submit .button-primary {
  float: none;
  display: block;
  width: 100%;
  height: auto;
  padding: 15px 24px;
  background: var(--abae-blau);
  border: 0;
  border-radius: var(--radius-control);
  box-shadow: none;
  color: var(--text-on-dark);
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  text-shadow: none;
  cursor: pointer;
  transition: background var(--transition-schnell);
}

body.login #wp-submit:hover,
body.login #wp-submit:focus,
body.login #login .submit .button-primary:hover,
body.login #login .submit .button-primary:focus {
  background: var(--blau-900);
  color: var(--text-on-dark);
}

body.login #wp-submit:focus-visible {
  outline: 2px solid var(--abae-magenta);
  outline-offset: 2px;
}

/* Hinweistexte innerhalb der Formulare (z.B. „Der Link zum Zurücksetzen …") */
body.login #login form .description,
body.login p.forgetmenot + p.description,
body.login .indicator-hint {
  color: var(--text-body-color);
  font-size: var(--text-caption);
}

/* ==========================================================================
   Sekundärlinks unter der Haarlinie
   ========================================================================== */

body.login #nav {
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0 0;
  border-top: var(--border-width) solid var(--border-hairline);
  color: var(--text-muted);
  font-size: var(--text-caption);
  line-height: 1.55;
  text-align: left;
}

body.login #backtoblog {
  margin: var(--space-2) 0 0;
  padding: 0;
  font-size: var(--text-caption);
  line-height: 1.55;
  text-align: left;
}

body.login #login .privacy-policy-page-link {
  margin: var(--space-2) 0 0;
  font-size: var(--text-caption);
  text-align: left;
}

body.login #nav a,
body.login #backtoblog a,
body.login #login .privacy-policy-page-link a {
  color: var(--link-default);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login #login .privacy-policy-page-link a:hover {
  color: var(--link-hover);
}

/* Sprachumschalter ist per Filter aus (inc/login.php); die Regel fängt den
   Fall ab, dass ein Plugin ihn wieder einblendet. */
body.login .language-switcher {
  display: none;
}

/* ==========================================================================
   Klein
   ========================================================================== */

@media (max-width: 480px) {
  body.login {
    padding: var(--space-6) var(--space-4);
  }

  body.login #login {
    padding: 24px 20px;
  }

  body.login #login h1 a,
  body.login #login .wp-login-logo a {
    width: 180px;
    height: 40px;
    margin-bottom: var(--space-5);
  }

  .abae-login-titel {
    font-size: 30px;
  }
}