/* Die Anmeldeseite steht vor dem Riegel und lädt deshalb nichts nach, was
   dahinter liegt – keine Schrift von der Vorlage, kein stil.css. Systemschrift
   und ein paar Regeln genügen; die Optik des Editors beginnt dahinter. */

:root {
  color-scheme: light dark;
  --a-grund: #faf8f4;
  --a-karte: #ffffff;
  --a-schrift: #23201c;
  --a-leise: #6b655c;
  --a-rand: #ddd6cb;
  --a-ton: #8a5a2b;
  --a-rot: #9b2c1f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --a-grund: #181613;
    --a-karte: #22201c;
    --a-schrift: #ece7de;
    --a-leise: #a29a8d;
    --a-rand: #3a352e;
    --a-ton: #d7a066;
    --a-rot: #e8836f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--a-grund);
  color: var(--a-schrift);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.a-karte {
  width: 100%;
  max-width: 24rem;
  padding: 28px 24px 24px;
  background: var(--a-karte);
  border: 1px solid var(--a-rand);
  border-radius: 12px;
}

h1 { margin: 0; font-size: 1.6rem; letter-spacing: 0.02em; }
.a-unter { margin: 2px 0 20px; color: var(--a-leise); font-size: 0.9rem; }

.a-form { display: flex; flex-direction: column; gap: 4px; }
.a-form label { margin-top: 12px; font-size: 0.85rem; color: var(--a-leise); }

.a-form input {
  padding: 10px 12px;
  font: inherit;
  color: inherit;
  background: var(--a-grund);
  border: 1px solid var(--a-rand);
  border-radius: 8px;
}
.a-form input:focus-visible { outline: 2px solid var(--a-ton); }

#code { font-variant-numeric: tabular-nums; letter-spacing: 0.25em; }

.a-form button {
  margin-top: 18px;
  padding: 11px 14px;
  font: inherit;
  font-weight: 600;
  color: var(--a-karte);
  background: var(--a-ton);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.a-form button[disabled] { opacity: 0.6; cursor: progress; }

details { margin-top: 20px; border-top: 1px solid var(--a-rand); padding-top: 12px; }
summary { cursor: pointer; color: var(--a-leise); font-size: 0.9rem; }
.a-klein { margin: 10px 0 0; font-size: 0.8rem; color: var(--a-leise); }

.a-stand { min-height: 1.4em; margin: 16px 0 0; font-size: 0.9rem; }
.a-stand.fehler { color: var(--a-rot); }

/* Der Passkey-Knopf steht oben: Er ist der Alltagsweg, das Formular darunter
   der Rückfall (Zugangs-Spec 2.6). */
.a-passkey {
  width: 100%;
  margin-top: 4px;
  padding: 12px 14px;
  font: inherit;
  font-weight: 600;
  color: var(--a-schrift);
  background: var(--a-grund);
  border: 1px solid var(--a-ton);
  border-radius: 8px;
  cursor: pointer;
}
.a-passkey[disabled] { opacity: 0.6; cursor: progress; }

.a-oder {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  color: var(--a-leise);
  font-size: 0.8rem;
}
.a-oder::before, .a-oder::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--a-rand);
}