:root {

  --dot-size: 0.85rem;
  --dot-size-active: 1.25rem;

  --card-min: 20rem;
  --card-max: 26rem;

  --card-translate: 0;
  --dot-scale: 1;

}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}

.site-header {
  text-align: center;
  padding: 2rem 1rem;
}

/* Timeline */
#timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  max-width: 900px;
  margin-inline: auto;
}

#timeline-line {
  position: absolute;
  top: 0;
  bottom: 10%;
  left: 50%;
  width: 0.15rem;
  background: var(--primary);
  opacity: 40%;
  transform: translateX(-50%);
  z-index: 0;
}

#timeline-arrow {
  position: absolute;
  border-style: solid;
  border-width: 0 1rem 1rem 1rem;
  border-color: transparent transparent var(--primary) transparent;
  transform: translateX(-47%) translateY(-10%);
}

/* Milestones Container */
.milestone {
  position: relative;
  width: 50%;
  /* nur halbe Breite */
  padding: 2rem 0;
  box-sizing: border-box;
  z-index: 1;
}

/* Punkte (immer an der Mittellinie) */
.milestone .dot {
  position: absolute;
  top: 50%;
  left: 100%;
  /* rechts an der Box-Kante, also an der Mittellinie */
  transform: translate(-50%, -50%);
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 0.01rem rgba(106, 166, 255, .25);
  transition: transform .3s ease, box-shadow .3s ease;
}

/* Karten */
.milestone .card {
  background: var(--overlay);
  padding: 1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  transition: transform 0.3s ease;
}

.card h3 {
  margin-top: 0;
  color: var(--primary);
}

.milestone iframe {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Quicklinks */
.quicklinks {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.quicklinks a {
  text-decoration: none;
  color: var(--primary);
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius);
}

.quicklinks a:hover {
  background: var(--primary);
  color: var(--bg);
}

/*fancy version for big displays*/
@media (min-width: 676px) {
  .milestone .card {
    max-width: var(--card-max);
    min-width: var(--card-min);
  }

  .milestone iframe {
    width: 16rem;
    height: 9rem;
  }

  /* linke Seite */
  .milestone:nth-child(odd) {
    left: 0;
    text-align: right;
  }

  .milestone:nth-child(odd) .dot {
    left: 100%;
    /* Punkt an rechter Kante */
  }

  .milestone:nth-child(odd) .card {
    margin-right: calc(var(--dot-size-active)/2);
    margin-left: auto;
  }

  /* rechte Seite */
  .milestone:nth-child(even) {
    left: 50%;
    text-align: left;
  }

  .milestone:nth-child(even) .dot {
    left: 0;
    /* Punkt an linker Kante */
  }

  .milestone:nth-child(even) .card {
    margin-left: calc(var(--dot-size-active)/2);
    margin-right: auto;
  }

  /* Hover-Effekt */
  .milestone:nth-child(odd):hover .card {
    transform: translateX(calc(var(--card-translate) * -1rem)) scale(1.08);
  }

  .milestone:nth-child(even):hover .card {
    transform: translateX(calc(var(--card-translate) * 1rem)) scale(1.08);
  }

  .milestone:hover .dot {
    transform: translate(-50%, -50%) scale(var(--dot-scale));
    box-shadow: 0 0 0 6px rgba(106, 166, 255, .35);
  }
}

/*mobile styling*/
@media (max-width: 675px) {

  #timeline-list {
    padding-top: 2rem;
  }

  .dot {
    display: none;
  }

  .milestone {
    width: 100%;
    padding: 1rem 0;
    align-content: center;
  }

  .milestone .card {
    height: auto;
    margin: 0;
    text-align: center;
  }

  .milestone iframe {
    width: 100%;
    height: auto;
  }
}