/* ===== Container & Mittellinie ===== */
#timeline_vertical {
  padding: 50px 0;
  background-color: var(--color-topnav-bg);
}
#timeline_vertical h1 {
  text-align: center;
  color: #fff;
  margin-bottom: 30px;
  font-weight: 300;
}
.timeline_vertical {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.timeline_vertical::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 4px;
  background: #fff;
}

/* ===== Event-Boxen ===== */
.event_vertical {
  position: relative;
  width: calc(50% - 40px);
  margin-bottom: 40px;
  color: #3c8731;
}
.event_vertical:nth-child(odd) {
  float: left; clear: both;
  text-align: right;
}
.event_vertical:nth-child(even) {
  float: right; clear: both;
  text-align: left;
}
.event_vertical.now_vertical {
  width: 100%;
  float: none;
  margin: 0 auto 40px;
  text-align: center;
}

/* ===== Kopf & Body ===== */
.head_event_vertical {
  background: #3c8731;
  color: #fff;
  padding: 20px;
  border-radius: 4px 4px 0 0;
}
.number-box_vertical {
  float: left;
  min-width: 50px; 
  min-height: 50px;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: bold;
  margin-right: 15px;
  padding: 5px;
}
.head_event_vertical h2 {
  margin: 0; font-size: 1.6rem;
  text-transform: uppercase; line-height: 1.2;
}
.head_event_vertical .small_vertical {
  display: block; font-size: 0.9rem;
  opacity: 0.8; margin-top: 4px;
}
.body_event_vertical {
  background: #fff;
  padding: 20px;
  border-radius: 0 0 4px 4px;
  color: #000;
  text-align: left;
}

/* ===== Connector-Linie (weiß) ===== */
.event_vertical::before {
  content: "";
  position: absolute;
  top: 50%;
  height: 4px; width: 40px;
  background: #fff;
  z-index: 1;
}
.event_vertical:nth-child(odd)::before {
  left: 100%;           /* startet an rechter Box-Kante */
  transform: translateY(-50%);
}
.event_vertical:nth-child(even)::before {
  right: 100%;          /* startet an linker Box-Kante */
  transform: translateY(-50%);
}

/* ===== Kreis-Icon ===== */
.event_vertical::after {
  content: "\f06c";               /* FontAwesome Leaf */
  /* Updated to FA6 font family for compatibility with CDN */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  width: 34px; height: 34px;
  background: #3c8731;
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.event_vertical:nth-child(odd)::after {
  left: calc(100% + 20px);        /* 20px = Hälfte Connector */
  transform: translateY(-50%);
}
.event_vertical:nth-child(even)::after {
  right: calc(100% + 20px);
  transform: translateY(-50%);
}

/* ===== HEUTE-Event ausblenden ===== */
.event_vertical.now_vertical::before,
.event_vertical.now_vertical::after {
  display: none;
}

/* ===== Text linksbündig ===== */
.head_event_vertical,
.body_event_vertical,
.head_event_vertical h2,
.body_event_vertical p {
  text-align: left;
}
/* ===== Responsives Verhalten ===== */
@media (max-width: 720px) {
  /* Mittellinie ausblenden */
  .timeline_vertical::before {
    display: none;
  }

  /* Alle Events in voller Breite, zentriert */
  .event_vertical,
  .event_vertical.now_vertical {
    width: calc(100% - 40px) !important;
    float: none !important;
    margin: 0 auto 40px !important;
    padding: 0 20px !important;
    text-align: left !important;
  }

  /* Connector & Kreis ausblenden */
  .event_vertical::before,
  .event_vertical::after {
    display: none !important;
  }

  /* Nummern-Box und Datum weiterhin sichtbar */
  .number-box_vertical {
    float: none;
    margin: 0 auto 15px;
  }
}