/* ============================================================
   Menubalk, voettekst en algemene paginaopmaak voor de
   statische site. De opmaak van de artikelen zelf staat in
   stijl.css; dit bestand gaat alleen over de omhulling.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink)}

/* Een anker mag nooit onder de vaste kopbalk landen. */
[id]{scroll-margin-top:var(--kopbalk,96px)}

/* ---------- menubalk ---------- */
.kop{position:fixed;top:0;left:0;right:0;z-index:9000;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--rand);transition:box-shadow .25s ease}
.kop.vast{box-shadow:0 6px 24px rgba(27,122,67,.10)}
.kop-in{max-width:1240px;margin:0 auto;padding:0 24px;height:92px;display:flex;align-items:center;
  gap:26px;transition:height .22s ease}
.kop.vast .kop-in{height:70px}

.kop-logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.kop-logo img{height:64px;width:auto;max-width:320px;object-fit:contain;display:block;transition:height .22s ease}
.kop.vast .kop-logo img{height:50px}
.kop-logo img[hidden]{display:none}
.kop-woord{font-family:'Barlow Condensed','Barlow',sans-serif;font-size:2rem;font-weight:800;
  color:var(--groen-d);letter-spacing:-.01em;line-height:1}
.kop-woord b{color:var(--groen);font-weight:800}

.kop-menu{margin-left:auto;display:flex;align-items:center;gap:4px}
.kop-item{position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:11px;
  font-family:'Barlow Condensed','Barlow',sans-serif;font-size:1.06rem;font-weight:600;letter-spacing:.01em;
  color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;
  transition:background .18s ease,color .18s ease}
.kop-item:hover,.kop-item:focus-visible{background:#eef4ef;color:var(--groen-d)}
.kop-item svg{width:16px;height:16px;transition:transform .22s ease}
.kop-sub.open .kop-item svg,.kop-sub:hover .kop-item svg{transform:rotate(180deg)}

.kop-sub{position:relative}
.kop-lijst{position:absolute;top:calc(100% + 10px);left:0;min-width:330px;background:#fff;
  border:1px solid var(--rand);border-radius:16px;box-shadow:0 18px 40px rgba(27,122,67,.16);
  padding:10px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility 0s .2s}
.kop-sub.open .kop-lijst,.kop-sub:hover .kop-lijst{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.kop-lijst a{display:block;padding:9px 12px;border-radius:11px;text-decoration:none;color:var(--ink)}
.kop-lijst a:hover{background:#eef4ef}
.kop-lijst b{display:block;font-size:.97rem;color:var(--groen-d)}
.kop-lijst span{display:block;font-size:.83rem;color:var(--grijs);margin-top:1px}
.kop-alles{margin-top:4px;border-top:1px solid var(--rand);border-radius:0 0 11px 11px;
  font-size:.9rem;font-weight:700;color:var(--groen)!important}

.kop-cta{margin-left:10px;display:inline-flex;align-items:center;padding:11px 20px;border-radius:12px;
  background:var(--lime);color:var(--ink);text-decoration:none;font-weight:800;font-size:.95rem;
  box-shadow:0 3px 0 #9cb84d;transition:transform .16s ease,box-shadow .16s ease}
.kop-cta:hover{transform:translateY(-1px);box-shadow:0 4px 0 #9cb84d}
.kop-cta:active{transform:translateY(2px);box-shadow:0 1px 0 #9cb84d}

.kop-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:40px;
  margin-left:auto;background:none;border:0;cursor:pointer;padding:0}
.kop-burger span{display:block;height:3px;border-radius:99px;background:var(--groen);
  transition:transform .28s ease,opacity .2s ease}
.kop-burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.kop-burger.open span:nth-child(2){opacity:0}
.kop-burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Het gesloten mobiele menu staat niet met een transform buiten beeld, want
   dat gaf op een telefoon een horizontale schuifbalk over de hele site. Het
   verdwijnt met opacity en visibility, en die nemen geen ruimte in. */
.mobiel{position:fixed;inset:0;z-index:8999;background:linear-gradient(150deg,var(--groen-d),var(--groen));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,visibility 0s .3s}
.mobiel.open{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.mobiel a{color:#fff;text-decoration:none;font-family:'Barlow Condensed','Barlow',sans-serif;
  font-size:1.8rem;font-weight:700;padding:9px 22px;border-radius:12px}
.mobiel a:hover,.mobiel a:focus-visible{background:rgba(255,255,255,.14)}

@media(max-width:980px){
  .kop-menu{display:none}
  .kop-burger{display:flex}
  .kop-in{height:78px;padding:0 18px}
  .kop.vast .kop-in{height:64px}
  .kop-logo img{height:54px;max-width:calc(100vw - 120px)}
  .kop.vast .kop-logo img{height:44px}
  .kop-woord{font-size:1.6rem}
}

/* ---------- voettekst ---------- */
.voet{background:var(--groen-d);color:#dbe8de;margin-top:0}
.voet a{color:#fff;text-decoration:none}
.voet a:hover{text-decoration:underline}
.voet-in{max-width:1240px;margin:0 auto;padding:56px 24px 30px;
  display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:34px}
.voet h2{font-family:'Barlow Condensed','Barlow',sans-serif;font-size:1.12rem;color:#fff;
  text-transform:uppercase;letter-spacing:.05em;margin:0 0 14px}
.voet ul{list-style:none;margin:0;padding:0}
.voet li{margin-bottom:9px;font-size:.94rem;line-height:1.5}
.voet-merk .naam{font-family:'Barlow Condensed','Barlow',sans-serif;font-size:1.9rem;font-weight:800;
  color:#fff;line-height:1;margin:0 0 12px}
.voet-merk .naam b{color:var(--lime)}
.voet-merk p{font-size:.94rem;line-height:1.65;margin:0 0 14px;max-width:34ch}
.voet-gegevens{font-size:.88rem;line-height:1.7;color:#b9cfc0}
.voet-onder{border-top:1px solid rgba(255,255,255,.16)}
.voet-onder-in{max-width:1240px;margin:0 auto;padding:18px 24px 34px;display:flex;flex-wrap:wrap;
  gap:10px 22px;align-items:center;font-size:.85rem;color:#b9cfc0}
.voet-onder-in a{color:#dbe8de}
@media(max-width:900px){
  .voet-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;padding:44px 18px 26px}
  .voet-merk{grid-column:1 / -1}
}
@media(max-width:560px){
  .voet-in{grid-template-columns:minmax(0,1fr)}
}

/* ---------- zonder JavaScript ----------
   .reveal staat op opacity:0 tot een script het blok zichtbaar maakt. Staat
   JavaScript uit, dan zou de pagina leeg blijven. Deze klasse staat vanaf het
   begin op <html> en wordt door een klein script in de kop meteen weggehaald,
   dus je ziet nooit een flits. Gebeurt dat niet, dan is alles gewoon zichtbaar. */
.geen-js .reveal{opacity:1 !important;transform:none !important}
.geen-js .kop-ruimte{height:92px}
.geen-js .fantw{max-height:none}

/* ---------- koppen buiten een artikel ----------
   De artikelpagina's zetten hun h1 in de groene kop. De foutpagina en het
   overzicht hebben die kop niet, dus die hebben hier een regel voor nodig. */
main section h1{font-family:'Barlow Condensed','Barlow',sans-serif;font-size:2.3rem;
  line-height:1.1;color:var(--groen-d);margin:0 0 16px}
main section h3{margin:26px 0 10px;font-family:'Barlow Condensed','Barlow',sans-serif;
  font-size:1.35rem;color:var(--groen-d)}
main section .rkaart h3{margin:0}

/* ---------- overzichtspagina ---------- */
.ovz-groep{margin:0 0 34px}
.ovz-groep > h2{display:flex;align-items:center;gap:12px}
.ovz-tel{font-family:'Barlow',sans-serif;font-size:.82rem;font-weight:700;color:#fff;
  background:var(--groen);border-radius:99px;padding:3px 11px;letter-spacing:.02em}
.ovz-lijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px 22px}
.ovz-lijst a{display:block;min-width:0;padding:11px 13px;border-radius:12px;text-decoration:none;
  border-left:3px solid transparent;transition:background .2s ease,border-color .2s ease,padding-left .25s var(--veer)}
.ovz-lijst a:hover{background:#fff;border-left-color:var(--lime);padding-left:17px}
.ovz-lijst b{display:block;color:var(--groen-d);font-size:1rem}
.ovz-lijst span{display:block;color:var(--grijs);font-size:.86rem;margin-top:2px;line-height:1.5}

/* ---------- overslaanlink ----------
   Voor wie met het toetsenbord navigeert: eerste tab springt naar de inhoud,
   zodat je niet elke keer door het hele menu heen moet. */
.overslaan{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--groen-d);color:#fff;
  padding:12px 20px;border-radius:0 0 12px 0;text-decoration:none;font-weight:700}
.overslaan:focus{left:0}

/* ============================================================
   De categoriekaarten op de homepage.

   Een raster van zes kaarten met een foto erin, waarvan de eerste
   twee keer zo hoog is. Op een smal scherm valt alles terug naar
   een kolom onder elkaar.

   De foto zit als achtergrond in de kaart, met een donker verloop
   erover, anders is witte tekst op een lichte foto niet te lezen.
   ============================================================ */
.cat-donker{background:#0f3a20;padding:54px 0 60px}
.cat-donker .wrap{max-width:1180px}
.cat-boven{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:.92rem;color:var(--lime);margin:0 0 8px}
.cat-donker h2{color:#fff;margin:0}
.cat-uitleg{color:#b9d4c1;margin:10px 0 26px;font-size:1rem;max-width:640px}

.cat-vak{display:grid;gap:16px;grid-template-columns:1fr}
.cat{position:relative;overflow:hidden;border-radius:22px;text-decoration:none;
  min-height:190px;padding:22px 24px;color:#fff;background-color:#17492a;
  /* De foto zelf tonen wij niet op de kaart maar op de laag hieronder, iets
     uitvergroot. De foto's hebben namelijk een limoengroene sierboog in de
     hoeken, en die valt zo buiten de uitsnede. */
  background-size:0 0;
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .25s ease,box-shadow .25s ease}
.cat::after{content:"";position:absolute;inset:-13%;z-index:0;
  background-image:inherit;background-size:cover;background-position:center}
.cat::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,32,17,.25) 0%,rgba(8,32,17,.55) 55%,rgba(8,32,17,.86) 100%)}
.cat>*{position:relative;z-index:2}
.cat h3{color:#fff;margin:0;font-size:1.5rem;line-height:1.15}
.cat p{margin:6px 0 0;color:#cfe3d4;font-size:.95rem;line-height:1.5}
.cat:hover,.cat:focus-visible{transform:translateY(-3px);box-shadow:0 14px 28px rgba(0,0,0,.28)}
.cat-merk{position:absolute;top:18px;left:22px;z-index:2;background:var(--lime);color:var(--ink);
  font-weight:800;font-size:.82rem;padding:7px 14px;border-radius:99px}
.cat-groot{min-height:300px}
.cat-groot h3{font-size:2rem}

@media(min-width:760px){
  .cat-vak{grid-template-columns:repeat(3,1fr)}
  .cat-groot{grid-column:1;grid-row:span 2;min-height:420px}
  .cat-breed{grid-column:span 2}
}

/* De rij met genummerde onderwerpen eronder. */
/* ============================================================
   De vijf onderwerpen als openschuivende panelen.

   Smalle staande panelen met dunne scheidslijnen. Ga je er met de muis
   overheen, dan schuift dat paneel breed open en schuiven de andere in.
   Dat werkt met flex-grow, niet met width, want dan verdelen de panelen
   samen altijd precies de volle breedte en springt er niets.

   Op aanraakschermen bestaat zweven niet, dus daar worden het gewone
   blokken onder elkaar. En wie met het toetsenbord navigeert krijgt bij
   focus hetzelfde openschuiven als bij de muis.
   ============================================================ */
.stap-rij{display:flex;gap:0;margin-top:26px;
  border-top:1px solid rgba(200,232,108,.22);
  border-bottom:1px solid rgba(200,232,108,.22)}

.stap{position:relative;flex:1 1 0;min-width:0;height:460px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:52px 22px 26px;text-decoration:none;color:#fff;overflow:hidden;
  border-left:1px solid rgba(200,232,108,.22);
  background-color:#12331d;background-size:0 0;
  transition:flex-grow .55s cubic-bezier(.22,.61,.36,1)}
.stap:first-child{border-left:0}

.stap::after{content:"";position:absolute;inset:0;z-index:0;
  background-image:inherit;background-size:cover;background-position:center;
  opacity:.85;transition:opacity .55s ease,transform .55s ease}
.stap::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,32,17,.35) 0%,rgba(8,32,17,.6) 55%,rgba(8,32,17,.92) 100%)}
.stap>*{position:relative;z-index:2}

/* Het bijschrift bovenaan, zoals een fotobijschrift. */
.stap em{position:absolute;top:20px;left:22px;right:22px;z-index:2;
  font-style:normal;font-size:.82rem;color:rgba(200,232,108,.55);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.stap b{display:block;color:var(--lime);font-size:.85rem;letter-spacing:.1em;margin-bottom:6px;
  text-shadow:0 1px 3px rgba(8,32,17,.9),0 0 10px rgba(8,32,17,.75)}
.stap span{font-family:'Barlow Condensed',sans-serif;font-size:1.5rem;line-height:1.12;font-weight:700;
  text-shadow:0 1px 4px rgba(8,32,17,.85)}

@media (hover:hover) and (min-width:900px){
  .stap:hover,.stap:focus-visible{flex-grow:2.6}
  .stap:hover::after,.stap:focus-visible::after{opacity:1;transform:scale(1.04)}
}

/* Smalle schermen: geen zweven, dus gewoon onder elkaar. */
@media(max-width:899px){
  .stap-rij{flex-direction:column;border:0}
  /* flex:none, anders verdeelt de kolom de hoogte en wordt elk paneel
     platgedrukt in plaats van 230 pixels hoog. */
  .stap{flex:none;height:230px;border-left:0;border-top:1px solid rgba(200,232,108,.22);padding:46px 22px 22px}
  .stap:first-child{border-top:0}
}