/*
 * Die Login-Seite von WordPress im Gewand der Lernplattform.
 *
 * Farben kommen ausnahmslos ueber var(--mx-...) aus farben.css im
 * Lernkern. Die Rueckfallwerte sind wortgleich mit denen des Kerns,
 * damit ein Ladefehler nicht durch eine abweichende Farbe verdeckt
 * wird. Dieselbe Regel wie im Theme.
 *
 * Die Auswahlmerkmale stammen aus wp-login.php und sind deshalb
 * englisch. Sie werden nicht umbenannt; sie gehoeren WordPress.
 *
 * Angelegt mit P33 am 2026-08-29.
 */

body.login {
    background: var(--mx-primaer, #00254F);
    color: var(--mx-text, #1a202c);
}

#login {
    width: 22rem;
    max-width: 92vw;
    padding: 7vh 0 4vh;
}

/* Das Zeichen der Plattform statt des Zeichens von WordPress. */
.login h1 a {
    background-image: url(../bilder/logo-mathealex.svg);
    background-size: 72px 72px;
    width: 72px;
    height: 72px;
    margin-bottom: 1.5rem;
}

/* Die Karte mit dem Formular. */
.login form {
    background: var(--mx-karte, #ffffff);
    border: 0;
    border-radius: var(--mx-radius-gross, 12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    padding: 1.7rem 1.6rem 1.5rem;
    margin-top: 0;
}

.login label {
    color: var(--mx-text-mittel, #4a5568);
    font-size: .95rem;
}

.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
    border: 1px solid var(--mx-rahmen, #e2e8f0);
    border-radius: var(--mx-radius, 8px);
    background: var(--mx-karte, #ffffff);
    color: var(--mx-text, #1a202c);
    padding: .55rem .7rem;
    font-size: 1rem;
    box-shadow: none;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
    border-color: var(--mx-primaer, #00254F);
    box-shadow: 0 0 0 3px var(--mx-akzent-zart, #F6DADA);
    outline: none;
}

/* Die Zeile "Eingeloggt bleiben" braucht Luft nach unten.
 *
 * WordPress laesst sie mit einem kleinen Rand unmittelbar auf dem
 * Knopf sitzen. Am 2026-08-30 von Alex gemeldet: "Der Hakenbereich ist
 * viel zu nah an dem Knopf darunter." Er hat recht, und es ist mehr als
 * Optik -- ein Kaestchen dicht ueber einem grossen Knopf wird am Telefon
 * mit dem Daumen leicht verfehlt, und dann meldet man sich an, statt den
 * Haken zu setzen.
 *
 * Das Kaestchen bekommt zugleich seine volle Groesse zurueck und einen
 * Abstand zum Wort daneben.
 */
/* Ueber die Kennung des Formulars und nicht ueber .login allein.
 *
 * WordPress schreibt `.login form .forgetmenot { margin-bottom: 0 }`.
 * Das ist eine Klasse mehr an Staerke als `.login .forgetmenot`, und am
 * 2026-08-30 gemessen blieb der Abstand deshalb bei null: Kaestchen und
 * Knopf standen weiterhin unmittelbar aufeinander. Mit #loginform ist
 * die Regel staerker als alles, was das Formular mitbringt. */
#loginform .forgetmenot {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 1.1rem 0 1.5rem;
    float: none;
    line-height: 1.4;
}

#loginform .forgetmenot input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: 0 0 auto;
}

#loginform .forgetmenot label { font-size: 1rem; }

/* Der Absatz mit dem Knopf traegt bei WordPress selbst einen Rand nach
   oben. Der stuende jetzt zusaetzlich zu dem oben und macht die Luecke
   ungleich; hier wird sie an einer Stelle bestimmt. */
#loginform .submit { margin-top: 0; }

/* Der Verweis auf die Datenschutzseite steht linksbuendig wie alles
 * andere unter dem Formular.
 *
 * WordPress setzt ihn mittig, waehrend "Passwort vergessen?" und der
 * Weg zurueck darueber links stehen. Am 2026-08-30 von Alex gemeldet:
 * "Entweder alles linksbuendig oder alles zentral." Links ist die
 * richtige Wahl, weil die Karte darueber auch links anfaengt -- eine
 * mittige Zeile unter drei linken bricht die Kante.
 *
 * Ueber #login, weil die Regel von WordPress dieselbe Kennung benutzt. */
#login .privacy-policy-page-link {
    margin: 1.2rem 0 0;
    text-align: left;
}

/* Der Knopf sieht aus wie .knopf im Theme: Dunkelblau, im
   Zeigefinger-Zustand Blau. */
.login .button-primary {
    background: var(--mx-primaer, #00254F);
    border: 1px solid var(--mx-primaer, #00254F);
    border-radius: var(--mx-radius, 8px);
    color: var(--mx-karte, #ffffff);
    font-weight: 600;
    text-shadow: none;
    box-shadow: none;
    width: 100%;
    padding: .55rem 1.2rem;
    height: auto;
    line-height: 1.4;
}

.login .button-primary:hover,
.login .button-primary:focus {
    background: var(--mx-sekundaer, #1e3a5f);
    border-color: var(--mx-sekundaer, #1e3a5f);
    color: var(--mx-karte, #ffffff);
}

/* Die Verweise stehen auf dem dunklen Grund und tragen deshalb den
   Akzent, nicht das Dunkelblau der Schrift. */
.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
    color: var(--mx-akzent, #F2A9A9);
}

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

/* Meldungen und Fehler in den Farben des Systems. */
.login .message,
.login .notice,
.login #login_error {
    border-radius: var(--mx-radius, 8px);
    border-left-width: 4px;
    box-shadow: none;
}

.login .message,
.login .notice {
    border-left-color: var(--mx-primaer, #00254F);
}

.login #login_error {
    border-left-color: var(--mx-falsch, #991b1b);
    color: var(--mx-falsch-text, #7F1D1D);
    background: var(--mx-falsch-flaeche, #fee2e2);
}

/* Das Auge am Passwortfeld liegt sonst auf weissem Grund im Rahmen. */
.login .wp-hide-pw {
    color: var(--mx-text-hell, #718096);
}
.login .wp-hide-pw:hover,
.login .wp-hide-pw:focus {
    color: var(--mx-primaer, #00254F);
}