/* =====================================================================
   ontwerpzaak.nl · stijlblad
   Kleuren uit de portfolio-pdf 2026, logo 2019, lettertype Archivo.
   ===================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2-variations"),
       url("../fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* kleur */
  --zand: #cabb9f;
  --zand-licht: #ddd3c1;
  --zand-donker: #766549;
  --wit: #f4f1ec;
  --wit-licht: #faf8f4;
  --magenta: #e5007d;
  --donker: #94004e;
  --roze: #e8308a;
  --geel: #ffd500;
  --inkt: #1f1a17;
  --inkt-zacht: rgba(31, 26, 23, .72);
  --inkt-lijn: rgba(31, 26, 23, .14);
  --wit-lijn: rgba(244, 241, 236, .22);

  /* typografie */
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tekst: clamp(1rem, .95rem + .25vw, 1.125rem);
  --tekst-groot: clamp(1.125rem, 1rem + .6vw, 1.5rem);
  --kop-1: clamp(3.25rem, 1.5rem + 8vw, 9.5rem);
  --kop-case: clamp(2.75rem, 1.5rem + 5.5vw, 7.5rem);
  --kop-2: clamp(2.125rem, 1.4rem + 3.2vw, 4.5rem);
  --kop-3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);

  /* maat */
  --binnen: 86rem;
  --binnen-breed: 96rem;
  --rand: clamp(1.25rem, 4vw, 4.5rem);
  --ruimte: clamp(2.5rem, 1.5rem + 4vw, 6rem);
  --ruimte-klein: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  --radius: 6px;
  --kop-hoogte: 5.5rem;

  /* beweging */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --duur: .6s;

  color-scheme: light;
}

/* ---------- basis ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--tekst);
  line-height: 1.55;
  color: var(--inkt);
  background: var(--wit);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .15em; }
h1, h2, h3, p, ul, ol, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--magenta); color: #fff; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; border-radius: 2px; }
.visueel-verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .75rem 1rem; background: var(--inkt); color: var(--wit); border-radius: var(--radius);
}
/* los ankerpunt voor "Naar boven": .kop zelf is fixed, en Safari scrollt niet naar een */
/* fixed-positioned ankerdoel, dus #boven staat los, absoluut op de paginatop */
#boven { position: absolute; top: 0; left: 0; width: 0; height: 0; }
.skip:focus { top: 1rem; }
[hidden] { display: none !important; }

.binnen { width: min(100% - 2 * var(--rand), var(--binnen)); margin-inline: auto; }
.binnen--breed { width: min(100% - 2 * var(--rand), var(--binnen-breed)); }

/* ---------- ruimte links op laptop en desktop ------------------------------
   Twee linkerlijnen (keuze Renzo, sep 2026): beeld (werkraster, logo-wand, casebeelden,
   filterknoppen) staat op de buitenlijn (--rand); alles wat tekst is springt in naar de
   tekstlijn, drie keer zo ver van de rand (--rand + --inspringen). De kop met logo en menu
   staat op diezelfde tekstlijn, links én rechts (gespiegeld). Mobiel en tablet ongewijzigd. */
@media (min-width: 64em) {
  :root { --inspringen: calc(2 * var(--rand)); }
  .held__binnen, .wat .binnen, .wie__binnen, .waar .binnen, .caseband .binnen, .tekstpagina__body .binnen { padding-inline-start: var(--inspringen); }
  .werk .sectiekop, .logos .sectiekop { margin-inline-start: var(--inspringen); }
}

/* ---------- typografie ----------------------------------------------- */
.label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--zand-donker);
  margin-bottom: 1.25rem;
}
.kop1, .kop2 {
  font-weight: 900;
  font-stretch: 104%;
  letter-spacing: -.035em;
  line-height: .92;
  text-wrap: balance;
}
.kop1 { font-size: var(--kop-case); color: var(--donker); } /* niet --magenta: te weinig contrast op de zandkleurige caseband (2,4:1) */
.kop2 { font-size: var(--kop-2); color: var(--inkt); margin-bottom: 1.5rem; }
.intro {
  font-size: var(--tekst-groot);
  font-weight: 500;
  line-height: 1.4;
  max-width: 36em;
  color: var(--inkt);
}
.tekst { max-width: 40em; margin-top: 1.25rem; color: var(--inkt-zacht); }
.tekst--klein { font-size: .9375rem; }
.sectiekop { max-width: 48em; margin-bottom: var(--ruimte-klein); }
.sectiekop--breed { max-width: 60em; }

/* ---------- knoppen -------------------------------------------------- */
.knop {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .95em 1.5em;
  font-weight: 700; font-size: .9375rem; letter-spacing: .01em; line-height: 1;
  text-decoration: none; border-radius: 999px; border: 2px solid transparent;
  transition: transform var(--duur) var(--ease), background-color .25s, color .25s, border-color .25s;
}
.knop:hover { transform: translateY(-2px); }
.knop:active { transform: translateY(0); }
.knop--vol { background: var(--magenta); color: #fff; border-color: var(--magenta); }
.knop--vol:hover { background: var(--donker); border-color: var(--donker); }
.knop--lijn { border-color: currentColor; color: var(--inkt); background: transparent; }
.knop--lijn:hover { background: var(--inkt); color: var(--wit); border-color: var(--inkt); }

/* ---------- kop / navigatie ------------------------------------------ */
.kop {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background-color .35s, box-shadow .35s, padding .35s;
}
.kop__binnen {
  width: min(100% - 2 * var(--rand), var(--binnen-breed));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: var(--kop-hoogte);
  transition: height .35s var(--ease);
}
/* laptop/desktop: logo op de tekstlijn (zelfde inspringing als de teksten), menu gespiegeld rechts */
@media (min-width: 64em) {
  .kop__binnen { width: calc(min(100% - 2 * var(--rand), var(--binnen)) - 2 * var(--inspringen)); }
}
.kop.is-vast { box-shadow: 0 1px 0 var(--inkt-lijn); }
/* de blur staat op een pseudo-element: een backdrop-filter op .kop zelf zou het vaste menu (position: fixed) opsluiten in de kop */
.kop.is-vast::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(244, 241, 236, .84); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.kop.is-open::before { display: none; }
.kop.is-vast .kop__binnen { height: 4.25rem; }
.kop__logo { display: inline-flex; align-items: center; gap: .9rem; text-decoration: none; }
.kop__logo img { width: 3.25rem; height: 3.25rem; border-radius: 3px; transition: width .35s var(--ease), height .35s var(--ease), transform .35s var(--ease); }
.kop.is-vast .kop__logo img { width: 2.75rem; height: 2.75rem; }
.kop__logo:hover img { transform: rotate(-4deg); }
.kop__naam { font-weight: 800; letter-spacing: -.02em; font-size: 1.125rem; }
.kop__nav { display: flex; gap: clamp(1.25rem, 2.5vw, 2.5rem); }
.kop__nav-links { display: contents; }
.kop__nav-links a {
  position: relative; z-index: 0;
  display: inline-block;
  font-size: .8125rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; padding: .5rem .5em .4rem; margin: 0 -.5em;
  /* tekst en vlak faden in precies hetzelfde tempo en met dezelfde curve, heen en terug (keuze Renzo, 7 sep 2026):
     één beweging van zwart-op-zand naar wit-op-magenta, geen twee snelheden */
  transition: color .5s cubic-bezier(.33, 0, .2, 1);
}
/* Het magenta vlak zit op een eigen laagje achter de tekst, zodat het rustig kan opkomen:
   het zet vanuit het midden een klein beetje uit en wordt tegelijk zichtbaar. Traag genoeg
   om als opkomen te lezen, niet als aanklikken. */
.kop__nav-links a::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--magenta); border-radius: .22em;
  opacity: 0; transform: scale(.82);
  transition: opacity .5s cubic-bezier(.33, 0, .2, 1), transform .5s cubic-bezier(.33, 0, .2, 1);
}
.kop__nav-links a:hover::before, .kop__nav-links a[aria-current="true"]::before {
  opacity: 1; transform: scale(1);
}
.kop__nav-links a:hover, .kop__nav-links a[aria-current="true"] {
  color: #fff;
  transition: color .5s cubic-bezier(.33, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .kop__nav-links a::before { transition-duration: .01ms; }
}
.kop__knop {
  display: none; align-items: center; gap: .75rem;
  background: none; border: 0; padding: .5rem 0;
  font-size: .8125rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.kop__knop-lijn { position: relative; width: 1.75rem; height: 2px; background: currentColor; transition: background .2s; }
.kop__knop-lijn::before, .kop__knop-lijn::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: var(--inkt);
  transition: transform .35s var(--ease);
}
.kop__knop-lijn::before { top: -7px; }
.kop__knop-lijn::after { top: 7px; }
.kop__knop[aria-expanded="true"] .kop__knop-lijn { background: transparent; }
.kop__knop[aria-expanded="true"] .kop__knop-lijn::before { transform: translateY(7px) rotate(45deg); }
.kop__knop[aria-expanded="true"] .kop__knop-lijn::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 47.99em) {
  .kop__naam { display: none; }
  .kop__knop { display: inline-flex; position: relative; z-index: 2; }
  .kop.is-open { background: var(--zand); box-shadow: none; }
  .kop.is-open .kop__logo { position: relative; z-index: 2; }
  .kop__nav {
    position: fixed; inset: 0; z-index: 1;
    height: 100vh; height: 100dvh;
    display: flex; flex-direction: column; gap: 0;
    padding: calc(var(--kop-hoogte) + env(safe-area-inset-top, 0px)) var(--rand) calc(1.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--zand);
    opacity: 0; visibility: hidden;
    transition: opacity .35s var(--ease), visibility 0s .35s;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .kop.is-open .kop__nav { opacity: 1; visibility: visible; transition-delay: 0s; }
  .kop__nav-links { display: flex; flex-direction: column; margin-block: auto; position: relative; z-index: 1; }
  .kop__nav-links a {
    display: block;
    font-size: clamp(2.75rem, 14vw, 5rem); font-weight: 900; font-stretch: 104%;
    letter-spacing: -.035em; line-height: 1; text-transform: none; color: var(--donker);
    padding: .22em 0; border-top: 1px solid rgba(158, 0, 84, .28);
    opacity: 0; transform: translateY(1rem);
    transition: opacity .5s var(--ease), transform .5s var(--ease), color .2s;
    transition-delay: calc(var(--n, 0) * 55ms + .08s);
  }
  .kop__nav a:first-child { border-top: 0; }
  .kop__nav-links a { margin: 0; }
  .kop__nav-links a::before { display: none; }
  .kop__nav-links a:hover, .kop__nav a[aria-current="true"] { background: none; color: var(--magenta); }
  .kop.is-open .kop__nav a { opacity: 1; transform: none; }
  /* geen z-index hier: de menuwoorden (.kop__nav-links, z-index 1) horen vóór het vliegtuigje te staan,
     zodat de tekening er desnoods achterlangs kan zonder over de letters te lopen */
  .kop__nav-extra {
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
    padding-top: 1.5rem; position: relative;
    font-size: .875rem; font-weight: 600; color: var(--inkt);
    opacity: 0; transition: opacity .5s var(--ease) .4s;
  }
  .kop.is-open .kop__nav-extra { opacity: 1; }
  .kop__nav-extra a { color: inherit; text-decoration: none; border-bottom: 1.5px solid var(--magenta); }
  /* Het vliegtuigje staat rechtsonder in het menu, vlak boven de contactregel. Het hangt aan die regel
     (bottom: 100%) en niet aan een vaste afstand tot de onderkant: valt de regel op een smal scherm over
     twee regels, dan schuift het vliegtuigje mee omhoog. Rechts een klein stukje buiten de tekstlijn,
     precies zoveel als de lege ruimte rechts in de tekening, zodat de neus op de tekstlijn uitkomt.
     Volle kleur en flink formaat: het mag gezien worden. De menuwoorden staan links en houden ruim
     op, dus de tekening mag de onderste regel in lopen; ze gaat er sowieso achterlangs. */
  .kop__nav-extra .kop__nav-vlieger {
    position: absolute; right: -.625rem; bottom: calc(100% + .5rem);
    width: min(84vw, 22rem);
    color: var(--magenta); pointer-events: none;
  }
  body.menu-open { overflow: hidden; }
}
/* kortere telefoon (iPhone SE, mini, 8): minder ruimte onder "Waar", dus kleiner */
@media (max-width: 47.99em) and (max-height: 44em) {
  .kop__nav-extra .kop__nav-vlieger { width: min(62vw, 15rem); }
}
/* liggende telefoon: kleiner, twee kolommen */
@media (max-width: 47.99em) and (max-height: 32em) {
  .kop__nav-links { flex-direction: row; flex-wrap: wrap; column-gap: 2rem; }
  .kop__nav-links a { font-size: clamp(1.75rem, 9vh, 2.75rem); flex: 1 1 40%; border-top: 0; padding: .15em 0; }
  .kop__nav-extra { padding-top: .75rem; }
  .kop__nav .kop__nav-vlieger { display: none; }
}
@media (min-width: 48em) {
  .kop__nav-extra, .kop__nav-vlieger { display: none; }
}

/* ---------- home / hero --------------------------------------------- */
/* Twee kleurthema's via <html data-thema>: zand = zand met inkt en magenta; zwart = inkt met gebroken wit en magenta. */
.held {
  --held-bg: var(--zand); --held-tekst: var(--inkt); --held-label: var(--donker); --held-lijn: var(--donker);
  position: relative; overflow: hidden;
  background: var(--held-bg); color: var(--held-tekst);
  min-height: 100svh;
  display: grid; align-items: center;
  padding: calc(var(--kop-hoogte) + 3rem) 0 clamp(6rem, 12vh, 9rem);
  transition: background-color .4s;
}
html[data-thema="zwart"] .held { --held-bg: var(--inkt); --held-tekst: var(--wit); --held-label: var(--zand); --held-lijn: var(--zand); }
.held__binnen { width: min(100% - 2 * var(--rand), var(--binnen)); margin-inline: auto; position: relative; z-index: 1; }
.held__label { color: var(--held-label); }
.held__kop {
  font-size: var(--kop-1);
  font-weight: 900; font-stretch: 106%;
  letter-spacing: -.04em; line-height: .88;
  color: var(--held-tekst);
  max-width: 12ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.held__kop em { font-style: normal; color: var(--magenta); }
.held__intro { font-size: var(--tekst-groot); font-weight: 500; line-height: 1.4; max-width: 30em; color: var(--held-tekst); }
.held__knoppen { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-top: 2rem; }
.held .knop--lijn { color: var(--held-tekst); }
.held .knop--lijn:hover { background: var(--held-tekst); color: var(--held-bg); border-color: var(--held-tekst); }
/* vliegtuigje: rechts naast de introtekst, dicht erbij */
.held__tekst { position: relative; max-width: 30em; }
.held__vlieger {
  position: absolute; left: calc(100% + clamp(1.5rem, 4vw, 5rem)); bottom: -.5rem;
  width: clamp(14rem, 26vw, 24rem); color: var(--magenta); opacity: .95;
  pointer-events: none;
}
.held__vlieger svg { width: 100%; height: auto; overflow: visible; }
.held__verder {
  position: absolute; left: 50%; bottom: 1.75rem; transform: translateX(-50%);
  width: 1.75rem; height: 2.75rem; border: 2px solid var(--held-lijn); border-radius: 1rem; opacity: .7;
}
.held__verder span { position: absolute; left: 50%; top: .5rem; width: 4px; height: 4px; margin-left: -2px; border-radius: 2px; background: var(--held-lijn); animation: verder 1.8s var(--ease) infinite; }
@keyframes verder { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(1.1rem); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 47.99em) {
  .held__tekst { max-width: none; }
  .held__vlieger { position: static; width: 58vw; max-width: 20rem; margin: .25rem 0 0 auto; opacity: .85; }
}

/* kop op de startpagina in het zwarte thema: lichte tekst, donkere blur */
html[data-thema="zwart"] .pagina--home .kop:not(.is-open) { color: var(--wit); }
html[data-thema="zwart"] .pagina--home .kop.is-vast:not(.is-open) { box-shadow: 0 1px 0 var(--wit-lijn); }
html[data-thema="zwart"] .pagina--home .kop.is-vast::before { background: rgba(31, 26, 23, .82); }
html[data-thema="zwart"] .pagina--home .kop:not(.is-open) .kop__knop-lijn::before,
html[data-thema="zwart"] .pagina--home .kop:not(.is-open) .kop__knop-lijn::after { background: currentColor; }

/* kop: elke titel komt woord voor woord omhoog uit een masker; het accentwoord staat
   in een magenta blok (als het logo). Weggaan: alle woorden omhoog het masker uit. */
.held__kop--blok { max-width: none; font-size: clamp(2.75rem, 1.2rem + 7vw, 8rem); line-height: 1; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.held__stapel { display: grid; }
/* De titel mag de volle tekstbreedte gebruiken; de regels worden door site.js in balans gebracht
   (zelfde aantal regels als bij volle breedte, zo gelijk mogelijk van lengte). Bewust geen text-wrap: balance
   meer: Safari brak daarmee titels in drie korte regels terwijl er rechts ruimte over was. */
.held__zin { grid-area: 1 / 1; visibility: hidden; align-self: end; }
.held__zin .w-groep { white-space: nowrap; } /* blok + leesteken (bv. "Eén hand,") blijven altijd bij elkaar */
.held__zin.is-actief, .held__zin.is-weg { visibility: visible; }
.held__zin .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .05em .08em .16em; margin: -.05em -.08em -.16em; }
.held__zin .w > span { display: inline-block; transform: translateY(118%); will-change: transform; }
.held__zin.is-actief .w > span { animation: zin-in .75s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.held__zin.is-weg .w > span { animation: zin-uit .5s cubic-bezier(.6, 0, .85, .4) both; animation-delay: calc(var(--i, 0) * 30ms); }
.held__zin .w--blok > span { background: var(--magenta); color: #fff; padding: .02em .16em .07em; border-radius: .07em; }
@keyframes zin-in { from { transform: translateY(118%); } to { transform: none; } }
@keyframes zin-uit { from { transform: none; } to { transform: translateY(-118%); } }

/* vliegtuig: stippen verschijnen na elkaar, het vliegtuigje komt aanvliegen */
.vliegtuig .spoor path { transform-box: fill-box; transform-origin: center; opacity: 0; animation: stip .6s var(--ease) both; animation-delay: calc(var(--n, 0) * 22ms + .3s); }
.vliegtuig .vlieger { transform-box: fill-box; transform-origin: center; animation: vlieg 1.4s var(--ease) both; animation-delay: 1.5s; }
@keyframes stip { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes vlieg { from { opacity: 0; transform: translate(-18%, 26%) rotate(-8deg); } to { opacity: 1; transform: none; } }

/* ---------- secties -------------------------------------------------- */
section { position: relative; }
.werk, .logos, .wat, .wie, .waar { padding-block: var(--ruimte); }
.werk { background: var(--wit); }
.logos { background: var(--wit-licht); border-top: 1px solid var(--inkt-lijn); }
.wat { background: var(--zand); }
.wat .label { color: var(--donker); }
.wat .kop2 { color: var(--donker); }
.wie { background: var(--wit); }
.waar { background: var(--inkt); color: var(--wit); }
.waar .label { color: var(--zand); }
.waar .kop2, .waar .intro { color: var(--wit); }

/* ---------- filter --------------------------------------------------- */
.filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1.75rem, 3vw, 3rem); }
@media (max-width: 47.99em) {
  /* op een telefoon een strook die je opzij schuift */
  .filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand); scroll-padding-inline: var(--rand); -webkit-overflow-scrolling: touch; }
  .filter::-webkit-scrollbar { display: none; }
  .filter__knop { flex: 0 0 auto; }
}
.filter__knop {
  display: inline-flex; align-items: baseline; gap: .45em;
  padding: .6em 1.05em .6em 1.15em;
  font-size: .875rem; font-weight: 600; letter-spacing: .01em;
  background: transparent; color: var(--inkt);
  border: 1.5px solid var(--inkt-lijn); border-radius: 999px;
  transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--ease);
}
.filter__knop:hover { border-color: var(--inkt); transform: translateY(-1px); }
.filter__knop.is-actief { background: var(--inkt); color: var(--wit); border-color: var(--inkt); }
.filter__tel { font-size: .75em; font-weight: 500; opacity: .6; }

/* ---------- werk-raster ---------------------------------------------- */
.raster {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem) clamp(1.25rem, 2.5vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}
@media (min-width: 64em) { .raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kaart { animation: verschijn .55s var(--ease) both; }
@keyframes verschijn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.kaart__link { display: block; text-decoration: none; color: inherit; }
.kaart__beeld {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius);
  background: var(--wit); border: 1px solid var(--inkt-lijn);
  transition: border-color .3s, box-shadow .5s var(--ease), transform .5s var(--ease);
}
/* --punt komt uit project.txt (omslagpunt): welk punt van het beeld altijd in beeld blijft */
.kaart__img { width: 100%; height: 100%; object-fit: cover; object-position: var(--punt, center); transition: transform .8s var(--ease), opacity .4s; }
.kaart__link:hover .kaart__beeld { border-color: transparent; box-shadow: 0 24px 50px -24px rgba(31, 26, 23, .35); transform: translateY(-4px); }
.kaart__link:hover .kaart__img { transform: scale(1.035); }
.kaart__tekst { padding: 1.1rem .15rem 0; }
.kaart__naam { font-size: var(--kop-3); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-bottom: .35rem; }
.kaart__link:hover .kaart__naam { color: var(--magenta); }
.kaart__klant { color: var(--inkt-zacht); font-size: .9375rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .85rem; }
.tags li, .tags a {
  font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--zand-donker); text-decoration: none;
}
.tags li { padding: .3em .6em; border: 1px solid var(--inkt-lijn); border-radius: 999px; }
.tags a:hover { color: var(--magenta); }
.tags--groot li, .tags--groot a { color: var(--donker); } /* .tags a zet color al op de link zelf, dus li alleen was niet genoeg */
.tags--groot li { font-size: .75rem; border-color: rgba(158, 0, 84, .35); }
.raster__leeg { margin-top: 2rem; color: var(--inkt-zacht); }

/* ---------- opdrachtgevers: namen achter elkaar, om en om inkt en donker magenta ---------- */
.klanten { margin-top: var(--ruimte-klein); padding-top: var(--ruimte-klein); border-top: 1px solid var(--inkt-lijn); }
.klanten__tekst {
  font-size: clamp(.78rem, .7rem + .3vw, .95rem); font-weight: 700; letter-spacing: .08em; line-height: 1.5;
  text-transform: uppercase; max-width: none; color: var(--inkt);
}
.klanten__tekst span { display: inline-block; white-space: nowrap; margin: 0 1.4em .55em 0; }
.klanten__tekst span:last-child { margin-right: 0; }
@media (max-width: 40em) { .klanten__tekst span, .klanten__tekst .klanten__punt { margin: 0 1.1em .35em 0; } }
.klanten__tekst span:nth-child(even) { color: var(--donker); }
.klanten__tekst .klanten__punt { display: inline-block; color: var(--zand); margin: 0 1.4em .55em 0; font-style: normal; }

/* ---------- logo-wand ------------------------------------------------ */
.logowand {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 40em) { .logowand { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { .logowand { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.logowand__item {
  position: relative; aspect-ratio: 3 / 2;
  background: #fff; border-radius: var(--radius);
  transition: translate .45s cubic-bezier(.33, 0, .2, 1), box-shadow .45s cubic-bezier(.33, 0, .2, 1);
}
/* HIER ZAT DE FOUT, 16 september 2026. De tegel heeft ook de klasse "reveal", voor het
   opkomen van de wand bij het scrollen. Die regel (html.js .reveal) zet een eigen
   transition met ALLEEN opacity en transform, en weegt zwaarder dan .logowand__item.
   Gevolg op de echte site: de schaduw had helemaal geen overgang en klapte er in één
   keer in, en de beweging hing aan de vertraging per tegel (tot 770 ms). Alles wat ik
   aan .logowand__item instelde, deed daar niets. In een losse proefpagina zonder die
   klasse klopte het wel, en dat is precies waarom ik het niet zag.

   Oplossing: het opkomen blijft op opacity en transform staan, precies zoals het was,
   en de hover verhuist naar de aparte eigenschap "translate". Die twee kunnen elkaar
   dan niet meer in de weg zitten. */
html.js .logowand__item.reveal {
  transition-property: opacity, transform, translate, box-shadow;
  transition-duration: .9s, .9s, .45s, .45s;
  transition-timing-function: var(--ease), var(--ease), cubic-bezier(.33, 0, .2, 1), cubic-bezier(.33, 0, .2, 1);
  transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s;
}
/* Aankomen mag langer duren dan weggaan, en de schaduw volgt de tegel een tikje later. */
.logowand__item:hover, html.js .logowand__item.reveal:hover {
  translate: 0 -3px;
  /* Stand 8 uit de schuifproef van 16 september: duidelijk aanwezig, in twee lagen
     zodat het een schaduw blijft en geen rand wordt. */
  box-shadow: 0 12px 30px -10px rgba(31, 26, 23, .27), 0 33px 71px -23px rgba(31, 26, 23, .32);
}
.logowand__item:hover { transition-duration: .75s, .75s; transition-delay: 0s, .12s; }
html.js .logowand__item.reveal:hover {
  transition-duration: .9s, .9s, .75s, .75s;
  transition-delay: 0s, 0s, 0s, .12s;
}
/* absoluut geplaatst: het logo kan het vlak nooit oprekken, alle vlakken blijven even hoog */
.logowand__item img { position: absolute; left: 14%; top: 16%; width: 72%; height: 68%; object-fit: contain; object-position: center; }
/* klikbaar logo (index.php geeft de tegel een link als het project ook een case heeft): de link vult de hele tegel.
   Het pijltje rechtsonder staat er altijd, bewust en niet pas bij hover: op een telefoon is er geen hover.
   Licht genoeg om het logo niet te storen, zoals het pijltje bij "Lees verder" onder Wat.

   17 september 2026: alleen dat pijltje zegt te weinig ("het zegt niet zo veel"). Bij hover komt er nu
   linksonder "Bekijk het project" bij en trekt er een magenta lijntje langs de onderrand. Bewust NIET op
   de tegel zelf gezet maar op onderdelen binnen de tegel: de tegel draagt de klasse "reveal", en die zet
   een eigen transition die zwaarder weegt. Alles wat je aan de tegel instelt, doet daar niets (zie de
   uitleg hierboven). Onderdelen binnen de tegel hebben daar geen last van. */
.logowand__link { position: absolute; inset: 0; display: block; border-radius: var(--radius); }
.logowand__uitleg {
  position: absolute; left: .625rem; right: .625rem; bottom: .4rem;
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  pointer-events: none;
}
/* Tempo: dezelfde curve en ongeveer dezelfde duur als het omhoog komen van de tegel.
   Met de snellere var(--ease) stond de tekst na 120 ms al op 89%, en dat leest als inklappen
   naast een schaduw die er 750 ms over doet. Alles wat bij hover gebeurt hoort één beweging
   te lijken, niet drie losse. */
.logowand__tekst {
  font-size: .625rem; font-weight: 700; letter-spacing: -.01em; line-height: 1; white-space: nowrap;
  color: var(--magenta);
  opacity: 0; translate: 0 .3rem;
  transition: opacity .45s cubic-bezier(.33, 0, .2, 1) .08s, translate .45s cubic-bezier(.33, 0, .2, 1) .08s;
}
.logowand__pijl {
  margin-left: auto;
  font-size: .75rem; font-weight: 700; line-height: 1;
  color: rgba(31, 26, 23, .4);
  transition: color .45s cubic-bezier(.33, 0, .2, 1) .08s, translate .45s cubic-bezier(.33, 0, .2, 1) .08s;
}
/* het lijntje langs de onderrand; op de link zelf, zodat toetsenbordfocus hem ook kan tonen.
   Trekt zich van links naar rechts en mag als eerste beginnen: dat brengt het oog naar de tekst. */
.logowand__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--magenta); border-radius: 0 0 var(--radius) var(--radius);
  scale: 0 1; transform-origin: left center;
  transition: scale .55s cubic-bezier(.33, 0, .2, 1);
}
/* Kleinere tegels: pijltje iets kleiner en dichter in de hoek. De tekst wordt daar weggehaald
   op de manier van .visueel-verborgen en niet met display:none: zo blijft de link voor een
   schermlezer "Logo AVANT Bekijk het project" heten, ook op een telefoon. */
@media (max-width: 40em) {
  .logowand__uitleg { left: .4rem; right: .4rem; bottom: .2rem; }
  .logowand__pijl { font-size: .625rem; }
  .logowand__tekst {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%);
  }
}
@media (hover: hover) and (pointer: fine) {
  .logowand__item--link:hover .logowand__tekst { opacity: 1; translate: 0 0; }
  .logowand__item--link:hover .logowand__pijl { color: var(--magenta); translate: 3px 0; }
  .logowand__item--link:hover .logowand__link::after { scale: 1 1; }
}
.logowand__link:focus-visible .logowand__tekst { opacity: 1; translate: 0 0; }
.logowand__link:focus-visible .logowand__pijl { color: var(--magenta); translate: 3px 0; }
.logowand__link:focus-visible::after { scale: 1 1; }
/* Sinds 16 september komt ELKE tegel omhoog, niet alleen de klikbare. Daarvoor kregen de
   zeventien logo's zonder case wel een schaduw maar geen beweging, en dat leest als een
   fout: een schaduw zonder dat er iets opkomt. Het omhoog komen zelf staat hierboven bij
   .logowand__item, op de eigenschap "translate". */

/* ---------- wat / diensten ------------------------------------------- */
.diensten {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
/* op laptop/desktop springt de Wat-sectie in en is er minder breedte: kleinere ondergrens houdt de
   kaarten op vier kolommen, 22% houdt het op maximaal vier (6 kaarten = 4 + 2), auto-fit voorkomt een lege kolom */
@media (min-width: 64em) {
  .diensten { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(13rem, 22%)), 1fr)); }
}
/* subgrid: nummer, kop, tekst en "lees verder" staan in alle kolommen op dezelfde lijn */
.dienst {
  display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; align-content: start;
  padding-top: 1.25rem; border-top: 2px solid rgba(31, 26, 23, .18);
}
@supports not (grid-template-rows: subgrid) {
  .dienst__kop { min-height: 2.35em; }
}
/* .dienst__link is zelf ook subgrid: zo blijven nr/kop/tekst/lees-verder mee uitgelijnd terwijl de kaart klikbaar is */
.dienst__link {
  display: grid; grid-template-rows: subgrid; grid-row: span 4; grid-column: 1 / -1;
  text-decoration: none; color: inherit;
}
@supports not (grid-template-rows: subgrid) {
  .dienst__link { display: block; }
}
.dienst__nr { display: block; font-size: .8125rem; font-weight: 800; letter-spacing: .1em; color: var(--donker); margin-bottom: .75rem; }
.dienst__kop { font-size: var(--kop-3); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-bottom: .6rem; align-self: start; transition: color .25s; }
.dienst__link:hover .dienst__kop { color: var(--magenta); }
.dienst__tekst { color: var(--inkt-zacht); font-size: .9375rem; line-height: 1.5; align-self: start; }
.wat .dienst__tekst { color: rgba(31, 26, 23, .8); }
/* subtiele "lees verder": laat zien dat de kaart meer tekst bevat, niet alleen bij hover zichtbaar (ook nodig voor touch, geen hover daar) */
.dienst__lees {
  display: inline-flex; align-items: center; gap: .4em; align-self: start;
  margin-top: .85rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--inkt-zacht); transition: color .25s;
}
.wat .dienst__lees { color: rgba(31, 26, 23, .75); } /* op de zandkleurige achtergrond: 5,2:1, ruim boven WCAG AA */
.dienst__link:hover .dienst__lees { color: var(--magenta); }
.dienst__pijl { display: inline-block; transition: transform .25s var(--ease); }
.dienst__link:hover .dienst__pijl { transform: translateX(3px); }
.dienst__lang p { max-width: 40em; }
.dienst__lang p + p { margin-top: 1.1em; }
/* rechterkolom op de dienst-pagina: compacte knoppen met klantnamen i.p.v. een beeldraster */
.dienst__klanten { display: flex; flex-direction: column; gap: .6rem; width: 100%; max-width: 20rem; }
.dienst__klant-knop {
  display: block; text-decoration: none; color: var(--inkt);
  padding: .7em 1.1em; border: 1.5px solid var(--inkt-lijn); border-radius: 999px;
  font-weight: 700; font-size: .875rem; line-height: 1.3;
  transition: background-color .25s, color .25s, border-color .25s, transform .2s var(--ease);
}
.dienst__klant-knop:hover { background: var(--inkt); color: var(--wit); border-color: var(--inkt); transform: translateX(3px); }
.case__zij .label { color: var(--donker); } /* .label is standaard --zand-donker, te weinig contrast op de zandkleurige caseband */

/* ---------- wie ------------------------------------------------------ */
.wie__binnen { display: grid; gap: clamp(2rem, 5vw, 6rem); align-items: start; }
@media (min-width: 56em) { .wie__binnen { grid-template-columns: 1.15fr .85fr; } }
.wie__kaart {
  background: var(--magenta); color: #fff; border-radius: 10px;
  padding: clamp(1.75rem, 3vw, 3rem);
  display: flex; flex-direction: column; gap: 1.5rem;
  position: sticky; top: calc(var(--kop-hoogte) + 1rem);
}
.feiten { display: flex; flex-direction: column; gap: 1.25rem; }
.feit { display: flex; flex-direction: column; gap: .15rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, .28); }
.feit:last-child { border-bottom: 0; padding-bottom: 0; }
.feit__groot { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 900; letter-spacing: -.035em; line-height: 1; }
.feit__tekst { font-weight: 500; opacity: .92; }
.wie__bno { width: 9rem; height: auto; margin-top: .5rem; color: #fff; }

/* ---------- waar / contact ------------------------------------------- */
.waar__kolommen { display: grid; gap: clamp(2.5rem, 5vw, 6rem); align-items: start; }
@media (min-width: 56em) { .waar__kolommen { grid-template-columns: .9fr 1.1fr; } }
.adres { display: grid; gap: 1.25rem; font-size: var(--tekst-groot); line-height: 1.4; }
.adres__naam { font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.adres__payoff { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--zand); margin-top: .35rem; }
.adres__link { text-decoration: none; border-bottom: 2px solid var(--magenta); transition: color .2s, border-color .2s; }
.adres__link:hover { color: var(--magenta); }
.adres__klein { font-size: .875rem; color: rgba(244, 241, 236, .6); line-height: 1.5; }
.formulier { display: grid; gap: 1.5rem; }
.formulier__kop { font-size: var(--kop-3); font-weight: 800; letter-spacing: -.02em; }
.formulier__melding { padding: 1rem 1.25rem; border-radius: var(--radius); background: rgba(244, 241, 236, .1); border-left: 3px solid var(--magenta); }
.veld { display: grid; gap: .5rem; }
.veld label { font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--zand); }
.veld input, .veld textarea {
  width: 100%; font: inherit; color: var(--wit);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--wit-lijn); border-radius: 0;
  padding: .65rem 0; transition: border-color .25s;
}
.veld textarea { resize: vertical; min-height: 8rem; line-height: 1.5; }
.veld input:focus, .veld textarea:focus { outline: none; border-color: var(--magenta); }
.veld input:user-invalid, .veld textarea:user-invalid { border-color: var(--geel); }
.veld--honing { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
.formulier .knop { justify-self: start; }
.formulier.is-bezig .knop { opacity: .6; pointer-events: none; }
.waar--kort { padding-block: var(--ruimte-klein) var(--ruimte); }
.waar--kort .knop--lijn { color: var(--wit); }
.waar--kort .knop--lijn:hover { background: var(--wit); color: var(--inkt); border-color: var(--wit); }

/* ---------- voet ----------------------------------------------------- */
.voet { background: #15120f; color: rgba(244, 241, 236, .75); padding-block: 3rem; }
.voet__binnen { width: min(100% - 2 * var(--rand), var(--binnen)); margin-inline: auto; display: grid; gap: 1rem 1.5rem; grid-template-columns: auto 1fr auto auto; align-items: center; }
.voet__logo img { width: 3.5rem; height: 3.5rem; border-radius: 3px; }
.voet__tekst { font-weight: 600; color: var(--wit); }
.voet__bno { grid-column: 3; justify-self: end; width: 6.5rem; height: auto; color: var(--magenta); }
.voet__klein { grid-column: 2; font-size: .8125rem; line-height: 1.5; }
/* De ingang naar het beheer hoort er wel te staan, maar rustig: hij is voor één persoon. */
.voet__beheer { opacity: .65; }
.voet__beheer:hover, .voet__beheer:focus-visible { opacity: 1; }
/* Op de eerste rij, niet over allebei de rijen: anders wordt de knop gecentreerd over
   de hoogte van beide rijen samen en staat hij ~18 px lager dan het logo en het bno-merk. */
.voet__boven { grid-column: 4; grid-row: 1; font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding: .75rem 1rem; border: 1px solid var(--wit-lijn); border-radius: 999px; transition: background-color .25s, color .25s; }
.voet__boven:hover { background: var(--wit); color: var(--inkt); }
@media (max-width: 40em) {
  .voet__binnen { grid-template-columns: auto 1fr; }
  .voet__boven { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
  .voet__klein { grid-column: 1 / -1; }
}

/* ---------- case ----------------------------------------------------- */
.pagina--case .kop { background: rgba(202, 187, 159, .0); }
.caseband { background: var(--zand); padding: calc(var(--kop-hoogte) + clamp(2rem, 6vw, 5rem)) 0 clamp(2.5rem, 5vw, 5rem); }
.kruimel { display: flex; gap: .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--donker); margin-bottom: clamp(1.5rem, 3vw, 3rem); }
.kruimel a { text-decoration: none; }
.kruimel a:hover { text-decoration: underline; }
.case__klant { margin-top: 1.25rem; font-size: var(--tekst-groot); font-weight: 700; line-height: 1.35; color: var(--donker); max-width: 34em; }
.case__meta { display: grid; gap: 2rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 56em) { .case__meta { grid-template-columns: 1.3fr .7fr; gap: 4rem; } }
.case__opdracht { font-size: var(--tekst); line-height: 1.55; max-width: 40em; color: var(--inkt); }
.case__zij { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.case__zij .tags { margin-top: 0; }
.case__jaar { font-size: .875rem; color: var(--inkt-zacht); }
.case__beelden { background: var(--wit); padding-block: clamp(2rem, 4vw, 4rem) clamp(2rem, 4vw, 5rem); }
.werkbeeld { margin-bottom: clamp(2rem, 5vw, 5rem); }
.werkbeeld:last-child { margin-bottom: 0; }
.werkbeeld img { width: 100%; height: auto; border-radius: var(--radius); }
.werkbeeld__tekst { margin-top: 1rem; font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--zand-donker); text-align: center; }
.casenav { border-top: 1px solid var(--inkt-lijn); background: var(--wit); padding-block: clamp(2rem, 4vw, 4rem); }
.casenav__binnen { display: grid; gap: 1.5rem; align-items: center; grid-template-columns: 1fr auto 1fr; }
.casenav__link { display: flex; flex-direction: column; gap: .25rem; text-decoration: none; }
.casenav__link--volgende { text-align: right; align-items: flex-end; }
.casenav__richting { font-size: .6875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--zand-donker); }
.casenav__naam { font-size: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; transition: color .2s; }
.casenav__link:hover .casenav__naam { color: var(--magenta); }
.casenav__alles { font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding: .8rem 1.1rem; border: 1.5px solid var(--inkt-lijn); border-radius: 999px; white-space: nowrap; transition: background-color .25s, color .25s; }
.casenav__alles:hover { background: var(--inkt); color: var(--wit); border-color: var(--inkt); }
@media (max-width: 40em) {
  .casenav__binnen { grid-template-columns: 1fr 1fr; }
  .casenav__alles { grid-column: 1 / -1; justify-self: center; order: 3; }
}

/* ---------- beweging ------------------------------------------------- */
html.js .reveal {
  opacity: 0; transform: translateY(1.5rem);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .held .reveal { transition-delay: calc(var(--i, 0) * 70ms + .1s); }
html.js .held .held__label.reveal { --i: 0; }
html.js .held .held__kop.reveal { --i: 1; }
html.js .held .held__intro.reveal { --i: 2; }
html.js .held .held__knoppen.reveal { --i: 3; }

/* subtiele parallax met scroll-gestuurde animaties (alleen waar de browser het kan) */
@supports (animation-timeline: view()) {
  .werkbeeld img { animation: drijf linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  .kaart__beeld { animation: drijf-klein linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  .held__vlieger { animation: zweef linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  .held__binnen { animation: zak linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
}
@keyframes drijf { from { transform: translateY(3.5%); } to { transform: translateY(-3.5%); } }
@keyframes drijf-klein { from { transform: translateY(1.5%); } to { transform: translateY(-1.5%); } }
@keyframes zweef { from { transform: translate(0, 0) rotate(0); } to { transform: translate(6vw, -40vh) rotate(6deg); } }
@keyframes zak { from { transform: translateY(0); opacity: 1; } to { transform: translateY(18vh); opacity: .2; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .vliegtuig .spoor path, .vliegtuig .vlieger, .held__verder span, .kaart { animation: none !important; opacity: 1; }
  .held__zin .w > span, .held__zin.is-actief .w > span { animation: none !important; transform: none; }
  .werkbeeld img, .kaart__beeld, .held__vlieger, .held__binnen { animation: none !important; }
  * { transition-duration: .01ms !important; }
}

/* ---------- print ---------------------------------------------------- */
@media print {
  .kop, .held__verder, .filter, .formulier, .voet__boven { display: none !important; }
  .held { min-height: auto; }
  body { background: #fff; }
}

/* ---------- tekstpagina (privacyverklaring) --------------------------
   Zelfde opbouw als een casepagina: lopende tekst links, smalle kolom rechts.
   -------------------------------------------------------------------- */
/* Een intro direct onder de grote kop heeft lucht nodig: de kop staat strak op zijn regel. */
.caseband .kop1 + .intro { margin-top: clamp(1rem, 2vw, 1.75rem); }

.tekstpagina__body { padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.tekstpagina__raam { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 56em) {
  .tekstpagina__raam { grid-template-columns: 1.3fr .7fr; gap: 4rem; }
  .tekstpagina__zij { position: sticky; top: calc(var(--kop-hoogte) + 1.5rem); }
}
/* Op telefoon staan de kernpunten en de inhoudsopgave juist bóven de tekst:
   dan zie je meteen waar het over gaat en kun je doorspringen. */
@media (max-width: 55.99em) { .tekstpagina__zij { order: -1; } }

.tekstpagina__tekst { max-width: 38em; color: var(--inkt); }
.tekstpagina__tekst p { font-size: var(--tekst); line-height: 1.6; }
.tekstpagina__tekst p + p { margin-top: 1em; }
.tekstpagina__tekst p.tekstpagina__colofon {
  font-size: .92rem; line-height: 1.55; color: var(--inkt-zacht);
  padding-bottom: 1.6rem; border-bottom: 1px solid var(--inkt-lijn);
}

.tekstpagina__kop {
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.55rem); font-weight: 800; letter-spacing: -.015em;
  line-height: 1.15; margin: 2.75rem 0 .1rem; padding-top: 1.5rem; position: relative;
}
.tekstpagina__kop::before {
  content: ""; position: absolute; top: 0; left: 0; width: 2.25rem; height: 3px;
  background: var(--magenta); border-radius: 2px;
}
.tekstpagina__kop + p { margin-top: .85rem; }
.tekstpagina__kop:target { scroll-margin-top: calc(var(--kop-hoogte) + 1.5rem); }

/* rechterkolom */
.tekstpagina__zij { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; width: 100%; }
.tekstpagina__kaart {
  background: var(--zand); border-radius: 10px; padding: 1.5rem 1.5rem 1.6rem; width: 100%; max-width: 22rem;
}
.tekstpagina__kaart .label { color: var(--donker); margin-bottom: .9rem; }
.tekstpagina__punten { display: grid; gap: .7rem; font-size: .95rem; line-height: 1.4; font-weight: 600; }
.tekstpagina__punten li { display: grid; grid-template-columns: 1rem 1fr; gap: .65rem; align-items: start; }
.tekstpagina__punten li::before {
  content: ""; width: .5rem; height: .5rem; margin-top: .45em; border-radius: 999px;
  background: var(--magenta);
}
.tekstpagina__inhoud { width: 100%; max-width: 22rem; }
.tekstpagina__inhoud .label { margin-bottom: .75rem; }
.tekstpagina__inhoud ol { counter-reset: oz-inhoud; display: grid; gap: .1rem; }
.tekstpagina__inhoud li { counter-increment: oz-inhoud; }
.tekstpagina__inhoud a {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: .4rem; align-items: baseline;
  padding: .4rem 0; font-size: .92rem; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--inkt-lijn);
}
.tekstpagina__inhoud li:last-child a { border-bottom: 0; }
.tekstpagina__inhoud a::before { content: counter(oz-inhoud, decimal-leading-zero); color: var(--zand-donker); font-size: .78rem; font-weight: 700; }
.tekstpagina__inhoud a:hover { color: var(--donker); }
.tekstpagina__inhoud a:hover::before { color: var(--magenta); }
.tekstpagina__datum { font-size: .82rem; color: var(--inkt-zacht); }

.voet__rechten { display: flex; flex-wrap: wrap; gap: .35rem .9rem; justify-content: center; }

/* ---------------------------------------------------------------
   Het vliegtuigje als aanwijzer
   Dezelfde tekening als op de startpagina, alleen de vlieger zelf,
   zonder het stippenspoor. Gespiegeld: met de neus linksboven valt
   het lijf naar rechtsonder weg, net als elke gewone cursor, en dus
   uit de weg van een rechterhand. De neus is het klikpunt.

   HARDE GRENS, hier duur geleerd op 16 september 2026: een
   cursorplaatje moet binnen 32 bij 32 px blijven. Daarboven doet elke
   browser iets anders. Safari liet bij 82 bij 75 helemaal niets zien
   en Chrome sneed het plaatje af. Er is dus geen ruimte voor een
   schaduw eronder en ook niet voor een tweede, grotere versie op de
   kaarten: 30 bij 23 is wat er past. Wie dit ooit wil uitbreiden,
   meet eerst in Safari en Chrome, niet alleen in een test.

   Twee plaatjes en verder niets: geen javascript, geen extra laag
   over de pagina, dus het kan de site niet trager of haperig maken.
   Waar het beeld niet laadt of niet ondersteund wordt, staat er de
   gewone wijzende hand. Alleen op muisapparaten: op telefoon en
   tablet wordt er niets opgehaald.
   --------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  a[href], button, summary, [role="button"], label[for],
  input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"] {
    cursor: url("../img/cursor/vlieger.png") 2 2, pointer;
    cursor: -webkit-image-set(url("../img/cursor/vlieger.png") 1x, url("../img/cursor/vlieger@2x.png") 2x) 2 2, pointer;
    cursor: image-set(url("../img/cursor/vlieger.png") 1x, url("../img/cursor/vlieger@2x.png") 2x) 2 2, pointer;
  }
  /* Invoervelden houden hun eigen aanwijzer: daar moet je kunnen typen en selecteren. */
  input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
  textarea, select { cursor: auto; }
}