.compare {
  padding: 96px var(--px);
  background: var(--bg-surface);
}

.compare-inner { max-width: var(--max-width); margin: 0 auto; }

.compare-head {
  margin-bottom: 32px;
  max-width: 60ch;
}

.compare-head .copy-head { margin-bottom: 10px; }
.compare-head p { font-size: 16px; color: var(--text-secondary); margin-top: 8px; }

.table-frame {
  background: var(--bg-card);
  border: 1px solid var(--border);
  overflow-x: auto;
}

/* Wisch-Hinweis: nur auf schmalen Screens sichtbar */
.table-swipe-hint {
  display: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.table-swipe-hint i { color: var(--at-blue); margin-right: 6px; }

table.compare-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 780px;
}

.compare-tbl thead {
  position: sticky;
  top: 0;
  background: #37383A;
  color: #fff;
  z-index: 2;
}

@media (prefers-color-scheme: dark) {
  .compare-tbl thead { background: #252830; }
}

.compare-tbl thead th {
  padding: 18px;
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: bottom;
  border-right: 1px solid rgba(255,255,255,.08);
}

.compare-tbl thead th:last-child { border-right: 0; }
.compare-tbl thead th .pn { font-size: 16px; letter-spacing: -.005em; }
.compare-tbl thead th .pp {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  margin-top: 4px;
  text-transform: none;
  letter-spacing: 0;
}

/* display:block oben schlägt die Sprachumschaltung aus typography.css —
   inaktive Sprache explizit ausblenden */
.lang-de .compare-tbl thead th .pp[data-en],
.lang-en .compare-tbl thead th .pp[data-de] { display: none; }
.compare-tbl thead th:not(:first-child) { text-align: center; width: 14%; }
.compare-tbl thead th.col-featured { background: var(--at-red); }
.compare-tbl thead th.col-featured .pp { color: rgba(255,255,255,.85); }

.compare-tbl tr.group td {
  background: var(--border);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-primary);
  padding: 12px 18px;
}

.compare-tbl tbody td {
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  color: var(--text-primary);
}

.compare-tbl tbody td:not(:first-child) { text-align: center; }
.compare-tbl tbody td:last-child { border-right: 0; }

.compare-tbl .feat-name { color: var(--text-primary); font-weight: 500; }
.compare-tbl .feat-name small {
  display: block;
  color: var(--text-secondary);
  font-weight: 400;
  font-size: 11px;
  margin-top: 2px;
}

.compare-tbl .tc { font-weight: 700; color: var(--at-blue); font-size: 15px; }
.compare-tbl .td { color: var(--text-muted); font-weight: 600; }
.compare-tbl .tv { font-size: 12px; color: var(--text-primary); font-weight: 600; }
.compare-tbl td.col-featured-cell { background: rgba(167,2,64,.04); }

/* Mobil: erste Spalte fixieren, damit beim horizontalen Scrollen
   der Tabelle die Leistungsnamen sichtbar bleiben */
@media (max-width: 768px) {
  .table-swipe-hint { display: block; }

  .compare-tbl thead th { padding: 14px 12px; }
  .compare-tbl tbody td { padding: 10px 12px; }
  .compare-tbl tr.group td { padding: 10px 12px; }

  /* Festes Layout: sonst erbt die Namensspalte die Desktop-Verteilung
     (Plan-Spalten je 14 %) und wird ~450px breit */
  table.compare-tbl { table-layout: fixed; min-width: 720px; }
  .compare-tbl thead th:first-child { width: 150px; }
  .compare-tbl thead th:not(:first-child) { width: auto; }

  .compare-tbl thead th:first-child,
  .compare-tbl tbody tr:not(.group) td:first-child {
    position: sticky;
    left: 0;
    box-shadow: 6px 0 8px -6px rgba(0,0,0,.25);
  }

  .compare-tbl tbody tr:not(.group) td:first-child {
    z-index: 1;
    background: var(--bg-card);
  }

  .compare-tbl thead th:first-child {
    z-index: 3;
    background: #37383A;
  }

  /* Gruppen-Label (colspan-Zeile) läuft sonst aus dem Sichtfeld.
     Nur das Span der aktiven Sprache ansprechen, sonst wird das
     display:none der Sprachumschaltung überschrieben */
  .lang-de .compare-tbl tr.group td [data-de],
  .lang-en .compare-tbl tr.group td [data-en] {
    display: inline-block;
    position: sticky;
    left: 12px;
  }
}

@media (prefers-color-scheme: dark) and (max-width: 768px) {
  .compare-tbl thead th:first-child { background: #252830; }
}

@media (max-width: 600px) {
  .compare { padding: 64px var(--px-sm); }
}