@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/space-grotesk-700-latin.woff2) format("woff2")}
/* Hub2Work · website hub2work.nl. Zelfde vormgeving als de apps en permit2work.nl: systeemletter, lichtgrijze achtergrond,
   witte kaartjes met zachte schaduw, donkere kopbalk met streep (huisstijl: permit2work/huisstijl/README.md).
   Sinds 05-11-2026 met de familie-opmaak (hub2work/huisstijl/LEESMIJ.md): koppen in Space Grotesk, verlopen, donkere vlakken met gloed. */
:root{
  --groen:#0B6B4F;--groen-hover:#095A42;--bosinkt:#10221C;--lichtgroen:#7FD1AE;--salie:#A9C3B4;--amber:#D99A00;
  --bg:#F2F2F7;--kaart:#FFFFFF;--tekst:#10221C;--grijs:#5B6B64;--lijn:#E3E6E4;--zacht:#E6F2EC;--knop2:#E9EBEA;
  --schaduw:0 1px 2px rgba(16,34,28,.05),0 6px 20px rgba(16,34,28,.07);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,sans-serif;
  --kop:"Space Grotesk",var(--font);
  --verloop-knop:linear-gradient(135deg,#0B6B4F,#1F8A63);--verloop-knop-hover:linear-gradient(135deg,#095A42,#1A7A57);
  --verloop-titel:linear-gradient(120deg,#2E9A72,#7FD1AE);--verloop-streep:linear-gradient(90deg,#0B6B4F,#7FD1AE);
  --gloed:radial-gradient(90% 70% at 0% 0%,rgba(46,154,114,.55),transparent 65%),radial-gradient(70% 60% at 100% 100%,rgba(127,209,174,.22),transparent 65%),#0E1A16;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#000;--kaart:#1C1C1E;--tekst:#ECF1EE;--grijs:#9AA8A1;--lijn:#2C2C2E;--zacht:#16261F;--knop2:#2C2C2E;--groen:#3FA57E;--groen-hover:#4DB78E;
  --schaduw:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.35);
color-scheme:dark}}
:root[data-theme=dark]{
  --bg:#000;--kaart:#1C1C1E;--tekst:#ECF1EE;--grijs:#9AA8A1;--lijn:#2C2C2E;--zacht:#16261F;--knop2:#2C2C2E;--groen:#3FA57E;--groen-hover:#4DB78E;
  --schaduw:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.35);
color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tekst);font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--groen)}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0 0 .5em}
h1,h2{font-family:var(--kop);letter-spacing:-.025em}
.verloop{background:var(--verloop-titel);-webkit-background-clip:text;background-clip:text;color:transparent}
.punt{color:var(--lichtgroen)}
h1{font-size:clamp(34px,5.4vw,58px)}
h2{font-size:clamp(27px,3.6vw,40px)}
h3{font-size:20px;letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.kicker{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grijs);margin-bottom:10px}
.lead{font-size:clamp(18px,2vw,21px);color:var(--grijs);max-width:640px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--bosinkt);padding:8px 14px;border-radius:10px;z-index:20}
.skip:focus{left:8px}

/* Kopbalk */
.top{background:var(--bosinkt);color:#EEF3F0;position:sticky;top:0;z-index:10}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:68px}
.top .logo img{height:30px;width:auto}
.top nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.top nav a{color:#C9D6CF;text-decoration:none;font-weight:500;font-size:16px;padding:8px 12px;border-radius:10px}
.top nav a:hover,.top nav a[aria-current=page]{color:#fff;background:rgba(255,255,255,.08)}
.top .knop{margin-left:8px}
.menu-knop{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:10px;width:44px;height:44px;cursor:pointer}
.streep{height:4px;background:var(--verloop-streep)}
@media (max-width:860px){
  .menu-knop{display:grid;place-items:center}
  .top nav{display:none;position:absolute;left:0;right:0;top:72px;background:var(--bosinkt);flex-direction:column;align-items:stretch;padding:8px 20px 20px;gap:2px}
  .top.open nav{display:flex}
  .top nav a{padding:12px}
  .top .knop{margin:8px 0 0}
}

/* Knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:12px;font:600 16px/1 var(--font);text-decoration:none;border:0;cursor:pointer;transition:transform .12s,background .15s}
.knop:active{transform:scale(.97)}
.knop.hoofd{background:var(--verloop-knop);color:#fff}
.knop.hoofd:hover{background:var(--verloop-knop-hover)}
.knop.licht{background:var(--lichtgroen);color:var(--bosinkt)}
.knop.licht:hover{background:#95DCBD}
.knop.twee{background:var(--knop2);color:var(--tekst)}
.knop.rand{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.knoppen{display:flex;flex-wrap:wrap;gap:12px}

/* Hero */
.hero{background:var(--gloed);color:#fff;padding:72px 0 0;overflow:hidden;position:relative}
.hero::after{content:"";position:absolute;right:-180px;top:-160px;width:560px;height:560px;border-radius:50%;border:70px solid rgba(255,255,255,.04)}
.hero .wrap{position:relative;z-index:1}
.hero .kicker,.paginakop .kicker,.donker .kicker{font:500 12px var(--mono);letter-spacing:.18em;color:var(--lichtgroen)}
.hero .lead{color:#C9D6CF}
.hero h1{max-width:820px}
.hero .knoppen{margin:28px 0 48px}
.hero-beeld{position:relative;max-width:1040px;margin:0 auto}
.hero-beeld .groot{border-radius:16px 16px 0 0;box-shadow:0 -10px 50px rgba(0,0,0,.35);width:100%;aspect-ratio:1280/640;object-fit:cover;object-position:left top}
.hero-beeld .klein{position:absolute;right:-12px;bottom:24px;width:22%;min-width:120px;border-radius:22px;border:6px solid #0B1712;box-shadow:0 20px 50px rgba(0,0,0,.45);aspect-ratio:600/1100;object-fit:cover;object-position:left top}
@media (max-width:640px){.hero{padding-top:48px}.hero-beeld .klein{display:none}}
.paginakop{background:var(--gloed);color:#fff;padding:56px 0 48px}
.paginakop .lead{color:#C9D6CF}
.paginakop .kicker{color:var(--lichtgroen)}

/* Secties en kaartjes */
section{padding:72px 0}
section.krap{padding:48px 0}
.kop{margin-bottom:32px}
.raster{display:grid;gap:16px}
.r2{grid-template-columns:repeat(2,1fr)}.r3{grid-template-columns:repeat(3,1fr)}.r4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.r4{grid-template-columns:repeat(2,1fr)}.r3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.r2,.r3,.r4{grid-template-columns:1fr}}
.kaart{background:var(--kaart);border-radius:16px;box-shadow:var(--schaduw);padding:24px}
.kaart p:last-child{margin-bottom:0}
.kaart p{color:var(--grijs);font-size:16px}
.ico{width:40px;height:40px;border-radius:10px;background:var(--zacht);color:var(--groen);display:grid;place-items:center;margin-bottom:14px}
.ico svg{width:22px;height:22px}
.label{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--zacht);color:var(--groen);margin-bottom:10px}
.label.amber{background:#FBF0D9;color:#6B4A00}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .label.amber{background:#3A2E12;color:#F0C860}}
:root[data-theme=dark] .label.amber{background:#3A2E12;color:#F0C860}

/* Probleem → oplossing */
.voor-na .kaart h3{display:flex;align-items:center;gap:10px}
.voor-na ul{margin:0;padding-left:20px;color:var(--grijs)}
.voor-na li{margin:6px 0}

/* Stappen */
.stappen{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:960px){.stappen{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.stappen{grid-template-columns:1fr}}
.stap{background:var(--kaart);border-radius:16px;box-shadow:var(--schaduw);padding:20px}
.stap .nr{font:500 13px var(--mono);color:var(--groen)}
.stap h3{font-size:18px;margin:6px 0}
.stap p{font-size:15px;color:var(--grijs);margin:0}
.stap.module{background:transparent;box-shadow:none;border:1.5px dashed var(--salie)}

/* Uitgelicht: tekst + schermafbeelding */
.uitgelicht{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
.uitgelicht.om{grid-template-columns:1.15fr 1fr}
.uitgelicht.om .tekst{order:2}
@media (max-width:860px){.uitgelicht,.uitgelicht.om{grid-template-columns:1fr;gap:28px}.uitgelicht.om .tekst{order:0}}
.scherm{border-radius:16px;box-shadow:0 12px 40px rgba(16,34,28,.16);overflow:hidden;background:var(--kaart)}
.scherm img{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:left top}
.vinkjes{list-style:none;padding:0;margin:0 0 1em}
.vinkjes li{position:relative;padding-left:30px;margin:10px 0;color:var(--grijs)}
.vinkjes li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:6px;background:var(--zacht) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6B4F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat}
.vinkjes strong{color:var(--tekst);font-weight:600}

/* Donker blok */
.donker{background:var(--bosinkt);color:#EEF3F0}
.donker .lead,.donker p{color:#B9C9C1}
.donker .kicker{color:var(--lichtgroen)}
.donker .kaart{background:rgba(255,255,255,.05);box-shadow:none;border:1px solid rgba(255,255,255,.08)}
.donker .kaart p{color:#B9C9C1}
.donker .ico{background:rgba(127,209,174,.15);color:var(--lichtgroen)}

/* Groepskopje en lijst met modules */
.groepskop{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--grijs);margin:40px 0 10px 4px}
.groepskop:first-child{margin-top:0}
.module-rij{display:flex;gap:16px;align-items:flex-start}
.module-rij .ico{flex:0 0 40px;margin:0}
.module-rij h3{margin-bottom:4px;font-size:18px}

/* Pakketten */
.pakket{display:flex;flex-direction:column}
.pakket.uit{outline:2px solid var(--groen)}
.pakket h3{font-size:24px}
.pakket .voor{font-size:15px;color:var(--grijs);min-height:3em}
.pakket ul{list-style:none;padding:0;margin:12px 0 0;border-top:1px solid var(--lijn)}
.pakket li{padding:10px 0;border-bottom:1px solid var(--lijn);font-size:15px;display:flex;gap:10px}
.pakket li::before{content:"✓";color:var(--groen);font-weight:700}
.pakket li.plus::before{content:"+"}

/* Afsluitende oproep */
.oproep{background:linear-gradient(150deg,#12281F,#0B5A42);color:#fff;border-radius:24px;padding:48px;display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center}
.oproep p{color:#C9D6CF}
.oproep .knoppen{justify-content:flex-end}
@media (max-width:760px){.oproep{grid-template-columns:1fr;padding:32px 24px}.oproep .knoppen{justify-content:flex-start}}

/* Formulier */
.form{display:grid;gap:16px}
.form .twee{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.form .twee{grid-template-columns:1fr}}
.form label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:16px;color:var(--tekst);background:var(--kaart);border:1px solid #D3D8D5;border-radius:10px;padding:11px 12px;min-height:44px}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--lichtgroen);border-color:var(--groen)}
.form .keuzes{display:flex;flex-wrap:wrap;gap:8px}
.form .keuzes label{display:flex;align-items:center;gap:8px;font-weight:500;background:var(--knop2);border-radius:10px;padding:10px 14px;margin:0;cursor:pointer;font-size:15px}
.form .keuzes input{width:auto;min-height:0;accent-color:var(--groen)}
.form .klein{font-size:14px;color:var(--grijs)}
.melding{display:none;background:var(--zacht);border-radius:12px;padding:14px 16px;font-size:15px}
.melding.toon{display:block}

/* Voettekst */
footer{background:var(--bosinkt);color:#B9C9C1;font-size:15px;margin-top:72px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-top:48px;padding-bottom:40px}
footer h4{color:#fff;font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}
footer a{color:#B9C9C1;text-decoration:none;display:block;padding:3px 0}
footer a:hover{color:#fff}
footer .logo img{height:28px;width:auto;margin-bottom:14px}
footer .onder{border-top:1px solid rgba(255,255,255,.08);padding:18px 0;font-size:13px;grid-template-columns:1fr auto}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}
.geen-marge{margin-top:0}
.film{max-width:1100px;margin:0 auto;border-radius:16px;overflow:hidden;box-shadow:0 12px 40px rgba(16,34,28,.16);background:#10221C}
.film video{display:block;width:100%;height:auto;aspect-ratio:16/9}

/* Hub2Work: de familie van modules */
.module-kaart{display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
a.module-kaart:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(16,34,28,.06),0 12px 30px rgba(16,34,28,.12)}
.module-kaart .mk-kop{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.module-kaart .mk-kop img{width:48px;height:48px;flex:0 0 48px}
.module-kaart h3{margin:0;font-size:21px}
.module-kaart .wat{font-size:14px;color:var(--grijs);font-weight:500}
.module-kaart .meer{margin-top:auto;padding-top:8px;font-weight:600;color:var(--groen);font-size:15px}
.status{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--zacht);color:var(--groen);margin-bottom:12px;align-self:flex-start}
.status.later{background:var(--knop2);color:var(--grijs)}
.donker .status.later{background:rgba(255,255,255,.08);color:#B9C9C1}
.paraplu{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.paraplu img{width:56px;height:56px}
.paraplu p{margin:0}
.module-blok{scroll-margin-top:90px}
.module-blok .mk-kop{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.module-blok .mk-kop img{width:56px;height:56px}
.module-blok .mk-kop h2{margin:0}
.module-blok .mk-kop .wat{color:var(--grijs);font-weight:500}
.module-blok + .module-blok{border-top:1px solid var(--lijn)}
.samen .kaart h3{display:flex;align-items:center;gap:10px;font-size:18px}
.samen .pijl{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.samen .pijl img{width:32px;height:32px}
.samen .pijl span{color:var(--grijs);font-weight:700}
.vragen details{background:var(--kaart);border-radius:16px;box-shadow:var(--schaduw);padding:0 24px;margin-bottom:12px}
.vragen summary{cursor:pointer;font-weight:600;font-size:18px;padding:20px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"+";color:var(--groen);font-size:24px;line-height:1}
.vragen details[open] summary::after{content:"–"}
.vragen details p{color:var(--grijs);margin:0 0 20px}
.inlog-lijst a{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--lijn);text-decoration:none;color:var(--tekst);font-weight:600}
.inlog-lijst a:last-child{border-bottom:0}
.inlog-lijst img{width:28px;height:28px}
.inlog-lijst span{margin-left:auto;color:var(--grijs);font-weight:400;font-size:14px}
picture{display:block;flex:none}