.timeline {
  max-width: 1000px;
  margin: 40px auto;
  position: relative;
  padding: 0 20px;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0; bottom:0;
  left: 50%;
  width: 4px;
  background: #e94d09;
  transform: translateX(-50%);
  z-index: 1;
}

.timeline-item {
  position: relative;
  width: 50%;
  padding: 20px 40px;
  box-sizing: border-box;
}

.timeline-item.left::before, .timeline-item.right::before {
  content: '';
  position: absolute;
  top: 35px;
  right: -30px;
  width: 30px; height: 30px;
  background: #e94d09;
  border-radius: 50%;
  border: 8px solid #fff;
  box-shadow: 0 0 0 2px #e94d09;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
	opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.timeline-item.right::before {
  left: 0;
}
.timeline-item.left {
  left: 0;
  text-align: right;
}

.timeline-item.right {
  left: 50%;
  text-align: left;
}

.timeline-item .content {
  background: #f7f7f7;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  position: relative;
	font-size:1.2em;
  /* Start unsichtbar und verschoben - Animation auf content */
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.timeline-item.left .content {
  transform: translateX(-120px);
}

.timeline-item.right .content {
  transform: translateX(120px);
}

.timeline-item.visible .content {
  opacity: 1;
  transform: translateX(0);
}

.timeline-item .date {
  font-weight: bold;
  font-size: 2em;
  color: #e94d09;
  margin-bottom: 8px;
	 opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.timeline-item.visible .date {
  opacity: 1;
  transform: translateY(0);
}
.timeline-item.left.visible::before, .timeline-item.right.visible::before {
  opacity: 1;
}
/* Responsive */
@media(max-width: 768px) {
  .timeline-item,
  .timeline-item.left,
  .timeline-item.right {
    width: 100%;
    left: 0 !important;
    text-align: left !important;
  }
  .timeline-item .content {
    transform: none !important;
    opacity: 1 !important;
  }
  .timeline-item::before {
    left: -3px !important;
    transform: none !important;
  }
  .timeline::before {
    left: 30px;
    transform: none;
  }
	.timeline-item .date {
  font-size: 1.4em;
}
}