/* Anmeldeseiten (WP3), bewusst schlicht. Nur Variablen aus tokens.css, keine festen Farbwerte.
   Das endgültige Gestaltungssystem kommt mit WP6. */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-portal);
  color: var(--color-text);
  background: var(--color-ground);
  line-height: 1.5;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--space-4); top: var(--space-4); background: var(--color-surface); padding: var(--space-2); }
.topbar {
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  font-weight: 600;
}
.auth-main { display: flex; justify-content: center; padding: var(--space-6) var(--space-4); }
.auth-card {
  width: 100%;
  max-width: 30rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
h1 { font-size: var(--text-h2); margin: 0 0 var(--space-4); }
h2 { font-size: var(--text-h3); margin: var(--space-5) 0 var(--space-2); }
a { color: var(--color-accent); }
.field { margin-bottom: var(--space-4); }
label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-sm);
}
input[aria-invalid="true"] { border: 2px solid var(--color-danger); }
input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}
.help, .hint { color: var(--color-text-muted); font-size: var(--text-md); margin: var(--space-1) 0 0; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-weight: 600;
  color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
}
.button-primary { color: var(--color-surface); background: var(--color-accent); }
.button-primary:hover { background: var(--color-accent-strong); }
.button-link { border: none; text-decoration: underline; padding-left: 0; margin-top: var(--space-5); }
/* Anmeldung über Entra ID (WP8): ganze Breite, Link als Knopf */
.button-block { display: flex; width: 100%; justify-content: center; text-decoration: none; }
.alert {
  padding: var(--space-3);
  margin: var(--space-3) 0;
  color: var(--color-danger);
  background: var(--color-danger-soft);
  border-left: 4px solid var(--color-danger);
  border-radius: var(--radius-sm);
}
.divider { color: var(--color-text-subtle); text-align: center; margin: var(--space-4) 0; }
.option { border-top: 1px solid var(--color-line); padding-top: var(--space-2); }
.code-list { font-family: var(--font-mono); columns: 2 16ch; column-gap: var(--space-6); padding-left: var(--space-6); }
.secret, .mono { font-family: var(--font-mono); word-break: break-all; }
.item-list { padding-left: var(--space-5); }
[hidden] { display: none !important; }