/* === Login Screen (harte Zentrierung) === */
:root{
  --glass-bg: rgba(15, 23, 42, .55);
  --glass-brd: rgba(30, 41, 59, .8);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.45);
}

.login-body{
  margin:0;
  min-height:100vh;
  background:#06090f;
  color:#e5e7eb;
  overflow:hidden; /* kein Scroll-Jump */
}

/* Hintergrund */
.hero-bg{
  position:fixed; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.02);
  filter:brightness(.72) saturate(.95);
  z-index:-2;
}
.hero-overlay{
  position:fixed; inset:0;
  background: radial-gradient(70% 60% at 70% 20%, rgba(0,0,0,.15), rgba(0,0,0,.55)),
              linear-gradient(180deg, rgba(2,6,12,.25), rgba(2,6,12,.75));
  z-index:-1;
}

/* Header oben FIXIERT */
.hero-head{
  position:fixed; top:20px; left:0; right:0;
  text-align:center; padding:0 16px;
  pointer-events:none;        /* klicks gehen durch */
}
.hero-head h1{
  margin:0;
  font-size: clamp(24px, 3.8vw, 44px);
  line-height:1.15; font-weight:800; letter-spacing:.2px;
  text-shadow:0 2px 0 rgba(0,0,0,.25);
}
.hero-head h1 span{ color:#93c5fd }
.hero-head .sub{ color:#cbd5e1; margin-top:6px; font-size:14px }

/* FOOTER unten FIXIERT */
.login-foot{
  position:fixed; bottom:14px; left:0; right:0;
  text-align:center; color:#9ca3af; font-size:12px;
  pointer-events:none;
}

/* === Harte Zentrierung der Card === */
.login-wrap{
  position:fixed; inset:0;            /* nimmt den ganzen Viewport */
  display:grid; place-items:center;   /* MITTE */
  padding:24px;                       /* Rand auf kleinen Screens */
}

.login-card{
  width:min(520px, 92vw);
  display:grid; gap:8px;
  padding:22px 20px;
  background:var(--glass-bg);
  border:1px solid var(--glass-brd);
  border-radius:18px;
  box-shadow:var(--glass-shadow);
  backdrop-filter: blur(8px) saturate(140%);
}
.login-card h3{ margin:0 0 6px; font-size:22px }
.login-card .input{ background:#0b1016; border-color:#1f2937 }
.login-card .input:focus{ outline:2px solid #60a5fa; border-color:#1d4ed8 }
.btn.primary{
  background: linear-gradient(180deg,#60a5fa,#3b82f6);
  border:1px solid #1e40af; color:white; font-weight:700;
}

/* Fullscreen-Button */
.fs-btn{
  position:fixed; right:16px; bottom:16px; z-index:10;
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(2,6,23,.5); border:1px solid #1e293b; color:#cbd5e1;
  box-shadow:0 4px 18px rgba(0,0,0,.45);
  transition:transform .15s ease, filter .15s ease, background .15s ease;
}
.fs-btn:hover{ transform:translateY(-1px); filter:brightness(1.08) }
.fs-btn:active{ transform:translateY(0) }

/* Mobile Tweaks */
@media (max-width:600px){
  .hero-head{ top:12px }
  .login-card{ padding:16px 14px }
}