/* ================================================================
   EnjoyToCarry — demo 6 "Doorkijk"
   Richting 6 uit design/tokens.md. Structuur uit design/demo6-architectuur.md.

   Signatuur: de boog is geen vorm maar een RUIMTE. Frame vooraan, foto erachter,
   een vlak daar weer achter. Je kijkt er doorheen in plaats van ernaar.
   Alleen transform en opacity bewegen. Geen bibliotheken.
   ================================================================ */

/* ---------- lettertypen, lokaal gehost (geen Google Fonts CDN) ---------- */
@font-face{
  font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/bricolage-grotesque-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:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/bricolage-grotesque-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:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;
  src:url(../fonts/figtree-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:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;
  src:url(../fonts/figtree-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;
}

/* ---------- tokens ---------- */
:root{
  --bg:#F1F6F7;
  --surface:#FFFFFF;
  --surface-2:#E4EEF0;
  --mat:#E8EFF1;
  --primary:#6DDB96;
  --primary-ink:#0C5B4E;
  --accent:#6BC6D8;
  --accent-ink:#14607D;
  --text:#14232A;
  --muted:#56686F;
  --border:#D6E2E4;
  --border-strong:#6E8C95;
  --focus:#0C5B4E;
  --sill:linear-gradient(90deg,var(--primary),var(--accent));
  --lichtboog:linear-gradient(168deg,var(--primary),var(--accent));

  --font-head:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Figtree',system-ui,sans-serif;
  --h1:clamp(2.25rem,5.4vw,3.5rem);
  --h2:clamp(1.7rem,3.8vw,2.5rem);
  --h3:1.1875rem;
  --price:clamp(2rem,4.6vw,2.6rem);
  --lead:1.1875rem;
  --body:1.0625rem;
  --small:.8125rem;
  --lh-head:1.08;
  --lh-body:1.72;
  --ls-head:-.02em;
  --ls-caps:.07em;

  --b-1:46%;  --wrap-1:680px;  --gap-1:112px;
  --b-2:34%;  --wrap-2:760px;  --gap-2:100px;
  --b-3:23%;  --wrap-3:840px;  --gap-3:88px;
  --b-4:13%;  --wrap-4:920px;  --gap-4:76px;
  --b-5:5%;   --wrap-5:1000px; --gap-5:64px;
  --b:var(--b-3);
  --b-dicht:2%;

  --measure:64ch;
  --wrap:920px;
  --wrap-max:1080px;
  --section-y:clamp(64px,10vw,112px);
  --radius-card:28px 28px 14px 14px;
  --radius-btn:26px 26px 8px 8px;
  --radius-media:40px 40px 10px 10px;
  --radius-field:10px;
  --frame:10px;
  --sill-h:7px;
  --header-h:64px;
  --shadow:0 1px 2px rgba(20,35,42,.05),0 14px 34px rgba(20,35,42,.07);
  --ease:cubic-bezier(.16,1,.3,1);

  /* ---- diepte. Compensatieschaal = perspectief/(perspectief - z), zodat een
     laag die naar achteren gaat op zijn plek blijft en pas bij kanteling
     zichtbaar dieper ligt. Perspectief = 1200px. ---- */
  --pers:1200px;
  --z-foto:-26px;   --s-foto:1.0222;
  --z-achter:-70px; --s-achter:1.0619;
  --z-gloed:-46px;  --s-gloed:1.0398;
  --kant-dicht:7deg;   /* stand van de boog vóór hij opengaat */
  --kantel-max:5deg;   /* muisvolgende kanteling, maximum */
}
/* Op mobiel terughoudender: minder diepte, minder kanteling, geen derde laag. */
@media(max-width:767px){
  :root{
    --pers:900px;
    --z-foto:-13px;   --s-foto:1.0146;
    --z-achter:-34px; --s-achter:1.0392;
    --z-gloed:-24px;  --s-gloed:1.0274;
    --kant-dicht:4deg;
  }
}

/* ---------- 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:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:var(--body);line-height:var(--lh-body);
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
svg{display:block}
a{color:var(--primary-ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--text);margin:0 0 .55em;text-wrap:balance}
h1{font-size:var(--h1);font-weight:600;line-height:var(--lh-head);letter-spacing:var(--ls-head)}
h2{font-size:var(--h2);font-weight:600;line-height:1.15;letter-spacing:-.015em}
h3{font-size:var(--h3);font-weight:500;line-height:1.3}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
.lead{font-size:var(--lead);line-height:1.62}
.klein{font-family:var(--font-body);font-weight:600;font-size:var(--small);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted);line-height:1.5}
.gedempt{color:var(--muted)}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.wrap--breed{width:min(100% - 40px,var(--wrap-max))}
.wrap--smal{width:min(100% - 40px,var(--wrap-1))}
.measure{max-width:var(--measure)}
.vak{padding-block:var(--section-y)}
.vak--kort{padding-block:clamp(40px,6vw,64px)}
.midden{text-align:center;margin-inline:auto}

.skip-link{
  position:absolute;left:12px;top:-100px;z-index:100;background:var(--surface);
  color:var(--primary-ink);padding:12px 18px;border-radius:var(--radius-btn);
  font-weight:600;text-decoration:none;box-shadow:var(--shadow);
}
.skip-link:focus{top:10px}

/* ================================================================
   DE BOOG als ruimte
   .boogruimte  draagt de maat en het perspectief (layout, dus CLS-veilig)
   .kantel      muisvolgende kanteling
   .boog        het witte frame, kantelt open bij binnenkomst
   .boog__achter / .boog__foto / .boog__gloed  liggen erachter in Z
   ================================================================ */
.boogruimte{
  position:relative;aspect-ratio:var(--ar,3/4);
  width:min(100%,var(--bw,100%));margin-inline:auto;
  perspective:var(--pers);perspective-origin:50% 42%;
}
.kantel{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
  transition:transform .34s var(--ease);
}
.kantel:hover{will-change:transform}
/* meebewegende schaduw: alleen transform, nooit box-shadow animeren */
.boogruimte::before{
  content:"";position:absolute;inset:16px 10px 2px;border-radius:26px;
  box-shadow:0 22px 46px rgba(20,35,42,.20);opacity:0;pointer-events:none;
  transform:translate3d(var(--sx,0px),var(--sy,0px),0);
  transition:opacity .34s var(--ease),transform .34s var(--ease);
}
.boogruimte:hover::before{opacity:1}

.boog{
  /* GEEN ondoorzichtige achtergrond. De foto ligt op translateZ(-26px) en zou
     daar anders achter verdwijnen: het frame lag letterlijk over de doorkijk heen.
     Het witte frame wordt nu als ring om de foto getekend (zie .boog__foto), zodat
     er echt een opening is om doorheen te kijken. */
  position:absolute;inset:0;background:transparent;box-shadow:var(--shadow);
  transform-style:preserve-3d;
  transform:translateZ(var(--z,0px)) rotateX(var(--kant,0deg));
  border-radius:50% 50% 16px 16px / var(--b) var(--b) 16px 16px;
  transition:transform .9s var(--ease),border-radius .9s var(--ease);
}
.boog__foto{
  position:absolute;inset:var(--frame);overflow:hidden;font-size:0;line-height:0;
  transform:translateZ(var(--z-foto)) scale(var(--s-foto));
  border-radius:50% 50% 8px 8px / var(--b) var(--b) 8px 8px;
  transition:border-radius .9s var(--ease);
  background:var(--mat);
}
.boog__foto{
  /* het witte frame als ring om de opening, in plaats van een vlak erachter */
  box-shadow:0 0 0 var(--frame) var(--surface);
}
.boog__foto img{
  position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;
  will-change:transform;
}
.boog__achter{
  position:absolute;inset:var(--frame);background:var(--surface-2);
  transform:translateZ(var(--z-achter)) scale(var(--s-achter));
  border-radius:50% 50% 8px 8px / var(--b) var(--b) 8px 8px;
  transition:border-radius .9s var(--ease);
}
/* de vensterbank blijft in het frame-vlak, vóór de verzonken foto */
.boog::after{
  content:"";position:absolute;left:var(--frame);right:var(--frame);bottom:var(--frame);
  height:var(--sill-h);border-radius:0 0 8px 8px;pointer-events:none;
  background:var(--sill);background-size:200% 100%;
  transition:height .26s var(--ease),background-position .26s var(--ease);
}
.boogruimte:hover .boog::after{height:11px;background-position:100% 0}

/* De lichtboog is zelf al mint-naar-turquoise: een vensterbank erop is onzichtbaar. */
.boog--licht{background:var(--lichtboog)}
.boog--licht::after{display:none}
.boog__gloed{
  position:absolute;inset:6%;
  background:radial-gradient(58% 44% at 50% 30%,rgba(255,255,255,.62),rgba(255,255,255,0) 72%);
  transform:translateZ(var(--z-gloed)) scale(var(--s-gloed));
  border-radius:50% 50% 12px 12px / var(--b) var(--b) 12px 12px;
  transition:border-radius .9s var(--ease);
}

/* Startstand vóór het openen. Alleen als JS draait, zodat de pagina zonder
   script gewoon in de eindstand staat in plaats van scheef en dicht. */
.js .boog{
  --kant:var(--kant-dicht);
  border-radius:50% 50% 16px 16px / var(--b-dicht) var(--b-dicht) 16px 16px;
}
.js .boog__foto,.js .boog__achter,.js .boog__gloed{
  border-radius:50% 50% 8px 8px / var(--b-dicht) var(--b-dicht) 8px 8px;
}
.js .boog.in{--kant:0deg;border-radius:50% 50% 16px 16px / var(--b) var(--b) 16px 16px}
.js .boog.in .boog__foto,.js .boog.in .boog__achter,.js .boog.in .boog__gloed{
  border-radius:50% 50% 8px 8px / var(--b) var(--b) 8px 8px;
}

/* ---------- kopregel ---------- */
.site-header{
  position:sticky;top:0;z-index:60;height:var(--header-h);background:transparent;
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease);
}
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--sill);
  opacity:0;transition:opacity .3s var(--ease);
}
.site-header.is-vast{background-color:var(--surface);box-shadow:0 2px 22px rgba(20,35,42,.09)}
.site-header.is-vast::after{opacity:1}
.kopbalk{height:var(--header-h);display:flex;align-items:center;gap:14px}
.chip{
  width:48px;height:48px;border-radius:50%;background:#fff;flex:0 0 auto;
  display:grid;place-items:center;box-shadow:0 1px 3px rgba(20,35,42,.16);
  border:0;padding:0;cursor:pointer;color:var(--text);
}
.chip img{width:38px;height:38px;border-radius:50%}
.merk{display:flex;align-items:center;gap:11px;text-decoration:none}
.merknaam{
  font-family:var(--font-head);font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;
  color:var(--text);
}
@media(max-width:479px){.merknaam{display:none}}

.nav{margin-left:auto;display:none}
.nav__lijst{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav__link{
  position:relative;display:flex;align-items:center;gap:5px;height:44px;padding:0 13px;
  font-weight:500;font-size:.9375rem;color:var(--text);text-decoration:none;
}
.nav__link::after{
  content:"";position:absolute;left:50%;bottom:5px;width:0;height:7px;
  transform:translateX(-50%);background:var(--primary);border-radius:14px 14px 0 0;
  transition:width .2s var(--ease);
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{width:14px}
.nav__groep{position:relative}
.nav__sub{
  position:absolute;top:calc(100% - 2px);left:0;min-width:262px;list-style:none;margin:0;
  padding:8px 0 0;background:var(--surface);border:1px solid var(--border);
  border-radius:20px 20px 12px 12px;box-shadow:var(--shadow);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.nav__groep:hover .nav__sub,.nav__groep:focus-within .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub a{display:block;padding:11px 18px;color:var(--text);text-decoration:none;font-size:.9375rem}
.nav__sub a:hover{background:var(--surface-2)}
.nav__sub::after{content:"";display:block;height:5px;background:var(--sill);margin-top:8px}
.kop-cta{margin-left:10px;min-height:42px;padding:0 20px;font-size:.9375rem;
  border-radius:22px 22px 7px 7px}

.hamburger{margin-left:auto}
.hamburger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;
  box-shadow:0 -6px 0 var(--text),0 6px 0 var(--text)}
@media(min-width:1024px){
  .nav{display:block}
  .hamburger{display:none}
}

/* ---------- mobiel paneel ---------- */
.paneel{
  position:fixed;inset:0;z-index:70;background:var(--bg);
  transform:translateY(-100%);transition:transform .38s var(--ease);
  overflow-y:auto;overscroll-behavior:contain;visibility:hidden;
}
.paneel.is-open{transform:none;visibility:visible}
.paneel__binnen{min-height:100%;display:flex;flex-direction:column;
  width:min(100% - 40px,var(--wrap-max));margin-inline:auto;padding-bottom:26px}
.paneel__top{height:var(--header-h);display:flex;align-items:center;gap:14px}
.paneel__top .chip{margin-left:auto}
.paneel__lijst{list-style:none;margin:14px 0 0;padding:0}
.paneel__rij{display:flex;align-items:center;border-top:1px solid var(--border);padding:0}
.paneel__lijst>li:last-child .paneel__rij{border-bottom:1px solid var(--border)}
.paneel__link{
  flex:1;min-height:56px;display:flex;align-items:center;
  font-family:var(--font-head);font-weight:500;font-size:1.375rem;letter-spacing:-.01em;
  color:var(--text);text-decoration:none;
}
.paneel__uit{
  flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;color:var(--primary-ink);
}
.paneel__uit svg{transition:transform .25s var(--ease)}
.paneel__uit[aria-expanded="true"] svg{transform:rotate(180deg)}
.paneel__sub{list-style:none;margin:0;padding:0 0 10px 14px;display:none}
.paneel__sub.is-open{display:block}
.paneel__sub a{display:flex;align-items:center;min-height:48px;color:var(--text);
  text-decoration:none;font-size:1.0625rem}
.paneel__voet{margin-top:auto;padding-top:24px}

/* ---------- knoppen ---------- */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 26px;border:0;cursor:pointer;text-decoration:none;
  background:var(--primary-ink);color:#fff;
  font-family:var(--font-body);font-weight:600;font-size:1rem;line-height:1.2;
  border-radius:var(--radius-btn);
  transition:border-radius .22s var(--ease),transform .22s var(--ease);
}
.knop:hover{border-radius:18px 18px 8px 8px;transform:translateY(-2px)}
.knop:active{transform:scale(.985)}
.knop--vol{width:100%}
.knop svg{flex:0 0 auto}

/* de enige knop van de pagina blijft binnen duimbereik zodra zijn kaart weg is.
   Hetzelfde DOM-element, nooit een kloon: knoptelling.py telt elk voorkomen. */
.plakhouder{min-height:48px}
@media(max-width:900px){
  .plakhouder.is-vast .knop{
    position:fixed;left:16px;right:16px;bottom:16px;width:auto;z-index:55;
    box-shadow:0 10px 30px rgba(20,35,42,.28);
  }
}

/* ---------- tekstlink met pijl ---------- */
.ga{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  font-weight:600;color:var(--primary-ink);text-decoration:none;
}
.ga span{text-decoration:underline;text-underline-offset:4px}
.ga svg{transition:transform .22s var(--ease)}
.ga:hover svg{transform:translateX(4px)}

/* ---------- hero met drieluik ---------- */
.hero{padding-top:clamp(18px,4vw,34px);padding-bottom:clamp(40px,7vw,72px)}
.drieluik{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.6vw,16px);
  align-items:end;margin-bottom:clamp(28px,5vw,52px);
}
.hero h1{margin-bottom:.4em}
.hero__tekst{font-size:var(--lead);line-height:1.62;max-width:var(--measure);
  margin-inline:auto}

/* ---------- de reis: vijf momenten ---------- */
.reis{padding-bottom:var(--section-y)}
.moment{width:min(100% - 40px,var(--wrap-m,var(--wrap-3)));margin-inline:auto;text-align:center}
.moment + .moment{margin-top:var(--gap-m,88px)}
.moment__boog{margin:0 auto clamp(22px,3.4vw,34px)}
.moment h2{margin-bottom:.35em}
.moment__regel{font-size:var(--lead);line-height:1.55;color:var(--muted);
  max-width:var(--measure);margin-inline:auto}
.moment__woorden{
  list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
.moment__woorden li{
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  border-radius:16px 16px 6px 6px;padding:7px 15px;font-size:.9375rem;font-weight:500;
}
.moment__prijs{margin:22px 0 4px;display:flex;flex-direction:column;align-items:center;gap:2px}
.moment__actie{margin-top:6px}

/* prijs */
.prijs{
  font-family:var(--font-head);font-weight:700;font-size:var(--price);line-height:1;
  letter-spacing:-.02em;color:var(--accent-ink);margin:0;
}
.prijs--m{font-size:clamp(1.6rem,3.4vw,2rem)}
.prijs-oud{font-size:1.125rem;color:var(--muted);font-family:var(--font-body);
  font-weight:500;display:block;margin-bottom:2px}

/* ---------- kaarten (diensten-index) ---------- */
.diensten{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.diensten{grid-template-columns:repeat(4,1fr)}}
.dienst{display:flex;perspective:900px}
.dienst__link{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:16px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:50% 50% 14px 14px / 13% 13% 14px 14px;
  padding:26px 18px 24px;text-decoration:none;color:var(--text);text-align:center;
  box-shadow:var(--shadow);position:relative;transform-style:preserve-3d;
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
  transition:transform .3s var(--ease),border-color .26s var(--ease);
}
.dienst__link:hover{border-color:var(--border-strong);will-change:transform}
.dienst__link::after{
  content:"";position:absolute;left:18px;right:18px;bottom:0;height:5px;
  border-radius:0 0 8px 8px;background:var(--sill);background-size:200% 100%;
  transition:height .26s var(--ease),background-position .26s var(--ease);
}
.dienst__link:hover::after{height:8px;background-position:100% 0}
.dienst__icoon{width:88px;height:88px;border-radius:50%;overflow:hidden;background:var(--mat);
  flex:0 0 auto;transform:translateZ(18px)}
.dienst__icoon img{width:100%;height:100%;object-fit:cover}
.dienst__naam{font-family:var(--font-head);font-weight:600;font-size:1.0625rem;line-height:1.25}

/* ---------- verhuurband ---------- */
.band{background:var(--surface);border-block:1px solid var(--border)}
.band__grid{display:grid;gap:clamp(26px,4vw,44px);align-items:center}
@media(min-width:860px){.band__grid{grid-template-columns:1.05fr .95fr}}
.band__fotos{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;perspective:900px}
.band__foto{
  aspect-ratio:4/5;background:var(--mat);border-radius:26px 26px 8px 8px;overflow:hidden;
  display:grid;place-items:center;
  transform:translateZ(var(--dz,0px)) rotateY(var(--dr,0deg));
  transition:transform .5s var(--ease);
}
.band__foto img{width:100%;height:100%;object-fit:contain;padding:7px}
.band__prijs{display:flex;align-items:baseline;gap:12px;margin:18px 0 6px;flex-wrap:wrap}

/* ---------- prijskaarten ---------- */
.kaarten{list-style:none;margin:0;padding:0;display:grid;gap:22px;align-items:stretch}
@media(min-width:720px){.kaarten--2,.kaarten--3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.kaarten--3{grid-template-columns:repeat(3,1fr)}}
.kaarten>li{display:flex;position:relative;perspective:1000px}
.kaarten>li::before{
  content:"";position:absolute;inset:18px 10px 2px;border-radius:24px;
  box-shadow:0 22px 48px rgba(20,35,42,.18);opacity:0;pointer-events:none;
  transform:translate3d(var(--sx,0px),var(--sy,0px),0);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.kaarten>li:hover::before{opacity:1}
.kaart{
  flex:1;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-card);
  box-shadow:var(--shadow);overflow:hidden;
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
  transition:transform .3s var(--ease);
}
.kaart:hover{will-change:transform}
.kaart:active{transform:scale(.99)}
/* Kaart met de plakknop erin: geen perspective en geen transform op de kaart.
   Allebei maken een element tot bevattend blok voor position:fixed, waardoor
   de knop niet meer aan de onderkant van het scherm zou blijven staan. */
.kaarten--enkel>li{perspective:none}
.kaarten--enkel>li::before{display:none}
.kaarten--enkel .kaart,.kaarten--enkel .kaart:hover,.kaarten--enkel .kaart:active{
  transform:none;will-change:auto;
}
.kaart__kop{
  background:var(--surface-2);border-radius:var(--radius-card);
  padding:24px 22px 26px;text-align:center;position:relative;
}
.kaart__kop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background-image:var(--sill)}
/* tweede, niet-talige aanduiding naast het <s>-element bij een actieprijs */
.kaart__kop--actie::after{
  height:10px;background-repeat:no-repeat;
  background-image:linear-gradient(90deg,var(--primary),var(--accent)),
                   linear-gradient(var(--primary),var(--primary));
  background-size:100% 5px,100% 3px;
  background-position:0 0,0 7px;
}
.kaart__kop--licht{background-image:var(--lichtboog)}
.kaart__kop--licht::before{
  content:"";position:absolute;inset:0;background:var(--surface-2);opacity:.78;
  border-radius:inherit;
}
.kaart__kop--licht>*{position:relative}
.kaart__titel{margin:0 0 14px;font-size:1.25rem;font-weight:600;color:var(--text)}
.kaart__prijsplek{min-height:3.2rem;display:flex;flex-direction:column;justify-content:center;gap:4px}
.kaart__variabel{
  font-family:var(--font-head);font-weight:500;font-size:1.1875rem;line-height:1.4;
  color:var(--primary-ink);margin:0;
}
.kaart__bijregel{font-size:.9375rem;line-height:1.45;color:var(--muted);margin:10px auto 0;max-width:34ch}
.kaart__body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1;gap:18px}
.kaart__body>p{margin:0}
.kaart__knop{margin-top:auto}

/* ---------- lijsten ---------- */
.lijst{list-style:none;margin:0;padding:0}
.lijst li{display:flex;gap:12px;padding:9px 0;align-items:flex-start;line-height:1.55}
/* het opsommingsteken staat in de brontekst: dat teken zelf wordt het boogje */
.lijst__boog{
  flex:0 0 auto;display:inline-block;width:9px;height:6px;margin-top:.55em;
  background:var(--primary);border-radius:9px 9px 0 0;
  font-size:0;line-height:0;overflow:hidden;
}
/* lijsten zonder teken in de bron: eigen boogje */
.lijst--eigen li{position:relative;padding-left:21px;display:block}
.lijst--eigen li::before{
  content:"";position:absolute;left:0;top:.72em;width:9px;height:6px;
  background:var(--primary);border-radius:9px 9px 0 0;
}
@media(min-width:640px){
  .lijst--twee{columns:2;column-gap:34px}
  .lijst--twee li{break-inside:avoid}
}
.vragen{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.vragen li{
  display:flex;gap:2px;font-family:var(--font-head);font-weight:500;
  font-size:clamp(1.0625rem,2.1vw,1.25rem);line-height:1.35;letter-spacing:-.01em;
}
.streep{flex:0 0 auto}

/* ---------- tekstblok ---------- */
.blok{max-width:var(--measure);margin-inline:auto}
.blok h2{margin-bottom:.4em}

/* ---------- over mij, tijdlijn ---------- */
.tijdlijn{position:relative;margin:0;padding:0;list-style:none}
.tijdlijn::before{
  content:"";position:absolute;left:5px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,var(--primary),var(--accent));border-radius:2px;
}
.tijdlijn li{position:relative;padding-left:32px}
.tijdlijn li + li{margin-top:26px}
.tijdlijn li::before{
  content:"";position:absolute;left:0;top:.72em;width:12px;height:8px;
  background:var(--primary);border-radius:12px 12px 0 0;
}
.tijdlijn li:last-child::before{background:var(--accent)}
.anker{font-family:var(--font-head);font-weight:700;color:var(--accent-ink);font-size:1.08em}
.zwaar{font-size:clamp(1.125rem,2.2vw,1.3125rem);line-height:1.62}

/* ---------- productraster ---------- */
.producten{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.producten{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.producten{grid-template-columns:repeat(4,1fr)}}
.producten>li{display:flex;perspective:900px}
.product{
  flex:1;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
  transition:transform .3s var(--ease);
}
.product:hover{will-change:transform}
.product__media{
  aspect-ratio:4/5;background:var(--mat);display:grid;place-items:center;overflow:hidden;
  border-radius:var(--radius-media);
}
.product__media img{width:100%;height:100%;object-fit:contain;padding:10px}
.product__body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.product__naam{font-family:var(--font-head);font-weight:500;font-size:1rem;line-height:1.3;margin:0}
.product__prijs{font-family:var(--font-head);font-weight:700;font-size:1.25rem;color:var(--accent-ink)}
.product__tekst{font-size:.875rem;line-height:1.55;color:var(--muted);margin:0}

/* ---------- contactgegevens ---------- */
.gegevens{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.gegevens li{display:flex}
.gegevens a,.gegevens span{display:flex;align-items:center;gap:11px;min-height:44px;
  color:inherit;text-decoration:none}
.gegevens a:hover{text-decoration:underline;text-underline-offset:3px}
.gegevens svg{width:20px;height:20px;flex:0 0 auto;color:var(--primary-ink)}
.groot-contact{display:grid;gap:10px;margin:20px 0}
.groot-contact a{
  display:flex;align-items:center;gap:12px;min-height:56px;padding:0 20px;
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:22px 22px 8px 8px;color:var(--primary-ink);text-decoration:none;
  font-weight:600;font-size:1.0625rem;transition:transform .22s var(--ease);
}
.groot-contact a:hover{background:var(--surface-2);transform:translateY(-2px)}
.groot-contact svg{width:22px;height:22px;flex:0 0 auto}

/* ---------- formulier ---------- */
.formulier{display:grid;gap:18px}
.veld{display:grid;gap:7px}
.veld label{font-weight:600;font-size:.9375rem}
.opt{font-weight:400;color:var(--muted)}
.veld input,.veld textarea{
  width:100%;min-height:48px;padding:12px 14px;font:inherit;font-size:16px;
  color:var(--text);background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--radius-field);
}
.veld textarea{min-height:132px;resize:vertical}
.veld input:focus,.veld textarea:focus{border:2px solid var(--primary-ink);outline-offset:2px}
.melding{margin:0;padding:14px 16px;background:var(--surface-2);border-radius:12px;
  font-size:.9375rem;line-height:1.55}

/* ---------- reviewplek (leeg meegeleverd, zie README) ---------- */
.reviews{list-style:none;margin:0;padding:0;display:grid;gap:20px}
@media(min-width:820px){.reviews{grid-template-columns:repeat(2,1fr)}}
.review{
  background:var(--surface);border:1px solid var(--border);
  border-radius:26px 26px 12px 12px;padding:26px 24px 22px;position:relative;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px;
}
.review::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:5px;
  border-radius:0 0 8px 8px;background:var(--sill)}
.review__quote{margin:0;font-family:var(--font-head);font-weight:500;
  font-size:1.1875rem;line-height:1.45;color:var(--text)}
.review__wie{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-top:auto}
.review__naam{font-weight:600;color:var(--text)}
.review__plaats{font-size:var(--small);letter-spacing:var(--ls-caps);text-transform:uppercase;
  font-weight:600;color:var(--muted)}

/* ---------- voettekst ---------- */
.site-footer{background:var(--surface);border-top:1px solid var(--border);padding-block:52px 30px}
.voet-grid{display:grid;gap:34px}
@media(min-width:760px){.voet-grid{grid-template-columns:1.2fr 1fr 1fr}}
.voet-lijst{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.voet-lijst a{display:flex;align-items:center;min-height:40px;color:var(--text);
  text-decoration:none;font-size:.9375rem}
.voet-lijst a:hover{text-decoration:underline;text-underline-offset:3px}
.voet-kop{font-family:var(--font-head);font-weight:600;font-size:1rem;margin:0 0 8px;color:var(--text)}
.sociaal{display:flex;gap:10px;margin-top:14px}
.sociaal a{width:44px;height:44px;display:grid;place-items:center;
  border-radius:14px 14px 6px 6px;background:var(--surface-2);color:var(--primary-ink)}
.sociaal a:hover{background:var(--mat)}
.voet-onder{
  margin-top:30px;padding-top:18px;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;
  font-size:.875rem;color:var(--muted);
}
.voet-onder a{display:inline-flex;align-items:center;gap:8px;min-height:40px;color:var(--primary-ink)}

/* ---------- scroll-reveal ---------- */
[data-rv]{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-rv].in{opacity:1;transform:none}

/* ================================================================
   prefers-reduced-motion: alles uit. Geen parallax, geen kanteling,
   geen 3D. De pagina staat volledig statisch en compleet.
   ================================================================ */
.rm [data-rv]{opacity:1!important;transform:none!important}
.rm .kantel,.rm .kaart,.rm .product,.rm .dienst__link{transform:none!important;transition:none!important}
.rm .boog{
  --kant:0deg!important;--z:0px!important;transform:none!important;transition:none!important;
  border-radius:50% 50% 16px 16px / var(--b) var(--b) 16px 16px!important;
}
.rm .boog__foto,.rm .boog__achter,.rm .boog__gloed{
  transform:none!important;transition:none!important;
  border-radius:50% 50% 8px 8px / var(--b) var(--b) 8px 8px!important;
}
.rm .boog__foto img{transform:none!important;top:0!important;height:100%!important;will-change:auto}
.rm .boogruimte::before,.rm .kaarten>li::before{display:none}
.rm .band__foto{transform:none!important}
.rm .dienst__icoon{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;
  }
  .boog__foto img{top:0;height:100%}
}

/* ---------- kleine schermen ---------- */
@media(max-width:479px){
  .diensten{grid-template-columns:1fr}
  .band__fotos{grid-template-columns:repeat(2,1fr)}
  .voet-onder{flex-direction:column;align-items:flex-start}
}