/*
 * 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)
   ========================================================================== */

/* **Keine Kante links** (korrigiert 2026-08-24). Bis dahin trugen alle
   Meldungen eine 3px-Kante in Blau bzw. Magenta. Die ist im Design-System
   vergeben: `--border-akzent` ist ausdrücklich die „Zitat- und
   Kernforderungs-Kante" (`tokens/shape.css`) — ein inhaltlicher Marker, keine
   Kastenform. Für Hinweise sagt das System etwas anderes: „Hellblau #EDF1F6 —
   ruhige Fläche, Formulare, Hinweise", und Flächen liegen flach mit
   umlaufendem 1px-Rand statt Schatten. Genau das steht jetzt hier. */
body.login #login #login_error,
body.login #login .message,
body.login #login .notice,
body.login #login .success {
  background: var(--surface-quiet);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  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);
}

/* Fehler bleiben unterscheidbar — aber über den Rand, nicht über eine Kante.
   Magenta ist Signalfarbe und darf den Rahmen tragen; als Fläche hinter
   Fließtext ist sie im System ausgeschlossen. */
body.login #login #login_error {
  border-color: var(--border-signal);
}

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)

   **Wanderung eines Knopfes, drei Runden.** Muster 3g setzte ABAE-SSO als
   blauen Primärknopf an die erste Stelle. Das traf die falsche Gruppe: SSO ist
   für die rund zehn internen Mitglieder gedacht, alle anderen kommen über
   Google, Facebook oder ein Passwort. Am 2026-08-12 wanderte er deshalb
   entfärbt ans Ende der Karte, am 2026-08-23 unter Facebook und Google.

   **Seit 2026-08-24 trägt er dieselbe Optik wie die beiden** — gleicher
   Rahmen, gleiche Schriftgröße, gleiche Höhe. Was ihn zurücknimmt, ist jetzt
   allein die Reihenfolge: Alle drei Knöpfe stehen unter der Trennlinie
   „oder", also hinter dem E-Mail-Weg, den fast alle gehen. Drei Knöpfe
   nebeneinander, von denen einer kleiner und grauer ist als die anderen,
   lesen sich als „der funktioniert vielleicht nicht" — das war beim
   Anmeldeweg für die eigenen Mitglieder die falsche Aussage. Wen er meint,
   sagt seine Beschriftung („Mitglieder: …"), nicht seine Farbe.
   ========================================================================== */

/* Verschoben wird der Knopf in PHP (`abae_login_sso_verschieben()`), nicht per
   CSS: Er käme sonst als Kind der Karte an, und die Karte müsste dafür zum
   Flex-Container werden — womit die Fußzeile „← Zurück zur Website ·
   Datenschutzerklärung" ihre gemeinsame Zeile verlöre, weil `inline-block`
   für Flex-Kinder wirkungslos ist. Innerhalb des Formulars reicht `order`.

   Das Plugin setzt margin per Inline-Style — nur mit !important erreichbar.
   Der Wert gilt für die übrigen Ansichten (Registrierung), in denen der Knopf
   stehen bleibt, wo das Plugin ihn hinsetzt; in der Anmeldung überschreibt ihn
   die Gruppen-Regel weiter unten auf die 10px der Knopfliste. */
body.login #login .openid-connect-login-button {
  margin: var(--space-4) 0 0 !important;
}

/* Werte absichtlich gleich mit `.nsl-button` weiter unten. Nextend erzwingt
   seine Geometrie per Inline-Style und !important; hier reicht Spezifität —
   deshalb stehen dieselben Zahlen zweimal statt in einer gemeinsamen Regel.
   Wer eine ändert, ändert die andere mit. */
body.login #login .openid-connect-login-button .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  padding: 13px 18px;
  background: var(--surface-card);
  border: var(--border-width-control) solid var(--abae-blau);
  border-radius: var(--radius-control);
  color: var(--abae-blau);
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  text-shadow: none;
  box-shadow: none;
  transition: border-color var(--transition-schnell), background var(--transition-schnell);
}

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);
}

/* --------------------------------------------------------------------------
   Reihenfolge im Anmeldeformular

   Über `order` statt über die DOM-Position, weil Nextend seine Knöpfe nach
   dem Laden selbst ans Formularende hängt (`form.appendChild`). Die
   Reihenfolge muss also unabhängig davon halten, wo das Element gerade steht.
   `<script>`/`<style>`/`type=hidden` sind nicht dargestellt und stören als
   Flex-Kinder nicht.

   Gezählt wird in Zehnerschritten: Zwischen zwei Bausteinen ist so Platz,
   ohne die ganze Kette neu zu nummerieren. Genau das war beim Umbau am
   2026-08-24 zweimal nötig.

   Nur für die Anmeldung: Registrierung, „Passwort vergessen" und das Setzen
   eines neuen Passworts haben andere Formulare, in denen es nichts zu ordnen
   gibt und in denen die eigenen Bausteine gar nicht ausgegeben werden.
   -------------------------------------------------------------------------- */

body.login-action-login #login form#loginform {
  display: flex;
  flex-direction: column;
}

/* Grundstellung für alles, was nicht ausdrücklich einsortiert ist. Sie steht
   bewusst in der Mitte und nicht auf 0: Ein unbekanntes Plugin-Element landet
   damit kurz vor dem Absende-Knopf statt ganz oben vor dem E-Mail-Feld. */
body.login-action-login #login form#loginform > * {
  order: 50;
}

/* Das E-Mail-Feld ist das einzige Kind ohne Klasse. Zwei Wege zum selben
   Ziel, weil beide je eine Schwäche haben: `:has()` ist der genaue Treffer,
   `p:first-of-type` hält auch dann, wenn ein Plugin das Feld umbaut. Beide
   schlagen die Grundstellung über Spezifität. */
body.login-action-login #login form#loginform > p:first-of-type,
body.login-action-login #login form#loginform > p:has(#user_login) {
  order: 10;
}

body.login-action-login #login form#loginform .abae-login-meldung {
  order: 20;
}

body.login-action-login #login form#loginform .user-pass-wrap {
  order: 30;
}

body.login-action-login #login form#loginform .abae-login-merkzeile {
  order: 40;
}

body.login-action-login #login form#loginform .submit {
  order: 60;
}

body.login-action-login #login form#loginform .abae-login-trenner {
  order: 70;
}

body.login-action-login #login form#loginform #nsl-custom-login-form-main {
  order: 80;
  margin: 0;
}

/* Dritter Knopf derselben Gruppe: gleicher Abstand wie zwischen Facebook und
   Google (`.nsl-container-buttons { gap: 10px }`), damit die drei Wege als
   ein Block lesbar sind und nicht als zwei plus ein Nachzügler. */
body.login-action-login #login form#loginform .openid-connect-login-button {
  order: 90;
  margin: 10px 0 0 !important;
}

body.login-action-login #login form#loginform .abae-login-fuss {
  order: 100;
}

/* --------------------------------------------------------------------------
   Reihenfolge in der Registrierung

   Dieselbe Technik, dieselbe Logik: erst der eingetippte Weg, dann die
   Trennlinie, dann die Knöpfe. Nextend hängt seine Knöpfe auch hier selbst ans
   Formularende, `order` ist also auch hier die einzig haltbare Lösung.

   E-Mail vor Benutzername, umgekehrt zu WordPress: Wer aus der Anmeldung
   herüberkommt, bringt seine Adresse mit — sie gehört ans erste Feld.
   -------------------------------------------------------------------------- */

body.login-action-register #login form#registerform {
  display: flex;
  flex-direction: column;
}

/* Grundstellung in der Mitte, damit Unbekanntes (Honigtopf des
   Antispam-Plugins, versteckte Felder) nicht vor den Feldern landet. */
body.login-action-register #login form#registerform > * {
  order: 40;
}

body.login-action-register #login form#registerform > p:has(#user_email) {
  order: 10;
}

body.login-action-register #login form#registerform > p:has(#user_login) {
  order: 20;
}

body.login-action-register #login form#registerform #reg_passmail {
  order: 30;
}

body.login-action-register #login form#registerform .submit {
  order: 50;
}

body.login-action-register #login form#registerform .abae-login-trenner {
  order: 60;
}

body.login-action-register #login form#registerform #nsl-custom-login-form-main {
  order: 70;
  margin: 0;
}

body.login-action-register #login form#registerform .openid-connect-login-button {
  order: 80;
  margin: 10px 0 0 !important;
}

body.login-action-register #login form#registerform .abae-login-fuss {
  order: 90;
}

/* WordPress' eigener Kasten „Für diese Website registrieren" wiederholt
   wortgleich, was die Überschrift der Karte schon sagt. Ebenso `#nav`: Es
   führt nach „Anmelden" und „Passwort vergessen?" — das erste steht jetzt in
   der Fußzeile, das zweite hat auf einer Seite, die ein Konto anlegt, nichts
   zu suchen. */
body.login-action-register #login .message.register,
body.login-action-register #login #nav {
  display: none;
}

/* „Du erhältst eine Registrierungsbestätigung per E-Mail." ist ein Hinweis,
   kein Fließtext — dieselbe Stufe wie der Satz unter der Überschrift und wie
   die Fußzeile. In Fließtextgröße war er das schwerste Element zwischen
   Formular und Knopf. */
body.login-action-register #login form#registerform #reg_passmail {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-caption);
  line-height: 1.55;
}

/* Ohne `:has()`-Unterstützung fielen beide Felder auf die Grundstellung und
   stünden damit hinter dem Hinweistext, aber immer noch vor dem Knopf und der
   Trennlinie — unschön sortiert, nie unbrauchbar. Der Rückfall ist geprüft
   worden, indem die beiden Regeln versuchsweise entfernt wurden. */

/* --------------------------------------------------------------------------
   Zwei Stufen: erst E-Mail, dann Passwort

   Ausgeblendet wird nur, was das Skript ausblenden lässt — die Klasse
   `abae-login-zweistufig` setzt `assets/js/login.js` selbst, sobald es läuft.
   Ohne Skript greift keine dieser Regeln und das Formular steht vollständig
   da. Umgekehrt (Server liefert halb, Skript ergänzt) wäre jeder Skriptfehler
   eine gesperrte Anmeldung.
   -------------------------------------------------------------------------- */

body.login #login form.abae-login-zweistufig:not(.abae-login-stufe-2) .user-pass-wrap,
body.login #login form.abae-login-zweistufig:not(.abae-login-stufe-2) .abae-login-merkzeile {
  display: none;
}

/* --------------------------------------------------------------------------
   Meldung unter dem E-Mail-Feld („noch kein Konto", leere Eingabe)
   -------------------------------------------------------------------------- */

.abae-login-meldung {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-quiet);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card);
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--text-body-color);
}

/* Muss explizit dastehen: Als Flex-Kind mit gesetztem `order` ist die Regel
   des Browsers für `[hidden]` schnell überschrieben. */
.abae-login-meldung[hidden] {
  display: none;
}

/* Weiter-Knopf auf einer Quittung (siehe abae_login_kopf()). Gefüllt wie der
   Absende-Knopf: Auf einer Seite ohne Formular ist er die einzige Handlung. */
body.login #login .abae-login-quittung-knopf {
  display: block;
  width: 100%;
  margin: var(--space-5) 0 0;
  padding: 15px 24px;
  background: var(--abae-blau);
  border-radius: var(--radius-control);
  color: var(--text-on-dark);
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background var(--transition-schnell);
}

body.login #login .abae-login-quittung-knopf:hover,
body.login #login .abae-login-quittung-knopf:focus {
  background: var(--blau-900);
  color: var(--text-on-dark);
}

body.login #login .abae-login-meldung a {
  color: var(--link-default);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

/* WordPress' eigene „Angemeldet bleiben"-Zeile und die Sekundärlinks darunter
   sind durch die eigene Zeile bzw. den Fußtext ersetzt (siehe inc/login.php).
   Bewusst nur in der Anmeldung — in den übrigen Ansichten sind sie der einzige
   Weg zurück.

   Die Quittungen (`?checkemail=…`) sind davon nicht betroffen — geprüft am
   2026-08-26, nachdem hier zunächst das Gegenteil angenommen wurde: Sie
   tragen die Körper-Klasse `login-action-checkemail`, und WordPress rendert
   `#nav` dort ohnehin nicht. Ihr Weg weiter steckt im Meldungstext bzw. im
   Knopf aus `abae_login_kopf()`. */
body.login-action-login #login form#loginform .forgetmenot,
body.login-action-login #login #nav {
  display: none;
}

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;
}

/* --------------------------------------------------------------------------
   Google-Knopf (Nextend) als Sekundärknopf nach Muster 3g

   Nextend bringt eine eigene Knopf-Optik samt Inline-Styles und eigenem
   <style>-Block mit; die Geometrie muss deshalb mit !important gesetzt werden.
   Das farbige „G" bleibt bewusst stehen: Muster 3g zeigt einen reinen
   Textknopf, Googles Branding-Vorgaben für „Anmelden mit Google" verlangen
   aber die Wortmarke mit Logo. Form folgt dem Design, das Zeichen bleibt.
   -------------------------------------------------------------------------- */

body.login #login #nsl-custom-login-form-main {
  margin: 0 0 var(--space-4);
}

/* Nextend legt die Knopfliste als `inline-grid` an — sie schrumpft damit auf
   die Textbreite (gemessen 231px in einer 370px-Spalte), egal wie breit der
   Knopf selbst gesetzt ist. Die Breite muss deshalb an der Liste beginnen,
   nicht am Knopf. */
/* Der Abstand zum SSO-Knopf ist im Muster 10px — er kam aber aus drei Quellen
   und summierte sich auf 35px (gemessen): 10px vom SSO-Knopf selbst, 20px aus
   `.nsl-container-login-layout-below { padding: 20px 0 0 }` und 5px aus
   `.nsl-container-buttons { padding: 5px 0 }`. Die beiden Plugin-Polster
   müssen weg, sonst ist die 10px-Vorgabe nicht erreichbar. */
body.login #login #nsl-custom-login-form-main .nsl-container {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* `gap` steht hier auf Vorrat: Sobald Facebook in Nextend freigeschaltet wird,
   rendert das Plugin einen zweiten Knopf in dieselbe Liste. Ohne den Abstand
   klebten die beiden aneinander, weil der Außenabstand der Knöpfe
   (`margin: 5px 0` aus dem Plugin-Stylesheet) hier auf 0 steht. */
body.login #login #nsl-custom-login-form-main .nsl-container-buttons {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  gap: 10px;
}

body.login #login #nsl-custom-login-form-main .nsl-container-buttons a {
  display: block;
  width: 100%;
  margin: 0;
}

body.login #login #nsl-custom-login-form-main .nsl-button {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 13px 18px !important;
  background: var(--surface-card) !important;
  /* Blauer statt neutraler Rand: Google ist jetzt der obere von zwei
     gleichrangigen Wegen und darf mehr Präsenz haben als ein Formularfeld,
     aber weniger als der gefüllte Absende-Knopf. */
  border: var(--border-width-control) solid var(--abae-blau) !important;
  border-radius: var(--radius-control) !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: border-color var(--transition-schnell), background var(--transition-schnell);
}

body.login #login #nsl-custom-login-form-main .nsl-button:hover {
  background: var(--surface-quiet) !important;
  border-color: var(--abae-blau) !important;
}

body.login #login #nsl-custom-login-form-main .nsl-button-svg-container {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto;
}

body.login #login #nsl-custom-login-form-main .nsl-button-svg-container svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Beschriftung mittig wie im Muster. `text-align` allein reicht nicht: Nextend
   lässt den Beschriftungsblock die Restbreite füllen (`flex: 1`), womit der
   Text linksbündig am Zeichen klebte statt mit ihm zusammen in der Mitte zu
   stehen. Erst `flex: 0 1 auto` macht aus Zeichen und Text eine Gruppe, die
   `justify-content: center` des Knopfes dann zentriert. */
body.login #login #nsl-custom-login-form-main .nsl-button-label-container {
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  flex: 0 1 auto !important;
  font-family: var(--font-ui) !important;
  font-size: 17px !important;
  font-weight: var(--weight-bold) !important;
  line-height: 1.2 !important;
  color: var(--abae-blau) !important;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Trennlinie „oder" (inc/login.php)

   Stand bis 2026-08-24 über dem Formular und hieß „oder mit E-Mail". Seit
   E-Mail oben führt, trennt sie in die andere Richtung: oben der eingetippte
   Weg, unten die drei Knöpfe. Damit reicht das Wort allein.
   -------------------------------------------------------------------------- */

.abae-login-trenner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: var(--space-4) 0;
}

.abae-login-trenner::before,
.abae-login-trenner::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-hairline);
}

/* Muster 3g setzt hier `--text-faint`. Das erreicht auf Weiß 2,14:1 und wäre
   bei 13px faktisch nicht lesbar — die Beschriftung ist aber die Erklärung,
   warum unter dem Formular noch drei Knöpfe kommen. Deshalb die kräftigere
   Neutralstufe (6,2:1), wie sie in den Formularen schon gilt. */
.abae-login-trenner span {
  font-size: 13px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neutral-700);
}

/* --------------------------------------------------------------------------
   „Angemeldet bleiben" + „Passwort vergessen?" in einer Zeile (inc/login.php)
   -------------------------------------------------------------------------- */

.abae-login-merkzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 var(--space-5);
  font-size: var(--text-caption);
}

/* Muss `body.login #login form label` von weiter oben schlagen — das setzt
   für die echten Feld-Labels `display: block` und einen Abstand darunter. */
body.login #login form label.abae-login-merken {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--text-body-color);
  font-weight: var(--weight-regular);
  line-height: 1.3;
}

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

body.login #login a.abae-login-vergessen {
  color: var(--abae-magenta);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

body.login #login a.abae-login-vergessen:hover {
  color: var(--link-hover);
}

/* --------------------------------------------------------------------------
   Fußzeile der Karte: „Noch kein Konto? Registrieren" (inc/login.php)

   Bis 2026-08-24 stand hier ein Absatz, der erklärte, dass die Social-Knöpfe
   ein Konto gleich mit anlegen. Er war die Krücke einer Karte, die den
   Kontowunsch nirgends direkt beantwortete. Seit die Registrierung auch aus
   Stufe 1 heraus angeboten wird („Zu dieser Adresse gibt es noch kein
   Konto"), reicht hier die kurze Zeile.
   -------------------------------------------------------------------------- */

.abae-login-fuss {
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0 0;
  border-top: var(--border-width) solid var(--border-hairline);
  font-size: var(--text-caption);
  line-height: 1.55;
  color: var(--neutral-700);
}

body.login #login .abae-login-fuss a {
  color: var(--link-default);
  font-weight: var(--weight-bold);
}

/* „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);
}

/* Der Absende-Knopf ist der einzige gefüllte Knopf der Karte. Muster 3g hatte
   ihn zurückgenommen, weil dort ABAE-SSO die Führung hatte; seit der E-Mail-Weg
   oben steht, ist er der Abschluss des Weges, den fast alle gehen — und damit
   der Primärknopf. Er trägt in Stufe 1 „Weiter", in Stufe 2 „Anmelden"; die
   Beschriftung wechselt in assets/js/login.js. */

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;
}

/* Muster 3g zeigt „← Zurück zur Website · Datenschutzerklärung" als eine
   Zeile. WordPress gibt beide als eigenständige Blöcke aus und bietet keinen
   gemeinsamen Wrapper — als Inline-Blöcke fließen sie trotzdem in eine Zeile,
   der Punkt dazwischen kommt aus dem Datenschutz-Block. */
body.login #backtoblog {
  display: inline-block;
  margin: var(--space-4) 0 0;
  padding: 0;
  font-size: var(--text-caption);
  line-height: 1.55;
  text-align: left;
}

/* `width: auto` ist hier der eigentliche Hebel: WordPress gibt dem Block
   `width: 100%`, womit er trotz `inline-block` die ganze Zeile belegt und der
   Link daneben umgebrochen wird. */
body.login #login .privacy-policy-page-link {
  display: inline-block;
  width: auto;
  margin: var(--space-4) 0 0;
  font-size: var(--text-caption);
  line-height: 1.55;
  text-align: left;
}

body.login #login .privacy-policy-page-link::before {
  content: '·';
  color: var(--border-strong);
  margin: 0 6px 0 8px;
}

/* Ohne die Anmeldeknöpfe steht der Fußtext nicht im Formular — dann muss der
   Abstand von #nav kommen wie bisher. */
body.login-action-login #backtoblog,
body.login-action-login #login .privacy-policy-page-link {
  margin-top: var(--space-4);
}

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;
  }

  /* Nebeneinander bleiben beide Elemente zwar im Bild, „Angemeldet bleiben"
     bricht aber zweizeilig neben einem einzeiligen Link um. Untereinander
     liest sich das ruhiger. */
  .abae-login-merkzeile {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .abae-login-merken {
    flex: 1 1 100%;
  }
}