/* ============================================================
   Heroes-CTA — Mid-Page Call-to-Action mit dunkelrotem Hintergrund
   Wiederverwendbar als grosser CTA-Block (z.B. Mitglied werden,
   Helden gesucht). Vines-Animation kommt aus components/vines.css,
   die hier nur konsumiert wird via data-vines + .vines-layer.
   ============================================================ */

.heroes {
  --bg: var(--color-rot);
  --next-bg: var(--color-anthrazit);
  background: var(--bg);
  color: var(--color-sand);
  padding: clamp(5rem, 10vw, 8rem) 0;
  position: relative;
  overflow: hidden;
}
.heroes::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 85% 20%, rgba(197,164,145,0.22), transparent 50%),
    radial-gradient(circle at 15% 90%, rgba(74,101,0,0.18), transparent 55%);
  pointer-events: none;
  z-index: 1;
}
.heroes .container { position: relative; z-index: 3; }
.heroes-text { max-width: 56ch; }
.heroes .eyebrow { color: var(--color-gold); }
.heroes .eyebrow::before { background: var(--color-gold); }
.heroes h2 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  color: var(--color-sand);
  margin-bottom: var(--space-md);
  max-width: 18ch;
}
.heroes h2 em {
  font-style: italic;
  color: var(--color-gold);
  font-weight: 400;
}
.heroes-text p {
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: var(--space-lg);
  max-width: 52ch;
  color: rgba(234,228,211,0.9);
}
.heroes-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.heroes .btn-primary {
  background: var(--color-sand);
  color: var(--color-rot);
}
.heroes .btn-primary:hover {
  background: var(--color-bone);
  color: var(--color-rot-dark);
}
.heroes .btn-ghost {
  color: var(--color-sand);
  border-color: rgba(234,228,211,0.55);
}
.heroes .btn-ghost:hover {
  background: var(--color-sand);
  color: var(--color-rot);
  border-color: var(--color-sand);
}

@media (max-width: 720px) {
  .heroes h2 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
}