/* Freischaltseite der Vorsitzer-App.
 *
 * ⚠️ EIGENE Datei und kein <style>-Block: das CSP von prod ist
 * `default-src 'self'`, ein Block im Dokument würde verworfen und die Seite
 * käme unformatiert an. Am 30.10.2026 nachgeprüft.
 *
 * Werte an den Webauftritt angelehnt (Flächen, Linien, abgerundeter Knopf),
 * aber bewusst eigenständig: diese Seite liegt auf prod und hat dessen
 * Stylesheet nicht. Hell und dunkel über prefers-color-scheme, ohne Schalter —
 * eine Seite, die man einmal im Leben aufruft, braucht keine Einstellung.
 */
:root {
  --bg:#f6f7f9; --fg:#1a1a2e; --leise:#5a5c6b; --linie:#dcdee5;
  --flaeche:#ffffff; --ton:#2f5e9e; --ton-auf:#ffffff;
  --fehler-bg:#fdecec; --fehler-li:#c0392b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#12131a; --fg:#e8e9ee; --leise:#9a9cab; --linie:#2a2c38;
    --flaeche:#191b24; --ton:#8fb2e8; --ton-auf:#12131a;
    --fehler-bg:#2a1718; --fehler-li:#e07b72;
  }
}

* { box-sizing:border-box; }

body {
  margin:0; padding:1.5rem 1rem 3rem;
  background:var(--bg); color:var(--fg);
  font:1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display:flex; justify-content:center;
}

.kasten {
  width:min(34rem, 100%);
  padding:1.6rem;
  background:var(--flaeche);
  border:1px solid var(--linie); border-radius:16px;
}

h1 { margin:0 0 .2rem; font-size:1.3rem; }
h2 { margin:1.6rem 0 .4rem; font-size:1rem; }
p  { margin:0 0 .9rem; }

.fakten { margin:0 0 1.1rem; color:var(--leise); font-size:.9rem; }
.leise  { color:var(--leise); font-size:.88rem; }

a { color:var(--ton); }

.fehler {
  padding:.7rem .9rem; border-radius:10px;
  background:var(--fehler-bg); border-left:4px solid var(--fehler-li);
}

/* Die vier Blöcke. ⚠️ `flex-wrap` ist nicht Zierde: auf 320 px Breite passen
   vier Felder plus drei Striche nicht in eine Zeile, und ohne Umbruch liefe
   das letzte Feld aus dem Kasten. */
.felder {
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;
  margin:0 0 1.1rem;
}
.felder input {
  flex:1 1 4.5rem; min-width:3.6rem;
  padding:.6rem .4rem;
  font:1.15rem/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-align:center; text-transform:uppercase; letter-spacing:.08em;
  color:var(--fg); background:var(--bg);
  border:1px solid var(--linie); border-radius:10px;
}
.felder input:focus-visible { outline:2px solid var(--ton); outline-offset:1px; }
.strich { flex:none; color:var(--leise); }

.knopf {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:2.6rem; padding:.6rem 1.2rem;
  border:0; border-radius:999px;
  background:var(--ton); color:var(--ton-auf);
  font:inherit; font-weight:600; text-decoration:none; cursor:pointer;
}
.knopf.gross { width:100%; min-height:3rem; font-size:1.05rem; }
.knopf:hover { filter:brightness(1.08); }
.knopf:focus-visible { outline:2px solid var(--ton); outline-offset:2px; }