.containerwpg {max-width: var(--17); margin: 0 auto; }
.rowwpg {}
h3.h5.wpg {font-size: var(--h5-size); color: var(--color-3);}

.card-body.wpg-card {
  background: var(--color-4);
  border-radius: 25px;
}

.text-secondary {color: var(--color-3) !important;}
.hz-timeline-intro { color: var(--color-2);}

.containerwpg :where(ul, li, menu) {
  list-style: "";
}

  /* --- Palet & typografie (zoals je visual) --- */
  .chiq2{
    --bg: #fff;
    --text: var(--color-5);
	--title: var(--qua);
    --head: var(--color-6);
    --icon: var(--color-2);
    --gold-strong:#ad6d30;
    --line: var(--color-1);
  }
  .chiq2{ /*background:var(--bg);*/ color:var(--text); border-radius:16px; }
  .chiq2 .title{ 
    font-family: var(--koptekst-font-family, serif); font-weight:700; 
    font-size: var(--h2-size); line-height:1.05; text-align:center;
    margin:0 0 1.25rem;
     color:var(--color-6);
  }
  .chiq2 .subtitle{ font-family: var(--body-fonts); opacity:1; text-align:center; margin-bottom:2rem; max-width: 75%; margin: 0 auto 2rem; }

  /* --- Timeline layout zonder cards --- */
  .chiq2 .rail-wrap{ position:relative; }
  .chiq2 .rail{
    position:absolute; top:36px; left:0; right:0; height:2px; 
    background:var(--line); opacity:.85;
  }

  .chiq2 .steps{
    display:flex; gap:2.5rem; justify-content:space-between; align-items:flex-start;
    overflow-x:auto; scroll-snap-type:x mandatory; padding:0 .5rem 1rem;
  }
  .chiq2 .steps::-webkit-scrollbar{ height:8px; }
  .chiq2 .steps::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:10px; }

  .chiq2 .step{ 
    flex:0 0 min(320px, 80vw); scroll-snap-align:start; text-align:center; position:relative;
  }
  @media (min-width:992px){
    .chiq2 .steps{ overflow:visible; gap:3.5rem; }
    .chiq2 .step{ flex:1 1 0; }
  }

  /* Chip + icon exact als voorbeeld */
  .chiq2 .chip{
    width:96px; height:96px; border-radius:50%; margin:0 auto 1rem; position:relative; 
    display:grid; place-items:center;
    background: var(--color-3, #999);
    border:1px solid rgba(255,255,255,.08);
    box-shadow: 0 .35rem .9rem rgba(0,0,0,.35);
  }
  .chiq2 .chip i{ font-size:34px; color:var(--icon); filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
  .chiq2 .chip::after{ /* ring-achtig accent */
    content:""; position:absolute; inset:10px; border-radius:50%;
    border:2px solid var(--line);
  }

	
  .chiq2 h3{ font-weight:700; color:var(--color-2); margin:.25rem 0 .5rem; font-size: var(--h3-size); }
  .chiq2 p {  color:var(--text); opacity:.95; margin:0; }

  /* Langzame fade-in (éénmalig) */
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity 1s ease, transform 1s ease; }
  .reveal.is-visible{ opacity:1; transform:none; }
  .reveal[data-delay="1"]{ transition-delay:.25s; }
  .reveal[data-delay="2"]{ transition-delay:.5s; }
  .reveal[data-delay="3"]{ transition-delay:.75s; }
  .reveal[data-delay="4"]{ transition-delay:1s; }
  .reveal[data-delay="5"]{ transition-delay:1.25s; }
  .reveal[data-delay="6"]{ transition-delay:1.5s; }
  @media (prefers-reduced-motion:reduce){
    .reveal, .reveal.is-visible{ transition:none!important; transform:none!important; opacity:1!important; }
  }


/* ===== Mobile-first: verticale timeline (downscroll) ===== */
@media (max-width: 767.98px) {

  /* Geen horizontale rail op mobiel */
  .chiq2 .rail { display: none; }

  /* Verticale flow i.p.v. horizontale swipe */
  .chiq2 .steps {
    display: block;
    overflow: visible;           /* geen x-scroll meer */
    padding: 0 0 0 0;
    margin: 0;
  }

  /* Elke stap in 2 kolommen: chip links, tekst rechts */
  .chiq2 .step {
    position: relative;
    display: grid;
    grid-template-columns: 84px 1fr;   /* kolom voor chip + content */
    gap: .5rem 1rem;
    padding: 0 0 1.25rem 0;
    scroll-snap-align: none;           /* scroll-snap uit */
    text-align: left;
  }

  /* Chip kleiner en links uitgelijnd */
  .chiq2 .chip {
    width: 72px;
    height: 72px;
    margin: 0;               /* geen auto-center */
    grid-row: 1 / span 2;    /* chip naast kop + tekst */
    justify-self: center;
  }

  /* Kop/tekst typografie compacter */
  .chiq2 h3 { font-size: 1.25rem; margin-top: .15rem; }
  .chiq2 p  { font-size: .98rem; }
	.chiq2 .subtitle {max-width:100%;}

  /* Verticale verbindingslijn: exact door het midden van de chip */
  .chiq2 .step::before,
  .chiq2 .step::after {
    content: "";
    position: absolute;
    left: 36px;                 /* helft van 72px chip = center */
    width: 2px;
    background: var(--line);
    opacity: .85;
  }

  /* Lijn omhoog (behalve bij de eerste stap) tot aan chip-midden */
  .chiq2 .step:not(:first-child)::before {
    top: -1rem;
    bottom: calc(50% + 36px - 2px); /* eindigt net op chip-midden */
  }

  /* Lijn omlaag (behalve bij de laatste stap) vanaf chip-midden */
  .chiq2 .step:not(:last-child)::after {
    top: calc(50% + 36px + 2px);
    bottom: -1rem;
  }
}

/* ===== Tablet-portret: nog steeds verticaal voor leesrust ===== */
@media (min-width: 768px) and (max-width: 991.98px) {
  .chiq2 .rail { display: none; }
  .chiq2 .steps { display: block; overflow: visible; }
  .chiq2 .step {
    grid-template-columns: 92px 1fr;
    padding-bottom: 1.5rem;
  }
  .chiq2 .chip { width: 80px; height: 80px; }
  .chiq2 .step::before, .chiq2 .step::after { left: 40px; }
	
}

/* ===== Desktop (≥992px): blijft strak horizontaal ===== */
/* (je bestaande desktopregels laten staan) */