/* §4.11 Regel 7: barrierearm, hell und dunkel, Zustand auch ohne Farbe erkennbar.
   KEINE Farbe im Programm — die Palette steht hier, zur Laufzeit gelesen, und ein
   Waechter haelt fest, dass nichts davon im Python-Code steht. */
:root {
  color-scheme: light dark;
  --ink: #1a1a1a;
  --paper: #fbfbfa;
  --muted: #5a5a58;
  --line: #d8d8d4;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #ededeb; --paper: #1a1a19; --muted: #a0a09c; --line: #38383a; }
}
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; color: var(--ink); background: var(--paper); }
main, nav { padding: 1rem 1.25rem; }
nav { border-bottom: 1px solid var(--line); }
.groups, .groups ul { list-style: none; margin: 0; padding: 0; }
.groups > li { display: inline-block; margin-right: 1.5rem; vertical-align: top; }
.group { display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.groups a { color: var(--ink); text-decoration: none; }
/* Der aktive Reiter ist auch ohne Farbe erkennbar — Unterstrich UND Schriftschnitt. */
.groups a[aria-current="page"] { font-weight: 700; text-decoration: underline; }
.not-wired { border: 1px dashed var(--line); padding: 1rem; max-width: 46rem; }
.state { font-weight: 700; margin-top: 0; }
.reason, .hint { color: var(--muted); }
label { display: block; margin-top: .75rem; }
input { padding: .4rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
button { margin-top: 1rem; padding: .45rem 1rem; }
.error { border-left: 3px solid var(--ink); padding-left: .6rem; font-weight: 700; }

.panel { margin: 0 0 2rem; }
.panel h2 { font-size: 1.05rem; margin-bottom: .25rem; }
.origin { color: var(--muted); font-size: .85rem; margin-top: 0; }
table { border-collapse: collapse; width: 100%; max-width: 64rem; }
th, td { text-align: left; padding: .35rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
/* §4.11 Regel 7: der Zustand ist auch ohne Farbe erkennbar — hier durch den Rahmen
   UND das vorangestellte Zeichen, nicht durch Rot. */
.unreadable { border-left: 3px double var(--ink); padding-left: .6rem; }
.unreadable::before { content: "⚠ "; }