/* ============================================================
   ParusVoice — Web-Onboarding (register.php / verify.php)
   Fokussierte Auth-Seiten. Nutzt tokens.css; nach site.css laden.
   ============================================================ */

.auth-body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6) var(--gutter);
}

.auth-wrap { width: 100%; max-width: 420px; }

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  color: var(--ink);
  font-size: 20px;
  margin-bottom: var(--s-4);
}
.auth-brand span { font-weight: 400; }
.auth-brand strong { font-weight: 700; }

.auth-card {
  background: var(--paper-hi);
  border: var(--hairline);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-2);
  padding: var(--s-7) var(--s-6);
}

.auth-card h1 {
  font-size: 30px;            /* App-Onboarding-Headline (statt --t-h2 = 32) */
  line-height: 36px;
  letter-spacing: -0.01em;
  font-weight: 600;           /* semibold wie die App, statt der 500er-Marketing-Headline */
  margin: 0 0 var(--s-2);
}

.auth-card p {
  color: var(--fg-2);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  margin: 0 0 var(--s-4);
}
.auth-sub { margin-bottom: var(--s-5) !important; }

.auth-field { display: block; margin-bottom: var(--s-4); }
.auth-field > span {
  display: block;
  font-size: var(--t-ui);
  font-weight: 500;
  color: var(--fg-2);
  margin-bottom: var(--s-2);
}
.auth-field input {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 0 var(--s-4);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--bone);
  border-radius: var(--r-2);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.auth-field input:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 2px rgba(63, 91, 76, .18);
}
.auth-field small {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-micro);
  color: var(--fg-3);
}

.auth-submit { width: 100%; justify-content: center; margin-top: var(--s-2); }

.auth-error {
  background: var(--cardinal-soft);
  color: #7A2520;
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  margin: 0 0 var(--s-4);
}

.auth-card p.auth-muted {
  color: var(--fg-3);
  font-size: var(--t-ui);
  line-height: var(--t-ui-lh);
  margin: var(--s-5) 0 0;
}
.auth-muted a { color: var(--sage); }