/* =====================================================================
   FUZZIE FRIENDS · site.css
   Eén stijl voor de hele site, gebouwd op de V3 UI-kit: Apfel Grotezk en
   het V3-palet. De bron van het merk staat in de stijlgids (merk.json).

   Spelregels
   - Crème is de ondergrond. Blauw en felroze zijn het logo en blijven overal.
   - De vier diensten hebben elk een kleur: chillen paars, leren oranje,
     spelen geel, doen groen. Tips en gidsen kleuren per onderwerp.
   - Harde schaduw alleen op wat je kunt indrukken.
   - Ritme: afgeronde blokken wisselen af met schermbrede banden.
   ===================================================================== */

/* ---------- letters ---------- */
@font-face { font-family:"Apfel"; src:url("/assets/FONT/ApfelGrotezk-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Apfel"; src:url("/assets/FONT/ApfelGrotezk-Mittel.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Apfel"; src:url("/assets/FONT/ApfelGrotezk-Fett.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Apfel"; src:url("/assets/FONT/ApfelGrotezk-Satt.woff2") format("woff2"); font-weight:900; font-display:swap; }

/* ---------- basiswaarden ---------- */
:root {
  --blue:#0020D4; --pink:#FF126B; --green:#009B75; --purple:#7B72E6; --orange:#F5673B; --yellow:#FFBC20;
  --rose:#F3B7D2; --sky:#B8DDF3; --mint:#D8EEE4; --cream:#FFF9F1; --ink:#292348; --ink-soft:#5B5578; --shadow:#3B3154; --line:#E7DFEF;
  --chill:#7B72E6;  --chill-tint:#B8DDF3;  --chill-fg:#292348;
  --leren:#F5673B;  --leren-tint:#FFF9F1;  --leren-fg:#292348;
  --spelen:#FFBC20; --spelen-tint:#F3B7D2; --spelen-fg:#292348;
  --doen:#009B75;   --doen-tint:#D8EEE4;   --doen-fg:#FFF9F1;
  --beweeg:#B8DDF3; --beweeg-tint:#E6F2FB; --beweeg-fg:#0020D4;
  --font:"Apfel", ui-rounded, system-ui, sans-serif;
  --maxw:1240px; --gutter:clamp(16px, 4.5vw, 56px); --r-card:clamp(28px, 3.2vw, 44px); --r-mid:clamp(22px, 2.2vw, 30px);
  --hard:5px 7px 0 var(--shadow); --hard-up:8px 11px 0 var(--shadow); --hard-down:1px 2px 0 var(--shadow);
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --pebble:48% 52% 45% 55% / 56% 46% 54% 44%;
  --pill:62px 76px 68px 54px / 52px 60px 64px 56px;
  --kop-h:92px;
  /* onderwerpkleur: standaard wit, per onderwerp hieronder */
  --tint:#fff; --tint-diep:var(--line);
}
/* vaste kleuren (geen color-mix): de onderwerpbeelden hebben precies deze achtergrond */
[data-onderwerp="slapen"]     { --tint:var(--sky);  --tint-diep:#8EC3E6; }
[data-onderwerp="emoties"]    { --tint:var(--rose); --tint-diep:#EA93BA; }
[data-onderwerp="onderweg"]   { --tint:#FFE1AB; --tint-diep:var(--yellow); }
[data-onderwerp="ademen"]     { --tint:var(--mint); --tint-diep:#A4D6C1; }
[data-onderwerp="schermtijd"] { --tint:#DFDCF1; --tint-diep:#BBBAF0; }
[data-onderwerp="klas"], [data-onderwerp="opvang"] { --tint:#FDDFCF; --tint-diep:#FFB399; }

/* ---------- basis ---------- */
/* beelden en streepjes mogen tot in de marge lopen, maar de pagina schuift nooit zijwaarts */
main { overflow-x:clip; }
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--kop-h) + 16px); }
body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--font); font-size:clamp(1.04rem, .98rem + .28vw, 1.2rem); line-height:1.55; overflow-x:clip; }
img, svg, video, iframe { max-width:100%; }
img { height:auto; display:block; }
a { color:inherit; }
p { margin:0 0 1rem; }
button { font:inherit; }
:focus-visible { outline:4px solid var(--blue); outline-offset:4px; border-radius:14px; }
.on-dark :focus-visible { outline-color:var(--cream); }
::selection { background:var(--yellow); color:var(--ink); }
.sprite { position:absolute; width:0; height:0; overflow:hidden; }
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.skip { position:absolute; left:12px; top:-60px; z-index:100; background:var(--ink); color:var(--cream); font-weight:700; padding:.7em 1.1em; border-radius:14px; text-decoration:none; transition:top .2s; }
.skip:focus { top:12px; }

/* ---------- typografie ---------- */
.satt { font-weight:900; letter-spacing:-.035em; line-height:.94; margin:0; text-wrap:balance; }
.eyebrow { display:inline-block; font-weight:700; font-size:.92rem; padding:.45em .95em .5em; border-radius:var(--pill); background:#fff; color:var(--blue); margin:0 0 1.1rem; }
.h2 { font-size:clamp(2.2rem, 1.3rem + 3.4vw, 4.4rem); color:var(--blue); max-width:16ch; }
.lead { font-weight:500; font-size:clamp(1.1rem, 1rem + .45vw, 1.35rem); max-width:48ch; margin:1rem 0 0; }

/* ---------- ritme ---------- */
.block { padding-top:clamp(72px, 9vw, 130px); }
.band { margin-top:clamp(72px, 9vw, 130px); padding-block:clamp(64px, 8vw, 120px); position:relative; overflow:hidden; }

/* ---------- knoppen ---------- */
.btn { --tilt:-1.3deg; display:inline-flex; align-items:center; gap:.55em; font:700 clamp(1.02rem, .97rem + .3vw, 1.22rem)/1 var(--font); padding:.95em 1.4em 1em; border:0; cursor:pointer; text-decoration:none; border-radius:var(--pill); box-shadow:var(--hard); transform:rotate(var(--tilt)); transition:transform .4s var(--ease-pop), box-shadow .4s var(--ease-out); }
.btn:nth-child(2n) { --tilt:1deg; }
.btn:hover { transform:rotate(var(--tilt)) translate(-2px,-4px); box-shadow:var(--hard-up); }
.btn:active { transform:rotate(var(--tilt)) translate(4px,6px); box-shadow:var(--hard-down); transition-duration:.08s; }
.btn svg { width:1.1em; height:1.1em; fill:currentColor; flex:none; }
.btn-pink { background:var(--pink); color:var(--cream); }
.btn-blue { background:var(--blue); color:var(--cream); }
.btn-cream { background:var(--cream); color:var(--blue); }
.btn-white { background:#fff; color:var(--blue); }
.btn-line { background:#fff; color:var(--blue); box-shadow:inset 0 0 0 2.5px var(--blue), var(--hard); }
.btn-line:hover { box-shadow:inset 0 0 0 2.5px var(--blue), var(--hard-up); }
.btn-line:active { box-shadow:inset 0 0 0 2.5px var(--blue), var(--hard-down); }
.btn-soon { background:transparent; color:inherit; box-shadow:none; border:2px dashed currentColor; transform:none; cursor:default; opacity:.85; }
.btn-soon:hover, .btn-soon:active { transform:none; box-shadow:none; }
.actions, .pill-links { display:flex; flex-wrap:wrap; gap:16px 18px; align-items:center; }
.linkknop { background:none; border:0; padding:0; color:inherit; cursor:pointer; text-decoration:none; }
.linkknop:hover { text-decoration:underline; text-underline-offset:3px; }

/* ---------- naambordjes per dienst ---------- */
.svc { display:inline-flex; align-items:center; gap:.5em; font-weight:700; font-size:.82rem; letter-spacing:.07em; padding:.55em 1em .55em .75em; border-radius:17px 22px 16px 20px; box-shadow:2px 4px 0 var(--shadow); white-space:nowrap; }
.svc svg { width:1.35em; height:1.35em; fill:currentColor; flex:none; }
.svc-chill  { background:var(--chill);  color:var(--chill-fg); }
.svc-leren  { background:var(--leren);  color:var(--leren-fg); }
.svc-spelen { background:var(--spelen); color:var(--spelen-fg); }
.svc-doen   { background:var(--doen);   color:var(--doen-fg); }
.svc-beweeg { background:var(--beweeg); color:var(--beweeg-fg); }

/* ---------- beeldplekken (tot de beelden er zijn, fase 6) ---------- */
.ph { margin:0; position:relative; border-radius:var(--r-card); border:2.5px dashed rgba(41,35,72,.28); background:repeating-linear-gradient(135deg, rgba(255,255,255,.45) 0 14px, rgba(255,255,255,.18) 14px 28px); display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(16px, 2vw, 24px); overflow:hidden; color:var(--ink); }
.ph .ph-num { position:absolute; left:clamp(14px, 1.8vw, 22px); top:clamp(14px, 1.8vw, 22px); font-weight:900; font-size:.8rem; letter-spacing:.08em; background:var(--ink); color:var(--cream); padding:.4em .75em; border-radius:12px; }
.ph .ph-src { position:absolute; right:clamp(14px, 1.8vw, 22px); top:clamp(14px, 1.8vw, 22px); font-weight:700; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:.35em .65em; border-radius:10px; background:var(--yellow); color:var(--ink); }
.ph .ph-src.bestaand { background:var(--mint); } .ph .ph-src.still { background:var(--rose); }
.ph h4, .ph .ph-t { display:block; margin:0 0 .35rem; font-weight:900; font-size:clamp(1.05rem, .95rem + .4vw, 1.3rem); letter-spacing:-.01em; }
.ph p { margin:0; font-size:.9rem; line-height:1.45; max-width:52ch; color:var(--ink-soft); }
.ph-dark { border-color:rgba(255,249,241,.4); background:repeating-linear-gradient(135deg, rgba(255,249,241,.1) 0 14px, rgba(255,249,241,.04) 14px 28px); color:var(--cream); }
.ph-dark p { color:rgba(255,249,241,.8); }
.ph-dark .ph-num { background:var(--cream); color:var(--ink); }

/* =====================================================================
   KOP EN MENU
   Bovenrij (scrollt weg): wat nu live is, en de ingangen voor school,
   opvang en je account. Hoofdrij (blijft staan): vijf onderdelen met
   een uitklappaneel over de volle breedte, plus de app als actie.
   ===================================================================== */
.util { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 18px; padding:9px var(--gutter); background:var(--mint); font-size:.9rem; font-weight:500; }
.util-live { display:inline-flex; align-items:center; gap:.55em; text-decoration:none; }
.util-live:hover { text-decoration:underline; text-underline-offset:3px; }
.util-live .dot { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(0,155,117,.18); }
.motion .util-live .dot { animation:puls 2.4s var(--ease-out) infinite; }
@keyframes puls { 0%, 100% { box-shadow:0 0 0 3px rgba(0,155,117,.22); } 50% { box-shadow:0 0 0 7px rgba(0,155,117,0); } }
.util-nav { display:flex; flex-wrap:wrap; gap:4px 20px; align-items:center; }
.util-nav a { text-decoration:none; font-weight:700; }
.util-nav a:hover, .util-nav a[aria-current] { text-decoration:underline; text-underline-offset:3px; }
.util-login { display:inline-flex; align-items:center; gap:.4em; background:#fff; padding:.3em .8em .35em; border-radius:var(--pill); }
.util-login svg { width:1.05em; height:1.05em; fill:currentColor; }

.top { position:sticky; top:0; z-index:40; background:rgba(255,249,241,.95); -webkit-backdrop-filter:saturate(1.2) blur(10px); backdrop-filter:saturate(1.2) blur(10px); transition:box-shadow .3s; }
.top.scrolled, .top.menu-open { box-shadow:0 2px 0 var(--line); }
.top-row { display:flex; align-items:center; gap:24px; padding:12px var(--gutter); }
.logo { flex:none; border-radius:18px; }
.logo img { height:clamp(50px, 4.8vw, 66px); width:auto; transition:transform .5s var(--ease-pop); }
.logo:hover img { transform:rotate(-4deg) scale(1.04); }
.mainnav { margin-left:auto; }
.nav-list { list-style:none; margin:0; padding:0; display:flex; gap:clamp(2px, .8vw, 10px); }
.nav-btn { position:relative; display:inline-flex; align-items:center; gap:.35em; font:500 1.06rem/1 var(--font); color:var(--ink); background:none; border:0; cursor:pointer; padding:.7em .8em; border-radius:16px; transition:background-color .2s, color .2s; }
.nav-btn .chev { width:.9em; height:.9em; fill:currentColor; opacity:.55; transition:transform .35s var(--ease-pop), opacity .2s; }
.nav-btn:hover { background:rgba(41,35,72,.06); }
.nav-btn[aria-expanded="true"] { background:var(--ink); color:var(--cream); }
.nav-btn[aria-expanded="true"] .chev { transform:rotate(180deg); opacity:1; }
/* je bent in dit onderdeel: een klein roze steentje onder de knop */
.nav-item.is-here > .nav-btn::after { content:""; position:absolute; left:50%; bottom:-2px; width:9px; height:9px; margin-left:-4.5px; border-radius:var(--pebble); background:var(--pink); }
.mainnav a[aria-current="page"] { color:var(--blue); }
.nav-extra { display:none; }
.top-cta { font-size:1rem; padding:.8em 1.15em .85em; flex:none; }
.burger { display:none; width:52px; height:52px; border:0; border-radius:var(--pebble); background:var(--blue); box-shadow:var(--hard); cursor:pointer; position:relative; flex:none; }
.burger span { position:absolute; left:15px; right:15px; height:4px; border-radius:3px; background:var(--cream); transition:transform .35s var(--ease-pop), opacity .2s; }
.burger span:nth-child(1) { top:16px; } .burger span:nth-child(2) { top:24px; } .burger span:nth-child(3) { top:32px; }
.top.sheet .burger span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.top.sheet .burger span:nth-child(2) { opacity:0; }
.top.sheet .burger span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

/* uitklappaneel over de volle breedte, net onder de kop */
.mega { position:absolute; left:0; right:0; top:100%; background:var(--cream); border-top:2px solid var(--line); box-shadow:0 26px 40px -24px rgba(41,35,72,.35); }
.mega:not([hidden]) { animation:zak .35s var(--ease-out); }
@keyframes zak { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
.mega-inner { max-width:var(--maxw); margin:0 auto; padding:clamp(22px, 2.6vw, 34px) var(--gutter) clamp(26px, 3vw, 40px); display:grid; grid-template-columns:minmax(220px, .8fr) 2.2fr; gap:clamp(20px, 3vw, 44px); align-items:start; }
.mega-title { font-weight:900; font-size:clamp(1.6rem, 1.2rem + 1vw, 2.2rem); letter-spacing:-.03em; color:var(--blue); margin:0 0 .5rem; line-height:1; }
.mega-intro p:not(.mega-title) { font-size:1rem; color:var(--ink-soft); margin:0 0 1rem; max-width:32ch; }
.mega-all { font-weight:700; color:var(--blue); text-underline-offset:4px; }
.mega-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; }
.mm-card { display:flex; flex-direction:column; align-items:flex-start; gap:.45rem; text-decoration:none; padding:16px 18px 18px; border-radius:22px; transition:transform .35s var(--ease-pop), box-shadow .35s; }
.mm-card:hover { transform:translateY(-4px) rotate(-.6deg); box-shadow:var(--hard); }
.mm-card b { font-weight:900; font-size:1.25rem; letter-spacing:-.02em; color:var(--blue); line-height:1.05; }
.mm-card > span:not(.svc) { font-size:.95rem; color:var(--ink-soft); }
.mm-card .svc { font-size:.72rem; box-shadow:1px 3px 0 var(--shadow); }
.mm-card .st { font-style:normal; font-weight:700; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; padding:.25em .6em; border-radius:9px; background:#fff; margin-top:auto; }
.mm-card .st-nu { background:var(--green); color:var(--cream); }
/* de iPad-kaart toont alle vijf de onderdelen */
#mm-apps .mega-cards { grid-template-columns:minmax(280px, 1.25fr) minmax(200px, .75fr); }
.mm-verbs { display:flex; flex-wrap:wrap; gap:5px; }
.mm-verbs .svc { font-size:.64rem; padding:.45em .7em .45em .55em; box-shadow:1px 2px 0 var(--shadow); }
.mm-world:hover .mm-verbs .svc { animation:wip-mini .5s var(--ease-pop) both; }
.mm-world:hover .mm-verbs .svc:nth-child(2) { animation-delay:.05s; } .mm-world:hover .mm-verbs .svc:nth-child(3) { animation-delay:.1s; }
.mm-world:hover .mm-verbs .svc:nth-child(4) { animation-delay:.15s; } .mm-world:hover .mm-verbs .svc:nth-child(5) { animation-delay:.2s; }
@keyframes wip-mini { 0% { transform:none; } 45% { transform:translateY(-4px) rotate(-4deg); } 100% { transform:none; } }
.mm-chill { background:var(--chill-tint); } .mm-leren { background:#fff; border:2px solid var(--line); } .mm-spelen { background:var(--spelen-tint); }
.mega-quick { background:var(--doen-tint); border-radius:24px; padding:18px 20px 20px; }
.quick-q { font-weight:900; font-size:1.3rem; letter-spacing:-.02em; margin:.7rem 0 .8rem; color:var(--ink); }
.quick-list { display:flex; flex-wrap:wrap; gap:10px; }
.quick-list a { text-decoration:none; font-weight:700; background:#fff; padding:.6em 1em .65em; border-radius:var(--pill); box-shadow:2px 4px 0 var(--shadow); transition:transform .3s var(--ease-pop), box-shadow .3s; }
.quick-list a:hover { transform:translate(-1px,-3px); box-shadow:4px 7px 0 var(--shadow); }
.mega-topics { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px 22px; }
.topic { display:grid; gap:.3rem; align-content:start; }
.topic a { text-decoration:none; font-size:.98rem; color:var(--ink-soft); }
.topic a:hover { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.topic .topic-head { font-weight:900; font-size:1.1rem; color:var(--blue); letter-spacing:-.01em; margin-bottom:.15rem; }
.topic-extra .topic-head + a + .topic-head { margin-top:.7rem; }
.mega-links { display:grid; grid-template-columns:repeat(2, 1fr); gap:6px 22px; }
.mega-links a { text-decoration:none; display:grid; padding:.55rem .7rem; border-radius:14px; transition:background-color .2s; }
.mega-links a:hover { background:rgba(41,35,72,.06); }
.mega-links b { font-weight:900; color:var(--blue); font-size:1.08rem; }
.mega-links span { font-size:.92rem; color:var(--ink-soft); }

/* mobiel: één duim. De app blijft zichtbaar, het menu opent als volledig scherm */
@media (max-width: 1080px) {
  :root { --kop-h:76px; }
  .burger { display:block; }
  .top-cta { margin-left:auto; }
  /* absoluut onder de kop: de kop heeft een backdrop-filter, waardoor 'fixed' hier niet vanaf het scherm zou rekenen */
  .mainnav { display:none; position:absolute; left:0; right:0; top:100%; height:calc(100dvh - var(--kop, 76px)); margin:0; background:var(--cream); overflow-y:auto; overscroll-behavior:contain; padding:10px var(--gutter) 40px; border-top:2px solid var(--line); }
  .top.sheet { background:var(--cream); }
  .top.sheet .mainnav { display:block; animation:zak .3s var(--ease-out); }
  .nav-list { flex-direction:column; gap:0; }
  .nav-item { border-bottom:2px solid var(--line); }
  .nav-item.is-here > .nav-btn::after { left:auto; right:2.2rem; bottom:50%; margin:0 0 -4.5px; }
  .nav-btn { width:100%; justify-content:space-between; font-size:1.35rem; font-weight:900; letter-spacing:-.02em; padding:1rem .2rem; border-radius:0; }
  .nav-btn:hover { background:none; }
  .nav-btn[aria-expanded="true"] { background:none; color:var(--blue); }
  .mega { position:static; box-shadow:none; border-top:0; background:none; }
  .mega-inner { grid-template-columns:1fr; padding:0 0 18px; gap:14px; }
  .mega-title { display:none; }
  .mega-intro p:not(.mega-title) { margin-bottom:.5rem; }
  .mega-topics, .mega-links { grid-template-columns:1fr 1fr; }
  #mm-apps .mega-cards { grid-template-columns:1fr; }
  .nav-extra { display:grid; gap:14px; margin-top:26px; justify-items:start; }
  .nav-extra a:not(.btn) { font-weight:700; text-decoration:none; font-size:1.1rem; }
  .util-nav { display:none; }
}
@media (max-width: 560px) {
  .top-cta { font-size:.9rem; padding:.7em .95em .75em; }
  .top-row { gap:12px; }
  .mega-topics, .mega-links { grid-template-columns:1fr; }
  .util { justify-content:center; text-align:center; }
}

/* =====================================================================
   ARTIKEL (tips, gidsen, school en opvang, vragen, juridisch)
   Afgeronde kop in de kleur van het onderwerp, één rustige leeskolom,
   op brede schermen een inhoudsopgave die meeloopt.
   ===================================================================== */
.page-hero { position:relative; isolation:isolate; overflow:hidden; margin:clamp(8px, 1.4vw, 18px) clamp(8px, 1.4vw, 18px) 0; border-radius:var(--r-card); background:var(--tint); padding:clamp(34px, 5vw, 76px) 0 clamp(40px, 5.5vw, 84px); }
/* twee steentjes in de onderwerpkleur geven diepte; ze ademen heel langzaam */
.page-hero::before, .page-hero::after { content:""; position:absolute; z-index:-1; border-radius:var(--pebble); background:var(--tint-diep); pointer-events:none; }
.page-hero::before { width:clamp(220px, 30vw, 440px); aspect-ratio:1; right:-7%; bottom:-38%; opacity:.55; }
.page-hero::after { width:clamp(70px, 8vw, 120px); aspect-ratio:1.1; right:clamp(18%, 24vw, 30%); top:clamp(18px, 3vw, 40px); opacity:.45; border-radius:55% 45% 52% 48% / 46% 58% 42% 54%; }
.motion .page-hero::before { animation:steen 9s ease-in-out infinite; }
.motion .page-hero::after { animation:steen 9s ease-in-out -4.5s infinite; }
@keyframes steen { 0%, 100% { transform:scale(1) rotate(0); } 50% { transform:scale(1.06) rotate(4deg); } }
.page-hero .wrap { position:relative; }
.page-hero h1 { font-weight:900; font-size:clamp(2.2rem, 1.35rem + 3.4vw, 4.5rem); line-height:.96; letter-spacing:-.035em; color:var(--blue); margin:0; max-width:17ch; text-wrap:balance; }
.page-hero .lead { color:var(--ink); max-width:50ch; }
.page-hero .pubdate { font-size:.88rem; color:var(--ink-soft); margin:1rem 0 0; font-weight:500; }
.page-hero .kicker, .kruimel { margin:0 0 1.2rem; }
.kruimel { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:.9rem; font-weight:700; }
.kruimel a { text-decoration:none; background:#fff; color:var(--blue); padding:.4em .85em .45em; border-radius:var(--pill); transition:transform .3s var(--ease-pop), box-shadow .3s; }
.kruimel a:hover { transform:translateY(-2px); box-shadow:2px 4px 0 var(--shadow); }
.kruimel .sep { width:14px; height:14px; fill:var(--ink); opacity:.4; flex:none; }
.kicker { display:inline-block; font-weight:700; font-size:.9rem; background:#fff; color:var(--blue); padding:.4em .85em .45em; border-radius:var(--pill); }
.kicker a { text-decoration:none; }
/* binnenkomen van de kop, alleen met beweging aan */
.motion .page-hero .wrap > * { animation:rijs .9s var(--ease-out) both; }
.motion .page-hero .wrap > :nth-child(2) { animation-delay:.08s; }
.motion .page-hero .wrap > :nth-child(3) { animation-delay:.16s; }
.motion .page-hero .wrap > :nth-child(4) { animation-delay:.24s; }
@keyframes rijs { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }

.artikel-sectie { padding-block:clamp(40px, 5vw, 72px) clamp(56px, 7vw, 100px); }
.artikel { display:grid; grid-template-columns:minmax(0, 1fr); grid-template-areas:"toc" "tekst" "kaart"; max-width:calc(46rem + 2 * var(--gutter)); }
.artikel-tekst { grid-area:tekst; min-width:0; }
.artikel-zij { display:contents; }
.artikel-zij .blog-toc { grid-area:toc; }
.artikel-zij .zij-kaart { grid-area:kaart; margin-top:3rem; }
@media (min-width: 1100px) {
  .artikel.met-zij { max-width:var(--maxw); grid-template-columns:minmax(0, 46rem) minmax(15rem, 18rem); grid-template-areas:"tekst zij"; justify-content:space-between; column-gap:clamp(40px, 5vw, 88px); }
  /* de tip staat bovenaan de zijkant; de inhoudsopgave (of anders de tip) loopt mee */
  .artikel.met-zij .artikel-zij { display:flex; flex-direction:column; gap:18px; grid-area:zij; }
  .artikel.met-zij .artikel-zij > * { grid-area:auto; margin-top:0; }
  .artikel.met-zij .zij-kaart { order:-1; }
  .artikel.met-zij .blog-toc, .artikel.met-zij .zij-kaart:only-child { position:sticky; top:calc(var(--kop-h) + 20px); max-height:calc(100vh - var(--kop-h) - 40px); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
}

/* leestekst */
.prose { font-size:clamp(1.06rem, 1rem + .25vw, 1.2rem); line-height:1.68; }
.prose > * { max-width:68ch; }
.prose h2 { font-weight:900; font-size:clamp(1.65rem, 1.25rem + 1.3vw, 2.35rem); line-height:1.02; letter-spacing:-.03em; color:var(--blue); margin:2.4em 0 .55em; text-wrap:balance; }
.prose > h2:first-child { margin-top:0; }
.prose h3 { font-weight:700; font-size:clamp(1.15rem, 1.05rem + .4vw, 1.4rem); letter-spacing:-.01em; margin:1.8em 0 .4em; line-height:1.2; }
.prose p { margin:0 0 1.05em; }
.prose strong { font-weight:700; }
.prose a { color:var(--blue); font-weight:500; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.2em; text-decoration-color:color-mix(in srgb, var(--blue) 35%, transparent); transition:text-decoration-color .2s, background-color .2s; border-radius:4px; }
.prose a:hover { text-decoration-color:var(--blue); background:color-mix(in srgb, var(--yellow) 35%, transparent); }
.prose ul, .blog-tldr ul { list-style:none; padding:0; margin:0 0 1.2em; }
.prose ul > li, .blog-tldr ul > li { position:relative; padding-left:1.6em; margin:0 0 .55em; }
.prose ul > li::before, .blog-tldr ul > li::before { content:""; position:absolute; left:.2em; top:.62em; width:.58em; height:.52em; border-radius:var(--pebble); background:var(--pink); }
.prose ol { counter-reset:stap; list-style:none; padding:0; margin:0 0 1.2em; }
.prose ol > li { counter-increment:stap; position:relative; padding-left:2.4em; margin:0 0 .7em; }
.prose ol > li::before { content:counter(stap); position:absolute; left:0; top:.05em; width:1.7em; height:1.7em; display:grid; place-items:center; font-weight:900; font-size:.85em; color:var(--cream); background:var(--blue); border-radius:var(--pebble); }
.prose blockquote { margin:1.6em 0; padding:1.1em 1.4em; background:#fff; border-radius:var(--r-mid); font-weight:500; font-size:1.1em; }
.prose table { width:100%; border-collapse:collapse; margin:1.4em 0; font-size:.95em; background:#fff; border-radius:18px; overflow:hidden; }
.prose th, .prose td { text-align:left; padding:.7em .9em; border-bottom:2px solid var(--line); vertical-align:top; }
.prose th { font-weight:700; background:var(--tint); }
.prose .source, .source { font-size:.9rem; line-height:1.55; color:var(--ink-soft); border-top:2px dashed var(--line); padding-top:1.1rem; margin-top:2.4rem; }
/* koppen komen rustig binnen tijdens het scrollen, waar de browser dat kan */
@supports (animation-timeline: view()) {
  .motion .prose h2 { animation:rijs linear both; animation-timeline:view(); animation-range:entry 0% entry 40%; }
}

/* video met een gekleurd plaatje erachter */
.video-frame { position:relative; margin:0 0 1rem; }
.video-frame::before { content:""; position:absolute; inset:0; z-index:0; border-radius:var(--r-mid); background:var(--tint-diep); transform:translate(10px, 12px) rotate(1.4deg); transition:transform .6s var(--ease-pop); }
.video-frame:hover::before { transform:translate(14px, 17px) rotate(2.4deg); }
.video-embed { position:relative; z-index:1; aspect-ratio:16 / 9; border-radius:var(--r-mid); overflow:hidden; background:var(--ink); }
.video-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
/* Video met afspeelknop: YouTube laadt pas na een klik (site.js) */
.yt { position:relative; aspect-ratio:16 / 9; border-radius:var(--r-mid); overflow:hidden; background:var(--ink); }
.yt button { display:block; width:100%; height:100%; border:0; padding:0; background:none; cursor:pointer; }
.yt button:focus-visible { outline-offset:-6px; }
.yt img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.yt:hover img { transform:scale(1.04); }
.yt .speel { position:absolute; left:50%; top:50%; width:74px; height:74px; margin:-37px 0 0 -37px; border-radius:var(--pebble); background:var(--pink); display:grid; place-items:center; box-shadow:var(--hard); transition:transform .4s var(--ease-pop); }
.yt:hover .speel { transform:scale(1.08) rotate(-6deg); }
.yt .speel svg { width:40%; height:40%; fill:var(--cream); margin-left:8%; }
.yt iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-cap { font-size:.95rem; color:var(--ink-soft); margin:1.4rem 0 2.6rem; }
.video-cap a { color:var(--blue); text-underline-offset:3px; }

/* in het kort */
.blog-tldr { background:var(--tint); border-radius:var(--r-mid); padding:clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 32px) clamp(10px, 1.4vw, 18px); margin:0 0 2.6rem; }
.blog-tldr > p:first-child { display:inline-block; font-weight:700; font-size:.9rem; background:#fff; color:var(--blue); padding:.35em .85em .4em; border-radius:var(--pill); margin:0 0 1rem; }
.blog-tldr ul > li::before { background:var(--blue); }

/* inhoudsopgave */
.blog-toc { background:#fff; border:2px solid var(--line); border-radius:var(--r-mid); padding:18px 20px 16px; margin:0 0 2.4rem; }
.blog-toc > p:first-child { font-weight:900; font-size:1.2rem; letter-spacing:-.02em; color:var(--blue); margin:0 0 .6rem; }
.blog-toc ol { list-style:none; counter-reset:toc; margin:0; padding:0; }
.blog-toc li { counter-increment:toc; margin:0; }
.blog-toc a { position:relative; display:grid; grid-template-columns:1.7em 1fr; gap:.2em; padding:.42em .5em .45em .3em; border-radius:12px; text-decoration:none; font-size:.95rem; line-height:1.3; color:var(--ink-soft); transition:background-color .2s, color .2s; }
.blog-toc a::before { content:counter(toc); font-weight:900; font-size:.85em; color:var(--ink); opacity:.45; padding-top:.08em; }
.blog-toc a:hover { background:rgba(41,35,72,.05); color:var(--ink); }
.blog-toc a[aria-current] { background:var(--tint); color:var(--ink); font-weight:700; }
.blog-toc a[aria-current]::before { opacity:1; color:var(--blue); }
@media (min-width: 1100px) { .met-zij .blog-toc { margin:0; } }

/* tip in de zijkant: dezelfde dienstkleuren als overal */
.zij-kaart { border-radius:var(--r-mid); padding:20px 20px 22px; background:#fff; display:grid; gap:.7rem; justify-items:start; }
.zij-kaart.svc-kaart-chill { background:var(--chill-tint); }
.zij-kaart.svc-kaart-spelen { background:var(--spelen-tint); }
.zij-kaart.svc-kaart-doen { background:var(--doen-tint); }
.zij-kaart b { font-weight:900; font-size:1.4rem; line-height:1; letter-spacing:-.025em; color:var(--blue); }
.zij-kaart p { margin:0; font-size:.98rem; }
.zij-kaart .btn { font-size:1rem; margin-top:.4rem; }

/* vragen */
.faq-list { margin-top:3.6rem; display:grid; gap:12px; }
.faq-list > .kicker { justify-self:start; font-size:clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight:900; letter-spacing:-.03em; background:none; padding:0; margin:0 0 .4rem; color:var(--blue); line-height:1; }
.faq-item { background:#fff; border-radius:22px; padding:clamp(18px, 2vw, 24px) clamp(18px, 2.2vw, 28px) clamp(6px, 1vw, 10px); transition:transform .4s var(--ease-pop); }
.faq-item:hover { transform:translateX(4px) rotate(-.25deg); }
.faq-item h2, .faq-item h3 { font-weight:700; font-size:clamp(1.1rem, 1rem + .35vw, 1.3rem); line-height:1.25; letter-spacing:-.01em; margin:0 0 .5rem; color:var(--ink); }
.faq-item p { font-size:1rem; color:var(--ink-soft); }
.faq-item a { color:var(--blue); text-underline-offset:3px; }
.pill-links { margin-top:3rem; }

/* meer over dit onderwerp: schermbrede band in de onderwerpkleur */
.meer { background:var(--tint); padding-block:clamp(56px, 7vw, 100px); position:relative; overflow:hidden; isolation:isolate; }
.meer::before { content:""; position:absolute; z-index:-1; left:-6%; top:-40%; width:clamp(240px, 32vw, 480px); aspect-ratio:1; border-radius:var(--pebble); background:var(--tint-diep); opacity:.45; }
.meer h2 { font-weight:900; font-size:clamp(2rem, 1.3rem + 2.6vw, 3.6rem); line-height:.96; letter-spacing:-.035em; color:var(--blue); margin:0 0 .5rem; max-width:18ch; text-wrap:balance; }
.meer .meer-intro { max-width:48ch; margin:0 0 1.8rem; font-weight:500; }
.meer-list { display:flex; flex-wrap:wrap; gap:12px 14px; list-style:none; margin:0; padding:0; }
.meer-list a { display:inline-flex; align-items:center; gap:.5em; text-decoration:none; font-weight:700; background:#fff; padding:.75em 1.1em .8em; border-radius:var(--pill); box-shadow:3px 5px 0 var(--shadow); transition:transform .35s var(--ease-pop), box-shadow .35s; }
.meer-list li:nth-child(3n+1) a { --tilt:-.8deg; } .meer-list li:nth-child(3n+2) a { --tilt:.6deg; } .meer-list li:nth-child(3n) a { --tilt:-.3deg; }
.meer-list a { transform:rotate(var(--tilt, 0deg)); }
.meer-list a:hover { transform:rotate(var(--tilt, 0deg)) translate(-2px, -4px); box-shadow:6px 9px 0 var(--shadow); }
.meer-list a:active { transform:rotate(var(--tilt, 0deg)) translate(3px, 4px); box-shadow:1px 2px 0 var(--shadow); transition-duration:.08s; }
.meer-list svg { width:1em; height:1em; fill:var(--pink); transition:transform .35s var(--ease-pop); }
.meer-list a:hover svg { transform:translateX(3px); }
.meer-alles { display:inline-block; margin-top:1.8rem; font-weight:700; color:var(--blue); text-underline-offset:4px; }

/* =====================================================================
   VOET
   ===================================================================== */
.foot { background:var(--blue); color:var(--cream); padding-block:clamp(60px, 8vw, 110px) 30px; }
.foot-claim { font-size:clamp(2.4rem, 1.4rem + 4vw, 5.2rem); max-width:12ch; }
.foot .actions { margin-top:1.8rem; }
.foot-grid { display:grid; grid-template-columns:1.1fr repeat(5, 1fr); gap:28px; margin-top:clamp(50px, 6vw, 90px); }
.foot-logo { display:block; width:170px; aspect-ratio:841.89 / 595.28; background:var(--cream); -webkit-mask:url("/assets/LOGO/Logo.svg") left center / contain no-repeat; mask:url("/assets/LOGO/Logo.svg") left center / contain no-repeat; }
.foot-brand p { margin-top:1rem; }
.foot-brand .foot-bedrijf { margin-top:.75rem; font-size:.85rem; line-height:1.5; opacity:.8; }
.foot-head { font-weight:700; font-size:1.1rem; margin:0 0 .8rem; color:var(--yellow); }
.foot-grid nav { display:grid; gap:.35rem; } .foot-grid nav a { text-decoration:none; font-weight:500; }
.foot-grid nav a:hover { text-decoration:underline; text-underline-offset:3px; }
.foot-social { display:flex !important; gap:10px !important; margin-top:.4rem; }
.foot-social a { width:44px; height:44px; display:grid; place-items:center; border-radius:var(--pebble); background:rgba(255,249,241,.12); transition:transform .35s var(--ease-pop), background-color .2s; }
.foot-social a:hover { background:var(--pink); transform:rotate(-8deg) scale(1.08); }
.foot-social svg { width:20px; height:20px; fill:var(--cream); }
.foot-bar { margin-top:50px; padding-top:22px; border-top:2px solid rgba(255,249,241,.2); display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; font-size:.95rem; }
.foot-bar nav { display:flex; flex-wrap:wrap; gap:6px 18px; }
.foot-bar a { text-decoration:none; }
.foot-bar a:hover { text-decoration:underline; text-underline-offset:3px; }
@media (max-width: 1100px) { .foot-grid { grid-template-columns:repeat(3, 1fr); } .foot-grid > :first-child { grid-column:1 / -1; } }
@media (max-width: 820px) { .foot-grid { grid-template-columns:1fr 1fr; } }

/* ---------- cookiekeuze ---------- */
.cookie-banner { position:fixed; left:clamp(12px, 2vw, 24px); bottom:clamp(12px, 2vw, 24px); z-index:60; max-width:min(440px, calc(100vw - 24px)); background:var(--cream); border:2.5px solid var(--ink); border-radius:var(--r-mid); box-shadow:var(--hard); padding:18px 20px 20px; transform:translateY(24px); opacity:0; transition:transform .45s var(--ease-pop), opacity .3s; }
.cookie-banner.show { transform:none; opacity:1; }
.cookie-text { font-size:.95rem; margin:0 0 .9rem; }
.cookie-actions { display:flex; flex-wrap:wrap; gap:12px; }
.cookie-btn { font-size:.98rem; padding:.75em 1.15em .8em; }

/* ---------- binnenkomen ---------- */
.motion [data-reveal] { opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease-out), transform .9s var(--ease-pop); }
.motion [data-reveal].in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
@media print {
  .util, .top, .foot, .cookie-banner, .artikel-zij, .meer, .video-frame, .video-cap { display:none !important; }
  .page-hero { background:none; margin:0; }
  body { background:#fff; }
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* =====================================================================
   BEELDBLOK IN LAGEN
   Zoals de spelintro's: een effen vlek, het beeld dat er half overheen
   staat, en losse accentstreepjes. Drie lagen die op eigen snelheid
   meebewegen met scrollen en (op desktop) met de muis.
   Gebruik: <figure class="beeld" data-beeld data-vorm="1|2|3"> met
   een <svg class="beeld-vlek">, het beeld (.beeld-onderwerp) en een
   <svg class="beeld-accent">. Kleuren via --vlek, --accent-a, --accent-b.
   De standen (--py, --mx, --my) schuift site.js elk frame zacht bij,
   dus hier geen transition op transform: die zou bij elke muisbeweging
   opnieuw beginnen en laten haperen.
   ===================================================================== */
.beeld { --vlek:var(--sky); --accent-a:var(--pink); --accent-b:var(--yellow); --py:0; --mx:0; --my:0; position:relative; isolation:isolate; margin:0; display:grid; place-items:end center; }
.beeld > * { grid-area:1 / 1; }
.beeld-vlek, .beeld-accent { position:absolute; pointer-events:none; }
.beeld-vlek { z-index:-1; inset:2% 3% 10% 3%; width:94%; height:88%; color:var(--vlek); transform:translate3d(calc(var(--mx) * -8px), calc(var(--py) * 26px + var(--my) * -6px), 0) rotate(calc(var(--py) * -4deg)); will-change:transform; }
.beeld-onderwerp { position:relative; width:100%; height:auto; filter:drop-shadow(0 22px 26px rgba(41,35,72,.18)); transform:translate3d(calc(var(--mx) * 6px), calc(var(--py) * -14px + var(--my) * 4px), 0); will-change:transform; }
.beeld-accent { z-index:2; inset:-10%; width:120%; height:120%; overflow:visible; transform:translate3d(calc(var(--mx) * 16px), calc(var(--py) * -46px + var(--my) * 10px), 0) rotate(calc(var(--py) * 7deg)); will-change:transform; }
/* Beeld met een eigen effen achtergrond in precies de kleur van zijn vak (vlak + figuren al in het beeld).
   De randen vloeien zacht weg, dus het beeld mag met de muis en de scroll meeschuiven. */
.vlak-beeld { --accent-a:var(--pink); --accent-b:var(--yellow); position:relative; margin:0; }
.vlak-beeld > img { display:block; width:100%; height:auto; transform:translate3d(calc(var(--mx, 0) * 6px), calc(var(--py, 0) * -14px + var(--my, 0) * 4px), 0); will-change:transform;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent); mask-composite:intersect; }
@media (prefers-reduced-motion: reduce) { .vlak-beeld > img { transform:none !important; } }
/* de streepjes in een vierkant dat meeschaalt met de vorm van het beeld (--vorm = hoogte / breedte),
   zodat ze bij brede beelden niet ver boven en onder het beeld uitsteken */
.vlak-beeld .beeld-accent, .home-beeld .beeld-accent { inset:auto; left:50%; top:50%; width:calc(min(1.2, 1.2 * var(--vorm, 1.25)) * 100%); height:auto; aspect-ratio:1; translate:-50% -50%; }
.onderwerp-beeld, .tips-beeld { --vorm:1; }
/* gidsen: het onderwerpbeeld rechts in de paginakop, in plaats van de losse steentjes */
.page-hero.met-onderwerp::before, .page-hero.met-onderwerp::after { display:none; }
.page-hero.met-onderwerp .wrap { display:grid; grid-template-columns:minmax(0, 1fr) clamp(260px, 36vw, 520px); column-gap:clamp(20px, 4vw, 56px); }
.page-hero.met-onderwerp .wrap > * { grid-column:1; }
.page-hero.met-onderwerp .wrap > .onderwerp-beeld { grid-column:2; grid-row:1 / span 8; align-self:center; margin-block:calc(clamp(34px, 5vw, 76px) * -.8) calc(clamp(40px, 5.5vw, 84px) * -.8); }
@media (max-width: 760px) {
  .page-hero.met-onderwerp .wrap { grid-template-columns:1fr; }
  .page-hero.met-onderwerp .wrap > .onderwerp-beeld { grid-column:1; grid-row:auto; width:min(88%, 380px); justify-self:center; margin:8px 0 calc(clamp(40px, 5.5vw, 84px) * -.7); }
}
.beeld .ph { width:100%; min-height:clamp(260px, 30vw, 400px); background:rgba(255,255,255,.35); }
/* binnenkomen: de vlek groeit, het beeld wipt op, de streepjes volgen */
.motion .beeld[data-reveal] { opacity:1; transform:none; }
.motion .beeld[data-reveal] .beeld-vlek { scale:.82; opacity:0; transition:scale .9s var(--ease-pop), opacity .6s; }
.motion .beeld[data-reveal] .beeld-onderwerp { translate:0 40px; opacity:0; transition:translate 1s var(--ease-pop) .12s, opacity .6s .12s; }
.motion .beeld[data-reveal] .beeld-accent { scale:.6; opacity:0; transition:scale .8s var(--ease-pop) .3s, opacity .5s .3s; }
.motion .beeld[data-reveal].in .beeld-vlek, .motion .beeld[data-reveal].in .beeld-onderwerp, .motion .beeld[data-reveal].in .beeld-accent { scale:1; translate:0 0; opacity:1; }
@media (prefers-reduced-motion: reduce) { .beeld-vlek, .beeld-onderwerp, .beeld-accent { transform:none !important; } }

/* wegwijzer bovenaan juridische pagina's: over welk product gaat dit? */
.wegwijzer { background:var(--sky); border-radius:var(--r-mid); padding:clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px); margin:1.2rem 0 1.8rem; }
.wegwijzer p { margin:0; }
.wegwijzer p + p { margin-top:.6rem; }
.wegwijzer a { font-weight:700; }
.wegwijzer.concept { background:#FFE3A1; }
/* open punten in conceptteksten (alleen op de testsite) */
mark.open { background:#FFE3A1; color:var(--ink); padding:.05em .3em; border-radius:4px; outline:1.5px dashed #F5A300; outline-offset:1px; }