/* ---------- Grundsetup ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: Inter, system-ui, Arial, sans-serif; -webkit-font-smoothing:antialiased; }
body { background:#f4f6f9; color:#222; overflow: hidden; }

/* Container helper */
.container { max-width:1100px; margin:0 auto; padding:0 1rem; }

/* ---------- Index Header/Footer (fixed) ---------- */
.main-header, .main-footer {
  position: fixed;
  left: 0; right: 0;
  background: linear-gradient(180deg,#2f2a75,#241f58);
  color: #fff;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.main-header { top: 0; }
.main-footer { bottom: 0; }

/* Header/Footer Inhalt */
.main-header .container, .main-footer .container { padding: 16px 12px; }
.main-header h1 { margin:0; font-size:1.6rem; text-align:center; }

/* ---------- Main Content (zwischen Index Header/Footer) ---------- */
.main-content {
  position: absolute;
  left: 0; right: 0;
  /* top & bottom werden dynamisch per JS gesetzt (updateMainContentOffsets) */
  overflow: hidden; /* innerer Inhalt übernimmt eigenes Scrolling */
  z-index: 500;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Login layout (wird INSIDE main-content geladen) ---------- */
.login-layout {
  height: 100%;              /* füllt main-content */
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;             /* wichtig */
  background: #f9fbfe;
}

/* Login Header/Footer: normale Flex-Items (nicht fixed) */
.login-header, .login-footer {
  flex: 0 0 auto;
  text-align: center;
  padding: 12px;
  background: linear-gradient(180deg,#4d6fb6,#3e569a);
  color: white;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.login-footer { border-top: 1px solid rgba(0,0,0,0.06); }

/* Login content = scrollbarer Bereich */
.login-content {
  flex: 1 1 auto;      /* nimmt die verbleibende Höhe */
  overflow: auto;      /* scrollbar: vertikal & horizontal */
  padding: 24px;
  min-height: 0;       /* wichtig für korrektes scrolling in flex containers */
}

/* Beispiel-Form Styling */
form {
  max-width: 420px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  background: white;
  padding:18px;
  border-radius:10px;
  box-shadow: 0 6px 18px rgba(20,30,50,0.06);
}
label { font-size:0.9rem; color:#374151; }
input[type=text], input[type=password] {
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #d1d5db;
  font-size:1rem;
}
.btn {
  padding:10px 14px;
  border-radius:8px;
  border:none;
  background:#3e6fb6;
  color:#fff;
  cursor:pointer;
  font-weight:600;
}
.btn.ghost { background:#eef2ff; color:#243b65; border:1px solid #cbd5e1; }

/* Nachrichten */
.message { max-width:800px; margin:0 auto 16px; padding:12px; border-radius:8px; }
.message.success { background:#ecfdf5; color:#065f46; border:1px solid #bbf7d0; }
.message.error { background:#fff1f2; color:#7f1d1d; border:1px solid #fecaca; }

/* Loading indicator */
.loading { padding: 2rem; text-align:center; color:#666; }

/* ---------- Responsive ---------- */
@media (max-width:600px) {
  .main-header h1 { font-size:1.2rem; }
  .login-header, .login-footer { padding:8px; font-size:0.95rem; }
  .container { padding: 0 12px; }
}