/* ==========================================================================
   So funktioniert's — 3-Schritte-Prozess
   Card-Sektion nach Styleguide-Regel: keine Sektion-Haarlinie,
   jeder Schritt trägt seine eigene border-top.
   ========================================================================== */

.process__head {
  max-width: 640px;
  margin-bottom: var(--space-10);
}

.process__intro {
  margin-top: var(--space-4);
}

.process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter-desktop);
  list-style: none;
}

.process__step {
  border-top: 1px solid var(--color-gray-300);
  padding: var(--space-5) 0 0;
}

.process__number {
  display: block;
  font-family: var(--font-family-display);
  font-size: 40px;
  font-weight: var(--font-weight-black);
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-4);
}

.process__title {
  margin-bottom: var(--space-2);
}

.process__body {
  color: var(--color-body);
}

@media (max-width: 1023px) {
  .process__grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-8); }
}

@media (max-width: 767px) {
  .process__grid { grid-template-columns: 1fr; row-gap: var(--space-6); }
}