html { height: 100%; }
/* min-height statt height: sonst wird ein hoher Inhalt (Handy) mittig beschnitten und der obere Teil ist nicht erreichbar */
body {
  min-height: 100%; min-height: 100dvh;
  background-color: #F4F7F9;
  background-image:
    radial-gradient(60% 50% at 50% 0%, rgba(11,54,81,.08) 0%, transparent 70%),
    linear-gradient(to right, rgba(11,54,81,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,54,81,.035) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
}
.card {
  width: 100%;
  max-width: 1040px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(11,54,81,.35);
}

/* Linke Seite: Foto mit Markenfarbe */
.brand {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 28px;
  min-height: 600px; padding: 40px; color: #fff; background: var(--navy);
}
.brand-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.brand::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(11,54,81,.78) 0%, rgba(11,54,81,.12) 30%, rgba(11,54,81,.5) 58%, rgba(11,54,81,.95) 100%);
}
.brand .logo { display: block; width: 170px; height: auto; overflow: visible; }
.brand .logo .cls-4 { fill: #fff; }
.brand .logo text { fill: #fff; }
.hero { margin-top: auto; }
.hero h1 { font-weight: 500; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; letter-spacing: -.015em; }
.hero h1 span { color: #BFD9EA; }
.hero p { margin-top: 14px; max-width: 340px; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.82); }
.copy { margin-top: -8px; font-size: 11.5px; color: rgba(255,255,255,.6); }

/* Rechte Seite: Formular */
.panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 56px); }
h2 { font-weight: 600; font-size: clamp(24px, 3vw, 30px); letter-spacing: -.015em; }
.sub { margin-top: 8px; font-size: 15px; color: var(--muted); }

form { margin-top: 8px; }
label { margin: 24px 0 8px; }
.field { position: relative; display: flex; align-items: center; }
.field input { height: 52px; padding-left: 46px; font-size: 15px; }
.field .lead { position: absolute; left: 15px; display: grid; color: var(--muted); pointer-events: none; }
.field:focus-within .lead { color: var(--navy); }
.field input[type="password"], .field input[type="text"] { padding-right: 52px; }
.icon-btn {
  position: absolute; right: 6px; width: 40px; height: 40px; display: grid; place-items: center;
  color: var(--muted); background: none; border: 0; border-radius: 9px; cursor: pointer;
}
.icon-btn:hover { color: var(--navy); background: var(--navy-soft); }
label.remember { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; font-weight: 400; color: #2B4B60; cursor: pointer; }
label.remember input { width: 18px; height: 18px; padding: 0; accent-color: var(--navy); }
.error { margin-top: 8px; min-height: 20px; font-size: 13px; color: #B3261E; }
.btn {
  width: 100%; height: 52px; margin-top: 8px;
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .01em;
  color: #fff; background: var(--navy);
  border: 0; border-radius: var(--radius); cursor: pointer;
  box-shadow: 0 10px 22px -10px rgba(11,54,81,.6);
  transition: background .15s, transform .05s;
}
.btn:hover { background: var(--navy-hover); }
.btn:active { transform: translateY(1px); }

@media (max-width: 820px) {
  .card { max-width: 560px; grid-template-columns: 1fr; }
  /* Handy: Logo im Foto (wie auf dem Desktop). Das Foto ist höher und von oben ausgerichtet, damit die Gesichter sichtbar bleiben. */
  .brand { min-height: 0; height: 230px; padding: 20px 22px; }
  .brand .logo { width: 150px; }
  .brand-img { object-position: 50% 0; }
  .hero, .copy { display: none; }
}
[hidden] { display: none !important; }