:root {
  --bg: #f6f7f9;
  --flaeche: #ffffff;
  --text: #1c1f24;
  --leise: #5d6570;
  --rand: #d5d9df;
  --akzent: #2458c6;
  --akzent-text: #ffffff;
  --ok: #1f7a3d;
  --fehler: #b3261e;
  --hinweis: #8a5a00;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171b;
    --flaeche: #1e2126;
    --text: #e6e8eb;
    --leise: #9aa2ad;
    --rand: #353a42;
    --akzent: #6d9bff;
    --akzent-text: #0d1117;
    --ok: #5cc27f;
    --fehler: #ff8a80;
    --hinweis: #f0b54a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main, .kopf, footer {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
}

.kopf h1 { font-size: 1.25rem; margin: 0; }
.kopf .status { flex: 1; margin: 0; }

section {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

h2 { font-size: 1rem; margin: 0 0 .5rem; }

.zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

textarea {
  width: 100%;
  resize: vertical;
  font: 14px/1.4 ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: .6rem;
  tab-size: 4;
}

.knoepfe { display: flex; align-items: center; gap: .75rem; margin-top: .6rem; flex-wrap: wrap; }

button {
  font: inherit;
  border-radius: 6px;
  border: 1px solid var(--akzent);
  background: var(--akzent);
  color: var(--akzent-text);
  padding: .45rem 1rem;
  cursor: pointer;
}

button:disabled { opacity: .6; cursor: progress; }
button.leise { background: transparent; color: var(--akzent); }
button.link { background: none; border: none; padding: 0; color: var(--akzent); text-decoration: underline; }

.info { color: var(--leise); font-size: .875rem; }
.hinweis { color: var(--hinweis); margin: .25rem 0 .5rem; }
.status[data-art="ok"] { color: var(--ok); }
.status[data-art="fehler"], .fehler { color: var(--fehler); }
.status[data-art="hinweis"] { color: var(--hinweis); }
.status a { color: inherit; }

footer { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 2rem; }

.anmeldung main { max-width: 22rem; padding-top: 12vh; }
.anmeldung form { display: grid; gap: .8rem; }
.anmeldung label { display: grid; gap: .25rem; }
.anmeldung label.haken { display: flex; align-items: center; gap: .5rem; }
.anmeldung input:not([type="checkbox"]) {
  font: inherit;
  padding: .45rem .6rem;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: var(--flaeche);
  color: var(--text);
}
.anmeldung .info { margin: -.4rem 0 0; }