/* =====================================================================
   EnjoyToCarry - demo 4 "Weefsel"
   Kleuren gesampled uit haar eigen foto's: olijfgroene hijab, terracotta
   jurk, karamel en linnen. Mint (#6DDB96, het logo) is hier het stiksel.
   ===================================================================== */

/* Lettertypen staan in de demo zelf, niet bij een externe aanbieder.
   Twee redenen: het IP-adres van elke bezoeker hoort niet naar een derde
   partij te gaan (AVG), en het lettertype komt nu binnen zonder extra DNS-
   en TLS-ronde, wat de herschikking na het inladen wegneemt.
   Variabele assen: 400 t/m 700 komt uit een enkel bestand per subset. */
@font-face{
  font-family:'Alegreya';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/alegreya-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:'Alegreya';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/alegreya-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:'Nunito Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/nunito-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:'Nunito Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/nunito-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{
  --bg:#FAF4EB;              /* warm linnen */
  --surface:#FFFCF7;         /* kaarten */
  --surface-warm:#FFF7EE;    /* kaart met actieprijs */
  --mat:#F2E9DA;             /* mat achter productfoto's + wisselsectie */
  --primary:#4A5D3A;         /* olijf, knopvlak */
  --primary-ink:#33422A;     /* 9,83:1 op --bg */
  --thread:#6DDB96;          /* merkaccent: stiksel en steken */
  --accent:#C0633A;          /* 3,78:1 - alleen vlak of tekst >= 24px */
  --accent-ink:#A34B27;      /* 5,34:1 - lopende tekst en knoppen */
  --text:#2A251F;            /* 13,89:1 op --bg */
  --muted:#6A5F52;           /* 5,70:1 op --bg */
  --border:#E7DCCB;          /* decoratieve haarlijn om kaarten en kaders */
  --border-strong:#77836A;   /* bedieningselementen: 3,67:1 op --bg,
                                3,92:1 op --surface, 3,33:1 op --mat.
                                --border haalt daar maar 1,24 tot 1,32:1 en
                                voldoet dus niet aan WCAG 1.4.11, dat 3:1
                                vraagt voor de begrenzing van een
                                bedieningselement. Een invoerveld heeft hier
                                bijna dezelfde vulling als de kaart eromheen,
                                dus de rand is het enige dat het veld aanduidt.
                                Ontzadigde olijf uit --primary, zodat het
                                linnen-en-olijfpalet intact blijft. */
  --focus:#33422A;

  --font-head:'Alegreya',Georgia,'Times New Roman',serif;
  --font-body:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --h1:clamp(2.2rem,6vw,3.5rem);
  --h2:clamp(1.65rem,4vw,2.4rem);
  --h3:1.25rem;
  --body:1.0625rem;
  --small:.875rem;
  --lh-head:1.14;
  --lh-body:1.72;
  --ls-head:-.012em;

  --measure:66ch;
  --wrap:1160px;
  --section-y:clamp(72px,11vw,128px);
  --radius-card:6px 6px 6px 40px;
  --radius-img:6px 6px 6px 64px;
  --radius-btn:4px 4px 4px 20px;
  --stitch-offset:-9px;
  --overlap:40px;
  --header-h:70px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- fundament ---------- */

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

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

body{
  margin:0;
  background-color:var(--bg);
  background-image:
    repeating-linear-gradient(45deg,rgba(74,93,58,.035) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(-45deg,rgba(74,93,58,.035) 0 1px,transparent 1px 8px);
  color:var(--text);
  font:400 var(--body)/var(--lh-body) var(--font-body);
}

img{max-width:100%;display:block}

h1,h2,h3,h4{
  font-family:var(--font-head);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  color:var(--primary-ink);
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:var(--h1);font-weight:700}
h2{font-size:var(--h2);font-weight:700}
h3{font-size:var(--h3);font-weight:500;letter-spacing:0}
h4{font-size:1.0625rem;font-weight:700;letter-spacing:0}

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

a{color:var(--accent-ink)}
a:hover{color:var(--primary-ink)}

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

.overslaan{
  position:absolute;left:-9999px;top:0;
  background:var(--primary-ink);color:var(--surface);
  padding:12px 18px;z-index:200;text-decoration:none;
  border-radius:0 0 var(--radius-btn);
}
.overslaan:focus{left:0}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.smal{max-width:var(--measure)}
/* volle kolombreedte, maar de tekst erin op leeslengte en links uitgelijnd
   met de koppen. Niet .wrap + .smal combineren: dat centreert de kolom. */
.kolom{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.kolom > *{max-width:var(--measure)}
.sectie{padding-block:var(--section-y)}
.sectie--kort{padding-block:clamp(48px,7vw,80px)}
.sectie--mat{background:var(--mat)}
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- het stiksel ---------- */

.stiksel{
  outline:1.5px dashed var(--thread);
  outline-offset:var(--stitch-offset);
  transition:outline-offset .26s var(--ease),transform .26s var(--ease);
}
.stiksel:hover{outline-offset:-6px}

/* ---------- knoppen ---------- */

.knop{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5em;min-height:48px;padding:12px 26px;
  font-family:var(--font-body);font-size:1rem;font-weight:700;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  border-radius:var(--radius-btn);
  transition:background-color .22s var(--ease),transform .22s var(--ease);
}
.knop--olijf{background:var(--primary);color:var(--surface)}
.knop--olijf:hover{background:var(--primary-ink);color:var(--surface);transform:translateY(-2px)}
.knop--vol{width:100%}
.knop--rand{background:transparent;color:var(--primary-ink);border-color:var(--primary-ink)}
.knop--rand:hover{background:var(--primary-ink);color:var(--surface)}

/* ---------- header ---------- */

.kop{
  position:sticky;top:0;z-index:60;
  background:var(--bg);
  height:var(--header-h);
}
.kop::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:repeating-linear-gradient(90deg,
    var(--primary) 0 6px,var(--thread) 6px 9px,var(--accent) 9px 12px);
}
.kop__in{
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.merk{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--primary-ink)}
.merk picture{display:block;flex:none}
.merk img{width:44px;height:44px;border-radius:50%}
.merk__naam{font-family:var(--font-head);font-weight:700;font-size:1.15rem;letter-spacing:-.01em}

.nav{display:none}
.nav__lijst{list-style:none;display:flex;align-items:center;gap:4px;margin:0;padding:0}
.nav__link{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 12px;min-height:44px;
  font-weight:600;font-size:.9375rem;color:var(--primary-ink);text-decoration:none;
  border-bottom:1.5px dashed transparent;
}
.nav__link:hover,.nav__link:focus-visible{border-bottom-color:var(--thread);color:var(--primary-ink)}
.nav__link[aria-current="page"]{border-bottom-color:var(--accent)}
.nav__chev{width:11px;height:11px;flex:none;transition:transform .2s var(--ease)}

.groep{position:relative}
.groep__paneel{
  position:absolute;top:calc(100% + 6px);left:0;min-width:266px;
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--radius-card);
  padding:10px;margin:0;list-style:none;
  box-shadow:0 12px 30px rgba(42,37,31,.10);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.groep:hover .groep__paneel,
.groep:focus-within .groep__paneel{opacity:1;visibility:visible;transform:none}
.groep__paneel a{
  display:block;padding:11px 14px;min-height:44px;
  color:var(--primary-ink);text-decoration:none;font-weight:600;font-size:.9375rem;
  border-radius:4px;
}
.groep__paneel a:hover,.groep__paneel a:focus-visible{background:var(--mat)}
.groep:hover .nav__chev{transform:rotate(180deg)}

.hamburger{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;padding:0;
  background:transparent;border:1px solid var(--border-strong);border-radius:6px;
  color:var(--primary-ink);cursor:pointer;
}
.hamburger svg{width:22px;height:22px}
.hamburger__sluit{display:none}
.hamburger[aria-expanded="true"] .hamburger__open{display:none}
.hamburger[aria-expanded="true"] .hamburger__sluit{display:block}

/* mobiel paneel */
.paneel{
  position:fixed;inset:var(--header-h) 0 0 auto;
  width:min(88vw,380px);
  background-color:var(--bg);
  background-image:
    repeating-linear-gradient(45deg,rgba(74,93,58,.06) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(-45deg,rgba(74,93,58,.06) 0 1px,transparent 1px 7px);
  border-left:1px solid var(--border);
  padding:12px 20px 32px;
  overflow-y:auto;z-index:59;
  transform:translateX(100%);
/* visibility hoorde niet mee te lopen in de duur van de overgang. Zolang die
   loopt blijft de berekende waarde bij het openen nog een beeld lang hidden,
   en een focus() op een element in een onzichtbaar paneel doet stilzwijgend
   niets: gemeten bleef de focus op de hamburger staan. Nu schakelt visibility
   bij het openen meteen om en pas bij het sluiten na afloop, zodat het paneel
   tijdens het wegschuiven zichtbaar blijft en daarna uit de tabvolgorde gaat. */
  visibility:hidden;                 /* gesloten paneel niet in de tabvolgorde */
  transition:transform .3s var(--ease),visibility 0s linear .3s;
}
.paneel[data-open="true"]{
  transform:none;visibility:visible;
  transition:transform .3s var(--ease),visibility 0s linear 0s;
}
.paneel__lijst{list-style:none;margin:0;padding:0}
.paneel__rij{
  padding:0;
  display:flex;align-items:center;
  border-bottom:1.5px dotted var(--border);
}
.paneel__rij a{
  flex:1;display:flex;align-items:center;min-height:56px;
  color:var(--primary-ink);text-decoration:none;font-weight:600;font-size:1.0625rem;
}
.paneel__rij a[aria-current="page"]{color:var(--accent-ink)}
.paneel__klap{
  width:44px;height:44px;flex:none;margin-left:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border-strong);border-radius:6px;
  color:var(--primary-ink);cursor:pointer;
}
.paneel__klap svg{width:12px;height:12px;transition:transform .2s var(--ease)}
.paneel__klap[aria-expanded="true"] svg{transform:rotate(180deg)}
.paneel__sub{list-style:none;margin:0;padding:0 0 6px 16px;display:none}
.paneel__sub[data-open="true"]{display:block}
.paneel__sub li{border-bottom:1.5px dotted var(--border)}
.paneel__sub li:last-child{border-bottom:0}
.paneel__sub a{
  display:flex;align-items:center;min-height:52px;
  color:var(--muted);text-decoration:none;font-weight:600;font-size:1rem;
}
.paneel__sub a:hover{color:var(--primary-ink)}
.paneel .knop{margin-top:22px}
.scherm{
  position:fixed;inset:var(--header-h) 0 0 0;background:rgba(42,37,31,.34);
  z-index:58;opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility 0s linear .3s;
}
.scherm[data-open="true"]{
  opacity:1;visibility:visible;
  transition:opacity .3s var(--ease),visibility 0s linear 0s;
}

/* ---------- hero ---------- */

.hero{position:relative;height:520px;overflow:hidden;background:var(--mat)}
.hero__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:58% 34%;
  transform:scale(1.1);will-change:transform;
}
.welkom{
  position:relative;z-index:3;
  margin-top:-110px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:30px 26px;
  max-width:720px;
}
.welkom h1{margin-bottom:.35em}
.welkom p{font-size:1.125rem}

/* ---------- paginakop (binnenpagina's) ---------- */

.paginakop{padding-block:clamp(40px,7vw,72px) clamp(28px,4vw,44px)}
/* zonder beeldband ertussen stapelen twee paddings op elkaar */
.paginakop + .sectie{padding-top:clamp(16px,3vw,36px)}
.paginakop .lead{
  font-family:var(--font-head);font-weight:500;
  font-size:clamp(1.25rem,3vw,1.7rem);line-height:1.35;
  color:var(--accent-ink);max-width:24ch;
}
.paginakop .lead--breed{max-width:34ch}

.beeldband{
  position:relative;overflow:hidden;
  border-radius:var(--radius-img);
  outline:1.5px dashed var(--thread);outline-offset:var(--stitch-offset);
}
.beeldband img{width:100%;height:clamp(230px,42vw,420px);object-fit:cover}

/* ---------- diensten (2x2, ongelijke hoogte) ---------- */

.diensten{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  list-style:none;margin:0;padding:0;
}
.dienst{
  position:relative;display:flex;flex-direction:column;align-items:center;
  gap:14px;text-align:center;text-decoration:none;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:26px 16px;color:var(--primary-ink);
  transition:transform .26s var(--ease);
}
.dienst::after{
  content:"";position:absolute;inset:9px;pointer-events:none;
  border:1.5px dashed var(--thread);
  border-radius:0 0 0 30px;
  transition:inset .26s var(--ease);
}
.dienst:hover{transform:translateY(-3px)}
.dienst:hover::after{inset:6px}
.dienst:nth-child(1),.dienst:nth-child(4){padding-block:42px}
.dienst__foto{
  width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--border);
}
.dienst__label{font-family:var(--font-head);font-weight:700;font-size:1.0625rem;line-height:1.25}

/* ---------- overlappende inhoudsblokken ---------- */

.blok{margin-block:clamp(48px,8vw,96px)}
/* binnen een sectie zorgt de sectiepadding al voor de ruimte eromheen;
   anders stapelen 128px en 96px op elkaar en valt het blok uit elkaar */
.sectie > .wrap > .blok:first-child{margin-top:0}
.sectie > .wrap > .blok:last-child{margin-bottom:0}
.blok__beeld{margin:0;position:relative}
.blok__beeld img{
  width:100%;height:clamp(260px,60vw,460px);object-fit:cover;
  border-radius:var(--radius-img);
}
.blok__beeld::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1.5px dashed var(--thread);
  border-radius:var(--radius-img);
  transform:scale(.975);
}
.blok__tekst{
  position:relative;z-index:2;
  margin:-36px 0 0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:28px 24px;
}
.blok__tekst .subkop{
  font-family:var(--font-head);font-weight:500;font-size:1.15rem;
  color:var(--accent-ink);margin:-.4em 0 1em;
}

/* ---------- lijsten ---------- */

.punten{list-style:none;margin:0 0 1.4em;padding:0;max-width:var(--measure)}
.punten li{
  padding-left:1.6em;text-indent:-1.6em;margin-bottom:.55em;
}
.punt{color:var(--primary);font-weight:700}
@media (min-width:900px){
  /* korte punten in één kolom laten een halve pagina leeg */
  .punten{columns:2;column-gap:52px;max-width:960px}
  .punten li{break-inside:avoid}
}

.vragen{list-style:none;margin:0 0 1.4em;padding:0;max-width:var(--measure)}
.vragen li{
  padding:10px 0 10px 1.1em;text-indent:-1.1em;
  border-bottom:1.5px dotted var(--border);
  font-weight:600;color:var(--primary-ink);
}
.vragen li:last-child{border-bottom:0}
.streep{color:var(--accent-ink)}

.regels{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.regels li{
  position:relative;padding:16px 18px 16px 40px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:6px 6px 6px 22px;
}
.regels li::before{
  content:"";position:absolute;left:18px;top:1.55em;
  width:8px;height:8px;background:var(--thread);transform:rotate(45deg);
}

/* ---------- prijskaarten ---------- */

.kaarten{display:grid;gap:22px;align-items:stretch}
.kaart{
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:30px 26px;
}
.kaart--actie{background:var(--surface-warm)}
.kaart--geenprijs{border-radius:6px 6px 6px 64px}
.kaart--breed{max-width:820px;margin-inline:auto}
.kaart__titel{
  font-family:var(--font-head);font-weight:700;font-size:1.5rem;
  color:var(--primary-ink);margin:0;overflow-wrap:break-word;
}
.kaart__prijs{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(2.1rem,5vw,2.8rem);line-height:1.05;
  color:var(--accent-ink);margin:.25em 0 0;max-width:none;
}
.kaart__oud{
  font-size:.46em;color:var(--muted);margin-right:.35em;
  text-decoration-thickness:2px;
}
.kaart__tekstprijs{
  font-family:var(--font-head);font-weight:500;font-size:1.25rem;
  color:var(--accent-ink);margin:.6em 0 0;max-width:none;
}
.kaart__eenheid{
  font-size:.8125rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin:.7em 0 0;
}
.kaart__bij{font-size:.9375rem;color:var(--muted);margin:.7em 0 0}
.kaart__streep{
  height:1.5px;margin:22px 0 20px;border:0;
  background:repeating-linear-gradient(90deg,var(--thread) 0 6px,transparent 6px 12px);
}
.kaart__tekst{margin:0 0 1.1em}
.kaart__lijst{list-style:none;margin:0 0 24px;padding:0}
.kaart__lijst li{position:relative;padding-left:22px;margin-bottom:10px;break-inside:avoid}
.kaart__lijst li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:8px;height:8px;background:var(--thread);transform:rotate(45deg);
}
.kaart .knop{margin-top:auto}

/* ---------- regio ---------- */

.regio{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-card);padding:30px 26px;
  max-width:880px;
}
.regio__label{
  font-family:var(--font-head);font-weight:700;font-size:1.5rem;
  color:var(--primary-ink);margin:0 0 14px;
}
.regio__zin{
  font-family:var(--font-head);font-weight:500;
  font-size:1.1875rem;line-height:1.6;
  color:var(--primary-ink);max-width:none;margin:0;
}
@media (min-width:768px){
  .regio{padding:36px 34px}
  .regio__zin{columns:2;column-gap:40px;font-size:1.125rem}
}

/* ---------- producten ---------- */

.product-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
}
.product-card{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);
  border-radius:6px 6px 6px 28px;overflow:hidden;
}
.product-card__media{
  aspect-ratio:4/5;background:var(--mat);
  display:grid;place-items:center;overflow:hidden;
}
.product-card__media img{width:100%;height:100%;object-fit:contain;padding:10px}
.product-card__body{padding:16px 16px 20px}
.product-card__titel{
  font-family:var(--font-head);font-weight:700;font-size:1.0625rem;
  line-height:1.25;color:var(--primary-ink);margin:0 0 8px;
}
.product-card__prijs{
  font-family:var(--font-head);font-weight:700;font-size:1.25rem;
  color:var(--accent-ink);margin:0;
}
.product-note{
  background:var(--surface);border:1px solid var(--border);
  border-left:5px solid var(--thread);
  border-radius:0 6px 6px 0;padding:18px 20px;margin:0 0 28px;
  color:var(--muted);max-width:var(--measure);
}

/* ---------- formulier ---------- */

.contact-raster{display:grid;gap:36px}
.contact-form{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-card);padding:28px 24px;
}
.veld{margin-bottom:18px}
.veld label{
  display:block;font-weight:700;font-size:.9375rem;
  color:var(--primary-ink);margin-bottom:7px;
}
.veld__opt{font-weight:400;color:var(--muted);font-size:.875rem}
.veld input,.veld textarea{
  width:100%;min-height:48px;padding:12px 14px;
  font-family:var(--font-body);font-size:16px;color:var(--text);
  background:var(--bg);border:1px solid var(--border-strong);border-radius:6px;
}
.veld textarea{min-height:132px;resize:vertical}
.veld input:focus,.veld textarea:focus{outline:3px solid var(--focus);outline-offset:1px}
.formulier-melding{
  margin-top:16px;padding:14px 16px;
  background:rgba(109,219,150,.18);border:1px solid var(--thread);
  border-radius:6px;font-size:.9375rem;color:var(--text);
}
.formulier-melding[hidden]{display:none}

.gegevens{list-style:none;margin:0;padding:0}
.gegevens li{border-bottom:1.5px dotted var(--border)}
.gegevens li:last-child{border-bottom:0}
.gegevens a,.gegevens span{
  display:flex;align-items:center;min-height:52px;gap:12px;
  color:var(--primary-ink);text-decoration:none;font-weight:600;
}
.gegevens a:hover{color:var(--accent-ink)}
.gegevens svg{width:20px;height:20px;flex:none;color:var(--primary)}

/* ---------- voorwaarden ---------- */

.voorwaarde{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-card);padding:26px 24px;margin-bottom:18px;
}
.voorwaarde h2{font-size:1.375rem;margin-bottom:.4em}

/* ---------- footer ---------- */

.voet{
  background:var(--primary-ink);color:var(--surface);
  padding-block:0 40px;margin-top:clamp(64px,10vw,120px);
}
.voet__strook{
  height:3px;
  background:repeating-linear-gradient(90deg,
    var(--primary) 0 6px,var(--thread) 6px 9px,var(--accent) 9px 12px);
}
.voet__in{display:grid;gap:34px;padding-top:44px}
.voet h2{color:var(--surface);font-size:1.25rem;margin-bottom:.6em}
.voet p{color:var(--border)}
.voet a{color:var(--surface);text-decoration:none;border-bottom:1px solid rgba(109,219,150,.55)}
.voet a:hover{color:var(--thread);border-bottom-color:var(--thread)}
.voet__lijst{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.voet__lijst a{
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:0;font-weight:600;
}
.voet__lijst a:hover{color:var(--thread)}
.voet__pdf a{display:inline-flex;align-items:center;min-height:44px}
/* de gegevenslijst erft anders --primary-ink: donker olijf op donker olijf */
.voet .gegevens a,
.voet .gegevens span{color:var(--surface)}
.voet .gegevens a:hover{color:var(--thread)}
.voet .gegevens svg{color:var(--thread)}
.voet .gegevens li{border-bottom-color:rgba(231,220,203,.28)}
.voet__contact li{margin-bottom:4px}
.voet__contact a,.voet__contact span{display:inline-flex;align-items:center;min-height:44px}
.voet__sociaal{display:flex;gap:12px;margin-top:10px;list-style:none;padding:0}
.voet__sociaal a{
  width:48px;height:48px;border:1px solid rgba(231,220,203,.4);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
}
.voet__sociaal svg{width:20px;height:20px}
.voet__onder{
  margin-top:34px;padding-top:20px;
  border-top:1.5px dotted rgba(231,220,203,.35);
  font-size:.875rem;color:var(--border);
}

/* ---------- scroll reveal ---------- */

/* De verschuiving loopt via een custom property in plaats van via een kant en
   klare transform. Reden: de kaarten hieronder kantelen ook, en een tweede
   transform-regel zou de eerste gewoon overschrijven. Nu tellen onthulling en
   kanteling bij elkaar op binnen één transform. */
[data-rv]{
  opacity:0;--rvy:30px;
  transform:translate3d(0,var(--rvy),0);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
[data-rv].in{opacity:1;--rvy:0px}
.rm [data-rv]{opacity:1!important;--rvy:0px!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;
  }
  .hero__img{transform:scale(1.1)!important}
}

/* =====================================================================
   Breekpunten
   ===================================================================== */

@media (min-width:480px){
  .diensten{gap:20px}
  .dienst__foto{width:80px;height:80px}
  .dienst__label{font-size:1.125rem}
  .product-grid{gap:20px}
}

@media (min-width:768px){
  .hero{height:600px}
  .hero__img{object-position:50% 38%}
  .welkom{margin-top:-90px;padding:40px 44px}

  /* dienst-tegel wordt liggend: cirkel links, label rechts. Een vierkante
     tegel met een klein rondje wordt op deze breedte een leeg vlak. */
  .diensten{gap:22px}
  .dienst{
    flex-direction:row;align-items:center;text-align:left;
    justify-content:flex-start;gap:22px;padding:30px 32px;
  }
  .dienst__foto{width:88px;height:88px}
  .dienst__label{font-size:1.1875rem}
  .dienst:nth-child(1),.dienst:nth-child(4){padding-block:46px}

  .blok__tekst{margin-top:-48px;padding:36px 34px;margin-inline:24px}
  .kaarten{grid-template-columns:repeat(2,1fr)}
  .kaart{padding:34px 30px}
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .contact-raster{grid-template-columns:1.35fr 1fr;gap:44px;align-items:start}
  .voet__in{grid-template-columns:1.2fr 1fr 1fr;gap:44px}
  .kaart--breed .kaart__lijst{columns:2;column-gap:34px}
}

@media (min-width:1024px){
  .nav{display:block}
  .hamburger,.paneel,.scherm{display:none}
  .hero{height:660px}
  .welkom{margin-top:-72px;padding:44px 52px}

  .blok{display:grid;grid-template-columns:repeat(12,1fr);align-items:center;margin-block:clamp(72px,9vw,128px)}
  .blok__beeld{grid-row:1;grid-column:1/8}
  .blok__beeld img{height:clamp(360px,38vw,520px)}
  .blok__tekst{
    grid-row:1;grid-column:6/13;
    margin:0 0 0 calc(var(--overlap) * -1);
    padding:40px 40px;
  }
  .blok--om .blok__beeld{grid-column:6/13}
  .blok--om .blok__tekst{
    grid-column:1/8;
    margin:0 calc(var(--overlap) * -1) 0 0;
  }
  .blok--hoog .blok__beeld img{height:clamp(420px,44vw,600px)}
  .sectie > .wrap > .blok{margin-block:0}

  .kaarten--drie{grid-template-columns:repeat(3,1fr)}
  .kaarten--vijf{grid-template-columns:repeat(3,1fr)}
  .paginakop{padding-block:clamp(56px,6vw,88px) clamp(32px,4vw,52px)}
}

@media (min-width:1100px){
  .product-grid{grid-template-columns:repeat(4,1fr)}
}

@media (min-width:1280px){
  .welkom{padding:52px 64px}
}

/* twee beelden naast elkaar met ongelijke hoogte (waarom je kind dragen) */
.duo{display:grid;gap:18px}
.duo figure{margin:0;position:relative}
.duo img{width:100%;object-fit:cover;border-radius:var(--radius-img)}
.duo figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1.5px dashed var(--thread);border-radius:var(--radius-img);transform:scale(.975);
}
.duo img{height:clamp(240px,52vw,320px)}
@media (min-width:768px){
  .duo{grid-template-columns:1fr 1fr;align-items:start;gap:26px}
  .duo figure:first-child{margin-top:44px}
  .duo figure:first-child img{height:340px}
  .duo figure:last-child img{height:440px}
}

/* portret over mij */
.portret{display:grid;gap:28px}
.portret figure{margin:0;position:relative}
.portret img{width:100%;height:clamp(360px,72vw,560px);object-fit:cover;object-position:50% 24%;border-radius:var(--radius-img)}
.portret figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1.5px dashed var(--thread);border-radius:var(--radius-img);transform:scale(.972);
}
@media (min-width:1024px){
  .portret{grid-template-columns:minmax(0,420px) 1fr;gap:52px;align-items:start}
  .portret img{height:560px;position:sticky;top:calc(var(--header-h) + 28px)}
}

/* =====================================================================
   INTERACTIE — "stof optillen"
   ---------------------------------------------------------------------
   Eén beeld draagt alles in deze richting: elk vlak is een lap stof die
   op een andere lap ligt. Wijs je hem aan, dan pak je de hoek die het
   dichtst bij de aanwijzer ligt en til je die op. De lap draait dus niet
   om zijn midden zoals een plaatje in een lijst, maar om de hoek die aan
   de overkant op tafel blijft liggen. Dat is het verschil met richting 3,
   waar diepte uit helderheid komt: hier komt diepte uit gewicht.

   Twee tijden, en dat is met opzet. Optillen gaat vlot, want een handeling
   hoort binnen 100ms antwoord te geven. Loslaten duurt ruim twee keer zo
   lang en heeft geen enkele terugveer: stof valt terug, het klapt niet
   dicht. Een elastische curve zou hier van linnen plastic maken.

   Alles wat per beeld verandert is een custom property die in een transform
   of in opacity terechtkomt. Geen breedte, geen marge, geen inset, geen
   filter: die dwingen de browser tot herberekenen of tot een verfstap, en
   dat kost beelden in een scroll-lus.
   ===================================================================== */

:root{
  --optil:cubic-bezier(.2,.86,.32,1);      /* oppakken: vlot en direct */
  --terugval:cubic-bezier(.32,.72,.28,1);  /* neerleggen: traag, zonder sprong */
  --t-optil:250ms;
  --t-terugval:560ms;
  --t-druk:90ms;                            /* ingedrukt: ruim binnen 100ms */
  --kantel:3.6deg;                          /* om een hoek is 3,6 graden al veel */
}

/* ---------- 1. de ruimte waarin de lappen liggen ----------
   Perspectief hoort op de houder, niet op de lap zelf: anders krijgt elke
   kaart zijn eigen vluchtpunt en kantelen twee kaarten naast elkaar de
   verkeerde kant op ten opzichte van elkaar. Bij de dienst-tegels staat het
   wel per tegel, omdat die rij op een breed scherm bijna de hele breedte
   beslaat en een gedeeld vluchtpunt de buitenste tegels scheeftrekt. */
.kaarten{perspective:1700px;perspective-origin:50% 38%}
.product-grid{perspective:1500px;perspective-origin:50% 40%}
.diensten > li{perspective:1000px;perspective-origin:50% 40%}

/* ---------- 2. de lap zelf ----------
   transform-origin staat op de tegenoverliggende hoek. De hoek bij de
   aanwijzer komt daardoor omhoog terwijl de andere blijft liggen, precies
   zoals een doek die je bij een punt oppakt. Het omschakelen van hoek
   gebeurt op het moment dat de bijbehorende draaihoek nul is, dus je ziet
   het nooit springen. */
.kaart,.dienst,.product-card{
  transform-style:preserve-3d;
  transform-origin:var(--ox,50%) var(--oy,50%);
  transform:translate3d(0,var(--rvy,0px),0)
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
            translateZ(var(--op,0px));
  transition:transform var(--t-terugval) var(--terugval),
             box-shadow var(--t-terugval) var(--terugval);
  box-shadow:0 1px 2px rgba(42,37,31,.05);
}
.kaart.opgetild,.dienst.opgetild,.product-card.opgetild{
  --op:10px;
  transition-duration:var(--t-optil),var(--t-optil);
  transition-timing-function:var(--optil),var(--optil);
}
.product-card.opgetild{--op:7px}

/* De lap eronder. Bij een kaart die stil ligt piept er een randje linnen
   uit onder de rechteronderhoek; til je op, dan komt er meer van vrij.
   Hij staat op negatieve Z en de kaart erboven is dekkend, dus alleen dat
   uitstekende randje is te zien. Dat is hier de bedoeling en geen ongeluk:
   gecontroleerd op een schermafdruk, niet op een meetwaarde. */
.kaart::before,.dienst::before{
  content:"";
  position:absolute;
  inset:16px -10px -10px 16px;
  border-radius:inherit;
  background:var(--mat);
  border:1px solid var(--border);
  transform:translateZ(-14px);
  transition:transform var(--t-terugval) var(--terugval);
  pointer-events:none;
}
.dienst::before{inset:12px -7px -7px 12px}
.kaart.opgetild::before,.dienst.opgetild::before{
  transition-duration:var(--t-optil);
  transition-timing-function:var(--optil);
  transform:translateZ(-14px) translate3d(5px,5px,0);
}

/* De schaduw valt op het linnen eronder en schuift mee met de kant waar de
   lap omhoog komt. Twee lagen: een korte harde onder de hoek die blijft
   liggen en een lange zachte onder de hoek die omhoog komt. */
.kaart.opgetild,.dienst.opgetild,.product-card.opgetild{
  box-shadow:
    calc(var(--sx,0px) * .35) 3px 6px rgba(42,37,31,.07),
    var(--sx,0px) var(--sy,14px) 28px rgba(42,37,31,.14);
}

/* ---------- 3. het stiksel loopt mee ----------
   Het stiksel zit op de lap zelf (outline op .stiksel, gestippelde rand op
   .dienst::after), dus het kantelt vanzelf mee. Wat erbij komt is dat het
   een paar pixels bóven de stof zweeft: een steek ligt op het doek, niet
   erin. Zodra de lap kantelt zie je die kleine afstand, en dat maakt het
   tastbaar. */
.dienst::after{
  inset:9px;
  transform:translateZ(7px) scale(var(--stik,1));
  transition:transform var(--t-terugval) var(--terugval);
}
.dienst:hover::after,
.dienst:focus-visible::after,
.dienst.opgetild::after{
  inset:9px;                 /* overschrijft de oude inset-overgang */
  --stik:1.016;
  transition-duration:var(--t-optil);
  transition-timing-function:var(--optil);
}
.stiksel{transition:outline-offset var(--t-terugval) var(--terugval)}
.stiksel:hover,
.stiksel:focus-visible,
.stiksel:focus-within{
  outline-offset:-6px;
  transition-duration:var(--t-optil);
  transition-timing-function:var(--optil);
}

/* De ronde foto op een dienst-tegel is een opgenaaide lap: hij ligt altijd
   iets boven de tegel. Bij 88px is 1,6% groter niet te zien, maar zodra de
   tegel kantelt schuift hij zichtbaar mee. */
.dienst__foto{
  transform:translateZ(16px);
  transition:transform var(--t-terugval) var(--terugval);
}
.dienst:hover .dienst__foto,
.dienst:focus-visible .dienst__foto,
.dienst.opgetild .dienst__foto{
  transform:translateZ(26px);
  transition-duration:var(--t-optil);
  transition-timing-function:var(--optil);
}
/* De tegel hoeft niet meer als geheel omhoog te springen: het optillen doet
   dat werk al, en twee bewegingen tegelijk leest als één slordige. */
.dienst:hover{
  transform:translate3d(0,var(--rvy,0px),0)
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
            translateZ(var(--op,0px));
}

/* Wat op een prijskaart telt is de prijs en de knop. Die liggen als losse
   steken op de lap en komen bij het optillen iets verder mee. Klein houden:
   dit is een leessite, en tekst die te ver naar voren komt wordt door de
   browser eerst plat gerasterd en daarna vergroot, en dat is zichtbaar als
   onscherpte. */
.kaart__titel,.kaart__prijs,.kaart__tekstprijs,.kaart .knop{
  transform:translateZ(0);
  transition:transform var(--t-terugval) var(--terugval);
}
.kaart.opgetild .kaart__titel{transform:translateZ(8px)}
.kaart.opgetild .kaart__prijs,
.kaart.opgetild .kaart__tekstprijs,
.kaart:focus-within .kaart__prijs,
.kaart:focus-within .kaart__tekstprijs{transform:translateZ(16px)}
.kaart.opgetild .knop,
.kaart:focus-within .knop{transform:translateZ(12px)}
.kaart.opgetild .kaart__titel,
.kaart.opgetild .kaart__prijs,
.kaart.opgetild .kaart__tekstprijs,
.kaart.opgetild .knop,
.kaart:focus-within .kaart__prijs,
.kaart:focus-within .kaart__tekstprijs,
.kaart:focus-within .knop{
  transition-duration:var(--t-optil);
  transition-timing-function:var(--optil);
}
/* Met het toetsenbord is er geen hoek om naar te wijzen, dus wordt de kaart
   recht opgetild. Zonder deze regel werkt de halve pagina alleen met een muis. */
.kaart:focus-within{
  --op:10px;
  box-shadow:0 3px 8px rgba(42,37,31,.07),0 14px 30px rgba(42,37,31,.13);
}
.kaart:focus-within::before{transform:translateZ(-14px) translate3d(5px,5px,0)}

/* ---------- 4. productkaarten ----------
   Die hebben overflow:hidden en kunnen dus geen 3D binnen zich dragen: een
   overflow anders dan visible zet transform-style terug op flat. Ze kantelen
   wel als geheel; de foto erin schuift binnen zijn mat, en op een raster van
   elf kaarten is dat genoeg. */
.product-card{transform-style:flat}
.product-card__media img{
  transform:translate3d(0,var(--fy,0px),0) scale(var(--fs,1));
  transition:transform var(--t-terugval) var(--terugval);
}
.product-card.opgetild .product-card__media img,
.product-card:hover .product-card__media img,
.product-card:focus-within .product-card__media img{
  --fs:1.045;
  transition-duration:var(--t-optil);
  transition-timing-function:var(--optil);
}
.product-card:focus-within{
  --op:8px;
  box-shadow:0 3px 8px rgba(42,37,31,.07),0 14px 30px rgba(42,37,31,.13);
}

/* ---------- 5. de blokken: twee lappen over elkaar ----------
   Op desktop valt de tekstkaart 40px over de foto heen. Dat is de plek waar
   deze richting over gaat, dus daar hoort de diepte ook echt te zitten. */
@media (min-width:1024px){
  .blok{perspective:2000px;perspective-origin:50% 40%}
  .blok__tekst{
    transform:translate3d(0,var(--rvy,0px),0) translateZ(var(--kz,0px));
    transition:transform var(--t-terugval) var(--terugval),
               box-shadow var(--t-terugval) var(--terugval);
    box-shadow:0 2px 6px rgba(42,37,31,.05);
  }
  .blok:hover .blok__tekst,
  .blok:focus-within .blok__tekst{
    --kz:22px;
    box-shadow:0 10px 34px rgba(42,37,31,.13);
    transition-duration:var(--t-optil);
    transition-timing-function:var(--optil);
  }
}

/* De foto in een blok krijgt een kader waarbinnen hij mag schuiven. Zonder
   het kader zou hij zijn eigen rand tonen; met scale(1.06) is er zes procent
   speling en blijft de rand altijd buiten beeld. */
.blok__beeld{overflow:hidden;border-radius:var(--radius-img)}
.blok__beeld img{transform:translate3d(0,var(--py,0px),0) scale(1.06)}
.beeldband{overflow:hidden}
.beeldband img{transform:translate3d(0,var(--py,0px),0) scale(1.06)}
.duo figure{overflow:hidden;border-radius:var(--radius-img);margin:0}
.duo figure img{transform:translate3d(0,var(--py,0px),0) scale(1.06)}

/* De hero-foto stond op een transform die het script per beeld helemaal
   opnieuw schreef, inclusief de scale. Nu schrijft het script alleen nog het
   getal en staat de vorm hier, op één plek. */
.hero__img{transform:translate3d(0,var(--py,0px),0) scale(1.1)}

/* ---------- 6. micro-interacties ----------
   Elke handeling geeft binnen 90ms antwoord. Dat is het verschil tussen
   "de site reageert" en "de site laadt". */
.knop{
  transition:background-color .22s var(--ease),
             transform var(--t-optil) var(--optil),
             box-shadow var(--t-optil) var(--optil);
}
.knop--olijf:hover,.knop--olijf:focus-visible{
  background:var(--primary-ink);color:var(--surface);
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(42,37,31,.16);
}
.knop--rand:hover,.knop--rand:focus-visible{background:var(--primary-ink);color:var(--surface)}
.knop:active{transition-duration:var(--t-druk);transform:translateY(0) scale(.985)}
.hamburger,.paneel__klap{transition:transform var(--t-druk) var(--ease)}
.hamburger:active,.paneel__klap:active{transform:scale(.92)}
.nav__link:active,.paneel__rij a:active,.voet a:active,.gegevens a:active{opacity:.7}
.groep .nav__chev{transition:transform .2s var(--ease)}
.groep:hover .nav__chev,
.groep:focus-within .nav__chev{transform:rotate(180deg)}

/* ---------- 7. het mobiele paneel vouwt open ----------
   Het paneel kwam als één blok binnen en dat voelde als een deur. Nu valt het
   doek open: de rijen klappen om hun bovenrand naar beneden, één voor één,
   40ms uit elkaar. Op een gesloten paneel staat visibility:hidden, dus er is
   niets focusbaar zolang het dicht is. */
.paneel__lijst{perspective:900px;perspective-origin:50% 0}
.paneel__rij,.paneel .knop{
  opacity:0;
  transform-origin:50% 0;
  transform:rotateX(-42deg);
  transition:opacity 220ms var(--optil),transform 260ms var(--optil);
}
.paneel[data-open="true"] .paneel__rij,
.paneel[data-open="true"] .knop{
  opacity:1;transform:none;
  transition-delay:calc(120ms + var(--i,0) * 40ms);
}

/* ---------- 8. formulier ----------
   Er wordt niets verplicht gesteld: alle vijf de velden staan in de bron als
   (optional). Er wordt alleen gecontroleerd of wat iemand invult ook kán
   kloppen. De ruimte voor de melding is hieronder gereserveerd; zou hij in de
   stroom staan, dan schoof het hele formulier omlaag zodra iemand een
   typefout maakt. */
.veld{position:relative;padding-bottom:26px;margin-bottom:0}
.veld input,.veld textarea{
  transition:border-color 160ms var(--ease),background-color 160ms var(--ease);
}
.veld input:focus,.veld textarea:focus{border-color:var(--primary-ink);background:var(--surface)}
.veld--goed input,.veld--goed textarea{border-color:var(--primary)}
.veld--fout input,.veld--fout textarea{border-color:var(--accent-ink)}
/* Vanaf de onderrand rekenen, niet vanaf top:100%. Het bevattende blok van
   een absoluut geplaatst element is het OPVULvak van de ouder, dus 100% ligt
   ónder de gereserveerde ruimte en de melding landde op het label van het
   volgende veld. Gemeten: 20,5px overlap. */
.veld-melding{
  position:absolute;left:0;right:0;top:auto;bottom:4px;
  margin:0;
  font-size:.8125rem;line-height:1.35;font-weight:700;
  color:var(--accent-ink);
  opacity:0;transform:translate3d(0,-4px,0);
  transition:opacity 180ms var(--ease),transform 180ms var(--ease);
  pointer-events:none;
}
.veld--fout .veld-melding{opacity:1;transform:none}
/* Het teken dat het klopt is een ruitje, geen rondje: dezelfde steek als in
   de prijslijsten. */
.veld-steek{
  position:absolute;right:16px;bottom:45px;
  width:9px;height:9px;background:var(--thread);
  transform:rotate(45deg) scale(0);
  transition:transform 200ms var(--optil);
  pointer-events:none;
}
.veld--goed .veld-steek{transform:rotate(45deg) scale(1)}
/* in een tekstvak van 132px hoog hoort de steek bij de eerste regel te staan */
.veld--tekstvak .veld-steek{bottom:auto;top:42px}

/* ---------- 9. aanraakscherm ----------
   Geen aanwijzer, dus geen hoek om op te tillen. In plaats daarvan zakt de
   lap iets in als je hem aanraakt: hetzelfde gevoel, andere richting. */
@media (hover:none){
  .kaart,.dienst,.product-card{--rx:0deg;--ry:0deg}
  .kaart:active,.dienst:active,.product-card:active{transform:scale(.987)}
  .kaart::before,.dienst::before{transform:translateZ(0) translate3d(3px,3px,0)}
  .dienst:hover{transform:none}
  .dienst:hover::after{--stik:1}
  .stiksel:hover{outline-offset:var(--stitch-offset)}
}

/* ---------- 10. minder beweging ----------
   Alles uit, niet afgezwakt. In deze doelgroep zitten mensen die misselijk
   zijn van de zwangerschap; bewegingsgevoeligheid is hier bovengemiddeld. */
@media (prefers-reduced-motion:reduce){
  .kaart,.dienst,.product-card,.blok__tekst{
    --rx:0deg!important;--ry:0deg!important;--op:0px!important;
    --kz:0px!important;--rvy:0px!important;
    transform:none!important;
  }
  .kaart::before,.dienst::before,.dienst::after{transform:none!important}
  .dienst__foto,.kaart__titel,.kaart__prijs,.kaart__tekstprijs,
  .kaart .knop,.product-card__media img{transform:none!important}
  .hero__img{transform:scale(1.1)!important}
  .blok__beeld img,.beeldband img,.duo figure img{transform:scale(1.06)!important}
  .paneel__rij,.paneel .knop{opacity:1!important;transform:none!important}
  .stiksel:hover,.stiksel:focus-within{outline-offset:var(--stitch-offset)}
}
.rm .kaart,.rm .dienst,.rm .product-card,.rm .blok__tekst{transform:none!important}
.rm .kaart::before,.rm .dienst::before,.rm .dienst::after{transform:none!important}
.rm .dienst__foto,.rm .kaart__titel,.rm .kaart__prijs,
.rm .kaart__tekstprijs,.rm .kaart .knop{transform:none!important}
.rm .hero__img{transform:scale(1.1)!important}
.rm .blok__beeld img,.rm .beeldband img,.rm .duo figure img{transform:scale(1.06)!important}
.rm .paneel__rij,.rm .paneel .knop{opacity:1!important;transform:none!important}