/* =================== Farben & Variablen =================== */
:root {
  --brand-blue: #006ea7;            /* Petrol-Blau */
  --brand-blue-dark: #085a80;       /* Hover-Farbe Button */
  --soft-field: #dadada;            /* graue Inputs */
  --soft-field-focus: #ececec;      /* etwas heller bei Fokus */
  --page-grad-1: #ffffff;           /* Hintergrundverlauf */
  --page-grad-2: #cfe6f4;

  /* Einheitlicher, weicher Drop-Shadow für Inputs & Button */
  --soft-shadow: 0 10px 18px rgba(0, 0, 0, 0.20);
  --soft-shadow-focus: 0 14px 22px rgba(0, 0, 0, 0.25);
  --focus-ring: 0 0 0 .22rem rgba(10, 111, 147, 0.18);

  /* Timing */
  --overlay-duration: 800ms;
  --overlay-delay: 50ms;
  --panel-duration: 820ms;
  --panel-delay: 250ms; /* minimal nach Overlay, wirkt natürlicher */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =================== Basis-Typografie (Inter) =================== */
html, body {
  height: 100%;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}
body { margin: 0; }

/* =================== Seite / Hintergrund =================== */
.page-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;   /* vertikal mittig */
  justify-content: center; /* horizontal mittig */
  padding: 2rem;
  background: linear-gradient(135deg, var(--page-grad-1) 25%, var(--page-grad-2) 100%);
}

/* =================== Außenkarte =================== */
.app-card {
  background: #fff;
  width: 100%;
  max-width: 1160px;
  border-radius: 22px;
  position: relative;
  box-shadow: 0 18px 36px rgba(0,0,0,0.28);
  isolation: isolate; /* eigener stacking context für ::before */
}

/* ===== EIN Overlay: deckt ALLES ab, fährt von rechts nach links weg ===== */
.app-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand-blue);
  border-radius: 22px;          /* folgt der Kartenform */
  z-index: 3;                   /* über allen Inhalten (überlagert Email/Passwort) */
  pointer-events: none;

  /* Start: komplette Abdeckung; Ende: komplett nach links rausgefahren */
  transform: translateX(0);
  animation: card-sweep-rtl var(--overlay-duration) var(--ease-smooth) var(--overlay-delay) forwards;
  will-change: transform;
}

/* Einziger Keyframe: rechts -> links (Overlay verlässt die Bühne nach links) */
@keyframes card-sweep-rtl {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* =================== Grid-Layout =================== */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;  /* mobil: gestapelt */
  align-items: stretch;
  min-height: clamp(520px, 60vh, 740px);
}

/* Desktop: zweispaltig */
@media (min-width: 992px) {
  .card-grid {
    grid-template-columns: 0.9fr 1.1fr; /* links/rechts Verhältnis */
  }
}

/* =================== Linkes Markenpanel =================== */
/* Statisch positioniert, Außenkanten-Schatten + Entstehungs-Animation (L->R) */
.brand-panel {
  position: relative;
  background: var(--brand-blue);
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: clamp(24px, 5vw, 48px);
  border-top-right-radius: clamp(60px, 12vw, 180px);
  border-bottom-right-radius: clamp(60px, 12vw, 180px);
  overflow: hidden;
  min-height: 100%;

  /* Außenkante-Schatten rechts (dezent) */
  filter: drop-shadow(12px 0 18px rgba(0, 0, 0, 0.18));

  /* Entstehung von links nach rechts: skaliert Fläche horizontal auf */
  transform-origin: left center;
  transform: scaleX(0); /* Start: „schmal“ an der linken Kante */
  animation: brand-grow-ltr var(--panel-duration) var(--ease-smooth) var(--panel-delay) forwards;
  will-change: transform;
}

/* Brand-Panel grow: von 0 -> 1 (links -> rechts) */
@keyframes brand-grow-ltr {
  0%   { transform: scaleX(0); }
  80%  { transform: scaleX(1.015); } /* leicht überziehen */
  100% { transform: scaleX(1); }
}


/* Inhalt links (Logo + Name) */
.brand-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}
.logo-square {
  width: clamp(90px, 10vw, 120px);
  height: clamp(90px, 10vw, 120px);
  border-radius: 18px;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 20px rgba(0,0,0,0.26);
}
.logo-img { width: 72%; height: auto; display: inline-block; }
.brand-name {
  font-weight: 800;
  letter-spacing: .02em;
  margin: 0;
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 3rem);
}

/* =================== Rechtes Formularpanel =================== */
.form-panel {
  background: #fff;
  padding: clamp(24px, 5vw, 48px);
}
.login-title {
  font-weight: 700;
  font-size: clamp(2rem, 4.8vw, 3.5rem);
  margin-bottom: 1.25rem;
}

/* ===== Inputs: umlaufender Drop-Shadow + Icon-Kachel rechts ===== */
.field-group .form-soft {
  background: var(--soft-field);
  border: 0;
  border-radius: .75rem;
  padding: .9rem 1rem;
  box-shadow: var(--soft-shadow);
  transition: box-shadow .2s ease, background-color .2s ease;
}
.field-group .form-soft:focus {
  background: var(--soft-field-focus);
  box-shadow: var(--focus-ring), var(--soft-shadow-focus);
}
.soft-addon {
  background: var(--soft-field);
  border: 0;
  border-radius: .75rem;
  margin-left: .5rem;
  font-size: 1.15rem;
  box-shadow: var(--soft-shadow);
  transition: box-shadow .2s ease, background-color .2s ease;
}
.field-group:has(.form-soft:focus) .soft-addon {
  background: var(--soft-field-focus);
  box-shadow: var(--focus-ring), var(--soft-shadow-focus);
}

/* Link „Passwort vergessen ?“ */
.forgot-link {
  font-weight: 600;
  color: #333;
  text-decoration: none;
}
.forgot-link:hover { text-decoration: underline; }

/* ===== Button (gleicher Schatten wie Inputs) ===== */
.btn-brand {
  background: var(--brand-blue);
  color: #fff;
  border: 0;
  border-radius: .55rem;
  padding-block: .65rem;
  font-weight: 600;
  box-shadow: var(--soft-shadow);
  transition: box-shadow .2s ease, background-color .2s ease, transform .06s ease;
}
.btn-brand:hover,
.btn-brand:focus {
  background: var(--brand-blue-dark);
  color: #fff;
  box-shadow: var(--focus-ring), var(--soft-shadow-focus);
}
.btn-brand:active { transform: translateY(1px); }

/* =================== Responsiveness & Barrierefreiheit =================== */

/* Mobile/Tablet: Animation bleibt, aber Dauer leicht verkürzt */
@media (max-width: 991.98px) {
  .card-grid { min-height: auto; } /* gestapelt: natürliche Höhe */
  :root {
    --overlay-duration: 700ms;
    --panel-duration: 700ms;
    --overlay-delay: 80ms;
    --panel-delay: 110ms;
  }
  .brand-panel {
    border-top-right-radius: 56px;
    border-bottom-right-radius: 56px;
  }
}

/* Nutzerpräferenz: reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  .app-card::before { animation: none; transform: none; }
  .brand-panel     { animation: none; transform: none; }
}