/* =============================================================================
   D.M. SOCIAL & MARKETING — GEDEELD THEMA
   -----------------------------------------------------------------------------
   Dit bestand is de basis van élke pagina van de site. Bouw je een subpagina
   (diensten, evenementen, juridisch), dan neem je alleen dit bestand + site.js
   over en schrijf je paginaspecifieke stijl inline in die pagina.

   Sfeer: een warm plakboek. Papier, polaroids met tape, handgeschreven labels,
   sticky notes in roze en lichtgeel. Strak waar het moet (formulieren, reviews),
   speels waar het mag (foto's, notities).

   ── ZO GEBRUIK JE HET ────────────────────────────────────────────────────────
   In de <head> van elke pagina (de lettertypes staan op onze eigen server,
   in /assets/fonts; zie blok 0 hieronder):
     <link rel="preload" href="/assets/fonts/plus-jakarta-sans-latin.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="/assets/fonts/caveat-latin.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="stylesheet" href="/assets/site.css">
   Onderaan de <body>, vóór eventuele paginascripts:
     <script src="/assets/site.js"></script>

   ── ID'S EN DATA-ATTRIBUTEN DIE site.js VULT ─────────────────────────────────
   #jaartal ............. krijgt het huidige jaartal (footer).
   #dm-contact-email / #dm-contact-phone / #dm-contact-instagram
                          krijgen de tekst uit het beheer (tabel site_content).
   [data-dm-mail] ....... href wordt mailto: + het e-mailadres uit het beheer.
   [data-dm-tel] ........ href wordt tel: + het telefoonnummer uit het beheer.
   [data-dm-instagram] .. href wordt de Instagram-URL uit het beheer.
   [data-whatsapp="…"] .. href wordt een wa.me-link met die tekst voorgevuld.
   #siteNav #navBurger #siteMenu   navigatie en mobiel menu.
   #cursorPunt #cursorRing #cursorLabel   eigen cursor.
   #cookieBanner #cookieAccept #cookieDecline   cookiemelding.

   ── COMPONENTEN (naam · waarvoor) ────────────────────────────────────────────
   .wrap ................ paginabreedte + gutters. Zet dit om elke sectie-inhoud.
   .hand ................ handschriftregel (Caveat). Voor labels en terzijdes.
   .kop-accent .......... één woord in een kop in roze. Zelfde lettertype, alleen
                          kleur. Gebruik precies één keer per kop.
   .sec-head ............ sectiekop: .hand-label (handgeschreven label) + h2 + p.
   .btn ................. knop. Varianten: .btn-primair (roze vlak, witte tekst),
                          .btn-omlijnd (potloodrand), .btn-wa (WhatsApp-groen),
                          .btn-klein (compacter).
   .polaroid ............ foto met witte rand en ruimte voor <figcaption>.
                          Stel in met --w (breedte), --r (rotatie), --ar (ratio),
                          --x/--y (absolute plaatsing binnen een collage).
   .tape ................ stukje plakband. Plaatsing: .tape-tl .tape-tr .tape-top.
   .sticky-note ......... geel/roze briefje. Varianten: .note-geel, .note-geel-diep,
                          .note-roze, .note-roze-licht. Rotatie via --r.
   .sticker ............. ronde roze sticker met handschrift (.sticker-omlijnd
                          voor de witte variant).
   .notitie ............. handgeschreven terzijde in roze, mag een .teken-pijl
                          (SVG) bevatten die zichzelf tekent.
   .site-nav ............ sticky navigatie met logo, links, WhatsApp-knop, burger.
   .site-menu ........... schermvullend mobiel menu (focus-trap + Escape in JS).
   .site-footer ......... donkere footer: merk, kolommen, socials, "tot snel".
   .veld / .form-status . formuliervelden met focus- en foutstijl + statusregel.
   .cookie-banner ....... cookiemelding rechtsonder (gedrag staat in site.js).
   .cursor-punt/.cursor-ring  eigen cursor; automatisch uit op touch.
   .reveal / .drop ...... verschijn-animaties (IntersectionObserver in site.js
                          zet .is-in). .reveal schuift op via `translate`, dus
                          een eigen transform (rotatie) blijft staan.
                          .drop laat foto's op hun plek vallen.
   .opkomst / .opkomst-val  hetzelfde, maar als CSS-animatie bij de eerste
                          weergave: voor de hero bovenaan een pagina, zodat
                          de titel niet op JavaScript hoeft te wachten.
   .draw ................ SVG-pad dat zichzelf tekent zodra het in beeld komt.
   .cv .................. content-visibility voor zware secties onder de vouw.

   Alles respecteert prefers-reduced-motion en werkt zonder JavaScript.
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────
   0. LETTERTYPES — op onze eigen server
   ─────────────────────────────────────────────────────────────
   Plus Jakarta Sans (tekst en koppen) en Caveat (handschrift), beide
   variabel en onder de Open Font License. Zelf gehost in plaats van via
   Google Fonts: dat scheelt twee extra verbindingen voordat de pagina iets
   kan tonen (op mobiel ruim 0,8 s) en er gaat geen bezoekersdata naar
   Google. Per lettertype twee bestanden: 'latin' (alles wat Nederlands nodig
   heeft) en 'latin-ext' (overige accenten). Dankzij unicode-range haalt de
   browser het tweede bestand alleen op als zo'n teken echt op de pagina staat.

   Tot het echte lettertype binnen is, toont de browser een vervanger met
   precies dezelfde afmetingen (size-adjust en *-override, berekend uit de
   fontbestanden zelf). Zo springt er niets als het lettertype wisselt.
   Nieuwe fontbestanden? Geef ze een nieuwe naam: /assets/fonts/ wordt een
   jaar in de browser bewaard (zie vercel.json). */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/caveat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/caveat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Vervangers met dezelfde maten: Arial (Mac, Windows, en Liberation Sans op
   Linux), Roboto (Android) en Bradley Hand (Mac en iPhone) */
@font-face {
  font-family: 'Plus Jakarta Sans Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans');
  size-adjust: 104.69%;
  ascent-override: 99.15%;
  descent-override: 21.20%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: 'Plus Jakarta Sans Fallback Android';
  src: local('Roboto'), local('Roboto-Regular');
  size-adjust: 105.49%;
  ascent-override: 98.40%;
  descent-override: 21.05%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: 'Caveat Fallback';
  src: local('Bradley Hand Bold'), local('BradleyHandITCTT-Bold');
  size-adjust: 77.24%;
  ascent-override: 124.28%;
  descent-override: 38.84%;
  line-gap-override: 0.00%;
}

/* ─────────────────────────────────────────────────────────────
   1. TOKENS — kleuren, fonts, ritme
   Roze is de merkkleur. #EC4899 voor accenten en tape, #BE185D
   voor alles waar tekst op moet (5,6:1 op papier, 6,0:1 met wit).
   ───────────────────────────────────────────────────────────── */
:root {
  /* Papier en inkt */
  --paper:        #FAF6F1;   /* warm papierwit, hoofdachtergrond */
  --paper-2:      #F3EBE0;   /* iets donkerder karton, voor blokken */
  --card:         #FFFDFA;   /* polaroid- en kaartwit */
  --ink:          #1F1A1B;   /* koppen en lopende tekst */
  --ink-2:        #4A4144;   /* zachtere lopende tekst */
  --muted:        #6E6366;   /* bijschriften, ≈5,3:1 op papier */
  --line:         rgba(31, 26, 27, .14);

  /* Roze: het merk */
  --roze:         #EC4899;   /* accentvlakken, stickers, sterren */
  --roze-diep:    #BE185D;   /* gevulde knoppen + roze tekst (AA) */
  --roze-donker:  #9D174D;   /* hover van gevulde knoppen */
  --roze-zacht:   #FBD3E4;   /* selectie, zachte vlakken */
  --roze-waas:    #FFF0F7;   /* heel lichte roze achtergrond */
  --tape:         rgba(236, 72, 153, .30);

  /* Sticky notes: alleen roze en lichtgeel */
  --note-geel:        #FFF6CC;
  --note-geel-diep:   #FFEFAE;
  --note-roze:        #FFD9E8;
  --note-roze-licht:  #FFE9F2;

  /* Donker (footer) */
  --donker:       #221C1E;
  --op-donker:    #F4EDE6;

  /* Signaalkleuren voor formulieren */
  --fout:         #C0243C;
  --goed:         #157A54;

  /* Typografie */
  --font-sans: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", "Plus Jakarta Sans Fallback Android", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", "Caveat Fallback", "Bradley Hand", "Segoe Print", cursive;

  /* Beweging */
  --ease:        cubic-bezier(.2, .7, .2, 1);
  --ease-veer:   cubic-bezier(.34, 1.4, .64, 1);
  --ease-gordijn: cubic-bezier(.76, 0, .24, 1);

  /* Schaduwen */
  --schaduw-foto: 0 1px 2px rgba(31,26,27,.08), 0 12px 28px -10px rgba(31,26,27,.35);
  --schaduw-note: 0 1px 1px rgba(31,26,27,.06), 0 10px 22px -12px rgba(31,26,27,.3);

  /* Ritme */
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --max:    1440px;
  --nav-h:  4.5rem;
  --sectie: clamp(3rem, 7vw, 6rem);
}


/* ─────────────────────────────────────────────────────────────
   2. BASISRESET
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}
html.heeft-cursor,
html.heeft-cursor body,
html.heeft-cursor a,
html.heeft-cursor button { cursor: none; }

body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video, svg, canvas { display: block; max-width: 100%; height: auto; }
/* <picture> kiest alleen het bestand (AVIF/WebP); de lay-out gaat alsof de <img> er direct staat.
   De <source>-regels mogen dan geen vakje worden: in een flex- of grid-ouder telt de gap anders mee. */
picture { display: contents; }
picture > source { display: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; }
ul, ol { list-style: none; }
::selection { background: var(--roze-zacht); color: var(--ink); }
:focus-visible { outline: 3px solid var(--roze-diep); outline-offset: 4px; border-radius: 4px; }

/* Papiertextuur: één vaste ruislaag over de hele pagina, heel licht */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 9990;
  pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
}

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.cv { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.visueel-verborgen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 10050;
  padding: .6rem 1rem; background: var(--ink); color: #fff;
  border-radius: .5rem; font-weight: 600; text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: .5rem; }


/* ─────────────────────────────────────────────────────────────
   3. TYPOGRAFIE
   Koppen krijgen één woord in roze via .kop-accent. Zelfde
   lettertype, alleen een andere kleur — consequent op elke kop.
   ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 7.2vw, 5.4rem); letter-spacing: -.03em; line-height: 1; }
h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
p  { text-wrap: pretty; }

.kop-accent { color: var(--roze-diep); }
.hand { font-family: var(--font-hand); font-weight: 500; }

/* Sectiekop: handgeschreven label, kop, korte uitleg */
.sec-head { display: grid; gap: .35rem; margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 40rem; }
.sec-head .hand-label { font-family: var(--font-hand); font-size: 1.5rem; line-height: 1; color: var(--roze-diep); }
.sec-head p { margin-top: .5rem; color: var(--ink-2); }

/* Handgeschreven terzijde, eventueel met een pijltje ernaast */
.notitie { font-family: var(--font-hand); font-size: 1.35rem; line-height: 1.15; color: var(--roze-diep); }
.notitie svg { width: 4.5rem; height: auto; overflow: visible; }
.notitie svg path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Getekend pad: pathLength="1" op het <path>, dan werkt dasharray 1 altijd */
.draw path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease) .25s; }
.draw.is-in path { stroke-dashoffset: 0; }


/* ─────────────────────────────────────────────────────────────
   4. KNOPPEN
   ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.35rem; border-radius: 999px;
  font-weight: 700; font-size: 1rem; line-height: 1; text-decoration: none;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .25s, color .25s;
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn-klein { padding: .65rem 1.05rem; font-size: .9rem; }

.btn-primair { background: var(--roze-diep); color: #fff; box-shadow: 0 8px 20px -8px rgba(190,24,93,.55); }
.btn-primair:hover, .btn-primair:focus-visible { background: var(--roze-donker); transform: translateY(-2px) rotate(-1deg); }

.btn-omlijnd { background: var(--card); color: var(--ink); border: 2px solid var(--ink); }
.btn-omlijnd:hover, .btn-omlijnd:focus-visible { transform: translateY(-2px) rotate(1deg); box-shadow: var(--schaduw-note); }

/* WhatsApp-groen, donker genoeg voor witte tekst (5,4:1) */
.btn-wa { background: #0E7A3F; color: #fff; box-shadow: 0 8px 20px -8px rgba(14,122,63,.55); }
.btn-wa:hover, .btn-wa:focus-visible { background: #0A5C2F; transform: translateY(-2px); }

.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

/* Ronde bedieningsknop (pijltjes bij carrousels en fotorolletjes) */
.ctl {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: 50%; border: 2px solid var(--ink); background: var(--card); cursor: pointer;
  transition: transform .3s var(--ease-veer), background-color .2s, color .2s;
}
.ctl svg { width: 1.2rem; height: 1.2rem; }
.ctl:hover, .ctl:focus-visible { background: var(--ink); color: #fff; transform: rotate(-6deg) scale(1.06); }


/* ─────────────────────────────────────────────────────────────
   5. SCRAPBOOK — tape, polaroids, sticky notes, stickers
   ───────────────────────────────────────────────────────────── */

/* Tape: halftransparant roze reepje met gekartelde randjes */
.tape {
  position: absolute; width: 5.5rem; height: 1.6rem;
  background: var(--tape); box-shadow: 0 1px 2px rgba(31,26,27,.08);
  pointer-events: none;
}
.tape::before, .tape::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: .35rem;
  background: repeating-linear-gradient(180deg, transparent 0 .18rem, rgba(250,246,241,.75) .18rem .32rem);
}
.tape::before { left: 0; }
.tape::after  { right: 0; }
.tape-tl  { left: -1.6rem; top: -.7rem; transform: rotate(-38deg); }
.tape-tr  { right: -1.6rem; top: -.7rem; transform: rotate(38deg); }
.tape-top { left: 50%; top: -.8rem; transform: translateX(-50%) rotate(-2deg); }

/* Polaroid: witte rand, dikkere onderrand voor het handgeschreven bijschrift.
   In een collage absoluut plaatsen met --x/--y; los in de flow werkt ook
   (zet dan .polaroid-vast erbij). */
.polaroid {
  position: absolute;
  background: var(--card); padding: .7rem .7rem 2.6rem;
  box-shadow: var(--schaduw-foto);
  width: var(--w, 14rem);
  left: var(--x, 0); top: var(--y, 0);
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(var(--r, 0deg));
  transition: transform .7s var(--ease), box-shadow .3s;
  touch-action: pan-y;   /* verticaal scrollen blijft werken bij slepen */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.polaroid-vast { position: relative; left: auto; top: auto; width: auto; }
.polaroid img { width: 100%; aspect-ratio: var(--ar, 4 / 5); object-fit: cover; background: var(--paper-2); }
.polaroid figcaption {
  position: absolute; left: .9rem; right: .9rem; bottom: .55rem;
  font-family: var(--font-hand); font-size: clamp(.95rem, calc(var(--w, 14rem) * .08), 1.25rem);
  line-height: 1.1; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.polaroid.wordt-gesleept { transition: none; box-shadow: 0 2px 4px rgba(31,26,27,.1), 0 26px 40px -14px rgba(31,26,27,.45); z-index: 30 !important; }
.polaroid.veert-terug { transition: transform .8s var(--ease-veer); }

/* Sticky note: geel of roze briefje met omgekrulde hoek */
.sticky-note {
  position: relative; display: flex; flex-direction: column;
  padding: 2rem 1.6rem 1.7rem;
  background: var(--tint, var(--note-geel)); color: var(--ink);
  box-shadow: var(--schaduw-note);
  transform: rotate(var(--r, 0deg));
  transition: transform .4s var(--ease-veer), box-shadow .3s;
}
.sticky-note::after {
  content: ''; position: absolute; right: 0; bottom: 0; width: 2.2rem; height: 2.2rem;
  background: linear-gradient(135deg, transparent 50%, rgba(31,26,27,.08) 50%, rgba(31,26,27,.03));
}
.sticky-note:hover, .sticky-note:focus-within {
  transform: rotate(0deg) translateY(-6px) scale(1.02);
  box-shadow: 0 2px 3px rgba(31,26,27,.06), 0 24px 34px -16px rgba(31,26,27,.4);
  z-index: 2;
}
.note-geel       { --tint: var(--note-geel); }
.note-geel-diep  { --tint: var(--note-geel-diep); }
.note-roze       { --tint: var(--note-roze); }
.note-roze-licht { --tint: var(--note-roze-licht); }

/* Ronde sticker met handschrift. Diep roze, zodat de witte tekst leesbaar blijft. */
.sticker {
  position: absolute; display: grid; place-items: center; text-align: center;
  width: 6.25rem; aspect-ratio: 1; border-radius: 50%; padding: .5rem;
  background: var(--roze-diep); color: #fff;
  font-family: var(--font-hand); font-size: 1.2rem; font-weight: 700; line-height: 1.05;
  box-shadow: inset 0 0 0 .3rem var(--paper), 0 8px 18px -8px rgba(190,24,93,.55);
  transform: rotate(var(--r, -8deg));
  transition: transform .45s var(--ease-veer);
}
.sticker:hover { transform: rotate(calc(var(--r, -8deg) + 12deg)) scale(1.06); }
.sticker-omlijnd {
  background: var(--card); color: var(--ink);
  box-shadow: inset 0 0 0 .3rem var(--paper), inset 0 0 0 .42rem var(--ink), 0 8px 18px -8px rgba(31,26,27,.35);
}


/* ─────────────────────────────────────────────────────────────
   6. NAVIGATIE
   ───────────────────────────────────────────────────────────── */
.site-nav {
  position: sticky; top: 0; z-index: 1000; height: var(--nav-h);
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s, border-color .3s, background-color .3s;
}
@supports (backdrop-filter: blur(1px)) {
  .site-nav { backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }
}
.site-nav.is-vast { border-color: var(--line); box-shadow: 0 10px 30px -22px rgba(31,26,27,.4); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 100%; }

.merk { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.merk img { height: 2.35rem; width: auto; aspect-ratio: 153 / 96; }
.merk-sub { font-family: var(--font-hand); font-size: 1.15rem; line-height: 1; color: var(--roze-diep); margin-top: .2rem; }

.nav-links { display: none; gap: 1.6rem; }
.nav-links a { position: relative; padding: .25rem 0; font-weight: 600; font-size: .95rem; text-decoration: none; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.15rem; height: 2px;
  background: var(--roze-diep); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { display: none; }

.nav-burger {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: 50%; border: 2px solid var(--ink); background: var(--card); cursor: pointer;
}
.nav-burger span { display: block; position: relative; width: 1.15rem; height: 2px; background: var(--ink); border-radius: 2px; transition: background-color .2s; }
.nav-burger span::before, .nav-burger span::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.nav-burger span::before { top: -6px; }
.nav-burger span::after  { top: 6px; }
.nav-burger[aria-expanded="true"] span { background: transparent; }
.nav-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; padding: .7rem 1.15rem; font-size: .9rem; }
  .nav-burger { display: none; }
}

/* Link "Portaal" (klantportaal): rustig, met slotje, vlak vóór "App me even".
   Pas vanaf 1080 px: smaller breken de menulinks af (gemeten: vanaf 1018 px
   past het, plus ruimte voor een schuifbalk). Mobiel staat hij in het menu,
   en altijd in de footer. De twee auto-marges houden het menu midden tussen
   logo en knoppen. */
.nav-portaal { display: none; }
@media (min-width: 1080px) {
  .nav-portaal { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; font-weight: 600; font-size: .9rem; color: var(--ink-2); text-decoration: none; }
  .nav-inner > nav:has(+ .nav-portaal) { margin-left: auto; }
}

/* Mobiel menu: vel papier dat over de pagina schuift */
.site-menu {
  position: fixed; inset: 0; z-index: 990;
  background: var(--paper-2);
  display: grid; align-content: center; justify-items: start;
  padding: 0 var(--gutter);
  transform: translateY(-102%); visibility: hidden;
  transition: transform .5s var(--ease), visibility .5s;
  box-shadow: 0 20px 50px -20px rgba(31,26,27,.5);
}
.site-menu.is-open { transform: none; visibility: visible; }
.site-menu ul { display: grid; gap: .4rem; }
.site-menu a {
  display: inline-block; font-family: var(--font-hand);
  font-size: clamp(2.4rem, 9vw, 3.6rem); line-height: 1.05;
  text-decoration: none; color: var(--ink); transform: rotate(-1deg);
}
.site-menu a:hover, .site-menu a:focus-visible { color: var(--roze-diep); }
.menu-foot { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
/* De tape hangt linksboven, de sluitknop rechtsboven: ze bijten elkaar niet */
.menu-tape { position: absolute; top: 1.2rem; left: 2rem; width: 6rem; height: 1.6rem; background: var(--tape); transform: rotate(-8deg); }
.menu-sluit { position: absolute; top: 1rem; right: var(--gutter); }
body.menu-open { overflow: hidden; }
@media (min-width: 900px) { .site-menu { display: none; } }


/* ─────────────────────────────────────────────────────────────
   7. FOOTER
   ───────────────────────────────────────────────────────────── */
.site-footer {
  position: relative; padding: clamp(3rem, 6vw, 5rem) 0 2rem;
  background: var(--donker); color: var(--op-donker);
}
.site-footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1rem;
  background: repeating-linear-gradient(90deg, var(--paper) 0 1.2rem, transparent 1.2rem 1.5rem);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%); opacity: .9;
}
.footer-grid { display: grid; gap: 2.5rem; }
.footer-merk img { width: 8.5rem; height: auto; aspect-ratio: 153 / 96; }
.footer-merk p { margin-top: 1rem; max-width: 30rem; font-size: .975rem; color: #C9BFBA; }
.footer-merk .hand { display: inline-block; margin-top: .9rem; font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.05; color: #F9A8D4; transform: rotate(-2.5deg); }
/* Kolomkoppen als opgeplakte papieren labels */
.site-footer h2, .site-footer h3 {
  display: inline-block; margin-bottom: .9rem; padding: .25rem .7rem .3rem;
  font-family: var(--font-hand); font-size: 1.35rem; font-weight: 700; line-height: 1;
  letter-spacing: 0; color: var(--ink); background: var(--paper-2);
  transform: rotate(var(--lr, -1.5deg));
  box-shadow: 0 6px 14px -8px rgba(0,0,0,.7);
}
.site-footer ul { display: grid; gap: .4rem; }
.site-footer a { font-size: .95rem; color: #E8DFDA; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--roze); }
/* Socials als twee postzegeltjes */
.footer-socials { display: flex; gap: .9rem; margin-top: 1.4rem; }
.footer-socials a {
  position: relative; display: grid; place-items: center; width: 2.8rem; height: 2.8rem;
  background: var(--paper-2); color: var(--ink); border-radius: 2px;
  transform: rotate(var(--sr, -4deg));
  transition: background-color .2s, color .2s, transform .3s var(--ease-veer);
}
.footer-socials a::before {
  content: ''; position: absolute; inset: -.28rem; z-index: -1;
  background: radial-gradient(circle, transparent .2rem, var(--paper-2) .21rem) 0 0 / .56rem .56rem;
}
.footer-socials a:nth-child(2) { --sr: 5deg; }
.footer-socials a:hover, .footer-socials a:focus-visible { background: var(--roze-zacht); transform: rotate(0deg) scale(1.06); }
.footer-socials a:hover::before, .footer-socials a:focus-visible::before { background: radial-gradient(circle, transparent .2rem, var(--roze-zacht) .21rem) 0 0 / .56rem .56rem; }
.footer-socials svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.footer-onder {
  margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.5rem;
  font-size: .85rem; color: #A89E99;
}
.footer-grid > *:nth-child(3) h2 { --lr: 1.8deg; }
.footer-grid > *:nth-child(4) h2 { --lr: -.8deg; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; } }


/* ─────────────────────────────────────────────────────────────
   8. FORMULIEREN
   ───────────────────────────────────────────────────────────── */
.veld { display: grid; gap: .35rem; }
.veld > label { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.veld input, .veld textarea, .veld select {
  width: 100%; padding: .7rem .85rem;
  font: inherit; font-size: .975rem; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line); border-radius: .55rem;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.veld textarea { resize: vertical; min-height: 6rem; line-height: 1.5; }
.veld input::placeholder, .veld textarea::placeholder { color: #A69C9F; }
.veld input:hover, .veld textarea:hover { border-color: rgba(31,26,27,.28); }
.veld input:focus, .veld textarea:focus {
  outline: none; border-color: var(--roze-diep);
  box-shadow: 0 0 0 3px rgba(190,24,93,.16); background: #fff;
}
.veld input:user-invalid, .veld textarea:user-invalid { border-color: var(--fout); }
/* Honeypot: alleen bots vullen dit in */
.honeypot { position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; }

.form-status { margin-top: .9rem; font-size: .9375rem; line-height: 1.5; }
.form-status[hidden] { display: none; }
.form-status.is-goed { color: var(--goed); }
.form-status.is-fout { color: var(--fout); }


/* ─────────────────────────────────────────────────────────────
   9. COOKIE-BANNER
   ───────────────────────────────────────────────────────────── */
.cookie-banner {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 10010;
  display: none; width: min(24rem, calc(100vw - 2.5rem));
  padding: 1.25rem 1.4rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 1rem;
  box-shadow: var(--schaduw-foto);
}
.cookie-banner.is-zichtbaar { display: block; }
.cookie-banner h2 { font-size: 1.1rem; }
.cookie-banner p { margin-top: .5rem; font-size: .875rem; line-height: 1.5; color: var(--ink-2); }
.cookie-banner p a { color: var(--roze-diep); text-decoration: underline; text-underline-offset: .2em; }
.cookie-knoppen { display: flex; gap: .75rem; margin-top: 1rem; }
.cookie-knoppen .btn { flex: 1; padding: .6rem 1rem; font-size: .9rem; }
.cookie-weiger { background: var(--paper-2); color: var(--ink); }
.cookie-weiger:hover, .cookie-weiger:focus-visible { background: #E8DED2; }


/* ─────────────────────────────────────────────────────────────
   10. EIGEN CURSOR — punt + na-slepende ring (alleen met muis)
   ───────────────────────────────────────────────────────────── */
.cursor-punt, .cursor-ring {
  position: fixed; left: 0; top: 0; z-index: 10040;
  display: none; pointer-events: none; opacity: 0; will-change: transform;
}
.cursor-punt {
  width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--roze);
  transition: opacity .3s, width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease);
}
.cursor-ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 1.5px solid var(--roze); place-items: center;
  transition: opacity .3s, width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background-color .3s, border-color .3s;
}
.cursor-ring span { font-family: var(--font-hand); font-weight: 700; font-size: 1.05rem; color: #fff; opacity: 0; white-space: nowrap; transition: opacity .2s; }
html.heeft-cursor .cursor-punt, html.heeft-cursor .cursor-ring { display: grid; }
html.cursor-aan .cursor-punt, html.cursor-aan .cursor-ring { opacity: 1; }
.cursor-ring[data-stand="link"] { width: 22px; height: 22px; margin: -11px 0 0 -11px; background: var(--roze); border-color: var(--roze); }
.cursor-ring[data-stand="link"] span { opacity: 1; font-size: .85rem; line-height: 1; }
.cursor-ring[data-stand="sleep"], .cursor-ring[data-stand="kijk"] { width: 66px; height: 66px; margin: -33px 0 0 -33px; background: var(--roze); border-color: var(--roze); }
.cursor-ring[data-stand="sleep"] span, .cursor-ring[data-stand="kijk"] span { opacity: 1; }
html.cursor-in .cursor-punt { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }


/* ─────────────────────────────────────────────────────────────
   11. REVEAL — verschijnen zodra iets in beeld komt
   site.js zet .is-in via een IntersectionObserver.
   ───────────────────────────────────────────────────────────── */
/* Het opkomen loopt via de losse property `translate`, niet via `transform`.
   Zo blijft een eigen transform van het element zelf staan — een sticky note
   met transform: rotate(var(--r)) blijft dus scheef staan nadat hij verschenen
   is. Kent een browser `translate` niet, dan verschijnt het element alleen met
   een fade (opacity), zonder verschuiving. */
.js .reveal {
  opacity: 0; translate: 0 1.5rem;
  transition: opacity .6s var(--ease), translate .7s var(--ease);
  transition-delay: var(--delay, 0ms);
}
.js .reveal.is-in { opacity: 1; translate: none; }

/* Foto's vallen op hun plek; werkt samen met --dx/--dy/--r van .polaroid */
.js .drop {
  opacity: 0;
  transform: translate3d(var(--dx, 0px), calc(var(--dy, 0px) - 2.5rem), 0) rotate(calc(var(--r, 0deg) + 7deg));
  transition: opacity .55s var(--ease), transform .8s var(--ease-veer);
  transition-delay: var(--delay, 0ms);
}
.js .drop.is-in { opacity: 1; transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(var(--r, 0deg)); }

/* Boven de vouw (de hero van een subpagina): opkomen zonder op JavaScript te
   wachten. .reveal verschijnt pas als site.js geladen is en het element in
   beeld ziet; voor de titel en inleiding bovenaan is dat te laat, want dan
   wacht de belangrijkste tekst van de pagina op een script (op mobiel al
   gauw een halve seconde). Deze twee klassen starten een CSS-animatie bij
   de allereerste weergave, met dezelfde beweging als .reveal en .drop.
   'backwards' houdt het element alleen tijdens de vertraging in de
   beginstand; daarna geldt weer gewoon de eigen stijl (en dus bijvoorbeeld
   de draaiing van een polaroid). */
@keyframes opkomst { from { opacity: 0; translate: 0 1.5rem; } }
@keyframes opkomst-val {
  from { opacity: 0; transform: translate3d(var(--dx, 0px), calc(var(--dy, 0px) - 2.5rem), 0) rotate(calc(var(--r, 0deg) + 7deg)); }
}
.opkomst     { animation: opkomst .7s var(--ease) var(--delay, 0ms) backwards; }
.opkomst-val { animation: opkomst-val .8s var(--ease-veer) var(--delay, 0ms) backwards; }


/* ─────────────────────────────────────────────────────────────
   12. VOORKEUREN VAN DE BEZOEKER
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; translate: none; }
  .js .drop { opacity: 1; transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(var(--r, 0deg)); }
  .opkomst, .opkomst-val { animation: none; }
  .draw path { stroke-dashoffset: 0; }
  .sticker:hover, .sticky-note:hover { transform: rotate(var(--r, 0deg)); }
}

/* Geen eigen cursor op touch: het systeempijltje blijft */
@media (hover: none), (pointer: coarse) {
  html.heeft-cursor, html.heeft-cursor body, html.heeft-cursor a, html.heeft-cursor button { cursor: auto; }
  .cursor-punt, .cursor-ring { display: none !important; }
}