/* ═══════════════════════════════════════════════════════════
   KOPJE DROMEN — vormgeving
   Gebouwd door Smeulders Digital.

   Senne noemde zelf drie kleuren: zwart, wit en kaki groen. Die
   drie zitten ook echt in de zaak. Het zwart in de krijtborden en
   de tafelvoeten, het wit in de lambrisering, het kaki in de
   stoelen en de terraskussens. En in de rookpluim van hun logo.

   Hij vroeg om "warm" en "landelijk". Daarom is het wit hier geen
   klinisch wit maar een warm crème, en staat er onder de zwarte
   koppen een serif in plaats van een strakke schreefloze.

   De letters komen uit zijn eigen menukaart: League Spartan voor
   de kleine kapitalen boven een blok, Libre Baskerville voor de
   koppen en de citaten. Zo staat de site in dezelfde stem als het
   drukwerk dat al op tafel ligt.

   De opbouw volgt Studio Varen, want dat is de site die hij zelf
   aanwees: veel ruimte, secties die met kleur van elkaar scheiden
   in plaats van met een lijn, en pilvormige knoppen waarbij de
   gevulde pil hoort bij de ene handeling die telt. Hier is dat
   altijd reserveren.
   ═══════════════════════════════════════════════════════════ */


/* ── 1 · TOKENS ────────────────────────────────────────────── */

:root {
  /* inkt en papier */
  --inkt:        #1b1a17;
  --inkt-zacht:  #55524a;
  --inkt-flauw:  #857f73;
  --papier:      #ffffff;
  --canvas:      #f6f2ea;
  --canvas-diep: #ece5d8;
  --lijn:        #e2dbcc;
  --lijn-fijn:   #efe9dc;

  /* kaki, de derde kleur van de zaak. Niet gekozen maar gemeten:
     dit is exact de tint van de rookpluim in hun eigen logo. */
  --kaki:        #515f4d;
  --kaki-diep:   #3b4639;
  --kaki-licht:  #a8b39f;
  --kaki-waas:   #eef0ea;

  /* op donker */
  --op-donker:   #f6f2ea;
  --lijn-donker: rgba(246, 242, 234, .18);

  --spartan: "League Spartan", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif:   "Libre Baskerville", Georgia, "Times New Roman", serif;
  --tekst:   "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap:      1180px;
  --wrap-smal: 720px;

  --r-kaart: 22px;
  --r-veld:  12px;
  --r-pil:   980px;

  --balk-hoog: 68px;
  --soepel: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--tekst);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--kaki-diep); text-underline-offset: .18em; }

:target { scroll-margin-top: calc(var(--balk-hoog) + 28px); }

.verborgen {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Springt met de tab-toets als eerste tevoorschijn. */
.overslaan {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--inkt); color: var(--op-donker);
  padding: 12px 20px; border-radius: 0 0 var(--r-veld) 0;
}
.overslaan:focus { left: 0; }


/* ── 2 · TYPOGRAFIE ────────────────────────────────────────── */

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

.display {
  font-family: var(--serif);
  font-size: clamp(38px, 6.2vw, 76px);
  line-height: 1.08;
  letter-spacing: -.015em;
}

.kop-groot {
  font-family: var(--serif);
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.14;
  letter-spacing: -.012em;
}

.kop {
  font-family: var(--serif);
  font-size: clamp(25px, 3.2vw, 38px);
  line-height: 1.2;
  letter-spacing: -.008em;
}

.kop-klein {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.28;
}

/* Het kleine kapitaal boven een blok. Zo staan de hoofdstukken ook
   op hun eigen menukaart: DRINKS, KOFFIE, THEEKAART. */
.label {
  font-family: var(--spartan);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--kaki);
  margin: 0 0 14px;
}

.lood {
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.6;
  color: var(--inkt-zacht);
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }


/* ── 3 · RASTER ────────────────────────────────────────────── */

.binnen {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.blok { padding: clamp(64px, 9vw, 118px) 0; }
.blok--kort { padding: clamp(44px, 6vw, 76px) 0; }

.blok--canvas { background: var(--canvas); }
.blok--waas   { background: var(--kaki-waas); }
.blok--donker { background: var(--inkt); color: var(--op-donker); }
.blok--donker .label { color: var(--kaki-licht); }
.blok--donker .lood  { color: rgba(246, 242, 234, .78); }
/* Wel de gewone links in een donker vlak lichter zetten, maar niet de
   knoppen. Zonder :not(.knop) is deze regel een puntje specifieker dan
   .knop--licht, en dan krijgt een crème knop lichtgroene tekst op een
   crème vlak. Die leest dan als uitgeschakeld terwijl hij gewoon werkt. */
.blok--donker a:not(.knop) { color: var(--kaki-licht); }

.smal { max-width: var(--wrap-smal); }

.duo {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (min-width: 62rem) {
  .duo { grid-template-columns: 1fr 1fr; }
  /* In de opmaak staat de tekst altijd eerst, dus staat het beeld
     vanzelf rechts. Wil je het links, dan draai je alleen dat blok om.
     Zo lopen de foto's schuin over de pagina in plaats van allemaal
     in dezelfde kolom onder elkaar.

     Alleen op een breed scherm: op een telefoon staat alles onder
     elkaar en dan lees je liever eerst waarover het gaat. */
  .duo--beeld-links .duo__beeld { order: -1; }
}

.duo__beeld { margin: 0; }

/* 3:2 en niet 4:3. Dat is de verhouding waarin de fotograaf van
   Kopje Dromen geschoten heeft, en waarin ook een gsm liggend
   fotografeert. Op 4:3 sneed de foto van Senne en zijn mama hen
   allebei net weg, want die zitten links en rechts in beeld.

   De verhouding staat wel vast, want een klant laadt op wat hij
   heeft: staand, liggend of vierkant door elkaar. Met object-fit
   blijft de pagina hoe dan ook kloppen. */
.duo__beeld img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-kaart);
}
.duo__beeld--staand img { aspect-ratio: 3 / 4; }
.duo__beeld--breed img  { aspect-ratio: 2 / 1; }


/* ── 4 · KNOPPEN ───────────────────────────────────────────── */

.knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tekst);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 15px 30px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pil);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--soepel), color .2s var(--soepel),
              border-color .2s var(--soepel), transform .2s var(--soepel);
}
.knop:hover { transform: translateY(-2px); }
.knop:active { transform: translateY(0); }

.knop--vol {
  background: var(--kaki);
  border-color: var(--kaki);
  color: #fff;
}
.knop--vol:hover { background: var(--kaki-diep); border-color: var(--kaki-diep); }

.knop--rand {
  background: transparent;
  border-color: var(--lijn);
  color: var(--inkt);
}
.knop--rand:hover { border-color: var(--inkt); }

.knop--licht {
  background: var(--op-donker);
  border-color: var(--op-donker);
  color: var(--inkt);
}
.knop--licht:hover { background: #fff; border-color: #fff; }

/* Op elk donker vlak moet de omlijnde knop van kleur wisselen, anders
   staat er zwarte tekst in een onzichtbaar kader. Geldt voor de secties
   in het zwart en voor het eerste scherm van elke pagina. */
.blok--donker .knop--rand,
.held .knop--rand { border-color: rgba(246, 242, 234, .45); color: var(--op-donker); }
.blok--donker .knop--rand:hover,
.held .knop--rand:hover { border-color: var(--op-donker); background: rgba(246, 242, 234, .1); }


/* ── 5 · HET STARTSCHERM ───────────────────────────────────── */

/* Belangrijk: het scherm is standaard weg en komt alleen terug via
   .kd-toon-intro. Die klasse zet het stukje javascript in de kop van
   de pagina, en datzelfde stukje hangt er meteen de uitwegen aan.
   Zet je dit aan een algemene klasse, dan kan een bezoeker op zijn
   tweede bezoek achter een dood scherm blijven staan. */

.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  text-align: center;
  background: var(--inkt);
  color: var(--op-donker);
  padding: 32px 24px;
  overflow: hidden;
}

.kd-toon-intro .intro { display: grid; }
.kd-vast body { overflow: hidden; }

.intro.is-weg {
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s var(--soepel), visibility 0s .7s;
}

.intro__beeld {
  position: absolute;
  inset: 0;
  opacity: .34;
}
.intro__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.3) brightness(.62);
  animation: traag-in 18s var(--soepel) forwards;
}
@keyframes traag-in {
  from { transform: scale(1.1); }
  to   { transform: scale(1); }
}
.intro__beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(27,26,23,.45) 0%, rgba(27,26,23,.92) 72%);
}

.intro__binnen {
  position: relative;
  z-index: 1;
  max-width: 620px;
  animation: intro-op .9s var(--soepel) both;
}
@keyframes intro-op {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.intro__logo {
  width: clamp(96px, 15vw, 140px);
  height: auto;
  margin: 0 auto 26px;
}

.intro__woord {
  font-family: var(--spartan);
  font-size: clamp(30px, 6.4vw, 62px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  line-height: 1.06;
  margin: 0;
  /* de laatste letter krijgt de letterafstand ook nog mee, dus schuift
     het woord anders een halve letter naar links */
  text-indent: .16em;
}

.intro__onder {
  font-family: var(--spartan);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--kaki-licht);
  margin: 16px 0 0;
  text-indent: .3em;
}

.intro__slogan {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 2.1vw, 20px);
  line-height: 1.5;
  color: rgba(246, 242, 234, .8);
  margin: 26px auto 0;
  max-width: 30ch;
}

.intro__knop { margin-top: 34px; }

.intro__adres {
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(246, 242, 234, .5);
  margin: 30px 0 0;
}


/* ── 6 · DE MENUBALK ───────────────────────────────────────── */

.balk {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--lijn-fijn);
}

.balk__in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  height: var(--balk-hoog);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.balk__merk {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--inkt);
}
.balk__merk img { width: 36px; height: 36px; object-fit: contain; }

.balk__naam {
  font-family: var(--spartan);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
}

.balk__menu {
  display: flex;
  align-items: center;
  gap: 26px;
}
.balk__menu a {
  font-size: 15px;
  color: var(--inkt-zacht);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  transition: color .2s var(--soepel), border-color .2s var(--soepel);
}
.balk__menu a:hover { color: var(--inkt); }
.balk__menu a[aria-current="page"] { color: var(--inkt); border-bottom-color: var(--kaki); }

/* De selector moet hier .balk__menu meenemen. Schrijf je alleen
   .balk__reserveer, dan is dat een puntje minder specifiek dan
   .balk__menu a hierboven, en wint die met zijn padding van 6px 0.
   Het woord Reserveren stond dan strak tegen de rand van de pil. */
.balk__menu a.balk__reserveer {
  padding: 11px 24px;
  font-size: 15px;
  color: #fff !important;
  border-bottom: 1.5px solid var(--kaki) !important;
}
.balk__menu a.balk__reserveer:hover { color: #fff !important; }

.balk__knop {
  display: none;
  width: 44px; height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.balk__streepjes,
.balk__streepjes::before,
.balk__streepjes::after {
  position: absolute;
  left: 12px;
  width: 20px; height: 1.5px;
  background: var(--inkt);
  transition: transform .25s var(--soepel), opacity .2s;
}
.balk__streepjes { top: 21px; }
.balk__streepjes::before { content: ""; top: -6px; left: 0; }
.balk__streepjes::after  { content: ""; top: 6px;  left: 0; }

.is-menu-open .balk__streepjes { background: transparent; }
.is-menu-open .balk__streepjes::before { transform: translateY(6px) rotate(45deg); }
.is-menu-open .balk__streepjes::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 60rem) {
  .balk__knop { display: block; }
  .balk__menu {
    position: fixed;
    inset: var(--balk-hoog) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--papier);
    border-bottom: 1px solid var(--lijn);
    padding: 8px 24px 26px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s var(--soepel), transform .22s var(--soepel), visibility 0s .22s;
  }
  .is-menu-open .balk__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .22s var(--soepel), transform .22s var(--soepel);
  }
  .balk__menu a {
    padding: 15px 0;
    font-size: 17px;
    border-bottom: 1px solid var(--lijn-fijn);
  }
  .balk__menu a[aria-current="page"] { border-bottom-color: var(--lijn-fijn); color: var(--kaki-diep); }
  .balk__menu a.balk__reserveer {
    margin-top: 18px;
    padding: 15px 24px;
    border-bottom: 0 !important;
    text-align: center;
  }
}


/* ── 7 · HET EERSTE SCHERM VAN EEN PAGINA ──────────────────── */

/* Het beeld loopt door tot onderaan het scherm: precies één scherm vol,
   met de menubalk eraf. Zo zie je bij het openen alleen de zaak, en
   begint de rest van de pagina netjes onder de vouw.

   Twee keer opgeschreven met opzet. svh is de hoogte zonder de balken
   van de browser; die kent niet elke telefoon, en wie hem niet kent
   gebruikt de gewone vh eerboven. En een bodem van 520 px, want in een
   laag venster moeten de titel, de zin en de twee knoppen er nog in
   passen zonder op elkaar te kruipen. */
.held {
  position: relative;
  min-height: max(520px, calc(100vh - var(--balk-hoog)));
  min-height: max(520px, calc(100svh - var(--balk-hoog)));
  display: grid;
  align-items: end;
  color: var(--op-donker);
  overflow: hidden;
}

.held__achter { position: absolute; inset: 0; }

/* De zaal is licht geschilderd en de foto's zijn helder geschoten, dus
   er moet iets over of de crème tekst valt weg tegen het plafond. Maar
   het mag niet zo zwaar dat je de zaak niet meer ziet: dat is nu net
   het beeld dat moet verkopen.

   Daarom de foto zelf maar licht temperen, en het donker vooral in het
   verloop onderaan leggen, precies waar de tekst staat. Boven blijft
   het bijna open, zodat je het krijtbord en de lambrisering ziet. */
.held__achter img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.86) saturate(.95);
}
.held__achter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(27,26,23,.84) 0%,
              rgba(27,26,23,.70) 34%,
              rgba(27,26,23,.48) 62%,
              rgba(27,26,23,.18) 90%,
              rgba(27,26,23,.10) 100%);
}

/* De tekst staat gecentreerd onderaan het beeld, niet links bovenin.
   Zo leest het eerste scherm als één plaat: foto, en daaronder in het
   midden waar je bent en wat je hier doet.

   Wil je dit alleen op de startpagina, zet dan .p-home ervoor: de
   binnenpagina's dragen .held--kort. */
.held__binnen {
  position: relative;
  padding-top: 120px;
  padding-bottom: clamp(44px, 6vw, 76px);
  text-align: center;
}

/* Een zachte schaduw onder de tekst in plaats van een zwaardere waas
   over de foto. Dat is de ruil: de zaal blijft zichtbaar, en de letters
   houden hun eigen rand ook waar het plafond wit is. Alleen op de tekst,
   niet op de knoppen: die hebben hun eigen vlak. */
.held__label,
.held__titel,
.held__tekst,
.held .status {
  text-shadow: 0 1px 22px rgba(27, 26, 23, .58),
               0 1px 4px rgba(27, 26, 23, .34);
}

.held__label { color: var(--kaki-licht); }

.held__titel {
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
}
.held__tekst {
  max-width: 46ch;
  margin: 20px auto 0;
  font-size: clamp(17px, 1.8vw, 20px);
  color: rgba(246, 242, 234, .88);
}

.held .knoppen { justify-content: center; }

/* Een smallere kop voor de binnenpagina's. */
.held--kort { min-height: min(52vh, 440px); }


/* ── 7b · DE KOP VAN DE VERHAALPAGINA ──────────────────────── */

/* Deze pagina gaat over wie er achter de zaak staat, dus daar hoort
   de foto van Senne niet achter een titel te verdwijnen. Tekst en
   beeld staan hier naast elkaar in plaats van over elkaar: je leest
   de kop op het crème, en je ziet hem gewoon staan. */

.portret {
  display: grid;
  background: var(--canvas);
}

.portret__tekst {
  display: flex;
  align-items: center;
  padding: clamp(52px, 8vw, 96px) 0;
}
.portret__tekst-in {
  width: 100%;
  max-width: 34rem;
  padding: 0 24px;
  margin-left: auto;
}

.portret__beeld { margin: 0; }
.portret__beeld img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  /* iets hoger dan het midden, zodat een gezicht niet halverwege
     wordt afgesneden */
  object-position: 50% 32%;
}

/* De titel staat hier in een halve kolom en niet over de volle
   breedte, dus hij mag een maat kleiner. Op 76 px viel hij anders
   in vier korte regels uiteen. */
.portret .display { font-size: clamp(34px, 4vw, 58px); }

.portret__wie {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1.5px solid var(--kaki-licht);
  font-size: 16px;
  color: var(--inkt-zacht);
}

@media (min-width: 62rem) {
  .portret {
    grid-template-columns: 1fr 1fr;
    min-height: min(72vh, 620px);
  }
  .portret__tekst-in {
    padding-right: clamp(24px, 4vw, 64px);
    /* uitlijnen met de rest van de pagina */
    max-width: calc(var(--wrap) / 2);
  }
}
@media (max-width: 61.99rem) {
  .portret__beeld { order: -1; }
  .portret__beeld img { aspect-ratio: 3 / 2; height: auto; }
  .portret__tekst-in { margin: 0 auto; max-width: var(--wrap); }
}

/* Het stipje dat zegt of de deur nu openstaat. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 22px 0 0;
  font-size: 14px;
  letter-spacing: .02em;
  color: rgba(246, 242, 234, .82);
}
.status__stip {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--inkt-flauw);
  flex: none;
}
.status__stip.is-open {
  background: #86b17a;
  box-shadow: 0 0 0 4px rgba(134, 177, 122, .22);
}


/* ── 8 · TROEVEN ───────────────────────────────────────────── */

.troeven {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px;
}
@media (min-width: 48rem) {
  .troeven { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 36px; }
}
.troeven li {
  border-top: 1.5px solid var(--kaki-licht);
  padding-top: 18px;
}
.troeven strong {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  margin-bottom: 7px;
}
.troeven span { color: var(--inkt-zacht); font-size: 16px; }


/* ── 9 · DE KAART ──────────────────────────────────────────── */

/* Het raster mag niet vastzitten op een aantal. Senne wisselt zijn
   kaart met de seizoenen, dus een groep met vier items en een groep
   met achttien moeten er allebei goed uitzien. */

.kaartnav {
  position: sticky;
  top: var(--balk-hoog);
  z-index: 50;
  background: rgba(246, 242, 234, .95);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--lijn);
}
.kaartnav__in {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 12px 24px;
  max-width: var(--wrap);
  margin: 0 auto;
}
.kaartnav__in::-webkit-scrollbar { display: none; }
.kaartnav a {
  flex: none;
  font-family: var(--spartan);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--inkt-zacht);
  text-decoration: none;
  padding: 9px 16px;
  border-radius: var(--r-pil);
  transition: background .2s var(--soepel), color .2s var(--soepel);
}
.kaartnav a:hover { background: var(--canvas-diep); color: var(--inkt); }
.kaartnav a.is-hier { background: var(--inkt); color: var(--op-donker); }

.deel { padding: clamp(52px, 7vw, 88px) 0 0; }
.deel__kop { margin-bottom: 40px; }

.groepen {
  display: grid;
  gap: clamp(36px, 5vw, 60px);
}
@media (min-width: 60rem) {
  .groepen { grid-template-columns: 1fr 1fr; }
}

.groep { break-inside: avoid; }
.groep__titel {
  font-family: var(--spartan);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--inkt);
  margin: 0 0 4px;
}
.groep__intro {
  font-size: 15px;
  font-style: italic;
  font-family: var(--serif);
  color: var(--inkt-zacht);
  margin: 14px 0 0;
}
.groep__nota {
  font-size: 14px;
  color: var(--inkt-flauw);
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--lijn-fijn);
}

.items { list-style: none; margin: 14px 0 0; padding: 0; }
.items li { padding: 13px 0; border-bottom: 1px solid var(--lijn-fijn); }
.items li:last-child { border-bottom: 0; }

.item__regel {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.item__naam { font-weight: 600; font-size: 16.5px; }
.item__punten {
  flex: 1;
  border-bottom: 1px dotted var(--lijn);
  transform: translateY(-4px);
}
.item__prijs { font-variant-numeric: tabular-nums; color: var(--inkt-zacht); }
.item__uitleg {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: var(--inkt-zacht);
  margin-top: 3px;
  max-width: 52ch;
}


/* ── 10 · ONTBIJT ──────────────────────────────────────────── */

.formules {
  display: grid;
  gap: 26px;
}
@media (min-width: 52rem) {
  .formules { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
}

.formule {
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--r-kaart);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
}
.formule__nota {
  font-family: var(--spartan);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--kaki);
  margin: 0 0 10px;
}
.formule__naam { margin-bottom: 18px; }
.formule ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15.5px;
}
.formule ul li {
  padding: 7px 0 7px 20px;
  position: relative;
  color: var(--inkt-zacht);
}
.formule ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 15px;
  width: 7px; height: 1.5px;
  background: var(--kaki-licht);
}
.formule__extra {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--lijn-fijn);
  font-size: 14.5px;
  color: var(--inkt-flauw);
}


/* ── 11 · OPENINGSUREN ─────────────────────────────────────── */

.uren { list-style: none; margin: 0; padding: 0; }
.uren li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--lijn-fijn);
}
.uren li:last-child { border-bottom: 0; }
.uren li.is-vandaag { font-weight: 600; }
.uren li.is-vandaag .uren__dag::after {
  content: " · vandaag";
  font-weight: 400;
  color: var(--kaki);
  font-size: 13px;
}
.uren__tijd { color: var(--inkt-zacht); font-variant-numeric: tabular-nums; white-space: nowrap; }
.uren--klein li { padding: 7px 0; font-size: 15px; border-bottom: 0; }

.melding {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--kaki-waas);
  border-left: 3px solid var(--kaki);
  border-radius: 0 var(--r-veld) var(--r-veld) 0;
  padding: 16px 20px;
  margin-top: 22px;
  font-size: 15.5px;
}


/* ── 12 · GALERIJ ──────────────────────────────────────────── */

/* Een vast aantal kolommen, geen auto-fit. Met auto-fit hangt het van
   de schermbreedte af hoeveel foto's er op een rij passen, en dan bleef
   er op een breed scherm eentje alleen op een halve rij staan. Nu zijn
   het er altijd drie, twee of een, dus met zes foto's krijg je altijd
   volle rijen. */
.galerij {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .galerij { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .galerij { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

.galerij figure { margin: 0; }
.galerij img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-veld);
}


/* ── 13 · CITAAT EN PERS ───────────────────────────────────── */

.citaat {
  font-family: var(--serif);
  font-size: clamp(21px, 2.8vw, 31px);
  font-style: italic;
  line-height: 1.42;
  margin: 0;
  max-width: 24ch;
}
.citaat__wie {
  display: block;
  font-family: var(--tekst);
  font-style: normal;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--kaki-licht);
  margin-top: 22px;
}

.pers { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pers a {
  display: block;
  padding: 22px 0;
  border-top: 1px solid var(--lijn);
  text-decoration: none;
  color: inherit;
  transition: padding-left .25s var(--soepel);
}
.pers a:hover { padding-left: 10px; }
.pers li:last-child a { border-bottom: 1px solid var(--lijn); }
.pers__bron {
  font-family: var(--spartan);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--kaki);
}
.pers__kop {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 22px);
  margin-top: 8px;
}


/* ── 14 · DE OPROEP EN DE VOET ─────────────────────────────── */

.oproep {
  background: var(--inkt);
  color: var(--op-donker);
  padding: clamp(58px, 8vw, 96px) 0;
  text-align: center;
}
.oproep__in { max-width: 620px; }
.oproep__tekst { margin-top: 16px; color: rgba(246, 242, 234, .78); }
.oproep .knoppen { justify-content: center; }
.oproep .knop--vol { background: var(--op-donker); border-color: var(--op-donker); color: var(--inkt); }
.oproep .knop--vol:hover { background: #fff; border-color: #fff; }
.oproep .knop--rand { border-color: var(--lijn-donker); color: var(--op-donker); }
.oproep .knop--rand:hover { border-color: var(--op-donker); }
.oproep__nota { margin-top: 22px; font-size: 13.5px; color: rgba(246, 242, 234, .45); }

.voet {
  background: var(--canvas);
  padding: clamp(52px, 6vw, 78px) 0 0;
  font-size: 15.5px;
}
.voet__raster {
  display: grid;
  gap: 40px;
}
@media (min-width: 52rem) {
  .voet__raster { grid-template-columns: 1.2fr 1fr 1fr; gap: 56px; }
}
.voet__merk {
  font-family: var(--spartan);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  margin: 0 0 10px;
}
.voet__slogan {
  font-family: var(--serif);
  font-style: italic;
  color: var(--inkt-zacht);
  max-width: 28ch;
}
.voet__kop {
  font-family: var(--spartan);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--kaki);
  margin: 0 0 14px;
}
.voet__nota { font-size: 13.5px; color: var(--inkt-flauw); margin-top: 12px; }
.voet__sociaal { display: flex; gap: 18px; margin-top: 20px; }
.voet__adres { font-style: normal; }
.voet__route { font-weight: 600; }

.voet__onder {
  margin-top: clamp(40px, 5vw, 60px);
  padding: 22px 24px;
  border-top: 1px solid var(--lijn);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  color: var(--inkt-flauw);
}
.voet__onder p { margin: 0; }
.voet__onder a { color: inherit; }

/* De wettelijke regel: naam met rechtsvorm, ondernemingsnummer, btw en
   het rechtspersonenregister. Klein, maar leesbaar, en op elke pagina. */
.voet__wet {
  margin-top: clamp(32px, 4vw, 48px);
  padding: 0 24px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--inkt-flauw);
}
.voet__wet p { margin: 0; max-width: none; }
.voet__wet + .voet__onder { margin-top: 18px; }


/* ── 15 · BEWEGING ─────────────────────────────────────────── */

/* Blokken komen op terwijl je scrolt. Genoeg om te merken, niet
   zoveel dat je erop moet wachten. */
.op {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--soepel), transform .7s var(--soepel);
}
.op.is-op { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .op { opacity: 1; transform: none; transition: none; }
  .intro__beeld img, .intro__binnen { animation: none; }
}


/* ── 14 · EVENTEN ──────────────────────────────────────────── */

/* Een event is een kaart met de foto naast de tekst. Zonder foto
   loopt de tekst gewoon over de volle breedte door, want een lege
   helft naast een alinea leest als een fout. */

.eventen {
  display: grid;
  gap: clamp(26px, 3.5vw, 44px);
}

.event {
  display: grid;
  background: var(--papier);
  border: 1.5px solid var(--lijn);
  border-radius: var(--r-kaart);
  overflow: hidden;
}

.event__beeld { margin: 0; }
.event__beeld img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.event__tekst { padding: clamp(24px, 3.4vw, 44px); }

/* De datum is het eerste wat telt bij een event, dus die staat boven
   de titel en in de merkkleur. */
.event__datum {
  margin: 0 0 10px;
  font-family: var(--spartan);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kaki);
}
.event__tijd::before {
  content: "·";
  margin: 0 .5em;
  color: var(--kaki-licht);
}

.event__titel { margin: 0; }

.event__lopend { margin-top: 16px; }
.event__lopend p {
  margin: 0 0 14px;
  color: var(--inkt-zacht);
}
.event__lopend p:last-child { margin-bottom: 0; }

.event .knoppen { margin-top: 24px; }

@media (min-width: 62rem) {
  .event { grid-template-columns: 5fr 6fr; align-items: stretch; }
  .event__beeld img { aspect-ratio: auto; }
}


/* Wat geweest is, staat als een raster van compacte kaartjes. Eerst was
   dit een kale lijst met alleen datum en titel, maar Senne zet er de
   winterbar van vorig jaar in met foto en verhaal om te tonen wat ze
   doen. Een kaartje zonder foto blijft klein: datum en titel, meer niet. */
.voorbijen {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .voorbijen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .voorbijen { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

.voorbij {
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border: 1.5px solid var(--lijn);
  border-radius: var(--r-kaart);
  overflow: hidden;
}
.voorbij__beeld { margin: 0; }
.voorbij__beeld img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.voorbij__tekst { padding: 20px 22px 24px; }
.voorbij__datum {
  margin: 0 0 6px;
  font-family: var(--spartan);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inkt-flauw);
}
.voorbij__titel {
  margin: 0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.3;
  color: var(--inkt);
}
.voorbij__lopend { margin-top: 12px; font-size: 15.5px; }
.voorbij__lopend p { margin: 0 0 10px; color: var(--inkt-zacht); }
.voorbij__lopend p:last-child { margin-bottom: 0; }

/* Het eerstvolgende event op de startpagina. Eén kaart, verder niets,
   en het hele blok verdwijnt zodra er niets gepland staat. */
.opkomst { display: grid; gap: clamp(24px, 3vw, 40px); }
@media (min-width: 62rem) {
  .opkomst { grid-template-columns: 1fr 1.35fr; align-items: center; }
}


/* ── 15 · DE BANDEN TUSSEN DE HOOFDSTUKKEN VAN DE KAART ────── */

/* De kaart is lang: achttien groepen en bijna tweehonderd regels. Een
   beeld over de volle breedte tussen twee hoofdstukken breekt die muur
   en laat je zien dat je een stuk verder bent. Laag genoeg om niet de
   aandacht van de kaart weg te nemen.

   Ook de voet van elk raakvlak: op een telefoon is 34 vh genoeg om te
   voelen als een adempauze zonder dat je erdoor moet scrollen. */
.band {
  margin: clamp(48px, 6vw, 84px) 0;
  overflow: hidden;
}
.band img {
  width: 100%;
  height: clamp(160px, 26vw, 300px);
  object-fit: cover;
  display: block;
}


/* ── 16 · RAAKVLAKKEN IN DE VOET ───────────────────────────── */

/* De links in de voet waren 21 tot 25 px hoog. Op een telefoon is dat
   te klein om met een duim te raken; de richtlijn is 44 px. Met wat
   lucht erboven en eronder wordt het raakvlak groot genoeg zonder dat
   de tekst er anders uitziet. De negatieve marge haalt die lucht weer
   uit de opmaak, zodat de regels niet verder uit elkaar komen te staan. */
@media (max-width: 61.99rem) {
  .voet a,
  .voet__sociaal a {
    display: inline-block;
    padding: 11px 0;
    margin: -11px 0;
  }
  .voet__sociaal { gap: 24px; }
}


/* ── 17 · PROEF: DE MENUBALK IN HET KAKI ───────────────────── */

/* Een proefopstelling, geen definitieve keuze. De balk krijgt het kaki
   van de zaak in plaats van wit, en de reserveerknop wordt wit zodat
   hij daar juist tegen afsteekt.

   Uitzetten doe je op één plek: zet $balkKaki in delen/kop.php op
   false. Dan haalt de pagina de klasse weg en zet ze meteen het
   donkere logo terug, en staat alles hieronder buitenspel. */

.balk--kaki {
  background: rgba(81, 95, 77, .94);
  border-bottom-color: rgba(246, 242, 234, .16);
}

.balk--kaki .balk__merk { color: var(--op-donker); }

.balk--kaki .balk__menu a { color: rgba(246, 242, 234, .86); }
.balk--kaki .balk__menu a:hover { color: var(--op-donker); }
.balk--kaki .balk__menu a[aria-current="page"] {
  color: var(--op-donker);
  border-bottom-color: var(--op-donker);
}

/* Wit op kaki, met de donkere kaki als tekst. Dat haalt ruim 8 keer
   contrast, dus hij leest ook op een telefoon in de zon. */
.balk--kaki .balk__menu a.balk__reserveer {
  background: #fff;
  border-color: #fff;
  color: var(--kaki-diep) !important;
  border-bottom: 1.5px solid #fff !important;
}
.balk--kaki .balk__menu a.balk__reserveer:hover {
  background: var(--op-donker);
  border-color: var(--op-donker);
  color: var(--kaki-diep) !important;
}

.balk--kaki .balk__streepjes,
.balk--kaki .balk__streepjes::before,
.balk--kaki .balk__streepjes::after { background: var(--op-donker); }

/* Deze moet specifieker zijn dan de regel hierboven, anders blijft het
   middelste streepje staan en vormt het kruisje zich niet. */
.is-menu-open .balk--kaki .balk__streepjes { background: transparent; }

@media (max-width: 60rem) {
  /* Het uitklapmenu is een eigen vlak en staat dus los van de balk.
     Zonder deze regel blijft dat wit, met lichte tekst erin. */
  .balk--kaki .balk__menu {
    background: var(--kaki);
    border-bottom-color: rgba(246, 242, 234, .16);
  }
  .balk--kaki .balk__menu a { border-bottom-color: rgba(246, 242, 234, .16); }
  .balk--kaki .balk__menu a[aria-current="page"] {
    color: var(--op-donker);
    border-bottom-color: rgba(246, 242, 234, .16);
  }
}


/* ── 18 · DE PRIVACYPAGINA ─────────────────────────────────── */

/* Gewoon leesbare tekst, in de smalle kolom. Geen kaarten, geen
   beeld: het is een verklaring, geen verkooppagina. */
.privacy { margin-top: clamp(36px, 5vw, 56px); }
.privacy h2 { margin: 34px 0 10px; }
.privacy h2:first-child { margin-top: 0; }
.privacy p { color: var(--inkt-zacht); max-width: 62ch; }
.privacy p b { color: var(--inkt); font-weight: 600; }
.privacy__datum {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1.5px solid var(--lijn);
  font-size: 14px;
  color: var(--inkt-flauw);
}