/* ═══════════════════════════════════════════════════════════════════════════
   Component: Process Steps v2 — Connected timeline, animated line draw
   ═══════════════════════════════════════════════════════════════════════════ */

.c-process-steps {
  position: relative;
}

.c-process-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  position: relative;
}

/* ── Connecting Line ────────────────────────────────────────────────── */

.c-process-steps__grid::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(var(--space-lg) + 6px);
  right: calc(var(--space-lg) + 6px);
  height: 2px;
  background: var(--color-border-default);
  z-index: 0;
}

/* ── Dot on the connecting line ────────────────────────────────────────
   WICHTIG (Kundenbefund 28.09.2026: "die Linie ist im Vordergrund"):
   Der Punkt muss ueber BEIDEN Linien liegen — der CSS-Linie
   (.c-process-steps__grid::before) und der von GSAP eingefuegten
   .js-progress-line.

   Warum das vorher nicht so war, gemessen per Treffer-Test
   (`document.elementFromPoint` in der Punkt-Mitte lieferte "js-progress-line"):
   Die Linie hat `z-index: 1` und wird von gsap-animations.js als letztes Kind
   in das Raster gehaengt. Auf `.c-process-step` stand ebenfalls `z-index: 1` —
   damit lag der Punkt als ::before in der Stapel-Ebene des Schrittes, und
   innerhalb derselben Ebene entscheidet die Baumreihenfolge: die spaeter
   eingefuegte Linie malte ueber den Punkt.

   Deshalb hat der SCHRITT jetzt KEIN z-index mehr. Er ist zwar positioniert
   (position: relative), erzeugt damit aber keinen Stapelkontext mehr; der Punkt
   konkurriert direkt mit der Linie und gewinnt mit z-index 2 gegen deren
   z-index 1 und gegen die CSS-Linie mit z-index 0. */
.c-process-step {
  position: relative;
  padding: var(--space-2xl) var(--space-lg) 0;
}

.c-process-step::before {
  content: '';
  position: absolute;
  top: -5px;
  left: var(--space-lg);
  width: 12px;
  height: 12px;
  background: var(--color-surface-light);
  border: 2px solid var(--color-border-default);
  border-radius: 0;
  z-index: 2;
  transition: border-color var(--motion-duration-base) var(--motion-ease-out),
              background-color var(--motion-duration-base) var(--motion-ease-out);
}

.c-process-step:hover::before {
  border-color: var(--color-orange-500);
  background-color: var(--color-orange-500);
}

/* ── Number ─────────────────────────────────────────────────────────── */

.c-process-step__number {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-orange-500);
  line-height: 1;
  margin-bottom: var(--space-md);
  opacity: 0.15;
}

.c-process-step:hover .c-process-step__number {
  opacity: 0.3;
  transition: opacity var(--motion-duration-base);
}

/* ── Title & Text ───────────────────────────────────────────────────── */

.c-process-step__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.c-process-step__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .c-process-steps__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Vertical connecting line */
  .c-process-steps__grid::before {
    top: 0;
    bottom: 0;
    left: 6px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .c-process-step {
    padding: var(--space-lg) 0 var(--space-lg) var(--space-xl);
  }

  .c-process-step::before {
    top: var(--space-lg);
    left: 0;
  }
}