:root {
  --grund: #14181d;
  --karte: #1c222a;
  --linie: #2c353f;
  --schrift: #e7ecf2;
  --leise: #93a1b0;
  --akzent: #5d8a2c;
  --fehler: #d4553f;
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 16px 64px;
  background: var(--grund); color: var(--schrift);
  font: 15px/1.6 system-ui, -apple-system, Segoe UI, sans-serif;
}
header {
  display: flex; align-items: baseline; gap: 16px;
  max-width: 900px; margin: 0 auto; padding: 24px 0 8px;
  border-bottom: 1px solid var(--linie);
}
h1 { font-size: 20px; margin: 0; }
h2 { font-size: 17px; margin: 28px 0 8px; }
h3 { font-size: 15px; margin: 28px 0 8px; color: var(--leise); }
main { max-width: 900px; margin: 0 auto; }
#wer { margin-left: auto; color: var(--leise); font-size: 13px; }

.hinweis { color: var(--leise); font-size: 13px; }
.fehler { color: var(--fehler); font-size: 13px; }
code, pre {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 4px;
  font-family: ui-monospace, Consolas, monospace; font-size: 13px;
}
code { padding: 1px 5px; }
pre { padding: 10px 12px; overflow-x: auto; }

form { background: var(--karte); border: 1px solid var(--linie); border-radius: 6px; padding: 16px; }
label { display: block; margin: 10px 0; font-size: 13px; color: var(--leise); }
input, select {
  display: block; margin-top: 4px; width: 100%;
  background: var(--grund); color: var(--schrift);
  border: 1px solid var(--linie); border-radius: 4px; padding: 7px 9px; font: inherit;
}
.reihe { display: flex; gap: 12px; flex-wrap: wrap; }
.reihe label { flex: 1 1 auto; min-width: 0; }
.reihe input, .reihe select { width: 100%; }

button {
  background: var(--akzent); color: #fff; border: 0; border-radius: 4px;
  padding: 8px 16px; font: inherit; cursor: pointer; margin-top: 8px;
}
button:hover { filter: brightness(1.12); }
button.still { background: transparent; color: var(--leise); border: 1px solid var(--linie); }
button.weg { background: transparent; color: var(--fehler); border: 1px solid var(--linie); padding: 3px 9px; margin: 0; }

table { width: 100%; border-collapse: collapse; margin-top: 8px; }
th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--leise);
  border-bottom: 1px solid var(--linie); padding: 6px 8px;
}
td { padding: 7px 8px; border-bottom: 1px solid var(--linie); font-size: 14px; }
/* DER PLATZHALTER FAELLT AUF: Eine Zeile mit '*' gilt breiter, als sie aussieht -- das soll
   man beim Ueberfliegen sehen. */
td .platzhalter { color: var(--akzent); font-weight: 700; }
/* EINE FESTGENAGELTE FASSUNG SOLL BEIM UEBERFLIEGEN AUFFALLEN: Sie ist der Grund, warum
   dieser eine Zugang nicht mitwaechst, wenn eine neuere eingespielt wird. */
td .genagelt {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 4px;
  padding: 1px 6px; font-family: ui-monospace, Consolas, monospace; font-size: 12px;
}
td .neueste { color: var(--leise); font-size: 12px; }
.fuss { margin-top: 40px; display: flex; gap: 8px; }

/* Skriptwahl: Reiterleiste ueber der Tabelle. */
.skripte { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 4px; }
.skripte button {
  margin: 0; background: transparent; color: var(--leise);
  border: 1px solid var(--linie); border-radius: 4px; padding: 6px 13px; font-size: 14px;
}
.skripte button[aria-selected="true"] {
  background: var(--akzent); color: #fff; border-color: var(--akzent);
}
/* NICHT ANGESCHLOSSEN heisst abgeschaltet UND sichtbar -- nicht weggelassen. Der Grund steht
   darunter, sobald man darauf zeigt oder klickt. */
.skripte button:disabled { opacity: .45; cursor: not-allowed; }