/* Maintenance Rehab · website hub2work.nl/rehab/
   Eigen Sunset-stijl, bewust los van de 2Work-apps (hub2work/maintenance-rehab/huisstijl in de projectmap):
   bijna-zwart met roze-oranje gloed, warm gebroken wit, Space Grotesk voor koppen, Inter voor tekst, IBM Plex Mono voor labels.
   Versie 1.0 – 05-11-2026 */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/space-grotesk-latin.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-500-latin.woff2) format("woff2")}
:root{
  --nacht:#0D0B14;--roze:#FF2E88;--roze-diep:#D61F69;--oranje:#FF8A3D;--lila:#B9AFC0;
  --bg:#FBF7F5;--kaart:#FFFFFF;--tekst:#0D0B14;--grijs:#5E5866;--lijn:#E9E1E3;--zacht:#FCE9F1;--vlak:#F4EEEC;
  --verloop:linear-gradient(120deg,#FF2E88,#FF8A3D);
  --gloed:radial-gradient(80% 90% at 0% 0%,rgba(255,46,136,.55),transparent 60%),radial-gradient(70% 80% at 100% 100%,rgba(255,138,61,.40),transparent 62%),#0D0B14;
  --schaduw:0 1px 2px rgba(13,11,20,.05),0 8px 28px rgba(13,11,20,.07);
  --tekstfont:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --kop:"Space Grotesk",var(--tekstfont);--mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0D0B14;--kaart:#18151F;--tekst:#F3EEF2;--grijs:#B9AFC0;--lijn:#2A2533;--zacht:#2A1420;--vlak:#1F1B27;--roze-diep:#FF5CA3;
  --schaduw:0 1px 2px rgba(0,0,0,.5),0 8px 28px rgba(0,0,0,.4);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.6 var(--tekstfont);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--roze-diep)}
h1,h2,h3{font-family:var(--kop);font-weight:700;letter-spacing:-.025em;line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(38px,6.4vw,72px);letter-spacing:-.045em}
h2{font-size:clamp(28px,3.6vw,42px)}
h3{font-size:20px;letter-spacing:-.015em}
p{margin:0 0 1em}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.overslaan{position:absolute;left:-999px}.overslaan:focus{left:12px;top:12px;z-index:9;background:#fff;color:#000;padding:8px 12px;border-radius:8px}

/* Kopbalk */
.top{background:var(--nacht);color:#fff;position:sticky;top:0;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;flex-wrap:wrap}
.top .logo img{height:30px;width:auto}
.top nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.top nav a{color:#E9E3EC;text-decoration:none;font-weight:500;font-size:15px;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 nav a.knop{color:#fff;margin-left:6px}
.streep{height:3px;background:var(--verloop)}
@media (max-width:760px){.top nav{width:100%;padding-bottom:10px;gap:2px}.top nav a{padding:6px 9px;font-size:14px}.top nav a.knop{margin-left:auto}}

/* Knoppen */
.knop{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:11px 20px;border-radius:999px;background:var(--verloop);color:#fff;font-weight:600;text-decoration:none;font-size:16px;border:0;box-shadow:0 6px 22px rgba(255,46,136,.28)}
.knop:hover{filter:brightness(1.06)}
.knop.rand{background:transparent;box-shadow:none;border:1.5px solid rgba(255,255,255,.4);color:#fff}
.knop.rand:hover{border-color:#fff}
.knoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* Hero en donkere vlakken */
.donker{background:var(--gloed);color:#fff}
.donker p{color:#DDD5E0}
.hero{padding:88px 0 96px}
.hero .lead{font-size:clamp(18px,2vw,21px);max-width:680px;color:#E7E0EA}
.label{font:500 13px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--roze-diep);margin:0 0 14px}
.donker .label{color:var(--oranje)}
.verloop{background:var(--verloop);-webkit-background-clip:text;background-clip:text;color:transparent}
.punt{color:var(--oranje)}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}
.hero-beeld{position:relative;min-height:600px}
.hero-beeld img{border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.5);width:230px;position:absolute;border:1px solid rgba(255,255,255,.12)}
.hero-beeld img:first-child{right:130px;top:10px;transform:rotate(-4deg)}
.hero-beeld img:last-child{right:0;top:70px;transform:rotate(4deg)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-beeld{display:none}.hero{padding:56px 0 64px}}
.paginakop{padding:64px 0 56px}
.paginakop h1{font-size:clamp(34px,5vw,56px)}

/* Secties */
section{padding:80px 0}
section.vlak{background:var(--vlak)}
.intro{max-width:720px;margin-bottom:36px}
.intro p{color:var(--grijs);font-size:18px}
.donker .intro p{color:#DDD5E0}
.raster{display:grid;gap:18px}
.raster>*{min-width:0}
.r2{grid-template-columns:repeat(2,1fr)}.r3{grid-template-columns:repeat(3,1fr)}.r4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.r3,.r4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.r2,.r3,.r4{grid-template-columns:1fr}section{padding:56px 0}}
.kaart{background:var(--kaart);border-radius:20px;padding:24px;box-shadow:var(--schaduw);border:1px solid var(--lijn)}
.kaart p:last-child,.kaart ul:last-child{margin-bottom:0}
.kaart p{color:var(--grijs)}
.donker .kaart{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:none}
.donker .kaart p{color:#DDD5E0}
.nr{font:700 15px/1 var(--kop);display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--verloop);color:#fff;margin-bottom:14px}
.lijst{margin:0;padding:0;list-style:none}
.lijst li{padding:10px 0 10px 30px;position:relative;border-top:1px solid var(--lijn)}
.lijst li:first-child{border-top:0}
.lijst li::before{content:"";position:absolute;left:4px;top:19px;width:10px;height:10px;border-radius:50%;background:var(--verloop)}
.lijst.kaart{padding:8px 24px}
.donker .lijst li{border-color:rgba(255,255,255,.12)}

/* Fasen als tijdlijn */
.fasen{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:f}
.fase{background:var(--kaart);border:1px solid var(--lijn);border-radius:18px;padding:20px;box-shadow:var(--schaduw);position:relative}
.fase .duur{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--roze-diep);margin-bottom:8px}
.fase p{color:var(--grijs);font-size:15px;margin:0}
@media (max-width:980px){.fasen{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fasen{grid-template-columns:1fr}}

/* Tien gebieden */
.gebieden{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;counter-reset:g}
.gebied{display:flex;gap:14px;align-items:flex-start;background:var(--kaart);border:1px solid var(--lijn);border-radius:16px;padding:16px 18px}
.gebied b{font-family:var(--kop);font-size:17px;display:block}
.gebied span{color:var(--grijs);font-size:15px}
.gebied .nr{flex:none;margin:0}
.gebied.nieuw{border-color:var(--roze)}
@media (max-width:700px){.gebieden{grid-template-columns:1fr}}

/* Bron-kolommen, tabellen */
.bron h3{display:flex;align-items:center;gap:10px}
table{width:100%;border-collapse:collapse;font-size:15px;background:var(--kaart);border-radius:16px;overflow:hidden;box-shadow:var(--schaduw)}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--lijn);vertical-align:top}
th{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grijs);background:var(--vlak)}
tr:last-child td{border-bottom:0}
.tabel{overflow-x:auto}

/* Beeld met onderschrift */
figure{margin:0}
figure img{border-radius:14px;box-shadow:var(--schaduw);border:1px solid var(--lijn)}
figcaption{font-size:14px;color:var(--grijs);margin-top:10px}
.telefoons{display:flex;gap:20px;justify-content:center}
.telefoons img{width:240px;border-radius:26px}

/* Citaat / belofte */
.belofte{font:600 clamp(22px,2.8vw,32px)/1.25 var(--kop);letter-spacing:-.02em;max-width:820px;margin:0}
.noot{background:var(--zacht);border-radius:14px;padding:14px 18px;font-size:15px;color:var(--tekst)}

/* Vragen */
details{background:var(--kaart);border:1px solid var(--lijn);border-radius:14px;padding:16px 20px;margin-bottom:10px}
summary{font-weight:600;cursor:pointer}
details p{color:var(--grijs);margin:10px 0 0}

/* Voettekst */
footer{background:var(--nacht);color:#C9C0CE;padding:56px 0 28px;font-size:15px}
footer .wrap.kol{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
footer h4{color:#fff;font:600 14px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;margin:0 0 12px}
footer a{color:#E9E3EC;text-decoration:none;display:block;padding:3px 0}
footer a:hover{color:#fff;text-decoration:underline}
footer .logo img{height:28px;width:auto;margin-bottom:14px}
footer .onder{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:20px;font-size:13px;color:#9E94A6}
@media (max-width:760px){footer .wrap.kol{grid-template-columns:1fr}}