/* Schlicht und funktional – das Aussehen kommt später. */
:root {
  --grund: #fafaf7; --text: #1d1d1f; --leise: #6b6b70; --linie: #d9d9d4; --feld: #fff;
  --akzent: #5b2a86;
  --a0: #c62f3a; --a1: #1f5fbf; --a2: #c98a00; --a3: #2b8a3e;
  --ok: #2b8a3e; --falsch: #c62f3a;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--grund); color: var(--text); font: 17px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 1.8rem; margin: 0 0 .4em; }
h2 { font-size: 1.25rem; margin: 1.4em 0 .5em; }
a { color: var(--akzent); }
button, .knopf {
  font: inherit; cursor: pointer; border: 1px solid var(--linie); background: var(--feld); color: inherit;
  padding: .55em 1em; border-radius: 8px; text-decoration: none; display: inline-block;
}
button.haupt, .knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; }
button:disabled { opacity: .5; cursor: default; }
input, textarea, select { font: inherit; padding: .5em .6em; border: 1px solid var(--linie); border-radius: 8px; background: var(--feld); color: inherit; width: 100%; }
textarea { resize: vertical; }
label { display: block; }
.leise { color: var(--leise); }
.zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.zeile > .wachsen { flex: 1 1 200px; }
.hinweis { padding: .7em 1em; border-radius: 8px; background: #fff4d6; border: 1px solid #ecd48a; margin: 1em 0; }
.fehler { padding: .7em 1em; border-radius: 8px; background: #fde4e4; border: 1px solid #e9a3a3; margin: 1em 0; }
.versteckt { display: none !important; }

/* Antwortfarben mit Form */
.a0 { --farbe: var(--a0); } .a1 { --farbe: var(--a1); } .a2 { --farbe: var(--a2); } .a3 { --farbe: var(--a3); }
.antwort { background: var(--farbe); color: #fff; border: 0; border-radius: 10px; padding: .8em 1em; display: flex; gap: .7em; align-items: center; font-weight: 600; text-align: left; }
.antwort .form { font-size: 1.3em; line-height: 1; }
.antwort.blass { opacity: .28; }
.antwort.richtig { outline: 5px solid var(--text); outline-offset: 3px; }
.antworten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .antworten { grid-template-columns: 1fr; } }
.fuss { margin-top: 3em; font-size: .9em; }
.karte { border: 1px solid var(--linie); border-radius: 10px; padding: 14px; background: var(--feld); margin: 12px 0; }
.marke { font-family: Georgia, "Iowan Old Style", serif; letter-spacing: .01em; }
table { border-collapse: collapse; width: 100%; }
td, th { text-align: left; padding: .45em .5em; border-bottom: 1px solid var(--linie); vertical-align: top; }
:root { --a4: #7b3fa0; --a5: #0f8a8a; --a6: #b5521b; --a7: #4b5563; }
.a4 { --farbe: var(--a4); } .a5 { --farbe: var(--a5); } .a6 { --farbe: var(--a6); } .a7 { --farbe: var(--a7); }