/* Atkinson Hyperlegible — für Menschen mit eingeschränktem Sehen entworfen,
   unterscheidet ähnliche Zeichen deutlich. Liegt lokal: keine Anfrage an Dritte. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/schrift/atkinson-400.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/schrift/atkinson-700.woff2") format("woff2");
}

:root {
  --ground: #f4f4f1;
  --flaeche: #ffffff;
  --vertieft: #eceee7;
  --linie: #dfe0d8;
  --linie-stark: #c8cabe;
  --schrift: #22251f;
  --schrift-2: #5d6158;
  --schrift-3: #878b7f;
  --akzent: #2c7a3f;
  --akzent-dunkel: #235f32;
  --warnung: #a8571a;
  --gefahr: #c4432a;

  /* Klassenscreen */
  --s-grund: #d5d3ce;
  --s-schrift: #2a2724;
  --s-leer: #bcb9b3;
  --s-5: #2c7a3f;
  --s-4: #e3c520;
  --s-3: #e5901e;
  --s-2: #dd5a20;
  --s-1: #cc2222;
}
[data-farben="original"] {
  --s-grund: #cecece;
  --s-schrift: #000000;
  --s-leer: #cecece;
  --s-5: #176d27;
  --s-4: #f6f31a;
  --s-3: #f6961a;
  --s-2: #f6581a;
  --s-1: #ff0000;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--schrift);
  font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1 { font-size: 1.6rem; line-height: 1.2; margin: 0; }
h2 { font-size: 1.2rem; line-height: 1.25; margin: 0; }
p { margin: 0; }

.seite { max-width: 640px; margin: 0 auto; padding: 20px 18px 60px; }

/* ---------- Bedienelemente ---------- */

.knopf {
  font: inherit;
  font-weight: 700;
  padding: 13px 20px;
  border-radius: 11px;
  border: 1px solid var(--linie-stark);
  background: var(--flaeche);
  color: var(--schrift);
  cursor: pointer;
  min-height: 48px;
}
.knopf:hover { border-color: var(--akzent); color: var(--akzent); }
.knopf:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.knopf.haupt:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #fff; }
.knopf.gefahr { color: var(--gefahr); border-color: #e4c3ba; }
.knopf.gefahr:hover { background: var(--gefahr); border-color: var(--gefahr); color: #fff; }
.knopf.schmal { padding: 8px 14px; min-height: 40px; font-size: .92rem; }
.knopf[disabled] { opacity: .5; cursor: default; }

input[type="text"], input[type="password"], input[type="number"], select {
  font: inherit;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--linie-stark);
  background: var(--flaeche);
  color: var(--schrift);
  min-height: 48px;
}
input:focus-visible, select:focus-visible { outline: 3px solid var(--akzent); outline-offset: 1px; }

label.feld { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--schrift-2); }
label.feld > span { font-weight: 700; letter-spacing: .04em; }

.meldung {
  border-radius: 10px;
  padding: 12px 15px;
  font-size: .93rem;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  border-left: 3px solid var(--warnung);
}
.meldung.fehler { border-left-color: var(--gefahr); }
.meldung.gut { border-left-color: var(--akzent); }
.meldung:empty { display: none; }

.reihe { display: flex; gap: 10px; flex-wrap: wrap; }
.stapel { display: flex; flex-direction: column; gap: 14px; }
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 18px;
}
.leise { color: var(--schrift-3); font-size: .85rem; }

kbd {
  font-family: ui-monospace, Menlo, monospace;
  font-size: .82em;
  border: 1px solid var(--linie-stark);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  background: var(--flaeche);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .12s !important; }
}