:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --text: #1a202c;
  --dezent: #64748b;
  --rand: #e2e8f0;
  --akzent: #2563eb;
  --akzent-text: #ffffff;
  --gruen: #16a34a;
  --gruen-bg: #dcfce7;
  --gelb: #b45309;
  --gelb-bg: #fef3c7;
  --rot: #b91c1c;
  --rot-bg: #fee2e2;
  --code-bg: #f1f5f9;
}

html.dark {
  --bg: #0f1420;
  --panel: #1a2130;
  --text: #e2e8f0;
  --dezent: #94a3b8;
  --rand: #2d3748;
  --akzent: #60a5fa;
  --akzent-text: #0f1420;
  --gruen: #86efac;
  --gruen-bg: #14532d;
  --gelb: #fcd34d;
  --gelb-bg: #451a03;
  --rot: #fca5a5;
  --rot-bg: #450a0a;
  --code-bg: #111827;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 system-ui, sans-serif;
}

button {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  padding: 0.35rem 0.8rem;
}

button.primaer {
  background: var(--akzent);
  color: var(--akzent-text);
  border-color: var(--akzent);
}

button:disabled { opacity: 0.5; cursor: default; }

.karte {
  background: var(--panel);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
}

.badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge.gruen { color: var(--gruen); background: var(--gruen-bg); }
.badge.gelb { color: var(--gelb); background: var(--gelb-bg); }
.badge.rot { color: var(--rot); background: var(--rot-bg); }

pre {
  background: var(--code-bg);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  font-size: 0.78rem;
  line-height: 1.45;
  overflow-x: auto;
}

details > summary {
  cursor: pointer;
  list-style: none;
}
details > summary::before {
  content: "▸";
  color: var(--dezent);
  font-size: 0.8em;
  margin-right: 0.4rem;
  display: inline-block;
  transition: transform 0.12s;
}
details[open] > summary::before { transform: rotate(90deg); }
