/*
 * Die Anmeldemaske (wp-login.php) in der Sprache des Produkts.
 *
 * Kein eigener Entwurf: dieselben Farb-Tokens, dieselben zwei Schriften und
 * dasselbe blaue Markenband wie in jedem Werkzeug. Wer sich anmeldet, soll die
 * Seite wiedererkennen, an der er gerade stand.
 *
 * Die Adressen unten sind RELATIV zu dieser Datei - deshalb liegt sie hier bei den
 * Schriften und nicht als Zeichenkette im PHP.
 *
 * WordPress liefert das Formular als #loginform in einem #login-Rahmen; die Marke
 * sitzt in #login h1 a als Hintergrundbild. Genau diese Handvoll Regeln wird
 * ueberschrieben, der Rest bleibt WordPress' Aufbau - eine nachgebaute Maske waere
 * bei jedem Update ein Risiko.
 */

@font-face{font-family:"Oswald";src:url("fonts/oswald-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}

:root{
  --papier:#EEF1F4; --karte:#FFFFFF; --ink:#14181F; --ink-weich:#4A525E;
  --linie:#D3DAE2; --blau:#0B4DA2; --blau-tief:#08346D; --gelb:#F7B500;
  --gelb-tief:#C88E00; --auf-blau:#FFFFFF;
  --schatten:0 1px 2px rgba(16,40,80,.06), 0 8px 24px rgba(16,40,80,.10);
}
@media (prefers-color-scheme:dark){
  :root{
    --papier:#0E1116; --karte:#171C23; --ink:#EEF1F4; --ink-weich:#AAB4C0;
    --linie:#2A313B; --blau:#4C8DE0; --blau-tief:#2E6FC0; --gelb:#F7B500;
    --gelb-tief:#F7B500; --auf-blau:#14181F;
    --schatten:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
  }
}

body.login{
  background:var(--papier);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
}

/* Das Markenband — dasselbe Zeichen wie oben in jedem Werkzeug. */
/*
 * EIGENE Band-Farben, keine allgemeinen Blautoene - genau wie in app.css. Die Tokens
 * --blau/--blau-tief drehen im dunklen Design ins Helle, und die weisse Marke darauf
 * war dann kaum noch zu sehen. Beim ersten Wurf dieser Datei ist mir genau das
 * passiert; gemerkt hat es kein Test, sondern der Blick auf die echte Seite.
 */
#login h1 a,
.login h1 a{
  background-image:url("brand/logo-band-weiss.svg");
  background-size:auto 40px;
  background-position:center center;
  background-repeat:no-repeat;
  background-color:#08346D;
  width:100%;
  height:88px;
  margin:0 0 22px;
  border-radius:12px;
  border-bottom:4px solid var(--gelb);
  box-shadow:var(--schatten);
}

#login{padding:6% 0 0;width:340px}

/* Das Formular als Karte, wie die Karten im Produkt. */
.login form{
  background:var(--karte);
  border:1px solid var(--linie);
  border-radius:12px;
  box-shadow:var(--schatten);
  padding:26px 24px;
  margin-top:0;
}
.login label{
  color:var(--ink);
  font-size:.86rem;
  font-weight:600;
}
.login form .input,
.login input[type="text"],
.login input[type="password"]{
  background:var(--karte);
  color:var(--ink);
  border:1px solid var(--linie);
  border-radius:8px;
  padding:.55rem .7rem;
  font-size:1rem;
  font-family:inherit;
  box-shadow:none;
}
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus{
  border-color:var(--blau);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--blau) 25%, transparent);
  outline:none;
}

/* Der Hauptknopf ist gelb wie im Produkt, nicht WordPress-blau. */
.login .button-primary,
.wp-core-ui .button-primary{
  background:var(--gelb);
  border:1px solid var(--gelb-tief);
  color:#14181F;
  border-radius:8px;
  font-family:"Oswald","Arial Narrow",sans-serif;
  font-weight:600;
  font-size:1rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-shadow:none;
  box-shadow:none;
  min-height:44px;
  padding:0 1.1rem;
  width:100%;
  float:none;
}
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus{
  background:var(--gelb-tief);
  border-color:var(--gelb-tief);
  color:#14181F;
}
.wp-core-ui .button-primary:focus{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--blau) 35%, transparent);
  outline:none;
}

/* Die Nebenwege: "Passwort vergessen" und der Rueckweg zur Seite. */
.login #nav,
.login #backtoblog{
  padding:0;
  /* B131: der Innenabstand der Links bringt eigene Hoehe mit - der Aussenabstand der
     Zeile wird kleiner, damit der Abstand im Bild derselbe bleibt wie vorher. */
  margin:2px 0 0;
  text-align:center;
}
.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a{
  color:var(--ink-weich);
  font-size:.86rem;
  text-decoration:underline;
  text-underline-offset:2px;
  /*
   * Befund B131: beide Nebenwege massen 18 px Hoehe. Im Fliesstext waere das richtig -
   * ein Link ist dort so hoch wie seine Zeile, und der Pruefriegel nimmt Fliesstext-Links
   * aus gutem Grund aus. Hier stehen sie aber allein untereinander und sind die einzige
   * Fortsetzung fuer jemanden, der sein Passwort nicht weiss.
   *
   * inline-block + Innenabstand: die Trefferflaeche waechst, das Aussehen nicht. Genau
   * derselbe Handgriff wie bei `.fk-fuss a`, das dafuer schon min-height traegt. Der
   * Unterstrich bleibt an der Schrift, weil das Padding unter der Grundlinie liegt.
   */
  display:inline-block;
  padding:12px 10px;
  min-height:44px;
  box-sizing:border-box;
}
.login #nav a:hover,
.login #backtoblog a:hover,
.login .privacy-policy-page-link a:hover{color:var(--blau)}
.login #nav a:focus-visible,
.login #backtoblog a:focus-visible{
  outline:2px solid var(--blau);
  outline-offset:2px;
  border-radius:3px;
}

/* Meldungen in den Farben des Produkts statt in WordPress-Rot/Blau. */
.login .message,
.login .notice,
.login #login_error{
  background:var(--karte);
  border-left:4px solid var(--blau);
  border-radius:0 8px 8px 0;
  box-shadow:var(--schatten);
  color:var(--ink);
  font-size:.9rem;
}
.login #login_error{border-left-color:#B3261E}

/* Die Sprachauswahl gehoert zur WordPress-Verwaltung, nicht in unsere Anmeldung. */
.login .language-switcher{display:none}