/* Comparison page v4 (public, /vergleich). Prefix kvg-. Builds on css/v4/landing.css
   (klv-/klv2- chrome, type, buttons, FAQ, final CTA); tokens from css/v4/tokens.css.
   Section images are passed as --kvg-*-img custom properties by CompareRenderer. */

/* ---- hero -------------------------------------------------------------- */
.kvg-hero {
  position: relative; isolation: isolate;
  padding: calc(var(--klv-nav-h) + clamp(48px, 8vw, 120px)) var(--klv-gutter) clamp(56px, 7vw, 96px);
  background:
    linear-gradient(90deg, rgba(4, 6, 7, .9) 0%, rgba(4, 6, 7, .72) 45%, rgba(4, 6, 7, .35) 100%),
    linear-gradient(0deg, var(--kc-color-void) 0, rgba(7, 9, 10, 0) 30%),
    var(--kvg-hero-img) 70% 40% / cover no-repeat,
    var(--kc-color-void);
}
.kvg-hero__title { max-width: 14ch; font-size: clamp(2.75rem, min(6.2vw, 12svh), 6.5rem); line-height: .95; }
.kvg-hero__lead { max-width: 58ch; }
.kvg-hero__meta { margin: 14px 0 0; max-width: 58ch; font-size: .9375rem; color: var(--kc-color-text-muted); }
.kvg-facts { margin-top: 48px; }
.kvg-facts dt { font: 700 2rem/1 var(--kc-font-num); letter-spacing: 0; text-transform: none; color: var(--kc-color-mint); }
.kvg-facts dd { margin-top: 8px; font: 500 .8125rem/1.3 var(--kc-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--kc-color-text-muted); }

/* ---- sections ---------------------------------------------------------- */
.kvg-section { padding: clamp(72px, 9vw, 140px) var(--klv-gutter); }
.kvg-criteria .klv2-list { margin-top: 40px; max-width: 1100px; }
.kvg-criteria .klv2-list li { grid-template-columns: 56px minmax(160px, .7fr) 2fr; }
.kvg-criteria .klv2-list i { font: 700 1.75rem/1 var(--kc-font-num); font-style: normal; color: var(--kc-color-mint); }

/* ---- comparison table -------------------------------------------------- */
.kvg-table {
  padding: clamp(72px, 9vw, 140px) var(--klv-gutter);
  background: linear-gradient(180deg, var(--kc-color-void), #0a0e0d 40%, var(--kc-color-void));
}
.kvg-table__scroll { margin-top: 40px; overflow-x: auto; overscroll-behavior-x: contain; border-top: 2px solid var(--kc-color-mint); }
.kvg-table table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 980px; }
.kvg-table th, .kvg-table td { padding: 18px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--klv-line); }
.kvg-table thead th { padding-top: 22px; font: 600 1.125rem/1.1 var(--kc-font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--kc-color-text-bright); }
.kvg-table thead th small { display: block; margin-top: 6px; font: 500 .75rem/1.2 var(--kc-font-display); letter-spacing: .12em; color: var(--kc-color-text-dim); }
.kvg-table tbody th { font: 600 .875rem/1.3 var(--kc-font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--kc-color-text-muted); }
/* First column stays put while the rest scrolls sideways on narrow screens. */
.kvg-table tbody th, .kvg-table thead th:first-child { position: sticky; left: 0; z-index: 1; min-width: 150px; max-width: 190px; background: #0a0e0d; }
.kvg-table td { font-size: .9375rem; color: var(--kc-color-text-soft); }
.kvg-table .is-kc { background: var(--kc-color-wash-mint); box-shadow: inset 2px 0 0 var(--kc-color-mint); }
.kvg-table td.is-kc { color: var(--kc-color-text-bright); }
.kvg-table thead th.is-kc small { color: var(--kc-color-mint); }
.kvg-table sup a { margin-left: 2px; font-weight: 600; color: var(--kc-color-mint); text-decoration: none; }
.kvg-table .na { color: var(--kc-color-text-dim); }
.kvg-sources { display: grid; gap: 6px; max-width: 900px; margin: 28px 0 0; padding: 0; list-style: none; font-size: .875rem; color: var(--kc-color-text-muted); }
.kvg-sources a { color: var(--kc-color-mint-deep); }
.kvg-sources b { margin-right: 6px; font-weight: 600; color: var(--kc-color-mint); }

/* ---- who it fits ------------------------------------------------------- */
.kvg-fit {
  display: grid; grid-template-columns: minmax(260px, .8fr) 1.4fr; gap: clamp(32px, 5vw, 96px); align-items: start;
  background:
    linear-gradient(90deg, var(--kc-color-void) 30%, rgba(7, 9, 10, .86)),
    var(--kvg-fit-img) center / cover no-repeat,
    var(--kc-color-void);
}
.kvg-fit__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.kvg-fit__cols h3 { margin: 0 0 14px; padding-top: 14px; border-top: 2px solid var(--kc-color-mint); font: 600 1.25rem/1.1 var(--kc-font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--kc-color-text-bright); }
.kvg-fit__cols h3.is-quiet { border-top-color: var(--kc-color-text-dim); color: var(--kc-color-text-soft); }
.kvg-fit__cols ul { display: grid; gap: 10px; margin: 0; padding: 0 0 0 1.1em; color: var(--kc-color-text-soft); }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 1023px) {
  .kvg-fit { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .kvg-facts { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kvg-criteria .klv2-list li { grid-template-columns: 40px 1fr; }
  .kvg-criteria .klv2-list li span { grid-column: 2; }
  .kvg-fit__cols { grid-template-columns: 1fr; }
  .kvg-table th, .kvg-table td { padding: 14px 12px; }
  .kvg-table tbody th, .kvg-table thead th:first-child { min-width: 120px; max-width: 140px; }
}