/* Wrapper */
.isa-timeline {
  position: relative;
  margin: 80px auto;
  max-width: 1100px;
}

/* Zentrale, durchgehende Linie im Hintergrund */
.isa-timeline-line {
  position: absolute;
  left: 50%;
  top: 15px;
  bottom: 0;
  width: 4px;
  background: #6E9F4C; /* grün */
  transform: translateX(-50%);
  z-index: 0;
}

/* Jedes Item als 3-Spalten-Grid: links | Mitte (Marker) | rechts */
.isa-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 48px 1fr; /* 48px Platz für Marker + Linie */
  align-items: start;
  gap: 32px;
  margin: 56px 0;
  z-index: 1; /* über der Linie */
}

/* Spalten */
.isa-tl-col.left,
.isa-tl-col.right {
  min-width: 0; /* verhindert Overflow bei langen Worten */
}

/* Bild (links oder rechts, je nach Item) */
.isa-timeline-img {
  display: block;
  width: 100%;
  border-radius: 18px;
}

/* Textkarte */
.isa-tl-card {
}
.isa-tl-card h3 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  color: #3E7D3A;
}
.isa-tl-card p {
  margin: 0;
  font-size: 1rem;
}

/* Mittlere Spalte: Marker sitzt über der Linie */
.isa-tl-mid {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.isa-tl-marker {
  width: 38px;
  height: 38px;
  background: url('/wp-content/themes/isa/assets/img/icons/isa-apfel.svg') no-repeat center/contain;
  display: inline-block;
}

.isa-timeline-editor .isa-empty{ opacity: .7; font-style: italic; }

/* ------------------ Responsive ------------------ */
@media (max-width: 768px) {
  .isa-timeline {
    margin: 48px auto;
  }

  /* Mobile: alles untereinander, keine mittlere Spalte */
  .isa-timeline-item {
    grid-template-columns: 1fr; /* eine Spalte */
    gap: 18px;
    margin: 40px 0;
  }
  .isa-tl-mid { display: none; }       /* Marker ausblenden (oder unterhalb anzeigen) */
  .isa-timeline-line { display: none; } /* vertikale Linie ausblenden */
  
  /* Optional: auf Mobile immer "Bild über Text" */
  .isa-tl-col.left, .isa-tl-col.right { order: unset; }

  .isa-timeline-item:nth-child(odd) .isa-tl-col.left {
    order: 3;
  }


  .isa-timeline-item:nth-child(odd) .isa-tl-col.right {
    order: 1;
  }
}