/* Openbare website van MKBconnect. Bouwt op style.css: dezelfde kleuren, letter, hoeken en lijniconen. */
body.web{background:var(--surface)}
.web-binnen{max-width:1120px;margin:0 auto;padding:0 26px}
body.web .topbar{position:sticky;top:0;z-index:20}
body.web .topbar{height:80px}
body.web .topbar .brand img.web-logo{height:58px;width:auto;max-width:none;max-height:none;display:block}
@media (max-width:900px){body.web .topbar{position:static}}
.web-inlog{border:1px solid var(--brand-2);color:var(--brand-2);padding:7px 16px;border-radius:var(--radius);font-weight:600;font-size:.92rem}
.web-inlog:hover{background:var(--blauw-tint)}
.web h1,.web h2,.web h3{font-family:var(--serif);color:var(--ink)}
.web h1{font-size:2.3rem;line-height:1.2;margin:0 0 14px;font-weight:700}
.web h2{font-size:1.65rem;line-height:1.25;margin:0 0 8px;font-weight:700}
.web h3{font-size:1.1rem;margin:0 0 6px}
.oog{margin:0 0 10px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-donker)}
.lead{font-size:1.15rem;color:var(--soft);margin:0 0 22px;max-width:34em}
.sub{color:var(--soft);margin:0 0 22px;max-width:40em}
.w-klein{font-size:.85rem;color:var(--soft);margin:10px 0 0}
.fout-tekst{color:var(--bad);margin:12px 0 0}

/* knoppen */
.w-knop,.w-knop-rand{display:inline-block;border-radius:var(--radius);padding:11px 20px;font:inherit;font-weight:600;font-size:.96rem;cursor:pointer;line-height:1.3;text-align:center}
.w-knop{background:var(--brand-2);color:#fff;border:1px solid var(--brand-2)}
.w-knop:hover{background:#155a93;color:#fff}
.w-knop[disabled]{opacity:.45;cursor:default}
.w-knop-rand{background:var(--surface);color:var(--brand-2);border:1px solid var(--brand-2)}
.w-knop-rand:hover{background:var(--blauw-tint)}
.knoppenrij{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* bovenaan */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--brand-tint),var(--surface));padding:54px 0 46px}
.hero-logo{display:block;height:116px;width:auto;max-width:100%;margin:0 0 24px}
.hero-raster{position:relative}
.hero-raster{display:grid;grid-template-columns:1.05fr 1fr;gap:42px;align-items:center}
.hero-beeld{min-width:0}
.venster{margin:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.venster-balk{display:flex;gap:6px;padding:9px 12px;background:var(--line-2);border-bottom:1px solid var(--line)}
.venster-balk span{width:9px;height:9px;border-radius:50%;background:var(--line)}
.venster img{display:block;width:100%;height:auto}
.venster figcaption{padding:8px 12px;font-size:.78rem;color:var(--soft);border-top:1px solid var(--line-2)}
.beeld-vol{display:block;width:100%;height:100%;max-height:420px;object-fit:cover;border-radius:var(--radius)}

/* BST en persoonlijk */
.bst-rij{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bst-rij li{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:6px 12px 6px 6px;font-weight:600;font-size:.92rem}
.bst-rij b,.bst-letter{display:grid;place-items:center;background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;border-radius:var(--radius);font-weight:700}
.bst-rij b{width:26px;height:26px;font-size:.9rem}
.hero-belofte{display:flex;align-items:center;gap:10px;margin:10px 0 0;font-weight:600}
.bst-rij + .hero-belofte{margin-top:16px}
.hero-belofte .ic{width:30px;height:30px;background:var(--surface)}
.bst-kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:6px}
.bst-kaart{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--brand);border-radius:var(--radius);padding:22px 22px 24px}
.bst-letter{width:52px;height:52px;font-size:1.7rem;margin-bottom:14px}
.bst-kaart p{margin:0;color:var(--soft)}
.persoonlijk{margin-top:44px;background:var(--brand-tint);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px 30px}
.persoonlijk > h2{margin-bottom:20px}
.persoonlijk-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.persoonlijk-raster .ic{background:var(--surface);margin-bottom:10px}
.persoonlijk-raster h3{font-size:1rem}
.persoonlijk-raster p{margin:0;color:var(--soft);font-size:.92rem}

/* blokken */
.blok{padding:56px 0;scroll-margin-top:92px}
.blok-licht{background:var(--bg)}
.card.scan-kaart{margin:0;padding:28px;border-top:3px solid var(--brand)}
.scan-raster{display:grid;grid-template-columns:1.25fr .75fr;gap:32px;align-items:stretch}
.scan-beeld,.kennis-beeld{min-width:0}
.beeld-plek{height:100%;min-height:240px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--brand-tint);display:grid;place-items:center;color:var(--brand-donker)}
.beeld-merk{display:block;width:150px;height:auto}
.voortgang{height:4px;background:var(--line);border-radius:2px;margin:0 0 18px}
.voortgang i{display:block;height:4px;width:25%;background:var(--brand);border-radius:2px;transition:width .2s}
.optie-web{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;margin:0 0 9px;font:inherit;font-size:1rem;color:var(--ink);cursor:pointer}
.optie-web:hover{border-color:var(--brand)}
.optie-web.aan{border-color:var(--brand-2);background:var(--blauw-tint);box-shadow:inset 3px 0 0 var(--brand-2)}
.uit-apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:6px 0 4px}
.uit-app{display:block;background:var(--bg);border:1px solid var(--line);border-top:3px solid var(--brand);border-radius:var(--radius);padding:14px 16px;color:var(--ink)}
.uit-app strong{display:block;margin-bottom:4px}
.uit-app span{font-size:.9rem;color:var(--soft)}
.uit-app:hover{border-top-color:var(--brand-2)}

.raster-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:6px}
.mod-web{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--brand);border-radius:var(--radius);padding:20px 20px 22px}
.mod-web p{margin:0;color:var(--soft);font-size:.92rem}
.ic{display:inline-grid;place-items:center;width:38px;height:38px;background:var(--brand-tint);color:var(--brand-donker);border-radius:var(--radius);flex:none}
.ic svg.i{width:21px;height:21px}
.mod-web .ic{margin-bottom:12px}

.raster-apps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:6px}
.app-web{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;scroll-margin-top:100px}
.app-web:target{border-color:var(--brand-2);box-shadow:0 0 0 2px var(--blauw-tint)}
.w-app-scherm{display:block;width:100%;height:170px;object-fit:cover;object-position:top left;border-bottom:1px solid var(--line);background:var(--bg)}
.w-app-scherm-leeg{display:grid;place-items:center;color:var(--brand-donker);background:var(--brand-tint)}
.w-app-scherm-leeg svg.i{width:44px;height:44px}
.app-tekst{padding:16px 18px 20px}
.app-tekst h3{display:flex;align-items:center;gap:10px}
.app-tekst p{margin:0 0 8px;color:var(--soft);font-size:.93rem}
.app-tekst ul{margin:0;padding-left:18px;font-size:.88rem;color:var(--soft)}
.app-tekst li{margin:3px 0}

.stappen{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stappen li{display:flex;gap:14px;align-items:flex-start}
.stappen p{margin:2px 0 0}
.nr{flex:none;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;display:grid;place-items:center}

.kennis-raster{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start}
.kennis-form .field{margin-bottom:14px}
.kennis-form input[type=text],.kennis-form input:not([type]),.kennis-form input[type=email],.kennis-form input[type=tel]{width:100%}
.w-akkoord{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;margin:6px 0 16px;color:var(--soft)}
.w-akkoord input{margin-top:4px}
.veld-robot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.web-voet{border-top:1px solid var(--line);background:var(--bg);padding:22px 0;font-size:.88rem;color:var(--soft)}
.web-voet-rij{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.voet-merk{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.voet-merk img{height:40px;width:auto;display:block}
.web-binnen > .flash{margin-top:16px}

@media (max-width:900px){
  .hero{padding:34px 0 30px}
  .hero-raster,.scan-raster,.kennis-raster{grid-template-columns:1fr}
  .scan-beeld{display:none}
  .web h1{font-size:1.8rem}
  body.web .topbar{height:auto}
  body.web .topbar .brand img.web-logo{height:46px}
  .hero-logo{height:auto;width:min(340px,100%);margin-bottom:18px}
  .raster-4{grid-template-columns:repeat(2,1fr)}
  .bst-kaarten{grid-template-columns:1fr}
  .persoonlijk-raster{grid-template-columns:repeat(2,1fr)}
  .persoonlijk{padding:24px 18px}
  .raster-apps{grid-template-columns:repeat(2,1fr)}
  .stappen{grid-template-columns:1fr}
  .blok{padding:40px 0;scroll-margin-top:12px}
  .web-binnen{padding:0 16px}
}
@media (max-width:560px){
  .raster-4,.raster-apps,.persoonlijk-raster{grid-template-columns:1fr}
  .web-inlog{padding:5px 12px}
}
@media (prefers-reduced-motion:reduce){.voortgang i{transition:none}}