/* Login page of the Artefakt-Dashboard: system fonts, light/dark tokens, works from 320 px. */
:root {
  --hintergrund: #f4f5f7;
  --karte: #ffffff;
  --text: #1c1f24;
  --leise: #5b6270;
  --rand: #c9ced6;
  --akzent: #1f5fbf;
  --akzent-text: #ffffff;
  --fehler-hg: #fde8e8;
  --fehler-text: #8a1c1c;
  --fokus: #f2a900;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hintergrund: #14161a;
    --karte: #1e2127;
    --text: #e8eaee;
    --leise: #a3aab6;
    --rand: #3a3f48;
    --akzent: #6ea2f0;
    --akzent-text: #0d1117;
    --fehler-hg: #3b1c1c;
    --fehler-text: #ffc4c4;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--hintergrund);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

h1 { margin: 0 0 4px; font-size: 1.6rem; }

.karte > p { margin: 0 0 16px; color: var(--leise); }

.meldung {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--fehler-hg);
  color: var(--fehler-text);
}

form { display: flex; flex-direction: column; gap: 8px; }

label { font-weight: 600; }

input[type="text"], input[type="password"] {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--karte);
  color: var(--text);
  font: inherit;
}

fieldset {
  margin: 8px 0 0;
  padding: 8px 12px 12px;
  border: 1px solid var(--rand);
  border-radius: 8px;
}

legend { font-weight: 600; padding: 0 4px; }

fieldset label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 400;
  cursor: pointer;
}

input[type="radio"] { width: 22px; height: 22px; margin: 0; accent-color: var(--akzent); }

button {
  min-height: 44px;
  margin-top: 12px;
  border: 0;
  border-radius: 8px;
  background: var(--akzent);
  color: var(--akzent-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }