/* Anmeldung mit Face ID. Steht in einer eigenen Datei, weil die Inhaltsrichtlinie nur 'self' zulaesst. */
:root {
  --grund: #0d1117; --feld: #161b22; --rand: #30363d;
  --schrift: #e6edf3; --gedaempft: #8b949e;
  --gut: #3fb950; --warnung: #d29922; --schlecht: #f85149; --betont: #58a6ff;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100dvh; display: flex; align-items: center;
  justify-content: center; padding: 1.5rem;
  /* Platz für die Statusleiste der PWA, siehe geraete.html. */
  padding-top: max(1.5rem, calc(env(safe-area-inset-top) + .7rem));
  padding-bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + .7rem));
  background: var(--grund); color: var(--schrift);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}
main { width: 100%; max-width: 24rem; text-align: center; }
.zeichen { width: 4.5rem; height: 4.5rem; margin: 0 auto 1.25rem; display: block; }
h1 { font-size: 1.5rem; margin: 0 0 .4rem; letter-spacing: -.01em; }
.unter { color: var(--gedaempft); font-size: .9rem; margin: 0 0 1.75rem; }
button {
  width: 100%; padding: .95rem 1rem; font-size: 1.02rem; font-weight: 600;
  font-family: inherit; color: #04140a; background: var(--gut);
  border: 0; border-radius: .7rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.1rem; -webkit-tap-highlight-color: transparent;
  transition: transform .1s ease, filter .15s ease;
}
button:active:not(:disabled) { transform: scale(.985); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible { outline: 2px solid var(--betont); outline-offset: 3px; }
button.zweit {
  background: transparent; color: var(--gedaempft);
  border: 1px solid var(--rand); margin-top: .7rem; font-weight: 500;
  font-size: .92rem; min-height: 2.7rem;
}
.hinweis {
  margin-top: 1.25rem; padding: .8rem .9rem; border-radius: .6rem;
  font-size: .88rem; text-align: left; border: 1px solid var(--rand);
  background: var(--feld); display: none;
}
.hinweis.zeigen { display: block; }
.hinweis.fehler { border-color: var(--schlecht); color: #ffb4ae; }
.hinweis.gut { border-color: var(--gut); color: #8ee79c; }
.fuss {
  margin-top: 2rem; font-size: .78rem; color: var(--gedaempft);
  line-height: 1.5; text-align: left;
  border-top: 1px solid var(--rand); padding-top: 1rem;
}
.fuss strong { color: var(--schrift); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }