/* ==========================================================================
   De Kaboutertjes: designsysteem
   Alle kleuren zijn afgeleid uit het logo (kabouter op paddenstoel):
     rood muts/paddenstoel · aqua achtergrondcirkel · denim tuinbroek
     zand buitenrand · wit stippen/streepjes · mosgroen gras
   ========================================================================== */

/* ---------- 0. Lettertypen ----------
   Zelf gehost: geen verzoek naar Google, dus sneller en privacyvriendelijk.
   Alle drie zijn variabele fonts onder de SIL Open Font License (zie LICENSE-*.txt).

   Fraunces heeft een optische-grootte-as (opsz 9-144). Die is er niet voor de
   sier: bij een grote kop horen smallere letters met meer dikteverschil, bij
   een klein kopje juist bredere en rustigere. Eén font doet hier het werk van
   twee. De assen SOFT en WONK staan vast ingebakken op 40 en 1, dus die kosten
   geen bestandsgrootte meer. */
@font-face{
  font-family:'Baloo 2';                 /* het woordmerk, zoals op de gevel */
  src:url('fonts/baloo2-var.woff2') format('woff2-variations');
  font-weight:400 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Fraunces';                /* koppen */
  src:url('fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight:400 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Figtree';                 /* lopende tekst en interface */
  src:url('fonts/figtree-var.woff2') format('woff2-variations');
  font-weight:300 900;font-style:normal;font-display:swap;
}

/* ---------- 1. Tokens ---------- */
:root{
  /* Kabouterrood: muts & paddenstoel (#F40503 in logo, getemperd voor scherm) */
  --red:#DD3327;
  --red-deep:#A81E16;
  --red-ink:#7A150F;
  --red-soft:#FCEAE7;
  --red-tint:#F6C9C3;

  /* Aqua: de cirkel achter de kabouter (#8EDCDD) */
  --aqua:#8EDCDD;
  --aqua-deep:#3AA5AA;
  --aqua-dark:#1B6B70;
  --aqua-ink:#124B4F;
  --aqua-soft:#E9F7F7;

  /* Denim: de tuinbroek (#1690CC / #0F6B8C) */
  --denim:#1690CC;
  --denim-deep:#0F6B8C;
  --denim-ink:#0A4A62;
  --denim-soft:#E6F3FA;

  /* Zand en crème: de buitenrand van het logo (#D2C4AA) */
  --sand:#E8DCC6;
  --sand-deep:#CBB894;
  --cream:#FBF6EC;
  --cream-warm:#F5EDDD;
  --paper:#FFFFFF;

  /* Mos: het gras onder de paddenstoel */
  --moss:#5C9B4E;
  --moss-deep:#3F7336;
  --moss-soft:#EDF4EA;

  /* Signkleuren: exact de letterkleuren van het gevelbord bij de voordeur.
     Alleen voor het woordmerk en de groene bies, niet voor vlakken. */
  --sign-red:#E53935;
  --sign-amber:#F5A623;
  --sign-green:#4CAF50;
  --sign-blue:#42A5F5;
  --sign-purple:#7B1FA2;
  --sign-pink:#E91E63;

  /* Honing: warme accentkleur uit de zandrand */
  --honey:#EFA92B;
  --honey-deep:#96600F;
  --honey-soft:#FDF2DE;

  /* Inkt: warm bruinzwart, nooit koud grijs */
  --ink:#2B2119;
  --ink-2:#5B4E42;
  --ink-3:#6E6153;
  --ink-4:#B6A897;
  --line:#E4D9C6;
  --line-soft:#F0E8DA;

  /* Schaduwen met warme ondertoon */
  --sh-xs:0 1px 2px rgba(43,33,25,.06);
  --sh-sm:0 2px 8px rgba(43,33,25,.07);
  --sh-md:0 8px 22px rgba(43,33,25,.09);
  --sh-lg:0 18px 44px rgba(43,33,25,.12);
  --sh-xl:0 32px 70px rgba(43,33,25,.16);

  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:36px; --r-2xl:48px; --r-full:999px;

  --shell:1200px;
  --gut:clamp(20px,5vw,40px);
  --sec:clamp(64px,9vw,120px);

  --ease:cubic-bezier(.22,1,.36,1);

  /* Paddenstoel-stippen: het herhaalde merkpatroon */
  --dots:radial-gradient(circle at 50% 50%, rgba(255,255,255,.5) 2.6px, transparent 2.8px);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  font-family:'Figtree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(1.0rem,.97rem + .18vw,1.09rem);
  /* 1,72 was te ruim: alinea's vielen uit elkaar en de pagina werd er
     onnodig lang van. 1,62 leest rustiger en compacter. */
  line-height:1.62;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--denim);outline-offset:3px;border-radius:4px}
::selection{background:var(--red);color:#fff}

h1,h2,h3,h4,h5{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  /* Wij zetten de optische grootte zelf per niveau; de browser hoeft hem dus
     niet te raden op basis van de puntgrootte. */
  font-optical-sizing:none;
  font-variation-settings:'opsz' 48;
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.016em;
  color:var(--ink);
  text-wrap:balance;
}
p{text-wrap:pretty}

/* ---------- 3. Layout ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.shell-narrow{max-width:820px}
.section{padding-block:var(--sec);position:relative}
.section-tight{padding-block:clamp(48px,6vw,80px)}

.bg-cream{background:var(--cream)}
.bg-paper{background:var(--paper)}
.bg-sand{background:var(--cream-warm)}
.bg-aqua{background:var(--aqua-soft)}
.bg-moss{background:var(--moss-soft)}

/* Diepe panelen */
.bg-deep{
  /* Eindigt op --aqua-dark en niet op --aqua-deep: wit op #3AA5AA haalt
     maar 2,94:1, onder elke AA-grens. Op #1B6B70 is het 6,21:1. */
  background:linear-gradient(155deg,var(--denim-ink) 0%,var(--denim-deep) 42%,var(--aqua-dark) 100%);
  color:#fff;
}
.bg-deep h1,.bg-deep h2,.bg-deep h3,.bg-deep h4{color:#fff}

/* ---------- 4. Typografie-hulpklassen ---------- */
/* De optische grootte loopt mee met het niveau: hoe groter de kop, hoe smaller
   en contrastrijker de letter. Daardoor hoeft de letterafstand minder ver
   negatief, want de letter is zelf al strakker. */
.display{font-size:clamp(2.45rem,1.5rem + 4.5vw,4.7rem);line-height:1.02;letter-spacing:-.028em;font-variation-settings:'opsz' 144}
.h1{font-size:clamp(2.05rem,1.4rem + 2.9vw,3.5rem);line-height:1.06;letter-spacing:-.024em;font-variation-settings:'opsz' 120}
.h2{font-size:clamp(1.72rem,1.3rem + 2vw,2.75rem);line-height:1.1;letter-spacing:-.02em;font-variation-settings:'opsz' 72}
.h3{font-size:clamp(1.3rem,1.13rem + .74vw,1.68rem);line-height:1.2;letter-spacing:-.014em;font-variation-settings:'opsz' 36}
.h4{font-size:clamp(1.06rem,1rem + .32vw,1.22rem);line-height:1.32;letter-spacing:-.008em;font-variation-settings:'opsz' 18}
.h5{font-size:1rem;line-height:1.38;letter-spacing:-.004em;font-variation-settings:'opsz' 14}

.lede{font-size:clamp(1.06rem,1rem + .44vw,1.3rem);line-height:1.6;color:var(--ink-2)}
.bg-deep .lede{color:rgba(255,255,255,.88)}
.muted{color:var(--ink-3)}
.small{font-size:.87rem;line-height:1.62}
.tiny{font-size:.78rem;line-height:1.55}
.center{text-align:center}

/* Handgeschreven accent binnen een kop */
.script{
  font-family:'Baloo 2','Figtree',cursive;
  font-optical-sizing:auto;
  font-variation-settings:normal;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--red);
}
.bg-deep .script{color:var(--aqua)}

/* Onderstreping in kabouterrood, met de hand getrokken gevoel */
.underline-swash{position:relative;display:inline-block;white-space:nowrap}
.underline-swash::after{
  content:'';position:absolute;left:-2%;right:-2%;bottom:-.16em;height:.34em;
  background:var(--red-tint);border-radius:var(--r-full);z-index:-1;
}

/* ---------- 5. Eyebrow / label ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Figtree',sans-serif;font-size:.735rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;
  padding:7px 15px 7px 12px;border-radius:var(--r-full);
  background:var(--red-soft);color:var(--red-deep);
  border:1px solid var(--red-tint);
}
.eyebrow svg{width:15px;height:15px;flex:none}
.eyebrow-aqua{background:var(--aqua-soft);color:var(--aqua-ink);border-color:#BEE7E8}
.eyebrow-denim{background:var(--denim-soft);color:var(--denim-ink);border-color:#C4E2F3}
.eyebrow-moss{background:var(--moss-soft);color:var(--moss-deep);border-color:#CFE3C8}
.eyebrow-honey{background:var(--honey-soft);color:var(--honey-deep);border-color:#F5DCA9}
.bg-deep .eyebrow{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.26)}

/* ---------- 6. Sectiekop ---------- */
.sec-head{max-width:660px;margin-bottom:clamp(38px,5vw,60px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head .eyebrow{margin-bottom:18px}
.sec-head h2{margin-bottom:16px}
.sec-head p{color:var(--ink-2);font-size:1.06rem}
.bg-deep .sec-head p{color:rgba(255,255,255,.85)}

/* ---------- 7. Knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--r-full);
  font-weight:800;font-size:.945rem;letter-spacing:-.005em;
  border:2px solid transparent;cursor:pointer;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .2s,color .2s,border-color .2s;
  will-change:transform;
}
.btn svg{width:17px;height:17px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(221,51,39,.32)}
.btn-red:hover{background:var(--red-deep);box-shadow:0 12px 28px rgba(221,51,39,.38)}

.btn-denim{background:var(--denim-deep);color:#fff;box-shadow:0 6px 18px rgba(15,107,140,.28)}
.btn-denim:hover{background:var(--denim-ink);box-shadow:0 12px 28px rgba(15,107,140,.34)}

.btn-cream{background:var(--paper);color:var(--red-deep);box-shadow:var(--sh-md)}
.btn-cream:hover{background:#fff;box-shadow:var(--sh-lg)}

.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--paper);border-color:var(--sand-deep)}

.btn-ghost-light{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.38)}
.btn-ghost-light:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.6)}

.btn-sm{padding:10px 19px;font-size:.865rem}
.btn-sm svg{width:15px;height:15px}
.btn-lg{padding:17px 34px;font-size:1.02rem}
.btn-block{width:100%}

/* Tekstlink met pijl */
.link-arrow{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:800;font-size:.92rem;color:var(--red-deep);
  border-bottom:2px solid var(--red-tint);padding-bottom:2px;
  transition:gap .2s var(--ease),border-color .2s,color .2s;
}
.link-arrow svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.link-arrow:hover{gap:11px;border-color:var(--red)}
.link-arrow:hover svg{transform:translateX(2px)}
.bg-deep .link-arrow{color:#fff;border-color:rgba(255,255,255,.4)}

/* ---------- 8. Merkmotieven ---------- */

/* Paddenstoel-stippen als achtergrondpatroon */
.dotted{position:relative}
.dotted::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--dots);
  background-size:34px 34px;
  opacity:.55;
}
.dotted>*{position:relative;z-index:1}

/* Rood-wit streepjespatroon uit het truitje, als fijne scheidingslijn */
.stripe-rule{
  height:8px;border-radius:var(--r-full);
  background:repeating-linear-gradient(115deg,var(--red) 0 12px,#fff 12px 24px);
  box-shadow:inset 0 0 0 1px rgba(43,33,25,.07);
}

/* Aqua cirkel achter beeld, de logo-cirkel */
.halo{position:relative}
.halo::before{
  content:'';position:absolute;z-index:0;
  inset:-8% -8% auto auto;width:74%;aspect-ratio:1;
  background:var(--aqua);border-radius:50%;opacity:.42;
}
.halo>*{position:relative;z-index:1}

/* ---------- 9. Navigatie ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:80;
  padding-block:14px;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),padding .35s var(--ease);
}
.nav .shell{display:flex;align-items:center;gap:20px}
.nav.is-stuck{
  background:rgba(251,246,236,.97);
  backdrop-filter:saturate(1.4) blur(16px);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);
  /* Groene bies onder de balk, hetzelfde detail als op het gevelbord */
  border-bottom:4px solid var(--sign-green);
  box-shadow:0 10px 28px rgba(43,33,25,.08);
  padding-block:9px;
}

.brand{display:flex;align-items:center;gap:12px;margin-right:auto;min-width:0}
.brand-mark{
  width:54px;height:54px;border-radius:17px;overflow:hidden;flex:none;
  box-shadow:0 3px 12px rgba(43,33,25,.18);
  background:var(--sand);
  transition:width .3s var(--ease),height .3s var(--ease);
}
.nav.is-stuck .brand-mark{width:46px;height:46px;border-radius:15px}
.brand-mark img{width:100%;height:100%;object-fit:cover}
/* Het woordmerk is één op één dat van de gevel: Baloo 2, regenboogletters.
   Bewust een ander lettertype dan de koppen, want een logotype hoort eigen te zijn. */
.brand-name{
  font-family:'Baloo 2','Figtree',cursive;
  font-weight:800;font-size:1.42rem;letter-spacing:-.005em;line-height:1.12;
  display:block;
  /* Nooit afbreken: tussen 1160 en 1320px brak "De Kaboutertjes" anders af
     met een losse "s" op de tweede regel. */
  white-space:nowrap;
}
.brand-name span{display:inline-block}
.brand-sub{
  display:block;font-family:'Figtree',sans-serif;font-size:.66rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:-2px;
  white-space:nowrap;
}
/* Regenboogletters exact zoals op de voordeur */
.k1{color:#E53935}.k2{color:#F5A623}.k3{color:#4CAF50}.k4{color:#42A5F5}.k5{color:#7B1FA2}.k6{color:#E91E63}

/* Boven de donkere hero krijgt het woordmerk een licht plaatje, zodat de
   regenboogletters altijd zichtbaar zijn, net als het bord aan de voordeur. */
.nav:not(.is-stuck) .brand{
  background:rgba(251,246,236,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:7px 20px 7px 7px;
  border-radius:var(--r-full);
  border-bottom:3px solid var(--sign-green);
  box-shadow:0 8px 24px rgba(10,40,55,.22);
}
.nav.on-light:not(.is-stuck) .brand{
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:0;border-bottom:0;box-shadow:none;
}
.nav .brand{transition:background .35s var(--ease),padding .35s var(--ease),box-shadow .35s var(--ease)}
.nav:not(.is-stuck) .nav-link{color:rgba(255,255,255,.9)}
.nav:not(.is-stuck) .nav-link:hover{color:#fff}
.nav:not(.is-stuck) .burger span{background:#fff}
/* Op lichte pagina's (subpagina's) altijd donker */
.nav.on-light .brand-name .k1{color:#E53935}
.nav.on-light:not(.is-stuck) .brand-sub{color:var(--ink-3)}
.nav.on-light:not(.is-stuck) .nav-link{color:var(--ink-2)}
.nav.on-light:not(.is-stuck) .burger span{background:var(--ink)}

.nav-links{display:flex;align-items:center;gap:2px;flex-wrap:nowrap;min-width:0}
.nav-link{
  padding:9px 12px;border-radius:var(--r-full);white-space:nowrap;
  font-size:.9rem;font-weight:700;color:var(--ink-2);
  transition:background .2s,color .2s;
}
.nav-link:hover{background:rgba(221,51,39,.09);color:var(--red-deep)}
.nav-link[aria-current]{color:var(--red-deep);background:var(--red-soft)}

.nav-cta{flex:none}

.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0;border-radius:12px;flex:none}
.burger span{display:block;width:23px;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:79;
  background:var(--cream);
  padding:96px var(--gut) 40px;
  display:flex;flex-direction:column;gap:6px;
  overflow-y:auto;
  transform:translateY(-100%);
  transition:transform .42s var(--ease);
  visibility:hidden;
}
.drawer.is-open{transform:none;visibility:visible}
.drawer a{
  font-family:'Fraunces',serif;font-weight:700;font-size:1.5rem;
  padding:12px 0;border-bottom:1px solid var(--line-soft);
}
.drawer a:last-of-type{border-bottom:0}
.drawer .btn{margin-top:20px;font-family:'Figtree',sans-serif;font-size:1rem;border-bottom:0}
/* ---------- 10. Hero ----------
   Licht in plaats van een diep paneel: cremekleurige achtergrond, kop in het
   donkere denim van de tuinbroek met het accentwoord in kabouterrood. Het beeld
   staat in een organische vorm, met getekende accenten eromheen en de kabouter
   uit het logo als mascotte. Onderaan een golf naar de kenmerkenstrip. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(168deg,var(--cream) 0%,#FDFAF3 46%,var(--aqua-soft) 100%);
  padding-top:clamp(120px,12vw,156px);
  padding-bottom:calc(var(--strip-hoogte,108px) + clamp(48px,6vw,86px));
}
.hero::before{
  content:'';position:absolute;inset:0;z-index:-2;
  background-image:radial-gradient(circle at 50% 50%, rgba(203,184,148,.36) 2.4px, transparent 2.6px);
  background-size:38px 38px;opacity:.55;
}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(30px,4.5vw,64px);align-items:center;
}

.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--paper);border:1px solid var(--line);
  padding:7px 17px 7px 11px;border-radius:var(--r-full);
  box-shadow:var(--sh-xs);
  font-size:.79rem;font-weight:800;color:var(--ink-2);margin-bottom:20px;
}
.hero-badge .pip{width:8px;height:8px;border-radius:50%;background:var(--moss);box-shadow:0 0 0 4px rgba(92,155,78,.2);animation:pip 2.4s ease-in-out infinite}
@keyframes pip{0%,100%{opacity:1}50%{opacity:.35}}

.hero h1{
  margin:0 0 12px;color:var(--denim-ink);
  font-size:clamp(2.45rem,1.4rem + 3.6vw,4.3rem);
  line-height:1.03;letter-spacing:-.035em;
}
.hero h1 .script{color:var(--red)}
.hero-tagline{
  font-family:'Baloo 2','Figtree',sans-serif;font-weight:700;
  font-size:clamp(1.08rem,.96rem + .6vw,1.38rem);
  color:var(--aqua-dark);letter-spacing:-.01em;line-height:1.28;margin:0 0 16px;
}
.hero-lede{max-width:46ch;margin:0 0 28px;color:var(--ink-2);font-size:1.02rem;line-height:1.62}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.btn-wit{background:var(--paper);color:var(--ink);border-color:var(--line);box-shadow:var(--sh-xs)}
.btn-wit:hover{background:#fff;border-color:var(--sand-deep);box-shadow:var(--sh-md)}

/* Het beeld in een organische vorm, met een verschoven vlak erachter. */
.hero-beeld{position:relative;margin:0}
.blob,.blob-achter{border-radius:63% 37% 45% 55% / 49% 59% 41% 51%}
.blob{
  position:relative;z-index:1;overflow:hidden;aspect-ratio:1/.92;
  box-shadow:0 26px 60px rgba(10,60,80,.2);
}
.blob img{width:100%;height:100%;object-fit:cover;object-position:54% 40%}
.blob-achter{
  position:absolute;z-index:0;inset:6% -5% -7% 7%;
  background:linear-gradient(150deg,var(--denim) 0%,var(--aqua-deep) 100%);
  opacity:.92;
}

/* De foto brengt zijn eigen getekende accenten mee: het hartje, de stippen
   en de vlaggetjes zitten in het beeld zelf. Er hoeft dus niets omheen. */

/* Golf naar de kenmerkenstrip. */
.hero-golf{position:absolute;z-index:3;left:0;right:0;bottom:calc(var(--strip-hoogte,88px) - 1px);line-height:0}
.hero-golf svg{display:block;width:100%;height:clamp(34px,4.6vw,74px)}

.kenmerken{position:absolute;inset:auto 0 0 0;z-index:3;background:var(--denim-ink)}
.kenmerken ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.kenmerken li{
  display:flex;align-items:center;gap:12px;min-width:0;position:relative;
  padding:clamp(15px,1.7vw,20px) clamp(10px,1.4vw,22px);
}
.kenmerken li+li::before{content:'';position:absolute;left:0;top:26%;bottom:26%;width:1px;background:rgba(255,255,255,.17)}
.kenmerken svg{width:24px;height:24px;flex:none;color:var(--aqua)}
.kenmerken span{display:grid;gap:1px;min-width:0;font-size:.775rem;color:rgba(255,255,255,.68);line-height:1.3}
.kenmerken b{font-family:'Baloo 2','Figtree',sans-serif;font-weight:700;font-size:.97rem;color:#fff;letter-spacing:-.008em}

/* De twee overige inleidende alinea's, direct onder de hero. */
.intro-band{padding-block:clamp(30px,4vw,50px)}
.intro-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,3vw,44px);max-width:96ch;
}
.intro-grid p{color:var(--ink-2);font-size:1rem;line-height:1.62;margin:0}
.intro-grid p:first-child{
  font-size:clamp(1.05rem,1rem + .28vw,1.2rem);line-height:1.56;
  color:var(--ink);font-weight:500;
}
/* ---------- 11. Kerncijfers ---------- */
.figures{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--paper);border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);overflow:hidden;
  position:relative;z-index:5;
}
.figure{padding:clamp(22px,3vw,34px) clamp(14px,2vw,24px);text-align:center;position:relative}
.figure+.figure::before{content:'';position:absolute;left:0;top:24%;bottom:24%;width:1px;background:var(--line-soft)}
.figure-num{
  display:block;font-family:'Fraunces',serif;font-variation-settings:'opsz' 72;
  font-weight:800;font-size:clamp(1.9rem,1.3rem + 1.8vw,2.7rem);line-height:1;letter-spacing:-.026em;
}
.figure-num.c-red{color:var(--red)}
.figure-num.c-honey{color:var(--honey-deep)}
.figure-num.c-denim{color:var(--denim-deep)}
.figure-num.c-moss{color:var(--moss-deep)}
.figure-lbl{display:block;margin-top:7px;font-size:.82rem;font-weight:700;color:var(--ink-3);line-height:1.4}

/* ---------- 12. Kaarten ---------- */
.card{
  background:var(--paper);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,32px);
  border:1px solid var(--line-soft);
  box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
  height:100%;
}
.card-hover:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:var(--sand-deep)}
.card h3{margin-bottom:9px}
.card p{color:var(--ink-2);font-size:.965rem}

.card-icon{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  margin-bottom:18px;flex:none;
}
.card-icon svg{width:26px;height:26px}
.ic-red{background:var(--red-soft);color:var(--red-deep)}
.ic-aqua{background:var(--aqua-soft);color:var(--aqua-dark)}
.ic-denim{background:var(--denim-soft);color:var(--denim-deep)}
.ic-moss{background:var(--moss-soft);color:var(--moss-deep)}
.ic-honey{background:var(--honey-soft);color:var(--honey-deep)}

.grid{display:grid;gap:clamp(16px,2vw,24px)}
.grid > *{min-width:0}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- 12b. Wegwijzer: het kaartenraster onder de kerncijfers ----------
   Vijf kaarten die de bezoeker meteen laten zien wat er op de pagina staat.
   Elke kaart is in zijn geheel klikbaar; de pijl is decoratie, geen tweede link. */
.wegwijs{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(11px,1.4vw,17px);
}
.wegwijs > *{min-width:0}
.wijzer{
  position:relative;display:flex;flex-direction:column;gap:9px;
  padding:clamp(17px,2vw,22px) clamp(14px,1.7vw,19px) clamp(40px,4.4vw,46px);
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r);
  box-shadow:var(--sh-xs);color:inherit;text-decoration:none;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.wijzer::before{
  content:'';position:absolute;inset:0 0 auto 0;height:4px;
  background:var(--wijzer-bies,var(--wijzer-kleur,var(--denim)));
}
.wijzer:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--sand-deep)}
.wijzer-icoon{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:var(--wijzer-vlak,var(--denim-soft));color:var(--wijzer-kleur,var(--denim-deep));
}
.wijzer-icoon svg{width:22px;height:22px}
.wijzer-kop{
  font-family:'Baloo 2','Figtree',sans-serif;font-weight:700;
  font-size:1.01rem;line-height:1.24;letter-spacing:-.005em;color:var(--ink);
}
.wijzer p{font-size:.845rem;line-height:1.5;color:var(--ink-3);margin:0}
.wijzer-pijl{
  position:absolute;right:14px;bottom:14px;width:27px;height:27px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--wijzer-vlak,var(--denim-soft));color:var(--wijzer-kleur,var(--denim-deep));
  transition:transform .3s var(--ease);
}
.wijzer:hover .wijzer-pijl{transform:translateX(3px)}
.wijzer-pijl svg{width:14px;height:14px}
.w-red{--wijzer-kleur:var(--red);--wijzer-vlak:var(--red-soft)}
/* Bies en pictogram scheiden waar de leeskleur te donker is voor een streep. */
.w-honey{--wijzer-kleur:var(--honey-deep);--wijzer-bies:var(--honey);--wijzer-vlak:var(--honey-soft)}
.w-denim{--wijzer-kleur:var(--denim-deep);--wijzer-bies:var(--denim);--wijzer-vlak:var(--denim-soft)}
.w-moss{--wijzer-kleur:var(--moss-deep);--wijzer-bies:var(--moss);--wijzer-vlak:var(--moss-soft)}
.w-aqua{--wijzer-kleur:var(--aqua-ink);--wijzer-bies:var(--aqua-deep);--wijzer-vlak:var(--aqua-soft)}

/* ---------- 13. Groepen (de vier bosgroepen) ---------- */
.group-card{
  position:relative;overflow:hidden;
  background:var(--paper);border-radius:var(--r-lg);
  border:1px solid var(--line-soft);box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  display:flex;flex-direction:column;
}
.group-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.group-top{
  padding:26px 24px 22px;position:relative;overflow:hidden;
  background:var(--tone,var(--aqua-soft));
}
.group-top::before{
  content:'';position:absolute;inset:0;
  background-image:var(--dots);background-size:26px 26px;opacity:.7;
}
.group-emblem{
  width:60px;height:60px;border-radius:50%;background:var(--paper);
  display:grid;place-items:center;margin-bottom:14px;position:relative;
  box-shadow:0 4px 14px rgba(43,33,25,.1);
}
.group-emblem svg{width:32px;height:32px}
.group-top h3{position:relative;margin-bottom:2px}
.group-age{
  position:relative;display:inline-block;
  font-size:.8rem;font-weight:800;letter-spacing:.04em;
  color:var(--ink-2);
}
.group-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:14px;flex:1}
.group-body p{font-size:.94rem;color:var(--ink-2);margin:0}
.group-ratio{
  margin-top:auto;display:flex;align-items:center;gap:9px;
  padding:11px 14px;border-radius:var(--r-sm);
  background:var(--cream-warm);border:1px solid var(--line-soft);
  font-size:.815rem;font-weight:700;color:var(--ink-2);
}
.group-ratio strong{color:var(--ink);font-weight:800}
.group-ratio svg{width:16px;height:16px;flex:none;color:var(--moss-deep)}

/* ---------- 14. Dagritme-tijdlijn ---------- */
.rhythm{position:relative;display:grid;gap:0}
.rhythm::before{
  content:'';position:absolute;left:calc(72px + 26px);top:26px;bottom:26px;width:2px;
  background:repeating-linear-gradient(to bottom,var(--sand-deep) 0 7px,transparent 7px 14px);
}
.moment{
  display:grid;grid-template-columns:72px 54px 1fr;gap:0 20px;align-items:start;
  padding:15px 0;
}
.moment-time{
  font-family:'Fraunces',serif;font-weight:700;font-size:.9rem;
  color:var(--ink-3);padding-top:14px;text-align:right;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.moment-dot{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);border:2px solid var(--line);position:relative;z-index:1;
  transition:border-color .25s,transform .25s var(--ease);
}
.moment-dot svg{width:25px;height:25px}
.moment:hover .moment-dot{transform:scale(1.07)}
.moment-body{padding-top:9px}
.moment-body h3{margin-bottom:3px;font-size:1.08rem}
.moment-body p{font-size:.925rem;color:var(--ink-2);margin:0}

/* ---------- 15. Stappenplan ---------- */
.steps{counter-reset:step;display:grid;gap:14px}
.step{
  counter-increment:step;
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:22px 26px;box-shadow:var(--sh-xs);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.step:hover{transform:translateX(4px);box-shadow:var(--sh-md)}
.step::before{
  content:counter(step);
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;flex:none;
  background:var(--red);color:#fff;
  font-family:'Fraunces',serif;font-weight:800;font-size:1.2rem;
  box-shadow:0 4px 12px rgba(221,51,39,.3);
}
.step h3{margin-bottom:4px}
.step p{font-size:.94rem;color:var(--ink-2);margin:0}

/* ---------- 16. Rekenmachine ---------- */
.calc{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(20px,3vw,36px);align-items:start;
}
.calc-panel{
  background:var(--paper);border-radius:var(--r-xl);
  padding:clamp(24px,3.2vw,38px);
  border:1px solid var(--line-soft);box-shadow:var(--sh-md);
}
/* Een groepje bij elkaar horende keuzes draagt fieldset/legend, zodat een
   schermlezer de vraag één keer noemt in plaats van hem aan de maandag te
   plakken. De browserstandaard voor fieldset moet daarvoor weg. */
fieldset.field{border:0;margin:0 0 20px;padding:0;min-width:0}
fieldset.field:last-child{margin-bottom:0}
fieldset.field > legend{padding:0;float:left;width:100%}
fieldset.field > legend + *{clear:both}
.field{margin-bottom:20px}
.field:last-child{margin-bottom:0}
.field label,.field > legend{
  display:block;font-size:.855rem;font-weight:800;color:var(--ink);
  margin-bottom:7px;letter-spacing:-.005em;
}
.field .hint{display:block;font-weight:600;font-size:.78rem;color:var(--ink-3);margin-top:5px;line-height:1.5}
.control{
  width:100%;padding:13px 15px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--cream);
  font-size:.955rem;font-weight:600;color:var(--ink);
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.control:hover{border-color:var(--sand-deep)}
.control:focus{outline:none;border-color:var(--denim);background:var(--paper);box-shadow:0 0 0 4px rgba(22,144,204,.14)}
select.control{
  appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5l5-5' stroke='%235B4E42' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px;
}
textarea.control{resize:vertical;min-height:110px;line-height:1.6}

/* Dagenkiezer */
.daypick{display:flex;gap:8px}
.daypick input{position:absolute;opacity:0;width:0;height:0}
.daypick label{
  margin:0;cursor:pointer;user-select:none;
  padding:10px 0;flex:1 1 0;min-width:46px;max-width:76px;text-align:center;
  border-radius:var(--r-sm);border:1.5px solid var(--line);
  background:var(--cream);font-size:.85rem;font-weight:800;color:var(--ink-2);
  transition:all .2s var(--ease);
}
.daypick label:hover{border-color:var(--sand-deep);background:var(--paper)}
.daypick input:checked+label{
  background:var(--red);border-color:var(--red);color:#fff;
  box-shadow:0 4px 12px rgba(221,51,39,.28);
}
.daypick input:focus-visible+label{outline:3px solid var(--denim);outline-offset:2px}

/* Uitkomst */
.calc-out{
  /* Zelfde reden als bij .bg-deep: de uitkomst draagt witte cijfers. */
  background:linear-gradient(158deg,var(--denim-ink),var(--denim-deep) 55%,var(--aqua-dark));
  color:#fff;border-radius:var(--r-xl);padding:clamp(24px,3.2vw,34px);
  box-shadow:var(--sh-lg);position:relative;overflow:hidden;
  position:sticky;top:96px;
}
.calc-out::before{
  content:'';position:absolute;inset:0;background-image:var(--dots);background-size:30px 30px;opacity:.26;
}
.calc-out>*{position:relative}
.calc-out h3{color:#fff;margin-bottom:4px}
.calc-out .small{color:rgba(255,255,255,.78)}
.calc-net{
  font-family:'Fraunces',serif;font-weight:800;letter-spacing:-.035em;
  font-size:clamp(2.4rem,1.6rem + 3vw,3.5rem);line-height:1;
  margin:16px 0 2px;color:#fff;
}
.calc-net-sub{font-size:.88rem;font-weight:700;color:#B6EBEC}
.calc-rows{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);display:grid;gap:11px}
.calc-row{display:flex;justify-content:space-between;gap:14px;font-size:.9rem;align-items:baseline}
.calc-row span:first-child{color:rgba(255,255,255,.8);font-weight:600}
.calc-row small,.calc-row .muted{color:rgba(255,255,255,.58)}
.calc-row span:last-child{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-row.is-total{padding-top:11px;border-top:1px solid rgba(255,255,255,.2);font-size:1rem}
.calc-note{
  margin-top:20px;padding:13px 15px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.16);
  font-size:.79rem;line-height:1.62;color:rgba(255,255,255,.86);
}
.calc-note a{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:700}

/* ---------- 16b. Plaatsingscheck ---------- */
.check-panel{
  background:var(--paper);border-radius:var(--r-xl);
  padding:clamp(24px,3.2vw,36px);
  border:1px solid var(--line-soft);box-shadow:var(--sh-md);
}
.check-hit{
  border-radius:var(--r-lg);padding:24px;
  background:var(--cream-warm);
  border:2px solid var(--tone,var(--red));
  border-left-width:7px;
}
.check-kicker{
  display:block;font-size:.78rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;
}
.check-groep{
  display:block;font-family:'Fraunces',serif;font-variation-settings:'opsz' 54;
  font-weight:800;font-size:clamp(1.5rem,1.2rem + 1.3vw,2.05rem);
  line-height:1.1;letter-spacing:-.025em;color:var(--tone,var(--red));
}
.check-leeftijd{display:block;font-size:.9rem;font-weight:700;color:var(--ink-2);margin-top:4px}

/* ---------- 17. Accordeon (FAQ) ---------- */
.faq{display:grid;gap:10px}
.qa{
  scroll-margin-top:96px;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;transition:border-color .25s,box-shadow .25s;
}
.qa[open]{border-color:var(--sand-deep);box-shadow:var(--sh-sm)}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 22px;cursor:pointer;list-style:none;
  font-family:'Fraunces',serif;font-weight:700;font-size:1.03rem;line-height:1.35;
  color:var(--ink);transition:color .2s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--red-deep)}
.qa summary::after{
  content:'';flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M6 2v8M2 6h8' stroke='%23A81E16' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;
  transition:transform .3s var(--ease);
}
.qa[open] summary::after{
  transform:rotate(135deg);
}
.qa-body{padding:0 22px 21px;color:var(--ink-2);font-size:.955rem}
.qa-body>*+*{margin-top:11px}
.qa-body a{color:var(--red-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px}
/* Een link die op zichzelf staat is een bedieningselement en heeft dus een
   raakvlak van minstens 44px nodig. Links midden in een zin niet; die vallen
   onder de uitzondering voor inline tekst in WCAG 2.5.5. */
.link-arrow{min-height:44px;align-items:center}
/* Lijsten binnen een antwoord: zelfde opmaak als in lopende tekst. */
.qa-body ul,.qa-body ol{display:grid;gap:.45em;padding-left:0;margin-top:11px}
.qa-body ul li{position:relative;padding-left:24px}
.qa-body ul li::before{
  content:'';position:absolute;left:2px;top:.6em;
  width:8px;height:8px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 3px var(--red-soft);
}
.qa-body ol{counter-reset:qa}
.qa-body ol li{position:relative;padding-left:32px;counter-increment:qa}
.qa-body ol li::before{
  content:counter(qa);position:absolute;left:0;top:.02em;
  width:22px;height:22px;border-radius:50%;background:var(--red-soft);color:var(--red-deep);
  display:grid;place-items:center;font-size:.74rem;font-weight:800;
}
.qa-body strong{color:var(--ink);font-weight:800}

/* ---------- 18. Citaten ---------- */
.quote{
  background:var(--paper);border-radius:var(--r-lg);padding:clamp(24px,3vw,32px);
  border:1px solid var(--line-soft);box-shadow:var(--sh-sm);
  display:flex;flex-direction:column;gap:16px;height:100%;
  position:relative;
}
.quote::before{
  content:'”';position:absolute;top:6px;right:22px;
  font-family:'Fraunces',serif;font-size:5rem;line-height:1;color:var(--red-tint);
  pointer-events:none;
}
.stars{display:flex;gap:2px;color:var(--honey)}
.stars svg{width:17px;height:17px}
.quote blockquote{font-size:1.02rem;line-height:1.6;color:var(--ink);font-style:italic;flex:1}
.quote figcaption{display:flex;align-items:center;gap:12px;margin-top:auto}
.avatar{
  width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:'Fraunces',serif;font-weight:800;font-size:1rem;color:#fff;
}
.quote-name{display:block;font-weight:800;font-size:.92rem;line-height:1.3}
.quote-role{display:block;font-size:.79rem;color:var(--ink-3);font-weight:600;line-height:1.4}

/* ---------- 19. Instagram ---------- */
.ig-band{
  background:linear-gradient(140deg,#5B2E8F 0%,#B32A6E 42%,#DD3327 72%,#EFA92B 100%);
  color:#fff;position:relative;overflow:hidden;
}
.ig-band::before{content:'';position:absolute;inset:0;background:rgba(20,10,30,.16)}
.ig-band>*{position:relative}
.ig-band h2{color:#fff}
.ig-handle{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);
  padding:7px 18px 7px 9px;border-radius:var(--r-full);
  font-weight:800;font-size:.93rem;margin-bottom:16px;
}
.ig-handle img{width:36px;height:36px;border-radius:50%;border:2px solid #fff;object-fit:cover}
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-block:clamp(28px,4vw,40px)}
.ig-tile{
  position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;
  box-shadow:0 8px 22px rgba(20,10,30,.24);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.ig-tile:hover{transform:translateY(-4px) scale(1.015);box-shadow:0 16px 36px rgba(20,10,30,.34)}
.ig-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.ig-tile:hover img{transform:scale(1.06)}
.ig-cap{
  position:absolute;inset:auto 0 0 0;padding:22px 14px 12px;
  background:linear-gradient(to top,rgba(20,10,30,.78),transparent);
  font-size:.82rem;font-weight:800;letter-spacing:-.005em;
}

/* ---------- 20. Contactblok ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4vw,56px);align-items:start}
.contact-list{display:grid;gap:6px}
.contact-item{
  display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:start;
  padding:15px 16px;border-radius:var(--r);
  transition:background .22s;
}
.contact-item:hover{background:var(--paper)}
.contact-item .ci{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--red-soft);color:var(--red-deep);
}
.contact-item .ci svg{width:21px;height:21px}
.contact-item h3{font-size:.92rem;margin-bottom:2px}
.contact-item p,.contact-item address{font-size:.92rem;color:var(--ink-2);font-style:normal;line-height:1.6}
.contact-item a{color:var(--red-deep);font-weight:700;border-bottom:1.5px solid var(--red-tint);transition:border-color .2s}
.contact-item a:hover{border-color:var(--red)}

.map-frame{
  border-radius:var(--r-xl);overflow:hidden;
  border:5px solid var(--paper);box-shadow:var(--sh-lg);
  aspect-ratio:4/3.4;background:var(--sand);
}
.map-frame iframe{width:100%;height:100%;border:0;display:block}

/* ---------- 21. Formulier ---------- */
.form-card{
  background:var(--paper);border-radius:var(--r-xl);
  padding:clamp(24px,3.4vw,42px);
  border:1px solid var(--line-soft);box-shadow:var(--sh-md);
}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form-consent{
  display:flex;gap:11px;align-items:flex-start;
  font-size:.83rem;line-height:1.6;color:var(--ink-2);
}
.form-consent input{margin-top:3px;width:17px;height:17px;accent-color:var(--red);flex:none;cursor:pointer}
.form-consent a{color:var(--red-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.form-status{
  margin-top:16px;padding:14px 16px;border-radius:var(--r-sm);
  font-size:.88rem;font-weight:700;line-height:1.6;display:none;
}
.form-status.is-ok{display:block;background:var(--moss-soft);color:var(--moss-deep);border:1px solid #CFE3C8}
.form-status.is-err{display:block;background:var(--red-soft);color:var(--red-deep);border:1px solid var(--red-tint)}

/* ---------- 22. CTA-band ---------- */
.cta-band{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(150deg,var(--red-ink),var(--red-deep) 45%,var(--red) 100%);
  color:#fff;text-align:center;
}
.cta-band::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background-image:var(--dots);background-size:42px 42px;opacity:.42;
}
.cta-band h2{color:#fff;margin-bottom:14px}
.cta-band p{color:rgba(255,255,255,.9);max-width:56ch;margin:0 auto 30px}
.cta-actions{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* ---------- 23. Voettekst ---------- */
/* Dezelfde groene bies als onder de headerbalk. De pagina wordt er
   aan boven- en onderkant door ingelijst, precies als het gevelbord. */
.footer{
  background:#241C15;color:#A99C8C;
  padding-top:clamp(52px,7vw,80px);
  border-top:5px solid var(--sign-green);
}
.footer .voet-kop{
  color:#fff;font-size:.94rem;margin-bottom:16px;
  font-variation-settings:'opsz' 16;
}
.footer-grid{
  display:grid;grid-template-columns:1.8fr 1fr 1fr 1.15fr;
  gap:clamp(28px,4vw,48px);padding-bottom:clamp(36px,5vw,52px);
}
.footer-about p{font-size:.9rem;line-height:1.64;margin-bottom:18px;max-width:38ch}
.footer .brand-name{color:#fff}
.footer .brand-sub{color:#7E7264}
.footer-links{display:grid;gap:11px}
.footer-links a,.footer-links li{font-size:.9rem;line-height:1.5}
.footer-links a{color:#A99C8C;transition:color .2s;display:inline-flex;align-items:center;min-height:24px}
.footer-links a:hover{color:var(--honey)}
.socials{display:flex;gap:9px}
.socials a{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:#332920;color:#A99C8C;transition:all .25s var(--ease);
}
.socials a svg{width:18px;height:18px}
.socials a:hover{transform:translateY(-2px);color:#fff}
.socials a.s-fb:hover{background:#1877F2}
.socials a.s-ig:hover{background:linear-gradient(135deg,#F09433,#DC2743,#BC1888)}
.socials a.s-mail:hover{background:var(--red)}

.footer-base{
  border-top:1px solid #3A2F25;padding-block:20px;
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
}
.footer-base p{font-size:.79rem;color:#9B8E7E}
.reg-badges{display:flex;flex-wrap:wrap;gap:8px}
.reg-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:var(--r-full);
  background:#332920;font-size:.735rem;font-weight:700;color:#A99C8C;
}
.reg-badge svg{width:12px;height:12px;flex:none;color:var(--moss)}
.reg-badge a{color:inherit;border-bottom:1px solid #4A3D31}

/* ---------- 24. Vaste balk op mobiel ---------- */
.dock{
  position:fixed;inset:auto 0 0 0;z-index:70;display:none;
  gap:4px;padding:6px 7px calc(6px + env(safe-area-inset-bottom));
  background:rgba(251,246,236,.97);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 22px rgba(43,33,25,.09);
}
/* Vijf gelijke vakken. Minstens 52px hoog plus de opvulling eromheen, dus
   ruim boven de 44px die WCAG 2.2 voor een aanraakvlak vraagt. */
.dock-item{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:52px;padding:6px 2px;border-radius:14px;
  border:0;background:none;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  color:var(--ink-3);font-size:.655rem;font-weight:800;line-height:1.15;text-align:center;
  text-decoration:none;
  transition:background .2s,color .2s;
}
.dock-item svg{width:22px;height:22px;flex:none}
.dock-item b{display:block;max-width:100%;font-weight:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-item:hover{color:var(--ink)}
.dock-item[aria-current]{color:var(--denim-ink);background:var(--denim-soft)}
.dock-cta{color:#fff;background:var(--red);box-shadow:0 3px 10px rgba(221,51,39,.28)}
.dock-cta:hover,.dock-cta[aria-current]{color:#fff;background:var(--red-deep)}

/* ---------- 25. Subpagina-kop ---------- */
.page-head{
  padding:clamp(122px,14vw,164px) 0 clamp(44px,6vw,72px);
  background:linear-gradient(160deg,var(--cream-warm),var(--aqua-soft) 100%);
  border-bottom:1px solid var(--line-soft);
  position:relative;overflow:hidden;
}
.page-head::after{
  content:'';position:absolute;top:-26%;right:-8%;width:44%;aspect-ratio:1;border-radius:50%;
  background:var(--aqua);opacity:.2;
}
.page-head .shell{position:relative}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.8rem;font-weight:700;color:var(--ink-3);margin-bottom:18px}
.crumbs a{color:var(--ink-3);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.crumbs a:hover{color:var(--red-deep);border-color:var(--red-tint)}
.crumbs svg{width:12px;height:12px;opacity:.6}

/* Leesbare tekstkolom voor beleidspagina's */
.prose{max-width:74ch}
.prose>*+*{margin-top:1.05em}
.prose h2{margin-top:2.1em;margin-bottom:.5em;font-size:clamp(1.4rem,1.2rem + .9vw,1.85rem)}
.prose h3{margin-top:1.7em;margin-bottom:.35em;font-size:clamp(1.1rem,1.03rem + .4vw,1.3rem)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p,.prose li{color:var(--ink-2)}
.prose strong{color:var(--ink);font-weight:800}
.prose ul,.prose ol{display:grid;gap:.5em;padding-left:0}
.prose ul li{position:relative;padding-left:26px}
.prose ul li::before{
  content:'';position:absolute;left:2px;top:.62em;
  width:9px;height:9px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 3px var(--red-soft);
}
.prose ol{counter-reset:pl}
.prose ol li{position:relative;padding-left:34px;counter-increment:pl}
.prose ol li::before{
  content:counter(pl);position:absolute;left:0;top:.05em;
  width:23px;height:23px;border-radius:50%;background:var(--red-soft);color:var(--red-deep);
  display:grid;place-items:center;font-size:.76rem;font-weight:800;
}
.prose a{color:var(--red-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px}
.prose a:hover{color:var(--red)}

/* ── Vrije plaatsen per dag ────────────────────────────────────────
   Het blok staat op hidden in de HTML en wordt pas getoond als de
   datum vers genoeg is. Zie kaboutertjes.js, onderdeel 9. */
.slots-card{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(22px,3.4vw,44px);align-items:center;
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-xl);
  box-shadow:var(--sh-md);padding:clamp(22px,3vw,34px);
}
@media (max-width:820px){.slots-card{grid-template-columns:1fr}}
.slots-intro .h3{margin:12px 0 8px}
.slots-intro p+p{margin-top:8px}
.slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
@media (max-width:420px){.slots{grid-template-columns:repeat(3,minmax(0,1fr))}}
.slot{
  display:grid;gap:5px;justify-items:center;text-align:center;
  padding:13px 6px 12px;border-radius:var(--r-sm);
  background:var(--cream);border:1px solid var(--line-soft);
}
.slot-day{
  font-family:'Baloo 2','Figtree',cursive;font-weight:800;font-size:1.05rem;
  color:var(--ink);text-transform:lowercase;line-height:1;
}
.slot-state{font-size:.735rem;font-weight:700;line-height:1.25;color:var(--ink-3)}
.slot.is-vrij{background:var(--moss-soft);border-color:#CFE3C8}
.slot.is-vrij .slot-state{color:var(--moss-deep)}
.slot.is-wacht{background:var(--honey-soft);border-color:#F0DDB4}
.slot.is-wacht .slot-state{color:var(--honey-deep)}
.slot.is-vol{background:var(--red-soft);border-color:#F3CFCC}
.slot.is-vol .slot-state{color:var(--red-deep)}
.slots-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* De rekenhulp en het uitkomstpaneel hebben een eigen binnenmarge; op een heel
   smal scherm telde die bij de shell-marge op en liep het geheel over. */
@media (max-width:359px){
  .calc-panel,.calc-out{padding-inline:16px}
  .calc-rows{font-size:.85rem}
}

/* Onder de 360px is er domweg te weinig ruimte voor merk én menuknop. */
@media (max-width:359px){
  .nav .shell{gap:12px;padding-inline:14px}
  .brand{gap:9px}
  .brand-mark{width:38px;height:38px}
  .brand-name{font-size:1.02rem}
  .brand-sub{display:none}
}

/* Kruimelpad, registratiebadges en het contactblok: losstaande links, dus
   minstens 24px hoog. Links midden in een zin blijven zoals ze zijn; die
   vallen onder de uitzondering voor inline tekst in WCAG 2.5.8. */
.crumbs a,.reg-badge a,.footer-about a:not(.brand),.qa-body p > a:only-child,
.card p a[href^="tel:"],.card p a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:24px}

/* Het vinkje bij het formulier is zelf klein; het raakvlak eromheen niet. */
.form-consent{position:relative}
.form-consent input[type="checkbox"]{width:24px;height:24px;flex:none}
.form-consent input[type="checkbox"]::before{
  content:'';position:absolute;left:-6px;top:-6px;width:44px;height:44px;
}

/* Sociale iconen in de voettekst op het minimale raakvlak. */
.socials a{min-width:44px;min-height:44px}

/* Telefoon en e-mail in het contactblok zijn primaire acties op mobiel. */
.contact-item a{display:inline-flex;align-items:center;min-height:44px}

/* ── Taalkiezer ────────────────────────────────────────────────────
   Drie codes van twee letters. In de kopbalk vanaf de breedte waarop het
   gewone menu ook past; daaronder staat hij in de uitschuiflade, zodat de
   balk op een smal scherm niet alsnog overloopt. */
.talen{display:flex;gap:2px;padding:3px;border-radius:var(--r-full);background:var(--sand);flex:none}
.talen a{
  display:grid;place-items:center;min-width:38px;min-height:30px;padding:0 8px;
  border-radius:var(--r-full);font-size:.76rem;font-weight:800;letter-spacing:.04em;
  color:var(--ink-2);text-decoration:none;transition:.15s;
}
.talen a:hover{background:rgba(255,255,255,.75);color:var(--ink)}
.talen a[aria-current="true"]{background:var(--paper);color:var(--red-deep);box-shadow:var(--sh-sm)}
.nav:not(.on-light):not(.is-stuck) .talen{background:rgba(255,255,255,.16)}
.nav:not(.on-light):not(.is-stuck) .talen a{color:rgba(255,255,255,.82)}
.nav:not(.on-light):not(.is-stuck) .talen a[aria-current="true"]{background:#fff;color:var(--red-deep)}
.drawer .talen{margin:6px 0 10px;align-self:start}
.drawer .talen a{min-height:44px;min-width:52px;font-size:.85rem}
@media (max-width:1339px){ .nav .talen{display:none} }
@media (min-width:1120px) and (max-width:1339px){
  .nav .shell{gap:14px}
  .nav-links{gap:14px}
  .brand-sub{display:none}
}

/* ── Toegankelijkheidsinstellingen ─────────────────────────────────
   Geen overlay die de site "toegankelijk maakt", want die dingen werken
   niet. Drie schakelaars die echt iets doen, en die de site onthoudt. */
.hulp-knop{
  position:fixed;left:clamp(14px,2.5vw,26px);bottom:clamp(14px,2.5vw,26px);
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--denim-deep);color:#fff;
  border:2px solid #fff;box-shadow:var(--sh-md);
  z-index:61;transition:transform .2s var(--ease),background .2s;
}
.hulp-knop:hover{background:var(--denim-ink,#0A4A62);transform:translateY(-2px)}
.hulp-knop svg{width:24px;height:24px}

.hulp-paneel{
  position:fixed;left:clamp(14px,2.5vw,26px);bottom:calc(clamp(14px,2.5vw,26px) + 58px);
  width:min(310px,calc(100vw - 28px));
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:18px;z-index:62;
}
.hulp-paneel[hidden]{display:none}
.hulp-paneel h2{font-size:1.02rem;margin-bottom:3px}
.hulp-paneel .uitleg{font-size:.8rem;color:var(--ink-3);margin-bottom:14px}
.hulp-groep{margin-bottom:15px}
.hulp-groep > span{display:block;font-size:.78rem;font-weight:800;margin-bottom:7px;color:var(--ink-2)}
.hulp-keuze{display:flex;gap:6px}
.hulp-keuze button{
  flex:1;min-height:44px;padding:6px 8px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--paper);
  font-size:.8rem;font-weight:800;color:var(--ink-2);transition:.15s;
}
.hulp-keuze button:hover{border-color:var(--ink-3)}
.hulp-keuze button[aria-pressed="true"]{background:var(--denim-soft);border-color:var(--denim);color:var(--denim-deep)}
.hulp-paneel .sluit{width:100%;min-height:44px;border-radius:var(--r-full);border:1.5px solid var(--line);font-weight:800;font-size:.85rem}
.hulp-paneel .sluit:hover{background:var(--sand)}

@media (max-width:760px){
  .hulp-knop{bottom:calc(var(--dock-hoogte,72px) + 14px);width:46px;height:46px}
  .hulp-paneel{bottom:calc(var(--dock-hoogte,72px) + 70px)}
}

/* Wat de schakelaars doen. Alles hangt aan de <html>, zodat één klasse
   de hele pagina raakt zonder dat er iets herbouwd hoeft te worden. */
html[data-tekst="groot"]{font-size:112.5%}
html[data-tekst="groter"]{font-size:125%}
html[data-contrast="hoog"]{
  --ink:#12100D; --ink-2:#2B2119; --ink-3:#3A3129;
  --cream:#FFFFFF; --sand:#F2ECE0; --line:#8A7C6D; --line-soft:#B8AB9B;
  --red-deep:#8E1710; --moss-deep:#2C5626; --denim-deep:#0A4A62; --honey-deep:#6E4508;
}
html[data-contrast="hoog"] .card,
html[data-contrast="hoog"] .kaart{border-color:var(--line)}
html[data-contrast="hoog"] a:not(.btn){text-decoration:underline}
html[data-beweging="uit"] *,
html[data-beweging="uit"] *::before,
html[data-beweging="uit"] *::after{
  animation-duration:.001ms !important;animation-iteration-count:1 !important;
  transition-duration:.001ms !important;scroll-behavior:auto !important;
}
html[data-beweging="uit"] .rise{opacity:1 !important;transform:none !important}

/* ── Terug naar boven ──────────────────────────────────────────────
   Verschijnt pas als er echt iets te scrollen valt, en gaat op mobiel
   naast de vaste onderbalk staan in plaats van eroverheen. */
.omhoog{
  position:fixed;right:clamp(14px,2.5vw,26px);bottom:clamp(14px,2.5vw,26px);
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--paper);color:var(--red-deep);
  border:1.5px solid var(--line);box-shadow:var(--sh-md);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
  z-index:60;
}
.omhoog.is-zichtbaar{opacity:1;visibility:visible;transform:none}
.omhoog:hover{background:var(--red);color:#fff;border-color:var(--red)}
.omhoog svg{width:21px;height:21px}
@media (max-width:760px){
  .omhoog{bottom:calc(var(--dock-hoogte,72px) + 14px);width:46px;height:46px}
}

/* Uitgelicht kader binnen tekst */
.callout{
  border-radius:var(--r-lg);padding:22px 26px;
  background:var(--aqua-soft);border:1px solid #BEE7E8;
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
}
.callout .co-icon{width:38px;height:38px;border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--aqua-dark);flex:none}
.callout .co-icon svg{width:20px;height:20px}
.callout h2,.callout h3{margin-bottom:5px}
.callout p{font-size:.93rem;color:var(--ink-2);margin:0}
.callout p+p{margin-top:8px}
.callout-red{background:var(--red-soft);border-color:var(--red-tint)}
.callout-red .co-icon{color:var(--red-deep)}
.callout-honey{background:var(--honey-soft);border-color:#F5DCA9}
.callout-honey .co-icon{color:var(--honey-deep)}

/* ---------- 27. Het beleidsplan als leesbare pagina ----------
   Een lang beleidsdocument leest alleen prettig met een smalle regel, rustige
   witruimte en een inhoudsopgave die meeschuift op een breed scherm. */
.plan-inhoud{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:clamp(20px,2.6vw,30px) clamp(18px,2.4vw,30px);
  box-shadow:var(--sh-xs);margin-bottom:clamp(28px,4vw,46px);
}
.plan-inhoud > h2{margin-bottom:14px}
.io-lijst,.io-sub{list-style:none;margin:0;padding:0}
.io-lijst{
  column-count:2;column-gap:clamp(22px,3vw,40px);
  font-size:.93rem;
}
.io-hfd{break-inside:avoid;margin-bottom:13px}
.io-lijst a{
  display:flex;gap:9px;align-items:baseline;
  color:var(--ink-2);text-decoration:none;
  padding:3px 0;border-radius:6px;
}
.io-lijst a:hover{color:var(--red-deep)}
.io-lijst a[aria-current]{color:var(--red-deep);font-weight:800}
.io-sub a[aria-current]{background:var(--red-soft);margin-left:-8px;padding-left:8px;padding-right:8px}
.io-hfd > a{font-family:'Baloo 2','Figtree',sans-serif;font-weight:700;color:var(--ink)}
.io-nr{
  flex:none;min-width:2.1em;
  font-variant-numeric:tabular-nums;font-weight:800;color:var(--ink-4);font-size:.86em;
}
.io-hfd > a .io-nr{color:var(--red)}
.io-sub{margin:4px 0 0}
.io-sub a{font-size:.9rem;color:var(--ink-3)}

.plan-tekst{max-width:70ch}
.plan-hfd{
  padding-top:clamp(26px,3.4vw,42px);
  border-top:1px solid var(--line-soft);
}
.plan-hfd:first-child{padding-top:0;border-top:0}
.plan-tekst h2{margin:0 0 14px;scroll-margin-top:104px}
.plan-tekst h3{margin:clamp(24px,3vw,34px) 0 10px;scroll-margin-top:104px}
.plan-tekst h4{margin:22px 0 8px;scroll-margin-top:104px;color:var(--ink-2)}
.plan-tekst p{margin:0 0 14px;color:var(--ink-2);font-size:1rem;line-height:1.64}
.plan-tekst .table-wrap{margin:6px 0 20px}
.plan-lijst{margin:0 0 15px;padding-left:1.35em;display:grid;gap:7px}
.plan-lijst li{color:var(--ink-2);font-size:1rem;line-height:1.6}
.plan-lijst li::marker{color:var(--red);font-weight:800}

/* Op een breed scherm blijft de inhoudsopgave naast de tekst staan. */
@media (min-width:1100px){
  .plan-inhoud{
    position:sticky;top:96px;float:left;width:270px;
    margin:0 34px 26px calc(-270px - 34px);
    max-height:calc(100vh - 130px);overflow-y:auto;
    font-size:.9rem;
  }
  .io-lijst{column-count:1}
  .plan-tekst{max-width:none}
}
@media (max-width:620px){
  .io-lijst{column-count:1}
  /* De subparagrafen maken de lijst op een telefoon onhandelbaar lang. */
  .io-sub{display:none}
}
@media print{
  .plan-inhoud{position:static;float:none;width:auto;margin:0 0 20px;max-height:none;break-after:page}
  .plan-hfd{break-inside:auto}
  .plan-tekst h2{break-before:page}
  .plan-hfd:first-child h2{break-before:auto}
}

/* Documentlijst */
.doclist{display:grid;gap:11px}
.doc{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:17px 20px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--line-soft);box-shadow:var(--sh-xs);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
}
a.doc:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--sand-deep)}
.doc-icon{width:42px;height:42px;border-radius:12px;background:var(--red-soft);color:var(--red-deep);display:grid;place-items:center;flex:none}
.doc-icon svg{width:20px;height:20px}
.doc-title{font-weight:800;font-size:.95rem;line-height:1.35}
.doc-meta{font-size:.79rem;color:var(--ink-3);font-weight:600;margin-top:2px}
.doc-go{color:var(--ink-4);flex:none}
.doc-go svg{width:19px;height:19px}

/* Tabel */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line-soft);background:var(--paper);box-shadow:var(--sh-xs)}
table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:460px}
th,td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line-soft)}
thead th{
  background:var(--cream-warm);font-size:.76rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--cream)}
td strong{font-weight:800}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- 26. Onthullen bij scrollen ----------
   Alleen actief als JavaScript draait: zonder JS blijft alles gewoon zichtbaar. */
.js .rise{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js .rise.is-in{opacity:1;transform:none}
.rise-1{transition-delay:.07s}.rise-2{transition-delay:.14s}.rise-3{transition-delay:.21s}.rise-4{transition-delay:.28s}.rise-5{transition-delay:.35s}
@media (prefers-reduced-motion:reduce){
  .js .rise{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- 27. Responsief ---------- */
@media (max-width:1080px){
  .calc{grid-template-columns:1fr}
  .calc-out{position:static}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* De balk heeft pas vanaf ongeveer 1340px genoeg ruimte voor woordmerk,
   menu, taalkiezer en knop naast elkaar. Daaronder de burger. */
@media (max-width:1339px){
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
}
@media (max-width:1040px){
  .wegwijs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  /* Naast elkaar past niet meer: het beeld gaat onder de tekst staan. */
  .hero{padding-top:clamp(104px,20vw,132px)}
  .hero-grid{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}
  /* Het beeld boven de tekst: het gezicht is de haak en hoort in het eerste
     scherm te staan. De leesvolgorde blijft kop-eerst, want alleen de
     weergave verspringt, niet de volgorde in het document. */
  .hero-beeld{order:1;max-width:400px;width:100%;margin-inline:auto}
  .hero-copy{order:2}
  .hero-lede{max-width:none}
  .kenmerken ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kenmerken li:nth-child(2)::before{display:block}
  .kenmerken li:nth-child(3)::before{display:none}
  .kenmerken li:nth-child(3),.kenmerken li:nth-child(4){border-top:1px solid rgba(255,255,255,.17)}
  .intro-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ig-grid{grid-template-columns:repeat(3,1fr)}
  .figures{grid-template-columns:repeat(2,1fr)}
  .figure:nth-child(3)::before,.figure:nth-child(2)::before{display:none}
  .figure:nth-child(2)::before{display:block}
  .figure:nth-child(3),.figure:nth-child(4){border-top:1px solid var(--line-soft)}
  .dock{display:flex}
  body{padding-bottom:78px}
  .wegwijs{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Bij twee kolommen blijft de laatste kaart alleen over: die vult de rij,
     zodat er geen leeg vak naast staat. */
  .wegwijs > :last-child:nth-child(odd){grid-column:1/-1}
}
/* Op een laag scherm (een oude telefoon, of 400% zoom op een laptop) zou het
   beeld de kop uit het eerste scherm duwen. Daar krijgt het minder ruimte. */
@media (max-width:900px) and (max-height:760px){
  .hero{padding-top:clamp(96px,18vw,120px)}
  .hero-beeld{max-width:min(400px,34vh)}
  .hero-grid{gap:clamp(18px,3vw,26px)}
}
@media (max-width:520px){
  .kenmerken ul{grid-template-columns:1fr}
  .kenmerken li+li::before{display:none}
  .kenmerken li+li{border-top:1px solid rgba(255,255,255,.17)}
}
@media (max-width:680px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .ig-grid{grid-template-columns:repeat(2,1fr)}
  .moment{grid-template-columns:62px 44px 1fr;gap:0 14px}
  .moment-dot{width:44px;height:44px}
  .moment-dot svg{width:21px;height:21px}
  .rhythm::before{left:calc(62px + 21px)}
  .moment-time{font-size:.82rem;padding-top:11px}
  .step{grid-template-columns:1fr;gap:12px;padding:20px 22px}
  .callout{grid-template-columns:1fr}
  .footer-base{flex-direction:column;align-items:flex-start}
  .hero-actions .btn{flex:1;min-width:180px}
}

/* ---------- 28. Printen ---------- */
@media print{
  .nav,.drawer,.dock,.cta-band,.ig-band,.footer .socials{display:none !important}
  body{background:#fff;color:#000}
  .js .rise{opacity:1;transform:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#555}
}