/* Два столбца сохраняют все показатели на телефоне, без .opt. */
.vergleich { table-layout: fixed; width: 100%; }
.vergleich th:first-child { width: 38%; }
.vergleich th, .vergleich td { overflow-wrap: anywhere; white-space: normal; }
.vergleich td > span { display: block; margin-top: .3em; }
.vergleich caption { text-align: left; font-weight: 650; padding: 1em 0 .5em; }
.vg-rang { font-size: .85em; }

.vg-katalog { font-size: .85em; overflow-wrap: break-word; hyphens: auto; width: 25%; }

@media (max-width: 720px) {
  .rang:has(.vg-katalog) { table-layout: fixed; }
  /* Spaltenbreiten über die Kopfzeile (erste Zeile zählt bei festem Layout): kurze Rangspalte, Name bekommt den Rest. */
  .rang:has(.vg-katalog) thead th:first-child { width: 26%; }
  .rang:has(.vg-katalog) thead th:nth-child(2) { width: 44%; }
  /* Kein Zerreißen mitten im Wort: Umbruch an Leerzeichen, lange Zusammensetzungen mit Bindestrich (lang="de"). */
  .rang:has(.vg-katalog) th, .rang:has(.vg-katalog) td { overflow-wrap: break-word; hyphens: auto; }
  .rang:has(.vg-katalog) td .bar { display: none; }
}