/* Bewusst schlicht. Das Aussehen kommt spaeter obendrauf; hier zaehlt nur,
   dass jeder Zustand erreichbar und lesbar ist. */
:root{
  --grund:#fbfbfa; --feld:#fff; --linie:#dcdcd8; --schrift:#1b1b19; --still:#6b6b66;
  --rot:#a4243b; --rot-grund:#fbeaed; --gruen:#2f6b3a; --blau:#2b4f7a; --blau-grund:#eaf0f7;
  --gelb-grund:#fdf3dd; --gelb:#8a6100;
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
     background:var(--grund);color:var(--schrift);display:flex;flex-direction:column;min-height:100vh}
header{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--feld);
       border-bottom:1px solid var(--linie);flex-wrap:wrap}
.wachsen{flex:1}
main{flex:1;padding:20px 16px;max-width:820px;width:100%;margin:0 auto}
footer{padding:10px 16px;border-top:1px solid var(--linie);background:var(--feld);
       font-size:12px;color:var(--still);text-align:center}
h1{font-size:20px;margin:0 0 4px}
h2{font-size:17px;margin:24px 0 8px}
h3{font-size:14px;margin:18px 0 6px;color:var(--still)}
p{margin:0 0 12px}
label{display:block;margin-bottom:12px;font-size:13px;color:var(--still)}
input,select,textarea{width:100%;padding:8px 9px;border:1px solid var(--linie);border-radius:4px;
                      font:inherit;background:var(--feld);color:inherit;margin-top:3px}
textarea{min-height:80px;resize:vertical}
button{font:inherit;padding:8px 14px;border:1px solid var(--linie);border-radius:4px;
       background:var(--feld);cursor:pointer;color:inherit}
button:hover:not(:disabled){background:#f0f0ed}
button:disabled{opacity:.5;cursor:default}
button.haupt{background:var(--blau);border-color:var(--blau);color:#fff}
button.haupt:hover:not(:disabled){background:#24425f}
button.still{color:var(--still);border-color:transparent;background:transparent}
button.gefahr{color:var(--rot);border-color:#e0b6be}
.karte{background:var(--feld);border:1px solid var(--linie);border-radius:6px;padding:16px;margin-bottom:14px}
.karte h2{margin-top:0}
.reihe{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.still{color:var(--still);font-size:13px}
.fehler{color:var(--rot);background:var(--rot-grund);border:1px solid #e0b6be;
        border-radius:5px;padding:9px 12px;margin-bottom:12px;font-size:14px}
.hinweis{background:var(--blau-grund);border:1px solid #c3d3e6;border-radius:5px;
         padding:9px 12px;margin-bottom:12px;font-size:14px}
.warnung{background:var(--gelb-grund);border:1px solid #e7d5a6;color:var(--gelb);
         border-radius:5px;padding:9px 12px;margin-bottom:12px;font-size:14px}
.wortlaut{white-space:pre-wrap;background:#f6f6f3;border:1px solid var(--linie);border-radius:5px;
          padding:12px;font-size:13px;max-height:260px;overflow:auto;margin-bottom:12px}
.kursliste{list-style:none;padding:0;margin:0}
.kursliste li{border:1px solid var(--linie);border-radius:6px;padding:12px;margin-bottom:8px;background:var(--feld)}
.kursliste .name{font-weight:600}
.marke{font-size:11px;padding:1px 7px;border-radius:9px;border:1px solid var(--linie);color:var(--still)}
.marke.frei{background:#eef5ee;border-color:#c7d9c7;color:var(--gruen)}
.marke.zu{background:var(--gelb-grund);border-color:#e7d5a6;color:var(--gelb)}
.gespraech{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.zug{border:1px solid var(--linie);border-radius:6px;padding:12px;background:var(--feld)}
.zug.frage{background:var(--blau-grund);border-color:#c3d3e6}
.zug .phase{font-size:12px;color:var(--still);font-style:italic}
.zug .satz{margin:0 0 8px}
.zug .belege{font-size:12px;color:var(--still)}
.fundstellen{font-size:12px;color:var(--still);border-top:1px solid var(--linie);
             margin-top:10px;padding-top:8px}
.fundstellen b{color:var(--schrift)}
.kikennung{font-size:11px;color:var(--still);margin-top:8px;font-style:italic}
.unterschriftsfeld{border:1px solid var(--linie);border-radius:5px;background:var(--feld);
                   touch-action:none;display:block;width:100%;max-width:420px;height:130px}
.wahl{display:flex;gap:14px;margin:6px 0 12px;font-size:13px}
.wahl label{display:flex;align-items:center;gap:5px;margin:0}
.wahl input{width:auto;margin:0}
.kurshaken{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px;font-size:14px;color:var(--schrift)}
.kurshaken input{width:auto;margin:3px 0 0}
table{border-collapse:collapse;width:100%;font-size:13px;background:var(--feld);border:1px solid var(--linie)}
th,td{text-align:left;padding:6px 9px;border-bottom:1px solid var(--linie)}
th{background:#f4f4f1;font-weight:600;font-size:12px}
.aufgabe{border:1px solid var(--linie);border-radius:6px;padding:12px;margin-bottom:10px;background:var(--feld)}
.aufgabe .punkte{float:right;color:var(--still);font-size:12px}