/* ==========================================================================
   EnjoyToCarry — demo 2: Bladstil
   Een rustig tijdschriftartikel. Cormorant-koppen, haarlijnen, kantlijn-
   typografie, geen fotohero. Signatuur: een doorlopende mintdraad van 1px
   in de kantlijn met een open cirkelknoop bij elke sectie.
   Palet en typografie komen letterlijk uit design/tokens.md, richting 2.
   ========================================================================== */


/* ------------------------------------------------------- lettertypen --
   Zelf gehost in plaats van via de Google Fonts CDN. Exact dezelfde woff2-
   bestanden, alleen van onze eigen server. Twee redenen:
   1. het IP-adres van elke bezoeker ging naar een derde partij (AVG)
   2. Cormorant kwam pas ná de eerste opmaak binnen, waarna de h1 opnieuw
      afbrak en de hele pagina eronder verschoof. Dat was de CLS van 0,20 in
      de band 720 tot 960 px. Met preload staat het lettertype er meteen.
   Variabele bestanden: 500, 600 en 700 delen per subset één bestand.      */
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/cormorant-garamond-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:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/cormorant-garamond-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:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/cormorant-garamond-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:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/cormorant-garamond-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:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/cormorant-garamond-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:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/cormorant-garamond-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:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/dm-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:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/dm-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:'DM Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/dm-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:'DM Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/dm-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:'DM Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/dm-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:'DM Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/dm-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;
}

:root{
  /* kleur */
  --bg:#FFFFFF;
  --surface:#F5F7F3;
  --primary:#6DDB96;          /* draad + markering, nooit tekst */
  --primary-ink:#14472F;      /* 10,65:1 op wit */
  --accent:#14472F;
  --text:#12171A;             /* 18,05:1 op wit */
  --muted:#5A635E;            /* 6,21:1 op wit */
  --border:#DDE3DC;
  --veldrand:#7D857F;         /* 3,80:1 op wit, WCAG 1.4.11 voor bedieningsranden */
  --fout:#9B2C1B;             /* 7,58:1 op wit, 6,9:1 op --surface; alleen foutmelding */
  --focus:#14472F;
  --mat:#F5F7F3;              /* mat onder de Tula-foto's */

  /* typografie */
  --font-head:'Cormorant Garamond',Garamond,'Times New Roman',serif;
  --font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --h1:clamp(2.5rem,7vw,4.4rem);
  --h2:clamp(1.9rem,4.5vw,2.9rem);
  --h3:1.0625rem;
  --lead:1.25rem;
  --body:1.0625rem;
  --small:.8125rem;
  --lh-head:1.05;
  --lh-body:1.8;
  --ls-head:-.02em;
  --ls-caps:.08em;

  /* ruimte en vorm */
  --measure:62ch;
  --wrap:1200px;
  --rail:88px;
  --section-y:clamp(64px,10vw,116px);
  --radius-card:0;
  --header-h:72px;
  --thread:1px;
  --ease:cubic-bezier(.16,1,.3,1);
  --snel:cubic-bezier(.2,.7,.3,1);   /* antwoord binnen 100ms */

  /* afgeleid: kantlijn en draadpositie per schermbreedte */
  --pad-l:20px;
  --pad-r:20px;
  --rail-x:20px;
  /* hoeveel beeld voorbij de kantlijn mag steken. De 18px aftrek is de
     ruimte voor de schuifbalk, die in 100vw wél meetelt en in de layout niet:
     zonder die aftrek ontstaat er horizontale scroll. */
  --bleed:0px;
}

@media (min-width:480px){
  :root{--pad-l:46px;--pad-r:24px;--rail-x:20px}
}
@media (min-width:1024px){
  :root{
    --pad-l:var(--rail);--pad-r:40px;--rail-x:44px;--header-h:72px;
    --bleed:clamp(0px,calc((100vw - var(--wrap)) / 2 - 18px),150px);
  }
}

/* --------------------------------------------------------------- basis -- */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h) + 12px);
}

body{
  margin:0;
  position:relative;
  background:var(--bg);
  color:var(--text);
  font:400 var(--body)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}

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

::selection{background:var(--primary);color:var(--text)}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
:focus:not(:focus-visible){outline:none}

.skip{
  position:absolute;left:8px;top:-64px;z-index:200;
  background:var(--primary-ink);color:#fff;text-decoration:none;
  padding:12px 18px;font-size:var(--small);letter-spacing:var(--ls-caps);
  text-transform:uppercase;transition:top .2s var(--ease);
}
.skip:focus{top:8px}

/* ------------------------------------------------------- typografie ----- */
h1,h2,h3,h4{margin:0 0 .5em}

h1{
  font:600 var(--h1)/var(--lh-head) var(--font-head);
  letter-spacing:var(--ls-head);
  margin-bottom:.32em;
}
h1.h1--lang{font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.08}

h2{
  font:600 var(--h2)/1.12 var(--font-head);
  letter-spacing:-.015em;
}

h3{
  font:700 var(--h3)/1.35 var(--font-body);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  margin-bottom:1em;
}

p{margin:0 0 1.15em;max-width:var(--measure)}
p:last-child{margin-bottom:0}

.lead{font-size:var(--lead);line-height:1.65;max-width:54ch}
.klein{
  font:500 var(--small)/1.5 var(--font-body);
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.gedempt{color:var(--muted)}

/* markeerstift, maximaal twee keer per pagina */
.markeer{
  background:linear-gradient(180deg,transparent 62%,var(--primary) 62%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:0 .08em;
}

/* links in lopende tekst: blijvende onderstreping plus een lijn die
   bij hover van links uit dichtloopt */
.prose a,.tekstlink{
  color:var(--primary-ink);
  text-decoration:none;
  background-image:linear-gradient(var(--primary-ink),var(--primary-ink)),
                   linear-gradient(var(--muted),var(--muted));
  background-size:0 1px,100% 1px;
  background-position:0 100%,0 100%;
  background-repeat:no-repeat;
  transition:background-size .26s var(--ease);
}
.prose a:hover,.prose a:focus-visible,
.tekstlink:hover,.tekstlink:focus-visible{background-size:100% 1px,100% 1px}

/* ------------------------------------------------------------ raster ---- */
.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding-left:var(--pad-l);
  padding-right:var(--pad-r);
  position:relative;
}

.raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.raster>*{grid-column:1/-1;min-width:0}

.blok{padding:var(--section-y) 0;position:relative}
.blok--vlak{background:var(--surface)}
.blok--strak{padding-top:clamp(40px,6vw,64px)}

.kol{grid-column:1/-1}

@media (min-width:1024px){
  .kol-tekst{grid-column:3/10}
  .kol-smal{grid-column:3/9}
  .kol-links{grid-column:1/7}
  .kol-rechts{grid-column:7/-1}
  .kol-breed{grid-column:1/-1}
  /* beeld breekt uit het raster naar rechts, tot voorbij de kantlijn */
  .uitbreek{margin-right:calc(-1 * (var(--pad-r) + var(--bleed)))}
}

/* ------------------------------------------------------------- draad ---- */
/* z-index 1: secties zijn zelf position:relative en zouden de draad anders
   onder hun achtergrondvlak begraven. De knoop gaat er met z-index 2 weer
   overheen, zodat de lijn niet dwars door het cirkeltje loopt. */
.draadbaan{
  position:absolute;
  top:var(--header-h);left:0;right:0;bottom:0;
  pointer-events:none;z-index:1;
}
.draadbaan .wrap{height:100%}
.draad{
  position:absolute;
  left:calc(var(--rail-x) - .5px);
  top:0;bottom:0;width:1px;
}
.draad svg{width:1px;height:100%}
.draad .spoor{stroke:var(--primary);stroke-width:1;opacity:.28}
.draad .vul{stroke:var(--primary);stroke-width:1}

.knoop,.nr{position:absolute;pointer-events:none}
.knoop{
  left:calc(var(--rail-x) - 5.5px);
  top:9px;
  width:11px;height:11px;border-radius:50%;
  border:1.5px solid var(--primary);
  background:var(--bg);
  z-index:2;
}
.nr{
  left:calc(var(--rail-x) + 9px);   /* rechts van de draad, nooit eroverheen */
  top:30px;
  font:500 .75rem/1 var(--font-body);
  color:var(--muted);
  letter-spacing:.04em;
  z-index:2;
}
@media (max-width:479px){
  .draadbaan,.knoop,.nr{display:none}
}

/* ------------------------------------------------------------ header ---- */
.kop{
  position:sticky;top:0;z-index:60;
  background:var(--bg);
  height:var(--header-h);
  border-bottom:1px solid var(--border);
  transition:border-color .35s var(--ease);
}
/* De mintlijn onder de kop wordt getekend in plaats van omgekleurd: dezelfde
   eindstand, maar je ziet hem van links naar rechts lopen. Zie de
   interactielaag onderaan dit bestand voor .kop::after. */

.kop__in{
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--wrap);margin:0 auto;
  padding-left:var(--pad-l);padding-right:var(--pad-r);
}
@media (max-width:1023px){
  .kop__in{padding-left:16px;padding-right:8px}
}

.merk{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  text-decoration:none;color:var(--text)}
.merk img{width:40px;height:40px}
.merk__naam{
  font:600 1.25rem/1 var(--font-head);letter-spacing:-.01em;
}
@media (max-width:479px){.merk__naam{font-size:1.1rem}}

.hoofdnav{display:none}
@media (min-width:1024px){
  .hoofdnav{display:block}
  .hoofdnav ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
  .hoofdnav a{
    display:inline-flex;align-items:center;min-height:44px;
    font:500 .875rem/1 var(--font-body);letter-spacing:.06em;
    color:var(--text);text-decoration:none;
    border-bottom:1px solid transparent;
    transition:border-color .22s var(--ease),color .22s var(--ease);
  }
  .hoofdnav a:hover{border-bottom-color:var(--primary)}
  .hoofdnav a[aria-current="page"]{color:var(--primary-ink);border-bottom-color:var(--primary-ink)}
}

.kop__contact{display:none}
@media (min-width:1024px){
  .kop__contact{
    display:inline-flex;align-items:center;min-height:44px;
    font:500 .875rem/1 var(--font-body);letter-spacing:.06em;
    color:var(--primary-ink);text-decoration:none;
    background-image:linear-gradient(var(--primary),var(--primary));
    background-size:100% 2px;background-position:0 calc(100% - 10px);background-repeat:no-repeat;
    transition:background-size .26s var(--ease);
  }
  .kop__contact:hover,.kop__contact:focus-visible{background-size:100% 6px}
}

/* groepsouder Draagconsult */
.heeft-lade{position:static}
.lade-knop{
  appearance:none;background:none;border:0;padding:0 0 0 6px;margin:0;
  width:28px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);cursor:pointer;
}
.lade-knop svg{width:11px;height:7px;transition:transform .25s var(--ease)}
.lade-knop[aria-expanded="true"] svg{transform:rotate(180deg)}

.lade{
  position:absolute;left:0;right:0;top:100%;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  box-shadow:0 14px 24px -22px rgba(18,23,26,.4);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s .22s;
}
.lade[data-open="true"]{opacity:1;visibility:visible;transform:none;transition-delay:0s}
@media (min-width:1024px){
  .heeft-lade:hover .lade,.heeft-lade:focus-within .lade{
    opacity:1;visibility:visible;transform:none;transition-delay:0s;
  }
}
.lade__in{
  max-width:var(--wrap);margin:0 auto;
  padding:26px var(--pad-r) 30px var(--pad-l);
  display:grid;gap:0 24px;grid-template-columns:repeat(3,minmax(0,1fr));
}
.lade__item{
  display:block;padding:14px 0 0;
  border-top:1px solid var(--primary);
  font:600 1.375rem/1.2 var(--font-head);
  color:var(--text);text-decoration:none;min-height:44px;
}
.lade__item:hover,.lade__item:focus-visible{color:var(--primary-ink)}

/* hamburger */
.burger{
  appearance:none;background:none;border:0;
  width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text);
}
@media (min-width:1024px){.burger{display:none}}
.burger span{display:block;width:22px;height:1px;background:currentColor;position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:22px;height:1px;background:currentColor;
  transition:transform .3s var(--ease);
}
.burger span::before{top:-7px}
.burger span::after{top:7px}

/* mobiel paneel */
.sluier{
  position:fixed;inset:0;z-index:65;background:rgba(18,23,26,.34);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.sluier.aan{opacity:1;pointer-events:auto}

.paneel{
  position:fixed;left:0;right:0;top:0;z-index:70;
  background:var(--bg);
  max-height:100vh;max-height:100dvh;overflow-y:auto;
  transform:translateY(-101%);
  visibility:hidden;
  transition:transform .42s var(--ease),visibility 0s .42s;
  padding-bottom:32px;
}
.paneel.open{transform:none;visibility:visible;transition-delay:0s,0s}
@media (min-width:1024px){.paneel,.sluier{display:none}}

.paneel__kop{
  height:var(--header-h);display:flex;align-items:center;justify-content:space-between;
  padding:0 8px 0 16px;border-bottom:1px solid var(--border);
}
.sluit{
  appearance:none;background:none;border:0;width:48px;height:48px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);
}
.sluit svg{width:18px;height:18px}

.paneel ul{list-style:none;margin:0;padding:0 16px}
.paneel li{border-bottom:1px solid var(--border)}
.paneel__rij{display:flex;align-items:center;justify-content:space-between;gap:8px}
.paneel__link{
  display:flex;align-items:center;flex:1 1 auto;
  min-height:56px;padding:8px 0;
  font:600 1.75rem/1.15 var(--font-head);letter-spacing:-.01em;
  color:var(--text);text-decoration:none;
}
.paneel__link[aria-current="page"]{color:var(--primary-ink)}
.paneel__link[aria-current="page"]::before{
  content:"";width:16px;height:1px;background:var(--primary);margin-right:10px;flex:none;
}
.paneel__toggle{
  appearance:none;background:none;border:0;width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);
}
.paneel__toggle svg{width:12px;height:8px;transition:transform .25s var(--ease)}
.paneel__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.paneel__sub{display:none;padding:0 0 12px 0;margin:0;list-style:none}
.paneel__sub.open{display:block}
.paneel__sub li{border-bottom:0}
.paneel__sub a{
  display:flex;align-items:center;min-height:48px;
  font:400 1.0625rem/1.3 var(--font-body);color:var(--muted);text-decoration:none;
  padding-left:16px;border-left:1px solid var(--primary);
}
.paneel__sub a:hover,.paneel__sub a:focus-visible{color:var(--primary-ink)}
.paneel__contact{
  display:flex;align-items:center;justify-content:center;
  margin:24px 16px 0;min-height:56px;
  background:var(--primary-ink);color:#fff;text-decoration:none;
  font:500 .9375rem/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;
}

/* ------------------------------------------------------------ opening --- */
.opening{padding-top:clamp(36px,6vw,68px)}
.opening__type{
  display:flex;align-items:flex-end;
  padding-bottom:clamp(24px,4vw,40px);
}
/* alleen de homepage krijgt de volle typografische val */
.opening--groot .opening__type{min-height:calc(42vh - var(--header-h))}
.opening__type h1{max-width:16ch;margin-bottom:0}
.opening__onder{row-gap:clamp(28px,5vw,44px);align-items:start}
@media (min-width:1024px){
  .opening__tekst{grid-column:1/7}
  .opening__beeld{grid-column:8/-1;margin-right:calc(-1 * (var(--pad-r) + var(--bleed)))}
}
.opening__beeld img{width:100%;height:auto}

/* ----------------------------------------------------- diensten-lijst --- */
.diensten{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.diensten li{border-bottom:1px solid var(--border)}
/* Vier kinderen (nummer, label, rondje, pijl) horen in vier kolommen. Met de
   drie van hiervoor viel de pijl op een tweede rij onder het nummer: op een
   telefoon stond er onder elke dienst een losse pijl in het niets. */
.dienst{
  display:grid;grid-template-columns:38px 1fr 56px 16px;align-items:center;gap:12px;
  min-height:96px;padding:18px 0;text-decoration:none;color:var(--text);
  transition:background-color .3s var(--ease);
}
.dienst:hover,.dienst:focus-visible{background:var(--surface)}
.dienst__nr{
  font:500 .75rem/1 var(--font-body);color:var(--muted);letter-spacing:.06em;
}
.dienst__label{
  font:600 clamp(1.5rem,3.4vw,2.15rem)/1.15 var(--font-head);letter-spacing:-.015em;
}
.dienst__beeld{
  width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--surface);
  justify-self:end;
}
.dienst__beeld img{width:100%;height:100%;object-fit:cover}
.dienst__pijl{width:14px;height:10px;color:var(--primary-ink);justify-self:end;
  transition:transform .25s var(--ease)}
.dienst:hover .dienst__pijl{transform:translateX(4px)}
@media (min-width:768px){
  .dienst{grid-template-columns:56px 1fr 72px 56px;gap:16px;min-height:118px}
}

/* ------------------------------------------------------------ figuur ---- */
figure{margin:0}
.figuur img{width:100%;height:auto;border-radius:0}
.figuur--vast{position:relative;overflow:hidden}
.figuur--vast img{width:100%;height:100%;object-fit:cover}
figcaption{
  margin-top:12px;padding-top:10px;border-top:1px solid var(--primary);
  font:400 .8125rem/1.5 var(--font-body);color:var(--muted);max-width:34ch;
}
.inzet{max-width:340px}
.inzet img{width:100%;height:auto}

/* -------------------------------------------------------------- lijsten - */
.bollen{list-style:none;margin:0 0 1.6em;padding:0;border-top:1px solid var(--border);max-width:var(--measure)}
.bollen li{
  display:grid;grid-template-columns:14px 1fr;gap:12px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--border);
}
.bol{color:var(--primary-ink);font-size:.5em;line-height:2.2}
.streep{color:var(--muted);margin-right:.35em}

.kolommen{max-width:none}
@media (min-width:768px){
  .kolommen{columns:2;column-gap:44px;border-top:0}
  .kolommen li{break-inside:avoid;border-top:1px solid var(--border);border-bottom:0}
}

.regels{list-style:none;margin:0 0 1.6em;padding:0;border-top:1px solid var(--border);max-width:var(--measure)}
.regels li{padding:12px 0;border-bottom:1px solid var(--border)}

/* --------------------------------------------------------- prijskaart --- */
.kaarten{display:grid;gap:28px;align-items:stretch}
@media (min-width:820px){
  .kaarten{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .kaarten>.kaart:last-child:nth-child(odd){grid-column:1/-1}
}

.kaart{
  display:flex;flex-direction:column;
  background:var(--surface);
  border-radius:var(--radius-card);
  border-top:2px solid var(--primary);
  padding:26px 24px 28px;
}
@media (min-width:768px){.kaart{padding:30px 32px 34px}}

.kaart__kop{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.kaart__titel{
  font:600 1.75rem/1.15 var(--font-head);letter-spacing:-.015em;
  margin:0;text-transform:none;color:var(--text);
}
.kaart__vul{flex:1 1 40px;min-width:24px;border-bottom:1px dotted var(--border);transform:translateY(-.3em)}
@media (max-width:559px){.kaart__vul{display:none}}
.kaart__prijs{
  font:700 1.75rem/1.1 var(--font-body);color:var(--primary-ink);margin:0 0 0 auto;
  white-space:nowrap;
}
.kaart__prijs--tekst{
  font:500 1.0625rem/1.4 var(--font-body);white-space:normal;max-width:20ch;
}
@media (min-width:560px){.kaart__prijs--tekst{text-align:right}}
.kaart__oud{
  font:400 1rem/1.1 var(--font-body);color:var(--muted);margin-right:10px;
  text-decoration:line-through;text-decoration-thickness:1px;
}
.kaart__bij{
  margin:8px 0 0;font:400 var(--small)/1.5 var(--font-body);color:var(--muted);max-width:34ch;
}
.kaart__eenheid{
  margin:8px 0 0;font:500 var(--small)/1.4 var(--font-body);
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.kaart__tekst{margin:18px 0 0;color:var(--text)}
.kaart__lijst{
  list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--border);max-width:none;
}
.kaart__lijst li{padding:10px 0;border-bottom:1px solid var(--border)}
@media (min-width:640px){
  .kaart__lijst--lang{columns:2;column-gap:40px;border-top:0}
  .kaart__lijst--lang li{break-inside:avoid;border-top:1px solid var(--border);border-bottom:0}
}
/* een kaart die alleen op een rij staat wordt volle breedte; de lijst gaat dan
   ook in twee kolommen, anders worden de regels veel te lang */
@media (min-width:820px){
  .kaarten>.kaart:last-child:nth-child(odd) .kaart__lijst{columns:2;column-gap:40px;border-top:0}
  .kaarten>.kaart:last-child:nth-child(odd) .kaart__lijst li{
    break-inside:avoid;border-top:1px solid var(--border);border-bottom:0}
}
.kaart__voet{margin-top:auto;padding-top:26px}

/* ------------------------------------------------------------- knop ----- */
.knop{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;min-width:220px;padding:0 26px;
  background:var(--primary-ink);color:#fff;
  border:1px solid var(--primary-ink);border-radius:0;
  font:500 .875rem/1 var(--font-body);letter-spacing:.04em;
  text-decoration:none;cursor:pointer;
  transition:background-color .24s var(--ease),color .24s var(--ease);
}
.knop:hover,.knop:focus-visible{background:var(--bg);color:var(--primary-ink)}
@media (max-width:399px){.knop{min-width:100%}}

/* Een knop binnen .prose erft anders de linkkleur en de onderstreping van
   .prose a (hogere specificiteit dan .knop). De tekst werd daardoor
   donkergroen op donkergroen: onleesbaar. */
.prose a.knop{color:#fff;background-image:none}
.prose a.knop:hover,.prose a.knop:focus-visible{color:var(--primary-ink);background-image:none}

/* ----------------------------------------------------------- producten -- */
.productraster{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px;
  list-style:none;margin:0;padding:0;
}
@media (min-width:768px){.productraster{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}}
@media (min-width:1100px){.productraster{grid-template-columns:repeat(4,minmax(0,1fr))}}

.product__mat{aspect-ratio:4/5;background:var(--mat);display:grid;place-items:center;overflow:hidden}
.product__mat img{width:100%;height:100%;object-fit:contain;padding:10px}
.product__titel{
  margin:14px 0 0;padding-top:10px;border-top:1px solid var(--border);
  font:600 1.1875rem/1.25 var(--font-head);letter-spacing:-.01em;
  text-transform:none;
}
.product__prijs{margin:6px 0 0;font:700 1rem/1.3 var(--font-body);color:var(--primary-ink)}
.product__tekst{margin:8px 0 0;font:400 var(--small)/1.55 var(--font-body);color:var(--muted);max-width:none}

/* ----------------------------------------------------------- formulier -- */
.formulier{max-width:38rem}
.veld{margin:0 0 20px}
.veld label{
  display:block;margin:0 0 6px;
  font:500 var(--small)/1.4 var(--font-body);letter-spacing:.06em;text-transform:uppercase;
  color:var(--text);
}
.veld .opt{color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400}
.veld input,.veld textarea{
  width:100%;min-height:48px;padding:12px 14px;
  font:400 1rem/1.5 var(--font-body);color:var(--text);
  background:var(--bg);border:1px solid var(--veldrand);border-radius:0;
  transition:border-color .2s var(--ease);
}
.veld textarea{min-height:150px;resize:vertical}
.veld input:hover,.veld textarea:hover{border-color:var(--muted)}
.veld input:focus,.veld textarea:focus{border-color:var(--primary-ink);outline:2px solid var(--focus);outline-offset:1px}
.melding{
  margin:18px 0 0;padding:14px 16px;border-left:2px solid var(--primary);
  background:var(--surface);font-size:var(--small);color:var(--text);max-width:38rem;
}
.melding[hidden]{display:none}

/* ------------------------------------------------------- contactregel --- */
.gegevens{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.gegevens li{border-bottom:1px solid var(--border)}
.gegevens a,.gegevens span{
  display:flex;align-items:center;min-height:60px;
  font:600 1.375rem/1.2 var(--font-head);letter-spacing:-.01em;
  color:var(--text);text-decoration:none;
}
.gegevens a:hover,.gegevens a:focus-visible{color:var(--primary-ink)}
@media (min-width:768px){
  .gegevens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;border-bottom:1px solid var(--border)}
  .gegevens li{border-bottom:0}
  .gegevens a,.gegevens span{min-height:76px;font-size:1.5rem}
}

/* ----------------------------------------------------------- footer ----- */
.voet{
  border-top:1px solid var(--border);
  padding:clamp(48px,7vw,80px) 0 40px;
  position:relative;z-index:1;
}
.voet__in{display:grid;gap:40px}
@media (min-width:768px){
  .voet__in{grid-template-columns:1fr 1fr;gap:48px}
}
@media (min-width:1024px){
  .voet__in{grid-template-columns:1.1fr 1fr 1fr;gap:40px}
}
.voet h2{font:700 var(--h3)/1.35 var(--font-body);letter-spacing:var(--ls-caps);
  text-transform:uppercase;margin:0 0 18px}
.voet ul{list-style:none;margin:0;padding:0}
.voet li{border-top:1px solid var(--border)}
.voet li:last-child{border-bottom:1px solid var(--border)}
.voet li a,.voet li span{
  display:flex;align-items:center;min-height:44px;
  color:var(--text);text-decoration:none;font-size:.9375rem;
}
.voet li a:hover,.voet li a:focus-visible{color:var(--primary-ink)}
/* in de voet is de contactregel gewone UI-tekst; Cormorant op 15px wordt daar
   te dun en dat is precies wat tokens.md verbiedt (niet onder 28px) */
.voet .gegevens a,.voet .gegevens span{
  font-family:var(--font-body);font-size:.9375rem;font-weight:500;
  letter-spacing:0;min-height:44px;
}
.voet__merk img{width:56px;height:56px;margin-bottom:16px}
.voet__sociaal{display:flex;gap:10px;margin-top:20px}
.voet__sociaal a{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);color:var(--text);
  transition:border-color .22s var(--ease),color .22s var(--ease);
}
.voet__sociaal a:hover,.voet__sociaal a:focus-visible{border-color:var(--primary-ink);color:var(--primary-ink)}
.voet__sociaal svg{width:18px;height:18px}
.voet__pdf{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:.9375rem;color:var(--primary-ink);text-decoration:none;
  background-image:linear-gradient(var(--muted),var(--muted));
  background-size:100% 1px;background-position:0 calc(100% - 10px);background-repeat:no-repeat;
}
.voet__pdf svg{width:14px;height:16px;flex:none}

/* ------------------------------------------------------------ reveal ---- */
/* De verplaatsing zit in een custom property en niet los in de transform.
   Zo kan een element met een eigen transform (een kaart die kantelt, een
   figuur die meeschuift) die waarde meenemen zonder dat de twee regels
   elkaar overschrijven. */
[data-rv]{
  --rv-y:16px;
  opacity:0;transform:translate3d(0,var(--rv-y),0);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
[data-rv].in{--rv-y:0px;opacity:1}
.rm [data-rv]{--rv-y:0px!important;opacity:1!important;transform:none!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ==========================================================================
   Interactielaag: "papier en inkt"
   ==========================================================================
   De diepte in deze richting zit in gelaagd papier, niet in schaal. Een kaart
   is een blad dat je van een stapel oplicht; eronder ligt een tweede blad dat
   je pas ziet als het bovenste omhoog komt.

   Alles wat hier beweegt is transform of opacity. Geen breedte, geen marge,
   geen filter: die dwingen de browser tot herberekenen en dat kost precies de
   beelden die we willen houden.

   De waarden komen als custom properties uit script.js. Blijft dat script weg,
   dan staat elke property op nul en ziet de pagina er exact zo uit als zonder
   deze laag. Dit is de meest ingetogen van de zes richtingen; elk getal
   hieronder is bewust kleiner dan in de andere vijf.
   ========================================================================== */

/* Alleen wat op dit moment echt beweegt mag geheugen vasthouden. script.js
   hangt deze klasse eraan zodra het element in beeld komt en haalt hem er
   weer af zodra het eruit is. */
.gpu{will-change:transform}

/* ------------------------------------------------- 1. de kop tekent zich -- */
.kop::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--primary);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s var(--ease);
}
.kop.gescrold::after{transform:scaleX(1)}

/* ------------------------------------------ 2. de draad krijgt inktpunten -- */
/* De knoop blijft de open cirkel uit tokens.md. Zodra de kop van de draad hem
   passeert valt er een inktdruppel in: een klein mintvlak binnen de ring.
   Het nummer ernaast staat tot dat moment gedempt. */
.knoop::after{
  content:"";position:absolute;inset:2.5px;border-radius:50%;
  background:var(--primary);
  transform:scale(0);
  transition:transform .5s var(--ease);
}
.knoop.geraakt::after{transform:scale(1)}
.nr{opacity:.5;transition:opacity .5s var(--ease)}
.nr.geraakt{opacity:1}

/* ----------------------------------------------- 3. beeld schuift trager -- */
/* Een vast kader klemt zijn foto af, dus die kan er binnen bewegen. De schaal
   van 1,06 houdt aan alle kanten drie procent marge over; script.js begrenst
   de uitslag daarbinnen zodat er nooit een rand in beeld komt. */
.figuur--vast img{
  transform:translate3d(0,var(--foto-y,0px),0) scale(1.06);
}
/* Een figuur zonder vast kader kan zijn foto niet afklemmen. Die schuift als
   geheel mee, tegen de tekstkolom in. Het bijschrift hoort bij de foto en
   gaat dus mee. */
.figuur:not(.figuur--vast),.inzet{
  transform:translate3d(0,calc(var(--rv-y,0px) + var(--laag-y,0px)),0);
}

/* --------------------------------------------------- 4. de dienstenlijst -- */
/* Vier regels op een vel. Wie er met de muis of het toetsenbord op komt, licht
   er een op: de regel komt naar voren, het rondje eronder kantelt mee. */
/* De perspectief hoort op de li, niet op de ul: perspective werkt alleen op
   directe kinderen, en de link zit een niveau dieper. Op de ul zou de
   translateZ hieronder helemaal niets doen. */
.diensten li{perspective:1500px;perspective-origin:50% 45%}
.dienst{
  transform-style:preserve-3d;
  transform:translate3d(0,0,var(--dz,0px));
  transition:transform .45s var(--ease),background-color .3s var(--ease),
             box-shadow .3s var(--ease);
}
.dienst:hover,.dienst:focus-visible{
  --dz:15px;--z-beeld:16px;
  box-shadow:0 20px 34px -26px rgba(18,23,26,.55);
}
/* Aanraking kent geen muispositie: daar is het antwoord een indruk. */
.dienst:active{--dz:4px;transition-duration:.1s,.1s,.1s}
.dienst__beeld{
  transform:translate3d(0,0,var(--z-beeld,0px))
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .45s var(--ease);
}
.dienst__nr{opacity:.75;transition:opacity .3s var(--ease)}
.dienst:hover .dienst__nr,.dienst:focus-visible .dienst__nr{opacity:1}
.dienst:focus-visible .dienst__pijl{transform:translateX(4px)}
.dienst.kantelt,.dienst.kantelt .dienst__beeld{
  transition-duration:.12s;will-change:transform;
}

/* --------------------------------------------------- 5. de prijskaarten --- */
/* Commercieel het belangrijkste blok van de site: op vier van de elf pagina's
   staat dit. Het blad komt los van de stapel, een tweede vel wordt zichtbaar
   onder de rechter- en onderrand, en de prijs komt het verst naar voren. */
.kaarten{perspective:1900px;perspective-origin:50% 42%}
.kaart{
  --rx:0deg;--ry:0deg;--lift:0px;--dz:0px;
  position:relative;
  transform-style:preserve-3d;
  transform:translate3d(0,calc(var(--rv-y,0px) + var(--lift)),var(--dz))
            rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .55s var(--ease),opacity .5s var(--ease);
}
.kaart:hover,.kaart:focus-within{
  --lift:-3px;--dz:12px;--z-kop:9px;--z-prijs:8px;--z-voet:14px;
}
.kaart:active{--lift:0px;--dz:3px;transition-duration:.1s}
.kaart.kantelt{transition:transform .12s linear;will-change:transform}

/* Het tweede vel. Het ligt dertig pixels achter een ondoorzichtige kaart en
   zou daar dus volledig onzichtbaar zijn; alleen doordat het verschoven is
   steekt het aan twee zijden uit. Dat uitsteken is het effect. Een laag naar
   achteren duwen zonder te controleren of er iets ondoorzichtigs voor ligt is
   de manier om een onzichtbaar element te bouwen dat in elke meting klopt. */
.kaart::before{
  content:"";position:absolute;inset:0;
  background:var(--bg);
  border:1px solid var(--border);
  box-shadow:0 24px 36px -28px rgba(18,23,26,.6);
  opacity:0;pointer-events:none;
  transform:translate3d(calc(13px + var(--sx,0px)),calc(15px + var(--sy,0px)),-30px);
  transition:opacity .4s var(--ease),transform .55s var(--ease);
}
.kaart:hover::before,.kaart:focus-within::before{opacity:1}
.kaart.kantelt::before{transition:opacity .4s var(--ease),transform .12s linear}

.kaart__kop{transform:translate3d(0,0,var(--z-kop,0px))}
.kaart__prijs{transform:translate3d(0,0,var(--z-prijs,0px))}
.kaart__voet{transform:translate3d(0,0,var(--z-voet,0px))}
.kaart__kop,.kaart__prijs,.kaart__voet{transition:transform .55s var(--ease)}

/* ------------------------------------------------------- 6. de producten -- */
.productraster{perspective:1500px}
.productraster>li{
  --rx:0deg;--ry:0deg;--lift:0px;
  transform:translate3d(0,calc(var(--rv-y,0px) + var(--lift)),0)
            rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .5s var(--ease),opacity .5s var(--ease);
}
.productraster>li:hover,.productraster>li:focus-within{--lift:-4px}
.productraster>li.kantelt{transition:transform .12s linear;will-change:transform}
.product__mat img{transition:transform .5s var(--ease)}
.productraster>li:hover .product__mat img,
.productraster>li:focus-within .product__mat img{transform:scale(1.035)}

/* -------------------------------------------------------- 7. het formulier */
.veld{position:relative}
.veld label{transition:color .2s var(--ease)}
.veld:focus-within label{color:var(--primary-ink)}
/* Een mintstreep onder een veld dat klopt. Geen tekst, geen vinkje: een
   bevestiging die je ziet zonder dat je hem hoeft te lezen. */
.veld::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--primary);pointer-events:none;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .3s var(--ease);
}
.veld.is-goed::after{transform:scaleX(1)}
.veld.is-fout input,.veld.is-fout textarea{border-color:var(--fout)}
.veld.is-fout input:focus,.veld.is-fout textarea:focus{outline-color:var(--fout)}
.veldfout{
  margin:8px 0 0;padding-left:12px;
  border-left:2px solid var(--fout);
  font:400 var(--small)/1.5 var(--font-body);color:var(--fout);
  animation:inkt .22s var(--ease) both;
}
@keyframes inkt{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* -------------------------------------------------- 8. het mobiele paneel - */
/* Het paneel schuift al. Wat ontbrak is dat de regels erbinnen op volgorde
   komen: nu valt alles in een klap binnen en dat leest als een sprong.
   De verborgen stand hangt aan het gesloten paneel, niet aan de rij zelf, zodat
   een rij die om welke reden dan ook niet meedoet gewoon zichtbaar is. */
.paneel li,.paneel__contact{
  transition:opacity .26s var(--ease),transform .38s var(--ease);
}
.paneel:not(.open) li,
.paneel:not(.open) .paneel__contact{opacity:0;transform:translateY(-12px)}
.paneel.open li:nth-child(1){transition-delay:.06s}
.paneel.open li:nth-child(2){transition-delay:.1s}
.paneel.open li:nth-child(3){transition-delay:.14s}
.paneel.open li:nth-child(4){transition-delay:.18s}
.paneel.open li:nth-child(5){transition-delay:.22s}
.paneel.open li:nth-child(n+6){transition-delay:.26s}
.paneel.open .paneel__contact{transition-delay:.3s}
/* de subregels van de accordeon zitten al in een li die zijn beurt heeft
   gehad; ze mogen niet nog een keer vertraagd worden */
.paneel__sub li{transition-delay:0s!important;opacity:1;transform:none}
.paneel.schuift{will-change:transform}

/* de hamburger wordt een kruis */
.burger span{transition:opacity .2s var(--ease)}
.burger[aria-expanded="true"] span{opacity:0}
.burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

/* ------------------------------------------------- 9. kleine antwoorden --- */
/* Alles wat je aanraakt geeft binnen een tiende seconde antwoord. */
.knop,.burger,.sluit,.lade-knop,.paneel__toggle,
.voet__sociaal a,.gegevens a{
  transition:background-color .24s var(--ease),color .24s var(--ease),
             border-color .22s var(--ease),transform .1s var(--snel);
}
.knop:active,.paneel__contact:active{transform:scale(.985)}
.burger:active,.sluit:active,.lade-knop:active,.paneel__toggle:active{transform:scale(.9)}
.voet__sociaal a:active,.gegevens a:active{transform:scale(.96)}
.lade__item{transition:color .22s var(--ease),transform .3s var(--ease)}
.lade__item:hover,.lade__item:focus-visible{transform:translateY(-2px)}

/* ------------------------------------------------- 10. mobiel is stiller -- */
/* Geen muis, minder rekenkracht, vaak met een hand. Een aanraking laat op de
   meeste telefoons ook :hover achter, dus de diepte die daar hoort is hier
   ongeveer de helft. De kanteling ontbreekt sowieso: die wordt in script.js
   alleen aan een echte aanwijzer gehangen. */
@media (max-width:767px){
  .dienst:hover,.dienst:focus-visible{--dz:8px;--z-beeld:9px}
  .kaart:hover,.kaart:focus-within{--lift:-2px;--dz:7px;--z-kop:5px;--z-prijs:5px;--z-voet:8px}
  /* 6px en niet meer: bij 8px steekt het vel op 375px een pixel voorbij de
     rand en krijgt de pagina horizontale scroll. Gemeten, niet geschat. */
  .kaart::before{transform:translate3d(6px,9px,-12px)}
  .productraster>li:hover,.productraster>li:focus-within{--lift:-3px}
}

/* ==========================================================================
   Beperkte beweging: geen diepte, geen parallax, geen kanteling.
   De pagina staat dan stil, is compleet en niets is onzichtbaar.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .figuur--vast img{transform:scale(1.06)!important}
  .figuur:not(.figuur--vast),.inzet,
  .dienst,.dienst__beeld,
  .kaart,.kaart__kop,.kaart__prijs,.kaart__voet,
  .productraster>li,.product__mat img,
  .paneel li,.paneel__contact,
  .knop:active,.paneel__contact:active,
  .burger:active,.sluit:active,.lade-knop:active,.paneel__toggle:active,
  .voet__sociaal a:active,.gegevens a:active,
  .lade__item:hover,.lade__item:focus-visible{transform:none!important}
  .kaart::before{opacity:0!important}
  .kop::after,.veld.is-goed::after{transform:scaleX(1)!important}
  .knoop::after{transform:scale(1)!important}
  .nr{opacity:1!important}
  .paneel:not(.open) li,
  .paneel:not(.open) .paneel__contact{opacity:0!important}
  .gpu,.kantelt,.paneel.schuift{will-change:auto!important}
  .veldfout{animation:none!important}
}