/* Anmeldemaske (Auftrag 108, Stufe 1)
   Eigenständige Seite: dieses Blatt ist die einzige Gestaltungsquelle der
   Login-Seite. Kein Bootstrap, keine Icon-Schriftart. Alle übrigen Seiten
   bleiben unberührt.

   Skalierung: Alle Maße sind in rem angegeben. Die Wurzelschriftgröße wächst
   auf großen Bildschirmen (2K/4K) mit, dadurch bleiben Karte, Felder und
   Schrift proportional und wirken nicht verloren. */

:root {
  --lv-text: #f3f6fb;
  --lv-grau: #9aa6b8;
  --lv-rahmen: rgba(255, 255, 255, .12);
  --lv-primaer: #3b82f6;
  --lv-primaer-hell: #60a5fa;
  --lv-primaer-dunkel: #2563eb;
  --lv-flaeche: #0a1322;
  --lv-karte: rgba(255, 255, 255, .045);
  --lv-feld: rgba(255, 255, 255, .06);
  --lv-nacht: #07111f;
}

html { font-size: 16px; }
@media (min-width: 1920px) { html { font-size: 18px; } }
@media (min-width: 2560px) { html { font-size: 22px; } }
@media (min-width: 3440px) { html { font-size: 28px; } }

* { box-sizing: border-box; }

html, body { height: 100%; }

body.lv-login-page {
  margin: 0;
  font-family: "Inter", system-ui, "Segoe UI", sans-serif;
  color: var(--lv-text);
  background: var(--lv-flaeche);
  -webkit-font-smoothing: antialiased;
}

.lv-login-split {
  display: flex;
  min-height: 100vh;
}

/* ── Linke Hälfte: Motiv ─────────────────────────────────────────────────── */

/* Breite: höchstens die Hälfte des Fensters, sonst genau so breit, dass das
   Hochformat-Motiv (4:5) bei voller Höhe komplett hineinpasst. */
.lv-login-hero {
  position: relative;
  flex: 0 0 min(50vw, 80vh);
  overflow: hidden;
  isolation: isolate;
  /* Fallback, solange static/img/login_hero.jpg fehlt. */
  background-color: var(--lv-nacht);
  background-image: linear-gradient(150deg, #0b1b34 0%, #14365f 48%, #1e4d86 100%);
}

/* Weichgezeichnete Kopie des Motivs füllt die Restfläche über und unter dem
   quadratischen Bild – ohne harte Kanten und ohne fremde Farben. */
.lv-login-hero-backdrop {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  object-position: center;
  filter: blur(40px) brightness(.7) saturate(1.2);
  z-index: 0;
}

.lv-login-hero-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 70% at 50% 50%, rgba(7, 17, 31, 0) 60%, rgba(7, 17, 31, .4) 100%);
}

/* Das eigentliche Motiv: immer vollständig, nie beschnitten. */
.lv-login-hero-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  filter: drop-shadow(0 1.5rem 3rem rgba(0, 0, 0, .55));
}

/* Weicher Übergang von der Bildhälfte in die dunkle Formularfläche. */
.lv-login-hero::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 6rem;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 19, 34, 0) 0%, rgba(10, 19, 34, .55) 100%);
}

/* ── Rechte Hälfte: Karte ────────────────────────────────────────────────── */

.lv-login-panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  background:
    radial-gradient(55% 45% at 85% 10%, rgba(59, 130, 246, .22) 0%, rgba(59, 130, 246, 0) 70%),
    radial-gradient(50% 40% at 10% 95%, rgba(37, 99, 235, .14) 0%, rgba(37, 99, 235, 0) 70%),
    linear-gradient(160deg, #0c182b 0%, var(--lv-flaeche) 55%, #070d18 100%);
}

.lv-login-card {
  width: 100%;
  max-width: 35rem;
  background: var(--lv-karte);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow:
    0 1.5rem 3.5rem rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  padding: 3rem;
}

.lv-login-brand {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-bottom: 2rem;
}

.lv-login-logo {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #60a5fa 0%, #2563eb 100%);
  color: #fff;
  box-shadow: 0 .5rem 1.25rem rgba(59, 130, 246, .35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lv-login-logo svg { width: 1.5625rem; height: 1.5625rem; }

.lv-login-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.lv-login-brand-name { font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; }

.lv-login-title {
  margin: 0 0 .5rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: #fff;
}

.lv-login-subtitle {
  margin: 0 0 1.75rem;
  font-size: .9375rem;
  color: var(--lv-grau);
}

/* ── Meldungen ───────────────────────────────────────────────────────────── */

.lv-login-messages {
  margin-bottom: 1.375rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

.lv-alert {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .75rem .875rem;
  border-radius: .75rem;
  font-size: .875rem;
  line-height: 1.45;
  border: 1px solid transparent;
}

.lv-alert svg { width: 1.1875rem; height: 1.1875rem; display: block; }
.lv-alert-icon { flex: 0 0 auto; margin-top: 1px; }
.lv-alert-text { flex: 1 1 auto; }

.lv-alert-danger  { background: rgba(239, 68, 68, .14); border-color: rgba(248, 113, 113, .45); color: #fecaca; }
.lv-alert-success { background: rgba(34, 197, 94, .14); border-color: rgba(74, 222, 128, .45); color: #bbf7d0; }
.lv-alert-info    { background: rgba(59, 130, 246, .16); border-color: rgba(96, 165, 250, .45); color: #bfdbfe; }

/* ── Felder ──────────────────────────────────────────────────────────────── */

.lv-login-form { display: flex; flex-direction: column; gap: 1.125rem; }

.lv-field { position: relative; }

.lv-field-icon {
  position: absolute;
  left: .9375rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--lv-grau);
  pointer-events: none;
  display: block;
}

.lv-field-icon svg { width: 1.25rem; height: 1.25rem; display: block; }

.lv-field-input {
  width: 100%;
  height: 3.5rem;
  padding: 0 1rem 0 2.875rem;
  font: inherit;
  font-size: .9375rem;
  color: var(--lv-text);
  background: var(--lv-feld);
  border: 1px solid var(--lv-rahmen);
  border-radius: .75rem;
  outline: none;
  color-scheme: dark;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.lv-field-input-toggle { padding-right: 3.25rem; }

.lv-field-input:hover { border-color: rgba(255, 255, 255, .22); }

.lv-field-input:focus {
  border-color: var(--lv-primaer-hell);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 1px var(--lv-primaer-hell), 0 0 0 .3rem rgba(59, 130, 246, .22);
}

/* Browser-Autofill nicht in Weiß aufblitzen lassen. */
.lv-field-input:-webkit-autofill,
.lv-field-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--lv-text);
  -webkit-box-shadow: 0 0 0 1000px #152238 inset;
  caret-color: var(--lv-text);
}

.lv-field-input:focus + .lv-field-label,
.lv-field-input:not(:placeholder-shown) + .lv-field-label {
  top: 0;
  left: 2.375rem;
  font-size: .75rem;
  font-weight: 500;
  padding: 0 .375rem;
  color: var(--lv-grau);
  background: #101b2e;
  border-radius: .25rem;
}

.lv-field-input:focus + .lv-field-label { color: var(--lv-primaer-hell); }

.lv-field-label {
  position: absolute;
  left: 2.875rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .9375rem;
  color: var(--lv-grau);
  pointer-events: none;
  transition: top .13s ease, left .13s ease, font-size .13s ease, color .13s ease;
}

.lv-field-eye {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.375rem;
  height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: .5625rem;
  background: transparent;
  color: var(--lv-grau);
  cursor: pointer;
}

.lv-field-eye:hover { background: rgba(255, 255, 255, .08); color: var(--lv-text); }
.lv-field-eye:focus-visible { outline: 2px solid var(--lv-primaer-hell); outline-offset: 1px; }
.lv-field-eye svg { width: 1.25rem; height: 1.25rem; display: block; }
.lv-field-eye svg[hidden] { display: none; }

/* ── Knopf und Fußzeile ──────────────────────────────────────────────────── */

.lv-login-submit {
  margin-top: .375rem;
  width: 100%;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, var(--lv-primaer-hell) 0%, var(--lv-primaer-dunkel) 100%);
  border: 0;
  border-radius: .75rem;
  cursor: pointer;
  box-shadow: 0 .625rem 1.5rem rgba(59, 130, 246, .38), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.lv-login-submit:hover {
  background: linear-gradient(180deg, #7ab4ff 0%, var(--lv-primaer) 100%);
  box-shadow: 0 .75rem 1.75rem rgba(59, 130, 246, .48), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.lv-login-submit:active { transform: translateY(1px); }
.lv-login-submit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lv-login-submit svg { width: 1.25rem; height: 1.25rem; display: block; }

.lv-login-footer {
  margin: 1.75rem 0 0;
  text-align: center;
  font-size: .78rem;
  color: var(--lv-grau);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1023.98px) {
  .lv-login-hero { display: none; }
  .lv-login-panel { flex: 1 1 100%; }
}

@media (max-width: 479.98px) {
  .lv-login-panel { padding: 0; align-items: center; }
  .lv-login-card {
    max-width: none;
    min-height: 0;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 1.5rem;
  }
  .lv-login-title { font-size: 1.375rem; }
  .lv-login-brand { margin-bottom: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lv-field-input, .lv-field-label, .lv-login-submit { transition: none; }
}