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}}

/* ===== Schapen: alleen voor deze pagina (voorvoegsel s-) ===== */


/* held: sinds 27-10 avond de volle held uit site.css, met de kudde in de wei (kie.ai, naar hun eigen schapen) en het
   grote oormerk rechtsboven */
.vol.vol--schapen{--x:60%;--x-tel:84%}
.vol--schapen .vol__etiket .etiket__groot{font-size:34px}
.s-h1{font-size:35px}

/* twee rassen: per ras een oormerk met de naam, de kop, de feiten en een fotovak */
.s-rassen{display:grid;grid-template-columns:minmax(0,1fr);gap:80px}
.s-ras{display:flex;flex-direction:column;align-items:flex-start}
.s-ras .oormerk{margin:0 0 28px 6px;transform:rotate(-6deg)}
.s-ras + .s-ras .oormerk{transform:rotate(5deg)}
.s-oormerk__naam{display:block;font-weight:900;font-size:26px;line-height:1;letter-spacing:.04em;margin-right:-.04em}
.s-ras__kop{font-size:36px}
/* "schapenras" in de kop zelf: alleen "Swifter" geeft in Google ook Swiffer, alleen "noordhollander" kruiswoordpuzzels */
.s-ras__soort{display:block;margin-top:10px;font-weight:600;font-size:17px;line-height:1.3;letter-spacing:0;color:var(--grijs)}
.s-ras__feiten{align-self:stretch;max-width:36em;margin:22px 0 28px}
.s-ras__feiten p{padding:14px 0;border-top:1px dashed rgba(29,59,23,.24);color:var(--grijs)}
.s-ras__feiten p:first-child{padding-top:0;border-top:0;font-size:18px;color:var(--inkt)}
/* per ras een foto (27-10 avond; kie.ai, naar hun eigen schapen), op de computer tussen de kop en de feiten */
.s-ras__foto{align-self:stretch;aspect-ratio:4/3;margin-top:24px}
.s-fotovak{align-self:stretch;aspect-ratio:4/3}
/* hun eigen schapen (27-10): drie foto's onder de rassen, zonder ras erbij (welke welk is, vragen we Debby) */
.s-fotos{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:64px}
.s-fotos .foto{aspect-ratio:4/3}
.s-fotos figcaption{margin-top:8px;font-family:Caveat,'Segoe Print','Bradley Hand',cursive;font-weight:600;font-size:26px;line-height:1.1;color:var(--groen2)}
@media (min-width:600px){.s-fotos{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
/* verborgen kop "Twee rassen" voor schermlezers, zodat de koppen niet van h1 naar h3 springen. Zoals .sr, maar zonder
   het vak van 1 px: dat meldt meet-borden als te breed */
.s-verborgen{position:absolute;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* koppen waarvan het gemarkeerde deel bij elkaar blijft (niet tussen 900 en 999 px: daar is de kolom te smal) */
@media (max-width:899px),(min-width:1000px){.s-heel .mark{white-space:nowrap}}

/* behoud */
.s-behoud__tekst{display:flex;flex-direction:column;gap:18px}

/* trots: Debby's slotzin groot, als citaat */
.s-trots{padding:88px 0 96px}
.s-citaat{max-width:1040px}
.s-citaat blockquote::before{content:"\201C";display:block;height:46px;font-weight:900;font-size:100px;line-height:1;color:var(--lim)}
.s-citaat blockquote p{font-weight:900;font-size:32px;line-height:1.06;letter-spacing:-.015em;color:var(--wit)}
.s-citaat figcaption{display:flex;align-items:center;gap:12px;margin-top:28px;font-weight:700;font-size:16px;color:rgba(255,253,246,.86)}
.s-citaat figcaption::before{content:"";width:36px;height:3px;border-radius:2px;background:var(--lim)}

/* contact */
.s-contact__rij{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
.s-contact__doen{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.s-adres a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:700;font-size:19px;line-height:1.3;color:var(--groen);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:rgba(29,59,23,.35)}
.s-adres svg{width:22px;height:22px}
.s-stage{font-weight:600;font-size:17px;line-height:1.5;color:var(--grijs)}
.s-stage a{font-weight:700;color:var(--groen);text-decoration-thickness:2px;text-underline-offset:4px}

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

@media (max-width:359px){.vol--schapen .vol__etiket .etiket__groot{font-size:28px}}
@media (min-width:360px){.s-h1{font-size:40px}}
@media (min-width:385px){.s-h1{font-size:44px}}
@media (min-width:900px){
  .s-h1{font-size:54px}
  .vol--schapen .vol__etiket .etiket__groot{font-size:38px}
  .s-rassen{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
  .s-ras__kop{font-size:44px}
  .s-oormerk__naam{font-size:30px}
  .s-ras__feiten{order:2;margin:30px 0 0}
  .s-fotovak{margin-top:24px}
  .s-trots{padding:120px 0 128px}
  .s-citaat blockquote::before{height:58px;font-size:124px}
  .s-citaat blockquote p{font-size:46px}
  .s-citaat figcaption{margin-top:34px;font-size:18px}
  .s-contact__rij{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:end}
}
/* de h1 vanaf 1000 px groter dan de h2 (60 px); tussen 900 en 999 past dat niet naast het dak, daar blijft hij 54 */
@media (min-width:1000px){.s-h1{font-size:64px}}
@media (min-width:1100px){.s-h1{font-size:76px}}
@media (min-width:1200px){
  .s-h1{font-size:84px}
  .s-rassen{gap:80px}
  .s-ras__kop{font-size:56px}
  .s-citaat blockquote p{font-size:58px}
}