/* HetWerkt.net — integraties: het netwerk en het overzicht */

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.int-link{color:var(--lila);text-decoration:underline;text-decoration-color:rgba(205,191,255,.35);text-underline-offset:3px;transition:color .3s}
.int-link:hover{color:var(--tekst)}
.int-totaal{font-variant-numeric:tabular-nums}

/* ───────── Het netwerk ───────── */
.netwerk{height:clamp(540px,80vh,780px);overflow:hidden;isolation:isolate;
  background:
    radial-gradient(ellipse 46% 52% at 50% 50%,rgba(255,122,26,.07),transparent 70%),
    radial-gradient(ellipse 80% 75% at 50% 50%,rgba(74,31,184,.3),transparent 72%),
    var(--glas);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.netwerk::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background-image:radial-gradient(rgba(205,191,255,.11) 1px,transparent 1.4px);background-size:28px 28px;background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,#000,transparent 78%);mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,#000,transparent 78%)}
.netwerk canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block;touch-action:pan-y;cursor:default}
.netwerk.is-boven canvas{cursor:grab}
.netwerk.is-sleept canvas{cursor:grabbing}

.netwerk-hud{position:absolute;left:20px;top:18px;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;pointer-events:none;
  font:500 .7rem var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--tekst-zacht);max-width:calc(100% - 150px)}
.netwerk-live{display:inline-flex;align-items:center;gap:9px}
.netwerk-live.is-nieuw span{color:var(--oranje)}
.netwerk-live span{transition:color .4s}
.netwerk-tel{color:var(--tekst-dof);font-variant-numeric:tabular-nums}
.netwerk-acties{position:absolute;right:14px;top:12px;z-index:3}
.netwerk-acties .knop{font-size:.8rem;padding:.5em 1em}
.netwerk-hint{position:absolute;left:0;right:0;bottom:18px;z-index:3;text-align:center;pointer-events:none;
  font-size:.82rem;color:var(--tekst-dof);transition:opacity .8s}
.netwerk-hint.is-weg{opacity:0}

/* Het kaartje bij een knooppunt */
.netkaart{position:absolute;left:0;top:0;z-index:4;width:272px;padding:18px 20px 18px;border-radius:16px;
  background:rgba(10,5,22,.9);border:1px solid rgba(255,122,26,.34);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 24px 70px -18px rgba(0,0,0,.9),0 0 50px -18px var(--oranje-gloed);
  display:flex;flex-direction:column;gap:8px;animation:kaartIn .45s var(--zacht)}
.netkaart[hidden]{display:none}
@keyframes kaartIn{from{opacity:0;filter:blur(6px)}}
.netkaart .label:empty,.netkaart h3:empty{display:none}
.netkaart h3{font-size:1.22rem;font-weight:700;letter-spacing:-.03em;line-height:1.15;padding-right:26px;overflow-wrap:anywhere}
.netkaart-status{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.92rem;color:var(--tekst)}
.netkaart-zin{color:var(--tekst-zacht);font-size:.93rem;line-height:1.5}
.netkaart-link{align-self:flex-start;margin-top:4px;font-size:.84rem;font-weight:600;color:var(--lila);display:inline-flex;gap:.5em;transition:color .3s,gap .4s var(--zacht)}
.netkaart-link::after{content:"→"}
.netkaart-link:hover{color:var(--tekst);gap:.85em}
.netkaart-sluit{position:absolute;right:8px;top:8px;width:30px;height:30px;border-radius:50%;font-size:1.2rem;line-height:1;color:var(--tekst-dof);transition:color .25s,background .25s}
.netkaart-sluit:hover{color:var(--tekst);background:rgba(255,255,255,.08)}

@media (max-width:640px){
  .netwerk{height:clamp(520px,82svh,640px)}
  .netwerk-hud{left:14px;top:14px;font-size:.62rem;max-width:calc(100% - 120px)}
  .netwerk-acties{right:10px;top:8px}
  .netkaart{left:10px;right:10px;bottom:10px;top:auto;width:auto;transform:none!important;animation-name:kaartOp}
  @keyframes kaartOp{from{opacity:0;translate:0 14px}}
  .netwerk-hint{bottom:12px;font-size:.78rem}
}

/* ───────── Filter ───────── */
.intfilter{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:56px;padding:14px 16px}
.intfilter-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;min-width:0}
.intchip{display:inline-flex;align-items:center;gap:.55em;padding:.5em .95em;border-radius:99px;border:1px solid var(--glas-rand);
  font-size:.86rem;font-weight:600;color:var(--tekst-zacht);white-space:nowrap;transition:color .25s,background .25s,border-color .25s}
.intchip small{font:500 .68rem var(--mono);color:var(--tekst-dof);font-variant-numeric:tabular-nums;transition:color .25s}
.intchip:hover{color:var(--tekst);border-color:rgba(143,107,255,.6)}
.intchip[aria-pressed=true]{background:var(--tekst);border-color:var(--tekst);color:#000}
.intchip[aria-pressed=true] small{color:#4b4460}
.intzoek{position:relative;flex:0 1 260px;min-width:180px}
.intzoek svg{position:absolute;left:14px;top:50%;width:16px;height:16px;transform:translateY(-50%);fill:none;stroke:var(--tekst-dof);stroke-width:1.7;stroke-linecap:round;pointer-events:none}
.intzoek input{width:100%;font:500 .92rem var(--font);color:var(--tekst);padding:.68em 1em .68em 2.6em;border-radius:99px;border:1px solid var(--glas-rand);background:rgba(0,0,0,.5);
  transition:border-color .3s,box-shadow .3s;-webkit-appearance:none;appearance:none}
.intzoek input::placeholder{color:var(--tekst-dof)}
.intzoek input:focus{outline:none;border-color:var(--paars-licht);box-shadow:0 0 0 4px rgba(143,107,255,.18)}
.intzoek input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.inttelling{margin:18px 4px 14px;font-size:.85rem;color:var(--tekst-zacht);font-variant-numeric:tabular-nums;min-height:1.4em}
@media (max-width:760px){
  .intfilter{padding:12px}
  .intfilter-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -12px;padding:0 12px 2px;scrollbar-width:none;flex-basis:100%}
  .intfilter-chips::-webkit-scrollbar{display:none}
  .intzoek{flex:1 1 100%}
}

/* ───────── Tegels ───────── */
.inttegels{align-items:stretch}
.inttegel{text-align:left;padding:20px 20px 18px;gap:0;cursor:pointer;opacity:0;
  transition:transform .5s var(--zacht),border-color .3s,box-shadow .4s}
.inttegel[hidden]{display:none}
.inttegels.is-gestart .inttegel{animation:tegelIn .7s var(--zacht) both;animation-delay:calc(var(--d,0)*32ms)}
@keyframes tegelIn{from{opacity:0;transform:translateY(16px) scale(.97);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.inttegel:hover{transform:translateY(-3px);border-color:rgba(143,107,255,.5)}
.inttegel:focus-visible{border-radius:var(--radius)}
.inttegel-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:16px}
.inttegel svg{width:44px;height:44px;flex:none;overflow:visible;padding:6px;border-radius:13px;background:rgba(10,5,22,.8);border:1px solid var(--glas-rand)}
.inttegel svg .gl-gloed{opacity:.22;transition:opacity .4s}
.inttegel:hover svg .gl-gloed{opacity:.6}
.inttegel h3{font-size:1.06rem;font-weight:700;letter-spacing:-.025em;line-height:1.2;overflow-wrap:anywhere}
.inttegel .label{margin-top:5px}
.intstatus{display:inline-flex;align-items:center;gap:8px;padding:5px 10px 5px 9px;border-radius:99px;border:1px solid var(--glas-rand);
  font:500 .66rem var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--tekst-zacht);white-space:nowrap}
.intstatus .statuslamp{width:6px;height:6px}
@media (max-width:640px){
  .inttegels{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .inttegel{padding:14px 14px 14px}
  .inttegel-kop{flex-direction:column;gap:12px;margin-bottom:12px}
  .inttegel h3{font-size:.98rem}
}

.int-verder{margin-top:54px}