/* Per item: rail links waar de dot in zit */
.vt-timeline-item{
  position: relative;
}

/* Positioneer rail exact zoals Relume: links van content, groter op md */
.vt-timeline-rail{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 2rem;            /* w-8 */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Lijntje achter de dot (alle items behalve de laatste) */
.vt-timeline-item:not(:last-child) .vt-timeline-rail::after{
  content: "";
  position: absolute;
  top: calc(1.75rem + 1rem + 0.5rem); /* onder de dot */
  bottom: -3.5rem; /* over de gap naar volgende item */
  width: 3px;
  background: #000;
  opacity: 0.15; /* lichte lijn */
}

@media (min-width: 768px){
  .vt-timeline-rail{
    left: -6rem;          /* md:-ml-24 effect */
    width: 6rem;          /* md:w-24 */
  }
}

@media (min-width: 1024px){
  .vt-timeline-rail{
    left: -8rem;          /* lg:-ml-32 effect */
    width: 8rem;          /* lg:w-32 */
  }
}

/* De bol (met witte ring) */
.vt-timeline-dot{
  margin-top: 1.75rem;    /* mt-7 */
  width: 1rem;            /* size-4 */
  height: 1rem;
  border-radius: 9999px;
  background: #ccc;       /* startkleur */
  box-shadow: 0 0 0 8px #fff; /* witte ring */
  z-index: 20;
}

@media (min-width: 768px){
  .vt-timeline-dot{
    margin-top: 2rem;      /* md:mt-8 */
  }
}



:root{
  --vt-pink:#E6007E;
  --vt-orange:#F18700;  /* enkel voor verloop */
  --vt-black:#000000;
  --vt-ink: rgba(0,0,0,.78);
  --vt-line: rgba(0,0,0,.14);
  --vt-card: rgba(255,255,255,.78);
}

/* Section achtergrond: subtiel Voltina verloop (mag in verschillende richtingen) */
.vt-section{
  position: relative;
  background:
    radial-gradient(1200px 700px at 10% 0%, rgba(230,0,126,.14), transparent 60%),
    radial-gradient(900px 600px at 85% 25%, rgba(241,135,0,.12), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 65%, rgba(230,0,126,.04) 100%);
}

/* Typografie */
.vt-tagline{ color: var(--vt-pink); letter-spacing:.02em; }
.vt-heading{ color: var(--vt-black); }
.vt-subheading{ color: var(--vt-black); }
.vt-date{ color: var(--vt-black); }
.vt-body{ color: var(--vt-black); opacity:.82; }

/* Buttons */
.vt-btn-secondary{
  background: rgba(255,255,255,.72);
  border-color: rgba(0,0,0,.18);
  color: var(--vt-black);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  text-decoration: none;
    font-weight: 600;
}
.vt-btn-secondary:hover{
  border-color: rgba(230,0,126,.45);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}
.vt-btn-secondary:focus-visible{
  box-shadow: 0 0 0 4px rgba(230,0,126,.18);
}

.vt-btn-link{
  color: var(--vt-pink);
  font-weight: 700;
}
.vt-btn-link:hover{
  color: var(--vt-black);
}

/* Timeline item: rail links waar de dot in zit */
.vt-timeline-item{ position: relative; }

/* Rail position blijft zoals je had */
.vt-timeline-rail{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 2rem;            /* w-8 */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Lijntje achter dot: subtiel zwart (huisstijl) */
.vt-timeline-item:not(:last-child) .vt-timeline-rail::after{
  content: "";
  position: absolute;
  top: calc(1.75rem + 1rem + 0.5rem);
  bottom: -3.5rem;
  width: 3px;
  background: var(--vt-line);
}

/* Responsive offsets blijven */
@media (min-width: 768px){
  .vt-timeline-rail{ left: -6rem; width: 6rem; }
}
@media (min-width: 1024px){
  .vt-timeline-rail{ left: -8rem; width: 8rem; }
}

/* Dot: start “zacht magenta”, eind “zwart” met witte ring */
.vt-timeline-dot{
  margin-top: 1.75rem;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: rgba(230,0,126,.28);
  box-shadow:
    0 0 0 8px rgba(255,255,255,.92),
    0 10px 22px rgba(0,0,0,.10);
  z-index: 20;
}
@media (min-width: 768px){
  .vt-timeline-dot{ margin-top: 2rem; }
}