/* --- lokale fonts --- */
  @font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url('fonts/archivo-variable-latin.woff2') format('woff2-variations')}
  @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-v23-latin-regular.woff2') format('woff2')}
  @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-v23-latin-500.woff2') format('woff2')}
  @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-v23-latin-600.woff2') format('woff2')}
  @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-v20-latin-regular.woff2') format('woff2')}
  @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-v20-latin-500.woff2') format('woff2')}
  @font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/caveat-v23-latin-regular.woff2') format('woff2')}


  :root{
    --ink:#16232e;
    --paper:#f5f7f6;
    --card:#ffffff;
    --steel:#46606f;
    --signal:#1fa97c;
    --signal-soft:#e2f3ec;
    --line:#d9e0df;
    --mono:'IBM Plex Mono',monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'IBM Plex Sans',system-ui,sans-serif;
    background:var(--paper);
    color:var(--ink);
    line-height:1.6;
    font-size:17px;
  }
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(245,247,246,.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
  .logo{font-family:'Archivo',sans-serif;font-weight:800;font-stretch:110%;font-size:1.15rem;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
  .logo span{color:var(--signal)}
  nav a{color:var(--steel);text-decoration:none;margin-left:18px;font-size:.88rem;font-weight:500}
  nav a:not(.btn):not(.btn-lab){border-bottom:2px solid transparent;padding-top:4px;padding-bottom:1px;transition:color .15s ease,border-color .18s ease}
  nav a:hover,nav a:focus-visible{color:var(--ink)}
  nav a:not(.btn):not(.btn-lab):hover,nav a:not(.btn):not(.btn-lab):focus-visible{border-color:var(--signal)}
  a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
  .nav-links{display:flex;align-items:center}

  /* taalknop bovenbalk: vlag + taalcode, links van de Contact-knop */
  .taal-e{display:inline-flex;align-items:center;gap:6px;margin-left:18px;
    font-family:var(--mono);font-size:.74rem;letter-spacing:.04em}
  .taal-e svg{width:20px;height:14px;border-radius:2px;display:block;
    box-shadow:0 0 0 1px rgba(22,35,46,.18)}
  /* taalknop in het mobiele menu */
  .mobile-menu a.taal-m{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;
    font-size:1rem;font-weight:500;color:var(--steel);border-bottom:none;margin-top:20px;padding:10px 0}
  .mobile-menu a.taal-m svg{width:28px;height:19px;border-radius:3px;
    box-shadow:0 0 0 1px rgba(22,35,46,.18);flex:none}

  /* ---------- hero ---------- */
  .hero{padding:88px 0 72px;display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:end}
  .status-eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--mono);font-size:.8rem;color:var(--steel);
    background:var(--card);border:1px solid var(--line);border-radius:999px;
    padding:6px 14px;margin-bottom:26px;
  }
  .dot{width:8px;height:8px;border-radius:50%;background:var(--signal);position:relative}
  .dot::after{
    content:"";position:absolute;inset:-4px;border-radius:50%;
    border:2px solid var(--signal);opacity:0;
    animation:pulse 2.4s ease-out infinite;
  }
  @keyframes pulse{0%{transform:scale(.6);opacity:.7}70%{transform:scale(1.4);opacity:0}100%{opacity:0}}
  h1{
    font-family:'Archivo',sans-serif;font-weight:800;font-stretch:115%;
    font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.08;letter-spacing:-.02em;
    margin-bottom:22px;
  }
  h1 em{font-style:normal;color:var(--signal)}
  .hero p{color:var(--steel);max-width:46ch;margin-bottom:32px}
  .cta-row{display:flex;gap:14px;flex-wrap:wrap}
  .btn{
    display:inline-block;padding:13px 26px;border-radius:8px;
    font-weight:600;font-size:.98rem;text-decoration:none;
    transition:transform .15s ease,box-shadow .15s ease;
  }
  .btn-primary{background:var(--signal);color:#fff}
  .btn-primary:hover{background:transparent;color:var(--signal);box-shadow:inset 0 0 0 2px var(--signal)}
  .btn-ghost{border:1px solid var(--line);color:var(--ink);background:var(--card)}
  .btn-lab{
    font-style:italic;font-size:.85rem;padding:0 16px;margin-left:12px;height:37px;
    background:transparent;color:var(--signal);box-shadow:inset 0 0 0 2px var(--signal);
    display:inline-flex;align-items:center;gap:3px;
  }
  .btn-lab .lab-txt{position:relative;top:1px}
  .btn-lab .m-merk{
    background:#16211f;border-radius:4px;flex:none;height:21px;width:30px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .btn-lab .m-merk svg{height:94%;width:auto;display:block}
  .btn-ghost:hover{border-color:var(--steel)}

  /* monitor-kaart */
  .monitor{
    background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:26px;box-shadow:0 18px 40px -24px rgba(22,35,46,.25);
  }
  .monitor h3{font-family:var(--mono);font-weight:500;font-size:.78rem;color:var(--steel);text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px}
  .m-row{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-top:1px solid var(--line)}
  .m-row:first-of-type{border-top:none}
  .m-label{font-size:.92rem;color:var(--steel)}
  .m-val{font-family:var(--mono);font-weight:500;font-size:.95rem}
  .m-val.ok{color:var(--signal);display:inline-flex;align-items:center;gap:8px}
  .m-row:nth-of-type(2) .dot::after{animation-delay:.6s}
  .m-row:nth-of-type(3) .dot::after{animation-delay:1.2s}
  .m-row:nth-of-type(4) .dot::after{animation-delay:1.8s}
  .m-foot{margin-top:16px;font-family:var(--mono);font-size:.72rem;color:var(--steel)}

  /* ---------- secties ---------- */
  section{padding:72px 0}
  .sec-label{
    font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--signal);margin-bottom:14px;
  }
  h2{
    font-family:'Archivo',sans-serif;font-weight:700;font-stretch:112%;
    font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.015em;margin-bottom:18px;
  }
  .lead{color:var(--steel);margin-bottom:40px}

  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .card{
    background:var(--card);border:1px solid var(--line);border-radius:12px;
    padding:26px 24px;
  }
  .card h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.05rem;margin-bottom:10px}
  .card p{font-size:.94rem;color:var(--steel)}

  /* werkwijze */
  .werkwijze{background:var(--ink);color:var(--paper);border-radius:18px;padding:64px 56px;margin:24px 0}
  .werkwijze .sec-label{color:var(--signal)}
  .werkwijze h2{color:#fff}
  .werkwijze .lead{color:#a9bbc4}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:8px}
  .step h3{font-family:'Archivo',sans-serif;font-size:1.02rem;font-weight:700;margin-bottom:8px;color:#fff}
  .step p{font-size:.93rem;color:#a9bbc4}
  .step .k{font-family:var(--mono);font-size:.78rem;color:var(--signal);display:block;margin-bottom:10px}

  /* over */
  .over{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:stretch;margin-top:22px}
  .over p:first-child{margin-top:0}
  .over p+p{margin-top:14px}
  .over p{color:var(--steel)}
  .over strong{color:var(--ink)}
  .feiten{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 26px;display:flex;flex-direction:column}
  .feiten div{flex:1;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 0;border-top:1px solid var(--line);font-size:.94rem}
  .feiten dt{flex:0 0 auto}
  .feiten dd{text-align:right;min-width:0}
  .feiten div:first-child{border-top:none}
  .feiten dt{color:var(--steel)}
  .feiten dd{font-weight:600}

  /* contact */
  .contact{background:var(--signal-soft);border-radius:18px;padding:64px 56px;text-align:center}
  .contact p{max-width:52ch;margin:0 auto 30px;color:var(--steel)}
  .contact-lijst{margin-top:34px;display:flex;justify-content:center;gap:40px;flex-wrap:wrap;font-family:var(--mono);font-size:.88rem;color:var(--steel)}

  .site-footer{background:var(--ink);color:#a9bbc4;font-size:.92rem;margin-top:24px}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding:56px 24px 40px}
  .foot-logo img{max-height:32px;margin-bottom:12px;display:block;opacity:.85}
  .foot-logo{font-family:'Archivo',sans-serif;font-weight:800;font-stretch:110%;font-size:1.1rem;color:#fff}
  .foot-logo span{color:var(--signal)}
  .foot-tag{margin-top:14px;max-width:36ch}
  .site-footer h4{font-family:var(--mono);font-weight:500;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--signal);margin-bottom:14px}
  .foot-list{list-style:none}
  .foot-list li{padding:5px 0}
  .foot-list a{color:#a9bbc4;text-decoration:none;display:inline-flex;align-items:center;gap:9px}
  .foot-list a:hover{color:#fff}
  .foot-h4-leeg{margin-bottom:14px}
  .foot-list svg{width:15px;height:15px;flex:none;color:var(--signal)}
  .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:18px 24px;border-top:1px solid rgba(255,255,255,.12);font-size:.82rem}
  .foot-credit{font-family:'Caveat',cursive;font-size:1.15rem;color:#7f95a1;transform:rotate(-2deg)}
  @media (max-width:860px){.foot-grid{grid-template-columns:1fr;gap:32px}.foot-h4-leeg{display:none}}


  /* --- hamburger menu --- */
  .hamburger{
    display:none;flex-direction:column;justify-content:space-between;
    width:28px;height:20px;background:none;border:none;cursor:pointer;padding:0;
  }
  .hamburger span{
    display:block;height:2px;background:var(--ink);border-radius:2px;
    transition:transform .25s ease,opacity .25s ease;
  }
  .hamburger.open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  .hamburger.open span:nth-child(2){opacity:0}
  .hamburger.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
  .mobile-menu{
    display:none;position:fixed;top:64px;left:0;right:0;bottom:0;
    background:var(--paper);z-index:200;
    padding:40px 24px 32px;overflow-y:auto;overscroll-behavior:contain;
    flex-direction:column;gap:4px;
    border-top:1px solid var(--line);
  }
  .mobile-menu.open{display:flex}
  .mobile-menu a{
    font-size:1.2rem;font-weight:600;color:var(--ink);text-decoration:none;
    padding:14px 0;border-bottom:1px solid var(--line);
  }
  .mobile-menu a:last-child:not(.taal-m){border-bottom:none;margin-top:16px}
  .mobile-menu a.btn-primary{
    background:var(--signal);color:#fff;border-radius:8px;
    padding:14px 24px;text-align:center;border-bottom:none;
  }
  .mobile-menu a.btn-lab{
    font-style:italic;font-size:1rem;border-radius:8px;padding:14px 24px;text-align:center;
    background:transparent;color:var(--signal);box-shadow:inset 0 0 0 2px var(--signal);
    border-bottom:none;margin-top:16px;
  }
  @media (max-width:860px){
    .hamburger{display:flex}
    .nav-links{display:none}
  }

  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    html{scroll-behavior:auto}
  }
  @media (max-width:860px){
    .hero{grid-template-columns:1fr;padding:56px 0 48px}
    .grid,.steps{grid-template-columns:1fr}
    .over{grid-template-columns:1fr}
    .feiten div{flex-direction:column;align-items:flex-start;gap:2px}
    .feiten dd{text-align:left}
    .werkwijze,.contact{padding:44px 28px}
    nav a{margin-left:16px}
    .nav-links a:not(.btn){display:none}
  }

  /* --- multi-page extra's --- */
  nav .active{background:#16211f;color:#fff;font-size:.88rem;font-weight:500;margin-left:6px;margin-right:-12px;height:37px;padding:0 12px;border-radius:8px;cursor:default;display:inline-flex;align-items:center}
  .page-hero{padding:64px 0 8px}
  .page-hero p{color:var(--steel)}
  .dl-btn{font-size:1.05rem;padding:16px 34px}
  .info-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
  .logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .logo-slot{
    background:var(--card);border:1px solid var(--line);border-radius:12px;
    height:130px;display:flex;align-items:center;justify-content:center;
    text-align:center;padding:16px;text-decoration:none;
    transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
  }
  .logo-slot strong{font-family:'Archivo',sans-serif;font-size:1.05rem;color:var(--ink);font-weight:700}
  a.logo-slot:hover{transform:translateY(-2px);border-color:var(--signal);box-shadow:0 10px 24px -16px rgba(22,35,46,.35)}
  .logo-slot img{max-width:70%;max-height:70px;object-fit:contain}
  .logo-slot.netraco img{width:55%;max-width:55%}
  .logo-slot.ibana img{max-height:38px}
  .logo-slot.ibana.dark{background:var(--ink);border-color:var(--ink)}
  .logo-slot.ibana.dark img{filter:invert(1)}
  .logo-slot.mdn{background:#154281;border-color:#154281}
  .logo-slot.cosmo{background:#000;border-color:#000}
  .logo-slot.cosmo .cosmo-wrap{position:relative;display:inline-block}
  .logo-slot.cosmo img{max-width:166px;width:166px;object-fit:contain;display:block}
  .logo-slot.cosmo .cosmo-plaats{position:absolute;right:-12px;bottom:-14px;font-family:'Caveat',cursive;font-size:1.3rem;color:#fff;line-height:1;transform:rotate(-6deg)}
  .logo-slot.mdn img{max-width:85%}
  .logo-slot.fill{padding:0;overflow:hidden}
  .logo-slot.fill img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
  .shots{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
  .shots img{width:100%;border:1px solid var(--line);border-radius:12px;display:block}
  @media (max-width:860px){.shots{grid-template-columns:1fr}}
  figure.screenshot{
    background:var(--card);border:1px dashed var(--line);border-radius:12px;
    min-height:220px;display:flex;align-items:center;justify-content:center;
    color:var(--steel);font-family:var(--mono);font-size:.8rem;margin:8px 0;
  }
  figure.screenshot img{max-width:100%;border-radius:12px}
  .checklist{list-style:none;margin-top:8px}
  .checklist li{padding:10px 0 10px 30px;position:relative;color:var(--steel);border-top:1px solid var(--line)}
  .checklist li:first-child{border-top:none}
  .checklist li::before{content:"";position:absolute;left:4px;top:17px;width:9px;height:9px;border-radius:50%;background:var(--signal)}
  .checklist strong{color:var(--ink)}
  .checklist a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--signal)}
  .checklist a:hover{color:var(--signal)}
  .note-card{background:var(--signal-soft);border-radius:12px;padding:22px 26px;color:var(--steel);font-size:.95rem;margin-top:26px}
  @media (max-width:860px){
    .info-cols{grid-template-columns:1fr}
    .logo-grid{grid-template-columns:1fr 1fr}
  }

  .driver-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-top:18px}
  .driver-slot{
    display:flex;align-items:flex-end;justify-content:center;
    background:var(--card);border:1px solid var(--line);border-radius:10px;
    padding:12px 12px 28px;min-height:104px;text-decoration:none;overflow:hidden;
    transition:transform .15s ease,border-color .15s ease;
  }
  .driver-slot:hover{transform:translateY(-2px);border-color:var(--signal)}
  .driver-slot img,.driver-slot svg{max-height:46px;max-width:100%;object-fit:contain}
  .driver-slot.apple{background:#000;border-color:#000}
  .driver-slot.wide{padding:8px 2px 28px}
  .driver-slot.tall img{max-height:66px}
  /* uitlijnen op de basislijn van het woordmerk; rest hangt eronder */
  .driver-slot.dell img{transform:translateY(calc(41.4% - 10.5px))}
  .driver-slot.tall img{transform:translateY(13%)}
  .driver-slot.wide img{transform:translateY(calc(20.2% - 10.5px))}
  .driver-slot.ricoh img{transform:translateY(-10.5px)}
  .driver-slot.draytek img{transform:translateY(calc(22.2% - 10.5px))}
  @media (max-width:1000px){.driver-grid{grid-template-columns:repeat(4,1fr)}}
  @media (max-width:640px){.driver-grid{grid-template-columns:repeat(2,1fr)}}

  /* ---- Live monitoring (Een kijkje in de keuken) ---- */
  .lm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;margin-top:8px}
  .lm-card{background:var(--card,#fff);border:1px solid var(--line,#e2e7e6);border-radius:10px;padding:20px 22px;position:relative;display:flex;flex-direction:column}
  .st-feiten{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;min-height:20px;font-size:.8rem;color:var(--steel)}
  .st-feiten b{color:var(--ink);font-weight:600}
  .lm-hoek{position:absolute;top:16px;right:18px;display:flex;flex-direction:column;align-items:flex-end;gap:5px;max-width:45%}
  .lm-hoek .lm-chip{margin-top:0}
  .lm-status{position:static;width:10px;height:10px;border-radius:50%;flex:0 0 auto}
  .lm-flatline{position:static;color:#e24b4a;line-height:0;flex:0 0 auto}
  .lm-card.aan .lm-status{background:var(--signal);box-shadow:0 0 0 4px rgba(31,169,124,.15)}
  .lm-card.uit .lm-status{background:#b6c0c4}
  .lm-naam{font-family:var(--mono,'IBM Plex Mono',monospace);font-weight:500;font-size:1rem;color:var(--ink);padding-right:100px;word-break:break-word}
  .lm-rol{color:var(--steel);font-size:.82rem;margin:2px 0 14px}
  .lm-meters{display:flex;justify-content:space-between;gap:8px}
  .lm-gauge{flex:1;text-align:center}
  .lm-gauge svg{width:82px;height:86px}
  .lm-gauge .w{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.05rem;fill:var(--ink)}
  .lm-gauge .e{font-size:.58rem;fill:var(--steel);font-weight:600}
  .lm-gauge .l{font-size:.72rem;color:var(--steel);font-weight:600;margin-top:2px}
  .lm-disk{margin-top:14px}
  .lm-disk .balk{height:6px;background:#edf1f0;border-radius:5px;overflow:hidden}
  .lm-disk .balk i{display:block;height:100%;background:var(--signal);border-radius:5px}
  .lm-disk .tekst{display:flex;justify-content:space-between;font-size:.74rem;color:var(--steel);margin-top:4px}
  .lm-spark{margin-top:14px}
  .lm-spark svg{width:100%;height:32px;display:block}
  .lm-spark .t{font-size:.72rem;color:var(--steel);margin-top:4px}
  .lm-stilte{margin-top:14px}
  .lm-stilte .balk-wrap{height:32px;display:flex;align-items:center}
  .lm-stilte .balk{width:100%;height:2px;background:#e0a020}
  .lm-stilte .t{font-size:.72rem;color:#b5791a;margin-top:4px}
  .lm-offline{color:#b6c0c4;font-family:'Archivo',sans-serif;font-weight:800;font-size:1.6rem;padding:26px 0}
  .lm-bij{display:block;margin-top:18px;font-size:.8rem;color:var(--steel)}

  /* ---- Klantlogo-overlay (Website / Monitoring) ---- */
  .logo-slot{position:relative;overflow:hidden}
  .logo-overlay{
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:10px;background:rgba(22,35,46,.92);opacity:0;transition:opacity .18s ease;padding:10px;text-align:center
  }
  .logo-overlay .lo-knoppen{display:flex;gap:8px;justify-content:center}
  .logo-slot:hover .logo-overlay,.logo-slot:focus-within .logo-overlay,.logo-slot.open .logo-overlay{opacity:1}
  .logo-overlay .lo-naam{color:#fff;font-family:'Archivo',sans-serif;font-weight:800;font-size:.95rem;letter-spacing:-.01em}
  .logo-overlay .lo-knop{
    display:inline-block;font-size:.78rem;font-weight:600;text-decoration:none;
    padding:6px 14px;border-radius:6px;background:var(--signal);color:#fff
  }
  .logo-overlay .lo-knop.ghost{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);color:#fff}

  /* ---- Statuschips en stale-weergave live monitoring ---- */
  .lm-chip{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.72rem;font-weight:600;margin-top:6px}
  .lm-chip.oranje{background:rgba(224,160,32,.14);color:#9a6d10}
  .lm-chip.grijs{background:#eceff0;color:#6b7b83}
  .lm-card.checkin .lm-status{background:#e0a020;box-shadow:0 0 0 4px rgba(224,160,32,.15)}
  .lm-card.stale .lm-meters,.lm-card.stale .lm-disk,.lm-card.stale .lm-spark svg,.lm-card.stale .st-feiten{opacity:.5}

  /* ---- Weergaveschakelaar en tabel publieke monitoring ---- */
  .lm-viewwrap{display:flex;justify-content:flex-end;margin-bottom:12px}
  .lm-view{display:inline-flex;border:1px solid var(--line,#e2e7e6);border-radius:8px;overflow:hidden;background:var(--card,#fff)}
  .lm-view button{border:0;background:transparent;padding:6px 14px;cursor:pointer;font-family:'IBM Plex Sans',sans-serif;font-size:.82rem;color:var(--steel);font-weight:600}
  .lm-view button.actief{background:var(--ink);color:#fff}
  .lm-tabel{width:100%;border-collapse:collapse;background:var(--card,#fff);border:1px solid var(--line,#e2e7e6);font-size:.86rem}
  .lm-tabel th{background:var(--ink);color:#fff;text-align:left;font-weight:600;padding:9px 12px;white-space:nowrap;cursor:pointer;user-select:none}
  .lm-tabel th:hover{background:#22384a}
  .lm-tabel th.num{text-align:right}
  .lm-tabel td{padding:9px 12px;border-top:1px solid #eef1f0;white-space:nowrap}
  .lm-tabel .num{text-align:right}
  .lm-tabel .stip{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle}
  .lm-tabel .stip.aan{background:var(--signal)}
  .lm-tabel .stip.checkin{background:#e0a020}
  .lm-tabel .stip.uit{background:#b6c0c4}

  /* ---- Drempelmarkering: Kaart en tabelrij oranje bij hoge belasting ---- */
  .lm-card.alert{border-color:#e0a020;box-shadow:0 0 0 2px rgba(224,160,32,.25)}
  .st-tabel tr.alert td, .lm-tabel tr.alert td{background:rgba(224,160,32,.08)}
  .st-tabel tr.alert:hover td, .lm-tabel tr.alert:hover td{background:rgba(224,160,32,.14)}
  .lm-card .lm-portals{display:flex;gap:8px;margin-top:auto;padding-top:14px;justify-content:flex-end}
  .lm-portals a{text-decoration:none}
  .pbol{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
    border-radius:50%;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:.72rem;font-weight:600;
    color:#fff;cursor:default;line-height:1;text-align:center}
  .pbol.groen{background:#1fa97c}
  .pbol.rood{background:#d0453a;animation:pbol-alarm 1s steps(1,end) infinite}
  .pbol.grijs{background:#c2cbd0}
  @keyframes pbol-alarm{
    0%,50%   {background:#d0453a;color:#fff;box-shadow:none}
    50.01%,100%{background:#fff;color:#d0453a;box-shadow:inset 0 0 0 2px #d0453a}
  }
  .lm-portals a .pbol{cursor:pointer}
  .st-tabel .pbol, .lm-tabel .pbol{width:22px;height:22px;font-size:.66rem}
  .st-tabel .lm-portals, .lm-tabel .lm-portals{margin:0;display:inline-flex;align-items:center;vertical-align:middle;line-height:1}
  .st-tabel td, .lm-tabel td{vertical-align:middle}
  .st-tabel .pbol, .lm-tabel .pbol{vertical-align:middle}