/* ===== Base / Reset ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  overflow-x: hidden;        /* kein horizontales Scrollen */
  overflow-y: auto;          /* Scrollen erlauben */
  height: auto !important;   /* feste 100% Höhe vermeiden */
  min-height: 100dvh;        /* dynamische Höhe (mobil) */
  min-height: 100svh;
  min-height: 100vh;
}

/* ===== Seite zentrieren + Hintergrund ===== */
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display: grid;
  place-items: center;

  /* Hintergrund */
  background: #0b1f2a;
  background-image:
    radial-gradient(60% 80% at 70% 20%, #2a4e63 0%, transparent 60%),
    radial-gradient(60% 80% at 30% 80%, #414141 0%, transparent 60%);
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* wird auf Mobile Portrait/LS abgeschaltet */

  /* etwas Innenabstand + Bodenluft für Eingabeleiste */
  padding: 20px 12px calc(env(safe-area-inset-bottom, 0px) + 80px);
}

/* ===== Logo ===== */
.login-logo {
  display: block;
  margin: 0 auto 20px;   /* zentriert + Abstand nach unten */
  max-width: 350px;      /* Desktop-Obergrenze */
  height: auto;         /* feste Höhe Desktop */
}

/* ===== Glas-/Rahmen-Container ===== */
#login-container {
  width: min(92vw, 420px);
  padding: 28px 26px 24px;
  border-radius: 18px;

  /* Frosted-Glass */
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* Kontur + Schatten */
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 10px 30px rgba(0,0,0,0.20);

  color: #fff;
}

/* ===== Überschrift (optional) ===== */
#login-container h2 {
  margin: 0 0 10px;
  text-align: center;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: none;
}

/* ===== Form-Layout ===== */
#login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

#login-form label {
  align-self: flex-start;
  font-size: 0.9rem;
  color: #ffffff;
}

#login-form input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.25);
  color: #ffffff;
  outline: none;
  box-sizing: border-box;
}

#login-form input::placeholder { color: rgba(255,255,255,0.75); }

#login-form input:focus {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.18);
}

/* ===== Button ===== */
#login-form button {
  margin-top: 6px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,0.95);
  color: #0b1f2a;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: filter .15s ease;
}

#login-form button:hover { filter: brightness(0.95); }

/* ===== Fehlermeldung ===== */
#login-error {
  margin-top: 10px;
  color: #c90000;
  min-height: 1.2em;
  text-align: center;
  font-weight: bold;
}

/* ===== Fallback: kein backdrop-filter ===== */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  #login-container { background: rgba(255,255,255,0.12); }
}

/* =================================================================== */
/* ========================   Responsive   ============================ */
/* =================================================================== */

/* ---- Mobile Portrait: zuverlässiges Scrollen + Logo flexibel ---- */
@media (max-width: 520px) and (orientation: portrait) {
  html, body {
    height: auto !important;
    min-height: 100dvh;
    overflow: hidden !important;
    overscroll-behavior: none;      /* verhindert Bounce am Viewport */
  }

  body {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 16px;
    /* extra Bodenluft, damit nichts hinter der Eingabeleiste hängt */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    background-attachment: scroll; /* iOS-Fix: kein fixed im Portrait */
    -webkit-overflow-scrolling: touch;
  }

  .login-logo {
    max-width: 90%;
    height: auto;          /* skaliert proportional */
  }

  #login-container {
    width: 100%;
    max-width: 420px;
    padding: 24px 22px 20px;
  }
}

/* ---- Mobile Landscape: kleine Höhe => mehr Bodenluft ---- */
@media (orientation: landscape) and (max-height: 520px) {
  html, body {
    height: auto !important;
    min-height: 100dvh;
    overflow-y: auto !important;
    overscroll-behavior: none;      /* verhindert Bounce am Viewport */
  }

  body {
    padding-left: 12px;
    padding-right: 12px;
    /* noch mehr Platz unten für Browser-UI / Tastatur */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    background-attachment: scroll; /* iOS-Fix im Landscape */
  }

  .login-logo {
    max-width: 75%;
    height: auto;
    margin-bottom: 16px;
  }

  #login-container {
    width: 100%;
    max-width: 480px;
    padding: 22px 20px 20px;
  }
}

/* ===== Prevent iOS Autofocus Zoom ===== */
input, select, textarea, button {
  font-size: 16px;                /* wichtig auf iOS, sonst Zoom */
  -webkit-text-size-adjust: 100%; /* verhindert Safari-Auto-Scaling */
  touch-action: manipulation;     /* kein Doppeltipp-Zoom (sofern unterstützt) */
}