/**
 * fx-login.css — Fenix WordPress Login Page
 * Stil: Terminal CLI × Art-Déco Private Entrance
 *
 * Palette: Navy #071F50 (bg) · Blau #225BCF (surface) · Gold #CF9622 (accent)
 *          Paper #F0F1F1 (text) · Ink #0E1012 (btn-label)
 * Kein Purple / Indigo / Terracotta. Logo-Original unverändert.
 *
 * Composition (DOM-Reihenfolge, flex-column):
 *   .fx-login-chrome  — Terminal-Header (◆ + pre), Kartenoberseite
 *   #login            — Kartencontainer (bg + Rahmen); enthält:
 *                         h1 a  (Logo, ~150 × 64 px)
 *                         #loginform  (Art-Déco-Innenkarte)
 *                         #nav  #backtoblog
 *   .fx-login-chrome-foot  — dezenter Abschlusshinweis
 *   .language-switcher     — minimaler Lang-Switcher
 *
 * Einbindung: login_enqueue_scripts → wp_enqueue_style('fenix-login', …)
 *
 * --- Selektoren ---
 *  body.login · .fx-login-chrome · .fx-login-deco · .fx-login-term
 *  .fx-login-chrome-foot · #login · .login h1 a
 *  #loginform · .login label · #user_login · #user_pass
 *  .wp-pwd · #wp-submit · #nav · #backtoblog
 *  #login_error · .message · .language-switcher
 * ------------------
 */


/* ---- 0. DESIGN-TOKENS  (stand-alone — kein :root-Import nötig) ---- */
:root {
  --fxl-navy:          #071f50;
  --fxl-navy-mid:      #0c1e3d;
  --fxl-blue:          #225bcf;
  --fxl-gold:          #cf9622;
  --fxl-gold-text:     #e8b843;   /* AA auf navy */
  --fxl-paper:         #f0f1f1;
  --fxl-ink:           #0e1012;
  --fxl-muted:         rgba(240, 241, 241, 0.45);
  --fxl-muted-form:    rgba(240, 241, 241, 0.78);  /* AA auf navy-mid */
  --fxl-border:        rgba(207, 150, 34, 0.30);
  --fxl-border-subtle: rgba(207, 150, 34, 0.12);
  --fxl-error:         #f4694c;
  --fxl-success:       #3ecf8e;
  --fxl-mono: "JetBrains Mono", "Fira Code", "Cascadia Code",
              ui-monospace, "Courier New", monospace;
  --fxl-sans: "Red Hat Display", ui-sans-serif, system-ui, sans-serif;
  --fxl-radius:   2px;
  --fxl-duration: 0.22s;
  --fxl-ease:     cubic-bezier(0.22, 1, 0.36, 1);
}


/* ---- 1. RESET — WP-Login-Defaults korrigieren ---- */

/* FIX #1: cursor:none (kommt aus WP-Core oder fx-chrome.css) → auto */
body.login {
  cursor: auto !important;
  font-family: var(--fxl-mono);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--fxl-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Korrekte Cursor-Werte für interaktive Elemente */
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"],
body.login textarea {
  cursor: text;
}

body.login button,
body.login input[type="submit"],
body.login input[type="checkbox"],
body.login input[type="radio"],
body.login a,
body.login select,
body.login label[for] {
  cursor: pointer;
}

/* WP-Standard-Link-Farbe überschreiben */
body.login a {
  color: var(--fxl-gold-text);
  text-decoration: none;
}
body.login a:hover,
body.login a:focus {
  color: var(--fxl-paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ---- 2. ATMOSPHÄRISCHE FLÄCHE
   Terminal-Navy + Art-Déco Gold-Raster + radiale Vignette ---- */
body.login {
  background-color: var(--fxl-navy);
  background-image:
    /* Goldenes Feingitter */
    linear-gradient(0deg,   rgba(207,150,34, 0.045) 1px, transparent 1px),
    linear-gradient(90deg,  rgba(207,150,34, 0.045) 1px, transparent 1px),
    /* Diagonale Art-Déco Streifen */
    linear-gradient(45deg,  rgba(34,91,207, 0.06)   1px, transparent 1px),
    linear-gradient(-45deg, rgba(34,91,207, 0.06)   1px, transparent 1px),
    /* Radiale Vignette — Zentrum aufgehellt */
    radial-gradient(ellipse 80% 70% at 50% 48%,
      rgba(34,91,207, 0.22) 0%, transparent 68%);
  background-size:
    48px 48px,
    48px 48px,
    96px 96px,
    96px 96px,
    100% 100%;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
}

/* WP wraps everything in #login — zentrieren */
body.login #login {
  margin: 0 auto;
}


/* ---- 3. FX-LOGIN-CHROME — Terminal-Header, Kartenoberseite ---- */

/*
 * .fx-login-chrome ist ein Sibling von #login (direkt in body.login).
 * Durch identische max-width und anschließende Border-Logik bildet es
 * optisch die Kopfzeile der Karte.
 */
.fx-login-chrome {
  position: relative;
  width: 100%;
  max-width: 380px;
  box-sizing: border-box;

  background-color: var(--fxl-navy-mid);
  /* Goldene Sweep-Linie oben */
  background-image:
    linear-gradient(90deg,
      transparent 0%,
      var(--fxl-gold) 28%,
      var(--fxl-gold) 72%,
      transparent 100%);
  background-size: 100% 2px;
  background-position: top center;
  background-repeat: no-repeat;

  /* Karten-Rahmen: oben + Seiten — unten nahtlos zu #login */
  border: 1px solid var(--fxl-border);
  border-bottom: 1px solid var(--fxl-border-subtle);

  padding: 0.85rem 1.5rem 0.75rem;

  display: flex;
  align-items: flex-start;
  gap: 0.65rem;

  /* Karten-Schatten nur seitlich — Hauptschatten kommt von #login */
  box-shadow:
    -28px 0 56px rgba(7,31,80, 0.55),
     28px 0 56px rgba(7,31,80, 0.55);

  animation: fxl-fade-up 0.55s var(--fxl-ease) both;
}

/* Art-Déco Ecke: oben-links */
.fx-login-chrome::before {
  content: '';
  position: absolute;
  top:  -9px;
  left: -9px;
  width: 10px; height: 10px;
  border-top:  2px solid var(--fxl-gold);
  border-left: 2px solid var(--fxl-gold);
  pointer-events: none;
  z-index: 2;
  animation: fxl-corner-in 0.7s var(--fxl-ease) 0.35s both;
}

/* Art-Déco Ecke: oben-rechts */
.fx-login-chrome::after {
  content: '';
  position: absolute;
  top:   -9px;
  right: -9px;
  width: 10px; height: 10px;
  border-top:   2px solid var(--fxl-gold);
  border-right: 2px solid var(--fxl-gold);
  pointer-events: none;
  z-index: 2;
  animation: fxl-corner-in 0.7s var(--fxl-ease) 0.35s both;
}

/* ◆ Dekoratives Diamond-Zeichen */
.fx-login-deco {
  color: var(--fxl-gold);
  font-size: 0.88rem;
  line-height: 1.55;
  flex-shrink: 0;
  margin-top: 0.05em;
  text-shadow: 0 0 10px rgba(207,150,34, 0.6);
}

/* Terminal-Pre: der eigentliche CLI-Text */
.fx-login-term {
  margin: 0;
  padding: 0;
  font-family: var(--fxl-mono);
  font-size: 0.67rem;
  line-height: 1.6;
  color: var(--fxl-muted);
  white-space: pre-wrap;
  word-break: break-word;
  flex: 1;
  min-width: 0;
}

/* Blinkender Block-Cursor nach dem letzten Zeichen */
.fx-login-term::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 0.78em;
  background: var(--fxl-gold);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: fxl-blink 1s step-end infinite;
  opacity: 0.75;
  pointer-events: none;  /* deko only */
}

/* Bilingualer Zusatztext — im Terminal-Header nicht benötigt */
.fx-login-term-en {
  display: none;
}

/* -- Footer-Chrome -- */
.fx-login-chrome-foot {
  width: 100%;
  max-width: 380px;
  box-sizing: border-box;
  margin: 0.5rem auto 0;
  padding: 0.3rem 1rem;

  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;

  font-family: var(--fxl-mono);
  font-size: 0.58rem;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240,241,241, 0.22);
}

/* Englischen Foot-Text ausblenden — DE ist ausreichend */
.fx-login-chrome-foot .fx-login-chrome-foot-en {
  display: none;
}


/* ---- 4. LOGIN-KARTE (#login)
   Kartencontainer: direkt unterhalb .fx-login-chrome, nahtlos anschließend ---- */
#login {
  position: relative;
  width: 100%;
  max-width: 380px;
  box-sizing: border-box;
  padding: 0;
  margin-top: 0;

  /* Karten-Hintergrund + Rahmen (Seiten + unten; oben von chrome) */
  background: var(--fxl-navy-mid);
  border: 1px solid var(--fxl-border);
  border-top: none;   /* chrome schließt oben ab */

  box-shadow:
    0 28px 72px rgba(7,31,80, 0.8),
    0  8px 28px rgba(7,31,80, 0.5),
    inset 0 -1px 0 rgba(207,150,34, 0.08);

  animation: fxl-fade-up 0.6s var(--fxl-ease) 0.05s both;
}

/* Äußerer Art-Déco Dekorrahmen — nur Seiten + unten */
#login::before {
  content: '';
  position: absolute;
  left:   -6px;
  right:  -6px;
  bottom: -6px;
  top: 0;   /* nicht über chrome hinausgehen */
  border-left:   1px solid var(--fxl-border-subtle);
  border-right:  1px solid var(--fxl-border-subtle);
  border-bottom: 1px solid var(--fxl-border-subtle);
  border-top: none;
  pointer-events: none;
  z-index: 0;
  animation: fxl-border-in 0.9s var(--fxl-ease) 0.3s both;
}

/* Art-Déco Ecke: unten-links */
#login::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left:   -12px;
  width: 10px; height: 10px;
  border-bottom: 2px solid var(--fxl-gold);
  border-left:   2px solid var(--fxl-gold);
  pointer-events: none;
  z-index: 2;
  animation: fxl-corner-in 0.7s var(--fxl-ease) 0.4s both;
}

/* Unten-Rechts Ecke als background-image auf #login */
#login {
  background-image:
    linear-gradient(to left, var(--fxl-gold) 2px, transparent 2px),
    linear-gradient(to top,  var(--fxl-gold) 2px, transparent 2px);
  background-size:     10px 10px, 10px 10px;
  background-position: bottom right, bottom right;
  background-repeat:   no-repeat;

  /* Kombiniert mit navy-mid über background-color */
  /* background-image überlagert das, background-color liegt dahinter */
}


/* ---- 5. LOGO / BRAND ---- */
.login h1 {
  margin: 0;
  padding: 1.25rem 1.5rem 1.1rem;
  text-align: center;
}

/* FIX #3: Logo-Link war 59 x 26 px -> ~150 x 64 px */
/* H) Logo-Reveal: sofort sichtbar; Klick oeffnet das Formular */
.login h1 a,
.wp-login-logo a {
  display: block !important;
  width:  150px !important;
  height:  64px !important;
  margin: 0 auto;
  background-image: var(--fx-login-logo-url, none);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent !important;  /* kein WP-Blau */

  filter: drop-shadow(0 0 18px rgba(207,150,34, 0.35));
  transition: filter var(--fxl-duration) ease;

  /* Fallback-Text ausblenden wenn Logo-URL gesetzt */
  font-size: 0;
  text-indent: -9999px;
  color: transparent;
  overflow: hidden;

  cursor: pointer;

  /* Reveal-Animation: Logo erscheint beim Laden */
  animation: fxl-logo-reveal 0.55s var(--fxl-ease) 0.12s both;
}

/* --fx-login-logo-url kommt aus login-ui.php via <style id="fenix-login-logo">  */
/* Unsere !important-Regeln oben schlagen den PHP-Inline-Style */

.login h1 a:hover {
  filter: drop-shadow(0 0 28px rgba(207,150,34, 0.65));
}
.login h1 a:focus-visible {
  outline: 2px solid var(--fxl-gold);
  outline-offset: 4px;
  border-radius: var(--fxl-radius);
}


/* ---- 6. FORMULAR-INNENKARTE (#loginform) ---- */
/* I) Geschlossen beim Laden; oeffnet per Logo-Klick (JS: body.fx-login--open) */
#loginform {
  position: relative;
  z-index: 1;
  box-sizing: border-box;   /* max-height schliesst padding ein -> sauberes Clip */
  overflow: hidden;         /* noetig fuer max-height-Clip beim Aufklappen */

  /* Kein Aussen-Border -- #login liefert den Kartenrahmen */
  border: none;
  border-top: 1px solid var(--fxl-border-subtle);  /* Trennlinie nach Logo */

  /* Goldene Sweep-Linie ueber dem Trennstrich -- startet unsichtbar (Breite 0) */
  background-image:
    linear-gradient(90deg,
      transparent 0%,
      var(--fxl-gold) 38%,
      var(--fxl-gold) 62%,
      transparent 100%);
  background-size: 0% 2px;
  background-position: top center;
  background-repeat: no-repeat;

  padding: 2rem 1.75rem 1.75rem;

  /* Geschlossener Ausgangszustand */
  max-height: 0;
  opacity: 0;

  /* Sanfte Uebergaenge beim Logo-Klick (kein auto-play) */
  transition:
    max-height        0.65s var(--fxl-ease),
    opacity           0.50s var(--fxl-ease),
    background-size   0.70s var(--fxl-ease);
}

/* -- Open: JS fuegt body.fx-login--open hinzu beim Logo-Klick -- */
body.fx-login--open #loginform {
  max-height: 750px;
  opacity: 1;
  background-size: 100% 2px;
}

/* Art-Deco Kicker: WILLKOMMEN ZURUECK */
/* Kein pointer-events-Problem mehr (keine Animation mit Stacking Context) */
#loginform::before {
  content: '◆  WILLKOMMEN ZURÜCK  ◆';
  display: block;
  text-align: center;
  font-family: var(--fxl-sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fxl-gold);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--fxl-border-subtle);
  margin-bottom: 1.5rem;
  opacity: 0.9;
  pointer-events: none;  /* deko only */
}

/* Terminal-Prompt Abschlusszeile */
#loginform::after {
  content: '$ auth --session=new ▌';
  display: block;
  font-family: var(--fxl-mono);
  font-size: 0.62rem;
  color: var(--fxl-muted);
  letter-spacing: 0.04em;
  opacity: 0.65;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(207,150,34, 0.10);
  pointer-events: none;  /* deko only */
}


/* ---- 7. FORMULAR-FELDER — Terminal-Stil ---- */

/* Label: Gold, Monospace, Uppercase — nur User/Pass (nicht forgetmenot) */
.login label[for="user_login"],
.login label[for="user_pass"] {
  display: block;
  font-family: var(--fxl-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fxl-gold-text);
  margin-bottom: 0.35rem;
}

/* Prompt-Prefix per label::before */
.login label[for="user_login"]::before {
  content: '$ user  › ';
  color: var(--fxl-gold-text);
  font-family: var(--fxl-mono);
  pointer-events: none;  /* deko only */
}
.login label[for="user_pass"]::before {
  content: '$ pass  › ';
  color: var(--fxl-gold-text);
  font-family: var(--fxl-mono);
  pointer-events: none;  /* deko only */
}

/* Formular-Wrapper / Paragraphen */
#loginform p {
  margin: 0 0 1rem;
}
#loginform .user-pass-wrap {
  margin: 0 0 1rem;
}

/* -- Eingabefelder -- */
#user_login,
#user_pass {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  background: rgba(7, 31, 80, 0.55);
  border: 1px solid var(--fxl-border);
  border-radius: var(--fxl-radius);
  color: var(--fxl-paper);
  font-family: var(--fxl-mono);
  font-size: 0.875rem;
  line-height: 1.4;
  caret-color: var(--fxl-gold);
  /* FIX: ueber Dekor-Layer */
  position: relative;
  z-index: 1;
  pointer-events: auto;
  transition:
    border-color  var(--fxl-duration) ease,
    box-shadow    var(--fxl-duration) ease,
    background    var(--fxl-duration) ease;
  min-width: 0 !important;  /* WP setzt inline min-width */
}

#user_login::placeholder,
#user_pass::placeholder {
  color: rgba(240,241,241, 0.28);
  font-style: normal;
}

#user_login:hover:not(:focus),
#user_pass:hover:not(:focus) {
  border-color: rgba(207,150,34, 0.52);
}

#user_login:focus,
#user_pass:focus {
  outline: none;
  border-color: var(--fxl-gold);
  background: rgba(7, 31, 80, 0.75);
  box-shadow:
    0 0 0 3px rgba(207,150,34, 0.14),
    0 0 14px rgba(207,150,34, 0.08);
  animation: fxl-input-pulse 1.4s ease-in-out infinite;
}

/* -- FIX #4: Passwort-Toggle — kein Overlap mehr -- */
.wp-pwd {
  position: relative;
  display: block;
}

/* Passwort-Feld: Platz für Toggle-Button rechts */
.wp-pwd #user_pass {
  padding-right: 2.75rem;
}

/* Toggle-Button: absolut, rechtsbuendig, volle Hoehe */
.wp-pwd .button,
.wp-pwd button[data-toggle-pw] {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2.5rem;
  z-index: 2;             /* ueber Input-Layer */
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: none;
  border-left: 1px solid var(--fxl-border);
  border-radius: 0 var(--fxl-radius) var(--fxl-radius) 0;

  color: var(--fxl-muted);
  cursor: pointer;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1;

  /* WP-Core-Defaults zurücksetzen */
  height: auto !important;
  min-height: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;

  transition:
    color          var(--fxl-duration) ease,
    background     var(--fxl-duration) ease,
    border-color   var(--fxl-duration) ease;
}

.wp-pwd .button:hover,
.wp-pwd button[data-toggle-pw]:hover {
  color: var(--fxl-gold-text);
  background: rgba(207,150,34, 0.08);
  border-left-color: rgba(207,150,34, 0.45);
  box-shadow: none !important;
}

.wp-pwd .button:focus-visible,
.wp-pwd button[data-toggle-pw]:focus-visible {
  outline: 2px solid var(--fxl-gold);
  outline-offset: -2px;
}

/* -- "Angemeldet bleiben" — lesbar, AA auf Navy, kein Uppercase-Hack -- */
#loginform .forgetmenot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.6rem;
  margin: 0 0 1rem;
  overflow: visible;
}

.forgetmenot input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  flex: 0 0 16px;
  box-sizing: border-box;
  border: 1px solid var(--fxl-gold-text);
  border-radius: var(--fxl-radius);
  background-color: rgba(4, 18, 46, 0.82);
  accent-color: var(--fxl-gold);
  cursor: pointer;
  vertical-align: middle;
  /* FIX: ueber Dekor-Stacking-Context */
  position: relative;
  z-index: 2;
  pointer-events: auto;
  transition:
    border-color var(--fxl-duration) ease,
    background   var(--fxl-duration) ease,
    box-shadow   var(--fxl-duration) ease;
}

.forgetmenot input[type="checkbox"]:checked {
  background-color: var(--fxl-gold);
  border-color: var(--fxl-gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='%230e1012' d='M1 5.2 4.2 8.4 11 1.6' stroke='%230e1012' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 8px;
}

.forgetmenot input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(232, 184, 67, 0.35),
    0 0 0 1px var(--fxl-gold-text);
}

.forgetmenot label,
#loginform .forgetmenot label {
  display: inline;
  font-family: var(--fxl-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--fxl-paper);
  margin: 0;
  padding: 0;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 0;
  /* FIX: echte Hit-Area, nicht durch Dekor-Layer blockiert */
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.forgetmenot label::before,
#loginform .forgetmenot label::before {
  content: none;
}

/* WP-Hilfe-Tooltip neben der Checkbox */
.forgetmenot .wp-tooltip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.forgetmenot .wp-tooltip__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(232, 184, 67, 0.45);
  border-radius: 50%;
  background: rgba(4, 18, 46, 0.55);
  color: var(--fxl-gold-text);
  cursor: pointer;
  line-height: 1;
}

.forgetmenot .wp-tooltip__toggle .dashicons {
  font-size: 14px;
  width: 14px;
  height: 14px;
}

.forgetmenot .wp-tooltip__toggle:hover,
.forgetmenot .wp-tooltip__toggle:focus-visible {
  color: var(--fxl-paper);
  border-color: var(--fxl-gold-text);
  outline: none;
  box-shadow: 0 0 0 2px rgba(232, 184, 67, 0.28);
}


/* ---- 8. SUBMIT — Gold CTA ---- */
#wp-submit {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 1.5rem;
  background: var(--fxl-gold);
  color: var(--fxl-ink);
  border: none;
  border-radius: var(--fxl-radius);
  font-family: var(--fxl-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(207,150,34, 0.32);
  /* FIX: ueber Dekor-Stacking-Context */
  position: relative;
  z-index: 2;
  pointer-events: auto;
  transition:
    background  var(--fxl-duration) ease,
    box-shadow  var(--fxl-duration) ease,
    transform   0.1s ease;
}

#wp-submit::before {
  content: '> ';
  font-family: var(--fxl-mono);
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.65;
  pointer-events: none;  /* deko only */
}

#wp-submit:hover {
  background: #b3851c;
  box-shadow: 0 4px 20px rgba(207,150,34, 0.48);
}

#wp-submit:active {
  transform: translateY(1px);
  box-shadow: 0 1px 6px rgba(207,150,34, 0.3);
}

#wp-submit:focus-visible {
  outline: 2px solid var(--fxl-paper);
  outline-offset: 2px;
}

.login .submit { margin: 0.25rem 0 0; }


/* ---- 9. NAV-LINKS, FOOTER & JUNK-AUSBLENDUNG ---- */
#nav,
#backtoblog {
  text-align: center;
  margin-top: 0.75rem;
  padding: 0 1rem;
}

#nav a,
#backtoblog a {
  font-family: var(--fxl-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--fxl-muted);
  transition: color var(--fxl-duration) ease;
}

#nav a:hover,  #backtoblog a:hover,
#nav a:focus,  #backtoblog a:focus {
  color: var(--fxl-gold-text);
  text-decoration: none;
}

#nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding-bottom: 0.5rem;
}

#backtoblog {
  padding-bottom: 0.75rem;
  opacity: 0.4;
}
#backtoblog:hover {
  opacity: 0.7;
  transition: opacity var(--fxl-duration) ease;
}

/* "Präsentiert von WordPress" + Privacy-Policy-Link ausblenden */
body.login #login_site,
body.login .privacy-policy-page-link,
body.login p.powered-by,
body.login .powered-by,
body.login .wp-login-logo ~ div:not(#loginform) {
  display: none !important;
}

/* -- Language Switcher — dezent, unterhalb der Karte -- */
.language-switcher {
  width: 100%;
  max-width: 380px;
  box-sizing: border-box;
  text-align: center;
  margin-top: 0.65rem;
}

.language-switcher select {
  background: rgba(7,31,80, 0.55);
  border: 1px solid var(--fxl-border-subtle);
  border-radius: var(--fxl-radius);
  color: var(--fxl-muted);
  font-family: var(--fxl-mono);
  font-size: 0.68rem;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  max-width: 200px;
}

.language-switcher select:focus {
  outline: 1px solid var(--fxl-gold);
}


/* ---- 10. FEHLER & MELDUNGEN ---- */
#login_error {
  border: 1px solid rgba(244,105,76, 0.45);
  background: rgba(244,105,76, 0.08);
  color: #f9a08c;
  border-radius: var(--fxl-radius);
  padding: 0.65rem 0.85rem;
  font-family: var(--fxl-mono);
  font-size: 0.75rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}
#login_error::before {
  content: '✖  ';
  color: var(--fxl-error);
  font-weight: bold;
}
#login_error a {
  color: #f9a08c;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.message,
.success {
  border: 1px solid rgba(62,207,142, 0.35);
  background: rgba(62,207,142, 0.07);
  color: #7eddb3;
  border-radius: var(--fxl-radius);
  padding: 0.65rem 0.85rem;
  font-family: var(--fxl-mono);
  font-size: 0.75rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.message::before {
  content: '✔  ';
  color: var(--fxl-success);
  font-weight: bold;
}


/* ---- 11. ANIMATIONEN ---- */

/* A) Card-Elemente: Fade-up beim Laden */
@keyframes fxl-fade-up {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* B) Aeusserer Dekorrahmen: Draw-in */
@keyframes fxl-border-in {
  from {
    opacity: 0;
    clip-path: inset(50% 50% 50% 50%);
  }
  to {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
}

/* C) Art-Deco Kicker: Fade-in */
@keyframes fxl-kicker-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 0.9; transform: translateY(0); }
}

/* D) Ecken-Marker: Scale-in */
@keyframes fxl-corner-in {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

/* E) Blinkender Terminal-Block-Cursor */
@keyframes fxl-blink {
  0%,  49% { opacity: 0.75; }
  50%, 100% { opacity: 0; }
}

/* F) Input-Focus: pulsierender Gold-Glow */
@keyframes fxl-input-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(207,150,34, 0.14),
      0 2px 0 0 rgba(207,150,34, 0.72);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(207,150,34, 0.06),
      0 2px 0 0 rgba(207,150,34, 0.18);
  }
}

/* G) Gold-Sweep: Loginform top-line zeichnet sich ein */
@keyframes fxl-gold-sweep {
  from { background-size: 0% 2px; }
  to   { background-size: 100% 2px; }
}

/* H) Logo-Reveal: Fade-in + Gold-Glow-Aufbau */
@keyframes fxl-logo-reveal {
  from {
    opacity: 0;
    filter: blur(3px) drop-shadow(0 0 0 rgba(207,150,34, 0));
  }
  to {
    opacity: 1;
    filter: drop-shadow(0 0 18px rgba(207,150,34, 0.35));
  }
}

/* I) Form-Unfold: Formular klappt unter dem Logo auf */
/* box-sizing:border-box auf #loginform erforderlich — max-height schliesst padding ein */
@keyframes fxl-form-unfold {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 700px;
    opacity: 1;
  }
}


/* ---- 12. RESPONSIVE — Mobile (<= 420 px) ---- */
@media (max-width: 420px) {
  body.login {
    padding: 1rem 0.75rem;
    background-size:
      32px 32px, 32px 32px,
      64px 64px, 64px 64px,
      100% 100%;
  }

  .fx-login-chrome,
  #login,
  .language-switcher {
    max-width: 100%;
  }

  .fx-login-chrome {
    padding: 0.7rem 1.1rem 0.6rem;
  }

  #loginform {
    padding: 1.5rem 1.25rem 1.5rem;
  }

  #loginform::before {
    font-size: 0.55rem;
    letter-spacing: 0.2em;
  }

  .login h1 {
    padding: 1rem 1.25rem 0.9rem;
  }

  .login h1 a,
  .wp-login-logo a {
    width:  120px !important;
    height:  50px !important;
  }

  #wp-submit {
    font-size: 0.72rem;
  }
}

/* Große Bildschirme: mehr vertikalen Raum */
@media (min-height: 800px) {
  body.login {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}


/* ---- 13. REDUZIERTE BEWEGUNG — prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  #login,
  #loginform,
  #loginform::before,
  #login::before,
  #login::after,
  .fx-login-chrome,
  .fx-login-chrome::before,
  .fx-login-chrome::after {
    animation: none !important;
    transition: none !important;
  }

  /* Logo: keine Animation — sofort sichtbar */
  .login h1 a,
  .wp-login-logo a {
    animation: none !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 18px rgba(207,150,34, 0.35)) !important;
  }

  /* Formular: Transition sofort (kein Verzoegerungs-Effekt) */
  /* Form bleibt geschlossen bis Logo-Klick -- nur Transition entfaellt */
  #loginform {
    transition: none !important;
  }
  body.fx-login--open #loginform {
    transition: none !important;
  }

  /* Focus-Glow ohne Animation */
  #user_login:focus,
  #user_pass:focus {
    animation: none !important;
    box-shadow:
      0 0 0 3px rgba(207,150,34, 0.18),
      0 2px 0 0 rgba(207,150,34, 0.65);
  }

  /* Cursor-Blinken deaktivieren */
  .fx-login-term::after {
    animation: none !important;
    opacity: 0.6;
  }
}


/* ---- 14. HIGH CONTRAST — forced-colors override ---- */
@media (forced-colors: active) {
  .fx-login-chrome {
    border: 2px solid ButtonText;
    background: Canvas;
  }

  #loginform {
    border: 2px solid ButtonText;
    background: Canvas;
  }

  #user_login,
  #user_pass {
    border: 2px solid ButtonText;
    background: Canvas;
    color: CanvasText;
  }

  #wp-submit {
    background: ButtonText;
    color: ButtonFace;
    border: 2px solid ButtonText;
  }

  #login_error {
    border: 2px solid LinkText;
    background: Canvas;
    color: CanvasText;
  }
}