body > table {
  display: block;
  padding: 0 1em;
}

body > table > tbody {
  display: block;
  column-width: 30em;
  column-gap: 4em;
  column-rule: 1px solid #ccc;
}

body > table tr {
  display: flex;
  gap: .75em;
  break-inside: avoid;
}

/* Trennlinien (hr) auf Spaltenbreite */
body > table th[colspan] { display: block; width: 100%; }

/* letzte Trennlinie ausblenden, sie würde sonst allein am Ende der letzten Spalte stehen */
body > table tr:last-child { display: none; }

/* gleiche Spaltenbreiten für Kopf- und Datenzeilen, damit die Überschriften passen */
body > table tr > :nth-child(1) { width: 1.5em; }
body > table tr > :nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; text-align: left; }
body > table tr > :nth-child(3) { width: 10.5em; text-align: left; }
body > table tr > :nth-child(4) { width: 4em; text-align: right; }

/* leere Description-Spalte ausblenden */
body > table tr > :nth-child(5) { display: none; }

/* Trennlinien (hr) auf volle Zeilenbreite; steht nach den Spaltenbreiten, damit width: 100% gewinnt */
body > table th[colspan] { display: block; width: 100%; }

/* Kopfzeile und Trennlinie: über dem Spaltenfluss, so breit wie eine Spalte */
body > table tr:nth-child(-n+2) {
  column-span: all;
  width: calc((100% - 4em) / 2);
}

/* letzte Trennlinie ausblenden, sie stünde sonst allein am Ende der letzten Spalte */
body > table tr:last-child { display: none; }

@media (max-width: 60em) {
  body > table > tbody { column-count: 1; }
  body > table tr:nth-child(-n+2) { width: 100%; }
}