/* Sakina Trading — gedeelde stijl voor alle pagina's (home + doelgroeppagina's).
   Lettertypes staan apart in /fonts/fonts.css (ook gebruikt door erp-demo.html). */
:root{
  /* huisstijl uit sakina-logo-min.png: wordmark #5A1A1B · accent #F5AE30 */
  --bruin:#31120F;
  --bruin-diep:#1C0908;
  --bruin-kaart:#3A1712;
  --logo-bruin:#5A1A1B;
  --ivoor:#F5EFE3;
  --ivoor-zacht:rgba(245,239,227,.68);
  --goud:#F5AE30;
  --goud-donker:#C98416;
  --lijn:rgba(245,239,227,.14);
  --radius:14px;
  --max:1200px;
  --ease:cubic-bezier(.22,1,.36,1);

  /* cookiebanner in de huisstijl — variabelen worden gelezen door cookiebanner.js */
  --cc-bg:rgba(49,18,15,.97);
  --cc-ink:#F5EFE3;
  --cc-ink-soft:rgba(245,239,227,.68);
  --cc-border:rgba(245,239,227,.16);
  --cc-accent:#F5AE30;
  --cc-accent-ink:#4A1516;
  --cc-btn-bg:transparent;
  --cc-radius:14px;
  --cc-radius-btn:100px;
  --cc-font:'Inter',system-ui,sans-serif;
  --cc-font-kop:'Fraunces',serif;
}
/* extra diepte voor de cookiebanner, in lijn met de rest van de site */
#zw-cc{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 60px rgba(0,0,0,.55);color-scheme:dark}
#zw-cc-reopen{color:var(--ivoor)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bruin-diep);
  color:var(--ivoor);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Fraunces',serif;font-weight:600;line-height:1.05;text-wrap:balance}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- nav (enkel de hoofdnavigatie #nav; het kruimelpad is ook een <nav>) ---------- */
#nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;
  transition:background .4s,box-shadow .4s,padding .4s;
}
#nav.vast{box-shadow:0 1px 0 var(--lijn);padding:12px 28px}
/* Achtergrond + blur op een aparte laag: een backdrop-filter op nav zelf maakt van nav het
   kader voor het fixed mobiele menu, dat na scrollen dan maar 66 px hoog werd. */
#nav::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(28,9,8,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;transition:opacity .4s;
}
#nav.vast::before{opacity:1}
.logo{font-family:'Fraunces',serif;font-weight:700;font-size:1.25rem;letter-spacing:.02em;text-decoration:none}
.logo em{font-style:normal;color:var(--goud)}
.nav-links{display:flex;gap:32px;align-items:center;list-style:none;margin-left:auto}
.nav-rechts{display:flex;align-items:center;gap:16px;margin-left:22px}
/* taalkiezer: knop toont de huidige taal, klik toont de andere */
.taal{position:relative}
.taal-trigger{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:1px solid var(--lijn);border-radius:100px;
  padding:7px 13px;cursor:pointer;font-family:inherit;
  font-size:.74rem;font-weight:600;letter-spacing:.08em;
  color:var(--ivoor);
  transition:border-color .25s,color .25s,background .25s;
}
.taal-trigger:hover{border-color:rgba(245,174,48,.55);color:var(--goud)}
.taal-trigger:focus-visible{outline:2px solid var(--goud);outline-offset:3px}
.taal.open .taal-trigger{background:rgba(245,174,48,.12);border-color:rgba(245,174,48,.6);color:var(--goud)}
.taal-trigger .pijl{transition:transform .3s var(--ease)}
.taal.open .taal-trigger .pijl{transform:rotate(180deg)}
.taal-lijst{
  position:absolute;top:calc(100% + 10px);right:0;min-width:152px;
  display:flex;flex-direction:column;
  background:rgba(49,18,15,.97);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--lijn);border-radius:12px;overflow:hidden;
  box-shadow:0 20px 46px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s .25s;
}
.taal.open .taal-lijst{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.taal-optie{
  padding:12px 16px;font-size:.88rem;font-weight:500;
  text-decoration:none;color:var(--ivoor-zacht);white-space:nowrap;
  transition:background .2s,color .2s;
}
.taal-optie + .taal-optie{border-top:1px solid var(--lijn)}
.taal-optie:hover{background:rgba(245,174,48,.12);color:var(--goud)}
.nav-links a{text-decoration:none;font-size:.9rem;font-weight:500;color:var(--ivoor-zacht);transition:color .25s}
.nav-links a:hover{color:var(--ivoor)}
.knop{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--goud);color:#4A1516;
  font-weight:600;font-size:.92rem;text-decoration:none;
  padding:13px 26px;border-radius:100px;
  transition:transform .3s var(--ease),background .25s,box-shadow .3s;
  box-shadow:0 4px 24px rgba(245,174,48,.25);
}
.knop:hover{transform:translateY(-2px);background:#FFC14D;box-shadow:0 8px 32px rgba(245,174,48,.35)}
.knop svg{transition:transform .3s var(--ease)}
.knop:hover svg{transform:translateX(4px)}
.knop-ghost{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--ivoor);font-weight:500;font-size:.92rem;text-decoration:none;
  padding:13px 26px;border-radius:100px;border:1px solid var(--lijn);
  transition:border-color .25s,background .25s;
}
.knop-ghost:hover{border-color:rgba(245,239,227,.4);background:rgba(245,239,227,.05)}
.nav-cta{padding:10px 22px;font-size:.85rem}
.hamburger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.hamburger span{display:block;width:24px;height:2px;background:var(--ivoor);margin:5px 0;transition:.3s}

/* ---------- hero ---------- */
header{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:140px 24px 90px;
}
.hero-bg{
  position:absolute;inset:0;z-index:-2;overflow:hidden;
  background:radial-gradient(ellipse 90% 70% at 70% 20%,#6B2521 0%,var(--bruin-diep) 65%);
}
.hero-bg img{
  width:100%;height:115%;object-fit:cover;
  opacity:.28;
  will-change:transform;
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,9,8,.55) 0%,rgba(28,9,8,.35) 45%,var(--bruin-diep) 100%);
}
.hero-inner{
  max-width:var(--max);margin:0 auto;width:100%;
  display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
}
/* de gouden gloed rond het logo (.zweef::before) liep tussen 1000 en 1200 px rechts buiten beeld */
#top{overflow-x:clip}
/* 3D-logo in de hero */
.hero-logo{perspective:900px;display:grid;place-items:center}
.zweef{
  position:relative;width:min(440px,100%);
  transform-style:preserve-3d;
  animation:zweef 7s ease-in-out infinite;
  will-change:transform;
}
.zweef::before{
  content:"";position:absolute;inset:-14%;z-index:-1;
  background:radial-gradient(closest-side,rgba(245,174,48,.30),rgba(245,174,48,.08) 55%,transparent 78%);
  filter:blur(12px);
}
.logo3d{
  width:100%;height:auto;
  transform-style:preserve-3d;
  transition:transform .25s ease-out;
  filter:
    drop-shadow(0 30px 46px rgba(0,0,0,.55))
    drop-shadow(0 10px 18px rgba(0,0,0,.4))
    drop-shadow(0 2px 4px rgba(245,174,48,.25));
}
@keyframes zweef{
  0%,100%{transform:translateY(0) rotate(-1.4deg)}
  50%{transform:translateY(-16px) rotate(1.4deg)}
}
.vooraf{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Inter',system-ui,sans-serif;
  font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;line-height:1.6;
  color:var(--goud);margin-bottom:28px;
}
/* zoekterm in de H1, visueel dezelfde regel als de .vooraf erboven */
h1 .vooraf{display:flex;max-width:none}
.vooraf::before{content:"";width:36px;height:1px;background:var(--goud)}
h1{font-size:clamp(3rem,8.5vw,6.8rem);letter-spacing:-.02em;max-width:12ch}
h1 .accent{color:var(--goud);font-style:italic;font-weight:500}
.hero-sub{
  max-width:52ch;margin:32px 0 44px;
  font-size:clamp(1rem,1.4vw,1.2rem);color:var(--ivoor-zacht);
}
.hero-acties{display:flex;gap:16px;flex-wrap:wrap}
.scroll-hint{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ivoor-zacht);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.scroll-hint::after{
  content:"";width:1px;height:44px;
  background:linear-gradient(var(--goud),transparent);
  animation:zak 2.2s var(--ease) infinite;
}
@keyframes zak{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- marquee ---------- */
.marquee{
  border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
  padding:22px 0;overflow:hidden;background:var(--bruin);
  display:flex;
}
.marquee-baan{
  display:flex;gap:56px;flex-shrink:0;
  padding-right:56px;
  animation:schuif 34s linear infinite;
  white-space:nowrap;
}
@keyframes schuif{to{transform:translateX(-100%)}}
.marquee span{
  font-family:'Fraunces',serif;font-size:1.15rem;font-weight:500;
  color:var(--ivoor-zacht);display:inline-flex;align-items:center;gap:56px;
}
.marquee span::after{content:"✦";color:var(--goud);font-size:.8rem}

/* ---------- secties ---------- */
section{padding:110px 0}
.sectiekop{margin-bottom:64px}
.sectiekop h2{font-size:clamp(2.2rem,4.6vw,3.6rem);letter-spacing:-.015em;max-width:20ch}
.sectiekop p{max-width:56ch;color:var(--ivoor-zacht);margin-top:18px;font-size:1.05rem}

/* cijfers */
.cijfers{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--radius);overflow:hidden;
}
.cijfer{background:var(--bruin);padding:44px 36px}
.cijfer strong{
  font-family:'Fraunces',serif;font-weight:600;
  font-size:clamp(2.6rem,5vw,4rem);color:var(--goud);display:block;line-height:1;
}
.cijfer small{display:block;margin-top:12px;font-size:.9rem;color:var(--ivoor-zacht)}

/* assortiment */
.grid-assortiment{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.kaart{
  position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:4/5;text-decoration:none;isolation:isolate;
  border:1px solid var(--lijn);
  background:var(--bruin-kaart);
  grid-column:span 2;
}
.kaart-groot{grid-column:span 3;aspect-ratio:16/10;border-color:rgba(245,174,48,.35)}
.kaart-groot .kaart-tekst h3{font-size:2rem}
.kaart-chip{
  position:absolute;top:20px;left:20px;z-index:1;
  background:var(--goud);color:#4A1516;
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 14px;border-radius:100px;
}
.kaart-media{position:absolute;inset:0;z-index:-1}
.kaart-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);opacity:.85}
.kaart:hover .kaart-media img{transform:scale(1.06)}
.kaart::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(185deg,rgba(28,9,8,0) 30%,rgba(28,9,8,.92) 88%);
}
.kaart-tekst{
  position:absolute;inset:auto 0 0 0;z-index:1;padding:28px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
}
.kaart-tekst h3{font-size:1.5rem;font-weight:600}
.kaart-tekst p{font-size:.85rem;color:var(--ivoor-zacht);margin-top:6px}
.kaart-pijl{
  flex-shrink:0;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(245,239,227,.3);display:grid;place-items:center;
  transition:background .3s,transform .3s var(--ease);
}
.kaart:hover .kaart-pijl{background:var(--goud);border-color:var(--goud);transform:rotate(-45deg)}
.kaart:hover .kaart-pijl svg{stroke:#1A1405}
/* fallback-gradients per categorie als foto niet laadt */
.f-bakkerij{background:linear-gradient(150deg,#8A5A1E,#3F2708)}
.f-diepvries{background:linear-gradient(150deg,#2E4552,#101E26)}
.f-dranken{background:linear-gradient(150deg,#7A3414,#3A1608)}
.f-voeding{background:linear-gradient(150deg,#3B2E17,#20180A)}
.f-snacks{background:linear-gradient(150deg,#3B1D17,#1F0F0B)}
.f-koffie{background:linear-gradient(150deg,#2E2417,#171208)}
.f-conserven{background:linear-gradient(150deg,#43380F,#211B06)}
.f-nonfood{background:linear-gradient(150deg,#3B2B25,#1E130E)}

/* over ons */
.over{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.over-media{
  border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;
  background:linear-gradient(150deg,#5A1A1B,#2A0C0B);
  border:1px solid var(--lijn);position:relative;
}
.over-media img{width:100%;height:100%;object-fit:cover;opacity:.9}
.over-badge{
  position:absolute;left:24px;bottom:24px;
  background:rgba(28,9,8,.85);backdrop-filter:blur(8px);
  border:1px solid var(--lijn);border-radius:12px;padding:16px 22px;
}
.over-badge strong{font-family:'Fraunces',serif;color:var(--goud);font-size:1.6rem;display:block;line-height:1.1}
.over-badge small{font-size:.78rem;color:var(--ivoor-zacht)}
.over-tekst h2{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:24px;letter-spacing:-.015em}
.over-tekst p{color:var(--ivoor-zacht);margin-bottom:18px;max-width:52ch}
.usps{list-style:none;margin:30px 0 38px;display:grid;gap:14px}
.usps li{display:flex;gap:14px;align-items:baseline;font-size:.98rem}
.usps li::before{content:"✦";color:var(--goud);font-size:.75rem;flex-shrink:0}

/* werkwijze */
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:stap}
.stap{
  counter-increment:stap;
  background:var(--bruin);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:40px 34px;position:relative;overflow:hidden;
  transition:transform .4s var(--ease),border-color .3s;
}
.stap:hover{transform:translateY(-6px);border-color:rgba(245,174,48,.45)}
.stap::before{
  content:"0" counter(stap);
  font-family:'Fraunces',serif;font-size:4.4rem;font-weight:600;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(245,174,48,.55);
  display:block;margin-bottom:22px;
}
.stap h3{font-size:1.35rem;margin-bottom:12px}
.stap p{font-size:.93rem;color:var(--ivoor-zacht)}

/* cta-band */
.cta-band{
  position:relative;text-align:center;overflow:hidden;
  border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
  background:radial-gradient(ellipse 70% 100% at 50% 120%,#6B2521 0%,var(--bruin-diep) 70%);
  padding:130px 24px;
}
.cta-band h2{font-size:clamp(2.6rem,6vw,5rem);letter-spacing:-.02em;max-width:16ch;margin:0 auto 22px}
.cta-band h2 em{font-style:italic;font-weight:500;color:var(--goud)}
.cta-band p{color:var(--ivoor-zacht);max-width:46ch;margin:0 auto 42px}

/* contact / footer */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:start}
.contact-lijst{list-style:none;display:grid;gap:0;border-top:1px solid var(--lijn)}
.contact-lijst li{border-bottom:1px solid var(--lijn);padding:22px 0;display:flex;justify-content:space-between;gap:20px;align-items:baseline;flex-wrap:wrap}
.contact-lijst small{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivoor-zacht)}
.contact-lijst a,.contact-lijst span{font-family:'Fraunces',serif;font-size:1.15rem;text-decoration:none}
.contact-lijst a:hover{color:var(--goud)}
footer{border-top:1px solid var(--lijn);padding:34px 24px;background:var(--bruin-diep)}
.footer-inner{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;font-size:.82rem;color:var(--ivoor-zacht)}

/* reveals — enkel met JavaScript verborgen, anders blijft de inhoud gewoon zichtbaar */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.zichtbaar{opacity:1;transform:none}
/* toetsenbord: een blok met TOETSENBORDfocus meteen tonen, niet pas na de invlieg-animatie.
   Bewust :focus-visible en niet :focus-within: een muisklik zou het blok anders laten
   verspringen tussen mousedown en mouseup, waardoor de klik naast de knop valt. */
.js .reveal:has(:focus-visible),.js .reveal:focus-visible{opacity:1;transform:none;transition:none}
.reveal:nth-child(2){transition-delay:.08s}
.reveal:nth-child(3){transition-delay:.16s}
.reveal:nth-child(4){transition-delay:.24s}
.reveal:nth-child(5){transition-delay:.32s}
.reveal:nth-child(6){transition-delay:.4s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:12px}
  .hero-logo{order:-1;justify-items:start}
  .zweef{width:min(240px,60%)}
  .grid-assortiment{grid-template-columns:repeat(2,1fr)}
  .kaart{grid-column:span 1}
  .kaart-groot{grid-column:span 2}
  .over,.contact{grid-template-columns:1fr;gap:44px}
  .stappen{grid-template-columns:1fr}
  .cijfers{grid-template-columns:1fr}
  section{padding:80px 0}
}
/* hamburgermenu al vanaf tabletbreedte: met 5 menu-items + webshop + taalknop past de balk
   (vooral in het Frans) pas vanaf ± 1100 px op één regel */
@media (max-width:1100px){
  .nav-links{
    position:fixed;inset:0;background:rgba(28,9,8,.98);
    flex-direction:column;justify-content:center;gap:34px;
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility 0s .35s;
  }
  .nav-links.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .35s}
  .nav-links a{font-size:1.4rem;font-family:'Fraunces',serif}
  .nav-links a.knop{font-family:'Inter',system-ui,sans-serif;font-size:1rem}
  .hamburger{display:block;z-index:60}
  .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hamburger.open span:nth-child(2){opacity:0}
  .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-rechts{position:relative;z-index:60}  /* taalknop blijft bruikbaar met open menu */
  .scroll-hint{display:none}  /* overlapte op tabletbreedte de knoppen in de hero */
}
@media (max-width:720px){
  /* logo + taalknop + hamburger moeten samen op één regel passen */
  #nav,#nav.vast{padding-left:16px;padding-right:16px}
  .logo{font-size:1.08rem}
  .nav-rechts{position:relative;z-index:60;margin-left:0;gap:10px}  /* taalknop blijft bruikbaar met open menu */
  .taal-trigger{padding:7px 11px;font-size:.7rem;gap:6px}
  .grid-assortiment{grid-template-columns:1fr}
  .kaart,.kaart-groot{aspect-ratio:4/3;grid-column:span 1}
  .kaart-groot .kaart-tekst h3{font-size:1.6rem}
}
@media (max-width:360px){
  /* zeer smalle toestellen: wordmark inkorten zodat taalknop + hamburger passen */
  .logo em{display:none}
  .nav-rechts{gap:8px}
}

/* ---------- veelgestelde vragen ---------- */
.faq-lijst{max-width:900px;margin:0 auto;border-top:1px solid var(--lijn)}
.faq-item{border-bottom:1px solid var(--lijn)}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 4px;
  font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.05rem,2vw,1.28rem);
  line-height:1.3;color:var(--ivoor);
  transition:color .25s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--goud)}
.faq-item summary::after{
  content:"";flex:0 0 auto;width:12px;height:12px;
  border-right:2px solid var(--goud);border-bottom:2px solid var(--goud);
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .3s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq-item[open] summary{color:var(--goud)}
.faq-antwoord{padding:0 4px 24px;color:var(--ivoor-zacht);max-width:70ch}
.faq-antwoord a{color:var(--goud)}

/* ---------- kaart ---------- */
.kaart-blok{
  margin-top:64px;
  border:1px solid var(--lijn);border-radius:var(--radius);
  overflow:hidden;background:var(--bruin-kaart);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.kaart-frame{position:relative;aspect-ratio:16/7;min-height:300px;background:var(--bruin-kaart)}
.kaart-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:grayscale(.32) brightness(.94) contrast(1.05);
  transition:filter .4s var(--ease);
}
.kaart-frame:hover iframe,.kaart-frame:focus-within iframe{filter:none}
/* toestemmingsscherm vóór het laden van Google Maps */
.kaart-gate{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  text-align:center;gap:16px;padding:32px 24px;
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%,rgba(107,37,33,.55),transparent 70%),
    repeating-linear-gradient(45deg,rgba(245,239,227,.03) 0 2px,transparent 2px 9px),
    var(--bruin-kaart);
}
.kaart-gate svg{color:var(--goud);opacity:.9}
.kaart-gate strong{font-family:'Fraunces',serif;font-weight:600;font-size:1.25rem}
.kaart-gate p{color:var(--ivoor-zacht);font-size:.9rem;max-width:44ch}
.kaart-gate .knop{border:0;cursor:pointer;font-family:inherit}
.kaart-gate .gate-link{font-size:.85rem;color:var(--ivoor-zacht);text-decoration:underline;text-underline-offset:3px}
.kaart-gate .gate-link:hover{color:var(--goud)}
.kaart-voet{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 22px;border-top:1px solid var(--lijn);
  font-size:.86rem;color:var(--ivoor-zacht);
}
.kaart-voet a{color:var(--goud);text-decoration:none;font-weight:500}
.kaart-voet a:hover{text-decoration:underline}

/* ---------- zwevende contactknop ---------- */
.fab{position:fixed;right:22px;bottom:22px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  /* de verborgen acties nemen ruimte in: zonder dit ving die onzichtbare zone kliks op de pagina eronder */
  pointer-events:none}
.fab-knop{pointer-events:auto}
.fab-acties{
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.96);pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility 0s .28s;
}
.fab.open .fab-acties{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .28s var(--ease),transform .28s var(--ease)}
.fab-actie{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(49,18,15,.96);border:1px solid var(--lijn);
  color:var(--ivoor);text-decoration:none;
  padding:11px 18px;border-radius:100px;
  font-size:.88rem;font-weight:500;white-space:nowrap;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:border-color .25s,transform .25s var(--ease),color .25s;
}
.fab-actie:hover{border-color:rgba(245,174,48,.55);color:var(--goud);transform:translateX(-3px)}
.fab-actie svg{flex:0 0 auto}
.fab-knop{
  position:relative;
  width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;
  background:#25D366;color:#fff;
  box-shadow:0 10px 32px rgba(37,211,102,.4),0 4px 12px rgba(0,0,0,.35);
  transition:transform .3s var(--ease),box-shadow .3s;
}
.fab-knop:hover{transform:scale(1.06);box-shadow:0 14px 40px rgba(37,211,102,.5),0 4px 12px rgba(0,0,0,.35)}
.fab-knop:focus-visible{outline:3px solid var(--goud);outline-offset:4px}
.fab-knop .icoon-sluit{display:none}
.fab.open .fab-knop{background:var(--bruin-kaart);box-shadow:0 10px 32px rgba(0,0,0,.5)}
.fab.open .fab-knop .icoon-wa{display:none}
.fab.open .fab-knop .icoon-sluit{display:block}
/* zachte puls om de knop op te merken */
.fab-knop::after{
  content:"";position:absolute;width:60px;height:60px;border-radius:50%;
  border:2px solid #25D366;animation:fabpuls 2.8s var(--ease) infinite;pointer-events:none;
}
.fab.open .fab-knop::after,.fab.gebruikt .fab-knop::after{display:none}
@keyframes fabpuls{
  0%{transform:scale(1);opacity:.55}
  70%,100%{transform:scale(1.7);opacity:0}
}
@media (max-width:720px){
  .fab{right:16px;bottom:16px}
  .fab-knop{width:56px;height:56px}
  .fab-knop::after{width:56px;height:56px}
  .kaart-blok{margin-top:44px}
  /* min-height + aspect-ratio dwong hier een breedte van 400 px af (blok viel buiten beeld) */
  .kaart-frame{aspect-ratio:auto;min-height:0;height:340px}
}

/* ---------- toegankelijkheid ---------- */
.skip{
  position:absolute;left:16px;top:-80px;z-index:100;
  background:var(--goud);color:#4A1516;font-weight:600;text-decoration:none;
  padding:10px 20px;border-radius:100px;transition:top .2s;
}
.skip:focus{top:14px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--goud);outline-offset:3px;border-radius:4px}
.kaart-frame{width:100%}

/* ---------- merken ---------- */
.merken{margin-top:64px;padding-top:40px;border-top:1px solid var(--lijn)}
.merken h3{font-size:clamp(1.4rem,2.4vw,1.8rem);margin-bottom:12px}
.merken > p{color:var(--ivoor-zacht);max-width:68ch}
.merken-lijst{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.merken-lijst li{border:1px solid var(--lijn);border-radius:100px;padding:8px 16px;font-size:.88rem;color:var(--ivoor)}
.merken-lijst li.uitgelicht{border-color:rgba(245,174,48,.6);color:var(--goud);font-weight:600}

/* ---------- voor wie (home) + gerelateerde pagina's ---------- */
.voor-wie-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.voor-wie-grid.vier{grid-template-columns:repeat(2,1fr)}
.doelkaart{
  display:flex;flex-direction:column;gap:14px;
  background:var(--bruin);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:36px 32px;text-decoration:none;
  transition:transform .4s var(--ease),border-color .3s;
}
.doelkaart:hover{transform:translateY(-6px);border-color:rgba(245,174,48,.45)}
.doelkaart h3{font-size:1.45rem}
.doelkaart p{color:var(--ivoor-zacht);font-size:.95rem}
.doelkaart .meer{margin-top:auto;padding-top:8px;color:var(--goud);font-weight:600;font-size:.9rem;display:inline-flex;gap:8px;align-items:center}

/* ---------- doelgroeppagina's ---------- */
.sub-hero{
  /* de globale header-regel (home-hero: volle hoogte, flex-centrering) hier uitschakelen */
  display:block;min-height:0;
  position:relative;padding:150px 0 80px;border-bottom:1px solid var(--lijn);
  background:radial-gradient(ellipse 80% 70% at 78% 0%,#6B2521 0%,var(--bruin-diep) 70%);
}
.sub-hero-inner{max-width:var(--max);margin:0 auto;padding:0 24px}  /* zelfde lijn als .wrap */
.kruimel{font-size:.82rem;color:var(--ivoor-zacht);margin-bottom:28px}
.kruimel ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.kruimel li+li::before{content:"/";margin-right:8px;opacity:.5}
.kruimel a{color:var(--ivoor-zacht)}
.kruimel a:hover{color:var(--goud)}
.sub-hero h1{font-size:clamp(2.4rem,6vw,4.6rem);letter-spacing:-.02em;max-width:18ch}
.sub-intro{max-width:62ch;color:var(--ivoor-zacht);font-size:clamp(1rem,1.3vw,1.15rem);margin:28px 0 38px}
.blokken{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.blok{background:var(--bruin);border:1px solid var(--lijn);border-radius:var(--radius);padding:32px 30px}
.blok h3{font-size:1.3rem;margin-bottom:10px}
.blok p{color:var(--ivoor-zacht);font-size:.95rem}
.blok .blok-merken{margin-top:14px;font-size:.84rem;color:var(--goud)}
.tekstblok{max-width:70ch}
.tekstblok p{color:var(--ivoor-zacht);margin-bottom:16px}
.praktisch{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--radius);overflow:hidden;
}
.praktisch > div{background:var(--bruin);padding:30px}
.praktisch small{display:block;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivoor-zacht);margin-bottom:10px}
.praktisch strong,.praktisch a{font-family:'Fraunces',serif;font-size:1.12rem;font-weight:600;text-decoration:none;line-height:1.4}
.praktisch a:hover{color:var(--goud)}

@media (max-width:960px){
  .voor-wie-grid,.blokken{grid-template-columns:1fr 1fr}
  .praktisch{grid-template-columns:1fr}
}
@media (max-width:720px){
  .voor-wie-grid,.voor-wie-grid.vier,.blokken{grid-template-columns:1fr}
  .sub-hero{padding:120px 0 60px}
}

/* ---------- klant worden: aanvraagformulier ---------- */
.aanvraag{
  max-width:760px;display:grid;gap:24px;color-scheme:dark;
  background:var(--bruin);border:1px solid var(--lijn);border-radius:var(--radius);padding:36px 32px;
}
.aanvraag fieldset{border:0;padding:0;margin:0;min-width:0}
/* eigen display-regels (grid/flex) verslaan het hidden-attribuut — hier expliciet afdwingen */
.aanvraag [hidden],.aanvraag-melding[hidden]{display:none!important}
.aanvraag legend{font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;margin-bottom:12px;padding:0}
.aanvraag legend span,.veld label span{font-family:'Inter',system-ui,sans-serif;color:var(--ivoor-zacht);font-weight:400;font-size:.85rem}
.aanvraag-keuze{display:flex;flex-wrap:wrap;gap:10px}
.aanvraag-keuze legend{width:100%}
.aanvraag-keuze label{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--lijn);border-radius:100px;cursor:pointer;font-size:.94rem}
.aanvraag-keuze label:has(input:checked){border-color:var(--goud);background:rgba(245,174,48,.12);color:var(--goud)}
.aanvraag-keuze input{accent-color:var(--goud)}
.aanvraag-zaak{display:grid;gap:16px}
.aanvraag-raster{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.veld{display:grid;gap:6px;align-content:start}
.veld label{font-size:.9rem;font-weight:500}
.veld input,.veld select,.veld textarea{
  font:inherit;color:var(--ivoor);background:var(--bruin-diep);
  border:1px solid rgba(245,239,227,.24);border-radius:10px;padding:12px 14px;width:100%;
}
.veld textarea{resize:vertical}
.veld input:focus-visible,.veld select:focus-visible,.veld textarea:focus-visible,.aanvraag-keuze input:focus-visible{outline:2px solid var(--goud);outline-offset:2px}
.aanvraag [aria-invalid="true"]{border-color:#E5606B}
.veld-fout{color:#F4A0A8;font-size:.86rem}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.aanvraag-privacy{font-size:.86rem;color:var(--ivoor-zacht)}
.aanvraag-privacy a{color:var(--goud)}
.aanvraag button.knop{justify-self:start;border:0;cursor:pointer;font-family:inherit}
.aanvraag-whatsapp{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-top:6px;border-top:1px solid rgba(245,239,227,.12)}
.aanvraag-whatsapp span{font-weight:600}
.aanvraag-whatsapp p{flex-basis:100%;margin:0;font-size:.86rem;color:var(--ivoor-zacht)}
.aanvraag button.knop:disabled{opacity:.6;cursor:wait}
.aanvraag-melding,.aanvraag-bedankt{
  max-width:760px;padding:16px 18px;border-radius:10px;
  background:rgba(245,174,48,.12);border:1px solid rgba(245,174,48,.45);color:var(--ivoor);
}
.aanvraag-melding.fout{background:rgba(229,96,107,.12);border-color:rgba(229,96,107,.55)}
/* zonder JavaScript: na verzenden landt de bezoeker op #bedankt */
.aanvraag-bedankt{display:none;margin-bottom:22px}
.aanvraag-bedankt:target{display:block}
@media (max-width:720px){
  .aanvraag{padding:26px 20px}
  .aanvraag-raster{grid-template-columns:1fr}
}