:root{
  --paars:#2d1a3c;
  --paars-licht:#3d2850;
  --paars-diep:#1f1129;
  --goud:#c3910b;
  --goud-licht:#dfb43a;
  --goud-zacht:#f6edd3;
  --room:#faf7f1;
  --wit:#ffffff;
  --tekst:#2a2430;
  --tekst-zacht:#6b6273;
  --lijn:#e6dfd2;
  --radius:14px;
  --schaduw:0 10px 30px rgba(45,26,60,.12);
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--tekst);background:var(--room);line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
.wrap>*,.twee>*,.provisie>*,.contact-blok>*,.hero .wrap>*,.kaarten>*,.assortiment>*,.doelgroepen>*{min-width:0}
a{color:var(--paars)}
h1,h2,h3{font-weight:600;line-height:1.15;margin:0 0 .5em;letter-spacing:.01em}
h1{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:500}
h2{font-size:clamp(1.6rem,3vw,2.3rem);color:var(--paars)}
h3{font-size:1.2rem;color:var(--paars)}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.kop-label{display:inline-block;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--goud);font-weight:600;margin-bottom:.8rem}
.sectie{padding:clamp(56px,8vw,104px) 0}
.sectie.licht{background:var(--wit)}
.sectie.paars{background:var(--paars);color:#efe8f3}
.sectie.paars h2,.sectie.paars h3{color:var(--goud-licht)}
.intro{max-width:720px;font-size:1.12rem;color:var(--tekst-zacht)}
.sectie.paars .intro{color:#d9cfe2}

/* knoppen */
.knop{display:inline-block;background:var(--goud);color:var(--wit);text-decoration:none;font-weight:600;padding:.95em 1.7em;border-radius:999px;border:0;cursor:pointer;font-size:1rem;transition:transform .15s,background .15s;box-shadow:0 6px 18px rgba(195,145,11,.35)}
.knop:hover{background:var(--goud-licht);transform:translateY(-1px)}
.knop.licht{background:transparent;color:var(--wit);border:2px solid rgba(255,255,255,.55);box-shadow:none}
.knop.licht:hover{border-color:var(--wit);background:rgba(255,255,255,.08)}
.knop-rij{display:flex;gap:14px;flex-wrap:wrap}

/* navigatie */
.nav{position:sticky;top:0;z-index:50;background:rgba(45,26,60,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.nav .merk{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--wit)}
.nav .merk img{height:38px;width:auto}
.nav .merk span{letter-spacing:.3em;font-size:.85rem;font-weight:600;color:var(--goud-licht)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px}
.nav ul a{color:#e9e1f0;text-decoration:none;font-size:.95rem}
.nav ul a:hover{color:var(--goud-licht)}
.nav .knop{padding:.6em 1.2em;font-size:.9rem;white-space:nowrap}
@media (max-width:860px){.nav ul{display:none}}

/* hero */
.hero{position:relative;background:var(--paars);color:var(--wit);overflow:hidden}
.hero .driehoeken{position:absolute;inset:0;opacity:.55;background-image:url("img/driehoeken.svg");background-size:420px auto;background-repeat:repeat;mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.9) 55%,rgba(0,0,0,1) 100%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.9) 55%,rgba(0,0,0,1) 100%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(48px,7vw,96px)}
.hero .logo{width:min(260px,60%);margin-bottom:28px}
.hero p.lead{font-size:1.2rem;color:#e4dbea;max-width:540px}
.hero .foto{position:relative}
.hero .foto img{border-radius:var(--radius);box-shadow:0 30px 60px rgba(0,0,0,.45);aspect-ratio:4/5;height:auto;object-fit:cover;object-position:50% 35%;width:100%}
.hero .badge{position:absolute;left:-18px;bottom:28px;background:var(--goud);color:var(--paars-diep);padding:14px 18px;border-radius:12px;font-weight:600;line-height:1.25;box-shadow:0 10px 25px rgba(0,0,0,.35);max-width:230px}
.hero .badge small{display:block;font-weight:400;font-size:.8rem;opacity:.85}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero .foto{max-width:420px}.hero .badge{left:12px}}

/* usp-balk */
.usps{background:var(--paars-diep);color:#e9e1f0}
.usps .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.usps div{padding:22px 18px;border-left:1px solid rgba(255,255,255,.08);font-size:.95rem}
.usps div:first-child{border-left:0}
.usps strong{display:block;color:var(--goud-licht);font-size:1.25rem;font-weight:600}
@media (max-width:860px){.usps .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.usps div{border-left:0;border-top:1px solid rgba(255,255,255,.08)}}

/* kolommen en kaarten */
.twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.twee img{border-radius:var(--radius);box-shadow:var(--schaduw);width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media (max-width:860px){.twee{grid-template-columns:1fr;gap:28px}}
.kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:36px}
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);padding:28px 24px;box-shadow:0 4px 14px rgba(45,26,60,.05)}
.sectie.paars .kaart{background:var(--paars-licht);border-color:rgba(255,255,255,.1);color:#e9e1f0;box-shadow:none}
.kaart .nr{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--goud-zacht);color:var(--goud);font-weight:700;font-size:1.1rem;margin-bottom:16px}
.sectie.paars .kaart .nr{background:rgba(195,145,11,.18);color:var(--goud-licht)}
.kaart p{margin:0;color:var(--tekst-zacht);font-size:.98rem}
.sectie.paars .kaart p{color:#d2c7db}

/* vinkjes-lijst */
.vinkjes{list-style:none;padding:0;margin:0 0 1.2em}
.vinkjes li{padding-left:34px;position:relative;margin-bottom:.65em}
.vinkjes li::before{content:"";position:absolute;left:0;top:.35em;width:20px;height:20px;border-radius:50%;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='10' fill='%23c3910b'/><path d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}

/* assortiment */
.assortiment{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:36px}
.assortiment .groep{background:var(--wit);border-radius:var(--radius);padding:26px 24px;border-top:4px solid var(--goud)}
.assortiment ul{margin:0;padding:0 0 0 1.1em;color:var(--tekst-zacht);columns:2;column-gap:18px;font-size:.95rem}
.assortiment li{break-inside:avoid;margin-bottom:.3em}
@media (max-width:480px){.assortiment ul{columns:1}}

/* voor wie */
.doelgroepen{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:30px}
.doelgroep{position:relative;border-radius:var(--radius);overflow:hidden;min-height:220px;display:flex;align-items:flex-end;background:var(--paars-licht)}
.doelgroep img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.doelgroep span{position:relative;padding:20px;color:var(--wit);font-weight:600;font-size:1.15rem;width:100%;background:linear-gradient(to top,rgba(31,17,41,.95),rgba(31,17,41,0))}

/* provisie-blok */
.provisie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.provisie .reken{background:var(--wit);border-radius:var(--radius);padding:30px 28px;box-shadow:var(--schaduw);border:1px solid var(--lijn)}
.provisie .reken dl{display:grid;grid-template-columns:1fr auto;gap:10px 18px;margin:0}
.provisie .reken dt{color:var(--tekst-zacht)}
.provisie .reken dd{margin:0;font-weight:600;color:var(--paars);text-align:right}
.provisie .reken dd.goud{color:var(--goud)}
.provisie .reken .noot{font-size:.85rem;color:var(--tekst-zacht);margin:18px 0 0;border-top:1px solid var(--lijn);padding-top:14px}
@media (max-width:860px){.provisie{grid-template-columns:1fr}}

/* faq */
.faq{max-width:820px}
.faq details{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:0 22px;margin-bottom:12px}
.faq summary{cursor:pointer;padding:18px 0;font-weight:600;color:var(--paars);list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--goud);font-size:1.4rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--tekst-zacht);margin:0 0 18px}

/* formulier */
.formulier{background:var(--wit);border-radius:var(--radius);padding:clamp(24px,4vw,40px);box-shadow:var(--schaduw);border:1px solid var(--lijn)}
.formulier .rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:640px){.formulier .rij{grid-template-columns:1fr}}
.veld{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.veld label{font-size:.9rem;font-weight:600;color:var(--paars)}
.veld input,.veld select,.veld textarea{font:inherit;padding:.75em .9em;border:1px solid #cfc6bb;border-radius:10px;background:#fcfbf8;color:var(--tekst);width:100%}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:2px solid var(--goud);outline-offset:1px;border-color:var(--goud)}
.veld textarea{min-height:110px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulier .klein{font-size:.85rem;color:var(--tekst-zacht);margin:0 0 18px}
.contact-blok{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:40px;align-items:start}
@media (max-width:860px){.contact-blok{grid-template-columns:1fr}}
.contact-blok .gegevens p{margin-bottom:.6em}
.contact-blok .gegevens a{color:var(--goud-licht);text-decoration:none}
.contact-blok .gegevens a:hover{text-decoration:underline}

/* footer */
footer{background:var(--paars-diep);color:#b9adc4;font-size:.88rem;padding:40px 0 28px}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between;align-items:flex-start}
footer a{color:#d9cfe2;text-decoration:none}
footer a:hover{color:var(--goud-licht)}
footer img{height:34px;width:auto;margin-bottom:10px}
footer .foto-credits{width:100%;border-top:1px solid rgba(255,255,255,.08);padding-top:16px;font-size:.78rem;color:#8e819a;line-height:1.7}

/* bedankt */
.bedankt{min-height:70vh;display:flex;align-items:center}
.bedankt .wrap{max-width:700px;text-align:center}
.bedankt .logo{width:200px;margin:0 auto 30px}

/* vrijstaande automaat in hero */
.hero .foto.vrij{display:flex;justify-content:center;align-items:flex-end;position:relative}
.hero .foto.vrij::before{content:"";position:absolute;left:50%;bottom:-40px;width:420px;height:420px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(195,145,11,.45),rgba(195,145,11,0))}
.hero .foto.vrij img{position:relative;width:auto;max-height:560px;height:auto;aspect-ratio:auto;border-radius:0;box-shadow:none;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));object-fit:contain}
.hero .foto.vrij .badge{left:auto;right:0;bottom:60px}
@media (max-width:860px){.hero .foto.vrij img{max-height:440px}.hero .foto.vrij .badge{right:8px}}
/* vrijstaande afbeelding in tweekolom */
.twee img.vrij{aspect-ratio:auto;border-radius:0;box-shadow:none;filter:drop-shadow(0 20px 30px rgba(45,26,60,.25));width:auto;max-width:100%;max-height:520px;margin:0 auto;object-fit:contain}
/* twee kaarten naast foto */
.kaarten.twee-kol{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.kaart h3{margin-top:0}
.kaart .ic{width:46px;height:46px;border-radius:12px;background:var(--goud-zacht);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--goud);font-size:1.4rem}
.sectie.paars .kaart .ic{background:rgba(195,145,11,.18);color:var(--goud-licht)}
/* reisgadgets */
.gadgets{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center}
.gadgets .beeld{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:end}
.gadgets .beeld img.foto{border-radius:var(--radius);box-shadow:var(--schaduw);aspect-ratio:4/3;object-fit:cover;width:100%}
.gadgets .beeld img.dispenser{height:300px;width:auto;filter:drop-shadow(0 16px 24px rgba(45,26,60,.3))}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.2em;padding:0;list-style:none}
.tags li{background:var(--goud-zacht);color:var(--paars);border-radius:999px;padding:.35em .9em;font-size:.9rem;font-weight:600}
@media (max-width:860px){.gadgets{grid-template-columns:1fr}.gadgets .beeld img.dispenser{height:200px}}
/* meer-blok */
.meer{background:linear-gradient(135deg,var(--paars) 0%,var(--paars-licht) 100%);color:#efe8f3;border-radius:var(--radius);padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:36px;align-items:center}
.meer h2{color:var(--goud-licht)}
.meer .vinkjes li{color:#e9e1f0}
.meer img{width:100%;height:auto;max-height:420px;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(0,0,0,.45))}
@media (max-width:860px){.meer{grid-template-columns:1fr}.meer img{max-height:300px}}

.smal{max-width:820px}

.twee img.vierkant{aspect-ratio:1/1;max-width:520px;margin:0 auto}

/* fotostrook */
.galerij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px}
.galerij img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius);box-shadow:var(--schaduw)}
@media (max-width:640px){.galerij{grid-template-columns:repeat(2,minmax(0,1fr))}.galerij img:last-child{display:none}}

/* "is een onderdeel van" onderaan, zoals foldersbestellen.nl */
footer .footer-van{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);color:#d9cfe2;font-size:.95rem}
footer .footer-van img{height:56px;width:auto;margin:0;background:#fff;border-radius:10px;padding:6px 12px}

footer .foto-credits{border-top:0;padding-top:0}

.provisie .reken dd.wij{color:#5b3a7d}
.provisie .reken dd.goud{color:var(--goud)}