/* --- Vangnet tegen tekst buiten het scherm --------------------------------
   Bart, 10-08-2026: "tekst buiten het scherm mag nergens gebeuren." Eén lang
   onbreekbaar woord is genoeg om de HELE pagina breder te maken dan het scherm,
   want een flex- of grid-item houdt standaard min-width:auto en krimpt dus niet
   onder zijn langste woord. Gemeten op 320px: `bart@sustainablecommodities.eu`
   eiste 313px, en daarmee werd de homepage 341px breed.
   `break-word` is hier NIET genoeg: dat breekt pas bij het TEKENEN en verandert
   de berekende minimumbreedte niet. `anywhere` doet dat wel, en dat is precies
   wat een raster nodig heeft. Koppen houden `break-word`, daar is een midden-
   in-het-woord-breuk lelijker dan een enkele te brede regel. */
p,li,dd,dt,td,th,a,figcaption,blockquote,summary,label{overflow-wrap:anywhere}
h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
.contact__details li,.contact__details li>*{min-width:0}
.contact__details a{overflow-wrap:anywhere}
/* Flex- en grid-items die tekst dragen mogen krimpen. Zonder dit blijft
   min-width:auto staan en helpt het bovenstaande alleen half. */
.contact__grid>*,.contact__intro>*,.mk-tile>*,.sc-waarom__grid>*{min-width:0}

/* rand-cache geroteerd 10-08-2026 (2e keer): de canonieke hash-URL raakte vervuild
   doordat een browser-sweep de site las terwijl de deploy nog propageerde. */

/* build 10-08-2026f */

/* ---- ingetogen beweging ---------------------------------------------------- */
/* De klasse komt PAS via JS erbij, dus zonder JS is er niets verborgen. */
.sc-op{opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1)}
.sc-op--in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sc-op{opacity:1;transform:none;transition:none}}
/* Getrapte stappen: de vertraging komt uit --sc-trap, die sc-ux.js per stap zet.
   Zonder JS is de variabele leeg en valt hij terug op 0ms -- dan gebeurt er
   gewoon niets bijzonders, en dat is de veilige kant. */
.sc-op .sc-stap{transition-delay:var(--sc-trap,0ms)}
/* Kaarten en stappen reageren op aanwijzen. Alleen waar een echte muis is:
   op een aanraakscherm blijft een :hover-stand na het tikken hangen. */
@media (hover:hover) and (pointer:fine){
  .mk-kaart,.sc-stap{transition:transform .18s ease, box-shadow .18s ease}
  .mk-kaart:hover{transform:translateY(-2px);box-shadow:0 10px 26px -18px rgba(31,61,18,.5)}
  .sc-stap:hover .sc-stap__n{transform:scale(1.08)}
  .sc-stap__n{transition:transform .18s ease}
}
@media (prefers-reduced-motion:reduce){
  .mk-kaart,.sc-stap,.sc-stap__n{transition:none !important;transform:none !important}
}
.sc-cijfers__lijst strong{font-variant-numeric:tabular-nums}
.mk-tile,.card,.step{transition:transform .25s cubic-bezier(.2,.7,.3,1),
  box-shadow .25s cubic-bezier(.2,.7,.3,1)}
@media (hover:hover){
  .mk-tile:hover,.card:hover{transform:translateY(-3px)}
}
/* de vaste menubalk mag niet over het anker heen vallen bij soepel scrollen */
:target{scroll-margin-top:calc(var(--sc-navhoogte, 100px) + 16px)}

/* ---- stroomschema ---------------------------------------------------------- */
.sc-stroom{margin:0 0 34px;padding:24px 26px;border:1px solid var(--sc-lijn);
  border-radius:14px;background:var(--sc-vlak);min-width:0;max-width:100%}
.sc-stroom__kop{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sc-gedempt);margin:0 0 18px}
/* Een grid dat vanzelf van een kolom naar vijf gaat. Geen vaste breedtes, dus
   geen horizontale schuifbalk en niets dat wordt afgesneden. */
.sc-stroom__lijst{list-style:none;margin:0;padding:0;display:grid;gap:2px;
  grid-template-columns:1fr;counter-reset:none}
.sc-stap{position:relative;display:flex;align-items:flex-start;gap:14px;
  padding:11px 0 11px 0;margin:0}
.sc-stap::before{display:none}
.sc-stap__n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.76rem;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--sc-groen-diep);background:var(--sc-achter);
  border:1.5px solid var(--sc-groen);margin-top:1px}
.sc-stap:last-child .sc-stap__n{background:var(--sc-groen);color:var(--sc-achter);
  border-color:var(--sc-groen)}
.sc-stap__t{font-size:.96rem;font-weight:600;line-height:1.45;color:var(--sc-tekst);
  padding-top:3px}
/* de verbindingslijn: verticaal in een kolom */
.sc-stap:not(:last-child)::after{content:"";position:absolute;left:12.5px;top:38px;
  bottom:-2px;width:1.5px;background:var(--sc-lijn)}

@media(min-width:760px){
  .sc-stroom__lijst{grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr));gap:0}
  .sc-stap{flex-direction:column;align-items:flex-start;gap:10px;padding:0 16px 0 0}
  .sc-stap__t{font-size:.9rem;padding-top:0}
  /* horizontaal loopt de lijn dwars door de nummers heen */
  .sc-stap:not(:last-child)::after{left:26px;right:0;top:12.5px;bottom:auto;
    width:auto;height:1.5px}
}
/* ---- zoeken, actieve menuknop en laadbalk ---------------------------------- */
/* Alleen het vergrootglas in het menu; het paneel schuift open bij een klik. */
.sc-zoekknop{background:none;border:1px solid var(--sc-lijn);color:inherit;cursor:pointer;
  width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;padding:0;flex:0 0 auto;
  transition:border-color .18s,background .18s,transform .18s}
.sc-zoekknop svg{width:16px;height:16px}
.sc-zoekknop:hover{border-color:var(--sc-groen);background:var(--sc-vlak);transform:scale(1.06)}
.sc-zoekknop:focus-visible{outline:2px solid var(--sc-groen);outline-offset:2px}
@media(pointer:coarse){.sc-zoekknop{width:44px;height:44px}}

.sc-zoek{position:fixed;inset:0;z-index:9999;padding:8vh 16px 16px;
  background:rgba(8,10,7,.66);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.sc-zoek[open]{opacity:1;visibility:visible}
.sc-zoek__paneel{max-width:660px;margin:0 auto;background:var(--sc-achter);
  border:1px solid var(--sc-lijn);border-radius:16px;overflow:hidden;
  box-shadow:0 26px 80px rgba(0,0,0,.46);
  transform:translateY(-14px) scale(.985);opacity:.4;
  transition:transform .24s cubic-bezier(.2,.9,.3,1),opacity .24s}
.sc-zoek[open] .sc-zoek__paneel{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .sc-zoek,.sc-zoek__paneel{transition:none}
  .sc-zoek__paneel{transform:none;opacity:1}}
.sc-zoek__balk{display:flex;align-items:center;gap:10px;padding:0 8px 0 18px;
  border-bottom:1px solid var(--sc-lijn)}
.sc-zoek__balk>svg{width:17px;height:17px;color:var(--sc-gedempt);flex:0 0 auto}
.sc-zoek__veld{flex:1;border:0;background:transparent;color:var(--sc-tekst);font:inherit;
  font-size:1.05rem;padding:18px 0;outline:none;min-width:0}
.sc-zoek__veld::placeholder{color:var(--sc-gedempt)}
.sc-zoek__veld::-webkit-search-cancel-button{display:none}
.sc-zoek__dicht{background:none;border:0;color:var(--sc-gedempt);cursor:pointer;
  line-height:1;width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;transition:color .16s,background .16s}
.sc-zoek__dicht svg{width:16px;height:16px}
.sc-zoek__dicht:hover{color:var(--sc-tekst);background:var(--sc-vlak)}
@media(pointer:coarse){.sc-zoek__dicht{width:44px;height:44px}}
.sc-zoek__uit{list-style:none;margin:0;padding:6px;max-height:54vh;overflow-y:auto}
.sc-zoek__uit li{margin:0;padding-left:0}
.sc-zoek__uit li::before{display:none}
.sc-zoek__uit a{display:block;padding:11px 14px;border-radius:10px;text-decoration:none;
  color:var(--sc-tekst);line-height:1.35}
.sc-zoek__uit a:hover,.sc-zoek__uit a:focus,.sc-zoek__uit .aan a{background:var(--sc-vlak);outline:none}
.sc-zoek__t{font-weight:600;font-size:.97rem;display:block}
.sc-zoek__s{display:block;font-size:.83rem;color:var(--sc-gedempt);margin-top:3px}
.sc-zoek__leeg{padding:20px;color:var(--sc-gedempt);font-size:.93rem}
.sc-zoek__voet{padding:10px 18px;border-top:1px solid var(--sc-lijn);font-size:.78rem;
  color:var(--sc-gedempt);display:flex;gap:16px;flex-wrap:wrap}
.sc-zoek__voet kbd{font:inherit;border:1px solid currentColor;border-radius:4px;padding:0 4px}
.sc-zoek mark{background:var(--sc-oranje);color:#12150f;border-radius:2px;padding:0 2px}
@media(max-width:620px){.sc-zoek__voet{display:none}}

.nav__links a{position:relative}
/* De actieve menuknop moet in TWEE toestanden leesbaar zijn: boven aan de pagina
   staat de balk doorzichtig op de donkere hero, na scrollen op een lichte balk.
   Eerst gaf ik hem overal var(--sc-groen); op de hero was dat donkergroen op
   donkergroen en dus vrijwel onzichtbaar. */
.nav__links a[aria-current]{font-weight:700}
.nav:not(.scrolled) .nav__links a[aria-current]{color:#cfe8b4}
.nav.scrolled .nav__links a[aria-current]{color:var(--sc-groen)}
:root[data-theme="dark"] .nav.scrolled .nav__links a[aria-current]{color:#a9dc86}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .nav.scrolled .nav__links a[aria-current]{color:#a9dc86}
}
.nav__links a[aria-current]::after{content:"";display:block;position:absolute;left:0;right:0;
  bottom:2px;height:2px;border-radius:2px;background:currentColor}

.sc-laad{position:fixed;top:0;left:0;height:2px;width:0;z-index:10000;
  background:linear-gradient(90deg,var(--sc-groen),var(--sc-oranje));
  transition:width .22s ease-out,opacity .3s;opacity:0;pointer-events:none}
.sc-laad.bezig{opacity:1}
@media (prefers-reduced-motion:reduce){.sc-laad{transition:none}}

/* ---------- kleuren als variabelen, zodat licht en donker een omschakeling zijn ---------- */
:root{
  --sc-tekst:#283021; --sc-tekst-zacht:#3d4738; --sc-gedempt:#566150; --sc-gedempt-licht:#6b7467;
  --sc-groen:#2E6B16; --sc-groen-fel:#5FA826; --sc-groen-diep:#1f3d12;
  --sc-oranje:#F1A93C; --sc-oranje-licht:#FFC252;
  --sc-vlak:#FBF6EC; --sc-vlak-op:#fff; --sc-venster:rgba(255,255,255,.35);
  --sc-achter:#ffffff;
  --sc-lijn:rgba(42,39,34,.12); --sc-lijn-sterk:rgba(42,39,34,.22);
  --sc-groen-lijn:rgba(95,168,38,.28); --sc-groen-vlak:rgba(95,168,38,.05);
  --sc-papier:#ffffff;
  --sc-peek:rgba(251,246,236,.55); --sc-peek-op:#FBF6EC;
}
/* Donker: eerst wat het systeem wil, daarna wat de bezoeker zelf kiest. De
   data-theme-varianten staan NA de media query zodat een handmatige keuze
   altijd wint, in beide richtingen. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sc-tekst:#e9e7de; --sc-tekst-zacht:#ccd2c4; --sc-gedempt:#9ba593; --sc-gedempt-licht:#8c9784;
    --sc-groen:#8fcb63; --sc-groen-fel:#7fbf4e; --sc-groen-diep:#a9dc86;
    --sc-oranje:#f5b95c; --sc-oranje-licht:#ffca6e;
    --sc-vlak:#1e241b; --sc-vlak-op:#171c15; --sc-venster:rgba(255,255,255,.04);
  --sc-achter:#12150f;
    --sc-achter:#12150f;
    --sc-lijn:rgba(255,255,255,.14); --sc-lijn-sterk:rgba(255,255,255,.26);
    --sc-groen-lijn:rgba(143,203,99,.34); --sc-groen-vlak:rgba(143,203,99,.07);
    --sc-papier:#12150f;
  --sc-peek:rgba(255,255,255,.045); --sc-peek-op:rgba(255,255,255,.09);
    --sc-peek:rgba(255,255,255,.045); --sc-peek-op:rgba(255,255,255,.09);
  /* De site-eigen variabelen uit styles.css mee laten kantelen. Zonder dit bleef
     de HOMEPAGE in een halve toestand hangen: mijn --sc-kleuren gingen donker,
     maar --ink, --cream en --white bleven licht, dus lichte kaarten met lichte
     tekst. De hele site tekent op deze dertien namen, dus dit is de omschakeling. */
  --gold:#ffca6e; --gold-deep:#f5b95c; --amber:#ffb964; --bronze:#d59a4a;
  --green:#7fbf4e; --green-deep:#8fcb63; --green-ink:#a9dc86;
  --ink:#e9e7de; --ink-soft:#9ba593;
  --bronze-tekst:#e8b063;   /* op het DONKERE pilletje juist licht */
  --cream:#1e241b; --cream-2:#232a1f; --white:#12150f;
  --line:rgba(255,255,255,.14);
  --shadow:0 18px 50px -22px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --sc-tekst:#e9e7de; --sc-tekst-zacht:#ccd2c4; --sc-gedempt:#9ba593; --sc-gedempt-licht:#8c9784;
  --sc-groen:#8fcb63; --sc-groen-fel:#7fbf4e; --sc-groen-diep:#a9dc86;
  --sc-oranje:#f5b95c; --sc-oranje-licht:#ffca6e;
  --sc-vlak:#1e241b; --sc-vlak-op:#171c15; --sc-venster:rgba(255,255,255,.04);
  --sc-lijn:rgba(255,255,255,.14); --sc-lijn-sterk:rgba(255,255,255,.26);
  --sc-groen-lijn:rgba(143,203,99,.34); --sc-groen-vlak:rgba(143,203,99,.07);
  --sc-papier:#12150f;
  /* De site-eigen variabelen uit styles.css mee laten kantelen. Zonder dit bleef
     de HOMEPAGE in een halve toestand hangen: mijn --sc-kleuren gingen donker,
     maar --ink, --cream en --white bleven licht, dus lichte kaarten met lichte
     tekst. De hele site tekent op deze dertien namen, dus dit is de omschakeling. */
  --gold:#ffca6e; --gold-deep:#f5b95c; --amber:#ffb964; --bronze:#d59a4a;
  --green:#7fbf4e; --green-deep:#8fcb63; --green-ink:#a9dc86;
  --ink:#e9e7de; --ink-soft:#9ba593;
  --bronze-tekst:#e8b063;   /* op het DONKERE pilletje juist licht */
  --cream:#1e241b; --cream-2:#232a1f; --white:#12150f;
  --line:rgba(255,255,255,.14);
  --shadow:0 18px 50px -22px rgba(0,0,0,.7);
}
:root[data-theme="dark"] body{background:var(--sc-papier);color:var(--sc-tekst)}
:root[data-theme="dark"] main{background:none;color:var(--sc-tekst)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body{background:var(--sc-papier);color:var(--sc-tekst)}
  :root:not([data-theme="light"]) main{background:none;color:var(--sc-tekst)}
}

/* ---------- ankersprong ---------- */
/* De site heeft een VASTE header: zonder dit verdwijnt de kop waar je naartoe
   springt er precies achter. Gemeten: nav 70px op tablet en desktop, 191px op
   een telefoon waar hij afbreekt. */
html{scroll-behavior:smooth}
/* De menubalk is vast EN varieert in hoogte: 70px breed, 138px op een telefoon
   (de links breken af), 191px op de smalste. Een vast getal klopt dus nooit
   overal — op 10-08-2026 landde #markets op 108px onder een balk van 138px,
   dus de kop viel er 30px achter. sc-ux.js meet de balk en zet
   --sc-navhoogte; hieronder staat alleen nog een veilige terugval. */
:target,h2[id],h3[id],section[id],[id^="faq"],#news,#sources,#who-to-ask{
scroll-margin-top:calc(var(--sc-navhoogte, 104px) + 16px)}
/* De terugval moet OOK zonder JS kloppen: op een telefoon breekt de menurij af
   en wordt de balk ~138px. Met één vast getal landt de kop daar achter de balk
   (gemeten 10-08-2026). sc-ux.js verfijnt dit met de echte hoogte. */
@media(max-width:700px){
  :target,h2[id],h3[id],section[id],[id^="faq"],#news,#sources,#who-to-ask{
  scroll-margin-top:calc(var(--sc-navhoogte, 142px) + 16px)}
}
/* Sinds het menu op EEN regel past is de balk 90px in plaats van 193, dus de
   marge kan navenant kleiner: anders landt de kop onnodig ver naar beneden. */

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- de vaste onderdelen van de site meenemen in donkere modus ----------
   Nav, footer en de cookiemelding komen uit styles.css en volgen de variabelen niet
   vanzelf. Zonder deze regels bleef de navigatiebalk fel wit in een donkere pagina,
   en erger: de cookiemelding kreeg mijn lichte tekstkleur OP zijn eigen witte vlak,
   dus onleesbaar. Alles hieronder herstelt de CONTRASTVERHOUDING, het verandert
   niets aan de lichte modus. */
/* ALLEEN als de balk "scrolled" is. De site houdt hem bovenaan bewust doorzichtig
   zodat de herovideo doorloopt; mijn dekkende vlak legde daar een donkere balk
   overheen en dat was precies wat Bart zag. */
:root[data-theme="dark"] header.nav.scrolled{background:rgba(20,24,17,.97) !important;
  border-bottom:1px solid var(--sc-lijn)}
:root[data-theme="dark"] body:has(.hero) header.nav:not(.scrolled){background:transparent !important}
:root[data-theme="dark"] header.nav.scrolled a{color:var(--sc-groen-diep) !important}
:root[data-theme="dark"] header.nav a:hover{color:var(--sc-oranje) !important}
:root[data-theme="dark"] .cookie{background:#1b2018 !important;color:var(--sc-tekst) !important;
  border:1px solid var(--sc-lijn)}
:root[data-theme="dark"] .cookie p, :root[data-theme="dark"] .cookie span{color:var(--sc-tekst) !important}
:root[data-theme="dark"] footer{color:var(--sc-tekst-zacht)}
/* De ghost-knop ("Decline") heeft een doorzichtige achtergrond en donkere tekst.
   Op de nu donkere cookiebalk was die tekst niet meer te lezen; de solid-knop
   ("Accept") houdt zijn oranje vlak en dus zijn donkere tekst. */
:root[data-theme="dark"] .cookie .btn--ghost{color:var(--sc-tekst) !important;
  border-color:var(--sc-lijn-sterk) !important}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .cookie .btn--ghost{color:var(--sc-tekst) !important;
    border-color:var(--sc-lijn-sterk) !important}
}
:root[data-theme="dark"] .mk-hero__kicker{color:var(--sc-oranje-licht)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) header.nav.scrolled{background:rgba(20,24,17,.97) !important;
    border-bottom:1px solid var(--sc-lijn)}
  :root:not([data-theme="light"]) body:has(.hero) header.nav:not(.scrolled){background:transparent !important}
  :root:not([data-theme="light"]) header.nav.scrolled a{color:var(--sc-groen-diep) !important}
  :root:not([data-theme="light"]) header.nav a:hover{color:var(--sc-oranje) !important}
  :root:not([data-theme="light"]) .cookie{background:#1b2018 !important;color:var(--sc-tekst) !important;
    border:1px solid var(--sc-lijn)}
  :root:not([data-theme="light"]) .cookie p, :root:not([data-theme="light"]) .cookie span{color:var(--sc-tekst) !important}
  :root:not([data-theme="light"]) footer{color:var(--sc-tekst-zacht)}
  :root:not([data-theme="light"]) .mk-hero__kicker{color:var(--sc-oranje-licht)}
}

/* Beide richtingen EXPLICIET. Eerst vertrouwde ik op :not([data-theme="light"])
   binnen de media query, en toen bleef de navbalk in lichte modus zwart met witte
   tekst hangen op een toestel waarvan het systeem op donker staat. Een negatie is
   te fragiel voor iets wat leesbaarheid bepaalt: nu staat er voor licht net zo
   hard wat er moet gebeuren als voor donker. */
:root[data-theme="light"] header.nav.scrolled{background:rgba(255,255,255,.97) !important;border-bottom:none}
:root[data-theme="light"] body:has(.hero) header.nav:not(.scrolled){background:transparent !important}
:root[data-theme="light"] header.nav.scrolled a{color:#1f3d12 !important}
:root[data-theme="light"] .cookie{background:#fff !important;color:#283021 !important;border:none}
:root[data-theme="light"] .cookie p, :root[data-theme="light"] .cookie span{color:#283021 !important}
:root[data-theme="light"] body{background:#fff;color:#283021}
:root[data-theme="light"] main{background:none;color:#283021}
/* ── Menubalk op pagina's ZONDER hero (49 van de 50) ────────────────────────
   Alle regels hierboven hangen aan .scrolled, maar die klasse wordt op deze
   pagina's nooit gezet. De balk bleef dus doorzichtig, en zodra je scrolde
   stond witte menutekst op de witte pagina: contrast 1,0, menu onzichtbaar
   (gezien en nagemeten op 10-08-2026). Hier krijgt hij zijn dekvlak meteen. */
body:not(:has(.hero)) header.nav{background:rgba(255,255,255,.97);
box-shadow:0 6px 22px -16px rgba(31,61,18,.45);backdrop-filter:blur(9px)}
body:not(:has(.hero)) header.nav .nav__links a:not(.nav__cta),
body:not(:has(.hero)) header.nav .sc-zoekknop{color:#1f3d12}
/* Onder 680px is de Contact-knop bewust een gewone menulink (de pilvorm past
   daar niet naast de andere links). Mijn gouden vlak maakte er een blokje van,
   want de mobiele regel haalt padding en ronding weg. Dus alleen vanaf 681px. */
@media(min-width:681px){
  body:not(:has(.hero)) header.nav .nav__cta{background:var(--gold);
  color:var(--op-licht) !important;border-color:var(--gold)}
  :root[data-theme="dark"] body:not(:has(.hero)) header.nav .nav__cta,
  :root[data-theme="light"] body:not(:has(.hero)) header.nav .nav__cta{
  background:var(--gold) !important;color:#283021 !important;border-color:var(--gold)}
}
/* Onder 680px volgt hij gewoon de kleur van de andere menulinks. */
@media(max-width:680px){
  body:not(:has(.hero)) header.nav .nav__cta{background:none !important;
  border:none !important;color:#1f3d12 !important}
  :root[data-theme="dark"] body:not(:has(.hero)) header.nav .nav__cta{
  color:var(--sc-groen-diep) !important}
}
@media (prefers-color-scheme: dark){
  @media(max-width:680px){
    :root:not([data-theme="light"]) body:not(:has(.hero)) header.nav .nav__cta{
    color:var(--sc-groen-diep) !important}
  }
}
:root[data-theme="dark"] body:not(:has(.hero)) header.nav{
background:rgba(20,24,17,.97) !important;border-bottom:1px solid var(--sc-lijn)}
:root[data-theme="dark"] body:not(:has(.hero)) header.nav .nav__links a:not(.nav__cta),
:root[data-theme="dark"] body:not(:has(.hero)) header.nav .sc-zoekknop{
color:var(--sc-groen-diep) !important}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body:not(:has(.hero)) header.nav{
  background:rgba(20,24,17,.97) !important;border-bottom:1px solid var(--sc-lijn)}
  :root:not([data-theme="light"]) body:not(:has(.hero)) header.nav .nav__links a:not(.nav__cta),
  :root:not([data-theme="light"]) body:not(:has(.hero)) header.nav .sc-zoekknop{
  color:var(--sc-groen-diep) !important}
}
:root[data-theme="light"] body:not(:has(.hero)) header.nav{
background:rgba(255,255,255,.97) !important;border-bottom:none}
:root[data-theme="light"] body:not(:has(.hero)) header.nav .nav__links a:not(.nav__cta),
:root[data-theme="light"] body:not(:has(.hero)) header.nav .sc-zoekknop{color:#1f3d12 !important}
/* De hero heeft in BEIDE modi een donkergroene achtergrond, dus de tekst erin
   moet licht blijven. Met color:inherit erfde hij de donkere bodykleur en werd
   het donkergroen op donkergroen: de kop was nauwelijks te lezen. */
/* --- Leesbaarheid van de menubalk OVER de hero ---------------------------
   Gemeten 11-08-2026 met een echte laagberekening: de menulinks zijn wit, en de
   hero-tint is een WARME amber (`rgba(255,201,96,.5)` naar `rgba(228,148,42,.72)`).
   Waar het dronebeeld licht is -- de lucht, precies waar de balk staat -- zakt
   het contrast richting 1,5. Op de schermafdruk is dat ook goed te zien: de kop
   eronder leest prima, de menuregel duidelijk minder.
   Oplossing is niet de tint donkerder maken (dan verandert de hele hero), maar
   een smalle donkere sluier ACHTER de balk. Hij loopt naar doorzichtig uit, dus
   de video blijft zichtbaar en de balk blijft zwevend ogen.
   Alleen boven de hero en alleen ongescrold: zodra de balk zijn eigen dekvlak
   krijgt is de sluier overbodig. */
body:has(.hero) header.nav:not(.scrolled)::before{
  content:"";position:absolute;inset:0 0 auto 0;height:150%;
  background:linear-gradient(to bottom, rgba(24,32,16,.68), rgba(24,32,16,.34) 55%, rgba(24,32,16,0));
  pointer-events:none;z-index:0}
body:has(.hero) header.nav:not(.scrolled){position:fixed}
body:has(.hero) header.nav:not(.scrolled) .nav__inner{position:relative;z-index:1}

/* --- Schaduw onder het beeldmerk -----------------------------------------
   Bart, 11-08-2026: "schaduw achter logo moet weg als je scrolt."
   styles.css zet `filter:drop-shadow(0 3px 8px …)` op het logo. Dat is er voor
   de HERO: daar staat het merk op bewegend dronebeeld en heeft het scheiding
   nodig. Maar de regel gold ALTIJD -- gemeten: identieke filterwaarde bovenaan
   en gescrold. Zodra de balk zijn eigen dekvlak krijgt staat die schaduw op een
   effen wit of bijna zwart vlak, en dan leest hij als een vlek onder de letters.
   Op de 49 pagina's ZONDER hero is de balk meteen dekkend, dus daar stond hij
   er permanent op. Nu alleen nog waar hij iets doet. */
.nav.scrolled .nav__logo svg, .nav.scrolled .nav__logo img,
body:not(:has(.hero)) .nav__logo svg, body:not(:has(.hero)) .nav__logo img{
  filter:none}
.mk-hero, .mk-hero h1, .mk-hero p, .mk-hero a{color:#f4f7f0}
.mk-hero__kicker{color:var(--sc-oranje-licht)}
.mk-hero a{text-decoration:underline;text-underline-offset:2px}


/* ---------- vlakken die #fff HARDGECODEERD hebben ----------
   styles.css zet op een aantal plekken letterlijk background:#fff in plaats van
   var(--white). Die bleven dus spierwit in donkere modus: de kaarten onder
   Products & Services, de stappen, het contactformulier en de massieve knop.
   Hier krijgen ze een vlak dat wel meebeweegt. */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .step,
:root[data-theme="dark"] .contact__form{background:#1b2018 !important;
  border:1px solid var(--sc-lijn)}
:root[data-theme="dark"] .btn--solid{background:linear-gradient(135deg,#f5b95c,#e0a03f) !important;
  color:#1a1e16 !important}
:root[data-theme="dark"] .btn--solid:hover{background:#ffca6e !important;color:#12150f !important}
/* Uitzondering: het contactvlak IS al goud. Een gouden knop erop is onzichtbaar
   (Bart, 10-08-2026: "de witte balk on send us a message"). Beide thema's, en
   met !important omdat de regel hierboven anders wint. */
/* --- Achtergrondpatroon: RUITEN ------------------------------------------
   Bart, 10-08-2026, in drie stappen bijgesteld:
   1. "ik zie nog steeds [geen] achtergrond" -- `main.mk-main` had een DEKKENDE
      kleur en schilderde alles over. Die kleur staat nu alleen nog onderop.
   2. "sommige stukken niks" -- Products (1638px) en FAQ (1030px) zijn
      `.section--cream`, samen 2.668px massief vlak.
   3. "maak de ruitjes nog minder, echt heel licht... en ook nog meer doorlopend,
      nu stopt het ineens op sommige plekken zoals op de homepage."

   DE NADEN. Ik had het patroon op body EN op .section--cream gezet. Een
   achtergrond begint altijd bij de oorsprong van HET ELEMENT ZELF, dus bij elke
   sectiegrens begon het ruitwerk opnieuw en zag je een sprong. Nu ligt het
   patroon op EEN element -- `html` -- dat het hele document beslaat. Daardoor
   loopt het van boven tot onder door zonder een enkele herstart.
   Alles erboven is doorzichtig gemaakt; de cremebanden houden hun kleur maar
   staan op alpha, zodat hetzelfde doorlopende vlak er dwars doorheen zichtbaar
   blijft in plaats van te worden afgekapt.

   DE STERKTE. Was 10-11%; Bart wil "vele malen minder". Nu 3,5% (licht) en 4,5%
   (donker) -- donker heeft iets meer nodig om op bijna zwart nog te lezen.
   Fade naar dezelfde KLEUR met alpha 0, niet naar rgba(0,0,0,0): dat laatste
   geeft in sommige browsers een grijze zweem op de overgang. */
:root{
  --sc-ruiten:
    repeating-linear-gradient(45deg,
      rgba(31,61,18,0) 0, rgba(31,61,18,.035) 1.3px,
      rgba(31,61,18,0) 3px, rgba(31,61,18,0) 30px),
    repeating-linear-gradient(-45deg,
      rgba(31,61,18,0) 0, rgba(31,61,18,.035) 1.3px,
      rgba(31,61,18,0) 3px, rgba(31,61,18,0) 30px);
  --sc-gloed: radial-gradient(1100px 560px at 50% -6%,
      rgba(95,168,38,.055), rgba(0,0,0,0) 62%);
  --sc-basis:#fff;
  --sc-creme-door:rgba(251,246,236,.72);
}
:root[data-theme="dark"]{
  --sc-ruiten:
    repeating-linear-gradient(45deg,
      rgba(168,214,132,0) 0, rgba(168,214,132,.045) 1.3px,
      rgba(168,214,132,0) 3px, rgba(168,214,132,0) 30px),
    repeating-linear-gradient(-45deg,
      rgba(168,214,132,0) 0, rgba(168,214,132,.045) 1.3px,
      rgba(168,214,132,0) 3px, rgba(168,214,132,0) 30px);
  --sc-gloed: radial-gradient(1100px 560px at 50% -6%,
      rgba(143,203,99,.06), rgba(0,0,0,0) 62%);
  --sc-basis:var(--sc-papier);
  --sc-creme-door:rgba(30,36,27,.72);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sc-ruiten:
      repeating-linear-gradient(45deg,
        rgba(168,214,132,0) 0, rgba(168,214,132,.045) 1.3px,
        rgba(168,214,132,0) 3px, rgba(168,214,132,0) 30px),
      repeating-linear-gradient(-45deg,
        rgba(168,214,132,0) 0, rgba(168,214,132,.045) 1.3px,
        rgba(168,214,132,0) 3px, rgba(168,214,132,0) 30px);
    --sc-gloed: radial-gradient(1100px 560px at 50% -6%,
        rgba(143,203,99,.06), rgba(0,0,0,0) 62%);
    --sc-basis:var(--sc-papier);
    --sc-creme-door:rgba(30,36,27,.72);
  }
}
/* HET doorlopende vlak. Op html, want dat is het enige element dat het hele
   document beslaat -- body kan korter zijn dan de inhoud. */
html{background-color:var(--sc-basis);
  background-image:var(--sc-gloed), var(--sc-ruiten)}
/* Alles erboven doorzichtig, anders wordt het vlak alsnog afgedekt. De
   !important is nodig omdat styles.css hier eerder een dekkende kleur zet. */
body,
:root[data-theme="light"] body,
:root[data-theme="dark"] body{background-color:transparent !important;
  background-image:none !important}
:root[data-theme="light"] main,:root[data-theme="dark"] main{background:none}
/* De cremebanden houden hun kleur maar op alpha, zodat het doorlopende vlak er
   dwars doorheen zichtbaar blijft in plaats van bij de sectiegrens te stoppen. */
/* --- Zachte naden tussen de vlakken -------------------------------------
   Bart, 11-08-2026: "wil vlakken met kleuren vloeiender, meer levendig ...
   moet meer belevenis in komen."
   De cremebanden hadden een KAPMES-rand: de kleur begon en eindigde op een
   pixel. Nu loopt hij over 90px in en uit, zodat de band uit de achtergrond
   opkomt in plaats van erop geplakt te liggen. De kleur staat als
   background-image (een verloop), dus de doorlopende ruiten op `html` blijven
   er dwars doorheen zichtbaar -- dat was de hele reden om ze daar te zetten. */
.section--cream,
:root[data-theme="light"] .section--cream,
:root[data-theme="dark"] .section--cream{
  background-color:transparent !important;
  background-image:linear-gradient(to bottom,
    rgba(0,0,0,0) 0,
    var(--sc-creme-door) 90px,
    var(--sc-creme-door) calc(100% - 90px),
    rgba(0,0,0,0) 100%) !important}
/* Onder 700px is een band vaak korter dan 2x90px; dan wordt de kleur nergens
   vol en ziet het er bleek uit. Daar een krappere overgang. */
@media(max-width:700px){
  .section--cream,
  :root[data-theme="light"] .section--cream,
  :root[data-theme="dark"] .section--cream{
    background-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0,
      var(--sc-creme-door) 46px,
      var(--sc-creme-door) calc(100% - 46px),
      rgba(0,0,0,0) 100%) !important}
}
/* Het gouden contactvlak krijgt alleen BOVENAAN een zachte aanloop; onderaan
   sluit het op de voettekst aan en daar hoort geen kier te vallen. */
.section--gold{background-attachment:scroll}
.section--gold::before{content:"";position:absolute;left:0;right:0;top:0;height:70px;
  background:linear-gradient(to bottom, var(--sc-papier-boven, rgba(255,255,255,.55)), rgba(0,0,0,0));
  pointer-events:none}
.section--gold{position:relative}
:root[data-theme="dark"] .section--gold::before{
  background:linear-gradient(to bottom, rgba(18,21,15,.55), rgba(0,0,0,0))}

/* --- Leesvoortgang -------------------------------------------------------
   Een marktpagina is 10.000px lang. Een dunne balk bovenaan laat zien hoe ver
   je bent; dat is beleving die ook echt iets zegt. Hij wordt door sc-ux.js
   aangemaakt, dus zonder JS is er simpelweg niets -- nooit een lege balk. */
.sc-voortgang{position:fixed;left:0;top:0;height:3px;width:100%;z-index:10000;
  pointer-events:none;background:rgba(0,0,0,0)}
.sc-voortgang__vul{height:100%;width:0;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--sc-groen-fel,#5fa826),var(--sc-oranje,#f1a93c));
  transition:width .08s linear}
@media (prefers-reduced-motion:reduce){.sc-voortgang__vul{transition:none}}

@media (prefers-reduced-motion:reduce){body{background-attachment:scroll}}

/* --- Goud in DONKERE modus ------------------------------------------------
   Het gouden vlak is gemaakt voor een lichte pagina. Op een bijna zwarte
   achtergrond is het een lichtbak: Bart zag het onderaan bij Contact en op de
   voorwaardenpagina. In donkere modus dus een DIEPE amber, met de gouden knop
   terug (op een donker vlak is een donkere knop juist onzichtbaar). */
:root[data-theme="dark"] .section--gold,
:root[data-theme="dark"] .legal-hero{
background:linear-gradient(160deg,#1c2b17,#121d0f) !important;color:var(--sc-tekst)}
:root[data-theme="dark"] .section--gold .kicker--light,
:root[data-theme="dark"] .legal-hero .kicker{color:var(--sc-oranje-licht) !important}
:root[data-theme="dark"] .section--gold .btn--solid,
:root[data-theme="dark"] .legal-hero .btn--solid{
background:linear-gradient(135deg,#f5b95c,#e0a03f) !important;color:#1a1e16 !important}
:root[data-theme="dark"] .section--gold .btn--solid:hover{background:#ffca6e !important}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .section--gold,
  :root:not([data-theme="light"]) .legal-hero{
  background:linear-gradient(160deg,#1c2b17,#121d0f) !important;color:var(--sc-tekst)}
  :root:not([data-theme="light"]) .section--gold .kicker--light,
  :root:not([data-theme="light"]) .legal-hero .kicker{color:var(--sc-oranje-licht) !important}
  :root:not([data-theme="light"]) .section--gold .btn--solid,
  :root:not([data-theme="light"]) .legal-hero .btn--solid{
  background:linear-gradient(135deg,#f5b95c,#e0a03f) !important;color:#1a1e16 !important}
  :root:not([data-theme="light"]) .section--gold .btn--solid:hover{background:#ffca6e !important}
}
:root[data-theme="dark"] .section--gold .btn--solid,
:root[data-theme="light"] .section--gold .btn--solid,
.section--gold .btn--solid{background:#1a1e16 !important;color:#fff !important}
:root[data-theme="dark"] .section--gold .btn--solid:hover,
:root[data-theme="light"] .section--gold .btn--solid:hover,
.section--gold .btn--solid:hover{background:#0f1210 !important;color:#fff !important;filter:none}
/* ...maar NIET de verzendknop binnen het (donkere/witte) formulierkaartje:
   die staat niet op het gouden vlak maar op de kaart. */
.section--gold .contact__form .btn--solid{background:linear-gradient(135deg,#f5b95c,#e0a03f) !important;
  color:#1a1e16 !important}
.section--gold .contact__form .btn--solid:hover{background:#ffca6e !important}

/* Invoervelden. Bij FOCUS zette styles.css de achtergrond op #fff terwijl de
   tekstkleur var(--ink) is, in donkere modus dus lichte letters op wit: je typte
   onzichtbaar. Dat is het veld waar Bart over viel. */
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field textarea,
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] textarea, :root[data-theme="dark"] select{
  background:#12150f !important;color:var(--sc-tekst) !important;
  border-color:var(--sc-lijn-sterk) !important}
:root[data-theme="dark"] .field input:focus,
:root[data-theme="dark"] .field textarea:focus,
:root[data-theme="dark"] input:focus, :root[data-theme="dark"] textarea:focus{
  background:#171c15 !important;color:var(--sc-tekst) !important;
  border-color:var(--sc-oranje) !important;
  box-shadow:0 0 0 3px rgba(245,185,92,.22) !important}
:root[data-theme="dark"] ::placeholder{color:var(--sc-gedempt-licht);opacity:1}

/* De voettekst tekent op --green-deep en --green-ink, en die heb ik voor donkere
   modus juist LICHT gemaakt. Zonder deze regel werd de balk onderaan lichtgroen
   met lichte tekst. */
:root[data-theme="dark"] .footer{
  background:linear-gradient(165deg,#1a2416,#12180f) !important;color:#e2eed7}
:root[data-theme="dark"] .footer a{color:#cfe3bd}
:root[data-theme="dark"] .footer a:hover{color:var(--sc-oranje)}

/* Mijn eigen "In short"-uitklapper stond op een cremekleurig vlak. */
/* In donkere modus mag de hero wat dieper, anders knalt hij los van de pagina. */
:root[data-theme="dark"] .mk-hero{background:linear-gradient(160deg,#20501010,#14300c) !important;
  background:linear-gradient(160deg,#1f4d11,#132d0b) !important}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mk-hero{background:linear-gradient(160deg,#1f4d11,#132d0b) !important}
}

/* ---------- schakelaar licht/donker ---------- */
.sc-thema{position:fixed;right:14px;bottom:14px;z-index:60;display:inline-flex;align-items:center;
gap:7px;min-height:44px;padding:9px 14px;border-radius:24px;border:1px solid var(--sc-lijn-sterk);
background:var(--sc-vlak);color:var(--sc-tekst);font:600 13px/1 system-ui,sans-serif;cursor:pointer;
box-shadow:0 2px 10px rgba(0,0,0,.14)}
.sc-thema:hover{border-color:var(--sc-groen-fel)}
.sc-thema__licht{display:none}
:root[data-theme="dark"] .sc-thema__licht{display:inline}
:root[data-theme="dark"] .sc-thema__donker{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sc-thema__licht{display:inline}
  :root:not([data-theme="light"]) .sc-thema__donker{display:none}
}
@media print{.sc-thema{display:none}}

/* EIGEN groentinten, niet de variabelen die met het thema meedraaien. De hero
   heeft altijd witte tekst, dus het vlak eronder moet altijd DONKER groen zijn.
   Met --sc-groen erin werd hij in donkere modus lichtgroen met witte letters. */
.mk-hero{background:linear-gradient(160deg,#2E6B16,#1f3d12);color:#f4f7f0;padding:clamp(120px,12vw,150px) 0 clamp(48px,6vw,72px)}
.mk-hero .kicker{color:var(--sc-oranje-licht);letter-spacing:.14em;text-transform:uppercase;font-size:.76rem;font-weight:700;display:block;margin-bottom:14px}
.mk-hero h1{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.12;max-width:16ch;margin-bottom:20px}
.mk-hero__sub{max-width:60ch;font-size:1.08rem;line-height:1.6;color:rgba(255,255,255,.86)}
.mk-crumb{font-size:.82rem;color:rgba(255,255,255,.62);margin-bottom:20px}
.mk-crumb a{color:rgba(255,255,255,.82);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.mk-crumb a:hover{color:var(--sc-oranje-licht);border-color:var(--sc-oranje-licht)}

.mk-answer{background:var(--sc-vlak);border-left:5px solid var(--sc-groen-fel);border-radius:0 16px 16px 0;padding:26px 30px;margin:0 0 44px}
.mk-answer p{margin:0;font-size:1.12rem;line-height:1.65;color:var(--sc-tekst)}
.mk-answer strong{color:var(--sc-groen)}

.mk-main{padding:clamp(52px,7vw,84px) 0 clamp(64px,8vw,110px)}
/* Pagina's ZONDER kopband (de zes voorbeeld-SDS) hebben niets dat de vaste
   menubalk opvangt: het kruimelpad zat er 50px achter. Volgt nu de gemeten
   balkhoogte, net als .mk-hero doet. */
body:not(:has(.mk-hero)):not(:has(.hero)) .mk-main{
padding-top:calc(var(--sc-navhoogte, 104px) + 26px)}
.mk-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
/* Grid- en flex-items hebben standaard min-width:auto en krimpen dus NIET onder
   hun inhoud. Op 390px werd .mk-body daardoor 630px breed in een vak van 334px:
   de hele pagina liep zijwaarts over. minmax(0,1fr) regelt alleen de TRACK,
   niet het ITEM — beide zijn nodig. */
.mk-body,.mk-side{min-width:0}
/* Op een groot scherm bleef de kolom op 1.180px staan en werd de regel 76 tekens
   lang. Nu groeit het raster mee, maar de LEESKOLOM niet: de winst gaat naar de
   zijkolom en naar witruimte, niet naar langere regels. */
@media(min-width:1500px){
  .mk-main .container{max-width:1320px}
  .mk-wrap{grid-template-columns:minmax(0,1fr) 340px;gap:72px}
}
.mk-body > section > p,.mk-body > p,.mk-body > section > ul li{max-width:72ch}
.mk-body img,.mk-body figure,.mk-body pre{max-width:100%}
/* Lange losse tekenreeksen (normnummers, URL's, e-mailadressen) mogen breken
   in plaats van de kolom open te duwen. */
.mk-body p,.mk-body li,.mk-body td,.mk-body th,.mk-body h1,.mk-body h2,.mk-body h3{
overflow-wrap:break-word}
.mk-body h2{font-size:clamp(1.5rem,2.9vw,2.1rem);line-height:1.16;margin:48px 0 16px;color:var(--sc-groen-diep)}
.mk-body h2:first-child{margin-top:0}
.mk-body h3{font-size:1.18rem;line-height:1.2;margin:28px 0 10px;color:var(--sc-tekst)}
.mk-body p{font-size:1rem;margin-bottom:16px;line-height:1.72;color:var(--sc-tekst-zacht)}
.mk-body ul{list-style:none;margin:0 0 20px}
.mk-body li{position:relative;font-size:1rem;padding-left:22px;margin-bottom:10px;line-height:1.62;color:var(--sc-tekst-zacht)}
.mk-body li::before{content:"";position:absolute;left:0;top:.65em;width:7px;height:7px;border-radius:50%;background:var(--sc-oranje)}
.mk-body a{color:var(--sc-groen)}

.mk-table{width:100%;border-collapse:collapse;margin:8px 0 28px;font-size:.93rem}
.mk-table caption{text-align:left;font-size:.82rem;color:var(--sc-gedempt);padding-bottom:10px;font-style:italic}
.mk-table th,.mk-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--sc-lijn);vertical-align:top}
.mk-table th{background:var(--sc-vlak);font-weight:600;color:var(--sc-groen-diep);width:38%}
.mk-table--breed th[scope=row]{width:32%}
.mk-table thead th{width:auto;font-size:.86rem;letter-spacing:.02em;text-transform:uppercase}
/* GEEN blanket nowrap meer. Die was bedoeld om getalkolommen heel te houden,
   maar hij gold ook voor proza ("Anyone whose material ends up ...") en blies de
   tabel tot 2.464px op. Cijfers blijven heel via tabular-nums + een minimum
   kolombreedte; proza mag gewoon afbreken. */
.mk-table--breed td{font-variant-numeric:tabular-nums}
.mk-table--breed th[scope=row]{min-width:9.5rem}
.mk-table--breed thead th{white-space:nowrap}
.mk-table tr:last-child td,.mk-table tr:last-child th{border-bottom:none}

.mk-close{background:var(--sc-vlak);border-radius:16px;padding:30px 32px;margin:48px 0 0;border-left:5px solid var(--sc-oranje)}
.mk-close h2{margin-top:0 !important;font-size:1.35rem !important}
.mk-close p{color:var(--sc-tekst-zacht)}
.mk-close__lines{margin-bottom:0 !important;line-height:1.9;font-weight:600}
.mk-close a{color:var(--sc-groen);text-decoration:none;border-bottom:1px solid rgba(46,107,22,.3)}
/* ---- leesbaarheid en bedienbaarheid op elk apparaat ---- */
/* Regellengte. Op 1440px liep een alinea tot 96 tekens per regel en dan raakt het
   oog de volgende regel kwijt. 68ch houdt het in de comfortabele 55-75 zone.
   Tabellen, diagrammen en het nieuwsvenster blijven WEL de volle breedte gebruiken. */
.mk-body section > p, .mk-body section > ul, .mk-body section > ol,
.mk-answer p, .mk-faq details p{max-width:68ch}

/* Aanraakdoelen. Nav-links stonden op 26px en FAQ-knoppen op 27px hoog; Apple
   houdt 44pt aan en Google 48dp. Op een aanraakscherm wordt alles minstens 44px,
   met padding in plaats van een grotere letter, zodat het ontwerp niet verspringt. */
@media (pointer:coarse){
  /* Het kruimelpad was 16px hoog: met een duim vrijwel niet te raken. De links
     krijgen wat lucht zonder dat het pad een tweede regel wordt. */
  .mk-crumb a{display:inline-flex;align-items:center;min-height:36px;padding:0 2px}
  nav a, .mk-nav a, header a{min-height:44px;display:inline-flex;align-items:center;padding:9px 0}
  .mk-faq summary{min-height:44px;align-items:center;padding:10px 0}
  .mk-toc a{min-height:44px;display:flex;align-items:center}
  /* Stonden op 40 en 41px, net onder de 44 die een vinger nodig heeft. Het zijn
     losstaande regels in een lijst, geen links midden in een zin, dus oprekken
     mag hier zonder de regelval te breken. */
  .mk-nws li a{min-height:44px;display:flex;align-items:center;padding:4px 0}
  .mk-refs li a{min-height:44px;display:inline-flex;align-items:center;padding:6px 0}
  .mk-close__lines a{min-height:44px;display:inline-flex;align-items:center}
  /* De "Read the full page"-link onder elke tegel stond op 26px, 37 keer op de
     homepage alleen al. Losse links en knoppen worden 44px; links MIDDEN in een
     alinea blijven zoals ze zijn, want die oprekken breekt de regelval. */
  /* Let op de specificiteit: verderop staat `.mk-tile .mk-tile__go{display:inline-block}`
     en die won van een enkele klasse, waardoor min-height niets deed. Daarom hier
     dezelfde twee-klassen-vorm, EN padding in plaats van alleen min-height, want
     padding vergroot het tikvlak van een inline-block hoe dan ook. */
  .mk-tile .mk-tile__go, .mk-grid .mk-tile__go{display:inline-flex;align-items:center;
    min-height:44px;padding:10px 0}
  .about__link, .mk-side a, .mk-card a{min-height:44px;display:inline-flex;
    align-items:center;padding:8px 0}
  /* Telefoon, e-mail en LinkedIn in de voettekst. Juist die wil je goed kunnen
     aantikken: het zijn de enige links op de pagina die rechtstreeks tot een
     gesprek leiden. Stonden op 23 en 28px. */
  footer li a, footer a[href^="tel:"], footer a[href^="mailto:"],
  a[href^="tel:"], a[href^="mailto:"], a[href*="linkedin.com"]{min-height:44px;
    display:inline-flex;align-items:center;padding:7px 0}
}

/* Tabellen mogen op een smal scherm schuiven in plaats van te knijpen. */
/* De schuifdoos vervangt de oude display:block-truc, die alleen onder 560px
   werkte en de tabel daarboven ongebreideld liet uitlopen. */
.mk-tabelwrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
margin:8px 0 28px;overscroll-behavior-x:contain}
.mk-tabelwrap .mk-table{margin:0}
.mk-table--breed{min-width:min(100%,620px)}
/* Op een telefoon is zijwaarts schuiven door een tabel van drie kolommen geen
   pretje: de derde kolom is onzichtbaar tot je hem vindt. Onder 560px stapelt
   een brede tabel daarom per RIJ, met de kolomkop voor elke waarde. */
@media(max-width:559px){
  .mk-table--breed{min-width:0;display:block}
  /* Een <caption> blijft display:table-caption en kromp in de gestapelde
     weergave tot een kolom van één woord breed. */
  .mk-table--breed caption{display:block;width:auto;text-align:left}
  .mk-table--breed thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .mk-table--breed tbody,.mk-table--breed tr,.mk-table--breed th,.mk-table--breed td{display:block;width:auto}
  .mk-table--breed tr{border:1px solid var(--sc-lijn);border-radius:10px;
    padding:12px 14px;margin-bottom:12px;background:var(--sc-vlak)}
  .mk-table--breed th[scope=row]{min-width:0;background:none;padding:0 0 8px;
    border:0;font-size:1rem;color:var(--sc-groen-diep)}
  .mk-table--breed td{padding:6px 0;border:0;border-top:1px solid var(--sc-lijn)}
  .mk-table--breed td[data-label]::before{content:attr(data-label);display:block;
    font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--sc-gedempt);margin-bottom:2px}
  .mk-table--breed tr:last-child td,.mk-table--breed tr:last-child th{border-bottom:0}
}

.mk-fig{margin:26px 0 6px;padding:0}
.mk-fig svg{width:100%;height:auto;max-width:820px;display:block}
.mk-fig figcaption{margin-top:10px;font-size:.85rem;color:var(--sc-gedempt);max-width:62ch}
/* Menu op EEN regel, ook op een telefoon. De site verbergt de hamburger onder
   680px en laat de links zelf staan; met vijf items brak dat over drie regels en
   werd de balk 193px hoog, wat een derde van het scherm kostte. Kleinere letter
   en krappere tussenruimte laten ze passen; de tikhoogte blijft 44px. */
@media(max-width:620px){
  /* Het MENU op een regel; het logo mag er gewoon boven staan. Met de hele
     nav__inner op nowrap werd het logo links afgeknipt en Contact rechts. */
  .nav__links{flex-wrap:nowrap !important;gap:13px !important;justify-content:center;width:100%}
  .nav__links a{font-size:.8rem !important;white-space:nowrap;letter-spacing:0}
  .nav__inner{flex-wrap:wrap !important;justify-content:center;row-gap:2px;padding-top:6px}
  /* De zoekknop staat NAAST de linkrij, niet erin: die rij staat op nowrap om
     op een regel te passen, en een knop erin duwde de pagina 309px breed. */
  /* 44x44: onder de 44 is hij met een duim slecht te raken. Dat kan hier veilig,
     want de knop staat absoluut gepositioneerd NAAST de linkrij en duwt de
     pagina dus niet meer breed (dat was de oorzaak van de 309px overloop). */
  .sc-zoekknop{position:absolute;right:10px;top:6px;width:44px;height:44px}
  .nav__inner{position:relative}
}
@media(max-width:420px){
  .nav__links{gap:8px !important}
  .nav__links a{font-size:.74rem !important}
}
.sc-formvouw{margin-top:8px}
.sc-formvouw>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
gap:9px;min-height:48px;padding:13px 26px;border:none;font-weight:700}
.sc-formvouw>summary::-webkit-details-marker{display:none}
.sc-formvouw>summary::after{content:"↓";font-size:1.05rem;transition:transform .22s ease}
.sc-formvouw[open]>summary::after{transform:rotate(180deg)}
.sc-formvouw__inhoud{margin-top:20px;animation:scVouw .24s ease}
@keyframes scVouw{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.sc-formvouw__inhoud{animation:none}}
/* --- Voorwaardenpagina: versieblok en afdrukken ---------------------------
   Een wederpartij moet de tekst kunnen BEWAREN, niet alleen lezen. Vandaar de
   downloadlink en een schone afdrukweergave (print -> PDF). */
.sc-vw-melding{margin:16px 0 0;font-size:.84rem;line-height:1.6;
color:var(--sc-gedempt)}
.sc-vw-melding a{color:var(--sc-groen);font-weight:600;text-decoration:underline}
/* Trade Window-knop: het 'soon'-label maakt meteen duidelijk dat het er nog
   niet is. Beloven wat je niet hebt is precies wat art. 6:194 BW verbiedt. */
.sc-tw-knop{gap:.55em}
.sc-tw-knop__merk{font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.22);
border:1px solid rgba(255,255,255,.45);line-height:1}
:root[data-theme="light"] .hero .sc-tw-knop__merk,
.hero .sc-tw-knop__merk{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}
/* De URL in art. 3.5 is een lang woord zonder spaties en duwde de pagina op
   een telefoon 15px scheef. Juridische tekst mag overal afbreken. */
.legal p,.legal li,.legal td,.legal strong{overflow-wrap:anywhere}
/* Op een telefoon staat het logo op zijn eigen regel BOVEN het menu; met 62px
   at de balk 140px = 17% van het scherm op. Kleiner logo en strakkere regels
   brengen dat terug zonder dat het merk klein wordt. */
@media(max-width:680px){
  /* De aanraakregel geeft ELKE nav-link 9px padding boven en onder. Voor de
     menulinks is dat nodig, voor het LOGO niet: dat maakte de brand-link 52px
     terwijl het merk 34px is. min-height houdt hem raakbaar zonder de balk te
     laten groeien. */
  /* Het merk zat in een doos van 44px terwijl het beeldmerk 34px is: 5px lucht
     boven EN onder. Samen met de 44px aanraakdoos van de menulinks stond er
     visueel 20px tussen het logo en het woord "Home". De doos volgt nu het
     beeldmerk (het is een breed doel van ~90px, en Home staat ook in het menu);
     de LINKS houden hun volle 44px. */
  /* z-index omdat de linkrij met haar negatieve marge de onderste 5px van
     het logo overlapt: zonder dit tik je daar een MENULINK in plaats van
     het logo aan. Getoetst met elementFromPoint. */
  .nav__brand{padding:0 !important;min-height:0;display:inline-flex;
  align-items:flex-end;position:relative;z-index:2}
  .nav__inner{padding-top:4px !important;padding-bottom:2px !important}
  .nav__links{margin-top:-5px}
  /* De zoekknop stond alleen onder 620px absoluut; tussen 621 en 680px viel hij
     naar een DERDE regel en werd de balk 139px. Hij hoort in de hele mobiele
     modus naast de rijen te zweven, niet erin. */
  .sc-zoekknop{position:absolute;right:10px;top:6px;width:44px;height:44px}
  .nav__inner{position:relative}
  .nav__logo{height:54px !important}
  .nav.scrolled .nav__logo{height:48px !important}
  .nav__inner{padding-top:8px !important;padding-bottom:6px !important;row-gap:0 !important}
  .nav__links{padding-top:0 !important;padding-bottom:2px !important}
}
@media(max-width:420px){
  .nav__logo{height:46px !important}
  .nav.scrolled .nav__logo{height:42px !important}
}
.legal__terug{margin:26px 0;font-size:.94rem}
/* .legal .back droeg nog zijn eigen bronskleur; in één regel met twee groene
   links leest dat als een vergissing. Alle drie hetzelfde. */
.legal__terug a,.legal__terug a.back{color:var(--sc-groen) !important;font-weight:600;
text-decoration:underline;padding:6px 0;display:inline-block;margin:0}
@media(pointer:coarse){.legal__terug a{min-height:44px;display:inline-flex;align-items:center}}
.gtc-versie{margin:0 0 26px}
.gtc-versie__sub{display:block;margin-top:8px;font-size:.86rem;line-height:1.65;
color:var(--sc-gedempt)}
.gtc-versie__sub a{color:var(--sc-groen);font-weight:600;text-decoration:underline}
@media print{
  header.nav,.sc-thema,.cookie,.sc-zoek,footer .footer__links,[data-print]{display:none !important}
  body{background:#fff !important;color:#000 !important;font-size:10.5pt}
  .legal .container{max-width:none;padding:0}
  h2{page-break-after:avoid;break-after:avoid}
  p{orphans:3;widows:3}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
}
.sc-locatie{margin:0 0 26px;padding:20px 24px;border-radius:12px;
background:var(--sc-groen-vlak);border:1px solid var(--sc-groen-lijn)}
.sc-locatie p{margin:0 0 10px;font-size:.95rem;line-height:1.6;color:var(--sc-tekst-zacht)}
.sc-locatie p:last-child{margin-bottom:0}
.sc-locatie a{color:var(--sc-groen);font-weight:600}
/* assemble.py verhuist de hele Located-sectie hierheen, mét haar eigen
   .located__panel. Dat gaf een kaart-in-een-kaart op een goud vlak. Binnen
   .sc-locatie draait het paneel dus leeg: één kaart, donkergroen, witte tekst. */
.sc-locatie{background:linear-gradient(160deg,#2f5d2a,#1f3f1c);border-color:transparent;
padding:clamp(22px,3vw,30px)}
.sc-locatie .located__panel{background:none;padding:0;color:#fff}
.sc-locatie .located__panel .container--narrow{padding:0;max-width:none}
.sc-locatie p,.sc-locatie .located__addr{color:rgba(255,255,255,.92)}
.sc-locatie .sc-locatie__kop strong{color:#fff;font-size:1.12rem}
.sc-locatie .located__punten li{border-left-color:rgba(255,255,255,.35)}
.sc-locatie .located__punten strong{color:#fff}
.sc-locatie .located__punten span{color:rgba(255,255,255,.86)}
.sc-locatie a{color:#cfe9b8}
.sc-waarom__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:26px 34px}
.sc-waarom__grid h3{margin:0 0 9px;font-size:1.12rem;color:var(--sc-groen-diep);
padding-left:14px;border-left:3px solid var(--sc-groen-fel)}
.sc-waarom__grid p{margin:0;font-size:.96rem;line-height:1.62;color:var(--sc-tekst-zacht);max-width:52ch}
.sc-diensten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px}
.sc-diensten .card{padding:24px 26px}
.sc-diensten h3{margin:0 0 9px;font-size:1.1rem;color:var(--sc-groen-diep)}
.sc-diensten p{margin:0;font-size:.94rem;line-height:1.6;color:var(--sc-tekst-zacht)}
.sc-diensten a{color:var(--sc-groen);font-weight:600;text-decoration:none;white-space:nowrap}
.sc-diensten a:hover{text-decoration:underline}
.sc-cijfers{padding:34px 0;border-bottom:1px solid var(--sc-lijn);background:var(--sc-groen-vlak)}
.sc-cijfers__lijst{margin:0;padding:0;list-style:none;display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:26px 30px}
.sc-cijfers__lijst li{margin:0}
.sc-cijfers__lijst strong{display:block;font-family:'Raleway',sans-serif;font-weight:800;
font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1;color:var(--sc-groen);margin-bottom:8px}
.sc-cijfers__lijst span{display:block;font-size:.9rem;line-height:1.5;color:var(--sc-tekst-zacht);max-width:32ch}
@media(max-width:620px){.sc-cijfers{padding:26px 0}.sc-cijfers__lijst{gap:20px}}
.mk-meer__lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:26px 30px}
details.mk-groep>summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  justify-content:space-between;gap:10px;padding:8px 0;min-height:44px;box-sizing:border-box}
details.mk-groep>summary::-webkit-details-marker{display:none}
details.mk-groep>summary::after{content:"▾";font-size:.75rem;opacity:.55;
  transition:transform .18s;margin-left:auto;order:3}
details.mk-groep[open]>summary::after{transform:rotate(180deg)}
details.mk-groep>summary:hover h3{color:var(--sc-oranje)}
.mk-groep__n{font-size:.72rem;font-weight:700;color:var(--sc-gedempt);
  background:var(--sc-vlak);border-radius:999px;padding:2px 8px;order:2}
.mk-groep h3{margin:0;font-size:.82rem;font-weight:700;letter-spacing:.07em;
text-transform:uppercase;color:var(--sc-groen);border-bottom:1px solid var(--sc-groen-lijn);padding-bottom:7px}
.mk-groep ul{margin:0;padding:0;list-style:none}
.mk-groep li{margin:0}
.mk-groep a{display:block;padding:7px 0;color:var(--sc-groen-diep);text-decoration:none;
font-size:.93rem;line-height:1.4}
.mk-groep a:hover{color:var(--sc-oranje);text-decoration:underline}
@media(pointer:coarse){.mk-groep a{min-height:44px;display:flex;align-items:center}}
/* Bart, 10-08-2026: "Every product, in detail is niet zo netjes met een lijn."
   Een streep over de volle breedte knipt de sectie doormidden en valt meer op
   dan wat eronder staat. Het blok krijgt nu een eigen zacht vlak: dat scheidt
   net zo goed, maar leest als een groepje in plaats van als een afkapping. */
.mk-meer{margin-top:40px;padding:28px 26px 30px;border:1px solid var(--sc-lijn);
  border-radius:16px;background:var(--sc-vlak)}
@media(max-width:560px){.mk-meer{padding:22px 18px 24px;border-radius:14px}}
.mk-meer__kop{margin:0 0 14px;font-size:.76rem;font-weight:700;letter-spacing:.09em;
text-transform:uppercase;color:var(--sc-gedempt)}
.mk-meer__lijst{margin:0 0 24px;padding:0;list-style:none;display:grid;
grid-template-columns:repeat(auto-fill,minmax(min(215px,100%),1fr));gap:2px 22px}
.mk-meer__lijst li{margin:0}
.mk-meer__lijst a{display:block;padding:7px 0;color:var(--sc-groen-diep);text-decoration:none;
font-size:.94rem;border-bottom:1px solid transparent}
.mk-meer__lijst a:hover{border-bottom-color:var(--sc-groen-fel)}
.mk-meer__knop{display:inline-block}
@media(pointer:coarse){.mk-meer__lijst a{min-height:44px;display:flex;align-items:center}}
.mk-vouw{border:0;margin:0}
.mk-vouw>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px}
.mk-vouw>summary::-webkit-details-marker{display:none}
.mk-vouw>summary::before{content:"−";flex:none;font-size:1.1rem;color:var(--sc-groen-fel);
font-weight:700;line-height:1;transform:translateY(2px)}
.mk-vouw:not([open])>summary::before{content:"+"}
.mk-vouw>summary h2{margin-top:44px}
.mk-vouw:not([open])>summary h2{margin-bottom:0}
.mk-vouw>summary:hover h2{color:var(--sc-groen-fel)}
.mk-kaart{display:flex;gap:20px;align-items:flex-start;margin:0 0 34px;padding:22px 26px;
border-radius:14px;background:var(--sc-vlak);border:1px solid var(--sc-groen-lijn);
box-shadow:0 1px 0 var(--sc-lijn)}
.mk-kaart__merk{flex:none;width:60px;height:60px;display:grid;place-items:center;border-radius:12px;
background:var(--sc-groen-vlak);color:var(--sc-groen);border:1px solid var(--sc-groen-lijn)}
.mk-kaart__merk svg{display:block}
.mk-kaart__body{min-width:0;flex:1}
.mk-kaart__familie{margin:0 0 3px;font-size:.7rem;font-weight:700;letter-spacing:.11em;
text-transform:uppercase;color:var(--sc-groen)}
.mk-kaart__naam{margin:0 0 14px;font-family:'Raleway',sans-serif;font-weight:800;
font-size:1.22rem;line-height:1.2;color:var(--sc-tekst)}
.mk-kaart__lijst{margin:0;display:grid;gap:7px}
.mk-kaart__rij{display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:baseline}
.mk-kaart__rij dt{margin:0;font-size:.74rem;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:var(--sc-gedempt)}
.mk-kaart__rij dd{margin:0;font-size:.92rem;line-height:1.45;color:var(--sc-tekst-zacht)}
@media(max-width:620px){
  .mk-kaart{flex-direction:column;gap:14px;padding:18px 20px}
  .mk-kaart__rij{grid-template-columns:1fr;gap:2px}
  .mk-kaart__rij dt{font-size:.7rem}
}
@media print{.mk-kaart{break-inside:avoid}}
.mk-toc{margin:0 0 42px;padding:20px 24px;background:var(--sc-groen-vlak);
border:1px solid var(--sc-groen-lijn);border-radius:12px}
.mk-toc__label{margin:0 0 12px;font-size:.74rem;font-weight:700;letter-spacing:.09em;
text-transform:uppercase;color:var(--sc-gedempt)}
.mk-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;
display:grid;grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));gap:2px 26px}
.mk-toc li{counter-increment:toc;margin:0}
.mk-toc a{display:block;padding:6px 0;color:var(--sc-groen-diep);text-decoration:none;font-size:.95rem;
line-height:1.45;border-bottom:1px solid transparent}
.mk-toc a::before{content:counter(toc) ".";color:var(--sc-groen-fel);font-weight:700;margin-right:9px}
.mk-toc a:hover{border-bottom-color:var(--sc-groen-lijn)}
@media(max-width:640px){.mk-toc{padding:16px 18px;margin-bottom:32px}
.mk-toc ol{grid-template-columns:1fr}}
.mk-nws{margin-top:48px;border-top:2px solid var(--sc-lijn);padding-top:34px}
.mk-nws h2{margin-top:0}
.mk-nws>p{font-size:.94rem;color:var(--sc-gedempt);max-width:62ch}
.mk-nws__venster{margin-top:18px;max-height:340px;overflow-y:auto;overscroll-behavior:contain;
border:1px solid var(--sc-lijn);border-radius:8px;padding:2px 18px;background:var(--sc-venster)}
.mk-nws__venster::-webkit-scrollbar{width:9px}
.mk-nws__venster::-webkit-scrollbar-thumb{background:var(--sc-lijn-sterk);border-radius:5px}
.mk-nws__venster::-webkit-scrollbar-track{background:transparent}
.mk-nws ul{margin:0;padding:0;list-style:none}
.mk-nws li{margin:0;padding:14px 0;border-bottom:1px solid var(--sc-lijn);display:flex;flex-direction:column;gap:4px}
.mk-nws li:last-child{border-bottom:none}
.mk-nws a{color:var(--sc-groen-diep);font-weight:600;text-decoration:none;line-height:1.45}
.mk-nws a:hover{text-decoration:underline}
.mk-nws__meta{font-size:.82rem;color:var(--sc-gedempt);letter-spacing:.01em}
.mk-nws__bij{margin-top:16px;font-size:.8rem;color:var(--sc-gedempt-licht)}
.mk-refs{margin-top:44px;border-top:1px solid var(--sc-lijn);padding-top:30px}
.mk-refs h2{margin-top:0}
.mk-refs>p{font-size:.94rem;color:var(--sc-gedempt);max-width:62ch}
.mk-refs ul{margin:14px 0 0;padding-left:20px}
.mk-refs li{margin:8px 0;line-height:1.6;font-size:.95rem}
.mk-refs a{color:var(--sc-groen-diep);text-decoration:underline;text-underline-offset:2px}
.mk-faq{margin-top:52px;border-top:2px solid var(--sc-lijn);padding-top:38px}
.mk-faq h2{margin-top:0}
.mk-faq details{border-bottom:1px solid var(--sc-lijn);padding:16px 0}
.mk-faq summary{cursor:pointer;font-weight:600;color:var(--sc-groen-diep);font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.mk-faq summary::-webkit-details-marker{display:none}
.mk-faq summary::after{content:"+";color:var(--sc-oranje);font-size:1.4rem;line-height:1;flex:none}
.mk-faq details[open] summary::after{content:"\00d7"}
.mk-faq details p{margin:14px 0 4px;line-height:1.7;color:var(--sc-tekst-zacht)}

.mk-side{position:sticky;top:96px;display:grid;gap:20px}
.mk-side__box{background:var(--sc-vlak-op);border:1px solid var(--sc-lijn);border-radius:16px;padding:24px}
.mk-side__label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sc-gedempt);margin:0 0 14px;font-weight:700;font-family:'Raleway',sans-serif}
.mk-side__box ul{list-style:none}
.mk-side__box li{margin-bottom:9px;font-size:.92rem;line-height:1.45}
.mk-side__box a{color:var(--sc-groen);text-decoration:none}
.mk-side__box a:hover{color:var(--sc-oranje)}
.mk-side__cta{background:linear-gradient(150deg,var(--sc-oranje-licht),var(--sc-oranje));border:none}
.mk-side__cta .mk-side__label{color:rgba(40,48,33,.72)}
.mk-side__cta p{font-size:.95rem;line-height:1.55;color:var(--sc-tekst);margin-bottom:16px}
.mk-side__cta .btn{width:100%;justify-content:center}
.mk-side__contact{font-size:.95rem;line-height:1.8;margin:0}
.mk-side__who{font-size:.84rem;color:rgba(40,48,33,.72);margin:8px 0 0}
.mk-side__contact a{color:var(--sc-tekst);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(42,39,34,.25)}

/* Filterbalk boven de 41 tegels. `hidden` in de HTML en pas zichtbaar als de
   JS hem aanzet: zonder script staat de volledige lijst gewoon open. */
.mk-filter{margin:0 0 24px}
.mk-filter__label{margin:0 0 9px;font-size:.76rem;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--sc-gedempt)}
.mk-filter__rij{display:flex;flex-wrap:wrap;gap:8px}
.mk-filter__knop{font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;
padding:9px 14px;min-height:40px;border-radius:999px;color:var(--sc-tekst);
background:var(--sc-vlak);border:1px solid var(--sc-lijn);
display:inline-flex;align-items:center;gap:7px;
transition:background .18s,border-color .18s,color .18s}
.mk-filter__n{font-size:.74rem;font-weight:700;opacity:.62;
font-variant-numeric:tabular-nums}
.mk-filter__knop:hover{border-color:var(--sc-groen)}
.mk-filter__knop[aria-pressed="true"]{background:var(--sc-groen);color:#0f1210;
border-color:var(--sc-groen)}
.mk-filter__knop[aria-pressed="true"] .mk-filter__n{opacity:.75}
.mk-filter__stand{margin:12px 0 0;font-size:.86rem;color:var(--sc-gedempt);min-height:1.2em}
.mk-tile[hidden]{display:none !important}
@media(pointer:coarse){.mk-filter__knop{min-height:44px}}
/* Op een telefoon vulden zeven chips vijf regels en duwden ze de tegels weer
   omlaag, precies wat we net hadden opgelost. Eén schuifbare rij dus: de
   familienamen blijven voluit (ze moeten overeenkomen met de pagina's) en de
   verticale ruimte blijft van de markten. */
/* GEEN schuivende rij: die kapt woorden af aan de schermrand en tekst buiten
   beeld mag nergens. Onder 700px korte namen, zodat alles gewoon past en
   afbreekt over meerdere regels. */
.mk-filter__kort{display:none}
@media(max-width:700px){
  .mk-filter__lang{display:none}
  .mk-filter__kort{display:inline}
}
@media(max-width:559px){
  .mk-filter__rij{gap:7px}
  .mk-filter__knop{font-size:.8rem;padding:8px 12px}
  .mk-filter__label{font-size:.72rem;margin-bottom:7px}
}
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:22px}
.mk-tile{--tp-x:26px;--tp-b:26px;display:block;background:var(--sc-vlak-op);border:1px solid var(--sc-lijn);border-radius:16px;padding:var(--tp-x) var(--tp-x) var(--tp-b);text-decoration:none;color:inherit;transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,border-color .3s}
.mk-tile:hover{transform:translateY(-5px);box-shadow:0 18px 50px -22px rgba(80,55,10,.45);border-color:transparent}
.mk-tile h2,.mk-tile h3{font-size:1.12rem;line-height:1.3;margin-bottom:8px;color:var(--sc-groen-diep);font-weight:700}
.mk-tile p{font-size:.94rem;line-height:1.6;color:var(--sc-gedempt);margin:0}
.mk-tile__more{display:inline-block;margin-top:14px;font-size:.86rem;font-weight:600;color:var(--sc-groen)}

.mk-tile{display:flex;flex-direction:column}
.mk-tile__head{flex:1}
/* Bart, 11-08-2026: "elk vakje 'in short' is niet netjes". De strook bleedt met een
   negatieve marge naar de kaartrand, maar dat getal stond HARD op 26px terwijl de
   tegel onder 559px 18px/14px padding krijgt. Gemeten gevolg: de strook stak 8px
   links en rechts en 12px onder de kaart uit, en 'In short' stond 8px verder
   ingesprongen dan de titel erboven. Nu volgen bleed en inspringing dezelfde
   variabele als de padding, dus ze kunnen niet meer uit elkaar lopen. */
.mk-tile__peek{margin:16px calc(var(--tp-x)*-1) calc(var(--tp-b)*-1);border-top:1px solid var(--sc-lijn);padding:0;background:var(--sc-peek);border-radius:0 0 15px 15px;overflow:hidden}
.mk-tile__peek summary{padding:13px var(--tp-x);transition:background .2s ease}
.mk-tile__peek summary:hover{background:var(--sc-peek-op)}
.mk-tile__peek[open] summary{background:var(--sc-peek-op);border-bottom:1px solid var(--sc-lijn)}
.mk-tile__body{padding:16px var(--tp-x) 22px;animation:mkOpen .28s cubic-bezier(.22,.61,.36,1)}
@keyframes mkOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mk-tile__go{border-bottom:1px solid rgba(46,107,22,.35);text-decoration:none;color:var(--sc-groen)}
.mk-tile__go:hover{color:var(--sc-oranje);border-color:var(--sc-oranje)}
@media (prefers-reduced-motion:reduce){.mk-tile__body{animation:none}}
.mk-tile__peek-old{margin-top:14px;border-top:1px solid var(--sc-lijn);padding-top:12px}
.mk-tile__peek summary{cursor:pointer;list-style:none;font-size:.88rem;font-weight:700;color:var(--sc-groen);display:flex;align-items:center;gap:7px}
.mk-tile__peek summary::-webkit-details-marker{display:none}
.mk-tile__peek summary::before{content:"+";display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--sc-vlak);color:var(--sc-oranje);font-weight:700;line-height:1;flex:none}
.mk-tile__peek[open] summary::before{content:"\00d7"}
.mk-tile__peek p{margin:0 0 11px;font-size:.94rem;line-height:1.68;color:var(--sc-gedempt)}
.mk-tile__peek a{color:var(--sc-groen);font-weight:600;text-decoration:none}

.mk-tile .mk-tile__ql{margin:16px 0 7px;font-size:.72rem;line-height:1.3;letter-spacing:.11em;text-transform:uppercase;color:var(--sc-gedempt-licht);font-weight:700}
.mk-tile__qs{list-style:none;margin:0 0 14px;padding:0}
.mk-tile__qs li{position:relative;padding-left:16px;margin-bottom:7px;font-size:.94rem;line-height:1.5;color:var(--sc-gedempt)}
.mk-tile__qs li::before{content:"";position:absolute;left:0;top:.58em;width:5px;height:5px;border-radius:50%;background:var(--sc-groen-fel)}
.mk-tile .mk-tile__go{display:inline-block;font-weight:700;font-size:.94rem;margin-top:4px}
.mk-tile__head{display:block;text-decoration:none;color:inherit}
.mk-tile__head:hover h2{color:var(--sc-oranje)}
.mk-updated{font-size:.82rem;color:var(--sc-gedempt);margin-top:40px;padding-top:18px;border-top:1px solid var(--sc-lijn)}

@media(max-width:900px){
  .mk-wrap{grid-template-columns:1fr;gap:40px}
  .mk-side{position:static}
}
/* De kopband moet onder de vaste menubalk beginnen. Dat stond op een VAST
   getal van 170px, uit de tijd dat de balk 135px hoog was; die is nu 74px op
   een telefoon. Resultaat: de kopband vulde 66% van het scherm en je zag geen
   enkele markt zonder te scrollen. Volgt nu de gemeten hoogte. */
@media(max-width:820px){
  .mk-hero{padding-top:calc(var(--sc-navhoogte, 96px) + 24px);
  padding-bottom:clamp(26px,5vw,40px)}
  .mk-hero__sub{font-size:1rem;line-height:1.55;max-width:46ch}
  .mk-hero h1{font-size:clamp(1.7rem,7vw,2.2rem)}
  .mk-crumb{margin-bottom:10px}
}
/* Tegels compacter op een telefoon: 41 stuks van 222px is veertien schermen. */
@media(max-width:559px){
  .mk-grid{gap:14px}
  .mk-tile{--tp-x:18px;--tp-b:14px}
  .mk-tile h2,.mk-tile__naam{font-size:1.05rem;margin-bottom:6px}
  .mk-tile p{font-size:.93rem;line-height:1.5}
  /* padding-top eraf: dat zette een extra kier boven "In short" bovenop de padding
     die de summary zelf al heeft. De marge mag wel krapper op een telefoon. */
  .mk-tile__peek{margin-top:10px}
}