/* Selectly · "De weg van één klant", compacte band (recept 19 §5b, teksten 19a §G2 en §G4).
   De vijfhoek van het beeldmerk: een gouden punt (de klant) loopt langs de rand, elke hoek licht op,
   het dossier in het midden vult zich. Hover of tik op een hoek = kaartje. Enkel tokens uit ui/merk.css.
   De lijn blijft goud; enkel de hoekmarkeringen dragen de taakkleur (merk-regel). Gedrag: ui/weg.js. */
.weg-band{position:relative;padding:clamp(80px,10vw,140px) 0;overflow:clip;background:radial-gradient(55% 60% at 72% 50%,rgba(var(--goud-rgb),.07),transparent 70%),var(--zwart-1);color:var(--tekst)}
.weg-rij{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.weg-tekst{display:grid;gap:18px;justify-items:start}
.weg-tekst h2{max-width:12ch}
.weg-tekst .lead{max-width:40ch}
.weg-lijst{list-style:none;display:grid;gap:0;width:100%;margin-top:6px}
.weg-lijst li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;padding:12px 0;border-top:1px solid var(--haar);font-size:15px;color:var(--tekst-2);transition:color .4s,opacity .4s}
.weg-lijst li .mono{grid-column:1/-1;font-size:10px;color:var(--tekst-3);margin-bottom:3px}
.weg-lijst li b{font-weight:600;color:var(--tekst)}
.weg-lijst li.aan b{color:var(--goud-licht)}
.weg-lijst li.gedimd{opacity:.45}

/* de vorm */
.weg-vorm{position:relative;width:min(100%,600px);justify-self:center;aspect-ratio:124/116}
.weg-vorm svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.weg-band stop.s1{stop-color:var(--goud-diep)}.weg-band stop.s2{stop-color:var(--goud-licht)}.weg-band stop.s3{stop-color:var(--goud)}
.weg-vlak{fill:rgba(var(--goud-rgb),.035)}
.weg-haar{fill:none;stroke:var(--haar);stroke-width:1px;vector-effect:non-scaling-stroke}
.weg-spaak{stroke:var(--haar);stroke-width:1px;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.weg-lijn,.weg-gloed{fill:none;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:var(--teken,0)}
.weg-lijn{stroke-width:.5}
.weg-gloed{stroke-width:2.2;opacity:.28;filter:blur(1.6px)}
.weg-ring{fill:var(--zwart-1);stroke:var(--tekst-3);stroke-width:1px;vector-effect:non-scaling-stroke;transition:stroke .5s,fill .5s}
.weg-ring.aan.h1,.weg-ring.aan.h2{stroke:var(--goud);fill:color-mix(in srgb,var(--goud) 25%,var(--zwart-1))}
.weg-ring.aan.h3{stroke:var(--taak-op);fill:color-mix(in srgb,var(--taak-op) 25%,var(--zwart-1))}
.weg-ring.aan.h4{stroke:var(--taak-plan);fill:color-mix(in srgb,var(--taak-plan) 25%,var(--zwart-1))}
.weg-ring.aan.h5{stroke:var(--taak-volg);fill:color-mix(in srgb,var(--taak-volg) 25%,var(--zwart-1))}
.weg-ring.pling{animation:weg-pling .8s cubic-bezier(.16,1,.3,1)}
@keyframes weg-pling{0%{r:2.2}35%{r:4.6}100%{r:2.2}}
.weg-punt{fill:var(--goud-licht)}
.weg-halo{fill:rgba(var(--goud-rgb),.25)}
.gedimd{opacity:.4}

/* dossier in het midden */
.weg-dossier{position:absolute;left:50%;top:56%;width:42%;transform:translate(-50%,-50%);display:grid;gap:5px;padding:12px 12px 10px;border-radius:16px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.3),0 24px 50px -24px rgba(0,0,0,.9);font-size:11.5px;transition:box-shadow .6s}
.weg-dossier.vol{box-shadow:inset 0 0 0 1px var(--goud),0 24px 50px -24px rgba(0,0,0,.9),0 0 40px -10px rgba(var(--goud-rgb),var(--gloed-goud))}
.weg-dossier > .mono{color:var(--goud);font-size:9.5px;margin-bottom:2px}
.weg-regel{display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px;align-items:baseline;min-height:14px;line-height:1.3}
.weg-regel span{font:500 9px/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-3)}
.weg-regel b{font-weight:500;color:var(--tekst);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity .45s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1)}
.weg-js .weg-regel:not(.vol):not(.gedimd) b{opacity:0;transform:translateY(6px)}
.weg-js .weg-regel:not(.vol):not(.gedimd)::after{content:"";grid-column:2;grid-row:1;height:7px;align-self:center;border-radius:4px;background:var(--zwart-3)}

/* hoeklabels + kaartjes */
.weg-hoek{position:absolute;left:var(--x);top:var(--y);z-index:3;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;border:0;border-radius:999px;
  background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar);color:var(--tekst);font:500 14px/1 var(--font-tekst);white-space:nowrap;cursor:pointer;
  transform:translate(-50%,-50%) translate(var(--dx,0),var(--dy,0));transition:box-shadow .3s,color .3s,background .3s}
.weg-hoek .mono{font-size:9.5px;color:var(--tekst-3);transition:color .3s}
.weg-hoek[data-n="1"]{--dy:-150%}
.weg-hoek[data-n="2"]{--dx:62%}
.weg-hoek[data-n="3"]{--dx:30%;--dy:120%}
.weg-hoek[data-n="4"]{--dx:-30%;--dy:120%}
.weg-hoek[data-n="5"]{--dx:-62%}
.weg-hoek.aan,.weg-hoek:hover,.weg-hoek:focus-visible,.weg-hoek[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--hk,var(--goud));color:var(--goud-licht)}
.weg-hoek.aan .mono,.weg-hoek:hover .mono,.weg-hoek[aria-pressed="true"] .mono{color:var(--hk,var(--goud))}
.weg-hoek[data-n="3"]{--hk:var(--taak-op)}.weg-hoek[data-n="4"]{--hk:var(--taak-plan)}.weg-hoek[data-n="5"]{--hk:var(--taak-volg)}
.weg-hoek.gedimd{opacity:.5}
.weg-kaart{position:absolute;left:var(--x);top:var(--y);z-index:4;width:min(240px,60vw);display:grid;gap:4px;padding:12px 14px;border-radius:14px;background:var(--zwart-3);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.35),0 24px 50px -20px rgba(0,0,0,.9);
  font-size:14px;line-height:1.4;color:var(--tekst);pointer-events:none;opacity:0;transform:translate(var(--kx),var(--ky)) translateY(8px);transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.weg-kaart .mono{font-size:9.5px;color:var(--goud)}
.weg-kaart.toon{opacity:1;transform:translate(var(--kx),var(--ky))}
.weg-kaart.k1{--kx:36px;--ky:-130%}
.weg-kaart.k2{--kx:-92%;--ky:28px}
.weg-kaart.k3{--kx:-55%;--ky:52px}
.weg-kaart.k4{--kx:-45%;--ky:52px}
.weg-kaart.k5{--kx:-20%;--ky:28px}
.weg-daarna{position:absolute;left:50%;top:calc(100% + 34px);transform:translateX(-50%);padding:6px 12px;border-radius:999px;background:var(--zwart-1);box-shadow:inset 0 0 0 1px var(--haar);font-size:10px;color:var(--tekst-2);white-space:nowrap;z-index:2}
.weg-focus .weg-hoek.gedimd{pointer-events:auto}

@media (min-width:960px) and (max-width:1279px){.weg-vorm{width:min(100% - 150px,520px)}}
@media (min-width:960px){.weg-lijst{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@media (max-width:959px){
  .weg-rij{grid-template-columns:minmax(0,1fr)}
  .weg-vorm{width:min(100%,460px);margin:28px auto 0;grid-row:2}
  .weg-kaart{display:none}
}
@media (max-width:560px){
  .weg-vorm{width:calc(100% - 40px)}
  .weg-hoek{height:28px;padding:0 9px;font-size:12px;gap:5px}
  .weg-hoek .mono{display:none}
  .weg-hoek[data-n="2"]{--dx:-28%;--dy:-150%}
  .weg-hoek[data-n="5"]{--dx:28%;--dy:-150%}
  .weg-dossier{width:50%;padding:8px;gap:3px;border-radius:12px}
  .weg-regel{grid-template-columns:1fr;min-height:10px}
  .weg-regel b{display:none}
  .weg-js .weg-regel:not(.vol):not(.gedimd)::after{display:none}
  .weg-regel span{position:relative;padding-left:12px}
  .weg-regel span::before{content:"";position:absolute;left:0;top:2px;width:6px;height:6px;border-radius:50%;background:var(--zwart-3);transition:background .4s}
  .weg-regel.vol span::before{background:var(--goud)}
  .weg-daarna{font-size:9px}
}
/* 28/10: het label stond tussen 03 en 04 en liep op 1024 door beide hoeken; nu onder de vorm */
@media (prefers-reduced-motion:reduce){.weg-band *{transition:none!important;animation:none!important}}

/* wereldtop r1 (M3): kaartjes 3 en 4 tonen de gsm en de agenda van de home (gekloond door ui/weg.js) */
.weg-kaart.met-mini{width:260px}
.weg-mini{position:relative;overflow:hidden;margin:2px 0 8px;border-radius:12px;background:var(--zwart-1);box-shadow:inset 0 0 0 1px var(--haar)}
.weg-mini-in{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.weg-mini-gsm{width:118px;height:150px;margin-left:auto;margin-right:auto;border-radius:18px;box-shadow:inset 0 0 0 3px #1d1c1a,0 0 0 1px var(--haar)}
.weg-mini-gsm .weg-mini-in{--gsm-b:236px;width:236px;height:300px;transform:scale(.5)}
.weg-mini-gsm .scherm{height:100%}
.weg-mini-gsm .chat{display:none}
.weg-mini-laptop{height:132px}
.weg-mini-laptop .weg-mini-in{display:block;width:464px;height:264px;font-size:12px;transform:scale(.5);background:var(--zwart-1)}
.weg-mini-laptop .wp-agenda{height:100%}
.weg-mini-laptop .wp-afspraak{opacity:1;transform:none;transition:none}
.weg-kaart.met-mini.k3,.weg-kaart.met-mini.k4{--ky:calc(-100% - 22px)}   /* hoger kaartje: boven de hoek, blijft in beeld */