/* Coffeelovers: gedeelde stijl voor alle pagina's. Alle waarden komen uit tokens.css.
   Opbouw en klassennamen volgen het design system van Blanche Dael waar dat kan. */

*,*::before,*::after{box-sizing:border-box}
html{font-synthesis:none;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-padding-top:110px}
body{margin:0;background:var(--cl-achtergrond-pagina);color:var(--cl-tekst-standaard);font-family:var(--cl-body-familie);font-size:var(--cl-body-grootte);line-height:var(--cl-body-regelhoogte)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:var(--cl-vorm-focus-breedte) solid var(--cl-focus-ring);outline-offset:var(--cl-vorm-focus-afstand)}
.op-donker :focus-visible,.op-donker:focus-visible{outline-color:var(--cl-focus-ring-op-donker)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.overslaan{position:absolute;left:8px;top:-60px;z-index:100;background:var(--cl-kleur-wit);color:var(--cl-kleur-inkt);padding:12px 16px;font-family:var(--cl-knop-familie);font-weight:700;text-transform:uppercase;letter-spacing:var(--cl-knop-tracking)}
.overslaan:focus{top:8px}

.container{max-width:var(--cl-container);margin:0 auto;padding:0 var(--cl-marge)}
.sectie{padding:var(--cl-ruimte-sectie) 0}
.sectie.zacht{background:var(--cl-achtergrond-zacht)}
.sectie.accent{background:var(--cl-achtergrond-accent)}
.sectie.donker,.donker{background:var(--cl-achtergrond-donker);color:var(--cl-tekst-op-donker)}
.op-donker{color:var(--cl-tekst-op-donker)}

/* Typografie */
.display,.h1,.h2,.h3,.h4{font-family:var(--cl-font-familie-kop);font-weight:700;text-transform:uppercase;margin:0;text-wrap:balance}
.display{font-size:var(--cl-display-grootte);line-height:var(--cl-display-regelhoogte);letter-spacing:var(--cl-display-tracking)}
.h1{font-size:var(--cl-h1-grootte);line-height:var(--cl-h1-regelhoogte);letter-spacing:var(--cl-h1-tracking)}
.h2{font-size:var(--cl-h2-grootte);line-height:var(--cl-h2-regelhoogte);letter-spacing:var(--cl-h2-tracking)}
.h3{font-size:var(--cl-h3-grootte);line-height:var(--cl-h3-regelhoogte);letter-spacing:var(--cl-h3-tracking)}
.h4{font-size:var(--cl-h4-grootte);line-height:var(--cl-h4-regelhoogte);letter-spacing:var(--cl-h4-tracking)}
.intro{font-size:var(--cl-intro-grootte);line-height:var(--cl-intro-regelhoogte);max-width:30em}
.body-groot{font-size:var(--cl-body-groot-grootte);line-height:var(--cl-body-groot-regelhoogte)}
.klein{font-size:var(--cl-klein-grootte);line-height:var(--cl-klein-regelhoogte);letter-spacing:var(--cl-klein-tracking)}
.label{font-family:var(--cl-label-familie);font-weight:700;font-size:var(--cl-label-grootte);line-height:var(--cl-label-regelhoogte);letter-spacing:var(--cl-label-tracking);text-transform:uppercase}
.prijs{font-family:var(--cl-prijs-familie);font-size:var(--cl-prijs-grootte);line-height:var(--cl-prijs-regelhoogte);font-variant-numeric:tabular-nums}
.secundair-tekst{color:var(--cl-tekst-secundair)}
.op-donker .secundair-tekst,.donker .secundair-tekst{color:var(--cl-tekst-op-donker-zacht)}
.tekstbreedte{max-width:var(--cl-tekstbreedte)}
.stapel>*+*{margin-top:var(--cl-ruimte-4)}
.stapel-groot>*+*{margin-top:var(--cl-ruimte-6)}

/* Knoppen (knoppen-en-links.md) */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--cl-vorm-knop-hoogte);padding:0 24px;border:1px solid var(--cl-knop-primair-vlak);border-radius:var(--cl-vorm-hoekradius);background:var(--cl-knop-primair-vlak);color:var(--cl-knop-primair-tekst);font-family:var(--cl-knop-familie);font-weight:700;font-size:var(--cl-knop-grootte);line-height:1;letter-spacing:var(--cl-knop-tracking);text-transform:uppercase;text-decoration:none;cursor:pointer;touch-action:manipulation;transition:background-color var(--cl-beweging-duur-kort) var(--cl-beweging-curve-standaard),border-color var(--cl-beweging-duur-kort) var(--cl-beweging-curve-standaard),color var(--cl-beweging-duur-kort) var(--cl-beweging-curve-standaard)}
.knop svg{width:16px;height:16px}
.knop:active{background:var(--cl-knop-primair-hover);border-color:var(--cl-knop-primair-hover);transition-duration:var(--cl-beweging-duur-direct)}
@media (hover:hover){.knop:hover{background:var(--cl-knop-primair-hover);border-color:var(--cl-knop-primair-hover)}}
.knop.secundair{background:var(--cl-knop-secundair-vlak);color:var(--cl-knop-secundair-tekst);border:var(--cl-vorm-rand-knop-secundair) solid var(--cl-knop-secundair-rand)}
@media (hover:hover){.knop.secundair:hover{background:var(--cl-knop-secundair-hover);color:var(--cl-knop-secundair-hover-tekst)}}
.op-donker .knop,.donker .knop{background:var(--cl-knop-op-donker-vlak);border-color:var(--cl-knop-op-donker-vlak);color:var(--cl-knop-op-donker-tekst)}
@media (hover:hover){.op-donker .knop:hover,.donker .knop:hover{background:var(--cl-knop-op-donker-hover);border-color:var(--cl-knop-op-donker-hover)}}
.op-donker .knop.secundair,.donker .knop.secundair{background:transparent;color:var(--cl-tekst-op-donker);border-color:var(--cl-tekst-op-donker)}
@media (hover:hover){.op-donker .knop.secundair:hover,.donker .knop.secundair:hover{background:var(--cl-knop-op-donker-vlak);color:var(--cl-knop-op-donker-tekst)}}
.tertiair{display:inline-flex;align-items:center;gap:8px;min-height:var(--cl-vorm-raakvlak-min);font-family:var(--cl-knop-familie);font-weight:700;font-size:var(--cl-knop-grootte);letter-spacing:var(--cl-knop-tracking);text-transform:uppercase;color:var(--cl-knop-tertiair-tekst);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em;transition:text-decoration-thickness var(--cl-beweging-duur-kort) var(--cl-beweging-curve-standaard),text-decoration-color var(--cl-beweging-duur-kort) var(--cl-beweging-curve-standaard)}
@media (hover:hover){.tertiair:hover{text-decoration-thickness:2px;text-decoration-color:var(--cl-knop-tertiair-hover-onderstreping)}}
.op-donker .tertiair,.donker .tertiair{color:var(--cl-knop-tertiair-op-donker-tekst)}
@media (hover:hover){.op-donker .tertiair:hover,.donker .tertiair:hover{text-decoration-color:var(--cl-knop-tertiair-op-donker-hover-onderstreping)}}
.tertiair svg{width:16px;height:16px;flex:none}
.link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
@media (hover:hover){.link:hover{text-decoration-thickness:2px;text-decoration-color:var(--cl-link-hover-onderstreping)}}
.knoppen{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.icoonknop{display:inline-grid;place-items:center;width:var(--cl-vorm-raakvlak-min);height:var(--cl-vorm-raakvlak-min);padding:0;border:0;background:none;color:inherit;cursor:pointer;border-radius:var(--cl-vorm-hoekradius)}
.icoonknop svg{width:24px;height:24px}

/* Header: altijd op inkt, logo in het midden, menu links en rechts ervan */
.kop{position:sticky;top:0;z-index:50;background:var(--cl-achtergrond-donker);color:var(--cl-tekst-op-donker)}
:root{--kop-hoogte:68px}
@media (min-width:62em){:root{--kop-hoogte:96px}}
.kop-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:var(--kop-hoogte);column-gap:var(--cl-ruimte-6)}
.kop-links{justify-self:start;display:flex;align-items:center;margin-left:-10px}
.kop-rechts{justify-self:end;display:flex;align-items:center;gap:var(--cl-ruimte-8)}
.kop .logo{display:block;padding:8px 0}
.kop .logo img{height:34px;width:auto}
.hoofdnav{display:none}
.hoofdnav ul{display:flex;gap:var(--cl-ruimte-8);align-items:center}
.hoofdnav a{display:inline-flex;align-items:center;gap:6px;min-height:var(--cl-vorm-raakvlak-min);font-family:var(--cl-h4-familie);font-weight:700;font-size:var(--cl-h4-grootte);letter-spacing:var(--cl-h4-tracking);text-transform:uppercase;text-decoration:none;text-underline-offset:.4em}
.hoofdnav a svg{width:16px;height:16px}
.hoofdnav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px}
@media (hover:hover){.hoofdnav a:hover{text-decoration:underline;text-decoration-thickness:2px}}
.taal{display:flex;gap:0;font-family:var(--cl-label-familie);font-weight:700;font-size:var(--cl-label-grootte);letter-spacing:var(--cl-label-tracking)}
.taal a{display:inline-grid;place-items:center;min-width:var(--cl-vorm-raakvlak-min);min-height:var(--cl-vorm-raakvlak-min);text-decoration:none;color:var(--cl-tekst-op-donker-zacht)}
.taal a[aria-current="true"]{color:var(--cl-tekst-op-donker);text-decoration:underline;text-underline-offset:.4em}
.kop-rechts .taalkeuze{display:none;margin-right:-8px}
/* Taalkeuze: knop met uitklapmenu */
.taalkeuze{position:relative}
.taalknop{display:inline-flex;align-items:center;gap:6px;min-height:var(--cl-vorm-raakvlak-min);padding:0 8px;background:none;border:0;border-radius:var(--cl-vorm-hoekradius);color:inherit;cursor:pointer;font-family:var(--cl-label-familie);font-weight:700;font-size:var(--cl-label-grootte);letter-spacing:var(--cl-label-tracking)}
.taalknop svg{width:16px;height:16px;transition:transform var(--cl-beweging-duur-kort) var(--cl-beweging-curve-standaard)}
.taalknop[aria-expanded="true"] svg{transform:rotate(180deg)}
.taalmenu{position:absolute;right:0;top:calc(100% + 4px);z-index:70;min-width:11rem;margin:0;padding:var(--cl-ruimte-2) 0;list-style:none;background:var(--cl-kleur-wit);color:var(--cl-kleur-inkt);border:1px solid var(--cl-rand-decoratief);border-radius:var(--cl-vorm-hoekradius)}
.omhoog .taalmenu{top:auto;bottom:calc(100% + 4px)}
.taalmenu a{display:flex;align-items:center;min-height:var(--cl-vorm-raakvlak-min);padding:0 var(--cl-ruimte-4);text-decoration:none}
.taalmenu a[aria-current="true"]{font-weight:700}
.taalmenu a:focus-visible{outline-color:var(--cl-focus-ring);outline-offset:-4px}
@media (hover:hover){.taalmenu a:hover{background:var(--cl-achtergrond-zacht)}}
@media (prefers-reduced-motion:reduce){.taalknop svg{transition:none}}
@media (min-width:62em){
  .kop .logo img{height:50px}
  .kop-links{margin-left:0}
  .hoofdnav{display:block}
  .kop-rechts .taalkeuze{display:block}
  .menuknop{display:none}
}

/* Mobiel menu: paneel over het scherm, op inkt */
.menupaneel{position:fixed;inset:0;z-index:60;background:var(--cl-achtergrond-donker);color:var(--cl-tekst-op-donker);display:flex;flex-direction:column;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity var(--cl-beweging-duur-middel) var(--cl-beweging-curve-uit),visibility 0s linear var(--cl-beweging-duur-middel)}
.menupaneel[data-open]{opacity:1;visibility:visible;transition:opacity var(--cl-beweging-duur-middel) var(--cl-beweging-curve-uit),visibility 0s}
.menupaneel .paneelkop{display:flex;justify-content:space-between;align-items:center;min-height:var(--kop-hoogte);padding:0 var(--cl-marge)}
.menupaneel .paneelkop img{height:34px;width:auto}
.menupaneel nav{padding:var(--cl-ruimte-6) var(--cl-marge)}
.menupaneel nav>ul>li{border-top:1px solid var(--cl-achtergrond-donker-2)}
.menupaneel nav>ul>li>a{display:flex;align-items:center;justify-content:space-between;min-height:64px;font-family:var(--cl-h2-familie);font-weight:700;font-size:var(--cl-h2-grootte);letter-spacing:var(--cl-h2-tracking);text-transform:uppercase;text-decoration:none}
.menupaneel nav>ul>li>a svg{width:20px;height:20px}
.menupaneel .sub{padding:0 0 var(--cl-ruimte-4)}
.menupaneel .sub a{display:flex;align-items:center;min-height:var(--cl-vorm-raakvlak-min);color:var(--cl-tekst-op-donker-zacht);text-decoration:none}
.menupaneel .paneelvoet{margin-top:auto;padding:var(--cl-ruimte-6) var(--cl-marge);display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--cl-achtergrond-donker-2)}
@media (prefers-reduced-motion:reduce){.menupaneel,.menupaneel[data-open]{transition:none}}

/* Kruimelpad */
.kruimel{padding:var(--cl-ruimte-4) 0 0}
.kruimel ol{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;margin:0;padding:0;list-style:none;font-size:var(--cl-klein-grootte);color:var(--cl-tekst-secundair)}
.kruimel li{display:flex;align-items:center;min-height:var(--cl-vorm-raakvlak-min)}
.kruimel li+li::before{content:"/";margin-right:8px;color:var(--cl-tekst-tertiair)}
.kruimel a{display:inline-flex;align-items:center;min-height:var(--cl-vorm-raakvlak-min)}

/* Beeld */
.beeld{position:relative;overflow:hidden;background:var(--cl-achtergrond-donker-2);border-radius:var(--cl-vorm-hoekradius-beeld)}
.beeld img{width:100%;height:100%;object-fit:cover}
.r-4-5{aspect-ratio:4/5}.r-1-1{aspect-ratio:1/1}.r-3-2{aspect-ratio:3/2}.r-16-9{aspect-ratio:16/9}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(var(--cl-kolommen),minmax(0,1fr));column-gap:var(--cl-kolomafstand);row-gap:var(--cl-ruimte-12)}
.vol{grid-column:1/-1}
.kaarten{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:var(--cl-ruimte-8) var(--cl-kolomafstand)}
@media (min-width:36em){.kaarten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:62em){.kaarten{grid-template-columns:repeat(var(--cl-kaarten-per-rij),minmax(0,1fr))}}
.sectiekop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--cl-ruimte-4);margin-bottom:var(--cl-ruimte-blok)}
.sectiekop .stapel{max-width:36em}

/* Locatiekaart: hele kaart klikbaar via de kop. Naam, adres en status dicht op elkaar */
.kaarten{row-gap:0}
.locatiekaart{position:relative;display:flex;flex-direction:column;gap:var(--cl-ruimte-1);padding-bottom:var(--cl-ruimte-12)}
.locatiekaart .beeld{aspect-ratio:4/5;margin-bottom:var(--cl-ruimte-3)}
.locatiekaart .status{margin-top:var(--cl-ruimte-1)}
.locatiekaart .beeld img{transition:transform var(--cl-beweging-duur-lang) var(--cl-beweging-curve-uit)}
@media (hover:hover){.locatiekaart:hover .beeld img{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.locatiekaart .beeld img{transition:none}.locatiekaart:hover .beeld img{transform:none}}
.locatiekaart h3 a{text-decoration:none}
.locatiekaart h3 a::after{content:"";position:absolute;inset:0}
@media (hover:hover){.locatiekaart:hover h3 a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}}
.status{display:inline-flex;align-items:center;gap:8px;font-size:var(--cl-klein-grootte);line-height:var(--cl-klein-regelhoogte)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.status[data-open="ja"]{color:var(--cl-status-succes)}
.status[data-open="nee"]{color:var(--cl-tekst-secundair)}
.donker .status[data-open]{color:var(--cl-tekst-op-donker-zacht)}

/* Openingstijden */
.tijden{width:100%;max-width:24rem;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tijden th,.tijden td{padding:10px 0;border-bottom:1px solid var(--cl-rand-decoratief);text-align:left;font-weight:400}
.tijden td{text-align:right}
.tijden tr[data-vandaag] th,.tijden tr[data-vandaag] td{font-weight:700}

/* Menukaart: naam links, twee prijskolommen rechts (zoals de menukaart A5) */
.menulijst{display:grid;grid-template-columns:1fr 4.5rem 4.5rem;column-gap:8px;align-items:baseline}
.menulijst .kolomkop{display:contents}
.menulijst .kolomkop>*{padding-bottom:var(--cl-ruimte-3);border-bottom:1px solid currentColor;display:flex;align-items:end;justify-content:flex-end}
.menulijst .kolomkop>:first-child{justify-content:flex-start}
.menulijst .kolomkop svg{width:24px;height:24px}
.menulijst .regel{display:contents}
.menulijst .regel>*{padding:10px 0;border-bottom:1px solid var(--cl-rand-decoratief)}
.donker .menulijst .regel>*{border-bottom-color:var(--cl-achtergrond-donker-2)}
.menulijst .regel>.prijs{text-align:right;font-size:var(--cl-body-grootte)}
.menulijst .geen{color:var(--cl-tekst-tertiair)}
.donker .menulijst .geen{color:var(--cl-tekst-op-donker-zacht)}

/* Stempelkaart (Coffee ID-card) */
.stempels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;max-width:22rem}
.stempels li{aspect-ratio:1;display:grid;place-items:center;border:1.5px solid var(--cl-kleur-inkt);border-radius:50%}
.stempels li svg{width:55%;height:55%}
.stempels li.gratis{background:var(--cl-kleur-inkt);color:var(--cl-kleur-karton)}

/* Footer */
.voet{background:var(--cl-achtergrond-donker);color:var(--cl-tekst-op-donker);padding:var(--cl-ruimte-16) 0 0}
.voet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cl-ruimte-12) var(--cl-kolomafstand)}
.voet-merk{grid-column:1/-1}
.voet .logo img{height:auto;width:160px}
.voet h2{margin-bottom:var(--cl-ruimte-3)}
.voet li a{display:inline-flex;align-items:center;min-height:36px;text-decoration:none;color:var(--cl-tekst-op-donker-zacht)}
@media (hover:hover){.voet li a:hover{color:var(--cl-tekst-op-donker);text-decoration:underline}}
.voet .sociaal{display:flex;gap:8px;margin-left:-10px}
.voet .onder{margin-top:var(--cl-ruimte-16);background:var(--cl-achtergrond-donker-2);padding:var(--cl-ruimte-4) 0;color:var(--cl-tekst-op-donker-zacht)}
.voet .onder .container{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.voet .onder a{color:inherit}
@media (min-width:62em){.voet-grid{grid-template-columns:4fr repeat(4,minmax(0,2fr))}.voet-merk{grid-column:auto}}

/* Blokken die op meerdere pagina's terugkomen */

/* Hero: tekst op inkt, foto ernaast tot de rand van het scherm (desktop) of eronder (mobiel). Nooit tekst op de foto */
.hero-grid{display:grid}
.hero-tekst{padding:var(--cl-ruimte-12) var(--cl-marge) var(--cl-ruimte-12)}
.hero-beeld{aspect-ratio:4/5}
@media (min-width:48em){.hero-beeld{aspect-ratio:3/2}}
@media (min-width:62em){
  /* Header en hero samen nooit hoger dan het scherm */
  .hero-grid{grid-template-columns:1fr 1fr;height:calc(100vh - var(--kop-hoogte));height:calc(100svh - var(--kop-hoogte));min-height:520px}
  .hero-tekst{align-self:center;padding:var(--cl-ruimte-16) var(--cl-ruimte-16) var(--cl-ruimte-16) max(var(--cl-marge),calc((100vw - var(--cl-container)) / 2 + var(--cl-marge)))}
  .hero-beeld{aspect-ratio:auto;height:100%;min-height:0;position:relative}
  .hero-beeld img{position:absolute;inset:0}
}

/* Duo: beeld en tekst naast elkaar vanaf 768px */
.duo{display:grid;gap:var(--cl-ruimte-8);align-items:center}
@media (min-width:48em){
  .duo{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cl-kolomafstand)}
  .duo>:first-child{grid-column:1/span 6}
  .duo>:last-child{grid-column:8/-1}
  .duo.omgekeerd>:first-child{grid-column:7/-1;grid-row:1}
  .duo.omgekeerd>:last-child{grid-column:1/span 5;grid-row:1}
}

/* Veegrij: op de telefoon een rij kaarten van 240px om door te vegen, vanaf 992px een raster van vier */
.veegrij{display:grid;grid-auto-flow:column;grid-auto-columns:240px;grid-template-columns:none;gap:var(--cl-ruimte-4);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--cl-marge);margin:0 calc(var(--cl-marge) * -1);padding:0 var(--cl-marge) var(--cl-ruimte-2);scrollbar-width:none}
.veegrij::-webkit-scrollbar{display:none}
.veegrij>li{scroll-snap-align:start}
@media (min-width:62em){.veegrij{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin:0;padding:0;row-gap:var(--cl-ruimte-12);column-gap:var(--cl-kolomafstand)}}

/* Menulijst met één prijskolom (specials) */
.menulijst.een{grid-template-columns:1fr 4.5rem}

/* Instagram: 2 x 2 op de telefoon, 4 naast elkaar vanaf 768px */
.instagram{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cl-ruimte-2)}
@media (min-width:48em){.instagram{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cl-kolomafstand)}}

/* Paginakop van binnenpagina's */
.paginakop{padding:var(--cl-ruimte-4) 0 var(--cl-ruimte-12)}
.paginakop-tekst{margin-top:var(--cl-ruimte-6)}
.paginakop .stapel-groot{max-width:44rem}
.paginakop.donker{padding-bottom:var(--cl-ruimte-sectie)}
.paginakop.donker .kruimel ol{color:var(--cl-tekst-op-donker-zacht)}
.paginakop.donker .kruimel li+li::before{color:var(--cl-tekst-op-donker-zacht)}

/* Locatiepagina */
.locatie-info{display:grid;gap:var(--cl-ruimte-12)}
.locatie-info .gegevens{display:grid;gap:var(--cl-ruimte-8);align-content:start}
.gegeven{display:grid;grid-template-columns:24px 1fr;gap:var(--cl-ruimte-3);align-items:start}
.gegeven>svg{width:24px;height:24px;margin-top:2px}
@media (min-width:62em){
  .locatie-info{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cl-kolomafstand)}
  .locatie-info .beeld{grid-column:1/span 7;grid-row:1/span 2}
  .locatie-info .verhaal{grid-column:9/-1}
  .locatie-info .gegevens{grid-column:9/-1}
}

/* Menukaart */
.menublokken{display:grid;gap:var(--cl-ruimte-16) calc(var(--cl-kolomafstand) * 2);align-items:start}
@media (min-width:62em){.menublokken{grid-template-columns:repeat(2,minmax(0,1fr))}}
.menublok-kop{display:flex;align-items:baseline;gap:var(--cl-ruimte-3);margin-bottom:var(--cl-ruimte-3)}
.menulijst .naam{display:flex;flex-direction:column;gap:2px}
.menulijst .omschrijving{font-style:italic;font-size:var(--cl-klein-grootte);line-height:var(--cl-klein-regelhoogte);color:var(--cl-tekst-secundair)}
.menulijst .veg{font-family:var(--cl-label-familie);font-weight:700;font-size:var(--cl-label-grootte);letter-spacing:var(--cl-label-tracking);text-decoration:none;color:var(--cl-tekst-secundair)}
.menulijst .naam:has(.veg){display:block}
.menulijst .naam:has(.veg) .omschrijving{display:block;margin-top:2px}
.menu-noot{margin-top:var(--cl-ruimte-12);max-width:var(--cl-tekstbreedte)}

/* Werkenband op de homepage */
.band{display:flex;flex-wrap:wrap;gap:var(--cl-ruimte-6) var(--cl-ruimte-12);align-items:center;justify-content:space-between;border-top:1px solid var(--cl-rand-decoratief);padding-top:var(--cl-ruimte-12)}
.band .stapel{max-width:40rem}

/* Over ons */
.missie{text-align:center}
.missie blockquote{margin:var(--cl-ruimte-6) auto 0;max-width:18em;font-family:var(--cl-font-familie-tekst);font-style:italic;font-size:var(--cl-h1-grootte);line-height:1.25}
.drie{display:grid;gap:var(--cl-ruimte-12) var(--cl-kolomafstand)}
@media (min-width:48em){.drie{grid-template-columns:repeat(3,minmax(0,1fr))}}
.waarden-slot{margin-top:var(--cl-ruimte-12)}
.tijdlijn{margin:0;padding:0;list-style:none;max-width:52rem}
.tijdlijn li{display:grid;gap:var(--cl-ruimte-2);padding:var(--cl-ruimte-6) 0;border-top:1px solid var(--cl-rand-decoratief)}
.tijdlijn li:last-child{border-bottom:1px solid var(--cl-rand-decoratief)}
.tijdlijn .jaar{font-family:var(--cl-h2-familie);font-weight:700;font-size:var(--cl-h2-grootte);line-height:1;letter-spacing:var(--cl-h2-tracking);text-transform:uppercase}
@media (min-width:48em){.tijdlijn li{grid-template-columns:10rem 1fr;column-gap:var(--cl-kolomafstand);align-items:baseline}}

/* Vacatures */
.vacatures{display:grid;gap:var(--cl-kolomafstand)}
@media (min-width:48em){.vacatures{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vacature{position:relative;display:flex;flex-direction:column;gap:var(--cl-ruimte-1);padding:var(--cl-ruimte-6);background:var(--cl-achtergrond-pagina);border:1px solid var(--cl-rand-decoratief);border-radius:var(--cl-vorm-hoekradius)}
.vacature h3{margin-bottom:var(--cl-ruimte-2)}
.vacature .knoppen{margin-top:auto;padding-top:var(--cl-ruimte-6)}


/* Menulijst: doorlopende lijnen, ruimte binnen de prijscellen */
.menulijst{column-gap:0}
.menulijst .prijs,.menulijst .kolomkop>:not(:first-child){padding-left:8px}

.sectie.zonder-top{padding-top:0}

/* Menulijst, ronde 2: cellen rekken mee zodat de lijnen per regel gelijk liggen; prijzen op één regel */
.menulijst{grid-template-columns:1fr auto auto;align-items:stretch}
.menulijst.een{grid-template-columns:1fr auto}
.menulijst .prijs,.menulijst .kolomkop>:not(:first-child){min-width:4.5rem;white-space:nowrap}
/* Categorieën lopen als twee kolommen door, zonder gaten naast korte lijsten */
@media (min-width:62em){
  .menublokken{display:block;columns:2;column-gap:calc(var(--cl-kolomafstand) * 2)}
  .menublok{break-inside:avoid;padding-bottom:var(--cl-ruimte-16)}
}
@media (max-width:61.99em){.menublokken{gap:var(--cl-ruimte-12)}}
.beeld img.focus-links{object-position:20% 50%}

/* Lege staat (bijvoorbeeld geen vacatures) */
.leeg{display:grid;gap:var(--cl-ruimte-6);justify-items:start;max-width:40rem;padding:var(--cl-ruimte-8);background:var(--cl-achtergrond-pagina);border:1px solid var(--cl-rand-decoratief);border-radius:var(--cl-vorm-hoekradius)}
.leeg>svg{width:40px;height:40px}

/* Hero A: typografisch, gecentreerd, met een strook van drie foto's. Samen met de header nooit hoger dan het scherm */
.hero-a{display:flex;flex-direction:column;padding:var(--cl-ruimte-12) 0 0;overflow:hidden}
.hero-a-tekst{text-align:center;justify-items:center;display:grid;max-width:48rem}
.hero-a-tekst .intro{margin-inline:auto}
.hero-a-tekst .knoppen{justify-content:center}
.hero-a-strook{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cl-ruimte-2);margin:var(--cl-ruimte-12) 0 0;padding:0 var(--cl-ruimte-2)}
.hero-a-strook .beeld{aspect-ratio:4/5}
.hero-a-strook li:nth-child(2){transform:translateY(-24px)}
@media (min-width:62em){
  .hero-a{height:calc(100svh - var(--kop-hoogte));min-height:600px;padding-top:var(--cl-ruimte-16)}
  .hero-a-strook{flex:1;min-height:0;gap:var(--cl-kolomafstand);padding:0 var(--cl-marge);max-width:var(--cl-container);margin-inline:auto;width:100%}
  .hero-a-strook .beeld{aspect-ratio:auto;height:100%;position:relative}
  .hero-a-strook img{position:absolute;inset:0}
  .hero-a-strook li:nth-child(2){transform:none}
}

/* Hero B: tekstband op inkt, daaronder een breed beeld over de volle breedte */
.hero-b{padding:var(--cl-ruimte-12) 0 0;display:flex;flex-direction:column}
.hero-b-tekst{display:grid;gap:var(--cl-ruimte-6);padding-bottom:var(--cl-ruimte-12)}
.hero-b-beeld{aspect-ratio:4/5}
@media (min-width:48em){.hero-b-beeld{aspect-ratio:3/2}}
@media (min-width:62em){
  .hero-b{height:calc(100svh - var(--kop-hoogte));min-height:600px;padding-top:var(--cl-ruimte-16)}
  .hero-b-tekst{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cl-kolomafstand);align-items:end;padding-bottom:var(--cl-ruimte-16)}
  .hero-b-tekst>h1{grid-column:1/span 6}
  .hero-b-tekst>div{grid-column:8/-1}
  .hero-b-beeld{flex:1;min-height:0;aspect-ratio:auto;position:relative}
  .hero-b-beeld img{position:absolute;inset:0}
}
.hero-b-beeld img{object-position:50% 35%}

/* Cookiemelding: klein vlak onderin, blokkeert de pagina niet. Twee gelijke knoppen */
.cookiemelding{position:fixed;left:var(--cl-ruimte-2);right:var(--cl-ruimte-2);bottom:var(--cl-ruimte-2);z-index:80;display:grid;background:var(--cl-achtergrond-pagina);color:var(--cl-tekst-standaard);border:1px solid var(--cl-rand-decoratief);gap:var(--cl-ruimte-4);padding:var(--cl-ruimte-6);border-radius:var(--cl-vorm-hoekradius);font-size:var(--cl-klein-grootte);line-height:var(--cl-klein-regelhoogte)}
.cookiemelding[hidden]{display:none}
.cookiemelding .knoppen{gap:var(--cl-ruimte-3)}
.cookiemelding .knop{flex:1}
@media (min-width:48em){.cookiemelding{left:var(--cl-marge);right:auto;bottom:var(--cl-ruimte-6);max-width:26rem}}
.voet-knop{display:inline-flex;align-items:center;min-height:36px;padding:0;border:0;background:none;color:var(--cl-tekst-op-donker-zacht);font:inherit;cursor:pointer;text-align:left}
@media (hover:hover){.voet-knop:hover{color:var(--cl-tekst-op-donker);text-decoration:underline}}

/* Lopende tekst (privacyverklaring) */
.lopende-tekst{max-width:var(--cl-tekstbreedte)}
.lopende-tekst h2{margin-top:var(--cl-ruimte-12)}
.lopende-tekst h2:first-child{margin-top:0}
.lopende-tekst h2+p,.lopende-tekst h2+div{margin-top:var(--cl-ruimte-3)}
.lopende-tekst p+p,.lopende-tekst div+p{margin-top:var(--cl-ruimte-4)}
.tabel-scroll{overflow-x:auto;margin-top:var(--cl-ruimte-4)}
.gegevenstabel{width:100%;min-width:34rem;border-collapse:collapse;font-size:var(--cl-klein-grootte);line-height:var(--cl-klein-regelhoogte)}
.gegevenstabel th,.gegevenstabel td{padding:var(--cl-ruimte-3) var(--cl-ruimte-3) var(--cl-ruimte-3) 0;border-bottom:1px solid var(--cl-rand-decoratief);text-align:left;vertical-align:top}
.gegevenstabel th{font-family:var(--cl-label-familie);font-weight:700;letter-spacing:var(--cl-label-tracking);text-transform:uppercase;border-bottom-color:currentColor}
.link-knop{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;cursor:pointer}
@media (hover:hover){.link-knop:hover{text-decoration-thickness:2px}}
.cookiemelding .link{color:inherit}