/* Grosse Schrift, hoher Kontrast, wenige Elemente (PFLICHTENHEFT 7) */
:root {
  --text: #111;
  --grund: #fff;
  --leise: #444;
  --gruen: #1d5e20;
  --gruen-hell: #e8f3e6;
  --rand: #888;
  --fehler: #a00000;
  --mark: #ffe066;
}
* { box-sizing: border-box; }
html { font-size: 125%; }            /* 20 px */
body {
  margin: 0; color: var(--text); background: var(--grund);
  font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.5;
}
main { max-width: 52rem; margin: 0 auto; padding: 1rem 1rem 3rem; }
h1 { font-size: 1.6rem; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.3rem; overflow-wrap: anywhere; }
a { color: var(--gruen); }
a:focus, button:focus, input:focus { outline: 3px solid #000; outline-offset: 2px; }

.sprung { position: absolute; left: -999px; }
.sprung:focus { left: 1rem; top: 1rem; background: #fff; padding: 0.5rem; z-index: 2; }

.kopf { background: var(--gruen); color: #fff; }
.kopf-innen { max-width: 52rem; margin: 0 auto; padding: 0.6rem 1rem; }
.kopf .name { margin: 0; font-weight: 700; font-size: 1.15rem; }
.kopf .name span { display: block; font-weight: 400; font-size: 0.85rem; }
.kopf nav ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.kopf nav a, .kopf .knopf-link { color: #fff; font-size: 1rem; }
.kopf nav a[aria-current="page"] { font-weight: 700; }
.kopf nav form { margin: 0; }
.knopf-link { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; font: inherit; }

label { display: block; font-weight: 600; margin: 1rem 0 0.3rem; }
input { font: inherit; width: 100%; padding: 0.6rem; border: 2px solid var(--rand); border-radius: 6px; }
.formular { max-width: 24rem; }
.knopf {
  display: inline-block; font: inherit; font-weight: 600; margin-top: 1rem;
  padding: 0.6rem 1.2rem; border: 2px solid var(--gruen); border-radius: 6px;
  background: var(--gruen); color: #fff; cursor: pointer; text-decoration: none;
}
.knopf.zweit { background: #fff; color: var(--gruen); margin-top: 0.3rem; }

.suchfeld .zeile { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.suchfeld input { flex: 1 1 14rem; }
.suchfeld .knopf { margin-top: 0; }
.beispiele a { white-space: nowrap; }

.meldung { padding: 0.7rem 1rem; border-radius: 6px; border-left: 6px solid var(--gruen); background: var(--gruen-hell); }
.meldung.fehler { border-color: var(--fehler); background: #fdecec; color: var(--fehler); }

.treffer { padding-left: 1.6rem; }
.treffer li { margin: 0 0 1.4rem; padding: 0.8rem 1rem; border: 2px solid #ddd; border-radius: 8px; }
.treffer li.aelter { border-style: dashed; }
.angaben { margin: 0; color: var(--leise); font-size: 0.9rem; }
.stand { margin: 0.2rem 0; font-size: 0.9rem; font-weight: 600; }
.treffer li.aelter .stand { color: #7a4b00; }
.ausschnitt { margin: 0.4rem 0; }
.hinweis { margin: 0.2rem 0; font-size: 0.9rem; color: var(--leise); }
mark { background: var(--mark); color: #000; padding: 0 0.1em; }

/* Frage und Antwort */
textarea { font: inherit; width: 100%; padding: 0.6rem; border: 2px solid var(--rand); border-radius: 6px; }
textarea:focus { outline: 3px solid #000; outline-offset: 2px; }
.frageform { max-width: 44rem; }
button[disabled] { opacity: 0.6; cursor: wait; }
.frage-titel { font-size: 1.35rem; }
.antwort { font-size: 1.05rem; padding: 0.8rem 1rem; border-left: 6px solid var(--gruen); background: #fafafa; }
.antwort p { margin: 0 0 0.7rem; }
.antwort a.zitat { white-space: nowrap; font-size: 0.9rem; }
.zitat.fremd { color: var(--fehler); white-space: nowrap; }
.ungeprueft { background: #fde2e2; border-bottom: 2px dotted var(--fehler); }
.meldung.warnung { border-color: #b36b00; background: #fff4e0; }
.treffer li.zitiert { border-color: var(--gruen); }
h3 { font-size: 1.05rem; margin: 0 0 0.3rem; overflow-wrap: anywhere; }
.verlauf, .verlauf-kurz, .beispiele-liste { padding-left: 1.2rem; }
.verlauf li, .verlauf-kurz li, .beispiele-liste li { margin-bottom: 0.5rem; }
.verlauf .hinweis, .verlauf-kurz .hinweis { display: block; }
.tabelle { overflow-x: auto; }
table { border-collapse: collapse; min-width: 100%; }
th, td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid #ccc; white-space: nowrap; }

.aktivitaet { padding-left: 1.2rem; }
.aktivitaet li { margin-bottom: 0.3rem; }
details { margin: 0.5rem 0 1rem; }
summary { cursor: pointer; color: var(--gruen); font-weight: 600; }