/* BAKKE.systems: ontwerpsysteem in de donkere huisstijl (Nacht, Kaart, Mist, Accent). Tokens en regels: DESIGN.md. */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/bricolage.woff2) format("woff2"), url(../fonts/bricolage.woff) format("woff"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/instrument.woff2) format("woff2"), url(../fonts/instrument.woff) format("woff"); }

/* ---------- Tokens: donker is de standaard, licht via de schakelaar ---------- */
:root {
  --nacht: #0B0D12; --kaart: #12151D; --mist: #161A23; --lijn: #232836; --lijn-sterk: #2E3444;
  --tekst: #EEF0F5; --gedempt: #9AA2B2; --accent: #7B89FF; --op-accent: #0B0D12; --accent-hover: #98A3FF;
  --diep: #1B2478; --op-diep-zacht: #C9CFFC;
  --raster: rgb(238 240 245 / .045); --gloed: rgb(47 69 255 / .22); --gloed-2: rgb(47 69 255 / .12);
  --f-kop: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-tekst: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --r-klein: 8px; --r-knop: 999px; --r-vlak: 16px; --r-groot: 24px;
  --sectie: 4.5rem;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --nacht: #F6F7FA; --kaart: #FFFFFF; --mist: #EEF1F7; --lijn: #E1E5EE; --lijn-sterk: #CDD3E0;
  --tekst: #0D1017; --gedempt: #545B6A; --accent: #4F5BD5; --op-accent: #FFFFFF; --accent-hover: #3F4BC0;
  --raster: rgb(13 16 23 / .05); --gloed: rgb(123 137 255 / .2); --gloed-2: rgb(123 137 255 / .14);
  color-scheme: light;
}
@media (min-width: 1024px) { :root { --sectie: 7rem; } }

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
body { margin: 0; background: var(--nacht); color: var(--tekst); font: 400 1.0625rem/1.6 var(--f-tekst); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure, blockquote, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 3px; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--f-kop); text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.hidden, [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.naar-inhoud { position: absolute; left: 1rem; top: -4rem; z-index: 60; padding: .75rem 1rem; border-radius: var(--r-klein); background: var(--accent); color: var(--op-accent); font-weight: 600; }
.naar-inhoud:focus { top: 1rem; }
.wrap { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 640px) { .wrap { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .wrap { padding-inline: 2rem; } }

/* Huisstijlvlak: raster met zachte gloed in de hoeken, zoals op de achtergronden van BAKKE.systems */
.huisstijl {
  position: relative; isolation: isolate;
  background-color: var(--nacht);
  background-image:
    radial-gradient(52rem 34rem at 92% 4%, var(--gloed), transparent 70%),
    radial-gradient(40rem 28rem at 0% 100%, var(--gloed-2), transparent 70%),
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: auto, auto, 84px 84px, 84px 84px;
}

/* ---------- Tekst ---------- */
.label { display: inline-flex; align-items: center; gap: .75rem; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.label::before { content: ""; width: 1.75rem; height: 2px; background: currentColor; }
.h2 { margin-top: .9rem; font-size: clamp(2.25rem, 4.6vw, 3.75rem); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; }
.h2 .zacht { font-weight: 300; color: var(--gedempt); }
.lead { margin-top: 1.1rem; max-width: 36rem; font-size: 1.1875rem; line-height: 1.55; color: var(--gedempt); }
.sectie-kop { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 3rem; margin-bottom: 3rem; }
@media (min-width: 1024px) { .sectie-kop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } .sectie-kop .lead { margin-top: 0; } }
.link { color: var(--accent); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; }
.link:hover { text-decoration: underline; }
.link svg { width: 1rem; height: 1rem; transition: transform .2s; }
.link:hover svg { transform: translateX(3px); }

/* ---------- Knoppen ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.125rem; padding: .75rem 1.5rem; border: 1px solid transparent; border-radius: var(--r-knop); font: 600 .9688rem/1.2 var(--f-tekst); text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .15s; }
.knop svg { width: 1.1rem; height: 1.1rem; flex: none; }
.knop-primair { background: var(--accent); color: var(--op-accent); }
.knop-primair:hover { background: var(--accent-hover); transform: translateY(-1px); }
.knop-rand { border-color: var(--lijn-sterk); color: var(--tekst); background: rgb(255 255 255 / .02); }
.knop-rand:hover { border-color: var(--gedempt); }
.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Header ---------- */
.kop { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--nacht) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--lijn); }
.kop-binnen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4.25rem; }
.logo { display: flex; align-items: center; min-height: 2.75rem; }
.logo img { height: 1.2rem; width: auto; }
.logo-licht { display: none !important; }
:root[data-theme="light"] .logo-licht { display: block !important; }
:root[data-theme="light"] .logo-donker { display: none !important; }
.hoofdmenu { display: none; }
.hoofdmenu ul { display: flex; gap: .25rem; }
.hoofdmenu a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: .85rem; color: var(--gedempt); font-size: .9375rem; font-weight: 500; text-decoration: none; border-radius: var(--r-knop); transition: color .15s; }
.hoofdmenu a:hover { color: var(--tekst); }
.kop-acties { display: flex; align-items: center; gap: .35rem; }
.kop-acties .knop { display: none; min-height: 2.75rem; padding-inline: 1.15rem; font-size: .9063rem; }
.icoonknop { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: transparent; color: var(--gedempt); cursor: pointer; transition: color .15s, background-color .15s; }
.icoonknop:hover { color: var(--tekst); background: var(--mist); }
.icoonknop svg { width: 1.2rem; height: 1.2rem; }
.icoon-maan { display: none; }
:root[data-theme="light"] .icoon-maan { display: block; }
:root[data-theme="light"] .icoon-zon { display: none; }
html:not(.js) [data-thema-knop], html:not(.js) [data-menu-knop] { display: none; }
html:not(.js) [data-mailform] { display: none; }
.mobiel-menu { border-top: 1px solid var(--lijn); padding-block: .5rem 1.25rem; }
.mobiel-menu li a { display: flex; align-items: center; min-height: 3.25rem; border-bottom: 1px solid var(--lijn); font: 700 1.375rem/1.2 var(--f-kop); text-decoration: none; }
.mobiel-menu .knoppen { margin-top: 1.25rem; display: grid; }
@media (min-width: 640px) { .kop-acties .knop { display: inline-flex; } }
@media (min-width: 1024px) { .kop-binnen { height: 4.75rem; } .logo img { height: 1.35rem; } .hoofdmenu { display: block; } [data-menu-knop], .mobiel-menu { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
  .mobiel-menu { opacity: 0; transform: translateY(-4px); transition: opacity .2s ease-out, transform .2s ease-out; }
  .mobiel-menu[data-open] { opacity: 1; transform: none; }
}

/* ---------- Hero ---------- */
.hero { padding-block: 3.5rem 4rem; border-bottom: 1px solid var(--lijn); }
.hero-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: center; }
.hero h1 { font-size: clamp(3.1rem, 8.4vw, 7rem); font-weight: 800; line-height: .95; letter-spacing: -.045em; }
.hero h1 .accent { color: var(--accent); }
.hero-slogan { margin-top: 1.5rem; font: 800 clamp(1.5rem, 2.6vw, 2.125rem)/1.15 var(--f-kop); letter-spacing: -.025em; }
.hero-slogan span { display: block; font-weight: 300; color: var(--gedempt); }
.hero-intro { margin-top: 1.5rem; max-width: 34rem; font-size: 1.1875rem; line-height: 1.55; color: var(--gedempt); }
.hero-intro a { color: var(--accent); font-weight: 600; }
.hero .knoppen { margin-top: 2.25rem; }
.vinken { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; margin-top: 2rem; font-size: .9375rem; color: var(--gedempt); }
.vinken li { display: flex; align-items: center; gap: .5rem; }
.vinken svg { width: 1.1rem; height: 1.1rem; color: var(--accent); flex: none; }
@media (min-width: 1024px) {
  .hero { padding-block: 5.5rem 6rem; }
  .hero-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4.6fr); gap: 4rem; min-height: min(calc(100svh - 16rem), 40rem); }
}

/* Contactkaart naast de kop: wie je belt */
.contactkaart { position: relative; border: 1px solid var(--lijn-sterk); border-radius: var(--r-groot); background: color-mix(in oklab, var(--kaart) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 1.5rem; box-shadow: 0 40px 80px -40px rgb(0 0 0 / .6); }
.ck-wie { display: flex; align-items: center; gap: 1rem; }
.ck-wie img { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; object-position: 50% 30%; border: 2px solid var(--accent); }
.ck-wie strong { display: block; font: 700 1.1875rem/1.2 var(--f-kop); }
.ck-wie span { font-size: .875rem; color: var(--gedempt); }
.ck-nummer { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--lijn); }
.ck-nummer small { display: block; font-size: .8125rem; color: var(--gedempt); }
.ck-nummer a { display: inline-flex; min-height: 2.75rem; align-items: center; font: 800 clamp(1.75rem, 3vw, 2.25rem)/1.1 var(--f-kop); letter-spacing: -.02em; text-decoration: none; }
.ck-nummer a:hover { color: var(--accent); }
.contactkaart .knoppen { margin-top: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.contactkaart .knop { min-height: 2.875rem; padding-inline: .75rem; font-size: .9063rem; }
.ck-tijd { margin-top: 1.1rem; display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--gedempt); }
.ck-tijd svg { width: 1rem; height: 1rem; color: var(--accent); }
.ck-review { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border-radius: var(--r-vlak); background: var(--mist); text-decoration: none; }
.ck-review strong { font: 800 1.5rem/1 var(--f-kop); color: var(--tekst); }
.ck-review span { font-size: .875rem; color: var(--gedempt); }
.sterren, .ck-review .sterren, .score-blok .sterren { color: var(--goud); letter-spacing: .08em; font-size: .9375rem; }
.ck-review:hover > span:last-child { color: var(--tekst); }

/* ---------- Secties ---------- */
.sectie { padding-block: var(--sectie); }
.sectie + .sectie { border-top: 1px solid var(--lijn); }
.sectie-kaart { background: var(--kaart); }

/* Kaartenraster met iconen (diensten, herkenning) */
.kaarten { display: grid; gap: 1rem; }
@media (min-width: 640px) { .kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kaarten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kaart { position: relative; display: flex; flex-direction: column; padding: 1.75rem; border: 1px solid var(--lijn); border-radius: var(--r-vlak); background: var(--kaart); transition: border-color .2s, transform .2s, background-color .2s; }
.sectie-kaart .kaart { background: var(--nacht); }
a.kaart { text-decoration: none; }
a.kaart:hover { border-color: color-mix(in oklab, var(--accent) 60%, transparent); transform: translateY(-3px); }
.icoon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 12px; background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent); }
.icoon svg { width: 1.4rem; height: 1.4rem; }
.kaart h3 { margin-top: 1.25rem; font-size: 1.3125rem; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.kaart p { margin-top: .5rem; color: var(--gedempt); }
.kaart .meer { margin-top: auto; padding-top: 1.25rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--accent); font-weight: 600; font-size: .9375rem; }
.kaart .meer svg { width: 1rem; height: 1rem; transition: transform .2s; }
a.kaart:hover .meer svg { transform: translateX(3px); }
.citaatkaart h3 { margin-top: 0; font-size: 1.25rem; }
.citaatkaart { border-left: 3px solid var(--accent); }
.noot { margin-top: 1.5rem; color: var(--gedempt); }
.noot a { color: var(--accent); font-weight: 600; }

/* Twee kolommen met vinklijst */
.tweeluik { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .tweeluik { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; } }
.vinklijst { display: grid; gap: .25rem; }
.vinklijst li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; padding: 1.1rem 0; border-bottom: 1px solid var(--lijn); }
.vinklijst li:first-child { border-top: 1px solid var(--lijn); }
.vinklijst svg { width: 1.5rem; height: 1.5rem; color: var(--accent); margin-top: .15rem; }
.vinklijst strong { display: block; font: 700 1.125rem/1.35 var(--f-kop); }
.vinklijst p { margin-top: .2rem; color: var(--gedempt); }
.tweeluik .knoppen { margin-top: 2rem; }
.paneel { border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 2rem; background: var(--nacht); }
.paneel-titel { font: 700 1.25rem/1.3 var(--f-kop); }

/* Diepblauwe band (beveiliging) */
.band { background: var(--diep); color: #FFFFFF; }
.band .label { color: var(--op-diep-zacht); }
.band .h2, .band h3 { color: #FFFFFF; }
.band .lead, .band .kaart p { color: var(--op-diep-zacht); }
.band .kaart { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .14); }
.band .icoon { background: rgb(255 255 255 / .12); color: #FFFFFF; }
.band .knop-rand { color: #FFFFFF; border-color: rgb(255 255 255 / .4); }
.band .knop-rand:hover { border-color: #FFFFFF; }
.band :focus-visible { outline-color: #FFFFFF; }

/* Werkwijze: echte stappen */
.stappen { display: grid; gap: 1rem; counter-reset: stap; }
@media (min-width: 640px) { .stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .stappen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stap { counter-increment: stap; padding: 1.75rem; border-radius: var(--r-vlak); border: 1px solid var(--lijn); border-top: 3px solid var(--accent); background: var(--kaart); }
.stap::before { content: counter(stap, decimal-leading-zero); display: block; font: 800 2.5rem/1 var(--f-kop); letter-spacing: -.03em; color: var(--accent); }
.stap h3 { margin-top: 1rem; font-size: 1.1875rem; font-weight: 700; }
.stap p { margin-top: .4rem; color: var(--gedempt); }

/* Reviews */
.score-blok { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.score-blok strong { font: 800 3.5rem/1 var(--f-kop); letter-spacing: -.03em; }
.score-blok span { color: var(--gedempt); }
.reviews { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.review { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.75rem; border: 1px solid var(--lijn); border-radius: var(--r-vlak); background: var(--kaart); }
.review blockquote { font-size: 1.0625rem; line-height: 1.6; }
.review figcaption { margin-top: auto; font-size: .875rem; color: var(--gedempt); }

/* Kennisbank */
.zoek { display: flex; gap: .5rem; margin-top: 2rem; max-width: 38rem; padding: .4rem; border: 1px solid var(--lijn-sterk); border-radius: var(--r-knop); background: var(--kaart); }
.zoek input { flex: 1; min-width: 0; min-height: 2.75rem; padding: 0 .9rem; border: 0; background: transparent; }
.zoek input::placeholder { color: var(--gedempt); }
.zoek input:focus-visible { outline: none; }
.zoek:focus-within { border-color: var(--accent); }
.populair { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.populair a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 1rem; border: 1px solid var(--lijn); border-radius: var(--r-knop); font-size: .9375rem; text-decoration: none; color: var(--gedempt); }
.populair a:hover { border-color: var(--accent); color: var(--tekst); }
.partners { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; margin-top: 1.25rem; font: 700 1.5rem/1.3 var(--f-kop); letter-spacing: -.015em; color: var(--gedempt); }

/* CTA-band */
.cta-band { padding-block: var(--sectie); text-align: center; border-block: 1px solid var(--lijn); }
.cta-band .h2 { margin-inline: auto; max-width: 18ch; font-size: clamp(2.5rem, 6vw, 4.75rem); }
.cta-band .lead { margin-inline: auto; }
.cta-band .knoppen { justify-content: center; margin-top: 2.25rem; }

/* Contact met formulier */
.contact-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
@media (min-width: 1024px) { .contact-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; } }
.kanalen { display: grid; gap: .75rem; margin-top: 2rem; }
.kanalen a, .kanalen div { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--lijn); border-radius: var(--r-vlak); background: var(--kaart); text-decoration: none; }
.kanalen a:hover { border-color: var(--accent); }
.kanalen .icoon { width: 2.75rem; height: 2.75rem; border-radius: 10px; }
.kanalen small { display: block; font-size: .8125rem; color: var(--gedempt); }
.kanalen strong { font-weight: 600; }
.formulier { padding: 1.75rem; border: 1px solid var(--lijn); border-radius: var(--r-groot); background: var(--kaart); }
.formulier h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.formulier > p { margin-top: .4rem; color: var(--gedempt); font-size: .9375rem; }
.formulier legend { font-size: .875rem; font-weight: 600; margin-bottom: .6rem; }
.formulier fieldset { margin-top: 1.5rem; }
.keuzes { display: flex; flex-wrap: wrap; gap: .5rem; }
.keuzes label { position: relative; display: inline-flex; }
.keuzes input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.keuzes span { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 1rem; border: 1px solid var(--lijn-sterk); border-radius: var(--r-knop); font-size: .9063rem; cursor: pointer; transition: border-color .15s, background-color .15s; }
.keuzes input:checked + span { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 16%, transparent); }
.keuzes input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.velden { display: grid; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 640px) { .velden { grid-template-columns: 1fr 1fr; } .veld-breed { grid-column: 1 / -1; } }
.velden label > span { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .4rem; }
.velden label > span small { font-weight: 400; color: var(--gedempt); }
.velden input, .velden textarea { width: 100%; min-height: 3rem; padding: .7rem .9rem; border: 1px solid var(--lijn-sterk); border-radius: var(--r-klein); background: var(--nacht); }
.velden input:focus-visible, .velden textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.formulier .knoppen { margin-top: 1.5rem; align-items: center; }
.formulier-melding { margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--r-klein); background: var(--mist); font-size: .9375rem; }

/* ---------- Footer en mobiele balk ---------- */
.voet { border-top: 1px solid var(--lijn); padding-block: 4rem 7.5rem; font-size: .9375rem; }
.voet-raster { display: grid; gap: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-wrap: anywhere; }
.voet-merk { grid-column: 1 / -1; }
.voet-merk p { margin-top: .9rem; color: var(--gedempt); max-width: 20rem; }
.voet h2 { font: 600 .8125rem/1.4 var(--f-tekst); letter-spacing: .12em; text-transform: uppercase; color: var(--tekst); }
.voet ul { margin-top: .6rem; }
.voet li { color: var(--gedempt); }
.voet a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; color: var(--gedempt); text-decoration: none; }
.voet a:hover { color: var(--accent); }
.voet-onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--lijn); color: var(--gedempt); font-size: .875rem; }
.voet-onder ul { display: flex; gap: 1.25rem; margin: 0; }
@media (min-width: 768px) { .voet-raster { grid-template-columns: 1.5fr 1fr 1fr 1fr; } .voet-merk { grid-column: auto; } }
@media (min-width: 1024px) { .voet { padding-bottom: 3rem; } }
.dock { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: flex; gap: .5rem; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px)); background: color-mix(in oklab, var(--nacht) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--lijn); }
.dock .knop { flex: 1; min-width: 0; padding-inline: .5rem; font-size: .875rem; min-height: 3rem; }
.dock .knop-primair { flex: 1.4; }
@media (min-width: 1024px) { .dock { display: none; } }
@media (max-width: 639px) { .hero .knoppen .knop, .cta-band .knoppen .knop { flex: 1 1 100%; } }

/* ---------- Beweging: één korte opbouw bij laden ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-tekst > :not(h1), .contactkaart { animation: op .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-tekst > :nth-child(2) { animation-delay: .06s; }
  .hero-tekst > :nth-child(3) { animation-delay: .12s; }
  .hero-tekst > :nth-child(4) { animation-delay: .18s; }
  .hero-tekst > :nth-child(5) { animation-delay: .24s; }
  .contactkaart { animation-delay: .2s; }
}
@keyframes op { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print { .kop, .dock, .cta-band, .voet { display: none; } }

/* Support op afstand (TeamViewer) voor bestaande klanten */
.ck-support { margin-top: .75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding: .8rem 1rem; border: 1px solid var(--lijn); border-radius: var(--r-vlak); text-decoration: none; }
.ck-support small { display: block; font-size: .8125rem; color: var(--gedempt); }
.ck-support strong { font-weight: 600; }
.ck-support svg { width: 1.1rem; height: 1.1rem; color: var(--accent); flex: none; transition: transform .2s; }
.ck-support:hover { border-color: var(--accent); }
.ck-support:hover svg { transform: translate(2px, -2px); }
.hero-support { margin-top: 1.25rem; font-size: .9375rem; color: var(--gedempt); }
.hero-support a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 1024px) { .hero-support { display: none; } }

/* Brede dienstkaart (7e dienst) */
@media (min-width: 640px) { .kaart-breed { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .kaart-breed { flex-direction: row; align-items: center; gap: 1.5rem; }
  .kaart-breed-tekst h3 { margin-top: 0; }
  .kaart-breed .meer { margin: 0 0 0 auto; padding-top: 0; white-space: nowrap; }
}
.kaart-breed-tekst { display: block; }

/* Lichte modus: paarse huisstijltint. Vlakken #7B89FF met donkere tekst; tekst en links #4F5BD5 (zelfde tint, AA-contrast) */
:root[data-theme="light"] .knop-primair { background: #7B89FF; color: #0B0D12; }
:root[data-theme="light"] .knop-primair:hover { background: #98A3FF; }
:root[data-theme="light"] .band { background: #4F5BD5; }
:root[data-theme="light"] .band .label, :root[data-theme="light"] .band .lead, :root[data-theme="light"] .band .kaart p { color: rgb(255 255 255 / .9); }
:root[data-theme="light"] .band .kaart { background: rgb(13 16 23 / .14); border-color: rgb(255 255 255 / .22); }
:root[data-theme="light"] .band .kaart p, :root[data-theme="light"] .band .lead { color: #FFFFFF; }

/* ================================================================
   Subpagina's (diensten, overzicht, over ons, contact, partners): zelfde bouwstenen als de homepage
   ================================================================ */
/* Oude kleurnamen (schema op Managed IT) koppelen aan de huidige tokens */
:root { --c-inkt: var(--tekst); --c-blauw: var(--accent); --c-kaart: var(--kaart); --c-gedempt: var(--gedempt); --c-op-blauw: var(--op-accent); --font-kop: var(--f-kop); --font-tekst: var(--f-tekst); }

.pagina-hero { padding-block: 2.5rem 4rem; border-bottom: 1px solid var(--lijn); }
.kruimel ol { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; font-size: .875rem; color: var(--gedempt); }
.kruimel a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; text-decoration: none; }
.kruimel a:hover { color: var(--tekst); }
.kruimel [aria-current] { color: var(--tekst); }
.pagina-hero h1 { margin-top: .75rem; max-width: 18ch; font-size: clamp(2.75rem, 6.5vw, 5.25rem); font-weight: 800; line-height: .98; letter-spacing: -.04em; }
.pagina-hero h1 .sub { display: block; margin-top: .6rem; font-size: .5em; font-weight: 300; line-height: 1.1; letter-spacing: -.025em; color: var(--gedempt); }
.pagina-hero .lead { max-width: 40rem; }
.pagina-hero .lead + .lead { margin-top: .9rem; color: var(--tekst); font-weight: 500; }
.pagina-hero .knoppen { margin-top: 2rem; }
.pagina-hero .vinken { margin-top: 1.75rem; }
@media (min-width: 1024px) { .pagina-hero { padding-block: 3rem 5.5rem; } }
@media (max-width: 639px) { .pagina-hero .knoppen .knop { flex: 1 1 100%; } }

.oplevert { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.oplevert li { padding-top: 1.1rem; border-top: 2px solid var(--accent); }
.oplevert strong { display: block; font: 700 1.125rem/1.3 var(--f-kop); }
.oplevert p { margin-top: .3rem; color: var(--gedempt); }

/* Veelgestelde vragen */
.faq { border-top: 1px solid var(--lijn); }
.faq details { border-bottom: 1px solid var(--lijn); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; padding-block: 1rem; cursor: pointer; list-style: none; font: 700 1.1875rem/1.3 var(--f-kop); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--lijn-sterk); background: linear-gradient(var(--accent), var(--accent)) center / .7rem 2px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 2px .7rem no-repeat; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: 1.25rem; max-width: 46rem; color: var(--gedempt); }
.faq details > div a { color: var(--accent); font-weight: 600; }
.faq-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 1024px) { .faq-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; } }
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .25s ease, content-visibility .25s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* Schema op Managed IT */
.schema-sectie figure { margin-top: 3rem; }
.diagram-groot { display: none !important; }
.diagram-klein { margin-inline: auto; max-width: 28rem; }
@media (min-width: 1024px) { .diagram-groot { display: block !important; } .diagram-klein { display: none !important; } }
.schema-sectie figcaption { margin-top: 1rem; font-size: .875rem; color: var(--gedempt); }
.diagram{width:100%;height:auto;display:block;overflow:visible}
.d-kader{fill:none;stroke:var(--c-inkt)}
@supports (color:color-mix(in lab, red, red)){.d-kader{stroke:color-mix(in oklab, var(--c-inkt) 14%, transparent)}}
.d-kader{stroke-dasharray:6 6}
.d-kaderlabel{font:600 12px var(--font-tekst);letter-spacing:.18em;text-transform:uppercase;fill:var(--c-gedempt)}
.d-lijn{fill:none;stroke:var(--c-blauw);stroke-width:1.6px;stroke-dasharray:4 5;stroke-linecap:round}
.d-stip{fill:var(--c-blauw)}
.d-knoop>rect{fill:var(--c-kaart);stroke:var(--c-inkt)}
@supports (color:color-mix(in lab, red, red)){.d-knoop>rect{stroke:color-mix(in oklab, var(--c-inkt) 12%, transparent)}}
.d-knoop>rect{stroke-width:1px;transition:stroke .2s,transform .2s}
.d-knoop,.d-hub{cursor:pointer;outline:none}
.d-knoop:hover>rect{stroke:var(--c-blauw)}
.d-knoop:focus-visible>rect,.d-hub:focus-visible>rect{stroke:var(--c-blauw);stroke-width:3px}
.d-hub:focus-visible>rect{stroke:var(--c-inkt)}
.d-icoonvlak rect{fill:var(--c-blauw)}
@supports (color:color-mix(in lab, red, red)){.d-icoonvlak rect{fill:color-mix(in oklab, var(--c-blauw) 11%, transparent)}}
.d-icoonvlak svg{color:var(--c-blauw)}
.d-titel{font:600 18px var(--font-kop);fill:var(--c-inkt)}
.d-sub{font:400 14px var(--font-tekst);fill:var(--c-gedempt)}
.d-hub>rect{fill:var(--c-blauw);transition:filter .2s}
.d-hub{color:var(--c-op-blauw)}
.d-hub .d-titel{fill:var(--c-op-blauw);font-size:21px;font-weight:700}
.d-hub .d-sub{fill:var(--c-op-blauw);opacity:.88}
.d-hub:hover>rect{filter:brightness(1.08)}
@media (prefers-reduced-motion: no-preference) { .d-lijn { animation: stroom 2.4s linear infinite; } }
@keyframes stroom { to { stroke-dashoffset: -18; } }
@media (min-width: 1024px) { .stappen:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Dienstenoverzicht */
.dienst-lijst { display: grid; gap: 1.25rem; }
.dienst-blok { scroll-margin-top: 6rem; padding: 1.75rem; border: 1px solid var(--lijn); border-radius: var(--r-groot); background: var(--kaart); }
.dienst-blok-kop { display: flex; gap: 1.25rem; align-items: flex-start; }
.dienst-blok-kop .icoon { flex: none; }
.dienst-blok h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.dienst-blok-kop p { margin-top: .5rem; font-size: 1.125rem; color: var(--gedempt); max-width: 44rem; }
.dienst-dl { display: grid; gap: 1.25rem; margin: 1.75rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--lijn); }
.dienst-dl dt { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.dienst-dl dd { margin: .4rem 0 0; line-height: 1.6; }
.dienst-voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 768px) { .dienst-dl { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; } }
@media (min-width: 1024px) { .dienst-blok { padding: 2.5rem; } }
.pillen { display: flex; flex-wrap: wrap; gap: .5rem; }
.pillen li { padding: .3rem .8rem; border: 1px solid var(--lijn-sterk); border-radius: 999px; font-size: .8125rem; color: var(--gedempt); }
.kaart .icoon + h3 { margin-top: 1.25rem; }
.kaart > .link { margin-top: auto; padding-top: .75rem; }

/* Over ons */
.over-kaart picture img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--r-vlak); }
.over-naam { margin-top: .4rem; font: 800 1.75rem/1.1 var(--f-kop); letter-spacing: -.02em; }
.over-kaart .tekst-gedempt { margin-top: .5rem; color: var(--gedempt); }
.over-kaart .kanalen { margin-top: 1.25rem; }
.lopend { margin-top: 1.5rem; display: grid; gap: 1rem; font-size: 1.0625rem; line-height: 1.7; color: var(--gedempt); max-width: 40rem; }
.lopend a { color: var(--accent); font-weight: 600; }
.feiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 2rem 0 0; border: 1px solid var(--lijn); border-radius: var(--r-vlak); overflow: hidden; background: var(--lijn); }
.feiten > div { padding: 1.1rem 1.25rem; background: var(--kaart); }
.feiten dt { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gedempt); }
.feiten dd { margin: .35rem 0 0; font: 700 1.125rem/1.3 var(--f-kop); }
.feiten dd span { display: block; font: 400 .875rem/1.4 var(--f-tekst); color: var(--gedempt); }
@media (min-width: 768px) { .feiten-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kaarten-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Partners */
@media (min-width: 640px) { .partner-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .partner-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.partner h2 { margin-top: .9rem; font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.partner > p:not(.label) { margin-top: .6rem; color: var(--gedempt); flex: 1; }
.partner > p a { color: var(--accent); font-weight: 600; }
.partner .pillen { margin-top: 1.25rem; }
.partner-noot { border-style: dashed; background: transparent; }
.partner-noot h2 { margin-top: 0; font-size: 1.5rem; }

/* Contact */
.formulier-kop { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.kanalen small + strong + small { margin-top: .15rem; }

/* 404 */
.fout-code { font: 800 clamp(5rem, 16vw, 11rem)/.85 var(--f-kop); letter-spacing: -.06em; color: var(--accent); }
.fout-hero h1 { margin-top: 1rem; }

/* Lange woorden (bv. "Werkplekbeheer") passen ook op 320 px */
.dienst-lijst { grid-template-columns: minmax(0, 1fr); }
.dienst-blok-kop > div { min-width: 0; }
h1, .h2, .dienst-blok h2, .kaart h3 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 479px) { .dienst-blok { padding: 1.25rem; } .dienst-blok-kop { gap: .9rem; } }

/* ---------- Statuspagina ---------- */
:root { --goud: #F5B83D; --st-ok: #4CC38A; --st-let-op: #F5B547; --st-storing: #FF8A8A; --st-onderhoud: #9AA8FF; }
:root[data-theme="light"] { --goud: #B7791F; --st-ok: #15803D; --st-let-op: #92400E; --st-storing: #B91C1C; --st-onderhoud: #4F5BD5; }
[data-status="ok"] { --st: var(--st-ok); }
[data-status="let-op"] { --st: var(--st-let-op); }
[data-status="storing"] { --st: var(--st-storing); }
[data-status="onderhoud"] { --st: var(--st-onderhoud); }
[data-status="onbekend"], [data-status="geen"], [data-status="laden"] { --st: var(--gedempt); }
.status-stip { flex: none; width: .75rem; height: .75rem; border-radius: 50%; background: var(--st); }
.status-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 2rem; padding: 1.125rem 1.375rem; border: 1px solid var(--st); border-radius: var(--r-vlak); background: var(--kaart); }
.status-banner-tekst { display: flex; align-items: center; gap: .75rem; font-weight: 600; color: var(--tekst); }
.status-tijd { font-size: .875rem; color: var(--gedempt); }
.status-groep + .status-groep { margin-top: 3.5rem; }
.status-groepkop { margin-bottom: 1.5rem; font: 700 clamp(1.5rem, 2.4vw, 1.875rem)/1.2 var(--f-kop); letter-spacing: -.015em; }
.status-raster { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .status-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.status-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.status-kaart { padding: 2rem; }
.status-kaart h3 { margin-top: 0; font-size: clamp(1.5rem, 2.2vw, 1.75rem); }
.status-kaart > p:not(.status-pil) { font-size: 1.0625rem; }
.status-onderdelen { flex-grow: 1; }
.status-kaart .link { margin-top: 1rem; font-size: 1.0625rem; }
.kaart .status-pil { display: inline-flex; align-items: center; gap: .5rem; margin-top: 0; padding: .375rem .875rem; border: 1px solid var(--lijn-sterk); border-radius: 999px; font-size: .9375rem; font-weight: 600; color: var(--tekst); }
.status-onderdelen details { margin-top: 1rem; font-size: 1rem; color: var(--gedempt); }
.status-onderdelen summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; }
.status-onderdelen ul { display: grid; gap: .5rem; padding-top: .25rem; }
.status-onderdelen li { display: flex; justify-content: space-between; gap: 1rem; }
.status-onderdelen li span:last-child { flex: none; font-weight: 600; color: var(--st); }
.status-lijst { display: grid; gap: .75rem; margin-top: 1.75rem; }
.status-lijst li { padding: 1.125rem 1.375rem; border: 1px solid var(--lijn); border-radius: var(--r-vlak); background: var(--kaart); }
.status-lijst a { display: flex; align-items: center; min-height: 44px; padding-block: .25rem; font-weight: 600; color: var(--tekst); overflow-wrap: anywhere; }
.status-bron { font-size: .8125rem; font-weight: 600; color: var(--accent); }
.status-extra { font-size: .875rem; color: var(--gedempt); }

/* Statusinhoud wacht op de gegevens, en verschijnt hoe dan ook na 3 seconden */
html.js [data-status-inhoud]:not(.klaar) { visibility: hidden; min-height: 80vh; animation: status-verschijn 0s 3s forwards; }
@keyframes status-verschijn { to { visibility: visible; } }

/* Hoofdmenu met zes items past ook op kleine laptops */
.icoonknop { flex: none; }
@media (min-width: 1024px) and (max-width: 1199px) { .hoofdmenu a { padding-inline: .55rem; } }

.pagina-hero .lead a { color: var(--accent); font-weight: 600; }