/* Maschinen-Vergleichstabelle (Content-Element maschinen_markt_vergleich).
   Maschinen = Spalten, Merkmale = Zeilen. Erste Spalte + Kopfzeile sticky,
   abweichende Zeilen hervorgehoben. Hell + Dark (html.mm-dark). */

.mm_vergleich { margin: 20px 0; }
.mm_vergleich_leer {
    padding: 40px 20px; text-align: center; font-size: 15px; color: #777;
    background: #fafafa; border: 1px dashed #ddd; border-radius: 8px;
}

.mm_vergleich_scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.mm_vergleich_tab {
    border-collapse: separate; border-spacing: 0;
    width: 100%; font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.mm_vergleich_tab th,
.mm_vergleich_tab td {
    border-bottom: 1px solid #eee; padding: 10px 14px; text-align: left; vertical-align: top;
}

/* Kopfzeile (Maschinen) */
.mm_vergleich_tab thead th {
    position: sticky; top: 0; z-index: 2;
    background: #fff; border-bottom: 2px solid #e85d26;
}
.mm_vergleich_kopf { min-width: 200px; }
.mm_vergleich_kopf_link { display: block; color: inherit; text-decoration: none; }
/* Bildformat wie in der Maschinendarstellung (Karten): 4:3 statt fester Höhe.
   Vorher `height: 130px` bei voller Spaltenbreite -> je nach Anzahl der
   Maschinen ein breiter Streifen (bei 3 Spalten ~430x130). Der 320-px-Deckel
   hält den Tabellenkopf bei wenigen Maschinen in vernünftiger Höhe. */
.mm_vergleich_bild {
    display: block; width: 100%; max-width: 320px; aspect-ratio: 4 / 3; height: auto;
    overflow: hidden; border-radius: 8px; background: #f2f2f2; margin-bottom: 8px;
}
.mm_vergleich_bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm_vergleich_kopf_link:hover .mm_vergleich_titel { color: #e85d26; }
.mm_vergleich_titel { display: block; font-weight: 700; font-size: 15px; line-height: 1.3; }
.mm_vergleich_no { display: block; margin-top: 2px; font-size: 12px; color: #999; }

/* Erste Spalte (Merkmalsnamen) sticky links */
.mm_vergleich_ecke,
.mm_vergleich_label {
    position: sticky; left: 0; z-index: 1;
    background: #fafafa; min-width: 170px; max-width: 220px;
    font-weight: 600; color: #444;
}
.mm_vergleich_ecke { z-index: 3; background: #fff; color: #999; font-weight: 700; }

.mm_vergleich_wert { color: #222; }

/* Abweichende Zeilen hervorheben – nur über Fläche und Beschriftung, ohne
   Randmarkierung: die orange Kante links legte sich über die ganze Tabelle,
   weil sich bei einem Vergleich fast jede Zeile unterscheidet. */
.mm_vergleich_differ .mm_vergleich_wert,
.mm_vergleich_differ .mm_vergleich_label { background: #fff6f2; }
.mm_vergleich_differ .mm_vergleich_label { color: #c04b1e; }

/* Zeilen, in denen ALLE Maschinen denselben Wert haben, treten zurück – sie
   sind für die Entscheidung uninteressant. Sie bekommen dabei eine EIGENE,
   ruhige Fläche: ohne sie schien der Seitenhintergrund durch (#f4f6f9), was wie
   eine vergessene Formatierung aussah. Der Ton liegt zwischen Seite und Weiß –
   sichtbar als Fläche, aber ohne Aufmerksamkeit zu ziehen; die
   Unterschieds-Zeilen bleiben mit ihrem warmen Ton führend. */
tr:not(.mm_vergleich_differ) .mm_vergleich_wert,
tr:not(.mm_vergleich_differ) .mm_vergleich_label { background: #f9fafc; opacity: .8; }

@media (max-width: 560px) {
  .mm_vergleich_kopf { min-width: 150px; }
  /* Verhältnis bleibt 4:3, die Spalte ist hier schmal genug. */
  .mm_vergleich_bild { max-width: none; }
}

/* --- Dark-Mode (globale Seite) --- */
html.mm-dark .mm_vergleich_leer { background: #1e1f24; border-color: #3a3b42; color: #9aa0a6; }
html.mm-dark .mm_vergleich_tab th,
html.mm-dark .mm_vergleich_tab td { border-bottom-color: #2c2f36; }
html.mm-dark .mm_vergleich_tab thead th { background: #17202b; }
/* Bildfläche im Dunkelmodus: sonst leuchtet #f2f2f2 durch, sobald ein Bild
   fehlt (Platzhalter) oder transparent ist. Wert wie --card-media dunkel. */
html.mm-dark .mm_vergleich_bild { background: #223143; }
html.mm-dark .mm_vergleich_ecke { background: #17202b; color: #8fa0b3; }
html.mm-dark .mm_vergleich_label { background: #1b2530; color: #cfd6de; }
html.mm-dark .mm_vergleich_wert { color: #e6ebf0; }
html.mm-dark .mm_vergleich_titel { color: #f2f6fa; }
html.mm-dark .mm_vergleich_no { color: #8fa0b3; }
html.mm-dark .mm_vergleich_differ .mm_vergleich_wert,
html.mm-dark .mm_vergleich_differ .mm_vergleich_label { background: rgba(232, 93, 38, .14); }
html.mm-dark .mm_vergleich_differ .mm_vergleich_label { color: #ff8b5e; box-shadow: none; }
/* Gleiche Werte: eigene Fläche, eine Spur heller als die Seite (#0f1923) –
   deckend, weil die Merkmalsspalte beim Querscrollen darüber gleitet. */
html.mm-dark tr:not(.mm_vergleich_differ) .mm_vergleich_wert,
html.mm-dark tr:not(.mm_vergleich_differ) .mm_vergleich_label { background: #16212d; }