/* Leistungs-Hub */
.lhub-list { border-top: 1px solid var(--line); }
.lhub-row {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem 1.5fr 1fr 1fr 2.6rem;
  align-items: center;
  gap: 1.8rem;
  padding: clamp(1.6rem, 4.5vh, 3rem) var(--sp-gutter);
  border-bottom: 1px solid var(--line);
  transition: background 0.4s;
}
.lhub-row:hover { background: var(--bg-raise); }
.lhub-row__num { color: var(--ink-mute); font-size: var(--fs-label); }
.lhub-row__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 4.2rem);
  text-transform: uppercase;
  line-height: 0.95;
  transition: color var(--dur-fast), padding-left 0.45s var(--ease-out);
}
.lhub-row:hover .lhub-row__name { color: var(--accent); padding-left: 0.3em; }
.lhub-row__claim { color: var(--ink-dim); font-size: var(--fs-small); }
.lhub-row__animal { font-size: var(--fs-small); color: var(--ink-mute); }
.lhub-row__media {
  position: absolute;
  right: 12%;
  top: 50%;
  width: clamp(220px, 22vw, 360px);
  transform: translateY(-50%) rotate(-2deg) scale(0.9);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.35s, transform 0.5s var(--ease-out);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(0,0,0,0.65);
}
.lhub-row:hover .lhub-row__media { opacity: 1; transform: translateY(-50%) rotate(-2deg) scale(1); }
.lhub-row__arrow { color: var(--accent); font-size: 1.4rem; transition: transform 0.35s var(--ease-out); }
.lhub-row:hover .lhub-row__arrow { transform: translateX(0.3em); }
@media (max-width: 860px) {
  .lhub-row { grid-template-columns: 2.4rem 1fr 2rem; }
  .lhub-row__claim, .lhub-row__animal, .lhub-row__media { display: none; }
}