/* Componenten: uiterlijk van herbruikbare onderdelen. */

/* ---------- Header en navigatie ----------
   Vast bovenaan. Bovenaan de pagina is ze doorzichtig (over het oranje van de hero);
   eens gescrold krijgt ze een vlak, en ze verdwijnt naar boven bij het naar beneden
   scrollen (js/main.js, setupHeader). Geen transform in rust: anders zou het mobiele
   menupaneel (position: fixed) aan de header vastzitten. */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--inkt);
  transition: transform var(--duur-menu) var(--ease-uit);
}

.header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--kalk) 90%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 -1px 0 var(--lijn);
  opacity: 0;
  transition: opacity var(--duur-snel) var(--ease);
}

.header.is-gescrold::before {
  opacity: 1;
}

.header.is-weg {
  transform: translateY(-100%);
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--duur-snel) var(--ease);
}

.logo:hover {
  color: inherit;
  opacity: 0.7;
}

.logo svg {
  height: 0.95rem;
  width: auto;
}

.nav__toggle,
.nav__voet {
  display: none;
}

.nav__lijst {
  display: flex;
  gap: clamp(var(--space-4), 2.2vw, var(--space-6));
}

.nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--space-3);
  color: inherit;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* lijntje dat van links binnenschuift en naar rechts weer weg */
.nav__link::after {
  content: '';
  position: absolute;
  inset: auto 0 var(--space-2);
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duur-reveal) var(--ease-uit);
}

.nav__link:hover {
  color: inherit;
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Mobiel: een oranje doek dat van boven over het hele scherm valt, met grote links */
@media (max-width: 47.99em) {
  .nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 3rem;
    padding: 0 0 0 var(--space-3);
    background: none;
    border: 0;
    color: inherit;
    font-family: var(--font-display);
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    cursor: pointer;
  }

  /* "Menu" en "Sluit" staan onder elkaar; het vak toont er één */
  .nav__toggle-tekst {
    display: grid;
    height: 1.4em;
    line-height: 1.4;
    overflow: hidden;
  }

  .nav__toggle-tekst span {
    transition: transform var(--duur-menu) var(--ease-uit);
  }

  .nav.is-open .nav__toggle-tekst span {
    transform: translateY(-100%);
  }

  /* twee lijntjes die bij openen een kruis vormen */
  .nav__toggle-lijnen {
    position: relative;
    width: 1.5rem;
    height: 0.625rem;
  }

  .nav__toggle-lijnen i {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--duur-menu) var(--ease-uit);
  }

  .nav__toggle-lijnen i:first-child {
    top: 0;
  }

  .nav__toggle-lijnen i:last-child {
    bottom: 0;
  }

  .nav.is-open .nav__toggle-lijnen i:first-child {
    transform: translateY(calc(0.3125rem - 0.75px)) rotate(45deg);
  }

  .nav.is-open .nav__toggle-lijnen i:last-child {
    transform: translateY(calc(-0.3125rem + 0.75px)) rotate(-45deg);
  }


  .nav__paneel {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    padding: calc(var(--header-h) + var(--space-6)) var(--gutter) var(--space-6);
    background: var(--oranje) var(--korrel);
    color: var(--inkt);
    overflow-y: auto;
    /* dicht: opgerold naar boven; het doek valt met een zachte uitloop en gaat
       wat sneller weer op */
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition:
      clip-path var(--duur-menu-dicht) var(--ease-in),
      visibility 0s linear var(--duur-menu-dicht);
  }

  .nav.is-open .nav__paneel {
    clip-path: inset(0);
    visibility: visible;
    transition:
      clip-path var(--duur-menu) var(--ease-uit),
      visibility 0s;
  }

  .nav__lijst {
    flex-direction: column;
    gap: 0;
  }

  /* elke link komt uit zijn eigen vak omhoog, één voor één */
  .nav__lijst li {
    overflow: hidden;
    border-bottom: 1px solid var(--lijn-op-oranje);
  }

  .nav__link {
    display: block;
    padding-block: var(--space-4);
    font-size: clamp(1.375rem, 6.5vw, 2.25rem);
    letter-spacing: var(--tracking-display);
    transform: translateY(105%);
    transition: transform var(--duur-snel) var(--ease);
  }

  .nav.is-open .nav__link {
    transform: none;
    transition: transform var(--duur-menu) var(--ease-uit) calc(150ms + var(--i, 0) * 60ms);
  }

  .nav__link::after {
    display: none;
  }

  .nav__link:focus-visible {
    outline-offset: -2px;
  }

  .nav__lijst li:nth-child(1) .nav__link { --i: 0; }
  .nav__lijst li:nth-child(2) .nav__link { --i: 1; }
  .nav__lijst li:nth-child(3) .nav__link { --i: 2; }
  .nav__lijst li:nth-child(4) .nav__link { --i: 3; }
  .nav__lijst li:nth-child(5) .nav__link { --i: 4; }
  .nav__lijst li:nth-child(6) .nav__link { --i: 5; }

  /* adres en slogan onderaan het doek */
  .nav__voet {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: var(--space-4);
    margin-top: auto;
    padding-top: var(--space-6);
    font-size: var(--fs-xs);
    line-height: 1.6;
    opacity: 0;
    transition: opacity var(--duur-snel) var(--ease);
  }

  .nav.is-open .nav__voet {
    opacity: 1;
    transition: opacity var(--duur-menu) var(--ease-uit) 450ms;
  }

  .nav__voet p {
    margin: 0;
  }

  .nav__slogan svg {
    height: 0.5rem;
    width: auto;
  }
}

@media (max-width: 47.99em) and (hover: hover) {
  .nav:not(.is-open) .nav__toggle:hover .nav__toggle-lijnen i:first-child {
    transform: scaleX(0.7);
    transform-origin: right;
  }
}

/* Pagina staat stil zolang het menu open is; de header blijft dan in beeld */
html.menu-open {
  overflow: hidden;
}

html.menu-open .header {
  transform: none;
}

/* ---------- Knoppen en links ---------- */

/* Inktzwarte pil. --mx/--my zet js/main.js (setupMagneet): de knop trekt licht naar
   de muis toe. */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 3rem;
  padding: 0 var(--space-6);
  background: var(--inkt);
  color: var(--kalk);
  border: 1px solid var(--inkt);
  border-radius: var(--radius-pil);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transform: translate(var(--mx, 0), var(--my, 0)) scale(var(--s, 1));
  transition:
    background-color var(--duur-snel) var(--ease),
    border-color var(--duur-snel) var(--ease),
    color var(--duur-snel) var(--ease),
    transform var(--duur-magneet) var(--ease-uit);
}

.knop svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform var(--duur-reveal) var(--ease-uit);
}

.knop:hover {
  background: var(--kalk);
  border-color: var(--kalk);
  color: var(--inkt);
}

.knop:hover svg {
  transform: translateX(3px);
}

.knop:active {
  --s: 0.97;
}

.knop:focus-visible {
  outline: 2px solid var(--inkt);
  outline-offset: 3px;
}

/* Oranje pil, voor op inkt */
.knop--oranje {
  background: var(--oranje);
  border-color: var(--oranje);
  color: var(--inkt);
}

.knop:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Telefoonnummer en andere korte acties: een omlijnde pil */
.pil-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--space-5);
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--radius-pil);
  color: var(--inkt);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition:
    background-color var(--duur-snel) var(--ease),
    border-color var(--duur-snel) var(--ease),
    color var(--duur-snel) var(--ease);
}

.pil-link:hover {
  background: var(--inkt);
  border-color: var(--inkt);
  color: var(--kalk);
}

.pil-link:focus-visible {
  border-radius: var(--radius-pil);
}

/* ---------- Secties ---------- */
.sectie--linnen {
  background: var(--linnen);
}

.sectie--oranje {
  background: var(--oranje) var(--korrel);
  color: var(--inkt);
}

.sectie--oranje a,
.sectie--oranje a:hover {
  color: var(--inkt);
}

.sectie--oranje :focus-visible,
.hero :focus-visible {
  outline-color: var(--inkt);
}

.sectie__kop > p {
  color: var(--steen);
  font-size: var(--fs-lead);
  line-height: 1.45;
}

.sectie--oranje .sectie__kop > p {
  color: var(--inkt);
}

/* Inkt: een donkere sectie (cadeaubon), kalk erop zoals in de footer */
.sectie--inkt {
  background: var(--inkt);
  color: var(--kalk);
}

.sectie--inkt a:not(.knop) {
  color: var(--kalk);
}

.sectie--inkt a:not(.knop):hover {
  color: var(--oranje);
}

.sectie--inkt :focus-visible {
  outline-color: var(--oranje);
}

/* Titels die js/main.js (setupKoppen) in letters splitst: elk woord is een vak
   waaruit de letters omhoog komen (zie beweging.css) */
.kop__woord {
  display: inline-block;
  overflow: clip;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
  vertical-align: top;
}

.kop__letter {
  display: inline-block;
}

/* Beeldplek: de vaste verhouding en achtergrond terwijl de foto laadt */
.beeld {
  position: relative;
  overflow: hidden;
  background: var(--beeld-vlak);
  border-radius: var(--radius-md);
}

.beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duur-beeld) var(--ease-uit);
}

.beeld--4x5 {
  aspect-ratio: 4 / 5;
}

.beeld--4x3 {
  aspect-ratio: 4 / 3;
}

/* ---------- Hero ----------
   Oranje vlak met korrel en een zachte spotlight die de muis volgt (--mx/--my).
   Daarop het videovenster: in rust een klein venster onder het logo, bij het scrollen
   opent het tot het hele scherm (--p van 0 naar 1, gezet door js/main.js). */
.hero__plak {
  background: var(--oranje);
  color: var(--inkt);
}

.hero__plak::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    var(--hero-spot) circle at var(--mx, 50%) var(--my, 38%),
    color-mix(in srgb, var(--oranje-licht) 60%, transparent),
    transparent 70%
  );
  opacity: 0.6;
}

.hero__korrel {
  position: absolute;
  inset: -2rem;
  z-index: 1;
  background: var(--korrel);
  pointer-events: none;
}

.hero__venster {
  --dicht: calc(1 - var(--p, 0));
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--inkt);
  clip-path: inset(
    calc(var(--dicht) * var(--v-top)) calc(var(--dicht) * var(--v-zij))
    calc(var(--dicht) * var(--v-onder)) calc(var(--dicht) * var(--v-zij))
    round calc(var(--dicht) * var(--radius-md))
  );
}

/* een waas over de video, zodat het logo erop leesbaar blijft */
.hero__venster::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: var(--p, 0);
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.2 - 0.2 * var(--p, 0)));
}

.hero__inhoud,
.hero__voet {
  z-index: 3;
}

/* Het logo: naam en slogan als paden (tools/maak-logo.py). Wordt licht zodra de
   video groot genoeg is (.is-donker) en krimpt een beetje mee. */
.hero__logo {
  width: var(--hero-logo-w);
  margin: 0;
  color: var(--inkt);
  transform: scale(calc(1 - 0.1 * var(--p, 0)));
  transition: color 700ms var(--ease);
}

.hero__logo-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero__logo .teken,
.hero__logo .slogan-teken {
  transform-box: fill-box;
}

.hero__voet {
  color: var(--inkt);
  transition: color 700ms var(--ease);
}

.hero.is-donker .hero__logo,
.hero.is-donker .hero__voet {
  color: var(--kalk);
}

.hero__hoek {
  margin: 0;
  max-width: none;
}

/* ---------- Band onder de hero: twee rijen grote tekst ---------- */
.band {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-6);
  overflow: hidden;
  background: var(--inkt);
  color: var(--kalk);
}

.band__rij {
  display: flex;
  width: max-content;
  white-space: nowrap;
}

.band__tekst {
  display: inline-flex;
  align-items: center;
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-band);
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

/* de tweede rij is enkel omlijnd */
.band__rij--lijn .band__tekst {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--kalk);
}

/* tussen de woorden een klein oranje vierkant: het merkvlak van de huisstijl in het
   klein. Op de tweede rij enkel omlijnd, zoals de letters. */
.band__ster {
  flex: none;
  width: 0.3em;
  height: 0.3em;
  margin-inline: 0.6em;
  background: var(--oranje);
}

.band__rij--lijn .band__ster {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--oranje);
}

/* ---------- Nieuws ---------- */
.nieuws-item {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 48em) {
  .nieuws-item--uitgelicht {
    grid-template-columns: 5fr 6fr;
    gap: var(--space-8);
    align-items: end;
  }
}

.nieuws-item__tekst {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 48em) {
  .nieuws-item__tekst {
    padding-bottom: var(--space-6);
  }
}

.nieuws-item time {
  color: var(--oranje-diep);
}

.nieuws-item h3 {
  font-size: var(--fs-statement);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.nieuws-item p {
  color: var(--steen);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.nieuws-item:hover .beeld img {
  transform: scale(1.04);
}

/* ---------- Collectie: tabbladen, galerij en lichtbak ---------- */

/* Twee tabbladen met een oranje pil die meeschuift (js/galerij.js zet --x en --w) */
.tabs {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  padding: 4px;
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--radius-pil);
}

.tabs__glijder {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--w, 0);
  background: var(--oranje);
  border-radius: var(--radius-pil);
  transform: translateX(var(--x, 0));
  transition:
    transform var(--duur-menu) var(--ease-uit),
    width var(--duur-menu) var(--ease-uit);
}

.tabs__knop {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--space-5);
  background: none;
  border: 0;
  border-radius: var(--radius-pil);
  color: var(--steen);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--duur-snel) var(--ease);
}

.tabs__knop:hover,
.tabs__knop[aria-selected='true'] {
  color: var(--inkt);
}

.tabs__knop:focus-visible {
  border-radius: var(--radius-pil);
  outline-offset: 2px;
}

.galerij.is-tabs {
  gap: var(--space-6);
}

.galerij__groep h3 {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--lijn-sterk);
}

/* Met tabbladen is de groepstitel overbodig in beeld (voor schermlezers blijft hij) */
.galerij.is-tabs .galerij__groep h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.galerij__item {
  position: relative;
  margin: 0;
}

.galerij__knop {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--beeld-vlak);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4 / 5;
}

/* de grote foto's van de bento vullen hun twee rijen */
@media (min-width: 48em) {
  .galerij__item:nth-child(7n + 1) .galerij__knop {
    aspect-ratio: auto;
  }
}

.galerij__raster .galerij__item--klein .galerij__knop {
  aspect-ratio: 4 / 5;
}

.galerij__knop img,
.galerij__knop video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duur-beeld) var(--ease-uit);
}

.galerij__knop:hover img,
.galerij__knop:focus-visible img,
.galerij__knop:hover video,
.galerij__knop:focus-visible video {
  transform: scale(1.05);
}

/* Een video in de galerij: een kleine afspeelknop rechtsboven, zodat je ziet dat het
   geen foto is (de video zelf speelt zonder geluid, js/galerij.js) */
.galerij__item--video .galerij__knop {
  position: relative;
}

.galerij__item--video .galerij__knop::before,
.galerij__item--video .galerij__knop::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.galerij__item--video .galerij__knop::before {
  top: var(--space-3);
  right: var(--space-3);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--kalk);
}

.galerij__item--video .galerij__knop::after {
  top: calc(var(--space-3) + 0.7rem);
  right: calc(var(--space-3) + 0.62rem);
  width: 0.85rem;
  height: 0.85rem;
  background: var(--inkt);
  clip-path: polygon(15% 0, 100% 50%, 15% 100%);
}

.galerij__knop:focus-visible {
  border-radius: var(--radius-md);
}

/* Merk als labeltje op de foto; op een aanraakscherm altijd zichtbaar */
.galerij__item figcaption {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  max-width: calc(100% - 2 * var(--space-3));
  padding: var(--space-1) var(--space-3);
  overflow: hidden;
  background: var(--kalk);
  color: var(--inkt);
  border-radius: var(--radius-pil);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  line-height: 1.8;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .galerij__item figcaption {
    background: var(--oranje);
    opacity: 0;
    transform: translateY(0.5rem);
    transition:
      opacity var(--duur-snel) var(--ease),
      transform var(--duur-reveal) var(--ease-uit);
  }

  .galerij__item:hover figcaption,
  .galerij__item:focus-within figcaption {
    opacity: 1;
    transform: none;
  }
}

/* Oranje bol met "Bekijk" die de muis volgt boven de foto's (js/galerij.js).
   Enkel met een muis; de gewone cursor verdwijnt dan boven de foto's. */
.galerij__cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  display: none;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  margin: -2.75rem 0 0 -2.75rem;
  color: transparent;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  pointer-events: none;
  transition: color var(--duur-snel) var(--ease);
}

.galerij__cursor::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--oranje);
  transform: scale(0);
  transition: transform var(--duur-reveal) var(--ease-uit);
}

.galerij__cursor.is-zichtbaar {
  color: var(--inkt);
}

.galerij__cursor.is-zichtbaar::before {
  transform: scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .galerij__cursor {
    display: grid;
  }

  .galerij.heeft-cursor .galerij__knop {
    cursor: none;
  }
}

/* Lichtbak: vergrote foto op inktzwart, merk en groep ernaast */
.lichtbak {
  width: 100vw;
  max-width: none;
  height: 100svh;
  max-height: none;
  margin: 0;
  padding: var(--gutter);
  border: 0;
  background: var(--inkt);
  color: var(--kalk);
}

.lichtbak::backdrop {
  background: transparent;
}

.lichtbak :focus-visible {
  outline-color: var(--oranje);
}

.lichtbak__inhoud {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--space-5);
  width: min(100%, var(--maxw));
  height: 100%;
  margin-inline: auto;
  padding-top: var(--space-8); /* ruimte voor de sluitknop op smalle schermen */
}

@media (min-width: 48em) {
  .lichtbak__inhoud {
    grid-template-columns: 3fr 2fr;
    grid-template-rows: minmax(0, 1fr); /* minmax(0): anders rekt de foto de rij op */
    align-items: center;
    gap: var(--space-8);
    padding-top: 0;
  }
}

.lichtbak__beeld {
  display: grid;
  place-items: center;
  min-height: 0;
  height: 100%;
}

.lichtbak__beeld img,
.lichtbak__beeld video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: var(--radius-md);
  transform-origin: 0 0;
  box-shadow: var(--schaduw-zwevend);
}

/* de lichtbak toont de foto of de video; het andere element staat op hidden */
.lichtbak__beeld [hidden] {
  display: none;
}

.lichtbak__beeld video {
  background: var(--zwart);
}

.lichtbak__tekst {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lichtbak__nummer,
.lichtbak__groep {
  color: var(--kalk-op-inkt);
}

.lichtbak__titel {
  font-size: var(--fs-statement);
  font-style: italic;
  line-height: var(--lh-tight);
}

.lichtbak__nav {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.lichtbak__pijl,
.lichtbak__sluit {
  min-height: 2.75rem;
  padding: 0 var(--space-5);
  background: none;
  border: 1px solid var(--lijn-op-inkt);
  border-radius: var(--radius-pil);
  color: var(--kalk);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--duur-snel) var(--ease),
    border-color var(--duur-snel) var(--ease),
    color var(--duur-snel) var(--ease);
}

.lichtbak__pijl:hover,
.lichtbak__sluit:hover {
  background: var(--kalk);
  border-color: var(--kalk);
  color: var(--inkt);
}

.lichtbak__pijl:focus-visible,
.lichtbak__sluit:focus-visible {
  border-radius: var(--radius-pil);
}

.lichtbak__sluit {
  position: absolute;
  top: var(--gutter);
  right: var(--gutter);
}

/* ---------- Merken ---------- */
.merkgroep h3 {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--lijn-op-oranje);
}

/* De band: zachte randen links en rechts, logo's schuiven er doorheen (zie beweging.css).
   De achtergrond staat er expliciet, anders heeft multiply in de mask niets om mee te mengen. */
.merkband {
  background: var(--oranje) var(--korrel);
  -webkit-mask-image: linear-gradient(to right, transparent, var(--zwart) 8%, var(--zwart) 92%, transparent);
  mask-image: linear-gradient(to right, transparent, var(--zwart) 8%, var(--zwart) 92%, transparent);
}

/* Merk: enkel het logo, in een vast vak. De naam (.merk__naam) staat er voor
   schermlezers bij; in beeld zegt het logo het al. */
.merk {
  display: flex;
  justify-content: center;
}

/* Het vak bepaalt de maat, niet het beeld: het logo staat er absoluut in en vult het
   vak (min de zijmarge), en schaalt erin met object-fit. Zo kan geen enkel logo
   groter worden dan zijn vak, hoe een browser een svg of png ook leest (Firefox
   rekende hoge logo's als McAlson en Fourten anders hoger dan het vak). */
.merk__logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--merk-logo-h);
}

/* Logo's in één toon; multiply laat witte vlakken wegvallen en maakt ze inktzwart
   op het oranje */
.merk__logo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-inline: var(--space-2);
  object-fit: contain;
  filter: grayscale(1) contrast(1.4);
  mix-blend-mode: multiply;
  opacity: 0.85;
  transition:
    opacity var(--duur-snel) var(--ease),
    transform var(--duur-reveal) var(--ease-uit);
}

.merk:hover .merk__logo img {
  opacity: 1;
  transform: scale(1.08);
}

/* Merk zonder logo: de naam als woordbeeld */
.merk__tekst {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--inkt);
  transition: transform var(--duur-reveal) var(--ease-uit);
}

.merk:hover .merk__tekst {
  transform: scale(1.08);
}

/* De naam enkel voor schermlezers */
.merk__naam {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Over ---------- */

/* Grote uitspraak in de serif; de woorden lichten op bij het scrollen (beweging.css) */
.statement {
  max-width: 21em;
  font-family: var(--font-serif);
  font-size: var(--fs-statement);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* De uitspraak staat volledig recht en in inkt: de klemtoon zit al in de tekst zelf
   (méér). Een *woord* uit WordPress krijgt hier dus geen eigen opmaak. */
.statement em {
  font-style: normal;
}

.over__tekst {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* De flex-gap regelt hier de afstand; geen extra paragraafmarge bovenop */
.over__tekst p + p {
  margin-top: 0;
}

/* ---------- Carrousel (Over Harvey's): schuifbaar spoor met een glimp van de volgende foto ---------- */
.carrousel {
  --carrousel-slide-w: min(78%, 40rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.carrousel__spoor {
  position: relative; /* zo is offsetLeft van een slide relatief aan het spoor */
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-right: var(--gutter);
}

.carrousel__spoor::-webkit-scrollbar {
  display: none;
}

/* Lege ruimte na de laatste foto, zodat ook die vooraan kan uitlijnen */
.carrousel__spoor::after {
  content: '';
  flex: 0 0 calc(100% - var(--carrousel-slide-w));
}

.carrousel__spoor:focus-visible {
  outline-offset: 4px;
}

.carrousel__slide {
  flex: 0 0 var(--carrousel-slide-w);
  margin: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* enkel een foto die zelf de slide is; een nieuwsbericht heeft zijn eigen beeldvak */
.carrousel__slide > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--beeld-vlak);
}

/* De foto's spreken voor zich: het onderschrift staat er enkel voor schermlezers */
.carrousel__slide > figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Balk eronder: teller links, pijlen rechts */
.carrousel__balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-right: var(--gutter);
}

.carrousel__teller {
  color: var(--steen);
  white-space: nowrap;
}

/* Nieuws: één bericht tegelijk over de breedte van de container, zonder glimp van
   het volgende en zonder uitloop tot de schermrand */
.carrousel--nieuws {
  --carrousel-slide-w: 100%;
  gap: var(--space-6);
}

/* het spoor knipt af wat buiten zijn rand valt: een kleine binnenmarge (met een
   even grote negatieve buitenmarge) houdt de focusring van "Lees verder" heel,
   zonder dat het bericht verschuift */
.carrousel--nieuws .carrousel__spoor {
  gap: var(--space-7);
  margin: calc(-1 * var(--space-2));
  padding: var(--space-2);
  scroll-padding-inline: var(--space-2);
}

.carrousel--nieuws .carrousel__spoor::after {
  display: none;
}

.carrousel--nieuws .carrousel__balk {
  padding-right: 0;
}

.carrousel__knoppen {
  display: flex;
  gap: var(--space-2);
}

.carrousel__knoppen button {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--lijn-sterk);
  border-radius: 50%;
  color: var(--inkt);
  cursor: pointer;
  transition:
    background-color var(--duur-snel) var(--ease),
    border-color var(--duur-snel) var(--ease),
    color var(--duur-snel) var(--ease);
}

.carrousel__knoppen svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.carrousel__knoppen button:hover {
  background: var(--inkt);
  border-color: var(--inkt);
  color: var(--kalk);
}

.carrousel__knoppen button:focus-visible {
  border-radius: 50%;
}

.carrousel__knoppen button:disabled {
  opacity: 0.35;
  cursor: default;
  background: none;
  border-color: var(--lijn-sterk);
  color: var(--inkt);
}

/* ---------- Cadeaubon ----------
   De echte bon uit de winkel: een bijna vierkante, witte kaart met een dun zwart
   kader. Links boven de omslag, rechts onder de binnenkant. Alle maten in cqi,
   zodat alles op de bonnen meeschaalt met de breedte van het beeld.
   --rx/--ry en --gx/--gy zet js/main.js (setupBon): de stapel kantelt en de glans
   volgt de muis. */
.cadeaubon__beeld {
  width: min(90%, 34rem);
  justify-self: center;
  container-type: inline-size;
}

.cadeaubon__stapel {
  position: relative;
  aspect-ratio: 1;
  transform: perspective(60rem) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform var(--duur-reveal) var(--ease-uit);
}

.bon {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 54cqi;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--kalk);
  color: var(--inkt);
  text-align: center;
  border-radius: var(--radius-sm);
  outline: 1px solid var(--inkt);
  box-shadow: var(--schaduw-zwevend);
  transform: translate3d(var(--bon-x, 0), var(--bon-y, 0), var(--bon-z, 0)) rotate(var(--bon-hoek));
}

.bon svg {
  width: 100%;
  height: auto;
}

.bon__merken,
.bon__adres,
.bon__veld,
.bon__geldig {
  font-family: var(--font-display);
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.bon__merken {
  margin-top: 1cqi;
  font-size: 2cqi;
}

/* Omslag: logo, slogan en een dikke lijn, daaronder adres en website */
.bon--omslag {
  --bon-hoek: -6deg;
  top: 4cqi;
  left: 3cqi;
  justify-content: center;
  outline-offset: -6cqi;
}

.bon--omslag .bon__logo {
  width: 34cqi;
}

.bon__slogan {
  width: 21cqi;
  margin-top: 1.8cqi;
}

.bon--omslag .bon__merken {
  width: 34cqi;
  margin-top: 1.6cqi;
  padding-top: 1cqi;
  border-top: 0.5cqi solid var(--inkt);
}

.bon__adres {
  margin-top: 3cqi;
  font-size: 1.45cqi;
  line-height: 1.7;
}

.bon__adres + .bon__adres {
  margin-top: 1.8cqi;
}

/* Binnenkant: wat de ontvanger krijgt */
.bon--kaart {
  --bon-hoek: 4deg;
  --bon-z: 1.5rem;
  top: 42cqi;
  left: 44cqi;
  padding: 6.5cqi 5cqi 5cqi;
  outline-offset: -2.5cqi;
}

.bon--kaart .bon__logo {
  width: 32cqi;
}

.bon__titel {
  margin-top: 2.5cqi;
  font-family: var(--font-serif);
  font-size: 9cqi;
  line-height: 1;
}

.bon__veld,
.bon__geldig {
  font-size: 1.7cqi;
}

.bon__veld {
  margin-top: auto;
}

/* twee stippellijnen om op te schrijven */
.bon__regels {
  width: 44cqi;
  height: 7cqi;
  border-bottom: 1px dotted var(--inkt);
}

.bon__regels::before {
  content: '';
  display: block;
  height: 50%;
  border-bottom: 1px dotted var(--inkt);
}

.bon__geldig {
  margin-top: auto;
}

.bon__glans {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 0%), rgba(var(--kalk-rgb), 0.55), transparent 60%);
  mix-blend-mode: soft-light;
  opacity: 0.4;
  pointer-events: none;
  transition: opacity var(--duur-reveal) var(--ease);
}

.cadeaubon__beeld:hover .bon__glans {
  opacity: 1;
}

.cadeaubon__tekst {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.cadeaubon__lead {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

/* op inkt haalt oranje 3,9:1, genoeg voor tekst van deze grootte */
.cadeaubon__lead em {
  color: var(--oranje);
}

/* Feiten: label links, waarde rechts, gescheiden door haarlijnen */
.cadeaubon__feiten {
  margin: 0;
  border-bottom: 1px solid var(--lijn-op-inkt);
}

.cadeaubon__feiten > div {
  display: grid;
  grid-template-columns: minmax(7.5rem, 1fr) 2fr;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-4);
  border-top: 1px solid var(--lijn-op-inkt);
}

.cadeaubon__feiten dt {
  color: var(--kalk-op-inkt);
}

.cadeaubon__feiten dd {
  margin: 0;
  font-weight: 500;
}

/* kleine lettertjes: enkel een lijn erboven */
.cadeaubon__feiten--klein {
  border-bottom: 0;
}

.cadeaubon__feiten--klein dd {
  color: var(--kalk-op-inkt);
  font-size: var(--fs-sm);
  font-weight: 400;
}

.cadeaubon__actie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
}

.cadeaubon__actie p {
  color: var(--kalk-op-inkt);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.cadeaubon__actie p a {
  white-space: nowrap;
}

/* ---------- Contact ---------- */
.winkel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.winkel:hover .beeld img {
  transform: scale(1.04);
}

/* het huisnummer klein en ingetogen naast naam en adres */
.winkel__info {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.winkel__nr {
  flex: none;
  padding-top: 0.35em;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  line-height: 1;
  color: var(--steen);
}

.winkel__tekst {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.winkel address {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.winkel .pil-link {
  margin-top: var(--space-3);
}

.contact__uren h3 {
  font-size: var(--fs-h3);
}

.uren {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.uren li + li {
  margin-top: var(--space-1);
}

/* Label open/gesloten: een stip en een korte zin */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  max-width: none;
  margin: 0;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  background: var(--kalk);
  border-radius: var(--radius-pil);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.status[hidden] {
  display: none;
}

.status__stip {
  position: relative;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--rust);
}

.status.is-open .status__stip {
  background: var(--succes);
}

/* ---------- Nieuwsbrief ---------- */
.nieuwsbrief__tekst {
  container-type: inline-size;
  display: grid;
  row-gap: var(--space-5);
}

/* "Nieuwsbrief" is in Michroma ruim 10em breed; naast het formulier is de kolom
   daar te smal voor en zou de laatste letter op een nieuwe regel vallen.
   Nooit groter dan de kolom toelaat. */
.nieuwsbrief__tekst .kop {
  font-size: min(var(--fs-h2), 9.5cqi);
}

.nieuwsbrief__tekst p {
  font-size: var(--fs-lead);
  line-height: 1.45;
}

.nieuwsbrief__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-5) var(--space-4);
}

.veld {
  flex: 1 1 16rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.veld input {
  width: 100%;
  min-height: 3rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--inkt);
  border-radius: 0;
  color: var(--inkt);
  caret-color: var(--inkt);
  font-size: var(--fs-lead);
  transition: box-shadow var(--duur-snel) var(--ease);
}

/* De voorbeeldtekst in de cursieve serif: in volle inkt leesbaar op het oranje, en
   toch niet te verwarren met wat de bezoeker zelf typt (rechte Geist) */
.veld input::placeholder {
  color: var(--inkt);
  font-family: var(--font-serif);
  font-style: italic;
  opacity: 1;
}

.veld input:hover {
  box-shadow: 0 1px 0 0 var(--inkt);
}

.veld input:focus-visible {
  outline: none;
  box-shadow: 0 2px 0 0 var(--inkt);
}

/* Fout: op het oranje kan rood niet; de lijn wordt gestippeld, zoals een
   onderstreepte tikfout, tot de bezoeker verder typt */
.veld input[aria-invalid='true'] {
  border-bottom: 2px dotted var(--inkt);
  box-shadow: none;
}

.nieuwsbrief__bericht {
  flex-basis: 100%;
  min-height: 1.5em;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--inkt);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--inkt);
  color: var(--kalk-op-inkt);
  font-size: var(--fs-sm);
}

.footer a {
  color: var(--kalk);
  text-decoration: none;
}

.footer a:hover {
  color: var(--oranje);
}

.footer :focus-visible {
  outline-color: var(--oranje);
}

.footer__menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.footer__menu a,
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.footer__winkels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-7);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.footer__winkels p + p {
  margin-top: 0;
}

/* Het logo over de volle breedte; het wordt oranje bij hover */
.footer__logo {
  display: block;
  padding-block: var(--space-4) var(--space-7);
  border-bottom: 1px solid var(--lijn-op-inkt);
}

.footer a.footer__logo {
  color: var(--kalk);
  transition: color 600ms var(--ease);
}

.footer a.footer__logo:hover {
  color: var(--oranje);
}

.footer__logo svg {
  width: 100%;
  height: auto;
}

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--fs-xs);
}

.footer__links {
  display: flex;
  gap: var(--space-5);
}

/* De juridische links en wie de site maakte, samen rechts */
.footer__rechts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
}

.footer__maker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  font-size: var(--fs-xs);
}

/* in em, zodat het logo meeschaalt met de tekst: elke regel (VID, EJO) is
   ongeveer zo hoog als de hoofdletters ernaast */
.footer__maker img {
  width: auto;
  height: 1.5em;
}

/* ---------- Tekstpagina's (disclaimer, privacy) ---------- */
.tekstpagina h1 {
  font-size: var(--fs-h2);
}

.tekstpagina .sectie__kop {
  grid-template-columns: 1fr;
}

.tekstpagina__inhoud {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.tekstpagina__inhoud p + p {
  margin-top: 0;
}