.dls-wrap {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 2rem;
  align-items: center;
}

.dls-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dls-list li {
  cursor: pointer;
  margin: .35rem 0;
  text-decoration: underline;
}
.dls-list li:hover { opacity: .8; }

.dls-anim { position: relative; }
.dls-anim svg { width: 100%; height: auto; display:block; }

#dls-progress-line {
  fill: none;
  stroke: #2962ff;
  stroke-width: 12;
  stroke-linecap: butt;
  transition: stroke-dashoffset .6s ease;
  opacity: .95;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.12));

  transform-box: fill-box;     /* gebruik de eigen bbox van de ellipse */
  transform-origin: center;    /* roteer om het midden van de ellipse */
  transform: rotate(-90deg);   /* 90° tegen de klok in */
}


/* De PNG mag geen clicks blokkeren */
#dls-bg { pointer-events: none; }

/* Pijl in dezelfde kleur + dezelfde basisrotatie */

#dls-arrow { 
  pointer-events: none;         /* kliks niet blokkeren */
}
#dls-arrow-img { 
  image-rendering: auto;          /* optioneel; nette scaling */
}
#dls-arrow polygon { 
  fill: #2962ff;                /* zelfde kleur als lijn */
}

#dls-progress {
  background-size: contain !important;
/*  background-position: center; */
  background: url("/wp-content/uploads/icons/daas_arrow_circle.png") no-repeat 50%;
  overflow: visible;
}

/* Icons (SVG <image>) klikbaar */
.dls-anim image { cursor: pointer; }

/* Tekstblokken */
.dls-texts { 
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* breedte van de tekstkolom binnen de cirkel: tunen naar smaak */
  width: min(56%, 520px);
  text-align: center;
  z-index: 5;
  pointer-events: none;       /* blokkeert je SVG-iconen niet */
  margin: 0;                  /* geen extra ruimte eronder */
}
.dls-texts .dls-text { display:none; }

/* Lettertypes/spacing (tunen naar smaak) */
 .dls-texts h4{ margin:.25rem 0 .4rem; font-size:1.15rem; }
 .dls-texts p { margin:0; line-height:1.45; }

/* Kleine schermen: iets smaller & kleiner font */
@media (max-width: 640px){
 .dls-texts{ width: 70%; }
 .dls-texts h4{ font-size:1rem; }
 .dls-texts p { font-size:.95rem; }
}

#dls-veritas.step1 .dls-text.step1,
#dls-veritas.step2 .dls-text.step2,
#dls-veritas.step3 .dls-text.step3,
#dls-veritas.step4 .dls-text.step4,
#dls-veritas.step5 .dls-text.step5,
#dls-veritas.step6 .dls-text.step6,
#dls-veritas.step7 .dls-text.step7 { display:block; }

/* Simpele heading style */
.dls-text h4{ margin:.25rem 0 .5rem; font-size:1.15rem; }