/*
Theme Name: Jart Brothers
Author: The Green Surfer
Author URI: https://thegreensurfer.com
Description: Onepager voor Jart Brothers. Alle vaste teksten en beelden zijn bewerkbaar via "Snel bewerken" op de site zelf; projecten en blogs zijn eigen post types met een detailpagina.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: jartbrothers
*/

/* ==========================================================================
   1. Tokens
   --------------------------------------------------------------------------
   De twee kleuren die uit het ontwerp zijn overgenomen staan vast:
   --groen (#BDBE3D) en --geel (#F4F1C6). De twee tinten daaronder zijn
   benaderd uit het ontwerp; ze staan hier los zodat ze met één regel exact
   gezet kunnen worden zodra de waarden uit Figma bekend zijn.
   Beide fonts zijn voorlopig systeemstacks: het ontwerp gebruikt Gelica Light
   (betaald) voor de koppen.
   ========================================================================== */
:root {
  --groen: #BDBE3D;
  --groen-diep: #8E8F22;
  --geel: #F4F1C6;
  --creme: #EFEAB4;   /* vulling van de pilknoppen */
  --blauw: #C2DEF4;   /* schulpknoppen */
  --inkt: #17170F;
  --wit: #ffffff;
  --vlak: var(--wit);

  --serif: "Gelica", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1440px;
  --gutter: clamp(20px, 2.3vw, 32px);
  --sectie: clamp(64px, 8vw, 120px);
  --radius: 14px;
  --schulp: 52px;
  --pil: 48px;
  --navhoogte: clamp(88px, 9vw, 108px);
}

/* ==========================================================================
   2. Basis
   ========================================================================== */
*, *::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(--wit);
  color: var(--inkt);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--inkt);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.schermlezer {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--inkt); color: var(--wit);
  padding: 12px 18px; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* ==========================================================================
   3. Typografie
   ========================================================================== */
.kop {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
.kop-l { font-size: clamp(34px, 4.2vw, 58px); }
.kop-xl { font-size: clamp(34px, 4.8vw, 65px); }
.kop-groen { color: var(--groen); }

.lopend { font-size: 17px; }
.lopend p { margin: 0 0 1em; }
.lopend p:last-child { margin-bottom: 0; }
.lopend-klein { font-size: 15.5px; }
.lopend a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ==========================================================================
   4. Knoppen
   ========================================================================== */
.knoprij {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 0;
  flex-wrap: wrap;
}

/* De hoofdknop is één element: de pil met het label en de schulp met de pijl
   zitten erin. Eén hover, één focusring, één tabstop. De tussenruimte is 4px;
   de schulpvorm heeft zelf al ~1,3px lucht aan weerszijden, dus optisch komt
   dat uit op de kleine kier van het ontwerp. */
.knop {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--inkt);
  text-decoration: none;
  cursor: pointer;
}
.knop-tekst {
  display: inline-flex;
  align-items: center;
  min-height: var(--pil);
  padding: 0 26px;
  border-radius: 999px;
  background: var(--creme);
  font-size: 15px;
  transition: background .2s ease;
}
.knop-schulp {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--schulp);
  height: var(--schulp);
  background: var(--blauw);
  clip-path: url(#mt-schulp);
  transition: transform .25s ease;
}
/* position/z-index: anders ligt de ::before van de witte rand erover heen. */
.knop-schulp svg { position: relative; z-index: 1; width: 23px; height: 23px; transition: transform .25s ease; }

/* Hover pakt de hele knop, waar je hem ook aanwijst. */
.knop:hover .knop-schulp { transform: rotate(18deg) scale(1.04); }
.knop:hover .knop-schulp svg { transform: rotate(-18deg); }
.knop:focus-visible { outline: 2px solid var(--inkt); outline-offset: 4px; border-radius: 999px; }

/* Op een gele of groene vlak is de pil wit in plaats van crème. */
.knop-wit .knop-tekst { background: var(--wit); }

/* De schulpvorm: cirkel met golvende rand (clip-path uit de footer). */
.schulp {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--schulp);
  height: var(--schulp);
  padding: 0;
  border: 0;
  background: var(--blauw);
  color: var(--inkt);
  clip-path: url(#mt-schulp);
  cursor: pointer;
  text-decoration: none;
  transition: background .2s ease, transform .25s ease;
}
/* Bij hover draait de vorm een halve lob verder; de pijl draait tegen, zodat
   die recht blijft staan. */
.schulp:hover { transform: rotate(18deg) scale(1.04); }
.schulp svg { transition: transform .25s ease; }
.schulp:hover svg { transform: rotate(-18deg); }
.schulp .pijl, .schulp svg { width: 23px; height: 23px; position: relative; z-index: 1; }

/* Alleen-lijn-variant: de vorm twee keer over elkaar, de binnenste in de
   vlakkleur, zodat alleen de rand blijft staan. Een echte border kan niet,
   want clip-path snijdt die weg. */
.schulp-lijn { background: currentColor; }
.schulp-lijn::before {
  content: "";
  position: absolute;
  inset: 1.6px;
  background: var(--vlak);
  clip-path: url(#mt-schulp);
}


/* ==========================================================================
   5. Nav
   ========================================================================== */
/* De nav staat vast bovenaan en blijft dus staan bij scrollen. Geen balk-
   achtergrond: het logo zit in een witte badge en het menu in een pil, en die
   zijn op elke ondergrond leesbaar. Zodra je scrolt wordt de nav wat compacter
   en krijgen badge en pil iets meer schaduw. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
}
.nav-binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: clamp(16px, 2vw, 26px);
  transition: padding-block .25s ease;
}
body.is-gescrold .nav-binnen { padding-block: clamp(10px, 1.2vw, 15px); }

/* Op alles behalve de onepager begint de inhoud niet met een hero, dus daar
   moet er ruimte onder de nav vrijgehouden worden. */
body:not(.is-home) main { padding-top: var(--navhoogte); }

/* Native hash-navigatie (en de smooth scroll) mag de kop niet onder de nav
   laten verdwijnen. */
section[id], article[id] { scroll-margin-top: var(--navhoogte); }

.nav .logo { display: block; width: clamp(56px, 5vw, 74px); }
.logo-mark {
  width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(23,23,15,.14);
  transition: box-shadow .25s ease;
}
body.is-gescrold .logo-mark { box-shadow: 0 8px 26px rgba(23,23,15,.24); }

.nav-pil {
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 8px 12px;
  box-shadow: 0 6px 20px rgba(23,23,15,.10);
  transition: background .25s ease, box-shadow .25s ease;
}
body.is-gescrold .nav-pil {
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 26px rgba(23,23,15,.18);
}
.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.6vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-links li { position: relative; z-index: 1; }
.nav-links a {
  display: block;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease;
}
/* Op het actieve item geen hover-achtergrond: die zou over de pil heen liggen. */
.nav-links a:not(.is-actief):hover { background: var(--geel); }

/* Eén pil die naar het actieve item schuift, in plaats van een achtergrond die
   van de ene link naar de andere verspringt. Het script zet breedte en
   verschuiving; de overgang zit hier. */
.nav-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--groen);
  opacity: 0;
  transform: translateX(0);
  pointer-events: none;
  z-index: 0;
  transition:
    transform .45s cubic-bezier(.32, .72, 0, 1),
    width .45s cubic-bezier(.32, .72, 0, 1),
    opacity .3s ease;
}
.nav-marker.is-zichtbaar { opacity: 1; }
/* Bij de eerste keer verschijnen mag hij niet vanaf links komen aanschuiven. */
.nav-marker.zonder-overgang { transition: opacity .3s ease; }

/* De tekst houdt bewust zijn inktkleur: wit op dit groen haalt maar 2:1
   contrast, inkt op groen 8,9:1. Bovendien hoeft er dan niets gesynchroniseerd
   te worden met de schuivende pil — anders is een label even wit op wit zolang
   de pil er nog naartoe onderweg is. */

@media (prefers-reduced-motion: reduce) {
  .nav-marker { transition: opacity .2s ease; }
}

.hamburger {
  display: none;
  width: var(--schulp);
  height: var(--schulp);
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  cursor: pointer;
  /* Zelfde schaduw als de logobadge en de menupil: zonder dat verdwijnt het
     witte rondje op een witte of lichte sectie. */
  box-shadow: 0 6px 20px rgba(23,23,15,.14);
  transition: background .25s ease, box-shadow .25s ease;
}
body.is-gescrold .hamburger {
  background: rgba(255,255,255,.98);
  box-shadow: 0 8px 26px rgba(23,23,15,.22);
}
.hamburger-lijnen { display: block; width: 20px; margin-inline: auto; }
.hamburger-lijnen span {
  display: block; height: 1.8px; margin: 4px 0;
  background: var(--inkt); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.hamburger[aria-expanded="true"] .hamburger-lijnen span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger-lijnen span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .hamburger-lijnen span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 880px) {
  .hamburger { display: block; }
  .nav-pil {
    position: absolute;
    top: calc(100% - 6px);
    right: var(--gutter);
    left: var(--gutter);
    border-radius: var(--radius);
    padding: 10px;
    display: none;
    box-shadow: 0 18px 40px rgba(0,0,0,.14);
  }
  .nav-pil.is-open { display: block; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-links a { padding: 12px 14px; border-radius: 10px; }
  /* In een verticaal uitklapmenu heeft een schuivende pil geen zin. */
  .nav-marker { display: none; }
  .nav-links a.is-actief { background: var(--groen); }
}

/* ==========================================================================
   6. Hero
   ========================================================================== */
.hero { position: relative; background: var(--inkt); }

.hero-beeld {
  position: relative;
  min-height: clamp(460px, 62vw, 720px);
  overflow: hidden;
}
.hero-foto,
.hero-beeld .mt-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,.42) 100%);
}
.hero-bladeren {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--groen);
  mix-blend-mode: screen;
  opacity: .85;
}

.hero-inhoud {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding-bottom: clamp(24px, 4vw, 54px);
}
.hero-inhoud .wrap { display: flex; justify-content: flex-end; }
.hero-kop {
  max-width: 19ch;
  margin: 0;
  color: var(--wit);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(32px, 5.2vw, 74px);
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-align: right;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}

/* Het groen loopt van rand tot rand; de inhoud blijft in de boxed wrap staan,
   in lijn met alle andere secties. */
.hero-balk {
  --vlak: var(--groen);
  display: block;
  background: var(--groen);
  color: var(--wit);
  text-decoration: none;
}
.hero-balk-binnen {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  padding-block: 14px;
}
.hero-balk-tekst { font-size: clamp(16px, 1.5vw, 20px); }
.hero-balk-lijn { flex: 1 1 auto; height: 1px; background: rgba(255,255,255,.65); }
.hero-balk .schulp { color: var(--wit); }
.hero-balk:hover .schulp { transform: rotate(18deg) scale(1.05); }
.hero-balk:hover .schulp svg { transform: rotate(-18deg); }

@media (max-width: 620px) {
  .hero-kop { max-width: none; font-size: clamp(28px, 8.4vw, 40px); }
  .hero-balk-tekst { font-size: 15px; }
}

/* ==========================================================================
   7. Welkom
   ========================================================================== */
.welkom { padding: var(--sectie) 0; }
.welkom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.welkom-tekst .kop { margin-bottom: 22px; }
.welkom-tekst .lopend { max-width: 58ch; }

/* De fotostapel. Elke plaat leest zijn plek uit data-pos; de kanteling,
   verschuiving en schaal staan in custom properties, zodat het slepen alleen
   --sleep-x / --sleep-y / --zwaai hoeft te zetten en de basisstand niet in JS
   nagebouwd wordt. */
.fotostapel {
  position: relative;
  aspect-ratio: 4 / 3;
  touch-action: pan-y;
}

.stapel-foto {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 16px 34px rgba(0,0,0,.16);
  transform:
    translate(var(--x, 0), var(--y, 0))
    translate(var(--sleep-x, 0px), var(--sleep-y, 0px))
    rotate(calc(var(--kantel, 0deg) + var(--zwaai, 0deg)))
    scale(var(--schaal, 1));
  transition: transform .38s cubic-bezier(.22,.61,.36,1), opacity .38s ease, box-shadow .25s ease;
  will-change: transform;
}
.stapel-foto img, .stapel-foto .mt-ph { width: 100%; height: 100%; object-fit: cover; }

.stapel-foto[data-pos="0"] { --kantel: 2.5deg;  --schaal: 1;    --x: 0;    --y: 0;   z-index: 3; }
.stapel-foto[data-pos="1"] { --kantel: -3deg;   --schaal: .95;  --x: -4%;  --y: -1%; z-index: 2; }
.stapel-foto[data-pos="2"] { --kantel: -7deg;   --schaal: .9;   --x: -9%;  --y: 2%;  z-index: 1; }

/* De onderste platen schuiven bij hover iets verder uit, zodat je ziet dat het
   een stapel is. */
.fotostapel:hover .stapel-foto[data-pos="1"] { --x: -7%; --kantel: -5deg; }
.fotostapel:hover .stapel-foto[data-pos="2"] { --x: -13%; --kantel: -10deg; }

/* Alleen de bovenste plaat is te pakken, en alleen als het script draait. */
.fotostapel.is-actief .stapel-foto[data-pos="0"] { cursor: grab; }
.fotostapel.is-slepen .stapel-foto[data-pos="0"] {
  cursor: grabbing;
  transition: none;
  box-shadow: 0 26px 50px rgba(0,0,0,.26);
}
.stapel-foto.is-weg { opacity: 0; z-index: 4; }
/* Even zonder overgang, zodat het opnieuw inschuiven achteraan niet te zien is. */
.stapel-foto.zonder-overgang { transition: none; }
.stapel-foto:not([data-pos="0"]) { pointer-events: none; }
.fotostapel:focus-visible { outline: 2px solid var(--inkt); outline-offset: 8px; border-radius: 12px; }

.stapel-hint {
  display: none;
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  margin: 0;
  z-index: 5;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--inkt);
  color: var(--wit);
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.fotostapel.is-actief .stapel-hint { display: block; }
.fotostapel.is-actief:hover .stapel-hint,
.fotostapel.is-actief:focus-visible .stapel-hint { opacity: 1; }
/* Op touch bestaat hover niet: de hint hoort er dan gewoon te staan. */
@media (hover: none) {
  .fotostapel.is-actief .stapel-hint { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .stapel-foto { transition-duration: .01ms; }
}

/* ==========================================================================
   8. Sectiekop (knop aan de ene kant, kop aan de andere)
   ========================================================================== */
.sectiekop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(26px, 3.4vw, 48px);
}
.sectiekop .knoprij { margin: 0; }
.sectiekop-rechts .kop { text-align: right; margin-left: auto; }

/* ==========================================================================
   9. Diensten
   ========================================================================== */
.diensten {
  --vlak: var(--geel);
  background: var(--geel);
  padding: var(--sectie) 0;
}
.dienstenrij {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.dienst {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(260px, 26vw, 372px);
  border: 1px solid var(--groen);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}
/* De inhoud zit in de link, niet eronder: zo kan de cursor de knop bereiken
   en heeft die zijn eigen hover. */
.dienst-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px;
  color: inherit;
  text-decoration: none;
}
.dienst-beeld {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity .35s ease, transform .5s ease;
  transform: scale(1.04);
}
.dienst-beeld img, .dienst-beeld .mt-ph { width: 100%; height: 100%; object-fit: cover; }
.dienst-beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.06) 46%, rgba(0,0,0,.44));
}
.dienst-titel {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.05;
  color: var(--groen-diep);
  transition: color .3s ease;
}
.dienst-tekst {
  margin-top: 14px;
  font-size: 15px;
  color: var(--inkt);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease .05s, transform .3s ease .05s, color .3s ease;
}
.dienst-tekst p { margin: 0 0 .7em; }
.dienst-actie {
  margin-top: auto;
  align-self: flex-end;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}


.dienst:hover .dienst-beeld,
.dienst:focus-within .dienst-beeld { opacity: 1; transform: scale(1); }
.dienst:hover .dienst-titel,
.dienst:focus-within .dienst-titel { color: var(--wit); }
.dienst:hover .dienst-tekst,
.dienst:focus-within .dienst-tekst { opacity: 1; transform: none; color: var(--wit); }
.dienst:hover .dienst-actie,
.dienst:focus-within .dienst-actie { opacity: 1; transform: none; }
/* Los van de kaart-hover heeft de knop zijn eigen staat: de groene veeg en de
   draaiende schulp komen pas als de cursor écht op de knop staat. */
.dienst-actie .knop-tekst { transition: color .25s ease; }

/* Zonder hover (touch) heeft een dichte kaart geen zin: tekst en pijl staan
   dan gewoon aan en de kaart wordt niet hoger dan zijn inhoud. */
@media (hover: none) {
  .dienst { min-height: 0; }
  .dienst .dienst-tekst { opacity: 1; transform: none; }
  .dienst .dienst-actie { opacity: 1; transform: none; margin-top: 18px; }
}

@media (max-width: 900px) {
  .dienstenrij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .dienstenrij { grid-template-columns: 1fr; }
}

/* ==========================================================================
   10. Projecten (accordeon)
   ========================================================================== */
.projecten { padding: var(--sectie) 0; }
/* Bij veel projecten zouden de strips onleesbaar smal worden. Het open paneel
   houdt daarom een minimumbreedte, en past de rij niet meer, dan schuift hij
   horizontaal. overflow-y hard op hidden, anders knipt de hover-lift van 4px
   een verticale scrollbalk erbij. */
.accordeon {
  display: flex;
  gap: 10px;
  height: clamp(320px, 34vw, 460px);
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 6px;
  scrollbar-width: none;
}
.accordeon::-webkit-scrollbar { display: none; }
/* De breedte loopt via flex-grow, niet via flex-basis. flex-basis ging van een
   vaste clamp naar `auto` en `auto` is niet te interpoleren, dus sprong het
   paneel in één keer open. flex-grow is een getal en beweegt wel netjes.
   Werkt ook bij een ander aantal projecten: de verhouding blijft 18 : 1. */
.paneel {
  position: relative;
  flex-grow: var(--groei, 1);
  flex-shrink: 1;
  flex-basis: 0;
  min-width: 44px;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  transition: flex-grow .6s cubic-bezier(.32, .72, 0, 1), transform .25s ease;
}
.paneel.is-open { --groei: 18; min-width: min(62%, 520px); }
.paneel-knop {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* Een dichte strip gaat niet open bij hover — hij laat alleen zien dat je
   erop kunt klikken: het beeld licht iets op en de strip komt een tikje
   omhoog. Openen doet de klik. */
.paneel:not(.is-open) { transition: flex-grow .6s cubic-bezier(.32,.72,0,1), transform .25s ease; }
.paneel .paneel-img { transition: filter .25s ease, transform .35s ease; }
.paneel:not(.is-open):hover,
.paneel:not(.is-open):focus-within { transform: translateY(-4px); }
.paneel:not(.is-open):hover .paneel-img,
.paneel:not(.is-open):focus-within .paneel-img { filter: brightness(1.1); transform: translateX(-50%) scale(1.05); }
/* Het beeld blijft minstens zo breed als een halve slide en staat gecentreerd.
   Zonder die minimumbreedte kruipt de foto tijdens het openen mee van 44px naar
   volle breedte, en dat schokt; nu schuift de strip als een gordijn open. */
.paneel-img, .paneel .mt-ph {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  min-width: clamp(300px, 36vw, 560px);
  height: 100%;
  object-fit: cover;
  transform: translateX(-50%);
  z-index: -1;
}
.paneel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55));
}
.paneel-tekst {
  position: absolute;
  inset: auto 0 0;
  padding: 22px 24px;
  color: var(--wit);
  opacity: 0;
  transition: opacity .2s ease;
}
.paneel.is-open .paneel-tekst { opacity: 1; transition: opacity .3s ease .3s; }
.paneel-titel {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1;
}
.paneel-meta { margin: 8px 0 0; font-size: 14px; letter-spacing: .01em; }
.paneel-pijl {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 4;
  opacity: 0;
  transition: opacity .2s ease;
}
.paneel.is-open .paneel-pijl { opacity: 1; transition: opacity .3s ease .3s; }

@media (max-width: 700px) {
  /* Staand is het een kolom: daar gaat de hoogte van vast naar vast, en dat is
     wel te interpoleren, dus hier mag flex-basis het werk doen. */
  .accordeon { flex-direction: column; height: auto; }
  .paneel {
    flex: 0 0 76px;
    min-width: 0;
    transition: flex-basis .5s cubic-bezier(.32,.72,0,1), transform .25s ease;
  }
  .paneel.is-open { flex: 0 0 clamp(260px, 60vw, 340px); }
  .paneel:not(.is-open) { transition: flex-basis .5s cubic-bezier(.32,.72,0,1), transform .25s ease; }
}

/* ==========================================================================
   11. Blogs
   ========================================================================== */
.blogs {
  --vlak: var(--groen);
  background: var(--groen);
  color: var(--wit);
  padding: var(--sectie) 0;
}
.blogs .kop { color: var(--wit); }

.carrousel { overflow: hidden; }
.carrousel-knoppen.is-verborgen { display: none; }
.carrousel-knoppen .schulp[disabled] { opacity: .45; cursor: default; }
.carrousel-knoppen .schulp[disabled]:hover { transform: none; }
.carrousel-spoor {
  display: flex;
  gap: clamp(12px, 1.6vw, 20px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.carrousel-spoor::-webkit-scrollbar { display: none; }
.blogkaart {
  flex: 0 0 calc((100% - 3 * clamp(12px, 1.6vw, 20px)) / 4);
  scroll-snap-align: start;
}
.blogkaart-link { display: block; text-decoration: none; }
.blogkaart-beeld {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 12px;
}
.blogkaart-beeld img, .blogkaart-beeld .mt-ph { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blogkaart-link:hover .blogkaart-beeld img { transform: scale(1.05); }
.blogkaart-titel {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.12;
}
.blogkaart-samenvatting { margin: 8px 0 0; font-size: 15px; }

@media (max-width: 1000px) { .blogkaart { flex-basis: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 760px) { .blogkaart { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 520px) { .blogkaart { flex-basis: 82%; } }

/* ==========================================================================
   12. Contact
   ========================================================================== */
.contact { padding: var(--sectie) 0; }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 120px);
  align-items: start;
}
.contact-tekst { text-align: right; }
.contact-tekst .kop { max-width: 9.6em; margin-left: auto; }
.contact-tekst .lopend { margin-top: 26px; margin-left: auto; max-width: 40ch; }
.contact-gegevens {
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 19px;
}
.contact-gegevens a { text-decoration: none; }
.contact-gegevens a:hover { text-decoration: underline; }

.formulier { display: grid; gap: 4px; }
.veldrij { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 18px); }
.veld { position: relative; margin: 0 0 18px; }
.veld select {
  width: 100%;
  padding: 26px 2px 10px;
  border: 0;
  border-bottom: 1px solid var(--groen);
  border-radius: 0;
  background: transparent;
  color: var(--inkt);
  font: inherit;
  appearance: none;
  cursor: pointer;
  /* pijltje naar beneden, als inline SVG zodat er geen los bestand bij hoort */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%238E8F22' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 7 7l6-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
}
.veld select:focus { outline: 0; border-bottom-width: 2px; }
/* Een select heeft altijd een waarde, dus het label staat hier vast omhoog. */
.veld-keuze label {
  transform: translateY(-20px);
  font-size: 13px;
  color: var(--groen-diep);
}
/* Kort oplichten als het onderwerp vanuit een dienstkaart gezet is. */
.veld select.is-gezet {
  border-bottom-width: 2px;
  animation: mt-onderwerp-gezet 1.4s ease;
}
@keyframes mt-onderwerp-gezet {
  0%, 100% { background-color: transparent; }
  25%      { background-color: rgba(189,190,61,.22); }
}
@media (prefers-reduced-motion: reduce) {
  .veld select.is-gezet { animation: none; }
}

.veld input, .veld textarea {
  width: 100%;
  padding: 26px 2px 10px;
  border: 0;
  border-bottom: 1px solid var(--groen);
  background: transparent;
  color: var(--inkt);
  font: inherit;
  border-radius: 0;
}
.veld textarea { resize: vertical; min-height: 92px; }
.veld label {
  position: absolute;
  left: 2px;
  top: 22px;
  font-size: 16px;
  color: #6d6d5c;
  pointer-events: none;
  transition: transform .18s ease, font-size .18s ease, color .18s ease;
  transform-origin: left top;
}
.veld input:focus + label,
.veld textarea:focus + label,
.veld input:not(:placeholder-shown) + label,
.veld textarea:not(:placeholder-shown) + label {
  transform: translateY(-20px);
  font-size: 13px;
  color: var(--groen-diep);
}
.veld input:focus, .veld textarea:focus { outline: 0; border-bottom-width: 2px; }

.honeypot { position: absolute; left: -9999px; }
.formulier-knoppen { justify-content: flex-end; }
.formulier-melding { margin: 14px 0 0; min-height: 1.4em; font-size: 15px; }
.formulier-melding.is-fout { color: #b3261e; }
.formulier-melding.is-goed { color: var(--groen-diep); }
.formulier.is-verstuurd .veld, .formulier.is-verstuurd .formulier-knoppen { display: none; }

@media (max-width: 860px) {
  .welkom-grid, .contact-grid { grid-template-columns: 1fr; }
  .contact-tekst { text-align: left; order: -1; }
  .contact-tekst .lopend { margin-left: 0; max-width: none; }
  .contact-gegevens { align-items: flex-start; }
  .sectiekop, .sectiekop-rechts { flex-direction: column; align-items: flex-start; }

  /* Alle koppen links, en zonder harde regelafbreking. De <br> komt uit nl2br
     op het contentveld ("Onze\ndiensten"); nl2br laat het witruimteteken staan,
     dus display:none maakt er weer een gewone spatie van. Een afbreking die op
     1440px klopt, valt op een telefoon midden in de zin. */
  .kop, .hero-kop { text-align: left; }
  .kop br, .hero-kop br { display: none; }
  .contact-tekst .kop, .sectiekop-rechts .kop { max-width: none; margin-left: 0; }
  .hero-inhoud .wrap { justify-content: flex-start; }
}

/* ==========================================================================
   13. Footer
   ========================================================================== */
.footer {
  --vlak: var(--geel);
  background: var(--geel);
  padding-top: clamp(40px, 6vw, 90px);
  overflow: hidden;
}
.footer-woordmerk {
  padding-inline: var(--gutter);
  max-width: var(--wrap);
  margin-inline: auto;
}
.footer-woordmerk span {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(64px, 17.2vw, 258px);
  line-height: .82;
  letter-spacing: -0.02em;
  color: var(--wit);
  white-space: nowrap;
}
.footer-onder {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: clamp(22px, 3vw, 40px);
}
.socials { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.socials .schulp { color: var(--groen); }
.socials .schulp svg { width: 21px; height: 21px; color: var(--groen); }
.footer-lijn { flex: 1 1 auto; height: 1px; background: var(--groen); }
.footer-links { margin: 0; font-size: 15px; color: var(--groen-diep); }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

/* ==========================================================================
   14. Binnenpagina's, archieven en detail
   ========================================================================== */
.binnen { padding: clamp(40px, 6vw, 90px) 0 var(--sectie); }
.binnen-geel { --vlak: var(--geel); background: var(--geel); }
.binnen .kop { margin-bottom: clamp(26px, 3.4vw, 44px); }

.kaartgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
/* Projectenpagina: de kaarten zijn geen links (er is geen detailpagina), maar
   de foto is aan te klikken voor een grote weergave. */
.projecten-lijst { padding-block: clamp(36px, 5vw, 72px) var(--sectie); }
.projectgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
}
.projectkaart {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--groen);
  border-radius: var(--radius);
  overflow: hidden;
}
.projectkaart-beeld { aspect-ratio: 4 / 3; overflow: hidden; }
.projectkaart-beeld img, .projectkaart-beeld .mt-ph { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.projectkaart:hover .projectkaart-beeld img { transform: scale(1.04); }
.projectkaart-body { padding: clamp(16px, 1.8vw, 22px); }
.projectkaart-titel {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.1;
}
.projectkaart-meta { margin: 6px 0 0; font-size: 14px; color: var(--groen-diep); }
.projectkaart-tekst { margin: 12px 0 0; font-size: 15px; }
.projecten-lijst .knoprij { margin-top: clamp(30px, 4vw, 52px); }

.detail-hero { position: relative; }
.detail-foto { width: 100%; max-height: clamp(300px, 46vw, 560px); object-fit: cover; }
.detail-hero-tekst { padding-block: clamp(26px, 3.4vw, 46px); }
.detail-titel { max-width: 26ch; }
.detail-meta { margin: 12px 0 0; font-size: 15px; color: var(--groen-diep); }
.detail-body { padding-bottom: var(--sectie); }
.detail-body .lopend { max-width: 68ch; }
.detail-body .lopend h2, .detail-body .lopend h3 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.05;
  margin: 1.6em 0 .5em;
}
.detail-body .lopend h2 { font-size: clamp(24px, 2.4vw, 34px); }
.detail-body .lopend h3 { font-size: clamp(20px, 1.9vw, 26px); }
.detail-body .lopend img { border-radius: 12px; margin: 1.4em 0; }
.detail-body .lopend ul, .detail-body .lopend ol { padding-left: 1.2em; }

/* --------------------------------------------------------------------------
   Blogpagina: tekstkop + twee kolommen met een plakkende zijkolom
   -------------------------------------------------------------------------- */
/* Het gele kopblok loopt door tot achter de nav. De negatieve marge haalt de
   ruimte weg die main al voor de vaste nav vrijhoudt; de padding zet 'm er
   binnen het gele vlak weer bij. Zo hoeft de algemene main-regel niet aangepast
   te worden — die geldt ook voor de archieven en de projectpagina. */
.paginakop {
  --vlak: var(--geel);
  background: var(--geel);
  margin-top: calc(var(--navhoogte) * -1);
  padding-top: calc(var(--navhoogte) + clamp(12px, 2vw, 28px));
  padding-bottom: clamp(28px, 4vw, 52px);
}

.kruimels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(16px, 2.4vw, 26px);
  font-size: 14px;
  color: var(--groen-diep);
}
.kruimels a { text-decoration: none; }
.kruimels a:hover { text-decoration: underline; }
.kruimels span[aria-current] { color: var(--inkt); }

.kicker {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--groen-diep);
}
.paginakop .kop { max-width: 26ch; }
.lede {
  margin: clamp(14px, 2vw, 22px) 0 0;
  max-width: 56ch;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.45;
}
.lede p { margin: 0 0 .6em; }
.lede p:last-child { margin-bottom: 0; }
.artikel-meta { margin: clamp(16px, 2.2vw, 26px) 0 0; font-size: 14px; color: var(--groen-diep); }
.artikel-meta span { margin-inline: 6px; }

.artikel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(260px, 26vw, 340px);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  padding-block: clamp(36px, 5vw, 72px) var(--sectie);
}
.prose { max-width: 68ch; }
.prose > *:first-child { margin-top: 0; }
.prose h2, .prose h3 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.05;
  margin: 1.7em 0 .5em;
}
.prose h2 { font-size: clamp(24px, 2.4vw, 34px); }
.prose h3 { font-size: clamp(20px, 1.9vw, 26px); }
.prose img { border-radius: 12px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose blockquote {
  margin: 1.6em 0;
  padding: 0 0 0 clamp(16px, 2vw, 24px);
  border-left: 2px solid var(--groen);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.15;
}
.prose-beeld { margin: 0 0 clamp(22px, 3vw, 36px); }
.prose-beeld img { width: 100%; height: auto; border-radius: 12px; }
.artikel-terug {
  margin: clamp(30px, 4vw, 48px) 0 0;
  padding-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--groen);
  font-size: 15px;
}
.artikel-terug a { text-decoration: none; }
.artikel-terug a:hover { text-decoration: underline; }

/* De zijkolom blijft meelopen tijdens het scrollen, netjes onder de nav. */
.zijkolom {
  position: sticky;
  top: calc(var(--navhoogte) + 16px);
  display: grid;
  gap: clamp(16px, 2vw, 22px);
}
.zijblok {
  border: 1px solid var(--groen);
  border-radius: var(--radius);
  overflow: hidden;
}
.zijblok-contact { background: var(--geel); }
.zijblok-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.zijblok-body { padding: clamp(16px, 1.8vw, 22px); }
.zijblok-body .kicker { margin-bottom: 4px; }
.zijblok-naam {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.05;
}
.zijblok-acties { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.pil-lijn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--groen-diep);
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.pil-lijn:hover { background: var(--groen-diep); color: var(--wit); }

.zijblok-kop {
  margin: 0;
  padding: clamp(14px, 1.6vw, 18px) clamp(16px, 1.8vw, 22px) 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 21px);
}
.zijlijst { margin: 0; padding: clamp(10px, 1.2vw, 14px) 0 0; list-style: none; }
.zijlijst li + li { border-top: 1px solid rgba(189,190,61,.5); }
.zijlijst a {
  display: block;
  padding: 12px clamp(16px, 1.8vw, 22px);
  text-decoration: none;
  transition: background .18s ease;
}
.zijlijst a:hover { background: var(--geel); }
.zijlijst time { display: block; font-size: 12.5px; color: var(--groen-diep); margin-bottom: 2px; }
.zijlijst span { font-size: 15px; line-height: 1.25; }

@media (max-width: 860px) {
  .artikel { grid-template-columns: 1fr; }
  .zijkolom { position: static; }
  .paginakop .kop, .lede, .prose { max-width: none; }
}

.paginering { margin-top: clamp(28px, 4vw, 52px); }
.paginering .nav-links { display: flex; gap: 8px; }
.paginering .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 10px;
  border-radius: 999px; background: var(--geel); text-decoration: none;
}
.paginering .page-numbers.current { background: var(--groen); color: var(--wit); }

/* ==========================================================================
   14b. Scroll- en hover-effecten
   --------------------------------------------------------------------------
   Overgenomen uit de eigen animatiebibliotheek: "Scroll fade-in",
   "Hover-lift kaart" en "Knop fill-from-left". Alles vanilla, alleen transform
   en opacity, en achter prefers-reduced-motion.
   ========================================================================== */

/* Scroll fade-in. Het verbergen hangt aan .mt-js, dus zonder JS staat alles
   gewoon zichtbaar. */
.mt-js [data-mt-reveal] {
  --mt-reveal-duur: .6s;
  --mt-reveal-afstand: 22px;
  --mt-reveal-vertraging: 0ms;
  opacity: 0;
  transform: translateY(var(--mt-reveal-afstand));
  transition:
    opacity var(--mt-reveal-duur) ease-out var(--mt-reveal-vertraging),
    transform var(--mt-reveal-duur) cubic-bezier(.32, .72, 0, 1) var(--mt-reveal-vertraging);
  will-change: opacity, transform;
}
.mt-js [data-mt-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Hover-lift op de kaarten in de archief- en bloggrids. */
.blogkaart {
  transition: transform .25s ease;
  will-change: transform;
}
.blogkaart:hover, .blogkaart:focus-within { transform: translateY(-6px); }

/* Knop fill-from-left: de groene vulling veegt vanaf links over de pil in
   plaats van in één keer om te klappen. */
.knop-tekst {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.knop-tekst::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--groen);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s cubic-bezier(.32, .72, 0, 1);
}
.knop:hover .knop-tekst::before,
.knop:focus-visible .knop-tekst::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .mt-js [data-mt-reveal] { opacity: 1; transform: none; transition: none; }
  .blogkaart { transition: none; }
  .blogkaart:hover, .blogkaart:focus-within { transform: none; }
  .projectkaart:hover .projectkaart-beeld img { transform: none; }
  .knop-tekst::before { transition: none; }
}

/* ==========================================================================
   15. Placeholder, inline bewerken en lightbox
   ========================================================================== */
.mt-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.035) 0 10px, rgba(0,0,0,.06) 10px 20px);
  color: rgba(0,0,0,.35);
}

.mt-editfab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--inkt);
  color: var(--wit);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
body.mt-editmode .mt-editfab { background: var(--groen-diep); }
body.mt-editmode [data-mt-ed] {
  outline: 1px dashed var(--groen-diep);
  outline-offset: 3px;
  cursor: text;
}
body.mt-editmode [data-mt-ed]:hover { outline-style: solid; }
[data-mt-ed].is-saving { opacity: .55; }
[data-mt-ed].is-saved { outline: 2px solid var(--groen) !important; }

.mt-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; }
.mt-zoom__hint {
  position: absolute; right: 10px; bottom: 10px;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 999px;
  background: rgba(23,23,15,.72); color: #fff; font-size: 13px;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.mt-zoom:hover .mt-zoom__hint, .mt-zoom:focus-visible .mt-zoom__hint { opacity: 1; }
.mt-lb {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center;
  background: rgba(12,12,8,.92); padding: 4vmin;
}
.mt-lb.is-open { display: flex; }
body.mt-lb-open { overflow: hidden; }
.mt-lb__figuur { margin: 0; max-width: 100%; max-height: 100%; }
.mt-lb__beeld { max-width: 100%; max-height: 84vh; object-fit: contain; border-radius: 8px; }
.mt-lb__bijschrift, .mt-lb__teller { color: #fff; font-size: 14px; text-align: center; margin: 12px 0 0; }
.mt-lb__sluit, .mt-lb__nav {
  position: absolute; border: 0; border-radius: 50%;
  width: 46px; height: 46px; background: rgba(255,255,255,.14);
  color: #fff; font-size: 22px; cursor: pointer;
}
.mt-lb__sluit { top: 3vmin; right: 3vmin; }
.mt-lb__nav--vorige { left: 3vmin; top: 50%; transform: translateY(-50%); }
.mt-lb__nav--volgende { right: 3vmin; top: 50%; transform: translateY(-50%); }
.mt-lb__teller { position: absolute; bottom: 3vmin; left: 0; right: 0; }

.mt-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ==========================================================================
   16. Admin-balk laat de nav niet verschuiven
   ========================================================================== */
body.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nav { top: 46px; } }