/* site.css — wat de echte site extra nodig heeft bovenop de opmaak van de borden (Van Vlerken, 27-10-2026). */
html{scroll-padding-top:84px}
/* altijd licht (28-10): Debby's telefoon (Samsung Internet in donkere modus) kleurde de site zelf donker: de crème
   menubalk werd bruin, het groene logo onleesbaar, limoen werd donkergroen. "only light" (ook als meta in de kop) zegt
   de browser dat hij niets mag omkleuren; het blok voor donkere modus is er voor browsers die alleen kijken of een site
   zelf iets voor donker regelt (Samsung Internet) en houdt dan dezelfde lichte kleuren. */
:root{color-scheme:only light}
@media (prefers-color-scheme:dark){:root{color-scheme:only light}html{background:#F6F1E3}}
[hidden]{display:none !important}
.knop:focus-visible,.nav a:focus-visible,.menuknop:focus-visible,.lichtkrant__pauze:focus-visible,.vv a:focus-visible,summary:focus-visible{outline:3px solid #B4D335;outline-offset:3px}

/* het menu op de telefoon: het knopje klapt de links open onder de menubalk */
@media (max-width:899px){
  .kop--open .nav{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;padding:6px 20px 14px;background:#F6F1E3;border-bottom:1px solid rgba(29,59,23,.16);box-shadow:0 16px 28px rgba(13,24,10,.16)}
  .kop--open .nav a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid rgba(29,59,23,.1);font-weight:700;font-size:18px;color:#1D3B17;text-decoration:none}
  .kop--open .nav a:last-child{border-bottom:0}
  .kop--open .nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:#B4D335;text-decoration-thickness:4px;text-underline-offset:7px}
}

/* het menu op de computer heeft sinds 27-10 zes links (Assortiment en Stage erbij): tot 1200 px blijft van de
   WhatsApp-knop rechtsboven alleen het rondje over, en tot 1280 px staan de links iets dichter op elkaar */
@media (min-width:900px) and (max-width:1279px){.nav a{padding:0 10px}}
@media (min-width:900px) and (max-width:1199px){.knop--kop{padding:0 3px;gap:0}.knop--kop .knop__tekst{display:none}}

/* de volle held (27-10, avond; Robbie: "vettere hero's per pagina", niet links tekst en rechts een kleine foto).
   Eén opbouw voor home, assortiment, schapen en stage (fourage had hem al):
   - tot 1200: de foto bovenaan over de hele breedte (hoogte --vol-tel), de tekst schuift er onderaan overheen
     (--vol-over); merkje linksboven en etiket rechtsboven op de foto;
   - vanaf 1200: de foto vult het hele vlak, de tekst staat links op een donkere waas, het onderwerp rechts.
   Per pagina in het bord: --x/--y (uitsnede vanaf 1200), --x-tel/--y-tel (daaronder), --vol-h (hoogte vanaf 1200). */
.vol{position:relative;overflow:hidden}
.vol picture{display:contents}
.vol .vol__foto{position:absolute;left:0;top:0;width:100%;max-width:none;height:var(--vol-tel,460px);object-fit:cover;object-position:var(--x-tel,50%) var(--y-tel,50%)}
.vol__waas{position:absolute;left:0;right:0;top:0;height:var(--vol-tel,460px);pointer-events:none;background:linear-gradient(180deg,rgba(13,24,10,.55) 0,rgba(13,24,10,0) 140px),linear-gradient(0deg,#0D180A 0,rgba(13,24,10,.9) 70px,rgba(13,24,10,.5) 160px,rgba(13,24,10,0) 250px)}
.vol__binnen{position:relative;padding-top:calc(var(--vol-tel,460px) - var(--vol-over,96px));padding-bottom:52px}
.vol__tekst{display:flex;flex-direction:column;align-items:flex-start}
.vol .vol__merk{position:absolute;left:20px;top:22px}
.vol .vol__merk img{width:140px}
.vol .vol__merk span{text-shadow:0 2px 12px rgba(0,0,0,.4)}
.vol__etiket{position:absolute;right:20px;top:24px;transform:rotate(7deg)}
.vol .hand{margin-bottom:12px;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.vol .h1{text-shadow:0 4px 24px rgba(0,0,0,.3)}
.vol .intro{margin-top:18px;color:rgba(255,253,246,.9)}
.vol .knoppen{margin-top:26px}
@media (max-width:359px){.vol .vol__merk img{width:112px}.vol .vol__merk span{font-size:12px}}
@media (min-width:600px){.vol{--vol-tel:58vw}}
@media (min-width:900px){.vol{--vol-tel:48vw}.vol .vol__merk img{width:180px}}
@media (min-width:1200px){
  .vol .vol__foto{height:100%;object-position:var(--x,70%) var(--y,50%)}
  .vol__waas{bottom:0;height:auto;background:linear-gradient(90deg,rgba(13,24,10,.93) 0,rgba(13,24,10,.84) calc(50% - 250px),rgba(13,24,10,.42) calc(50% + 10px),rgba(13,24,10,0) calc(50% + 190px)),linear-gradient(0deg,rgba(13,24,10,.55) 0,rgba(13,24,10,0) 170px),linear-gradient(180deg,rgba(13,24,10,.35) 0,rgba(13,24,10,0) 120px)}
  .vol__binnen{display:flex;flex-direction:column;justify-content:center;min-height:var(--vol-h,680px);padding-top:56px;padding-bottom:64px}
  .vol .vol__merk{position:static;margin-bottom:34px}
  .vol .vol__merk img{width:200px}
  .vol__tekst{max-width:620px}
  .vol .h1{font-size:clamp(64px,5.3vw,84px)}
  .vol .intro{max-width:31em;font-size:19px}
  .vol .knoppen{margin-top:32px}
  .vol__etiket{top:46px;right:28px}
}
@media (min-width:1440px){.vol{--vol-h:720px}}
@media (min-width:1600px){.vol__tekst{max-width:690px}}
@media (min-width:1800px){.vol{--vol-h:820px}}

/* de pagina die niet bestaat */
.niet-gevonden{min-height:60vh;display:flex;flex-direction:column;justify-content:center;gap:20px;padding:80px 20px}