/* ===========================
   BrainFlip – Login Styles (Fullscreen)
   =========================== */

:root{
  --bg:#f7f8fa;
  --panel:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --primary:#2563eb;
  --primary-600:#1d4ed8;
  --primary-700:#1e40af;
  --danger:#ef4444;
  --danger-600:#dc2626;
  --radius:18px;
  --shadow-lg:0 10px 30px rgba(2,6,23,.15);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, "Noto Sans";
  --transition:200ms cubic-bezier(.25,.8,.25,1);
}

/* ----- Vollbild Layout ----- */
html,body{
  margin:0;
  height:100%;
  width:100%;
  font-family:var(--font);
  background:radial-gradient(1600px 800px at 10% -10%, #e8eeff 0%, rgba(232,238,255,0) 50%), var(--bg);
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}

/* ----- Card füllt den Bildschirm optisch aus ----- */
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  width: min(90%, 680px);
  padding: clamp(40px, 6vw, 60px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  animation:fadeIn .6s ease;
}

/* sanftes Erscheinen */
@keyframes fadeIn {
  from{ opacity:0; transform:scale(.96); }
  to{ opacity:1; transform:scale(1); }
}

h1{
  font-size:clamp(28px,5vw,42px);
  line-height:1.2;
  margin-bottom:16px;
  font-weight:800;
}

.muted{
  color:var(--muted);
  font-size:clamp(16px,2vw,20px);
  margin-bottom:32px;
}

/* ----- Formular ----- */
form{
  width:100%;
  max-width:480px;
  display:grid;
  gap:20px;
  text-align:left;
}

label{
  font-weight:600;
  font-size:clamp(15px,1.8vw,18px);
  display:grid;
  gap:8px;
}

.input{
  appearance:none;
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 18px;
  font:inherit;
  font-size:clamp(16px,1.8vw,20px);
  transition:border-color var(--transition), box-shadow var(--transition);
}
.input:focus-visible{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 5px rgba(37,99,235,.18);
}

/* ----- Button ----- */
.btn{
  border:0;
  border-radius:14px;
  background:linear-gradient(180deg, var(--primary) 0%, var(--primary-600) 100%);
  color:#fff;
  font-weight:700;
  font-size:clamp(17px,2vw,20px);
  padding:18px 20px;
  width:100%;
  box-shadow:0 10px 25px rgba(37,99,235,.25);
  transition:transform var(--transition), box-shadow var(--transition);
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(37,99,235,.3);
}

/* ----- Footer mit Links ----- */
footer{
  margin-top:30px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
}

a.small{
  font-size:clamp(15px,1.6vw,17px);
  color:var(--primary-700);
  text-decoration:none;
}
a.small:hover{ text-decoration:underline; }

/* ----- Mobile (≤520px) ----- */
@media(max-width:520px){
  body{ padding:10px; }
  .card{
    width:100%;
    height:auto;
    padding:28px 20px 40px;
    box-shadow:none;
  }
  h1{ font-size:28px; }
  .muted{ font-size:16px; }
  label, .btn, .small{ font-size:16px; }
  .input{ padding:14px 16px; font-size:16px; }
}