/* "From requirement to operational capability" — the four-step process -------
 *
 * Steps alternate either side of a centre rule that fills as the section is
 * scrolled. Same vocabulary as the framed hero: black ground, 1px hairlines,
 * tight uppercase headings, brand yellow used sparingly as the only accent.
 *
 * Own file so a re-scrape of dronivo.css cannot overwrite it.
 */

.section_process {
  /* Einmal deklariert: die Punkte und die Mittellinie der Paar-Variante
     rechnen den halben Spaltenabstand zurueck, um auf der Linie zu landen. */
  --proc-gap: clamp(3rem, 8vw, 9rem);
  background-color: var(--_primitives---colors--dark-brand, #151515);
  color: #fff;
  overflow: hidden;
}

/* --- Head ----------------------------------------------------------------- */

/* Label left, statement right — on the same two-column grid the steps use, so
   the head is part of the rhythm rather than a left-aligned block with a void
   beside it. It also sets up the alternation: heading right, then step 01 left. */
/* Eyebrow ueber der Ueberschrift, beide auf der Schiene.
 *
 * Vorher stand das Label in Spalte 1 und die Ueberschrift in Spalte 2, also
 * bei 778 von 1440. Das ist derselbe zweispaltige Kopf, der auf den anderen
 * Seiten schon zurueckgebaut wurde (siehe rail.css, .fr-head): links das
 * kurze Label, rechts der Text, und dazwischen ein leeres Feld von 600px
 * Breite und der vollen Kopfhoehe. Auf dem Bildschirmfoto ist das das
 * schwarze Loch oben links.
 *
 * Damit hatte diese eine Section vier verschiedene linke Textkanten: 64 fuer
 * das Label, 287 fuer die linke Karte, 778 fuer die Ueberschrift, 782 fuer
 * die rechte Karte. Jetzt zwei — 64 und 778 —, und die 778 ist die zweite
 * Rasterspalte, also gewollt. */
.process_head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 1.25rem;
  align-items: start;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.process_eyebrow {
  grid-column: 1;
  color: var(--_primitives---colors--brand-yellow, #c4b798);
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}

.process_slash {
  margin-right: 0.75rem;
}

.process_heading {
  grid-column: 1;
  margin: 0;
  /* Zwei Zeilen statt einer sehr langen: ueber die volle Containerbreite
     liefe die Ueberschrift auf 1312px auseinander. */
  max-width: 26ch;
  font-size: clamp(1.75rem, 3vw, 3rem);
  font-weight: 500;
  /* The hero's tight leading, so the two sections read as one system. */
  line-height: 1;
  letter-spacing: -0.015em;
  /* Evens out the line lengths instead of leaving a one-word last line. */
  text-wrap: balance;
}

/* --- Track ---------------------------------------------------------------- */

.process_track {
  position: relative;
}

.process_line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.14);
  transform: translateX(-0.5px);
}

/* Filled by process.js as the section scrolls. scaleY on a 1px element is a
   compositor-only transform, so scrubbing it costs nothing. */
.process_line-fill {
  position: absolute;
  inset: 0;
  background-color: var(--_primitives---colors--brand-yellow, #c4b798);
  transform: scaleY(0);
  transform-origin: top;
}

.process_steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Step ----------------------------------------------------------------- */

.process_step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--proc-gap);
  /* Webflow gibt jedem <li> 8px Innenabstand links. `padding: 0` weiter oben
     steht auf dem <ol>, nicht auf den Kindern — deshalb wirkte es nicht.
     Die Folge war nicht sichtbar als Einzug, sondern als Schieflage: das
     Kartenraster stand 4px rechts der Mittellinie, die linke Karte lag damit
     54px von der Linie entfernt, die rechte 62px. Gemessen bei jeder Breite.

     Dieselbe Regel setzt auch `margin: .25rem 0`. Im Zickzack fiel das nicht
     auf, weil der negative Zeilenabstand es ueberdeckte — in der Reihen-
     Variante endete der Schritt dadurch 4px zu frueh und die Punkte lagen
     neben der Linie. */
  margin: 0;
  padding: 0;
}

/* Echtes Ineinandergreifen statt gleichmaessiger Abstaende.
 *
 * Die alte Fassung setzte die Karten mit positivem Abstand untereinander und
 * ueberliess den Versatz allein dem Seitenwechsel. Ergebnis, gemessen: vier
 * Karten von je rund 170px auf einer Strecke von 1311px, und neben jeder Karte
 * eine leere Haelfte von derselben Hoehe. Das sind die "zu grossen schwarzen
 * Flaechen", die der Kunde meldet.
 *
 * Der negative Abstand laesst Karte 2 beginnen, waehrend Karte 1 noch laeuft.
 * Sie kollidieren nicht — sie stehen in verschiedenen Spalten —, aber die
 * senkrechte Strecke wird auf beiden Seiten genutzt statt abwechselnd. Ein
 * frueherer Versuch mit einem Versatz PRO SEITE scheiterte, weil jede Karte
 * ihre eigene Rasterzeile hat: damit lassen sich nur die Luecken ungleich
 * machen, nicht die Spalten verschraenken. Der Abstand zwischen den Zeilen ist
 * der Hebel, nicht die Position in der Zeile. */
.section_process.is-zigzag .process_step + .process_step {
  margin-top: clamp(-6rem, -5vw, -3rem);
}

/* Unter 768px steht ohnehin alles einspaltig untereinander; ein negativer
   Abstand liesse die Karten dort ueberlappen. */
@media (max-width: 767px) {
  .section_process.is-zigzag .process_step + .process_step {
    margin-top: 2.5rem;
  }
}

/* Die Karte fuellt ihre Rasterspalte, das Lesemass deckelt den Fliesstext.
 *
 * Vorher deckelte `max-width: 34ch` die Karte selbst auf 379px in einer 598px
 * breiten Spalte. Die linke Karte musste deshalb mit `margin-left: auto` an
 * die Spalte herangeschoben werden, damit sie ueberhaupt symmetrisch zur
 * Linie stand — und begann dadurch bei 287 statt auf der Schiene bei 64.
 * Umgekehrt herum stimmt beides gleichzeitig: die Karte sitzt auf der
 * Spaltenkante, ihre Haarlinie laeuft ueber die volle Spalte statt auf zwei
 * Dritteln zu enden, und der Text behaelt sein Mass. */
.process_card {
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* Mirrored around the rule: the left card is pushed to the end of its column so
   its right edge sits the same distance from the centre as the right card's
   left edge. Left-aligned in the column — as it was first built — left the
   whole section visibly leaning left (268px of air beside the rule on one side,
   65px on the other). Text stays left-aligned inside the card; only the boxes
   mirror. */
.process_step.is-left .process_card {
  grid-column: 1;
}

.process_step.is-right .process_card {
  grid-column: 2;
}

/* --- Marker on the rule ---------------------------------------------------- */

.process_dot {
  position: absolute;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #151515;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  transition:
    background-color 0.4s ease,
    box-shadow 0.4s ease;
}

/* Level with the card's top rule, whichever side it is on. */
.process_step > .process_dot {
  top: 0;
}

/* Set by process.js once the rule has been filled past this marker. */
.process_step.is-reached > .process_dot {
  background-color: var(--_primitives---colors--brand-yellow, #c4b798);
  box-shadow: inset 0 0 0 1px var(--_primitives---colors--brand-yellow, #c4b798);
}

/* --- Card content ---------------------------------------------------------- */

.process_num {
  color: var(--_primitives---colors--brand-yellow, #c4b798);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.process_title {
  margin: 0.85rem 0 0;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  font-weight: 500;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}

.process_text {
  max-width: 34ch;
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.55;
}

/* --- Varianten ------------------------------------------------------------- */

/* Drei Anordnungen derselben vier Schritte, zum Vergleich auf
 * /process-section-types. Der Kunde: "einzelne Punkte immer nebeneinander" —
 * das laesst sich auf zwei Arten lesen, und die Entscheidung ist seine.
 *
 * Alle drei teilen Markup, Inhalt und process.js. Was sie unterscheidet, ist
 * ausschliesslich, wie .process_steps sein Raster aufspannt und wo Punkt und
 * Linie dazu liegen.
 *
 *   zigzag   Karten versetzt, 02 beginnt waehrend 01 noch laeuft (Stand heute)
 *   paired   zweispaltig, Paare auf gleicher Hoehe
 *   row      alle vier nebeneinander, Linie waagerecht darunter
 */

/* --- paired: Paare auf gleicher Hoehe -------------------------------------- */

/* Hier spannt die Liste das Raster auf, nicht der einzelne Schritt. Sonst
   bekaeme jeder Schritt eine eigene Zeile — genau das ist der Grund, warum
   01 und 02 heute nicht nebeneinander stehen koennen. */
.section_process.is-paired .process_steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--proc-gap);
  row-gap: clamp(2.5rem, 5vw, 4rem);
}

.section_process.is-paired .process_step {
  display: block;
}

/* Zwei Schritte je Zeile heisst zwei Punkte an derselben Stelle der Linie.
   Der rechte faellt weg; der linke markiert die Zeile. */
.section_process.is-paired .process_step.is-right > .process_dot {
  display: none;
}

/* Der Punkt sitzt nicht mehr in der Mitte seines Schritts, sondern einen
   halben Spaltenabstand rechts davon — dort laeuft die Linie. */
.section_process.is-paired .process_step > .process_dot {
  left: auto;
  right: calc(-0.5 * var(--proc-gap));
  transform: translate(50%, -50%);
}

/* --- row: alle vier nebeneinander ------------------------------------------ */

.section_process.is-row .process_track {
  padding-bottom: 3.5rem;
}

.section_process.is-row .process_steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

.section_process.is-row .process_step {
  display: block;
}

/* Waagerecht unter den Karten statt senkrecht dazwischen. process.js liest
   die Variante aus der Klasse und fuellt entsprechend mit scaleX. */
.section_process.is-row .process_line {
  top: auto;
  bottom: 1.75rem;
  left: 0;
  right: 0;
  width: auto;
  height: 1px;
  transform: none;
}

.section_process.is-row .process_line-fill {
  transform: scaleX(0);
  transform-origin: left;
}

/* Der Punkt haengt am Schritt, die Linie am Track — und der ist um sein
   Polster von 3.5rem hoeher. `bottom: 1.75rem` an beiden gemessen ergab
   deshalb 56px Abstand zwischen Punkt und Linie. Der negative Wert holt die
   halbe Differenz zurueck: der Punkt sitzt 1.75rem unter der Unterkante
   seines Schritts, und dort laeuft die Linie. */
.section_process.is-row .process_step > .process_dot {
  top: auto;
  bottom: -1.75rem;
  left: 0;
  transform: translate(-50%, 50%);
}

/* Unter 768px stapelt jede Variante einspaltig — vier Spalten sind auf einem
   Telefon nicht lesbar, zwei kaum. Die Reihen-Variante bekommt dabei ihre
   senkrechte Linie zurueck, sonst laege ein waagerechter Strich unter einem
   senkrechten Stapel. */
@media (max-width: 767px) {
  .section_process.is-paired .process_steps,
  .section_process.is-row .process_steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  .section_process.is-paired .process_step.is-right > .process_dot {
    display: block;
  }
  .section_process.is-paired .process_step > .process_dot,
  .section_process.is-row .process_step > .process_dot {
    top: 0;
    bottom: auto;
    left: 4px;
    right: auto;
    transform: translate(-50%, -50%);
  }
  .section_process.is-row .process_track {
    padding-bottom: 0;
  }
  .section_process.is-row .process_line {
    top: 0;
    bottom: 0;
    left: 4px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .section_process.is-row .process_line-fill {
    transform: scaleY(0);
    transform-origin: top;
  }
}

/* --- Reveal ---------------------------------------------------------------- */

/* Only applied once process.js has taken over; without it (no JS, no GSAP) the
   cards are simply visible from the start. */
.js-process .process_card {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.js-process .process_step.is-in .process_card {
  opacity: 1;
  transform: none;
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 767px) {
  /* One column with the rule on the left — a zigzag needs width to read as
     one, and there is none here. */
  .process_line {
    left: 4px;
  }
  .process_head {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }
  .process_eyebrow,
  .process_heading {
    grid-column: 1;
  }
  .process_eyebrow {
    padding-top: 0;
  }
  .process_step {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .process_step + .process_step {
    margin-top: 0;
  }
  .process_step.is-left .process_card,
  .process_step.is-right .process_card {
    grid-column: 1;
    margin: 0 0 2.75rem;
    margin-left: 0;
    padding-left: 2.25rem;
    max-width: none;
  }
  .process_step > .process_dot {
    left: 4px;
  }
  .process_card {
    border-top: none;
    padding-top: 0;
  }
  /* Der Abstand unter der letzten Karte zaehlt zur Hoehe des Tracks, also
     lief die Linie 44px ueber den letzten Punkt hinaus ins Leere. */
  .process_step:last-child .process_card {
    margin-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-process .process_card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .process_dot {
    transition: none;
  }
}