body{margin:0;background:#F6F1E3}
.vv{--nacht:#0D180A;--groen:#1D3B17;--groen2:#2D5424;--lim:#C3DC3F;--limk:#B4D335;--creme:#F6F1E3;--creme2:#ECE4CC;--wit:#FFFDF6;--inkt:#1A2416;--grijs:#4B5843;--ijs:#D3ECF3;background:var(--creme);color:var(--inkt);font-family:'Myriad Pro',Myriad,'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:17px;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased}
.vv *{box-sizing:border-box}
:where(.vv) :is(h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote,address){margin:0}
.vv ul,.vv ol{padding:0}
.vv address{font-style:normal}
:where(.vv) a{color:inherit}
:where(.vv) img{display:block;max-width:100%;height:auto}
.vv svg{display:block;flex:none}
.binnen{width:100%;max-width:1220px;margin:0 auto;padding-left:20px;padding-right:20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* menubalk */
.kop{position:sticky;top:0;z-index:20;background:rgba(246,241,227,.96);border-bottom:1px solid rgba(29,59,23,.12)}
.kop__rij{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:66px}
.logo{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none}
.logo__kip{height:42px;width:auto}
.logo__woord{height:20px;width:auto}
.nav{display:none}
.kop__rechts{display:flex;align-items:center;gap:8px}
.menuknop{display:inline-grid;place-items:center;width:46px;height:46px;padding:0;border-radius:50%;border:2px solid var(--groen);background:transparent;color:var(--groen);cursor:pointer}
.menuknop svg{width:20px;height:20px}

/* knoppen: een pil met een rond icoon, zoals op de posts */
.knoppen{display:flex;flex-wrap:wrap;gap:12px}
.knop{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 24px 0 7px;border:0;border-radius:999px;font-family:inherit;font-weight:700;font-size:18px;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer}
.knop__i{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;flex:none}
.knop__i svg{width:21px;height:21px}
.knop__tekst{padding-top:2px}
.knop--app{background:var(--limk);color:var(--groen);box-shadow:0 8px 22px rgba(13,24,10,.22)}
.knop--app .knop__i{background:var(--groen);color:var(--lim)}
.knop--tel{background:var(--wit);color:var(--groen);box-shadow:0 8px 22px rgba(13,24,10,.22)}
.knop--tel .knop__i{background:var(--limk);color:var(--groen)}
.knop--groen{background:var(--groen);color:var(--wit)}
.knop--groen .knop__i{background:var(--limk);color:var(--groen)}
.knop--rand{padding:0 24px;border:2px solid currentColor;background:transparent}
.knop--kop{min-height:46px;padding:0 3px;gap:0;box-shadow:none}
.knop--kop .knop__i{width:40px;height:40px}
.knop--kop .knop__tekst{display:none}

/* het limoen etiket met stippelrand */
.etiket{position:relative;display:inline-block;background:var(--lim);color:var(--groen);border-radius:16px;padding:15px 20px 13px;text-align:center;box-shadow:0 14px 28px rgba(13,24,10,.3)}
.etiket::before{content:"";position:absolute;inset:6px;border:2px dashed rgba(29,59,23,.45);border-radius:11px;pointer-events:none}
.etiket__groot{display:block;font-weight:900;letter-spacing:-.01em;line-height:.9;font-size:44px}
.etiket__klein{display:block;font-weight:700;font-size:13px;letter-spacing:.2em;margin-right:-.2em;line-height:1}
.etiket__klein+.etiket__groot,.etiket__groot+.etiket__klein{margin-top:7px}

/* oormerk: het etiket in de vorm van een oormerk, alleen op de schapenpagina */
.oormerk{position:relative;display:inline-flex;flex-direction:column;align-items:center;background:var(--lim);color:var(--groen);border-radius:24px 24px 30px 30px;padding:36px 22px 18px;text-align:center;box-shadow:0 14px 28px rgba(13,24,10,.3)}
.oormerk::before{content:"";position:absolute;top:11px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--groen)}
.oormerk::after{content:"";position:absolute;inset:6px;border:2px dashed rgba(29,59,23,.4);border-radius:19px 19px 25px 25px;pointer-events:none}

/* handschrift (één regel boven een kop) en koppen */
.hand{display:inline-block;font-family:Caveat,'Segoe Print','Bradley Hand',cursive;font-weight:600;font-size:30px;line-height:1;letter-spacing:normal;color:var(--groen2);transform:rotate(-3deg);transform-origin:left bottom}
.hand--kop{display:table;margin:0 0 14px}
.h1__sub{display:block;margin-top:18px;font-weight:600;font-size:20px;line-height:1.3;letter-spacing:0;color:rgba(255,253,246,.92)}
.merk{display:inline-flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none}
.merk img{width:180px;height:auto}
.merk span{font-weight:600;font-size:15px;line-height:1;letter-spacing:.3em;margin-right:-.3em;color:var(--wit)}
.h1{font-weight:900;font-size:44px;line-height:.92;letter-spacing:-.015em;color:var(--wit)}
.h2{font-weight:900;font-size:38px;line-height:.96;letter-spacing:-.015em;color:var(--groen)}
.h3{font-weight:900;font-size:24px;line-height:1.05;letter-spacing:-.01em;color:var(--groen)}
.lim{color:var(--lim)}
.mark{background-image:linear-gradient(transparent 60%,var(--lim) 60%,var(--lim) 92%,transparent 92%);padding:0 .05em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.intro{font-size:18px;line-height:1.55;color:var(--grijs);max-width:36em}
.koptekst{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.op-donker .hand{color:var(--wit)}
.op-donker .h2,.op-donker .h3{color:var(--wit)}
.op-donker .intro{color:rgba(255,253,246,.86)}

/* secties */
.sectie{padding:72px 0}
.donker{background:var(--groen);color:var(--wit)}
.nacht{background:var(--nacht);color:var(--wit)}
.creme2{background:var(--creme2)}
.twee{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}

/* puntdak van de automaat als fotolijst, met een limoen schaduw */
.dak{clip-path:polygon(50% 0,100% 18%,100% 100%,0 100%,0 18%)}
.dakvak{position:relative;width:100%}
.dakvak__schaduw{position:absolute;inset:0;background:var(--limk);transform:translate(14px,14px)}
.dakvak__foto{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--groen)}
.dakvak__foto img,.foto img{width:100%;height:100%;object-fit:cover}
.foto{position:relative;overflow:hidden;border-radius:20px;background:var(--groen)}

/* de groene balk met producten, stil in het midden */
.band{background:var(--groen);color:var(--wit);padding:18px 0;overflow:hidden}
.band__rij{display:flex;justify-content:center;align-items:center;white-space:nowrap;font-weight:900;font-size:21px;letter-spacing:-.01em}
.band__ster{color:var(--lim);font-size:.7em;padding:0 .6em}

/* de lichtkrant: de groene balk die doorloopt. De beweging komt uit een script (ook bij "minder beweging" in Windows),
   met een pauzeknop; het spoor bevat de rij twee keer (de tweede aria-hidden) zodat hij naadloos rondloopt */
.lichtkrant{position:relative;overflow:hidden;background:var(--groen);color:var(--wit)}
.lichtkrant__spoor{display:flex;width:max-content;will-change:transform}
.lichtkrant__rij{display:flex;align-items:center;flex:none;min-height:60px;white-space:nowrap;font-weight:900;font-size:21px;letter-spacing:-.01em}
.lichtkrant__rij span{display:inline-flex;align-items:center;gap:8px}
.lichtkrant__ster{color:var(--lim);font-size:.7em;padding:0 .7em}
.lichtkrant__lim{color:var(--lim)}
.lichtkrant__rij svg{width:.85em;height:.85em}
.lichtkrant__pauze{position:absolute;right:8px;top:50%;margin-top:-22px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--nacht);color:var(--lim);box-shadow:0 0 0 6px var(--groen);cursor:pointer}
.lichtkrant__pauze svg{width:16px;height:16px}

/* het vrieslabel: alles uit de automaat is diepgevroren (groot op de automaat, klein waar het terugkomt) */
.vries{position:relative;display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 9px;border-radius:14px;background:var(--wit);color:var(--groen);box-shadow:0 10px 24px rgba(13,24,10,.25)}
.vries::before{content:"";position:absolute;inset:5px;border:2px dashed rgba(29,59,23,.32);border-radius:10px;pointer-events:none}
.vries__i{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ijs);color:var(--groen);flex:none}
.vries__i svg{width:22px;height:22px}
.vries__tekst{display:flex;flex-direction:column;line-height:1}
.vries__klein{font-weight:700;font-size:11px;letter-spacing:.2em;margin-right:-.2em}
.vries__groot{margin-top:4px;font-weight:900;font-size:19px;letter-spacing:-.01em}
.vries--klein{gap:7px;padding:4px 12px 4px 4px;border-radius:999px;box-shadow:none;font-weight:700;font-size:14px;line-height:1.2}
.vries--klein::before{display:none}
.vries--klein .vries__i{width:26px;height:26px}
.vries--klein .vries__i svg{width:16px;height:16px}

/* kaarten, lijsten, prijsbord, recensies */
.kaart{background:var(--wit);border:1px solid rgba(29,59,23,.14);border-radius:22px;padding:22px}
.lijst{list-style:none}
.lijst li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 0;border-top:1px dashed rgba(29,59,23,.2);font-weight:600}
.pittig{flex:none;color:#A63D17;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.bord{list-style:none;padding:4px 20px;border-radius:20px;background:rgba(0,0,0,.22);border:1px solid rgba(195,220,63,.28)}
.bord li{display:flex;align-items:baseline;gap:10px;padding:13px 0;border-bottom:1px solid rgba(255,253,246,.12)}
.bord li:last-child{border-bottom:0}
.bord__naam{font-weight:700;font-size:18px}
.bord__lijn{flex:1;min-width:12px;border-bottom:2px dotted rgba(255,253,246,.3);transform:translateY(-4px)}
.bord__prijs{font-weight:900;font-size:26px;line-height:1;color:var(--lim);white-space:nowrap}
.bord__prijs small{font-weight:600;font-size:13px;color:rgba(255,253,246,.72)}
.kenmerken{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.kenmerken li{padding:7px 14px;border-radius:999px;border:1.5px solid rgba(195,220,63,.55);font-weight:700;font-size:14px}
.stem{background:var(--wit);border:1px solid rgba(29,59,23,.14);border-radius:22px;padding:24px}
.stem--lim{background:var(--lim);border-color:transparent}
.stem blockquote{font-size:18px;line-height:1.45;font-weight:600;color:var(--groen)}
.stem figcaption{margin-top:14px;font-weight:700;font-size:15px;color:var(--groen)}
.sterren{display:inline-flex;gap:2px;color:#B7791F}
.sterren svg{width:16px;height:16px}

/* wat nog komt: zichtbaar op het canvas, op de echte site pas als het er is */
.komtnog{display:flex;gap:12px;align-items:flex-start;border:2px dashed rgba(29,59,23,.45);border-radius:16px;padding:14px 16px;background:rgba(195,220,63,.18);color:var(--groen);font-size:15.5px;line-height:1.45}
.komtnog__label{flex:none;padding:4px 8px;border-radius:6px;background:var(--groen);color:var(--lim);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.op-donker .komtnog{border-color:rgba(195,220,63,.6);background:rgba(195,220,63,.1);color:var(--wit)}
.op-donker .komtnog__label{background:var(--lim);color:var(--groen)}
.fotovak{display:grid;place-items:center;text-align:center;padding:20px;border:2px dashed rgba(29,59,23,.4);border-radius:20px;background:repeating-linear-gradient(135deg,rgba(29,59,23,.05) 0 14px,rgba(29,59,23,.1) 14px 28px);color:var(--groen);font-weight:700}
.op-donker .fotovak{border-color:rgba(195,220,63,.55);background:repeating-linear-gradient(135deg,rgba(195,220,63,.06) 0 14px,rgba(195,220,63,.12) 14px 28px);color:var(--lim)}

/* vragen */
.vragen{display:flex;flex-direction:column;gap:10px}
.vraag{background:var(--wit);border:1px solid rgba(29,59,23,.14);border-radius:18px}
.vraag summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:12px 20px;font-weight:700;font-size:17px;color:var(--groen);cursor:pointer;list-style:none}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--lim);color:var(--groen);font-weight:900;font-size:20px;line-height:1}
.vraag[open] summary::after{content:"\2212"}
.vraag p{padding:0 20px 18px;color:var(--grijs)}

/* voet */
.voet{background:var(--nacht);color:rgba(255,253,246,.86);padding:56px 0 40px}
.voet__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.voet__kop{font-weight:900;font-size:18px;color:var(--wit);margin-bottom:6px}
.voet a{text-decoration:none}
.voet__lijst{list-style:none;display:flex;flex-direction:column}
.voet__lijst a{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px}
.voet svg{width:18px;height:18px}
.voet__onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,253,246,.14);font-size:14px;color:rgba(255,253,246,.66)}

/* vaste balk onderin op de telefoon: bestellen met één tik */
.belbalk{position:sticky;bottom:0;z-index:30;display:flex;gap:8px;padding:10px 12px;background:rgba(13,24,10,.96);border-top:1px solid rgba(195,220,63,.22)}
.belbalk .knop{flex:1 1 0;justify-content:center;min-height:50px;padding:0 14px 0 5px;font-size:16px;box-shadow:none}
.belbalk .knop__i{width:38px;height:38px}

@media (max-width:359px){.logo__kip{height:34px}.logo__woord{height:16px}}
@media (max-width:599px){.band__extra{display:none}}
@media (min-width:900px){
  .binnen{padding-left:40px;padding-right:40px}
  .nav{display:flex;align-items:center;gap:4px}
  .nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 15px;border-radius:999px;font-weight:600;font-size:16px;color:var(--groen);text-decoration:none}
  .nav a[aria-current="page"]{background:var(--lim)}
  .menuknop{display:none}
  .knop--kop{padding:0 20px 0 3px;gap:10px}
  .knop--kop .knop__tekst{display:inline;font-size:16px}
  .hand{font-size:38px}
  .h1{font-size:92px}
  .h1__sub{font-size:24px;margin-top:22px}
  .merk img{width:240px}
  .merk span{font-size:18px}
  .h2{font-size:60px}
  .h3{font-size:28px}
  .intro{font-size:19px}
  .sectie{padding:108px 0}
  .twee{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center}
  .band__rij{font-size:30px}
  .lichtkrant__rij{min-height:76px;font-size:30px}
  .voet__raster{grid-template-columns:1.3fr 1fr 1fr 1fr}
  .belbalk{display:none}
}
@media (min-width:900px) and (max-width:1023px){.nav a{padding:0 10px}.knop--kop{padding:0 3px;gap:0}.knop--kop .knop__tekst{display:none}}

/* ===== Fourage (f-): alleen voor deze pagina. Geen handschrift op deze pagina. ===== */


.f-samen{white-space:nowrap}
@media (max-width:379px){.f-pagina .h2{font-size:34px}}

/* held: hun foto groot, merknaam linksboven, etiket rechtsboven, tekst onderin (zoals de fourage-post) */
.f-held{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:780px;background:var(--nacht);color:var(--wit)}
.f-held .f-held__foto{position:absolute;max-width:none}
.f-held .f-held__foto--staand{top:0;left:calc(5% - 67.5px);width:calc(100% + 150px);height:auto}
.f-held .f-held__foto--liggend{display:none}
.f-held__overloop{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,20,8,.5) 0,rgba(10,20,8,0) 160px),linear-gradient(0deg,#0D180A 0,#0D180A 150px,rgba(13,24,10,.92) 240px,rgba(13,24,10,.78) 340px,rgba(13,24,10,.5) 420px,rgba(13,24,10,0) 490px)}
.f-held__binnen{position:relative;flex:1 0 auto;display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding-top:22px;padding-bottom:40px}
.f-held__boven{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.f-held__merk img{width:150px}
.f-held__merk span{text-shadow:0 2px 12px rgba(0,0,0,.3)}
.f-held__etiket{flex:none;margin-top:28px;transform:rotate(-7deg)}
.f-held__etiket .etiket__groot{font-size:32px}
.f-held .h1{text-shadow:0 3px 22px rgba(0,0,0,.32)}
.f-held__onder{display:flex;flex-direction:column;align-items:flex-start;gap:24px;margin-top:18px}
.f-held__zin{max-width:30em;font-size:18px;line-height:1.5;color:rgba(255,253,246,.92);text-shadow:0 2px 12px rgba(0,0,0,.3)}

/* het assortiment */
.f-kop2{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.f-soorten{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:36px}
.f-soort{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.f-soort .lijst{align-self:stretch}
.f-soort__naam{padding:9px 14px 7px;border-radius:10px;background:var(--lim);color:var(--groen);font-weight:900;font-size:22px;line-height:1;letter-spacing:-.005em}
.f-soort__regel{font-weight:600;font-size:15px;color:var(--grijs)}
.f-prijs{margin-top:28px;max-width:40em;font-weight:600;font-size:18px;line-height:1.45;color:var(--groen)}
.f-assort .komtnog{margin-top:16px}
/* hun eigen foto's van de fourage (27-10), met een regel handschrift eronder */
.f-assort .f-fotos{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;margin-top:30px}
.f-fotos .foto{aspect-ratio:4/3;border-radius:16px}
.f-assort .f-fotos figcaption{margin-top:6px;font-family:Caveat,'Segoe Print','Bradley Hand',cursive;font-weight:600;font-size:23px;line-height:1.1;color:var(--groen2)}

/* afhalen of bezorgen, met het bezorgkaartje: 10 km = de straal van de cirkel, de plaatsen op hun echte plek */
.f-bezorg{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
/* het kaartje (sinds 27-10 avond een echte kaart: wegen, water, bebouwing en plaatsen uit OpenStreetMap, op hun echte
   plek; gemaakt door kaart.mjs, door bouw.mjs ingezet op <!--kaart-->), met de cirkel van 10 km om het erf */
.f-kaart{width:100%;max-width:560px}
.f-kaart .k{display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.k-grond{fill:#13270F}
.k-bebouwd{fill:rgba(255,253,246,.15)}
.k-rivier,.k-kanaal,.k-hoofd,.k-snel{fill:none;stroke-linejoin:round;stroke-linecap:round}
.k-rivier{stroke:#86B9C8;stroke-opacity:.5;stroke-width:2.2}
.k-kanaal{stroke:#86B9C8;stroke-opacity:.75;stroke-width:4.5}
.k-hoofd{stroke:rgba(255,253,246,.2);stroke-width:2}
.k-snel{stroke:rgba(255,253,246,.42);stroke-width:4}
.k-buiten{fill:rgba(8,16,6,.55)}
.k-cirkel{fill:none;stroke:#C3DC3F;stroke-opacity:.85;stroke-width:3;stroke-dasharray:12 9}
.k-plek{fill:#FFFDF6}
.k-naam{font-weight:600;font-size:32px;fill:rgba(255,253,246,.92);paint-order:stroke;stroke:#13270F;stroke-width:7px;stroke-linejoin:round}
.k-naam--groot{font-weight:800;font-size:38px;fill:#FFFDF6}
.k-naam--erf{font-weight:800;font-size:34px;fill:#C3DC3F}
.k-erf{fill:#C3DC3F;stroke:#13270F;stroke-width:4}
.k-noord circle{fill:#1D3B17;stroke:#C3DC3F;stroke-width:2.5}
.k-noord text{font-weight:800;font-size:22px;fill:#C3DC3F}
.f-kaart__uitleg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:18px;font-weight:600;font-size:14px;color:rgba(255,253,246,.8)}
.f-kaart__bron{margin-left:auto;font-weight:400;font-size:12px;color:rgba(255,253,246,.55)}
.f-kaart__lijn{display:block;flex:none;width:28px;border-top:2px dashed rgba(195,220,63,.65)}
.f-plaatsen{margin-top:14px;max-width:36em;font-size:16px;line-height:1.55;color:rgba(255,253,246,.84)}

/* van het erf: foto 66, alleen de bovenste helft (onderaan staat de merknaam van de maaier) */
/* de trekker (sinds 27-10 avond hun foto scherper gemaakt met kie.ai); de band laat de hele trekker zien, op elke breedte */
.f-erf__foto{position:relative;aspect-ratio:16/10;margin-top:36px;overflow:hidden;background:var(--groen)}
.f-erf__foto img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 40%}
.f-erf__door{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:28px}
.f-erf__door p{font-weight:600;font-size:18px;line-height:1.45;color:var(--groen)}
.f-erf__door .knop{color:var(--groen)}

/* vragen en contact */
.f-vragen{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.f-contact{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:32px 22px;border:1px solid rgba(29,59,23,.14);border-radius:28px;background:var(--wit)}
.f-contact__adres{margin-top:22px;font-weight:700;font-size:19px;line-height:1.35;color:var(--groen)}

/* voet */
.f-voet__logo{width:170px;margin-bottom:20px}
.f-voet .voet__lijst a{min-width:44px}
.f-voet .voet__lijst svg{width:18px;height:18px;color:var(--lim)}
.f-voet__open li{padding:5px 0;line-height:1.45}
.f-voet__open b{font-weight:700;color:var(--wit)}
.f-voet .voet__onder a{text-decoration:underline;text-underline-offset:3px}

/* kleinste telefoons (onder 360): de kop en de koppen iets kleiner, zodat ze dezelfde twee regels houden als op 360 en breder; de contactkaart minder ingesprongen, zodat de WhatsApp-knop erin past */
@media (max-width:359px){
  .f-held .h1{font-size:40px}
  .f-pagina .h2{font-size:31px}
  .f-contact{padding:32px 12px}
}
@media (min-width:600px){
  .f-held .f-held__foto--staand{display:none}
  .f-held .f-held__foto--liggend{display:block;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 75%}
  .f-held__overloop{background:linear-gradient(180deg,rgba(10,20,8,.6) 0,rgba(10,20,8,0) 200px),linear-gradient(0deg,#0D180A 0,#0D180A 150px,rgba(13,24,10,.92) 240px,rgba(13,24,10,.78) 340px,rgba(13,24,10,.5) 420px,rgba(13,24,10,0) 490px)}
  .f-soorten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .f-held{min-height:840px}
  .f-held__overloop{background:linear-gradient(180deg,rgba(10,20,8,.6) 0,rgba(10,20,8,0) 200px),linear-gradient(90deg,rgba(10,20,8,.5) 0,rgba(10,20,8,0) 40%),linear-gradient(0deg,rgba(10,20,8,.95) 0,rgba(10,20,8,.86) 180px,rgba(10,20,8,.66) 330px,rgba(10,20,8,0) 500px)}
  .f-held__binnen{padding-top:44px;padding-bottom:56px}
  .f-held__merk img{width:240px}
  .f-held__etiket{margin-top:18px;margin-right:6px}
  .f-held__etiket .etiket__groot{font-size:52px}
  .f-held__etiket .etiket__klein{font-size:15px}
  .f-held .h1{font-size:76px}
  .f-held__zin{font-size:19px}
  .f-erf__foto{aspect-ratio:auto;height:clamp(440px,36vw,640px);margin-top:52px}
  .f-erf__foto img{object-position:50% 30%}
  .f-erf__door{justify-content:space-between;margin-top:32px}
  .f-contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:64px;padding:56px}
}
/* tussenmaat 900-1199: de tekst staat nog boven het kaartje; kaartje en plaatsenzin dan naast elkaar, zonder lege strook rechts */
@media (min-width:900px) and (max-width:1199px){
  .f-bezorg__kaart{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:center;gap:40px}
  .f-bezorg__kaart .f-plaatsen{margin-top:0}
}
/* twee kolommen pas vanaf 1200: daaronder zijn de kolommen te smal voor koppen van 60 px; de vier soorten ook pas vanaf 1200 naast elkaar, daaronder past "Bodembedekking" niet in de kaart */
@media (min-width:1200px){
  .f-soorten{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .f-assort .f-fotos{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
  .f-held{min-height:740px}
  .f-held__overloop{background:linear-gradient(180deg,rgba(10,20,8,.6) 0,rgba(10,20,8,0) 200px),linear-gradient(90deg,rgba(10,20,8,.5) 0,rgba(10,20,8,0) 40%),linear-gradient(0deg,rgba(10,20,8,.95) 0,rgba(10,20,8,.85) 160px,rgba(10,20,8,.6) 300px,rgba(10,20,8,0) 440px)}
  .f-held .h1{font-size:92px}
  .f-held__onder{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:20px 40px;margin-top:26px}
  .f-kop2{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:64px}
  .f-bezorg{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:72px}
  .f-vragen{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:64px}
}
/* heel brede schermen: de foto wordt hoger, dus het vlak ook, zodat merknaam en etiket boven wagen en trekker blijven; de overloop bovenin wat sterker, want daar staat FOURAGE in de heldere lucht */
@media (min-width:1600px){
  .f-held{min-height:860px}
  .f-held .f-held__foto--liggend{object-position:50% 55%}
  .f-held__overloop{background:linear-gradient(180deg,rgba(10,20,8,.7) 0,rgba(10,20,8,0) 260px),linear-gradient(90deg,rgba(10,20,8,.5) 0,rgba(10,20,8,0) 40%),linear-gradient(0deg,rgba(10,20,8,.95) 0,rgba(10,20,8,.85) 160px,rgba(10,20,8,.6) 300px,rgba(10,20,8,0) 440px)}
}
/* vanaf 2300 de foto hoger in beeld: anders komt FOURAGE op het hooi te staan; zo blijft hij voor de bomenrij en het etiket in de lucht */
@media (min-width:2300px){
  .f-held .f-held__foto--liggend{object-position:50% 40%}
}