/* ═══ Schlaegervergleich (Uebergabe 3.12) ════════════════════════
   Die Tabelle und die Leiste stehen im Register. Hier: Abstaende der
   Seite (in der Referenz als style-Attribut), der klebende Tabellenkopf,
   die stehende Merkmalsspalte auf dem Telefon und die Leiste als
   festes Element am Fensterrand. */

.sh-vergleich-seite { padding-top: 28px; }
.sh-vergleich-seitenkopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.sh-vergleich-seitenkopf .sh-h1 { margin-top: 8px; }
.sh-vergleich-leer { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 40px 0; border-top: 1px solid var(--sh-linie); border-bottom: 1px solid var(--sh-linie); }
.sh-vergleich-mehr { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }

.sh-vergleich-bild { position: relative; }
.sh-vergleich-weg { position: absolute; top: 0; right: 0; }
.sh-vergleich-kopf .sh-tat, .sh-vergleich-kopf .sh-tat-neben { align-self: flex-start; }
.sh-vergleich-kopf .added_to_cart { font-size: .8125rem; color: var(--sh-text-2); }
/* Weniger als drei Schlaeger: die Spalten nicht ueber die ganze Breite
   ziehen - zwei Schlaeger auf 1400 px lesen sich wie Tabellenreste. */
.sh-vergleich-1 { max-width: 560px; min-width: 0; }
.sh-vergleich-2 { max-width: 920px; }
.sh-vergleich-1 thead th:first-child, .sh-vergleich-2 thead th:first-child { width: 180px; }
.sh-vergleich tr[hidden] { display: none; }

/* Die Kopfzeile klebt beim Scrollen unter der Kopfzeile des Shops - aber
   nur, wo der Rahmen nicht waagerecht scrollen muss. Ein scrollender Rahmen
   wird selbst zum Bezugskasten von position: sticky; der Kopf rutschte dann
   um 77 px in die Tabelle und verdeckte die erste Gruppe. */
@media (min-width: 1024px) {
  .sh-vergleich-rahmen { overflow: visible; }
  .sh-vergleich thead th { position: sticky; top: 77px; z-index: 2; background: var(--sh-grund); }
}
/* Unter 760 px laeuft die Tabelle waagerecht, die Merkmalsspalte steht. */
@media (max-width: 759px) {
  .sh-vergleich th:first-child { position: sticky; left: 0; z-index: 1; background: var(--sh-grund); }
  .sh-vergleich tbody th { width: 120px; }
  .sh-vergleich { min-width: 640px; }
}

/* Die Leiste: im Register "sticky"; sie haengt am Ende des Dokuments und
   steht deshalb fest am Fensterrand. Der Platz darunter wird per Skript
   am body freigehalten, damit der Fuss nicht verdeckt bleibt. */
.sh-vergleichsleiste { position: fixed; left: 0; right: 0; bottom: 0; }
.sh-vergleichsleiste .sh-h3 { margin: 0; }
.sh-vergleichsleiste-tun { margin-left: auto; display: flex; gap: 16px; align-items: center; }
.sh-vergleichsleiste .sh-tat[aria-disabled='true'] { background: var(--sh-linie); color: var(--sh-text-2); cursor: not-allowed; }
@media (max-width: 599px) {
  .sh-vergleichsleiste-zeile { min-height: 0; gap: 10px 14px; }
  .sh-vergleichsleiste .sh-h3, .sh-vergleichsleiste-zeile > .sh-klein { display: none; }
  .sh-vergleichsleiste-platz { width: 44px; height: 44px; }
}