
.sb-stromen{width:100%;background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:24px;padding:var(--sv-s4);container-type:inline-size}
.dr-fase{font-size:13px;font-weight:600;color:var(--sv-merk-tekst);background:var(--sv-merk-licht);display:inline-block;padding:6px 12px;border-radius:999px;margin-bottom:var(--sv-s2)}
.dr-schema{position:relative;display:grid;grid-template-columns:max-content 1fr max-content;align-items:center;column-gap:var(--sv-s5);padding:var(--sv-s3) 0}
.dr-lijnen{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.dr-lijnen path{fill:none;stroke:var(--sv-merk);stroke-width:2.2;stroke-linecap:round;transition:stroke-dashoffset .8s var(--sv-ease)}
.dr-lijnen path.uit{stroke:var(--sv-accent);stroke-width:3}
.dr-kol{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--sv-s3)}
.dr-midden{align-items:center}
.dr-bron{background:var(--sv-papier);border:1px solid var(--sv-lijn-sterk);border-radius:14px;padding:var(--sv-s2) var(--sv-s3);font-weight:600;font-size:16px;line-height:1.3;white-space:nowrap;box-shadow:0 6px 16px -10px rgba(14,26,24,.2);opacity:.3;transition:opacity .45s,border-color .45s,box-shadow .45s}
.dr-bron.aan{opacity:1;border-color:var(--sv-merk);box-shadow:0 10px 24px -14px rgba(14,74,71,.4)}
.dr-kern{width:136px;height:136px;border-radius:50%;background:var(--sv-merk);color:var(--sv-op-merk);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--sv-s2);gap:4px}
.dr-kern b,.dr-ai b{font-size:17px}
.dr-kern span{font-size:14px;line-height:1.3;opacity:.85}
.dr-ai{max-width:190px;background:linear-gradient(160deg,var(--sv-merk),var(--sv-merk-donker));color:var(--sv-op-merk);border-radius:16px;padding:var(--sv-s3);display:flex;flex-direction:column;gap:6px;box-shadow:0 20px 40px -20px rgba(14,26,24,.5)}
.dr-ai span{font-size:14px;line-height:1.3;color:var(--sv-accent)}
.dr-kern,.dr-ai{opacity:.15;transform:scale(.92);transition:opacity .5s,transform .5s}
.dr-kern.aan,.dr-ai.aan{opacity:1;transform:none}
@container (max-width:560px){
  .dr-schema{grid-template-columns:max-content 1fr;column-gap:var(--sv-s3);row-gap:var(--sv-s5)}
  .dr-bronnen{gap:var(--sv-s2)}
  .dr-kern{width:116px;height:116px}
  .dr-eind{grid-column:1 / -1;align-items:center}
  .dr-ai{max-width:none;text-align:center}
  .dr-bron{font-size:15px;padding:12px var(--sv-s2)}
}
@media (max-width:700px){.sb-stromen{padding:var(--sv-s3)}}
