/* Block «Zeitstrahl» — Raster wie «Text» (Titel links, .gw-text__innen/-titel aus text.css), rechts eine senkrechte Zeitleiste */

.gw-zeitstrahl { background: var(--weiss); padding-block: var(--sektion); }
.gw-zeitstrahl--grau { background: var(--hellgrau); }

/* Zwei Blöcke gleicher Farbe hintereinander teilen sich den Abstand (wie bei «Text») */
.gw-intro + .gw-zeitstrahl:not(.gw-zeitstrahl--grau),
.gw-text:not(.gw-text--grau) + .gw-zeitstrahl:not(.gw-zeitstrahl--grau),
.gw-zeitstrahl--grau + .gw-zeitstrahl--grau { padding-top: 0; }

.gw-zeitstrahl__liste {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Die Linie läuft je Eintrag durch; beim letzten endet sie am Punkt */
.gw-zeitstrahl__liste > li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xxs);
  margin-left: 8px;
  padding: 0 0 var(--abstand-xxl) var(--abstand-xl);
  border-left: 2px solid var(--hellgruen-500);
}
.gw-zeitstrahl__liste > li:last-child { padding-bottom: 0; border-left-color: transparent; }

/* Jahr gross in der Titelschrift (wie .gw-h3); der Punkt sitzt auf der Mitte der ersten Zeile */
.gw-zeitstrahl__jahr {
  position: relative;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + 0.4vw, var(--text-md));
  line-height: 1.2;
  letter-spacing: var(--sperrung-titel);
  color: var(--dunkelgruen-700);
}
.gw-zeitstrahl__jahr::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: calc(-1 * (var(--abstand-xl) + 9px));
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--dunkelgruen-600);
  transform: translateY(-50%);
  /* Ring in der Blockfarbe: der Punkt wirkt aus der Linie ausgestanzt */
  box-shadow: 0 0 0 4px var(--weiss);
}
.gw-zeitstrahl--grau .gw-zeitstrahl__jahr::before { box-shadow: 0 0 0 4px var(--hellgrau); }

.gw-zeitstrahl__name {
  font-size: var(--text-xs-s);
  font-weight: 700;
  line-height: 1.3;
  color: var(--schwarz);
  overflow-wrap: break-word;
}

/* Text Inter wie .gw-zeilen span */
.gw-zeitstrahl__text {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: #111827;
  overflow-wrap: break-word;
}

/* Untereinander: Titel über der Liste, wie bei «Text» (gap und Richtung kommen aus text.css) */
@media (max-width: 900px) {
  .gw-zeitstrahl__liste > li { padding-bottom: var(--abstand-xl); }
}