/* ============================================================
   COMPARISON — Tabelle vs. Andere
   Mobile: gestackte Cards · ≥768px: echte Tabelle
   ============================================================ */

.cmp { padding: 64px 20px; background: var(--surface); }
.cmp__table {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r2);
  overflow: hidden;
  box-shadow: var(--sh);
}
.cmp__head {
  display: none; /* hidden on mobile, comparison cards stack */
  grid-template-columns: 1.2fr 1.4fr 1.4fr;
  border-bottom: 1px solid var(--border);
}
.cmp__head > * {
  padding: 16px 20px; font-size: 13px; font-weight: 600; color: var(--text2);
  border-left: 1px solid var(--border);
}
.cmp__head > *:first-child { border-left: 0; }
.cmp__trailo {
  background: rgba(79,114,227,.04); color: var(--accent) !important; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.cmp__row {
  display: grid; grid-template-columns: 1fr;
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
}
.cmp__row:last-child { border-bottom: 0; }
.cmp__row > [role="rowheader"] {
  font-size: 13px; font-weight: 700; color: var(--text);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 8px;
}
.cmp__row > [role="cell"] {
  font-size: 14px; padding: 10px 0;
  display: flex; align-items: flex-start; gap: 8px;
}
.cmp__row > [role="cell"] .x { margin-right: 0; }
.cmp__neg { color: var(--text2); border-top: 1px solid var(--border); padding-top: 12px !important; }
.cmp__pos { color: var(--text); font-weight: 500; border-top: 1px solid var(--border); padding-top: 12px !important; }
.cmp__pos::before { content: 'Trailo ·'; color: var(--accent); font-weight: 700; margin-right: 6px; flex: 0 0 auto; }
.cmp__neg::before { content: 'Andere ·'; color: var(--text3); font-weight: 700; margin-right: 6px; flex: 0 0 auto; }

/* ─── Tabellen-Modus ab 768px ─────────────────────────────── */
@media (min-width: 768px) {
  .cmp__table { padding: 0; }
  .cmp__head { display: grid; }
  .cmp__row {
    display: grid; grid-template-columns: 1.2fr 1.4fr 1.4fr;
    padding: 0;
  }
  .cmp__row > [role="rowheader"] {
    padding: 16px 20px;
    font-size: 14px; text-transform: none; letter-spacing: 0;
    margin-bottom: 0;
  }
  .cmp__row > [role="cell"] {
    padding: 16px 20px;
    border-left: 1px solid var(--border);
    border-top: 0;
    align-items: center;
  }
  .cmp__row > [role="cell"]::before { display: none; }
  .cmp__pos { background: rgba(79,114,227,.04); }
  .cmp__row .cmp__pos::before, .cmp__row .cmp__neg::before { display: none; }
}
@media (min-width: 1024px) {
  .cmp { padding: 96px 24px; }
}