/* ============================================================
   CX-UI — Typ-Modul: VERGLEICH (Anbieter-/Produktvergleiche)
   Sites: aktienrenterechner, renditerechner24, immobilienrechner24,
   fixflip.one, hausratversicherung, spekulationsfristrechner24,
   finanzierungrechner24, immobiliewertrechner24, cannavergleich,
   cannapreis, influencerfee
   ============================================================ */

/* Anbieter-Zeile (Liste, nicht Tabelle — funktioniert mobil besser) */
.cx-cmp { display: flex; flex-direction: column; gap: var(--cx-s4); }

.cx-cmp__item {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) minmax(0, 220px) auto;
  gap: var(--cx-s5);
  align-items: center;
  padding: var(--cx-s5);
  background: var(--cx-white);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-r-lg);
  transition: box-shadow var(--cx-t), border-color var(--cx-t);
}
.cx-cmp__item:hover { box-shadow: var(--cx-sh-lg); border-color: var(--cx-border-dark); }

/* Testsieger hervorheben */
.cx-cmp__item--top { border-color: var(--cx-accent); box-shadow: 0 0 0 1px var(--cx-accent); position: relative; }
.cx-cmp__ribbon {
  position: absolute; top: 0; left: var(--cx-s5);
  transform: translateY(-50%);
  padding: 3px 12px;
  background: var(--cx-accent); color: var(--cx-white);
  font-size: var(--cx-fs-xs); font-weight: 600;
  border-radius: var(--cx-r-full);
  white-space: nowrap;
}

.cx-cmp__rank {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--cx-r-full);
  background: var(--cx-bg-alt);
  font-size: var(--cx-fs-sm); font-weight: 700;
  color: var(--cx-text-mid);
  font-variant-numeric: tabular-nums;
}
.cx-cmp__item--top .cx-cmp__rank { background: var(--cx-accent); color: var(--cx-white); }

.cx-cmp__logo { display: grid; place-items: center; }
.cx-cmp__logo img { max-height: 44px; width: auto; object-fit: contain; }

.cx-cmp__name { font-size: var(--cx-fs-md); font-weight: 600; margin: 0 0 var(--cx-s1); }
.cx-cmp__desc { font-size: var(--cx-fs-base); color: var(--cx-text-light); margin: 0; }

.cx-cmp__facts { list-style: none; margin: 0; padding: 0; font-size: var(--cx-fs-base); }
.cx-cmp__facts li { display: flex; gap: var(--cx-s2); margin-bottom: var(--cx-s1); color: var(--cx-text-mid); }
.cx-cmp__facts li::before { content: '\2713'; color: var(--cx-success); flex: 0 0 auto; font-weight: 700; }

.cx-cmp__action { display: flex; flex-direction: column; gap: var(--cx-s2); align-items: stretch; min-width: 160px; }
.cx-cmp__price { font-size: var(--cx-fs-xl); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cx-cmp__price small { display: block; font-size: var(--cx-fs-xs); font-weight: 400; color: var(--cx-text-light); }

/* Bewertung */
.cx-rating { display: inline-flex; align-items: center; gap: var(--cx-s1); font-size: var(--cx-fs-sm); }
.cx-rating__score {
  padding: 2px 8px; border-radius: var(--cx-r-sm);
  background: var(--cx-success-light); color: var(--cx-success);
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.cx-rating__count { color: var(--cx-text-faint); font-size: var(--cx-fs-xs); }

/* Feature-Matrix (echte Tabelle, horizontal scrollbar auf mobil) */
/* min-width erzwingt horizontales Scrollen in .cx-table-wrap statt Quetschen auf Mobile */
.cx-matrix { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--cx-fs-base); }
.cx-matrix th, .cx-matrix td {
  padding: var(--cx-s3) var(--cx-s4);
  border-bottom: 1px solid var(--cx-border);
  text-align: center;
}
.cx-matrix thead th {
  position: sticky; top: var(--cx-header-h); z-index: 5;
  background: var(--cx-bg-alt);
  font-size: var(--cx-fs-sm); font-weight: 600;
}
.cx-matrix tbody th {
  text-align: left; font-weight: 500; color: var(--cx-text-mid);
  background: var(--cx-white);
  position: sticky; left: 0; z-index: 4;
  min-width: 180px;
}
.cx-matrix__yes { color: var(--cx-success); font-weight: 700; }
.cx-matrix__no  { color: var(--cx-text-faint); }
.cx-matrix col.is-highlight, .cx-matrix .is-highlight { background: var(--cx-accent-light); }

@media (max-width: 1024px) {
  .cx-cmp__item { grid-template-columns: 100px minmax(0, 1fr) auto; }
  .cx-cmp__facts { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .cx-cmp__item { grid-template-columns: minmax(0, 1fr); gap: var(--cx-s4); text-align: center; }
  .cx-cmp__logo img { margin-inline: auto; }
  .cx-cmp__facts li { justify-content: center; }
  .cx-cmp__ribbon { left: 50%; transform: translate(-50%, -50%); }
}