/* ==========================================================================
   Baustein: Ablauf-Liste
   Datei: css/bausteine/ablauf-liste.css (kein Skript)
   Gebraucht auf: kontakt.html (drei Schritte nach dem Absenden, auf Ink),
   karriere.html (Bewerbungsablauf in vier Schritten, auf Weiß)
   Bauvorschrift: DESIGN.md, Baustein "Ablauf-Liste". Textmuster "Ablaufschritt" aus
   .claude/brand-voice-guidelines.md: ein Verb als Titel, ein bis zwei Sätze.
   Ohne Bild, ohne Aufklapper und ohne Durchlauf, anders als die Prozess-Sektion: Die
   Schritte sind kurz genug, um alle offen nebeneinander zu stehen.
   Regeln: docs/entwicklung.md. Klassen-Präfix dieser Datei siehe unten,
   Tokens und Rollen kommen aus css/style.css und werden hier nicht neu definiert.
   ========================================================================== */

/* Präfix: .steps-* */

/* Lead unter der Überschrift, wie die Absätze unter Sektionsköpfen */
.steps-intro { margin-top: 28px; max-width: 760px; }

/* Schritte als Spalten mit Haarlinie oben, drei oder vier (.steps--four) */
.steps {
  list-style: none; margin: 72px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px var(--gap-col);
}
.steps--four { grid-template-columns: repeat(4, 1fr); column-gap: 48px; }
.steps-item { padding-top: 24px; border-top: 1px solid var(--line); min-width: 0; }
.steps-title { margin-top: 18px; color: var(--ink); }
.steps-text { margin-top: 10px; max-width: 26em; }

/* Auf Ink: Linie Weiß .18 wie in der dunklen Preiskarte, Titel Weiß, Text --body-dark
   und Ziffer --muted-dark kommen aus style.css (.surface--ink). */
.surface--ink .steps-item { border-top-color: rgba(255,255,255,.18); }
.surface--ink .steps-title { color: #fff; }

@media (max-width: 980px) {
  .steps, .steps--four { grid-template-columns: 1fr 1fr; column-gap: 40px; }
}

@media (max-width: 640px) {
  .steps, .steps--four { margin-top: 48px; grid-template-columns: 1fr; row-gap: 32px; }
}