/* =========================================================================
   ANMELDESEITE — wp-login.php
   Northbound, vierte Runde. Immer dark-photo ueber dem Bild: der Login ist
   der einzige Bildschirm ohne Anmeldung, er traegt die Marke und sonst
   nichts. Links die Marke, rechts eine 460 px breite Glas-Spalte in der
   Breite des Drawers.

   Die Datei liegt NACH wp-admin/css/login.css. Alles, was hier steht, ist
   entweder Aufbau (Raster, Spalten) oder das Zuruecknehmen einer Vorgabe
   von dort — Karte in Weiss, 320er Spalte, 24px-Felder, blauer Knopf.
   Kein !important: die Auflagen gewinnen ueber Reihenfolge und die
   Kennung (#login, #loginform, #wp-submit), nicht ueber Gewalt.

   Das Hintergrundbild liegt unter assets/img/emas-login.jpg (self-hosted,
   keine externe Quelle). Fehlt es, bleibt die gesenkte Flaeche stehen und
   die Spalte ist weiterhin lesbar.

   JPEG und nicht PNG: das Bild ist eine Fotografie ohne Transparenz
   (24 bpp RGB) und liegt unter zwei Verlaufslagen und einem Scrim von
   23 % — ein Format ohne Verlust zahlt hier fuer Genauigkeit, die niemand
   sieht. Als PNG waren es 1740 KB, als JPEG bei Guete 82 sind es 205 KB.
   Die Quelle misst 1376x768; mehr Bildpunkte hat sie nicht, und ein
   Hochrechnen wuerde die Datei vergroessern, ohne Schaerfe hinzuzufuegen.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1 — GRUNDFLAECHE
   Bild, Scrim 23 % und der Verlauf oben/unten aus dem Entwurf als drei
   Lagen EINES background — ein Pseudoelement braeuchte eine eigene Stapel-
   ebene und stuende den Spalten im Weg.
   ------------------------------------------------------------------------- */
/* dvh statt vh: der Grund traegt einen Verlauf ueber die volle Hoehe. Mit
   100vh rechnet iOS Safari ohne Adressleiste, der untere Verlauf saesse
   dann unterhalb des Sichtbaren und die Seite bekaeme einen Rollweg. Die
   vh-Zeile bleibt als Rueckfall stehen. */
body.login.emas-login {
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    font-family: var(--nb-font);
    color: var(--nb-ink);
    background-color: var(--nb-sunken);
    background-image:
        linear-gradient(180deg, rgba(16, 18, 20, 0.34) 0%, rgba(16, 18, 20, 0) 26%, rgba(16, 18, 20, 0) 58%, rgba(16, 18, 20, 0.40) 100%),
        linear-gradient(rgba(20, 22, 24, 0.23), rgba(20, 22, 24, 0.23)),
        url('../img/emas-login.jpg');
    background-repeat: no-repeat;
    background-size: cover, cover, cover;
    background-position: center, center, center 40%;
    display: grid;
    /* 460 ist das Mass des Entwurfs und bleibt die Obergrenze. Auf einem
       schmalen Monitor (Tablet quer, 1024–1280) nimmt die Spalte weniger,
       sonst bleibt der Marken-Seite kein Platz mehr fuer den Satz. Unter
       360 wird das Formular selbst eng — dort faellt die Seite eine Stufe
       tiefer auf eine Spalte, siehe Abschnitt 7. */
    grid-template-columns: minmax(0, 1fr) clamp(360px, 34vw, 460px);
    align-items: stretch;
}

/* -------------------------------------------------------------------------
   2 — MARKEN-SPALTE
   ------------------------------------------------------------------------- */
.emas-login__brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--nb-space-5);
    min-width: 0;
    padding: clamp(32px, 4.4vw, 64px);
}

.emas-login__mark {
    display: flex;
    align-items: center;
    gap: var(--nb-space-3);
    width: max-content;
    max-width: 100%;
    color: var(--nb-ink);
    text-decoration: none;
}

.emas-login__mark:hover,
.emas-login__mark:focus-visible {
    color: var(--nb-ink);
}

.emas-login__markname {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.emas-login__wordmark {
    font-size: var(--nb-size-card-title);
    line-height: var(--nb-lh-card-title);
    font-weight: 700;
}

.emas-login__claim {
    font-size: var(--nb-size-label);
    font-weight: 500;
    color: var(--nb-ink-2);
}

.emas-login__pitch {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-3);
    max-width: 560px;
}

/* 52 ist der Titelgrad des Systems. Er steht bis hinunter zu rund 1440;
   darunter waere er in der schrumpfenden Spalte ein Satz aus Umbruechen,
   darum faellt er stufenlos bis auf den Metrik-Grad (30). */
.emas-login__pitchtitle {
    font-size: clamp(30px, 3.6vw, 52px);
    line-height: var(--nb-lh-title);
    letter-spacing: var(--nb-track-title);
    font-weight: 700;
}

.emas-login__pitchtext {
    font-size: var(--nb-size-body);
    line-height: var(--nb-lh-body);
    color: var(--nb-ink-2);
}

/* -------------------------------------------------------------------------
   3 — GLAS-SPALTE
   460 statt der 300 aus dem System: ein Anmeldeformular braucht die
   Feldbreite, und 460 ist die Drawer-Breite — beide Werte stehen im
   Handoff. Siehe docs/entscheide.md.
   ------------------------------------------------------------------------- */
.emas-login__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Auf einem flachen Bildschirm (Tablet quer, 1024x768; Notebook mit
       800er Hoehe) wird die Spalte hoeher als das Fenster. Zentriert
       schoebe sie dann auch nach OBEN hinaus, und dorthin laesst sich
       nicht scrollen — "safe" faellt in diesem Fall auf oben-buendig
       zurueck. Browser ohne das Schluesselwort verwerfen nur die zweite
       Zeile und behalten die Zentrierung. */
    justify-content: safe center;
    gap: clamp(20px, 2.6vh, 32px);
    min-width: 0;
    padding: clamp(32px, 4.6vh, 64px) clamp(24px, 2.8vw, 48px);
    background: rgba(24, 26, 28, 0.15);
    backdrop-filter: blur(12px) saturate(115%);
    animation: emas-login-in var(--nb-dur-medium) var(--nb-ease-enter) both;
}

@keyframes emas-login-in {
    from { transform: translateX(72px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

/* WordPress gibt #login eine 320er Spalte mit 8 % Kopfabstand. Hier traegt
   die Spalte selbst die Masse; #login ist nur noch die Reihe darin. */
body.login #login {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--nb-space-3);
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}

body.login #login > * {
    grid-column: 1 / -1;
}

/* Das Ladezeichen steht in der Marken-Spalte, nicht ueber dem Formular. Die
   Ueberschrift der Seite bleibt als screen-reader-text erhalten, sie steht
   ausserhalb von #login. */
body.login h1.wp-login-logo {
    display: none;
}

.emas-login__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.emas-login__caps {
    font-size: var(--nb-size-caps);
    font-weight: 500;
    letter-spacing: var(--nb-track-caps);
    text-transform: uppercase;
    color: var(--nb-ink-2);
}

.emas-login__headline {
    font-size: var(--nb-size-card-title);
    line-height: var(--nb-lh-card-title);
    font-weight: 700;
}

/* -------------------------------------------------------------------------
   4 — MELDUNGEN
   Der Fehler steht als Band mit Signalkante am Rand, nicht als weisse
   Karte. Fehlermeldungen kommen aus wp-login.php, limit-login-attempts
   und wp-2fa — alle drei nutzen dieselben Kennungen.
   ------------------------------------------------------------------------- */
body.login #login_error,
body.login .notice,
body.login .message,
body.login .success {
    margin: 0;
    padding: var(--nb-space-2) 20px;
    font-size: var(--nb-size-body);
    line-height: var(--nb-lh-body);
    color: var(--nb-ink);
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    border-left: 1px solid var(--nb-line);
    box-shadow: none;
}

body.login #login_error,
body.login .notice-error {
    color: var(--nb-error-ink);
    background: rgba(200, 68, 60, 0.10);
    border-left-color: var(--nb-error);
}

body.login .notice-warning {
    background: rgba(213, 154, 60, 0.10);
    border-left-color: var(--nb-warning);
}

body.login #login_error a,
body.login .message a,
body.login .notice a {
    color: inherit;
}

/* wp-admin setzt den Absatz IM Band auf 13px mit eigenem Abstand — der
   Hinweis stuende sonst kleiner da als die Beschriftung daneben. */
body.login .notice p,
body.login .message p,
body.login .success p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

body.login .login-error-list {
    margin: 0;
    padding-left: 20px;
}

/* -------------------------------------------------------------------------
   5 — FORMULAR
   ------------------------------------------------------------------------- */
body.login form {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-3);
    margin: 0;
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
}

/* user-pass1-wrap steht nur auf dem Zuruecksetzen-Bildschirm und ist dort,
   was user-pass-wrap bei der Anmeldung ist — siehe Abschnitt 7. */
body.login form p,
body.login form .user-pass-wrap,
body.login form .user-pass1-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-1);
    margin: 0;
}

body.login form label {
    font-size: var(--nb-size-label);
    font-weight: 500;
    line-height: 1.3;
    color: var(--nb-ink-2);
}

/* Die 24px-Felder von wp-admin auf das Steuerelement des Systems
   zuruecknehmen. Die Kennung des Formulars schlaegt "#login form .input". */
body.login #loginform .input,
body.login #loginform input[type="text"],
body.login #loginform input[type="email"],
body.login #loginform input[type="password"],
body.login form .input,
body.login form input[type="text"],
body.login form input[type="email"],
body.login form input[type="password"] {
    width: 100%;
    min-height: 56px;
    padding: 14px;
    margin: 0;
    font-size: var(--nb-size-control);
    line-height: 1.4;
    color: var(--nb-ink);
    background: var(--nb-input);
    border: 1px solid var(--nb-line-control);
    border-radius: var(--nb-radius);
    box-shadow: none;
}

/* wp-admin haelt im Passwortfeld rechts 2.5rem frei — dort sass sein
   Augen-Symbol. Der Platz wird nicht mehr gebraucht, und die Regel dort
   traegt drei Klassen (.js.login input.password-input), darum hier vier. */
body.login .wp-pwd input.password-input {
    padding: 14px;
    font-family: var(--nb-font);
}

body.login form input:focus-visible {
    outline: 2px solid var(--nb-ink);
    outline-offset: 2px;
}

/* "Passwort anzeigen" als Wort statt als Auge: das Northbound-Set hat kein
   Augen-Symbol, und das Wort ist eindeutiger. Der Knopf ist der von
   WordPress — er schaltet das Feld ohne eigenes Skript, und sein aria-label
   bleibt korrekt uebersetzt. Er wandert aus dem Feld nach oben auf die
   Grundlinie der Beschriftung. */
body.login .user-pass-wrap,
body.login .user-pass1-wrap {
    position: relative;
}

body.login .wp-pwd {
    position: static;
}

/* Die Auflage haengt an .wp-pwd, nicht nur an body.login: wp-admin
   adressiert den Knopf mit DREI Klassen (.login .button.wp-hide-pw), und
   ein Element im Selektor wiegt weniger als eine Klasse — ohne die vierte
   Klasse bliebe das 40x40-Quadrat mit 20px breitem Symbolfeld stehen, und
   das Wort liefe rechts aus der Spalte. */
body.login .wp-pwd .button.wp-hide-pw {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 24px;
    padding: 0 0 2px;
    font-size: var(--nb-size-label);
    font-weight: 500;
    line-height: 1.2;
    color: var(--nb-ink);
    background: none;
    border: 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 0;
    box-shadow: none;
}

body.login .wp-pwd .button.wp-hide-pw:hover {
    color: var(--nb-ink);
    background: none;
    border-bottom-color: var(--nb-ink);
}

body.login .wp-pwd .button.wp-hide-pw:focus {
    border: 0;
    border-bottom: 2px solid var(--nb-ink);
    box-shadow: none;
}

body.login .wp-pwd .wp-hide-pw .dashicons {
    display: inline;
    width: auto;
    height: auto;
    font-family: var(--nb-font);
    font-size: var(--nb-size-label);
    line-height: 1.3;
}

body.login .wp-pwd .wp-hide-pw .dashicons::before {
    font-family: inherit;
    content: "Passwort anzeigen";
}

/* WordPress tauscht beim Aufdecken die Klasse — daran haengt der zweite
   Wortlaut. */
body.login .wp-pwd .wp-hide-pw .dashicons-hidden::before {
    content: "Passwort verbergen";
}

/* Angemeldet bleiben. Nur die Zeile — das Kaestchen kommt aus style.css. */
body.login .forgetmenot {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: var(--nb-hit);
    float: none;
    margin: 0;
}

body.login .forgetmenot label {
    font-size: var(--nb-size-body);
    font-weight: 400;
    line-height: var(--nb-lh-body);
    color: var(--nb-ink-2);
    cursor: pointer;
}

/* Das Kaestchen selbst steht seit dem 7.9.2026 in style.css, Abschnitt 3 —
   es fuehrt #rememberme und #pw-weak in seiner Selektorliste mit. Hier stand
   bis dahin eine eigene Fassung (gefuellte Flaeche mit ausgespartem Kern),
   die sich von der in BuddyPress unterschied. Es gibt jetzt eine. */
body.login #rememberme,
body.login #pw-weak {
    vertical-align: middle;
}

/* Der Knopf: gefuellte Tinte ueber die volle Breite, mit der Wischflaeche
   des Systems. wp-core-ui faerbt .button-primary blau — die Kennung
   #wp-submit schlaegt die Klasse. */
body.login .submit {
    margin: 0;
}

body.login #wp-submit,
body.login .button-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Dasselbe Mass wie jeder andere Hauptknopf im Theme (style.css
       Abschnitt 4): Trefferziel 44, Polster 15/26. */
    min-height: var(--nb-hit);
    padding: 15px 26px;
    font-size: var(--nb-size-control);
    font-weight: 600;
    line-height: 1.2;
    color: var(--nb-base);
    text-shadow: none;
    background-color: var(--nb-ink);
    background-image: linear-gradient(to right, var(--nb-wipe), var(--nb-wipe));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    border: 0;
    border-radius: var(--nb-radius);
    box-shadow: none;
    transition: background-size var(--nb-dur-medium) var(--nb-ease);
}

body.login #wp-submit:hover,
body.login .button-primary:hover {
    color: var(--nb-base);
    background-color: var(--nb-ink);
    background-size: 100% 100%;
}

/* buttons.css legt einen blauen Ring um den Knopf. Der Fokus im Northbound
   ist die Tinte-Kontur mit Abstand, sonst stuende hier die einzige
   Markenfarbe der Seite. */
body.login #wp-submit:focus,
body.login #wp-submit:focus-visible {
    outline: 2px solid var(--nb-ink);
    outline-offset: 3px;
    box-shadow: none;
}

body.login #wp-submit[disabled],
body.login .button-primary[disabled] {
    color: var(--nb-ink);
    background-color: var(--nb-wash);
    background-image: none;
    opacity: 0.42;
    cursor: default;
}

/* -------------------------------------------------------------------------
   6 — FUSSZEILE DER SPALTE
   ------------------------------------------------------------------------- */
body.login #nav {
    padding: 0;
    margin: 0;
    font-size: var(--nb-size-label);
    font-weight: 500;
}

/* Der Absatz bleibt im Markup, sein Inhalt ist gefiltert (siehe
   functions.php) — leer risse er nur eine Zeile Abstand auf. Auf den
   Bildschirmen von wp-2fa steht darin ein eigener Verweis zurueck auf die
   Startseite, den unser Filter nicht erreicht; er faellt hier mit weg, und
   das ist richtig: mitten in der Anmeldung fuehrt er nur nach wp-force-login
   wieder hierher. */
body.login #backtoblog {
    display: none;
}

body.login #nav a,
body.login .privacy-policy-page-link a {
    display: inline-block;
    min-height: 24px;
    padding-bottom: 2px;
    color: var(--nb-ink);
    border-bottom: 2px solid rgba(255, 255, 255, 0.55);
}

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

body.login .privacy-policy-page-link {
    margin: 0;
    font-size: var(--nb-size-label);
    text-align: left;
}

.emas-login__note {
    margin: 0;
    padding-top: var(--nb-space-3);
    font-size: var(--nb-size-label);
    font-weight: 400;
    line-height: var(--nb-lh-body);
    color: var(--nb-ink-2);
    border-top: 2px solid rgba(255, 255, 255, 0.18);
}

/* Die Adresse ist der einzige Link im Satz — Tinte statt Sekundaerton,
   damit sie sich vom Text abhebt, und mit dem Regelstrich der uebrigen
   Verweise. */
.emas-login__note a {
    color: var(--nb-ink);
    border-bottom: 2px solid rgba(255, 255, 255, 0.55);
    /* Der Umbruch faellt notfalls in die Adresse, nicht aus der Spalte. */
    word-break: break-word;
}

.emas-login__note a:hover {
    color: var(--nb-ink-2);
}

/* -------------------------------------------------------------------------
   7 — PASSWORT VERGESSEN UND NEUES PASSWORT
   Beide Bildschirme laufen ueber dieselbe Datei wie die Anmeldung, aber die
   Behauptung, sie traegen auch dieselben Kennungen, stimmt nur zur Haelfte.
   Geprueft am gerenderten Markup beider Seiten:

   "Passwort vergessen" (action=lostpassword) traegt form#lostpasswordform
   mit einem p, einem label und input#user_login.input — alles, was die
   Abschnitte 4 bis 6 schon bedienen. Dort fehlt nichts.

   "Neues Passwort setzen" (action=rp/resetpass) bringt fuenf Bausteine mit,
   die auf der Anmeldeseite nicht vorkommen: div.user-pass1-wrap um den
   Passwortblock, die Staerkeanzeige #pass-strength-result in .wp-pwd, die
   Rueckfrage div.pw-weak, den Hinweis p.description.indicator-hint und die
   Knopfzeile p.submit.reset-pass-submit mit dem zweiten Knopf
   button.wp-generate-pw.

   Der Knopf "Passwort anzeigen" haengt absolut an seinem Vorfahren. Auf der
   Anmeldeseite ist das .user-pass-wrap (Abschnitt 5); hier heisst der
   Kasten .user-pass1-wrap, und ohne ihn in derselben Auflage stuende der
   Knopf mangels gestelltem Vorfahren in der Ecke des Fensters. Darum sind
   die beiden Regeln in Abschnitt 5 erweitert und nicht hier verdoppelt.
   ------------------------------------------------------------------------- */

/* Die Staerkeanzeige. forms.css faerbt sie pastellrot bis pastellgruen und
   bringt damit die einzigen Buntwerte der Seite mit — hier ist sie ein Band
   wie die Meldungen aus Abschnitt 4. Sie steht anfangs mit dem Platzhalter
   "Passwortstaerke" im Markup und bekommt ihre Klasse erst beim Tippen;
   ohne Klasse soll dort nichts stehen, darum haengt die ganze Optik an den
   Zustandsklassen. */
body.login #pass-strength-result {
    display: none;
}

body.login #pass-strength-result.short,
body.login #pass-strength-result.bad,
body.login #pass-strength-result.good,
body.login #pass-strength-result.strong {
    display: block;
    width: 100%;
    margin: var(--nb-space-2) 0 0;
    padding: 10px 20px;
    font-size: var(--nb-size-label);
    font-weight: 500;
    line-height: var(--nb-lh-body);
    text-align: left;
    color: var(--nb-ink-2);
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    border-left: 1px solid var(--nb-line);
    border-radius: var(--nb-radius);
}

/* Signalfarbe nur, wo etwas im Weg steht. "Mittel" und "Stark" sind kein
   Ereignis, das eine Farbe braucht — dieselbe Entscheidung wie bei den
   Einstellungen (buddypress.css, Abschnitt 16). */
body.login #pass-strength-result.short,
body.login #pass-strength-result.bad {
    color: var(--nb-error-ink);
    border-left-color: var(--nb-error);
}

/* Die Rueckfrage "schwaches Passwort bestaetigen". WordPress blendet sie mit
   jQuery ein, sobald die Anzeige "short" oder "bad" meldet, und wieder aus,
   sobald nicht — nur den Ausgangszustand deckt niemand ab: wp-admin gibt
   .pw-weak hier nur einen Aussenabstand. Ohne diese Zeile blitzt das
   Kaestchen beim Aufbau der Seite auf. show() schreibt display: block als
   Stilattribut und schlaegt die Regel dann. */
body.login .pw-weak {
    display: none;
    margin: 0;
}

body.login .pw-weak label {
    margin-left: 12px;
    font-size: var(--nb-size-body);
    font-weight: 400;
    line-height: var(--nb-lh-body);
    color: var(--nb-ink-2);
    vertical-align: middle;
    cursor: pointer;
}

/* Der Hinweis zur Passwortlaenge. wp-admin gibt ihm 16px Fussabstand ueber
   eine Kennung (#login form .indicator-hint) — den Abstand stellt hier die
   Luecke des Formulars. */
body.login #login form .indicator-hint {
    margin: 0;
    font-size: var(--nb-size-label);
    line-height: var(--nb-lh-body);
    color: var(--nb-ink-3);
}

/* Die Knopfzeile. wp-admin stellt die beiden Knoepfe mit zwei Klassen
   nebeneinander und schiebt sie auseinander; in einer 460er Spalte ist das
   eng, und "Passwort generieren" ist ohnehin die Nebensache. Also
   untereinander: der Nebenknopf als Wort mit Regelstrich wie "Passwort
   anzeigen", der Hauptknopf darunter ueber die volle Breite. Die
   Reihenfolge bleibt die des Markups, damit Blick und Tabulator dieselbe
   nehmen. */
body.login .reset-pass-submit {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    gap: var(--nb-space-2);
    justify-content: flex-start;
}

body.login .reset-pass-submit .wp-generate-pw {
    width: auto;
    min-width: 0;
    min-height: 24px;
    margin: 0;
    padding: 0 0 2px;
    font-size: var(--nb-size-label);
    font-weight: 500;
    line-height: 1.2;
    color: var(--nb-ink);
    background: none;
    border: 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 0;
    box-shadow: none;
}

body.login .reset-pass-submit .wp-generate-pw:hover {
    color: var(--nb-ink);
    background: none;
    border-bottom-color: var(--nb-ink);
}

body.login .reset-pass-submit .wp-generate-pw:focus-visible {
    outline: 2px solid var(--nb-ink);
    outline-offset: 3px;
    box-shadow: none;
}

/* -------------------------------------------------------------------------
   8 — ZWEITER SCHRITT (wp-2fa)
   Nach Benutzername und Passwort schiebt wp-2fa einen eigenen Bildschirm
   dazwischen: Code aus der App (action=validate_2fa), Ersatzcode
   (backup_2fa) und die Aufforderung, 2FA einzurichten (grace_2fa).

   Am Quelltext des Plugins geprueft (includes/classes/Authenticator/
   class-login.php, Methode login_html) und einmal gerendert. Das Geruest ist
   unser eigenes: das Plugin ruft login_header() und die Aktion login_footer
   auf, also stehen Marken-Spalte, Glas-Spalte und Fussnote wie sonst. Das
   Formular traegt die Kennung loginform, das Feld input#authcode.input, der
   Knopf #wp-submit — alles schon bedient. Auch die Fehlermeldung stimmt:
   div#login_error mit strong.wp-2fa-error-msg darin, die Auflage aus
   Abschnitt 4 greift.

   Zurueckzunehmen bleiben vier Stellen, an denen das Plugin eigenes CSS
   und ungueltiges Markup mitbringt. Sein <style>-Block steht IM Koerper der
   Seite und damit nach diesem Stylesheet — dort gewinnt nur die hoehere
   Auflage, nicht die Reihenfolge.
   ------------------------------------------------------------------------- */

/* Der Block des Plugins setzt "#login form > p" auf 15 px Fussabstand. Die
   Abstaende des Formulars kommen hier aus seiner Luecke; 15 px obendrauf
   machen die Zeilen ungleich. Die Kennung im fremden Selektor zwingt zur
   Kennung hier. */
body.login #login form > p {
    margin-bottom: 0;
}

/* Das Plugin schachtelt den Absendeknopf als <p class="submit"> IN ein
   leeres <p>. Der Browser schliesst das aeussere p davor und laesst es als
   leere Zeile stehen — sichtbar wird sie als zusaetzliche Luecke des
   Formulars. Sie enthaelt nur Leerraum, :empty greift also nicht; das
   Merkmal ist ihre Lage vor der Knopfzeile. Die Auflage muss dabei auf die
   Koerperklasse des Plugins zeigen: auf der Anmeldeseite steht vor der
   Knopfzeile p.forgetmenot, und die soll bleiben. */
body.wp-2fa-login #loginform > p:has(+ p.submit) {
    display: none;
}

/* Im Code-Feld steht ein verdrehtes </br>. Der Browser liest es als <br>,
   und in einem Flexkasten ist das ein eigener Posten mit eigener Zeile
   zwischen Beschriftung und Feld. */
body.login #loginform p > br {
    display: none;
}

/* Dasselbe im Fehlerband: dort steht hinter dem Text ein <br />. */
body.login #login_error br {
    display: none;
}

/* "Oder einen Ersatzcode verwenden". Das Plugin rueckt den Verweis um 24 px
   ein und faerbt ihn grau (#50575e) — beides aus seinem <style>-Block, also
   mit zwei Klassen. Hier steht er buendig unter dem Formular und traegt den
   Regelstrich der uebrigen Verweise. */
body.login .backup-methods-wrap {
    margin-top: 0;
    padding: 0;
}

body.login .backup-methods-wrap p {
    margin: 0;
    font-size: var(--nb-size-label);
    font-weight: 500;
}

body.login .backup-methods-wrap a {
    display: inline-block;
    min-height: 24px;
    padding-bottom: 2px;
    color: var(--nb-ink);
    text-decoration: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.55);
}

body.login .backup-methods-wrap a:hover {
    color: var(--nb-ink-2);
}

/* "Code erneut senden" beim Weg ueber E-Mail. Zweiter Knopf neben dem
   Hauptknopf, also die Haarlinienform wie emas-button--secondary: zwei
   gefuellte Flaechen untereinander saegen zweimal "hier entlang". */
body.login .wp-2fa-email-resend .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--nb-hit);
    padding: 15px 26px;
    font-size: var(--nb-size-control);
    font-weight: 600;
    line-height: 1.2;
    color: var(--nb-ink);
    text-shadow: none;
    background: none;
    /* --nb-line-control wie .emas-button--secondary; --nb-line ist die
       dekorative Haarlinie und gehoert nicht an ein Steuerelement. */
    border: 1px solid var(--nb-line-control);
    border-radius: var(--nb-radius);
    box-shadow: none;
}

body.login .wp-2fa-email-resend .button:hover {
    color: var(--nb-ink);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--nb-ink);
}

body.login .wp-2fa-email-resend .button:focus-visible {
    outline: 2px solid var(--nb-ink);
    outline-offset: 3px;
    box-shadow: none;
}

/* Das Plugin haengt hinter die Glas-Spalte ein leeres <div class="clear">.
   Es landet damit im Raster der Seite und zieht dort eine zweite Zeile auf.
   wp-login.php selbst gibt es nicht aus. */
body.login .emas-login__panel + .clear {
    display: none;
}

/* -------------------------------------------------------------------------
   9 — KOMPAKT
   Northbound legt unter 768 px nichts fest; das hier ist die Hochrechnung
   aus L3: Marke oben, Spalte darunter ueber die volle Breite.

   Die Stufen: bis 900 stehen Marke und Spalte nebeneinander und atmen
   ueber clamp (Abschnitte 1–3). Ab 900 kippt die Seite auf eine Spalte —
   zwei nebeneinander gehen nicht mehr auf, sobald die Glas-Spalte ihre
   360er Untergrenze erreicht und der Marken-Seite unter 540 bleiben.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
    body.login.emas-login {
        grid-template-columns: 1fr;
        /* Die Marke nimmt ihre Hoehe, die Spalte den Rest — aber nur, wenn
           der Rest reicht: auf einem quer gehaltenen Tablet ist das Fenster
           flacher als das Formular hoch ist. */
        grid-template-rows: auto minmax(min-content, 1fr);
        background-position: center, center, 77% 30%;
    }

    .emas-login__brand {
        padding: clamp(24px, 3.6vw, 40px) clamp(20px, 3.6vw, 40px);
    }

    /* Der Satz bleibt, solange eine Tablet-Breite ihn traegt; erst auf dem
       Telefon faellt er weg (L3 zeigt ihn nicht). */
    .emas-login__pitch {
        max-width: none;
    }

    .emas-login__panel {
        /* Auf einer Spalte waeren Felder ueber die volle Tablet-Breite
           unlesbar breit. Das Glas bleibt randlos, der Inhalt haelt die
           Feldbreite des Entwurfs. */
        align-items: center;
        padding: clamp(24px, 3.6vw, 40px) clamp(20px, 3.6vw, 40px);
        animation-name: emas-login-rise;
    }

    .emas-login__panel > * {
        width: 100%;
        max-width: 460px;
    }

    @keyframes emas-login-rise {
        from { transform: translateY(24px); opacity: 0; }
        to   { transform: translateY(0); opacity: 1; }
    }
}

/* Telefon-Hochformat und alles, was quer flacher ist als das Formular:
   der Satz der Marken-Seite faellt weg, damit die Anmeldung ohne Rollen
   sichtbar bleibt. */
@media (max-width: 700px), (max-height: 620px) {
    .emas-login__pitch {
        display: none;
    }
}

/* Quer gehaltenes Telefon: Marke und Spalte nebeneinander, sonst steht
   das Formular unter einem Bildschirm voll Marke. */
@media (max-width: 900px) and (min-width: 601px) and (max-height: 520px) {
    body.login.emas-login {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
        grid-template-rows: 1fr;
    }

    .emas-login__brand {
        justify-content: center;
    }

    .emas-login__panel {
        animation-name: emas-login-in;
    }
}

@media (max-width: 520px) {
    .emas-login__mark {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--nb-space-2);
    }

    .emas-login__mark .emas-logo {
        width: 56px;
        height: 56px;
    }

    /* 44 statt 24: auf dem Telefon ist der Link ein Ziel fuer den Finger. */
    body.login #nav a {
        min-height: var(--nb-hit);
        display: flex;
        align-items: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .emas-login__panel {
        animation: none;
    }
}