:root {
  --grund: #f7f7f5;
  --flaeche: #ffffff;
  --linie: #ddddd6;
  --schrift: #1c1c1a;
  --leise: #5f5f58;
  --akzent: #1f5c4c;
  --warnung: #8a2d2d;
  --hinweis: #7a5b12;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
header.kopf {
  background: var(--akzent);
  color: #fff;
  padding: 0.75rem 1rem;
}
header.kopf .zeile {
  max-width: 62rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline;
  justify-content: space-between;
}
header.kopf .marke { font-weight: 700; letter-spacing: 0.02em; }
header.kopf .wer { font-size: 0.9rem; opacity: 0.92; }
header.kopf form { display: inline; }
nav.hauptmenue {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
nav.hauptmenue ul {
  max-width: 62rem; margin: 0 auto; padding: 0 0.5rem;
  list-style: none; display: flex; flex-wrap: wrap;
}
nav.hauptmenue a {
  display: block; padding: 0.7rem 0.75rem;
  color: var(--leise); text-decoration: none;
  border-bottom: 3px solid transparent;
}
nav.hauptmenue a:hover { color: var(--schrift); }
nav.hauptmenue a[aria-current="page"] { color: var(--akzent); border-bottom-color: var(--akzent); font-weight: 600; }
main { max-width: 62rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
main.schmal { max-width: 26rem; }
h1 { font-size: 1.4rem; margin: 0 0 0.25rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }
p.leise, .leise { color: var(--leise); }
p.leise { margin-top: 0.25rem; }
.karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 8px; padding: 1rem; margin: 1rem 0;
}
label { display: block; margin: 0.9rem 0 0.25rem; font-weight: 600; font-size: 0.95rem; }
input[type=text], input[type=email], input[type=password], select {
  width: 100%; padding: 0.6rem 0.7rem; font-size: 1rem;
  border: 1px solid var(--linie); border-radius: 6px; background: #fff; color: inherit;
}
input:focus, select:focus, button:focus { outline: 3px solid #9dc7b8; outline-offset: 1px; }
button {
  margin-top: 1rem; padding: 0.6rem 1.1rem; font-size: 1rem; font-weight: 600;
  background: var(--akzent); color: #fff; border: 0; border-radius: 6px; cursor: pointer;
}
button.leisetaste { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); margin: 0; padding: 0.25rem 0.6rem; font-size: 0.85rem; }
.meldung { border-radius: 6px; padding: 0.7rem 0.9rem; margin: 1rem 0; border: 1px solid; }
.meldung.fehler { background: #fdf1f1; border-color: #e3bcbc; color: var(--warnung); }
.meldung.gut { background: #eef6f2; border-color: #bcd9cd; color: var(--akzent); }
.meldung.hinweis { background: #fdf8e9; border-color: #e6d8a8; color: var(--hinweis); }
table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--leise); }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
code, .code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: #f0f0ec; border: 1px solid var(--linie); border-radius: 4px;
  padding: 0.15rem 0.35rem; word-break: break-all;
}
.geheimnis { display: block; font-size: 1.2rem; letter-spacing: 0.12em; padding: 0.7rem; margin: 0.5rem 0; text-align: center; }
.fusszeile { max-width: 62rem; margin: 0 auto; padding: 0 1rem 2rem; color: var(--leise); font-size: 0.85rem; }
@media (max-width: 32rem) {
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  tr { border-bottom: 1px solid var(--linie); padding: 0.4rem 0; }
  td { border: 0; padding: 0.2rem 0; }
  td::before { content: attr(data-spalte) ": "; color: var(--leise); font-size: 0.85rem; }
}