/* Vitzthum-Gymnasium – Login Styles (Floating Labels + Hintergrund + Logo)
   ----------------------------------------------------------------------------
   Pfade anpassen:
   --bg-image:  url('/wp-content/themes/DEIN-CHILD/images/login-bg.jpg')
   --logo-url:  url('/wp-content/themes/DEIN-CHILD/images/vitzthum-logo.png')
*/

:root{
  --brand:#F97316;        /* Orange */
  --brand-600:#EA580C;
  --brand-700:#C2410C;
  --bg:#FFF7EE;           /* warmes Off-White (Fallback) */
  --card:#FFFFFF;
  --text:#0F172A;         /* sehr dunkles Blau/Grau */
  --muted:#3c3033;        /* dunkles Grau */
  --radius:18px;
  --inner-radius:14px;
  --shadow:0 14px 36px rgba(15,23,42,.512);
  --stroke:#ff9900;       /* feine Linienfarbe (Label-Linie, Input-Rand) */

  /* >>> HIER DEINE BILDPFADE SETZEN <<< */
  --bg-image: url('/wp-content/uploads/2025/08/vg_bg_02.webp');
  --logo-url: url('/wp-content/uploads/2024/05/vitz_logo_001_600x198.png');
}

/* Seite & Hintergrund -------------------------------------------------------- */
body.login{
  /* sanfter Verlauf + Hintergrundbild */
  background:
    radial-gradient(1000px 520px at 50% -10%, rgba(0,0,0,.06), transparent 60%),
    var(--bg-image),
    var(--bg);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: center -80px, center center, center;
  background-size: auto, cover, auto;
  display:grid; place-items:flex-start center; min-height:100vh;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  color:var(--text);
  padding-top: 40px;
}

#login{ width:min(520px, 94vw); padding:24px; }

/* Logo (ersetzt das WP-Logo) ------------------------------------------------- */
.login h1{
  margin: 0 0 10px;
}
.login h1 a{
  background-image: var(--logo-url) !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 260px;           /* ggf. anpassen */
  height: 80px;           /* ggf. anpassen */
  display: block;
  text-indent: -9999px;   /* WP-Text ausblenden */
  overflow: hidden;
  margin: 0 auto;         /* zentrieren */
}

/* Karte / Formular ----------------------------------------------------------- */
.login form{
  border:none!important; background:rgba(215,200,196,0.52);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 26px 26px;
  backdrop-filter: blur(6px);       /* macht Text auf Bild lesbarer */
}

/* ========== Floating Labels (Wrapper aus JS: .vg-wrap / .vg-focus / .vg-has) ========== */
.vg-wrap{
  position:relative;
  margin:0 0 20px;
}

/* Inputs – extra Platz oben fürs Label */
.vg-wrap input[type="text"],
.vg-wrap input[type="password"],
#loginform input#user_login,
#loginform input#user_pass{
  width:100%;
  border:0px solid var(--stroke);
  border-radius:var(--inner-radius);
  background:rgba(255,255,255,0.5);
  font-size:16px; line-height:1.45;
  padding:22px 46px 14px 16px;     /* top extra; right für Passwort-"Auge" */
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.02);
}
.vg-wrap.vg-focus input{
  border-color:var(--brand-600);
  outline:none;
  box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 38%, transparent);
}

/* Label sitzt anfangs IM Feld (kleine weiße Kachel nur hinter dem Text, wenn gefloatet) */
.vg-wrap > label{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  font-size:16px;
  color:var(--muted);
  background:transparent;
  padding:0 0;                      /* keine Fläche am Start */
  pointer-events:none;
  transition:
    top .16s ease,
    transform .16s ease,
    font-size .16s ease,
    color .16s ease,
    background-color .16s ease,
    padding .16s ease;
  z-index:2;
}

/* Dünne Linie rechts vom schwebenden Label – erst sichtbar im Float-Zustand */
.vg-wrap > label::after{
  content:"";
  position:absolute;
  height:1px;
  background:var(--stroke);
  left:calc(100% + 8px);
  right:18px;                      /* endet kurz vor der Innenkante */
  top:50%;
  transform:translateY(-.5px);
  opacity:0;
  transition:opacity .16s ease, top .16s ease;
}

/* FLOAT-Zustand: bei Fokus ODER wenn Wert vorhanden (.vg-has) */
.vg-wrap.vg-focus > label,
.vg-wrap.vg-has   > label{
  top:-12px;                        /* an die Oberkante des Feldes */
  transform:none;
  font-size:13px;
  color:var(--muted);
  background:var(--card);           /* kleine weiße "Kachel" hinter dem Text */
  padding:0 6px;                    /* schmale Kachel wirkt nicht „fett“ */
  border-radius:999px;
}
.vg-wrap.vg-focus > label::after,
.vg-wrap.vg-has   > label::after{
  opacity:1;
  top: calc(100% + 11px);           /* Linie exakt an Input-Oberkante ausrichten */
  transform:none;
}

/* Passwort-Auge (WP-Core) --------------------------------------------------- */
.user-pass-wrap .wp-hide-pw{ right:8px; }
.user-pass-wrap .dashicons{ color:var(--muted); }
.user-pass-wrap .wp-hide-pw:hover .dashicons{ color:var(--text); }

/* Checkbox + Button --------------------------------------------------------- */
.login .forgetmenot{
  display:flex!important; align-items:center; gap:10px;
  float:none!important; width:100%; clear:both; margin:8px 0 16px;
}
.login .forgetmenot input[type="checkbox"]{
  width:18px; height:18px; border-radius:9999px; accent-color:var(--brand);
}
.login .forgetmenot label{ cursor:pointer; }

.login .submit{ float:none!important; clear:both; width:100%; margin:0; padding-top:2px; }
.login .submit .button-primary,
.wp-core-ui .button-primary{
  width:100%; background:var(--brand); border-color:var(--brand); color:#fff;
  font-size:15px; text-transform: uppercase; font-weight:500; border-radius:9999px; padding:7px 9px; margin: 10px 0 0 0;
  text-shadow:none; box-shadow:none;
  transition:transform .06s ease, background .15s ease, border-color .15s ease;
}
.wp-core-ui .button-primary:hover{ background:var(--brand-600); border-color:var(--brand-600); transform:translateY(-1px); }
.wp-core-ui .button-primary:active{ background:var(--brand-700); border-color:var(--brand-700); transform:translateY(0); }

/* Footer-Links --------------------------------------------------------------- */
.login #nav, .login #backtoblog{ text-align:center; margin:12px 0 0; }
.login #backtoblog a, .login #nav a{ color:var(--brand); }
.login #backtoblog a:hover, .login #nav a:hover{ color:var(--brand-600); }

/* Fehlermeldungen ------------------------------------------------------------ */
.login .message, .login #login_error{
  border-left-color:var(--brand)!important;
  border-radius:12px;
}

/* Dark Mode ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0B1220; --card:#0F172A; --text:#E5E7EB; --muted:#94A3B8; --stroke:#243041;
    /* optional: eigenes Dark-Background-Bild
       --bg-image: url('/wp-content/themes/DEIN-CHILD/images/login-bg-dark.jpg'); */
  }
  body.login{
    background:
      radial-gradient(1100px 520px at 50% -10%, rgba(255,255,255,.06), transparent 60%),
      var(--bg-image),
      var(--bg);
    background-size: auto, cover, auto;
    background-position: center -80px, center center, center;
  }
  .login form{ background: rgba(15,23,42,0.92); backdrop-filter: blur(6px); }
  .vg-wrap input[type="text"],
  .vg-wrap input[type="password"]{ background:#0B1220; border-color:#1F2937; color:var(--text); }
  .vg-wrap.vg-focus > label,
  .vg-wrap.vg-has   > label{ background:var(--card); }
}

/* Reduced motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none!important; animation:none!important; }
}