/* Zelf gehoste lettertypen (woff2), geen externe verbinding */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/anton.woff2') format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/caveat.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;
  src:url('../fonts/archivo.woff2') format('woff2')}

:root{
  --groen:#009347;
  --groen-donker:#00733a;
  --groen-nacht:#0b3d24;
  --groen-licht:#7ee0a8;
  --blauw:#3f6fd8;
  --lila:#8f7fd4;
  --paars:#a05fb8;
  --roze:#e0559a;
  --inkt:#1a1f1b;
  --grijs:#59615b;
  --canvas:#f7f6f1;
  --wit:#ffffff;
  --veld-diep:#ecebe2;
  --lijn:#e0dfd4;
  --max:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Archivo',system-ui,sans-serif;color:var(--inkt);background:var(--canvas);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* Let op: gebruik in klassen die samen met .wrap op één element staan
   padding-block, geen padding-shorthand. Een shorthand overschrijft de
   zijmarge hierboven, en dan plakt de inhoud op een telefoon tegen de rand. */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:28px}
h1,h2,h3{line-height:1.02;letter-spacing:-.025em}
.fr{font-family:'Caveat',cursive;font-style:normal;font-weight:700;letter-spacing:0;font-size:1.16em;line-height:1;display:inline-block;vertical-align:baseline;padding:0 .04em .16em;white-space:nowrap}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--groen-donker);margin-bottom:18px}
.kicker::before{content:"";width:34px;height:2px;background:var(--groen)}
.accent{color:var(--groen)}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--groen);color:#fff;font-weight:700;font-size:16px;padding:16px 30px;border-radius:999px;transition:background .25s, box-shadow .25s}
.btn .pijl{transition:transform .25s}
.btn:hover{background:var(--groen-donker);box-shadow:0 10px 26px rgba(0,147,71,.35)}
.btn:hover .pijl{transform:translateX(5px)}
.btn.licht{background:#fff;color:var(--inkt)}
.btn.licht:hover{background:var(--veld-diep);box-shadow:none}
.btn.rand{background:transparent;color:var(--inkt);box-shadow:inset 0 0 0 2px var(--inkt)}
.btn.rand:hover{background:var(--inkt);color:#fff}
.pijl{font-size:18px;line-height:1}

/* sectietinten */
.tint-lila{background:linear-gradient(180deg,#f1edf9,#f7f6f1)}
.tint-blauw{background:linear-gradient(180deg,#e9f0fb,#f7f6f1)}
.tint-roze{background:linear-gradient(180deg,#fbeef4,#f7f6f1)}

/* reveal */
/* Zonder JavaScript blijft alles gewoon zichtbaar; alleen met JavaScript
   verschijnt de inhoud al scrollend. */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1)}
.js .rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
@media (prefers-reduced-motion: reduce){.rv,.js .rv{opacity:1;transform:none;transition:none}}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(247,246,241,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--lijn)}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px;gap:24px}
.nav .logo img{height:48px;width:auto}
.nav ul{display:flex;list-style:none;gap:30px;font-weight:600;font-size:16px}
.nav ul a{padding:6px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.nav ul a:hover, .nav ul a.actief{border-color:var(--groen);color:var(--groen-donker)}
.nav .bel{display:inline-flex;align-items:center;background:var(--groen);color:#fff;font-weight:700;padding:11px 22px;border-radius:999px;font-size:15px;white-space:nowrap;transition:background .2s}
.nav .bel:hover{background:var(--groen-donker)}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2.5px;background:var(--inkt);margin:5px 0;border-radius:2px}
.mobielmenu{display:none;background:var(--canvas);border-bottom:1px solid var(--lijn);padding:12px 28px 26px}
.mobielmenu a{display:block;padding:13px 0;font-weight:700;font-size:19px;border-bottom:1px solid var(--lijn)}
.mobielmenu.open{display:block}


/* hero */
.hero2{position:relative;background:linear-gradient(150deg,#e9f0fb 0%,#f7f6f1 52%,#f4edf7 100%);overflow:hidden;border-bottom:1px solid var(--lijn)}
.hero2-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center;padding-block:84px 74px}
.h2-tekst h1{font-size:clamp(42px,5.4vw,76px);font-weight:900;max-width:9.5em}
.h2-tekst h1 .fr{color:var(--groen)}
.h2-tekst p{font-size:clamp(17px,1.8vw,20px);color:var(--grijs);max-width:29em;margin:22px 0 34px}
.h2-tekst .knoppen{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--wit);border:1px solid var(--lijn);color:var(--groen-donker);font-size:13px;font-weight:800;padding:9px 16px;border-radius:999px;margin-top:26px}
.chip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--groen)}
/* Zoek op kleur. Het kopje staat op een eigen regel en de knoppen eronder.
   Naast elkaar paste het maar net: op een scherm van 1280 breed bleef er zeven
   pixels over, en tussen 1024 en 1200 - waar de hero in twee kolommen gaat en
   de tekstkolom smaller wordt - viel "Wit" alleen op een tweede regel. Zo
   staat het altijd goed, ook als er ooit een kleur bij komt. */
.h2-kleur{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;padding-top:26px;border-top:1px solid var(--lijn)}
.h2-kleur .lbl{flex:1 0 100%;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--grijs);margin-bottom:2px}
.kb{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--lijn);background:rgba(255,255,255,.7);cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:700;color:var(--inkt);padding:9px 18px 9px 14px;border-radius:999px;transition:border-color .25s,background .25s,transform .25s}
.kb::before{content:"";width:13px;height:13px;border-radius:50%;background:var(--kc)}
.kb:hover{border-color:var(--kc);background:#fff;transform:translateY(-2px)}
.h2-collage{position:relative;height:540px}
.h2-collage .vlek{position:absolute;border-radius:50%;filter:blur(2px)}
.h2-collage .vlek.v1{width:340px;height:340px;left:6%;top:8%;background:radial-gradient(circle, rgba(63,111,216,.22), transparent 68%)}
.h2-collage .vlek.v2{width:280px;height:280px;right:0;top:38%;background:radial-gradient(circle, rgba(160,95,184,.20), transparent 68%)}
.h2-collage .vlek.v3{width:240px;height:240px;left:30%;bottom:0;background:radial-gradient(circle, rgba(143,127,212,.20), transparent 68%)}
.h2-collage img{position:absolute;cursor:pointer;filter:drop-shadow(0 24px 28px rgba(20,30,22,.22));transition:transform .35s;will-change:transform}
.h2-collage img:hover{transform:scale(1.06)}
.h2-collage .c1{height:300px;left:4%;top:6%;animation:zweef 6.5s ease-in-out infinite}
.h2-collage .c2{height:240px;right:5%;top:28%;animation:zweef 7.5s 1.1s ease-in-out infinite}
.h2-collage .c3{height:210px;left:32%;bottom:2%;animation:zweef 8s 2.2s ease-in-out infinite}
.h2-collage .lbl{position:absolute;transform:translate(-50%,-50%);background:rgba(255,255,255,.94);backdrop-filter:blur(4px);font-weight:800;font-size:13.5px;padding:7px 16px;border-radius:999px;pointer-events:none;box-shadow:0 6px 18px rgba(20,30,22,.16);white-space:nowrap;z-index:2}
.h2-collage .lbl::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--kl);margin-right:8px;vertical-align:1px}
.h2-collage .l1{left:33%;top:53%;--kl:#3f6fd8}
.h2-collage .l2{left:74%;top:52%;--kl:#a05fb8}
.h2-collage .l3{left:52%;top:83%;--kl:#8f7fd4}

/* tekstlint */
.lint{background:var(--canvas);border-block:1px solid var(--lijn);overflow:hidden;padding:22px 0}
.lint .track{display:flex;width:max-content;animation:loop 28s linear infinite}
.lint:hover .track{animation-play-state:paused}
.lint span{font-size:clamp(34px,5vw,64px);font-weight:900;letter-spacing:-.02em;white-space:nowrap;padding-right:28px;color:transparent;-webkit-text-stroke:1.5px #b9c4ba}
.lint span b{-webkit-text-stroke:0;font-weight:900}
.lint span .k1{color:var(--blauw)}.lint span .k2{color:var(--paars)}.lint span .k3{color:var(--roze)}.lint span .k4{color:var(--groen)}.lint span .k5{color:var(--lila)}
.lint span .k2{color:var(--paars)}
.lint .bol{display:inline-block;width:.19em;height:.19em;border-radius:50%;margin:0 .42em;vertical-align:.26em;-webkit-text-stroke:0}
.lint .bol.b1{background:var(--blauw)}.lint .bol.b2{background:var(--paars)}.lint .bol.b3{background:var(--roze)}.lint .bol.b4{background:var(--groen)}.lint .bol.b5{background:var(--lila)}
@keyframes loop{to{transform:translateX(-50%)}}

section{padding:110px 0}
.sec-kop{font-size:clamp(36px,5.2vw,66px);font-weight:900;max-width:13em}
.sec-intro{font-size:19px;color:var(--grijs);max-width:35em;margin-top:20px}

/* featured trio */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:70px}
.blom{text-align:center;cursor:pointer;position:relative}
.blom .schaal{position:relative;padding:10px 0 0}
.blom .schaal::before{content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:270px;height:270px;border-radius:50%;background:radial-gradient(circle, color-mix(in srgb, var(--k) 26%, transparent), transparent 70%);transition:width .4s,height .4s}
.blom:hover .schaal::before{width:310px;height:310px}
.blom img.bloem{position:relative;height:280px;width:auto;margin:0 auto;filter:drop-shadow(0 26px 30px rgba(20,30,22,.22));transition:transform .4s cubic-bezier(.2,.6,.2,1);animation:zweef 6s ease-in-out infinite}
.blom:nth-child(2) img.bloem{animation-delay:1.2s}
.blom:nth-child(3) img.bloem{animation-delay:2.4s}
@keyframes zweef{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1.4deg)}}
.blom:hover img.bloem{transform:scale(1.07);animation-play-state:paused}
.blom .schaduw{width:56%;height:16px;margin:6px auto 0;background:radial-gradient(ellipse, rgba(20,30,22,.18), transparent 70%)}
.blom h3{font-size:34px;font-weight:900;margin-top:18px}
.blom .kleur{color:var(--grijs);font-size:15.5px;margin-top:4px}
.blom .meer{display:inline-block;margin-top:12px;font-weight:800;color:var(--k);border-bottom:2px solid var(--k);padding-bottom:2px}

/* fresh classic switch */
.fcwissel{background:var(--wit);border-radius:36px;padding:70px 60px;margin-top:70px;border:1px solid var(--lijn);box-shadow:0 30px 60px rgba(40,40,80,.06)}
.fc-top{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:50px}
.schakel{display:inline-flex;background:var(--veld-diep);border-radius:999px;padding:5px;gap:4px}
.schakel button{border:none;cursor:pointer;font-family:inherit;font-size:16px;font-weight:800;padding:12px 30px;border-radius:999px;background:transparent;color:var(--grijs);transition:all .3s}
.schakel button.aan{background:var(--groen);color:#fff;box-shadow:0 6px 16px rgba(0,147,71,.3)}
.fc-uitleg{font-size:16px;color:var(--grijs);max-width:30em}
.minigrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.mini{cursor:pointer;border-radius:20px;overflow:hidden;position:relative;aspect-ratio:1/1;background:var(--veld-diep);transition:box-shadow .3s}
.mini:hover{box-shadow:0 18px 36px rgba(30,30,60,.18)}
.mini img{width:100%;height:100%;object-fit:cover;transition:opacity .45s, transform .6s}
.mini:hover img{transform:scale(1.06)}
.mini.wissel img{opacity:0}
.mini .naam{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.94);font-weight:800;font-size:14.5px;padding:7px 14px;border-radius:999px;border-left:5px solid var(--k)}
.mini .bloei{position:absolute;right:12px;top:12px;background:var(--k);color:#fff;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;opacity:0;transition:opacity .3s}
.mini:hover .bloei{opacity:1}

/* maandwijzer */
.mw{margin-top:64px}
.mw-slider{display:flex;align-items:center;gap:22px;margin:44px 0 40px;flex-wrap:wrap}
.mw-slider input[type=range]{flex:1;min-width:260px;appearance:none;-webkit-appearance:none;height:10px;border-radius:6px;background:linear-gradient(90deg,#bcd9f5,#c9bdea,#eec3da,#bfe3c8);outline:none}
.mw-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--groen);border:4px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:grab}
.mw-slider input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--groen);border:4px solid #fff;cursor:grab}
.mw-maandlbl{font-size:15px;font-weight:800;color:var(--grijs);display:flex;justify-content:space-between;margin-top:8px}
.mw-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.mwi{background:var(--wit);border:1px solid var(--lijn);border-radius:18px;padding:12px 12px 14px;text-align:center;cursor:pointer;transition:all .35s}
.mwi img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;transition:filter .35s}
.mwi b{display:block;font-size:14.5px;margin-top:10px}
.mwi small{display:block;font-size:11.5px;font-weight:700;margin-top:3px;color:var(--groen-donker)}
.mwi.uit{opacity:.38}
.mwi.uit img{filter:grayscale(1)}
.mwi.uit small{color:var(--grijs)}
.mwi:not(.uit):hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(30,30,60,.14)}

/* statement */
.statement{background:linear-gradient(115deg,#0b3d24 0%,#1c3a5e 55%,#4a2a66 100%);color:#fff;padding:130px 0;position:relative;overflow:hidden}
.statement .deco{position:absolute;right:-90px;top:50%;transform:translateY(-50%);height:440px;opacity:.2;pointer-events:none;animation:zweef 8s ease-in-out infinite}
.statement h2{font-size:clamp(40px,6.4vw,84px);font-weight:900;max-width:12em;position:relative}
.statement .fr{background:linear-gradient(100deg,#7ee0a8,#a8c8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.statement p{margin:26px 0 38px;color:#cdd9e6;font-size:19px;max-width:30em;position:relative}

/* fotomarquee */
.fmq{padding:110px 0 60px}
.fmq-band{margin-top:40px}
/* De fotoband was een lopende animatie van 46 seconden. Dat is te traag om
   te volgen en je kunt er niets aan sturen. Het is nu een gewone schuifstrook
   met dezelfde bediening als bij "Andere soorten": pijlen, een pauzeknop, en
   hij schuift uit zichzelf door tot je hem aanraakt. */
.fmq .track{display:flex;gap:26px;padding-bottom:10px;overflow-x:auto;
  scroll-snap-type:x proximity;scroll-behavior:smooth}
.fmq .track > *{scroll-snap-align:start;flex:none}
.fmq .track:focus-visible{outline:3px solid var(--groen-donker);outline-offset:3px;border-radius:20px}
.ffoto{flex:none;width:300px;cursor:zoom-in}
.ffoto img{width:300px;height:400px;object-fit:cover;border-radius:22px;transition:transform .4s}
.ffoto:hover img{transform:scale(1.03)}
.ffoto figcaption{font-size:14.5px;font-weight:600;color:var(--grijs);margin-top:12px;padding-left:4px}

/* stats */
.stats{background:var(--wit);border-block:1px solid var(--lijn);padding:74px 0}
.stats .rijtje{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.stat b{display:block;font-size:clamp(40px,5vw,64px);font-weight:900;line-height:1}
.stat:nth-child(1) b{color:var(--groen)}
.stat:nth-child(2) b{color:var(--blauw)}
.stat:nth-child(3) b{color:var(--paars)}
.stat:nth-child(4) b{color:var(--roze)}
.stat span{display:block;margin-top:10px;font-weight:600;color:var(--grijs);font-size:15.5px}

/* duo */
.duo{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center}
.duo .foto{border-radius:28px;overflow:hidden}
.duo .foto img{width:100%;height:540px;object-fit:cover;transition:transform 1.2s ease}
.duo .foto:hover img{transform:scale(1.05)}
.mps{display:flex;align-items:center;gap:14px;margin-top:30px;background:var(--wit);border:1px solid var(--lijn);border-radius:18px;padding:16px 20px;max-width:430px}
.mps .badge{flex:none;width:54px;height:54px;border-radius:50%;background:var(--groen);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px}
.mps p{font-size:14px;color:var(--grijs);line-height:1.45}

/* hangplanten kaarten */
.hp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:60px}
.hpk{border-radius:22px;overflow:hidden;position:relative;aspect-ratio:3/4;cursor:zoom-in}
.hpk img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.hpk:hover img{transform:scale(1.07)}
.hpk .naam{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background:linear-gradient(to top, rgba(6,18,11,.72), transparent);color:#fff;font-weight:800;font-size:18px}
.hpk .naam small{display:block;font-weight:500;font-size:12.5px;color:#d6e6da}

/* contact */
.contactblok{background:linear-gradient(120deg,var(--groen),#00875e);color:#fff;border-radius:36px;overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr}
.contactblok .tekst{padding:70px 60px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.contactblok h2,.contactblok .ctitel{font-size:clamp(32px,4.4vw,52px);font-weight:900;max-width:11em}
.contactblok h2 .fr{color:#bff1d3}
.contactblok p{margin:18px 0 32px;color:#dff2e6;max-width:26em}
.contactblok .regel{font-size:clamp(20px,2.6vw,30px);font-weight:900;display:block;margin-bottom:12px;color:#fff;border-bottom:3px solid rgba(255,255,255,.35);padding-bottom:4px;transition:border-color .2s}
.contactblok .regel:hover{border-color:#fff}
.contactblok .foto img{width:100%;height:100%;object-fit:cover;min-height:400px}

/* footer */
footer{position:relative;background:var(--groen-nacht);color:#a9c2b3;padding:0 0 30px;font-size:15px;overflow:hidden}
footer::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 380px at 88% 12%, rgba(126,224,168,.10), transparent 70%);pointer-events:none}
footer .wrap{position:relative;z-index:1}
.f-band{padding:44px 0 34px;border-bottom:1px solid #1c5436;overflow:hidden}
.f-band span{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(30px,6.2vw,86px);line-height:1;letter-spacing:.006em;color:transparent;-webkit-text-stroke:1.4px rgba(169,194,179,.42);white-space:nowrap}
.f-top{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;flex-wrap:wrap;padding:46px 0 44px;border-bottom:1px solid #1c5436}
.f-merk{max-width:32em}
footer img.flogo{height:58px;width:auto;margin-bottom:18px}
.f-merk p{color:#a9c2b3;font-size:16px}
.f-contact{display:flex;flex-direction:column;align-items:flex-start}
.f-lbl{font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#7fa38c;margin-bottom:10px}
.f-regel{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(28px,3.4vw,44px);color:#fff;line-height:1.1;letter-spacing:.01em;border-bottom:2px solid transparent;transition:border-color .25s,color .25s}
.f-regel:hover{border-color:var(--groen-licht);color:var(--groen-licht)}
.f-regel.klein{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(15px,1.5vw,19px);margin-top:10px;color:#a9c2b3}
.f-kol{display:grid;grid-template-columns:1fr 1fr 1.1fr 1.5fr;gap:44px;padding:46px 0}
footer h4,footer .f-kol h2{color:#fff;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px;font-family:'Archivo',sans-serif;font-weight:800;line-height:1.3}
footer li{list-style:none;margin-bottom:10px;line-height:1.5}
footer a{transition:color .2s}
footer a:hover{color:#fff}
.f-soort{display:inline-flex;align-items:center}
.f-keur-rij{display:flex;gap:18px;align-items:flex-start}
/* Het MPS-vignet is een groen beeldmerk en komt op de donkere voet niet uit.
   Daarom staat het op een eigen witte tegel, zoals MPS het ook voorschrijft. */
.f-vignet{height:96px;width:auto;flex:none;background:#fff;border-radius:12px;padding:8px}
.f-certs{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.f-certs li{display:block}
.f-certs b{display:block;color:#fff;font-size:15px;line-height:1.25}
.f-certs span{display:block;font-size:13px;letter-spacing:.02em;color:#9fbfab}
.onder{border-top:1px solid #1c5436;padding-top:24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:#7fa38c}
.onder .omhoog{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.onder .omhoog b{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1px solid #2c6b48;transition:background .25s,border-color .25s}
.onder .omhoog:hover b{background:var(--groen);border-color:var(--groen);color:#fff}

/* partners onder de verzorgingstips */
.partners{margin-top:74px;background:var(--wit);border:1px solid var(--lijn);border-radius:32px;padding:52px 48px}
.partners h3{font-size:clamp(24px,3vw,34px);font-weight:900}
.partners p{color:var(--grijs);margin-top:12px;max-width:38em}
.p-rij{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px}
.p-kaart{display:flex;align-items:center;gap:20px;border:1px solid var(--lijn);border-radius:22px;padding:20px 24px;transition:transform .25s,box-shadow .25s,border-color .25s}
.p-kaart:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(30,30,60,.12);border-color:var(--groen)}
.p-kaart img{height:64px;width:auto;flex:none}
.p-kaart b{display:block;font-size:17px}
.p-kaart span{font-size:14.5px;color:var(--grijs)}

/* assortiment */
/* De schakelaar staat rechts, in het midden van het kopblok (tussen de
   bovenkant van de kop en de onderkant van de intro), tegen de rechterrand
   van de tekstkolom. */
.gridkop{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
/* Breekt de kop af, dan zakt de schakelaar naar een eigen regel en stond hij
   links. Met margin-left:auto blijft hij rechts, op welke regel hij ook staat. */
.gridkop .schakel{margin-left:auto}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.chips button{border:1.5px solid var(--lijn);background:var(--wit);cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:800;padding:10px 22px;border-radius:999px;color:var(--grijs);transition:all .25s;display:inline-flex;align-items:center;gap:8px}
.chips button .bol{width:12px;height:12px;border-radius:50%;background:var(--kc, var(--grijs))}
.chips button:hover{border-color:var(--kc, var(--inkt));color:var(--inkt)}
.chips button.aan{background:var(--inkt);color:#fff;border-color:var(--inkt)}
.fotogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
.fkaart{border-radius:24px;overflow:hidden;position:relative;aspect-ratio:3/3.4;cursor:pointer;background:var(--veld-diep);transition:opacity .4s, transform .4s, box-shadow .3s;will-change:transform}
.fkaart:hover{box-shadow:0 22px 44px rgba(30,30,60,.2)}
.fkaart.weg{opacity:0;transform:scale(.92);pointer-events:none}
.fkaart img{width:100%;height:100%;object-fit:cover;transition:transform .7s, opacity .4s}
.fkaart:hover img{transform:scale(1.07)}
.fkaart.wissel img{opacity:0}
.fkaart .schild{position:absolute;left:0;right:0;bottom:0;padding:56px 20px 18px;background:linear-gradient(to top, color-mix(in srgb, var(--k) 55%, rgba(6,18,11,.85)), transparent);color:#fff}
.fkaart .schild b{font-size:22px;font-weight:900;display:block}
.fkaart .schild small{font-size:13px;color:#eef3ee;font-weight:500}
.fkaart .nieuwtag{position:absolute;left:14px;top:14px;background:var(--k);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;z-index:2}

/* soortpagina */
.kruimel{padding-block:30px 0;font-size:14.5px;color:var(--grijs)}
.kruimel a{color:var(--groen-donker);font-weight:700}
.soort-hero{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding-block:50px 90px}
.soort-hero .beeld{background:color-mix(in srgb, var(--k) 10%, #ffffff);border:1px solid color-mix(in srgb, var(--k) 22%, #ffffff);border-radius:36px;padding:52px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.soort-hero .beeld::before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle, color-mix(in srgb, var(--k) 22%, transparent), transparent 70%)}
.soort-hero .beeld img{max-height:430px;width:auto;position:relative;animation:zweef 7s ease-in-out infinite}
.soort-hero .beeld img.vierkant{width:100%;max-height:none;aspect-ratio:1/1;object-fit:cover;border-radius:24px;animation:none}
.soort-hero h1{font-size:clamp(52px,7.5vw,96px);font-weight:900}
.soort-hero h1 .stip{display:inline-block;width:.35em;height:.35em;border-radius:50%;background:var(--k);margin-left:.12em}
.soort-hero .sub{font-size:20px;color:var(--grijs);margin:14px 0 30px}
.spec{display:flex;gap:38px;flex-wrap:wrap;margin-bottom:34px}
.spec div b{display:block;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grijs);font-weight:800;margin-bottom:4px}
.spec div span{font-size:18px;font-weight:700}
.kalender{margin:10px 0 26px}
.kalender .rij{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.kalender .lbl{flex:none;width:78px;font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.kalender .lbl small{display:block;font-weight:500;letter-spacing:0;text-transform:none;color:var(--grijs)}
.maanden{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;flex:1}
.maanden i{height:28px;border-radius:7px;background:var(--veld-diep);font-style:normal;font-size:9.5px;display:flex;align-items:center;justify-content:center;color:#9aa39c;font-weight:700}
.maanden i.aan{background:var(--k);color:#fff}
.kalnoot{font-size:13px;color:var(--grijs)}

/* vergelijkschuif */
.vgl{position:relative;border-radius:26px;overflow:hidden;height:480px;user-select:none}
.vgl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.vgl img.boven{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.vgl .streep{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:4px;background:#fff;box-shadow:0 0 14px rgba(0,0,0,.4);transform:translateX(-50%)}
.vgl .greep{position:absolute;top:50%;left:var(--pos,50%);transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--inkt);font-size:17px;letter-spacing:-1px;cursor:ew-resize}
.vgl .lab{position:absolute;bottom:16px;background:rgba(255,255,255,.94);font-weight:800;font-size:14px;padding:8px 16px;border-radius:999px}
.vgl .lab.l{left:16px}
.vgl .lab.r{right:16px}
.vgl input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.vgl-hint{text-align:center;font-size:14px;color:var(--grijs);margin-top:14px}

.fcduo{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.fcduo figure{border-radius:24px;overflow:hidden;position:relative;cursor:zoom-in}
.fcduo img{width:100%;height:380px;object-fit:cover;transition:transform .7s}
.fcduo figure:hover img{transform:scale(1.05)}
.fcduo figcaption{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.92);font-weight:800;font-size:14px;padding:8px 16px;border-radius:999px}
.sfeer{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sfeer img{border-radius:22px;width:100%;height:340px;object-fit:cover;transition:transform .7s;cursor:zoom-in}
.sfeer img:hover{transform:scale(1.03)}
.schuif{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-block:44px 16px;-webkit-overflow-scrolling:touch}
.schuif::-webkit-scrollbar{height:8px}
.schuif::-webkit-scrollbar-thumb{background:var(--lijn);border-radius:4px}
.schuif .fkaart{flex:none;width:240px;scroll-snap-align:start}

/* verzorging */
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px}
.stap{background:var(--wit);border:1px solid var(--lijn);border-radius:24px;padding:34px 28px;position:relative;transition:transform .3s, box-shadow .3s}
.stap:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(30,30,60,.12)}
.stap .nr{position:absolute;top:24px;right:26px;font-family:'Fraunces',serif;font-style:italic;font-size:44px;font-weight:600;color:var(--veld-diep)}
.stap .ico{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;background:color-mix(in srgb, var(--k) 14%, #ffffff)}
.stap .ico svg{width:32px;height:32px;stroke:var(--k);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stap h3{font-size:21px;font-weight:900;margin-bottom:8px}
.stap p{font-size:15.5px;color:var(--grijs);line-height:1.55}
.tips-rij{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:50px}
.tip{display:flex;gap:18px;align-items:flex-start;background:var(--wit);border:1px solid var(--lijn);border-radius:20px;padding:22px 24px}
.tip .ico{flex:none;width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--k) 14%, #ffffff)}
.tip .ico svg{width:26px;height:26px;stroke:var(--k);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tip p{font-size:15.5px;color:var(--grijs);line-height:1.55}
.tip b{color:var(--inkt)}
.droog{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:32px;overflow:hidden;margin-top:70px;background:var(--groen-nacht);color:#fff}
.droog .tekst{padding:60px 54px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.droog h3{font-size:clamp(26px,3.2vw,38px);font-weight:900}
.droog h3 .fr{color:var(--groen-licht)}
.droog p{margin-top:16px;color:#c9d8ce;font-size:16.5px}
.droog img{width:100%;height:100%;object-fit:cover;min-height:340px}

/* footer extra's */
.f-partners{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.f-partner{background:#fff;border-radius:16px;padding:12px 18px;display:flex;align-items:center;transition:transform .25s}
.f-partner:hover{transform:translateY(-4px)}
.f-partner img{height:52px;width:auto}
.f-mps{height:110px;width:auto;margin-top:22px}

/* --- typografie afgestemd op het logo --- */
h1,h2,h3,
.sec-kop,.h2-tekst h1,.soort-hero h1,.statement h2,.contactblok h2,
.blom h3,.fc h3,.stap h3,.droog h3,.kaart h3,
.stat b,.fkaart .schild b,.lint span{
  font-family:'Anton',Impact,sans-serif;font-weight:400;letter-spacing:.006em;
}
h1,h2,h3{line-height:1.06}
.sec-kop{line-height:1.06}
.h2-tekst h1{line-height:1.04}
.stat b{letter-spacing:0}
.kicker{font-family:'Archivo',sans-serif}
.hpk .naam,.mini .naam{font-family:'Archivo',sans-serif;font-weight:800}

/* lightbox */
#lb{position:fixed;inset:0;background:rgba(10,14,11,.9);z-index:100;display:none;align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
#lb.open{display:flex}
#lb img{max-width:92vw;max-height:88vh;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
#lb .sluit{position:absolute;top:22px;right:28px;color:#fff;font-size:34px;font-weight:300;cursor:pointer;line-height:1}

@media (max-width: 980px){
  .nav ul, .nav .bel{display:none}
  .burger{display:block}
  section{padding:70px 0}
  .hero2-grid{grid-template-columns:1fr;gap:10px;padding-block:54px 40px}
  .h2-kleur{margin-top:26px;padding-top:20px}
  .h2-collage{height:400px;transform:scale(.82);transform-origin:top center;margin-top:-10px}
  .trio{grid-template-columns:1fr;gap:56px}
  .fcwissel{padding:40px 24px;border-radius:26px}
  .minigrid{grid-template-columns:repeat(2,1fr)}
  .mw-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .fotogrid{grid-template-columns:repeat(2,1fr);gap:16px}
  .duo{grid-template-columns:1fr;gap:36px}
  .duo .foto img{height:340px}
  .hp-grid{grid-template-columns:repeat(2,1fr)}
  .contactblok{grid-template-columns:1fr}
  .contactblok .tekst{padding:46px 28px}
  .f-kol{grid-template-columns:1fr;gap:32px;padding:36px 0 30px}
  .f-top{flex-direction:column;align-items:flex-start;gap:30px;padding:34px 0}
  .f-band{padding:30px 0 24px}
  .onder{justify-content:flex-start;gap:12px}
  .onder .mid{display:none}
  .p-rij{grid-template-columns:1fr}
  .partners{padding:34px 24px;border-radius:24px}
  .soort-hero{grid-template-columns:1fr;gap:36px;padding-block:34px 60px}
  .soort-hero .beeld{padding:30px}
  .soort-hero .beeld img{max-height:300px}
  .vgl{height:340px}
  .fcduo{grid-template-columns:1fr}
  .fcduo img{height:300px}
  .sfeer{grid-template-columns:1fr}
  .sfeer img{height:260px}
  .statement .deco{display:none}
  .stats .rijtje{grid-template-columns:repeat(2,1fr);gap:36px}
  .stappen{grid-template-columns:1fr}
  .tips-rij{grid-template-columns:1fr}
  .droog{grid-template-columns:1fr}
  .droog .tekst{padding:40px 28px}
  .ffoto{width:230px}
  .ffoto img{width:230px;height:310px}
}

/* ============================================================
   Aanvullingen voor productie.
   Het prototype was één bestand met JavaScript-weergaven;
   hieronder staat wat de echte pagina's extra nodig hebben.
   ============================================================ */

/* <picture> mag geen eigen vak maken, anders verschuift de opmaak
   die in het ontwerp op de <img> zelf staat. */
picture{display:contents}

/* Naar de inhoud springen, zichtbaar zodra hij focus krijgt */
.overslaan{position:absolute;left:-9999px;top:0;z-index:200;background:var(--groen);color:#fff;
  font-weight:700;padding:14px 22px;border-radius:0 0 12px 0}
.overslaan:focus{left:0}

/* Alleen voor schermlezers */
.visueel-verborgen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Zichtbare focus op alles wat bediend kan worden */
a:focus-visible,button:focus-visible,input:focus-visible,
[tabindex]:focus-visible,summary:focus-visible{
  outline:3px solid var(--groen-donker);outline-offset:3px;border-radius:4px}
.statement a:focus-visible,.droog a:focus-visible,.contactblok a:focus-visible,
footer a:focus-visible,.f-regel:focus-visible{outline-color:#fff}

/* Kaarten en blokken die in het ontwerp een <div> waren, zijn nu links */
a.fkaart,a.blom,a.mini,a.mwi,a.hpk{display:block;color:inherit;text-decoration:none}
a.blom{text-align:center}
.blom .schaal{display:block}
.blom .schaduw{display:block}
.blom .kleur{display:block}
figure.hpk{margin:0}

/* Fresh en Classic over elkaar, zodat de wissel niet hapert */
.fkaart,.mini{position:relative}
.beeld{position:absolute;inset:0;display:block;overflow:hidden}
.beeld img{width:100%;height:100%;object-fit:cover}
.beeld.lijn-fresh,.beeld.lijn-classic{transition:opacity .45s ease}
.beeld.lijn-classic{opacity:0}
.toon-classic .beeld.lijn-classic{opacity:1}
.toon-classic .fkaart[data-classic] .beeld.lijn-fresh,
.toon-classic .mini .beeld.lijn-fresh{opacity:0}

/* Het bloeilabel wisselt mee */
.bloei.lijn-classic{display:none}
.toon-classic .bloei.lijn-classic{display:block}
.toon-classic .bloei.lijn-fresh{display:none}

/* Kaarten houden hun schild boven het beeld */
.fkaart .schild,.fkaart .nieuwtag,.mini .naam,.mini .bloei{z-index:2}
.fkaart .schild b,.fkaart .schild small{display:block}

/* Foto's die vergroot kunnen worden, zijn knoppen */
.foto-knop{display:block;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:zoom-in}
.sfeer .foto-knop{border-radius:22px;overflow:hidden}
.sfeer .foto-knop img{border-radius:22px;width:100%;height:340px;object-fit:cover;transition:transform .7s}
.sfeer .foto-knop:hover img{transform:scale(1.03)}
.fcduo .foto-knop{border-radius:24px;overflow:hidden}
.ffoto .foto-knop{border-radius:22px;overflow:hidden}

/* Verzorging: de stappen zijn een genummerde lijst geworden */
.stappen{list-style:none;counter-reset:none;padding:0}
.stap .ico{display:flex}
.stap h2{font-size:21px;font-weight:900;margin-bottom:8px;font-family:'Anton',Impact,sans-serif;
  font-weight:400;letter-spacing:.006em;line-height:1.06}
.droog h2{font-size:clamp(26px,3.2vw,38px);font-family:'Anton',Impact,sans-serif;font-weight:400;
  letter-spacing:.006em;line-height:1.06}
.droog h2 .fr{color:var(--groen-licht)}
.partners h2{font-size:clamp(24px,3vw,34px);font-family:'Anton',Impact,sans-serif;font-weight:400;
  letter-spacing:.006em;line-height:1.06}
.tip .ico{display:flex}

/* Over de kwekerij: de brede band */
.volle-band{height:60vh;min-height:320px;background-size:cover;background-position:center;
  background-attachment:fixed}
@media (max-width:980px){.volle-band{background-attachment:scroll;height:40vh}}

/* Contact: kaart */
.kaartblok{margin-top:28px;border-radius:26px;overflow:hidden;border:1px solid var(--lijn);
  background:var(--wit);line-height:0}
.kaartblok iframe{width:100%;height:380px;border:0}
.kaartnoot{margin-top:14px;font-size:15px}
.kaartnoot a{color:var(--groen-donker);font-weight:700;border-bottom:2px solid transparent}
.kaartnoot a:hover{border-color:var(--groen)}

/* Assortiment: melding als een filter niets oplevert */
.geen-treffers{margin-top:30px;font-size:17px;color:var(--grijs)}
.tekstknop{background:none;border:0;padding:0;font:inherit;color:var(--groen-donker);
  font-weight:800;cursor:pointer;border-bottom:2px solid var(--groen)}

/* Losse tekst die vanuit het beheer komt */
.paginatekst p,.soort-tekst p{margin-bottom:1em;color:var(--grijs);font-size:17px}
.paginatekst h2,.soort-tekst h2{font-size:clamp(24px,3vw,34px);margin:1.2em 0 .4em}
.paginatekst ul,.soort-tekst ul{margin:0 0 1em 1.2em;color:var(--grijs)}
.paginatekst a,.soort-tekst a{color:var(--groen-donker);font-weight:700;text-decoration:underline}
.soort-tekst{max-width:35em}

/* Namenlint: de bollen krijgen hun kleur uit de soort */
.lint span b{color:inherit}
.lint .bol{background:var(--groen)}

/* Lichtbak */
#lb[hidden]{display:none}
#lb .sluit{background:none;border:0;font-family:inherit}
#lb figcaption,#lb .bijschrift{position:absolute;bottom:26px;left:0;right:0;text-align:center;
  color:#fff;font-size:15px;font-weight:600;padding:0 30px}

/* Menuknop */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.burger span{transition:transform .25s,opacity .25s}

/* Huidige pagina in het menu, ook als WordPress zijn eigen klassen zet */
.nav ul .current-menu-item > a,
.nav ul .current_page_item > a{border-color:var(--groen);color:var(--groen-donker)}

/* WordPress-menu's houden hun opsomming binnen de bestaande opmaak */
.nav ul{margin:0;padding:0}
footer .f-kol ul{margin:0;padding:0}

/* Rustige weergave: alles wat vanzelf beweegt staat stil */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .lint .track{animation:none !important;transform:none !important}
  .fmq .track{scroll-behavior:auto}
  .h2-collage img,.blom img.bloem,.soort-hero .beeld img,.statement .deco{animation:none !important}
  .volle-band{background-attachment:scroll}
}

/* Collage: de plaatsing staat nu op de link, de foto vult die op */
.h2-collage a{position:absolute;display:block;
  filter:drop-shadow(0 24px 28px rgba(20,30,22,.22));transition:transform .35s;will-change:transform}
.h2-collage a:hover{transform:scale(1.06)}
.h2-collage a img{position:static;height:100%;width:auto;display:block;filter:none}

/* Het lint staat stil zodra iets erin focus krijgt, zodat een
   toetsenbordgebruiker er niet achteraan hoeft. De fotoband regelt dat
   inmiddels zelf, met een pauzeknop. */
.lint:focus-within .track{animation-play-state:paused}

/* De width- en height-attributen op elke <img> voorkomen verspringen tijdens
   het laden, maar zetten ook een vaste hoogte. Waar de opmaak de maat bepaalt
   moet de hoogte weer meebewegen; regels met een eigen hoogte gaan hier voor. */
img{height:auto}
.statement .deco{width:auto}

/* Op een aanraakscherm moet elk raakvlak minstens 24 bij 24 pixels zijn
   (WCAG 2.2). De links in de voet zaten daar net onder. */
@media (max-width: 980px){
  footer li a,
  .f-regel.klein,
  .kruimel a,
  .kaartnoot a{display:inline-block;padding:8px 0}
  footer li{margin-bottom:6px}
  .onder a{display:inline-block;padding:6px 0}
}

/* De maandschuif blijft optisch een dun balkje, maar krijgt op een
   aanraakscherm een aanraakvlak van 24 pixels hoog. */
@media (max-width: 980px){
  .mw-slider input[type=range]{height:24px;padding:7px 0;background-clip:content-box}
}

/* ============================================================
   Contrast op AA-niveau

   Het logogroen #009347 geeft met witte tekst 3,99:1 en dat is te
   weinig (AA vraagt 4,5:1). Voor vlakken met witte tekst gebruiken we
   daarom het donkerdere groen uit de huisstijl, #00733a: 5,98:1.
   Het logogroen blijft in gebruik voor accenten zonder tekst:
   streepjes, bolletjes, randen en de schuifknop.

   De soortkleuren zijn licht (Albatros #9CB77E geeft met wit 2,2:1).
   Labels op een soortkleur krijgen daarom die kleur gemengd met een
   donkere basis. De tint blijft herkenbaar, de tekst wordt leesbaar.
   ============================================================ */
:root{
  --groen-vlak:#00733a;   /* groen vlak met witte tekst erop */
  --groen-diep:#005c2e;   /* zelfde vlak, bij hover */
}

.btn{background:var(--groen-vlak)}
.btn:hover{background:var(--groen-diep);box-shadow:0 10px 26px rgba(0,115,58,.35)}
.nav .bel{background:var(--groen-vlak)}
.nav .bel:hover{background:var(--groen-diep)}
.overslaan{background:var(--groen-vlak)}
.schakel button.aan{background:var(--groen-vlak);box-shadow:0 6px 16px rgba(0,115,58,.3)}
.mps .badge{background:var(--groen-vlak)}
.tekstknop{color:var(--groen-vlak)}

/* Het contactblok: het lichte groen aan het eind van het verloop haalde
   met de lichte tekst 3,89:1. */
.contactblok{background:linear-gradient(120deg,#00733a,#00674a)}

/* Labels op een soortkleur */
.mini .bloei,
.fkaart .nieuwtag,
.maanden i.aan{background:color-mix(in srgb, var(--k) 55%, #10241a)}

/* Een soortkleur als tekst op het lichte canvas */
.blom .meer{color:color-mix(in srgb, var(--k) 70%, #10241a)}

/* De gevulde namen in het lint stonden in de lichte soortkleur op een licht
   canvas; Albatros haalde 2,0:1. Zelfde mengsel als bij de labels. */
.lint span b{color:color-mix(in srgb, var(--k) 70%, #10241a)}

/* Kleurwissel op een soortpagina die er in twee kleuren is */
.kleurwissel{display:inline-flex;gap:8px;margin:6px 0 14px;flex-wrap:wrap}
.kleurwissel button{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--lijn);
  background:var(--wit);cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:700;
  color:var(--grijs);padding:9px 18px 9px 14px;border-radius:999px;
  transition:border-color .25s,color .25s,background .25s}
.kleurwissel button .bol{width:13px;height:13px;border-radius:50%;background:var(--kc);flex:none}
.kleurwissel button:hover{border-color:var(--kc);color:var(--inkt)}
.kleurwissel button.aan{border-color:var(--kc);color:var(--inkt);
  box-shadow:inset 0 0 0 1px var(--kc)}

/* Het accent van de soortpagina volgt de gekozen kleur. De twee kleuren
   komen inline mee als --k-a en --k-b; hier bepalen we welke geldt. */
.soort-hero{--k:var(--k-a)}
.soort-hero.kleur-b-aan{--k:var(--k-b)}

/* ============================================================
   Het bord aan de weg

   Op het bord bij de kwekerij is blauw-wit het veld en groen de
   letter: een collage van blauwe en witte hortensia met "BEN BOERS"
   er in het groen overheen. Die verhouding trekken we door de site.
   De vlakken worden blauw-wit, het groen blijft voor tekst en knoppen.

   Gemeten op het bord: bloemblauw #7790c1, pijlblauw #4061ad.
   ============================================================ */
:root{
  --bord-blauw:#4061ad;        /* de pijl op het bord */
  --bord-bloem:#7790c1;        /* de blauwe hortensia op het bord */
  --lucht:#eef3f9;             /* blauw-wit vlak */
  --lucht-diep:#dde8f5;        /* iets dieper, voor verlopen */
  --lucht-rand:#d3e0ee;
}

/* Een blauw-wit vlak, het tegenwicht voor het warme canvas */
.tint-lucht{background:linear-gradient(180deg,var(--lucht),var(--canvas))}

/* De bestaande sectietinten koelen mee op, dichter bij het bord */
.tint-blauw{background:linear-gradient(180deg,var(--lucht-diep),var(--canvas))}
.tint-lila{background:linear-gradient(180deg,#eceef8,var(--canvas))}
.tint-roze{background:linear-gradient(180deg,#f6eef4,var(--canvas))}

/* De kop krijgt de lucht van het bord: blauw-wit met een zweem lila */
.hero2{background:linear-gradient(150deg,var(--lucht-diep) 0%,var(--lucht) 38%,#f6f7f4 72%,#f2eef7 100%)}

/* Het namenlint staat op een blauw-wit vlak in plaats van op het canvas */
.lint{background:linear-gradient(180deg,var(--lucht),var(--lucht) 60%,var(--canvas));
  border-block-color:var(--lucht-rand)}

/* De cijferbalk ook, dat geeft ritme met de vlakken eromheen */
.stats{background:var(--lucht);border-block-color:var(--lucht-rand)}

/* Kaarten en witte vlakken op een blauw-witte ondergrond hebben een
   koelere lijn nodig, anders vallen ze eruit */
.tint-lucht .fkaart,.tint-blauw .fkaart{background:var(--lucht-diep)}
.fcwissel{border-color:var(--lucht-rand)}

/* Het statement leunt nu op het blauw van het bord in plaats van paars */
.statement{background:linear-gradient(115deg,var(--groen-nacht) 0%,#1b3f6e 48%,#3b3f80 100%)}

/* De bolletjes tussen de namen en in de voet volgen het bord */
.lint .bol{background:var(--bord-bloem)}

/* De schuifbalk van de maandwijzer: van blauw naar groen, als het bord */
.mw-slider input[type=range]{background:linear-gradient(90deg,var(--bord-bloem),#c9bdea,#eec3da,#bfe3c8)}

/* ============================================================
   De bloemenstal
   ============================================================ */
.stal-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.stal-beeld{border-radius:28px;overflow:hidden;box-shadow:0 30px 60px rgba(30,40,70,.14)}
.stal-beeld img{width:100%;height:620px;object-fit:cover}
.stal-punten{display:flex;flex-direction:column;gap:16px;margin-top:34px}
.stal-punt{display:flex;gap:16px;align-items:flex-start;background:var(--wit);
  border:1px solid var(--lucht-rand);border-radius:18px;padding:18px 20px}
.stal-punt .ico{flex:none;width:44px;height:44px;border-radius:13px;display:flex;
  align-items:center;justify-content:center;background:var(--lucht)}
.stal-punt .ico svg{width:24px;height:24px;stroke:var(--bord-blauw);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stal-punt p{font-size:15.5px;color:var(--grijs);line-height:1.55}
.stal-punt b{color:var(--inkt)}
.stal-noot{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  background:var(--groen-nacht);color:#c9d8ce;border-radius:28px;padding:40px 44px}
.stal-noot p{max-width:34em;font-size:16.5px}
.stal-noot b{color:#fff}

@media (max-width: 980px){
  .stal-hero{grid-template-columns:1fr;gap:34px}
  .stal-beeld img{height:420px}
  .stal-noot{padding:30px 26px}
}

/* Het aantal kolommen in het Fresh/Classic-blok volgt het aantal soorten,
   zodat er geen gat overblijft als het assortiment verandert. */
.minigrid{grid-template-columns:repeat(var(--kolommen,4),1fr)}
@media (max-width: 980px){
  .minigrid{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   Het bord, tweede ronde

   De eerste poging bleef te licht: waslagen van vier procent, terwijl
   het bord juist verzadigd is. Gemeten op het bord zelf:

     bloemveld   #7a93c1   tint 219 graden, L 0.62, S 0.36
     pijl        #3659aa
     letters     #528b73   salie, verloop van #6f9e8a naar #367c63

   Het groen op het bord is dezelfde tint als het logogroen (150 graden)
   maar veel doffer; dat is verweerde druk, geen tweede huisstijlkleur.
   Het logogroen blijft dus zoals het is. Wat wel overgenomen wordt is
   het principe van het bord: type over een bloemenveld.

   Het veld in assets/img/bloemenveld.jpg komt uit de eigen fotografie
   (Pompidou, gebost) en is bijgesteld tot #8090c2: tint 225 graden,
   L 0.63, S 0.35. Dat is het bord.
   ============================================================ */
:root{
  --lucht:#e3ecf7;
  --lucht-diep:#cfdff2;
  --lucht-rand:#c4d6ec;
  --bord-veld:#8090c2;
}

/* Het namenlint is nu het bord: soortnamen over het bloemenveld */
.lint{
  position:relative;
  background:#8090c2 url('../img/bloemenveld.jpg') center/cover;
  border-block:1px solid rgba(255,255,255,.35);
  padding:30px 0;
}
.lint::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(16,30,64,.22), rgba(16,30,64,.10) 45%, rgba(16,30,64,.24));
  pointer-events:none;
}
.lint .track{position:relative;z-index:1}
.lint span{
  color:transparent;
  -webkit-text-stroke:1.6px rgba(255,255,255,.85);
  text-shadow:0 2px 10px rgba(12,24,54,.30);
}
.lint span b{
  -webkit-text-stroke:0;
  color:#fff;
  text-shadow:0 2px 12px rgba(12,24,54,.38);
}
.lint .bol{background:#fff;opacity:.9;-webkit-text-stroke:0}

/* De vlakken mogen gezien worden */
.tint-lucht{background:linear-gradient(180deg,var(--lucht-diep),var(--lucht))}
.tint-blauw{background:linear-gradient(180deg,var(--lucht-diep),var(--lucht) 70%,var(--canvas))}

/* De kop opent nu in de lucht van het bord */
.hero2{background:linear-gradient(150deg,var(--lucht-diep) 0%,var(--lucht) 46%,#eef1f4 76%,#efeaf6 100%)}

/* De cijferbalk pakt het diepe blauw van de pijl op */
.stats{background:var(--lucht);border-block-color:var(--lucht-rand)}

/* Het streepje voor een kicker: het pijlblauw van het bord */
.kicker::before{background:var(--bord-blauw)}

/* De knop van de maandschuif ook */
.mw-slider input[type=range]::-webkit-slider-thumb{background:var(--bord-blauw)}
.mw-slider input[type=range]::-moz-range-thumb{background:var(--bord-blauw)}

/* De cijferbalk staat nu op blauw-wit in plaats van op wit. Het merkroze
   haalt daarop 2,96:1 en grote tekst vraagt 3:1, dus daar een tint dieper.
   Alleen hier; het roze blijft elders de huisstijlkleur. */
.stats .stat:nth-child(4) b{color:#cf4189}

/* ============================================================
   Menubalk in het blauw van het bord

   Niet het palet-paars #a05fb8: wit daarop haalt 4,35:1 en menutekst
   vraagt 4,5:1. Dit is #4a2a66, het diepe paars dat al aan het eind
   van het verloop in het statementblok staat. Wit haalt daarop 11,6:1.
   ============================================================ */
:root{
  /* Het blauw van het bord aan de weg, een slag dieper gezet. In het logo
     zelf zit geen blauw - dat is groen met zwart - dus dit is het blauw dat
     de kwekerij in het echt voert. Wit haalt hierop 7,6:1 en de lichtgroene
     onderstreping 4,8:1, allebei ruim boven de eis. */
  --balk:#35528f;
  --balk-diep:#2c4578;
  --balk-lijn:rgba(255,255,255,.18);
}

header{
  background:var(--balk);
  border-bottom:1px solid var(--balk-lijn);
  backdrop-filter:none;
}

/* Het logo staat er nu in wit op */
.nav .logo img{height:48px;width:auto}

/* Menulinks in wit, met de lichtgroene onderstreping als actieve staat */
.nav ul a{color:#fff;border-bottom-color:transparent}
.nav ul a:hover,
.nav ul a.actief,
.nav ul .current-menu-item > a,
.nav ul .current_page_item > a{color:var(--groen-licht);border-color:var(--groen-licht)}

/* De belknop houdt het groen: dat blijft de actiekleur */
.nav .bel{background:var(--groen-vlak);color:#fff}
.nav .bel:hover{background:var(--groen-diep)}

/* Het hamburgermenu meekleuren */
.burger span{background:#fff}
.mobielmenu{background:var(--balk-diep);border-bottom-color:var(--balk-lijn)}
.mobielmenu a{color:#fff;border-bottom-color:var(--balk-lijn)}
.mobielmenu a:last-child{color:var(--groen-licht) !important}

/* Focus op een donkere balk moet licht zijn */
header a:focus-visible,
header button:focus-visible,
.mobielmenu a:focus-visible{outline-color:#fff}

/* Kaart met toestemming
   De Google-kaart laadt pas na een klik, dus het blok moet er ook zonder kaart
   uitzien alsof het ergens over gaat. Zelfde hoogte als de kaart zelf, zodat
   er niets verspringt zodra hij wel geladen wordt. */
.kaartblok .kaart-uit{line-height:1.55;min-height:380px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:34px 26px;text-align:center;
  background:
    radial-gradient(circle at 22% 30%, color-mix(in srgb, var(--groen) 12%, transparent) 0 12px, transparent 13px),
    radial-gradient(circle at 71% 62%, color-mix(in srgb, var(--groen) 10%, transparent) 0 9px, transparent 10px),
    radial-gradient(circle at 45% 84%, color-mix(in srgb, var(--groen) 9%, transparent) 0 7px, transparent 8px),
    linear-gradient(160deg, var(--canvas), var(--wit));}
.kaart-uit-kop{font-family:var(--kop);font-size:22px;letter-spacing:.01em;color:var(--groen-donker);margin:0}
.kaart-uit-tekst{margin:0;max-width:34em;font-size:16px;color:var(--grijs)}
.kaartblok .kaart-laden{cursor:pointer}
/* Zonder JavaScript doet de knop niets; dan blijft de gewone routelink eronder over. */
html:not(.js) .kaart-laden{display:none}
/* Privacylink in de voetbalk. Zelfde kleur als de rest van die regel, met een
   raakvlak van 24px zodat hij op een telefoon te raken is. */
.onder .f-privacy{padding:6px 0;font-weight:700;border-bottom:2px solid transparent}
.onder .f-privacy:hover,.onder .f-privacy:focus-visible{color:#fff;border-color:var(--groen-licht)}

/* Hoofdbeeld van een soort vult het hele vlak
   Bij een uitsnede hoort de getinte plaat eromheen; die draagt de kleur van de
   soort. Bij een gewone foto niet: dan zag je een blok in een blok, met de
   randen van de foto binnen de randen van de plaat. De foto vult nu het vlak
   en de plaat snijdt hem af op zijn eigen ronding. */
.soort-hero .beeld.met-foto{padding:0;border-color:transparent;background:none}
.soort-hero .beeld.met-foto::before{display:none}
/* De foto zit in een span (voor de kleurwissel) en die span is het flexkind.
   Zonder deze regel krimpt de span naar de eigen breedte van de foto en blijft
   het beeld kleiner dan het vlak. */
.soort-hero .beeld.met-foto > span{flex:1 1 auto;width:100%}
.soort-hero .beeld.met-foto img.vierkant{width:100%;height:auto;max-height:none;border-radius:36px}

/* Andere soorten: strook met bediening
   De strook blijft een gewone scrollstrook, zodat hij met een muis, een vinger
   of het toetsenbord te bedienen is. De knoppen komen daar bovenop; ze staan
   alleen in beeld als JavaScript aanstaat. */
.anderen-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.js-alleen{display:none}
.js .js-alleen{display:flex}
.schuif-bediening{display:flex;gap:10px;align-items:center}
.schuif-knop{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:50%;border:1px solid var(--lijn);background:var(--wit);color:var(--groen-donker);
  cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.schuif-knop svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.schuif-knop[data-schuif="pauze"] svg{fill:currentColor;stroke:none}
.schuif-knop:hover{background:var(--groen-donker);border-color:var(--groen-donker);color:#fff}
.schuif-knop .ico-speel{display:none}
.schuif-knop[aria-pressed="true"] .ico-pauze{display:none}
.schuif-knop[aria-pressed="true"] .ico-speel{display:block}
.schuif{scroll-behavior:smooth}
.schuif:focus-visible{outline:3px solid var(--groen-donker);outline-offset:3px;border-radius:20px}

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

/* ============================================================
   Telefoon en tablet

   Het ontwerp is voor een breed scherm gemaakt. Op een telefoon
   moeten een paar onderdelen iets anders: wat op een groot scherm
   los over elkaar heen ligt, past daar niet meer.
   ============================================================ */
@media (max-width: 700px){

  /* De collage van drie vrijstaande bloemen ligt op een breed scherm los
     over elkaar heen, met de namen ernaast. Op een telefoon past dat niet:
     de bloemen vielen buiten beeld en er bleef een groot leeg vlak over.
     Hier worden het drie kolommen naast elkaar, met de naam eronder. De
     naamplaatjes staan in de opmaak na de bloemen, dus met flex-wrap komen
     ze vanzelf op de tweede regel, elk onder zijn eigen bloem. */
  .h2-collage{position:static;height:auto;transform:none;margin-top:6px;
    display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 3%}
  .h2-collage .vlek{display:none}
  .h2-collage a,
  .h2-collage .c1,
  .h2-collage .c2,
  .h2-collage .c3{position:static;flex:0 0 31.33%;order:1;height:auto;
    inset:auto;animation:none}
  .h2-collage a img{width:100%;height:auto}
  .h2-collage .lbl{position:static;transform:none;order:2;flex:0 0 31.33%;
    text-align:center;font-size:12.5px;padding:6px 8px;box-shadow:none;
    background:var(--wit);border:1px solid var(--lijn);white-space:normal}
  .h2-collage .lbl::before{margin-right:6px}

  /* Zoek op kleur: vier knoppen naast elkaar passen niet op een telefoon, en
     als ze afbreken blijft er eentje alleen op een tweede regel staan. Dat
     oogt als een fout. Twee bij twee is even hoog, maar het ziet eruit als een
     keuze: gelijke knoppen in een net raster, en alles blijft groot genoeg om
     te raken. */
  .h2-kleur{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
  .h2-kleur .lbl{grid-column:1 / -1}
  .h2-kleur .kb{justify-content:center;padding:12px 12px;font-size:14px}

  /* Iets meer ruimte langs de randen kost te veel leesbreedte op een
     smal scherm; 20 pixels is genoeg om niet tegen de rand te plakken. */
  .wrap{padding-inline:20px}

  section{padding:52px 0}
}

/* Kleine bijschriften zijn op een telefoon te klein om te lezen.
   Alles onder de 12,5px gaat omhoog naar minstens dat. */
@media (max-width: 980px){
  .soort-hero .kern b,
  .soort-hero .mw-rij small,
  .bloei{font-size:13px}
  .f-lbl{font-size:13px}
  .hpk small,.mini small{font-size:13px}
}

/* Rasterkolommen mogen niet breder worden dan hun vak. Zonder dit duwt een
   stuk tekst dat niet kan afbreken - zoals het telefoonnummer, dat met
   koppeltekens aan elkaar hangt - de hele kolom buiten beeld. */
.hero2-grid > *,.duo > *,.trio > *,.soort-hero > *,.stal-hero > *{min-width:0}

/* Heel smalle telefoons (320px en smaller) */
@media (max-width: 380px){
  .wrap{padding-inline:16px}
  .btn{padding:14px 20px;font-size:15px}
  .h2-collage .lbl{font-size:11.5px;padding:5px 6px}
}

/* De punt achter "kleuren" hoort bij het geschreven woord en krijgt daarom
   hetzelfde schrift. De kleur blijft die van de kop, zodat het een punt blijft
   en geen onderdeel van het groene woord. */
.fr.punt{padding-left:0;font-size:1.16em}
.h2-tekst h1 .fr.punt{color:var(--inkt)}

/* ============================================================
   Productband onder de menubalk

   Twee vlakken naast elkaar: snijhortensia en hangplanten. Ze staan
   boven de kop, zodat er op een telefoon meteen product in beeld is
   zonder te scrollen.
   ============================================================ */
.productband{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--lijn)}
.pb-vlak{position:relative;display:block;overflow:hidden;background:var(--veld-diep);
  height:clamp(120px,17vw,220px)}
.pb-vlak img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pb-vlak::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,45,36,.62),rgba(11,45,36,.18) 62%,transparent)}
.pb-tekst{position:absolute;left:clamp(18px,3vw,34px);bottom:clamp(14px,2.2vw,26px);z-index:1;
  color:#fff;font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.01em;
  font-size:clamp(19px,2.6vw,34px);line-height:1;display:inline-flex;align-items:center;gap:.4em;
  text-shadow:0 2px 14px rgba(0,0,0,.35)}
.pb-tekst .pijl{transition:transform .3s ease}
.pb-vlak:hover img{transform:scale(1.05)}
.pb-vlak:hover .pb-tekst .pijl{transform:translateX(5px)}
.pb-vlak:focus-visible{outline:3px solid var(--groen-donker);outline-offset:-3px}

@media (prefers-reduced-motion: reduce){
  .pb-vlak img,.pb-tekst .pijl{transition:none}
  .pb-vlak:hover img{transform:none}
}

/* De maand en het vraagteken horen bij elkaar. Zonder deze regel kon het
   vraagteken op een smal scherm alleen op de volgende regel belanden, en in
   het handschrift stond het bovendien bijna tegen de maand aan. */
.fr-groep{white-space:nowrap}
.fr-groep .fr{margin-right:.08em}

/* Openingstijden van de bloemenstal */
.stal-tijden{margin-top:34px;padding-top:26px;border-top:1px solid var(--lijn)}
.stal-tijden h2{font-family:'Archivo',sans-serif;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grijs);margin-bottom:14px}
.stal-tijden dl{margin:0;display:grid;gap:8px}
.stal-tijden dl > div{display:flex;justify-content:space-between;gap:20px;
  padding-bottom:8px;border-bottom:1px dashed var(--lijn);max-width:30em}
.stal-tijden dl > div:last-child{border-bottom:0;padding-bottom:0}
.stal-tijden dt{font-weight:700}
.stal-tijden dd{margin:0;color:var(--grijs);white-space:nowrap}
/* De noot staat op het diepe groen; daar moet een lichte link op, niet het
   donkergroen van de rest van de site. */
.stal-noot a{color:var(--groen-licht);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.stal-noot a:hover{color:#fff}

/* Bestel- en voorraadtekst onder de punten van de bloemenstal */
.stal-bestel{margin-top:30px;max-width:36em;font-size:16px;line-height:1.6;color:var(--grijs)}
.stal-bestel b{color:var(--inkt)}
.stal-bestel a{color:var(--groen-donker);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   Productband, tweede versie
   Eén foto per vlak: links het Pompidou-veld, rechts de hangplanten aan
   hun rails in de kas. Beide foto's zijn vooraf op 2000 bij 750 uitgesneden.
   ============================================================ */
.pb-vlak{height:clamp(170px,20vw,270px)}
.pb-vlak::after{background:linear-gradient(0deg,rgba(11,45,36,.72) 0%,rgba(11,45,36,.28) 46%,rgba(11,45,36,0) 75%)}
.pb-tekst{left:clamp(18px,3vw,40px);bottom:clamp(16px,2.4vw,30px);display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.pb-tekst b{font-weight:400;display:inline-flex;align-items:center;gap:.4em;font-size:clamp(22px,2.8vw,38px);line-height:1}
.pb-tekst small{font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(12px,1.1vw,15px);letter-spacing:.02em;opacity:.92}
@media (max-width: 700px){
  .productband{grid-template-columns:1fr 1fr}
  .pb-vlak{height:150px}
  .pb-tekst small{display:none}
}

/* Knoppen onder Uitgelicht */
.uitgelicht-knoppen{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}

/* ============================================================
   Mozaïek "Van stek tot veilingkar"
   Vervangt de schuivende fotoband. Zes foto's in een vast raster, de
   eerste groot. Klikken opent de lichtbak die er al was.
   ============================================================ */
.mozaiek-sectie{padding:110px 0 60px}
.mozaiek{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:14px;margin-top:44px}
.mtegel{margin:0;position:relative;border-radius:22px;overflow:hidden;background:var(--veld-diep);aspect-ratio:1/1}
.mtegel.groot{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.mtegel .foto-knop{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.mtegel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.mtegel:hover img{transform:scale(1.04)}
.mtegel figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 12px;font-size:13px;font-weight:700;color:#fff;
  background:linear-gradient(0deg,rgba(11,45,36,.72),rgba(11,45,36,0));pointer-events:none}
.mtegel.groot figcaption{font-size:15px;padding:44px 20px 16px}
.mtegel .foto-knop:focus-visible{outline:3px solid var(--groen-donker);outline-offset:-4px;border-radius:22px}
@media (max-width: 980px){
  .mozaiek-sectie{padding:70px 0 40px}
  .mozaiek{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:30px}
  .mtegel.groot{grid-column:span 2;grid-row:span 1;aspect-ratio:16/10}
  .mtegel{border-radius:16px}
  .mtegel figcaption{font-size:12px;padding:26px 12px 10px}
}
@media (prefers-reduced-motion: reduce){
  .mtegel img{transition:none}
  .mtegel:hover img{transform:none}
}

/* <picture> heeft display:contents, waardoor zijn kinderen rechtstreeks in
   een raster of flexbox terechtkomen. Dat is de bedoeling voor de <img>, maar
   de <source>-elementen kwamen zo óók als lege cellen in het raster - vier
   foto's werden acht cellen, en de helft viel buiten beeld. Een <source>
   hoort nooit een vak te krijgen. */
picture > source{display:none}


/* Uitgelicht: het hangplantenblok in dezelfde maat als de trio */
.uitgelicht-hangplanten{margin-top:44px}
.uitgelicht-hangplanten .hp-grid{grid-template-columns:repeat(5,1fr)}
@media (max-width: 980px){
  .uitgelicht-hangplanten .hp-grid{grid-template-columns:repeat(2,1fr)}
}

/* Blokken die met de schakelaar wisselen: het hidden-attribuut moet winnen
   van display:grid uit de stylesheet, anders staan beide blokken tegelijk. */
[data-groep-blok][hidden]{display:none !important}

/* "Zet 'm op Vers": de schakelaar rechts, net als bij Uitgelicht en op het
   assortiment. De uitleg staat nu onder de kop, links. */
.fcwissel .fc-top{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.fcwissel .fc-top .schakel{margin-left:auto}
.fcwissel .fc-uitleg{margin-top:14px;max-width:34em;color:var(--grijs)}

/* ============================================================
   Terugkoppeling van Lotte op de homepagina, 18 september 2026
   ============================================================ */

/* De kop is langer geworden ("Actief in het telen van snijhortensia's en
   hangplanten"); iets kleiner en breder, zodat hij op drie regels past. */
.h2-tekst h1{font-size:clamp(40px,4.9vw,68px);max-width:10.5em}

/* Certificaten meteen in beeld, boven "Zoek op kleur". */
.h2-keur{display:flex;align-items:center;gap:12px;margin:30px 0 0;font-size:14.5px;font-weight:700;color:var(--groen-donker)}
.h2-keur img{height:46px;width:auto;flex:none;background:#fff;border:1px solid var(--lijn);border-radius:8px;padding:4px}

/* Kleurbolletjes: het witte bolletje is nu echt wit, en alle bolletjes
   krijgen een dun donker randje zodat wit niet wegvalt. */
.kb::before,.chips button .bol,.kleurwissel button .bol{box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}

/* Naamplaatjes in de collage hangen aan de onderrand van hun bloem. Ze
   staan nu in de link zelf, dus de vaste posities van vroeger vervallen. */
/* De naamplaatjes moeten boven álle bloemen liggen, ook boven een bloem die
   later in de opmaak komt. Dat kan alleen als de link zelf geen eigen
   stapelcontext vormt: schaduw, zweefbeweging en de vergroting bij hover
   staan daarom op de foto (en op het plaatje), niet meer op de link. */
.h2-collage .c1,.h2-collage .c2,.h2-collage .c3{animation:none;filter:none;will-change:auto;transition:none}
.h2-collage a:hover{transform:none}
.h2-collage a img{filter:drop-shadow(0 24px 28px rgba(20,30,22,.22));transition:scale .35s;will-change:transform}
.h2-collage a:hover img{scale:1.06}
.h2-collage .c1 img,.h2-collage .c1 .lbl{animation:zweef 6.5s ease-in-out infinite}
.h2-collage .c2 img,.h2-collage .c2 .lbl{animation:zweef 7.5s 1.1s ease-in-out infinite}
.h2-collage .c3 img,.h2-collage .c3 .lbl{animation:zweef 8s 2.2s ease-in-out infinite}
.h2-collage a .lbl{left:50%;top:auto;bottom:0;transform:none;translate:-50% 42%;z-index:5}
/* De tweede bloem (rechts) ligt met zijn onderrand tegen de derde; daar
   hangt de naam aan de bovenrand. */
.h2-collage .c2 .lbl{top:0;bottom:auto;translate:-50% -42%}

/* "Foto volgt": een net vak op de plek van een ontbrekende soortfoto. */
.beeld-volgt{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  background:linear-gradient(160deg,var(--lucht,#e9f0fb),var(--canvas,#f4f4ef));color:var(--grijs);
  font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-align:center}
.mwi .beeld-volgt{height:auto;aspect-ratio:1/1;border-radius:12px}
.mini .beeld-volgt,.fkaart .beeld-volgt{position:absolute;inset:0}
.soort-hero .beeld-volgt{width:300px;max-width:100%;aspect-ratio:1/1;border-radius:28px}

/* Een soort zonder classic (Dali) verdwijnt in de classic-stand. */
.toon-classic .mini.alleen-vers,.toon-classic .fkaart.alleen-vers{display:none}

/* Contactblok: de regel voor particulieren, met de Instagram-link. */
.contactblok .na{margin:28px 0 12px;color:#dff2e6;max-width:26em}
.contactblok .regel.insta{font-size:clamp(18px,2.1vw,26px)}

/* Voet: de band past zich aan de breedte aan in plaats van afgesneden te
   worden. 100cqw gedeeld door de tekstbreedte in em (19,7) is 5,07cqw;
   4,9 houdt wat lucht. Op een smal scherm mag hij afbreken. */
.f-band{container-type:inline-size}
.f-band span{font-size:clamp(22px,4.9cqw,86px);white-space:normal}

/* Voet: contact als vier regels met een icoontje. */
.f-rijen{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.f-rijen li{margin:0;display:flex;align-items:center;gap:11px;font-size:17px;font-weight:700;color:#fff;line-height:1.4}
.f-rijen a{display:inline-flex;align-items:center;gap:11px;color:#fff;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.f-rijen a:hover,.f-rijen a:focus-visible{color:var(--groen-licht);border-color:var(--groen-licht)}
.f-rijen svg{width:18px;height:18px;flex:none;fill:none;stroke:#7fa38c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.f-rijen a:hover svg{stroke:var(--groen-licht)}
.f-meer{color:var(--groen-licht);font-weight:800}

@media (max-width: 700px){
  /* In de collage staat de naam nu ín de link, onder de foto. */
  .h2-collage a .lbl,.h2-collage .c2 .lbl{display:block;position:static;transform:none;translate:none;animation:none;margin-top:8px;width:100%}
  .h2-collage a img{animation:none}
  .h2-keur{font-size:13.5px}
  .h2-keur img{height:40px}
}
@media (prefers-reduced-motion: reduce){
  .h2-collage .lbl{animation:none !important}
}