/* =========================================================================
   STY Anmeldung
   -------------------------------------------------------------------------
   Die Anmeldeseite von WordPress in der Gestaltung der Seite. Sie ist für
   Mitglieder oft der erste Bildschirm nach dem Kauf — dort darf kein
   WordPress-Standard stehen.

   Geladen über login_enqueue_scripts. Die Anmeldeseite lädt sty-base.css
   nicht, deshalb stehen Schriften und Farbwerte hier noch einmal. Sie sind
   aus sty-base.css übernommen, nicht neu erfunden; ändert sich dort eine
   Farbe, muss sie hier mit.

   Die Adresse des Logos kann nicht in dieser Datei stehen — sie hängt an der
   Mediathek. functions.php reicht sie als --sty-logo nach.

   VIER ZUSTÄNDE
   -------------
   Anmelden, Passwort vergessen, „Prüfe deine E-Mail", Passwort neu setzen.
   Alle vier benutzen dieselbe Fläche; was sich unterscheidet, steht unten.

   WAS HIER NICHT PASSIERT
   -----------------------
   Kein Eingriff in Anmeldung, Weiterleitung, Nonces oder Fehlerbehandlung.
   Das ist reine Gestaltung.
   ========================================================================= */

@font-face{font-family:Poppins;src:url("../fonts/poppins-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url("../fonts/poppins-500-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url("../fonts/poppins-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url("../fonts/poppins-800-latin.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  --sty-carbon:#08090a;
  --sty-graphite:#111315;
  --sty-gold:#c9a55c;
  --sty-gold-light:#d8b96f;
  --sty-white:#f8f6f1;
  --sty-kante:rgb(248 246 241 / .16);
  --sty-flaeche:min(30rem, 92vw);
}

/* -------------------------------------------------------------------------
   Die Fläche
   -------------------------------------------------------------------------
   WordPress setzt #login auf 320px. Das ist für ein Formular mit zwei Feldern
   knapp und wirkt neben der Seite wie ein Fremdkörper. 30rem geben dem
   Formular Luft, ohne dass die Eingabefelder zu breiten Balken werden.

   Mittig steht die Fläche über die volle Höhe: bei einem kurzen Formular
   sonst oben klebend, bei einem langen (Passwort neu setzen) mit Rollbalken.
   ---------------------------------------------------------------------- */

body.login{
  background:var(--sty-carbon);
  color:var(--sty-white);
  font-family:Poppins,system-ui,sans-serif;
  min-height:100vh;
  /* Spalte, nicht Zeile: unter #login stehen auf der Anmeldeseite weitere
     Geschwister -- Sprachumschalter, Datenschutzhinweis. Als Zeile gesetzt
     stellten sie sich neben das Formular, statt darunter. */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(24px,5vh,64px) 16px;
  margin:0;
}
/* Die Geschwister bekommen dieselbe Breite wie die Fläche, damit sie sich
   daran ausrichten statt an der Fensterbreite. */
body.login > *{width:var(--sty-flaeche);max-width:100%}

#login{
  width:var(--sty-flaeche);
  max-width:100%;
  padding:0;
  margin:0;
}

/* -------------------------------------------------------------------------
   Das Logo
   -------------------------------------------------------------------------
   Das Originallogo aus der Mediathek, unverändert. Fehlt es — andere
   Installation, Mediathek noch leer —, bleibt die Wortmarke als Text stehen.
   Deshalb steht der Text im Markup und wird nur verdrängt, wenn ein Bild da
   ist: kein leerer Kasten, wo das Logo fehlt.
   ---------------------------------------------------------------------- */

.login h1{margin:0 0 clamp(20px,4vh,34px)}
.login h1 a{
  display:block;
  width:auto;
  height:auto;
  margin:0 auto;
  padding:0;
  background:none;
  text-indent:0;
  overflow:visible;
  font-family:Poppins,system-ui,sans-serif;
  font-size:1.0625rem;
  font-weight:800;
  letter-spacing:.16em;
  line-height:1.2;
  text-align:center;
  color:var(--sty-gold);
  text-decoration:none;
}
.login h1 a:hover,
.login h1 a:focus{color:var(--sty-gold-light);box-shadow:none}

/* Ist ein Logo hinterlegt, ersetzt es die Wortmarke. */
@supports (background-image:var(--sty-logo)){
  .login h1 a{
    background-image:var(--sty-logo);
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    width:min(15rem,70%);
    height:clamp(56px,9vh,88px);
    text-indent:-9999em;
    overflow:hidden;
    white-space:nowrap;
  }
}

/* -------------------------------------------------------------------------
   Das Formular
   ---------------------------------------------------------------------- */

.login form{
  background:var(--sty-graphite);
  border:1px solid rgb(201 165 92 / .2);
  border-radius:4px;
  box-shadow:0 20px 44px -18px rgb(0 0 0 / .7);
  padding:clamp(1.5rem,4vw,2.25rem);
  margin:0;
  overflow:visible;
}

.login label{
  display:block;
  color:rgb(248 246 241 / .82);
  font-size:.9375rem;
  line-height:1.5;
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"]{
  width:100%;
  box-sizing:border-box;
  background:var(--sty-carbon);
  border:1px solid var(--sty-kante);
  border-radius:2px;
  color:var(--sty-white);
  font-family:inherit;
  /* 16px verhindert, dass iOS beim Antippen hineinzoomt. */
  font-size:16px;
  line-height:1.4;
  padding:.8rem .85rem;
  margin:.35rem 0 1.15rem;
  box-shadow:none;
}
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus{
  border-color:var(--sty-gold);
  box-shadow:0 0 0 1px var(--sty-gold);
  outline:2px solid transparent;
}
.login input::placeholder{color:rgb(248 246 241 / .38)}

/* Das Augensymbol sitzt im Feld und muss mitwandern, wenn das Feld wächst. */
.login .wp-pwd{position:relative}
/* Das Auge ist ein Knopf und erbt sonst WordPress' Knopfrahmen -- ein
   sichtbarer Kasten mitten im Eingabefeld. */
.login.wp-core-ui .wp-hide-pw,
.login .wp-hide-pw{
  position:absolute;
  right:.25rem;
  top:.35rem;
  height:calc(100% - 1.5rem);
  min-height:0;
  background:none;
  border:0;
  box-shadow:none;
  padding:0 .5rem;
}
.login .wp-hide-pw .dashicons{color:rgb(248 246 241 / .6)}
.login .wp-hide-pw:hover .dashicons,
.login .wp-hide-pw:focus .dashicons{color:var(--sty-gold)}
.login .wp-hide-pw:focus{box-shadow:0 0 0 1px var(--sty-gold);border-radius:2px}

/* -------------------------------------------------------------------------
   Die Schaltfläche — derselbe Stil wie .sty-btn--primary auf der Seite
   ---------------------------------------------------------------------- */

/* Der Selektor trägt .wp-core-ui mit, weil WordPress seine Knopfhöhe über
   .wp-core-ui .button.button-large setzt -- das ist spezifischer als eine
   einzelne Klasse und hätte die Höhe auf 40px gedrückt. 52px sind das Maß,
   das auch die Schaltflächen auf der Seite haben, und liegen sicher über der
   Grenze, ab der man auf dem Telefon zuverlässig trifft. */
.login.wp-core-ui .button-primary,
.login .button-primary{
  display:inline-flex;
  line-height:1;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:3.25rem;
  background:var(--sty-gold);
  border:1px solid var(--sty-gold);
  border-radius:2px;
  color:var(--sty-carbon);
  font-family:inherit;
  font-size:.9375rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:none;
  box-shadow:none;
  float:none;
  padding-inline:1.5rem;
  transition:background-color .2s ease-out,border-color .2s ease-out,transform .2s ease-out;
}
.login.wp-core-ui .button-primary:hover,
.login.wp-core-ui .button-primary:focus,
.login .button-primary:hover,
.login .button-primary:focus{
  background:var(--sty-gold-light);
  border-color:var(--sty-gold-light);
  color:var(--sty-carbon);
}
@media (hover:hover) and (pointer:fine){
  .login .button-primary:hover{transform:translateY(-1px)}
  .login .button-primary:active{transform:translateY(0)}
}

.login .forgetmenot{display:block;margin:0 0 1.25rem;float:none}
.login .forgetmenot label{display:inline-flex;align-items:center;gap:.5rem;font-size:.9375rem}
.login input[type="checkbox"]{
  background:var(--sty-carbon);
  border-color:var(--sty-kante);
  width:1.1rem;
  height:1.1rem;
}
.login input[type="checkbox"]:checked::before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:var(--sty-gold);
  margin:0;
}
.login .submit{margin:0;float:none}

/* -------------------------------------------------------------------------
   Meldungen
   -------------------------------------------------------------------------
   Drei Arten, drei Farben an der Kante: Fehler rot, Erfolg grün, Hinweis
   gold. Die Fläche bleibt bei allen dieselbe — die Farbe trägt die Bedeutung,
   nicht ein zweiter Kasten.
   ---------------------------------------------------------------------- */

.login .message,
.login .success,
.login .notice,
.login #login_error{
  background:var(--sty-graphite);
  border:1px solid var(--sty-kante);
  border-left:3px solid var(--sty-gold);
  border-radius:0 2px 2px 0;
  color:var(--sty-white);
  box-shadow:none;
  margin:0 0 1.25rem;
  padding:.9rem 1.1rem;
  font-size:.9375rem;
  line-height:1.6;
}
.login #login_error{border-left-color:#d1604a}
.login .success{border-left-color:#7ea86a}
.login .message a,
.login #login_error a{color:var(--sty-gold);text-decoration:underline;text-underline-offset:3px}
.login .message a:hover,
.login #login_error a:hover{color:var(--sty-gold-light)}
.login #login_error strong{color:var(--sty-white)}

/* -------------------------------------------------------------------------
   Passwort vergessen und Passwort neu setzen
   -------------------------------------------------------------------------
   Beide Formulare tragen einen erklärenden Satz über den Feldern. Der ist im
   Standard so klein und grau, dass er übersehen wird — ausgerechnet dort, wo
   jemand gerade nicht weiterweiß.
   ---------------------------------------------------------------------- */

.login form p:not(.submit):not(.forgetmenot):not(.indicator-hint){
  color:rgb(248 246 241 / .72);
  font-size:.9375rem;
  line-height:1.65;
}
.login form .indicator-hint{
  color:rgb(248 246 241 / .55);
  font-size:.8125rem;
  line-height:1.5;
  padding-top:.4rem;
}

/* Die Stärkeanzeige beim neuen Passwort. */
.login #pass-strength-result{
  background:var(--sty-carbon);
  border:1px solid var(--sty-kante);
  border-radius:2px;
  color:var(--sty-white);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.04em;
  margin:0 0 1rem;
  padding:.6rem .85rem;
  text-align:left;
  width:100%;
  box-sizing:border-box;
}
.login #pass-strength-result.short,
.login #pass-strength-result.bad{border-left:3px solid #d1604a}
.login #pass-strength-result.good{border-left:3px solid var(--sty-gold)}
.login #pass-strength-result.strong{border-left:3px solid #7ea86a}

/* Der Knopf „Neues Passwort erzeugen" ist zweitrangig — Umriss statt Fläche. */
.login .wp-generate-pw{
  background:transparent;
  border:1px solid var(--sty-kante);
  border-radius:2px;
  color:var(--sty-white);
  font-family:inherit;
  font-size:.875rem;
  min-height:2.75rem;
  padding-inline:1.1rem;
  box-shadow:none;
  text-shadow:none;
}
.login .wp-generate-pw:hover,
.login .wp-generate-pw:focus{border-color:var(--sty-gold);color:var(--sty-gold);background:transparent}

/* -------------------------------------------------------------------------
   Verweise unter dem Formular
   ---------------------------------------------------------------------- */

.login #nav,
.login #backtoblog{
  text-align:center;
  padding:0;
  margin:1.1rem 0 0;
}
.login #nav a,
.login #backtoblog a{
  color:rgb(248 246 241 / .7);
  font-size:.9375rem;
  text-decoration:none;
}
.login #nav a:hover,
.login #nav a:focus,
.login #backtoblog a:hover,
.login #backtoblog a:focus{color:var(--sty-gold);box-shadow:none}

/* Der Sprachumschalter bringt einen zweiten Knopf mit -- im Standard blau.
   Er ist zweitrangig und bekommt deshalb den Umriss-Stil, nicht die Fläche. */
/* :not(.wp-hide-pw), weil das Auge im Passwortfeld ebenfalls die Klasse
   button-secondary trägt. Ohne den Ausschluss bekäme es hier den Umriss
   zurück, den die Regel weiter oben gerade entfernt hat -- und zwar
   unbemerkt, weil beide Selektoren gleich spezifisch sind und allein die
   Reihenfolge entscheidet. */
.login.wp-core-ui .button-secondary:not(.wp-hide-pw),
.login .button-secondary:not(.wp-hide-pw),
.login #language-switcher input[type="submit"]{
  background:transparent;
  border:1px solid var(--sty-kante);
  border-radius:2px;
  color:var(--sty-white);
  font-family:inherit;
  font-size:.875rem;
  font-weight:600;
  min-height:2.5rem;
  padding-inline:1rem;
  text-shadow:none;
  box-shadow:none;
  transition:border-color .2s ease-out,color .2s ease-out;
}
.login .button-secondary:not(.wp-hide-pw):hover,
.login .button-secondary:not(.wp-hide-pw):focus,
.login #language-switcher input[type="submit"]:hover,
.login #language-switcher input[type="submit"]:focus{
  background:transparent;
  border-color:var(--sty-gold);
  color:var(--sty-gold);
}

.login .language-switcher{margin-top:1.75rem}
.login .language-switcher form{
  background:none;
  border:0;
  box-shadow:none;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  flex-wrap:wrap;
}
.login .language-switcher label{display:inline-flex;align-items:center;gap:.4rem;font-size:.875rem;color:rgb(248 246 241 / .55)}
.login .language-switcher select{margin:0;padding:.45rem .6rem;font-size:.875rem}
.login .language-switcher select,
.login select{
  background:var(--sty-graphite);
  color:var(--sty-white);
  border:1px solid var(--sty-kante);
  border-radius:2px;
  font-family:inherit;
}
.login .privacy-policy-page-link{margin-top:1.5rem}
.login .privacy-policy-link{color:rgb(248 246 241 / .55);font-size:.8125rem}
.login .privacy-policy-link:hover{color:var(--sty-gold)}

/* Der Hinweis unter dem Formular erklärt, wohin die Anmeldung führt. */
.sty-login-hinweis{
  max-width:26rem;
  margin:1.25rem auto 0;
  text-align:center;
  font-size:.875rem;
  line-height:1.6;
  color:rgb(248 246 241 / .55);
}

/* -------------------------------------------------------------------------
   Schmale Geräte
   -------------------------------------------------------------------------
   Die Fläche geht auf die volle Breite minus Seitenrand; die Schaltfläche
   bleibt mindestens 3,25rem hoch, damit sie sicher zu treffen ist.
   ---------------------------------------------------------------------- */

@media (max-width:480px){
  body.login{align-items:flex-start;padding-top:clamp(20px,5vh,40px)}
  .login form{padding:1.35rem 1.15rem}
  .login h1 a{width:min(13rem,65%)}
}

/* Wer Bewegung abbestellt hat, bekommt hier keine. */
@media (prefers-reduced-motion:reduce){
  .login .button-primary{transition:none}
  .login .button-primary:hover{transform:none}
}