/* ToolboxOnline — Eigenschappen / Hoe het werkt (aanvulling op toolboxonline.css) */

/* Hero */
.eig-hero{padding:52px 0 56px;background:
  radial-gradient(120% 90% at 88% -10%, var(--blue-tint) 0%, rgba(234,245,252,0) 55%),
  var(--bg);
}
.eig-hero h1{font-size:clamp(2rem,6vw,3.1rem)}
.eig-hero .sub{font-size:clamp(1.02rem,2.3vw,1.2rem);color:var(--ink-soft);margin-top:18px;max-width:58ch}
@media(min-width:760px){.eig-hero{padding:70px 0 74px}}

/* Ketenband */
.keten{background:var(--yellow);border-top:1px solid rgba(30,43,88,.14);border-bottom:1px solid rgba(30,43,88,.14)}
.keten .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-top:22px;padding-bottom:22px}
.keten span{font-weight:800;color:var(--navy);font-size:clamp(.95rem,2.2vw,1.06rem);letter-spacing:-.01em}
.keten .pijl{color:rgba(30,43,88,.45);font-weight:700}

/* Kaarten */
.eig-kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:20px;margin-top:38px}
.eig-kaart{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:11px}
.sec-tint .eig-kaart{background:#fff}
.eig-kaart .ic{width:42px;height:42px;border-radius:12px;background:var(--navy-tint);color:var(--navy);
  display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.eig-kaart h3{font-size:1.1rem}
.eig-kaart p{color:var(--ink-soft);font-size:.98rem}

/* Clips */
.clips{display:grid;grid-template-columns:1fr;gap:34px;margin-top:38px}
@media(min-width:900px){.clips{grid-template-columns:1fr 1fr;gap:30px}}
.clip{display:flex;flex-direction:column;gap:13px}
.clip video{width:100%;border-radius:var(--radius);background:var(--navy);border:1px solid var(--line);
  box-shadow:var(--shadow-md);display:block}
.clip .duur{font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.clip .onder{color:var(--ink-soft);font-size:.98rem}
.clip .onder strong{color:var(--navy);font-weight:800}

/* Schermenraster */
.rasterkop{font-size:1.3rem;margin:56px 0 6px}
.rasterintro{color:var(--ink-soft);font-size:.98rem;margin-bottom:24px;max-width:62ch}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px}
.beeld{display:flex;flex-direction:column;gap:11px}
.beeld .vergroot{padding:0;border:0;background:none;cursor:zoom-in;display:block;width:100%;
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .15s ease, transform .15s ease}
.beeld .vergroot:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.beeld .vergroot:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.beeld img{width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;object-position:top;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);display:block}
.beeld img.heel{object-fit:contain;background:var(--navy);padding:12px}
.beeld p{color:var(--ink-soft);font-size:.95rem}

/* Vergrootlaag */
.vergrootlaag{position:fixed;inset:0;background:rgba(19,27,60,.93);display:none;align-items:center;
  justify-content:center;padding:26px;z-index:120}
.vergrootlaag[data-open="ja"]{display:flex}
.vergrootlaag img{max-width:min(1400px,100%);max-height:86vh;width:auto;height:auto;object-fit:contain;
  border-radius:12px;background:#fff}
.vergrootlaag .sluit{position:absolute;top:18px;right:20px}
.vergrootlaag .bijschrift{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:#fff;
  font-size:.95rem;padding-inline:26px}

/* Twee kolommen onderaan */
.eig-twee{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
@media(min-width:860px){.eig-twee{grid-template-columns:1.25fr .75fr;gap:44px}}
.eig-twee h2{font-size:clamp(1.5rem,3.4vw,2rem)}
.eig-twee p{color:var(--ink-soft);margin-top:14px}
.eig-kader{background:var(--navy);border-radius:var(--radius);padding:30px;color:#fff}
.eig-kader h2{color:#fff}
.eig-kader p{color:#d7dff1}
.eig-kader .domein{display:inline-block;margin-top:16px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:11px 16px;
  font-family:var(--mono);font-size:.98rem;color:#fff}