/* Anmelde- und Einrichtungsseite (login.html, setup.html) – DESIGN.md Kap. 7.
 *
 * Eigenständig: Die Seiten laden nur diese Datei (nicht base.css/forms.css der App-Hülle), damit sie
 * unabhängig von der App funktionieren. Die Token-Werte unten sind eine Teilmenge aus DESIGN.md
 * Kap. 2.1 mit denselben Namen – bei Änderungen dort bitte hier nachziehen.
 */

:root {
  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 15px; --fs-xl: 18px;
  --lh-base: 1.4; --lh-text: 1.55;
  --fw-semibold: 600;
  --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 12px; --sp-6: 16px; --sp-7: 20px; --sp-8: 24px; --sp-9: 32px;
  --r-md: 4px; --r-lg: 6px;
  --sh-2: 0 4px 12px rgba(16,24,40,.14), 0 1px 3px rgba(16,24,40,.08);

  --c-bg: #ECEFF2;
  --c-surface: #FFFFFF;
  --c-surface-2: #F6F7F9;
  --c-surface-3: #ECEFF2;
  --c-surface-4: #E1E5EA;
  --c-line: #D6DBE1;
  --c-input-border: #848E9A;
  --c-text: #1B2027;
  --c-text-2: #47515D;
  --c-text-3: #5F6976;
  --c-text-disabled: #9AA3AD;
  --c-accent: #1D5BBF;
  --c-accent-hover: #174C9E;
  --c-accent-active: #123D80;
  --c-accent-text: #1A52AC;
  --c-accent-weak: #E8F0FC;
  --c-accent-weak-2: #D3E2F8;
  --c-focus: #1D5BBF;
  --c-success-weak: #E6F4EA; --c-success-text: #1F6B30;
  --c-danger: #C92A2A; --c-danger-weak: #FDECEC; --c-danger-text: #A61E1E;
  --c-info-weak: #E7F3FD; --c-info-text: #145A9C;

  --ctl-h-lg: 36px;
  --dur: 120ms;
  --ease: cubic-bezier(.2,0,0,1);

  /* nur diese Seiten */
  --auth-w: 360px;
  --auth-w-setup: 440px;
  --auth-grid: #E3E7EB;
}

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

[hidden] { display: none !important; }

html {
  font: var(--fs-md)/var(--lh-base) var(--font-ui);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

body.auth-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-9) var(--sp-6);
  background-color: var(--c-bg);
  /* dezentes Planraster: senkrecht alle 32 px, waagrecht alle 26 px */
  background-image:
    repeating-linear-gradient(90deg, var(--auth-grid) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(180deg, var(--auth-grid) 0 1px, transparent 1px 26px);
}

:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
::selection { background: var(--c-accent-weak-2); }

/* ---------- Formularfläche ---------- */

.auth-card {
  width: var(--auth-w);
  max-width: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: var(--sp-9) 28px;
}
.auth-card--setup { width: var(--auth-w-setup); }

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}
.auth-brand svg { flex: none; }
/* Anmeldeseite: Unterzeile „Anmeldung für Plantafel und Baustellenbuch“ (DESIGN-BAUSTELLENBUCH 2.6) */
.auth-brand--sub { margin-bottom: var(--sp-2); }
.auth-brand-sub {
  margin: 0 0 var(--sp-8);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

.auth-title {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

.auth-intro {
  margin: 0 0 var(--sp-6);
  color: var(--c-text-2);
  line-height: var(--lh-text);
}

.auth-help {
  margin: var(--sp-8) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  line-height: var(--lh-text);
}

.auth-version {
  margin: var(--sp-6) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  min-height: 1.4em;
}

.auth-loading {
  color: var(--c-text-2);
  margin: 0;
}

/* Fußzeile „Plantafel 0.2.0 · Hilfe“ (Anmeldeseite) */
.auth-foot #auth-version:not(:empty)::after { content: " · "; }
.auth-help-link { color: var(--c-accent-text); }
.auth-help-link:hover { text-decoration: none; }

/* ---------- Felder ---------- */

.auth-form { display: flex; flex-direction: column; gap: var(--sp-5); }

.auth-field { display: flex; flex-direction: column; gap: var(--sp-2); }

.auth-field > label {
  font-size: var(--fs-md);
  color: var(--c-text-2);
}

.auth-input {
  width: 100%;
  height: var(--ctl-h-lg);
  padding: 0 var(--sp-4);
  font: inherit;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-input-border);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.auth-input::placeholder { color: var(--c-text-3); }
.auth-input:hover { border-color: var(--c-text-3); }
.auth-input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.auth-input[aria-invalid="true"] { border-color: var(--c-danger); }
.auth-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px var(--c-danger); }
.auth-input:disabled { background: var(--c-surface-2); color: var(--c-text-disabled); border-color: var(--c-line); }
/* Einrichtungscode: wie in der Konsole – Monospace, Großbuchstaben, etwas gesperrt (D-N9) */
.auth-input--code { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.auth-input--code::placeholder { text-transform: none; letter-spacing: .08em; }

.auth-hint {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

.auth-error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-danger-text);
}
.auth-error svg { flex: none; margin-top: 2px; }

/* Passwortfeld mit Knopf „Passwort anzeigen“ */
.pw-wrap { position: relative; }
.pw-wrap .auth-input { padding-right: calc(var(--ctl-h-lg) + var(--sp-2)); }
.pw-toggle {
  position: absolute;
  top: 1px;
  right: 1px;
  width: calc(var(--ctl-h-lg) - 2px);
  height: calc(var(--ctl-h-lg) - 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: transparent;
  color: var(--c-text-2);
  cursor: pointer;
}
.pw-toggle:hover { background: var(--c-surface-3); color: var(--c-text); }

.auth-check {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--c-text);
  cursor: pointer;
  user-select: none;
}
.auth-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--c-accent);
  cursor: pointer;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  height: var(--ctl-h-lg);
  padding: 0 var(--sp-6);
  font: inherit;
  font-size: var(--fs-md);
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-input-border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.btn:hover { background: var(--c-surface-2); }
.btn:active { background: var(--c-surface-3); }

.btn--primary {
  width: 100%;
  margin-top: var(--sp-2);
  color: #FFFFFF;
  font-weight: var(--fw-semibold);
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.btn--primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.btn--primary:active { background: var(--c-accent-active); border-color: var(--c-accent-active); }

.btn--quiet {
  height: auto;
  padding: var(--sp-2) var(--sp-3);
  color: var(--c-accent-text);
  background: transparent;
  border-color: transparent;
}
.btn--quiet:hover { background: var(--c-accent-weak); }

.btn:disabled,
.btn:disabled:hover {
  color: var(--c-text-disabled);
  background: var(--c-surface-3);
  border-color: var(--c-line);
  cursor: default;
}

.btn .spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: auth-spin 800ms linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

.auth-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-5);
}

/* ---------- Hinweis-Banner (DESIGN 6.13) ---------- */

.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  min-height: 32px;
  margin: 0 0 var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  line-height: var(--lh-text);
}
.banner svg { flex: none; margin-top: 2px; }
.banner--error { background: var(--c-danger-weak); color: var(--c-danger-text); border-color: color-mix(in srgb, var(--c-danger-text) 35%, transparent); }
.banner--info { background: var(--c-info-weak); color: var(--c-info-text); border-color: color-mix(in srgb, var(--c-info-text) 35%, transparent); }
.banner--success { background: var(--c-success-weak); color: var(--c-success-text); border-color: color-mix(in srgb, var(--c-success-text) 35%, transparent); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.auth-noscript {
  max-width: var(--auth-w);
  padding: var(--sp-5);
  background: var(--c-danger-weak);
  color: var(--c-danger-text);
  border-radius: var(--r-md);
}

/* ---------- Variante „Baustellenbuch“ (DESIGN-BAUSTELLENBUCH 2.6, BB-DESIGN 6.1) ----------
   login.html?next=/bb/… → <body data-area="bb">: Petrol-Akzent und Fokus des Baustellenbuchs,
   „Buchpapier“ (waagerechte Linien alle 28 px, Randlinie bei 64 px), Karte 380 px, Marke 20 px. */
body.auth-page[data-area="bb"] {
  --c-bg: #F3F4F2;
  --c-accent: #1F5F8B;
  --c-accent-hover: #184C70;
  --c-accent-active: #123A56;
  --c-accent-text: #1B5680;
  --c-accent-weak: #E3EEF6;
  --c-accent-weak-2: #C9DDEC;
  --c-focus: #1F5F8B;
  --auth-w: 380px;
  --auth-book-line: #E2E6E3;
  --auth-book-margin: #E9CFCB;
  background-color: var(--c-bg);
  background-image:
    linear-gradient(90deg, transparent 63px, var(--auth-book-margin) 63px 64px, transparent 64px),
    repeating-linear-gradient(180deg, transparent 0 27px, var(--auth-book-line) 27px 28px);
}
body.auth-page[data-area="bb"] .auth-brand { font-size: 20px; }

/* ---------- Handy (DESIGN 7: volle Breite, 16 px Rand, Felder 44 px, Schrift 16 px) ---------- */

@media (max-width: 767px) {
  body.auth-page { justify-content: flex-start; padding: var(--sp-6); }
  .auth-card, .auth-card--setup { width: 100%; padding: var(--sp-8) var(--sp-6); }
  :root { --ctl-h-lg: 44px; }
  .auth-input, .btn { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}