/* ─────────────────────────────────────────────────────────────────────────────
   valuesList — un solo fondo, sin tarjetas, sin iconos: aire y un filete fino
   de lista. Todo el color sale de las variables del sitio (claro y oscuro).
   ───────────────────────────────────────────────────────────────────────────── */

/* minmax(0,…) obligatorio: la columna lleva titular y una palabra alemana larga
   fijaría su min-content y descuadraría la rejilla entera */
.g-valuesList-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 6vw, 92px);
  align-items: start;
}
/* la celda se estira al alto de las filas: si no, el pegajoso no tiene recorrido
   y la mitad izquierda se queda hueca */
.g-valuesList-col { align-self: stretch; }
.g-valuesList-head { position: sticky; top: 132px; }
/* en columna estrecha, «Weiterempfehlungen.» se sale por la derecha */
.g-valuesList-head .display { overflow-wrap: break-word; hyphens: auto; }
.g-valuesList-head .display.lg { font-size: clamp(32px, 3.8vw, 58px); }
.g-valuesList-head .lede { max-width: 38ch; }

.g-valuesList-rows { border-top: 1px solid var(--line); }
.g-valuesList-row {
  padding: clamp(26px, 3.6vh, 40px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .5s cubic-bezier(.22, .61, .36, 1);
}
.g-valuesList-row:hover { padding-left: 10px; }
.g-valuesList-row h3 {
  font-family: var(--display), sans-serif;
  font-weight: var(--dw);
  letter-spacing: var(--dt);
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.14;
  /* compuestos alemanes a tamaño grande: partir sólo si no cabe, nunca guionar
     línea tras línea */
  hyphens: manual;
  overflow-wrap: break-word;
  transition: color .3s;
}
.g-valuesList-row:hover h3 { color: var(--a2); }
.g-valuesList-row p {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--t2);
  max-width: 62ch;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .g-valuesList-grid { grid-template-columns: 1fr; gap: 34px; }
  .g-valuesList-head { position: static; }
  .g-valuesList-head .lede { max-width: none; }
  .g-valuesList-row { padding: 24px 0; }
  /* el desplazamiento al pasar el cursor no tiene sentido con el dedo */
  .g-valuesList-row:hover { padding-left: 0; }
  .g-valuesList-row h3 { font-size: 21px; }
  .g-valuesList-row p { font-size: 15.5px; max-width: none; margin-top: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-valuesList-row, .g-valuesList-row h3 { transition: none; }
}