/*
 * VOMA Child Theme – stepper.css
 *
 * Prozess-Stepper: nummerierte Schritte-Übersicht (z. B. "So läuft
 * die Vertragsprüfung ab", "4-Schritte-Gebäude-Check"). Wiederverwendbar
 * auf Vertragscheck, Schadensfall, Bestandskunden-Check, jede neue
 * Sparten-Seite (siehe voma-website-masterplan.md, Abschnitt 7.2).
 *
 * Quellen:
 *   06_Standards/CI/COMPONENTS.md – Karten-/Radius-/Schatten-Werte
 *   06_Standards/DEVELOPMENT/CSS-TOKENS.md – Token-Register
 */

/* ============================================================
   SECTION
   ============================================================ */

.voma-stepper {
  padding-block: var(--voma-space-7) 0;
}

.voma-stepper__inner {
  max-width: var(--voma-max-service);
  margin-inline: auto;
  /* Kein eigenes horizontales Padding mehr – kommt von .site-content
     (Mobile-Design-System, docs/components/mobile-design-system.md). */
}

.voma-stepper__heading {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 900;
  line-height: 1.2;
  color: #111827;
  margin: 0 0 var(--voma-space-5);
  text-align: center;
}

/* ============================================================
   LISTE
   Mobil: vertikale Timeline statt Einzelkarten.

   UX-Entscheidung 02.07.2026 (siehe docs/components/mobile-design-
   system.md, Abschnitt "Stepper-Redesign"): vier gestapelte Karten
   mit je eigenem Rahmen/Schatten wirkten auf Mobile unruhig und
   asymmetrisch – die Nummer stand isoliert links, der Textblock
   füllte die Kartenbreite nicht (fehlendes flex:1 auf .voma-stepper__
   body), wodurch rechts sichtbar ungenutzter Raum entstand
   (Felix-Screenshot). Ersetzt durch eine durchgehende Timeline:
   kleinere Nummern-Kreise auf einer gemeinsamen vertikalen Linie,
   kein Karten-Rahmen/-Schatten mehr pro Schritt, Textblock nutzt die
   volle verbleibende Breite. Ruhiger, weniger "Bausteine
   nebeneinander", entspricht dem Muster hochwertiger Onboarding-/
   Prozess-Strecken (Stripe, Linear).
   ============================================================ */

.voma-stepper__list {
  display: flex;
  flex-direction: column;
  counter-reset: voma-stepper;
}

.voma-stepper__item {
  position: relative;
  display: flex;
  gap: var(--voma-space-4);
  padding-bottom: var(--voma-space-6);
}

.voma-stepper__item:last-child {
  padding-bottom: 0;
}

.voma-stepper__marker {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.voma-stepper__number {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--voma-green);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
}

.voma-stepper__line {
  flex: 1;
  width: 2px;
  margin-block: var(--voma-space-2) 0;
  background: rgba(82, 177, 101, .25);
}

.voma-stepper__item:last-child .voma-stepper__line {
  display: none;
}

.voma-stepper__body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: var(--voma-space-1);
  /* Leichter Versatz nach oben, damit der Titel optisch auf Höhe der
     Nummer sitzt (Nummer ist kleiner als vorher, 32px statt 40px). */
  padding-top: 3px;
}

.voma-stepper__title {
  font-size: 16.5px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.voma-stepper__text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(17, 24, 39, .72);
  margin: 0;
}

/* ============================================================
   DESKTOP BREAKPOINT (≥ 64rem)
   UX-Review 02.07.2026 (Runde 2): Felix bewertete die Desktop-Reihe
   trotz der bereits horizontalen Anlage als "überzeugt mich noch
   nicht". Root Cause: .voma-stepper__list setzte hier nur
   grid-template-columns, aber nie display:grid – der Basiswert
   display:flex;flex-direction:column aus der SECTION-Regel oben
   blieb also aktiv. Die Schritte standen dadurch de facto weiterhin
   untereinander statt in einer Reihe, nur mit zentriertem statt
   linksbündigem Inhalt pro Schritt. Echter Bug, keine Geschmacksfrage.

   Neu: display:grid ergänzt (behebt den eigentlichen Fehler), dazu
   größere Nummern-Kreise (32px → 52px) mit dezentem Ring statt reiner
   Vollfarbe, und eine einzelne durchgehende Linie auf .voma-stepper__list
   selbst statt N-1 einzelner ::after-Pseudoelemente pro Item – robuster
   (bricht nicht bei geänderter Kreisgröße) und visuell wirklich eine
   Linie statt mehrerer Segmente. Start/Breite über --voma-stepper-count
   berechnet, damit die Formel auch bei 2 statt 4 Schritten stimmt
   (Rechtsschutzversicherung nutzt 2 Schritte).
   ============================================================ */

@media (min-width: 64rem) {
  .voma-stepper {
    padding-block: 96px 0;
  }

  .voma-stepper__list {
    display: grid;
    grid-template-columns: repeat(var(--voma-stepper-count, 4), 1fr);
    gap: var(--voma-space-4);
    position: relative;
  }

  .voma-stepper__list::before {
    content: "";
    position: absolute;
    top: 26px;
    left: calc(50% / var(--voma-stepper-count, 4));
    width: calc(100% - (100% / var(--voma-stepper-count, 4)));
    height: 2px;
    background: rgba(82, 177, 101, .25);
  }

  .voma-stepper__item {
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding-bottom: 0;
  }

  /* Mobile-Timeline-Elemente (Marker-Spalte, vertikale Linie) werden
     für die horizontale Reihe nicht gebraucht – die neue durchgehende
     Linie liegt auf .voma-stepper__list (oben). display:contents
     entfernt nur die Layout-Box des Wrappers, ohne das Markup je
     Seite anfassen zu müssen. */
  .voma-stepper__marker {
    display: contents;
  }

  .voma-stepper__line {
    display: none;
  }

  .voma-stepper__number {
    width: 52px;
    height: 52px;
    font-size: 18px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 6px rgba(82, 177, 101, .10);
  }

  .voma-stepper__body {
    padding-top: var(--voma-space-3);
  }

  .voma-stepper__title {
    font-size: 17.5px;
  }

  .voma-stepper__text {
    font-size: 15.5px;
  }
}