/* Anmeldeseite – dieselben Tokens wie die Zentrale (zentrale/zentrale.css), damit sie ohne Anmeldung lädt. */
:root {
  --grund: #f2f4f7; --flaeche: #ffffff; --flaeche-2: #e8ecf1; --tinte: #141a24; --tinte-2: #465163; --tinte-3: #6b7587;
  --linie: #d6dce5; --akzent: #3a6ee8; --akzent-tief: #2551b8; --fehler: #9b2c1f; --fehler-grund: #fbe4df; --knopf-text: #ffffff;
  --m1: #3a6ee8; --m2: #e0a100; --m3: #0f8b8d; --m4: #e8552d;
  --schrift: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --grund: #0f1319; --flaeche: #171c24; --flaeche-2: #202733; --tinte: #eef1f6; --tinte-2: #b4bccb; --tinte-3: #8a93a4;
    --linie: #2b3340; --akzent: #6f97ff; --akzent-tief: #4a74e0; --fehler: #ffb4a6; --fehler-grund: #3d1a14; --knopf-text: #0f1319;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --grund: #0f1319; --flaeche: #171c24; --flaeche-2: #202733; --tinte: #eef1f6; --tinte-2: #b4bccb; --tinte-3: #8a93a4;
  --linie: #2b3340; --akzent: #6f97ff; --akzent-tief: #4a74e0; --fehler: #ffb4a6; --fehler-grund: #3d1a14; --knopf-text: #0f1319;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: var(--grund); color: var(--tinte); font-family: var(--schrift); line-height: 1.5; }
.rahmen { min-height: 100vh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 16px 24px; }
.karte {
  width: 100%; max-width: 380px; background: var(--flaeche); border-radius: 18px; padding: 28px 24px;
  box-shadow: inset 0 0 0 1px var(--linie), 0 12px 32px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; gap: 6px;
}
.marke { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 14px; }
.marke-zeichen { display: grid; grid-template-columns: repeat(2, 9px); gap: 3px; }
.marke-zeichen i { width: 9px; height: 9px; border-radius: 3px; background: var(--m1); }
.marke-zeichen i:nth-child(2) { background: var(--m2); }
.marke-zeichen i:nth-child(3) { background: var(--m3); }
.marke-zeichen i:nth-child(4) { background: var(--m4); }
h1 { margin: 0; font-size: 1.6rem; line-height: 1.2; }
.leise { margin: 0 0 14px; color: var(--tinte-3); font-size: 0.92rem; }
label { font-weight: 700; font-size: 0.9rem; color: var(--tinte-2); margin-top: 6px; }
input {
  font: inherit; color: inherit; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 0;
  background: var(--flaeche-2); box-shadow: inset 0 0 0 1px var(--linie);
}
input:focus-visible, .knopf:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.meldung { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--fehler-grund); color: var(--fehler); font-size: 0.92rem; }
.knopf {
  font: inherit; font-weight: 700; margin-top: 14px; min-height: 50px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--akzent); color: var(--knopf-text); box-shadow: 0 3px 0 var(--akzent-tief);
}
.knopf:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--akzent-tief); }
.knopf:disabled { opacity: 0.6; cursor: progress; }

/* RLGame (04.11.2026): Marke und Farben des Spiels, ein Login für alle */
:root { --r: #e8457a; --l: #3a9a4a; --g: #ff7a1a; --marke-tinte: #1f3a5f; --anzeige: "Fredoka", "Nunito", system-ui, sans-serif;
  --akzent: #e8457a; --akzent-tief: #b8235a; --knopf-text: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --r: #ff6b9a; --l: #6fd47e; --g: #ff9a4d; --marke-tinte: #eaf4ff; --akzent: #ff6b9a; --akzent-tief: #c23d6b; --knopf-text: #1a0c14; } }
:root[data-theme="dark"] { --r: #ff6b9a; --l: #6fd47e; --g: #ff9a4d; --marke-tinte: #eaf4ff; --akzent: #ff6b9a; --akzent-tief: #c23d6b; --knopf-text: #1a0c14; }
.marke { font-family: var(--anzeige); font-size: 2rem; font-weight: 700; letter-spacing: -0.5px; color: var(--marke-tinte); text-decoration: none; gap: 0; }
.marke .r { color: var(--r); } .marke .l { color: var(--l); } .marke .g { color: var(--g); }
h1 { font-family: var(--anzeige); font-weight: 600; }
a.knopf { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.nebenknopf { align-self: center; margin-top: 8px; color: var(--tinte-2); font-size: 0.92rem; }
.fuss { margin: 10px 0 0; color: var(--tinte-3); font-size: 0.85rem; text-align: center; }
.unten { text-align: center; padding: 0 16px max(18px, env(safe-area-inset-bottom)); color: var(--tinte-3); font-size: 0.85rem; }
.unten a { color: var(--tinte-2); }
.rahmen { min-height: calc(100vh - 60px); }