@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 800;
  font-stretch:100%;
  font-display:swap;
  src:url('font/archivo-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}

/* ═══════════════════════════════════════════════════════════
   OPSIGHT, het model. Vastgesteld 14 september 2026.
   Blauw als basis, elke tak een eigen kleur.
   Dit bestand hoort bij de pagina's die op het nieuwe model
   zijn gebouwd. media/stijl.css bedient de pagina's die nog
   omgebouwd moeten worden en verdwijnt zodra dat klaar is.
   ═══════════════════════════════════════════════════════════ */
:root{
  --papier:#FFFFFF;        /* hoofdachtergrond                      */
  --papier-diep:#EDF3F8;   /* rustige band, lichtblauw              */
  --accent-zacht:#D2E6F1;  /* zachte vorm achter de hero            */
  --inkt:#051923;          /* tekst en koppen                       */
  --donker:#003554;        /* donkere vlakken                       */
  --accent:#0088CC;        /* accent op licht: vlakken en vormen    */
  --accent-knop:#006494;   /* knoppen en kleine tekst op accent     */
  --accent-diep:#00567D;   /* accenttekst en links op licht         */
  --accent-donker:#4FB3E8; /* accent binnen de donkere vlakken      */
  --wit:#FFFFFF;
  --gedempt:#4A6472;       /* bijschriften                          */
  --gedempt-licht:#B9C2C9; /* bijschriften binnen donkere vlakken   */
  --lijn:#DBE5EC;          /* randen op licht                       */

  /* Takkleuren. Alleen als accent, nooit een hele pagina. */
  --tak-bakkerij:#A9762F;  --tak-bakkerij-op:#FFFFFF;
  --tak-zuivel:#DDB042;    --tak-zuivel-op:#1A1305;
  --tak-vlees:#9E2F35;     --tak-vlees-op:#FFFFFF;
  --tak-vis:#0F7E8C;       --tak-vis-op:#FFFFFF;
  --tak-groente:#5A9A2E;   --tak-groente-op:#0E1A06;
  --tak-dranken:#7B4FA8;   --tak-dranken-op:#FFFFFF;
  --tak-gemak:#C85A2A;     --tak-gemak-op:#FFFFFF;
  --tak-zoet:#B8386B;      --tak-zoet-op:#FFFFFF;
  --tak-ingredient:#2F6B52; --tak-ingredient-op:#FFFFFF;
  --tak-diervoeding:#46617D; --tak-diervoeding-op:#FFFFFF;

  --maat:1240px;
  --tekstmaat:780px;   /* tekstkolom: lead en citaatvlak lijnen hierop uit */
  --r:22px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--inkt);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;letter-spacing:-.038em;line-height:1.06;font-weight:800;text-wrap:balance}
p,li{text-wrap:pretty}
p{margin:0}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:var(--maat);margin:0 auto;padding-inline:clamp(18px,3.4vw,40px)}
:focus-visible{outline:3px solid var(--accent-diep);outline-offset:3px;border-radius:6px}

/* rustig binnenkomen bij het scrollen */
.op{opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.op.aan{opacity:1;transform:none}
.op.v2{transition-delay:.1s}.op.v3{transition-delay:.2s}.op.v4{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .op{opacity:1;transform:none;transition:none}
  *{transition:none!important;animation:none!important}
}

/* ── zwevende kopbalk ──────────────────────────────────── */
.balk{position:fixed;top:14px;left:0;right:0;z-index:40}
.balk .binnen{max-width:var(--maat);width:calc(100% - clamp(28px,6vw,64px));
  margin-inline:auto;
  background:color-mix(in srgb,var(--papier) 94%,transparent);
  backdrop-filter:blur(12px);border-radius:999px;
  box-shadow:0 6px 26px -16px rgba(5,25,35,.5);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:11px 12px 11px 26px}
@supports not (backdrop-filter:blur(12px)){.balk .binnen{background:var(--papier)}}
.merk{display:flex;align-items:center;text-decoration:none;color:var(--inkt)}
.merk img{display:block;height:30px;width:auto}
.voetlogo{display:block;height:28px;width:auto;margin-bottom:12px}
.balk nav{display:flex;align-items:center;gap:4px}
.balk nav a:not(.pil){color:var(--inkt);text-decoration:none;font-size:14.5px;font-weight:600;
  padding:9px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px transparent;
  transition:background-color .15s ease,color .15s ease,box-shadow .15s ease}
.balk nav a:not(.pil):hover{color:var(--accent-diep);background:var(--papier-diep)}
/* de pagina waar je op staat */
.balk nav a[aria-current]{color:var(--accent-diep);background:var(--papier-diep);
  box-shadow:inset 0 0 0 1px var(--lijn)}

.pil{background:var(--accent-knop);color:var(--wit);border-radius:999px;padding:12px 24px;
  font-weight:700;font-size:14.5px;text-decoration:none;display:inline-block;white-space:nowrap;
  transition:transform .2s ease,filter .2s ease}
.pil:hover{transform:translateY(-1px);filter:brightness(.92)}
.pil--rand{background:transparent;color:var(--inkt);box-shadow:inset 0 0 0 2px var(--inkt)}
.pil--wit{background:var(--wit);color:var(--inkt)}

/* ── menu op smalle schermen ───────────────────────────── */
.menuknop{display:none;width:46px;height:46px;border:0;padding:0;cursor:pointer;
  border-radius:50%;background:var(--papier-diep);color:var(--inkt);
  align-items:center;justify-content:center;flex-direction:column;gap:5px}
.menuknop span{display:block;width:19px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .25s ease,opacity .2s ease}
.menuknop[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menuknop[aria-expanded="true"] span:nth-child(2){opacity:0}
.menuknop[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{max-width:var(--maat);margin:10px auto 0;margin-inline:clamp(14px,3vw,32px);
  background:var(--papier);border-radius:var(--r);padding:10px;
  box-shadow:0 20px 50px -18px rgba(5,25,35,.55)}
.menu a{display:block;padding:13px 16px;border-radius:14px;text-decoration:none;
  font-size:16px;font-weight:600;color:var(--inkt)}
.menu a:hover{background:var(--papier-diep)}
.menu .pil{display:block;text-align:center;margin-top:6px;color:var(--wit)}
.menu [hidden]{display:none}

/* ── hero ──────────────────────────────────────────────── */
.hero{position:relative;padding:clamp(104px,11vw,140px) 0 clamp(36px,4.5vw,60px);
  overflow:hidden;background:var(--papier)}
.hero::before{content:"";position:absolute;top:-6vw;right:-14%;width:62vw;height:62vw;
  max-width:900px;max-height:900px;border-radius:50%;background:var(--accent-zacht);filter:blur(2px)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.18fr .82fr;
  gap:clamp(26px,4.6vw,64px);align-items:start}

.hero h1{font-size:clamp(25px,3vw,40px);max-width:23ch}
.hero h1 em{font-style:normal;color:var(--accent-diep);
  /* streep onder de letters, loopt mee als de kop over meer regels breekt */
  text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:.075em;text-underline-offset:.16em;
  text-decoration-skip-ink:none}
.hero p{color:var(--gedempt);font-size:clamp(16.5px,1.25vw,19.5px);max-width:56ch;margin:22px 0 0}
.knoppen{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.hero-beeld{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;
  box-shadow:0 44px 76px -50px rgba(5,25,35,.6)}
.hero-beeld img{width:100%;height:100%;object-fit:cover;display:block;
  object-position:50% 12%}  /* hoofden blijven in beeld */
/* portret: geen kaart eromheen, kleiner, rechts uitgelijnd */
.hero-beeld--portret{aspect-ratio:auto;box-shadow:none;background:transparent;
  justify-self:end;width:100%;max-width:230px}
.hero-beeld--portret img{height:auto;object-fit:contain;
  -webkit-mask-image:linear-gradient(180deg,#000 74%,rgba(0,0,0,0) 99%);
  mask-image:linear-gradient(180deg,#000 74%,rgba(0,0,0,0) 99%)}

/* ── filmische hero: foto over de volle breedte ────────── */
.hero--film{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:88vh;min-height:88svh;padding:clamp(116px,13vh,150px) 0 clamp(52px,7vh,80px);
  background:var(--donker)}
.hero--film::before{display:none}
.hero--film > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 0;z-index:0}
.hero--film::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(97deg,rgba(5,25,35,.95) 0%,rgba(5,25,35,.88) 30%,rgba(5,25,35,.58) 58%,rgba(5,25,35,.22) 100%),
  linear-gradient(0deg,rgba(5,25,35,.55) 0%,rgba(5,25,35,0) 45%)}
.hero--film .wrap{position:relative;z-index:2;display:block;width:100%;max-width:var(--maat)}
.hero--film h1{color:var(--wit);max-width:17ch;text-shadow:0 2px 24px rgba(5,25,35,.35)}
.hero--film h1 em{color:var(--accent-donker);text-decoration-color:var(--accent-donker)}
.hero--film p{color:#DBE2E7;max-width:52ch;font-size:clamp(16.5px,1.25vw,19.5px);margin:22px 0 0}
/* homepage: lead op twee regels, de bovenste de langste */
.br-breed{display:none}
@media (min-width:901px){.met-meters p{max-width:none;text-wrap:balance}}
@media (min-width:960px){.met-meters p{text-wrap:wrap}.br-breed{display:inline}}
.pil--licht{background:transparent;color:var(--wit);box-shadow:inset 0 0 0 2px rgba(255,255,255,.65)}
.pil--licht:hover{background:rgba(255,255,255,.14)}
@media (max-width:900px){
  .hero--film{min-height:78vh;min-height:78svh;
    padding:clamp(118px,14vh,150px) 0 clamp(40px,5vh,58px)}
  .hero--film > img{object-position:center 22%}
  .hero--film::after{background:linear-gradient(0deg,rgba(5,25,35,.93) 22%,rgba(5,25,35,.72) 62%,rgba(5,25,35,.30) 100%)}
}

/* ── secties ───────────────────────────────────────────── */
.sec{padding-block:clamp(38px,3.4vw,50px)}
section[id]{scroll-margin-top:60px}
.sec--band{background:var(--papier-diep)}
.sec--donker{background:var(--donker);color:var(--wit)}
.sec--donker .lead,.sec--donker .trede p{color:var(--gedempt-licht)}
.sec h2{font-size:clamp(19px,2.35vw,30px);max-width:26ch}
.lead{color:var(--gedempt);font-size:clamp(16px,1.15vw,18px);margin-top:14px;
  max-width:var(--tekstmaat);text-wrap:balance}

/* ── de drie pijlers ───────────────────────────────────── */
/* De drie tegels delen dezelfde rijen, zodat het pilletje, de kop,
   de tekst en de knop in alle drie op precies dezelfde hoogte staan.
   De eerste rij is een veer die de inhoud naar onderen duwt.        */
.drie{display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:minmax(148px,1fr) auto auto auto auto;
  column-gap:18px;row-gap:0;margin-top:22px}
.tegel{grid-row:span 5;display:grid;grid-template-rows:subgrid;
  position:relative;border-radius:var(--r);overflow:hidden;
  padding:clamp(20px,1.9vw,26px);text-decoration:none;color:var(--wit);background:var(--donker)}
.tegel > :not(img){position:relative;z-index:2}
.tegel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.tegel:hover img{transform:scale(1.06)}
.tegel::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(5,25,35,.95) 24%,rgba(5,25,35,.72) 54%,rgba(5,25,35,.06) 88%)}
.tegel .nr{grid-row:2;display:inline-flex;align-items:center;justify-self:start;align-self:start;
  width:fit-content;background:var(--accent-knop);color:var(--wit);border-radius:999px;
  padding:7px 18px;font-size:14.5px;font-weight:700;letter-spacing:.04em;margin-bottom:12px}
.tegel h3{grid-row:3;font-size:clamp(20px,1.7vw,25px);max-width:18ch;align-self:start}
.tegel p{grid-row:4;margin:10px 0 0;font-size:15.5px;color:#F2F5F7;line-height:1.55;align-self:start}
/* de knop in de tegel, de hele tegel is al een link */
.tegelknop{grid-row:5;display:inline-flex;align-items:center;justify-self:start;align-self:start;
  width:fit-content;margin-top:16px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.35);color:var(--wit);border-radius:999px;
  padding:9px 18px;font-size:14.5px;font-weight:700;transition:background-color .2s ease}
.tegelknop::after{content:"";margin-left:8px}
.tegel:hover .tegelknop{background:var(--accent-knop);border-color:var(--accent-knop)}
/* browsers zonder subgrid: dan met vaste hoogtes uitlijnen */
@supports not (grid-template-rows:subgrid){
  .drie{grid-template-rows:none}
  .tegel{grid-row:auto;grid-template-rows:1fr auto auto auto auto;min-height:340px}
  .tegel h3 br{display:none}
  .tegel h3{min-height:2.3em}
  .tegel p{min-height:6.5em}
}

/* ── het volle accentvlak ──────────────────────────────── */
.knal{background:var(--accent-knop);color:var(--wit);border-radius:var(--r);max-width:var(--tekstmaat);
  padding:clamp(24px,2.4vw,34px)}
.knal b{display:block;font-size:clamp(16px,1.7vw,22px);letter-spacing:-.03em;
  line-height:1.25;max-width:58ch;font-weight:800}
.knal span{display:block;margin-top:12px;font-size:16.5px;max-width:82ch;color:#DCEBF4}

/* ── schuifrij ─────────────────────────────────────────── */
.schuifblok{position:relative;margin-top:22px}
.schuif{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.schuif::-webkit-scrollbar{display:none}
.schuif>*{scroll-snap-align:start;flex:0 0 calc((100% - 36px)/3)}
.kaartp{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:1/1;display:block;
  text-decoration:none;color:var(--wit);background:var(--donker)}
.kaartp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.kaartp:hover img{transform:scale(1.06)}
.kaartp::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(5,25,35,.9) 2%,rgba(5,25,35,.32) 40%,rgba(5,25,35,0) 68%)}
.kaartp-in{position:relative;z-index:2;height:100%;display:flex;align-items:flex-end;
  justify-content:flex-end;padding:clamp(16px,1.6vw,20px)}
.kaartp .pijl{flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  background:var(--tak,var(--accent-knop));color:var(--tak-op,var(--wit));
  display:flex;align-items:center;justify-content:center;font-size:16px}
.takpil{position:absolute;left:clamp(14px,1.5vw,18px);top:clamp(14px,1.5vw,18px);z-index:2;
  background:var(--tak,var(--accent-knop));color:var(--tak-op,var(--wit));border-radius:999px;
  padding:7px 16px;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.bediening{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px}
.stippen{display:flex;gap:9px}
.stip{width:9px;height:9px;border-radius:50%;background:var(--lijn);border:0;padding:0;
  cursor:pointer;transition:all .25s}
.stip.aan{background:var(--accent);width:26px;border-radius:5px}
.pijlen{display:flex;gap:10px}
.rond{width:46px;height:46px;border-radius:50%;border:0;background:var(--papier);cursor:pointer;
  box-shadow:inset 0 0 0 2px var(--lijn);color:var(--inkt);font-size:18px;display:flex;
  align-items:center;justify-content:center;transition:all .25s}
.rond:hover{background:var(--accent-knop);color:var(--wit);box-shadow:none}
.rond[disabled]{opacity:.3;cursor:default}

/* ── waar wij voor staan ───────────────────────────────── */
.ovs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:22px}
.ov{background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r);
  padding:clamp(20px,1.8vw,26px)}
.ov .rom{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:var(--accent-knop);color:var(--wit);font-weight:800;
  font-size:16px;letter-spacing:0;margin-bottom:14px}
.ov h3{font-size:clamp(19px,1.65vw,24px);max-width:22ch}
.ov p{color:var(--gedempt);font-size:16px;margin-top:11px;max-width:48ch}

/* Op brede schermen naast elkaar in een rij, zodat het blok in een scherm past. */

/* ── zo gaat een opdracht ──────────────────────────────── */
.trap{list-style:none;margin:22px 0 0;padding:0;position:relative;max-width:960px}
.trap::before{content:"";position:absolute;left:clamp(22px,2.3vw,29px);top:20px;bottom:20px;
  width:2px;background:linear-gradient(180deg,var(--accent-donker),transparent)}
.trede{position:relative;display:flex;gap:clamp(18px,2.4vw,30px);align-items:flex-start;padding:7px 0}
.trede-nr{flex:0 0 auto;width:clamp(46px,4.6vw,58px);height:clamp(46px,4.6vw,58px);border-radius:50%;
  background:var(--donker);border:2px solid var(--accent-donker);color:var(--accent-donker);
  display:flex;align-items:center;justify-content:center;font-weight:800;
  font-size:clamp(15px,1.4vw,19px);position:relative;z-index:2}
.trede h3{font-size:clamp(19px,1.7vw,24px);margin-bottom:6px}
.trede p{font-size:16.5px;max-width:58ch;margin:0}

/* ── slot ──────────────────────────────────────────────── */
.slot{position:relative;border-radius:var(--r);overflow:hidden;min-height:310px;
  display:flex;align-items:center}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,25,35,.94) 6%,rgba(5,25,35,.58) 62%,rgba(5,25,35,.22) 100%)}
.slot-in{position:relative;z-index:2;color:var(--wit);padding:clamp(26px,3.4vw,46px)}
.slot h2{font-size:clamp(18px,2.1vw,27px);max-width:22ch}
.slot p{color:#D5DADF;max-width:58ch;margin-top:16px;font-size:17.5px}

footer{padding:38px 0 44px;color:var(--gedempt);font-size:14.5px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{color:var(--accent-diep)}

/* ── smalle schermen ───────────────────────────────────── */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-beeld{order:-1;aspect-ratio:16/10}
  .hero-beeld--portret{aspect-ratio:auto;justify-self:start;max-width:220px}
  .drie{grid-template-columns:1fr;grid-template-rows:none;row-gap:14px}
  .tegel{grid-row:auto;grid-template-rows:180px auto auto auto auto;min-height:0;
    padding:20px}
  .tegel h3 br{display:none}
  .tegel p{font-size:15.5px;line-height:1.5;margin-top:8px}
  .tegel .tegelknop{margin-top:14px}
  .ovs{grid-template-columns:1fr;gap:14px}
  .ov{padding:20px}
  .schuif>*{flex:0 0 78%}
  .balk nav a:not(.pil){display:none}
  .menuknop{display:flex}
}
@media (max-width:620px){
  .schuif>*{flex:0 0 86%}
  .balk .binnen{padding:9px 9px 9px 20px}
  .balk nav .pil{display:none}
  footer .wrap{flex-direction:column;gap:10px}
}

/* ── cijferblok binnen een donker vlak ─────────────────── */
.cijferblok{display:grid;grid-template-columns:minmax(160px,250px) 1fr;
  gap:clamp(24px,3.2vw,46px);align-items:start;margin-top:28px}
.groot{font-size:clamp(44px,6vw,88px);font-weight:800;letter-spacing:-.05em;
  line-height:.9;color:var(--accent-donker)}
.groot small{display:block;font-size:16px;font-weight:500;letter-spacing:0;line-height:1.5;
  color:var(--gedempt-licht);margin-top:18px;max-width:24ch}
.cijferblok h2{font-size:clamp(19px,2.35vw,30px)}
.cijferrij{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.cijfer{border-top:2px solid var(--accent-donker);padding-top:14px}
.cijfer b{display:block;font-size:clamp(26px,2.6vw,36px);line-height:1;letter-spacing:-.03em}
.cijfer span{display:block;font-size:15px;color:var(--gedempt-licht);margin-top:8px;max-width:22ch}

/* ── label en doorverwijzing binnen een kaart ──────────── */
.ov .label{display:inline-block;width:fit-content;background:var(--accent-knop);color:var(--wit);
  border-radius:999px;padding:6px 15px;font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:18px}
.ov .meer{display:inline-block;margin-top:18px;color:var(--accent-diep);font-weight:700;
  font-size:15.5px;text-decoration:none}
.ov .meer::after{content:"";margin-left:6px}
.ov .meer:hover{text-decoration:underline}
.naschrift{color:var(--gedempt);font-size:16.5px;margin-top:26px;max-width:70ch}
.naschrift b{color:var(--inkt)}
.naschrift a{color:var(--accent-diep);font-weight:600}
@media (max-width:900px){
  .cijferblok{grid-template-columns:1fr}
  .cijferrij{grid-template-columns:1fr}
}

/* ── voettekst met kolommen ────────────────────────────── */
.voet{background:var(--papier-diep);padding:clamp(24px,2.2vw,30px) 0 14px;color:var(--inkt)}
.voet-in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:30px}
.voet-merk p{color:var(--gedempt);font-size:14.5px;line-height:1.5;max-width:36ch}
address{font-style:normal}
.ov address{color:var(--gedempt);font-size:16px;line-height:1.55;margin-top:10px}
.voet address{color:var(--gedempt);font-size:15px;line-height:1.55}
.voet-regel{display:block;margin-top:6px;color:var(--inkt);text-decoration:none;font-size:15px}
.voet-regel:hover{color:var(--accent-diep);text-decoration:underline}
.voet address + .voet-regel{margin-top:12px}
.voet-direct{color:var(--accent-diep);font-weight:700}
.voet h2{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gedempt);
  margin:0 0 16px;font-weight:700;letter-spacing:.12em}
.voet ul{list-style:none;margin:0;padding:0}
.voet li{margin-bottom:6px;break-inside:avoid}
.voet a{color:var(--inkt);text-decoration:none;font-size:15px}
.voet a:hover{color:var(--accent-diep);text-decoration:underline}
.voet .merkblok p{color:var(--gedempt);font-size:14.5px;line-height:1.5;max-width:34ch}
.voet-onder{border-top:1px solid var(--lijn);margin-top:22px;padding-top:14px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--gedempt);font-size:14px}
.voet-onder a{color:var(--accent-diep);font-size:14px}

/* ── blok voor wat er nog moet komen ───────────────────── */
.aanlever{border:2px dashed var(--accent);border-radius:var(--r);background:var(--papier-diep);
  padding:clamp(18px,2vw,26px);margin-top:24px}
.aanlever b{display:block;font-size:17px;margin-bottom:10px}
.aanlever p{color:var(--gedempt);font-size:15.5px;max-width:64ch}
.aanlever ul{margin:12px 0 0;padding-left:20px;color:var(--gedempt);font-size:15.5px}
.aanlever li{margin-bottom:6px}

/* ── prijskaarten ──────────────────────────────────────── */
.prijzen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.prijs{background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r);
  padding:clamp(20px,2vw,28px)}
.prijs .prijskop{display:block;font-size:19px;font-weight:800;letter-spacing:-.03em;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--lijn)}
.prijs .bedrag{display:block;font-size:clamp(32px,3.6vw,46px);font-weight:800;letter-spacing:-.04em;
  line-height:1;color:var(--accent-diep)}
.prijs .per{display:block;font-size:14.5px;font-weight:700;color:var(--gedempt);margin-top:8px}
.prijs p{color:var(--gedempt);font-size:15.5px;margin-top:16px}

/* ── twee lijsten naast elkaar ─────────────────────────── */
.lijsten{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.lijst{background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r);
  padding:clamp(20px,2vw,28px)}
.lijst h3{font-size:20px;margin-bottom:18px}
.lijst ul{list-style:none;margin:0;padding:0}
.lijst li{position:relative;padding-left:22px;margin-bottom:12px;color:var(--gedempt);font-size:15.5px}
.lijst li::before{content:"";position:absolute;left:1px;top:.55em;width:8px;height:8px;
  border-radius:50%;background:var(--accent)}
.lijst--uit li::before{background:var(--lijn);box-shadow:inset 0 0 0 2px var(--gedempt)}

/* ── verhalenkaarten ───────────────────────────────────── */
.verhalen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.verhaal{display:block;background:var(--papier);border:1px solid var(--lijn);border-radius:var(--r);
  padding:clamp(20px,1.9vw,26px);text-decoration:none;color:var(--inkt);
  transition:transform .2s ease,box-shadow .2s ease}
.verhaal:hover{transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(5,25,35,.6)}
.verhaal .tak{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-diep);margin-bottom:10px}
.verhaal h3{font-size:19px}
.verhaal .lees{display:inline-block;margin-top:12px;color:var(--accent-diep);font-weight:700;font-size:15px}
.verhaal .lees::after{content:"";margin-left:6px}

/* ── sectorpagina: takkleur alleen als accent ──────────── */
.takkop{display:inline-flex;align-items:center;width:fit-content;background:var(--tak);
  color:var(--tak-op);border-radius:999px;padding:8px 18px;font-size:13.5px;font-weight:700;
  letter-spacing:.02em;margin-bottom:20px}
.takstreep{height:6px;width:74px;border-radius:3px;background:var(--tak);margin-bottom:26px}
.ov--tak .rom{background:var(--tak);color:var(--tak-op)}
.hero--tak::before{background:color-mix(in srgb,var(--tak) 16%,var(--papier-diep))}

/* ── lege pagina ───────────────────────────────────────── */
.leeg{min-height:72vh;display:grid;place-items:center;text-align:center;padding:160px 0 80px}
.leeg h1{font-size:clamp(34px,5.2vw,68px)}
.leeg p{color:var(--gedempt);margin:20px auto 0;max-width:46ch}
.leeg .knoppen{justify-content:center}

@media (max-width:900px){
  .voet-in{grid-template-columns:1fr 1fr}
  .prijzen{grid-template-columns:1fr}
  .lijsten{grid-template-columns:1fr}
  .verhalen{grid-template-columns:1fr}
}
@media (max-width:620px){.voet-in{grid-template-columns:1fr;gap:22px}}

/* ── breed scherm: meer naast elkaar, minder scrollen ──── */
@media (min-width:1180px){
  .ovs .ov h3{font-size:19px}
  .ovs .ov p{font-size:15px}
  .verhalen{grid-template-columns:repeat(4,1fr)}
  .verhaal h3{font-size:17.5px}
}

/* ── kruimelpad terug naar de sectoren ─────────────────── */
.kruimel{display:flex;align-items:center;gap:8px;width:fit-content;margin-bottom:12px;
  color:var(--tak,var(--accent-diep));font-weight:700;font-size:15px;text-decoration:none}
.kruimel::before{content:"";transform:scaleX(-1)}
.kruimel:hover{text-decoration:underline}

/* ── rij met de andere sectoren ────────────────────────── */
.takrij{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.takpil--los{position:static;left:auto;top:auto;text-decoration:none}
.takpil--los:hover{filter:brightness(1.08)}

/* ── breed scherm: de takken in een raster in plaats van een schuif ── */
@media (min-width:1180px){
  .schuif{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:186px;
    gap:16px;overflow:visible}
  .schuif>*{flex:none}
  .kaartp{aspect-ratio:auto;height:100%}
  .takpil{font-size:14.5px;padding:6px 13px}
  .bediening{display:none}
}

/* ---------- hero-meters: drie ringetjes rechts in de hero ---------- */
.hero--film .wrap.met-meters{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:40px;align-items:center}
.meters{display:grid;gap:10px}
.meter{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.95);border-radius:16px;padding:12px 16px;
  box-shadow:0 10px 30px rgba(5,25,35,.28);color:var(--inkt)}
.meter svg{width:62px;height:62px;flex:none}
.meter .spoor{fill:none;stroke:var(--papier-diep);stroke-width:11}
.meter .vul{fill:none;stroke:var(--accent);stroke-width:11;stroke-linecap:round;
  stroke-dasharray:276.5;stroke-dashoffset:276.5;transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1) .5s}
.meters.op.aan .vul{stroke-dashoffset:var(--rest)}
.meter .getal{font-size:25px;font-weight:800;letter-spacing:-.04em;fill:var(--inkt)}
.meter span{font-size:14.5px;font-weight:600;line-height:1.3}
.meters .pil{justify-self:stretch;text-align:center;margin-top:4px;box-shadow:0 10px 30px rgba(5,25,35,.28)}
@media (max-width:900px){
  .hero--film .wrap.met-meters{grid-template-columns:1fr;gap:26px}
  .meters{grid-template-columns:repeat(3,1fr);gap:8px}
  .meter{flex-direction:column;text-align:center;gap:6px;padding:10px 4px;border-radius:14px}
  .meter svg{width:54px;height:54px}
  .meter span{font-size:12px;white-space:nowrap}
  .meters .pil{grid-column:1/-1;justify-self:start}
}
@media (prefers-reduced-motion:reduce){.meter .vul{transition:none}}

/* ---------- AI in de voedingsketen (ai.html): drie kaarten en een venster ---------- */
.kern{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:16px;margin-top:28px}
.kaartc{background:var(--wit);border-radius:var(--r);padding:26px 26px 24px;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(5,25,35,.04),0 10px 28px rgba(5,25,35,.05)}
.kaartc h3{font-size:18px;line-height:1.3;max-width:22ch}
.kaartc--donker{flex-direction:row;align-items:center;gap:24px;box-shadow:inset 0 0 0 2px var(--accent),0 10px 28px rgba(5,25,35,.06)}
.kaartc--donker p{color:var(--gedempt);font-size:15.5px;line-height:1.45;margin-top:8px}
.kaartc--donker h3{color:var(--inkt);font-size:20px;max-width:18ch}
.ring{flex:none}
.ring svg{width:136px;height:136px;display:block}
.ring .spoor{fill:none;stroke:var(--papier-diep);stroke-width:10}
.ring .vul{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;
  stroke-dasharray:276.5;stroke-dashoffset:276.5;transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1) .25s}
.op.aan .ring .vul{stroke-dashoffset:var(--rest)}
.ring .getal{font-size:30px;font-weight:800;letter-spacing:-.04em;fill:var(--inkt)}
.staven{display:grid;gap:16px;margin-top:auto;padding-top:20px}
.staaf{display:grid;grid-template-columns:1fr auto;gap:0 12px;align-items:end;font-size:14.5px;color:var(--gedempt);line-height:1.35}
.staaf span{text-wrap:balance}
.staaf b{font-size:26px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--inkt)}
.staaf i{grid-column:1/-1;display:block;height:10px;border-radius:5px;background:var(--papier-diep);overflow:hidden;margin-top:8px}
.staaf i::after{content:"";display:block;height:100%;width:0;border-radius:5px;background:var(--accent);
  transition:width 1.1s cubic-bezier(.2,.7,.2,1) .3s}
.staaf--licht i::after{background:var(--accent-zacht)}
.staaf--licht b{color:var(--gedempt)}
.op.aan .staaf i::after{width:var(--pct)}
.kernslot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:22px}
.kernslot p{color:var(--inkt);font-size:16.5px;max-width:60ch}
button.pil{border:0;cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:700;line-height:inherit}
.pil--rand:hover{background:var(--inkt);color:var(--wit);filter:none}

/* venster */
.venster{border:0;padding:0;overflow:hidden;border-radius:var(--r);width:min(880px,calc(100% - 32px));max-height:88vh;
  color:var(--inkt);background:var(--papier);box-shadow:0 30px 80px rgba(5,25,35,.3)}
.venster::backdrop{background:rgba(5,25,35,.55)}
.venster-in{padding:clamp(22px,3.4vw,40px);overflow:auto;max-height:88vh}
.venster-kop{display:flex;justify-content:space-between;align-items:start;gap:16px}
.venster h2{font-size:clamp(20px,2.2vw,28px);max-width:26ch}
.venster h3{font-size:17px;margin:26px 0 8px}
.venster p{color:var(--gedempt);font-size:15.5px;max-width:64ch}
.venster .sluit{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--lijn);background:var(--papier);
  font-size:20px;line-height:1;cursor:pointer;color:var(--inkt)}
.venster .sluit:hover{background:var(--papier-diep)}
.venster .lijsten{margin-top:26px}
.venster .lijst h3{margin:0 0 14px}
.winst{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.winst li{position:relative;padding-left:22px;font-size:15.5px;color:var(--inkt)}
.winst li::before{content:"";position:absolute;left:1px;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.venster .knoppen{margin-top:26px}
.bronregel{margin-top:18px;font-size:12px;line-height:1.5;color:var(--gedempt)}
.bronregel a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--lijn)}
.bronregel a:hover{text-decoration-color:currentColor}

@media (max-width:1060px){
  .kern{grid-template-columns:1fr 1fr}
  .kaartc--donker{grid-column:1/-1}
}
@media (max-width:640px){
  .kern{grid-template-columns:1fr}
  .kaartc--donker{flex-direction:column;align-items:flex-start}
  .ring svg{width:120px;height:120px}
  .kaartc{border-radius:14px}
  .venster .lijsten{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.ring .vul,.staaf i::after{transition:none}}

/* Juridische pagina's: rustige leespagina */
.juridisch{padding:150px 0 70px}
.juridisch .wrap{max-width:760px}
.juridisch h1{font-size:clamp(28px,3.4vw,42px)}
.juridisch .jur-onder{color:var(--gedempt);margin-top:8px}
.juridisch h2{font-size:clamp(18px,1.6vw,21px);margin-top:34px}
.juridisch p,.juridisch li{line-height:1.65;margin-top:10px}
.juridisch ul,.juridisch ol{padding-left:22px;margin-top:6px}
.juridisch li{margin-top:6px}
.juridisch a{color:var(--accent-diep)}

/* Tekst links, citaat rechts (Over ons) */
.duo{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.citaat{margin:0;background:var(--papier);border-left:4px solid var(--accent);border-radius:12px;
  padding:clamp(26px,2.6vw,38px);position:relative}
.citaat::before{content:"\201C";position:absolute;top:-6px;right:22px;font-size:110px;line-height:1;
  color:var(--accent);opacity:.25;font-family:Georgia,serif}
.citaat blockquote{margin:0}
.citaat p{margin:0;font-style:italic;color:var(--inkt);line-height:1.55}
.citaat p:first-child{font-size:clamp(18px,1.5vw,21px);font-weight:600;padding-right:52px}
.citaat p+p{margin-top:12px;color:var(--gedempt)}
.citaat figcaption{margin-top:20px;display:flex;flex-direction:column;gap:2px;font-size:14.5px}
.citaat figcaption b{color:var(--inkt)}
.citaat figcaption span{color:var(--gedempt)}
.citaat-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-size:14.5px;font-weight:600;color:var(--accent-diep);text-decoration:none}
.citaat-link svg{width:22px;height:22px;flex:none}
.citaat-link:hover{text-decoration:underline}
@media (max-width:900px){.duo{grid-template-columns:1fr}}

/* ---------- logo AI voor Food boven de kop van de AI-pagina ---------- */
.hero-logo{display:block;height:64px;width:auto;margin-bottom:22px}
@media (min-width:901px){.hero-logo{height:92px;margin-bottom:26px}
  .hero--ai .wrap{grid-template-columns:1fr 1fr}.hero--ai .hero-beeld{aspect-ratio:4/3}}
/* tussen 901 en 1180 px is de menubalk hoger (twee regels): meer ruimte boven de hero */
@media (min-width:901px) and (max-width:1180px){.hero{padding-top:150px}}
@media (max-width:640px){.hero-logo{height:50px;margin-bottom:16px}}
.meters-logo{display:block;height:58px;width:auto;justify-self:start;margin:0 0 6px 2px;filter:drop-shadow(0 2px 10px rgba(5,25,35,.45))}
@media (max-width:900px){.meters-logo{grid-column:1/-1;height:46px;margin-bottom:2px}}

/* ---------- pijlen: eigen ronde pijl (variant B2) ---------- */
:root{--pijl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12h9.8M12.6 8.3l3.5 3q.8.7 0 1.4l-3.5 3'/%3E%3C/svg%3E")}
svg.pijl-r{width:1.05em;height:1.05em;vertical-align:-.17em;flex:none;fill:none;stroke:currentColor;
  stroke-width:3.1;stroke-linecap:round;stroke-linejoin:round}
svg.pijl-l{transform:scaleX(-1)}
.pil svg.pijl-r{margin-left:4px}
.kaartp .pijl svg.pijl-r,.rond svg.pijl-r{width:18px;height:18px}
.tegelknop::after,.ov .meer::after,.verhaal .lees::after,.kruimel::before{display:inline-block;
  width:1.05em;height:1.05em;vertical-align:-.17em;background:currentColor;
  -webkit-mask:var(--pijl) center/contain no-repeat;mask:var(--pijl) center/contain no-repeat}

/* logo AI voor Food in de hero van de homepage: groter op laptop (na de basisregel) */
@media (min-width:901px){.meters-logo{height:84px;margin-bottom:10px}}

/* ---------- homepage: achtergrondfoto's die wisselen (16 september 2026) ----------
   De foodfoto ligt onderop en staat het langst in beeld; de andere twee
   vloeien er om de beurt overheen. Cyclus 24 s, elke foto 6 s volledig. */
.hero--film > img.wissel{opacity:0;animation:wissel 24s ease-in-out infinite}
.hero--film > img.wissel-1{animation-delay:8s}
.hero--film > img.wissel-2{animation-delay:14s}
@keyframes wissel{0%{opacity:0}4.17%{opacity:1}29.17%{opacity:1}33.33%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero--film > img.wissel{animation:none;display:none}}

/* ---------- homepage: waar onze aanpak werkt ---------- */
.vier{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:24px;align-items:stretch}
.skaart{display:flex;flex-direction:column;background:var(--wit);border-radius:var(--r);overflow:hidden;
  color:var(--inkt);box-shadow:0 1px 0 var(--lijn),0 24px 44px -34px rgba(5,25,35,.45)}
.skaart--food{grid-column:span 2}
.sk-beeld{position:relative;height:clamp(150px,13vw,180px);overflow:hidden;background:var(--donker)}
.sk-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.sk-beeld .sk-logo{position:absolute;left:16px;bottom:12px;width:auto;height:48px;object-fit:contain;
  filter:drop-shadow(0 2px 10px rgba(5,25,35,.6))}
.sk-in{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.sk-in h3{font-size:clamp(18px,1.45vw,21px);max-width:16ch}
.sk-in p{color:var(--gedempt);font-size:15px;line-height:1.5;margin-top:8px}
.skaart .takrij{gap:6px;margin-top:14px}
.skaart .takpil--los{font-size:13px;padding:4px 11px}
.sk-knop{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:8px;width:fit-content;
  color:var(--accent-diep);font-weight:700;font-size:14.5px;text-decoration:none}
.sk-knop:hover{text-decoration:underline}
@media (max-width:1180px){.vier{grid-template-columns:repeat(3,1fr)}.skaart--food{grid-column:1/-1;flex-direction:row}
  .skaart--food .sk-beeld{flex:0 0 42%;height:auto;min-height:220px}}
@media (max-width:760px){.vier{grid-template-columns:1fr;gap:14px}
  .skaart--food{flex-direction:column}.skaart--food .sk-beeld{flex:none;height:170px;min-height:0}
  .skaart:not(.skaart--food){flex-direction:row}
  .skaart:not(.skaart--food) .sk-beeld{flex:0 0 36%;height:auto}
  .sk-in{padding:14px 16px 16px}.sk-in p{font-size:14px}}

/* ---------- homepage: pijl op de sectorkaart opent een venster met een voorbeeld ---------- */
.skaart{position:relative}
button.sk-knop{border:0;background:none;padding:16px 0 0;font-family:inherit;cursor:pointer;text-align:left}
.sk-open::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.skaart:has(.sk-open):hover{box-shadow:0 1px 0 var(--lijn),0 28px 50px -30px rgba(5,25,35,.55)}
.skaart:has(.sk-open):hover .sk-knop{text-decoration:underline}
.venster--app{width:min(820px,calc(100% - 32px))}
.venster--app .venster-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(22px,3.4vw,44px);align-items:center}
.drieslag{margin:22px 0 0}
.drieslag dt{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--accent-diep);margin-top:16px}
.drieslag dt:first-child{margin-top:0}
.drieslag dd{margin:3px 0 0;font-size:16.5px;line-height:1.45;color:var(--inkt);max-width:40ch}
.toestel{margin:0;text-align:center}
.toestel img{display:block;height:min(500px,58vh);width:auto;border:9px solid #0B1620;border-radius:34px;
  background:#0B1620;box-shadow:0 30px 60px -30px rgba(5,25,35,.6)}
.toestel figcaption{margin-top:12px;font-size:12px;line-height:1.45;color:var(--gedempt);max-width:26ch;margin-inline:auto}
@media (max-width:700px){
  .venster--app .venster-in{grid-template-columns:1fr}
  .toestel img{height:auto;width:min(230px,70%);margin:0 auto;border-width:7px;border-radius:28px}
}
.venster--app .sluit{position:absolute;top:14px;right:14px;z-index:2}
.venster--app .venster-kop{padding-right:44px}

/* ---------- homepage: rekenhulp onder de hero (17 september 2026) ---------- */
.reken{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,64px);align-items:center}
.reken-kaart{background:var(--papier-diep);border-radius:var(--r);padding:clamp(20px,2.4vw,30px)}
.reken-rij{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 12px;margin-bottom:14px;font-size:15px;font-weight:600}
.reken-rij output{font-weight:800;font-size:17px;color:var(--accent-diep);font-variant-numeric:tabular-nums}
.reken-rij input{grid-column:1/-1;width:100%;accent-color:var(--accent-knop);height:24px;margin:2px 0 0;cursor:pointer}
.reken-uitkomst{background:var(--wit);border-radius:16px;padding:16px 20px;margin-top:6px;display:grid;gap:2px}
.reken-uitkomst span{font-size:14px;color:var(--gedempt);font-weight:600}
.reken-uitkomst b{font-size:clamp(30px,3.4vw,42px);letter-spacing:-.04em;line-height:1.1;color:var(--inkt);font-variant-numeric:tabular-nums}
.reken-uitkomst small{font-size:15px;color:var(--accent-diep);font-weight:700}
.reken-zin{margin-top:14px;font-size:15.5px;color:var(--inkt)}
.reken-kaart .knoppen{margin-top:14px}
.reken-noot{margin-top:12px;font-size:12px;color:var(--gedempt)}
@media (max-width:900px){.reken{grid-template-columns:1fr}}
.reken{align-items:start}
.reken-tekst{padding-top:clamp(0px,1.4vw,18px)}
.reken-lijst{margin-top:22px;gap:12px}
.reken-lijst li{font-size:16.5px}
.hero--film h1{max-width:19ch}
.heel{white-space:nowrap}
@media (min-width:901px){.hero--film .met-meters h1{max-width:28ch}}
.reken-systemen{margin-top:22px;font-size:16.5px;color:var(--inkt);max-width:46ch}
.reken-systemen b{display:block;font-size:19px;letter-spacing:-.02em;margin-bottom:2px}
/* rekenhulp: getalveld naast de schuif, vijfjaarsregel */
.reken-rij{grid-template-columns:1fr auto;align-items:center}
.reken-getal{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:var(--accent-diep)}
.reken-getal input{width:74px;padding:6px 10px;border:1px solid var(--lijn);border-radius:10px;background:var(--wit);
  font:inherit;font-size:16px;font-weight:800;color:var(--accent-diep);text-align:right;font-variant-numeric:tabular-nums}
.reken-getal input:focus{outline:2px solid var(--accent);outline-offset:1px}
.reken-rij input[type=range]{grid-column:1/-1}
.reken-vijf{margin-top:8px;padding-top:10px;border-top:1px solid var(--lijn);font-size:15px;color:var(--inkt)}
.reken-vijf b{font-size:inherit;letter-spacing:0;color:#9E2F35;font-weight:800}
.reken-punten{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.reken-punten li{position:relative;padding-left:20px;font-size:16px;line-height:1.45;color:var(--gedempt);max-width:48ch}
.reken-punten li::before{content:"";position:absolute;left:0;top:.35em;bottom:.2em;width:4px;border-radius:2px;background:var(--accent)}
.reken-punten b{display:block;color:var(--inkt);font-size:18px;letter-spacing:-.02em}
/* hero: drie kenmerken onder de lead */
.kenmerken{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.kenmerken li{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:999px;
  background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);color:var(--wit);font-size:14.5px;font-weight:700}
.kenmerken li::before{content:"";width:18px;height:18px;border-radius:50%;flex:none;
  background:var(--accent-donker) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23051923' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.reken-tekst .bronregel{margin-top:6px}
.reken-zin b{color:var(--inkt)}

/* ---------- homepage: sturen op prestaties (17 september 2026) ---------- */
.sturen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.dash{margin:0;background:var(--wit);border-radius:var(--r);padding:clamp(18px,2vw,26px);
  box-shadow:0 1px 0 var(--lijn),0 30px 60px -40px rgba(5,25,35,.5)}
.dash-kop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.dash-kop b{font-size:16px;letter-spacing:-.01em}
.dash-kop span{font-size:12px;font-weight:700;color:var(--accent-diep);background:var(--papier-diep);border-radius:999px;padding:4px 10px}
.dash-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.dash-tegel{border:1px solid var(--lijn);border-radius:14px;padding:12px}
.dash-tegel span{display:block;font-size:12.5px;color:var(--gedempt);font-weight:600}
.dash-tegel b{display:block;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.03em;line-height:1.15;margin-top:2px}
.dash-tegel i{font-style:normal;font-size:12.5px;font-weight:700}
.op-goed{color:#2E7D4F}.op-let{color:#B45A1E}
.dash-grafiek{margin-top:14px;border:1px solid var(--lijn);border-radius:14px;padding:12px}
.dash-grafiek>span{font-size:12.5px;color:var(--gedempt);font-weight:600}
.dash-staven{display:flex;align-items:flex-end;gap:10px;height:92px;margin-top:8px}
.dash-staven i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:var(--accent)}
.dash-staven i:last-child{background:var(--accent-knop)}
.dash-dagen{display:flex;gap:10px;margin-top:4px}
.dash-dagen em{flex:1;text-align:center;font-style:normal;font-size:12px;color:var(--gedempt)}
.dash-team{margin-top:14px;display:grid;gap:8px}
.dash-team div{display:grid;grid-template-columns:92px 1fr 40px;align-items:center;gap:10px;font-size:13px;font-weight:600}
.dash-team b{height:10px;border-radius:5px;background:linear-gradient(90deg,var(--accent) var(--w),var(--papier-diep) var(--w))}
.dash-team b.let{background:linear-gradient(90deg,#D98A4E var(--w),var(--papier-diep) var(--w))}
.dash-team em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
.dash figcaption{margin-top:12px;font-size:12px;color:var(--gedempt)}
.sturen-tekst .knoppen{margin-top:24px}
@media (max-width:900px){.sturen{grid-template-columns:1fr}}
.hero--film p.knopnoot{margin:12px 0 0;font-size:14.5px;color:#DBE2E7;font-weight:600}
/* dashboard uitgebreid */
.dash-kop{flex-wrap:wrap}
.dash-kop b{margin-right:auto}
.dash-tabs{display:inline-flex;background:var(--papier-diep);border-radius:999px;padding:3px;gap:2px}
.dash-tabs em{font-style:normal;font-size:12px;font-weight:700;color:var(--gedempt);padding:3px 10px;border-radius:999px}
.dash-tabs em.aan{background:var(--wit);color:var(--inkt);box-shadow:0 1px 3px rgba(5,25,35,.15)}
.dash-chip{font-size:12px;font-weight:700;color:var(--accent-diep);background:var(--papier-diep);border-radius:999px;padding:4px 10px}
.dash-tegels{grid-template-columns:repeat(4,1fr);gap:8px}
.dash-tegel{padding:10px}
.dash-tegel b{font-size:clamp(19px,1.8vw,24px)}
.dash-tegel--winst{background:var(--accent-knop);border-color:var(--accent-knop)}
.dash-tegel--winst span,.dash-tegel--winst b,.dash-tegel--winst i{color:var(--wit)}
.dash-tegel--winst i{font-weight:600;opacity:.85}
.dash-midden{display:grid;grid-template-columns:1.25fr 1fr;gap:10px;margin-top:10px}
.dash-blok{border:1px solid var(--lijn);border-radius:14px;padding:12px}
.dash-label{display:block;font-size:12.5px;color:var(--gedempt);font-weight:600}
.dash-lijn{display:block;width:100%;height:96px;margin-top:8px;overflow:visible}
.dash-lijn .doel{stroke:#9AA9B3;stroke-width:1.5;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.dash-lijn .reeks{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.dash-lijn .punt{fill:var(--accent-knop)}
.dash-legenda{display:flex;gap:14px;margin-top:6px}
.dash-legenda em{font-style:normal;font-size:12px;color:var(--gedempt);display:inline-flex;align-items:center;gap:6px}
.dash-legenda em::before{content:"";width:14px;height:3px;border-radius:2px;background:var(--accent)}
.dash-legenda .l-doel::before{background:repeating-linear-gradient(90deg,#9AA9B3 0 4px,transparent 4px 7px)}
.dash-signalen{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:7px}
.dash-signalen li{position:relative;padding-left:16px;font-size:13px;font-weight:600;line-height:1.3}
.dash-signalen li::before{content:"";position:absolute;left:0;top:.3em;width:8px;height:8px;border-radius:50%}
.dash-signalen .rood::before{background:#C0392B}.dash-signalen .oranje::before{background:#D98A4E}.dash-signalen .groen::before{background:#2E7D4F}
.dash-team{margin-top:12px}
.dash-grafiek{display:none}
@media (max-width:620px){.dash-tegels{grid-template-columns:1fr 1fr}.dash-midden{grid-template-columns:1fr}.dash-tabs{display:none}}
@media (min-width:901px){.sturen{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,3.4vw,52px)}}
.dash-tegel span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- homepage: bouwen en invoeren in vier stappen (17 september 2026) ---------- */
.vierstap{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;counter-reset:none}
.vierstap::before{content:"";position:absolute;left:24px;right:24px;top:23px;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-knop))}
.vierstap li{position:relative}
.vs-nr{position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;
  background:var(--accent-knop);color:var(--wit);font-weight:800;font-size:19px;box-shadow:0 0 0 6px var(--papier)}
.vierstap h3{font-size:clamp(18px,1.5vw,21px);margin-top:16px}
.vierstap p{margin-top:6px;color:var(--gedempt);font-size:15.5px;line-height:1.5;max-width:26ch}
.uniek{margin-top:30px;display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:var(--accent-knop);color:var(--wit);border-radius:var(--r);padding:clamp(20px,2.4vw,28px) clamp(22px,2.8vw,34px)}
.uniek b{display:block;font-size:clamp(19px,1.8vw,24px);letter-spacing:-.02em;line-height:1.2}
.uniek p{margin-top:6px;font-size:16px;color:#DCEBF4;max-width:62ch}
.uniek .pil{flex:none}
@media (max-width:900px){
  .vierstap{grid-template-columns:1fr;grid-auto-rows:1fr;gap:16px}
  .vierstap::before{left:23px;right:auto;top:24px;bottom:24px;width:2px;height:auto;
    background:linear-gradient(180deg,var(--accent),var(--accent-knop))}
  .vierstap li{display:grid;grid-template-columns:48px 1fr;column-gap:16px;align-items:start}
  .vs-nr{grid-row:span 2}
  .vierstap h3{margin-top:4px}
  .vierstap p{grid-column:2;max-width:none}
  .uniek{flex-direction:column;align-items:flex-start}
}
@media (min-width:901px){.vierstap::before{right:calc((100% - 54px)/4 - 24px)}}

/* ---------- homepage: dashboard op vloerscherm, laptop en telefoon (17 september 2026) ----------
   Alle maten in cqw, zodat de opstelling als geheel meeschaalt. */
.apparaten{margin:0}
.app-podium{container-type:inline-size;position:relative;aspect-ratio:100/80}
.apparaten figcaption{margin-top:6px;font-size:12px;color:var(--gedempt)}
.m-scherm,.l-scherm,.t-scherm{background:var(--wit);color:var(--inkt);overflow:hidden;line-height:1.3}
/* monitor */
.monitor{position:absolute;left:0;top:0;width:60%;z-index:1}
.m-scherm{aspect-ratio:16/10;border:1.1cqw solid #0B1620;border-radius:1.8cqw;padding:2.2cqw;font-size:1.55cqw;
  box-shadow:0 3cqw 6cqw -3cqw rgba(5,25,35,.45)}
.m-voet{position:relative;height:6cqw}
.m-voet::before{content:"";position:absolute;left:50%;top:0;width:6cqw;height:4.4cqw;transform:translateX(-50%);
  background:linear-gradient(90deg,#9AA9B3,#C9D2D8,#9AA9B3)}
.m-voet::after{content:"";position:absolute;left:50%;bottom:0;width:20cqw;height:1.6cqw;transform:translateX(-50%);
  border-radius:1cqw;background:linear-gradient(#C9D2D8,#9AA9B3)}
.m-groot{display:flex;align-items:baseline;gap:1.4cqw;margin-top:1.6cqw;flex-wrap:wrap}
.m-groot span{width:100%;font-size:1.4cqw;color:var(--gedempt);font-weight:600}
.m-groot b{font-size:5.4cqw;letter-spacing:-.04em;line-height:1}
.m-groot em{font-style:normal;font-size:1.5cqw;color:var(--gedempt)}
.s-balk{height:1.1cqw;border-radius:1cqw;background:var(--papier-diep);margin-top:1.2cqw;overflow:hidden}
.s-balk i{display:block;height:100%;width:var(--w);border-radius:1cqw;background:var(--accent)}
.m-ploegen{display:grid;gap:1cqw;margin-top:2cqw}
.m-ploegen div{display:grid;grid-template-columns:11cqw 1fr 4.4cqw;align-items:center;gap:1cqw;font-weight:600}
.m-ploegen b{display:block;height:1cqw;border-radius:1cqw;background:var(--papier-diep);overflow:hidden}
.m-ploegen b i{display:block;height:100%;width:var(--w);background:var(--accent);border-radius:1cqw}
.m-ploegen b i.let{background:#D98A4E}
.m-ploegen em{font-style:normal;text-align:right}
/* gedeeld */
.s-kop{display:flex;align-items:center;justify-content:space-between;gap:1cqw}
.s-kop b{font-size:1.15em;letter-spacing:-.01em}
.s-live{display:inline-flex;align-items:center;gap:.6cqw;font-weight:700;color:#2E7D4F;font-size:.9em}
.s-live::before{content:"";width:.9cqw;height:.9cqw;border-radius:50%;background:#2E7D4F;animation:knipper 2s ease-in-out infinite}
@keyframes knipper{50%{opacity:.25}}
.s-tabs{display:inline-flex;background:var(--papier-diep);border-radius:2cqw;padding:.3cqw;font-size:.85em}
.s-tabs em{font-style:normal;font-weight:700;color:var(--gedempt);padding:.2cqw .9cqw;border-radius:2cqw}
.s-tabs em.aan{background:var(--wit);color:var(--inkt)}
.s-signalen{list-style:none;margin:.8cqw 0 0;padding:0;display:grid;gap:.7cqw}
.s-signalen li{position:relative;padding-left:1.4cqw;font-weight:600}
.s-signalen li::before{content:"";position:absolute;left:0;top:.35em;width:.8cqw;height:.8cqw;border-radius:50%}
.s-signalen .rood::before{background:#C0392B}.s-signalen .oranje::before{background:#D98A4E}.s-signalen .groen::before{background:#2E7D4F}
/* laptop */
.laptop{position:absolute;left:13%;top:33%;width:68%;z-index:2;filter:drop-shadow(0 3cqw 3cqw rgba(5,25,35,.28))}
.l-scherm{aspect-ratio:16/10;border:1cqw solid #0B1620;border-bottom-width:1.6cqw;border-radius:1.8cqw 1.8cqw 0 0;
  padding:1.8cqw;font-size:1.3cqw}
.l-voet{position:relative;height:1.8cqw;margin:0 -7%;border-radius:0 0 2.4cqw 2.4cqw;
  background:linear-gradient(#E4E9ED,#AEB8C0)}
.l-voet::before{content:"";position:absolute;left:50%;top:0;width:12cqw;height:.7cqw;transform:translateX(-50%);
  border-radius:0 0 1cqw 1cqw;background:#9AA9B3}
.l-tegels{display:grid;grid-template-columns:repeat(4,1fr);gap:.9cqw;margin-top:1.4cqw}
.l-tegels div{border:.12cqw solid var(--lijn);border-radius:1cqw;padding:.9cqw}
.l-tegels span{display:block;color:var(--gedempt);font-weight:600;font-size:.9em;white-space:nowrap}
.l-tegels b{display:block;font-size:2.4cqw;letter-spacing:-.03em;line-height:1.15}
.l-tegels i{font-style:normal;font-weight:700;font-size:.9em}
.l-tegels .l-winst{background:var(--accent-knop);border-color:var(--accent-knop)}
.l-winst span,.l-winst b,.l-winst i{color:var(--wit)}
.l-midden{display:grid;grid-template-columns:1.3fr 1fr;gap:.9cqw;margin-top:.9cqw}
.l-blok{border:.12cqw solid var(--lijn);border-radius:1cqw;padding:.9cqw}
.l-blok>span{display:block;color:var(--gedempt);font-weight:600;font-size:.9em}
.l-lijn{display:block;width:100%;height:11cqw;margin-top:.6cqw;overflow:visible}
.l-lijn .doel{stroke:#9AA9B3;stroke-width:1.5;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.l-lijn .reeks{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:0}
.l-lijn .punt{fill:var(--accent-knop)}
.apparaten.op:not(.aan) .l-lijn .reeks{stroke-dashoffset:1}
.apparaten.aan .l-lijn .reeks{transition:stroke-dashoffset 1.8s ease-out .4s}
.apparaten.op:not(.aan) .s-balk i,.apparaten.op:not(.aan) .m-ploegen b i{width:0}
.apparaten.aan .s-balk i,.apparaten.aan .m-ploegen b i{transition:width 1.4s ease-out .3s}
/* telefoon */
.telefoon{position:absolute;right:0;top:13%;width:21%;z-index:3;animation:zweef 6s ease-in-out infinite;
  filter:drop-shadow(0 3cqw 3cqw rgba(5,25,35,.35))}
@keyframes zweef{50%{transform:translateY(-1.6cqw)}}
.t-scherm{position:relative;aspect-ratio:9/19;border:1cqw solid #0B1620;border-radius:3.6cqw;
  padding:4.4cqw 1.6cqw 1.6cqw;font-size:1.3cqw;background:#F5F8FB}
.t-notch{position:absolute;left:50%;top:1cqw;width:5.4cqw;height:1.4cqw;transform:translateX(-50%);border-radius:1cqw;background:#0B1620}
.t-titel{display:block;font-size:2.2cqw;letter-spacing:-.02em}
.t-tegel{background:var(--wit);border-radius:1.4cqw;padding:1.2cqw;margin-top:1.1cqw;box-shadow:0 .2cqw .6cqw rgba(5,25,35,.08)}
.t-tegel span{display:block;color:var(--gedempt);font-weight:600;font-size:.95em}
.t-tegel b{display:block;font-size:2.7cqw;letter-spacing:-.03em;line-height:1.15}
.t-winst{background:var(--accent-knop)}
.t-winst span,.t-winst b{color:var(--wit)}
.t-label{display:block;margin-top:1.6cqw;color:var(--gedempt);font-weight:700}
.t-scherm .s-signalen{gap:1cqw}
@media (prefers-reduced-motion:reduce){.telefoon,.s-live::before{animation:none}
  .apparaten .l-lijn .reeks{stroke-dashoffset:0!important;transition:none}
  .apparaten .s-balk i,.apparaten .m-ploegen b i{width:var(--w)!important;transition:none}}
@media (min-width:901px){.sturen{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}}
.app-podium{aspect-ratio:100/73}
.l-onder{margin-top:.9cqw}
.l-staven{display:flex;align-items:flex-end;gap:.8cqw;height:5.4cqw;margin-top:.6cqw}
.l-staven i{flex:1;height:var(--h);border-radius:.5cqw .5cqw 0 0;background:var(--accent)}
.l-staven i:last-child{background:var(--accent-knop)}
.apparaten.op:not(.aan) .l-staven i{height:4%}
.apparaten.aan .l-staven i{transition:height 1.2s ease-out .5s}
@media (prefers-reduced-motion:reduce){.apparaten .l-staven i{height:var(--h)!important;transition:none}}
.apparaten figcaption{margin-top:0}
.l-scherm{padding:1.5cqw 1.6cqw}
.l-tegels{margin-top:1cqw}
.l-lijn{height:7.6cqw}
.l-staven{height:3.8cqw}
.l-onder{margin-top:.8cqw;padding-bottom:.6cqw}
/* opstelling iets kleiner (17 september 2026) */
.apparaten{width:100%;max-width:540px;justify-self:center}
@media (min-width:901px){.sturen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:900px){.apparaten{max-width:440px}}

/* ---------- homepage: concrete toepassingen (17 september 2026) ---------- */
.toepassingen{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.toepassingen li{background:var(--papier-diep);border-radius:18px;padding:18px 18px 20px}
.tp-icoon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--wit);color:var(--accent-knop)}
.tp-icoon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.toepassingen h3{font-size:17.5px;margin-top:12px;letter-spacing:-.02em}
.toepassingen p{margin-top:5px;font-size:14.5px;line-height:1.45;color:var(--gedempt)}
@media (max-width:1060px){.toepassingen{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.toepassingen{gap:10px}.toepassingen li{padding:14px}.toepassingen p{font-size:13.5px}}
/* toepassingen: kop naast icoon en een klein voorbeeldscherm */
.toepassingen li{display:flex;flex-direction:column}
.tp-kop{display:flex;align-items:center;gap:12px}
.tp-kop .tp-icoon{width:40px;height:40px;flex:none}
.tp-kop h3{margin-top:0}
.toepassingen p{margin-top:8px}
.ms{margin-top:auto;padding-top:0;background:var(--wit);border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.35;
  box-shadow:0 1px 0 var(--lijn),0 10px 20px -16px rgba(5,25,35,.4);margin-top:14px}
.toepassingen li p{flex:1}
.ms-kop{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.ms-kop b{font-size:12.5px}
.ms-kop em{font-style:normal;color:var(--gedempt);font-weight:600;white-space:nowrap}
.ms-kop em.rood{color:#C0392B}
.ms-regel{position:relative;padding-left:14px;margin-top:4px;font-weight:600;color:var(--inkt)}
.ms-regel::before{content:"";position:absolute;left:0;top:.35em;width:7px;height:7px;border-radius:50%;background:#9AA9B3}
.ms-regel.ok::before{background:#2E7D4F}.ms-regel.let::before{background:#D98A4E}
.ms-balk{height:6px;border-radius:3px;background:var(--papier-diep);overflow:hidden;margin-bottom:6px}
.ms-balk i{display:block;height:100%;width:var(--w);background:var(--accent)}
.ms-groot{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.ms-groot small{font-size:12px;font-weight:600;letter-spacing:0;color:var(--gedempt)}
.ms-spark{display:flex;align-items:flex-end;gap:4px;height:30px;margin-top:6px}
.ms-spark i{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:var(--accent)}
.ms-spark i.hoog{background:#C0392B}.ms-spark i.donker{background:var(--accent-knop)}
.ms-gantt{display:grid;grid-template-columns:18px 1fr;gap:5px 6px;align-items:center}
.ms-gantt span{font-weight:700;color:var(--gedempt)}
.ms-gantt div{position:relative;height:10px;border-radius:3px;background:var(--papier-diep)}
.ms-gantt i{position:absolute;top:0;bottom:0;left:var(--l);width:var(--w);border-radius:3px;background:var(--accent)}
.ms-gantt i.b{background:var(--accent-knop)}.ms-gantt i.o{background:#D98A4E}
/* toepassingen: compacter; onder 960 px een schuifrij */
.toepassingen{gap:12px;margin-top:20px}
.toepassingen li{padding:15px 15px 16px;min-width:0}
.toepassingen p{font-size:14px}
@media (max-width:1060px){.toepassingen{grid-template-columns:repeat(4,1fr)}}
@media (max-width:959px){
  .toepassingen{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(-1 * var(--rand, 16px));padding-inline:var(--rand, 16px);padding-bottom:6px}
  .toepassingen::-webkit-scrollbar{display:none}
  .toepassingen li{flex:0 0 min(78%,300px);scroll-snap-align:start}
}
@media (max-width:959px){.toepassingen{--rand:clamp(18px,3.4vw,40px);scroll-padding-inline:var(--rand)}}
.lead.samen{max-width:860px}
.lead.samen b{display:block;color:var(--accent-diep);font-size:clamp(18px,1.5vw,21px);letter-spacing:-.02em;margin-bottom:2px}
#toepassingen h2{max-width:none}
.lead.samen{margin-top:10px}
.toepassingen li p{margin-top:6px}
.ms{margin-top:10px}
.toepassingen{margin-top:18px}
.m-label{display:block;margin-top:1.8cqw;color:var(--gedempt);font-weight:600;font-size:.9em}
.m-label+.m-ploegen{margin-top:.8cqw}
.ms-legenda{display:flex;gap:10px;margin-top:6px}
.ms-legenda em{font-style:normal;color:var(--gedempt);font-weight:600;display:inline-flex;align-items:center;gap:4px}
.ms-legenda em::before{content:"";width:10px;height:6px;border-radius:2px;background:var(--accent)}
.ms-legenda em.o::before{background:#D98A4E}

/* ---------- homepage: dagritme (17 september 2026) ---------- */
.dagritme{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}
.dagritme::before{content:"";position:absolute;left:28px;right:calc((100% - 36px)/3 - 28px);top:27px;height:2px;
  background:linear-gradient(90deg,#E8B04B,var(--accent),#23406B)}
.dagritme li{position:relative}
.dr-icoon{position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:var(--wit);color:var(--accent-knop);box-shadow:0 0 0 6px var(--papier-diep),0 6px 16px -8px rgba(5,25,35,.35)}
.dagritme li:first-child .dr-icoon{color:#B7791F}
.dagritme li:last-child .dr-icoon{color:#23406B}
.dr-icoon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dr-moment{display:block;margin-top:16px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-diep)}
.dagritme h3{font-size:clamp(20px,1.8vw,24px);margin-top:4px}
.dagritme p{margin-top:6px;color:var(--gedempt);font-size:15.5px;line-height:1.5;max-width:34ch}
@media (max-width:900px){
  .dagritme{grid-template-columns:1fr;gap:18px}
  .dagritme::before{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto;
    background:linear-gradient(180deg,#E8B04B,var(--accent),#23406B)}
  .dagritme li{display:grid;grid-template-columns:56px 1fr;column-gap:16px}
  .dr-icoon{grid-row:span 3}
  .dr-moment{margin-top:2px}
  .dagritme p{max-width:none}
}
.dagritme h3{margin-top:16px;max-width:16ch}
@media (max-width:900px){.dagritme h3{margin-top:4px;max-width:none}.dr-icoon{grid-row:span 2}}

/* ---------- homepage: toepassingen en dagritme samen (17 september 2026) ---------- */
#toepassingen{--m-voor:#E8B04B;--m-voor-ink:#9A6512;--m-tijdens:#0088CC;--m-tijdens-ink:#00567D;--m-einde:#23406B;--m-einde-ink:#23406B}
[data-moment="voor"]{--m:var(--m-voor);--m-ink:var(--m-voor-ink)}
[data-moment="tijdens"]{--m:var(--m-tijdens);--m-ink:var(--m-tijdens-ink)}
[data-moment="einde"]{--m:var(--m-einde);--m-ink:var(--m-einde-ink)}
.dr-kop{font-size:clamp(19px,1.6vw,22px);margin-top:26px}
.samenblok .dagritme{margin-top:14px}
.dagritme li .dr-icoon{color:var(--m-ink)}
.dagritme::before{background:linear-gradient(90deg,var(--m-voor),var(--m-tijdens),var(--m-einde))}
.dr-icoon{box-shadow:0 0 0 6px var(--papier),0 0 0 7px var(--m,transparent),0 6px 16px -8px rgba(5,25,35,.35)}
.dr-chip{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;
  color:var(--m-ink);background:color-mix(in srgb,var(--m) 14%,#fff)}
.toepassingen li[data-moment]{box-shadow:inset 0 4px 0 var(--m)}
.toepassingen li[data-moment] .tp-icoon{color:var(--m-ink)}
@media (min-width:1101px){
  .samenblok{display:grid;grid-template-columns:minmax(0,.33fr) minmax(0,.67fr);gap:40px;align-items:start}
  .samenblok h2{font-size:clamp(22px,2.1vw,28px)}
  .samenblok .toepassingen{margin-top:4px;gap:10px}
  .samenblok .toepassingen li{padding:12px 12px 13px}
  .samenblok .toepassingen li p{display:none}
  .samenblok .tp-kop{gap:8px}
  .samenblok .tp-kop .tp-icoon{width:32px;height:32px;border-radius:9px}
  .samenblok .tp-icoon svg{width:19px;height:19px}
  .samenblok .toepassingen h3{font-size:15px}
  .samenblok .ms{font-size:11px;padding:8px 9px;margin-top:10px}
  .samenblok .ms-kop b{font-size:11.5px}
  .samenblok .ms-groot{font-size:20px}
  .samenblok .dagritme{grid-template-columns:1fr;gap:14px}
  .samenblok .dagritme::before{left:21px;right:auto;top:22px;bottom:30px;width:2px;height:auto;
    background:linear-gradient(180deg,var(--m-voor),var(--m-tijdens),var(--m-einde))}
  .samenblok .dagritme li{display:grid;grid-template-columns:44px 1fr;column-gap:14px}
  .samenblok .dr-icoon{width:44px;height:44px;grid-row:span 3}
  .samenblok .dr-icoon svg{width:22px;height:22px}
  .samenblok .dagritme h3{margin-top:2px;font-size:17px;max-width:none}
  .samenblok .dagritme p{font-size:14px;margin-top:3px}
  .samenblok .dr-chip{justify-self:start;margin-top:6px}
}
/* samen: tegels in twee kolommen naast het dagritme */
@media (min-width:1101px){
  .samenblok{grid-template-columns:minmax(0,.4fr) minmax(0,.6fr)}
  .samenblok .toepassingen{grid-template-columns:repeat(2,1fr)}
  .samenblok .toepassingen li{display:grid;grid-template-columns:1fr;align-content:start}
  .samenblok .toepassingen h3{font-size:16px}
  .samenblok .ms{font-size:11.5px}
}
@media (min-width:960px){.toepassingen li p{display:none}}
.dagritme li .dr-chip{grid-column:2;justify-self:start}
@media (max-width:900px){.dagritme li .dr-icoon{grid-row:span 3}}
@media (min-width:901px) and (max-width:1100px){.dagritme li .dr-chip{grid-column:auto}}

/* ---------- homepage: de dag op één toestel (17 september 2026) ---------- */
.dag{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,80px);align-items:center;
  --m-voor:#E8B04B;--m-voor-ink:#9A6512;--m-tijdens:#0088CC;--m-tijdens-ink:#00567D;--m-einde:#23406B;--m-einde-ink:#23406B}
.dag h2{max-width:22ch}
.dag-tabs{display:grid;gap:10px;margin-top:24px;max-width:560px}
.dag-tabs button{position:relative;display:flex;align-items:center;gap:16px;width:100%;text-align:left;cursor:pointer;
  font:inherit;color:var(--inkt);background:var(--wit);border:1px solid var(--lijn);border-radius:18px;padding:14px 18px 14px 14px;
  overflow:hidden;transition:background-color .25s,border-color .25s,box-shadow .25s}
.dag-tabs button:hover{border-color:var(--m)}
.dag-tabs button.aan{background:color-mix(in srgb,var(--m) 9%,#fff);border-color:var(--m);box-shadow:0 12px 26px -20px rgba(5,25,35,.5)}
.dag-tabs .dr-icoon{width:46px;height:46px;flex:none;color:var(--m-ink);box-shadow:inset 0 0 0 1.5px var(--m)}
.dag-tabs .dr-icoon svg{width:23px;height:23px}
.dag-tab-tekst b{display:block;font-size:17px;letter-spacing:-.02em;line-height:1.25}
.dag-tab-tekst small{display:block;margin-top:2px;font-size:14.5px;color:var(--gedempt)}
.dag-tabs button::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--m)}
.dag-tabs.loopt button.aan::after{animation:dagvoortgang 7s linear forwards}
@keyframes dagvoortgang{to{width:100%}}
.dag-meer{margin-top:18px;font-size:14.5px;color:var(--gedempt);max-width:560px}
.dag-meer b{color:var(--inkt)}
/* toestel */
.dag-toestel{justify-self:center;filter:drop-shadow(0 30px 40px rgba(5,25,35,.22))}
.dt-scherm{position:relative;width:290px;aspect-ratio:9/18.6;border:10px solid #0B1620;border-radius:42px;
  background:#F5F8FB;padding:44px 16px 16px;overflow:hidden;font-size:13px;line-height:1.35;color:var(--inkt)}
.dt-scherm .t-notch{top:10px;width:84px;height:22px;border-radius:12px}
.dt-paneel{animation:dagin .45s ease-out}
@keyframes dagin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dt-paneel[hidden]{display:none}
.dt-tijd{font-size:12px;font-weight:700;color:var(--m-ink);display:flex;align-items:center;gap:6px}
.dt-tijd::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--m)}
.dt-titel{display:block;font-size:22px;letter-spacing:-.03em;margin:4px 0 12px}
.dt-kaart{background:var(--wit);border-radius:14px;padding:11px 12px;margin-top:9px;box-shadow:0 1px 0 var(--lijn),0 8px 16px -14px rgba(5,25,35,.45)}
.dt-kop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.dt-kop em{font-style:normal;color:var(--gedempt);font-size:12px;font-weight:600}
.dt-regel{position:relative;padding-left:15px;font-weight:600;margin-top:5px}
.dt-regel:first-child{margin-top:0}
.dt-regel::before{content:"";position:absolute;left:0;top:.38em;width:7px;height:7px;border-radius:50%;background:#9AA9B3}
.dt-regel.ok::before{background:#2E7D4F}.dt-regel.let::before{background:#D98A4E}
.dt-melding{border-left:4px solid #9AA9B3}
.dt-melding.rood{border-left-color:#C0392B}.dt-melding.oranje{border-left-color:#D98A4E}.dt-melding.groen{border-left-color:#2E7D4F}
.dt-melding b{display:block;font-size:13.5px}
.dt-melding span{display:block;margin-top:2px;color:var(--gedempt);font-weight:600}
.dt-cijfers{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dt-cijfers b{display:block;font-size:24px;letter-spacing:-.03em;line-height:1.1}
.dt-cijfers span{color:var(--gedempt);font-weight:600;font-size:12px}
.dt-scherm .ms-gantt{font-size:12px}
.dt-scherm .ms-legenda{font-size:12px}
@media (max-width:900px){
  .dag{grid-template-columns:1fr}
  .dag-toestel{order:0}
  .dt-scherm{width:min(290px,78vw)}
}
@media (prefers-reduced-motion:reduce){.dt-paneel{animation:none}}

/* ---------- homepage: dag en dashboard samen, laptop en telefoon (17 september 2026) ---------- */
#sturen .dag{grid-template-columns:minmax(0,1fr) 600px;gap:clamp(24px,3.4vw,52px)}
.apparaten.combi{max-width:600px;width:600px;justify-self:end}
.combi-podium{aspect-ratio:auto;height:540px}
.combi-podium .laptop{left:0;top:150px;width:72%}
.combi .dag-toestel{position:absolute;right:0;top:0;z-index:3;filter:drop-shadow(0 24px 30px rgba(5,25,35,.28))}
.combi .dt-scherm{width:250px;font-size:12px;padding:40px 13px 13px;border-width:9px;border-radius:38px}
.combi .dt-titel{font-size:19px;margin:3px 0 10px}
.combi .dt-kaart{padding:9px 10px;margin-top:8px}
.combi .dt-melding b{font-size:12.5px}
.combi .dt-cijfers b{font-size:21px}
.combi figcaption{margin-top:4px;text-align:right}
#sturen .dag-tabs button{background:var(--wit)}
#sturen .dag-tabs button.aan{background:color-mix(in srgb,var(--m) 10%,#fff)}
#sturen{--m-voor:#E8B04B;--m-voor-ink:#9A6512;--m-tijdens:#0088CC;--m-tijdens-ink:#00567D;--m-einde:#23406B;--m-einde-ink:#23406B}
@media (max-width:1180px){
  #sturen .dag{grid-template-columns:1fr}
  .apparaten.combi{justify-self:center}
  .dag-tabs,.dag-meer{max-width:none}
}
@media (max-width:700px){
  .apparaten.combi{width:100%;max-width:none}
  .combi-podium{height:auto;container-type:normal}
  .combi-podium .laptop{display:none}
  .combi .dag-toestel{position:static;display:flex;justify-content:center}
  .combi .dt-scherm{width:min(270px,76vw)}
  .combi figcaption{text-align:center}
}
/* combi: minder overlap, tussenmaat met alleen de telefoon */
#sturen .dag h2{max-width:none}
.combi-podium .laptop{width:62%;top:170px}
.combi .dt-scherm{width:240px}
@media (max-width:1180px){
  #sturen .dag{grid-template-columns:minmax(0,1fr) auto}
  .apparaten.combi{width:auto}
  .combi-podium{height:auto;container-type:normal}
  .combi-podium .laptop{display:none}
  .combi .dag-toestel{position:static}
  .combi figcaption{text-align:center}
}
@media (max-width:700px){
  #sturen .dag{grid-template-columns:1fr}
  .combi .dag-toestel{display:flex;justify-content:center}
}
@media (min-width:1181px){.combi-podium{height:505px}}


/* ---------- homepage-hero op de telefoon rustiger (17 september 2026) ----------
   Op de foto kop, lead, kenmerken als rustige vinkjes (twee kolommen) en knoppen.
   De knopnoot valt weg.
   AI voor Food met de meters staat eronder als eigen lichte band. */
.meters-logo img{display:block;height:100%;width:auto}
@media (max-width:900px){
  .hero--film{padding-bottom:0}
  .hero--film p.knopnoot{display:none}
  .hero--film .kenmerken{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:10px 20px;margin-top:20px}
  .hero--film .kenmerken li{background:none;box-shadow:none;padding:0;font-size:15px}
  .hero--film .knoppen{align-items:center;gap:10px 22px}
  .hero--film .knoppen .pil--licht{background:none;box-shadow:none;padding-inline:0;
    text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;
    text-decoration-color:rgba(255,255,255,.55)}
  .hero--film .wrap.met-meters{gap:0}
  .hero--film .wrap.met-meters > div:first-child{padding-bottom:40px}
  .hero--film .meters{margin-inline:calc(50% - 50vw);padding:28px clamp(18px,3.4vw,40px) 34px;
    background:var(--papier-diep)}
  .hero--film .meters-logo{filter:none;height:44px;margin:0 0 8px}
  .hero--film .meter{box-shadow:0 1px 0 var(--lijn)}
  .hero--film .meters .pil{box-shadow:none;margin-top:10px}
}
@media (max-width:380px){
  .hero--film .kenmerken{column-gap:14px}
  .hero--film .kenmerken li{font-size:13.5px;gap:7px}
}
/* kenmerken een voor een (17 september 2026): telefoon wisselend, laptop verschijnen na elkaar */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .hero--film .kenmerken{grid-template-columns:1fr;height:24px;margin-top:22px}
  .hero--film .kenmerken li{grid-area:1/1;opacity:0;animation:kenmerk 12s infinite}
  .hero--film .kenmerken li:nth-child(2){animation-delay:3s}
  .hero--film .kenmerken li:nth-child(3){animation-delay:6s}
  .hero--film .kenmerken li:nth-child(4){animation-delay:9s}
}
@keyframes kenmerk{0%{opacity:0;transform:translateY(8px)}4%,21%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-8px)}}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .hero--film .kenmerken li{animation:kenmerkin .5s ease-out both}
  .hero--film .kenmerken li:nth-child(1){animation-delay:.7s}
  .hero--film .kenmerken li:nth-child(2){animation-delay:1.1s}
  .hero--film .kenmerken li:nth-child(3){animation-delay:1.5s}
  .hero--film .kenmerken li:nth-child(4){animation-delay:1.9s}
}
@keyframes kenmerkin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- rekenhulp achter een knop (17 september 2026) ----------
   In de sectie een klein rekenvoorbeeld, de rekenhulp zelf in een venster. */
.reken{align-items:center}
.reken-vb{background:var(--papier-diep);border-radius:var(--r);padding:clamp(22px,2.6vw,34px)}
.reken-vb-label{display:inline-block;font-size:13px;font-weight:700;color:var(--accent-diep);
  background:var(--wit);border-radius:999px;padding:4px 12px}
.reken-vb-som{margin:16px 0 0;color:var(--gedempt);font-size:15.5px}
.reken-vb-uit{display:block;margin-top:6px;font-size:clamp(32px,3.4vw,44px);letter-spacing:-.03em;line-height:1.1;color:var(--inkt)}
.reken-vb-uit small{font-size:16px;font-weight:600;letter-spacing:0;color:var(--gedempt)}
.reken-vb-uren{margin:6px 0 0;color:var(--gedempt);font-size:14.5px}
.reken-vb .pil{margin-top:22px;border:0;cursor:pointer;font-family:inherit}
.venster--reken{width:min(560px,calc(100% - 24px))}
.venster--reken .reken-kaart{margin-top:18px;padding:clamp(18px,2.4vw,26px)}
.venster--reken .reken-kaart p{max-width:none}
@media (max-width:900px){
  .reken-punten{gap:10px}
  .reken-punten li{font-size:15px}
  .reken-vb .pil{white-space:normal;text-align:left}
}

/* rekenvoorbeeld op laptop compacter */
@media (min-width:901px){
  .reken-vb{max-width:430px;justify-self:end;width:100%;padding:24px 28px}
  .reken-vb-uit{font-size:34px}
  .reken-vb .pil{margin-top:18px}
}

/* ---------- van vele systemen naar een (17 september 2026) ---------- */
.es{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,60px);align-items:center}
.es-punten{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.es-punten li{display:flex;gap:14px;align-items:flex-start}
.es-ic{flex:none;width:42px;height:42px;border-radius:12px;background:var(--papier-diep);color:var(--accent-diep);
  display:flex;align-items:center;justify-content:center}
.es-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.es-punten b{display:block;font-size:17px;letter-spacing:-.02em;color:var(--inkt)}
.es-punten li>div>span{display:block;font-size:15px;line-height:1.45;color:var(--gedempt);max-width:44ch}
.es-kracht{margin:22px 0 0;padding-left:16px;border-left:4px solid var(--accent);border-radius:2px;font-size:16px;color:var(--gedempt);max-width:46ch}
.es-kracht b{display:block;color:var(--inkt);font-size:17px;letter-spacing:-.02em}
.es-film{display:inline-flex;align-items:center;gap:12px;margin-top:20px;padding:6px 18px 6px 6px;border:0;border-radius:999px;
  background:var(--papier-diep);color:var(--inkt);font:inherit;cursor:pointer;text-align:left;transition:background .2s}
.es-film:hover{background:var(--accent-zacht)}
.es-play{flex:none;width:40px;height:40px;border-radius:50%;background:var(--accent-knop);display:flex;align-items:center;justify-content:center}
.es-play svg{width:18px;height:18px;fill:var(--wit);margin-left:2px}
.es-film b{display:block;font-size:14.5px}
.es-film small{display:block;font-size:12.5px;color:var(--gedempt)}

/* ---------- beweging: van vele systemen naar een, versie 2 (17 september 2026) ----------
   Een cyclus van 20 s in drie stappen. Nu: een order komt binnen via Outlook en
   wordt vijf keer overgetypt. Met Opsight: een keer vastgelegd, alle systemen
   bijgewerkt. Resultaat: een systeem met cijfers, gekoppeld met de rest.
   Zonder beweging (prefers-reduced-motion) staat stap 2 stil in beeld.
   De keyframes es-d*, es-t* en es-c* komen uit es_css() in bouw/site.py. */
.es-vb{position:relative;width:100%;max-width:470px;justify-self:end;border-radius:var(--r);border:1px solid #E3ECF2;
  background:radial-gradient(120% 90% at 50% 38%,#FFFFFF 0%,#F4F8FB 42%,#E9F1F7 100%);padding:clamp(14px,1.8vw,24px) clamp(14px,1.8vw,24px) clamp(16px,1.8vw,22px)}
.es-vb *,.es-vb .es-n::before{animation-duration:20s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-play-state:paused}
.es-vb.speelt *,.es-vb.speelt .es-n::before{animation-play-state:running}
.es-podium{position:relative;container-type:inline-size;aspect-ratio:1/1;--t:13cqw}
.es-lijnen{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.es-lijnen--boven{z-index:3;pointer-events:none}
.es-baan{fill:none;stroke:#D5E1EA;stroke-width:.25;animation-name:es-baan}
.es-baan--binnen{stroke-dasharray:.6 1.2}

/* stap 1: nu */
.es-g-nu,.es-teller{opacity:0;animation-name:es-nu-laag}
.es-draad{fill:none;stroke:#9FB2BF;stroke-width:.4;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.es-pakket{opacity:0;animation-name:es-pk;filter:drop-shadow(0 .5px 1px rgba(5,25,35,.25))}
.es-pakket rect{fill:var(--wit);stroke:#9FB2BF;stroke-width:.3}
.es-pakket .es-pakket-ic{fill:none;stroke:var(--gedempt);stroke-width:.35}
.es-pakket text{font-size:2.6px;font-weight:700;fill:var(--inkt);font-family:inherit}
.es-teller{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;pointer-events:none}
.es-teller b{grid-area:1/1;font-size:15cqw;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--inkt);opacity:0}
.es-teller small{grid-area:2/1;font-size:max(10.5px,2.8cqw);font-weight:600;color:var(--gedempt);margin-top:.4cqw}
.es-labels{position:absolute;inset:0;z-index:3;pointer-events:none}
.es-label{position:absolute;opacity:0;transform:translate(-50%,-50%);white-space:nowrap;background:var(--wit);border:1px solid var(--lijn);
  border-radius:999px;padding:.9cqw 2.2cqw;font-size:max(10.5px,2.6cqw);color:var(--gedempt);box-shadow:0 1.4cqw 3cqw -1.6cqw rgba(5,25,35,.3)}
.es-label b{color:var(--inkt)}

/* de systemen */
.es-n{position:absolute;left:var(--x);top:var(--y);z-index:2;width:var(--t);height:var(--t);transform:translate(-50%,-50%);animation-name:es-node}
.es-n::before{content:"";position:absolute;inset:-.7cqw;border-radius:4.5cqw;border:.28cqw solid rgba(0,136,204,.55);animation-name:es-ring}
.es-tegel{position:absolute;inset:0;border-radius:3.8cqw;background:var(--wit);color:var(--accent-diep);display:flex;align-items:center;justify-content:center;
  box-shadow:0 .3cqw .6cqw rgba(0,53,84,.06),0 2.2cqw 4.5cqw -2cqw rgba(0,53,84,.3);
  animation-name:es-zweef!important;animation-duration:7s!important;animation-direction:alternate}
.es-tegel img{width:6.6cqw;height:6.6cqw;display:block}
.es-tegel svg{width:6cqw;height:6cqw;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.es-vink{position:absolute;top:-1.6cqw;right:-1.6cqw;z-index:1;width:max(14px,4.4cqw);height:max(14px,4.4cqw);border-radius:50%;
  background:var(--accent-knop);color:var(--wit);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 .6cqw var(--wit);animation-name:es-vink}
.es-vink svg,.es-kaart li>i svg{width:60%;height:60%;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}

/* stap 2: met Opsight */
.es-g-met{animation-name:es-met-laag}
.es-spaak{stroke:var(--accent);stroke-width:.45;stroke-linecap:round;opacity:.45;stroke-dasharray:1 1;stroke-dashoffset:0;animation-name:es-spaak}
.es-kern{position:absolute;left:50%;top:50%;z-index:2;width:24cqw;height:24cqw;margin:-12cqw 0 0 -12cqw;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4cqw;
  box-shadow:0 3cqw 6cqw -2.5cqw rgba(0,86,125,.45);animation-name:es-kern,es-golf}
.es-kern::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,var(--accent),var(--accent-donker),#9DD3F0,var(--accent));animation:es-draai 9s linear infinite}
.es-kern::after{content:"";position:absolute;inset:1cqw;border-radius:50%;background:var(--wit)}
.es-kern img,.es-kern span{position:relative;z-index:1}
.es-kern img{width:9cqw;height:9cqw;display:block}
.es-kern span{font-size:max(11px,3.2cqw);font-weight:800;letter-spacing:-.02em;color:var(--inkt)}
.es-kernlabel{position:absolute;left:50%;top:calc(50% + 15.5cqw);z-index:3;transform:translate(-50%,-50%);display:flex;align-items:center;gap:1.2cqw;
  white-space:nowrap;background:var(--wit);border-radius:999px;padding:.9cqw 2.4cqw;font-size:max(10.5px,2.6cqw);font-weight:700;color:var(--accent-diep);
  box-shadow:0 0 0 1px var(--accent-zacht),0 1.4cqw 3cqw -1.6cqw rgba(0,86,125,.35);animation-name:es-kl}
.es-kernlabel i{width:1.5cqw;height:1.5cqw;min-width:6px;min-height:6px;border-radius:50%;background:var(--accent)}
.es-laag-met{position:absolute;inset:0;z-index:3;pointer-events:none}
.es-in{position:absolute;left:0;top:0;display:flex;align-items:center;gap:.8cqw;padding:.8cqw 2.2cqw .8cqw 1.6cqw;border-radius:999px;
  background:var(--wit);color:var(--inkt);font-style:normal;font-size:max(10.5px,2.6cqw);font-weight:700;white-space:nowrap;
  box-shadow:0 0 0 .3cqw var(--accent),0 1.6cqw 3cqw -1.4cqw rgba(5,25,35,.35);opacity:0;
  transform:translate(50cqw,50cqw) translate(-50%,-50%);animation-name:es-in}
.es-in svg{width:max(12px,3cqw);height:max(12px,3cqw);fill:none;stroke:var(--accent-diep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.es-puls{position:absolute;left:0;top:0;width:2.2cqw;height:2.2cqw;margin:-1.1cqw 0 0 -1.1cqw;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 1cqw rgba(0,136,204,.16),0 0 3cqw rgba(0,136,204,.5);opacity:0;animation-name:es-puls}

/* stap 3: een systeem */
.es-kaart{position:absolute;left:50%;top:50%;z-index:4;width:76cqw;transform:translate(-50%,-50%);opacity:0;
  background:var(--wit);border-radius:4.4cqw;padding:4.4cqw 4.6cqw 4cqw;
  box-shadow:0 0 0 1px rgba(0,53,84,.05),0 4cqw 10cqw -4cqw rgba(0,53,84,.35);animation-name:es-kaart}
.es-kaart-kop{display:flex;align-items:center;gap:1.6cqw}
.es-kaart-kop img{width:5.6cqw;height:5.6cqw}
.es-kaart-kop b{font-size:max(14px,4cqw);letter-spacing:-.025em;color:var(--inkt)}
.es-kaart-kop small{margin-left:auto;display:flex;align-items:center;gap:1cqw;font-size:max(10px,2.4cqw);font-weight:700;color:var(--accent-diep);
  background:var(--papier-diep);border-radius:999px;padding:.6cqw 2cqw}
.es-kaart-kop small i{width:1.5cqw;height:1.5cqw;min-width:6px;min-height:6px;border-radius:50%;background:var(--accent);
  animation-name:es-live!important;animation-duration:1.6s!important}
.es-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;margin-top:3.4cqw}
.es-kpi>div{background:var(--papier-diep);border-radius:2.8cqw;padding:2cqw 2.2cqw 1.8cqw}
.es-kpi small{display:block;font-size:max(9.5px,2.2cqw);font-weight:700;color:var(--gedempt)}
.es-kpi svg{display:block;width:100%;height:auto;margin-top:1.2cqw;overflow:visible}
.es-kpi-lijn{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;animation-name:es-kl-lijn}
.es-kpi-vlak{fill:var(--accent);opacity:.14;animation-name:es-kl-vlak}
.es-kpi rect{fill:#9DD3F0;transform-box:fill-box;transform-origin:50% 100%;animation-name:es-staaf}
.es-kpi rect.es-kpi-nu{fill:var(--accent)}
.es-kpi rect:nth-child(2){animation-delay:.12s}.es-kpi rect:nth-child(3){animation-delay:.24s}.es-kpi rect:nth-child(4){animation-delay:.36s}
.es-kpi-spoor{fill:none;stroke:var(--wit);stroke-width:4}
.es-kpi-ring{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:1 1;transform:rotate(-90deg);transform-origin:30px 13px;animation-name:es-kl-ring}
.es-kaart ul{list-style:none;margin:3cqw 0 0;padding:0;display:grid;gap:1.8cqw}
.es-kaart li{display:flex;align-items:center;gap:2.4cqw;font-size:max(11px,2.9cqw);font-weight:600;color:var(--inkt);animation-name:es-rij}
.es-kaart li>span{flex:none;width:7cqw;height:7cqw;border-radius:2.2cqw;background:var(--papier-diep);color:var(--accent-diep);display:flex;align-items:center;justify-content:center}
.es-kaart li>span svg{width:4cqw;height:4cqw;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.es-kaart li>i{margin-left:auto;flex:none;width:max(14px,4.2cqw);height:max(14px,4.2cqw);border-radius:50%;background:var(--accent-knop);color:var(--wit);display:flex;align-items:center;justify-content:center}
.es-kaart-voet{display:flex;align-items:center;gap:2cqw;margin-top:3.2cqw;padding-top:2.8cqw;border-top:1px solid var(--lijn);animation-name:es-rij;animation-delay:1.2s}
.es-kaart-voet small{font-size:max(9.5px,2.2cqw);font-weight:600;color:var(--gedempt);white-space:nowrap}
.es-kaart-voet div{display:flex;align-items:center;gap:1.4cqw;margin-left:auto}
.es-kaart-voet img{width:4.2cqw;height:4.2cqw;min-width:14px;min-height:14px;display:block}
.es-kaart-voet span{display:flex;color:var(--accent-diep)}
.es-kaart-voet span svg{width:4cqw;height:4cqw;min-width:13px;min-height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* stappen en zin onder het beeld */
.es-stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:clamp(10px,1.4vw,16px)}
.es-stap i{display:block;height:3px;border-radius:2px;background:#D5E1EA;overflow:hidden}
.es-stap em{display:block;height:100%;background:var(--accent);transform-origin:0 50%}
.es-stap span{display:block;margin-top:8px;font-size:12.5px;font-weight:700;color:var(--gedempt)}
.es-s1 em{animation-name:es-f1}.es-s2 em{animation-name:es-f2}.es-s3 em{transform:scaleX(0);animation-name:es-f3}
.es-s1 span{animation-name:es-l1}.es-s2 span{color:var(--inkt);animation-name:es-l2}.es-s3 span{animation-name:es-l3}
.es-zinnen{display:grid;margin-top:4px}
.es-zin{grid-area:1/1;margin:0;font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--inkt);opacity:0}
.es-z1{animation-name:es-z1}.es-z2{opacity:1;animation-name:es-z2}.es-z3{animation-name:es-z3}

@keyframes es-baan{0%{opacity:0}4%,60%{opacity:1}64%,100%{opacity:0}}
@keyframes es-zweef{from{transform:translateY(-.7cqw)}to{transform:translateY(.7cqw)}}
@keyframes es-draai{to{transform:rotate(1turn)}}
@keyframes es-live{0%,100%{box-shadow:0 0 0 0 rgba(0,136,204,.5)}70%{box-shadow:0 0 0 1.4cqw rgba(0,136,204,0)}}
@keyframes es-nu-laag{0%,4%{opacity:0}6%,34.5%{opacity:1}37.5%,100%{opacity:0}}
@keyframes es-pk{0%,4.5%{opacity:0}5.5%,31%{opacity:1}32.5%,100%{opacity:0}}
@keyframes es-node{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  4%,60%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  65%,100%{opacity:0;transform:translate(calc(-50% + var(--mx)),calc(-50% + var(--my))) scale(.3)}}
@keyframes es-ring{0%,51%{opacity:0;transform:scale(.9)}52.5%,58.5%{opacity:1;transform:scale(1)}61%,100%{opacity:0;transform:scale(1.05)}}
@keyframes es-vink{0%,51.5%{opacity:0;transform:scale(0)}53%{opacity:1;transform:scale(1.25)}54.5%,59%{opacity:1;transform:scale(1)}61.5%,100%{opacity:0;transform:scale(.6)}}
@keyframes es-met-laag{0%,37%{opacity:0}39%,59%{opacity:1}62%,100%{opacity:0}}
@keyframes es-spaak{0%,39%{stroke-dashoffset:1}45%,58%{stroke-dashoffset:0}62%,100%{stroke-dashoffset:-1}}
@keyframes es-kern{0%,36%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1.05)}42%,61%{opacity:1;transform:scale(1)}63.5%{opacity:1;transform:scale(1.1)}65.5%,100%{opacity:0;transform:scale(1.3)}}
@keyframes es-golf{0%,45.5%{box-shadow:0 0 0 0 rgba(0,136,204,.35),0 3cqw 6cqw -2.5cqw rgba(0,86,125,.45)}53%,100%{box-shadow:0 0 0 9cqw rgba(0,136,204,0),0 3cqw 6cqw -2.5cqw rgba(0,86,125,.45)}}
@keyframes es-kl{0%,45.5%{opacity:0;transform:translate(-50%,-30%) scale(.8)}47.5%,59%{opacity:1;transform:translate(-50%,-50%) scale(1)}61.5%,100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes es-in{
  0%,40.5%{opacity:0;transform:translate(var(--x1),var(--y1)) translate(-50%,-50%) scale(.6)}
  41.5%{opacity:1;transform:translate(var(--x1),var(--y1)) translate(-50%,-50%) scale(1)}
  45%{opacity:1;transform:translate(50cqw,50cqw) translate(-50%,-50%) scale(.85)}
  46%,100%{opacity:0;transform:translate(50cqw,50cqw) translate(-50%,-50%) scale(.3)}}
@keyframes es-puls{0%,46.5%{opacity:0;transform:translate(var(--x1),var(--y1)) scale(.5)}47.5%{opacity:1;transform:translate(var(--x1),var(--y1)) scale(1)}52%{opacity:1;transform:translate(var(--x2),var(--y2))}53.5%,100%{opacity:0;transform:translate(var(--x2),var(--y2)) scale(1.8)}}
@keyframes es-kaart{0%,65%{opacity:0;transform:translate(-50%,-50%) scale(.6)}70%{opacity:1;transform:translate(-50%,-50%) scale(1.02)}72%,94%{opacity:1;transform:translate(-50%,-50%) scale(1)}98.5%,100%{opacity:0;transform:translate(-50%,-50%) scale(.97)}}
@keyframes es-kl-lijn{0%,70%{stroke-dashoffset:1}79%,100%{stroke-dashoffset:0}}
@keyframes es-kl-vlak{0%,73%{opacity:0}80%,100%{opacity:.14}}
@keyframes es-staaf{0%,70%{transform:scaleY(0)}76%,100%{transform:scaleY(1)}}
@keyframes es-kl-ring{0%,71%{stroke-dashoffset:1}80%,100%{stroke-dashoffset:.18}}
@keyframes es-rij{0%,72%{opacity:0;transform:translateY(1.4cqw)}75.5%,94%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes es-f1{0%{transform:scaleX(0)}35%,100%{transform:scaleX(1)}}
@keyframes es-f2{0%,36%{transform:scaleX(0)}62%,100%{transform:scaleX(1)}}
@keyframes es-f3{0%,63%{transform:scaleX(0)}97%,100%{transform:scaleX(1)}}
@keyframes es-l1{0%,35%{color:var(--inkt)}37%,100%{color:var(--gedempt)}}
@keyframes es-l2{0%,35%{color:var(--gedempt)}37%,62%{color:var(--inkt)}64%,100%{color:var(--gedempt)}}
@keyframes es-l3{0%,62%{color:var(--gedempt)}64%,97%{color:var(--inkt)}99%,100%{color:var(--gedempt)}}
@keyframes es-z1{0%,3%{opacity:0}5%,34%{opacity:1}36%,100%{opacity:0}}
@keyframes es-z2{0%,37%{opacity:0}39%,61%{opacity:1}63%,100%{opacity:0}}
@keyframes es-z3{0%,64%{opacity:0}66%,96%{opacity:1}98.5%,100%{opacity:0}}

@media (max-width:1000px){.es{grid-template-columns:minmax(0,1fr)}.es-vb{justify-self:center}}
@media (max-width:640px){
  .es-punten li>div>span{font-size:14.5px}
  .es-zin{font-size:15px}
  .es-stap span{font-size:11.5px}
}

@keyframes es-d1{0%,7%{stroke-dashoffset:1}10.5%,100%{stroke-dashoffset:0}}
@keyframes es-t1{0%,10.5%{opacity:0;transform:translateY(2cqw) scale(.9)}11.5%,14.9%{opacity:1;transform:none}15.9%,100%{opacity:0;transform:translateY(-2cqw) scale(.95)}}
@keyframes es-c1{0%,10.3%{opacity:0;transform:translate(-50%,-50%) scale(.85)}11.5%,14%{opacity:1;transform:translate(-50%,-50%) scale(1)}15%,100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes es-d2{0%,12%{stroke-dashoffset:1}15.5%,100%{stroke-dashoffset:0}}
@keyframes es-t2{0%,15.5%{opacity:0;transform:translateY(2cqw) scale(.9)}16.5%,19.9%{opacity:1;transform:none}20.9%,100%{opacity:0;transform:translateY(-2cqw) scale(.95)}}
@keyframes es-c2{0%,15.3%{opacity:0;transform:translate(-50%,-50%) scale(.85)}16.5%,19%{opacity:1;transform:translate(-50%,-50%) scale(1)}20%,100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes es-d3{0%,17%{stroke-dashoffset:1}20.5%,100%{stroke-dashoffset:0}}
@keyframes es-t3{0%,20.5%{opacity:0;transform:translateY(2cqw) scale(.9)}21.5%,24.9%{opacity:1;transform:none}25.9%,100%{opacity:0;transform:translateY(-2cqw) scale(.95)}}
@keyframes es-c3{0%,20.3%{opacity:0;transform:translate(-50%,-50%) scale(.85)}21.5%,24%{opacity:1;transform:translate(-50%,-50%) scale(1)}25%,100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes es-d4{0%,22%{stroke-dashoffset:1}25.5%,100%{stroke-dashoffset:0}}
@keyframes es-t4{0%,25.5%{opacity:0;transform:translateY(2cqw) scale(.9)}26.5%,29.9%{opacity:1;transform:none}30.9%,100%{opacity:0;transform:translateY(-2cqw) scale(.95)}}
@keyframes es-c4{0%,25.3%{opacity:0;transform:translate(-50%,-50%) scale(.85)}26.5%,29%{opacity:1;transform:translate(-50%,-50%) scale(1)}30%,100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes es-d5{0%,27%{stroke-dashoffset:1}30.5%,100%{stroke-dashoffset:0}}
@keyframes es-t5{0%,30.5%{opacity:0;transform:translateY(2cqw) scale(.9)}31.5%,34.4%{opacity:1;transform:none}35.4%,100%{opacity:0;transform:translateY(-2cqw) scale(.95)}}
@keyframes es-c5{0%,30.3%{opacity:0;transform:translate(-50%,-50%) scale(.85)}31.5%,34%{opacity:1;transform:translate(-50%,-50%) scale(1)}35%,100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes es-c0{0%,4%{opacity:0;transform:translate(-50%,-50%) scale(.85)}5.5%,8%{opacity:1;transform:translate(-50%,-50%) scale(1)}9%,100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}

/* film in een venster */
.venster--film{width:fit-content;max-width:none;max-height:none;background:#000;overflow:visible}
.venster--film video{display:block;width:min(calc(min(82vh,760px) * 9 / 16),calc(100vw - 24px));height:auto;aspect-ratio:9/16;border-radius:var(--r);background:#000}
.venster--film .sluit{position:absolute;top:10px;right:10px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;
  background:rgba(255,255,255,.92);font-size:22px;cursor:pointer}

/* ---------- takken in de kaart Voedingsindustrie (17 september 2026) ----------
   Tegels met een kleine foto in twee rijen, zijwaarts te schuiven met de pijlen of met de vinger.
   Een deel van de volgende tegel blijft zichtbaar, zodat duidelijk is dat er meer is. */
.takken{margin-top:16px}
.takken-kop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.takken-kop>span{font-size:13.5px;font-weight:700;color:var(--accent-diep)}
.takken-pijlen{display:flex;gap:8px}
.rond--klein{width:34px;height:34px}
.rond[disabled]:hover{background:var(--papier);color:var(--inkt);box-shadow:inset 0 0 0 2px var(--lijn)}
.rond svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.spiegel{display:flex;transform:scaleX(-1)}
.takken-rij{margin-top:10px;display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;
  grid-auto-columns:calc((100% - 12px) / 2.3);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.takken-rij::-webkit-scrollbar{display:none}
.tak{scroll-snap-align:start;display:flex;align-items:center;height:58px;text-decoration:none;color:var(--inkt);
  background:var(--papier-diep);border-radius:14px;overflow:hidden;transition:box-shadow .25s}
.tak-beeld{flex:0 0 50px;height:58px;overflow:hidden;background:var(--lijn)}
.tak-beeld img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.tak-naam{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:0 6px 0 10px;font-size:14px;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.tak-naam b{min-width:0;font-weight:inherit;hyphens:manual}
.tak-naam i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--wit);color:var(--accent-diep);
  display:grid;place-items:center;transition:background .25s,color .25s}
.tak-naam svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tak:hover{box-shadow:0 0 0 2px var(--accent-zacht)}
.tak:hover img{transform:scale(1.06)}
.tak:hover .tak-naam i,.tak:focus-visible .tak-naam i{background:var(--accent-knop);color:var(--wit)}
@media (max-width:760px){
  .tak{flex-direction:column;align-items:stretch;height:auto}
  .tak-beeld{flex:none;width:100%;height:72px}
  .tak-naam{padding:8px 8px 8px 12px;font-size:13.5px}
}

/* ---------- sectoren en vier stappen als een geheel (17 september 2026) ---------- */
.sk-stappen{background:var(--wit);border-radius:var(--r);padding:clamp(18px,2vw,26px);box-shadow:0 1px 0 var(--lijn)}
.sk-stappen>h3{font-size:clamp(18px,1.45vw,21px);letter-spacing:-.02em}
.sk-stappen .vierstap{margin-top:18px;gap:14px}
.sk-stappen .vs-nr{width:40px;height:40px}
.sk-stappen .vierstap::before{top:19px}
.sk-stappen .vierstap h3{font-size:16.5px;margin-top:12px}
.sk-stappen .vierstap p{font-size:14px;max-width:none}
.skaart:not(.skaart--food) .sk-beeld{height:clamp(130px,10vw,150px)}
@media (min-width:1181px){
  .sk-stappen{grid-column:3/-1}
}
@media (max-width:1180px){.sk-stappen{grid-column:1/-1}}
@media (min-width:901px){.sk-stappen .vierstap::before{left:20px;right:calc((100% - 42px)/4 - 20px)}}
@media (max-width:900px){
  .sk-stappen .vierstap::before{left:19px;top:20px;bottom:20px}
  .sk-stappen .vierstap li{grid-template-columns:40px 1fr}
  .sk-stappen .vierstap h3{margin-top:2px}
}


/* ---------- homepage 18 september 2026: schaal, systeem, uitleg ---------- */
.schaalkop{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gedempt);margin-top:28px}
.schaal2{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:auto 44px auto;
  column-gap:20px;margin-top:6px}
.sk-kaart{grid-row:1;align-self:end;background:var(--wit);border-radius:14px;padding:12px;
  box-shadow:0 1px 2px rgba(5,25,35,.07),0 10px 26px rgba(5,25,35,.07)}
.sk-kaart--1{height:96px}
.sk-kaart--2{height:132px;background:none;box-shadow:none;padding:0;display:flex;justify-content:center}
.sk-kaart--3{height:168px}.sk-kaart--4{height:200px}.sk-kaart--5{height:228px;padding:0;overflow:hidden}
.sk-lijn{grid-column:1/-1;grid-row:2;align-self:center;height:24px;margin-inline:10%;
  background:linear-gradient(90deg,#9ED2EE,var(--accent));clip-path:polygon(0 46%,100% 8%,100% 92%,0 54%)}
.sk-punt{grid-row:2;justify-self:center;align-self:center;width:var(--d);height:var(--d);
  border-radius:50%;background:var(--wit);box-shadow:0 0 0 3px var(--accent);z-index:2}
.sk-lab{grid-row:3;text-align:center;padding:14px 4px 0}
.sk-lab b{display:block;font-size:16.5px;letter-spacing:-.02em;color:var(--inkt)}
.sk-lab span{display:block;margin-top:3px;font-size:13.5px;line-height:1.4;color:var(--gedempt)}
.sk-kaart > div{height:100%;display:flex;flex-direction:column;gap:7px}
.mk{flex-direction:row!important;align-items:center;justify-content:center;gap:10px!important}
.mk-app{display:flex;flex-direction:column;align-items:center;gap:5px}
.mk-app img{width:34px;height:34px;object-fit:contain;background:#F4F8FB;border-radius:9px;padding:6px;display:block}
.mk-app em{font-style:normal;font-size:8.5px;font-weight:700;color:var(--gedempt)}
.mk-mid{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:14px}
.mk-mid i{font-style:normal;font-size:7.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-diep)}
.mk-pijl{width:44px;height:12px;flex:none;stroke:var(--accent);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.mt{width:96px;height:100%;background:var(--wit);border-radius:14px;padding:10px 9px 9px;display:flex;flex-direction:column;gap:3px;
  box-shadow:0 1px 2px rgba(5,25,35,.07),0 10px 26px rgba(5,25,35,.07)}
.mt-streep{width:26px;height:3px;border-radius:2px;background:#DCE6EE;align-self:center;margin-bottom:5px}
.mt-lab{font-size:8px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--gedempt)}
.mt-veld{font-size:11px;font-weight:800;color:var(--inkt);background:#EDF2F6;border-radius:5px;padding:3px 6px;margin-bottom:2px}
.mt-knop{margin-top:auto;font-size:9px;font-weight:700;color:#fff;background:var(--accent);border-radius:999px;padding:5px 0;text-align:center}
.ml{height:100%;display:flex;flex-direction:column;gap:6px}
.ml-kop{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gedempt);margin-bottom:2px}
.ml-reg{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;color:var(--inkt)}
.ml-reg::before{content:"";width:13px;height:13px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.6px #C6D5E0}
.ml-reg.aan::before{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/9px no-repeat;box-shadow:none}
.mg{height:100%;display:flex;flex-direction:column;gap:7px}
.mg-kop{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gedempt)}
.mg-bal{display:grid;grid-template-columns:50px 1fr;align-items:center;gap:7px}
.mg-bal i{font-size:8.5px;font-weight:700;color:var(--gedempt);font-style:normal}
.mg-bal b{height:9px;border-radius:5px;background:#8CC8E9;width:var(--w);display:block}
.mg-bal:first-of-type b{background:var(--accent)}
.md{height:100%;display:flex}
.md-menu{width:30px;background:#F4F8FB;padding:10px 7px;display:flex;flex-direction:column;gap:7px;border-right:1px solid #E7EEF4}
.md-menu b{height:9px;border-radius:3px;background:var(--accent);display:block}
.md-menu i{height:5px;border-radius:2px;background:#D3E0EA;display:block}
.md-in{flex:1;padding:11px 12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.md-kop{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gedempt)}
.md-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.md-tegels span{font-size:7.5px;font-weight:700;color:var(--inkt);background:#EDF2F6;border-radius:6px;
  padding:8px 4px 16px;text-align:center;line-height:1}
.md-tegels span:first-child{background:#DCEBF6}
.md-bal{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:6px}
.md-bal i{font-size:7.5px;font-weight:700;color:var(--gedempt);font-style:normal}
.md-bal b{height:7px;border-radius:4px;background:#8CC8E9;width:var(--w);display:block}
.md-bal:first-of-type b{background:var(--accent)}
.md-lijst{display:grid;gap:6px}
.md-lijst i{height:5px;border-radius:2px;background:#DCE6EE;display:block}
.md-lijst i:nth-child(2){width:74%}.md-lijst i:nth-child(3){width:88%}

/* sectie 2: uw systeem */
.app{margin-top:30px;background:var(--wit);border-radius:var(--r);overflow:hidden;border:1px solid #E3ECF2;
  box-shadow:0 1px 2px rgba(5,25,35,.05),0 18px 44px rgba(5,25,35,.08)}
.app-balk{display:flex;align-items:center;gap:7px;padding:14px 20px;border-bottom:1px solid #E7EEF4;background:#FBFDFE}
.app-balk i{width:9px;height:9px;border-radius:50%;background:#D7E3EC;display:block}
.app-balk i:first-child{background:var(--accent)}
.app-balk span{margin-left:12px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-diep)}
.app-in{display:grid;grid-template-columns:186px 1fr;min-height:228px}
.app-menu{background:#F5F9FC;border-right:1px solid #E7EEF4;padding:14px 11px;display:grid;gap:4px;align-content:start}
.app-menu span{padding:10px 13px;border-radius:9px;font-size:14.5px;font-weight:700;color:var(--gedempt)}
.app-menu span.aan{background:var(--accent);color:var(--wit)}
.app-vlak{padding:16px 20px 18px;display:flex;flex-direction:column;gap:13px}
.app-kop{display:flex;align-items:baseline;gap:10px}
.app-kop b{font-size:19px;letter-spacing:-.02em;color:var(--inkt)}
.app-kop em{font-style:normal;font-size:13.5px;color:var(--gedempt)}
.app-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.app-tegels div{background:#F2F7FB;border-radius:10px;padding:10px 13px}
.app-tegels span{display:block;font-size:12.5px;font-weight:700;color:var(--gedempt)}
.app-tegels b{display:block;margin-top:2px;font-size:23px;letter-spacing:-.03em;color:var(--inkt)}
.app-tegels div:first-child{background:#E3F1FA}
.app-onder{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.app-balken{display:grid}
.app-bal{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:10px;margin-bottom:9px}
.app-bal i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--gedempt)}
.app-bal b{height:10px;border-radius:5px;background:#9ED2EE;width:var(--w);display:block}
.app-bal:first-child b{background:var(--accent)}
.app-lijst{display:grid;gap:9px}
.app-lijst span{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--inkt)}
.app-lijst span::before{content:"";width:15px;height:15px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.7px #C6D5E0}
.app-lijst span.aan::before{box-shadow:none;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/10px no-repeat}
.bn-pijlen{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;height:30px;margin-top:2px}
.bn-pijlen svg{width:13px;height:100%;justify-self:center;stroke:var(--accent);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.65}
.bronnen{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.bn{background:var(--wit);border:1px solid #E3ECF2;border-radius:14px;padding:17px 12px;display:flex;
  align-items:center;justify-content:center;gap:11px;box-shadow:0 1px 2px rgba(5,25,35,.05)}
.bn img{width:27px;height:27px;object-fit:contain;display:block}
.bn-ic{width:27px;height:27px;color:var(--accent);display:flex}
.bn-ic svg{width:27px;height:27px}
.bn span{font-size:15.5px;font-weight:700;color:var(--inkt)}
.bn-noot{margin-top:15px;font-size:15.5px;color:var(--gedempt);max-width:74ch}

/* sectie 3: u hoeft ons niets uit te leggen */
.uitleg{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4vw,60px);align-items:center}
.ut-beeld{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;max-height:440px}
.ut-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.ut-kaart{position:absolute;left:18px;bottom:18px;background:var(--wit);border-radius:14px;
  padding:16px 20px 18px;display:flex;align-items:flex-end;gap:12px;box-shadow:0 10px 30px rgba(5,25,35,.18)}
.ut-kaart b{font-size:56px;line-height:.82;letter-spacing:-.05em;color:var(--accent);font-weight:800}
.ut-kaart span{font-size:13.5px;font-weight:700;line-height:1.3;color:var(--inkt);padding-bottom:3px}
.punten{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:20px}
.punten li{position:relative;padding-left:18px}
.punten li::before{content:"";position:absolute;left:0;top:.35em;bottom:.15em;width:4px;border-radius:2px;background:var(--accent)}
.punten b{display:block;font-size:19px;letter-spacing:-.02em;color:var(--inkt)}
.punten span{display:block;margin-top:4px;color:var(--gedempt);font-size:15.5px;line-height:1.5;max-width:56ch}

/* smalle schermen */
@media (max-width:1180px){
  .app-in{grid-template-columns:154px 1fr}
  .app-menu span{font-size:13.5px;padding:9px 11px}
  .bn span{font-size:14px}
}
@media (max-width:1000px){
  .schaal2{grid-template-columns:repeat(5,190px);overflow-x:auto;scrollbar-width:none;padding-bottom:6px}
  .schaal2::-webkit-scrollbar{display:none}
  .sk-lijn{margin-inline:95px}
  .schaalkop{margin-top:24px}
  .app-in{grid-template-columns:1fr;min-height:0}
  .app-menu{border-right:0;border-bottom:1px solid #E7EEF4;display:flex;gap:6px;overflow-x:auto;
    padding:10px;scrollbar-width:none}
  .app-menu::-webkit-scrollbar{display:none}
  .app-menu span{flex:none;padding:8px 13px;font-size:13.5px}
  .app-onder{grid-template-columns:1fr;gap:16px}
  .bronnen{grid-template-columns:repeat(3,1fr)}
  .bn-pijlen{display:flex;justify-content:center;height:26px}
  .bn-pijlen svg{display:none;width:16px}
  .bn-pijlen svg:first-child{display:block}
  .uitleg{grid-template-columns:1fr;gap:26px}
  .ut-beeld{aspect-ratio:16/10;max-height:none}
  .punten span{max-width:none}
}
@media (max-width:560px){
  .bronnen{grid-template-columns:repeat(2,1fr)}
  .bn{padding:14px 10px;gap:9px}
  .app-tegels{gap:8px}
  .app-tegels div{padding:9px 10px}
  .app-tegels span{font-size:11px}
  .app-tegels b{font-size:20px}
  .app-vlak{padding:14px 15px 16px}
  .ut-kaart{left:12px;bottom:12px;padding:12px 16px 14px}
  .ut-kaart b{font-size:44px}
}
/* smalle schermen */
@media (max-width:1180px){
  .app-in{grid-template-columns:154px 1fr}
  .app-menu span{font-size:13.5px;padding:9px 11px}
  .bn span{font-size:14px}
}
@media (max-width:1000px){
  .schaal2{grid-template-columns:repeat(5,190px);overflow-x:auto;scrollbar-width:none;padding-bottom:6px}
  .schaal2::-webkit-scrollbar{display:none}
  .sk-lijn{margin-inline:95px}
  .schaalkop{margin-top:24px}
  .app-in{grid-template-columns:1fr;min-height:0}
  .app-menu{border-right:0;border-bottom:1px solid #E7EEF4;display:flex;gap:6px;overflow-x:auto;
    padding:10px;scrollbar-width:none}
  .app-menu::-webkit-scrollbar{display:none}
  .app-menu span{flex:none;padding:8px 13px;font-size:13.5px}
  .app-onder{grid-template-columns:1fr;gap:16px}
  .bronnen{grid-template-columns:repeat(3,1fr)}
  .bn-pijlen{display:flex;justify-content:center;height:26px}
  .bn-pijlen svg{display:none;width:16px}
  .bn-pijlen svg:first-child{display:block}
  .uitleg{grid-template-columns:1fr;gap:26px}
  .ut-beeld{aspect-ratio:16/10;max-height:none}
  .punten span{max-width:none}
}
@media (max-width:560px){
  .bronnen{grid-template-columns:repeat(2,1fr)}
  .bn{padding:14px 10px;gap:9px}
  .app-tegels{gap:8px}
  .app-tegels div{padding:9px 10px}
  .app-tegels span{font-size:11px}
  .app-tegels b{font-size:20px}
  .app-vlak{padding:14px 15px 16px}
  .ut-kaart{left:12px;bottom:12px;padding:12px 16px 14px}
  .ut-kaart b{font-size:44px}
}


/* homepage mobiel, 18 september 2026 */

/* ---------- homepage 18 september 2026: schaal, systeem, uitleg ---------- */
.schaalkop{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gedempt);margin-top:28px}
.schaal2{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:auto 44px auto;
  column-gap:20px;margin-top:6px}
.halte{display:contents}
.sk-kaart{grid-row:1;align-self:end;background:var(--wit);border-radius:14px;padding:12px;
  box-shadow:0 1px 2px rgba(5,25,35,.07),0 10px 26px rgba(5,25,35,.07)}
.sk-kaart--1{height:96px}
.sk-kaart--2{height:132px;background:none;box-shadow:none;padding:0;display:flex;justify-content:center}
.sk-kaart--3{height:168px}.sk-kaart--4{height:200px}.sk-kaart--5{height:228px;padding:0;overflow:hidden}
.sk-lijn{grid-column:1/-1;grid-row:2;align-self:center;height:24px;margin-inline:10%;
  background:linear-gradient(90deg,#9ED2EE,var(--accent));clip-path:polygon(0 46%,100% 8%,100% 92%,0 54%)}
.sk-punt{grid-row:2;justify-self:center;align-self:center;width:var(--d);height:var(--d);
  border-radius:50%;background:var(--wit);box-shadow:0 0 0 3px var(--accent);z-index:2}
.sk-lab{grid-row:3;text-align:center;padding:14px 4px 0}
.sk-lab b{display:block;font-size:16.5px;letter-spacing:-.02em;color:var(--inkt)}
.sk-lab span{display:block;margin-top:3px;font-size:13.5px;line-height:1.4;color:var(--gedempt)}
.sk-kaart > div{height:100%;display:flex;flex-direction:column;gap:7px}
.mk{flex-direction:row!important;align-items:center;justify-content:center;gap:10px!important}
.mk-app{display:flex;flex-direction:column;align-items:center;gap:5px}
.mk-app img{width:34px;height:34px;object-fit:contain;background:#F4F8FB;border-radius:9px;padding:6px;display:block}
.mk-app em{font-style:normal;font-size:8.5px;font-weight:700;color:var(--gedempt)}
.mk-mid{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:14px}
.mk-mid i{font-style:normal;font-size:7.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-diep)}
.mk-pijl{width:44px;height:12px;flex:none;stroke:var(--accent);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.mt{width:96px;height:100%;background:var(--wit);border-radius:14px;padding:10px 9px 9px;display:flex;flex-direction:column;gap:3px;
  box-shadow:0 1px 2px rgba(5,25,35,.07),0 10px 26px rgba(5,25,35,.07)}
.mt-streep{width:26px;height:3px;border-radius:2px;background:#DCE6EE;align-self:center;margin-bottom:5px}
.mt-lab{font-size:8px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--gedempt)}
.mt-veld{font-size:11px;font-weight:800;color:var(--inkt);background:#EDF2F6;border-radius:5px;padding:3px 6px;margin-bottom:2px}
.mt-knop{margin-top:auto;font-size:9px;font-weight:700;color:#fff;background:var(--accent);border-radius:999px;padding:5px 0;text-align:center}
.ml{height:100%;display:flex;flex-direction:column;gap:6px}
.ml-kop{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gedempt);margin-bottom:2px}
.ml-reg{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;color:var(--inkt)}
.ml-reg::before{content:"";width:13px;height:13px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.6px #C6D5E0}
.ml-reg.aan::before{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/9px no-repeat;box-shadow:none}
.mg{height:100%;display:flex;flex-direction:column;gap:7px}
.mg-kop{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gedempt)}
.mg-bal{display:grid;grid-template-columns:50px 1fr;align-items:center;gap:7px}
.mg-bal i{font-size:8.5px;font-weight:700;color:var(--gedempt);font-style:normal}
.mg-bal b{height:9px;border-radius:5px;background:#8CC8E9;width:var(--w);display:block}
.mg-bal:first-of-type b{background:var(--accent)}
.md{height:100%;display:flex;flex-direction:row}
.md-menu{width:30px;background:#F4F8FB;padding:10px 7px;display:flex;flex-direction:column;gap:7px;border-right:1px solid #E7EEF4}
.md-menu b{height:9px;border-radius:3px;background:var(--accent);display:block}
.md-menu i{height:5px;border-radius:2px;background:#D3E0EA;display:block}
.md-in{flex:1;padding:11px 12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.md-kop{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gedempt)}
.md-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.md-tegels span{font-size:7.5px;font-weight:700;color:var(--inkt);background:#EDF2F6;border-radius:6px;
  padding:8px 4px 16px;text-align:center;line-height:1}
.md-tegels span:first-child{background:#DCEBF6}
.md-bal{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:6px}
.md-bal i{font-size:7.5px;font-weight:700;color:var(--gedempt);font-style:normal}
.md-bal b{height:7px;border-radius:4px;background:#8CC8E9;width:var(--w);display:block}
.md-bal:first-of-type b{background:var(--accent)}
.md-lijst{display:grid;gap:6px}
.md-lijst i{height:5px;border-radius:2px;background:#DCE6EE;display:block}
.md-lijst i:nth-child(2){width:74%}.md-lijst i:nth-child(3){width:88%}

/* sectie 2: uw systeem */
.app{margin-top:30px;background:var(--wit);border-radius:var(--r);overflow:hidden;border:1px solid #E3ECF2;
  box-shadow:0 1px 2px rgba(5,25,35,.05),0 18px 44px rgba(5,25,35,.08)}
.app-balk{display:flex;align-items:center;gap:7px;padding:14px 20px;border-bottom:1px solid #E7EEF4;background:#FBFDFE}
.app-balk i{width:9px;height:9px;border-radius:50%;background:#D7E3EC;display:block}
.app-balk i:first-child{background:var(--accent)}
.app-balk span{margin-left:12px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-diep)}
.app-in{display:grid;grid-template-columns:186px 1fr;min-height:228px}
.app-menu{background:#F5F9FC;border-right:1px solid #E7EEF4;padding:14px 11px;display:grid;gap:4px;align-content:start}
.app-menu span{padding:10px 13px;border-radius:9px;font-size:14.5px;font-weight:700;color:var(--gedempt)}
.app-menu span.aan{background:var(--accent);color:var(--wit)}
.app-vlak{padding:16px 20px 18px;display:flex;flex-direction:column;gap:13px}
.app-kop{display:flex;align-items:baseline;gap:10px}
.app-kop b{font-size:19px;letter-spacing:-.02em;color:var(--inkt)}
.app-kop em{font-style:normal;font-size:13.5px;color:var(--gedempt)}
.app-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.app-tegels div{background:#F2F7FB;border-radius:10px;padding:10px 13px}
.app-tegels span{display:block;font-size:12.5px;font-weight:700;color:var(--gedempt)}
.app-tegels b{display:block;margin-top:2px;font-size:23px;letter-spacing:-.03em;color:var(--inkt)}
.app-tegels div:first-child{background:#E3F1FA}
.app-onder{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.app-balken{display:grid}
.app-bal{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:10px;margin-bottom:9px}
.app-bal i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--gedempt)}
.app-bal b{height:10px;border-radius:5px;background:#9ED2EE;width:var(--w);display:block}
.app-bal:first-child b{background:var(--accent)}
.app-lijst{display:grid;gap:9px}
.app-lijst span{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--inkt)}
.app-lijst span::before{content:"";width:15px;height:15px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.7px #C6D5E0}
.app-lijst span.aan::before{box-shadow:none;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/10px no-repeat}
.bn-pijlen{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;height:30px;margin-top:2px}
.bn-pijlen svg{width:13px;height:100%;justify-self:center;stroke:var(--accent);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.65}
.bronnen{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.bn{background:var(--wit);border:1px solid #E3ECF2;border-radius:14px;padding:17px 12px;display:flex;
  align-items:center;justify-content:center;gap:11px;box-shadow:0 1px 2px rgba(5,25,35,.05)}
.bn img{width:27px;height:27px;object-fit:contain;display:block}
.bn-ic{width:27px;height:27px;color:var(--accent);display:flex}
.bn-ic svg{width:27px;height:27px}
.bn span{font-size:15.5px;font-weight:700;color:var(--inkt)}
.bn-noot{margin-top:15px;font-size:15.5px;color:var(--gedempt);max-width:74ch}

/* sectie 3: u hoeft ons niets uit te leggen */
.uitleg{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4vw,60px);align-items:center}
.ut-beeld{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;max-height:440px}
.ut-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.ut-kaart{position:absolute;left:18px;bottom:18px;background:var(--wit);border-radius:14px;
  padding:16px 20px 18px;display:flex;align-items:flex-end;gap:12px;box-shadow:0 10px 30px rgba(5,25,35,.18)}
.ut-kaart b{font-size:56px;line-height:.82;letter-spacing:-.05em;color:var(--accent);font-weight:800}
.ut-kaart span{font-size:13.5px;font-weight:700;line-height:1.3;color:var(--inkt);padding-bottom:3px}
.punten{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:20px}
.punten li{position:relative;padding-left:18px}
.punten li::before{content:"";position:absolute;left:0;top:.35em;bottom:.15em;width:4px;border-radius:2px;background:var(--accent)}
.punten b{display:block;font-size:19px;letter-spacing:-.02em;color:var(--inkt)}
.punten span{display:block;margin-top:4px;color:var(--gedempt);font-size:15.5px;line-height:1.5;max-width:56ch}

/* smalle schermen */
@media (max-width:1180px){
  .app-in{grid-template-columns:154px 1fr}
  .app-menu span{font-size:13.5px;padding:9px 11px}
  .bn span{font-size:14px}
}
@media (max-width:1000px){
  .schaal2{grid-template-columns:repeat(5,190px);overflow-x:auto;scrollbar-width:none;padding-bottom:6px}
  .schaal2::-webkit-scrollbar{display:none}
  .sk-lijn{margin-inline:95px}
  .schaalkop{margin-top:24px}
  .app-in{grid-template-columns:1fr;min-height:0}
  .app-menu{border-right:0;border-bottom:1px solid #E7EEF4;display:flex;gap:6px;overflow-x:auto;
    padding:10px;scrollbar-width:none}
  .app-menu::-webkit-scrollbar{display:none}
  .app-menu span{flex:none;padding:8px 13px;font-size:13.5px}
  .app-onder{grid-template-columns:1fr;gap:16px}
  .bronnen{grid-template-columns:repeat(3,1fr)}
  .bn-pijlen{display:flex;justify-content:center;height:26px}
  .bn-pijlen svg{display:none;width:16px}
  .bn-pijlen svg:first-child{display:block}
  .uitleg{grid-template-columns:1fr;gap:26px}
  .ut-beeld{aspect-ratio:16/10;max-height:none}
  .punten span{max-width:none}
}
@media (max-width:560px){
  .bronnen{grid-template-columns:repeat(2,1fr)}
  .bn{padding:14px 10px;gap:9px}
  .app-tegels{gap:8px}
  .app-tegels div{padding:9px 10px}
  .app-tegels span{font-size:11px}
  .app-tegels b{font-size:20px}
  .app-vlak{padding:14px 15px 16px}
  .ut-kaart{left:12px;bottom:12px;padding:12px 16px 14px}
  .ut-kaart b{font-size:44px}
}
/* smalle schermen */
@media (max-width:1180px){
  .app-in{grid-template-columns:154px 1fr}
  .app-menu span{font-size:13.5px;padding:9px 11px}
  .bn span{font-size:14px}
}
@media (max-width:1000px){
  .schaal2{grid-template-columns:repeat(5,190px);overflow-x:auto;scrollbar-width:none;padding-bottom:6px}
  .schaal2::-webkit-scrollbar{display:none}
  .sk-lijn{margin-inline:95px}
  .schaalkop{margin-top:24px}
  .app-in{grid-template-columns:1fr;min-height:0}
  .app-menu{border-right:0;border-bottom:1px solid #E7EEF4;display:flex;gap:6px;overflow-x:auto;
    padding:10px;scrollbar-width:none}
  .app-menu::-webkit-scrollbar{display:none}
  .app-menu span{flex:none;padding:8px 13px;font-size:13.5px}
  .app-onder{grid-template-columns:1fr;gap:16px}
  .bronnen{grid-template-columns:repeat(3,1fr)}
  .bn-pijlen{display:flex;justify-content:center;height:26px}
  .bn-pijlen svg{display:none;width:16px}
  .bn-pijlen svg:first-child{display:block}
  .uitleg{grid-template-columns:1fr;gap:26px}
  .ut-beeld{aspect-ratio:16/10;max-height:none}
  .punten span{max-width:none}
}
@media (max-width:560px){
  .bronnen{grid-template-columns:repeat(2,1fr)}
  .bn{padding:14px 10px;gap:9px}
  .app-tegels{gap:8px}
  .app-tegels div{padding:9px 10px}
  .app-tegels span{font-size:11px}
  .app-tegels b{font-size:20px}
  .app-vlak{padding:14px 15px 16px}
  .ut-kaart{left:12px;bottom:12px;padding:12px 16px 14px}
  .ut-kaart b{font-size:44px}
}

/* de schaal op de telefoon: verticaal in plaats van schuiven */
@media (max-width:760px){
  .schaalkop{display:none}
  .schaal2{display:block;overflow:visible;margin-top:26px;padding:0}
  .sk-lijn{display:none}
  .halte{display:block;position:relative;padding:0 0 26px 24px;border-left:3px solid var(--accent)}
  .halte:last-child{border-left-color:transparent;padding-bottom:0}
  .halte:first-child{padding-top:2px}
  .sk-punt{position:absolute;left:-9px;top:4px;width:15px!important;height:15px!important}
  .sk-kaart{height:auto!important;min-height:0;max-width:300px}
  .sk-kaart--1{padding:16px 14px}
  .sk-kaart--2{display:block;max-width:none}
  .sk-kaart--3,.sk-kaart--4{padding:14px}
  .sk-kaart--5{max-width:320px}
  .sk-kaart--5 .md-in{padding:12px 13px;gap:7px;justify-content:flex-start}
  .sk-kaart--5 .md-menu{width:26px;padding:10px 6px}
  .sk-kaart > div{gap:8px}
  .mg-staven{min-height:52px}
  .sk-lab{text-align:left;padding:12px 0 0}
  .sk-lab b{font-size:17.5px}
  .sk-lab span{font-size:14.5px}
  .halte .sk-kaart{order:2}
  .app-menu{flex-wrap:wrap;overflow:visible}
}






/* beeldband tussen de secties (18 september 2026) */
/* vier beelden als smalle strook */
.bandstrook{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--donker)}
.bandstrook img{width:100%;height:clamp(150px,14vw,210px);object-fit:cover;display:block;
  filter:saturate(.7);opacity:.55;transition:opacity .5s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.bandstrook img:hover{opacity:.78;transform:scale(1.04)}
@media (max-width:760px){
  .bandstrook img{height:104px}
}

/* ---------- homepage: rode draad, sectie #oplossing en #hoe (18 september 2026) ---------- */
.drie-punten{grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:28px}
.drie-punten span{max-width:none}
#oplossing .knoppen{margin-top:30px}
#hoe .vs-nr{box-shadow:0 0 0 6px var(--papier-diep)}
@media (max-width:900px){.drie-punten{grid-template-columns:1fr;gap:18px}}
@media (min-width:1181px){#voorwie .skaart:not(.skaart--food) .sk-beeld{height:auto;flex:1;min-height:150px}
  #voorwie .skaart:not(.skaart--food) .sk-in{flex:0 0 auto}}
/* #voorwie: twee kaarten even breed, food en industrie (18 september 2026) */
#voorwie .vier{grid-template-columns:1fr 1fr;gap:22px}
#voorwie .skaart--food{grid-column:auto}
@media (max-width:1180px){#voorwie .vier{grid-template-columns:1fr}
  #voorwie .skaart--industrie{flex-direction:row}#voorwie .skaart--industrie .sk-beeld{flex:0 0 42%;height:auto;min-height:220px}}
@media (max-width:760px){#voorwie .skaart--industrie{flex-direction:column}#voorwie .skaart--industrie .sk-beeld{flex:none;height:170px;min-height:0}}

/* ---------- AI voor Food: informatiepagina (18 september 2026) ---------- */
.cijfers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}
.cijfer{background:var(--wit);border-radius:var(--r);padding:clamp(20px,2.2vw,28px);box-shadow:0 1px 0 var(--lijn)}
.cijfer b{display:block;font-size:clamp(38px,3.6vw,54px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--accent-diep)}
.cijfer span{display:block;margin-top:12px;color:var(--gedempt);font-size:15px;line-height:1.5}
.cijfers-slot{margin-top:24px;font-size:clamp(17px,1.4vw,20px);font-weight:700;color:var(--inkt)}
.punten--twee{grid-template-columns:1fr 1fr;gap:22px clamp(24px,3.5vw,56px)}
.punten--twee span{max-width:none}
#waarom .citaat{margin-top:24px}
#waarom .ut-beeld{max-height:none;aspect-ratio:3/4}
@media (max-width:1180px){.cijfers{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.punten--twee{grid-template-columns:1fr}}
@media (max-width:600px){.cijfers{grid-template-columns:1fr;gap:14px}}
.cijfer em{display:block;margin-top:10px;font-style:normal;font-weight:700;font-size:clamp(16px,1.3vw,18px);line-height:1.3;color:var(--accent)}
.cijfer em+span{margin-top:8px}

/* ---------- Wat het kost: plussen en minnen per keuze (18 september 2026) ---------- */
.prijs{display:flex;flex-direction:column}
.prijs .pm{margin-top:18px;padding-top:16px;border-top:1px solid var(--lijn)}
.prijs .pm h3{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gedempt);margin:0 0 10px}
.prijs .pm--in h3{color:var(--accent-diep)}
.prijs .pm ul{list-style:none;margin:0;padding:0}
.prijs .pm li{position:relative;padding-left:26px;margin-bottom:9px;font-size:14.5px;line-height:1.45;color:var(--inkt)}
.prijs .pm--uit li{color:var(--gedempt)}
.prijs .pm li::before{content:"";position:absolute;left:0;top:.2em;width:16px;height:16px;border-radius:50%;
  background:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8M8 4v8' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-size:100% 100%}
.prijs .pm--uit li::before{background:var(--papier-diep);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='%230E1737' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-size:100% 100%;opacity:.7}
.prijs .pm--uit{margin-top:auto;padding-top:16px}
.prijs .pm--in+.pm--uit{margin-top:18px}
.waarom-rij{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,3vw,44px);margin-top:34px}
.waarom{border-top:2px solid var(--accent);padding-top:18px}
.waarom b{display:block;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.02em;color:var(--wit)}
.waarom p{margin-top:8px;font-size:15.5px;line-height:1.55;color:#C9D6E2}
@media (max-width:900px){.waarom-rij{grid-template-columns:1fr;gap:20px}}

/* ---------- Opsight One op Producten (18 september 2026) ---------- */
.uitleg--one{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center}
.one-beeld img{display:block;width:100%;height:auto}
.one-noot{margin-top:6px;text-align:center;font-size:14px;color:var(--gedempt)}
.one-naam{display:block;font-size:.62em;letter-spacing:-.02em;color:var(--gedempt);margin-bottom:8px}
.one-naam b{color:var(--accent)}
#platform .punten{margin-top:24px}
.modules{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.modules li{background:var(--papier);border:1px solid var(--lijn);border-radius:16px;padding:18px 20px}
.modules b{display:block;font-size:17px;letter-spacing:-.02em;color:var(--inkt)}
.modules span{display:block;margin-top:5px;color:var(--gedempt);font-size:14.5px;line-height:1.5}
@media (max-width:1060px){.modules{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.uitleg--one{grid-template-columns:1fr}.one-beeld{max-width:520px;margin:0 auto}}
@media (max-width:620px){.modules{grid-template-columns:1fr}}
.punten--drie{grid-template-columns:repeat(3,1fr);gap:22px clamp(24px,3.5vw,56px);margin-top:34px}
.punten--drie span{max-width:none}
@media (max-width:900px){.punten--drie{grid-template-columns:1fr;gap:20px;margin-top:28px}}

/* ---------- Producten als verkooppagina (18 september 2026) ---------- */
.hero--prod .wrap{grid-template-columns:1fr 1.05fr;align-items:center}
.hero--prod .hero-beeld{aspect-ratio:auto;box-shadow:none;background:transparent;overflow:visible}
.hero--prod .hero-beeld img{height:auto;object-fit:contain;filter:drop-shadow(0 26px 40px rgba(5,25,35,.18))}
.ps{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.ps--om{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.ps-tekst small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-diep);margin-bottom:10px}
.ps-tekst .lead{max-width:none}
.ps-tekst .pil{display:inline-block;margin-top:24px}
.ps-beeld{display:flex;align-items:center;justify-content:center;min-height:300px}
.mk--groot{display:flex;flex-direction:row;align-items:center;gap:26px;transform:scale(1.9)}
.mk--groot .mk-app,.mk--groot .mk-mid{display:flex;flex-direction:column;align-items:center;gap:6px}
.net{position:relative;width:270px;height:170px}
.net svg{position:absolute;inset:0;width:100%;height:100%}
.net svg path{stroke:var(--accent);stroke-width:2;fill:none;opacity:.7}
.net .nd{position:absolute;padding:7px 11px;font-size:12.5px;font-weight:700;color:var(--inkt);gap:7px;background:var(--wit);border-radius:12px;display:flex;flex-direction:row;align-items:center;box-shadow:0 4px 14px rgba(5,25,35,.08);white-space:nowrap}
.net .nd img,.net .nd .bn-ic{position:static;width:18px;height:18px;display:block;color:var(--accent-diep);margin:0;flex:none}
.net .nd .bn-ic svg{width:18px;height:18px;display:block}
.net .n1{left:0;top:6px}.net .n2{right:0;top:6px}.net .n3{left:0;bottom:6px}.net .n4{right:0;bottom:6px}
.net .nm{left:50%;top:50%;transform:translate(-50%,-50%);background:var(--accent-knop);color:var(--wit);padding:7px 12px}
.net--groot{transform:scale(1.5)}
.mt--groot{height:auto;width:130px;transform:scale(1.7);box-shadow:0 14px 30px rgba(5,25,35,.14)}
.ps--one .wm{height:52px;width:auto;margin-bottom:16px;display:block}
.ps--one .punten{margin-top:22px;gap:14px}
.ps--one .punten b{font-size:17px}
.ps--one .punten span{font-size:14.5px}
.ps-beeld--one img{width:100%;height:auto;filter:drop-shadow(0 26px 40px rgba(5,25,35,.18))}
@media (max-width:900px){.hero--prod .wrap{grid-template-columns:1fr}.ps,.ps--om{grid-template-columns:1fr}.ps .ps-tekst{order:1}.ps .ps-beeld{order:2}.ps-beeld{min-height:240px}.mk--groot{transform:scale(1.4)}.net--groot{transform:scale(1.1)}.mt--groot{transform:scale(1.3)}}
/* kleine applicaties: schermpje en lijst */
.ka{width:min(100%,300px);background:var(--wit);border-radius:20px;box-shadow:0 22px 44px rgba(5,25,35,.16);overflow:hidden;border:1px solid var(--lijn)}
.ka-balk{display:flex;align-items:center;gap:10px;background:var(--donker);color:var(--wit);padding:13px 16px;font-size:14px;font-weight:700}
.ka-balk i{width:10px;height:10px;border-radius:50%;background:var(--accent-donker)}
.ka-balk em{margin-left:auto;font-style:normal;font-weight:600;font-size:12px;color:var(--gedempt-licht)}
.ka-in{padding:14px 16px 16px;display:grid;gap:8px}
.ka-veld{display:flex;justify-content:space-between;align-items:center;background:var(--papier-diep);border-radius:10px;padding:9px 12px;font-size:13px;color:var(--gedempt)}
.ka-veld b{color:var(--inkt);font-size:15px}
.ka-check{position:relative;padding:8px 12px 8px 34px;font-size:13.5px;color:var(--inkt);border:1px solid var(--lijn);border-radius:10px}
.ka-check::before{content:"";position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;border-radius:50%;border:2px solid var(--lijn)}
.ka-check.aan::before{background:var(--accent);border-color:var(--accent)}
.ka-check.aan::after{content:"";position:absolute;left:16px;top:50%;width:5px;height:9px;border:solid var(--wit);border-width:0 2px 2px 0;transform:translateY(-62%) rotate(45deg)}
.ka-knop{margin-top:4px;background:var(--accent-knop);color:var(--wit);text-align:center;border-radius:999px;padding:10px;font-size:14px;font-weight:700}
.ka-lijst{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:8px}
.ka-lijst li{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:11px 16px;font-size:15px}
.ka-lijst b{color:var(--inkt);font-weight:600}
.ka-lijst span{flex:none;font-size:12.5px;font-weight:700;color:var(--accent-diep);background:var(--papier-diep);border-radius:999px;padding:4px 10px}
@media (max-width:560px){.ka-lijst li{flex-direction:column;align-items:flex-start;gap:6px}}
.ka-kop{margin-top:22px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-diep)}
.ka-kop + .ka-lijst{margin-top:10px}

/* ---------- AI voor Food: Onze mogelijkheden (18 september 2026) ---------- */
.mog{gap:18px;margin-top:28px;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
@media (max-width:1180px){.mog{grid-template-columns:repeat(2,1fr)}}
.mog .skaart{text-decoration:none}
.mog .skaart .sk-beeld{height:clamp(140px,12vw,170px)}
.mog .skaart:hover{box-shadow:0 1px 0 var(--lijn),0 28px 50px -30px rgba(5,25,35,.55)}
.mog .skaart:hover .sk-knop{text-decoration:underline}
@media (max-width:760px){.mog{grid-template-columns:1fr;gap:14px}.mog .skaart{flex-direction:row}
  .mog .skaart .sk-beeld{flex:0 0 36%;height:auto}.mog .sk-beeld img{position:absolute;inset:0}}

/* ---------- Diensten: drie vormen, knoppen op gelijke hoogte (18 september 2026) ---------- */
.ovs--vormen .ov{display:flex;flex-direction:column}
.ovs--vormen .ov .meer{margin-top:auto;padding-top:18px}

/* ---------- AI voor Food: banner met een beeld tussen twee secties (18 september 2026) ---------- */
.bandstrook--pagina{grid-template-columns:1fr;grid-auto-flow:row}
/* Hoogte loopt mee met de breedte: op een telefoon een strook van 112 pixels,
   op een breed scherm tot 260, zodat het beeld daar geen streep wordt. */
.bandstrook--pagina img{height:clamp(112px,15vw,260px)}
@media (max-width:760px){.bandstrook--pagina{grid-template-columns:1fr}.bandstrook--pagina img{height:112px}}


/* ---------- AI voor Food (20 september 2026): groen thema, oplossingskaartjes, metertjes ---------- */
/* Het groene palet van de scansite, alleen op ai.html. Onze mogelijkheden krijgt daarbinnen
   de Opsight-kleuren terug via .thema-opsight. */
.thema-food{
  --papier:#F5F9F6; --papier-diep:#EEF2EF; --accent-zacht:#AEDCC0; --inkt:#343E3D; --donker:#343E3D;
  --accent:#6FB894; --accent-knop:#607466; --accent-diep:#607466; --accent-donker:#AEDCC0;
  --gedempt:#607466; --gedempt-licht:#D9DFDB; --lijn:#D9DFDB;
}
.thema-opsight,.thema-food .balk{
  --papier:#FFFFFF; --papier-diep:#EDF3F8; --accent-zacht:#D2E6F1; --inkt:#051923; --donker:#003554;
  --accent:#0088CC; --accent-knop:#006494; --accent-diep:#00567D; --accent-donker:#4FB3E8;
  --gedempt:#4A6472; --gedempt-licht:#B9C2C9; --lijn:#DBE5EC;
}
.knopnoot{font-size:14px;color:var(--gedempt);align-self:center}
/* metertjes op de AI-pagina, zonder schaduw */
.meterrij{display:grid;gap:12px;margin-top:24px}
@media (min-width:640px){.meterrij{grid-template-columns:repeat(4,1fr);gap:16px}}
.meterrij .meter{box-shadow:none;border:1px solid var(--lijn);background:var(--papier)}
.meterrij.op.aan .vul{stroke-dashoffset:var(--rest)}
.feiten-drie{margin-top:28px}
.cijfers-slot b{color:var(--inkt)}
/* de vijftien kaartjes */
.opl-kaarten{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:400px){.opl-kaarten{grid-template-columns:1fr 1fr}}
@media (min-width:760px){.opl-kaarten{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1080px){.opl-kaarten{grid-template-columns:repeat(5,1fr)}}
.opl-kaart{background:var(--papier);border:1px solid var(--lijn);border-radius:14px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:3px}
.sec--band .opl-kaart{background:var(--wit)}
.opl-ico{width:28px;height:28px;margin-bottom:4px;fill:none;stroke:var(--inkt);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.opl-ico .vul{fill:var(--accent-zacht);stroke:var(--inkt)}
.opl-kaart b{font-size:14.5px;line-height:1.25;color:var(--inkt)}
.opl-kaart p{font-size:13px;color:var(--gedempt);line-height:1.4;flex:1;margin:0}
.opl-meer{align-self:flex-start;margin-top:6px;background:none;border:0;padding:0;font:inherit;font-size:12.5px;font-weight:700;color:var(--accent-diep);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.opl-meer:hover{color:var(--inkt)}
.opl-na{margin:26px auto 0;max-width:640px;text-align:center;color:var(--gedempt);font-size:16px}
.venster--opl{width:min(560px,calc(100% - 32px))}
.venster--opl .opl-label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--gedempt);font-weight:700;margin-bottom:6px}
.venster--opl h2{font-size:22px}
.venster--opl .opl-tekst{font-size:16px;color:var(--gedempt);margin:14px 0 0;line-height:1.5}
.venster--opl .opl-tekst:first-of-type{margin-top:18px}

/* menu-item AI voor Food in de eigen kleuren (20 september 2026) */
.balk nav a.nav-food:not(.pil){display:inline-flex;align-items:center;gap:7px;margin-left:10px;margin-right:12px;position:relative}
.balk nav a.nav-food[aria-current],.balk nav a.nav-food:not(.pil):hover{background:transparent;box-shadow:none;color:var(--inkt)}
.balk nav a.nav-food:not(.pil)::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:1px;background:var(--lijn)}
.nav-ico{width:18px;height:18px;border-radius:5px;display:inline-block;flex:none}
.menu a.nav-food{display:flex;align-items:center;gap:9px}

/* mini-stappen in de hero (20 september 2026): vier stapjes naast elkaar, icoontje en lijntje, met een rustig loopje */
.ministappen{list-style:none;margin:22px 0 4px;padding:0;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:0;max-width:100%}
.ministappen li{display:flex;align-items:flex-start;gap:9px;font-size:14px;font-weight:600;color:var(--gedempt);white-space:nowrap}
.ministappen li+li::before{content:"";display:block;width:26px;height:2px;margin:17px 10px 0;align-self:flex-start;background:var(--lijn);transform-origin:left;animation:msLijn 6s ease-in-out infinite;animation-delay:calc(var(--i) * 1.1s - .5s)}
.ministappen .ms-ico{width:36px;height:36px;border-radius:50%;background:var(--papier);border:1.5px solid var(--lijn);display:grid;place-items:center;color:var(--inkt);flex:none;animation:msIco 6s ease-in-out infinite;animation-delay:calc(var(--i) * 1.1s)}
.ministappen .ms-ico svg{width:19px;height:19px}
@keyframes msIco{0%,24%,100%{background:var(--papier);border-color:var(--lijn);transform:none}6%,14%{background:var(--accent);border-color:var(--accent);color:var(--papier);transform:scale(1.08)}}
@keyframes msLijn{0%{transform:scaleX(0)}8%,100%{transform:scaleX(1)}}
.ministappen.vert{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;width:max-content;max-width:100%}
.ministappen.vert li{position:relative;padding:6px 0;white-space:normal}
.ministappen.vert li+li::before{position:absolute;left:17px;top:-10px;height:16px;width:2px;margin:0;display:block;transform-origin:top;animation-name:msLijnV}
.ministappen.vert .ms-t{align-items:flex-start;text-align:left}
.ministappen.vert .ms-t small{max-width:260px}
@keyframes msLijnV{0%{transform:scaleY(0)}8%,100%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.ministappen .ms-ico,.ministappen li+li::before{animation:none}}

.ministappen .ms-t{display:flex;flex-direction:column;gap:2px;white-space:normal}
.ministappen .ms-t small{font-size:12px;font-weight:500;line-height:1.3;opacity:.85;max-width:170px}

/* de merknaam in de kop van ai.html, in de kleuren van het logo (20 september 2026) */
.merknaam{white-space:nowrap}
.merknaam b{color:#607466;font-weight:inherit}
.merknaam i{color:#6FB894;font-style:normal}
.merknaam u{color:var(--inkt);text-decoration:none}


/* telefoon: AI voor Food alleen in het menu, hamburgerknop in het accentblauw (20 september 2026) */
@media (max-width:900px){
  .balk nav a.nav-food:not(.pil){display:none}
  .menuknop{background:var(--accent-knop);color:var(--wit)}
}

/* mini-stappen: nummer voor de titel, laatste stapje wordt groen met een puls (20 september 2026) */
.ministappen .ms-n{font-style:normal;color:var(--accent);font-weight:700;margin-right:6px}
.ministappen li:last-child .ms-ico{animation-name:msIcoLaatst}
@keyframes msIcoLaatst{0%,100%{background:var(--papier);border-color:var(--lijn);transform:none;box-shadow:0 0 0 0 rgba(7,145,255,0)}5%{background:var(--accent);border-color:var(--accent);color:var(--papier);transform:scale(1.08);box-shadow:0 0 0 0 rgba(7,145,255,.45)}12%{box-shadow:0 0 0 12px rgba(7,145,255,0)}14%,24%{background:var(--accent);border-color:var(--accent);color:var(--papier);transform:scale(1.02);box-shadow:0 0 0 0 rgba(7,145,255,0)}30%{background:var(--papier);border-color:var(--lijn);color:var(--inkt);transform:none}}

/* vijf stappen van de AI-scan: op een breed scherm in een rij, zodat er geen
   los kaartje op een tweede regel overblijft (22 september 2026) */
@media (min-width:1080px){
  .ovs--vijf{grid-template-columns:repeat(5,1fr);gap:14px}
  .ovs--vijf .ov{padding:18px 16px}
  .ovs--vijf .ov .rom{width:30px;height:30px;font-size:15px;margin-bottom:10px}
  .ovs--vijf .ov h3{font-size:18px;max-width:none}
  .ovs--vijf .ov p{font-size:14.5px;margin-top:8px;max-width:none}
}
@media (min-width:700px) and (max-width:1079px){
  .ovs--vijf{grid-template-columns:repeat(2,1fr)}
  .ovs--vijf .ov:last-child{grid-column:span 2}
}

/* introductiefilm van de AI-scan: rechtopstaand, naast de vijf stappen
   (22 september 2026) */
.scanfilm{max-width:330px;margin:22px auto 0;position:relative}
/* de film speelt gedempt; met deze knop zet de bezoeker het geluid aan */
.geluidknop{position:absolute;right:12px;bottom:12px;width:42px;height:42px;border-radius:50%;
  background:rgba(20,28,26,.55);color:#fff;border:1px solid rgba(255,255,255,.28);
  display:grid;place-items:center;cursor:pointer;transition:background .2s}
.geluidknop:hover{background:rgba(20,28,26,.75)}
.geluidknop svg{width:20px;height:20px;display:block}
.geluidknop .luid{display:none}
.geluidknop.aan .luid{display:block}
.geluidknop.aan .stil{display:none}
.scanfilm video{display:block;width:100%;aspect-ratio:9/16;border-radius:var(--r);
  background:#343E3D;box-shadow:0 14px 32px rgba(16,24,22,.14)}
.scanduo{display:grid;gap:22px;align-items:start;margin-top:22px}
@media (min-width:900px){
  /* het blok als geheel smal houden, anders rekt de stappenkolom op een breed
     scherm mee en blijft de film klein */
  /* kop, uitleg en stappen links, de film rechts even hoog, zodat het samen
     een blok vormt dat op een laptop in beeld past */
  .scanduo{--filmh:min(52vh,480px);
    grid-template-columns:minmax(0,600px) auto;gap:48px;max-width:1060px;
    margin-left:0;margin-right:auto;align-items:end}
  .scanduo .scanlinks{display:block}
  .scanduo .scanlinks h2{font-size:clamp(24px,2.3vw,32px)}
  .scanduo .scanlinks .lead{font-size:15.5px;margin-top:10px}
  .scanduo .ovs{margin-top:16px;gap:7px}
  .scanduo .scanfilm{margin:0;max-width:none;width:-moz-fit-content;width:fit-content;
    height:var(--filmh)}
  .scanduo .scanfilm video{height:100%;width:auto}
  .scanduo .ovs--kolom{grid-template-columns:1fr;gap:8px}
  .scanduo .ovs--kolom .ov{display:flex;flex-wrap:wrap;align-items:center;gap:1px 10px;
    padding:8px 12px}
  .scanduo .ovs--kolom .ov .rom{width:23px;height:23px;font-size:12px;margin-bottom:0}
  .scanduo .ovs--kolom .ov h3{flex:1 1 auto;min-width:0;font-size:14px;max-width:none}
  .scanduo .ovs--kolom .ov p{width:100%;margin-top:0;font-size:12.2px;line-height:1.35;
    max-width:none;padding-left:33px}
}

/* De sectie van de AI-scan staat op aivoorfood.nl en op opsight.nl gelijk, op
   elke schermbreedte. Deze regels trekken de laatste verschillen recht
   (22 september 2026) */
#scan{padding-block:32px}
/* dezelfde kop: op een telefoon groter dan de standaardkop van opsight.nl, en
   op een breed scherm dezelfde staffel en regelafstand */
.scanduo .scanlinks h2{font-size:clamp(25px,6.4vw,32px);line-height:1.12}
@media (min-width:900px){
  .scanduo .scanlinks h2{font-size:clamp(24px,2.4vw,32px);line-height:1.12}
}
/* dezelfde regelafstand in de kaartkop */
.scanduo .ov h3{line-height:1.2}
/* de vijf stappen staan in de scanduo altijd onder elkaar; zonder deze regel
   pakt de laatste kaart tussen 700 en 1079 pixels twee kolommen en valt het
   rijtje uiteen */
.scanduo .ovs--vijf .ov:last-child{grid-column:auto}

/* hero-slider op de AI voor Food-pagina (25-09-2026) */
.hs{width:100%}
.hs-baan{display:grid}
.hs-dia{grid-area:1/1;opacity:0;visibility:hidden;transform:translateX(16px);transition:opacity .5s ease,transform .5s ease,visibility 0s linear .5s}
.hs-dia.aan{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease,transform .5s ease,visibility 0s}
.hero .hs-kop{font-size:clamp(25px,3vw,40px);max-width:23ch;line-height:1.1}
.hs-dia p{margin-top:16px;color:var(--gedempt);font-size:clamp(16px,1.15vw,18px);max-width:52ch}
.hs-dia p b{color:var(--inkt)}
.hs-stappen .ministappen{margin-top:16px}
.hs-nav{display:flex;align-items:center;gap:16px;margin:24px 0 4px}
.hs-bollen{display:flex;gap:13px}
.hs-bol{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--accent-knop);background:transparent;padding:0;cursor:pointer;transition:background .25s,border-color .25s}
.hs-bol.aan{background:var(--accent);border-color:var(--accent)}
.hs-pijl{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--lijn);background:var(--papier);color:var(--inkt);display:grid;place-items:center;cursor:pointer;padding:0;transition:border-color .2s,background .2s}
.hs-pijl:hover{border-color:var(--accent-knop)}
.hs-pijl svg{width:20px;height:20px}
.hs-bol:focus-visible,.hs-pijl:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.hs-dia,.hs-dia.aan{transition:none;transform:none}}
@media (max-width:640px){
  .hs-stappen .ministappen .ms-t small{display:none}
  .hs-stappen .ministappen li{padding:4px 0;align-items:center}
  .hs-stappen .ministappen li+li::before{top:-8px;height:12px}
}

/* het hele bedrijf in beweging, in plaats van de vijftien kaartjes (27 september 2026) */
.bedrijf-beeld{position:relative;display:block;margin-top:26px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#fff}
.bedrijf-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.bedrijf-film{position:absolute;left:0;width:100%;top:0;height:100%;object-fit:fill;opacity:0;transition:opacity .6s ease;pointer-events:none}
.bedrijf-film.loopt{opacity:1}
#watdoet .knoppen{margin-top:22px}

/* plattegrond zoals op aivoorfood.nl, in Opsight-stijl (27 september 2026) */
.pl{margin-top:26px}
.pl-heel{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#fff}
.pl-heel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pl-heel>.bedrijf-film{position:absolute;left:0;width:100%;top:0;height:100%;object-fit:fill}
.pl-tik{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.pl-tik polygon{fill:transparent;stroke:transparent;cursor:pointer;transition:fill .15s;-webkit-tap-highlight-color:transparent}
.pl-tik a:hover polygon{fill:rgba(0,136,204,.12);stroke:rgba(0,136,204,.7);stroke-width:2;vector-effect:non-scaling-stroke}
.pl-tik polygon:active{fill:rgba(0,136,204,.18)}
.pl-pin{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;display:grid;place-items:center;z-index:2;text-decoration:none}
.pl-pin i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--accent-knop);color:var(--wit);display:grid;place-items:center;font-size:12px;font-weight:700;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,53,84,.35);transition:transform .2s,background .2s}
.pl-pin span{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-2px);white-space:nowrap;background:var(--wit);color:var(--inkt);font-size:13px;font-weight:600;padding:6px 10px;border-radius:8px;box-shadow:0 6px 18px rgba(0,53,84,.18);opacity:0;pointer-events:none;transition:opacity .15s}
.pl-pin:hover i,.pl-pin:focus-visible i{background:var(--accent);transform:scale(1.15)}
.pl-pin:hover span,.pl-pin:focus-visible span{opacity:1}
.pl-helften{display:none}
.pl-hint{margin-top:12px;font-size:14px;color:var(--gedempt)}
@media (max-width:700px){
  .pl-heel{display:none}
  .pl-helften{display:grid;gap:18px}
  .pl-hkop{margin:0 0 2px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-diep);font-weight:600}
  .pl-hsub{margin:0 0 8px;font-size:12.5px;color:var(--gedempt);line-height:1.4}
  .pl-hbeeld{position:relative;width:100%;overflow:hidden;border-radius:14px;background:#fff}
  .pl-hbeeld img,.pl-hbeeld .bedrijf-film{position:absolute;max-width:none}
  .pl-hbeeld .bedrijf-film{object-fit:fill}
  .pl-pin span{display:none}
}
/* venster per afdeling en lijst onder de plattegrond (27 september 2026) */
.pl-pin{border:0;padding:0;background:none;cursor:pointer;font:inherit}
.pl-tik polygon{cursor:pointer}
.pl-tik polygon:hover{fill:rgba(0,136,204,.12);stroke:rgba(0,136,204,.7);stroke-width:2;vector-effect:non-scaling-stroke}
.pl-lijst{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);column-gap:28px;border-top:1px solid var(--lijn)}
.pl-lijst li{border-bottom:1px solid var(--lijn)}
.pl-lijst button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:30px 1fr;gap:0 8px;width:100%;padding:12px 0}
.pl-lijst .n{grid-row:span 2;font-size:13px;font-weight:700;color:var(--accent-knop);padding-top:2px}
.pl-lijst .t{font-weight:600;color:var(--inkt);font-size:15px;line-height:1.3}
.pl-lijst .a{font-size:13px;color:var(--gedempt)}
.pl-lijst button:hover .t,.pl-lijst button:focus-visible .t{color:var(--accent-knop)}
.venster--afd{width:min(620px,calc(100% - 32px))}
.venster--afd .afd-foto{display:block;width:100%;height:180px;object-fit:cover;border-radius:12px;margin:16px 0 18px}
.afd-kop{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gedempt);margin:0 0 6px;font-weight:600}
.afd-lijst{border-top:1px solid var(--lijn)}
.afd-it{border-bottom:1px solid var(--lijn);padding:14px 0}
.afd-it>b{display:flex;gap:10px;align-items:center;font-size:16px;color:var(--inkt);line-height:1.25}
.afd-it .ico{width:26px;height:26px;flex:0 0 26px}
.afd-rw{display:grid;grid-template-columns:58px 1fr;gap:6px 10px;margin-top:10px;font-size:14.5px;line-height:1.45}
.afd-rw span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding-top:3px;font-weight:700}
.afd-rw .nu{color:var(--gedempt)}.afd-rw .st{color:var(--accent-knop)}
.afd-rw p{margin:0;color:var(--inkt)}.afd-rw p.nu{color:var(--gedempt)}
.afd-vb{margin:8px 0 0 68px;font-size:13.5px;color:var(--gedempt);line-height:1.45}
.venster--afd .knoppen{margin-top:20px}
@media (max-width:1000px){.pl-lijst{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.pl-lijst{grid-template-columns:1fr 1fr;column-gap:18px}.pl-lijst .t{font-size:14px}.afd-vb{margin-left:0}.venster--afd .afd-foto{height:140px}}

/* kaartje bij aanwijzen van een ruimte (27 september 2026) */
.pl-kaartje{position:absolute;z-index:3;pointer-events:none;width:250px;background:var(--wit);border:1px solid var(--lijn);border-radius:12px;box-shadow:0 12px 30px rgba(0,53,84,.18);padding:12px 14px;transform:translate(24px,-50%);opacity:0;transition:opacity .15s}
.pl-kaartje.aan{opacity:1}
.pl-kaartje.links{transform:translate(calc(-100% - 24px),-50%)}
.pl-kaartje.boven{transform:translate(24px,calc(-100% + 10px))}
.pl-kaartje.links.boven{transform:translate(calc(-100% - 24px),calc(-100% + 10px))}
.pl-knr{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-knop);font-weight:700;margin-bottom:2px}
.pl-kaartje b{display:block;font-size:15px;color:var(--inkt)}
.pl-kl{display:grid;gap:3px;margin-top:6px}
.pl-kl span{font-size:13px;color:var(--gedempt);line-height:1.35}
.pl-kl span::before{content:"\2013  ";color:var(--accent)}
.pl-kaartje small{display:block;margin-top:6px;font-size:12px;color:var(--accent-knop);font-weight:600}
.pl-tik polygon.aan{fill:rgba(0,136,204,.12);stroke:rgba(0,136,204,.7);stroke-width:2;vector-effect:non-scaling-stroke}
.pl-pin.aan i{background:var(--accent);transform:scale(1.15)}
.pl-heel .pl-pin span{display:none}
@media (hover:none){.pl-kaartje{display:none}}
/* hero van de home: film samen aan de lijn (27 september 2026) */
.hero-lijn{position:relative;min-height:min(88vh,860px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:#021826;color:#fff}
.hero-lijn .hl-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:80% 20%}
.hero-lijn::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(2,24,38,.92) 0%,rgba(2,24,38,.78) 30%,rgba(2,24,38,.25) 60%,rgba(2,24,38,0) 80%),linear-gradient(0deg,rgba(2,24,38,.85) 0%,rgba(2,24,38,0) 32%)}
.hero-lijn .hl-tekst{position:relative;z-index:2;width:100%;padding-top:120px}
.hero-lijn h1{font-size:clamp(34px,3.7vw,54px);line-height:1.04;letter-spacing:-.03em;color:#fff;max-width:14ch;margin:0}
.hero-lijn h1 em{font-style:normal;color:var(--accent-donker);text-decoration:none}
.hero-lijn p{color:#D6E0E7;font-size:clamp(17px,1.3vw,20px);line-height:1.5;max-width:46ch;margin:22px 0 0}
.hl-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.hl-link{color:#fff;font-weight:600;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.5);padding-bottom:2px}
.hl-link:hover{border-bottom-color:#fff}
.hl-rij{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.18);margin-top:44px}
.hl-rij .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding-block:22px 30px}
.hl-rij a{text-decoration:none;color:#fff;display:block}
.hl-rij small{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-donker);font-weight:600;margin-bottom:6px}
.hl-rij b{font-size:17px;font-weight:600}
.hl-rij b::after{content:" \2192";color:var(--accent-donker)}
.hl-rij span{display:block;color:#B9C8D2;font-size:14.5px;margin-top:3px}
.hl-rij a:hover b{text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){
  .hero-lijn{display:block;min-height:0}
  .hero-lijn .hl-media{position:relative;height:460px}
  .hero-lijn .hl-film{object-position:66% 20%}
  .hero-lijn .hl-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;z-index:1;background:linear-gradient(0deg,#021826 8%,rgba(2,24,38,0))}
  .hero-lijn::after{background:linear-gradient(0deg,#021826 0%,#021826 44%,rgba(2,24,38,.55) 60%,rgba(2,24,38,0) 78%)}
  .hero-lijn .hl-tekst{margin-top:-120px;padding-top:0;padding-bottom:10px}
  .hero-lijn h1{font-size:34px}
  .hl-rij{margin-top:30px}
  .hl-rij .wrap{grid-template-columns:1fr;gap:16px;padding-block:18px 26px}
}
/* pins op de telefoon kleiner (27 september 2026) */
@media (max-width:700px){.pl-hbeeld .pl-pin i{width:20px;height:20px;font-size:10px;border-width:1.5px}}

/* plattegrond (28 september 2026): klein kaartje met foto en drie vinkjes, lijst in drie groepen */
.pl-kaartje{width:264px;padding:0;overflow:hidden}
.pl-kfoto{display:block;width:100%;height:88px;object-fit:cover}
.pl-kin{padding:10px 14px 13px}
.pl-vinken{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:7px}
.pl-vinken li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.35;color:var(--inkt);font-weight:500;padding:0}
.pl-vinken li::before{content:none}
.pl-vinken svg{width:18px;height:18px;flex:none;color:#fff;background:var(--accent);border-radius:5px;padding:2px}
.venster--afd{width:min(460px,calc(100% - 32px))}
.venster--afd .afd-foto{height:150px;margin:14px 0 4px}
.venster--afd .pl-vinken{gap:10px;margin-top:12px}
.venster--afd .pl-vinken li{font-size:16px}
.venster--afd .pl-vinken svg{width:22px;height:22px;border-radius:6px}
.pl-groepen{display:grid;grid-template-columns:repeat(3,1fr);column-gap:32px;margin-top:22px}
.pl-gkop{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-knop);font-weight:700;margin:0 0 4px}
.pl-groep ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.pl-groep li{border-bottom:1px solid var(--lijn);padding:0}
.pl-groep li::before{content:none}
.pl-groep button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:30px 1fr;gap:0 8px;width:100%;padding:11px 0}
.pl-groep .n{font-size:13px;font-weight:700;color:var(--accent-knop);padding-top:2px}
.pl-groep .t{font-weight:600;color:var(--inkt);font-size:15px;line-height:1.3}
.pl-groep button:hover .t,.pl-groep button:focus-visible .t{color:var(--accent-knop)}
@media (max-width:700px){.pl-groepen{grid-template-columns:1fr;row-gap:18px}.pl-groep ol{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}.pl-groep .t{font-size:14px}.pl-groep button{grid-template-columns:26px 1fr}}
.pl-kaartje.onder{transform:translate(24px,-28px)}
.pl-kaartje.links.onder{transform:translate(calc(-100% - 24px),-28px)}

/* 28 september 2026: regels op een regel op de computer */
@media (min-width:700px){
  .pl-kaartje{width:auto;min-width:264px;max-width:400px}
  .pl-kaartje .pl-vinken li{white-space:nowrap}
}

/* afdelingsvenster zacht openen (28 september 2026) */
.venster--afd[open]{animation:afdIn .28s cubic-bezier(.2,.8,.3,1)}
.venster--afd[open]::backdrop{animation:afdLag .28s ease}
@keyframes afdIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes afdLag{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.venster--afd[open],.venster--afd[open]::backdrop{animation:none}}

/* AI voor Food (29 september 2026): bewegende bedrijfsillustratie in de hero */
.hero--rondgang .hero-beeld{aspect-ratio:auto;background:none;box-shadow:none;overflow:visible}
.hero--rondgang .hero-rondgang{display:block;width:100%;height:auto;aspect-ratio:16/11;border:0;background:none}

/* hero home (29 september 2026): dashboard en telefoon in plaats van film */
.hero-lijn--schermen{min-height:0;background:#0E1737;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"tekst beeld" "rij rij";align-items:center;column-gap:clamp(24px,4vw,64px);padding-top:clamp(120px,14vw,160px)}
.hero-lijn--schermen::after{display:none}
.hero-lijn--schermen .hl-tekst{grid-area:tekst;margin-right:0;max-width:none;width:100%;padding-top:0;padding-bottom:clamp(40px,6vw,80px);padding-left:max(24px,calc((100vw - 1240px)/2 + 24px))}
.hero-lijn--schermen .hl-rij{grid-area:rij}
.hl-schermen{grid-area:beeld;position:relative;margin-right:max(24px,calc((100vw - 1240px)/2 + 24px));margin-bottom:clamp(40px,6vw,80px);padding-right:9%}
.hw-kaart{margin:0;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12)}
.hw-kaart img{display:block;width:100%;height:auto}
.hw-kaart{position:relative}
.hw-demo{position:absolute;left:0;top:0;width:1280px;height:800px;border:0;transform-origin:0 0;opacity:0;transition:opacity .6s;pointer-events:none;background:#EEF1F6}
.hw-kaart.leeft .hw-demo{opacity:1}
.hw-tel{position:absolute;right:0;bottom:44px;width:23%;margin:0;aspect-ratio:9/19.5;border-radius:9% / 4.2%;background:#0B1B2B;padding:2.4%;box-shadow:0 40px 80px -24px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.14)}
.hw-tel img{position:absolute;inset:2.4%;width:95.2%;height:95.2%;object-fit:cover;object-position:top;border-radius:7% / 3.4%}
.hw-onder{margin:14px 0 0;font-size:14px;color:#B9D2E2;padding-right:calc(16% + 16px)}
.hw-onder b{color:#fff}
@media (max-width:900px){
  .hero-lijn--schermen{display:grid;grid-template-columns:1fr;grid-template-areas:"tekst" "beeld" "rij";padding-top:110px}
  .hero-lijn--schermen .hl-tekst{margin-top:0;padding-left:24px;padding-right:24px;padding-bottom:24px}
  .hl-schermen{margin:0 24px 36px;padding-right:10%}
  .hw-tel{bottom:auto;top:6%;width:23%}
  .hw-onder{padding-right:0}
}

/* tegelbeelden (2 oktober 2026) */
.pl-kfoto{height:auto;aspect-ratio:16/10;object-fit:cover;background:#F1F2F6}
.venster--afd .afd-foto.afd-tegel{height:auto;aspect-ratio:16/10;background:#F1F2F6}
.opl-kaart{overflow:hidden}
.opl-tegel{display:block;width:calc(100% + 28px);max-width:none;margin:-14px -14px 8px;aspect-ratio:4/3;object-fit:cover;background:#F1F2F6}
.pl-kfoto{aspect-ratio:2/1}
/* tegelbeelden altijd helemaal in beeld (2 oktober 2026) */
.pl-kfoto,.venster--afd .afd-foto.afd-tegel{object-fit:contain;background:#EEEFF4}
.opl-tegel{object-fit:contain;background:#EEEFF4}
/* sectie AI-scan via aivoorfood.nl (2 oktober 2026) */
.scanop{display:grid;gap:16px;margin-top:26px;grid-template-columns:1fr}
@media (min-width:760px){.scanop{grid-template-columns:1fr 1fr}}
.scanop-kaart{display:flex;flex-direction:column;background:var(--wit);border:1px solid var(--lijn);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--inkt);transition:border-color .2s,box-shadow .2s,transform .2s}
.scanop-kaart:hover{border-color:var(--accent);box-shadow:0 14px 34px rgba(0,53,84,.12);transform:translateY(-2px)}
.scanop-beeld{display:block;aspect-ratio:2/1;background:#EEEFF4;overflow:hidden}
.scanop-beeld img{width:100%;height:100%;object-fit:contain;display:block}
.scanop-mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center}
.scanop-tekst{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px}
.scanop-tijd{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-knop)}
.scanop-tekst b{font-size:20px;line-height:1.2}
.scanop-tekst span{color:var(--gedempt);font-size:15px;line-height:1.5}
.scanop-tekst .scanop-link{color:var(--accent-knop);font-weight:700;margin-top:6px;display:inline-flex;align-items:center;gap:6px}
.scanop-tekst .scanop-link svg{width:14px;height:14px}
.scanop-mini{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:2px}
.scanop-mini img{min-height:0}
.scanop-wit{background:#fff}
.scanop-label{display:block;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-knop);margin-bottom:8px}
/* ai.html: keuze tussen de twee scans (2 oktober 2026) */
.ww-keuze{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0 16px;max-width:640px}
.ww-k{font:inherit;font-size:15.5px;font-weight:600;padding:12px 14px;border-radius:12px;border:1.5px solid var(--lijn);background:var(--wit);color:var(--inkt);cursor:pointer;transition:background .2s,border-color .2s}
.ww-k:hover{border-color:var(--accent)}
.ww-k.aan{background:var(--accent-zacht);border-color:var(--accent);}
[data-ww-lijst][hidden]{display:none!important}

.hw-teldemo{position:absolute;border:0;transform-origin:0 0;opacity:0;transition:opacity .6s;pointer-events:none;background:#EEF1F6}
.hw-tel.leeft .hw-teldemo{opacity:1}
.hw-tel.leeft img{visibility:hidden}

/* Opsight One op oplossingen.html (2 oktober 2026): tekst boven, het levende dagoverzicht breed eronder */
.one-kop{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,64px);align-items:end}
.one-kop .punten{margin:0}
.one-schermen{position:relative;max-width:1060px;margin:clamp(32px,5vw,56px) auto 0;padding-right:9%}
.one-schermen .hw-kaart{box-shadow:0 30px 60px -28px rgba(14,23,55,.35);border:1px solid #E1E6EF}
.one-schermen .hw-tel{bottom:-28px}
@media (max-width:900px){.one-kop{grid-template-columns:1fr}.one-schermen{padding-right:10%;margin-bottom:28px}.one-schermen .hw-tel{bottom:auto;top:6%;width:23%}}
.one-kop .wm{height:48px;width:auto;max-width:none}
.hw-onder p{margin:0}
.hw-one{display:block;height:30px;width:auto;margin:0 0 10px}
.hw-meer{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:10px 18px;border-radius:999px;color:#fff;font-weight:700;font-size:14.5px;text-decoration:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);transition:background .2s,box-shadow .2s}
.hw-meer:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 2px #fff}
.hw-meer .pijl-r{width:18px;height:18px}

/* ---------- betaalplan en prijskaarten (5 oktober 2026) ----------
   Stempel licht: wit met blauwe tekst. Prijskaarten even hoog en op een lijn via subgrid;
   wat er niet in zit staat in een venster. Het betaalplan als lichte band onder de kaarten. */
.stempel{display:grid;place-items:center;width:124px;height:124px;border-radius:50%;flex:none;
  background:var(--wit);color:var(--accent-knop);text-decoration:none;text-align:center;
  border:2px solid var(--accent-knop);transform:rotate(-8deg);box-shadow:0 12px 28px rgba(0,53,84,.14);transition:transform .25s ease}
a.stempel:hover,a.stempel:focus-visible{transform:rotate(-3deg) scale(1.04)}
.st-ring{display:grid;place-items:center;align-content:center;width:calc(100% - 12px);height:calc(100% - 12px);
  border-radius:50%;border:1.5px dashed rgba(0,100,148,.45);padding:8px}
.st-ring small{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gedempt)}
.st-ring b{font-size:30px;line-height:1;letter-spacing:-.03em;margin:3px 0 4px;color:var(--accent-diep)}
.st-ring span{font-size:11px;line-height:1.25;font-weight:600;color:var(--inkt)}
.reken-vb{position:relative}
.reken-vb .stempel{position:absolute;top:-34px;right:-22px;z-index:2}

.prijzen{gap:20px}
.prijs{display:grid;grid-template-rows:auto auto auto auto 1fr auto;align-content:start;
  border-color:transparent;box-shadow:0 1px 2px rgba(5,25,35,.04),0 14px 34px -24px rgba(5,25,35,.35);
  padding:clamp(22px,2vw,30px);transition:transform .25s ease,box-shadow .25s ease}
.prijs:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(5,25,35,.05),0 22px 44px -26px rgba(5,25,35,.45)}
@supports (grid-template-rows:subgrid){
  @media (min-width:901px){
    .prijzen{grid-auto-rows:auto}
    .prijs{grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
  }
}
.pr-beeld{display:block;margin:calc(-1*clamp(22px,2vw,30px)) calc(-1*clamp(22px,2vw,30px)) 20px;
  background:#EEEFF4;border-radius:var(--r) var(--r) 0 0;overflow:hidden;aspect-ratio:4/3}
.pr-beeld img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.prijs:hover .pr-beeld img{transform:scale(1.03)}
.pr-ic{width:46px;height:46px;border-radius:14px;background:var(--accent-zacht);color:var(--accent-diep);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.pr-ic svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.prijs .prijskop{border-bottom:0;padding-bottom:0;margin-bottom:12px;font-size:18px}
.pr-prijs{padding:16px 18px;border-radius:14px;background:var(--papier-diep);align-self:start}
.prijs .bedrag{font-size:clamp(30px,2.8vw,38px)}
.prijs .per{font-size:13.5px;margin-top:6px}
.prijs p.pr-intro{margin:18px 0 0}
.prijs .pm{border-top:0;padding-top:0;margin-top:20px}
.pr-niet{justify-self:start;align-self:end;margin-top:18px;padding:10px 0 0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:700;color:var(--accent-diep);display:inline-flex;align-items:center;gap:6px}
.pr-niet svg{width:14px;height:14px}
.pr-niet:hover{text-decoration:underline}
.venster--niet{width:min(560px,calc(100% - 24px))}
.niet-lijst{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.niet-lijst li{position:relative;padding:12px 16px 12px 44px;background:var(--papier-diep);border-radius:12px;font-size:15.5px;color:var(--inkt)}
.niet-lijst li::before{content:"";position:absolute;left:16px;top:15px;width:16px;height:16px;border-radius:50%;background:var(--wit);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='%234A6472' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-size:100% 100%}
.niet-label{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-diep);margin-bottom:6px}
.niet-noot{margin-top:18px;color:var(--gedempt);font-size:14.5px}

.plan{margin-top:24px;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,3.4vw,52px);align-items:center;
  background:var(--accent-zacht);border-radius:var(--r);padding:clamp(26px,3vw,40px);scroll-margin-top:120px}
.plan-beeld{position:relative;width:clamp(220px,22vw,290px)}
.plan-beeld img{display:block;width:100%;height:auto;border-radius:16px;background:#EEEFF4}
.plan-beeld .stempel{position:absolute;right:-18px;bottom:-18px;width:104px;height:104px}
.plan-beeld .st-ring b{font-size:25px}
.plan-beeld .st-ring span{font-size:10px}
.plan-beeld .st-ring small{font-size:8px;letter-spacing:.03em}
.plan-beeld .st-ring{padding:6px}
.plan-tekst h3{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.03em;line-height:1.2}
.plan-tekst p{color:var(--inkt);font-size:15.5px;margin-top:10px}
.plan-geldt{display:inline-block;margin-top:16px;background:var(--wit);color:var(--accent-diep);font-size:13.5px;font-weight:700;
  border-radius:999px;padding:6px 14px}
.plan-stappen{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:pl}
.plan-stappen li{counter-increment:pl;background:var(--wit);border-radius:16px;padding:14px 18px;display:grid;grid-template-columns:30px 1fr;column-gap:14px;align-items:start}
.plan-stappen li::before{content:counter(pl);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--accent-zacht);color:var(--accent-diep);font-weight:800;font-size:14.5px;grid-row:span 2}
.plan-stappen b{display:block;font-size:15.5px;color:var(--inkt)}
.plan-stappen span{display:block;margin-top:2px;color:var(--gedempt);font-size:14px;line-height:1.45}

@media (min-width:1101px){.prijzen{grid-template-columns:repeat(4,1fr)}}
@media (min-width:901px) and (max-width:1100px){
  .prijzen{grid-template-columns:repeat(2,1fr)}
  .plan{grid-template-columns:auto minmax(0,1fr)}
  .plan-stappen{grid-column:1/-1}
}
@media (max-width:900px){
  .plan{grid-template-columns:1fr}
  .plan-beeld{width:min(320px,calc(100% - 20px))}
  .reken-vb .stempel{width:110px;height:110px;top:-30px;right:-6px}
  .reken-vb .st-ring b{font-size:25px}
  .reken-vb .st-ring span{font-size:10px}
  .reken-vb .st-ring small{font-size:8px;letter-spacing:.03em}
  .reken-vb .st-ring{padding:6px}
}
@media (prefers-reduced-motion:reduce){.stempel,.prijs,.pr-beeld img{transition:none}}

/* ---------- hero home: uw hele organisatie in beeld (5 oktober 2026) ---------- */
.he{background:#0E1737;color:#fff;padding-top:clamp(120px,13vw,150px);overflow:hidden}
.he-wrap{max-width:1320px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);gap:clamp(28px,4vw,56px);align-items:center}
.he-boven{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#4FB3E8;margin-bottom:18px}
.he h1{font-size:clamp(34px,3.6vw,54px);line-height:1.04;letter-spacing:-.03em;color:#fff;margin:0}
.he h1 em{font-style:normal;color:#4FB3E8}
.he-tekst p{color:#D6E0E7;font-size:clamp(16px,1.15vw,18.5px);line-height:1.55;margin:20px 0 0;max-width:44ch}
.he-beeld{position:relative;margin:0;border-radius:28px;overflow:hidden;background:#EEEFF4;box-shadow:0 50px 100px -40px rgba(0,0,0,.75)}
.he-beeld img{display:block;width:100%;height:auto}
.he-teller{position:absolute;left:18px;bottom:16px;padding:8px 14px;border-radius:999px;background:rgba(14,23,55,.88);color:#D6E0E7;font-size:13.5px;font-weight:600}
.he-teller b{color:#fff}
.he-beeld.klaar .he-teller{background:#0791FF;color:#fff}
.he-samen{margin-top:clamp(40px,5vw,64px);border-top:1px solid rgba(255,255,255,.14)}
.he-wrap2{max-width:1320px;margin:0 auto;padding:clamp(30px,3.6vw,44px) 24px clamp(40px,4.6vw,60px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);gap:clamp(28px,4vw,56px);align-items:start}
.he-zin{margin:0;font-size:clamp(20px,1.7vw,25px);line-height:1.35;letter-spacing:-.015em;font-weight:700;color:#fff}
.he-zin em{font-style:normal;color:#4FB3E8}
.he-stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.he-stappen li{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(79,179,232,.45);border-radius:20px;padding:20px 22px}
.he-stappen b{display:block;font-size:17px;color:#fff}
.he-stappen span{display:block;margin-top:6px;color:#B9C8D6;font-size:14.5px;line-height:1.45}
@media (max-width:1000px){.he-wrap,.he-wrap2{grid-template-columns:1fr}.he-stappen{grid-template-columns:1fr}}
@media (max-width:600px){.he-beeld{border-radius:20px;margin:0 -8px}}

/* Waarom niet alles een bedrag krijgt: licht sinds 5 oktober 2026 */
.sec--waarom .waarom{background:var(--papier-diep);border-top:0;border-radius:var(--r);padding:22px 24px}
.sec--waarom .waarom b{color:var(--inkt)}
.sec--waarom .waarom p{color:var(--gedempt)}
@media (min-width:901px){.sec--waarom .waarom-rij{gap:16px}}

/* hero home ronde 2 (5 oktober 2026): stippen en kaartjes in plaats van blauwe vlakken */
.he-stippen{position:absolute;inset:0;pointer-events:none}
.he-stip{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#0791FF;box-shadow:0 0 0 3px #fff,0 4px 10px rgba(14,23,55,.35);opacity:0;transform:scale(.4);transition:opacity .35s,transform .35s}
.he-stip.gezien{opacity:.9;transform:scale(.8)}
.he-stip.aan{opacity:1;transform:scale(1)}
.he-stip.aan::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid #0791FF;animation:hestip 1.6s ease-out infinite}
@keyframes hestip{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.6);opacity:0}}
.he-beeld.klaar .he-stip{opacity:1;transform:scale(1)}
.he-kaartje{position:absolute;z-index:3;white-space:nowrap;padding:10px 16px;border-radius:14px;background:#fff;color:#0E1737;
  box-shadow:0 18px 40px -16px rgba(14,23,55,.55);transform:translate(18px,-50%) scale(.96);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
.he-kaartje.links{transform:translate(calc(-100% - 18px),-50%) scale(.96)}
.he-kaartje.aan{opacity:1;transform:translate(18px,-50%) scale(1)}
.he-kaartje.links.aan{transform:translate(calc(-100% - 18px),-50%) scale(1)}
.he-kaartje.onder{margin-top:46px}
.he-kaartje img{width:76px;height:57px;border-radius:10px;object-fit:cover;background:#EEEFF4;flex:none}
.he-kaartje b{display:block;font-size:15px;line-height:1.2}
.he-kaartje ul{list-style:none;margin:5px 0 0;padding:0}
.he-kaartje li{position:relative;padding-left:16px;font-size:12.5px;line-height:1.35;color:#4A6472;margin-top:2px}
.he-kaartje li::before{content:"";position:absolute;left:0;top:.42em;width:7px;height:7px;border-radius:50%;background:#0791FF}
@media (max-width:700px){.he-kaartje{padding:7px 12px}.he-kaartje b{font-size:13px}.he-stip{width:11px;height:11px;margin:-5.5px 0 0 -5.5px}}
@media (prefers-reduced-motion:reduce){.he-stip.aan::after{animation:none}}


/* hero home ronde 3 (5 oktober 2026): bewegende fabriek en iconen per afdeling */
.he-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
.he-film.loopt{opacity:1}
.he-stippen{z-index:2}
.he-stip{display:grid;place-items:center;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;
  background:#fff;color:#0E1737;box-shadow:0 6px 16px -4px rgba(14,23,55,.45)}
.he-stip svg{width:20px;height:20px}
.he-stip,.he-stip.gezien{opacity:.92;transform:scale(.82)}
.he-stip.gezien{color:#0791FF}
.he-stip.aan{opacity:1;transform:scale(1.08);background:#0791FF;color:#fff;box-shadow:0 0 0 3px #fff,0 8px 20px -4px rgba(14,23,55,.5)}
.he-stip.aan::after{inset:-8px}
.he-beeld.klaar .he-stip{opacity:1;background:#0791FF;color:#fff;transform:scale(.92)}
@media (max-width:700px){.he-stip{width:28px;height:28px;margin:-14px 0 0 -14px}.he-stip svg{width:15px;height:15px}}

/* kostenpagina ronde 3 (5 oktober 2026): 4 + 1. Vier keuzes naast elkaar, betaalplan als brede kaart
   eronder; lagere beelden zodat het op een 13 inch scherm in verhouding blijft */
.prijzen .prijs .prijskop{font-size:20px;letter-spacing:-.03em;line-height:1.15;margin-bottom:14px}
.prijzen .pr-beeld{aspect-ratio:auto;height:clamp(150px,12.5vw,190px);background:#EEEFF4;margin-bottom:18px}
.prijzen .pr-beeld img{object-fit:contain}
.plan-tekst h3{font-size:clamp(21px,1.75vw,24px)}
.prijzen .plan{margin:0;grid-column:1/-1;border:1px solid #BFE0FF}
.prijzen .plan-beeld img{background:#EEF1F6}
.prijzen .plan-stappen{counter-reset:none}
.prijzen .plan-stappen li{grid-template-columns:1fr;border-left:4px solid #0791FF;padding:16px 20px}
.prijzen .plan-stappen li::before{display:none}
.prijzen .plan-stappen b{font-size:16px}
.prijzen .plan-stappen span{font-size:14.5px;margin-top:4px}
.prijzen .plan-tekst{display:flex;flex-direction:column;align-items:flex-start}
.prijzen .plan-geldt{order:-1;margin:0 0 14px;font-size:13px}
.plan-tekst .plan-stempel{position:relative;right:auto;bottom:auto;top:auto;display:grid;place-items:center;width:150px;height:150px;margin:28px 0 0 12px;transform:rotate(-6deg);border-width:2.5px}
.plan-tekst .plan-stempel .st-ring{width:calc(100% - 14px);height:calc(100% - 14px);padding:0 12px;box-sizing:border-box;gap:0}
.plan-tekst .plan-stempel .st-ring small{font-size:10px;letter-spacing:.1em}
.plan-tekst .plan-stempel .st-ring b{font-size:36px;margin:5px 0 7px}
.plan-tekst .plan-stempel .st-ring span{font-size:11.5px;line-height:1.3}
@media (min-width:1101px){
  .prijzen .plan{grid-template-columns:clamp(180px,17vw,250px) minmax(0,1.55fr) minmax(0,1fr);align-items:center;
    gap:clamp(24px,3vw,44px);padding:clamp(24px,2.4vw,34px)}
  .prijzen .plan-beeld{width:auto}
  .prijzen .plan-beeld img{border-radius:16px;aspect-ratio:4/3;object-fit:cover}
  .prijzen .plan-tekst{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:22px;align-items:center}
  .prijzen .plan-tekst .plan-geldt,.prijzen .plan-tekst h3,.prijzen .plan-tekst p{grid-column:1}
  .prijzen .plan-geldt{justify-self:start}
  .prijzen .plan-tekst .plan-stempel{grid-column:2;grid-row:1/4;margin:0}
}

/* kostenpagina: wat erin zit staat sinds 5 oktober 2026 in het venster, samen met wat er niet in zit */
.venster .v-kop{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gedempt);margin:22px 0 10px}
.venster .v-kop--in{color:var(--accent-diep);margin-top:20px}
.venster .in-lijst{list-style:none;margin:0;padding:0}
.venster .in-lijst li{position:relative;padding-left:26px;margin-bottom:9px;font-size:15px;line-height:1.45;color:var(--inkt)}
.venster .in-lijst li::before{content:"";position:absolute;left:0;top:.25em;width:16px;height:16px;border-radius:50%;background:#0791FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.5v7M4.5 8h7' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat}

/* Opsight One op oplossingen.html (5 oktober 2026): tekst en scherm naast elkaar in een licht vlak,
   past op een 13 inch scherm; knop "Neem contact op" onder het scherm */
.one-rechts{display:flex;flex-direction:column;align-items:center;gap:24px}
@media (min-width:1001px){
  #one{padding-top:24px;padding-bottom:24px}
  #one .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,3.4vw,52px);align-items:center;
    background:#F1F2F6;border-radius:28px;padding:clamp(26px,2.8vw,40px)}
  #one .one-kop{display:flex;flex-direction:column;gap:0}
  #one .wm{width:96px;height:auto;margin-bottom:10px}
  #one .one-kop h2{font-size:clamp(24px,2.1vw,30px);line-height:1.12}
  #one .one-kop .lead{font-size:15px;line-height:1.5;margin-top:10px}
  #one .punten{margin:16px 0 0;display:grid;gap:8px}
  #one .punten li{background:#fff;border-radius:12px;padding:9px 14px;border-left:0;margin:0}
  #one .punten li::before{display:none}
  #one .punten b{font-size:14.5px}
  #one .punten span{font-size:13.5px;margin-top:1px;line-height:1.4}
  #one .one-rechts{gap:28px;position:relative;top:18px}
  #one .one-schermen{margin:0 auto;max-width:none;width:86%;padding-right:12%}
  #one .hw-tel{top:auto;bottom:-5%;width:25%}
}

/* Opsight One als eigen pagina (5 oktober 2026): het blok begint onder de zwevende menubalk */
.pagina-one #one{padding-top:104px}
@media (max-width:900px){.pagina-one #one{padding-top:112px}}

/* Modules van Opsight One op one.html (5 oktober 2026, ronde 3): namen als tabjes met een streepje eronder */
#modules{padding-top:48px;padding-bottom:48px}
.mod-wrap{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:clamp(28px,3.6vw,56px);align-items:center}
.mod-links h2{font-size:clamp(24px,2.1vw,30px);line-height:1.12}
.mod-links .lead{font-size:14.5px;line-height:1.5;margin-top:10px}
.mod-links .lead em{font-style:normal;color:#0791FF;font-weight:600}
.mod-lijst{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-top:28px}
.mod-groep+.mod-groep{margin-top:26px}
.mod-groep h3{font-size:17px;letter-spacing:0;color:#0E1737;margin:0 0 2px;font-weight:700}
.mod-groep ul{list-style:none;margin:0;padding:0}
.mod-knop{width:100%;text-align:left;position:relative;display:flex;align-items:baseline;gap:8px;padding:12px 0 11px;background:none;border:0;border-bottom:1px solid #E9ECF2;font:inherit;color:#0E1737;cursor:pointer}
.mod-knop:hover .mod-t b{color:#0791FF}
.mod-knop:focus-visible{outline:2px solid #0791FF;outline-offset:2px;border-radius:4px}
.mod-t{flex:1;min-width:0}
.mod-t b{position:relative;display:inline-block;font-size:14.5px;font-weight:500;transition:color .2s}
.mod-knop.aan .mod-t b{color:#0791FF;font-weight:600}
.mod-t span{display:none}
.mod-soort{flex:none;font-style:normal;font-size:11px;font-weight:600;color:#0791FF;opacity:.8}
.mod-loop{position:absolute;left:0;right:0;bottom:-12px;height:2px;border-radius:2px;background:#0791FF;transform:scaleX(0);transform-origin:left}
.mod-knop.aan .mod-loop{transform:scaleX(1)}
@keyframes modloop{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mod-kader{border-radius:16px;box-shadow:0 30px 60px -28px rgba(14,23,55,.35);border:1px solid #E1E6EF}
.mod-uitleg{display:flex;align-items:center;gap:16px;margin-top:16px;min-height:52px}
.mod-uitleg b{display:block;font-size:17px;color:#0E1737}
.mod-uitleg span{display:block;font-size:14.5px;line-height:1.45;color:#4A5370;margin-top:2px}
.mod-uitleg .pil{margin-left:auto;flex:none}
.mod-noot{font-size:12.5px;color:#7A8299;margin-top:8px}
@media (max-width:900px){
  .mod-wrap{grid-template-columns:1fr}
  .mod-rechts{display:none}
  .mod-lijst{grid-template-columns:1fr}
  .mod-kol+.mod-kol{margin-top:18px}
  .mod-knop{flex-wrap:wrap;cursor:default;padding:12px 0 11px}
  .mod-loop{display:none}
  .mod-t b{font-weight:600}
  .mod-t span{display:block;font-size:13.5px;line-height:1.45;color:#4A5370;margin-top:3px}
}

/* Onderbouwing onder het One-blok (5 oktober 2026) */
#waarom-one{padding-top:40px;padding-bottom:56px}
#waarom-one .lead{max-width:760px}
.ow-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:26px}
.ow{background:#fff;border:1px solid #E6E9F0;border-radius:18px;padding:22px 22px 20px}
.ow b{display:block;font-size:16.5px;color:#0E1737;line-height:1.3}
.ow p{font-size:14.5px;line-height:1.5;color:#4A5370;margin:8px 0 0}
.ow-noot{margin-top:22px;font-size:14.5px;color:#4A5370}
.ow-noot a{color:#0791FF;font-weight:600;text-decoration:none;margin-left:6px}
@media (max-width:1000px){.ow-raster{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.ow-raster{grid-template-columns:1fr}}

.ow{padding:0 0 20px;overflow:hidden}
.ow b,.ow p{padding:0 22px}
.ow b{margin-top:16px}
.ow-beeld{background:#EEEFF3;height:clamp(160px,14vw,200px);display:block;overflow:hidden;padding:10px 0 0}
.ow-beeld img{width:100%;height:100%;object-fit:contain;display:block}

/* One ronde 5 (5 oktober 2026): eerst de uitleg, dan modules links en het klikbare dashboard rechts */
.pagina-one #waarom-one{padding-top:122px;padding-bottom:40px}
#waarom-one .wm{width:92px;height:auto;display:block;margin-bottom:12px}
#modules{padding-top:8px;padding-bottom:56px}
#modules .mod-wrap{background:#F1F2F6;border-radius:28px;padding:32px 36px;align-items:start}
#modules .mod-knop{border-bottom-color:#DFE3EB}
.mod-kader .hw-demo{pointer-events:auto}
.mod-mobiel{display:flex;align-items:center;gap:14px;margin-top:26px}
.mod-mobiel img{width:46px;height:auto;border-radius:8px;border:3px solid #0B1B2B;box-shadow:0 12px 24px -12px rgba(14,23,55,.5);background:#0B1B2B}
.mod-mobiel span{font-size:13.5px;line-height:1.45;color:#4A5370}
.mod-mobiel b{display:block;color:#0E1737;font-size:14px}
.mod-weer{display:block;margin-top:6px;background:none;border:0;padding:0;font:inherit;font-size:13.5px;font-weight:600;color:#0791FF;cursor:pointer}
.mod-weer[hidden]{display:none}
@media (max-width:900px){#modules .mod-wrap{padding:22px 18px 24px}}

/* One ronde 6 (5 oktober 2026): een groot klikbaar dashboard, de modulelijst alleen op de telefoon */
#modules .mod-groot{background:#F1F2F6;border-radius:28px;padding:32px 40px 34px}
#modules .mod-kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
#modules .mod-kop h2{font-size:clamp(24px,2.1vw,30px);line-height:1.12}
#modules .mod-kop .lead{font-size:14.5px;line-height:1.5;margin:0}
#modules .mod-mobiel{margin-top:14px}
#modules .mod-alleenmobiel{display:none}
#modules .mod-rechts{max-width:1080px;margin:28px auto 0;top:0}
@media (max-width:900px){
  #modules .mod-groot{padding:22px 18px 24px}
  #modules .mod-kop{grid-template-columns:1fr;gap:10px}
  #modules .mod-alleenmobiel{display:grid;grid-template-columns:1fr;margin-top:18px}
  #modules .mod-alleenmobiel .mod-kol+.mod-kol{margin-top:18px}
  #modules .mod-rechts{display:block;margin-top:22px}
  #modules .mod-noot{display:none}
  #modules .mod-uitleg{flex-direction:column;align-items:flex-start}
  #modules .mod-uitleg .pil{margin-left:0}
}
#modules .mod-uitleg .mod-mobiel{margin:0 0 0 auto;flex:none;gap:10px}
#modules .mod-uitleg .mod-mobiel img{width:30px;border-width:2px;border-radius:6px}
#modules .mod-uitleg .mod-mobiel span{font-size:12.5px;max-width:170px}
#modules .mod-uitleg .mod-mobiel b{font-size:13px}
#modules .mod-uitleg .pil{margin-left:0}
@media (max-width:900px){#modules .mod-uitleg .mod-mobiel{margin:0}}

/* /one opbouw rond het verhaal (5 oktober 2026) */
.pagina-one #one-hero{padding-top:118px;padding-bottom:40px}
.oh{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.oh .wm{width:96px;height:auto;display:block;margin-bottom:14px}
.oh h1{font-size:clamp(30px,3.2vw,44px);line-height:1.08;letter-spacing:-.02em}
.oh .lead{margin-top:14px;font-size:17px;line-height:1.5}
.oh .knoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.oh-beeld{position:relative;padding-right:14%;padding-bottom:6%}
.oh-scherm{width:100%;height:auto;display:block;border-radius:14px;border:1px solid #E1E6EF;box-shadow:0 30px 60px -28px rgba(14,23,55,.35)}
.oh-tel{position:absolute;right:0;bottom:0;width:27%;height:auto;border-radius:20px;border:5px solid #0B1B2B;background:#0B1B2B;box-shadow:0 30px 50px -18px rgba(14,23,55,.55)}
#one-herken{padding-top:48px;padding-bottom:48px}
.hk-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.hk{background:#fff;border-radius:16px;padding:20px 22px}
.hk b{display:block;font-size:17px;color:#0E1737}
.hk p{margin:4px 0 0;font-size:15px;line-height:1.5;color:#4A5370}
.hk-slot{margin-top:20px;font-size:16px;font-weight:600;color:#0E1737}
#one-werkdag{padding-top:56px;padding-bottom:56px}
.wd-raster{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px;margin-top:28px}
.wd-beeld{border-radius:14px;overflow:hidden;border:1px solid #E1E6EF;background:#EEF1F6;box-shadow:0 18px 40px -26px rgba(14,23,55,.35)}
.wd-beeld img{display:block;width:100%;height:auto}
.wd small{display:block;margin-top:16px;font-size:13px;font-weight:700;color:#0791FF}
.wd h3{font-size:20px;margin-top:4px;color:#0E1737}
.wd p{font-size:15px;line-height:1.55;color:#4A5370;margin:6px 0 0}
.wd-mod{display:block;margin-top:8px;font-size:13px;color:#7A8299}
.pagina-one #waarom-one{padding-top:48px;padding-bottom:48px}
#one-modules{padding-top:48px;padding-bottom:48px}
.am-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px;align-items:start}
.am-groep{background:#fff;border-radius:18px;padding:20px 22px 12px}
.am-groep h3{font-size:17px;color:#0E1737;margin:0 0 6px}
.am-groep ul{list-style:none;margin:0;padding:0}
.am-groep li{padding:10px 0;border-top:1px solid #EEF0F5}
.am-groep li:first-child{border-top:0}
.am-groep li b{display:block;font-size:15px;color:#0E1737}
.am-groep li span{display:block;font-size:13.5px;line-height:1.45;color:#4A5370;margin-top:2px}
.am-demo{display:flex;align-items:center;gap:16px;margin-top:24px;flex-wrap:wrap}
.am-demo span{font-size:14px;color:#4A5370}
#one-begin{padding-top:56px;padding-bottom:64px}
.ob-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:24px}
.ob{border-top:3px solid #0791FF;padding-top:16px}
.ob b{display:block;font-size:18px;color:#0E1737}
.ob p{margin:6px 0 0;font-size:15px;line-height:1.55;color:#4A5370}
.ob-slot{display:flex;align-items:center;gap:24px;margin-top:32px;padding:20px 24px;background:#F1F2F6;border-radius:16px;flex-wrap:wrap}
.ob-slot p{margin:0;flex:1;min-width:260px;font-size:15px;color:#4A5370}
.ob-slot p a{color:#0791FF;font-weight:600;text-decoration:none;margin-left:4px}
.dv{border:0;padding:0;border-radius:18px;width:min(1180px,94vw,calc((92vh - 64px) * 1.6));max-width:none;background:#fff;box-shadow:0 40px 80px -20px rgba(0,0,0,.45)}
.dv::backdrop{background:rgba(14,23,55,.55)}
.dv-kop{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid #E6E9F0}
.dv-kop b{font-size:15px;color:#0E1737}
.dv-kop span{font-size:13px;color:#7A8299}
.dv-sluit{margin-left:auto;width:34px;height:34px;border-radius:10px;border:0;background:#F1F2F6;font-size:22px;line-height:1;cursor:pointer;color:#0E1737}
.dv-kader{position:relative;overflow:hidden}
.dv-kader iframe{position:absolute;left:0;top:0;width:1280px;height:800px;border:0;transform-origin:0 0}
@media (max-width:1000px){.wd-raster{grid-template-columns:1fr}.hk-rij,.ob-rij,.am-raster{grid-template-columns:1fr}}
@media (max-width:900px){.oh{grid-template-columns:1fr}.pagina-one #one-hero{padding-top:104px}[data-demo-open],.am-demo{display:none}}

/* Herkent u dit, met beeld (5 oktober 2026) */
#one-herken{padding-top:56px;padding-bottom:56px}
.hk2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.hk2-beeld{background:#EEEFF3;border-radius:22px;overflow:hidden}
.hk2-beeld img{display:block;width:100%;height:auto}
.hk2-tekst .lead{margin-top:10px;font-size:16px;line-height:1.55}
.hk2-lijst{list-style:none;margin:20px 0 0;padding:0}
.hk2-lijst li{padding:14px 0;border-top:1px solid #DCE2EC}
.hk2-lijst li:last-child{border-bottom:1px solid #DCE2EC}
.hk2-lijst b{display:block;font-size:17px;color:#0E1737}
.hk2-lijst span{display:block;font-size:15px;line-height:1.5;color:#4A5370;margin-top:2px}
.hk2-slot{margin-top:20px;font-size:17px;font-weight:600;color:#0791FF}
@media (max-width:900px){.hk2{grid-template-columns:1fr}}
.hk2{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.hk2-beeld{background:none;border-radius:0}
@media (max-width:900px){.hk2{grid-template-columns:1fr}}

/* Modules als kaarten (5 oktober 2026) */
.am-kop{font-size:18px;color:#0E1737;margin:30px 0 0}
.am-rij{margin-top:12px}
.am-kaart .opl-tegel{height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center;background:#EDF3F8;margin-bottom:10px}
.am-kaart b{font-size:15px}
.am-kaart p{font-size:13.5px}
.am-kaart{gap:6px}
.am-ic{width:42px;height:42px;border-radius:12px;background:#E6F2FF;display:grid;place-items:center;margin-bottom:6px}
.am-ic svg{width:22px;height:22px;fill:none;stroke:#0791FF;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Waarom één plek werkt zonder illustraties (5 oktober 2026, Martijn: niet te veel plaatjes) */
.pagina-one #waarom-one{padding-top:48px;padding-bottom:56px}
#waarom-one .ow{background:#F1F2F6;border:0;border-radius:18px;padding:24px 24px 22px}
#waarom-one .ow b,#waarom-one .ow p{padding:0}
#waarom-one .ow b{margin-top:0}
.ow-ic{width:42px;height:42px;border-radius:12px;background:#fff;display:grid;place-items:center;margin-bottom:16px}
.ow-ic svg{width:22px;height:22px;fill:none;stroke:#0791FF;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Slotronde /one (5 oktober 2026): op de telefoon de modules per groep als veegrij, Waarom compacter */
@media (max-width:759px){
  #one-modules .am-rij{display:grid;grid-auto-flow:column;grid-auto-columns:76%;grid-template-columns:none;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-left:-18px;margin-right:-18px;padding:0 18px 6px;scroll-padding-left:18px}
  #one-modules .am-rij::-webkit-scrollbar{display:none}
  #one-modules .am-kaart{scroll-snap-align:start}
  #one-modules .am-kop{margin-top:24px}
  #waarom-one .ow{display:grid;grid-template-columns:42px 1fr;column-gap:14px;padding:18px}
  #waarom-one .ow-ic{grid-row:span 2;margin:0}
  #waarom-one .ow p{margin-top:4px}
  #waarom-one .ow-raster{gap:10px}
}

/* Waarom één plek werkt, ronde 3 (5 oktober 2026): echte foto in een golvende vorm, kaarten in vier zachte tinten met 3D-badges */
.pagina-one #waarom-one{padding-top:64px;padding-bottom:72px;overflow:hidden}
.wo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4.5vw,72px);align-items:center}
.wo-beeld{position:relative;padding:28px 18px 34px 22px}
.wo-golf{position:absolute;inset:-6px -26px -10px -30px;width:calc(100% + 56px);height:calc(100% + 16px);z-index:0}
.wo-foto{position:relative;z-index:1;display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:44% 56% 50% 50% / 42% 46% 54% 58%;box-shadow:0 30px 60px -30px rgba(14,23,55,.35)}
.wo-tekst .lead{max-width:560px}
.wo-raster{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
#waarom-one .ow{border:0;padding:20px 22px 22px;border-radius:22px 22px 22px 8px;display:block}
#waarom-one .ow b{font-size:16.5px;margin:0}
#waarom-one .ow p{font-size:14.5px;margin-top:6px;padding:0}
#waarom-one .wo-k0{background:#E8F3FF}
#waarom-one .wo-k1{background:#E7F5EC;border-radius:22px 22px 8px 22px}
#waarom-one .wo-k2{background:#ECEFF6;border-radius:22px 8px 22px 22px}
#waarom-one .wo-k3{background:#FFF1E6;border-radius:8px 22px 22px 22px}
.ow-badge{display:block;width:56px;height:auto;margin:-4px 0 10px -6px}
@media (max-width:900px){
  .wo{grid-template-columns:1fr}
  .wo-beeld{max-width:320px;margin:8px auto 0;padding:18px 12px 24px;order:2}
  .pagina-one #waarom-one{padding-top:48px;padding-bottom:56px}
}
@media (max-width:560px){
  .wo-raster{grid-template-columns:1fr;gap:10px}
  #waarom-one .ow{display:grid;grid-template-columns:48px 1fr;column-gap:12px;padding:16px 18px}
  .ow-badge{grid-row:span 2;width:46px;margin:0}
  #waarom-one .ow p{margin-top:3px}
}