/* monsternemer.nl: één stylesheet voor de hele site (2026-10-09).
   Alles staat op beeld: video in de opening van elke pagina, foto's achter de secties, steeds met ongeveer 60% donker
   erover zodat witte tekst leesbaar blijft. Scherpe hoeken (het logo is hoekig), Geist + Geist Mono, accent meetgroen.
   Statusklassen altijd met is-* (een kale klasse als "vast" botste eerder met de beeldlaag). */
@font-face { font-family:'Geist'; src:url(/fonts/geist.woff2) format('woff2'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'Geist Mono'; src:url(/fonts/geist-mono.woff2) format('woff2'); font-weight:100 900; font-display:swap; }
/* steunkleur geel (user 2026-10-09: "misschien toch de steunkleur wat nu aqua is, geel doen"), donkere tekst op gele knoppen */
:root { --inkt:#121417; --accent:#FFCD00; --op-accent:#121417; --wit:#FFFFFF; --zacht:rgba(255,255,255,.74); --lijn:rgba(255,255,255,.16);
  --donker:rgba(10,11,12,.6); --kop:64px; }
html[data-kleur="groen"] { --accent:#00B37E; --op-accent:#FFFFFF; }
html[data-kleur="polder"] { --inkt:#0E2A20; --accent:#7CC242; --op-accent:#0E2A20; }
html[data-kleur="lab"] { --inkt:#0B1A2C; --accent:#3A86FF; --op-accent:#FFFFFF; }
html[data-kleur="sloot"] { --inkt:#0B2B2E; --accent:#38C9B0; --op-accent:#0B2B2E; }
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:16px; }
html.is-home { scroll-snap-type:y proximity; scroll-padding-top:0; }
html.is-menu-open { overflow:hidden; }
body { background:var(--inkt); color:var(--wit); font:400 17px/1.6 'Geist', system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.binnen { width:min(1180px, 100% - 32px); margin-inline:auto; }
.mono { font:500 12px/1.3 'Geist Mono', ui-monospace, monospace; letter-spacing:.14em; text-transform:uppercase; }
.label { color:var(--accent); }
.merk { display:block; }
.verborgen { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.overslaan { position:fixed; z-index:100; left:16px; top:-60px; background:var(--wit); color:var(--inkt); padding:12px 16px; font-weight:600; text-decoration:none; }
.overslaan:focus { top:12px; }
h1, h2 { font-weight:800; letter-spacing:-.045em; line-height:.98; }
/* lange samenstellingen (Privacyverklaring, Sporenelementen) breken af in plaats van de pagina breder te maken */
h1, h2, h3 { overflow-wrap:break-word; hyphens:manual; -webkit-hyphens:manual; }   /* alleen bij een zacht afbreekstreepje in de tekst */
.binnen > *, .blok-kop, .tekst { min-width:0; }
h1 { font-size:clamp(44px, 12vw, 112px); }
h2 { font-size:clamp(34px, 8.5vw, 72px); }
h3 { font:700 21px/1.2 'Geist', sans-serif; letter-spacing:-.02em; }
p a, dd a { text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:3px; }

/* knoppen */
.knop { display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--accent); color:var(--op-accent); font:600 17px/1 'Geist', sans-serif;
  padding:17px 22px; text-decoration:none; border:0; cursor:pointer; transition:filter .2s, transform .2s; }
.knop:hover { filter:brightness(1.08); }
.knop.licht { background:transparent; color:var(--wit); box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); }
.knop.licht:hover { background:rgba(255,255,255,.1); }
.knop-klein { font-size:14px; padding:12px 14px; }
.knoppen { display:flex; flex-wrap:wrap; gap:10px; }
.pijl { justify-self:start; display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; padding:10px 0; border-bottom:2px solid var(--accent); }
.pijl::after { content:'→'; transition:transform .2s; } .pijl:hover::after { transform:translateX(4px); }

/* kop */
/* kop: alleen het logo en de menuknop, zonder balk (user 2026-10-09: "ik wil geen sticky bar, kan gewoon alleen t logo zijn en het menu").
   Ze staan bovenaan de pagina en scrollen mee weg (niet vast: tekst schoof anders rommelig onder het logo door). Op de home
   op de telefoon scrolt het Reels-vak en niet de pagina, daar blijven ze dus vanzelf staan. Lege rest laat klikken door. */
.kop { position:absolute; z-index:40; inset:0 0 auto; padding:calc(10px + env(safe-area-inset-top)) 0 10px; pointer-events:none; }
.kop a, .kop button { pointer-events:auto; }
.kop-merk, .menu-knop { filter:drop-shadow(0 1px 10px rgba(0,0,0,.5)); }
.kop .binnen { display:flex; align-items:center; gap:12px; min-height:44px; }
.kop-merk { display:flex; align-items:center; gap:10px; margin-right:auto; text-decoration:none; font:800 19px/1 'Geist', sans-serif; letter-spacing:-.015em; transition:opacity .3s, visibility .3s; }
.kop-merk .merk { width:30px; }
/* home (alleen schermen): logo en menu zweven vast boven de schermen; het kleine logo pas vanaf het tweede scherm, want op
   het eerste staat het grote logo (user 2026-10-09: "op desktop zie ik het logo niet" + "daar hoeft kleine logo niet") */
html.is-home .kop { position:fixed; }
html.is-home .kop-merk { opacity:0; visibility:hidden; }
html.is-home .kop.is-gescrold .kop-merk { opacity:1; visibility:visible; }
.menu-knop { display:inline-flex; align-items:center; gap:10px; background:transparent; color:var(--wit); border:0; cursor:pointer; font:600 15px/1 'Geist', sans-serif; padding:12px 4px 12px 8px; }
.menu-knop .streepjes { display:grid; gap:5px; width:22px; } .menu-knop .streepjes i { display:block; height:2px; background:currentColor; }
.menu-knop .streepjes i:last-child { width:14px; justify-self:end; }
.kop .knop-klein { display:none; }

/* menu: bento met tegels (2026-10-09 redesign). Opent met een vervaging van de pagina, tegels komen getrapt in beeld. */
.menu { position:fixed; inset:0; z-index:60; visibility:hidden; opacity:0; transition:opacity .35s, visibility 0s .35s; color:var(--wit);
  background:color-mix(in srgb, var(--inkt) 84%, transparent); -webkit-backdrop-filter:blur(22px) saturate(1.2); backdrop-filter:blur(22px) saturate(1.2); }
html.is-menu-open .menu { visibility:visible; opacity:1; transition:opacity .35s; }
.menu-scroll { position:relative; height:100%; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.menu-binnen { min-height:100%; display:grid; align-content:start; gap:14px; padding:calc(10px + env(safe-area-inset-top)) 0 calc(24px + env(safe-area-inset-bottom)); }
.menu-top { display:flex; align-items:center; justify-content:space-between; min-height:44px; }
/* eigen klasse: .kop-merk wordt op de home verborgen tot je scrolt, het logo in het menu moet altijd zichtbaar zijn */
.menu-merk { display:flex; align-items:center; gap:10px; text-decoration:none; font:800 19px/1 'Geist', sans-serif; letter-spacing:-.015em; }
.menu-merk .merk { width:30px; }
.menu-sluit { display:inline-flex; align-items:center; gap:10px; background:transparent; color:var(--wit); border:0; cursor:pointer; font:600 15px/1 'Geist', sans-serif; padding:12px 4px; }
.menu-sluit .kruis { position:relative; width:18px; height:18px; } .menu-sluit .kruis::before, .menu-sluit .kruis::after { content:''; position:absolute; left:-2px; right:-2px; top:8px; height:2px; background:currentColor; transform:rotate(45deg); }
.menu-sluit .kruis::after { transform:rotate(-45deg); }
.bento { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px;
  grid-template-areas:"aanvragen aanvragen" "grond mest" "voer water" "stikstof stikstof" "kennis kennis" "wie wie" "links links" "contact contact"; }
.tegel { position:relative; isolation:isolate; overflow:hidden; display:grid; align-content:start; gap:6px; padding:16px; min-width:0; text-decoration:none;
  background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  opacity:0; transform:translateY(14px); transition:opacity .4s, transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .2s; transition-delay:calc(.06s + var(--i) * .035s); }
html.is-menu-open .tegel { opacity:1; transform:none; }
.tegel .mono { color:var(--accent); font-size:11px; }
.tegel b { font:800 clamp(24px, 6.4vw, 34px)/1.02 'Geist', sans-serif; letter-spacing:-.035em; }
.tegel .regel-k { color:var(--zacht); font-size:14px; line-height:1.35; }
.tegel.is-huidig { box-shadow:inset 0 0 0 2px var(--accent); }
a.tegel:hover, .tegel-kop:hover b { color:var(--accent); }
/* fototegels */
.t-foto { min-height:150px; align-content:end; background:#000; }
.t-foto img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.t-foto::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(10,11,12,.88), rgba(10,11,12,.15) 70%); }
.t-foto:hover img { transform:scale(1.05); }
.t-foto .regel-k { display:none; }
.t-grond { grid-area:grond; } .t-mest { grid-area:mest; } .t-voer { grid-area:voer; } .t-water { grid-area:water; }
.t-stikstof { grid-area:stikstof; min-height:130px; } .t-stikstof .regel-k { display:block; }
/* aanvragen: geel */
.t-aanvragen { grid-area:aanvragen; background:var(--accent); color:var(--op-accent); box-shadow:none; min-height:118px; align-content:end; padding-right:64px; }
.t-aanvragen .mono, .t-aanvragen .regel-k { color:color-mix(in srgb, var(--op-accent) 72%, transparent); }
.t-aanvragen::after { content:'→'; position:absolute; right:18px; bottom:14px; font:700 30px/1 'Geist', sans-serif; transition:transform .2s; }
a.t-aanvragen:hover { color:var(--op-accent); } a.t-aanvragen:hover::after { transform:translateX(4px); }
.t-aanvragen.is-huidig { box-shadow:inset 0 0 0 2px var(--wit); }
/* kennis, voor wie, pagina's, contact */
.t-kennis { grid-area:kennis; gap:10px; } .t-wie { grid-area:wie; gap:12px; } .t-links { grid-area:links; gap:10px; } .t-contact { grid-area:contact; gap:10px; }
.tegel-kop { display:grid; gap:6px; text-decoration:none; }
.tegel-lijst { list-style:none; display:grid; border-top:1px solid var(--lijn); }
.tegel-lijst li { border-bottom:1px solid var(--lijn); }
.tegel-lijst a { display:flex; justify-content:space-between; gap:10px; padding:10px 0; text-decoration:none; color:rgba(255,255,255,.88); font-size:15px; }
.tegel-lijst a::after { content:'→'; color:var(--accent); transition:transform .2s; }
.tegel-lijst a:hover { color:var(--wit); } .tegel-lijst a:hover::after { transform:translateX(3px); }
.tegel-lijst a[aria-current] { color:var(--accent); }
.tegel-lijst.twee { grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:16px; }
.t-kennis .pijl { font-size:15px; padding:6px 0; }
.pillen { list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.pillen a { display:inline-block; padding:9px 12px; text-decoration:none; font-size:15px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
.pillen a:hover, .pillen a[aria-current] { box-shadow:inset 0 0 0 1px var(--accent); color:var(--accent); }
.t-contact .gegevens dd { font-size:16px; padding-bottom:4px; }

@media (min-width:760px) {
  .bento { grid-template-columns:repeat(4, minmax(0, 1fr));
    grid-template-areas:"aanvragen aanvragen stikstof stikstof" "grond mest voer water" "kennis kennis wie wie" "links links contact contact"; }
  .t-foto { min-height:180px; }
}
@media (min-width:1100px) {
  .menu-binnen { gap:18px; }
  .bento { height:calc(100svh - 120px); min-height:560px; grid-template-rows:repeat(3, minmax(0, 1fr)); gap:10px;
    grid-template-areas:"grond mest kennis aanvragen" "voer water kennis links" "stikstof stikstof wie contact"; }
  .tegel { padding:20px; }
  .t-foto, .t-stikstof, .t-aanvragen { min-height:0; }
  .t-foto .regel-k { display:block; }
  .t-aanvragen b { font-size:clamp(30px, 2.6vw, 40px); }
  .t-kennis b, .t-wie b { font-size:clamp(24px, 1.9vw, 30px); }
  .pillen { gap:5px; } .pillen a { padding:7px 10px; font-size:14px; }
}
/* beeld als achtergrond (scherm, opening, sectie, menu) */
.media { position:absolute; inset:0; z-index:-1; overflow:hidden; background:var(--inkt); }
.media img, .media video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.media video { opacity:0; transition:opacity .7s; }
.media video.is-speelt { opacity:1; }
.vast { position:sticky; top:0; height:100svh; overflow:hidden; }
.vast img, .vast video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* home: alleen schermen */
.scherm { position:relative; isolation:isolate; min-height:100svh; display:flex; flex-direction:column; scroll-snap-align:start; }
.scherm > .media { background:var(--inkt); }
.scherm .vast::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(10,11,12,.45), rgba(10,11,12,.12) 30%, rgba(10,11,12,.2) 45%, rgba(10,11,12,.84)); }
.scherm .inhoud { flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding:120px 0 calc(64px + env(safe-area-inset-bottom)); }
.scherm .inhoud.midden { justify-content:center; align-items:center; padding:96px 16px 120px; }
.scherm .inhoud .binnen { display:grid; gap:16px; }
#top .vast::after { background:linear-gradient(to bottom, rgba(10,11,12,.55), rgba(10,11,12,.15) 42%, rgba(10,11,12,.65)); }
.teken { display:grid; justify-items:center; gap:22px; text-align:center; }
.teken .merk { width:min(58vw, 340px); filter:drop-shadow(0 10px 40px rgba(0,0,0,.3)); }
.domein { font:500 13px/1 'Geist Mono', monospace; letter-spacing:.26em; color:rgba(255,255,255,.92); text-shadow:0 1px 12px rgba(0,0,0,.5); }
.domein::before { content:''; display:block; width:28px; height:2px; margin:0 auto 14px; background:var(--accent); }
.verder { position:absolute; left:50%; bottom:calc(22px + env(safe-area-inset-bottom)); transform:translateX(-50%); display:grid; justify-items:center; gap:10px; text-decoration:none; color:rgba(255,255,255,.75); font-size:11px; }
.verder::after { content:''; width:1px; height:34px; background:linear-gradient(rgba(255,255,255,.8), transparent); }
.lead { font-size:clamp(19px, 5vw, 25px); line-height:1.45; max-width:34em; color:rgba(255,255,255,.92); }
.klein { font-size:15px; color:rgba(255,255,255,.72); }
.teller { color:rgba(255,255,255,.78); } .teller span { color:var(--accent); margin-right:10px; }
.scherm.dienst h2 { font-size:clamp(64px, 20vw, 168px); line-height:.9; }
.regel { font-size:clamp(19px, 5vw, 24px); color:rgba(255,255,255,.92); }
.scherm .knoppen { gap:6px 28px; }   /* geen marge op de tweede link: die sprong in bij omslaan */

/* opening van een gewone pagina: video over het hele scherm, 60% donker */
.held { position:relative; isolation:isolate; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:calc(var(--kop) + 40px) 0 calc(56px + env(safe-area-inset-bottom)); }
.held.is-klein { min-height:72svh; }
.held .media::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(10,11,12,.62), rgba(10,11,12,.5) 45%, rgba(10,11,12,.82)); }
.held .binnen { display:grid; gap:18px; }
.held .lead { max-width:30em; }
.held .knoppen { margin-top:8px; }
.kruimel ol { list-style:none; display:flex; flex-wrap:wrap; gap:4px 10px; color:var(--zacht); }
.kruimel li + li::before { content:'/'; margin-right:10px; opacity:.5; }
.kruimel a { text-decoration:none; } .kruimel a:hover { color:var(--wit); }
.kruimel [aria-current] { color:var(--wit); }

/* secties: foto als achtergrond met 60% donker */
.blok { position:relative; isolation:isolate; padding:88px 0; }
.blok > .media::after { content:''; position:absolute; inset:0; background:var(--donker); }
.blok.is-zwaar > .media::after { background:rgba(10,11,12,.72); }
.blok .binnen { display:grid; gap:28px; }
.blok-kop { display:grid; gap:14px; align-content:start; }
.blok-kop h2 { max-width:12em; }
.tekst { display:grid; gap:18px; max-width:38em; font-size:19px; line-height:1.6; color:rgba(255,255,255,.9); text-shadow:0 1px 16px rgba(0,0,0,.35); }
.intro-regel { color:var(--zacht); max-width:38em; }

/* feiten: als meetwaarden */
.feiten { list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0; border-top:1px solid var(--lijn); }
.feiten li { display:grid; gap:6px; padding:18px 14px 20px 0; border-bottom:1px solid var(--lijn); }
.feiten li:nth-child(odd) { padding-right:14px; } .feiten li:nth-child(even) { padding-left:14px; border-left:1px solid var(--lijn); }
.feiten .mono { color:var(--accent); }
.feiten h3 { font-size:clamp(19px, 5vw, 24px); }
.feiten p { color:var(--zacht); font-size:15px; line-height:1.45; }

/* stappen */
.stappen { list-style:none; display:grid; }
.stappen li { display:grid; grid-template-columns:52px 1fr; column-gap:14px; padding:20px 0; border-top:1px solid var(--lijn); }
.stappen li:last-child { border-bottom:1px solid var(--lijn); }
.stappen .nr { grid-row:1 / span 2; color:var(--accent); font-size:13px; padding-top:5px; }
.stappen h3 { font-size:clamp(21px, 5.4vw, 28px); }
.stappen p { color:rgba(255,255,255,.82); margin-top:6px; max-width:36em; }

/* vragen */
.vragen { display:grid; border-top:1px solid var(--lijn); }
.vragen details { border-bottom:1px solid var(--lijn); }
.vragen summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0; cursor:pointer; font:700 clamp(18px, 4.8vw, 22px)/1.3 'Geist', sans-serif; letter-spacing:-.015em; }
.vragen summary::-webkit-details-marker { display:none; }
.vragen summary::after { content:''; flex:none; width:14px; height:14px; background:linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat; transition:transform .25s; color:var(--accent); }
.vragen details[open] summary::after { transform:rotate(45deg); }
.vragen .antwoord { padding:0 0 22px; color:rgba(255,255,255,.86); max-width:40em; }

/* kaarten naar de diensten */
.kaarten { display:grid; grid-template-columns:minmax(0, 1fr); gap:12px; }
.kaart { position:relative; isolation:isolate; min-height:300px; display:flex; align-items:flex-end; overflow:hidden; text-decoration:none; background:#000; }
.kaart > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.kaart::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(10,11,12,.86), rgba(10,11,12,.25) 65%); }
.kaart-tekst { padding:22px; display:grid; gap:8px; }
.kaart-tekst .mono { color:var(--accent); }
.kaart-tekst h3 { font-size:clamp(30px, 8vw, 40px); letter-spacing:-.035em; }
.kaart-tekst p { color:var(--zacht); }
.kaart-tekst .pijl { margin-top:6px; }
.kaart:hover > img { transform:scale(1.05); }

/* oproep met video */
.oproep { position:relative; isolation:isolate; min-height:76svh; display:flex; align-items:center; padding:96px 0; text-align:center; }
.oproep .media::after { content:''; position:absolute; inset:0; background:rgba(10,11,12,.6); }
.oproep .binnen { display:grid; justify-items:center; gap:20px; }
.oproep h2 { max-width:12em; }
.oproep p { max-width:32em; color:rgba(255,255,255,.88); font-size:19px; }

/* glazen paneel: formulier en contact */
.paneel { padding:28px 20px; background:color-mix(in srgb, var(--inkt) 74%, transparent); -webkit-backdrop-filter:blur(20px) saturate(1.2); backdrop-filter:blur(20px) saturate(1.2); display:grid; gap:16px; max-width:760px; }
.paneel h2 { font-size:clamp(34px, 8.6vw, 60px); }
form { display:grid; gap:14px; margin-top:4px; }
.velden { display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; }
label { display:grid; gap:6px; font-size:14px; color:rgba(255,255,255,.82); }
input, select, textarea { font:400 17px/1.3 'Geist', sans-serif; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.26); border-radius:0; padding:13px 12px; width:100%; }
select option { color:#121417; }
textarea { min-height:110px; resize:vertical; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:0; border-color:transparent; }
.melding { padding:12px 14px; background:rgba(255,255,255,.1); border-left:3px solid var(--accent); font-size:15px; }
.gegevens { display:grid; grid-template-columns:auto 1fr; gap:4px 18px; align-items:baseline; }
.gegevens dt { color:rgba(255,255,255,.6); }
.gegevens dd { font-size:19px; padding-bottom:10px; }
.volgt { font-style:italic; color:rgba(255,255,255,.5); }

/* voet */
.voet { position:relative; isolation:isolate; padding:72px 0 calc(32px + env(safe-area-inset-bottom)); }
.voet > .media::after { content:''; position:absolute; inset:0; background:rgba(10,11,12,.84); }
.voet .binnen { display:grid; gap:40px; }
.voet-merk { display:flex; align-items:center; gap:12px; font:800 24px/1 'Geist', sans-serif; letter-spacing:-.015em; text-decoration:none; }
.voet-merk .merk { width:40px; }
.voet-kolommen { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:32px 24px; }
.voet h2 { font:500 12px/1.3 'Geist Mono', monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.voet ul { list-style:none; display:grid; gap:8px; }
.voet ul a { text-decoration:none; color:var(--zacht); } .voet ul a:hover { color:var(--wit); }
.voet-onder { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; padding-top:22px; border-top:1px solid var(--lijn); color:rgba(255,255,255,.5); font-size:13px; }
.voet-onder a { text-decoration:none; }

/* home op de telefoon: swipen zoals Reels (user 2026-10-09: "op mobile niet echt fijn swiped ... systeem zoals je door
   reels scrollt"). Eigen scrollvak van precies één schermhoogte (de adresbalk van Safari blijft dan staan, dus elk scherm
   valt exact), verplicht vastklikken met scroll-snap-stop zodat één veeg één scherm is, geen pull-to-refresh. */
.alleen-groot { display:none; }
.voortgang { display:none; }
@media (max-width:899px) {
  html.is-home, html.is-home body { height:100%; overflow:hidden; }
  html.is-home { scroll-snap-type:none; }
  .reels { height:100vh; height:100dvh; overflow-y:auto; overscroll-behavior-y:contain; scroll-snap-type:y mandatory; scroll-behavior:smooth; }
  .reels .scherm { height:100vh; height:100dvh; min-height:0; scroll-snap-align:start; scroll-snap-stop:always; overflow:hidden; }
  .reels .scherm .vast { height:100vh; height:100dvh; }
  .reels .voet { scroll-snap-align:end; }
  .voortgang { display:grid; gap:5px; position:fixed; z-index:35; right:7px; top:50%; transform:translateY(-50%); pointer-events:none; }
  .voortgang i { display:block; width:3px; height:18px; background:rgba(255,255,255,.35); transition:background .3s, height .3s; }
  .voortgang i.is-actief { background:var(--accent); height:30px; }
  html.is-menu-open .voortgang { opacity:0; }
  .reels .scherm .inhoud { padding-top:96px; }
  /* "Zo werkt het" moet in één scherm passen: compacte stappen */
  .reels #werkwijze .paneel { padding:22px 18px; gap:12px; }
  .reels #werkwijze .stappen li { grid-template-columns:36px 1fr; padding:11px 0; }
  .reels #werkwijze .stappen h3 { font-size:20px; }
  .reels #werkwijze .stappen p { font-size:15px; line-height:1.4; margin-top:3px; }
}
@media (max-width:899px) and (max-height:720px) {   /* kleine telefoons: alles moet in één scherm passen */
  .reels .scherm .inhoud { padding:84px 0 calc(34px + env(safe-area-inset-bottom)); }
  .reels .scherm .inhoud .binnen { gap:10px; }
  .reels .scherm h1 { font-size:clamp(36px, 10.5vw, 56px); }
  .reels .lead { font-size:17px; }
  .reels .paneel { padding:20px 18px; gap:10px; }
  .reels .paneel h2 { font-size:32px; }
  .reels .stappen li { padding:9px 0; } .reels .stappen p { font-size:14px; margin-top:2px; } .reels .stappen h3 { font-size:19px; }
  .reels .scherm.dienst h2 { font-size:clamp(56px, 18vw, 120px); }
  .reels #werkwijze .stappen p { display:none; }   /* op kleine telefoons alleen de stappen zelf */
}
@media (min-width:900px) { .alleen-tel { display:none; } .alleen-groot { display:inline; } }

/* verschijnen bij scrollen (alleen met script, anders meteen zichtbaar) */
html.js .onthul { opacity:0; transform:translateY(18px); transition:opacity .7s, transform .8s cubic-bezier(.2,.7,.2,1); }
html.js .onthul.is-zichtbaar { opacity:1; transform:none; }

@media (min-width:760px) {
  .kop .knop-klein { display:inline-flex; }
  .velden { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .velden .breed { grid-column:1 / -1; }
  .paneel { padding:44px; }
  .feiten { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .feiten li, .feiten li:nth-child(odd), .feiten li:nth-child(even) { padding:22px 18px; border-left:1px solid var(--lijn); }
  .feiten li:nth-child(3n + 1) { border-left:0; padding-left:0; }
  .kaarten { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .voet-kolommen { grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (min-width:1000px) {
  :root { --kop:76px; }
  .blok { padding:140px 0; }
  .blok .binnen.twee { grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:64px; align-items:start; }
  .blok .binnen.twee .blok-kop { position:sticky; top:calc(var(--kop) + 32px); }
  .blok .binnen.twee h2 { font-size:clamp(40px, 4.4vw, 62px); }
  .kaarten { grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .kaart { min-height:460px; }
  .held { padding-bottom:88px; }
  .scherm .inhoud { padding-bottom:96px; }
}
@media (prefers-reduced-motion:reduce) {
  html, html.is-home { scroll-behavior:auto; scroll-snap-type:none; }
  .media video { display:none; }
  html.js .onthul { opacity:1; transform:none; transition:none; }
  .menu, .tegel { transition:none; }
}

/* ---------- uitbreiding (2026-10-09): artikelen, kennis, jaarplanning, begrippen, voor wie ---------- */
/* artikel: tekst over één vaste foto met een zware donkere laag */
.artikel { position:relative; isolation:isolate; padding:72px 0 96px; }
.artikel > .media::after { content:''; position:absolute; inset:0; background:rgba(10,11,12,.8); }
.artikel-binnen { display:grid; gap:36px; }
.artikel-zij { display:grid; gap:22px; align-content:start; }
.artikel-meta { color:var(--zacht); }
.inhoudsopgave { display:grid; gap:10px; }
.inhoudsopgave ol { list-style:none; display:grid; border-top:1px solid var(--lijn); counter-reset:toc; }
.inhoudsopgave li { border-bottom:1px solid var(--lijn); counter-increment:toc; }
.inhoudsopgave a { display:flex; gap:12px; padding:11px 0; text-decoration:none; color:rgba(255,255,255,.86); }
.inhoudsopgave a::before { content:counter(toc, decimal-leading-zero); flex:none; font:500 12px/1.9 'Geist Mono', monospace; color:var(--accent); }
.inhoudsopgave a:hover { color:var(--wit); }
.artikel-tekst { max-width:40em; font-size:19px; line-height:1.65; color:rgba(255,255,255,.9); }
.artikel-tekst h2 { font-size:clamp(28px, 7vw, 44px); letter-spacing:-.035em; line-height:1.06; margin:52px 0 16px; scroll-margin-top:calc(var(--kop) + 24px); color:var(--wit); }
.artikel-tekst h2:first-child { margin-top:0; }
.artikel-tekst p + p { margin-top:14px; }
.artikel-tekst ul { list-style:none; display:grid; gap:10px; margin-top:16px; }
.artikel-tekst li { position:relative; padding-left:26px; }
.artikel-tekst li::before { content:''; position:absolute; left:0; top:.66em; width:12px; height:2px; background:var(--accent); }

/* kennis-links op de home */
.kennis-links { display:grid; justify-items:start; gap:2px; margin-top:4px; }

/* jaarplanning: kaart per seizoen */
.seizoenen { display:grid; grid-template-columns:minmax(0, 1fr); gap:12px; }
.seizoen { position:relative; isolation:isolate; overflow:hidden; min-height:340px; display:flex; align-items:flex-end; background:#000; }
.seizoen > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.seizoen::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(10,11,12,.92), rgba(10,11,12,.4)); }
.seizoen-tekst { padding:22px; display:grid; gap:8px; width:100%; }
.seizoen h3 { font-size:clamp(32px, 8.5vw, 42px); letter-spacing:-.035em; }
.seizoen ul { list-style:none; display:grid; gap:10px; margin-top:6px; }
.seizoen li { border-top:1px solid var(--lijn); padding-top:10px; display:grid; gap:2px; }
.seizoen li b { font-weight:700; }
.seizoen li span { color:var(--zacht); font-size:15px; line-height:1.45; }

/* begrippen per letter */
.letters { display:flex; flex-wrap:wrap; gap:6px; }
.letters a { display:grid; place-items:center; min-width:42px; height:42px; text-decoration:none; box-shadow:inset 0 0 0 1px var(--lijn); }
.letters a:hover { box-shadow:inset 0 0 0 1px var(--accent); color:var(--accent); }
.begrippenlijst { display:grid; }
.letter-groep { display:grid; grid-template-columns:44px minmax(0, 1fr); gap:0 14px; padding-top:22px; border-top:1px solid var(--lijn); scroll-margin-top:calc(var(--kop) + 16px); }
.letter { font:800 34px/1 'Geist', sans-serif; color:var(--accent); }
.begrippen { display:grid; gap:18px; padding-bottom:22px; }
.begrip { scroll-margin-top:calc(var(--kop) + 16px); }
.begrip dt { font:700 21px/1.25 'Geist', sans-serif; letter-spacing:-.015em; }
.begrip dd { color:rgba(255,255,255,.84); margin-top:4px; max-width:40em; }
.begrip .pijl { padding:0 0 1px; margin-left:4px; font-size:15px; border-bottom-width:1px; }
.begrip:target dt { color:var(--accent); }

/* voet */
.voet-over { max-width:36em; }

@media (min-width:760px) {
  .seizoenen { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .voet-kolommen { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (min-width:1000px) {
  .artikel { padding:120px 0 140px; }
  .artikel-binnen { grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:64px; align-items:start; }
  .artikel-zij { position:sticky; top:calc(var(--kop) + 32px); }
  .kaarten.k2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .kaarten.k3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .letter-groep { grid-template-columns:72px minmax(0, 1fr); }
  .letter { font-size:44px; }
  .begrippen { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px 40px; }
}
@media (min-width:1100px) { .voet-kolommen { grid-template-columns:repeat(5, minmax(0, 1fr)); } }
@media (min-width:1200px) { .seizoenen { grid-template-columns:repeat(4, minmax(0, 1fr)); } .seizoen { min-height:540px; } }

/* voet op de telefoon: label boven de waarde (anders loopt "Mobiel en WhatsApp" over drie regels) */
@media (max-width:759px) { .voet .gegevens { grid-template-columns:minmax(0, 1fr); } .voet .gegevens dd { padding-bottom:12px; } }