/* ===== Design tokens (gedeeld) ===== */
:root{
  --bg-0:#F8F7F5; --bg-1:#F4F1EC; --bg-2:#FFFFFF;
  --text:#2B2620; --muted:#5E554A; --hint:#8D8274;
  --accent:#C9A56A; --accent-2:#E1C78A; --accent-3:#F2D9A3;
  --accent-4:#7C6FF0; --accent-5:#8B7CD6; --accent-6:#675CE6;
  --lav:#8F83F7; --lav-2:#B7AEFF; --lav-3:#E2DEFF;
  --border: rgba(43,38,32,.12);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 18px 48px rgba(22,18,14,.12);
  --header-h:64px; --radius:18px;
}

/* ===== Baseline ===== */
html,body{height:100%;scroll-behavior:smooth;overflow-x:hidden}
*{box-sizing:border-box}
img,video,svg{max-width:100%;height:auto}
.container{max-width:1120px}
@media (max-width:576.98px){ .container{padding-inline:16px} }
body{
  min-height:100dvh;display:flex;flex-direction:column;background:var(--bg-0);
  color:var(--text);
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-size:clamp(16px,15px + .35vw,18px); line-height:1.72;
}
main{flex:1;position:relative;z-index:1}
h1,h2,h3,h4{font-family:"Marcellus",serif;letter-spacing:.2px}
a{text-decoration:none;color:var(--lav)} a:hover{color:var(--lav-2)}
:focus-visible{outline:3px solid rgba(183,174,255,.45); outline-offset:2px}

/* ===== Header (gedeeld) ===== */
.header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.75);
  backdrop-filter:blur(10px);border-bottom:1px solid rgba(201,165,106,.25)
}
.navbar{min-height:var(--header-h)}
.navbar .nav-link{color:var(--muted);font-weight:700}
.navbar .nav-link:hover{color:var(--text)}
.navbar-toggler {background-color:var(--text);}
.logo{
  font-family:"Space Grotesk",sans-serif;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));-webkit-background-clip:text;color:transparent
}
.brand-moon{color:var(--accent-2);filter:drop-shadow(0 2px 8px rgba(201,165,106,.35))}
.btn-lang{
  display:inline-flex;align-items:center;gap:.55rem;background:#FFF;color:#2B2620;border:1px solid rgba(201,165,106,.45);
  border-radius:12px;padding:.6rem .9rem;font-weight:800;line-height:1;text-transform:uppercase;letter-spacing:.02em;
}
.btn-lang:hover{background:#FBFAF8}
.btn-lang:focus-visible{box-shadow:0 0 0 3px rgba(183,174,255,.35),0 0 0 6px rgba(201,165,106,.25)}
.dropdown-menu.lang-menu{
  right:0;left:auto;background:#FFF!important;color:#2B2620!important;border:1px solid rgba(201,165,106,.35);
  border-radius:12px;min-width:13rem;max-height:60vh;overflow:auto;box-shadow:0 18px 48px rgba(15,13,11,.12)
}
.dropdown-menu.lang-menu .dropdown-item{color:#2B2620!important;padding:.85rem 1rem;font-weight:800;letter-spacing:.01em}
.dropdown-menu.lang-menu .dropdown-item.active{background:rgba(201,165,106,.18)!important;color:#2B2620!important}
.dropdown-menu.lang-menu .dropdown-item:hover,
.dropdown-menu.lang-menu .dropdown-item:focus{
  background:rgba(183,174,255,.18)!important;color:#2B2620!important;outline:none
}

/* ===== Footer (gedeeld) ===== */
footer{border-top:1px solid rgba(201,165,106,.22); background:var(--bg-1)}
footer .muted{color:var(--muted)}
footer a{color:var(--lav)} footer a:hover{color:var(--lav-2)}

/* Neutrale, links-uitgelijnde title-star voor o.a. footer-kolommen */
.title-star{ position:relative; padding-left:1.15rem; display:inline-block; line-height:1.15; }
.title-star::before{ content:"✦"; position:absolute; left:0; top:.1em; font-size:1em; color:var(--lav-2); text-shadow:0 0 18px rgba(183,174,255,.35); }

/* ===== Knoppen (gedeeld basis) ===== */
.btn{
  --h:52px; --r:14px;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  height:var(--h); padding:0 1.15rem; border-radius:var(--r);
  font-weight:800; letter-spacing:.01em; line-height:1;
  border:1px solid transparent;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-sm{ --h:44px; padding:0 .9rem; border-radius:12px; font-weight:800; }
.btn-cta{
  background:var(--accent-4); color:#fff; font-weight:800; border:0;
  box-shadow:0 10px 28px rgba(124,111,240,.24);
}
.btn-cta:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(143,131,247,.35); }
.btn-cta:active{ transform:translateY(0); box-shadow:0 6px 16px rgba(143,131,247,.28); }
.btn-ghost:hover{ background:#fff; border-color:rgba(43,38,32,.18); }

@media (max-width:576.98px){
  .btn-cta,.btn-ghost{width:100%}
}
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1050; /* boven modals = 1055, dus prima */
  background: var(--bg-2, #fff);
  border-top: 1px solid rgba(0,0,0,.08);
}
body.cookie-open {
  padding-bottom: 80px; /* hoogte banner: responsief bijv. 60–100px */
}