@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/caveat-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/caveat-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/montserrat-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/montserrat-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/montserrat-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/montserrat-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/montserrat-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/montserrat-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/montserrat-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/montserrat-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


/* ============ DESIGN TOKENS ============ */
:root{
  --groen-900:#1f3815;
  --groen-800:#2c4f1f;
  --groen-700:#3d6b2c;   /* primair merkgroen — Streekvers */
  --groen-600:#4f8339;
  --groen-500:#67a04c;
  --groen-100:#e6f0dd;
  --groen-50:#f5f9f1;

  --oranje-700:#8a4600;
  --oranje-600:#a05500;  /* primair merkoranje — koppen op wit */
  --oranje-500:#c76e00;
  --amber-400:#e6a817;   /* logo-goud — decoratief, badges, iconen */
  --amber-100:#fdf1d9;

  --inkt:#22281d;
  --grijs-700:#4b5245;
  --grijs-600:#68705f;
  --grijs-400:#9aa38c;
  --grijs-300:#cbd2bf;
  --grijs-200:#e4e8db;
  --grijs-100:#f2f4ec;
  --wit:#ffffff;

  --font-kop:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-tekst:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-merk:'Caveat',cursive;

  --breedte:1240px;
  --breedte-smal:760px;
  --radius:16px;
  --radius-klein:10px;
  --radius-groot:28px;
  --schaduw-1:0 1px 2px rgba(34,40,29,.06), 0 2px 8px rgba(34,40,29,.07);
  --schaduw-2:0 2px 6px rgba(34,40,29,.07), 0 12px 30px rgba(34,40,29,.12);
  --schaduw-3:0 18px 50px rgba(34,40,29,.20);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font-tekst);color:var(--inkt);background:var(--wit);line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-kop);margin:0;line-height:1.15;letter-spacing:-.01em;}
.omhulsel{max-width:var(--breedte);margin:0 auto;padding:0 24px;}
.omhulsel--smal{max-width:var(--breedte-smal);margin:0 auto;padding:0 24px;}

/* ============ BUTTONS ============ */
.knop{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.7rem;border-radius:999px;font-weight:700;font-size:.98rem;border:2px solid transparent;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;}
.knop--primair{background:var(--groen-700);color:var(--wit);box-shadow:var(--schaduw-1);}
.knop--primair:hover{background:var(--groen-800);transform:translateY(-2px);box-shadow:var(--schaduw-2);}
.knop--wit{background:var(--wit);color:var(--groen-800);}
.knop--wit:hover{transform:translateY(-2px);box-shadow:var(--schaduw-2);}
.knop--rand{background:transparent;color:var(--groen-800);border-color:var(--groen-700);}
.knop--rand:hover{background:var(--groen-50);}
.knop--klein{padding:.6rem 1.1rem;font-size:.86rem;}

/* ============ TOP BAR ============ */
.topbalk{background:var(--groen-900);color:var(--groen-100);font-size:.85rem;padding:.5rem 0;}
.topbalk__inhoud{display:flex;justify-content:center;gap:.7rem;align-items:center;flex-wrap:wrap;text-align:center;}
.topbalk__scheiding{opacity:.5;}
.topbalk__sterren{color:var(--amber-400);font-weight:700;}
.topbalk__sterren-detail{color:var(--groen-100);font-weight:400;opacity:.85;}

/* ============ HEADER ============ */
.kop{position:sticky;top:0;z-index:50;background:var(--wit);box-shadow:0 1px 0 var(--grijs-200);}
.kop__hoofd{display:flex;align-items:center;justify-content:space-between;padding:.9rem 24px;gap:2rem;max-width:1240px;margin:0 auto;}
.kop__logo{display:flex;align-items:center;gap:.6rem;flex-shrink:0;}
.kop__logo img{height:52px;width:auto;}
.kop__nav ul{display:flex;gap:1.9rem;list-style:none;margin:0;padding:0;}
.kop__nav a{font-weight:600;font-size:.96rem;color:var(--grijs-700);transition:color .15s;}
.kop__nav a:hover{color:var(--groen-700);}
.kop__acties{display:flex;align-items:center;gap:1.3rem;}
.kop__telefoon{display:flex;flex-direction:column;font-size:.82rem;color:var(--grijs-600);line-height:1.3;}
.kop__telefoon strong{color:var(--inkt);font-size:.98rem;}
.kop__mand{position:relative;color:var(--inkt);}
.menu-schakelaar{position:absolute;opacity:0;pointer-events:none;}
.menu-knop{display:none;order:9;cursor:pointer;font-size:1.7rem;line-height:1;color:var(--inkt);padding:.2rem .4rem;user-select:none;}
.menu-schakelaar:focus-visible+.menu-knop{outline:2px solid var(--groen-700);outline-offset:2px;}
@media(max-width:980px){
  .kop__hoofd{position:relative;gap:1rem;}
  .kop__nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--wit);border-top:1px solid var(--grijs-200);box-shadow:var(--schaduw-1);padding:.2rem 24px .8rem;}
  .menu-schakelaar:checked~.kop__nav{display:block;}
  .kop__nav ul{flex-direction:column;gap:0;}
  .kop__nav li+li{border-top:1px solid var(--grijs-200);}
  .kop__nav a{display:block;padding:.9rem 0;font-size:1.02rem;}
  .menu-knop{display:block;}
}
@media(max-width:620px){
  .kop__telefoon{display:none;}
  .kop__hoofd{padding:.7rem 16px;gap:.6rem;}
  .kop__logo img{height:42px;}
}

/* ============ BREADCRUMB ============ */
.kruimelpad{font-size:.82rem;color:var(--grijs-600);padding:1rem 0 0;}
.kruimelpad a{color:var(--groen-700);font-weight:600;}
.kruimelpad span{margin:0 .4rem;color:var(--grijs-400);}

/* ============ PAGINAKOP (secundaire pagina's) ============ */
.paginakop{background:linear-gradient(120deg,var(--groen-900),var(--groen-800));padding-block:clamp(2.5rem,5vw,3.5rem);color:var(--wit);}
.paginakop__kicker{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.14);font-weight:700;font-size:.8rem;letter-spacing:.03em;text-transform:uppercase;padding:.4rem .9rem;border-radius:999px;margin-bottom:1rem;}
.paginakop h1{font-size:clamp(2rem,4vw,2.9rem);max-width:20ch;color:var(--wit);}
.paginakop p{margin-top:1rem;color:var(--groen-100);font-size:1.05rem;max-width:52ch;}

/* ============ HERO (met Johan) ============ */
.hero{position:relative;background:linear-gradient(120deg,var(--groen-900) 0%,var(--groen-800) 55%,var(--groen-700) 100%);overflow:hidden;padding-block:0;}
.hero:before{content:"";position:absolute;top:-10rem;left:-8rem;width:30rem;height:30rem;border-radius:50%;background:radial-gradient(circle,rgba(230,168,23,.18) 0%,transparent 70%);pointer-events:none;}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr .78fr;gap:1rem;align-items:end;}
.hero__tekstblok{padding-block:clamp(3rem,7vw,5.5rem);}
.hero__kicker{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.14);color:var(--wit);font-weight:700;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;padding:.45rem 1rem;border-radius:999px;margin-bottom:1.3rem;}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.6rem);max-width:14ch;color:var(--wit);}
.hero h1 em{font-style:normal;color:var(--amber-400);}
.hero__tekst{margin-top:1.3rem;font-size:1.12rem;color:var(--groen-100);max-width:42ch;}
.hero__acties{margin-top:2.1rem;display:flex;gap:1rem;flex-wrap:wrap;}
.hero__johan{position:relative;align-self:end;height:100%;display:flex;align-items:flex-end;justify-content:center;}
.hero__johan img{max-height:min(620px,88vh);width:auto;object-fit:contain;filter:drop-shadow(0 25px 40px rgba(0,0,0,.35));}
@media(max-width:1000px){.hero__grid{grid-template-columns:1.15fr .85fr;}.hero__johan img{max-height:420px;}}
@media(max-width:640px){.hero__grid{grid-template-columns:1fr;}.hero__johan{order:-1;padding-top:2rem;}.hero__johan img{max-height:300px;}}

/* ============ MAAT-VERGELIJKING (kist-standaard) ============ */
.maten{background:var(--groen-700);}
.maten__raster{display:flex;gap:1.4rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory;scroll-behavior:smooth;}
.maten__raster::-webkit-scrollbar{height:6px;}
.maten__raster::-webkit-scrollbar-thumb{background:var(--groen-500);border-radius:99px;}
.maten__kaart{scroll-snap-align:start;flex:0 0 min(320px,84vw);position:relative;background:rgba(255,255,255,.06);border-radius:var(--radius-groot);padding:1.6rem 1.6rem 2rem;transition:transform .2s ease;}
.maten__kaart:hover{transform:translateY(-4px);}
.maten__badge{position:absolute;top:1.6rem;left:1.6rem;z-index:2;background:var(--groen-900);color:var(--wit);font-weight:700;font-size:.8rem;padding:.4rem .75rem;border-radius:999px;display:flex;align-items:center;gap:.35rem;}
.maten__vlag{position:absolute;top:1.6rem;right:1.6rem;z-index:2;background:var(--amber-400);color:var(--groen-900);font-weight:800;font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;padding:.35rem .7rem;border-radius:999px;}
.maten__beeld{aspect-ratio:1;background:linear-gradient(160deg,var(--groen-50) 0%,var(--amber-100) 100%);border-radius:var(--radius);display:grid;place-items:center;overflow:hidden;margin-bottom:1.2rem;}
.maten__beeld img{width:100%;height:100%;object-fit:contain;padding:.6rem;mix-blend-mode:multiply;}
.maten__titel{font-family:var(--font-kop);font-weight:800;font-size:1.25rem;color:var(--wit);}
.maten__prijs{margin-top:.3rem;font-weight:700;font-size:.95rem;color:var(--amber-400);}
.maten__prijs small{font-weight:500;color:var(--groen-100);opacity:.75;}
.maten__tekst{margin-top:.4rem;font-size:.9rem;color:var(--groen-100);opacity:.85;min-height:2.7em;line-height:1.35;}
.maten__link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-weight:700;font-size:.9rem;color:var(--wit);text-decoration:underline;text-underline-offset:3px;}


/* ============ SNELKOPPELINGEN (4-panel, groothuisbouw-stijl) ============ */
.snel{padding-block:clamp(2.5rem,5vw,3.5rem) 0;}
.snel__raster{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;}
.snel__tegel{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3.1;box-shadow:var(--schaduw-1);transition:transform .2s ease, box-shadow .2s ease;}
.snel__tegel:hover{transform:translateY(-4px);box-shadow:var(--schaduw-2);}
.snel__tegel img{width:100%;height:100%;object-fit:cover;}
.snel__laag{position:absolute;inset:0;background:linear-gradient(0deg,rgba(31,56,21,.88) 0%,rgba(31,56,21,.15) 55%,rgba(31,56,21,0) 75%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.1rem;}
.snel__titel{color:var(--wit);font-weight:700;font-size:1.02rem;}
.snel__link{color:var(--groen-100);font-size:.82rem;margin-top:.2rem;display:inline-flex;align-items:center;gap:.3rem;}
@media(max-width:900px){.snel__raster{grid-template-columns:repeat(2,1fr);}}

/* ============ SECTIEKOP ============ */
.sectiekop{max-width:46rem;margin-bottom:2.2rem;}
.sectiekop--midden{margin-left:auto;margin-right:auto;text-align:center;}
.kicker{display:inline-block;color:var(--oranje-600);font-weight:700;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem;}
.sectiekop h2{font-size:clamp(1.6rem,3vw,2.15rem);color:var(--inkt);}
.sectiekop p{margin-top:.7rem;color:var(--grijs-600);font-size:1.02rem;}

.ond{padding-block:clamp(3rem,6vw,4.5rem);}
.ond--groen{background:var(--groen-50);}
.ond--donker{background:var(--groen-900);color:var(--groen-100);}
.ond--donker .sectiekop h2{color:var(--wit);}
.ond--donker .kicker{color:var(--amber-400);}

/* ============ ZEKERHEDEN CAROUSEL ============ */
.zeker__rij{display:flex;gap:1.4rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory;scroll-behavior:smooth;}
.zeker__rij::-webkit-scrollbar{height:6px;}
.zeker__rij::-webkit-scrollbar-thumb{background:var(--groen-600);border-radius:99px;}
.schuif-wrap{position:relative;}
.schuif-knop{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:none;background:var(--wit);color:var(--groen-800);box-shadow:var(--schaduw-2);display:grid;place-items:center;cursor:pointer;font-size:1.1rem;transition:transform .15s;}
.schuif-knop:hover{transform:translateY(-50%) scale(1.08);}
.schuif-knop--links{left:-22px;}
.schuif-knop--rechts{right:-22px;}
.ond--donker .schuif-knop{background:var(--groen-900);color:var(--wit);}
@media(max-width:700px){.schuif-knop{display:none;}}
.zeker__kaart{scroll-snap-align:start;flex:0 0 270px;background:var(--wit);border-radius:var(--radius);overflow:hidden;box-shadow:var(--schaduw-1);}
.zeker__beeld{aspect-ratio:4/3;overflow:hidden;}
.zeker__beeld img{width:100%;height:100%;object-fit:cover;}
.zeker__body{padding:1.2rem 1.3rem 1.4rem;}
.zeker__titel{font-family:var(--font-kop);font-weight:700;font-size:1.02rem;color:var(--inkt);}
.zeker__tekst{margin-top:.5rem;font-size:.9rem;color:var(--grijs-600);}
.zeker__link{display:inline-flex;align-items:center;gap:.35rem;margin-top:.9rem;font-weight:700;font-size:.86rem;color:var(--groen-700);}

/* ============ PRODUCTEN ============ */
.raster--4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;}
.raster--3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;}
.kaart.pk{background:var(--wit);border:1px solid var(--grijs-200);border-radius:var(--radius);overflow:hidden;box-shadow:var(--schaduw-1);transition:transform .18s, box-shadow .18s;}
.kaart.pk:hover{transform:translateY(-4px);box-shadow:var(--schaduw-2);}
.pk__foto{aspect-ratio:1;background:var(--grijs-100);display:grid;place-items:center;overflow:hidden;}
.pk__foto img{width:100%;height:100%;object-fit:contain;padding:.7rem;}
.pk__vlag{position:absolute;margin:.6rem;background:var(--oranje-600);color:var(--wit);font-size:.7rem;font-weight:700;padding:.25rem .6rem;border-radius:999px;}
.pk__body{padding:1rem 1.1rem 1.2rem;}
.pk__naam{font-size:.96rem;font-weight:600;color:var(--inkt);margin-bottom:.5rem;min-height:2.5em;}
.pk__prijs{font-family:var(--font-kop);font-weight:800;font-size:1.2rem;color:var(--groen-700);margin-bottom:.8rem;}
.pk__prijs small{color:var(--grijs-400);font-size:.75rem;font-weight:500;}
@media(max-width:980px){.raster--4,.raster--3{grid-template-columns:repeat(2,1fr);}}

/* ============ WAAROM STREEKVERS (badges) ============ */
.waarom__raster{display:grid;grid-template-columns:repeat(6,1fr);gap:1.3rem;}
.waarom__item{text-align:center;padding:1.4rem .8rem;}
.waarom__icoon{width:52px;height:52px;margin:0 auto 1rem;display:grid;place-items:center;background:rgba(230,168,23,.16);border-radius:50%;color:var(--amber-400);font-size:1.3rem;}
.waarom__titel{font-weight:700;font-size:.92rem;color:var(--wit);}
.waarom__tekst{margin-top:.4rem;font-size:.8rem;color:var(--groen-100);opacity:.8;}
@media(max-width:980px){.waarom__raster{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.waarom__raster{grid-template-columns:repeat(2,1fr);}}

/* ============ LANGE TEKST / SEO ============ */
.tekst{color:var(--grijs-700);font-size:1.02rem;}
.tekst p{margin:0 0 1.1rem;}
.tekst a{color:var(--groen-700);font-weight:600;text-decoration:underline;text-decoration-color:var(--groen-300);text-underline-offset:3px;}
.tekst-raster{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;}
@media(max-width:860px){.tekst-raster{grid-template-columns:1fr;}}

/* ============ REVIEWS (compact) ============ */
.reviews__strip{display:flex;align-items:center;gap:2rem;background:var(--groen-50);border-radius:var(--radius);padding:1.4rem 1.8rem;flex-wrap:wrap;}
.reviews__score{display:flex;align-items:center;gap:.8rem;flex-shrink:0;}
.reviews__score-getal{font-family:var(--font-kop);font-size:1.9rem;font-weight:800;color:var(--groen-800);}
.reviews__score-detail{font-size:.8rem;color:var(--grijs-600);line-height:1.3;}
.reviews__score-sterren{color:var(--amber-400);letter-spacing:1px;}
.reviews__scheiding{width:1px;align-self:stretch;background:var(--grijs-300);}
.reviews__citaten{flex:1;min-width:260px;display:flex;gap:1.6rem;flex-wrap:wrap;}
.reviews__citaat{flex:1;min-width:220px;font-size:.9rem;color:var(--grijs-700);font-style:italic;}
.reviews__citaat strong{display:block;font-style:normal;font-weight:700;color:var(--inkt);font-size:.82rem;margin-top:.4rem;}
.reviews__links{display:flex;flex-direction:column;gap:.4rem;flex-shrink:0;font-size:.85rem;}
.reviews__links a{color:var(--groen-700);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}
@media(max-width:760px){.reviews__strip{flex-direction:column;align-items:flex-start;}.reviews__scheiding{display:none;}}
/* ============ CONTACTFORMULIER ============ */
.formulier{display:grid;gap:1.1rem;}
.formulier label{display:block;font-weight:600;font-size:.88rem;color:var(--inkt);margin-bottom:.4rem;}
.formulier input,.formulier select,.formulier textarea{width:100%;padding:.8rem 1rem;border:1px solid var(--grijs-300);border-radius:var(--radius-klein);font-family:var(--font-tekst);font-size:.96rem;background:var(--wit);}
.formulier input:focus,.formulier select:focus,.formulier textarea:focus{outline:2px solid var(--groen-500);outline-offset:1px;}
.formulier__rij{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
@media(max-width:640px){.formulier__rij{grid-template-columns:1fr;}}

.faq{max-width:var(--breedte-smal);margin:0 auto;}
.faq__item{border-bottom:1px solid var(--grijs-200);padding:1.4rem 0;}
.faq__vraag{display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;font-family:var(--font-kop);font-weight:700;font-size:1.02rem;color:var(--inkt);list-style:none;}
.faq__vraag::-webkit-details-marker{display:none;}
.faq__vraag::after{content:"+";font-size:1.4rem;color:var(--groen-700);flex-shrink:0;transition:transform .15s;}
details[open] .faq__vraag::after{transform:rotate(45deg);}
.faq__antwoord{margin-top:.8rem;color:var(--grijs-700);font-size:.96rem;line-height:1.65;}
.okaart{background:var(--wit);border-radius:var(--radius);padding:1.8rem;box-shadow:var(--schaduw-1);position:relative;}
.okaart__nummer{position:absolute;top:1.4rem;right:1.6rem;font-family:var(--font-kop);font-size:2rem;font-weight:800;color:var(--groen-100);}
.okaart__titel{font-size:1.08rem;font-weight:700;margin-bottom:.6rem;color:var(--inkt);}
.kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;}
@media(max-width:900px){.kaarten{grid-template-columns:1fr;}}

/* ============ CTA-BANNER ============ */
.cta{background:linear-gradient(120deg,var(--groen-700),var(--groen-800));border-radius:var(--radius-groot);overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;color:var(--wit);}
.cta__tekst{padding:clamp(2.2rem,5vw,3.5rem);}
.cta__beeld{position:relative;height:100%;min-height:260px;background:linear-gradient(160deg,var(--groen-600),var(--groen-900));display:flex;align-items:center;justify-content:center;padding:1.5rem;}
.cta__beeld img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 15px 25px rgba(0,0,0,.3));}
.cta__badge{position:absolute;top:1.3rem;left:1.3rem;background:var(--amber-400);color:var(--groen-900);font-weight:800;font-size:.78rem;letter-spacing:.02em;text-transform:uppercase;padding:.4rem .8rem;border-radius:999px;}
@media(max-width:760px){.cta{grid-template-columns:1fr;}.cta__beeld{order:-1;min-height:200px;}}
.cta h2{color:var(--wit);font-size:clamp(1.5rem,2.6vw,2rem);max-width:20ch;}
.cta p{color:var(--groen-100);margin-top:.6rem;}

/* ============ FOOTER ============ */
.voet{background:var(--inkt);color:var(--grijs-300);}
.voet__hoofd{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;padding-block:3.5rem;}
.voet__logo{height:48px;margin-bottom:1rem;filter:brightness(0) invert(1);}
.voet__pitch{font-size:.92rem;color:var(--grijs-400);max-width:26ch;}
.voet__kop{font-family:var(--font-kop);color:var(--wit);font-size:.92rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin-bottom:1.1rem;}
.voet__lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem;}
.voet__lijst a{font-size:.9rem;color:var(--grijs-400);transition:color .15s;}
.voet__lijst a:hover{color:var(--amber-400);}
.voet__adres{font-style:normal;font-size:.9rem;color:var(--grijs-400);line-height:1.7;}
.voet__adres a{color:var(--grijs-300);}
.voet__onder{border-top:1px solid rgba(255,255,255,.08);}
.voet__onder-inhoud{display:flex;justify-content:space-between;padding-block:1.3rem;font-size:.82rem;color:var(--grijs-400);flex-wrap:wrap;gap:.6rem;}
@media(max-width:900px){.voet__hoofd{grid-template-columns:1fr 1fr;}}


/* De betaalstrook: logo's van de betaalmethodes plus hoe wij bezorgen. */
.betaalraster{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.2rem;}
.betaalkaart{display:flex;flex-direction:column;align-items:center;gap:.45rem;
  background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;
  padding:.85rem 1.1rem;min-width:104px;box-shadow:0 1px 2px rgba(0,0,0,.04);}
.betaalkaart img{display:block;height:36px;width:auto;}
.betaalkaart span{font-size:.78rem;color:#4a4a45;text-align:center;line-height:1.25;}
.betaalkaart--tekst{justify-content:center;}
.betaalkaart__woord{font-weight:700;font-size:.92rem;color:#2f3a24;}
.betaalstrook__voet{margin-top:1.3rem;text-align:center;font-size:.87rem;color:#5c5c55;
  max-width:46rem;margin-left:auto;margin-right:auto;}
@media(max-width:640px){
  .betaalkaart{min-width:88px;padding:.7rem .8rem;}
  .betaalkaart img{height:30px;}
}


/* ============ TOEVOEGINGEN VOOR DE COMPLETE SITE ============ */
.ond--wit{background:var(--wit);}
/* ---- contrast: goud is te licht op groen en op wit ---- */
/* op middengroen een lichter goud: 2,99 -> 4,63 */
.maten .kicker,
.maten__prijs,
.zekerheden .kicker,
.ctaband .kicker{color:#ffd97a!important;}
.maten__prijs small,
.maten__tekst{color:#e8f0dd;}
/* sterren op wit: goud haalde 2,1, dit oranje haalt 5,5 */
.reviews__score-sterren,
.reviews__sterren{color:var(--oranje-600);}
.kicker{color:var(--oranje-600);}
/* op het donkerste groen mag het goud blijven staan, dat haalt 6,1 */
.topbalk__sterren{color:var(--amber-400);}

/* leesbaarder grijs voor kleine tekst op wit */
.kruimelpad span{color:var(--grijs-600);}
.pk__prijs small{color:var(--grijs-600);}

/* ---- hero op binnenpagina's ---- */
.paginahero{position:relative;background:var(--groen-900);overflow:hidden;}
.paginahero:before{content:"";position:absolute;inset:0;background-image:var(--hero);
  background-size:cover;background-position:center;opacity:.34;}
.paginahero:after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--groen-900) 12%,rgba(31,56,21,.72) 55%,rgba(31,56,21,.35) 100%);}
.paginahero__inhoud{position:relative;z-index:2;padding-block:clamp(3rem,7vw,5.5rem);max-width:1240px;}
.paginahero__kicker{display:inline-block;padding:.4rem 1rem;border-radius:99px;background:rgba(255,255,255,.14);
  color:var(--wit);font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.paginahero h1{margin:1.1rem 0 0;color:var(--wit);font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.1;max-width:19ch;}
.paginahero__lead{margin-top:1rem;color:var(--groen-100);max-width:56ch;font-size:1.05rem;line-height:1.7;}
.paginahero__knoppen{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem;}
.paginahero__voet{margin-top:1.4rem;color:rgba(255,255,255,.72);font-size:.85rem;}

/* ---- tekst met zijbalk ---- */
.inhoud-raster{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:3rem;align-items:start;}
.tekst--artikel{max-width:none;}
.tekst--artikel h2{margin-top:2.4rem;font-size:1.5rem;line-height:1.25;}
.tekst--artikel h2:first-child{margin-top:0;}
.tekst--artikel h3{margin-top:1.8rem;font-size:1.12rem;color:var(--groen-800);}
.tekst--artikel p{line-height:1.8;}
.tekst--artikel ul{margin:1rem 0 1.4rem;padding-left:1.1rem;}
.tekst--artikel li{margin-bottom:.5rem;line-height:1.7;}
.tekst--artikel a{color:var(--groen-700);text-decoration:underline;text-underline-offset:3px;}
.tekst__opsomming{list-style:none;padding-left:0;}
.vinklijst{list-style:none;padding-left:0;margin:1.2rem 0 1.6rem;display:grid;gap:.55rem;}
.vinklijst li{position:relative;padding-left:1.9rem;line-height:1.6;}
.vinklijst li:before{content:"";position:absolute;left:.25rem;top:.42em;width:.75rem;height:.42rem;
  border-left:2.5px solid var(--groen-600);border-bottom:2.5px solid var(--groen-600);transform:rotate(-45deg);}
.tussencta{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  margin:2.2rem 0;padding:1.3rem 1.5rem;background:var(--groen-50);border:1px solid var(--groen-100);
  border-left:4px solid var(--groen-600);border-radius:12px;}
.tussencta strong{display:block;color:var(--inkt);font-size:1.02rem;}
.tussencta span{display:block;font-size:.9rem;color:var(--grijs-600);margin-top:.2rem;}
.beeld-mist{object-fit:contain!important;padding:12%;background:var(--grijs-100);opacity:.55;}
.pk__uitleg{font-size:.85rem;color:var(--grijs-600);line-height:1.5;margin:.4rem 0 .6rem;}
.rekentool{max-width:900px;margin:0 auto;background:var(--wit);border:1px solid var(--grijs-200);
  border-radius:var(--radius);padding:1.8rem;box-shadow:var(--schaduw-1);}
.rekentool__velden{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.rekentool__velden label,.rekentool__wensen legend{display:block;font-weight:700;font-size:.86rem;margin-bottom:.4rem;}
.rekentool__velden input,.rekentool__velden select{width:100%;padding:.7rem .8rem;border:1px solid var(--grijs-300);
  border-radius:9px;font-family:inherit;font-size:.95rem;background:var(--wit);}
.rekentool__wensen{border:0;padding:1.2rem 0 0;margin:0;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;}
.rekentool__wensen label{font-weight:500;font-size:.92rem;display:flex;align-items:center;gap:.45rem;}
.rekentool__uitslag{margin-top:1.5rem;padding-top:1.4rem;border-top:1px solid var(--grijs-200);}
.rekentool__uitslag h3{font-size:1.1rem;margin-bottom:.8rem;}
.rekentool__regels{list-style:none;padding:0;margin:0 0 1rem;}
.rekentool__regels li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;padding:.6rem 0;
  border-bottom:1px solid var(--grijs-200);}
.rekentool__regels span{color:var(--grijs-600);font-size:.9rem;}
.rekentool__regels a{margin-left:auto;color:var(--groen-700);font-weight:700;font-size:.86rem;}
.rekentool__totaal{font-size:1.05rem;}
.rekentool__totaal strong{color:var(--groen-700);}
.rekentool__wens{font-size:.9rem;color:var(--grijs-600);margin-top:.4rem;}
.rekentool__knop{margin-top:1.2rem;}
@media(max-width:820px){.rekentool__velden{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.rekentool__velden{grid-template-columns:1fr;}}
.tabelwikkel{overflow-x:auto;max-width:820px;margin:0 auto;}
.schooltabel{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--wit);
  border:1px solid var(--grijs-200);border-radius:var(--radius);overflow:hidden;}
.schooltabel th,.schooltabel td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--grijs-200);}
.schooltabel th{background:var(--groen-50);font-weight:700;color:var(--groen-800);}
.schooltabel tr:last-child td{border-bottom:0;}
.tabelnoot{max-width:820px;margin:1rem auto 0;font-size:.92rem;color:var(--grijs-600);}
.tabelnoot a{color:var(--groen-700);text-decoration:underline;}
.stappen{max-width:820px;margin:0 auto;padding-left:0;list-style:none;counter-reset:stap;}
.stappen li{counter-increment:stap;position:relative;padding:.9rem 0 .9rem 3.2rem;
  border-bottom:1px solid var(--grijs-200);}
.stappen li:last-child{border-bottom:0;}
.stappen li:before{content:counter(stap);position:absolute;left:0;top:.9rem;width:2.1rem;height:2.1rem;
  border-radius:50%;background:var(--groen-700);color:var(--wit);display:grid;place-items:center;
  font-weight:800;font-size:.95rem;}
.stappen strong{display:block;color:var(--inkt);}
.stappen span{color:var(--grijs-600);font-size:.93rem;}
.vraag{border:1px solid var(--grijs-200);border-radius:12px;background:var(--wit);margin-bottom:.7rem;}
.vraag summary{cursor:pointer;padding:1rem 1.2rem;font-weight:700;font-size:1rem;color:var(--inkt);
  list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;}
.vraag summary::-webkit-details-marker{display:none;}
.vraag summary:after{content:"+";font-weight:400;font-size:1.4rem;color:var(--groen-700);line-height:1;}
.vraag[open] summary:after{content:"–";}
.vraag[open] summary{border-bottom:1px solid var(--grijs-200);}
.vraag__antwoord{padding:1rem 1.2rem 1.2rem;color:var(--grijs-700);line-height:1.7;}
.vraag__antwoord p{margin:0 0 .8rem;}
.vraag__antwoord p:last-child{margin-bottom:0;}
.vragenlijst{max-width:820px;margin:0 auto;}
.zoekblok{position:relative;max-width:620px;margin:0 auto 2.6rem;}
.zoekblok__label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.5rem;text-align:center;}
.zoekblok__veld{width:100%;padding:.95rem 1.1rem;border:1px solid var(--grijs-300);border-radius:999px;
  font-family:inherit;font-size:1rem;}
.zoekblok__veld:focus{outline:2px solid var(--groen-500);outline-offset:1px;}
.zoekblok__uitslag{list-style:none;margin:.5rem 0 0;padding:0;display:none;background:var(--wit);
  border:1px solid var(--grijs-200);border-radius:12px;box-shadow:var(--schaduw-1);overflow:hidden;}
.zoekblok__uitslag--open{display:block;}
.zoekblok__uitslag li+li{border-top:1px solid var(--grijs-200);}
.zoekblok__uitslag a{display:flex;flex-direction:column;padding:.7rem 1rem;color:var(--inkt);}
.zoekblok__uitslag a:hover{background:var(--groen-50);}
.zoekblok__uitslag span{font-size:.82rem;color:var(--grijs-600);}
.zoekblok__leeg{padding:.8rem 1rem;font-size:.9rem;color:var(--grijs-600);}
.zoekblok__leeg button{background:none;border:0;padding:0;color:var(--groen-700);font:inherit;
  text-decoration:underline;cursor:pointer;}

/* op telefoon staat Johan achter de tekst in plaats van erboven,
   zodat de titel meteen in beeld staat */
@media(max-width:640px){
  .hero__grid{grid-template-columns:1fr;gap:0;position:relative;}
  .hero__tekstblok{padding-block:2.2rem 2.6rem;position:relative;z-index:2;}
  .hero__johan{position:absolute;right:-2rem;bottom:0;top:auto;width:72%;height:100%;
    justify-content:flex-end;align-items:flex-end;z-index:1;pointer-events:none;}
  .hero__johan img{max-height:100%;width:auto;opacity:.4;filter:none;}
  .hero h1{font-size:1.85rem;max-width:11ch;}
  .hero__kicker{font-size:.68rem;padding:.35rem .7rem;margin-bottom:.8rem;}
  .hero__tekst{font-size:.95rem;margin-top:.8rem;max-width:26ch;
    text-shadow:0 1px 12px rgba(31,56,21,.6);}
  .hero__acties{margin-top:1.4rem;}
  .hero__acties .knop{width:100%;justify-content:center;}
}
.galerij{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.galerij__tegel{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--grijs-100);aspect-ratio:1/1;}
.galerij__tegel img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.galerij__tegel:hover img{transform:scale(1.04);}
@media(max-width:900px){.galerij{grid-template-columns:repeat(3,1fr);}}
@media(max-width:600px){.galerij{grid-template-columns:repeat(2,1fr);}}
.tekstbeeld{margin:2rem 0;border-radius:var(--radius);overflow:hidden;background:var(--grijs-100);}
.tekstbeeld img{width:100%;height:auto;display:block;max-height:420px;object-fit:cover;}
.zijbalk{position:sticky;top:120px;display:flex;flex-direction:column;gap:1rem;}
.zijbalk__kaart{background:var(--wit);border:1px solid var(--grijs-200);border-radius:var(--radius);padding:1.4rem;}
.zijbalk__kaart h3{font-size:1.02rem;margin-bottom:.6rem;color:var(--inkt);}
.zijbalk__kaart p{font-size:.9rem;color:var(--grijs-600);line-height:1.6;}
.zijbalk__kaart--cta{background:var(--groen-700);border-color:var(--groen-700);}
.zijbalk__kaart--cta h3,.zijbalk__kaart--cta p{color:var(--wit);}
.zijbalk__kaart--cta .knop{margin-top:.9rem;width:100%;justify-content:center;}
.zijbalk__lijst{list-style:none;padding:0;margin:0;}
.zijbalk__lijst li{border-top:1px solid var(--grijs-200);}
.zijbalk__lijst li:first-child{border-top:0;}
.zijbalk__lijst a{display:block;padding:.55rem 0;font-size:.92rem;color:var(--grijs-700);font-weight:600;}
.zijbalk__lijst a:hover{color:var(--groen-700);}
.zijbalk__klein{font-size:.82rem;color:var(--grijs-600);margin-top:.5rem;}
.zijbalk__kaart--contact a{color:var(--groen-700);font-weight:700;}

/* ---- zekerheden met icoon ---- */
.zekerheden{background:var(--groen-900);}
.zekerheden .kicker{color:var(--amber-400);}
.zekerheden h2{color:var(--wit);}
.zekerheden .sectiekop p{color:var(--groen-100);}
.zeker__raster{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;}
.zeker__kaart--icoon{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);padding:1.6rem 1.4rem;}
.zeker__kaart--icoon .zeker__titel{color:var(--wit);margin-top:.9rem;font-size:1.05rem;}
.zeker__kaart--icoon .zeker__tekst{color:var(--groen-100);font-size:.9rem;line-height:1.65;}
.zeker__ico{width:34px;height:34px;color:var(--amber-400);}

/* ---- linktegels ---- */
.meer__raster{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;}
.meer__tegel{display:flex;align-items:center;gap:.6rem;padding:.95rem 1.1rem;background:var(--wit);
  border:1px solid var(--grijs-200);border-radius:10px;font-weight:600;font-size:.93rem;color:var(--grijs-700);}
.meer__tegel:before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--amber-400);flex-shrink:0;}
.meer__tegel:hover{border-color:var(--groen-500);color:var(--groen-700);}
.cattegels--tekst{margin:1.6rem 0 2rem;grid-template-columns:repeat(3,1fr);}

/* ---- bezorgcheck ---- */
.check{max-width:620px;margin:0 auto;background:var(--wit);border:1px solid var(--grijs-200);
  border-radius:var(--radius);padding:1.8rem;box-shadow:var(--schaduw-1);}
.check__label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.5rem;}
.check__veld{width:100%;padding:.9rem 1rem;border:1px solid var(--grijs-300);border-radius:10px;
  font-family:inherit;font-size:1rem;}
.check__veld:focus{outline:2px solid var(--groen-500);outline-offset:1px;}
.check__uitslag{margin-top:1rem;font-size:.95rem;line-height:1.6;color:var(--grijs-700);min-height:1.4em;}
.check__uitslag--ja{color:var(--groen-800);font-weight:600;}
.check__uitslag a{color:var(--groen-700);text-decoration:underline;}

/* de antwoordkaart van de bezorgcheck */
.checkkaart{display:grid;grid-template-columns:190px 1fr;gap:1.2rem;align-items:center;
  margin-top:1.2rem;padding:1rem;border-radius:14px;background:var(--groen-50);
  border:1px solid var(--groen-100);border-left:4px solid var(--groen-500);}
.checkkaart--nee{background:var(--grijs-100);border-color:var(--grijs-200);
  border-left-color:var(--grijs-400);}
.checkkaart__foto{width:100%;height:135px;object-fit:cover;border-radius:10px;display:block;}
.checkkaart__merk{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--groen-800);background:var(--groen-100);
  padding:.2rem .6rem;border-radius:999px;margin-bottom:.4rem;}
.checkkaart--nee .checkkaart__merk{color:var(--grijs-700);background:var(--grijs-200);}
.checkkaart__kop{font-size:1.15rem;line-height:1.3;margin:0 0 .3rem;color:var(--groen-900);}
.checkkaart--nee .checkkaart__kop{color:var(--inkt);}
.checkkaart__regel{font-size:.92rem;line-height:1.55;color:var(--grijs-700);margin:0;}
.checkkaart__link{display:inline-block;margin-top:.6rem;font-weight:600;font-size:.92rem;
  color:var(--groen-700);text-decoration:underline;}
@media(max-width:560px){
  .checkkaart{grid-template-columns:1fr;}
  .checkkaart__foto{height:160px;}
}
.check__noot{margin-top:1rem;}
.check__bevestiging{margin-top:1rem;padding:.9rem 1.1rem;border-radius:10px;
  background:var(--groen-50);border:1px solid var(--groen-100);color:var(--groen-800);
  font-weight:600;font-size:.95rem;}
.check__bevestiging--fout{background:#fdf2f2;border-color:#f3c9c9;color:#8f2b2b;}

@media(max-width:1000px){
  .inhoud-raster{grid-template-columns:1fr;gap:2rem;}
  .zijbalk{position:static;flex-direction:row;flex-wrap:wrap;}
  .zijbalk__kaart{flex:1 1 260px;}
  .zeker__raster{grid-template-columns:repeat(2,1fr);}
  .meer__raster{grid-template-columns:repeat(3,1fr);}
  .cattegels--tekst{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .meer__raster{grid-template-columns:1fr 1fr;}
  .zeker__raster{grid-template-columns:1fr;}
  .paginahero h1{font-size:1.7rem;}
}

.uspstrook{background:var(--amber-100);border-bottom:1px solid #f0dcb4;}
/* De bovenbalk moet op een telefoon op hoogstens twee regels passen. */
@media(max-width:640px){.topbalk{font-size:.78rem;}.topbalk__sterren-detail{display:none;}}
@media(max-width:640px){.uspstrook--nietmobiel{display:none;}}
.uspstrook__rij{display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;justify-content:center;padding:1rem 24px;}
.uspstrook__rij span{position:relative;padding-left:1.5rem;font-weight:600;font-size:.94rem;color:var(--oranje-700);}
.uspstrook__rij span:before{content:"";position:absolute;left:0;top:.35em;width:.85rem;height:.5rem;
  border-left:2px solid var(--oranje-500);border-bottom:2px solid var(--oranje-500);transform:rotate(-45deg);}
@media(max-width:640px){.uspstrook__rij{gap:.4rem 1.2rem;}.uspstrook__rij span{font-size:.85rem;}}
.voet__hoofd{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr 1.1fr;gap:2rem;}
@media(max-width:1100px){.voet__hoofd{grid-template-columns:repeat(3,1fr);}}
@media(max-width:700px){.voet__hoofd{grid-template-columns:repeat(2,1fr);}}
.ond--grijs{background:var(--grijs-100);}
.kop__nav a.actief{color:var(--groen-700);}
/* menu op één regel houden: geen woorden die over vier regels vallen */
.kop__nav a{white-space:nowrap;}
.kop__hoofd{gap:1.2rem;}
@media(min-width:981px){
  .kop__nav ul{gap:1.15rem;}
  .kop__nav a{font-size:.9rem;}
}
@media(min-width:1180px){
  .kop__nav ul{gap:1.6rem;}
  .kop__nav a{font-size:.95rem;}
}
.kruimelpad__pijl{margin:0 .45rem;color:var(--grijs-600);}
.tekst--breed{max-width:820px;}
.middenknop{text-align:center;margin-top:2.2rem;}

/* categoriemenu onder Winkel */
.kop{position:sticky;}
.catmenu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--wit);
  border-top:1px solid var(--grijs-200);box-shadow:0 18px 40px rgba(34,40,29,.14);padding:1.6rem 24px 1.3rem;z-index:60;}
.kop__nav .heeft-menu:hover .catmenu,.catmenu:hover,.catmenu.catmenu--open{display:block;}
.kop__nav .heeft-menu{position:static;}
/* Johan, 16 september 2026: "als je cursor op winkel houdt en naar categorie
   wilt is het menu in split second al weg". Gemeten op 1440 breed: tussen de
   onderkant van de menuregel (91px) en de onderkant van de kop (119px) zat een
   strook van 27 pixels waar de muis niets raakte. Daar viel hij tussenuit en
   klapte het paneel dicht voordat je erbij was.
   De padding rekt het gevoelige gebied tot aan het paneel; de negatieve marge
   houdt de opmaak op de pixel hetzelfde, zodat er niets verschuift. */
.kop__nav .heeft-menu > a{padding-bottom:32px;margin-bottom:-32px;}
/* Het mailadres in de kop stond er als tekst, niet als link -- Johan op
   16 september 2026: "staat er in kop stuur ons mail, maar is niet op de
   klikken". Nu een <a> met mailto. De kleur en het formaat blijven precies
   zoals ze waren, zodat er niets verspringt. */
/* Geen display hier! De basisopmaak zet dit blok op flex en verbergt het onder
   620px; die regel staat eerder in het bestand, dus een display: hier wint
   ervan. Op 16 september 2026 stond er display:block en toen verscheen het
   mailadres op de telefoon en duwde het de hele kop over de rand. */
.kop__telefoon{text-decoration:none;color:inherit;}
/* Met de zoekknop erbij staan er op een telefoon vier dingen naast elkaar:
   zoeken, mand, Proefbox en het menu. Op 375px was de kop 376px breed -- net
   over de rand, en op een Android van 360px verder. De tussenruimte van 1,3rem
   is daar te ruim; 0,5rem laat alles passen zonder dat iets kleiner wordt. */
@media(max-width:620px){
  .kop__acties{gap:.5rem;}
  .kop__acties .knop--klein{padding-inline:.85rem;}
}
/* Op 320px (oude iPhone SE, Galaxy Fold dicht) bleef de kop 342px breed. Daar
   mag de Proefbox-knop krapper; hij blijft gewoon staan, want dat is de knop
   waar zakelijke bezoekers voor komen. */
@media(max-width:380px){
  .kop__acties{gap:.35rem;}
  .kop__acties .knop--klein{padding-inline:.6rem;font-size:.82rem;}
  .kop__hoofd{padding-inline:10px;}
  .kop__mand svg{width:21px;height:21px;}
}
.kop__telefoon:hover strong{color:var(--groen-700);}
.kop__telefoon strong{white-space:nowrap;}
.kop__telefoon span{white-space:nowrap;}
.catmenu__raster{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem 1.6rem;}
.catmenu__item{display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem;border-radius:8px;
  font-size:.92rem;color:var(--grijs-700);font-weight:500;}
.catmenu__item:hover{background:var(--groen-50);color:var(--groen-700);}
/* De categorieen die deze maand vooraan horen. Alleen dikgedrukt en een
   iets donkerder icoon -- geen kleur of kader, want dan gaat het raster
   rommelig staan en schuift de rest optisch weg. */
.catmenu__item--uit{font-weight:700;}
/* ---- zoeken in de kop ----------------------------------------------------
   Een knop van dezelfde maat als de winkelmand, in dezelfde rij. Daardoor
   verschuift er niets en wordt er niets kleiner: het is een extra icoon in een
   rij die er al stond. Het venster zelf schuift over de pagina heen, dus ook
   dat duwt niets opzij. */
.kop__zoekknop{border:0;background:none;cursor:pointer;font:inherit;}
.zoekvenster{position:absolute;left:0;right:0;z-index:60;background:#fff;
  border-bottom:1px solid var(--grijs-200);box-shadow:0 14px 30px rgba(0,0,0,.10);}
.zoekvenster__binnen{padding:1rem 0 1.2rem;}
.zoekvenster__veld{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;
  border:2px solid var(--groen-700);border-radius:10px;background:#fff;}
.zoekvenster__veld svg{width:22px;height:22px;flex-shrink:0;color:var(--groen-700);}
.zoekvenster__veld input{flex:1;border:0;outline:0;font:inherit;font-size:1.05rem;background:none;}
.zoekvenster__veld button{border:0;background:none;font-size:1.6rem;line-height:1;
  color:var(--grijs-600);cursor:pointer;padding:0 .2rem;}
.zoekvenster__uitslag{margin-top:.8rem;max-height:60vh;overflow-y:auto;}
.zoekuit{display:flex;align-items:center;gap:.8rem;padding:.6rem .5rem;border-radius:8px;
  text-decoration:none;color:var(--inkt);}
.zoekuit:hover,.zoekuit:focus{background:var(--groen-50);}
.zoekuit__soort{margin-left:auto;font-size:.78rem;color:var(--grijs-600);white-space:nowrap;}
.zoekuit__prijs{font-weight:700;white-space:nowrap;}
.zoekvenster__leeg{padding:.8rem .5rem;color:var(--grijs-600);}
.catmenu__item--uit .catmenu__ico{color:var(--groen-700);}
.catmenu__item em{margin-left:auto;font-style:normal;font-size:.78rem;color:var(--grijs-600);}
.catmenu__ico{width:26px;height:26px;flex-shrink:0;color:var(--inkt);}
.catmenu__alles{display:block;max-width:1240px;margin:1rem auto 0;padding-top:.9rem;
  border-top:1px solid var(--grijs-200);font-weight:700;color:var(--groen-700);font-size:.92rem;}

/* categorietegels op de winkelpagina */
.cattegels{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.cattegel{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;
  padding:1.5rem 1rem;background:var(--wit);border:1px solid var(--grijs-200);border-radius:var(--radius);
  transition:border-color .15s,transform .15s;}
.cattegel:hover{border-color:var(--groen-500);transform:translateY(-2px);}
.cattegel__ico{width:44px;height:44px;color:var(--inkt);}
.cattegel__naam{font-weight:700;color:var(--inkt);font-size:.98rem;}
.cattegel__aantal{font-size:.8rem;color:var(--grijs-600);}

/* productkaarten */
.pk__cat{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grijs-600);margin-bottom:.35rem;}
.pk__naam a{color:var(--inkt);}
.pk__naam a:hover{color:var(--groen-700);}
.pk__knop{width:100%;justify-content:center;margin-top:.9rem;}
.pk__foto{display:block;}

/* productpagina */
.prod__raster{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;}
.prod__beeld{background:var(--grijs-100);border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;}
.prod__beeld img{width:100%;height:100%;object-fit:cover;}
.prod__galerij{display:flex;gap:.6rem;margin-top:.8rem;}
.prod__galerij img{width:76px;height:76px;object-fit:cover;border-radius:8px;border:1px solid var(--grijs-200);}
.prod__info h1{font-size:1.9rem;margin-bottom:.5rem;}
.prod__prijs{font-family:var(--font-kop);font-weight:800;font-size:1.7rem;color:var(--groen-700);margin-bottom:1rem;}
.prod__groter{background:#f2f6ee;border-left:3px solid #3D6B2A;padding:.6rem .85rem;margin:.2rem 0 .9rem;font-size:.94rem;}
/* Staffelkorting onder de koopknop, zie staffelblok(). */
.staffel { margin: .9rem 0 0; padding: .7rem; display: grid; gap: .45rem; border-radius: 10px; background: #eaf2e3; }
.staffel__regel { display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: .6rem .8rem; background: #fff; color: inherit; text-decoration: none;
  border: 1px solid #d7e6cb; border-radius: 10px; }
.staffel__regel:hover { border-color: #3d6b2c; }
.staffel__regel:focus-visible { outline: 2px solid #3d6b2c; outline-offset: 1px; }
.staffel__wat { display: grid; gap: .05rem; }
.staffel__wat span { font-size: .86rem; opacity: .75; font-variant-numeric: tabular-nums; }
.staffel__voordeel { flex: none; font-size: .86rem; font-weight: 700; color: #fff; white-space: nowrap;
  background: #3d6b2c; border-radius: 999px; padding: .2rem .6rem; font-variant-numeric: tabular-nums; }
.staffel__uitleg { margin: 0 .2rem; font-size: .84rem; color: #2f5222; }

/* Melding boven de koopknop: informatie, geen waarschuwing. Zie PRODUCTMELDING. */
.prod__melding{display:flex;align-items:flex-start;gap:.55rem;margin:.2rem 0 1rem;padding:.75rem .9rem;border-radius:8px;border:1px solid #e6c98a;background:#fdf6e6;color:#6b4e14;font-size:.93rem;line-height:1.5;}
.prod__melding svg{flex-shrink:0;margin-top:.15rem;}
.prod__beeld{position:relative;}
.gratisbadge{position:absolute;top:4%;right:4%;z-index:2;width:31%;aspect-ratio:1;border-radius:50%;
 background:#3D6B2A;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
 line-height:1.05;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.28);
 box-sizing:border-box;padding:.4rem;}
.gratisbadge::before{content:"";position:absolute;inset:5%;border:2px solid rgba(255,255,255,.7);border-radius:50%;}
.gratisbadge b{font-size:clamp(.85rem,3.4vw,1.5rem);font-weight:800;letter-spacing:.01em;}
.gratisbadge>span{font-size:clamp(.7rem,2.7vw,1.2rem);font-weight:700;}
.gratisbadge i{font-style:normal;font-size:clamp(.55rem,1.9vw,.85rem);font-weight:500;opacity:.92;margin-top:.15em;}
.gratisbadge i:empty{display:none;}
.beoordeling{display:flex;align-items:center;gap:.35rem;margin:0 0 .6rem;font-size:.92rem;}
.ster{font-size:1.05rem;line-height:1;}
.ster--aan{color:var(--amber-500,#c98a00);}
.ster--uit{color:var(--grijs-300,#d6d9d0);}
.beoordeling__cijfer{font-weight:700;margin-left:.2rem;}
.beoordeling__aantal{color:var(--grijs-600,#68705f);}
.pk__prijs + .beoordeling{margin:-.2rem 0 .5rem;font-size:.85rem;}
.prod__knop{width:100%;justify-content:center;margin-top:.4rem;}
.kaartkeuze{background:var(--groen-50);border:1px solid var(--groen-100);border-radius:12px;
  padding:1.1rem 1.2rem;margin:1.2rem 0;}
.kaartkeuze__kop{font-weight:700;color:var(--groen-800);margin:0 0 .8rem;font-size:.95rem;}
.kaartkeuze label{display:block;font-size:.85rem;font-weight:600;margin:.6rem 0 .3rem;}
.kaartkeuze label span{font-weight:400;color:var(--grijs-600);}
.kaartkeuze select,.kaartkeuze textarea{width:100%;padding:.65rem .8rem;border:1px solid var(--grijs-300);
  border-radius:9px;font-family:inherit;font-size:.95rem;background:var(--wit);}
.bestelform{margin:0;}
.prod__winkelnoot{font-size:.82rem;color:var(--grijs-600);margin-top:.6rem;}
.prod__usp{list-style:none;padding:0;margin:1.4rem 0 0;font-size:.9rem;color:var(--grijs-700);}
.prod__usp li{padding-left:1.5rem;position:relative;margin-bottom:.45rem;}
.prod__usp li:before{content:"";position:absolute;left:0;top:.45em;width:.7rem;height:.7rem;
  border-radius:50%;background:var(--groen-500);}
.prod__lang{max-width:820px;margin-top:3rem;}
.subcats{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.6rem;}
.subcats__knop{padding:.5rem 1rem;border:1px solid var(--grijs-300);border-radius:99px;font-size:.9rem;
  color:var(--grijs-700);font-weight:600;}
.subcats__knop span{color:var(--grijs-600);font-weight:400;}
.subcats__knop:hover{border-color:var(--groen-500);color:var(--groen-700);}

/* inhoudspagina's */
.paginakop__beeld{margin-bottom:2rem;border-radius:var(--radius);overflow:hidden;background:var(--grijs-100);
  display:flex;justify-content:center;align-items:center;}
.paginakop__beeld img{width:auto;height:auto;max-width:100%;max-height:400px;object-fit:contain;}
.ctaband{background:var(--groen-800);}
.cta-blok{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
.cta-blok h2{color:var(--wit);}
.cta-blok p{color:var(--groen-100);max-width:520px;margin-top:.6rem;}

/* blog */
.blogkaart{display:block;overflow:hidden;}
.blogkaart__foto{aspect-ratio:16/10;overflow:hidden;}
.blogkaart__foto img{width:100%;height:100%;object-fit:cover;}
.blogkaart__body{padding:1.2rem 1.3rem 1.5rem;}
.blogkaart__body h2{font-size:1.08rem;color:var(--inkt);}
.blogkaart__body p{font-size:.9rem;color:var(--grijs-600);margin-top:.5rem;}
.blogkaart__link{display:inline-block;margin-top:.9rem;font-weight:700;font-size:.86rem;color:var(--groen-700);}
.artikel{max-width:820px;margin:0 auto;}
.artikel h1{font-size:2.1rem;margin:.4rem 0 1.4rem;}
.artikel__beeld{max-width:100%;height:auto;border-radius:var(--radius);margin-bottom:2rem;display:block;}
.artikel__terug{margin-top:2.5rem;font-weight:700;}

/* contact en formulieren */
.okaart__kop{font-size:1.3rem;margin-bottom:1.2rem;}
.contact__foto{max-width:220px;margin-bottom:1.5rem;border-radius:var(--radius);}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.formulier__noot{font-size:.82rem;color:var(--grijs-600);}
.voet__lijst--kolommen{columns:2;column-gap:1rem;}
.voet__contact{font-size:.92rem;line-height:1.7;color:var(--groen-100);}
.voet__contact a{color:var(--wit);}
.alleslijst{columns:3;column-gap:2rem;font-size:.92rem;}
.alleslijst a{display:block;padding:.32rem 0;color:var(--grijs-700);break-inside:avoid;}
.alleslijst a:hover{color:var(--groen-700);}
@media(max-width:820px){.alleslijst{columns:2;}}
@media(max-width:560px){.alleslijst{columns:1;}}
.stadtegels{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem;}
.stadtegel{padding:.7rem .9rem;background:var(--wit);border:1px solid var(--grijs-200);border-radius:8px;
  text-align:center;font-weight:600;font-size:.9rem;color:var(--grijs-700);}
.stadtegel:hover{border-color:var(--groen-500);color:var(--groen-700);}
@media(max-width:980px){.stadtegels{grid-template-columns:repeat(4,1fr);}}
@media(max-width:640px){.stadtegels{grid-template-columns:repeat(2,1fr);}}
.voet__meer{display:inline-block;margin-top:.6rem;font-weight:700;font-size:.86rem;color:var(--groen-100);}

@media(max-width:980px){
  .catmenu{display:none!important;}
  .cattegels{grid-template-columns:repeat(3,1fr);}
  .prod__raster{grid-template-columns:1fr;gap:1.8rem;}
}

/* Productpagina op een telefoon: titel, prijs en koopknop op het eerste scherm.
   Gemeten op 3 september 2026, scherm 888 px hoog. Er ging 242 px op aan de
   groene balk, het menu en het kruimelpad; daarna 327 px foto en 117 px
   miniaturen. De titel kwam pas op 685 px, de prijs op 721 px en de knop op
   1.581 px - anderhalf scherm naar beneden.
   Wat de meting die dag zei: van 57 bezoekers zagen er 41 een productpagina en
   legde er precies een iets in de mand, bij een gemiddelde scrolldiepte van
   24 %. Dat is ongeveer 1.500 px, dus de gemiddelde bezoeker stopte net voor de
   knop. Zestig procent zat op een telefoon.
   Kruimelpad en miniaturen dragen op dat eerste scherm niets bij en gaan er
   daarom af; de foto wordt ingekort in plaats van vierkant. De volgorde blijft
   zoals bezoekers hem kennen: foto, titel, prijs, knop. */
@media(max-width:640px){
  .p-product .kruimelpad{display:none;}
  .p-product .prod__galerij{display:none;}
  .p-product .prod__beeld{aspect-ratio:4/3;max-height:34vh;}
  .p-product .prod__raster{gap:1rem;}
  .p-product .prod__info h1{font-size:1.5rem;margin-bottom:.35rem;}
  .p-product .prod__prijs{margin-bottom:.6rem;}

  /* De koopknop direct onder de prijs. Hij stond na de omschrijving en kwam
     daardoor alsnog op 1.418 px uit - nog altijd bijna twee schermen. De
     omschrijving schuift eronder; wie meer wil weten leest gewoon door, maar
     wie al besloten heeft hoeft niet meer te zoeken. */
  .p-product .prod__info{display:flex;flex-direction:column;}
  .p-product .prod__info h1{order:1;}
  .p-product .prod__prijs{order:2;}
  .p-product .bestelform,
  .p-product a.prod__knop{order:3;margin-bottom:1rem;}
  .p-product .prod__kort{order:4;}
  .p-product .prod__winkelnoot{order:5;}
  .p-product .prod__usp{order:6;}

  /* Het wenskaartblok is 290 px hoog en duwde bij de fruitmanden en de
     groenteboxen de knop naar 893 px - net buiten het scherm, en juist die
     producten krijgen de betaalde advertenties. Op een telefoon mag het
     compacter: de kop en de labels kleiner, minder lucht eromheen en een
     tekstvak van twee regels in plaats van drie. Wie meer wil typen, rekt het
     vak vanzelf op. */
  .p-product .kaartkeuze{padding:.7rem .8rem;margin:.7rem 0;}
  .p-product .kaartkeuze__kop{margin-bottom:.4rem;font-size:.9rem;}
  .p-product .kaartkeuze label{margin:.35rem 0 .2rem;font-size:.8rem;}
  .p-product .kaartkeuze select,
  .p-product .kaartkeuze textarea{padding:.5rem .7rem;font-size:.9rem;}
  .p-product .kaartkeuze textarea{height:3.4rem;}
}
/* Winkel- en categoriepagina's: er stond te veel tekst en lucht voordat er een
   product in beeld kwam, en de categorietegels liepen niet gelijk omdat een naam
   van twee regels de tegel hoger maakte. Dezelfde keuze op alle schermen: een
   slankere kop en tegels van gelijke hoogte. Alleen de inleidende zin verdwijnt
   uitsluitend op een telefoon, want daar kost hij een halve pagina. */
.cattegel{min-height:132px;justify-content:center;padding:1.1rem .75rem;}
/* De winkel en de categoriepagina's hadden hier hun eigen, lagere maat. Die
   is nu de maat voor iedereen; zie de regel bij .paginakop. */
/* De winkel had hier ook nog een krappere binnenruimte (25,6px tegen 35,2px
   elders). Weg, anders blijft de balk daar lager dan de rest. */
@media(max-width:640px){
  /* Deze vier regels golden alleen op de winkel en de categoriepagina's. Daar
     was de balk daardoor 196px en elders 217 tot 367 -- op een telefoon het
     verschil tussen een kop en een half scherm groen. Nu gelden ze overal:
     dezelfde krappe binnenruimte, dezelfde kopgrootte, en de inleidende zin
     valt weg. Zes op de tien bezoekers zit op een telefoon. */
  .paginakop,.paginahero{min-height:200px;}
  .paginakop > .omhulsel,.paginahero__inhoud{padding-block:1.2rem!important;}
  .paginakop h1,.paginahero h1{font-size:1.55rem;}
  .paginakop p,.paginahero__lead{display:none;}
  .cattegels{gap:.6rem;}
  .cattegel{padding:.85rem .5rem;gap:.3rem;min-height:108px;}
  .cattegel__ico{width:30px;height:30px;}
  .cattegel__naam{font-size:.88rem;line-height:1.25;}
  .cattegel__aantal{font-size:.74rem;}
}
@media(max-width:640px){
  .cattegels{grid-template-columns:repeat(2,1fr);}
  .raster--4,.raster--3{grid-template-columns:1fr 1fr;}
  .artikel h1{font-size:1.6rem;}
  .prod__info h1{font-size:1.5rem;}
}

/* ---- afbeeldingen niet uitrekken ------------------------------------------ */
/* Staat er een width in de css en een height als kenmerk op de img, dan neemt
   de browser die height letterlijk. Een vierkante foto van 600 werd zo 280 breed
   en 600 hoog. Dit hoort in de basisopmaak thuis en geldt voor de hele site. */
img{height:auto;}

/* ---- de band met de andere zakelijke oplossingen -------------------------- */
.cta__lijst{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.5rem;}
.cta__lijst li{position:relative;padding-left:1.6rem;color:var(--groen-100);font-size:.95rem;}
.cta__lijst li:before{content:"";position:absolute;left:.15rem;top:.5em;width:.7rem;height:.4rem;
  border-left:2px solid var(--amber-400);border-bottom:2px solid var(--amber-400);
  transform:rotate(-45deg);}
.cta__knoppen{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem;}
.knop--rand{background:transparent;color:var(--wit);border:2px solid rgba(255,255,255,.55);}
.knop--rand:hover{background:rgba(255,255,255,.12);border-color:var(--wit);}
/* de foto kleiner, zodat het groen eromheen rustig blijft */
.cta__beeld img{max-width:300px;max-height:300px;margin:0 auto;}
/* de penning viel achter de foto weg */
.cta__badge{z-index:2;}

/* ---- proefboxformulier met de kiststandaard ernaast ----------------------- */
.proefraster{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:2rem;
  align-items:start;max-width:1000px;margin:0 auto;}
.proefzij{color:var(--grijs-700);}
.proefzij img{width:100%;max-width:200px;margin:0 auto 1.2rem;background:var(--wit);
  border:1px solid var(--grijs-200);border-radius:var(--radius);padding:.8rem;}
.proefzij h3{color:var(--groen-800);font-size:1.15rem;margin-bottom:.5rem;}
.proefzij p{font-size:.95rem;line-height:1.6;}
.proefzij .cta__lijst{margin-top:1rem;}
.proefzij .cta__lijst li{color:var(--grijs-700);}
.proefzij .cta__lijst li:before{border-color:var(--groen-700);}
@media(max-width:860px){
  .proefraster{grid-template-columns:1fr;}
  .proefzij{text-align:center;}
  .proefzij .cta__lijst li{text-align:left;}
}

/* ---- springen naar een blok op dezelfde pagina ---------------------------- */
/* De kop blijft bovenaan staan; zonder deze marge verdwijnt de sectiekop
   eronder en land je ogenschijnlijk middenin een blok. */
section[id]{scroll-margin-top:100px;}
@media(max-width:820px){section[id]{scroll-margin-top:84px;}}

/* ---- contrast op de groene kaarten --------------------------------------- */
/* Lighthouse mat 4,02 / 3,85 / 3,39 waar 4,5 nodig is. De tinten zijn zo ver
   opgetrokken dat ze de norm halen en niet verder, zodat het beeld hetzelfde
   blijft. Het grote cijfer op de offertekaart stond in groen-100 op wit: 1,17.
   Dat is sier en geen informatie, dus dat gaat uit het voorleesscherm. */
.maten__prijs{color:#ffe6a8;}
.maten__prijs small{color:#e8f1e0;opacity:1;}
.maten__tekst{color:#eaf3e3;opacity:1;}
/* het cijfer blijft licht; het is sier, geen informatie, en wordt daarom
   uit het voorleesscherm gehaald in plaats van donkerder gemaakt */

/* ---- de vier stappen van fruit op het werk -------------------------------- */
/* LET OP: niet .stappen noemen. Die klasse is al de genummerde lijst op de
   schoolfruitpagina, met max-width 820px en een groen bolletje voor elke li. */
/* Zelfde gedachte als de jampotjes bij Quinta Hoekstra: een getekend plaatje in
   plaats van een opsomming, en een kaartje dat oplicht als je erover gaat. De
   twee kaartjes waar je iets kunt doen zijn een link; de andere twee vertellen
   alleen wat er gebeurt en zijn daarom bewust geen link. */
.stappenvak{background:linear-gradient(180deg,var(--wit) 0%,var(--groen-50) 100%);}
.stappenvak .ond,.stappenvak{padding-block:clamp(2rem,4vw,3rem);}
.stappenvak h2{font-size:clamp(1.5rem,2.4vw,1.9rem);}
.sectiekop__lead{max-width:56ch;margin:.9rem auto 0;color:var(--grijs-700);}
.stapkaarten{list-style:none;margin:1.6rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;position:relative;}
.stapkaarten > li{display:flex;position:relative;}
/* het stippellijntje tussen de kaartjes; alleen waar ze naast elkaar staan */
.stapkaarten > li:before{content:none;}
.stapkaarten > li + li:after{content:"";position:absolute;left:-1rem;top:5.4rem;width:1rem;height:0;
  background:none;border-radius:0;border-top:2px dotted var(--groen-500);}
.stapk{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:100%;
  padding:1.15rem 1rem 1.1rem;text-align:center;background:var(--wit);
  border:1px solid var(--grijs-200);border-radius:var(--radius);
  box-shadow:var(--schaduw-1);color:var(--inkt);
  transition:transform .18s, box-shadow .18s, border-color .18s;}
.stapk__nr{display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--groen-100);
  color:var(--groen-800);font-family:var(--font-kop);font-weight:800;font-size:.95rem;}
.stapk__beeld{display:block;height:58px;}
.stapk__beeld svg{display:block;}
.stapk__titel{font-family:var(--font-kop);font-weight:800;font-size:.98rem;
  line-height:1.3;color:var(--groen-800);}
.stapk__tekst{font-size:.86rem;line-height:1.45;color:var(--grijs-700);}
.stapk__link{margin-top:auto;padding-top:.55rem;font-weight:700;font-size:.86rem;
  color:var(--groen-700);}
.stapk__link:after{content:" \2192";}
.stapk--klik{border-color:var(--groen-100);}
.stapk--klik:hover,.stapk--klik:focus-visible{transform:translateY(-4px);
  box-shadow:var(--schaduw-2);border-color:var(--groen-500);}
.stapk--klik:hover .stapk__link{color:var(--oranje-600);}
.stapk--klik:focus-visible{outline:2px solid var(--groen-700);outline-offset:3px;}
@media(max-width:900px){
  .stapkaarten{grid-template-columns:1fr 1fr;gap:.9rem;}
  .stapkaarten > li + li:after{display:none;}
}
@media(max-width:420px){
  .stapkaarten{grid-template-columns:1fr;}
  .stapk{flex-direction:row;text-align:left;align-items:flex-start;gap:.9rem;
    padding:1.1rem;flex-wrap:wrap;}
  .stapk__beeld{height:48px;flex:none;}
  .stapk__beeld svg{width:48px;height:48px;}
  .stapk__nr{position:absolute;top:.7rem;right:.7rem;width:26px;height:26px;font-size:.85rem;}
  .stapk__titel,.stapk__tekst,.stapk__link{flex-basis:100%;}
  .stapk__link{margin-top:.2rem;padding-top:0;}
}
@media(prefers-reduced-motion:reduce){
  .stapk{transition:none;}
  .stapk--klik:hover{transform:none;}
}

/* ---- elke paginakop even hoog: de contactpagina is de maat ---------------- */
/* Johan, 16 september 2026: "de hoogte groene balk van de winkel moet bij alle
   pagina's zijn, nu is de 1 hoger de andere". Er stonden drie hoogtes door
   elkaar -- op 1440 breed gaf dat 325px op de winkel, 413px op contact en blog,
   en 280px op de mand en het afrekenen. Nu een maat voor alles, en dat is de
   maat van de winkel. */
.paginakop,.paginahero{display:flex;align-items:center;
  min-height:clamp(260px,26vw,372px);}
/* 24ch brak "Neem contact op met Streekvers" over twee regels en maakte die
   kop 107px hoog -- daar kwamen de 451px van /contact/ vandaan tegenover 325px
   op de winkel. Met 34ch past vrijwel elke titel op een regel en blijft de
   inhoud binnen de vaste hoogte. */
.paginakop h1,.paginahero h1{max-width:34ch;}
.paginakop p,.paginahero__lead{max-width:60ch;}
.paginakop > .omhulsel,.paginahero__inhoud{width:100%;
  padding-block:clamp(1.6rem,2.6vw,2.2rem)!important;}
.paginahero__voet{display:none;}
/* .paginakop--smal had een eigen, lagere maat; die is opgegaan in de regel
   hierboven. De klasse blijft in de HTML staan, hij doet alleen niets meer. */
@media(max-width:820px){
  .paginakop,.paginahero{min-height:200px;}
}

/* ---- productkaarten netjes op één lijn ----------------------------------- */
/* het beeld iets minder hoog: dan past een hele rij in beeld zodra je scrolt.
   De foto's staan er met object-fit:contain in, dus er wordt niets afgesneden. */
.pk__foto{aspect-ratio:5/4;}
.kaart.pk{display:flex;flex-direction:column;}
.pk__body{display:flex;flex-direction:column;flex:1;}
.pk__naam{min-height:2.7em;}
.pk__prijs{margin-bottom:.6rem;}
.pk__knop,.pk__body > a:last-child{margin-top:auto;}
.pk__body > p{margin-bottom:.9rem;}

/* ---- winkelmandknop in de kop -------------------------------------------- */
.kop__mand{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;color:var(--inkt);flex:none;}
.kop__mand:hover{background:var(--groen-50);color:var(--groen-700);}
.kop__mand svg{width:23px;height:23px;}
[hidden]{display:none!important;}
.kop__mandteller{position:absolute;top:1px;right:0;min-width:18px;height:18px;padding:0 4px;
  border-radius:9px;background:var(--groen-700);color:var(--wit);font-size:.7rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;}

/* ---- de winkelmand -------------------------------------------------------- */
.mand-raster{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:2.2rem;align-items:start;}
.mandladen{color:var(--grijs-600);}
.mandleeg{text-align:center;padding:3rem 1rem;background:var(--grijs-100);border-radius:var(--radius);}
.mandleeg p{margin-bottom:1.2rem;color:var(--grijs-700);}
.mandregel{display:grid;grid-template-columns:80px minmax(0,1fr) auto auto auto;gap:1rem;
  align-items:center;padding:1rem 0;border-bottom:1px solid var(--grijs-200);}
.mandregel__beeld{width:80px;height:80px;object-fit:contain;background:var(--grijs-100);
  border-radius:10px;padding:.3rem;}
.mandregel__naam{font-weight:700;color:var(--inkt);line-height:1.35;}
.mandregel__extra{font-weight:400;font-size:.82rem;color:var(--grijs-600);margin-top:.25rem;}
.mandregel__aantal{display:inline-flex;align-items:center;gap:.1rem;border:1px solid var(--grijs-300);
  border-radius:999px;overflow:hidden;background:var(--wit);}
.mandregel__aantal button{width:32px;height:34px;border:0;background:none;cursor:pointer;
  font-size:1.05rem;color:var(--groen-800);}
.mandregel__aantal button:hover{background:var(--groen-50);}
.mandregel__aantal span{min-width:26px;text-align:center;font-weight:700;font-size:.92rem;}
.mandregel__prijs{font-weight:800;color:var(--groen-700);white-space:nowrap;}
.mandregel__weg{border:0;background:none;cursor:pointer;font-size:1.3rem;color:var(--grijs-600);
  line-height:1;padding:.2rem .4rem;}
.mandregel__weg:hover{color:#a13d3d;}
.mandtotaal{background:var(--grijs-100);border:1px solid var(--grijs-200);border-radius:var(--radius);
  padding:1.4rem 1.5rem;position:sticky;top:1.5rem;}
.mandtotaal__regel{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.5rem 0;font-size:.95rem;}
.mandtotaal__regel--groot{border-top:1px solid var(--grijs-300);margin-top:.4rem;padding-top:.9rem;
  font-size:1.15rem;}
.mandtotaal__regel--groot strong{color:var(--groen-700);font-family:var(--font-kop);font-size:1.35rem;}
.mandtotaal__later{color:var(--grijs-600);font-size:.85rem;text-align:right;}
.mandtotaal__btw{font-size:.8rem;color:var(--grijs-600);margin:.3rem 0 1rem;}
.mandtotaal__knop{width:100%;justify-content:center;}
.mandmelding{font-size:.9rem;margin-top:.8rem;}
.mandmelding--ja{color:var(--groen-700);font-weight:600;}
.mandmelding--nee{color:#a13d3d;font-weight:600;}
/* Cookiebalk. Bewust smal en onopvallend: hij mag de winkel niet afdekken, en
   de twee knoppen zijn even groot omdat weigeren even makkelijk moet zijn als
   accepteren. Staat rechtsonder en niet over de volle breedte, zodat hij de
   mandbalk niet in de weg zit. */
.cookiebalk{position:fixed;right:1rem;bottom:1rem;z-index:70;max-width:26rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem .9rem;
  padding:.85rem 1rem;background:var(--wit,#fff);color:var(--inkt,#1d2a20);
  border:1px solid var(--rand,#dfe3da);border-radius:6px;
  box-shadow:0 6px 24px rgba(0,0,0,.14);font-size:.86rem;line-height:1.45;}
.cookiebalk__tekst{flex:1 1 13rem;margin:0;}
.cookiebalk__tekst a{color:var(--groen-700,#20502f);}
/* Grid met twee gelijke kolommen, niet flex: anders wordt de knop met de
   langste tekst breder en oogt accepteren als de hoofdkeuze. Weigeren moet
   even makkelijk zijn, en dus ook even groot. */
.cookiebalk__knoppen{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;flex:1 1 100%;}
.cookiebalk__knop{font:inherit;font-weight:600;cursor:pointer;white-space:nowrap;
  padding:.45rem .8rem;border-radius:4px;border:1px solid var(--groen-700,#20502f);}
.cookiebalk__knop--vol{background:var(--groen-700,#20502f);color:#fff;}
.cookiebalk__knop--rand{background:transparent;color:var(--groen-700,#20502f);}
.cookiebalk--weg{opacity:0;transform:translateY(.4rem);}
@media(prefers-reduced-motion:no-preference){
  .cookiebalk{transition:opacity .22s ease,transform .22s ease;}
  .cookiebalk{animation:cookiebalkop .22s ease-out;}
  @keyframes cookiebalkop{from{opacity:0;transform:translateY(.5rem);}to{opacity:1;transform:translateY(0);}}
}
@media(max-width:560px){
  .cookiebalk{left:.75rem;right:.75rem;bottom:.75rem;max-width:none;}
  .cookiebalk__knoppen{flex:1 1 100%;}
  .cookiebalk__knop{flex:1 1 0;text-align:center;}
}
.formulier__hulp{font-size:.88rem;margin-top:.9rem;color:var(--grijs-700,#555);}
.formulier__hulp a{color:var(--groen-700,#20502f);font-weight:600;}
/* Bevestigingsbalk na het toevoegen vanaf een winkelkaartje. Vast onderaan, dus
   de pagina verschuift niet; blijft staan tot de klant hem wegklikt. */
.mandbalk{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:1rem;
  flex-wrap:wrap;padding:.9rem clamp(1rem,4vw,2rem);background:var(--groen-700,#20502f);color:#fff;
  box-shadow:0 -2px 12px rgba(0,0,0,.18);}
.mandbalk__tekst{flex:1 1 14rem;font-size:.95rem;}
.mandbalk__knop{flex:0 0 auto;background:#fff;color:var(--groen-700,#20502f);}
.mandbalk__weg{flex:0 0 auto;background:none;border:0;color:#fff;font-size:1.5rem;line-height:1;
  cursor:pointer;padding:0 .3rem;}
@media(max-width:560px){.mandbalk{gap:.6rem;padding:.75rem 1rem;}.mandbalk__tekst{flex-basis:100%;}}
@media(prefers-reduced-motion:no-preference){.mandbalk{animation:mandbalkop .25s ease-out;}
  @keyframes mandbalkop{from{transform:translateY(100%);}to{transform:translateY(0);}}}

/* ---- afrekenen ------------------------------------------------------------ */
.afreken-raster{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:2.2rem;align-items:start;}
.okaart{background:var(--wit);border:1px solid var(--grijs-200);border-radius:var(--radius);
  padding:1.6rem 1.7rem;box-shadow:var(--schaduw-1);}
.okaart__kop{font-size:1.1rem;margin:1.6rem 0 .9rem;}
.okaart__kop:first-child{margin-top:0;}
.afreken__overzicht{position:sticky;top:1.5rem;background:var(--grijs-100);box-shadow:none;}
.afreken__regel{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.45rem 0;font-size:.93rem;border-bottom:1px solid var(--grijs-200);}
.afreken__regel:last-of-type{border-bottom:0;}
.afreken__regel--groot{font-size:1.12rem;padding-top:.8rem;}
.afreken__regel--groot strong{color:var(--groen-700);font-family:var(--font-kop);font-size:1.3rem;}
.afreken__keuzes{display:grid;gap:.6rem;}
.afreken__keuze{display:flex;align-items:center;gap:.7rem;border:1px solid var(--grijs-300);
  border-radius:11px;padding:.8rem 1rem;cursor:pointer;background:var(--wit);font-size:.95rem;}
.afreken__keuze:hover{border-color:var(--groen-500);}
.afreken__keuze span{flex:1;}
.afreken__keuze input{accent-color:var(--groen-700);width:18px;height:18px;}
.afreken__hint{font-size:.87rem;color:var(--grijs-600);}
.afreken__veldkop{font-weight:700;font-size:.95rem;color:var(--inkt);margin:1.3rem 0 .5rem;}
.check__vervolg{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--grijs-200);}
.check__vervolgkop{font-weight:700;margin-bottom:.8rem;color:var(--inkt);}
.formulier--check .formulier__noot{margin-top:.7rem;}
.vw__wegwijzer{background:var(--groen-50);border-left:4px solid var(--groen-500);
  padding:1rem 1.2rem;border-radius:0 10px 10px 0;margin-bottom:2rem;}
.vw h2{font-size:1.15rem;margin:2rem 0 .6rem;}
.vw__leden{margin:0;padding-left:1.4rem;}
.vw__leden li{margin-bottom:.55rem;line-height:1.65;}
.vw__slot{margin-top:2.4rem;font-size:.92rem;color:var(--grijs-600);}
.afreken__factuurkeuze{margin-top:1.1rem;padding:.85rem 1rem;background:var(--groen-50,#F1F6EC);
 border:1px solid var(--rand,#DCE3D4);border-radius:4px;}
.afreken__factuurkeuze small{color:var(--inkt-zacht,#5A6553);display:block;margin-top:.15rem;line-height:1.4;}
.afreken__factuurblok{margin-top:1.2rem;padding-top:.4rem;border-top:1px solid var(--rand,#DCE3D4);}
.afreken__akkoord{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.6rem;
  font-size:.9rem;line-height:1.5;color:var(--grijs-700);cursor:pointer;}
.afreken__akkoord input{margin-top:.2rem;width:18px;height:18px;flex:none;accent-color:var(--groen-700);}
.afreken__akkoord a{color:var(--groen-700);text-decoration:underline;text-underline-offset:2px;}
.afreken__akkoord--vergeten{color:#a13d3d;}
.afreken__akkoord--vergeten a{color:#a13d3d;}
/* Het veld dat aandacht nodig heeft. Rand plus achtergrond, want kleur alleen
   is niet genoeg voor wie slecht kleuren onderscheidt. */
.afreken__veld--fout{border-color:#a13d3d;background:#fdf6f6;outline:2px solid #a13d3d;outline-offset:-2px;}
/* de dagen naast elkaar, zodat het een keuze blijft en geen lijst */
.afreken__keuzes--kort{grid-template-columns:1fr 1fr;}
.afreken__keuzes--kort .afreken__keuze{padding:.6rem .8rem;font-size:.9rem;}
@media(max-width:520px){.afreken__keuzes--kort{grid-template-columns:1fr;}}
#bestelknop{width:100%;justify-content:center;margin-top:1.4rem;}
#bestelknop[disabled]{opacity:.55;cursor:not-allowed;}
.bestelling__status{font-size:1.05rem;font-weight:600;color:var(--groen-700);}

@media(max-width:900px){
  .mand-raster,.afreken-raster{grid-template-columns:1fr;}
  .mandtotaal,.afreken__overzicht{position:static;}
}
@media(max-width:560px){
  .mandregel{grid-template-columns:64px minmax(0,1fr) auto;row-gap:.6rem;}
  .mandregel__beeld{width:64px;height:64px;}
  .mandregel__aantal{grid-column:2;}
  .mandregel__prijs{grid-column:3;text-align:right;}
  .mandregel__weg{grid-row:1;grid-column:3;justify-self:end;}
}