/* ==========================================================================
   corelay - Sektion 5.5: Prozess in 4 Schritten (Startseite)
   --------------------------------------------------------------------------
   Zentrierter Sektionskopf auf --paper-50 und darunter vier weisse Karten in
   einer Reihe. Zwischen den Karten sitzt je ein schlanker grauer Pfeil, der
   unter 1024px verschwindet.

   Der Aufbau ist eine geordnete Liste (<ol class="prozess-steps">). Karten und
   Pfeile sind gleichermassen Rasterzellen: Die vier Kartenspalten laufen auf
   minmax(0, 1fr), die drei Pfeilspalten auf auto. Dadurch beanspruchen die
   Pfeile nur ihre eigene Breite und alle vier Karten bleiben exakt gleich
   breit - unabhaengig von der Textlaenge.

   Setzt auf css/tokens.css, css/base.css und css/layout.css auf. Flaeche,
   Sektionsabstand, Sektionskopf, Karte und Icon-Kachel kommen vollstaendig aus
   dem Design-System - diese Datei ergaenzt ausschliesslich die Feinheiten der
   Sektion. Alle Selektoren stehen unter dem Praefix .prozess, damit nichts
   kollidiert.

   Inhalt
     1. Sektionsgeruest
     2. Sektionskopf
     3. Schrittraster mit Pfeilspalten
     4. Karte - innerer Aufbau
     5. Kopfzeile der Karte (Schrittnummer und Icon-Kachel)
     6. Titel und Text
     7. Pfeile zwischen den Karten
     8. Staffelung des Einblendens
     9. Breakpoint 1200px
    10. Breakpoint 1024px - Pfeile aus, zwei Spalten
    11. Breakpoint 900px
    12. Breakpoint 700px
    13. Breakpoint 560px - eine Spalte
    14. Breakpoint 380px
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Sektionsgeruest
   --------------------------------------------------------------------------
   Flaeche (.bg-paper-50) und vertikaler Abstand (.section) stehen im Markup.
   Hier bleibt nur der Anker-Abstand, damit der Sprung auf #prozess nicht unter
   dem klebenden Header endet.
   -------------------------------------------------------------------------- */

.prozess {
  position: relative;
  scroll-margin-top: var(--header-h);
}


/* --------------------------------------------------------------------------
   2. Sektionskopf
   --------------------------------------------------------------------------
   Eyebrow (--blue-500), zweizeilige H2 in --t-on-light und die Unterzeile in
   --t-on-light-soft kommen aus .section-head in css/layout.css. Der harte
   Umbruch der H2 steckt in .ln und loest sich unter 640px von selbst auf.
   Die Unterzeile ist mit drei Woertern sehr kurz und bekommt deshalb keine
   zusaetzliche Breitenbegrenzung.
   -------------------------------------------------------------------------- */

.prozess-head .lead {
  margin-inline: auto;
}


/* --------------------------------------------------------------------------
   3. Schrittraster mit Pfeilspalten
   --------------------------------------------------------------------------
   Sieben Spalten im Wechsel: Karte - Pfeil - Karte - Pfeil - Karte - Pfeil -
   Karte. Die auto-Spalten schrumpfen auf die Pfeilbreite zusammen, die vier
   minmax(0, 1fr)-Spalten teilen sich den Rest zu gleichen Teilen.
   Listenpunkte und Innenabstand der <ol> entfernt bereits css/base.css.
   -------------------------------------------------------------------------- */

.prozess-steps {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto
    minmax(0, 1fr) auto
    minmax(0, 1fr) auto
    minmax(0, 1fr);
  align-items: stretch;
  column-gap: 16px;
  row-gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}


/* --------------------------------------------------------------------------
   4. Karte - innerer Aufbau
   --------------------------------------------------------------------------
   .card aus css/layout.css liefert Flaeche, Rahmen, Radius, Schatten und den
   Hover. Padding 24px laut Spezifikation (die Leistungs-Karten stehen auf
   26px). Die Karte fuellt ihre Rasterzelle voll aus, damit alle vier Karten
   gleich hoch sind.
   -------------------------------------------------------------------------- */

.prozess-card {
  height: 100%;
  padding: 24px;
}


/* --------------------------------------------------------------------------
   5. Kopfzeile der Karte (Schrittnummer und Icon-Kachel)
   --------------------------------------------------------------------------
   Links die Schrittnummer, rechts die kleine Icon-Kachel (38x38, --blue-50)
   aus .icon-tile--sm. Beide sitzen auf einer Linie, die Kachel bestimmt die
   Hoehe der Zeile.
   -------------------------------------------------------------------------- */

.prozess-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: 18px;
}

/* Schrittnummer 01 bis 04 */
.prozess-step {
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--blue-500);
  font-variant-numeric: tabular-nums;
}

/* Die Kachel darf nie schrumpfen, auch nicht bei langen Titeln */
.prozess-tile {
  flex: none;
}


/* --------------------------------------------------------------------------
   6. Titel und Text
   --------------------------------------------------------------------------
   Der Titel nutzt die Typo-Skala .card-title (17px/700). Der Text steht laut
   Spezifikation auf 13.5px und uebersteuert damit die 14px aus .card p.
   -------------------------------------------------------------------------- */

.prozess-title {
  margin-bottom: 8px;
}

.prozess-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--t-on-light-soft);
}


/* --------------------------------------------------------------------------
   7. Pfeile zwischen den Karten
   --------------------------------------------------------------------------
   Rein dekorativ (aria-hidden im Markup), deshalb ohne eigenen Text. Der Pfeil
   sitzt senkrecht mittig zwischen zwei Karten und ist 24px gross.
   -------------------------------------------------------------------------- */

.prozess-arrow {
  display: grid;
  place-items: center;
  align-self: center;
  width: 24px;
  color: var(--t-on-light-mute);
  pointer-events: none;
}

.prozess-arrow .ico {
  width: 24px;
  height: 24px;
}


/* --------------------------------------------------------------------------
   8. Staffelung des Einblendens
   --------------------------------------------------------------------------
   js/main.js setzt .is-visible, die Verzoegerung steuert --reveal-delay.
   Karten und Pfeile laufen abwechselnd ein, sodass die Reihe von links nach
   rechts entsteht.
   -------------------------------------------------------------------------- */

.prozess-head { --reveal-delay: 0ms; }

.prozess-card:nth-child(1) { --reveal-delay: 60ms; }
.prozess-arrow:nth-child(2) { --reveal-delay: 100ms; }
.prozess-card:nth-child(3) { --reveal-delay: 140ms; }
.prozess-arrow:nth-child(4) { --reveal-delay: 180ms; }
.prozess-card:nth-child(5) { --reveal-delay: 220ms; }
.prozess-arrow:nth-child(6) { --reveal-delay: 260ms; }
.prozess-card:nth-child(7) { --reveal-delay: 300ms; }


/* --------------------------------------------------------------------------
   9. Breakpoint 1200px
   --------------------------------------------------------------------------
   Ab hier wird der Platz je Karte knapp: engere Pfeilspalten und etwas
   weniger Innenabstand halten die vier Karten in einer Reihe lesbar.
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {

  .prozess-steps {
    column-gap: 12px;
  }

  .prozess-card {
    padding: 22px;
  }

  .prozess-card-head {
    margin-bottom: 16px;
  }

  .prozess-arrow {
    width: 20px;
  }

  .prozess-arrow .ico {
    width: 20px;
    height: 20px;
  }
}


/* --------------------------------------------------------------------------
   10. Breakpoint 1024px - Pfeile aus, zwei Spalten
   --------------------------------------------------------------------------
   Laut Spezifikation verschwinden die Pfeile unter 1024px. Damit faellt auch
   die Wechsel-Logik des Rasters weg: zwei gleich breite Kartenspalten,
   Luecke 22px wie in .grid-4. Die Karten laufen paarweise ein.
   -------------------------------------------------------------------------- */

@media (max-width: 1023.98px) {

  .prozess-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
  }

  .prozess-arrow {
    display: none;
  }

  .prozess-card {
    padding: 24px;
  }

  .prozess-card:nth-child(1),
  .prozess-card:nth-child(3) { --reveal-delay: 60ms; }

  .prozess-card:nth-child(5),
  .prozess-card:nth-child(7) { --reveal-delay: 160ms; }
}


/* --------------------------------------------------------------------------
   11. Breakpoint 900px
   -------------------------------------------------------------------------- */

@media (max-width: 899.98px) {

  .prozess-steps {
    column-gap: 18px;
    row-gap: 18px;
  }

  .prozess-card {
    padding: 22px;
  }

  .prozess-card-head {
    margin-bottom: 14px;
  }
}


/* --------------------------------------------------------------------------
   12. Breakpoint 700px
   -------------------------------------------------------------------------- */

@media (max-width: 699.98px) {

  .prozess-steps {
    column-gap: 16px;
    row-gap: 16px;
  }

  .prozess-card {
    padding: 20px;
  }
}


/* --------------------------------------------------------------------------
   13. Breakpoint 560px - eine Spalte
   --------------------------------------------------------------------------
   Einspaltig kommt jede Karte einzeln in den Sichtbereich - eine Staffelung
   waere hier nur eine Verzoegerung, deshalb faellt sie weg.
   -------------------------------------------------------------------------- */

@media (max-width: 559.98px) {

  .prozess-steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
  }

  .prozess-card {
    padding: 22px;
  }

  .prozess-card:nth-child(1),
  .prozess-card:nth-child(3),
  .prozess-card:nth-child(5),
  .prozess-card:nth-child(7) { --reveal-delay: 0ms; }
}


/* --------------------------------------------------------------------------
   14. Breakpoint 380px
   --------------------------------------------------------------------------
   Kleinste Stufe: kompakteres Padding und eine leicht verkleinerte Kachel,
   damit ab 320px nichts waagerecht ueberlaeuft.
   -------------------------------------------------------------------------- */

@media (max-width: 379.98px) {

  .prozess-card {
    padding: 18px;
  }

  .prozess-card-head {
    margin-bottom: 12px;
  }

  .prozess-step {
    font-size: 18px;
  }

  .prozess-tile {
    width: 34px;
    height: 34px;
  }

  .prozess-tile .ico {
    width: 17px;
    height: 17px;
  }
}