.dgb-timeline {
  --dgb-max-width: 1140px;
  --dgb-gutter: 32px;
  --dgb-ink: #ffffff;
  --dgb-body-ink: #f0f3f0;
  --dgb-line: #66ff99;
  --dgb-dot: #8afc98;
  --dgb-purple: #482ff7;
  --dgb-heading-font: Arial, Helvetica, sans-serif;
  --dgb-body-font: Arial, Helvetica, sans-serif;
  --dgb-heading-size: 28px;
  --dgb-body-size: 14px;
  --dgb-body-leading: 1.4;
  --dgb-dot-size: 68px;
  --dgb-stroke: 6px;
  --dgb-photo-radius: 22px;
  --dgb-section-radius: 60px;
  --dgb-entry-length: 72px;
  --dgb-entry-dot: 20px;
  --dgb-rail-left: 8.3333333333%;
  --dgb-rail-right: 91.6666666667%;
  --dgb-first-top: 84px;
  --dgb-first-bottom: 86px;
  --dgb-second-top: 86px;
  --dgb-copy-top: 48px;
  --dgb-first-gap: 60px;
  --dgb-second-gap: 60px;
  --dgb-footer-height: 130px;
  --dgb-button-top: 54px;
  --dgb-button-height: 44px;
  --dgb-button-width: 207px;
  --dgb-dynamic-height-adjust: 0px;
  
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  color: var(--dgb-ink);
  font-family: var(--dgb-body-font);
  text-align: left;
  direction: ltr;
  container: dgb-timeline / inline-size;
}
.dgb-timeline,
.dgb-timeline *,
.dgb-timeline *::before,
.dgb-timeline *::after { box-sizing: border-box; }
.dgb-timeline .dgb-timeline__inner {
  position: relative; width: calc(100% - var(--dgb-gutter) * 2);
  max-width: var(--dgb-max-width); min-width: 0; margin-inline: auto; padding: 0;
}
.dgb-timeline .dgb-timeline__entry {
  position: absolute; z-index: 2; top: calc(0px - var(--dgb-entry-length));
  left: var(--dgb-rail-left); width: var(--dgb-stroke); height: var(--dgb-entry-length);
  transform: translateX(-50%); background: var(--dgb-line); pointer-events: none;
}
.dgb-timeline.dgb-timeline--no-entry .dgb-timeline__entry { display: none; }
.dgb-timeline .dgb-timeline__entry::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: var(--dgb-entry-dot); height: var(--dgb-entry-dot);
  border-radius: 50%; background: var(--dgb-dot); transform: translate(-50%, -50%);
}
.dgb-timeline .dgb-timeline__group {
  position: relative; display: grid; align-items: stretch; min-width: 0; gap: 0; margin: 0;
}
.dgb-timeline .dgb-timeline__group::before,
.dgb-timeline .dgb-timeline__finish::before {
  content: ""; position: absolute; z-index: 0; top: 0; bottom: calc(0px - var(--dgb-dynamic-height-adjust));
  width: var(--dgb-stroke); background: var(--dgb-line); transform: translateX(-50%); pointer-events: none;
}
/* Aangepaste rasterkolommen voor betere afstand */
.dgb-timeline .dgb-timeline__group--first {
  grid-template-columns: minmax(0, 677.5fr) minmax(0, 102.5fr) minmax(0, 360fr);
  padding: var(--dgb-first-top) 0 var(--dgb-first-bottom);
}
.dgb-timeline .dgb-timeline__group--first::before { left: var(--dgb-rail-left); }

.dgb-timeline .dgb-timeline__group:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0; bottom: calc((var(--dgb-stroke) / -2) - var(--dgb-dynamic-height-adjust));
  left: calc(var(--dgb-rail-left) - var(--dgb-stroke) / 2);
  right: calc(100% - var(--dgb-rail-right) - var(--dgb-stroke) / 2);
  height: var(--dgb-stroke); background: var(--dgb-line); pointer-events: none;
}

/* Aangepaste rasterkolommen voor betere afstand */
.dgb-timeline .dgb-timeline__group--second {
  grid-template-columns: minmax(0, 360fr) minmax(0, 105fr) minmax(0, 675fr);
  padding: calc(var(--dgb-second-top) + var(--dgb-dynamic-height-adjust)) 0 60px; /* Toegevoegde padding onderaan */
}
.dgb-timeline .dgb-timeline__group--second::before {
  left: var(--dgb-rail-right); top: calc(var(--dgb-stroke) / -2);
}
.dgb-timeline .dgb-timeline__steps {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  min-width: 0; margin: 0; padding: var(--dgb-copy-top) 0 0; list-style: none;
  gap: var(--dgb-first-gap);
}
.dgb-timeline .dgb-timeline__group--first .dgb-timeline__steps { grid-column: 1; grid-row: 1; }
.dgb-timeline .dgb-timeline__group--second .dgb-timeline__steps { grid-column: 3; grid-row: 1; }
.dgb-timeline .dgb-timeline__step { position: relative; display: grid; align-items: start; margin: 0; padding: 0; border: 0; background: none; list-style: none; }
.dgb-timeline .dgb-timeline__group--first .dgb-timeline__step { grid-template-columns: minmax(0, 95fr) minmax(0, 142.5fr) minmax(0, 440fr); }
.dgb-timeline .dgb-timeline__group--second .dgb-timeline__step { grid-template-columns: minmax(0, 400fr) minmax(0, 180fr) minmax(0, 95fr); }
.dgb-timeline .dgb-timeline__copy { min-width: 0; margin: 0; padding: 0; }
.dgb-timeline .dgb-timeline__group--first .dgb-timeline__copy { grid-column: 3; grid-row: 1; max-width: 420px; }
.dgb-timeline .dgb-timeline__group--second .dgb-timeline__copy { grid-column: 1; grid-row: 1; }
.dgb-timeline .dgb-timeline__marker { position: relative; display: block; grid-row: 1; width: 0; height: 0; margin: 0; padding: 0; }
.dgb-timeline .dgb-timeline__group--first .dgb-timeline__marker { grid-column: 1; justify-self: end; }
.dgb-timeline .dgb-timeline__group--second .dgb-timeline__marker { grid-column: 3; justify-self: start; }
.dgb-timeline .dgb-timeline__marker::after {
  content: ""; position: absolute; z-index: 2; top: 30px; left: 0;
  width: var(--dgb-dot-size); height: var(--dgb-dot-size); border-radius: 50%;
  background: var(--dgb-dot); transform: translate(-50%, -50%);
  transition: transform 0.1s linear; /* Smoothness for parallax */
  will-change: transform;
}
.dgb-timeline .dgb-timeline__copy h2 {
  margin: 0 0 16px; padding: 0; color: var(--dgb-ink); font-family: var(--dgb-heading-font);
  font-size: var(--dgb-heading-size); font-weight: 700; line-height: 1.1; overflow-wrap: break-word;
}
.dgb-timeline .dgb-timeline__copy p {
  margin: 0; padding: 0; color: var(--dgb-body-ink); font-family: var(--dgb-body-font);
  font-size: var(--dgb-body-size); font-weight: 400; line-height: var(--dgb-body-leading);
}
.dgb-timeline .dgb-timeline__copy p + p { margin-block-start: 1em; }
.dgb-timeline .dgb-timeline__photo {
  position: sticky; top: 120px; z-index: 1; display: block; align-self: start; width: 100%;
  margin: 0; padding: 0; overflow: hidden; border-radius: var(--dgb-photo-radius); background: #315c50;
  margin-bottom: 20px; /* Toegevoegde marge onder de afbeelding */
}
.dgb-timeline .dgb-timeline__photo--first { grid-column: 3; grid-row: 1; aspect-ratio: 380 / 486; }
.dgb-timeline .dgb-timeline__photo--second { grid-column: 1; grid-row: 1; aspect-ratio: 380 / 540; }
.dgb-timeline .dgb-timeline__photo img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.dgb-timeline .dgb-timeline__finish { position: relative; min-width: 0; height: var(--dgb-footer-height); margin: 0; padding: 0; }
.dgb-timeline .dgb-timeline__finish::before {
  left: var(--dgb-rail-right); bottom: auto; height: calc(var(--dgb-button-top) + var(--dgb-button-height) / 2);
}
.dgb-timeline .dgb-timeline__button {
  position: absolute; z-index: 2; top: var(--dgb-button-top); left: var(--dgb-rail-right);
  display: inline-flex; align-items: center; gap: 14px;
  /* Breedte volgt de tekst, de variabele is alleen nog de minimumbreedte */
  width: max-content; min-width: var(--dgb-button-width);
  height: var(--dgb-button-height); margin: 0; padding: 3px; border-radius: 999px;
  background: var(--dgb-purple); color: var(--dgb-dot); font-size: 15px; font-weight: 600;
  text-decoration: none; white-space: nowrap; transform: translateX(-50%); transition: box-shadow 180ms ease;
}
.dgb-timeline .dgb-timeline__button-icon {
  flex: 0 0 auto; display: grid; place-items: center; width: calc(var(--dgb-button-height) - 6px);
  height: calc(var(--dgb-button-height) - 6px); border-radius: 50%; background: var(--dgb-dot); color: var(--dgb-purple);
}
.dgb-timeline .dgb-timeline__button-icon svg { width: 20px; height: 20px; transition: transform 180ms ease; }
.dgb-timeline .dgb-timeline__button-label { padding-right: 20px; }
@media (hover: hover) {
  .dgb-timeline .dgb-timeline__button:hover { box-shadow: 0 0 0 5px rgb(138 252 152 / 17%); }
  .dgb-timeline .dgb-timeline__button:hover svg { transform: translate(1px, -1px); }
}

@container dgb-timeline (max-width: 1100px) {
  .dgb-timeline .dgb-timeline__inner {
    --dgb-heading-size: 24px; --dgb-dot-size: 54px; --dgb-stroke: 4px;
    --dgb-entry-length: 56px; --dgb-entry-dot: 16px;
    --dgb-first-top: 64px; --dgb-first-bottom: 68px; --dgb-second-top: 68px;
    --dgb-copy-top: 28px; --dgb-first-gap: 50px; --dgb-second-gap: 50px;
  }
}

@container dgb-timeline (max-width: 800px) {
  .dgb-timeline .dgb-timeline__inner {
    --dgb-gutter: 28px; --dgb-rail-left: 14px; --dgb-rail-right: 14px; --dgb-mobile-indent: 66px;
    --dgb-heading-size: 26px; --dgb-body-size: 16px; --dgb-body-leading: 1.65;
    --dgb-dot-size: 28px; --dgb-stroke: 3px; --dgb-entry-length: 44px; --dgb-entry-dot: 12px;
    --dgb-first-top: 60px; --dgb-first-bottom: 42px; --dgb-second-top: 14px; --dgb-copy-top: 0px;
    --dgb-first-gap: 42px; --dgb-second-gap: 42px; --dgb-footer-height: 80px; /* Reduced from 104px */
    --dgb-button-top: 20px; /* Reduced from 28px */ --dgb-button-height: 44px; --dgb-button-width: 190px;
  }
  .dgb-timeline .dgb-timeline__group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; padding-bottom: 10px; /* Reduced from 30px */ }
  
  /* OVERRIDE INLINE STYLE ON MOBILE */
  .dgb-timeline .dgb-timeline__group {
      --dgb-dynamic-height-adjust: 0px !important;
  }
  
  .dgb-timeline .dgb-timeline__group::before,
  .dgb-timeline .dgb-timeline__finish::before {
      bottom: 0; /* Reset dynamic height adjust on mobile as it causes extra space */
  }
  .dgb-timeline .dgb-timeline__group:not(:last-child)::after { display: none; }
  .dgb-timeline .dgb-timeline__group .dgb-timeline__steps { grid-column: 1; grid-row: 1; margin-left: var(--dgb-mobile-indent); padding-top: 0; }
  .dgb-timeline .dgb-timeline__group .dgb-timeline__step { display: block; }
  .dgb-timeline .dgb-timeline__group .dgb-timeline__copy { max-width: none; }
  .dgb-timeline .dgb-timeline__group .dgb-timeline__marker { position: absolute; top: 0; left: calc(var(--dgb-rail-left) - var(--dgb-mobile-indent)); }
  .dgb-timeline .dgb-timeline__marker::after { top: 15px; }
  .dgb-timeline .dgb-timeline__photo { grid-column: 1; grid-row: 2; width: calc(100% - var(--dgb-mobile-indent)); margin-left: var(--dgb-mobile-indent); border-radius: 20px; position: relative; top: auto; margin-bottom: 10px; /* Reduced from 30px */}
  .dgb-timeline .dgb-timeline__finish::after {
    content: ""; position: absolute; left: var(--dgb-rail-left);
    top: calc(var(--dgb-button-top) + var(--dgb-button-height) / 2 - var(--dgb-stroke) / 2);
    width: calc(var(--dgb-mobile-indent) - var(--dgb-rail-left)); height: var(--dgb-stroke); background: var(--dgb-line);
  }
  .dgb-timeline .dgb-timeline__button { left: var(--dgb-mobile-indent); transform: none; gap: 16px; font-size: 15px; }
}

@container dgb-timeline (max-width: 480px) {
  .dgb-timeline .dgb-timeline__inner {
    --dgb-gutter: 20px; --dgb-rail-left: 12px; --dgb-rail-right: 12px; --dgb-mobile-indent: 52px;
    --dgb-heading-size: 23px; --dgb-body-size: 15px; --dgb-dot-size: 24px;
    --dgb-first-top: 48px; --dgb-first-gap: 36px; --dgb-second-gap: 36px;
  }
  .dgb-timeline .dgb-timeline__marker::after { top: 13px; }
  .dgb-timeline .dgb-timeline__photo { border-radius: 17px; }
}