/* vergleich.css — two-bike comparison */
.compare { padding: 48px 20px; max-width: 1100px; margin: 0 auto; }
.compare .compare-title { font-size: 30px; }
.compare .compare-intro { max-width: 60ch; color: #6b6157; margin-bottom: 24px; }
.compare .compare-picks { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.compare .compare-pick { font: inherit; font-size: 15px; padding: 10px 14px; border: 1px solid #d8cfc0; border-radius: 8px; background: #faf6ef; color: #211c17; min-width: 220px; }
.compare .compare-vs { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #b8482a; }

.compare .cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #d8cfc0; border: 1px solid #d8cfc0; }
.compare .cmp-head { background: #1b1712; padding: 18px; text-align: center; }
.compare .cmp-head img { width: 100%; max-width: 280px; height: auto; background: #ffffff; border-radius: 8px; padding: 6px; }
.compare .cmp-head-name { display: block; color: #f6efe2; font-size: 19px; font-weight: 800; margin-top: 8px; }
.compare .cmp-head-brand { display: block; color: #e0a64a; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.compare .cmp-head-score { display: inline-block; margin-top: 10px; background: #e0a64a; color: #1b1712; font-weight: 800; font-size: 18px; padding: 4px 14px; border-radius: 999px; }

.compare .cmp-row { display: contents; }
.compare .cmp-cell { background: #faf6ef; padding: 13px 16px; font-size: 14px; }
.compare .cmp-rowlabel { grid-column: 1 / -1; background: #efe7da; padding: 8px 16px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8a7d6c; }
.compare .cmp-cell.better { background: #fbf3e2; font-weight: 700; }
.compare .cmp-cell .tag-better { display: inline-block; margin-left: 6px; font-size: 11px; color: #1b1712; background: #e0a64a; padding: 1px 7px; border-radius: 999px; font-weight: 700; }

.compare .cmp-pros { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #d8cfc0; border: 1px solid #d8cfc0; border-top: 0; }
.compare .cmp-pros-col { background: #faf6ef; padding: 16px; }
.compare .cmp-pros-col h3 { font-size: 13px; letter-spacing: 0.06em; margin-bottom: 10px; }
.compare .cmp-pro { display: block; font-size: 13px; color: #2f6b3a; padding: 3px 0; }
.compare .cmp-con { display: block; font-size: 13px; color: #9a4a2e; padding: 3px 0; }

.compare .cmp-adv { margin-top: 28px; }
.compare .cmp-adv h2 { font-size: 18px; }
.compare .cmp-adv-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.compare .cmp-adv-item { border: 1px solid #d8cfc0; background: #faf6ef; padding: 12px 14px; font-size: 13px; }
.compare .cmp-adv-item b { color: #b8482a; }
.compare .compare-note { margin-top: 22px; font-size: 12px; color: #9a8f80; font-style: italic; }

@media (max-width: 599px) {
  .compare .cmp-grid, .compare .cmp-pros { grid-template-columns: 1fr 1fr; }
  .compare .cmp-head img { max-width: 150px; }
  .compare .cmp-cell { font-size: 12px; padding: 10px 8px; }
}
@media (min-width: 768px) { .compare .cmp-adv-grid { grid-template-columns: 1fr 1fr; } }