/* ============================================================
   cd_schritte — Nummerierte Abfolge
   ============================================================
   Fuenf Bauformen aus einem Markup:
     zeitstrahl  Bahn unter einer roten Linie mit Laufpunkten
     karten      Zeilen untereinander mit Nummernspalte
     kacheln     Haarlinienraster
     zeitpunkte  Fahrplan mit Zeitmarke und Status
     fragen      Haarlinienraster mit kleiner Ordnungszahl

   Zwei Regeln, die hier durchgaengig gelten:
   - minmax(0, 1fr) statt 1fr. 1fr meint minmax(auto, 1fr) und
     sprengt die Spalte, sobald ein Wort breiter ist als sie.
   - Kein !important. Wo eine Regel nicht greift, ist die
     Reihenfolge oder die Spezifitaet schuld.

   Die Spaltenzahl kommt als --cd-spalten aus der Vorlage: sie
   haengt an der Anzahl der Schritte und laesst sich deshalb nicht
   im Stylesheet festlegen.
   ============================================================ */

/* ------------------------------------------------------------
   Grundfarben der Bahn
   ------------------------------------------------------------
   Aktiv und Ruhe steuern Nummern und Laufpunkte, Linie und
   Flaeche das Haarlinienraster. Auf dunklem Grund wechselt das
   ganze Paket an EINER Stelle — nicht in zwanzig Regeln.
   ------------------------------------------------------------ */
.cd-schritte {
  --cd-schritt-aktiv: var(--cd-rot);
  --cd-schritt-ruhe: var(--cd-text-schwach);
  --cd-schritt-linie: var(--cd-linie-2);
  --cd-schritt-flaeche: var(--cd-weiss);
  --cd-schritt-takt: 3.2s;
}

.cd-schritte.cd-auf-dunkel {
  --cd-schritt-aktiv: var(--cd-rot-auf-dunkel);
  --cd-schritt-ruhe: var(--cd-text-auf-dunkel-2);
  --cd-schritt-linie: var(--cd-dunkel-3);
  --cd-schritt-flaeche: var(--cd-dunkel-2);
}

/* ------------------------------------------------------------
   Kopfblock
   ------------------------------------------------------------
   Baut auf .cd-kopfzeile auf: links Kicker und Ueberschrift,
   rechts Beitext, Bild oder Knopf.
   ------------------------------------------------------------ */
.cd-schritte__titel {
  font-family: var(--cd-schrift-display);
  font-size: var(--cd-gr-h2);
  font-weight: 700;
  line-height: var(--cd-zeile-kopf);
  letter-spacing: -.028em;
  color: var(--cd-tinte);
}

.cd-schritte__nebenkopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cd-a4);
}

.cd-schritte__beitext {
  font-size: var(--cd-gr-gross);
  line-height: var(--cd-zeile-text);
  color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-schritte__beitext { color: var(--cd-text-auf-dunkel); }

.cd-schritte__kopfknopf { margin-block-start: var(--cd-a3); }

/* ------------------------------------------------------------
   Beitext unter der Ueberschrift   (cd_kopfaufbau = unter)
   ------------------------------------------------------------
   Dann traegt die rechte Spalte die Zeichnung allein — und darf
   dafuer die ganze Spaltenbreite nehmen. Die 390 px aus der Regel
   oben sind fuer den Fall gedacht, dass sich Zeichnung und Text
   die Spalte teilen.
   ------------------------------------------------------------ */
.cd-schritte__kopf--textunten .cd-kopfzeile__text .cd-schritte__beitext {
  margin-block-start: var(--cd-a4);
  /* Eine Lesespalte, keine Zeile ueber die halbe Bahn. */
  max-inline-size: 62ch;
}
.cd-schritte__kopf--textunten .cd-kopfzeile__text .cd-schritte__beitext + .cd-schritte__beitext {
  margin-block-start: var(--cd-a3);
}
.cd-schritte__kopf--textunten .cd-schritte__bild {
  max-inline-size: 100%;
}

/* Die Zeichnung sitzt am rechten Rand des Kopfes. Ohne Breiten-
   angabe im Markup: die Bahnbilder sind SVG. */
.cd-schritte__bild {
  display: block;
  inline-size: 100%;
  max-inline-size: 390px;
  block-size: auto;
  margin-inline-start: auto;
}

/* Drei Bauformen tragen ihren Text nicht neben der Ueberschrift,
   sondern darunter — wie im Entwurf. */
.cd-schritte--kacheln .cd-schritte__kopf,
.cd-schritte--fragen .cd-schritte__kopf,
.cd-schritte--zeitpunkte .cd-schritte__kopf {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  max-inline-size: 52rem;
}

/* Steht ein Bild daneben, gilt wieder die zweispaltige Kopfzeile.
   Zwei Klassen, damit diese Regel dieselbe Spezifitaet hat wie die
   vorige und als spaetere gewinnt. */
.cd-schritte .cd-schritte__kopf--bild {
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  align-items: center;
  max-inline-size: none;
}

/* ------------------------------------------------------------
   Die Liste
   ------------------------------------------------------------ */
.cd-schritte__liste {
  display: grid;
  grid-template-columns: repeat(var(--cd-spalten, 4), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.cd-schritte__punkt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--cd-a4);
}

.cd-schritte__inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--cd-a3);
}

.cd-schritte__nummer {
  font-family: var(--cd-schrift-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--cd-schritt-aktiv);
}

.cd-schritte__punkttitel {
  font-family: var(--cd-schrift-display);
  font-size: var(--cd-gr-h4);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -.018em;
  color: var(--cd-tinte);
}

.cd-schritte__punkttext {
  font-size: var(--cd-gr-text);
  line-height: var(--cd-zeile-text);
  color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-schritte__punkttext { color: var(--cd-text-auf-dunkel); }

/* Symbolkachel wie in .cd-karte__kachel, nur kleiner. */
.cd-schritte__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--cd-r-knopf);
  background: color-mix(in srgb, var(--cd-schritt-aktiv) 8%, transparent);
  color: var(--cd-schritt-aktiv);
}

/* Nachsaetze. Die Zusatzzeile bekommt eine eigene Linie: sie
   beantwortet eine Frage, die die Beschriftung am Element stellt
   ("Von Ihnen", "Ohne das"). */
.cd-schritte__zusatz {
  margin-block-start: var(--cd-a2);
  padding-block-start: var(--cd-a4);
  border-block-start: 1px solid var(--cd-schritt-linie);
  font-size: var(--cd-gr-klein);
  line-height: 1.55;
  color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-schritte__zusatz { color: var(--cd-text-auf-dunkel-2); }

.cd-schritte__zusatzwort {
  font-weight: 600;
  color: var(--cd-tinte);
}
.cd-auf-dunkel .cd-schritte__zusatzwort { color: var(--cd-weiss); }

.cd-schritte__begruendung {
  font-size: var(--cd-gr-klein);
  line-height: 1.55;
  color: var(--cd-text-3);
}
/* Auf dunklem Grund traegt --cd-text-3 nicht: gegen die Kachelfarbe
   kommt es auf knapp 2:1 und faellt damit durch 1.4.3. */
.cd-auf-dunkel .cd-schritte__begruendung { color: var(--cd-text-auf-dunkel-2); }

.cd-schritte__punktfussnote {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--cd-text-schwach);
}
.cd-auf-dunkel .cd-schritte__punktfussnote { color: var(--cd-text-auf-dunkel-2); }

/* ------------------------------------------------------------
   Bauform Zeitstrahl
   ------------------------------------------------------------
   Rote Linie ueber der ganzen Bahn, darunter die Schritte durch
   senkrechte Haarlinien getrennt. Der Laufpunkt sitzt auf der
   roten Linie.
   ------------------------------------------------------------ */
.cd-schritte--zeitstrahl .cd-schritte__liste {
  border-block-start: 2px solid var(--cd-rot);
}

.cd-schritte--zeitstrahl .cd-schritte__punkt {
  padding: var(--cd-a6) var(--cd-a6) var(--cd-a7);
  border-inline-start: 1px solid var(--cd-schritt-linie);
}
.cd-schritte--zeitstrahl .cd-schritte__punkt:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.cd-schritte__marke {
  position: absolute;
  inset-block-start: -6px;
  inset-inline-start: var(--cd-a6);
  inline-size: 11px;
  block-size: 11px;
  border-radius: 50%;
  background: var(--cd-schritt-aktiv);
}
.cd-schritte--zeitstrahl .cd-schritte__punkt:first-child .cd-schritte__marke {
  inset-inline-start: 0;
}

/* ------------------------------------------------------------
   Bauform Karten
   ------------------------------------------------------------
   Zeilen untereinander: Nummer links, Text rechts.
   ------------------------------------------------------------ */
.cd-schritte--karten .cd-schritte__liste {
  grid-template-columns: minmax(0, 1fr);
  /* 2 px Spalt: die Trennlinie des Rasters. Kein Abstandstoken —
     das hier ist eine Linienstaerke und keine Luft. */
  gap: 2px;
  background: var(--cd-schritt-linie);
  border: 1px solid var(--cd-schritt-linie);
}

.cd-schritte--karten .cd-schritte__punkt {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--cd-a5);
  align-items: start;
  padding: var(--cd-a5) var(--cd-a6);
  background: var(--cd-schritt-flaeche);
}

.cd-schritte--karten .cd-schritte__nummer { font-size: 1.5rem; }

/* ------------------------------------------------------------
   Bauformen Kacheln und Fragen
   ------------------------------------------------------------
   Das Rastergitter entsteht aus einem 2 px breiten Spalt ueber
   einer eingefaerbten Flaeche — nicht aus Rahmen an den Kacheln.
   Rahmen ergaeben an jeder Innenkante eine doppelte Linie.
   ------------------------------------------------------------ */
.cd-schritte--kacheln .cd-schritte__liste,
.cd-schritte--fragen .cd-schritte__liste {
  gap: 2px;
  background: var(--cd-schritt-linie);
  border: 1px solid var(--cd-schritt-linie);
}

.cd-schritte--kacheln .cd-schritte__punkt,
.cd-schritte--fragen .cd-schritte__punkt {
  padding: var(--cd-a6) var(--cd-a5) var(--cd-a7);
  background: var(--cd-schritt-flaeche);
}

/* Die Frage traegt die Zeile, nicht ihre Nummer: dort steht die
   Ordnungszahl klein und ruhig ueber der Frage. Der Selbstlauf-Block
   weiter unten hat dieselbe Spezifitaet und steht spaeter — laeuft
   der Selbstlauf, gilt also seine Farbe. Genau so ist es gewollt. */
.cd-schritte--fragen .cd-schritte__nummer {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cd-text-3);
}
.cd-auf-dunkel.cd-schritte--fragen .cd-schritte__nummer { color: var(--cd-text-auf-dunkel-2); }

.cd-schritte--fragen .cd-schritte__punkttitel { font-size: var(--cd-gr-gross); }

/* ------------------------------------------------------------
   Bauform Zeitpunkte
   ------------------------------------------------------------
   Fahrplan: Titel, Zeitmarke, Status. Eine Zeile je Eintrag.
   ------------------------------------------------------------ */
.cd-schritte--zeitpunkte .cd-schritte__liste {
  grid-template-columns: minmax(0, 1fr);
  background: var(--cd-flaeche-1);
  border: 1px solid var(--cd-schritt-linie);
}
.cd-auf-dunkel.cd-schritte--zeitpunkte .cd-schritte__liste {
  background: var(--cd-schritt-flaeche);
}

.cd-schritte--zeitpunkte .cd-schritte__punkt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--cd-a3) var(--cd-a5);
  padding: var(--cd-a5) var(--cd-a6);
  border-block-start: 1px solid var(--cd-schritt-linie);
}
.cd-schritte--zeitpunkte .cd-schritte__punkt:first-child { border-block-start: 0; }

.cd-schritte__zeitmarke {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-klein);
  letter-spacing: .06em;
  color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-schritte__zeitmarke { color: var(--cd-text-auf-dunkel-2); }

.cd-schritte__status { white-space: nowrap; }
.cd-auf-dunkel .cd-schritte__status {
  border-color: var(--cd-linie-auf-dunkel);
  color: var(--cd-text-auf-dunkel);
}

/* ------------------------------------------------------------
   Band unter der Liste
   ------------------------------------------------------------
   Traegt den Hinweis und — falls einer gesetzt ist — den Knopf.
   In der Bauform Zeitpunkte ist es die Legende und bleibt
   deshalb ohne Flaeche.
   ------------------------------------------------------------ */
.cd-schritte__band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cd-a5);
  margin-block-start: var(--cd-a6);
  padding: var(--cd-a5) var(--cd-a6);
  background: var(--cd-flaeche-2);
  border-inline-start: 3px solid var(--cd-rot);
}
.cd-auf-dunkel .cd-schritte__band { background: var(--cd-schritt-flaeche); }

.cd-schritte__bandtext {
  max-inline-size: 62ch;
  font-size: var(--cd-gr-text);
  line-height: var(--cd-zeile-text);
  color: var(--cd-tinte);
}
.cd-auf-dunkel .cd-schritte__bandtext { color: var(--cd-text-auf-dunkel); }

.cd-schritte--zeitpunkte .cd-schritte__band {
  margin-block-start: var(--cd-a4);
  padding: 0;
  background: none;
  border-inline-start: 0;
}
.cd-schritte--zeitpunkte .cd-schritte__bandtext {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  line-height: 1.9;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cd-text-3);
}
.cd-auf-dunkel.cd-schritte--zeitpunkte .cd-schritte__bandtext {
  color: var(--cd-text-auf-dunkel-2);
}

/* ------------------------------------------------------------
   Selbstlauf
   ------------------------------------------------------------
   Die Hervorhebung wandert von Schritt zu Schritt. Sie laeuft
   ohne JavaScript: jeder Punkt bekommt aus der Vorlage seinen
   Index (--cd-schritt) und die Bahn ihre Anzahl
   (--cd-schritte-anzahl). Daraus entsteht Dauer und Versatz.

   Der Anhalte-Schalter ist Pflicht (WCAG 2.2.2) und im Backend
   NICHT abschaltbar. Er ist ein Kaestchen VOR der Liste — deshalb
   genuegt der Geschwister-Selektor und es braucht kein Skript.
   ------------------------------------------------------------ */
@keyframes cdSchritteNummer {
  0%, 20%  { color: var(--cd-schritt-aktiv); }
  24%, 96% { color: var(--cd-schritt-ruhe); }
  100%     { color: var(--cd-schritt-aktiv); }
}

@keyframes cdSchritteMarke {
  0%, 20%  { background: var(--cd-schritt-aktiv); transform: scale(1.15); }
  24%, 96% { background: var(--cd-schritt-ruhe); transform: scale(1); }
  100%     { background: var(--cd-schritt-aktiv); transform: scale(1.15); }
}

.cd-schritte--selbstlauf .cd-schritte__nummer {
  color: var(--cd-schritt-ruhe);
  animation: cdSchritteNummer calc(var(--cd-schritte-anzahl, 4) * var(--cd-schritt-takt)) ease-in-out infinite;
  animation-delay: calc(var(--cd-schritt, 0) * var(--cd-schritt-takt));
}

.cd-schritte--selbstlauf .cd-schritte__marke {
  background: var(--cd-schritt-ruhe);
  animation: cdSchritteMarke calc(var(--cd-schritte-anzahl, 4) * var(--cd-schritt-takt)) ease-in-out infinite;
  animation-delay: calc(var(--cd-schritt, 0) * var(--cd-schritt-takt));
}

/* Der Schalter selbst ist visuell versteckt (cd-nurlesen aus
   basis.css) und bleibt fokussierbar. Sichtbar ist seine Marke. */
.cd-schritte__haltmarke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cd-a2);
  /* 44 px fest statt --cd-zielgroesse: Die Marke ist ein
     Anhalte-Schalter und damit die Zusage aus WCAG 2.2.2. Am
     Rechner kam sie auf 39 px — ueber dem Mindestmass von 24, aber
     unter der Empfehlung von 44, waehrend jeder andere Halt-Knopf
     im Haus 44 oder 52 hat. */
  min-block-size: 44px;
  /* Die Marke springt sonst beim Umschalten um gut 15 px in die
     Breite, weil „fortsetzen" laenger ist als „anhalten" — und mit
     ihr rueckt alles daneben. Die Mindestbreite haelt beide Woerter
     aus; gemessen am 02.09.2026: 193,8 px im einen, 209,4 im
     anderen Zustand. */
  min-inline-size: 210px;
  margin-block-end: var(--cd-a5);
  padding: 8px 14px;
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-feld);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-klein);
  color: var(--cd-tinte);
  cursor: pointer;
}
.cd-auf-dunkel .cd-schritte__haltmarke {
  border-color: var(--cd-linie-auf-dunkel);
  color: var(--cd-weiss);
}
.cd-schritte__haltmarke:hover { border-color: var(--cd-rot); }

/* Der Fokusring gehoert an die sichtbare Marke — das Kaestchen
   selbst ist ja weggeklappt. */
.cd-schritte__halt:focus-visible + .cd-schritte__haltmarke {
  outline: 2px solid var(--cd-rot);
  outline-offset: 2px;
}
.cd-auf-dunkel .cd-schritte__halt:focus-visible + .cd-schritte__haltmarke {
  outline-color: var(--cd-weiss);
}

.cd-schritte__haltwort--aus { display: none; }
.cd-schritte__halt:checked + .cd-schritte__haltmarke .cd-schritte__haltwort--an { display: none; }
.cd-schritte__halt:checked + .cd-schritte__haltmarke .cd-schritte__haltwort--aus { display: inline; }

.cd-schritte__halt:checked ~ .cd-schritte__liste .cd-schritte__nummer,
.cd-schritte__halt:checked ~ .cd-schritte__liste .cd-schritte__marke {
  animation-play-state: paused;
}

/* Weniger Bewegung sticht jede Einstellung im Backend: dann steht
   die Abfolge still, alle Nummern tragen die Akzentfarbe und der
   Schalter entfaellt — es gibt nichts mehr anzuhalten. */
@media (prefers-reduced-motion: reduce) {
  .cd-schritte--selbstlauf .cd-schritte__nummer {
    animation: none;
    color: var(--cd-schritt-aktiv);
  }
  .cd-schritte--selbstlauf .cd-schritte__marke {
    animation: none;
    background: var(--cd-schritt-aktiv);
  }
  .cd-schritte__halt,
  .cd-schritte__haltmarke { display: none; }
}

/* ------------------------------------------------------------
   Schmalere Bildschirme
   ------------------------------------------------------------
   Die Spaltenzahl aus der Vorlage gilt nur am grossen Schirm.
   Darunter entscheidet die Bauform — deshalb werden die Bauformen
   mit eigener Spaltenangabe hier noch einmal genannt.
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .cd-schritte__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-schritte--karten .cd-schritte__liste,
  .cd-schritte--zeitpunkte .cd-schritte__liste { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .cd-schritte .cd-schritte__kopf--bild {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .cd-schritte__bild { margin-inline-start: 0; }

  .cd-schritte--zeitpunkte .cd-schritte__punkt {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .cd-schritte__status { justify-self: start; }
}

@media (max-width: 600px) {
  .cd-schritte__liste,
  .cd-schritte--karten .cd-schritte__liste { grid-template-columns: minmax(0, 1fr); }

  /* Am Telefon steht der Zeitstrahl senkrecht: die Trennlinie
     wandert von der Seite nach oben, der Laufpunkt mit ihr. */
  .cd-schritte--zeitstrahl .cd-schritte__punkt {
    padding: var(--cd-a6) 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--cd-schritt-linie);
  }
  .cd-schritte--zeitstrahl .cd-schritte__punkt:first-child { border-block-start: 0; }
  .cd-schritte__marke { inset-inline-start: 0; }

  .cd-schritte--karten .cd-schritte__punkt {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-a3);
  }

  .cd-schritte__band { padding: var(--cd-a5); }
}


/* ============================================================
   Nachtrag: der Zeitstrahl mit MEHR als einer Reihe
   ============================================================
   Steht am Dateiende, weil hier Regeln aus derselben Datei
   zurueckgenommen werden. Bei gleicher Spezifitaet gewinnt die
   spaetere.

   DER BEFUND (gemessen an /service/typo3-update, sechs Schritte):
   Der rote Strich sass als `border-block-start` an der LISTE. Bei
   drei Spalten und sechs Schritten bricht die Liste in zwei Reihen
   um — und der Strich steht dann nur ueber der ersten. Die drei
   Laufpunkte der zweiten Reihe sassen weiterhin auf -6 px und
   schwebten damit im Leeren.

   Dazu kam ein zweiter Fehler aus derselben Ursache: `:first-child`
   nahm Einzug und Trennstrich nur dem ERSTEN Schritt. Schritt 04
   steht aber ebenfalls am Zeilenanfang und trug beides — gemessen
   32 px Einzug und eine Haarlinie, die Schritt 01 nicht hat.

   DIE LOESUNG: Der Strich gehoert an den SCHRITT, nicht an die
   Liste. Damit hat jede Reihe ihre Linie, und jeder Punkt sitzt
   darauf — bei drei Spalten, bei zwei und bei jeder Anzahl, die
   noch kommt.

   KEIN :nth-child. Naheliegend waere `:nth-child(3n+1)` fuer den
   Zeilenanfang gewesen. Die Spaltenzahl steht aber in einer
   Variablen am Element (--cd-spalten) und aendert sich mit der
   Fensterbreite; eine fest verdrahtete Drei waere bei vier Spalten
   still falsch. Stattdessen faellt der senkrechte Trennstrich weg:
   Der Laufpunkt sagt schon, wo ein Schritt beginnt, und die Linie
   ueber jedem Schritt ist jetzt ein eigenes Stueck, das an seinem
   Punkt anfaengt. Damit haengt keine Regel mehr an einer Position.
   ============================================================ */
@media (min-width: 601px) {
  .cd-schritte--zeitstrahl .cd-schritte__liste { border-block-start: 0; }

  .cd-schritte--zeitstrahl .cd-schritte__punkt,
  .cd-schritte--zeitstrahl .cd-schritte__punkt:first-child {
    border-block-start: 2px solid var(--cd-rot);
    border-inline-start: 0;
    /* Rechts Luft statt Trennstrich: Sie setzt die Linienstuecke
       voneinander ab und laesst zugleich Platz zwischen den Spalten. */
    padding: var(--cd-a6) var(--cd-a7) var(--cd-a7) 0;
  }

  /* Der Punkt sitzt jetzt IMMER an der linken Kante seines
     Schritts — er markiert den Anfang des Stuecks. */
  .cd-schritte--zeitstrahl .cd-schritte__marke { inset-inline-start: 0; }
}

/* Am Telefon bleibt es beim senkrechten Zeitstrahl. Dort trug die
   Liste den roten Strich ueber dem ersten Schritt; da sie ihn nicht
   mehr hat, bekommt ihn der erste Schritt selbst. */
@media (max-width: 600px) {
  .cd-schritte--zeitstrahl .cd-schritte__liste { border-block-start: 0; }
  .cd-schritte--zeitstrahl .cd-schritte__punkt:first-child {
    border-block-start: 2px solid var(--cd-rot);
  }
}