/* Farben aus dem abgenommenen Entwurf (27.10.2026), Kontraste gemessen ≥ 5,2 : 1. */
:root {
  --bg:#F4F6F4; --surf:#FFFFFF; --surf2:#EEF2EF; --line:#D5DDD8; --ink:#15201B; --mute:#4F5D56;
  --acc:#0E6B66; --accInk:#FFFFFF; --accSoft:#E1F0EE;
  --red:#B42318; --redInk:#FFFFFF; --redSoft:#FDECEA;
  --amb:#8F5400; --ambSoft:#FFF3DC; --ok:#1E7148; --okSoft:#E5F4EA;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0E1412; --surf:#161E1B; --surf2:#1E2824; --line:#2E3B35; --ink:#E6EDE9; --mute:#A2B1A9;
    --acc:#5FC4BA; --accInk:#06201D; --accSoft:#133230;
    --red:#FF8B7E; --redInk:#2A0805; --redSoft:#3A1714;
    --amb:#F2B550; --ambSoft:#33260C; --ok:#74D19C; --okSoft:#12301F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:#0E1412; --surf:#161E1B; --surf2:#1E2824; --line:#2E3B35; --ink:#E6EDE9; --mute:#A2B1A9;
  --acc:#5FC4BA; --accInk:#06201D; --accSoft:#133230;
  --red:#FF8B7E; --redInk:#2A0805; --redSoft:#3A1714;
  --amb:#F2B550; --ambSoft:#33260C; --ok:#74D19C; --okSoft:#12301F;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--acc); }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 16px; margin: 0; }
.mute { color: var(--mute); }
.klein { font-size: 13px; }
.karte { background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.karte.rot { background: var(--redSoft); border-color: var(--red); }
.karte.bernstein { background: var(--ambSoft); border-color: var(--amb); }
.knopf { min-height: 48px; padding: 0 16px; border-radius: 12px; border: 0; background: var(--acc); color: var(--accInk); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.knopf.zweit { background: var(--surf); color: var(--ink); border: 1px solid var(--line); font-weight: 600; }
.knopf.rot { background: var(--red); color: var(--redInk); }
.knopf.klein { min-height: 40px; padding: 0 12px; font-size: 14px; }
.knopf:disabled { background: var(--surf2); color: var(--mute); cursor: not-allowed; }
.knopf.breit { width: 100%; }
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld label, .legende { font-weight: 600; }
.feld input, .feld textarea, .feld select { min-height: 48px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surf); }
.feld textarea { min-height: 88px; resize: vertical; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surf); cursor: pointer; font-weight: 600; text-align: left; }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { border-color: var(--acc); background: var(--accSoft); color: var(--acc); }
.pille { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--surf2); color: var(--mute); }
.pille.rot { background: var(--redSoft); color: var(--red); }
.pille.bernstein { background: var(--ambSoft); color: var(--amb); }
.pille.gruen { background: var(--okSoft); color: var(--ok); }
.pille.akzent { background: var(--accSoft); color: var(--acc); }
.zupruefen { display: inline-block; align-self: flex-start; padding: 1px 7px; border-radius: 6px; border: 1px dashed var(--amb); color: var(--amb); font-size: 12px; font-weight: 600; }
.fehler { color: var(--red); font-weight: 600; }
.versteckt { display: none !important; }
:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }