/* 1) Timeline-Container + vertikale Mittellinie */
.timeline {
  position: relative;
  max-width: 1100px;
  margin: 2rem auto;
  padding: 2rem 1rem;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: #ccc;
  transform: translateX(-50%);
}

/* 2) Jede Zeile: 3 Spalten × 2 Reihen */
.timeline-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 1rem;
  row-gap: 1rem;
  margin-bottom: 3rem;
}

/* 3) Bild-Container */
.image {
  overflow: hidden;
}
.image.left  { grid-column: 1; grid-row: 1; justify-self: end; }
.image.right { grid-column: 3; grid-row: 1; justify-self: start; }
.image img {
  display: block;
  width: 100%;
  height: auto;
}

/* 4) Text-Container */
.text.left  { grid-column: 1; grid-row: 2; text-align: right; max-width: 450px; justify-self: end; }
.text.right { grid-column: 3; grid-row: 2; text-align: left;  max-width: 450px; justify-self: start; }
.text p { line-height: 1.5; }

/* 5) Spacer in der Mitte (Row 2, Col 2) */
.spacer { grid-column: 2; grid-row: 2; }

/* 6) Jahres-Box in Row 1, Col 2, vertikal zum Bild zentriert */
.year {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: center; /* zentriert in Zeile 1 = Mitte des Bildes */
  position: relative;
}
.year span {
  background: #006fb5;
  color: #fff;
  display: inline-block;
  padding: .4rem .8rem;
  font-weight: bold;
  border-radius: .2rem;
  position: relative;
  z-index: 1;
}
/* Quer-Verbindung */
.year span::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 2px;
  background: #ccc;
}
.timeline-row:nth-child(odd)  .year span::after { right: 100%; }
.timeline-row:nth-child(even) .year span::after {
  left: 100%;
  background: #ccc;
}

.jahrmobile
{
display:none;
}

/* 7) Responsive (≤600px): einspaltig, Jahr→Bild→Text */
@media (max-width: 600px) {
.text.left {

  text-align: left;

}
  .jahrmobile
{
  background: #006fb5;
  color: #fff;
  display: inline-block;
  padding: .4rem .8rem;
  font-weight: bold;
  border-radius: .2rem;
  position: relative;
  z-index: 1;
  width: 100%;
}
  .timeline { padding: 1rem; }
  .timeline::before { display: none; }
  .timeline-row {
    display: block;
    margin-bottom: 2rem;
  }
  .year {
  display:none;
    position: static;
    margin-bottom: 1rem;
    text-align: center;
  }
  .year span::after { display: none; }
  .image, .text {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: auto;
    text-align: center;
    max-width: 100%;
    margin: 0 auto 1rem;
  }
}



/* timeline */