.comparison-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  background: var(--color-surface);
}

.comparison-table th,
.comparison-table td {
  padding: 1rem var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}

.comparison-table th {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-weight: 700;
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

.comparison-table td:first-child,
.comparison-table th:first-child {
  color: var(--color-text-muted);
  font-weight: 500;
  width: 34%;
}

/* Die erste Zelle einer Datenzeile ist deren Ueberschrift - <th
   scope="row">, nicht <td>. Ohne diese Regel bekaeme sie die
   Schriftgroesse der Kopfzeile (fs-xs) und stuende kleiner da als der
   Text daneben, den sie benennt. Sie traegt die Groesse ihrer Zeile. */
.comparison-table tbody th:first-child {
  font-size: var(--fs-sm);
  font-weight: 700;
}

.comparison-col-highlight {
  background: var(--color-bg-alt);
  position: relative;
}

.comparison-table th.comparison-col-highlight {
  color: var(--color-text);
  font-weight: 800;
}

.comparison-check {
  color: var(--color-success);
  font-weight: 700;
}

.comparison-cross {
  color: var(--color-text-muted);
}

/* Die Tabelle ist 560 px breit und stand in einem Scrollbereich von
   327 px. Abgeschnitten war sie nicht - aber die Preisspalte lag beim
   Laden ausserhalb des Bildes, und nichts wies darauf hin, dass man
   seitwaerts wischen kann. Eine Angabe, die man nicht sieht und nicht
   sucht, ist keine Angabe.

   Auf schmalen Geraeten wird deshalb jede Zeile zu einer Karte: die
   Zeilenueberschrift als Titel, darunter die uebrigen Felder mit ihrem
   Spaltennamen davor. Der Name kommt aus data-label im Markup, nicht
   aus dieser Datei - so bleiben Spaltenkopf und Kartenbeschriftung
   dieselbe Zeichenkette und koennen nicht auseinanderlaufen.

   Wichtig dabei: display:block nimmt Tabellen ihre Bedeutung im
   Barrierebaum, Zeile und Spalte gehoeren dann nicht mehr zusammen.
   Deshalb tragen Tabelle, Gruppen, Zeilen und Zellen im Markup
   ausdrueckliche Rollen. Die Darstellung aendert sich, die Aussage
   nicht. */
@media (max-width: 640px) {
  /* Kein Rahmen und kein Scrollbereich mehr - die Karten tragen ihre
     eigenen Kanten. */
  .comparison-wrap {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
  }

  .comparison-table {
    display: block;
    min-width: 0;
    background: none;
  }

  /* Die Kopfzeile verschwindet aus dem Bild, bleibt aber im
     Barrierebaum: Ihre Texte stehen als data-label ohnehin auf jeder
     Karte, doppelt gelesen waeren sie stoerend. */
  .comparison-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .comparison-table tbody {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .comparison-table tr {
    display: block;
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }

  .comparison-table tbody th,
  .comparison-table td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    text-align: left;
  }

  /* Kartentitel. width:auto muss hier stehen und nicht nur bei den
     Zellen: Die Grundregel gibt der ersten Spalte 34 % vor, und
     .comparison-table th:first-child ist genauer als eine Regel ohne
     :first-child - der Titel brach sonst mitten im Produktnamen um. */
  .comparison-table tbody th:first-child {
    width: auto;
    margin-bottom: 0.75rem;
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--color-text);
  }

  /* Ein Feld je Zeile: Bezeichnung klein darueber, Wert darunter. */
  .comparison-table td + td,
  .comparison-table tbody th + td {
    margin-top: 0.7rem;
  }

  .comparison-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--color-text-muted);
  }

  .comparison-table td {
    font-size: var(--fs-sm);
    color: var(--color-text);
  }

  /* Die hervorgehobene Spalte gibt es in der Karte nicht - dort steht
     ohnehin nur noch ein Wert je Zeile. */
  .comparison-col-highlight {
    background: none;
  }
}