/* ============================================================
   Intranet-Login — Design-System-Umsetzung
   ------------------------------------------------------------
   Vollständig unter .login_area gescopt (Shell-Konvention) — keine
   Regel leakt nach außen. Werte aus tokens.css, Bausteine aus
   design-system.css (.ds-btn, .ds-input, .ds-link, .ds-alert).
   Auth-Logik liegt in intranet_functions.inc.php und bleibt unberührt.
   Ersetzt den alten /* Login */-Block aus global.css.
   ============================================================ */

.login_area,
.login_area *,
.login_area *::before,
.login_area *::after { box-sizing: border-box; }

.login_area {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
}

/* Bühne: zentriert, füllt den Viewport */
.login_area .login-shell {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--color-surface);
  overflow: hidden;
  --login-scrim: var(--scrim-3);   /* Default-Abdunklung; per dim-* überschreibbar */
}
/* Abdunkel-Stufen (generisch über Scrim-Tokens) */
.login_area .login-shell.dim-0 { --login-scrim: var(--scrim-0); }
.login_area .login-shell.dim-1 { --login-scrim: var(--scrim-1); }
.login_area .login-shell.dim-2 { --login-scrim: var(--scrim-2); }
.login_area .login-shell.dim-3 { --login-scrim: var(--scrim-3); }
.login_area .login-shell.dim-4 { --login-scrim: var(--scrim-4); }
.login_area .login-shell.dim-5 { --login-scrim: var(--scrim-5); }

/* Hintergrundbild (Design-Asset, nicht CMS-abhängig). */
.login_area .login-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url("/module/intranet/assets/images/background-light-v2.webp") center / cover no-repeat;
}
/* Abdunklung über dem Bild (Scrim). Karte liegt darüber (z-index:1). */
.login_area .login-bg::after {
  content: ""; position: absolute; inset: 0;
  background: var(--login-scrim);
  pointer-events: none;
}

/* Login-Karte */
.login_area .login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
}

/* Formular-Elemente exakt gleich breit (Felder = Buttons = Alert) */
.login_area form { width: 100%; }
.login_area .ds-field,
.login_area .ds-input,
.login_area .ds-alert,
.login_area .ds-btn--block { width: 100%; }

.login_area .login-card__brand { text-align: center; margin-bottom: var(--space-5); }
/* Logo sauber skalieren, egal welche Inline-Größe das CMS mitgibt (!important
   überschreibt die im get_content("logo") gesetzten width/height-Attribute). */
.login_area .login-card__brand img {
  max-width: min(200px, 100%) !important;
  width: auto !important;
  height: auto !important;
  display: inline-block;
}
.login_area .login-card__brand a { display: inline-block; line-height: 0; }

.login_area .login-card__eyebrow {
  margin: 0; text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: .12em;
}
.login_area .login-card__title {
  margin: var(--space-2) 0 var(--space-6);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-heading);
  line-height: var(--leading-tight);
}

/* Fehlermeldung (nur wenn befüllt) */
.login_area .login-error { margin-bottom: var(--space-5); }
.login_area .login-error:empty { display: none; }

.login_area .login-card__foot { margin-top: var(--space-4); text-align: center; }

/* Externe Login-Buttons (CMS) */
.login_area .login-extern { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.login_area .login-extern:empty { display: none; }
.login_area .login-extern a { color: var(--color-link); }

@media (max-width: 480px) {
  .login_area .login-shell { padding: var(--space-4); }
  .login_area .login-card { padding: var(--space-6); }
}