/* Gesamte Tabelle */
.cars-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: 0.95rem;
}

/* Kopfzeile */
.cars-table thead td {
  background-color: #f2f2f2;
  font-weight: bold;
  padding: 0.6rem;
  border-bottom: 2px solid #ccc;
}

/* Datenzeilen */
.cars-table tbody td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid #e0e0e0;
}

/* Link-Spalte */
.cars-table a {
  color: #0056b3;
  text-decoration: none;
  font-weight: 500;
}

.cars-table a:hover {
  text-decoration: underline;
}

/* Spaltenbreiten */
.cars-table td:nth-child(1) { width: 35%; } /* Modell */
.cars-table td:nth-child(2) { width: 15%; } /* Baujahre */
.cars-table td:nth-child(3) { width: 15%; } /* Anzahl */
.cars-table td:nth-child(4) { width: 35%; } /* Weblink */


/* cars.css – Mobile Layout wie Clubs/Sponsors */

@media (max-width: 768px) {

  /* Tabelle komplett in Block-Layout umwandeln */
  table.cars-table,
  table.cars-table thead,
  table.cars-table tbody,
  table.cars-table tr,
  table.cars-table td {
    display: block;
    width: 100% !important;
    max-width: none !important;
  }

  /* Kopfzeile ausblenden */
  table.cars-table thead {
    display: none;
  }

  /* ÄUSSERER Block pro MG-Modell */
  table.cars-table tr {
    margin-bottom: 2rem;
    padding: 1.2rem 0;

    border: 2px solid var(--color-borderline2);
    border-radius: 10px;

    background: var(--color-background2);
  }

  /* Zellen: keine eigenen Rahmen, transparenter Hintergrund */
  table.cars-table td {
    border: none;
    background: transparent !important;
    padding: 0 5px;
  }

  /* Modellname zentriert */
  table.cars-table td:nth-child(1) {
    text-align: center !important;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 1rem;
    white-space: nowrap !important;
  }

  /* Labels dynamisch aus dem thead holen */
  table.cars-table td:nth-child(2)::before {
    content: attr(data-header);
    font-weight: bold;
    display: inline;
    margin-right: 0.3rem;
  }

  table.cars-table td:nth-child(3)::before {
    content: attr(data-header);
    font-weight: bold;
    display: inline;
    margin-right: 0.3rem;
  }

  table.cars-table td:nth-child(4)::before {
    content: attr(data-header);
    font-weight: bold;
    display: inline;
    margin-right: 0.3rem;
  }

  /* Unterste Linie sichtbar */
  table.cars-table tr:last-child {
    margin-bottom: 0 !important;
  }

  /* Globale Tabellen-Rahmen deaktivieren */
  table.cars-table {
    border: none !important;
    background-color: transparent !important;
    border-collapse: separate !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 768px) {

  /* Abschnittsüberschrift */
  table.cars-table td.cars-heading {
    display: block;
    width: 100%;
    text-align: left !important;
    font-size: 1.3rem;
    font-weight: bold;
    padding: 1.2rem 0 0.5rem 0;
    border: none !important;
    background: transparent !important;
  }

  /* Rahmen für Überschrift-Zeilen entfernen */
  table.cars-table td.cars-heading::before {
    content: none !important;
  }

  /* Abstand nach Überschrift */
  table.cars-table td.cars-heading + td {
    margin-top: 1rem;
  }

  /* Wenn eine Zeile nur die Überschrift enthält → keinen Rahmen */
  table.cars-table tr:has(.cars-heading) {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 1rem !important;
  }

  /* Wenn eine Zeile eine Überschrift enthält → restliche Felder ausblenden */
  table.cars-table tr:has(.cars-heading) td:nth-child(3),
  table.cars-table tr:has(.cars-heading) td:nth-child(4) {
    display: none !important;
  }

}