/*
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.
   De kopletter is Gelica Light (Zetafonts, betaald). Staat dat bestand in
   assets/fonts/, dan wint hij; zo niet, dan pakt Petrona Light het op — de
   dichtstbijzijnde gratis serif, zodat de koppen op elk apparaat hetzelfde
   zijn in plaats van Iowan Old Style naast Georgia.
   ========================================================================== */
:root {
  /* Uit Homepage V2.1 in Figma. Het geelgroen (#BDBE3D) en het blauw van de
     schulpen (#C2DEF4) uit de vorige opzet komen niet meer voor.
     --bleek komt uit het eigenschappenpaneel van Figma; de andere tinten zijn
     uit het ontwerp gemeten en kunnen een paar eenheden afwijken. */
  --donker: #2D321E;        /* balken, footer, actieve tab, hoofdknop */
  --donker-diep: #1F2315;   /* hover op een donker vlak */
  --bleek: #D8E6C0;         /* schulpen, quote-kaarten, nav-pil, wordmark */
  --vlak-groen: #E2EBCE;    /* sectievlak, bovenkant van het verloop */
  --vlak-groen-eind: #DDE7C5;
  --zand: #F3F4EF;          /* teamsectie en zachte hover */
  --zacht: #5A5F4C;         /* bijschriften en labels */
  --logo-groen: #113511;    /* eigen kleur van het logobestand */
  --inkt: #000000;
  --wit: #ffffff;
  --vlak: var(--wit);

  --serif: "Gelica", "Petrona", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Inter Tight", 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;
  /* Hoogte van de balk. Niet het logo bepaalt die, maar de menupil: 48px link
     plus 2 × 6px padding is 60px, en daar komt de padding van de balk zelf bij.
     Op een losse pagina moet de kop daaronder beginnen; stond dit te laag, dan
     lag de pil over de titel. */
  --navhoogte: calc(60px + clamp(32px, 4vw, 52px));
}

/* ==========================================================================
   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;
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

/* Eén keer goed regelen: een eigen display-waarde (grid, flex) wint van de
   browserstandaard voor [hidden], en dan blijft een verborgen element staan.
   Dat ging al twee keer mis — bij de lightbox en bij de tabpanelen. */
[hidden] { display: none !important; }
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); }
/* 55px op 1440, gemeten aan "Waar verkoop jij je bollen?" in Figma. Stond op
   65px; met de echte Gelica erin is dat zichtbaar te groot. De andere koppen
   (.kop-l) zijn niet nagemeten en staan nog op hun eigen maat. */
.kop-xl { font-size: clamp(32px, 3.8vw, 55px); }
.kop-groen { color: var(--bleek); }

.lopend {
  /* Uit het ontwerp: Inter Tight ExtraLight 250, 18px, regelafstand 130%. */
  font-size: 18px;
  font-weight: 250;
  line-height: 1.3;
}
.lopend p { margin: 0 0 1em; }
.lopend p:last-child { margin-bottom: 0; }
.lopend-klein { font-size: 15.5px; line-height: 1.4; }
.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(--bleek);
  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(--schulp-vlak, var(--bleek));
  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); }

/* Datzelfde geldt voor de schulp ernaast: crème op crèmegroen is geen vorm
   meer, alleen een pijl die los lijkt te zweven. */
.doen, .binnen-geel, .paginakop { --schulp-vlak: var(--wit); }

/* Donkere hoofdknop, zoals 'Verstuur' onder het formulier. */
.knop-donker .knop-tekst { background: var(--donker); color: 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(--bleek);
  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, zoals in het ontwerp: het menu zit in een witte pil en het logo
   staat er vrij naast. Dat vrije logo moet dus zelf van kleur wisselen met de
   ondergrond — zie de logo-regels hieronder. Zodra je scrolt wordt de nav
   compacter en krijgt de 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); }

/* Het logo van 2026 is een rond merk en dus precies vierkant: de breedte is
   hier ook de hoogte. Daarom kleiner opgezet dan het liggende woordmerk van
   hiervoor — een cirkel van 240px zou een balk van 240px hoog betekenen. Hij
   krimpt bovendien zodra je scrolt, en is op binnenpagina's meteen klein. */
.nav .logo {
  display: block;
  width: clamp(84px, 9vw, 124px);
  /* Bewust donker als standaard: op alles behalve de hero is de achtergrond
     licht, en een wit logo is daar onzichtbaar. Wit komt er alleen bij zolang
     de balk nog boven de hero hangt (klasse van het script). Het groen is de
     eigen kleur van het logobestand, niet het donker van de site. */
  color: var(--logo-groen);
  transition:
    width .35s cubic-bezier(.32, .72, 0, 1),
    color .25s ease;
}
body.is-op-donker .nav .logo { color: var(--wit); }

/* Vangnet voor de inkt-stand: de balk schuift ook over de donkere veldfoto's
   van het mozaïek. Op wit en crème is deze gloed onzichtbaar, op een donkere
   foto houdt hij het merk leesbaar. */
body:not(.is-op-donker) .nav .logo {
  filter: drop-shadow(0 0 5px rgba(255,255,255,.85));
}
body.is-gescrold .nav .logo,
body:not(.is-home) .nav .logo { width: clamp(52px, 5vw, 68px); }

@media (prefers-reduced-motion: reduce) {
  .nav .logo { transition: none; }
}
.logo-mark {
  width: 100%;
  height: auto;
  /* Geen schaduw: die zit niet in het ontwerp. Het donkere verloop bovenin de
     hero (.hero-beeld::after) zorgt al voor contrast onder het witte logo. */
}

.nav-pil {
  /* Logo links, daarna pil en vlaggetje als groepje rechts. */
  margin-left: auto;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 6px;
  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; }
/* Zelfde maatvoering als de knoppen in de herobalk: 48px hoog, 26px zijlucht,
   15px tekst. Stond op 8/12px padding en was daardoor duidelijk kleiner. */
.nav-links a {
  display: flex;
  align-items: center;
  min-height: var(--pil);
  padding: 0 26px;
  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(--zand); }

/* Contact is in het ontwerp een gevulde pil, geen gewone link. Inkt op dit
   bleekgroen haalt 15:1; wit zou er juist op wegvallen. */
.nav-links a.nav-cta {
  background: var(--bleek);
  transition: background .2s ease, color .2s ease;
}
.nav-links a.nav-cta:hover,
.nav-links a.nav-cta:focus-visible { background: var(--donker); color: var(--wit); }

/* 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(--bleek);
  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(--bleek); }
}

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

.hero-beeld {
  position: relative;
  min-height: clamp(460px, 62vw, 720px);
  overflow: hidden;
}
.hero-foto,
.hero-video,
.hero-beeld .mt-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* De video ligt over de posterfoto en fade't erin zodra hij speelt. Zo zie je
   geen zwart gat terwijl hij laadt. */
.hero-video {
  opacity: 0;
  transition: opacity .6s ease;
}
.hero-video.is-aan { opacity: 1; }
.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-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(--donker);
  display: block;
  background: var(--donker);
  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-family: var(--serif);
  font-weight: 300;
  font-size: clamp(17px, 1.6vw, 22px);
  white-space: nowrap;
}
.hero-balk-lijn { flex: 1 1 auto; height: 1px; background: rgba(255,255,255,.45); }

.hero-knoppen { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-knop {
  display: inline-flex;
  align-items: center;
  min-height: var(--pil);
  padding: 0 26px;
  border-radius: 999px;
  background: var(--wit);
  color: var(--inkt);
  font-size: 15px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.hero-knop:hover, .hero-knop:focus-visible { background: var(--bleek); }

@media (max-width: 620px) {
  .hero-kop { max-width: none; font-size: clamp(28px, 8.4vw, 40px); }
  /* Op smal scherm vervalt de lijn: label boven, knoppen eronder. */
  .hero-balk-binnen { flex-wrap: wrap; gap: 12px; }
  .hero-balk-tekst { font-size: 15px; }
  .hero-balk-lijn { display: none; }
  .hero-knoppen { width: 100%; }
  .hero-knop { flex: 1 1 auto; justify-content: center; padding-inline: 16px; }
}

/* ==========================================================================
   7. Wie zijn we
   ========================================================================== */
.over { padding: var(--sectie) 0; }
.over-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  /* stretch en geen center: de foto loopt daarmee precies van de bovenkant
     tot de onderkant van de tekstkolom ernaast, in plaats van een eigen
     hoogte op te leggen. */
  align-items: stretch;
}
.over-tekst .kicker { margin: 0 0 14px; }
.over-tekst .kop { margin-bottom: 22px; }
.over-tekst .lopend { max-width: 58ch; }

/* De foto rechts; de knop ligt erop, linksonder, net als in het ontwerp. */
.over-beeld {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  /* Geen vaste verhouding: de figure vult de hoogte van de rij, en die wordt
     bepaald door de tekst ernaast. Een ondergrens zodat de foto niet in niets
     verdwijnt als die tekst ooit kort is. */
  min-height: clamp(260px, 32vw, 460px);
}
/* De foto absoluut: met height:100% in een vak dat zelf 'auto' hoog is valt
   die hoogte terug op de eigen verhouding van het beeld, en dan bepaalt de
   foto de rijhoogte in plaats van andersom. Zo staat hij buiten de stroom en
   volgt het vak de tekstkolom ernaast. */
.over-beeld .over-foto, .over-beeld .mt-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.over-beeld-knop {
  position: absolute;
  left: clamp(14px, 2vw, 26px);
  bottom: clamp(14px, 2vw, 26px);
  display: inline-flex;
  align-items: center;
  min-height: var(--pil);
  padding: 0 24px;
  border-radius: 999px;
  background: var(--wit);
  color: var(--inkt);
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(23,23,15,.18);
  transition: background .2s ease, transform .2s ease;
}
.over-beeld-knop:hover, .over-beeld-knop:focus-visible { background: var(--bleek); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .over-beeld-knop { transition: none; } }


/* ==========================================================================
   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; }

/* Gecentreerde variant: labeltje boven de kop, allebei gecentreerd. */
.sectiekop-midden {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  margin-bottom: 0;
}
.sectiekop-midden .kicker { margin: 0; }
.sectiekop-midden .kop { max-width: 18ch; }

/* ==========================================================================
   9. Wat doen we (kaarten)
   ========================================================================== */
.doen {
  --vlak: var(--vlak-groen);
  background: linear-gradient(var(--vlak-groen), var(--vlak-groen-eind));
  padding: var(--sectie) 0;
}
/* Het zwevende reCAPTCHA-badge staat rechtsonder, waar de sneltoetsen al
   zitten. Verbergen mag van Google zolang de vermelding bij het formulier
   staat — die staat in contact.php. */
.grecaptcha-badge { visibility: hidden; }
.formulier-recaptcha {
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--zacht);
}
.formulier-recaptcha a { color: inherit; }

.doen-knoprij { display: flex; justify-content: center; margin: clamp(28px, 3.4vw, 48px) 0 0; }
.kaartenrij {
  display: grid;
  /* De kaartbreedte blijft die van een rij van vier, ook als een tab er minder
     heeft: dan staan ze gecentreerd in plaats van uitgerekt, en springt het
     formaat niet bij het wisselen van tab. --kaarten komt uit de template. */
  --gap: clamp(12px, 1.6vw, 20px);
  grid-template-columns: repeat(var(--kaarten, 4), minmax(0, calc((100% - 3 * var(--gap)) / 4)));
  justify-content: center;
  gap: var(--gap);
}
/* De kaart is in V2.1 gewoon een foto met de titel erover: geen rand, geen
   tekst die bij hover tevoorschijn komt. Hover geeft alleen de schulppijl en
   een kleine inzoom. */
.kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(300px, 30vw, 420px);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background: var(--bleek);
}
.kaart-link {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 auto;
  padding: clamp(16px, 1.8vw, 24px);
  color: var(--wit);
  text-decoration: none;
}
.kaart-beeld {
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: transform .5s ease;
}
.kaart-beeld img, .kaart-beeld .mt-ph { width: 100%; height: 100%; object-fit: cover; }
/* Verloop onderin, anders valt een witte titel weg op een lichte foto. */
.kaart-beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 38%, rgba(0,0,0,.55));
}
.kaart-titel {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.05;
  color: var(--wit);
  max-width: 13ch;
}
.kaart-pijl {
  position: absolute;
  top: clamp(12px, 1.4vw, 18px);
  right: clamp(12px, 1.4vw, 18px);
  display: grid;
  place-items: center;
  width: var(--schulp);
  height: var(--schulp);
  background: var(--bleek);
  color: var(--inkt);
  clip-path: url(#mt-schulp);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .25s ease, transform .25s ease;
}
.kaart-pijl svg { width: 23px; height: 23px; }
.kaart:hover .kaart-pijl,
.kaart:focus-within .kaart-pijl { opacity: 1; transform: scale(1); }
.kaart:hover .kaart-beeld,
.kaart:focus-within .kaart-beeld { transform: scale(1.04); }

/* Op touch bestaat hover niet; daar staat de pijl gewoon aan. */
@media (hover: none) {
  .kaart-pijl { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kaart-beeld, .kaart-pijl { transition: none; }
  .kaart:hover .kaart-beeld { transform: none; }
}
.kaart:hover .kaart-actie,
.kaart:focus-within .kaart-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. */
.kaart-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) {
  .kaart { min-height: 0; }
  .kaart .kaart-tekst { opacity: 1; transform: none; }
  .kaart .kaart-actie { opacity: 1; transform: none; margin-top: 18px; }
}

/* Onder de 900px past een rij van vier niet meer, en onder elkaar worden het
   vier hoge blokken waar je langs moet scrollen. Daarom een veegcarrousel: de
   kaarten houden hun verhouding en van de volgende zie je een randje, zodat je
   ziet dat er meer is. Geen pijlen — op een aanraakscherm veeg je. */
@media (max-width: 900px) {
  .kaartenrij {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Tot de rand van het scherm: de wrap houdt links en rechts lucht vrij, en
       daar mag de rij juist doorheen lopen. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    padding-block: 4px;
  }
  .kaartenrij::-webkit-scrollbar { display: none; }
  .kaart {
    scroll-snap-align: start;
    /* Vaste verhouding in plaats van een minimumhoogte: anders wordt een smalle
       kaart een vierkantje. */
    aspect-ratio: 3 / 4;
    min-height: 0;
  }
}
@media (max-width: 560px) {
  .kaartenrij { grid-auto-columns: 78%; }
}

/* ==========================================================================
   10. Blogkaarten (blogarchief en overzichten)
   ========================================================================== */
.blogs {
  --vlak: var(--donker);
  background: var(--donker);
  color: var(--wit);
  padding: var(--sectie) 0;
}
.blogs .kop { color: var(--wit); }

.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%; } }

/* ==========================================================================
   11. Tabs en fotomozaïek
   ========================================================================== */

/* Tabs boven de kaartenrij (Retail / Landscape) */
.tabs { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.tab {
  min-height: var(--pil);
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--wit);
  color: var(--inkt);
  font-size: 15px;
  cursor: pointer;
  transition: background .22s ease, color .22s ease;
}
.tabrij {
  display: flex;
  justify-content: center;
  margin: clamp(22px, 3vw, 40px) 0 clamp(28px, 4vw, 54px);
}
/* De regel vouwt open en dicht in de breedte. minmax(0, …) en niet kaal 0fr:
   een fr-track houdt anders het min-content van de tekst als ondergrens en
   dan klapt hij nooit helemaal dicht. Door de breedte te animeren schuiven de
   pillen ernaast mee in plaats van te verspringen. */
.tab-vouw {
  display: grid;
  grid-template-columns: minmax(0, 0fr);
  align-self: center;
  opacity: 0;
  transition:
    grid-template-columns .42s cubic-bezier(.32, .72, 0, 1),
    opacity .26s ease;
}
.tab-vouw.is-open {
  grid-template-columns: minmax(0, 1fr);
  opacity: 1;
  /* Bij openen eerst schuiven, dan pas tekst; bij sluiten andersom. */
  transition-delay: 0s, .14s;
}
.tab-vouw > * { min-width: 0; overflow: hidden; }
.tab-tekst {
  display: block;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(15px, 1.3vw, 19px);
  padding-inline: clamp(8px, 1.4vw, 22px);
  white-space: nowrap;
}
.tab:hover { background: var(--zand); }
.tab.is-actief { background: var(--donker); color: var(--wit); }
.tab:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }

@keyframes mt-paneel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.kaartenrij.is-gewisseld { animation: mt-paneel-in .42s cubic-bezier(.32, .72, 0, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .tab-vouw { transition: none; }
  .kaartenrij.is-gewisseld { animation: none; }
}

/* Fotomozaïek: twee rijen hoog, horizontaal schuivend. Elke vijfde foto pakt
   beide rijen en krijgt dus een eigen, staande kolom. */
.bollen { padding: var(--sectie) 0; }
.mozaiek { overflow: hidden; }
.mozaiek-spoor {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, clamp(150px, 15vw, 240px));
  grid-auto-columns: clamp(220px, 22vw, 330px);
  gap: clamp(12px, 1.4vw, 18px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  /* De rij begint op de kolom van de wrap en loopt daarna door tot buiten de
     rand — zo zie je dat er meer is. */
  padding-inline: var(--gutter);
  /* scroll-padding hoort bij de padding: zonder dit snapt de browser de eerste
     cel tegen de rand en is de marge links weg. */
  scroll-padding-inline: var(--gutter);
  padding-block: 4px;
}
.mozaiek-spoor::-webkit-scrollbar { display: none; }
.mozaiek-foto {
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  scroll-snap-align: start;
}
.mozaiek-foto img { transition: transform .6s cubic-bezier(.32,.72,0,1); }
.mozaiek-foto:hover img { transform: scale(1.05); }
.mozaiek-foto.is-hoog { grid-row: span 2; }
.mozaiek-foto img, .mozaiek-foto .mt-ph { width: 100%; height: 100%; object-fit: cover; }
.mozaiek-foto .mt-zoom { height: 100%; }
.mozaiek-knoppen.is-verborgen { display: none; }
.mozaiek-knoppen .schulp[disabled] { opacity: .45; cursor: default; }
.mozaiek-knoppen .schulp[disabled]:hover { transform: none; }

@media (max-width: 700px) {
  .mozaiek-spoor {
    grid-template-rows: repeat(2, clamp(130px, 34vw, 190px));
    grid-auto-columns: clamp(180px, 52vw, 260px);
  }
}


.over { padding: var(--sectie) 0; }
.over-slot { margin: clamp(18px, 2.4vw, 26px) 0 0; font-size: 18px; font-weight: 500; }

/* Quote-kaart in het mozaïek: zelfde celmaat als een foto, bleekgroen vlak. */
.mozaiek-quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(8px, 1vw, 18px);
  margin: 0;
  /* De kaart deelt de celmaat met de foto's (150–240px hoog), dus alles
     schaalt mee; anders loopt het bijschrift eruit. */
  padding: clamp(12px, 1.5vw, 26px);
  border-radius: 12px;
  background: var(--bleek);
  overflow: hidden;
  scroll-snap-align: start;
}
.mozaiek-quote blockquote { margin: 0; min-height: 0; }
.mozaiek-quote blockquote p {
  margin: 0;
  font-size: clamp(13px, 1.3vw, 19px);
  line-height: 1.28;
}
.quote-bron { display: flex; align-items: center; gap: clamp(8px, .9vw, 14px); min-width: 0; }
.quote-portret {
  flex: 0 0 auto;
  width: clamp(32px, 3.4vw, 50px);
  height: clamp(32px, 3.4vw, 50px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--wit);
}
.quote-portret img { width: 100%; height: 100%; object-fit: cover; }
.quote-wie {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: clamp(12.5px, 1.1vw, 16px);
  line-height: 1.22;
}
.quote-functie, .quote-org { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-org { color: var(--zacht); }

/* ==========================================================================
   11b. Partners en team
   ========================================================================== */
.partners { padding: 0 0 var(--sectie); }
.partners-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 80px);
}
.partners-kop {
  margin: 0 0 clamp(18px, 2.4vw, 30px);
  padding-top: clamp(18px, 2.4vw, 30px);
  border-top: 1px solid var(--bleek);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 1.5vw, 21px);
}
.gemeentelijst {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px clamp(16px, 2.4vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 17px;
}
/* Bovenaan uitlijnen en niet centreren: bij een naam die over twee regels
   loopt ("Gemeente Noordwijkerhout") zakte het vinkje naar het midden van het
   blok en stond het niet meer op één lijn met de rijen ernaast. */
.gemeentelijst li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; }
/* 18 × 18 met een lijn van 1px in het bleekgroen — zo staat het in Figma.
   Het was 22px in grijsgroen met een dikkere lijn, en dat trok veel meer
   aandacht dan de namen ernaast. */
.vink {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  /* Optisch midden van de eerste regel: (regelhoogte − icoon) / 2. */
  margin-top: calc((1.5em - 18px) / 2);
  color: var(--bleek);
}
.vink svg { width: 100%; height: 100%; }

.logorij {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 34px);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.logorij li { display: flex; align-items: center; justify-content: center; }
/* De logo's zijn van derden en verschillen sterk in vorm; een vaste hoogte
   plus grijswaarden houdt de rij rustig. */
.partnerlogo {
  max-height: 34px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
}
.partnerlogo { transition: opacity .2s ease, filter .2s ease, transform .25s cubic-bezier(.32,.72,0,1); }
.logorij li:hover .partnerlogo { filter: none; opacity: 1; transform: translateY(-3px); }

.team {
  background: var(--zand);
  padding: var(--sectie) 0;
}
/* Kop, foto en lijst zitten in één raster. De foto staat links en loopt over
   beide rijen: zo begint hij bovenaan bij de kop in plaats van pas naast de
   accordeon, en blijft er linksboven geen gat staan. */
.team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: clamp(20px, 3vw, 40px) clamp(28px, 5vw, 80px);
  align-items: start;
}
.team-kop {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
}
.team-kop .kicker { margin: 0 0 10px; }
.team-kop .kop { margin-left: auto; }
.team-beelden {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: stretch;
}
.team-lijst { grid-column: 2; grid-row: 2; }
/* De foto's liggen op elkaar en faden; de wikkel houdt de hoogte vast zodat
   de accordeon ernaast niet verspringt bij het wisselen. Die hoogte komt nu
   van de rij — kop plus accordeon — met een ondergrens voor korte lijsten. */
.team-beelden { position: relative; min-height: clamp(280px, 30vw, 440px); }
.team-beeld {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.015);
  transition: opacity .45s ease, transform .6s cubic-bezier(.32,.72,0,1), visibility 0s linear .45s;
  border-radius: var(--radius);
  overflow: hidden;
}
.team-beeld.is-actief {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.team-beeld img, .team-beeld .mt-ph { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.team-acties {
  position: absolute;
  right: clamp(12px, 1.6vw, 20px);
  bottom: clamp(12px, 1.6vw, 20px);
  display: flex;
  align-items: center;
  gap: 8px;
}
.team-knop {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--wit);
  color: var(--inkt);
  font-size: 15px;
  white-space: nowrap;
  text-decoration: none;
  transition: background .2s ease;
}
.team-knop:hover, .team-knop:focus-visible { background: var(--bleek); }
.team-acties .schulp { width: 44px; height: 44px; }
.team-acties .schulp svg { width: 19px; height: 19px; }

.team-rij { border-bottom: 1px solid var(--bleek); }
.team-naam { margin: 0; }
.team-knopregel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: clamp(16px, 2vw, 24px) 0;
  border: 0;
  background: none;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(21px, 2.1vw, 29px);
  line-height: 1.05;
  text-align: left;
  cursor: pointer;
}
.team-pijl {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  transition: transform .3s ease;
}
.team-pijl svg { width: 24px; height: 24px; }
/* Dicht wijst de pijl naar links, open naar beneden. */
.team-knopregel[aria-expanded="false"] .team-pijl { transform: rotate(180deg); }
.team-knopregel[aria-expanded="true"] .team-pijl { transform: rotate(90deg); }
/* 0fr → 1fr animeert naar een hoogte die we niet hoeven te meten. De dichte
   stand krijgt visibility: hidden, anders blijft de tekst bereikbaar met tab. */
.team-vouw {
  display: grid;
  /* minmax(0, …) en niet kaal 0fr: een fr-track krijgt automatisch het
     min-content van de inhoud als ondergrens, en dan blijft de padding van de
     tekst staan — 25px dode ruimte onder elke dichte broer. */
  grid-template-rows: minmax(0, 0fr);
  visibility: hidden;
  transition: grid-template-rows .4s cubic-bezier(.32,.72,0,1), visibility 0s linear .4s;
}
.team-vouw.is-open { grid-template-rows: minmax(0, 1fr); visibility: visible; transition-delay: 0s; }
.team-vouw > * { min-height: 0; overflow: hidden; }
.team-tekst { padding: 0 0 clamp(18px, 2.4vw, 28px); max-width: 52ch; }

/* De naam schuift een tikje op bij hover, zodat de rij voelt als een knop. */
.team-knopregel > span:first-child { transition: transform .25s cubic-bezier(.32,.72,0,1); }
.team-knopregel:hover > span:first-child { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .team-pijl,
  .team-beeld,
  .team-vouw,
  .team-knopregel > span:first-child,
  .mozaiek-foto img,
  .partnerlogo { transition: none; }
  .mozaiek-foto:hover img,
  .logorij li:hover .partnerlogo { transform: none; }
}

@media (max-width: 860px) {
  .partners-grid, .team-grid { grid-template-columns: minmax(0, 1fr); }
  /* Eén kolom: kop, foto, lijst onder elkaar, en de foto krijgt zijn eigen
     verhouding terug omdat er geen rij meer is om te vullen. */
  .team-kop, .team-beelden, .team-lijst { grid-column: 1; grid-row: auto; }
  .team-kop { text-align: left; }
  .team-kop .kop { margin-left: 0; }
  .team-beelden { aspect-ratio: 5 / 4; min-height: 0; }
  .logorij { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .gemeentelijst { grid-template-columns: minmax(0, 1fr); }
  .team-acties { flex-wrap: wrap; justify-content: flex-end; }
}

/* ==========================================================================
   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;
}
/* In V2.1 staat de kop links en het formulier rechts. */
.contact-tekst .kop { max-width: 9.6em; }
.contact-tekst .lopend { margin-top: 26px; 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(--bleek);
  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(--zacht);
}
/* 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(--bleek);
  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(--zacht);
}
.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(--zacht); }
.formulier.is-verstuurd .veld, .formulier.is-verstuurd .formulier-knoppen { display: none; }

@media (max-width: 860px) {
  .over-grid, .contact-grid { grid-template-columns: 1fr; }
  /* Eén kolom: er is geen tekst meer naast om de hoogte aan te ontlenen. */
  .over-beeld { aspect-ratio: 4 / 5; min-height: 0; }
  .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; }
  .sectiekop-midden { align-items: flex-start; text-align: left; }
  .sectiekop-midden .kop { max-width: none; }
  .tabs { justify-content: flex-start; }
  .tab-tekst { padding-inline: 0; }

  /* 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; }
}

/* ==========================================================================
   12b. Sneltoetsen
   --------------------------------------------------------------------------
   Offerte, bellen en mailen: op elke pagina binnen bereik zonder terug naar
   boven te scrollen. z-index 30 houdt ze onder de nav (40), het uitklapmenu
   (120) en de lightbox (200) — die dekken ze af zodra ze openstaan.

   Rechtsonder en niet onderaan het midden: daar zou de balk over de knoppenrij
   van het contactformulier liggen en de volgende klik blokkeren.
   ========================================================================== */
.snelmenu {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 30;
  display: grid;
  gap: 10px;
  justify-items: end;
  transition: opacity .22s ease, transform .22s ease;
}

/* In rust alleen het icoon; het label komt bij hover en focus. Met labels erbij
   is het blok te breed voor de marge naast de wrap van 1440px en ligt het over
   de tekst. Het label blijft in de HTML staan, dus een schermlezer noemt hem.

   Het uitklappen loopt over max-width en niet over width: naar 'auto' valt
   niets te animeren, de browser springt dan meteen naar de eindbreedte en je
   ziet de pil klappen in plaats van groeien. */
.snel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: auto;
  min-width: 48px;
  max-width: 48px;
  padding: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--wit);
  border: 1px solid var(--bleek);
  box-shadow: 0 6px 20px rgba(23,23,15,.16);
  color: var(--inkt);
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition:
    max-width .3s cubic-bezier(.32,.72,0,1),
    padding .3s cubic-bezier(.32,.72,0,1),
    background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.snel span {
  max-width: 0;
  padding-left: 0;
  opacity: 0;
  transition:
    max-width .3s cubic-bezier(.32,.72,0,1),
    padding-left .3s cubic-bezier(.32,.72,0,1),
    opacity .2s ease .04s;
}
.snelmenu:hover .snel,
.snelmenu:focus-within .snel { max-width: 230px; padding: 0 18px; box-shadow: 0 10px 26px rgba(23,23,15,.22); }
.snelmenu:hover .snel span,
.snelmenu:focus-within .snel span { max-width: 9rem; padding-left: 10px; opacity: 1; }

.snel svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.snel:hover { background: var(--bleek); }
.snel-hoofd { background: var(--donker); border-color: var(--donker); color: var(--wit); }
.snel-hoofd:hover { background: var(--donker-diep); border-color: var(--donker-diep); color: var(--wit); }
.snel:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }

/* Bij de footer weg: daar lag het blok over de socials en de privacylink. */
.snelmenu.is-weg { opacity: 0; transform: translateY(8px); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .snelmenu, .snel, .snel span { transition: none; }
}

/* Op een telefoon een balk over de volle breedte in plaats van drie zwevende
   rondjes naast de tekst: die liggen daar over de tekstkolom. Een balk ligt
   eronder, dus er verdwijnt geen woord achter.

   position: sticky en niet fixed. Met fixed staat de balk op iOS bij naar
   beneden scrollen honderden pixels boven de onderrand, middenin de footer.
   Sticky plakt tegen de onderrand zolang het element zijn eigen plek nog niet
   heeft bereikt, en komt onderaan de pagina vanzelf tot rust. */
@media (max-width: 880px) {
  .snelmenu {
    position: sticky;
    right: auto;
    bottom: 0;
    gap: 0;
    justify-items: stretch;
    grid-template-columns: repeat(var(--snel-aantal, 3), 1fr);
    background: var(--wit);
    border-top: 1px solid var(--bleek);
    box-shadow: 0 -6px 18px rgba(23,23,15,.12);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  /* max-width: none is hier geen detail: zonder dat blijft de 48px uit de
     desktopstand staan en valt het label buiten het kadertje. */
  .snel {
    width: auto;
    max-width: none;
    height: 48px;
    padding: 0 10px;
    border-radius: 10px;
    border-color: transparent;
    box-shadow: none;
    overflow: visible;
    font-size: 13px;
  }
  .snel span { max-width: none; opacity: 1; padding-left: 8px; }
  .snel, .snel span { transition: background-color .18s ease, color .18s ease; }
  .snel:not(.snel-hoofd) { border-color: var(--bleek); }
  .snelmenu:hover .snel,
  .snelmenu:focus-within .snel { max-width: none; padding: 0 10px; box-shadow: none; }
  .snelmenu:hover .snel span,
  .snelmenu:focus-within .snel span { padding-left: 8px; }
  /* Op een telefoon blijft de balk staan, ook bij de footer: een snelmenu dat
     komt en gaat is geen snelmenu. Hij ligt nergens overheen, want de footer
     houdt er ruimte voor vrij. */
  .snelmenu.is-weg { opacity: 1; transform: none; pointer-events: auto; }
  .footer-onder { padding-bottom: clamp(30px, 6vw, 50px); }
}

/* Staat de cursor in een invoerveld, dan typt iemand en hoort de balk niet
   boven het toetsenbord te hangen. Echt uit beeld en niet alleen doorzichtig:
   een onzichtbare balk is daar ook in de weg. */
.snelmenu.is-toetsenbord { opacity: 0; transform: translateY(100%); pointer-events: none; }

/* Onder 360px passen drie labels niet meer naast elkaar; dan alleen de iconen.
   De naam blijft in de HTML staan voor een schermlezer. */
@media (max-width: 359px) {
  .snel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .snel { padding: 0; }
}

/* ==========================================================================
   13. Footer
   ========================================================================== */
.footer {
  --vlak: var(--donker);
  background: var(--donker);
  color: var(--bleek);
  padding-top: clamp(40px, 6vw, 90px);
  overflow: hidden;
}
/* Het woordmerk hoort niet in de wrap: in het ontwerp loopt het aan beide
   kanten het beeld uit en is het bijna nooit in zijn geheel te zien. Daarom
   van rand tot rand, en groter dan de kolombreedte. */
.footer-woordmerk {
  padding-inline: 0;
  max-width: none;
  margin-inline: 0;
}
.footer-woordmerk span {
  display: block;
  /* Schuift van links naar rechts mee met het scrollen; site.js zet --schuif.
     Zonder script of bij minder beweging blijft hij gewoon op 0 staan. */
  transform: translate3d(var(--schuif, 0), 0, 0);
  will-change: transform;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(82px, 22vw, 340px);
  line-height: .82;
  letter-spacing: -0.02em;
  color: var(--bleek);
  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(--bleek); }
/* Zonder adres is het icoon geen knop: geen cursor, geen hover-beweging. */
.schulp.is-leeg { cursor: default; opacity: .55; }
.schulp.is-leeg:hover { transform: none; }
.schulp.is-leeg:hover svg { transform: none; }
.socials .schulp svg { width: 21px; height: 21px; color: var(--bleek); }
.footer-lijn { flex: 1 1 auto; height: 1px; background: var(--bleek); }
.footer-links { margin: 0; font-size: 15px; color: var(--bleek); }
.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(--vlak-groen); background: var(--vlak-groen); }
.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. De rij loopt rond, net
   als het bollenmozaïek op de homepage. */
.projecten-knoppen {
  display: flex;
  justify-content: flex-end;
  margin: clamp(26px, 3.4vw, 48px) 0 clamp(16px, 2vw, 26px);
}
.projecten-knoppen.is-verborgen { display: none; }
.projecten-slot { padding-bottom: var(--sectie); }
.projecten-slot .knoprij { margin-top: clamp(30px, 4vw, 52px); }

.projectrij-buiten { overflow: hidden; }
.projectrij {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(270px, 27vw, 370px);
  gap: clamp(16px, 2vw, 26px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  /* Begint op de kolom van de wrap en loopt daarna door tot buiten de rand,
     zodat je ziet dat er meer is. */
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  padding-block: 4px;
  align-items: start;
}
.projectrij::-webkit-scrollbar { display: none; }
.projectrij .projectkaart { scroll-snap-align: start; }
.projectkaart {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bleek);
  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;
}
/* Categorielabel boven de titel op de blog- en projectkaart. */
.kaart-categorie {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--zacht);
}
.projectkaart-meta { margin: 6px 0 0; font-size: 14px; color: var(--zacht); }
.projectkaart-tekst { margin: 12px 0 0; font-size: 15px; }


.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(--zacht); }
.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; }
/* Tabellen in een losse pagina (de grondslagentabel in de privacyverklaring).
   Scrollt binnen zijn eigen kader, zodat een smal scherm niet in z'n geheel
   horizontaal gaat schuiven. */
.detail-body .lopend table {
  display: block;
  overflow-x: auto;
  width: 100%;
  max-width: 68ch;
  margin: 1.6em 0;
  border-collapse: collapse;
  font-size: 16px;
}
.detail-body .lopend th,
.detail-body .lopend td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--bleek);
  text-align: left;
  vertical-align: top;
}
.detail-body .lopend th { font-weight: 500; white-space: nowrap; }
.detail-body .lopend tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   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(--vlak-groen);
  background: var(--vlak-groen);
  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(--zacht);
}
.kruimels a { text-decoration: none; }
.kruimels a:hover { text-decoration: underline; }
.kruimels span[aria-current] { color: var(--inkt); }

/* Uit Figma gemeten: Inter Tight Medium 500, 15px, regelafstand 130%, geen
   letterspatiëring, zwart. Stond op 13px licht grijs met .08em spatiëring —
   dat gaf een veel lichter en breder labeltje dan in het ontwerp. */
.kicker {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--inkt);
}
.paginakop .kop { max-width: 30ch; }
.lede {
  margin: clamp(14px, 2vw, 22px) 0 0;
  max-width: 68ch;
  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(--zacht); }
.artikel-meta span { margin-inline: 6px; }

.artikel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 27vw, 380px);
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
  padding-block: clamp(36px, 5vw, 72px) var(--sectie);
}
/* Geen maximumbreedte op de tekstkolom: die werd door de 68ch afgeknepen
   terwijl de kolom zelf al breder was, en dan staat er een gat tussen tekst en
   zijkolom. De iets grotere letter houdt de regellengte leesbaar nu de tekst de
   volle kolom vult. */
.prose { font-size: clamp(17px, 1.1vw, 18.5px); }
.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(--bleek);
  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(--bleek);
  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(--bleek);
  border-radius: var(--radius);
  overflow: hidden;
}
.zijblok-contact { background: var(--vlak-groen); }
/* Een portret in een liggend 4:3 vak verliest een kwart van de hoogte, en dat
   is precies waar het hoofd zit; daarom vanaf de bovenkant snijden. */
.zijblok-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 22%; }
.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(--donker);
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.pil-lijn:hover { background: var(--donker); 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(--zand); }
.zijlijst time { display: block; font-size: 12.5px; color: var(--zacht); 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 { 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(--vlak-groen); text-decoration: none;
}
.paginering .page-numbers.current { background: var(--bleek); 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 vulling veegt vanaf links over de pil in plaats van
   in één keer om te klappen.

   De veegkleur staat per knopsoort in --veeg en blijft altijd aan dezelfde
   kant van licht/donker als de pil zelf. Anders is de knop halverwege de veeg
   onleesbaar: de donkere Verstuur-knop heeft witte tekst, en daar veegde het
   bleekgroen overheen. */
.knop-tekst {
  --veeg: var(--wit);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.knop-tekst::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--veeg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s cubic-bezier(.32, .72, 0, 1);
}
.knop-wit .knop-tekst { --veeg: var(--bleek); }
.knop-donker .knop-tekst { --veeg: var(--donker-diep); }
.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(--zacht); }
body.mt-editmode [data-mt-ed] {
  outline: 1px dashed var(--zacht);
  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(--bleek) !important; }

/* Het knop-omhulsel dat de lightbox om elke zoombare foto zet.
   Standaard de volle hoogte van zijn vak: zonder dat valt de object-fit van
   het beeld weg en houdt elk beeld zijn eigen verhouding. Dat ging al mis bij
   de projectkaarten en daarna bij het fotomozaïek, dus liever één regel voor
   alles dan een lijst met uitzonderingen die je moet bijhouden. */
.mt-zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
}
/* In lopende tekst heeft het vak geen vaste hoogte; daar hoort auto. */
.prose .mt-zoom, .lopend .mt-zoom { height: auto; }
.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; }
/* Het script zet het hidden-attribuut, niet een klasse — de globale
   [hidden]-regel bovenaan doet het verbergen. */
.mt-lb {
  position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center;
  background: rgba(12,12,8,.92); padding: 4vmin;
}
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; } }